@funcho/ui 1.1.8 → 1.1.10

package/dist/cjs/business/ProForm/ProForm.vue.js

@@ -116,6 +116,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       return `请输入${item.label}`;
     };
     const formRef = vue.ref();
+    const handleRef = (el, item) => {
+      if (item.attrs?.onRef && el) {
+        item.attrs.onRef(el, item);
+      }
+    };
     __expose(
       new Proxy(
         {},
@@ -161,13 +166,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   key: 0,
                   ref_for: true
                 }, item.attrs, {
+                  ref_for: true,
+                  ref: (el) => handleRef(el, item),
                   placeholder: getPlaceholder(item, item.type),
                   style: { "width": "100%" }
                 }), null, 16, ["placeholder"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(componentsMap.ComponentsMap)[item.type || "FcInput"]), vue.mergeProps({
                   key: 1,
+                  ref_for: true
+                }, item.attrs, {
+                  ref_for: true,
+                  ref: (el) => handleRef(el, item),
                   modelValue: formModel.value[item.prop],
-                  "onUpdate:modelValue": ($event) => formModel.value[item.prop] = $event
-                }, { ref_for: true }, item.attrs, {
+                  "onUpdate:modelValue": ($event) => formModel.value[item.prop] = $event,
                   placeholder: getPlaceholder(item, item.type),
                   style: { "width": "100%" }
                 }), null, 16, ["modelValue", "onUpdate:modelValue", "placeholder"]))

package/dist/cjs/business/TreeCheckFilter/TreeCheckFilter.vue.js

