@tmagic/form 1.3.16 → 1.4.0-beta.1

package/dist/style.css

@@ -222,7 +222,7 @@ fieldset.m-fieldset .m-form-tip {
   display: flex;
   flex-direction: column;
   padding: 16px;
-  width: 100%;
+  box-sizing: border-box;
 }
 .m-form-box .el-box__header {
   margin: 0;

package/dist/tmagic-form.js

@@ -167,15 +167,15 @@ const initValue = async (mForm, { initValues, config }) => {
 };
 
 const _hoisted_1$e = ["id", "data-magic-id"];
-const _hoisted_2$9 = ["innerHTML"];
+const _hoisted_2$9 = ["innerHTML", "title"];
 const _hoisted_3$5 = ["innerHTML"];
 const _hoisted_4$4 = ["innerHTML"];
 const _hoisted_5$4 = ["innerHTML"];
-const _hoisted_6$2 = ["innerHTML"];
+const _hoisted_6$2 = ["innerHTML", "title"];
 const _hoisted_7$1 = ["innerHTML"];
 const _hoisted_8$1 = ["innerHTML"];
 const _hoisted_9 = ["innerHTML"];
-const _hoisted_10 = ["innerHTML"];
+const _hoisted_10 = ["innerHTML", "title"];
 const _hoisted_11 = ["innerHTML"];
 const _hoisted_12 = ["innerHTML"];
 const _hoisted_13 = ["innerHTML"];
@@ -371,7 +371,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           }, {
             label: withCtx(() => [
               createElementVNode("span", {
-                innerHTML: type.value === "checkbox" ? "" : text.value
+                innerHTML: type.value === "checkbox" ? "" : text.value,
+                title: _ctx.config.labelTitle
               }, null, 8, _hoisted_2$9)
             ]),
             default: withCtx(() => [
@@ -443,7 +444,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           }, {
             label: withCtx(() => [
               createElementVNode("span", {
-                innerHTML: type.value === "checkbox" ? "" : text.value
+                innerHTML: type.value === "checkbox" ? "" : text.value,
+                title: _ctx.config.labelTitle
               }, null, 8, _hoisted_6$2)
             ]),
             default: withCtx(() => [
@@ -510,7 +512,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           }, {
             label: withCtx(() => [
               createElementVNode("span", {
-                innerHTML: type.value === "checkbox" ? "" : text.value
+                innerHTML: type.value === "checkbox" ? "" : text.value,
+                title: _ctx.config.labelTitle
               }, null, 8, _hoisted_10)
             ]),
             default: withCtx(() => [
@@ -2263,13 +2266,14 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         placeholder: _ctx.config.placeholder,
         disabled: _ctx.disabled,
         options: options.value,
+        "popper-class": _ctx.config.popperClass,
         props: {
           multiple: _ctx.config.multiple ?? false,
           emitPath: _ctx.config.emitPath ?? true,
           checkStrictly: _ctx.config.checkStrictly ?? false
         },
         onChange: changeHandler
-      }, null, 8, ["modelValue", "size", "placeholder", "disabled", "options", "props"]);
+      }, null, 8, ["modelValue", "size", "placeholder", "disabled", "options", "popper-class", "props"]);
     };
   }
 });
@@ -2323,8 +2327,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         modelValue: _ctx.model[_ctx.name],
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
         size: _ctx.size,
-        trueLabel: activeValue.value,
-        falseLabel: inactiveValue.value,
+        trueValue: activeValue.value,
+        falseValue: inactiveValue.value,
         disabled: _ctx.disabled,
         onChange: changeHandler
       }, {
@@ -2332,7 +2336,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           createTextVNode(toDisplayString(_ctx.config.text), 1)
         ]),
         _: 1
-      }, 8, ["modelValue", "size", "trueLabel", "falseLabel", "disabled"]);
+      }, 8, ["modelValue", "size", "trueValue", "falseValue", "disabled"]);
     };
   }
 });
@@ -2383,7 +2387,6 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(options.value, (option) => {
             return openBlock(), createBlock(unref(TMagicCheckbox), {
-              label: option.value,
               value: option.value,
               key: option.value,
               disabled: option.disabled
@@ -2392,7 +2395,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                 createTextVNode(toDisplayString(option.text), 1)
               ]),
               _: 2
-            }, 1032, ["label", "value", "disabled"]);
+            }, 1032, ["value", "disabled"]);
           }), 128))
         ]),
         _: 1
