@tmagic/form 1.5.1 → 1.5.3

package/dist/tmagic-form.umd.cjs

@@ -182,9 +182,9 @@
     return defaultValue;
   };
 
-  const _hoisted_1$d = ["data-tmagic-id", "data-tmagic-form-item-prop"];
+  const _hoisted_1$e = ["data-tmagic-id", "data-tmagic-form-item-prop"];
   const _hoisted_2$7 = ["innerHTML", "title"];
-  const _hoisted_3$4 = ["innerHTML"];
+  const _hoisted_3$5 = ["innerHTML"];
   const _hoisted_4$3 = ["innerHTML"];
   const _hoisted_5$3 = ["innerHTML"];
   const _hoisted_6$2 = ["innerHTML", "title"];
@@ -245,7 +245,12 @@
         }
         return `${n}`;
       });
-      const tagName = vue.computed(() => `m-${items.value ? "form" : "fields"}-${type.value}`);
+      const tagName = vue.computed(() => {
+        if (type.value === "component" && props.config.component) {
+          return props.config.component;
+        }
+        return `m-${items.value ? "form" : "fields"}-${type.value}`;
+      });
       const disabled = vue.computed(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
       const text = vue.computed(() => filterFunction(mForm, props.config.text, props));
       const tooltip = vue.computed(() => filterFunction(mForm, props.config.tooltip, props));
@@ -413,7 +418,7 @@
               default: vue.withCtx(() => [
                 tooltip.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), { key: 0 }, {
                   content: vue.withCtx(() => [
-                    vue.createElementVNode("div", { innerHTML: tooltip.value }, null, 8, _hoisted_3$4)
+                    vue.createElementVNode("div", { innerHTML: tooltip.value }, null, 8, _hoisted_3$5)
                   ]),
                   default: vue.withCtx(() => [
                     (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
@@ -641,14 +646,14 @@
               _: 1
             })
           ])) : vue.createCommentVNode("", true)
-        ], 14, _hoisted_1$d)) : vue.createCommentVNode("", true);
+        ], 14, _hoisted_1$e)) : vue.createCommentVNode("", true);
       };
     }
   });
 
-  const _hoisted_1$c = ["innerHTML"];
+  const _hoisted_1$d = ["innerHTML"];
   const _hoisted_2$6 = ["innerHTML"];
-  const _hoisted_3$3 = { key: 1 };
+  const _hoisted_3$4 = { key: 1 };
   const _hoisted_4$2 = ["innerHTML"];
   const _hoisted_5$2 = ["innerHTML"];
   const _hoisted_6$1 = {
@@ -718,7 +723,7 @@
                 default: vue.withCtx(() => [
                   vue.createElementVNode("span", {
                     innerHTML: _ctx.config.legend
-                  }, null, 8, _hoisted_1$c),
+                  }, null, 8, _hoisted_1$d),
                   _ctx.config.extra ? (vue.openBlock(), vue.createElementBlock("span", {
                     key: 0,
                     innerHTML: _ctx.config.extra,
@@ -729,7 +734,7 @@
               }, 8, ["modelValue", "prop"])
             ]),
             _: 1
-          })) : (vue.openBlock(), vue.createElementBlock("legend", _hoisted_3$3, [
+          })) : (vue.openBlock(), vue.createElementBlock("legend", _hoisted_3$4, [
             vue.createElementVNode("span", {
               innerHTML: _ctx.config.legend
             }, null, 8, _hoisted_4$2),
@@ -783,8 +788,9 @@
     }
   });
 
-  const _hoisted_1$b = { class: "m-fields-group-list-item" };
-  const _hoisted_2$5 = ["innerHTML"];
+  const _hoisted_1$c = { class: "m-fields-group-list-item" };
+  const _hoisted_2$5 = { style: { "text-align": "right", "margin-top": "20px" } };
+  const _hoisted_3$3 = ["innerHTML"];
   const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormGroupListItem"
@@ -802,7 +808,7 @@
       index: {},
       disabled: { type: Boolean }
     },
-    emits: ["swap-item", "remove-item", "change", "addDiffCount"],
+    emits: ["swap-item", "remove-item", "change", "addDiffCount", "copy-item"],
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
@@ -834,25 +840,35 @@
       const expandHandler = () => {
         expand.value = !expand.value;
       };
