cnhis-design-vue 3.1.30 → 3.1.31-beta.0

package/es/components/iho-table/src/constants/index.d.ts

@@ -56,7 +56,7 @@ export declare enum IHO_TABLE_STRING_STATUS {
     NEGATIVE = "0",
     POSITIVE = "1"
 }
-export declare const IhoTableEventNameTuple: readonly ["formChange", "settingClick", "formClick", ...("toggleRowExpand" | "toggleTreeExpand" | "copy" | "scroll" | "cut" | "paste" | "keydown" | "keydownStart" | "keydownEnd" | "currentChange" | "radioChange" | "checkboxChange" | "checkboxAll" | "checkboxRangeStart" | "checkboxRangeChange" | "checkboxRangeEnd" | "cellClick" | "cellDblclick" | "cellMenu" | "cellMouseenter" | "cellMouseleave" | "headerCellClick" | "headerCellDblclick" | "headerCellMenu" | "footerCellClick" | "footerCellDblclick" | "footerCellMenu" | "sortChange" | "filterChange" | "filterVisible" | "resizableChange" | "menuClick" | "editClosed" | "editActived" | "editDisabled" | "validError" | "custom" | "openFnr" | "fnrChange" | "fnrFind" | "fnrFindAll" | "fnrReplace" | "fnrReplaceAll" | "cellAreaCopy" | "cellAreaCut" | "cellAreaPaste" | "cellAreaMerge" | "clearCellAreaMerge" | "headerCellAreaSelection" | "cellAreaSelectionStart" | "cellAreaSelectionDrag" | "cellAreaSelectionEnd" | "cellAreaExtensionStart" | "cellAreaExtensionDrag" | "cellAreaExtensionEnd" | "cellAreaArrowsStart" | "cellAreaArrowsEnd" | "activeCellChangeStart" | "activeCellChangeEnd")[]];
+export declare const IhoTableEventNameTuple: readonly ["formChange", "settingClick", "formClick", "sortChange", ...("toggleRowExpand" | "toggleTreeExpand" | "copy" | "scroll" | "cut" | "paste" | "keydown" | "keydownStart" | "keydownEnd" | "currentChange" | "radioChange" | "checkboxChange" | "checkboxAll" | "checkboxRangeStart" | "checkboxRangeChange" | "checkboxRangeEnd" | "cellClick" | "cellDblclick" | "cellMenu" | "cellMouseenter" | "cellMouseleave" | "headerCellClick" | "headerCellDblclick" | "headerCellMenu" | "footerCellClick" | "footerCellDblclick" | "footerCellMenu" | "sortChange" | "filterChange" | "filterVisible" | "resizableChange" | "menuClick" | "editClosed" | "editActived" | "editDisabled" | "validError" | "custom" | "openFnr" | "fnrChange" | "fnrFind" | "fnrFindAll" | "fnrReplace" | "fnrReplaceAll" | "cellAreaCopy" | "cellAreaCut" | "cellAreaPaste" | "cellAreaMerge" | "clearCellAreaMerge" | "headerCellAreaSelection" | "cellAreaSelectionStart" | "cellAreaSelectionDrag" | "cellAreaSelectionEnd" | "cellAreaExtensionStart" | "cellAreaExtensionDrag" | "cellAreaExtensionEnd" | "cellAreaArrowsStart" | "cellAreaArrowsEnd" | "activeCellChangeStart" | "activeCellChangeEnd")[]];
 export declare const InjectionIhoTableConfig: InjectionKey<Ref<IhoTableConfig>>;
 export declare const InjectionIhoTableFieldList: InjectionKey<Ref<IhoTableFieldItem[]>>;
 export declare const InjectionIhoTableEmits: InjectionKey<(<T extends typeof IhoTableEventNameTuple[number]>(event: T, ...args: IhoTableEmitPayload<T>) => void)>;

package/es/components/iho-table/src/constants/index.js

@@ -131,6 +131,7 @@ const IhoTableEventNameTuple = [
   "formChange",
   "settingClick",
   "formClick",
+  "sortChange",
   ...VxeEventListenerNameList.map(getEventName)
 ];
 const InjectionIhoTableConfig = Symbol("injectionIhoTableConfig");

package/es/components/iho-table/src/plugins/filterPlugin/filter.js

@@ -1,12 +1,17 @@
-import { defineComponent, inject, computed, ref, toRefs, createVNode, unref } from 'vue';
+import { defineComponent, inject, toRefs, ref, onDeactivated, computed, openBlock, createElementBlock, createVNode, unref, withCtx, createTextVNode, toDisplayString, createElementVNode, Fragment, renderList, normalizeClass, isRef, normalizeStyle } from 'vue';
+import { widthAppend } from '../../../../../shared/utils/index.js';
 import { FilterOutline } from '@vicons/ionicons5';
 import { useVirtualList } from '@vueuse/core';
-import { NPopover, NIcon, NCheckboxGroup, NCheckbox, NInput } from 'naive-ui';
-import { InjectionIhoTableUUID } from '../../constants/index.js';
+import { InjectionIhoTableUUID, InjectionIhoTableEmits } from '../../constants/index.js';
 import { IHO_TABLE_FILTER_STATUS } from './types.js';
