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

package/dist/types/src/containers/Container.vue.d.ts

@@ -30,6 +30,7 @@ declare const _default: DefineComponent<{
     itemProp: ComputedRef<string>;
     items: ComputedRef<FormConfig>;
     display: ComputedRef<boolean>;
+    itemLabelWidth: ComputedRef<string | undefined>;
     tagName: ComputedRef<ConcreteComponent<{}, any, any, ComputedOptions, MethodOptions> | "m-fields-text">;
     rule: ComputedRef<Rule[]>;
     tooltip: ComputedRef<any>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.15",
+  "version": "1.0.0-beta.16",
   "name": "@tmagic/form",
   "sideEffects": [
     "dist/*",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/utils": "^1.0.0-beta.15",
+    "@tmagic/utils": "^1.0.0-beta.16",
     "element-plus": "^2.2.0",
     "lodash-es": "^4.17.21",
     "moment": "^2.29.2",
@@ -62,5 +62,5 @@
     "vite-plugin-dts": "^0.9.6",
     "vue-tsc": "^0.0.24"
   },
-  "gitHead": "340e4e3018c8699d6cf49001e0c367996ecea857"
+  "gitHead": "2aebfb1b8ceb5c8e26dfb59b643ed9f4f4b7bd15"
 }

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>
@@ -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>
@@ -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/Table.vue

@@ -43,6 +43,7 @@
                 <el-button
                   plain
                   size="small"
+                  type="primary"
                   :icon="ArrowUp"
                   text
                   @click="upHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
@@ -57,6 +58,7 @@
                 <el-button
                   plain
                   size="small"
+                  type="primary"
                   :icon="ArrowDown"
                   text
                   @click="downHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
@@ -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/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 text @click="editHandler">点击编辑</el-button>
+    <el-button text type="primary" @click="editHandler">点击编辑</el-button>
     <m-form-dialog
       ref="editor"
       :title="config.formTitle || '编辑扩展配置'"

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;
+    }
   }
 }