-      const showDelete = (index) => {
+      const showDelete = vue.computed(() => {
         const deleteFunc = props.config.delete;
         if (deleteFunc && typeof deleteFunc === "function") {
-          return deleteFunc(props.model, index, mForm?.values);
+          return deleteFunc(props.model, props.index, mForm?.values);
         }
         return true;
-      };
+      });
       const changeOrder = (offset = 0) => emit("swap-item", props.index, props.index + offset);
-      const movable = () => {
+      const movable = vue.computed(() => {
         const { movable: movable2 } = props.config;
         if (movable2 === void 0) return true;
         if (typeof movable2 === "function") {
           return movable2(mForm, props.index || 0, props.model, props.groupModel);
         }
         return movable2;
-      };
+      });
+      const copyable = vue.computed(() => filterFunction(mForm, props.config.copyable, props));
       const onAddDiffCount = () => emit("addDiffCount");
+      const copyHandler = () => {
+        emit("copy-item", props.index);
+      };
+      const moveSpecifyLocationVisible = vue.ref(false);
+      const moveSpecifyLocationIndex = vue.ref(1);
+      const moveSpecifyLocationHandler = () => {
+        moveSpecifyLocationVisible.value = false;
+        emit("swap-item", props.index, moveSpecifyLocationIndex.value - 1);
+      };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
           vue.createElementVNode("div", null, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               link: "",
@@ -871,59 +887,126 @@
               _: 1
             }, 8, ["disabled"]),
             vue.withDirectives(vue.createVNode(vue.unref(design.TMagicButton), {
-              style: { "color": "#f56c6c" },
+              type: "danger",
+              size: "small",
               link: "",
               icon: vue.unref(iconsVue.Delete),
               disabled: _ctx.disabled,
               onClick: removeHandler
             }, null, 8, ["icon", "disabled"]), [
-              [vue.vShow, showDelete(parseInt(String(_ctx.index)))]
+              [vue.vShow, showDelete.value]
             ]),
-            movable() ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+            copyable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+              key: 0,
+              link: "",
+              size: "small",
+              type: "primary",
+              icon: vue.unref(iconsVue.DocumentCopy),
+              disabled: _ctx.disabled,
+              onClick: copyHandler
+            }, {
+              default: vue.withCtx(() => _cache[6] || (_cache[6] = [
+                vue.createTextVNode("复制")
+              ])),
+              _: 1
+            }, 8, ["icon", "disabled"])) : vue.createCommentVNode("", true),
+            movable.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
               vue.withDirectives(vue.createVNode(vue.unref(design.TMagicButton), {
                 link: "",
-                disabled: _ctx.disabled,
                 size: "small",
+                disabled: _ctx.disabled,
+                icon: vue.unref(iconsVue.CaretTop),
                 onClick: _cache[0] || (_cache[0] = ($event) => changeOrder(-1))
               }, {
-                default: vue.withCtx(() => [
-                  _cache[3] || (_cache[3] = vue.createTextVNode("上移")),
-                  vue.createVNode(vue.unref(design.TMagicIcon), null, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(iconsVue.CaretTop))
-                    ]),
-                    _: 1
-                  })
-                ]),
+                default: vue.withCtx(() => _cache[7] || (_cache[7] = [
+                  vue.createTextVNode("上移")
+                ])),
                 _: 1
-              }, 8, ["disabled"]), [
+              }, 8, ["disabled", "icon"]), [
                 [vue.vShow, _ctx.index !== 0]
               ]),
               vue.withDirectives(vue.createVNode(vue.unref(design.TMagicButton), {
-                disabled: _ctx.disabled,
                 link: "",
                 size: "small",
+                disabled: _ctx.disabled,
+                icon: vue.unref(iconsVue.CaretBottom),
                 onClick: _cache[1] || (_cache[1] = ($event) => changeOrder(1))
               }, {
-                default: vue.withCtx(() => [
-                  _cache[4] || (_cache[4] = vue.createTextVNode("下移")),
-                  vue.createVNode(vue.unref(design.TMagicIcon), null, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(iconsVue.CaretBottom))
-                    ]),
-                    _: 1
-                  })
-                ]),
+                default: vue.withCtx(() => _cache[8] || (_cache[8] = [
+                  vue.createTextVNode("下移")
+                ])),
                 _: 1