+import { NEllipsis, NPopover, NIcon, NInput, NCheckboxGroup, NCheckbox, NButtonGroup, NButton } from 'naive-ui';
+import _export_sfc from '../../../../../_virtual/plugin-vue_export-helper.js';
 
-var FilterComponent = defineComponent({
-  name: "IhoTableFilter",
+const _hoisted_1 = { class: "iho-table__filterWrapper" };
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = { class: "iho-table__filterFooter" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "filter",
   props: {
     payload: {
       type: Object,
@@ -17,83 +22,168 @@ var FilterComponent = defineComponent({
       required: true
     }
   },
-  setup(props, {
-    slots
-  }) {
+  setup(__props) {
+    const props = __props;
     const uuid = inject(InjectionIhoTableUUID);
-    const columnRef = computed(() => props.payload.column);
+    const globEmit = inject(InjectionIhoTableEmits);
+    const { options, checked, sortStatus } = toRefs(props.filterState);
     const filterVisible = ref(false);
-    const {
-      options,
-      checked,
-      checkAll,
-      searchFilterText,
-      sortStatus
-    } = toRefs(props.filterState);
-    const {
-      list,
-      containerProps,
-      wrapperProps
-    } = useVirtualList(options, {
-      itemHeight: 32,
-      overscan: 5
-    });
-    function renderTrigger() {
-      return createVNode(NIcon, {
-        "component": FilterOutline,
-        "onClick": toggleFilter
-      }, null);
-      function toggleFilter() {
-        filterVisible.value = !filterVisible.value;
-      }
+    const searchFilterText = ref("");
+    function close() {
+      filterVisible.value = false;
+      searchFilterText.value = "";
     }
-    function renderFilter() {
-      return createVNode("section", {
-        "class": "iho-table__filterWrapper"
-      }, [renderFilterButton(sortStatus, IHO_TABLE_FILTER_STATUS.ASCENDING, "\u5347\u5E8F A to Z"), renderFilterButton(sortStatus, IHO_TABLE_FILTER_STATUS.DESCENDING, "\u964D\u5E8F Z to A"), renderSearcher(searchFilterText), renderOptions()]);
-      function renderOptions() {
-        return createVNode(NCheckboxGroup, null, {
-          default() {
-            return createVNode("section", {
-              "ref": containerProps.ref,
-              "style": containerProps.style,
-              "onScroll": containerProps.onScroll
-            }, [createVNode("section", {
-              "style": wrapperProps.value.style
-            }, [list.value.map((option) => {
-              return createVNode("div", null, [createVNode(NCheckbox, {
-                "value": option.data.value,
-                "label": option.data.key
-              }, null)]);
-            })])]);
-          }
-        });
+    onDeactivated(close);
+    const OPTION_ITEM_HEIGHT = 32;
+    const VIEW_CAPACITY = 10;
+    let checkedCache = [];
+    const { list, containerProps, wrapperProps } = useVirtualList(
+      computed(() => {
+        return searchFilterText.value ? options.value.filter((option) => option.key.includes(searchFilterText.value)) : options.value;
+      }),
+      {
+        itemHeight: OPTION_ITEM_HEIGHT,
+        overscan: 3
       }
-      function renderSearcher(searchFilterText2) {
-        return createVNode(NInput, {
-          "value": searchFilterText2.value,
-          "onUpdate:value": ($event) => searchFilterText2.value = $event
-        }, null);
+    );
+    const containerStyleWithHeight = computed(() => {
+      return {
+        ...containerProps.style,
+        height: widthAppend(OPTION_ITEM_HEIGHT * VIEW_CAPACITY)
+      };
+    });
+    function confirmSort() {
+      sortStatus.value = IHO_TABLE_FILTER_STATUS.DEFAULT;
+      close();
+      globEmit("sortChange", { type: "filter", value: [...checked.value] });
+    }
+    function cancelSort() {
+      checked.value = checkedCache;
+      close();
+    }
+    const sortStatusList = [
+      { status: IHO_TABLE_FILTER_STATUS.ASCENDING, text: "\u5347\u5E8F A to Z" },
+      { status: IHO_TABLE_FILTER_STATUS.DESCENDING, text: "\u964D\u5E8F Z to A" }
+    ];
+    function setSortStatus(value) {
+      if (value === sortStatus.value) {
+        sortStatus.value = IHO_TABLE_FILTER_STATUS.DEFAULT;
+      } else {
+        sortStatus.value = value;
       }
-      function renderFilterButton(sortStatus2, status, text) {
-        return createVNode("div", {
-          "class": ["iho-table__filterButton", {
-            "iho-table__filterButton--active": unref(sortStatus2) === status
-          }],
-          "onClick": () => sortStatus2.value = status
-        }, [text]);
+      close();
+      globEmit("sortChange", { type: "sort", value: sortStatus.value });
+    }
+    function toggleFilter() {
+      filterVisible.value = !filterVisible.value;
+      if (filterVisible.value) {
+        checkedCache = [...checked.value];
+      } else {
+        searchFilterText.value = "";
+        checkedCache = [];
       }
     }
-    return () => {
-      return createVNode("section", null, [unref(columnRef).title, createVNode(NPopover, {
-        "to": `#${uuid}`,
-        "show": filterVisible.value
-      }, {
-        trigger: renderTrigger,
-        default: renderFilter
-      })]);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("section", null, [
+        createVNode(unref(NEllipsis), { style: { "max-width": "calc(100% - 22px)" } }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(__props.payload.column.title), 1)
+          ]),
+          _: 1
+        }),
+        createVNode(unref(NPopover), {
+          to: `#${unref(uuid)}`,
+          show: filterVisible.value
+        }, {
+          trigger: withCtx(() => [
+            createVNode(unref(NIcon), {
+              class: "iho-table__filterIcon",
+              component: unref(FilterOutline),
+              onClick: toggleFilter
+            }, null, 8, ["component"])
+          ]),
+          default: withCtx(() => [
+            createElementVNode("section", _hoisted_1, [
+              (openBlock(), createElementBlock(Fragment, null, renderList(sortStatusList, (item) => {
+                return createElementVNode("div", {
+                  key: item.status,
+                  class: normalizeClass(["iho-table__filterButton", { "iho-table__filterButton--active": unref(sortStatus) === item.status }]),
+                  onClick: ($event) => setSortStatus(item.status)
+                }, toDisplayString(item.text), 11, _hoisted_2);
+              }), 64)),
+              createVNode(unref(NInput), {
+                value: searchFilterText.value,
+                "onUpdate:value": _cache[0] || (_cache[0] = ($event) => searchFilterText.value = $event)
+              }, null, 8, ["value"]),
+              createVNode(unref(NCheckboxGroup), {
+                value: unref(checked),
+                "onUpdate:value": _cache[2] || (_cache[2] = ($event) => isRef(checked) ? checked.value = $event : null)
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("section", {
+                    ref: unref(containerProps).ref,
+                    style: normalizeStyle(unref(containerStyleWithHeight)),
+                    onScroll: _cache[1] || (_cache[1] = (...args) => unref(containerProps).onScroll && unref(containerProps).onScroll(...args)),
+                    class: "iho-table__filterListWrapper"
+                  }, [
+                    createElementVNode("section", {
+                      style: normalizeStyle(unref(wrapperProps).style)
+                    }, [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(unref(list), (option) => {
+                        return openBlock(), createElementBlock("div", {
+                          class: "iho-table__filterListItem",
+                          key: option.data.value
+                        }, [
+                          createVNode(unref(NCheckbox), {
+                            value: option.data.value,
+                            label: option.data.key
+                          }, null, 8, ["value", "label"])
+                        ]);
+                      }), 128))
+                    ], 4)
+                  ], 36)
+                ]),
+                _: 1
+              }, 8, ["value"]),
+              createElementVNode("footer", _hoisted_3, [
+                createElementVNode("section", null, toDisplayString(`\u5DF2\u9009\u62E9${unref(checked).length}\u9879`), 1),
+                createVNode(unref(NButtonGroup), { size: "tiny" }, {
+                  default: withCtx(() => [
+                    createVNode(unref(NButton), {
+                      onClick: _cache[3] || (_cache[3] = ($event) => checked.value = [])
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode("\u6E05\u7A7A")
+                      ]),
+                      _: 1
+                    }),
+                    createVNode(unref(NButton), { onClick: cancelSort }, {
+                      default: withCtx(() => [
+                        createTextVNode("\u53D6\u6D88")
+                      ]),
+                      _: 1
+                    }),
+                    createVNode(unref(NButton), {
+                      type: "primary",
+                      onClick: confirmSort
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode("\u786E\u5B9A")
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                })
+              ])
+            ])
+          ]),
+          _: 1
+        }, 8, ["to", "show"])
+      ]);
     };
   }
 });
+var FilterComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "filter.vue"]]);
 
 export { FilterComponent as default };

