cnhis-design-vue 3.1.25-beta.3 → 3.1.25-beta.5

package/README.md

@@ -1,123 +1,123 @@
-# 安装
-
-```shell
-npm i cnhis-design-vue@[版本号]
-# or
-yarn add cnhis-design-vue@[版本号] #推荐
-```
-
-## 1.全局引入
-
-```typescript
-// main.ts
-import { createApp } from 'vue';
-import App from './App.vue';
-import 'cnhis-design-vue/es/packages/index.css';
-import cui from 'cnhis-design-vue';
-
-const app = createApp(App);
-app.use(cui).mount('#app');
-```
-
-## 2. 按需引入
-
-组件现在支持了自动按需引入, 但是样式文件需要额外的处理
-
-### 2.1 样式处理方式 1(按需引入样式)
-
-```shell
-# 安装自动导入样式的插件
-npm i -d vite-plugin-style-import
-```
-
-```typescript
-// vite.config.ts
-import { defineConfig } from 'vite';
-import { createStyleImportPlugin } from 'vite-plugin-style-import';
-
-export default defineConfig({
-  plugins: [
-    // ...otherPlugins
-    createStyleImportPlugin({
-      libs: [
-        {
-          libraryName: 'cnhis-design-vue',
-          esModule: true,
-          ensureStyleFile: true,
-          resolveStyle: name => {
-            return `cnhis-design-vue/es/components/${ name.slice(2) }/style/index.css`;
-          }
-        }
-      ]
-    })
-  ]
-});
-```
-
-### 2.2 样式处理方式 2(全局引入样式)
-
-```typescript
-// main.ts
-import 'cnhis-design-vue/es/components/index.css';
-```
-
-## 3. 注意
-
-由于 vxe-table 目前的引入方式是由组件 install 触发的,所以如果需要使用 c-grid/c-big-table 组件,需要全局注册二者任意一个
-
-```typescript
-// main.ts
-import { createApp } from 'vue';
-import App from './App.vue';
-
-import { CGrid } from 'cnhis-design-vue';
-// 或者
-import { CBigTable } from 'cnhis-design-vue';
-
-const app = createApp(App);
-app.use(CGrid);
-// 或者
-app.use(CBigTable);
-app.mount('#app');
-```
-
-## 4.FAQ
-
-### 4.1 项目打包后样式丢失
-
-> 处理方法, 将 cnhis-design-vue 从 vendor 包中移除
-
-```typescript
-// vite.config.ts
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-  rollupOptions: {
-    // ..otherOptions
-    output: {
-      dir: './dist',
-      manualChunks(id: string) {
-        if (id.includes('node_modules') && !id.includes('cnhis-design-vue')) {
-          return 'vendor';
-        }
-      }
-    }
-  }
-});
-```
-
-### 4.2 找不到文件
-
-> 由于组件库输出文件类型由 js 修改成了 mjs, 如果配置了 resolve 属性的项目, 需要将 mjs 文件类型添加至 extensions 中
-
-```javascript
-// vite.config.ts
-const config = {
-  // ...otherOptions
-  resolve: {
-    // ...otherOptions
-    // 如果没有配置, 则不用考虑
-    extensions: ['.js', '.ts', '.vue', '.json', '.mjs']
-  }
-};
-```
+# 安装
+
+```shell
+npm i cnhis-design-vue@[版本号]
+# or
+yarn add cnhis-design-vue@[版本号] #推荐
+```
+
+## 1.全局引入
+
+```typescript
+// main.ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import 'cnhis-design-vue/es/packages/index.css';
+import cui from 'cnhis-design-vue';
+
+const app = createApp(App);
+app.use(cui).mount('#app');
+```
+
+## 2. 按需引入
+
+组件现在支持了自动按需引入, 但是样式文件需要额外的处理
+
+### 2.1 样式处理方式 1(按需引入样式)
+
+```shell
+# 安装自动导入样式的插件
+npm i -d vite-plugin-style-import
+```
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import { createStyleImportPlugin } from 'vite-plugin-style-import';
+
+export default defineConfig({
+  plugins: [
+    // ...otherPlugins
+    createStyleImportPlugin({
+      libs: [
+        {
+          libraryName: 'cnhis-design-vue',
+          esModule: true,
+          ensureStyleFile: true,
+          resolveStyle: name => {
+            return `cnhis-design-vue/es/components/${ name.slice(2) }/style/index.css`;
+          }
+        }
+      ]
+    })
+  ]
+});
+```
+
+### 2.2 样式处理方式 2(全局引入样式)
+
+```typescript
+// main.ts
+import 'cnhis-design-vue/es/components/index.css';
+```
+
+## 3. 注意
+
+由于 vxe-table 目前的引入方式是由组件 install 触发的,所以如果需要使用 c-grid/c-big-table 组件,需要全局注册二者任意一个
+
+```typescript
+// main.ts
+import { createApp } from 'vue';
+import App from './App.vue';
+
+import { CGrid } from 'cnhis-design-vue';
+// 或者
+import { CBigTable } from 'cnhis-design-vue';
+
+const app = createApp(App);
+app.use(CGrid);
+// 或者
+app.use(CBigTable);
+app.mount('#app');
+```
+
+## 4.FAQ
+
+### 4.1 项目打包后样式丢失
+
+> 处理方法, 将 cnhis-design-vue 从 vendor 包中移除
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  rollupOptions: {
+    // ..otherOptions
+    output: {
+      dir: './dist',
+      manualChunks(id: string) {
+        if (id.includes('node_modules') && !id.includes('cnhis-design-vue')) {
+          return 'vendor';
+        }
+      }
+    }
+  }
+});
+```
+
+### 4.2 找不到文件
+
+> 由于组件库输出文件类型由 js 修改成了 mjs, 如果配置了 resolve 属性的项目, 需要将 mjs 文件类型添加至 extensions 中
+
+```javascript
+// vite.config.ts
+const config = {
+  // ...otherOptions
+  resolve: {
+    // ...otherOptions
+    // 如果没有配置, 则不用考虑
+    extensions: ['.js', '.ts', '.vue', '.json', '.mjs']
+  }
+};
+```