-              }, 8, ["disabled"]), [
+              }, 8, ["disabled", "icon"]), [
                 [vue.vShow, _ctx.index !== length.value - 1]
               ])
             ], 64)) : vue.createCommentVNode("", true),
+            _ctx.config.moveSpecifyLocation ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicPopover), {
+              key: 2,
+              trigger: "click",
+              placement: "top",
+              width: "200",
+              visible: moveSpecifyLocationVisible.value
+            }, {
+              reference: vue.withCtx(() => [
+                vue.createVNode(vue.unref(design.TMagicButton), {
+                  link: "",
+                  size: "small",
+                  type: "primary",
+                  icon: vue.unref(iconsVue.Position),
+                  disabled: _ctx.disabled,
+                  onClick: _cache[2] || (_cache[2] = ($event) => moveSpecifyLocationVisible.value = true)
+                }, {
+                  default: vue.withCtx(() => _cache[9] || (_cache[9] = [
+                    vue.createTextVNode("移动至")
+                  ])),
+                  _: 1
+                }, 8, ["icon", "disabled"])
+              ]),
+              default: vue.withCtx(() => [
+                vue.createElementVNode("div", null, [
+                  vue.createElementVNode("div", null, [
+                    _cache[10] || (_cache[10] = vue.createTextVNode(" 第")),
+                    vue.createVNode(vue.unref(design.TMagicInputNumber), {
+                      style: { "margin": "0 5px" },
+                      modelValue: moveSpecifyLocationIndex.value,
+                      "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => moveSpecifyLocationIndex.value = $event),
+                      size: "small",
+                      min: 1,
+                      disabled: _ctx.disabled
+                    }, null, 8, ["modelValue", "disabled"]),
+                    _cache[11] || (_cache[11] = vue.createTextVNode("行 "))
+                  ]),
+                  vue.createElementVNode("div", _hoisted_2$5, [
+                    vue.createVNode(vue.unref(design.TMagicButton), {
+                      size: "small",
+                      text: "",
+                      onClick: _cache[4] || (_cache[4] = ($event) => moveSpecifyLocationVisible.value = false)
+                    }, {
+                      default: vue.withCtx(() => _cache[12] || (_cache[12] = [
+                        vue.createTextVNode("取消")
+                      ])),
+                      _: 1
+                    }),
+                    vue.createVNode(vue.unref(design.TMagicButton), {
+                      size: "small",
+                      type: "primary",
+                      onClick: moveSpecifyLocationHandler
+                    }, {
+                      default: vue.withCtx(() => _cache[13] || (_cache[13] = [
+                        vue.createTextVNode("确认")
+                      ])),
+                      _: 1
+                    })
+                  ])
+                ])
+              ]),
+              _: 1
+            }, 8, ["visible"])) : vue.createCommentVNode("", true),
             itemExtra.value ? (vue.openBlock(), vue.createElementBlock("span", {
-              key: 1,
+              key: 3,
               innerHTML: itemExtra.value,
               class: "m-form-tip"
-            }, null, 8, _hoisted_2$5)) : vue.createCommentVNode("", true)
+            }, null, 8, _hoisted_3$3)) : vue.createCommentVNode("", true)
           ]),
           expand.value ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
             key: 0,
@@ -936,14 +1019,14 @@
             size: _ctx.size,
             disabled: _ctx.disabled,
             onChange: changeHandler,
-            onAddDiffCount: _cache[2] || (_cache[2] = ($event) => onAddDiffCount())
+            onAddDiffCount: _cache[5] || (_cache[5] = ($event) => onAddDiffCount())
           }, null, 8, ["config", "model", "lastValues", "is-compare", "labelWidth", "prop", "size", "disabled"])) : vue.createCommentVNode("", true)
         ]);
       };
     }
   });
 
-  const _hoisted_1$a = { class: "m-fields-group-list" };
+  const _hoisted_1$b = { class: "m-fields-group-list" };
   const _hoisted_2$4 = ["innerHTML"];
   const _hoisted_3$2 = {
     key: 1,
@@ -1017,10 +1100,14 @@
         props.model[props.name].splice(index, 1);
         emit("change", props.model[props.name]);
       };