@@ -3389,7 +3392,6 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.config.options, (option) => {
             return openBlock(), createBlock(unref(TMagicRadio), {
-              label: option.value,
               value: option.value,
               key: `${option.value}`
             }, {
@@ -3397,7 +3399,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 createTextVNode(toDisplayString(option.text), 1)
               ]),
               _: 2
-            }, 1032, ["label", "value"]);
+            }, 1032, ["value"]);
           }), 128))
         ]),
         _: 1
@@ -4032,7 +4034,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                     createTextVNode(toDisplayString(appendConfig.value.text), 1)
                   ]),
                   _: 1
-                }, 8, ["size", "onClick"])) : createCommentVNode("", true)
+                }, 8, ["size"])) : createCommentVNode("", true)
               ]),
               key: "0"
             } : void 0

package/dist/tmagic-form.umd.cjs

@@ -166,15 +166,15 @@
   };
 
   const _hoisted_1$e = ["id", "data-magic-id"];
-  const _hoisted_2$9 = ["innerHTML"];
+  const _hoisted_2$9 = ["innerHTML", "title"];
   const _hoisted_3$5 = ["innerHTML"];
   const _hoisted_4$4 = ["innerHTML"];
   const _hoisted_5$4 = ["innerHTML"];
-  const _hoisted_6$2 = ["innerHTML"];
+  const _hoisted_6$2 = ["innerHTML", "title"];
   const _hoisted_7$1 = ["innerHTML"];
   const _hoisted_8$1 = ["innerHTML"];
   const _hoisted_9 = ["innerHTML"];
-  const _hoisted_10 = ["innerHTML"];
+  const _hoisted_10 = ["innerHTML", "title"];
   const _hoisted_11 = ["innerHTML"];
   const _hoisted_12 = ["innerHTML"];
   const _hoisted_13 = ["innerHTML"];
@@ -370,7 +370,8 @@
             }, {
               label: vue.withCtx(() => [
                 vue.createElementVNode("span", {
-                  innerHTML: type.value === "checkbox" ? "" : text.value
+                  innerHTML: type.value === "checkbox" ? "" : text.value,
+                  title: _ctx.config.labelTitle
                 }, null, 8, _hoisted_2$9)
               ]),
               default: vue.withCtx(() => [
@@ -442,7 +443,8 @@
             }, {
               label: vue.withCtx(() => [
                 vue.createElementVNode("span", {
-                  innerHTML: type.value === "checkbox" ? "" : text.value
+                  innerHTML: type.value === "checkbox" ? "" : text.value,
+                  title: _ctx.config.labelTitle
                 }, null, 8, _hoisted_6$2)
               ]),
               default: vue.withCtx(() => [
@@ -509,7 +511,8 @@
             }, {
               label: vue.withCtx(() => [
                 vue.createElementVNode("span", {
-                  innerHTML: type.value === "checkbox" ? "" : text.value
+                  innerHTML: type.value === "checkbox" ? "" : text.value,
+                  title: _ctx.config.labelTitle
                 }, null, 8, _hoisted_10)
               ]),
               default: vue.withCtx(() => [
@@ -2262,13 +2265,14 @@
           placeholder: _ctx.config.placeholder,
           disabled: _ctx.disabled,
           options: options.value,
+          "popper-class": _ctx.config.popperClass,
           props: {
             multiple: _ctx.config.multiple ?? false,
             emitPath: _ctx.config.emitPath ?? true,
             checkStrictly: _ctx.config.checkStrictly ?? false
           },
           onChange: changeHandler
-        }, null, 8, ["modelValue", "size", "placeholder", "disabled", "options", "props"]);
+        }, null, 8, ["modelValue", "size", "placeholder", "disabled", "options", "popper-class", "props"]);
       };
     }
   });
@@ -2322,8 +2326,8 @@
           modelValue: _ctx.model[_ctx.name],
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
           size: _ctx.size,
