@tmagic/form 1.5.2 → 1.5.3

package/dist/style.css

@@ -230,10 +230,6 @@ fieldset.m-fieldset .m-form-tip {
 .m-fields-table .el-form-item {
   margin-bottom: 0;
 }
-.m-fields-table .m-table-delete-icon {
-  color: #f56c6c;
-  cursor: pointer;
-}
 
 .m-select {
   width: 100%;

package/dist/tmagic-form.js

@@ -1,7 +1,7 @@
-import { toRaw, defineComponent, inject, ref, computed, watchEffect, watch, resolveComponent, openBlock, createElementBlock, normalizeStyle, normalizeClass, createBlock, resolveDynamicComponent, Fragment, createVNode, unref, withCtx, createElementVNode, createCommentVNode, renderList, createTextVNode, toDisplayString, withDirectives, vShow, renderSlot, onMounted, Teleport, toRefs, mergeProps, getCurrentInstance, reactive, onBeforeUnmount, vModelText, provide, shallowRef, onBeforeMount, nextTick, resolveDirective, createSlots, withModifiers } from 'vue';
-import { WarningFilled, CaretBottom, CaretRight, Delete, CaretTop, Grid, ArrowUp, ArrowDown, FullScreen } from '@element-plus/icons-vue';
+import { toRaw, defineComponent, inject, ref, computed, watchEffect, watch, resolveComponent, openBlock, createElementBlock, normalizeStyle, normalizeClass, createBlock, resolveDynamicComponent, Fragment, createVNode, unref, withCtx, createElementVNode, createCommentVNode, renderList, createTextVNode, toDisplayString, withDirectives, vShow, renderSlot, onMounted, Teleport, toRefs, mergeProps, getCurrentInstance, reactive, onBeforeUnmount, vModelText, provide, shallowRef, withModifiers, onBeforeMount, nextTick, resolveDirective, createSlots } from 'vue';
+import { WarningFilled, CaretBottom, CaretRight, Delete, DocumentCopy, CaretTop, Position, Grid, ArrowUp, ArrowDown, FullScreen } from '@element-plus/icons-vue';
 import { cloneDeep, isEqual, isEmpty, debounce } from 'lodash-es';
-import { TMagicFormItem, TMagicTooltip, TMagicIcon, TMagicButton, TMagicCheckbox, TMagicCard, TMagicCol, TMagicRow, TMagicSteps, TMagicStep, useZIndex, TMagicTable, TMagicTableColumn, TMagicUpload, TMagicPagination, tMagicMessage, getDesignConfig, TMagicBadge, TMagicCascader, TMagicCheckboxGroup, TMagicColorPicker, TMagicDatePicker, TMagicForm, TMagicInput, tMagicMessageBox, TMagicDialog, TMagicInputNumber, TMagicRadioGroup, TMagicRadio, TMagicSelect, TMagicSwitch, TMagicTimePicker, TMagicDrawer, TMagicScrollbar } from '@tmagic/design';
+import { TMagicFormItem, TMagicTooltip, TMagicIcon, TMagicButton, TMagicCheckbox, TMagicPopover, TMagicInputNumber, TMagicCard, TMagicCol, TMagicRow, TMagicSteps, TMagicStep, useZIndex, TMagicTable, TMagicTableColumn, TMagicUpload, TMagicPagination, tMagicMessage, getDesignConfig, TMagicBadge, TMagicCascader, TMagicCheckboxGroup, TMagicColorPicker, TMagicDatePicker, TMagicForm, TMagicInput, tMagicMessageBox, TMagicDialog, TMagicRadioButton, TMagicRadio, TMagicRadioGroup, TMagicSelect, TMagicSwitch, TMagicTimePicker, TMagicDrawer, TMagicScrollbar } from '@tmagic/design';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import Sortable from 'sortablejs';
@@ -186,9 +186,9 @@ const datetimeFormatter = (v, defaultValue = "-", format = "YYYY-MM-DD HH:mm:ss"
   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"];
@@ -249,7 +249,12 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       }
       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));
     const text = computed(() => filterFunction(mForm, props.config.text, props));
     const tooltip = computed(() => filterFunction(mForm, props.config.tooltip, props));