+      const copyHandler = (index) => {
+        props.model[props.name].push(lodashEs.cloneDeep(props.model[props.name][index]));
+      };
       const swapHandler = (idx1, idx2) => {
         if (!props.name) return false;
+        const { length } = props.model[props.name];
         const [currRow] = props.model[props.name].splice(idx1, 1);
-        props.model[props.name].splice(idx2, 0, currRow);
+        props.model[props.name].splice(Math.min(Math.max(idx2, 0), length - 1), 0, currRow);
         emit("change", props.model[props.name]);
       };
       const toggleMode = () => {
@@ -1035,7 +1122,7 @@
       const onAddDiffCount = () => emit("addDiffCount");
       const getLastValues = (item, index) => item?.[index] || {};
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
           _ctx.config.extra ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
             innerHTML: _ctx.config.extra,
@@ -1057,6 +1144,7 @@
               disabled: _ctx.disabled,
               "group-model": _ctx.model[_ctx.name],
               onRemoveItem: removeHandler,
+              onCopyItem: copyHandler,
               onSwapItem: swapHandler,
               onChange: changeHandler,
               onAddDiffCount: _cache[0] || (_cache[0] = ($event) => onAddDiffCount())
@@ -1090,7 +1178,7 @@
     }
   });
 
-  const _hoisted_1$9 = { style: { "width": "100%", "display": "flex", "align-items": "center" } };
+  const _hoisted_1$a = { style: { "width": "100%", "display": "flex", "align-items": "center" } };
   const _hoisted_2$3 = ["innerHTML"];
   const _hoisted_3$1 = {
     key: 0,
@@ -1133,7 +1221,7 @@
           "body-style": { display: expand.value ? "block" : "none" }
         }, {
           header: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$9, [
+            vue.createElementVNode("div", _hoisted_1$a, [
               vue.createVNode(vue.unref(design.TMagicButton), {
                 style: { "padding": "0" },
                 link: "",
@@ -1381,7 +1469,7 @@
     }
   });
 
-  const _hoisted_1$8 = { class: "m-fields-table-wrap" };
+  const _hoisted_1$9 = { class: "m-fields-table-wrap" };
   const _hoisted_2$2 = ["innerHTML"];
   const _hoisted_3 = ["innerHTML"];
   const _hoisted_4 = { style: { "display": "flex", "justify-content": "space-between", "margin": "10px 0" } };
@@ -1666,6 +1754,21 @@
         }
         return true;
       };
+      const copyable = (index) => {
+        const copyableFunc = props.config.copyable;
+        if (copyableFunc && typeof copyableFunc === "function") {
+          return copyableFunc(mForm, {
+            values: mForm?.initValues || {},
+            model: props.model,
+            parent: mForm?.parentValues || {},
+            formValue: mForm?.values || props.model,
+            prop: props.prop,
+            config: props.config,
+            index
+          });
+        }
+        return true;
+      };
       const clearHandler = () => {
         const len = props.model[modelName.value].length;
         props.model[modelName.value].splice(0, len);
@@ -1703,6 +1806,9 @@
       const handleCurrentChange = (val) => {
         pagecontext.value = val - 1;
       };
+      const copyHandler = (index) => {
+        props.model[modelName.value].push(lodashEs.cloneDeep(props.model[modelName.value][index]));
+      };
       const toggleMode = () => {
         const calcLabelWidth = (label) => {
           if (!label) return "0px";
@@ -1747,7 +1853,7 @@
         toggleRowSelection
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
           (vue.openBlock(), vue.createBlock(vue.Teleport, {
             to: "body",
             disabled: !isFullscreen.value
@@ -1799,23 +1905,32 @@
                       })) : vue.createCommentVNode("", true),
                       vue.createVNode(vue.unref(design.TMagicTableColumn), {
                         label: "操作",
-                        width: _ctx.config.operateColWidth || 55,
+                        width: _ctx.config.operateColWidth || 100,
                         align: "center",
                         fixed: _ctx.config.fixed === false ? void 0 : "left"
                       }, {
                         default: vue.withCtx((scope) => [
                           vue.renderSlot(_ctx.$slots, "operateCol", { scope }),
-                          vue.withDirectives(vue.createVNode(vue.unref(design.TMagicIcon), {
-                            class: "m-table-delete-icon",
+                          vue.withDirectives(vue.createVNode(vue.unref(design.TMagicButton), {
+                            size: "small",
+                            type: "danger",
+                            link: "",
+                            title: "删除",
+                            icon: vue.unref(iconsVue.Delete),
                             onClick: ($event) => removeHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1)
-                          }, {
-                            default: vue.withCtx(() => [
-                              vue.createVNode(vue.unref(iconsVue.Delete))
-                            ]),
-                            _: 2
-                          }, 1032, ["onClick"]), [
+                          }, null, 8, ["icon", "onClick"]), [
                             [vue.vShow, showDelete(scope.$index + 1 + pagecontext.value * pagesize.value - 1)]
-                          ])
+                          ]),
+                          copyable(scope.$index + 1 + pagecontext.value * pagesize.value - 1) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+                            key: 0,
+                            link: "",
+                            size: "small",
+                            type: "primary",
+                            title: "复制",
+                            icon: vue.unref(iconsVue.DocumentCopy),
+                            disabled: _ctx.disabled,
+                            onClick: ($event) => copyHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1)
+                          }, null, 8, ["icon", "disabled", "onClick"])) : vue.createCommentVNode("", true)
                         ]),
                         _: 3
                       }, 8, ["width", "fixed"]),