package/es/components/big-table/src/BigTable.vue.d.ts

@@ -912,22 +912,7 @@ declare const _default: import("vue").DefineComponent<{
     NIcon: any;
     CGrid: import("../../../shared/types").SFCWithInstall<import("vue").DefineComponent<{}, any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
     checkMethod: ({ row }: {
-        row: any; /**
-         * 针对 bigTable 的设置列
-         * type: 列的类型
-         * field: 列字段名（注：属性层级越深，渲染性能将直线下降）
-         * title: 列标题（支持开启国际化）
-         * width: 列宽度（如果为空则均匀分配剩余宽度，如果全部列固定了，可能会存在宽屏下不会铺满，可以配合 "%" 或者 "min-width" 布局）
-         * minWidth: 最小列宽度；会自动将剩余空间按比例分配
-         * resizable: 列是否允许拖动列宽调整大小
-         * visible: 列是否显示
-         * fixed: 将列固定在左侧或者右侧（注意：固定列应该放在左右两侧的位置）
-         * align: 列对齐方式
-         * headerAlign: 表头列的对齐方式
-         * footerAlign: 表尾列的对齐方式
-         * formatter: 格式化显示内容 Function({cellValue, row, column})
-         * sortable: 是否允许列排序
-         */
+        row: any;
     }) => boolean;
     visibleMethod: ({ row }: any) => boolean;
     getRowStyle: ({ row }: any) => string | null;

package/es/components/big-table/src/BigTable.vue_vue_type_script_setup_true_lang.js

@@ -19,7 +19,7 @@ import { useMessage, NIcon, NTooltip, NCheckbox, NCheckboxGroup, NGrid, NGi, NSp
 import Grid from '../../grid/index.js';
 import XEUtils from 'xe-utils';
 import 'moment';
-import { handleTableHeight, setTableConfig, handleGroupColums, treeToList, checkMethod, setTreeGroupTitle, handleName, generateEditRender, handlerInitSearchItem, getEvaluate, getMapVal, getCandidateComponents, getageShowType, isLink, showFilter, reScrollFilterWrap, hideFilterWrap, mergeConObjFn, setDefaultFormData, handleImgArr, handleImgSrc, modalDetailImage, handleQrCodeContent, getInlineEditBtn, isCopy, setVisibleCheckAllWrap, handleTableImageSize, visibleMethod, getRowStyle, getFooterGroup, flattenRow, intersectRow, removeCheckedDisabledRows } from './utils.js';
+import { handleTableHeight, setTableConfig, handleGroupColums, treeToList, checkMethod, setTreeGroupTitle, isFilterItem, handleName, generateEditRender, handlerInitSearchItem, getEvaluate, getMapVal, getCandidateComponents, getageShowType, isLink, showFilter, reScrollFilterWrap, hideFilterWrap, mergeConObjFn, setDefaultFormData, handleImgArr, handleImgSrc, modalDetailImage, handleQrCodeContent, getInlineEditBtn, isCopy, setVisibleCheckAllWrap, handleTableImageSize, visibleMethod, getRowStyle, getFooterGroup, flattenRow, intersectRow, removeCheckedDisabledRows } from './utils.js';
 import InputButtonScript from './components/input-button.js';
 import Separate from './components/separate.js';
 import xb_big from '../../../shared/assets/img/xb_big.js';
@@ -405,22 +405,30 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         };
       }
       const currentColumns = fieldList.map((item, index) => {
-        var _a2, _b2, _c2, _d, _e, _f, _g, _h;
+        var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i;
         let filterField = false;
+        let isOtherFilter = false;
         let filterItems = [];
         try {
           const fieldSetting = JSON.parse(item.fieldSetting || "{}");
           let notParticipatingSearch = (fieldSetting == null ? void 0 : fieldSetting.notParticipatingSearch) || "";
           filterField = notParticipatingSearch != 1 && ((_a2 = fieldSetting == null ? void 0 : fieldSetting.mapping) == null ? void 0 : _a2.type) === "manual" && item.isMerge != 1;
           filterItems = (_c2 = (_b2 = fieldSetting == null ? void 0 : fieldSetting.mapping) == null ? void 0 : _b2.mappingFiled) == null ? void 0 : _c2.map((item2) => item2.value[0]);
+          if (isFilterItem(item)) {
+            isOtherFilter = filterField = true;
+            filterItems = (_d = item.options) == null ? void 0 : _d.map((item2) => ({
+              ...item2,
+              key: item2.label
+            }));
+          }
         } catch (e) {
         }
-        let notParticipatingSort = ((_d = item == null ? void 0 : item.fieldSetting) == null ? void 0 : _d.notParticipatingSort) || "";
+        let notParticipatingSort = ((_e = item == null ? void 0 : item.fieldSetting) == null ? void 0 : _e.notParticipatingSort) || "";
         let fixed = isAboutNestTable.value ? "" : item.isFixed ? item.isFixed == 1 ? "left" : "right" : "";
         let sortable = props.isNestTable ? false : !filterField && item.isSort == 1 && notParticipatingSort != 1 && item.isMerge != 1;
         let treeNode = props.isNestTable ? false : state.isTree != 0 ? index === 0 : false;
         let type = index === 0 && props.showNestTable ? "expand" : "";
-        const isShow = item.isShow == 1 && ((_e = item == null ? void 0 : item.settingObj) == null ? void 0 : _e.isHide) != 1;
+        const isShow = item.isShow == 1 && ((_f = item == null ? void 0 : item.settingObj) == null ? void 0 : _f.isHide) != 1;
         if (isScanMultiTable2) {
           fixed = "";
           sortable = false;
@@ -435,8 +443,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           fixed,
           sortable,
           headerClassName: "mycolumn",
-          resizable: (_f = item.resizable) != null ? _f : true,
-          showOverflow: (_g = item.showOverflow) != null ? _g : "title",
+          resizable: (_g = item.resizable) != null ? _g : true,
+          showOverflow: (_h = item.showOverflow) != null ? _h : "title",
           treeNode,
           type,
           slots: {
@@ -465,7 +473,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             filterItems
           });
           let field = state.filterFields[item.columnName];
-          handlerInitSearchItem([field]);
+          handlerInitSearchItem([field], isOtherFilter);
           col.slots.header = formatterHeader(item);
         } else {
           col.slots.header = toolTipTitle(item);
@@ -473,7 +481,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         if (!isScanMultiTable2 && !isFunction(attr.footerMethod) && !isFunction(attr["footer-method"])) {
           col.slots.footer = "tooltip_footer";
         }
-        if (props.showNestTable && state.isTree == 0 && ((_h = props.curNestColumnConfig) == null ? void 0 : _h.isTree) == 0) {
+        if (props.showNestTable && state.isTree == 0 && ((_i = props.curNestColumnConfig) == null ? void 0 : _i.isTree) == 0) {
           col.slots.content = "nest_table_content";
         }
         return col;

package/es/components/big-table/src/components/edit-form/edit-input.js

@@ -63,9 +63,11 @@ var EditInput = defineComponent({
     };
     function keyup(event) {
       if (event.key == "Enter") {
-        setTimeout(() => {
-          onBlur();
-        }, 100);
+        emit("formChange", {
+          value: __value.value,
+          ...commData,
+          type: "enter"
+        });
       }
     }
     watch(() => attrs.value, (value) => {

package/es/components/big-table/src/hooks/useEdit.js

@@ -88,13 +88,11 @@ const useEdit = (props, state, emit, xGrid, loadData) => {
     if (["separate"].includes(column == null ? void 0 : column.formType)) {
       loadData(props.data);
     }
-    const activeRow = xGrid.value.getCurrentRecord();
-    const rowIndex = xGrid.value.getRowIndex(activeRow);
     emit("formChange", {
       value,
       row,
       column,
-      index: !~rowIndex ? index : rowIndex,
+      index,
       oldValue,
       ...type ? { type } : {}
     });

package/es/components/big-table/src/hooks/useEvent.js

@@ -17,15 +17,12 @@ const useEvent = (props, state, emit, xGrid, anchorEvent) => {
     if (!activeRow && !isEdit)
       return;
     if (isEdit) {
-      setTimeout(() => {
-        const { row, column, $rowIndex } = xGridRef.getSelectedCell() || {};
-        emit("keyboard", {
-          key: $event.key,
-          index: $rowIndex != null ? $rowIndex : index,
-          row: row || activeRow,
-          column
-        });
-        ["Tab", "Enter"].includes($event.key) && column && xGridRef.setEditCell(row, column);
+      const { row, $rowIndex, rowIndex, column } = xGridRef.getEditRecord() || {};
+      emit("keyboard", {
+        key: $event.key,
+        index: $rowIndex != null ? $rowIndex : rowIndex,
+        row,
+        column
       });
       return;
     }

package/es/components/big-table/src/utils.d.ts

@@ -1,3 +1,4 @@
+import { AnyObject } from '../../../../es/shared/types';
 /** 评价组件 */
 export declare const getEvaluate: (row: any, item: any) => any;
 export declare const getMapVal: (row: any, item: any) => any;
@@ -6,7 +7,8 @@ export declare const getageShowType: (row: any, item: any) => any;
 export declare const reScrollFilterWrap: () => void;
 export declare const showFilter: (field: any, columnName: any, event: any, props: any, state: any) => false | undefined;
 export declare const handleGroupColums: (columns: any, props: any) => any[];
-export declare const handlerInitSearchItem: (arr: any) => void;
+export declare const isFilterItem: (item: AnyObject) => any;
+export declare const handlerInitSearchItem: (arr: any, isOtherFilter: boolean) => void;
 export declare const generateEditRender: (fieldItem: any) => {
     name: string;
     enabled: boolean;

package/es/components/big-table/src/utils.js

@@ -73,7 +73,7 @@ const getConObj = (arr, state) => {
     } else if (!XEUtils.isEmpty(item.QUOTE)) {
       value = item.QUOTE.join("|#|");
     } else if (!XEUtils.isEmpty(item.CONVERT)) {
-      value = item.CONVERT.map((item2) => JSON.parse(item2));
+      value = item.CONVERT.map((item2) => ["string", "number"].includes(typeof item2) ? item2 : JSON.parse(item2));
     } else if (item.DATE) {
       if (item.DATE.start_val || item.DATE.end_val) {
         item.DATE.con = "IN";
@@ -144,7 +144,7 @@ const reScrollFilterWrap = () => {
   });
 };
 const showFilter = (field, columnName, event, props, state) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e, _f;
   if (props.isInlineOperating)
     return false;
   const target = event.target;
@@ -166,7 +166,7 @@ const showFilter = (field, columnName, event, props, state) => {
   field.visible = !field.visible;
   const len = (_a = state.filterFields[columnName]) == null ? void 0 : _a.CONVERT.length;
   field.checkAll = len === ((_c = (_b = state.filterFields[columnName]) == null ? void 0 : _b.filterItems) == null ? void 0 : _c.length);
-  field.indeterminate = !!len && len !== field.setting.showSetting.length;
+  field.indeterminate = !!len && len !== (((_e = (_d = field.setting) == null ? void 0 : _d.showSetting) == null ? void 0 : _e.length) || ((_f = field.options) == null ? void 0 : _f.length));
   field.searchFilterText = "";
 };
 const handleGroupColums = (columns, props) => {
@@ -183,11 +183,21 @@ const handleGroupColums = (columns, props) => {
     return fieldList.find((field) => (field.columnName || field.type) === fieldName);
   }
 };
-const handlerInitSearchItem = (arr) => {
+const isFilterItem = (item) => {
+  var _a;
+  const filterTypes = ["search", "select", "radio", "checkbox"];
+  const notParticipatingSearch = item.notParticipatingSearch || "";
+  return notParticipatingSearch != 1 && filterTypes.includes(item.formType) && ((_a = item.options) == null ? void 0 : _a.length);
+};
+const handlerInitSearchItem = (arr, isOtherFilter) => {
   if (!Array.isArray(arr))
     return;
   arr.forEach((el) => {
     var _a;
+    if (isOtherFilter) {
+      el["CONVERT"] = [];
+      return;
+    }
     if (el.setting) {
       el.setting = typeof el.setting == "string" ? JSON.parse(el.setting) : el.setting;
       if (!XEUtils.isEmpty(el.setting.wordbook)) {
@@ -605,4 +615,4 @@ const setVisibleCheckAllWrap = (state, props, currentCheckedKeys) => {
   state.visibleCheckAllWrapMore = isSpreadSelected || isLargerOrEqualPageSize && !isShowAllTable;
 };
 
-export { checkMethod, flattenRow, generateEditRender, getCandidateComponents, getEvaluate, getFooterGroup, getInlineEditBtn, getMapVal, getRowStyle, getageShowType, handleGroupColums, handleImgArr, handleImgSrc, handleName, handleQrCodeContent, handleTableHeight, handleTableImageSize, handlerInitSearchItem, hideFilterWrap, intersectRow, isCopy, isLink, mergeConObjFn, modalDetailImage, reScrollFilterWrap, removeCheckedDisabledRows, setDefaultFormData, setFilterStatus, setTableConfig, setTreeGroupTitle, setVisibleCheckAllWrap, showFilter, treeToList, visibleMethod };
+export { checkMethod, flattenRow, generateEditRender, getCandidateComponents, getEvaluate, getFooterGroup, getInlineEditBtn, getMapVal, getRowStyle, getageShowType, handleGroupColums, handleImgArr, handleImgSrc, handleName, handleQrCodeContent, handleTableHeight, handleTableImageSize, handlerInitSearchItem, hideFilterWrap, intersectRow, isCopy, isFilterItem, isLink, mergeConObjFn, modalDetailImage, reScrollFilterWrap, removeCheckedDisabledRows, setDefaultFormData, setFilterStatus, setTableConfig, setTreeGroupTitle, setVisibleCheckAllWrap, showFilter, treeToList, visibleMethod };

package/es/components/field-set/index.d.ts

@@ -140,6 +140,79 @@ declare const FieldSet: SFCWithInstall<import("vue").DefineComponent<{
     NSpin: any;
     NTooltip: any;
     NPopconfirm: any;
+    draggable: import("vue").DefineComponent<{
+        list: {
+            type: ArrayConstructor;
+            required: boolean;
+            default: any;
+        };
+        modelValue: {
+            type: ArrayConstructor;
+            required: boolean;
+            default: any;
+        };
+        itemKey: {
+            type: (StringConstructor | FunctionConstructor)[];
+            required: boolean;
+        };
+        clone: {
+            type: FunctionConstructor;
+            default: (original: any) => any;
+        };
+        tag: {
+            type: StringConstructor;
+            default: string;
+        };
+        move: {
+            type: FunctionConstructor;
+            default: any;
+        };
+        componentData: {
+            type: ObjectConstructor;
+            required: boolean;
+            default: any;
+        };
+    }, unknown, {
+        error: boolean;
+    }, {
+        realList(): any;
+        getKey(): any;
+    }, {
+        getUnderlyingVm(domElement: any): any;
+        getUnderlyingPotencialDraggableComponent(htmElement: any): any;
+        emitChanges(evt: any): void;
+        alterList(onList: any): void;
+        spliceList(): void;
+        updatePosition(oldIndex: any, newIndex: any): void;
+        getRelatedContextFromMoveEvent({ to, related }: {
+            to: any;
+            related: any;
+        }): any;
+        getVmIndexFromDomIndex(domIndex: any): any;
+        onDragStart(evt: any): void;
+        onDragAdd(evt: any): void;
+        onDragRemove(evt: any): void;
+        onDragUpdate(evt: any): void;
+        computeFutureIndex(relatedContext: any, evt: any): any;
+        onDragMove(evt: any, originalEvent: any): any;
+        onDragEnd(): void;
+    }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any[], any, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+        move: Function;
+        tag: string;
+        clone: Function;
+        list: unknown[];
+        modelValue: unknown[];
+        componentData: Record<string, any>;
+    } & {
+        itemKey?: string | Function | undefined;
+    }>, {
+        move: Function;
+        tag: string;
+        clone: Function;
+        list: unknown[];
+        modelValue: unknown[];
+        componentData: Record<string, any>;
+    }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("onSave" | "onClose" | "reset")[], "onSave" | "onClose" | "reset", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     fields: {
         type: import("vue").PropType<any[]>;

package/es/components/field-set/src/FieldSet.js

@@ -1,5 +1,6 @@
-import { defineComponent, ref, reactive, watch, onMounted, resolveComponent, openBlock, createElementBlock, normalizeStyle, createVNode, unref, withCtx, createElementVNode, normalizeClass, createCommentVNode, createBlock, createTextVNode, toDisplayString, withDirectives, vShow, renderSlot } from 'vue';
+import { defineComponent, ref, reactive, watch, onMounted, openBlock, createElementBlock, normalizeStyle, createVNode, unref, withCtx, createElementVNode, normalizeClass, createCommentVNode, createBlock, createTextVNode, toDisplayString, withDirectives, vShow, renderSlot } from 'vue';
 import { NSpin, NCheckbox, NTooltip, NSelect, NInput, NInputNumber, NPopconfirm, NButton } from 'naive-ui';
+import draggableComponent from '../../../shared/components/VueDraggable/src/vuedraggable.js';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
 
 const _hoisted_1 = { class: "fields-set-content" };
@@ -226,7 +227,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       getTableFields
     });
     return (_ctx, _cache) => {
-      const _component_draggable = resolveComponent("draggable");
       return openBlock(), createElementBlock("div", {
         ref_key: "settingView",
         ref: settingView,
@@ -294,7 +294,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   ref: "setShow",
                   class: normalizeClass(["set-show", { "set-show-api": !state.isCustomSearch }])
                 }, [
-                  createVNode(_component_draggable, {
+                  createVNode(unref(draggableComponent), {
                     list: state.fields,
                     animation: "150",
                     "item-key": "id",

package/es/components/field-set/src/FieldSet.vue.d.ts

@@ -94,6 +94,79 @@ declare const _default: import("vue").DefineComponent<{
     NSpin: any;
     NTooltip: any;
     NPopconfirm: any;
+    draggable: import("vue").DefineComponent<{
+        list: {
+            type: ArrayConstructor;
+            required: boolean;
+            default: any;
+        };
+        modelValue: {
+            type: ArrayConstructor;
+            required: boolean;
+            default: any;
+        };
+        itemKey: {
+            type: (StringConstructor | FunctionConstructor)[];
+            required: boolean;
+        };
+        clone: {
+            type: FunctionConstructor;
+            default: (original: any) => any;
+        };
+        tag: {
+            type: StringConstructor;
+            default: string;
+        };
+        move: {
+            type: FunctionConstructor;
+            default: any;
+        };
+        componentData: {
+            type: ObjectConstructor;
+            required: boolean;
+            default: any;
+        };
+    }, unknown, {
+        error: boolean;
+    }, {
+        realList(): any;
+        getKey(): any;
+    }, {
+        getUnderlyingVm(domElement: any): any;
+        getUnderlyingPotencialDraggableComponent(htmElement: any): any;
+        emitChanges(evt: any): void;
+        alterList(onList: any): void;
+        spliceList(): void;
+        updatePosition(oldIndex: any, newIndex: any): void;
+        getRelatedContextFromMoveEvent({ to, related }: {
+            to: any;
+            related: any;
+        }): any;
+        getVmIndexFromDomIndex(domIndex: any): any;
+        onDragStart(evt: any): void;
+        onDragAdd(evt: any): void;
+        onDragRemove(evt: any): void;
+        onDragUpdate(evt: any): void;
+        computeFutureIndex(relatedContext: any, evt: any): any;
+        onDragMove(evt: any, originalEvent: any): any;
+        onDragEnd(): void;
+    }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any[], any, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+        move: Function;
+        tag: string;
+        clone: Function;
+        list: unknown[];
+        modelValue: unknown[];
+        componentData: Record<string, any>;
+    } & {
+        itemKey?: string | Function | undefined;
+    }>, {
+        move: Function;
+        tag: string;
+        clone: Function;
+        list: unknown[];
+        modelValue: unknown[];
+        componentData: Record<string, any>;
+    }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("onSave" | "onClose" | "reset")[], "onSave" | "onClose" | "reset", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     fields: {
         type: PropType<any[]>;