feat(vjsf): 表单配置inline时 调整整体样式

re #14

Author: lljj-x

packages/lib/src/JsonSchemaForm/FormFooter.vue

@@ -1,7 +1,7 @@
 <template>
-    <el-form-item :class="$style.item">
-        <el-button size="small" @click="$emit('onCancel')">{{ cancelBtn }}</el-button>
-        <el-button size="small" type="primary" @click="$emit('onSubmit')">{{ okBtn }}</el-button>
+    <el-form-item class="formFooter_item">
+        <el-button @click="$emit('onCancel')">{{ cancelBtn }}</el-button>
+        <el-button type="primary" @click="$emit('onSubmit')">{{ okBtn }}</el-button>
     </el-form-item>
 </template>
 
@@ -20,11 +20,3 @@
         }
     };
 </script>
-
-<style module>
-    .item {
-        text-align: right;
-        border-top: 1px solid rgba(0, 0, 0, 0.08);
-        padding-top: 10px;
-    }
-</style>

packages/lib/src/JsonSchemaForm/fields/SchemaField/index.js

@@ -55,7 +55,8 @@ export default {
                 h(FIELDS_MAP.anyOf, {
                     class: {
                         [`${pathClassName}-anyOf`]: true,
-                        AnyOfField: true
+                        fieldItem: true,
+                        anyOfField: true
                     },
                     props: curProps
                 })
@@ -66,7 +67,8 @@ export default {
                 h(FIELDS_MAP.oneOf, {
                     class: {
                         [`${pathClassName}-oneOf`]: true,
-                        OneOfField: true
+                        fieldItem: true,
+                        oneOfField: true
                     },
                     props: curProps
                 })
@@ -83,6 +85,7 @@ export default {
                         ...context.data.class,
                         [lowerCase(fieldComponent.name) || fieldComponent]: true,
                         hiddenWidget,
+                        fieldItem: true,
                         [pathClassName]: true
                     }
                 })

packages/lib/src/JsonSchemaForm/index.css

@@ -208,4 +208,27 @@
     .arrayListItem_btn-delete {
         background-color: #fef0f0;
     }
+
+    .formFooter_item {
+        text-align: right;
+        border-top: 1px solid rgba(0, 0, 0, 0.08);
+        padding-top: 10px;
+    }
+    &.el-form--inline {
+        .appendCombining_box,.fieldGroupWrap, .fieldItem{
+            display: inline-block;
+            vertical-align: top;
+        }
+        .fieldGroupWrap {
+            margin-right: 10px;
+            vertical-align: top;
+        }
+        .validateWidget {
+            margin-right: 0;
+        }
+        .formFooter_item {
+            border-top: none;
+            padding-top: 0;
+        }
+    }
 }