@@ -2704,7 +2819,7 @@
     }
   });
 
-  const _hoisted_1$7 = { key: 0 };
+  const _hoisted_1$8 = { key: 0 };
   const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormDisplay"
@@ -2728,12 +2843,12 @@
       }
       useAddField(props.prop);
       return (_ctx, _cache) => {
-        return _ctx.model ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$7, vue.toDisplayString(_ctx.model[_ctx.name]), 1)) : vue.createCommentVNode("", true);
+        return _ctx.model ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$8, vue.toDisplayString(_ctx.model[_ctx.name]), 1)) : vue.createCommentVNode("", true);
       };
     }
   });
 
-  const _hoisted_1$6 = { class: "m-fields-dynamic-field" };
+  const _hoisted_1$7 = { class: "m-fields-dynamic-field" };
   const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormDynamicField"
@@ -2800,7 +2915,7 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
           vue.createVNode(vue.unref(design.TMagicForm), { size: "small" }, {
             default: vue.withCtx(() => [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(Object.keys(fieldMap.value), (key) => {
@@ -3034,7 +3149,7 @@
     }
   });
 
-  const _hoisted_1$5 = { style: { "min-height": "1px" } };
+  const _hoisted_1$6 = { style: { "min-height": "1px" } };
   const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormDialog"
@@ -3144,7 +3259,7 @@
                   style: { "text-align": "left" }
                 }, {
                   default: vue.withCtx(() => [
-                    vue.createElementVNode("div", _hoisted_1$5, [
+                    vue.createElementVNode("div", _hoisted_1$6, [
                       vue.renderSlot(_ctx.$slots, "left")
                     ])
                   ]),
@@ -3235,7 +3350,7 @@
     }
   });
 
-  const _hoisted_1$4 = ["href"];
+  const _hoisted_1$5 = ["href"];
   const _hoisted_2$1 = {
     key: 2,
     class: "m-fields-link"
@@ -3309,7 +3424,7 @@
           target: "_blank",
           href: href.value,
           style: vue.normalizeStyle(_ctx.config.css || {})
-        }, vue.toDisplayString(displayText.value), 13, _hoisted_1$4)) : _ctx.config.href && _ctx.disabled ? (vue.openBlock(), vue.createElementBlock("span", {
+        }, vue.toDisplayString(displayText.value), 13, _hoisted_1$5)) : _ctx.config.href && _ctx.disabled ? (vue.openBlock(), vue.createElementBlock("span", {
           key: 1,
           style: vue.normalizeStyle(_ctx.config.disabledCss || {})
         }, vue.toDisplayString(displayText.value), 5)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$1, [
@@ -3388,7 +3503,7 @@
     }
   });
 
-  const _hoisted_1$3 = { class: "m-fields-number-range" };
+  const _hoisted_1$4 = { class: "m-fields-number-range" };
   const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormNumberRange"
@@ -3420,7 +3535,7 @@
         emit("change", [props.model[props.name][0], Number(v)]);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
           vue.createVNode(vue.unref(design.TMagicInput), {
             modelValue: _ctx.model[_ctx.name][0],
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name][0] = $event),
@@ -3443,6 +3558,7 @@
     }
   });
 
+  const _hoisted_1$3 = { key: 1 };
   const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormRadioGroup"
