@tmagic/form 1.0.0-beta.13 → 1.0.0-beta.16

package/package.json

@@ -1,7 +1,10 @@
 {
-  "version": "1.0.0-beta.13",
+  "version": "1.0.0-beta.16",
   "name": "@tmagic/form",
-  "sideEffects": false,
+  "sideEffects": [
+    "dist/*",
+    "src/theme/*"
+  ],
   "main": "dist/tmagic-form.umd.js",
   "module": "dist/tmagic-form.es.js",
   "style": "dist/style.css",
@@ -14,7 +17,8 @@
     "./dist/style.css": {
       "import": "./dist/style.css",
       "require": "./dist/style.css"
-    }
+    },
+    "./*": "./*"
   },
   "license": "Apache-2.0",
   "scripts": {
@@ -31,8 +35,8 @@
   },
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/utils": "^1.0.0-beta.13",
-    "element-plus": "^2.1.7",
+    "@tmagic/utils": "^1.0.0-beta.16",
+    "element-plus": "^2.2.0",
     "lodash-es": "^4.17.21",
     "moment": "^2.29.2",
     "sortablejs": "^1.14.0",
@@ -58,5 +62,5 @@
     "vite-plugin-dts": "^0.9.6",
     "vue-tsc": "^0.0.24"
   },
-  "gitHead": "ca2b203614cbdaff580e5cb6f35630f50b827451"
+  "gitHead": "2aebfb1b8ceb5c8e26dfb59b643ed9f4f4b7bd15"
 }

package/src/Form.vue