package/es/components/iho-table/src/plugins/filterPlugin/filter.vue.d.ts

@@ -0,0 +1,126 @@
+import { CSSProperties, PropType, ref } from 'vue';
+import { VxeColumnPropTypes } from 'vxe-table';
+import { FilterState, IHO_TABLE_FILTER_STATUS } from '../../../../../../es/components/iho-table/src/plugins/filterPlugin/types';
+declare const _default: import("vue").DefineComponent<{
+    payload: {
+        type: PropType<VxeColumnPropTypes.HeaderSlotParams>;
+        required: true;
+    };
+    filterState: {
+        type: PropType<FilterState>;
+        required: true;
+    };
+}, {
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        payload: {
+            type: PropType<VxeColumnPropTypes.HeaderSlotParams>;
+            required: true;
+        };
+        filterState: {
+            type: PropType<FilterState>;
+            required: true;
+        };
+    }>> & {}>>;
+    uuid: string;
+    globEmit: <T extends "toggleRowExpand" | "toggleTreeExpand" | "copy" | "scroll" | "formChange" | "settingClick" | "formClick" | "cut" | "paste" | "keydown" | "keydownStart" | "keydownEnd" | "currentChange" | "radioChange" | "checkboxChange" | "checkboxAll" | "checkboxRangeStart" | "checkboxRangeChange" | "checkboxRangeEnd" | "cellClick" | "cellDblclick" | "cellMenu" | "cellMouseenter" | "cellMouseleave" | "headerCellClick" | "headerCellDblclick" | "headerCellMenu" | "footerCellClick" | "footerCellDblclick" | "footerCellMenu" | "sortChange" | "filterChange" | "filterVisible" | "resizableChange" | "menuClick" | "editClosed" | "editActived" | "editDisabled" | "validError" | "custom" | "openFnr" | "fnrChange" | "fnrFind" | "fnrFindAll" | "fnrReplace" | "fnrReplaceAll" | "cellAreaCopy" | "cellAreaCut" | "cellAreaPaste" | "cellAreaMerge" | "clearCellAreaMerge" | "headerCellAreaSelection" | "cellAreaSelectionStart" | "cellAreaSelectionDrag" | "cellAreaSelectionEnd" | "cellAreaExtensionStart" | "cellAreaExtensionDrag" | "cellAreaExtensionEnd" | "cellAreaArrowsStart" | "cellAreaArrowsEnd" | "activeCellChangeStart" | "activeCellChangeEnd">(event: T, ...args: import("../../types").IhoTableEmitPayload<T>) => void;
+    options: import("vue").Ref<import("../../../../../shared/types").AnyObject[]>;
+    checked: import("vue").Ref<string[]>;
+    sortStatus: import("vue").Ref<IHO_TABLE_FILTER_STATUS>;
+    filterVisible: import("vue").Ref<boolean>;
+    searchFilterText: import("vue").Ref<string>;
+    close: () => void;
+    OPTION_ITEM_HEIGHT: number;
+    VIEW_CAPACITY: number;
+    checkedCache: string[];
+    list: import("vue").Ref<import("@vueuse/core").UseVirtualListItem<import("../../../../../shared/types").AnyObject>[]>;
+    containerProps: {
+        ref: import("vue").Ref<any>;
+        onScroll: () => void;
+        style: Partial<CSSStyleDeclaration>;
+    };
+    wrapperProps: import("vue").ComputedRef<{
+        style: {
+            width: string;
+            height: string;
+            marginTop: string;
+        };
+    }>;
+    containerStyleWithHeight: import("vue").ComputedRef<CSSProperties>;
+    confirmSort: () => void;
+    cancelSort: () => void;
+    sortStatusList: {
+        status: IHO_TABLE_FILTER_STATUS;
+        text: string;
+    }[];
+    setSortStatus: (value: IHO_TABLE_FILTER_STATUS) => void;
+    toggleFilter: () => void;
+    FilterOutline: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    ref: typeof ref;
+    NButton: any;
+    NButtonGroup: any;
+    NCheckbox: any;
+    NCheckboxGroup: import("vue").DefineComponent<{
+        readonly min: NumberConstructor;
+        readonly max: NumberConstructor;
+        readonly size: PropType<"small" | "medium" | "large">;
+        readonly value: PropType<(string | number)[] | null>;
+        readonly defaultValue: {
+            readonly type: PropType<(string | number)[] | null>;
+            readonly default: null;
+        };
+        readonly disabled: {
+            readonly type: PropType<boolean | undefined>;
+            readonly default: undefined;
+        };
+        readonly 'onUpdate:value': PropType<import("naive-ui/es/_utils").MaybeArray<(value: (string | number)[], meta: {
+            actionType: "check" | "uncheck";
+            value: string | number;
+        }) => void>>;
+        readonly onUpdateValue: PropType<import("naive-ui/es/_utils").MaybeArray<(value: (string | number)[], meta: {
+            actionType: "check" | "uncheck";
+            value: string | number;
+        }) => void>>;
+        readonly onChange: PropType<import("naive-ui/es/_utils").MaybeArray<(value: (string | number)[]) => void> | undefined>;
+    }, {
+        mergedClsPrefix: import("vue").ComputedRef<string>;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        readonly min: NumberConstructor;
+        readonly max: NumberConstructor;
+        readonly size: PropType<"small" | "medium" | "large">;
+        readonly value: PropType<(string | number)[] | null>;
+        readonly defaultValue: {
+            readonly type: PropType<(string | number)[] | null>;
+            readonly default: null;
+        };
+        readonly disabled: {
+            readonly type: PropType<boolean | undefined>;
+            readonly default: undefined;
+        };
+        readonly 'onUpdate:value': PropType<import("naive-ui/es/_utils").MaybeArray<(value: (string | number)[], meta: {
+            actionType: "check" | "uncheck";
+            value: string | number;
+        }) => void>>;
+        readonly onUpdateValue: PropType<import("naive-ui/es/_utils").MaybeArray<(value: (string | number)[], meta: {
+            actionType: "check" | "uncheck";
+            value: string | number;
+        }) => void>>;
+        readonly onChange: PropType<import("naive-ui/es/_utils").MaybeArray<(value: (string | number)[]) => void> | undefined>;
+    }>>, {
+        readonly disabled: boolean | undefined;
+        readonly defaultValue: (string | number)[] | null;
+    }>;
+    NEllipsis: any;
+    NIcon: any;
+    NInput: any;
+    NPopover: any;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    payload: {
+        type: PropType<VxeColumnPropTypes.HeaderSlotParams>;
+        required: true;
+    };
+    filterState: {
+        type: PropType<FilterState>;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/es/components/iho-table/src/plugins/filterPlugin/index.js

@@ -1,32 +1,26 @@
 import { isObject, isArray } from 'lodash-es';
-import { reactive, h, onBeforeUnmount } from 'vue';
+import { h, onBeforeUnmount } from 'vue';
 import '../../../index.js';
 import { IHO_TABLE_NUMBER_STATUS, IHO_TABLE_STRING_STATUS } from '../../constants/index.js';
 import { IHO_TABLE_FILTER_STATUS } from './types.js';
-import { IhoTableUtils } from '../../utils/index.js';
+import { useUUIDMap, IhoTableUtils } from '../../utils/index.js';
 import FilterComponent from './filter.js';
 import { defineTablePlugin } from '../../hooks/useTablePlugin.js';
 
 function filterPlugin() {
   const pluginName = "filterPlugin";
-  const uuidTargetMap = reactive(/* @__PURE__ */ new Map());
+  const { getItemFromUUID, removeItemFromUUID } = useUUIDMap(() => /* @__PURE__ */ new Map());
   function initFilterState(uuid, fieldName) {
-    const stateMap = uuidTargetMap.set(uuid, uuidTargetMap.get(uuid) || /* @__PURE__ */ new Map()).get(uuid);
+    const stateMap = getItemFromUUID(uuid);
     return stateMap.set(
       fieldName,
       stateMap.get(fieldName) || {
         options: [],
         checked: [],
-        indeterminate: false,
-        checkAll: false,
-        searchFilterText: "",
         sortStatus: IHO_TABLE_FILTER_STATUS.DEFAULT
       }
     ).get(fieldName);
   }
-  function clearFilterState(uuid) {
-    uuidTargetMap.delete(uuid);
-  }
   return defineTablePlugin({
     name: pluginName,
     apply(hooks) {
@@ -40,7 +34,7 @@ function filterPlugin() {
             const fieldSetting = JSON.parse(lowCodeField.fieldSetting || "");
             if (!isFieldSetting(fieldSetting) || !showFilter(fieldSetting))
               return;
-            let options = (_d = (_c = (_b = fieldSetting.mapping) == null ? void 0 : _b.mappingField) == null ? void 0 : _c.map((item) => item.value[0])) != null ? _d : [];
+            let options = (_d = (_c = (_b = fieldSetting.mapping) == null ? void 0 : _b.mappingFiled) == null ? void 0 : _c.map((item) => item.value[0])) != null ? _d : [];
             if (isCompatibleColumn(lowCodeField)) {
               options = (_f = (_e = lowCodeField.options) == null ? void 0 : _e.map((option) => ({ ...option, key: option.label }))) != null ? _f : [];
             }
@@ -59,7 +53,7 @@ function filterPlugin() {
         return fieldList;
       });
       hooks.setupHooks.setup.tap(pluginName, (config) => {
-        onBeforeUnmount(() => config.value.uuid && clearFilterState(config.value.uuid));
+        onBeforeUnmount(() => config.value.uuid && removeItemFromUUID(config.value.uuid));
       });
       function isCompatibleColumn(field) {
         const filterTypes = ["SEARCH", "SELECT", "RADIO", "CHECKBOX"];

package/es/components/iho-table/src/plugins/filterPlugin/types.d.ts

@@ -7,8 +7,5 @@ export declare enum IHO_TABLE_FILTER_STATUS {
 export declare type FilterState = {
     options: AnyObject[];
     checked: string[];
-    indeterminate: boolean;
-    checkAll: boolean;
-    searchFilterText: string;
     sortStatus: IHO_TABLE_FILTER_STATUS;
 };

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/separateRendererPlugin/index.js

@@ -3,8 +3,8 @@ import { traverse } from '../../../../../../../shared/utils/index.js';
 import { isFunction, isObject } from 'lodash-es';
 import '../../../../../index.js';
 import { EDITABLE_WIDGET_TYPE, InjectionIhoTableUUID, InjectionIhoTableEmits } from '../../../../constants/index.js';
-import { getRowHeight } from '../../../../utils/index.js';
-import { isSeparateColumn, getColumnRenderWidth, contentSeparate, getColumnInfoMaxLength, generateSeparateRowData } from './separateUtils.js';
+import { getRowHeight, getColumnRenderWidth } from '../../../../utils/index.js';
+import { isSeparateColumn, contentSeparate, getColumnInfoMaxLength, generateSeparateRowData } from './separateUtils.js';
 import EditSeparate from './editSeparate.js';
 import { defineTablePlugin } from '../../../../hooks/useTablePlugin.js';
 

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/separateRendererPlugin/separateUtils.d.ts

@@ -1,13 +1,11 @@
-import { AnyObject, Nullable } from '../../../../../../../../es/shared/types';
-import { MaybeRef } from '@vueuse/core';
-import { VxeTableDefines, VxeTableInstance } from 'vxe-table';
+import { AnyObject } from '../../../../../../../../es/shared/types';
+import { VxeTableDefines } from 'vxe-table';
 import { IhoTableFieldItem } from '../../../../../../../../es/components/iho-table';
 declare type ParsedRowDataInfo = {
     field: string;
     data: string[];
 };
 export declare function getColumnInfoMaxLength(parsedRowDataInfo: ParsedRowDataInfo[]): number;
-export declare function getColumnRenderWidth(column: AnyObject, $table: MaybeRef<Nullable<VxeTableInstance>>): Promise<number>;
 export declare function generateSeparateRowData(parsedRowDataInfo: ParsedRowDataInfo[], index: number): AnyObject;
 export declare function contentSeparate(value: unknown, field: IhoTableFieldItem, width: number): any[];
 export declare function isSeparateColumn(field: IhoTableFieldItem | VxeTableDefines.ColumnInfo): boolean | "" | undefined;

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/separateRendererPlugin/separateUtils.js

@@ -1,25 +1,10 @@
 import { getStringWidth } from '../../../../../../../shared/utils/index.js';
-import { isNumber, isArray, cloneDeep, isString } from 'lodash-es';
-import { nextTick, unref } from 'vue';
+import { isArray, cloneDeep, isString, isNumber } from 'lodash-es';
 import { EDITABLE_WIDGET_TYPE } from '../../../../constants/index.js';
 
 function getColumnInfoMaxLength(parsedRowDataInfo) {
   return Math.max(...parsedRowDataInfo.map((r) => r.data.length), 1);
 }
-async function getColumnRenderWidth(column, $table) {
-  const prev = getRenderWidth();
-  if (!prev) {
-    await nextTick();
-  }
-  return getRenderWidth() || getColumnWidth();
-  function getRenderWidth() {
-    var _a, _b;
-    return (_b = (_a = unref($table)) == null ? void 0 : _a.getColumnByField(column.field)) == null ? void 0 : _b.renderWidth;
-  }
-  function getColumnWidth() {
-    return isNumber(column.width) ? column.width : 64;
-  }
-}
 function generateSeparateRowData(parsedRowDataInfo, index) {
   return parsedRowDataInfo.reduce((res, info) => {
     res[info.field] = info.data[index];
@@ -54,4 +39,4 @@ function isSeparateColumn(field) {
   return field.field && ((_a = field.editRender) == null ? void 0 : _a.name) === EDITABLE_WIDGET_TYPE.SEPARATE;
 }
 
-export { contentSeparate, generateSeparateRowData, getColumnInfoMaxLength, getColumnRenderWidth, isSeparateColumn };
+export { contentSeparate, generateSeparateRowData, getColumnInfoMaxLength, isSeparateColumn };

package/es/components/iho-table/src/types/index.d.ts

@@ -2,6 +2,7 @@ import { AnyObject, TupleToUnion } from '../../../../../es/shared/types';
 import { VxeTableProps, VxeTableDefines, VxeTableInstance, VxeColumnPropTypes } from 'vxe-table';
 import { VxeTableEventProps } from 'vxe-table/types/table';
 import { IHO_TABLE_STRING_STATUS, IhoTableEventNameTuple, IhoTableRowGroupSequence, VxeEventListenerNameList } from '../../../../../es/components/iho-table/src/constants';
+import { IHO_TABLE_FILTER_STATUS } from '../../../../../es/components/iho-table/src/plugins/filterPlugin/types';
 export * from './pluginType';
 export interface IhoTableRowGroupItem {
     groupName: string;
@@ -33,7 +34,7 @@ export declare namespace IhoTableLowCodeField {
         notParticipatingSearch: IHO_TABLE_STRING_STATUS;
         mapping?: {
             type: string;
-            mappingField: Array<{
+            mappingFiled: Array<{
                 value: Array<{
                     options: AnyObject[];
                 }>;
@@ -73,7 +74,14 @@ export declare type EventListenerToEventName<T extends string> = T extends `on${
 export declare type EventNameToEventListener<T extends string> = T extends `${infer L}${infer R}` ? `on${Uppercase<L>}${R}` : never;
 export declare type IhoTableHandler = Record<'updateConfigRef' | 'updateFieldListRef' | 'updateTableDataRef', () => void>;
 export declare type IhoTableEventNameUnion = TupleToUnion<typeof IhoTableEventNameTuple>;
-export declare type IhoTableEmitPayload<T extends typeof IhoTableEventNameTuple[number]> = T extends 'formChange' | 'formClick' ? [IhoTableFormChangePayload] : T extends 'settingClick' ? [] : Parameters<NonNullable<VxeTableEventProps[EventNameToEventListener<Exclude<T, 'formChange' | 'settingClick' | 'formClick'>>]>>;
+export declare type IhoTableFilterPayload = {
+    type: 'sort';
+    value: IHO_TABLE_FILTER_STATUS;
+} | {
+    type: 'filter';
+    value: string[];
+};
+export declare type IhoTableEmitPayload<T extends typeof IhoTableEventNameTuple[number]> = T extends 'formChange' | 'formClick' ? [IhoTableFormChangePayload] : T extends 'settingClick' ? [] : T extends 'sortChange' ? [IhoTableFilterPayload] : Parameters<NonNullable<VxeTableEventProps[EventNameToEventListener<Exclude<T, 'formChange' | 'settingClick' | 'formClick' | 'sortChange'>>]>>;
 export declare type IhoTableAnchorItem = {
     field: string;
     title: string;

package/es/components/iho-table/src/utils/index.d.ts

@@ -1,3 +1,6 @@
+import { AnyObject, Nullable } from '../../../../../es/shared/types';
+import { MaybeRef } from '@vueuse/core';
+import { VxeTableInstance } from 'vxe-table';
 import { EventListenerToEventName, LowCodeTableFieldItem } from '../../../../../es/components/iho-table';
 export declare function IhoTableLog(message: string): void;
 export declare function IhoTableWarn(message: string): void;
@@ -6,3 +9,8 @@ export declare const IhoTableUtils: Readonly<{
 }>;
 export declare function getRowHeight(): number;
 export declare function getEventName<T extends string>(eventListenerName: T): EventListenerToEventName<T>;
+export declare function useUUIDMap<T>(creator: () => T, isReactive?: boolean): {
+    getItemFromUUID: (uuid: string) => T;
+    removeItemFromUUID: (uuid: string) => void;
+};
+export declare function getColumnRenderWidth(column: AnyObject, $table: MaybeRef<Nullable<VxeTableInstance>>): Promise<number>;

package/es/components/iho-table/src/utils/index.js

@@ -1,4 +1,5 @@
-import { inject } from 'vue';
+import { isNumber } from 'lodash-es';
+import { inject, reactive, nextTick, unref } from 'vue';
 import { InjectionIhoTableConfig } from '../constants/index.js';
 
 function IhoTableLog(message) {
@@ -25,5 +26,32 @@ function getEventName(eventListenerName) {
   const eventName = eventListenerName.slice(2);
   return `${eventName[0].toLowerCase()}${eventName.slice(1)}`;
 }
+function useUUIDMap(creator, isReactive = true) {
+  const uuidMap = isReactive ? reactive(/* @__PURE__ */ new Map()) : /* @__PURE__ */ new Map();
+  function getItemFromUUID(uuid) {
+    return uuidMap.set(uuid, uuidMap.get(uuid) || creator()).get(uuid);
+  }
+  function removeItemFromUUID(uuid) {
+    uuidMap.delete(uuid);
+  }
+  return {
+    getItemFromUUID,
+    removeItemFromUUID
+  };
+}
+async function getColumnRenderWidth(column, $table) {
+  const prev = getRenderWidth();
+  if (!prev) {
+    await nextTick();
+  }
+  return getRenderWidth() || getColumnWidth();
+  function getRenderWidth() {
+    var _a, _b;
+    return (_b = (_a = unref($table)) == null ? void 0 : _a.getColumnByField(column.field)) == null ? void 0 : _b.renderWidth;
+  }
+  function getColumnWidth() {
+    return isNumber(column.width) ? column.width : 64;
+  }
+}
 
-export { IhoTableLog, IhoTableUtils, IhoTableWarn, getEventName, getRowHeight };
+export { IhoTableLog, IhoTableUtils, IhoTableWarn, getColumnRenderWidth, getEventName, getRowHeight, useUUIDMap };

package/es/components/iho-table/style/index.css

@@ -1 +1 @@
-.iho-table .vxe-table--render-default .vxe-table--fixed-left-wrapper.scrolling--middle{box-shadow:7px 0 8px -3px rgba(0,0,0,.15)}.iho-table .vxe-table--render-default .vxe-table--fixed-right-wrapper.scrolling--middle{box-shadow:-7px 0 8px -3px rgba(0,0,0,.15)}.iho-table__boldCell{font-weight:700}.iho-table .icon-dot{background:var(--table-icon-color);box-shadow:0 2px 4px 0 var(--table-icon-shadow)}.iho-table .icon-dot,.iho-table .icon-dot-red{border-radius:50%;display:inline-block;height:8px;margin-right:6px;width:8px}.iho-table .icon-dot-red{background:red;box-shadow:0 2px 4px 0 rgba(255,0,0,.5)}.iho-table .icon-dot-blue{background:blue;box-shadow:0 2px 4px 0 rgba(0,0,255,.5)}.iho-table .icon-dot-blue,.iho-table .icon-dot-green{border-radius:50%;display:inline-block;height:8px;margin-right:6px;width:8px}.iho-table .icon-dot-green{background:green;box-shadow:0 2px 4px 0 rgba(0,128,0,.5)}.iho-table .icon-dot-gray{background:gray;box-shadow:0 2px 4px 0 hsla(0,0%,50%,.5)}.iho-table .icon-dot-gray,.iho-table .icon-dot-yellow{border-radius:50%;display:inline-block;height:8px;margin-right:6px;width:8px}.iho-table .icon-dot-yellow{background:#ff0;box-shadow:0 2px 4px 0 rgba(255,255,0,.5)}.iho-table .icon-dot-resolved{background:#36be8c;box-shadow:0 2px 4px 0 rgba(54,190,140,.5)}.iho-table .icon-dot-huifu,.iho-table .icon-dot-resolved{border-radius:50%;display:inline-block;height:8px;margin-right:6px;width:8px}.iho-table .icon-dot-huifu{background:#42d0f6;box-shadow:0 2px 4px 0 rgba(66,208,246,.5)}.iho-table .icon-dot-close{background:#718391;box-shadow:0 2px 4px 0 rgba(113,131,145,.5)}.iho-table .icon-dot-audit,.iho-table .icon-dot-close{border-radius:50%;display:inline-block;height:8px;margin-right:6px;width:8px}.iho-table .icon-dot-audit{background:#f4ba32;box-shadow:0 2px 4px 0 rgba(244,186,50,.5)}.iho-table .icon-dot-design{background:#927ce1;box-shadow:0 2px 4px 0 rgba(146,124,225,.5)}.iho-table .icon-dot-design,.iho-table .icon-dot-develop{border-radius:50%;display:inline-block;height:8px;margin-right:6px;width:8px}.iho-table .icon-dot-develop{background:#4eb0ef;box-shadow:0 2px 4px 0 rgba(78,176,239,.5)}.iho-table .icon-dot-develop-complete{background:#6381f9;border-radius:50%;box-shadow:0 2px 4px 0 rgba(99,129,249,.5);display:inline-block;height:8px;margin-right:6px;width:8px}.iho-table__filterWrapper{display:flex;flex-direction:column;gap:8px;width:200px}.iho-table__filterButton{align-items:center;display:flex;height:30px}.iho-table__filterButton--active{color:blue}.iho-table .vxe-header--column [annotation-hover-show=true]{visibility:hidden}.iho-table .vxe-header--column:hover [annotation-hover-show=true]{visibility:visible}.iho-table__headerWrapper{display:inline-flex}
+.iho-table .vxe-table--render-default .vxe-table--fixed-left-wrapper.scrolling--middle{box-shadow:7px 0 8px -3px rgba(0,0,0,.15)}.iho-table .vxe-table--render-default .vxe-table--fixed-right-wrapper.scrolling--middle{box-shadow:-7px 0 8px -3px rgba(0,0,0,.15)}.iho-table__boldCell{font-weight:700}.iho-table .icon-dot{background:var(--table-icon-color);box-shadow:0 2px 4px 0 var(--table-icon-shadow)}.iho-table .icon-dot,.iho-table .icon-dot-red{border-radius:50%;display:inline-block;height:8px;margin-right:6px;width:8px}.iho-table .icon-dot-red{background:red;box-shadow:0 2px 4px 0 rgba(255,0,0,.5)}.iho-table .icon-dot-blue{background:blue;box-shadow:0 2px 4px 0 rgba(0,0,255,.5)}.iho-table .icon-dot-blue,.iho-table .icon-dot-green{border-radius:50%;display:inline-block;height:8px;margin-right:6px;width:8px}.iho-table .icon-dot-green{background:green;box-shadow:0 2px 4px 0 rgba(0,128,0,.5)}.iho-table .icon-dot-gray{background:gray;box-shadow:0 2px 4px 0 hsla(0,0%,50%,.5)}.iho-table .icon-dot-gray,.iho-table .icon-dot-yellow{border-radius:50%;display:inline-block;height:8px;margin-right:6px;width:8px}.iho-table .icon-dot-yellow{background:#ff0;box-shadow:0 2px 4px 0 rgba(255,255,0,.5)}.iho-table .icon-dot-resolved{background:#36be8c;box-shadow:0 2px 4px 0 rgba(54,190,140,.5)}.iho-table .icon-dot-huifu,.iho-table .icon-dot-resolved{border-radius:50%;display:inline-block;height:8px;margin-right:6px;width:8px}.iho-table .icon-dot-huifu{background:#42d0f6;box-shadow:0 2px 4px 0 rgba(66,208,246,.5)}.iho-table .icon-dot-close{background:#718391;box-shadow:0 2px 4px 0 rgba(113,131,145,.5)}.iho-table .icon-dot-audit,.iho-table .icon-dot-close{border-radius:50%;display:inline-block;height:8px;margin-right:6px;width:8px}.iho-table .icon-dot-audit{background:#f4ba32;box-shadow:0 2px 4px 0 rgba(244,186,50,.5)}.iho-table .icon-dot-design{background:#927ce1;box-shadow:0 2px 4px 0 rgba(146,124,225,.5)}.iho-table .icon-dot-design,.iho-table .icon-dot-develop{border-radius:50%;display:inline-block;height:8px;margin-right:6px;width:8px}.iho-table .icon-dot-develop{background:#4eb0ef;box-shadow:0 2px 4px 0 rgba(78,176,239,.5)}.iho-table .icon-dot-develop-complete{background:#6381f9;border-radius:50%;box-shadow:0 2px 4px 0 rgba(99,129,249,.5);display:inline-block;height:8px;margin-right:6px;width:8px}.iho-table__filterIcon{cursor:pointer;padding:0 4px}.iho-table__filterIcon:hover{opacity:.7}.iho-table__filterWrapper{display:flex;flex-direction:column;gap:8px;width:200px}.iho-table__filterButton{align-items:center;border-radius:4px;cursor:pointer;display:flex;height:30px;padding:0 8px}.iho-table__filterButton--active{color:#5585f5}.iho-table__filterButton:hover{background:rgba(0,0,0,.05)}.iho-table__filterListWrapper{border:1px solid rgba(0,0,0,.05)}.iho-table__filterListItem{align-items:center;border-radius:4px;display:flex;height:32px;padding:0 8px}.iho-table__filterListItem:hover{background:rgba(0,0,0,.05)}.iho-table__filterFooter{display:flex;justify-content:space-between}.iho-table .vxe-header--column [annotation-hover-show=true]{visibility:hidden}.iho-table .vxe-header--column:hover [annotation-hover-show=true]{visibility:visible}.iho-table__headerWrapper{display:inline-flex}