@@ -3462,10 +3578,15 @@
     emits: ["change"],
     setup(__props, { emit: __emit }) {
       const props = __props;
+      const itemComponent = vue.computed(() => props.config.childType === "button" ? design.TMagicRadioButton : design.TMagicRadio);
       const emit = __emit;
       const changeHandler = (value) => {
         emit("change", value);
       };
+      const clickHandler = (item) => {
+        props.model[props.name] = props.model[props.name] === item ? "" : item;
+        changeHandler(props.model[props.name]);
+      };
       useAddField(props.prop);
       return (_ctx, _cache) => {
         return _ctx.model ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicRadioGroup), {
@@ -3473,20 +3594,51 @@
           modelValue: _ctx.model[_ctx.name],
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
           size: _ctx.size,
-          disabled: _ctx.disabled,
-          onChange: changeHandler
+          disabled: _ctx.disabled
         }, {
           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), {
+              return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(itemComponent.value), {
                 value: option.value,
-                key: `${option.value}`
+                key: `${option.value}`,
+                onClick: vue.withModifiers(($event) => clickHandler(option.value), ["prevent"])
               }, {
                 default: vue.withCtx(() => [
-                  vue.createTextVNode(vue.toDisplayString(option.text), 1)
+                  option.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+                    key: 0,
+                    placement: "top-start",
+                    content: option.tooltip
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createElementVNode("div", null, [
+                        option.icon ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+                          key: 0,
+                          size: "16"
+                        }, {
+                          default: vue.withCtx(() => [
+                            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(option.icon)))
+                          ]),
+                          _: 2
+                        }, 1024)) : vue.createCommentVNode("", true),
+                        vue.createElementVNode("span", null, vue.toDisplayString(option.text), 1)
+                      ])
+                    ]),
+                    _: 2
+                  }, 1032, ["content"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+                    option.icon ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+                      key: 0,
+                      size: "16"
+                    }, {
+                      default: vue.withCtx(() => [
+                        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(option.icon)))
+                      ]),
+                      _: 2
+                    }, 1024)) : vue.createCommentVNode("", true),
+                    vue.createElementVNode("span", null, vue.toDisplayString(option.text), 1)
+                  ]))
                 ]),
                 _: 2
-              }, 1032, ["value"]);
+              }, 1032, ["value", "onClick"]);
             }), 128))
           ]),
           _: 1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.1",
+  "version": "1.5.3",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -57,8 +57,8 @@
   "peerDependencies": {
     "vue": ">=3.5.0",
     "typescript": "*",
-    "@tmagic/design": "1.5.1",
-    "@tmagic/utils": "1.5.1"
+    "@tmagic/design": "1.5.3",
+    "@tmagic/utils": "1.5.3"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/containers/Container.vue

@@ -229,14 +229,7 @@ import { isEqual } from 'lodash-es';
 
 import { TMagicButton, TMagicFormItem, TMagicIcon, TMagicTooltip } from '@tmagic/design';
 
-import type {
-  ChildConfig,
-  ContainerChangeEventData,
-  ContainerCommonConfig,
-  FormState,
-  FormValue,
-  TypeFunction,
-} from '../schema';
+import type { ChildConfig, ContainerChangeEventData, ContainerCommonConfig, FormState, FormValue } from '../schema';
 import { display as displayFunction, filterFunction, getRules } from '../utils/form';
 
 defineOptions({
@@ -306,7 +299,12 @@ const itemProp = computed(() => {
   return `${n}`;
 });
 
-const tagName = computed(() => `m-${items.value ? 'form' : 'fields'}-${type.value}`);
+const tagName = computed(() => {
+  if (type.value === 'component' && props.config.component) {
+    return props.config.component;
+  }
+  return `m-${items.value ? 'form' : 'fields'}-${type.value}`;
+});
 
 const disabled = computed(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
 
@@ -320,7 +318,7 @@ const rule = computed(() => getRules(mForm, props.config.rules, props));
 
 const type = computed((): string => {
   let { type } = props.config;
-  type = type && (filterFunction<string | TypeFunction>(mForm, type, props) as string);
+  type = type && filterFunction<string>(mForm, type, props);
   if (type === 'form') return '';
   if (type === 'container') return '';
   return type?.replace(/([A-Z])/g, '-$1').toLowerCase() || (items.value ? '' : 'text');