@@ -0,0 +1,212 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const useNamespace = require('../../hooks/use-namespace.js');
+require('../../components/Button/index.js');
+require('../../components/Dialog/index.js');
+require('../../components/ConfigProvider/index.js');
+const index$1 = require('../../components/Input/index.js');
+const index$3 = require('../../components/Tree/index.js');
+require('../../components/Tabs/index.js');
+require('../../components/TabPane/index.js');
+require('../../components/Steps/index.js');
+require('../../components/Step/index.js');
+require('../../components/InputNumber/index.js');
+require('../../components/Select/index.js');
+require('../../components/Option/index.js');
+require('../../components/DatePicker/index.js');
+require('../../components/DatePickerPanel/index.js');
+require('../../components/Tooltip/index.js');
+require('../../components/Icon/index.js');
+require('../../components/Notification/index.js');
+require('../../components/Link/index.js');
+require('../../components/Text/index.js');
+const index$2 = require('../../components/Scrollbar/index.js');
+require('../../components/Splitter/index.js');
+require('../../components/SplitterPanel/index.js');
+require('../../components/Autocomplete/index.js');
+require('../../components/Cascader/index.js');
+require('../../components/CascaderPanel/index.js');
+const index = require('../../components/Checkbox/index.js');
+require('../../components/CheckboxGroup/index.js');
+require('../../components/CheckboxButton/index.js');
+require('../../components/Form/index.js');
+require('../../components/FormItem/index.js');
+require('../../components/InputTag/index.js');
+require('../../components/Radio/index.js');
+require('../../components/RadioGroup/index.js');
+require('../../components/SelectV2/index.js');
+require('../../components/Switch/index.js');
+require('../../components/TimePicker/index.js');
+require('../../components/TimeSelect/index.js');
+require('../../components/TreeSelect/index.js');
+require('../../components/Upload/index.js');
+require('../../components/Avatar/index.js');
+require('../../components/AvatarGroup/index.js');
+require('../../components/Badge/index.js');
+require('../../components/Card/index.js');
+require('../../components/Descriptions/index.js');
+require('../../components/DescriptionsItem/index.js');
+require('../../components/Empty/index.js');
+require('../../components/Image/index.js');
+require('../../components/ImageViewer/index.js');
+require('../../components/Pagination/index.js');
+require('../../components/Table/index.js');
+require('../../components/TableColumn/index.js');
+require('../../components/TableV2/index.js');
+require('../../components/Tag/index.js');
+require('../../components/Breadcrumb/index.js');
+require('../../components/BreadcrumbItem/index.js');
+require('../../components/Drawer/index.js');
+require('../../components/Popconfirm/index.js');
+require('../../components/IconComponent/index.js');
+require('../../components/Popover/index.js');
+require('../../components/Result/index.js');
+require('../../components/Progress/index.js');
+require('../../components/Divider/index.js');
+require('../../components/Dropdown/index.js');
+require('../../components/DropdownMenu/index.js');
+require('../../components/DropdownItem/index.js');
+require('../../components/Menu/index.js');
+require('../../components/SubMenu/index.js');
+require('../../components/MenuItem/index.js');
+require('../../components/RadioButton/index.js');
+require('../../components/MenuItemGroup/index.js');
+require('../../components/Collapse/index.js');
+require('../../components/CollapseItem/index.js');
+require('../../components/ContextMenu/index.js');
+require('../../components/CodeEditor/index.js');
+require('../../components/RichEditor/index.js');
+const Icons = require('@funcho/icons-vue');
+const core = require('@vueuse/core');
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "FcProTreeCheckFilter",
+    inheritAttrs: false
+  },
+  __name: "TreeCheckFilter",
+  props: {
+    border: { type: Boolean, default: true },
+    label: { default: "全选" },
+    data: { default: () => [] },
+    nodeKey: { default: "value" },
+    showCheckbox: { type: Boolean, default: true },
+    showSearch: { type: Boolean, default: true }
+  },
+  setup(__props, { expose: __expose }) {
+    const ns = useNamespace.useNamespace("pro-tree-check-filter");
+    const treeCheckFilterHeader = vue.ref(null);
+    const { height: treeCheckFilterHeaderHeight } = core.useElementSize(treeCheckFilterHeader, void 0, {
+      box: "border-box"
+    });
+    const props = __props;
+    const checkAll = vue.ref(false);
+    const indeterminate = vue.ref(false);
+    const queryValue = vue.ref("");
+    const treeRef = vue.ref();
+    const handelSearch = () => {
+      treeRef.value?.filter(queryValue.value);
+    };
+    const filterNode = (value, data) => {
+      if (!value) return true;
+      return data.label.includes(value);
+    };
+    const handleCheckAllChange = () => {
+      if (checkAll.value) {
+        treeRef.value?.setCheckedNodes([]);
+        checkAll.value = false;
+        indeterminate.value = false;
+      } else {
+        const currentCheckedKeys = treeRef.value?.getCheckedKeys();
+        const nodesMap = treeRef.value?.store.nodesMap || {};
+        const visibleKeys = [];
+        Object.values(nodesMap).forEach((node) => {
+          if (node.level > 0 && node.visible && node.isLeaf && !node.disabled) {
+            visibleKeys.push(node.data[props.nodeKey]);
+          }
+        });
+        const finalKeys = Array.from(/* @__PURE__ */ new Set([...currentCheckedKeys, ...visibleKeys]));
+        treeRef.value?.setCheckedKeys(finalKeys);
+        checkAll.value = isAllAvailableChecked();
+        indeterminate.value = !checkAll.value && finalKeys.length > 0;
+      }
+    };
+    const handleTreeCheckChange = () => {
+      const currentCheckedKeys = treeRef.value?.getCheckedKeys();
+      checkAll.value = isAllAvailableChecked();
+      indeterminate.value = !checkAll.value && currentCheckedKeys.length > 0;
+    };
+    const isAllAvailableChecked = () => {
+      const nodesMap = treeRef.value?.store.nodesMap || {};
+      const availableNodes = Object.values(nodesMap).filter((node) => node.level > 0 && !node.disabled);
+      if (availableNodes.length === 0) return false;
+      return availableNodes.every((node) => node.checked);
+    };
+    __expose(
+      new Proxy(
+        {},
+        {
+          get(_, key) {
+            return treeRef.value?.[key];
+          },
+          has(_, key) {
+            return key in treeRef.value;
+          }
+        }
+      )
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass({ [vue.unref(ns).b()]: true, [vue.unref(ns).is("border")]: __props.border })
+      }, [
+        __props.showCheckbox || __props.showSearch ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          ref_key: "treeCheckFilterHeader",
+          ref: treeCheckFilterHeader,
+          class: vue.normalizeClass(vue.unref(ns).e("header"))
+        }, [
+          __props.showCheckbox ? (vue.openBlock(), vue.createBlock(vue.unref(index.FcCheckbox), {
+            key: 0,
+            "model-value": checkAll.value,
+            label: __props.label,
+            indeterminate: indeterminate.value,
+            onClick: handleCheckAllChange
+          }, null, 8, ["model-value", "label", "indeterminate"])) : vue.createCommentVNode("", true),
+          __props.showSearch ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.FcInput), {
+            key: 1,
+            modelValue: queryValue.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => queryValue.value = $event),
+            placeholder: "请输入关键词",
+            "prefix-icon": vue.unref(Icons.Search),
+            onClear: handelSearch,
+            onKeyup: vue.withKeys(handelSearch, ["enter"])
+          }, null, 8, ["modelValue", "prefix-icon"])) : vue.createCommentVNode("", true)
+        ], 2)) : vue.createCommentVNode("", true),
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(vue.unref(ns).e("body")),
+          style: vue.normalizeStyle({ height: `calc(100% - ${vue.unref(treeCheckFilterHeaderHeight)}px)` })
+        }, [
+          vue.createVNode(vue.unref(index$2.FcScrollbar), { height: "100%" }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(vue.unref(index$3.FcTree), vue.mergeProps(_ctx.$attrs, {
+                ref_key: "treeRef",
+                ref: treeRef,
+                "show-checkbox": "",
+                data: __props.data,
+                "filter-node-method": filterNode,
+                "node-key": __props.nodeKey,
+                onCheck: handleTreeCheckChange
+              }), null, 16, ["data", "node-key"])
+            ]),
+            _: 1
+          })
+        ], 6)
+      ], 2);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/dist/cjs/business/TreeCheckFilter/TreeCheckFilter.vue3.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const TreeCheckFilter_vue_vue_type_script_setup_true_lang = require('./TreeCheckFilter.vue.js');
+;/* empty css                      */
+
+
+
+exports.default = TreeCheckFilter_vue_vue_type_script_setup_true_lang.default;