-          trueLabel: activeValue.value,
-          falseLabel: inactiveValue.value,
+          trueValue: activeValue.value,
+          falseValue: inactiveValue.value,
           disabled: _ctx.disabled,
           onChange: changeHandler
         }, {
@@ -2331,7 +2335,7 @@
             vue.createTextVNode(vue.toDisplayString(_ctx.config.text), 1)
           ]),
           _: 1
-        }, 8, ["modelValue", "size", "trueLabel", "falseLabel", "disabled"]);
+        }, 8, ["modelValue", "size", "trueValue", "falseValue", "disabled"]);
       };
     }
   });
@@ -2382,7 +2386,6 @@
           default: vue.withCtx(() => [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(options.value, (option) => {
               return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCheckbox), {
-                label: option.value,
                 value: option.value,
                 key: option.value,
                 disabled: option.disabled
@@ -2391,7 +2394,7 @@
                   vue.createTextVNode(vue.toDisplayString(option.text), 1)
                 ]),
                 _: 2
-              }, 1032, ["label", "value", "disabled"]);
+              }, 1032, ["value", "disabled"]);
             }), 128))
           ]),
           _: 1
@@ -3388,7 +3391,6 @@
           default: vue.withCtx(() => [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.config.options, (option) => {
               return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicRadio), {
-                label: option.value,
                 value: option.value,
                 key: `${option.value}`
               }, {
@@ -3396,7 +3398,7 @@
                   vue.createTextVNode(vue.toDisplayString(option.text), 1)
                 ]),
                 _: 2
-              }, 1032, ["label", "value"]);
+              }, 1032, ["value"]);
             }), 128))
           ]),
           _: 1
@@ -4031,7 +4033,7 @@
                       vue.createTextVNode(vue.toDisplayString(appendConfig.value.text), 1)
                     ]),
                     _: 1
-                  }, 8, ["size", "onClick"])) : vue.createCommentVNode("", true)
+                  }, 8, ["size"])) : vue.createCommentVNode("", true)
                 ]),
                 key: "0"
               } : void 0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.16",
+  "version": "1.4.0-beta.1",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -32,14 +32,14 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
-    "@tmagic/design": "1.3.16",
-    "@tmagic/utils": "1.3.16",
+    "@tmagic/design": "1.4.0-beta.1",
+    "@tmagic/utils": "1.4.0-beta.1",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.14.0",
-    "vue": "^3.3.8"
+    "vue": "^3.4.21"
   },
   "peerDependencies": {
-    "vue": "^3.3.8"
+    "vue": "^3.4.21"
   },
   "devDependencies": {
     "@babel/core": "^7.18.0",
@@ -47,17 +47,18 @@
     "@types/node": "^18.19.0",
     "@types/sortablejs": "^1.10.7",
     "@vitejs/plugin-vue": "^4.5.2",
-    "@vue/compiler-sfc": "^3.3.8",
-    "@vue/test-utils": "^2.3.2",
+    "@vue/compiler-sfc": "^3.4.21",
+    "@vue/test-utils": "^2.4.4",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
-    "typescript": "^5.0.4",
-    "vite": "^5.0.7",
-    "vue-tsc": "^1.8.25"
+    "typescript": "^5.4.2",
+    "vite": "^5.1.6",
+    "vue-tsc": "^2.0.6"
   },
   "scripts": {
     "build": "npm run build:type && vite build",
     "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
-    "clear:type": "rimraf ./types"
+    "clear:type": "rimraf ./types",
+    "type:check": "vue-tsc --noEmit"
   }
 }

package/src/containers/Container.vue

@@ -42,7 +42,7 @@
         :label-width="itemLabelWidth"
         :rules="rule"
       >
-        <template #label><span v-html="type === 'checkbox' ? '' : text"></span></template>
+        <template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
         <TMagicTooltip v-if="tooltip">
           <component
             :key="key(config)"
@@ -99,7 +99,7 @@
         :rules="rule"
         style="background: #f7dadd"
       >
-        <template #label><span v-html="type === 'checkbox' ? '' : text"></span></template>
+        <template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
         <TMagicTooltip v-if="tooltip">
           <component
             :key="key(config)"
@@ -148,7 +148,7 @@
         :rules="rule"
         style="background: #def7da"
       >