@@ -177,7 +177,7 @@ export default defineComponent({
       submitForm: async (native?: boolean): Promise<any> => {
         try {
           await elForm.value?.validate();
-          return native ? values.value : cloneDeep(values.value);
+          return native ? values.value : cloneDeep(toRaw(values.value));
         } catch (invalidFields: any) {
           const error: string[] = [];
 

package/src/containers/Col.vue

@@ -0,0 +1,56 @@
+<template>
+  <el-col v-show="display && config.type !== 'hidden'" :span="span">
+    <m-form-container
+      :model="model"
+      :config="config"
+      :prop="prop"
+      :label-width="config.labelWidth || labelWidth"
+      :expand-more="expandMore"
+      :size="size"
+      @change="changeHandler"
+    ></m-form-container>
+  </el-col>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject, PropType } from 'vue';
+
+import { ChildConfig, FormState } from '../schema';
+import { display as displayFunction } from '../utils/form';
+
+export default defineComponent({
+  props: {
+    labelWidth: String,
+    expandMore: Boolean,
+    span: Number,
+
+    model: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    config: {
+      type: Object as PropType<ChildConfig>,
+      default: () => ({}),
+    },
+
+    prop: String,
+
+    size: String,
+  },
+
+  emits: ['change'],
+
+  setup(props, { emit }) {
+    const mForm = inject<FormState | undefined>('mForm');
+
+    const changeHandler = () => emit('change', props.model);
+
+    return {
+      mForm,
+      display: computed(() => displayFunction(mForm, props.config.display, props)),
+      changeHandler,
+    };
+  },
+});
+</script>

package/src/containers/Container.vue

@@ -25,15 +25,16 @@
       :prop="itemProp"
       :step-active="stepActive"
       :expand-more="expand"
-      :label-width="config.labelWidth || labelWidth"
+      :label-width="itemLabelWidth"
       @change="onChangeHandler"
     ></component>
 
     <template v-else-if="type && display">
       <el-form-item
         :style="config.tip ? 'flex: 1' : ''"
+        :class="{ hidden: itemLabelWidth === 0 || !config.text }"
         :prop="itemProp"
-        :label-width="config.text ? config.labelWidth || labelWidth : '0'"
+        :label-width="itemLabelWidth"
         :rules="rule"
       >
         <template #label><span v-html="type === 'checkbox' ? '' : config.text"></span></template>
@@ -70,7 +71,7 @@
         <div v-if="extra" v-html="extra" class="m-form-tip"></div>
       </el-form-item>
 
-      <el-tooltip v-if="config.tip" placement="top">
+      <el-tooltip v-if="config.tip" placement="left">
         <el-icon style="line-height: 40px; margin-left: 5px"><warning-filled /></el-icon>
         <template #content>
           <div v-html="config.tip"></div>
@@ -88,7 +89,7 @@
           :size="size"
           :step-active="stepActive"
           :expand-more="expand"
-          :label-width="config.labelWidth || labelWidth"
+          :label-width="itemLabelWidth"
           :prop="itemProp"
           @change="onChangeHandler"
         ></m-form-container>
@@ -96,7 +97,7 @@
     </template>
 
     <div style="text-align: center" v-if="config.expand && type !== 'fieldset'">
-      <el-button type="text" @click="expandHandler">{{ expand ? '收起配置' : '展开更多配置' }}</el-button>
+      <el-button text @click="expandHandler">{{ expand ? '收起配置' : '展开更多配置' }}</el-button>
     </div>
   </div>
 </template>
@@ -188,6 +189,8 @@ export default defineComponent({
       return displayFunction(mForm, props.config.display, props);
     });
 
+    const itemLabelWidth = computed(() => props.config.labelWidth || props.labelWidth);
+
     watchEffect(() => {
       expand.value = props.expandMore;
     });
@@ -263,6 +266,7 @@ export default defineComponent({
       itemProp,
       items,
       display,
+      itemLabelWidth,
       tagName,
       rule,
       tooltip,

package/src/containers/GroupListItem.vue

@@ -5,21 +5,21 @@
         ><caret-bottom v-if="expand" /><caret-right v-else
       /></el-icon>
 
-      <el-button type="text" @click="expandHandler">{{ title }}</el-button>
+      <el-button text @click="expandHandler">{{ title }}</el-button>
 
       <el-button
         v-show="showDelete(parseInt(String(index)))"
-        type="text"
+        text
         :icon="Delete"
         style="color: #f56c6c"
         @click="removeHandler"
       ></el-button>
 
       <template v-if="movable()">
-        <el-button v-show="index !== 0" type="text" size="small" @click="changeOrder(-1)"
+        <el-button v-show="index !== 0" text size="small" @click="changeOrder(-1)"
           >上移<el-icon><CaretRight /></el-icon
         ></el-button>
-        <el-button v-show="index !== length - 1" type="text" size="small" @click="changeOrder(1)"
+        <el-button v-show="index !== length - 1" text size="small" @click="changeOrder(1)"
           >下移<el-icon><CaretBottom /></el-icon
         ></el-button>
       </template>

package/src/containers/Row.vue

@@ -1,21 +1,17 @@
 <template>
   <el-row :gutter="10">
-    <el-col
+    <Col
       v-for="(col, index) in config.items"
-      :style="!display(col) || col.type === 'hidden' ? 'display: none' : ''"
       :key="col[mForm?.keyProp || '__key'] ?? index"
       :span="col.span || config.span || 24 / config.items.length"
-    >
-      <m-form-container
-        :model="name ? model[name] : model"
-        :config="col"
-        :prop="prop"
-        :label-width="config.labelWidth || labelWidth"
-        :expand-more="expandMore"
-        :size="size"
-        @change="changeHandler"
-      ></m-form-container>
-    </el-col>
+      :config="col"
+      :labelWidth="config.labelWidth || labelWidth"
+      :expandMore="expandMore"
+      :model="name ? model[name] : model"
+      :prop="prop"
+      :size="size"
+      @change="changeHandler"
+    />
   </el-row>
 </template>
 
@@ -23,11 +19,14 @@
 import { defineComponent, inject, PropType } from 'vue';
 
 import { FormState, RowConfig } from '../schema';
-import { display as displayFunction } from '../utils/form';
+
+import Col from './Col.vue';
 
 export default defineComponent({
   name: 'm-form-row',
 
+  components: { Col },
+
   props: {
     labelWidth: String,
     expandMore: Boolean,
@@ -58,9 +57,6 @@ export default defineComponent({
 
     return {
       mForm,
-      display(config: any) {
-        return displayFunction(mForm, config.display, props);
-      },
       changeHandler,
     };
   },

package/src/containers/Table.vue

@@ -25,8 +25,8 @@
             <template v-slot="scope">
               <el-button
                 v-show="showDelete(scope.$index + 1 + pagecontext * pagesize - 1)"
-                style="color: #f56c6c"
-                type="text"
+                type="danger"
+                text
                 :icon="Delete"
                 @click="removeHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
               ></el-button>
@@ -43,8 +43,9 @@
                 <el-button
                   plain
                   size="small"
+                  type="primary"
                   :icon="ArrowUp"
-                  type="text"
+                  text
                   @click="upHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
                   @dblclick="topHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
                 ></el-button>
@@ -57,8 +58,9 @@
                 <el-button
                   plain
                   size="small"
+                  type="primary"
                   :icon="ArrowDown"
-                  type="text"
+                  text
                   @click="downHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
                   @dblclick="bottomHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
                 ></el-button>
@@ -107,10 +109,16 @@
       </el-tooltip>
       <slot></slot>
       <el-button v-if="addable" size="small" type="primary" plain @click="newHandler()">添加</el-button> &nbsp;
-      <el-button :icon="Grid" size="small" @click="toggleMode" v-if="enableToggleMode && !isFullscreen"
+      <el-button :icon="Grid" size="small" type="primary" @click="toggleMode" v-if="enableToggleMode && !isFullscreen"
         >展开配置</el-button
       >
-      <el-button :icon="FullScreen" size="small" @click="toggleFullscreen" v-if="config.enableFullscreen !== false">
+      <el-button
+        :icon="FullScreen"
+        size="small"
+        type="primary"
+        @click="toggleFullscreen"
+        v-if="config.enableFullscreen !== false"
+      >
         {{ isFullscreen ? '退出全屏' : '全屏编辑' }}
       </el-button>
       <el-upload

package/src/fields/Checkbox.vue

@@ -43,7 +43,7 @@ export default defineComponent({
           return props.config.activeValue;
         }
 
-        return 'true';
+        return undefined;
       }),
 
       inactiveValue: computed(() => {
@@ -55,7 +55,7 @@ export default defineComponent({
           return props.config.inactiveValue;
         }
 
-        return 'false';
+        return undefined;
       }),
 
       changeHandler(value: number | boolean) {

package/src/fields/Link.vue

@@ -2,7 +2,7 @@
   <a v-if="config.href && !disabled" target="_blank" :href="href" :style="config.css || {}">{{ displayText }}</a>
   <span v-else-if="config.href && disabled" :style="config.disabledCss || {}">{{ displayText }}</span>
   <div v-else class="m-fields-link">
-    <el-button type="text" @click="editHandler">点击编辑</el-button>
+    <el-button text type="primary" @click="editHandler">点击编辑</el-button>
     <m-form-dialog
       ref="editor"
       :title="config.formTitle || '编辑扩展配置'"

package/src/fields/Textarea.vue

@@ -1,17 +1,15 @@
 <template>
-  <div v-if="model">
-    <el-input
-      v-model="model[name]"
-      type="textarea"
-      :size="size"
-      clearable
-      :placeholder="config.placeholder"
-      :disabled="disabled"
-      @change="changeHandler"
-      @input="inputHandler"
-    >
-    </el-input>
-  </div>
+  <el-input
+    v-model="model[name]"
+    type="textarea"
+    :size="size"
+    clearable
+    :placeholder="config.placeholder"
+    :disabled="disabled"
+    @change="changeHandler"
+    @input="inputHandler"
+  >
+  </el-input>
 </template>
 
 <script lang="ts">

package/src/theme/form.scss

@@ -2,29 +2,36 @@
 .fade-leave-active {
   transition: opacity 0.5s;
 }
+
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
 }
 
-.m-form,
-.m-form-panel.el-card .el-card__body {
-  color: #333;
-  background-color: #fff;
-}
+.m-form {
+  .m-form-tip {
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 12px;
+    transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
 
-.m-form .m-form-tip {
-  color: rgba(0, 0, 0, 0.45);
-  font-size: 12px;
-  transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-}
+  .m-form-schematic {
+    max-width: 50%;
+    height: 100%;
+  }
 
-.m-form .m-form-schematic {
-  max-width: 50%;
-  height: 100%;
-}
+  .el-table {
+    .cell > div.m-form-container {
+      display: block;
+    }
+  }
+
+  .el-tabs {
+    margin-bottom: 10px;
+  }
 
-.el-table {
-  .cell > div.m-form-container {
-    display: block;
+  .el-form-item.hidden {
+    .el-form-item__label {
+      display: none;
+    }
   }
 }