package/dist/cjs/business/TreeCheckFilter/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const TreeCheckFilter_vue_vue_type_script_setup_true_lang = require('./TreeCheckFilter.vue.js');
+;/* empty css                      */
+const withInstall = require('../../_utils/with-install.js');
+
+const FcProTreeCheckFilter = withInstall.withInstall(TreeCheckFilter_vue_vue_type_script_setup_true_lang.default);
+
+exports.FcProTreeCheckFilter = FcProTreeCheckFilter;
+exports.default = FcProTreeCheckFilter;

package/dist/cjs/business/TreeTransfer/TreeTransfer.vue.js

@@ -0,0 +1,194 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const vue = require('vue');
+const useNamespace = require('../../hooks/use-namespace.js');
+const TreeCheckFilter_vue_vue_type_script_setup_true_lang = require('../TreeCheckFilter/TreeCheckFilter.vue.js');
+;/* empty css                                       */
+require('../../components/Button/index.js');
+require('../../components/Dialog/index.js');
+require('../../components/ConfigProvider/index.js');
+require('../../components/Input/index.js');
+require('../../components/Tree/index.js');
+require('../../components/Tabs/index.js');
+require('../../components/TabPane/index.js');
+require('../../components/Steps/index.js');
+require('../../components/Step/index.js');
+require('../../components/InputNumber/index.js');
+require('../../components/Select/index.js');
+require('../../components/Option/index.js');
+require('../../components/DatePicker/index.js');
+require('../../components/DatePickerPanel/index.js');
+const index = require('../../components/Tooltip/index.js');
+require('../../components/Icon/index.js');
+const index$2 = require('../../components/Notification/index.js');
+require('../../components/Link/index.js');
+require('../../components/Text/index.js');
+require('../../components/Scrollbar/index.js');
+require('../../components/Splitter/index.js');
+require('../../components/SplitterPanel/index.js');
+require('../../components/Autocomplete/index.js');
+require('../../components/Cascader/index.js');
+require('../../components/CascaderPanel/index.js');
+require('../../components/Checkbox/index.js');
+require('../../components/CheckboxGroup/index.js');
+require('../../components/CheckboxButton/index.js');
+require('../../components/Form/index.js');
+require('../../components/FormItem/index.js');
+require('../../components/InputTag/index.js');
+require('../../components/Radio/index.js');
+require('../../components/RadioGroup/index.js');
+require('../../components/SelectV2/index.js');
+require('../../components/Switch/index.js');
+require('../../components/TimePicker/index.js');
+require('../../components/TimeSelect/index.js');
+require('../../components/TreeSelect/index.js');
+require('../../components/Upload/index.js');
+require('../../components/Avatar/index.js');
+require('../../components/AvatarGroup/index.js');
+require('../../components/Badge/index.js');
+require('../../components/Card/index.js');
+require('../../components/Descriptions/index.js');
+require('../../components/DescriptionsItem/index.js');
+require('../../components/Empty/index.js');
+require('../../components/Image/index.js');
+require('../../components/ImageViewer/index.js');
+require('../../components/Pagination/index.js');
+require('../../components/Table/index.js');
+require('../../components/TableColumn/index.js');
+require('../../components/TableV2/index.js');
+require('../../components/Tag/index.js');
+require('../../components/Breadcrumb/index.js');
+require('../../components/BreadcrumbItem/index.js');
+require('../../components/Drawer/index.js');
+require('../../components/Popconfirm/index.js');
+const index$1 = require('../../components/IconComponent/index.js');
+require('../../components/Popover/index.js');
+require('../../components/Result/index.js');
+require('../../components/Progress/index.js');
+require('../../components/Divider/index.js');
+require('../../components/Dropdown/index.js');
+require('../../components/DropdownMenu/index.js');
+require('../../components/DropdownItem/index.js');
+require('../../components/Menu/index.js');
+require('../../components/SubMenu/index.js');
+require('../../components/MenuItem/index.js');
+require('../../components/RadioButton/index.js');
+require('../../components/MenuItemGroup/index.js');
+require('../../components/Collapse/index.js');
+require('../../components/CollapseItem/index.js');
+require('../../components/ContextMenu/index.js');
+require('../../components/CodeEditor/index.js');
+require('../../components/RichEditor/index.js');
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "FcProTreeTransfer",
+    inheritAttrs: false
+  },
+  __name: "TreeTransfer",
+  props: {
+    leftProps: { default: () => ({}) },
+    rightProps: { default: () => ({}) }
+  },
+  emits: ["add", "remove"],
+  setup(__props, { emit: __emit }) {
+    const ns = useNamespace.useNamespace("pro-tree-transfer");
+    const leftTreeRef = vue.ref();
+    const rightTreeRef = vue.ref();
+    const emits = __emit;
+    const handleAddClick = () => {
+      const keys = leftTreeRef.value?.getCheckedKeys(false) || [];
+      if (keys.length === 0) {
+        index$2.FcNotification({
+          type: "warning",
+          message: "请选择左侧内容"
+        });
+        return;
+      }
+      const nodes = leftTreeRef.value?.getCheckedNodes(false, false) || [];
+      emits("add", leftTreeRef.value, nodes, keys);
+    };
+    const handleRemoveClick = () => {
+      const keys = rightTreeRef.value?.getCheckedKeys(false) || [];
+      if (keys.length === 0) {
+        index$2.FcNotification({
+          type: "warning",
+          message: "请选择右侧内容"
+        });
+        return;
+      }
+      const nodes = rightTreeRef.value?.getCheckedNodes(false, false) || [];
+      emits("remove", rightTreeRef.value, nodes, keys);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(vue.unref(ns).b())
+      }, [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(vue.unref(ns).e("left"))
+        }, [
+          vue.createVNode(TreeCheckFilter_vue_vue_type_script_setup_true_lang.default, vue.mergeProps({
+            ref_key: "leftTreeRef",
+            ref: leftTreeRef
+          }, __props.leftProps), null, 16)
+        ], 2),
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(vue.unref(ns).e("center"))
+        }, [
+          !__props.leftProps.hiddenBtn ? (vue.openBlock(), vue.createBlock(vue.unref(index.FcTooltip), {
+            key: 0,
+            content: __props.leftProps.tooltip || "新增",
+            placement: "top",
+            "fallback-placements": ["top", "bottom", "left", "right"]
+          }, {
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(vue.unref(ns).e("right")),
+                onClick: handleAddClick
+              }, [
+                vue.createVNode(vue.unref(index$1.FcIconComponent), {
+                  name: "FcRightArrow",
+                  size: "32",
+                  color: "#165dff"
+                })
+              ], 2)
+            ]),
+            _: 1
+          }, 8, ["content"])) : vue.createCommentVNode("", true),
+          !__props.rightProps.hiddenBtn ? (vue.openBlock(), vue.createBlock(vue.unref(index.FcTooltip), {
+            key: 1,
+            content: __props.rightProps.tooltip || "删除",
+            placement: "top",
+            "fallback-placements": ["top", "bottom", "left", "right"]
+          }, {
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(vue.unref(ns).e("left")),
+                onClick: handleRemoveClick
+              }, [
+                vue.createVNode(vue.unref(index$1.FcIconComponent), {
+                  name: "FcLeftArrow",
+                  size: "32",
+                  color: "#ff3232"
+                })
+              ], 2)
+            ]),
+            _: 1
+          }, 8, ["content"])) : vue.createCommentVNode("", true)
+        ], 2),
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(vue.unref(ns).e("right"))
+        }, [
+          vue.createVNode(TreeCheckFilter_vue_vue_type_script_setup_true_lang.default, vue.mergeProps({
+            ref_key: "rightTreeRef",
+            ref: rightTreeRef
+          }, __props.rightProps), null, 16)
+        ], 2)
+      ], 2);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/dist/cjs/business/TreeTransfer/TreeTransfer.vue3.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const TreeTransfer_vue_vue_type_script_setup_true_lang = require('./TreeTransfer.vue.js');
+;/* empty css                   */
+
+
+
+exports.default = TreeTransfer_vue_vue_type_script_setup_true_lang.default;