@@ -417,7 +422,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             default: withCtx(() => [
               tooltip.value ? (openBlock(), createBlock(unref(TMagicTooltip), { key: 0 }, {
                 content: withCtx(() => [
-                  createElementVNode("div", { innerHTML: tooltip.value }, null, 8, _hoisted_3$4)
+                  createElementVNode("div", { innerHTML: tooltip.value }, null, 8, _hoisted_3$5)
                 ]),
                 default: withCtx(() => [
                   (openBlock(), createBlock(resolveDynamicComponent(tagName.value), {
@@ -645,14 +650,14 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             _: 1
           })
         ])) : createCommentVNode("", true)
-      ], 14, _hoisted_1$d)) : createCommentVNode("", true);
+      ], 14, _hoisted_1$e)) : 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 = {
@@ -722,7 +727,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
               default: withCtx(() => [
                 createElementVNode("span", {
                   innerHTML: _ctx.config.legend
-                }, null, 8, _hoisted_1$c),
+                }, null, 8, _hoisted_1$d),
                 _ctx.config.extra ? (openBlock(), createElementBlock("span", {
                   key: 0,
                   innerHTML: _ctx.config.extra,
@@ -733,7 +738,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
             }, 8, ["modelValue", "prop"])
           ]),
           _: 1
-        })) : (openBlock(), createElementBlock("legend", _hoisted_3$3, [
+        })) : (openBlock(), createElementBlock("legend", _hoisted_3$4, [
           createElementVNode("span", {
             innerHTML: _ctx.config.legend
           }, null, 8, _hoisted_4$2),
@@ -787,8 +792,9 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   ...{
     name: "MFormGroupListItem"
@@ -806,7 +812,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     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;
@@ -838,25 +844,35 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     const expandHandler = () => {
       expand.value = !expand.value;
     };
-    const showDelete = (index) => {
+    const showDelete = 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 = 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 = computed(() => filterFunction(mForm, props.config.copyable, props));
     const onAddDiffCount = () => emit("addDiffCount");
+    const copyHandler = () => {
+      emit("copy-item", props.index);
+    };
+    const moveSpecifyLocationVisible = ref(false);
+    const moveSpecifyLocationIndex = ref(1);
+    const moveSpecifyLocationHandler = () => {
+      moveSpecifyLocationVisible.value = false;
+      emit("swap-item", props.index, moveSpecifyLocationIndex.value - 1);
+    };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
         createElementVNode("div", null, [
           createVNode(unref(TMagicButton), {
             link: "",
@@ -875,59 +891,126 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"]),
           withDirectives(createVNode(unref(TMagicButton), {
-            style: { "color": "#f56c6c" },
+            type: "danger",
+            size: "small",
             link: "",
             icon: unref(Delete),
             disabled: _ctx.disabled,
             onClick: removeHandler
           }, null, 8, ["icon", "disabled"]), [
-            [vShow, showDelete(parseInt(String(_ctx.index)))]
+            [vShow, showDelete.value]
           ]),
-          movable() ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          copyable.value ? (openBlock(), createBlock(unref(TMagicButton), {
+            key: 0,
+            link: "",
+            size: "small",
+            type: "primary",
+            icon: unref(DocumentCopy),
+            disabled: _ctx.disabled,
+            onClick: copyHandler
+          }, {
+            default: withCtx(() => _cache[6] || (_cache[6] = [
+              createTextVNode("复制")
+            ])),
+            _: 1
+          }, 8, ["icon", "disabled"])) : createCommentVNode("", true),
+          movable.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
             withDirectives(createVNode(unref(TMagicButton), {
               link: "",
-              disabled: _ctx.disabled,
               size: "small",
+              disabled: _ctx.disabled,
+              icon: unref(CaretTop),
               onClick: _cache[0] || (_cache[0] = ($event) => changeOrder(-1))
             }, {
-              default: withCtx(() => [
-                _cache[3] || (_cache[3] = createTextVNode("上移")),
-                createVNode(unref(TMagicIcon), null, {
-                  default: withCtx(() => [
-                    createVNode(unref(CaretTop))
-                  ]),
-                  _: 1
-                })
-              ]),
+              default: withCtx(() => _cache[7] || (_cache[7] = [
+                createTextVNode("上移")
+              ])),
               _: 1
-            }, 8, ["disabled"]), [
+            }, 8, ["disabled", "icon"]), [
               [vShow, _ctx.index !== 0]
             ]),
             withDirectives(createVNode(unref(TMagicButton), {
-              disabled: _ctx.disabled,
               link: "",
               size: "small",
+              disabled: _ctx.disabled,
+              icon: unref(CaretBottom),
               onClick: _cache[1] || (_cache[1] = ($event) => changeOrder(1))
             }, {
-              default: withCtx(() => [
-                _cache[4] || (_cache[4] = createTextVNode("下移")),
-                createVNode(unref(TMagicIcon), null, {
-                  default: withCtx(() => [
-                    createVNode(unref(CaretBottom))
-                  ]),
-                  _: 1
-                })
-              ]),
+              default: withCtx(() => _cache[8] || (_cache[8] = [
+                createTextVNode("下移")
+              ])),
               _: 1
-            }, 8, ["disabled"]), [
+            }, 8, ["disabled", "icon"]), [
               [vShow, _ctx.index !== length.value - 1]
             ])
           ], 64)) : createCommentVNode("", true),
+          _ctx.config.moveSpecifyLocation ? (openBlock(), createBlock(unref(TMagicPopover), {
+            key: 2,
+            trigger: "click",
+            placement: "top",
+            width: "200",
+            visible: moveSpecifyLocationVisible.value
+          }, {
+            reference: withCtx(() => [
+              createVNode(unref(TMagicButton), {
+                link: "",
+                size: "small",
+                type: "primary",
+                icon: unref(Position),
+                disabled: _ctx.disabled,
+                onClick: _cache[2] || (_cache[2] = ($event) => moveSpecifyLocationVisible.value = true)
+              }, {
+                default: withCtx(() => _cache[9] || (_cache[9] = [
+                  createTextVNode("移动至")
+                ])),
+                _: 1
+              }, 8, ["icon", "disabled"])
+            ]),
+            default: withCtx(() => [
+              createElementVNode("div", null, [
+                createElementVNode("div", null, [
+                  _cache[10] || (_cache[10] = createTextVNode(" 第")),
+                  createVNode(unref(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] = createTextVNode("行 "))
+                ]),
+                createElementVNode("div", _hoisted_2$5, [
+                  createVNode(unref(TMagicButton), {
+                    size: "small",
+                    text: "",
+                    onClick: _cache[4] || (_cache[4] = ($event) => moveSpecifyLocationVisible.value = false)
+                  }, {
+                    default: withCtx(() => _cache[12] || (_cache[12] = [
+                      createTextVNode("取消")
+                    ])),
+                    _: 1
+                  }),
+                  createVNode(unref(TMagicButton), {
+                    size: "small",
+                    type: "primary",
+                    onClick: moveSpecifyLocationHandler
+                  }, {
+                    default: withCtx(() => _cache[13] || (_cache[13] = [
+                      createTextVNode("确认")
+                    ])),
+                    _: 1
+                  })
+                ])
+              ])
+            ]),
+            _: 1
+          }, 8, ["visible"])) : createCommentVNode("", true),
           itemExtra.value ? (openBlock(), createElementBlock("span", {
-            key: 1,
+            key: 3,
             innerHTML: itemExtra.value,
             class: "m-form-tip"
-          }, null, 8, _hoisted_2$5)) : createCommentVNode("", true)
+          }, null, 8, _hoisted_3$3)) : createCommentVNode("", true)
         ]),
         expand.value ? (openBlock(), createBlock(_sfc_main$x, {
           key: 0,
@@ -940,14 +1023,14 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           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"])) : 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,
@@ -1021,10 +1104,14 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       props.model[props.name].splice(index, 1);
       emit("change", props.model[props.name]);
     };
+    const copyHandler = (index) => {
+      props.model[props.name].push(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 = () => {
@@ -1039,7 +1126,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     const onAddDiffCount = () => emit("addDiffCount");
     const getLastValues = (item, index) => item?.[index] || {};
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
         _ctx.config.extra ? (openBlock(), createElementBlock("div", {
           key: 0,
           innerHTML: _ctx.config.extra,
@@ -1061,6 +1148,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
             disabled: _ctx.disabled,
             "group-model": _ctx.model[_ctx.name],
             onRemoveItem: removeHandler,
+            onCopyItem: copyHandler,
             onSwapItem: swapHandler,
             onChange: changeHandler,
             onAddDiffCount: _cache[0] || (_cache[0] = ($event) => onAddDiffCount())
@@ -1094,7 +1182,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-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,
@@ -1137,7 +1225,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
         "body-style": { display: expand.value ? "block" : "none" }
       }, {
         header: withCtx(() => [
-          createElementVNode("div", _hoisted_1$9, [
+          createElementVNode("div", _hoisted_1$a, [
             createVNode(unref(TMagicButton), {
               style: { "padding": "0" },
               link: "",
@@ -1385,7 +1473,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-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" } };
@@ -1670,6 +1758,21 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       }
       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);
@@ -1707,6 +1810,9 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     const handleCurrentChange = (val) => {
       pagecontext.value = val - 1;
     };
+    const copyHandler = (index) => {
+      props.model[modelName.value].push(cloneDeep(props.model[modelName.value][index]));
+    };
     const toggleMode = () => {
       const calcLabelWidth = (label) => {
         if (!label) return "0px";
@@ -1751,7 +1857,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       toggleRowSelection
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$9, [
         (openBlock(), createBlock(Teleport, {
           to: "body",
           disabled: !isFullscreen.value
@@ -1803,23 +1909,32 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                     })) : createCommentVNode("", true),
                     createVNode(unref(TMagicTableColumn), {
                       label: "操作",
-                      width: _ctx.config.operateColWidth || 55,
+                      width: _ctx.config.operateColWidth || 100,
                       align: "center",
                       fixed: _ctx.config.fixed === false ? void 0 : "left"
                     }, {
                       default: withCtx((scope) => [
                         renderSlot(_ctx.$slots, "operateCol", { scope }),
-                        withDirectives(createVNode(unref(TMagicIcon), {
-                          class: "m-table-delete-icon",
+                        withDirectives(createVNode(unref(TMagicButton), {
+                          size: "small",
+                          type: "danger",
+                          link: "",
+                          title: "删除",
+                          icon: unref(Delete),
                           onClick: ($event) => removeHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1)
-                        }, {
-                          default: withCtx(() => [
-                            createVNode(unref(Delete))
-                          ]),
-                          _: 2
-                        }, 1032, ["onClick"]), [
+                        }, null, 8, ["icon", "onClick"]), [
                           [vShow, showDelete(scope.$index + 1 + pagecontext.value * pagesize.value - 1)]
-                        ])
+                        ]),
+                        copyable(scope.$index + 1 + pagecontext.value * pagesize.value - 1) ? (openBlock(), createBlock(unref(TMagicButton), {
+                          key: 0,
+                          link: "",
+                          size: "small",
+                          type: "primary",
+                          title: "复制",
+                          icon: unref(DocumentCopy),
+                          disabled: _ctx.disabled,
+                          onClick: ($event) => copyHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1)
+                        }, null, 8, ["icon", "disabled", "onClick"])) : createCommentVNode("", true)
                       ]),
                       _: 3
                     }, 8, ["width", "fixed"]),
@@ -2708,7 +2823,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$7 = { key: 0 };
+const _hoisted_1$8 = { key: 0 };
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormDisplay"
@@ -2732,12 +2847,12 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     }
     useAddField(props.prop);
     return (_ctx, _cache) => {
-      return _ctx.model ? (openBlock(), createElementBlock("span", _hoisted_1$7, toDisplayString(_ctx.model[_ctx.name]), 1)) : createCommentVNode("", true);
+      return _ctx.model ? (openBlock(), createElementBlock("span", _hoisted_1$8, toDisplayString(_ctx.model[_ctx.name]), 1)) : 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__ */ defineComponent({
   ...{
     name: "MFormDynamicField"
@@ -2804,7 +2919,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+      return openBlock(), createElementBlock("div", _hoisted_1$7, [
         createVNode(unref(TMagicForm), { size: "small" }, {
           default: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(Object.keys(fieldMap.value), (key) => {
@@ -3038,7 +3153,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$5 = { style: { "min-height": "1px" } };
+const _hoisted_1$6 = { style: { "min-height": "1px" } };
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormDialog"
@@ -3148,7 +3263,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                 style: { "text-align": "left" }
               }, {
                 default: withCtx(() => [
-                  createElementVNode("div", _hoisted_1$5, [
+                  createElementVNode("div", _hoisted_1$6, [
                     renderSlot(_ctx.$slots, "left")
                   ])
                 ]),
@@ -3239,7 +3354,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$4 = ["href"];
+const _hoisted_1$5 = ["href"];
 const _hoisted_2$1 = {
   key: 2,
   class: "m-fields-link"
@@ -3313,7 +3428,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         target: "_blank",
         href: href.value,
         style: normalizeStyle(_ctx.config.css || {})
-      }, toDisplayString(displayText.value), 13, _hoisted_1$4)) : _ctx.config.href && _ctx.disabled ? (openBlock(), createElementBlock("span", {
+      }, toDisplayString(displayText.value), 13, _hoisted_1$5)) : _ctx.config.href && _ctx.disabled ? (openBlock(), createElementBlock("span", {
         key: 1,
         style: normalizeStyle(_ctx.config.disabledCss || {})
       }, toDisplayString(displayText.value), 5)) : (openBlock(), createElementBlock("div", _hoisted_2$1, [
@@ -3392,7 +3507,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$3 = { class: "m-fields-number-range" };
+const _hoisted_1$4 = { class: "m-fields-number-range" };
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormNumberRange"
@@ -3424,7 +3539,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       emit("change", [props.model[props.name][0], Number(v)]);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
         createVNode(unref(TMagicInput), {
           modelValue: _ctx.model[_ctx.name][0],
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name][0] = $event),
@@ -3447,6 +3562,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _hoisted_1$3 = { key: 1 };
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormRadioGroup"
@@ -3466,10 +3582,15 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   emits: ["change"],
   setup(__props, { emit: __emit }) {
     const props = __props;
+    const itemComponent = computed(() => props.config.childType === "button" ? TMagicRadioButton : 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 ? (openBlock(), createBlock(unref(TMagicRadioGroup), {
@@ -3477,20 +3598,51 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         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: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.config.options, (option) => {
-            return openBlock(), createBlock(unref(TMagicRadio), {
+            return openBlock(), createBlock(resolveDynamicComponent(itemComponent.value), {
               value: option.value,
-              key: `${option.value}`
+              key: `${option.value}`,
+              onClick: withModifiers(($event) => clickHandler(option.value), ["prevent"])
             }, {
               default: withCtx(() => [
-                createTextVNode(toDisplayString(option.text), 1)
+                option.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
+                  key: 0,
+                  placement: "top-start",
+                  content: option.tooltip
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("div", null, [
+                      option.icon ? (openBlock(), createBlock(unref(TMagicIcon), {
+                        key: 0,
+                        size: "16"
+                      }, {
+                        default: withCtx(() => [
+                          (openBlock(), createBlock(resolveDynamicComponent(option.icon)))
+                        ]),
+                        _: 2
+                      }, 1024)) : createCommentVNode("", true),
+                      createElementVNode("span", null, toDisplayString(option.text), 1)
+                    ])
+                  ]),
+                  _: 2
+                }, 1032, ["content"])) : (openBlock(), createElementBlock("div", _hoisted_1$3, [
+                  option.icon ? (openBlock(), createBlock(unref(TMagicIcon), {
+                    key: 0,
+                    size: "16"
+                  }, {
+                    default: withCtx(() => [
+                      (openBlock(), createBlock(resolveDynamicComponent(option.icon)))
+                    ]),
+                    _: 2
+                  }, 1024)) : createCommentVNode("", true),
+                  createElementVNode("span", null, toDisplayString(option.text), 1)
+                ]))
               ]),
               _: 2
-            }, 1032, ["value"]);
+            }, 1032, ["value", "onClick"]);
           }), 128))
         ]),
         _: 1