-        <template #label><span v-html="type === 'checkbox' ? '' : text"></span></template>
+        <template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
         <TMagicTooltip v-if="tooltip">
           <component
             :key="key(config)"

package/src/fields/Cascader.vue

@@ -9,6 +9,7 @@
     :placeholder="config.placeholder"
     :disabled="disabled"
     :options="options"
+    :popper-class="config.popperClass"
     :props="{
       multiple: config.multiple ?? false,
       emitPath: config.emitPath ?? true,

package/src/fields/Checkbox.vue

@@ -2,8 +2,8 @@
   <TMagicCheckbox
     v-model="model[name]"
     :size="size"
-    :trueLabel="activeValue"
-    :falseLabel="inactiveValue"
+    :trueValue="activeValue"
+    :falseValue="inactiveValue"
     :disabled="disabled"
     @change="changeHandler"
     >{{ config.text }}</TMagicCheckbox

package/src/fields/CheckboxGroup.vue

@@ -1,11 +1,6 @@
 <template>
   <TMagicCheckboxGroup v-model="model[name]" :size="size" :disabled="disabled" @change="changeHandler">
-    <TMagicCheckbox
-      v-for="option in options"
-      :label="option.value"
-      :value="option.value"
-      :key="option.value"
-      :disabled="option.disabled"
+    <TMagicCheckbox v-for="option in options" :value="option.value" :key="option.value" :disabled="option.disabled"
       >{{ option.text }}
     </TMagicCheckbox>
   </TMagicCheckboxGroup>

package/src/fields/RadioGroup.vue

@@ -1,12 +1,8 @@
 <template>
   <TMagicRadioGroup v-if="model" v-model="model[name]" :size="size" :disabled="disabled" @change="changeHandler">
-    <TMagicRadio
-      v-for="option in config.options"
-      :label="option.value"
-      :value="option.value"
-      :key="`${option.value}`"
-      >{{ option.text }}</TMagicRadio
-    >
+    <TMagicRadio v-for="option in config.options" :value="option.value" :key="`${option.value}`">{{
+      option.text
+    }}</TMagicRadio>
   </TMagicRadioGroup>
 </template>
 

package/src/schema.ts

@@ -66,6 +66,8 @@ export interface FormItem {
   __key?: string | number;
   /** 表单域标签的的宽度，例如 '50px'。支持 auto。 */
   labelWidth?: string;
+  /** label 标签的title属性 */
+  labelTitle?: string;
   className?: string;
   /** 表单组件类型 */
   type?: string | TypeFunction;
@@ -399,8 +401,8 @@ export interface TimeConfig extends FormItem, Input {
  */
 export interface CheckboxConfig extends FormItem {
   type: 'checkbox';
-  activeValue?: boolean | number | string;
-  inactiveValue?: boolean | number | string;
+  activeValue?: number | string;
+  inactiveValue?: number | string;
 }
 
 /**
@@ -534,6 +536,8 @@ export interface CascaderConfig extends FormItem, Input {
   multiple?: boolean;
   /** 是否严格的遵守父子节点不互相关联，默认 false */
   checkStrictly?: boolean;
+  /** 弹出内容的自定义类名 */
+  popperClass?: string;
   options?:
     | ((
         mForm: FormState | undefined,

package/src/theme/form-box.scss

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   padding: 16px;
-  width: 100%;
+  box-sizing: border-box;
   .el-box__header {
     margin: 0;
   }

package/types/Form.vue.d.ts

@@ -1,5 +1,5 @@
 import type { FormConfig, FormState, FormValue } from './schema';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
     /** 表单配置 */
     config: FormConfig;
     /** 表单值 */
@@ -45,7 +45,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     error: (...args: any[]) => void;
     "field-input": (...args: any[]) => void;
     "field-change": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
     /** 表单配置 */
     config: FormConfig;
     /** 表单值 */
@@ -92,21 +92,12 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     parentValues: Record<string, any>;
     labelWidth: string;
     disabled: boolean;
-    stepActive: string | number;
     height: string;
+    stepActive: string | number;
     inline: boolean;
     labelPosition: string;
 }, {}>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
@@ -115,3 +106,12 @@ type __VLS_WithDefaults<P, D> = {
 type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};