package/dist/cjs/business/TreeTransfer/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const TreeTransfer_vue_vue_type_script_setup_true_lang = require('./TreeTransfer.vue.js');
+;/* empty css                   */
+const withInstall = require('../../_utils/with-install.js');
+
+const FcProTreeTransfer = withInstall.withInstall(TreeTransfer_vue_vue_type_script_setup_true_lang.default);
+
+exports.FcProTreeTransfer = FcProTreeTransfer;
+exports.default = FcProTreeTransfer;

package/dist/cjs/business/index.js

@@ -5,9 +5,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const index = require('./SidebarMainLayout/index.js');
 const index$1 = require('./DataTable/index.js');
 const index$2 = require('./ProForm/index.js');
+const index$3 = require('./TreeCheckFilter/index.js');
+const index$4 = require('./TreeTransfer/index.js');
 
 
 
 exports.FcProSidebarMainLayout = index.FcProSidebarMainLayout;
 exports.FcProDataTable = index$1.FcProDataTable;
 exports.FcProForm = index$2.FcProForm;
+exports.FcProTreeCheckFilter = index$3.FcProTreeCheckFilter;
+exports.FcProTreeTransfer = index$4.FcProTreeTransfer;

package/dist/cjs/index.js

@@ -7,8 +7,8 @@ const directive = require('./node_modules/.pnpm/element-plus@2.13.5_patch_hash_4
 const dayjs_min = require('./_virtual/dayjs.min.js');
 ;/* empty css                   */
 const lovIdRequestProvide = require('./config/lovId-request-provide.js');
-const index$1i = require('./components/index.js');
-const index$1j = require('./business/index.js');
+const index$1k = require('./components/index.js');
+const index$1l = require('./business/index.js');
 const version = require('./version.js');
 const index$1 = require('./components/Button/index.js');
 const index$2 = require('./components/Dialog/index.js');
@@ -91,12 +91,14 @@ const index$1e = require('./components/RichEditor/index.js');
 const index$1f = require('./business/SidebarMainLayout/index.js');
 const index$1g = require('./business/DataTable/index.js');
 const index$1h = require('./business/ProForm/index.js');
+const index$1i = require('./business/TreeCheckFilter/index.js');
+const index$1j = require('./business/TreeTransfer/index.js');
 
-const components = Object.keys(index$1i).map((key) => {
-  return index$1i[key];
+const components = Object.keys(index$1k).map((key) => {
+  return index$1k[key];
 });
-const proComponents = Object.keys(index$1j).map((key) => {
-  return index$1j[key];
+const proComponents = Object.keys(index$1l).map((key) => {
+  return index$1l[key];
 });
 const installComponents = [...components, ...proComponents].filter((comp) => {
   return typeof comp === "object" && comp.name && typeof comp.install === "function";
@@ -224,5 +226,7 @@ exports.FcRichEditorInput = index$1e.FcRichEditorInput;
 exports.FcProSidebarMainLayout = index$1f.FcProSidebarMainLayout;
 exports.FcProDataTable = index$1g.FcProDataTable;
 exports.FcProForm = index$1h.FcProForm;
+exports.FcProTreeCheckFilter = index$1i.FcProTreeCheckFilter;
+exports.FcProTreeTransfer = index$1j.FcProTreeTransfer;
 exports.default = index;
 exports.install = install;

package/dist/cjs/packages/ui/package.json.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const version = "1.1.8";
+const version = "1.1.10";
 
 exports.version = version;

package/dist/esm/business/ProForm/ProForm.vue.mjs

@@ -112,6 +112,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return `请输入${item.label}`;
     };
     const formRef = ref();
+    const handleRef = (el, item) => {
+      if (item.attrs?.onRef && el) {
+        item.attrs.onRef(el, item);
+      }
+    };
     __expose(
       new Proxy(
         {},
@@ -157,13 +162,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   key: 0,
                   ref_for: true
                 }, item.attrs, {
+                  ref_for: true,
+                  ref: (el) => handleRef(el, item),
                   placeholder: getPlaceholder(item, item.type),
                   style: { "width": "100%" }
                 }), null, 16, ["placeholder"])) : (openBlock(), createBlock(resolveDynamicComponent(unref(ComponentsMap)[item.type || "FcInput"]), mergeProps({
                   key: 1,
+                  ref_for: true
+                }, item.attrs, {
+                  ref_for: true,
+                  ref: (el) => handleRef(el, item),
                   modelValue: formModel.value[item.prop],
-                  "onUpdate:modelValue": ($event) => formModel.value[item.prop] = $event
-                }, { ref_for: true }, item.attrs, {
+                  "onUpdate:modelValue": ($event) => formModel.value[item.prop] = $event,
                   placeholder: getPlaceholder(item, item.type),
                   style: { "width": "100%" }
                 }), null, 16, ["modelValue", "onUpdate:modelValue", "placeholder"]))