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

package/es/components/form-render/src/hooks/useFormContext.js

@@ -8,11 +8,11 @@ import components from '../components/renderer/index.js';
 import { useFormRenderLifeCycle } from './useFormRenderLifeCycle.js';
 import { usePresetScope } from './usePresetScope.js';
 import { injectOrProvide, presetRequestHandler } from '../utils/index.js';
-import { InjectionBusinessCollector, InjectionChangeContextCollector, InjectionFormItemDepsCollector, InjectionFormUUID, InjectionAnnotation, InjectAsyncQueue, InjectionSchemaField } from '../constants/index.js';
+import { InjectAsyncQueue, InjectionSchemaField, InjectionBusinessCollector, InjectionChangeContextCollector, InjectionFormItemDepsCollector, InjectionFormUUID, InjectionAnnotation } from '../constants/index.js';
+import { useAsyncQueue } from './useAsyncQueue.js';
 import { useBusinessBinding } from './useBusinessBinding.js';
 import { useChangeContext } from './useChangeContext.js';
 import { useFormItemDeps } from './useFormItemDeps.js';
-import { useAsyncQueue } from './useAsyncQueue.js';
 
 function useFormContext(props, formModel) {
   const { callLifeCycle } = useFormRenderLifeCycle(props);

package/es/components/form-render/src/types/index.d.ts

@@ -27,7 +27,8 @@ export declare type AgeContext = Record<'age' | 'day' | 'month' | 'year', number
 export declare type IdCardParseInfo = Record<'sex' | 'birthday', string> & AgeContext;
 export declare type FormRenderExpose = {
     validate(path?: string): Promise<unknown>;
-    getFormValues(): AnyObject;
+    getFormValues(needCombineExtendKey?: boolean): AnyObject;
+    setFormValues(values: AnyObject, needSplitExtendKey?: boolean): AnyObject;
     setFieldState(path: string, setter: (field: Field) => void): void;
     resetFields(path?: string): void;
     queryWidget(key: string): Promise<{
@@ -35,6 +36,7 @@ export declare type FormRenderExpose = {
         widgetElementList: HTMLInputElement[];
         decoratorElement: HTMLElement | null;
     }>;
+    reload(): Promise<any>;
 };
 export declare type FormChangeContext = Partial<{
     currentOption: AnyObject;

package/es/components/form-render/src/utils/index.d.ts

@@ -17,4 +17,5 @@ export declare function optionMatcher(options: AnyObject[], input: Nullable<stri
     keyword?: string;
 }): AnyObject[];
 export declare function validateMessageParser(message: string, fieldItem: Omit<FieldItem, 'reactions'>): string;
-export declare function transformExtendKey(fieldList: FieldItem[], values: AnyObject): AnyObject;
+export declare function combineExtendKey(fieldList: FieldItem[], values: AnyObject): AnyObject;
+export declare function splitExtendKey(fieldList: FieldItem[], values: AnyObject): AnyObject;

package/es/components/form-render/src/utils/index.js

@@ -1,9 +1,9 @@
-import { computed, createVNode, Fragment, inject, provide } from 'vue';
+import { inject, provide, computed, createVNode, Fragment } from 'vue';
 import { arrayed } from '../../../../shared/utils/index.js';
 import { Path } from '@formily/path';
 import { isObject } from '@vue/shared';
 import { useMemoize } from '@vueuse/core';
-import { isString, isFunction } from 'lodash-es';
+import { isString, isFunction, omit } from 'lodash-es';
 import 'date-fns';
 import '@formily/core';
 
@@ -133,7 +133,7 @@ function validateMessageParser(message, fieldItem) {
     return (_a = fieldItem[property.trim()]) != null ? _a : "";
   }
 }
-function transformExtendKey(fieldList, values) {
+function combineExtendKey(fieldList, values) {
   const fieldListWithExtendKey = fieldList.filter((field) => isString(field.extendKey) && field.extendKey);
   if (!fieldListWithExtendKey.length)
     return values;
@@ -157,5 +157,27 @@ function transformExtendKey(fieldList, values) {
   });
   return result;
 }
+function splitExtendKey(fieldList, values) {
+  const fieldListWithExtendKey = fieldList.filter((field) => isString(field.extendKey) && field.extendKey);
+  if (!fieldListWithExtendKey.length)
+    return values;
+  const queryFieldValue = useMemoize((extendKey) => {
+    try {
+      return JSON.parse(values[extendKey]);
+    } catch (e) {
+      return {};
+    }
+  });
+  const result = omit(values, fieldListWithExtendKey.map((field) => field.extendKey));
+  fieldListWithExtendKey.forEach(({
+    val_key,
+    extendKey
+  }) => {
+    if (Reflect.has(result, val_key))
+      return;
+    result[val_key] = queryFieldValue(extendKey)[val_key];
+  });
+  return result;
+}
 
-export { createInputSlot, createSlot, formRenderLog, injectOrProvide, mergeDeepProperties, optionMatcher, parseNumberFromMaybeString, presetRequestHandler, transformExtendKey, validateMessageParser };
+export { combineExtendKey, createInputSlot, createSlot, formRenderLog, injectOrProvide, mergeDeepProperties, optionMatcher, parseNumberFromMaybeString, presetRequestHandler, splitExtendKey, validateMessageParser };

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

@@ -16,6 +16,10 @@ declare const IhoTable: SFCWithInstall<import("vue").DefineComponent<{
         type: import("vue").PropType<import("../../../es/shared/types").AnyObject[]>;
         default: () => never[];
     };
+    anchorList: {
+        type: import("vue").PropType<string[]>;
+        default: () => never[];
+    };
 }, {
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
         tableConfig: {
@@ -30,6 +34,10 @@ declare const IhoTable: SFCWithInstall<import("vue").DefineComponent<{
             type: import("vue").PropType<import("../../../es/shared/types").AnyObject[]>;
             default: () => never[];
         };
+        anchorList: {
+            type: import("vue").PropType<string[]>;
+            default: () => never[];
+        };
     }>> & {
         onFormChange?: ((...args: any[]) => any) | undefined;
         onCopy?: ((...args: any[]) => any) | undefined;
@@ -4384,6 +4392,14 @@ declare const IhoTable: SFCWithInstall<import("vue").DefineComponent<{
             }[] | undefined;
         } | undefined;
     }>;
+    onScroll: (params: any) => void;
+    updateAnchor: (field: string) => Promise<void>;
+    currentAnchorList: import("vue").Ref<{
+        field: string;
+        title: string;
+        left: number;
+    }[]>;
+    anchorValue: import("vue").Ref<any>;
     IhoTableColumn: import("vue").DefineComponent<{
         field: {
             type: import("vue").PropType<import("../../../es/components/iho-table/src/types").IhoTableFieldItem>;
@@ -4395,6 +4411,31 @@ declare const IhoTable: SFCWithInstall<import("vue").DefineComponent<{
             required: true;
         };
     }>>, {}>;
+    ColumnAnchor: import("vue").DefineComponent<{
+        anchorList: {
+            type: import("vue").PropType<import("../../../es/components/iho-table/src/types").IanchorObj[]>;
+            default: () => never[];
+        };
+        value: {
+            type: StringConstructor;
+            default: string;
+        };
+    }, () => JSX.Element | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:value" | "updateAnchor")[], "updateAnchor" | "update:value", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        anchorList: {
+            type: import("vue").PropType<import("../../../es/components/iho-table/src/types").IanchorObj[]>;
+            default: () => never[];
+        };
+        value: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & {
+        "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+        onUpdateAnchor?: ((...args: any[]) => any) | undefined;
+    }, {
+        anchorList: import("../../../es/components/iho-table/src/types").IanchorObj[];
+        value: string;
+    }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("toggleRowExpand" | "toggleTreeExpand" | "copy" | "scroll" | "formChange" | "settingClick" | "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")[], "toggleRowExpand" | "toggleTreeExpand" | "copy" | "scroll" | "formChange" | "settingClick" | "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", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     tableConfig: {
         type: import("vue").PropType<import("../../../es/components/iho-table/src/types").IhoTableConfig>;
@@ -4408,6 +4449,10 @@ declare const IhoTable: SFCWithInstall<import("vue").DefineComponent<{
         type: import("vue").PropType<import("../../../es/shared/types").AnyObject[]>;
         default: () => never[];
     };
+    anchorList: {
+        type: import("vue").PropType<string[]>;
+        default: () => never[];
+    };
 }>> & {
     onFormChange?: ((...args: any[]) => any) | undefined;
     onCopy?: ((...args: any[]) => any) | undefined;
@@ -4471,6 +4516,7 @@ declare const IhoTable: SFCWithInstall<import("vue").DefineComponent<{
     onActiveCellChangeEnd?: ((...args: any[]) => any) | undefined;
     onSettingClick?: ((...args: any[]) => any) | undefined;
 }, {
+    anchorList: string[];
     fieldList: import("../../../es/components/iho-table/src/types").LowCodeTableFieldItem[];
     tableConfig: import("../../../es/components/iho-table/src/types").IhoTableConfig;
     tableData: import("../../../es/shared/types").AnyObject[];

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

@@ -18,6 +18,7 @@ import '../../shared/utils/tapable/AsyncSeriesWaterfallHook.js';
 export { AbstractConfigHooks, AbstractDataHooks, AbstractEventHooks, AbstractFieldHooks, AbstractSetupHooks } from './src/types/pluginType.js';
 import { useTablePlugin } from './src/hooks/useTablePlugin.js';
 export { defineTablePlugin, useTablePlugin } from './src/hooks/useTablePlugin.js';
+import '@vueuse/core';
 
 const { use } = useTablePlugin();
 const useIhoTablePresetPlugins = (instance) => {

package/es/components/iho-table/src/IhoTable.js

@@ -1,11 +1,13 @@
-import { defineComponent, provide, ref, computed, watch, resolveComponent, openBlock, createElementBlock, createVNode, mergeProps, unref, withCtx, Fragment, renderList, createBlock } from 'vue';
+import { defineComponent, provide, ref, computed, watch, resolveComponent, openBlock, createElementBlock, Fragment, createVNode, unref, isRef, createElementVNode, mergeProps, withCtx, renderList, createBlock } from 'vue';
 import { uuidGenerator } from '../../../shared/utils/index.js';
 import { useDebounceFn } from '@vueuse/core';
-import { VxeEventListenerNameList, InjectionIhoTableEmits, InjectionIhoTableUUID, InjectionIhoTableConfig, InjectionIhoTableHandler } from './constants/index.js';
+import { VxeEventListenerNameList, InjectionIhoTableEmits, InjectionIhoTableUUID, InjectionIhoTableConfig, InjectionIhoTableFieldList, InjectionIhoTableHandler } from './constants/index.js';
 import { createTableHooks, applyTableConfigHooks, applyTableFieldHooks, createTableEventHandlers, createDataTransfer } from './hooks/tapHooks/index.js';
 import 'lodash-es';
+import { useAnchor } from './hooks/useAnchor.js';
 import { getEventName } from './utils/index.js';
 import ColumnComponent from './components/IhoTableColumn.js';
+import ColumnAnchor from './components/ColumnAnchor.js';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
 
 const _hoisted_1 = { class: "iho-table" };
@@ -14,7 +16,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     tableConfig: { type: Object, default: () => ({}) },
     fieldList: { type: Array, default: () => [] },
-    tableData: { type: Array, default: () => [] }
+    tableData: { type: Array, default: () => [] },
+    anchorList: { type: Array, default: () => [] }
   },
   emits: [
     "formChange",
@@ -37,6 +40,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       configRef.value.uuid = uuidRef.value;
     }, 10);
     const fieldListRef = ref([]);
+    provide(InjectionIhoTableFieldList, fieldListRef);
     const updateFieldListRef = useDebounceFn(() => {
       fieldListRef.value = applyTableFieldHooks(hooks, props.fieldList, configRef.value);
     }, 10);
@@ -57,6 +61,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emits
     });
     const bindProperties = computed(() => ({ ...configRef.value, ...eventHookHandler }));
+    const { onScroll, updateAnchor, currentAnchorList, anchorValue } = useAnchor(props.anchorList, $table, fieldListRef);
     watch(
       () => props.tableConfig,
       () => {
@@ -79,25 +84,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     hooks.setupHooks.setup.call(configRef, fieldListRef);
     return (_ctx, _cache) => {
       const _component_vxe_table = resolveComponent("vxe-table");
-      return openBlock(), createElementBlock("section", _hoisted_1, [
-        createVNode(_component_vxe_table, mergeProps({
-          ref_key: "$table",
-          ref: $table
-        }, unref(bindProperties), {
-          eventHookHandler: "",
-          data: tableDataRef.value
-        }), {
-          default: withCtx(() => [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(fieldListRef.value, (field) => {
-              return openBlock(), createBlock(unref(ColumnComponent), {
-                key: field.field,
-                field
-              }, null, 8, ["field"]);
-            }), 128))
-          ]),
-          _: 1
-        }, 16, ["data"])
-      ]);
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(unref(ColumnAnchor), {
+          "anchor-list": unref(currentAnchorList),
+          value: unref(anchorValue),
+          "onUpdate:value": _cache[0] || (_cache[0] = ($event) => isRef(anchorValue) ? anchorValue.value = $event : null),
+          onUpdateAnchor: unref(updateAnchor)
+        }, null, 8, ["anchor-list", "value", "onUpdateAnchor"]),
+        createElementVNode("section", _hoisted_1, [
+          createVNode(_component_vxe_table, mergeProps({
+            ref_key: "$table",
+            ref: $table
+          }, unref(bindProperties), {
+            eventHookHandler: "",
+            data: tableDataRef.value,
+            onScroll: unref(onScroll)
+          }), {
+            default: withCtx(() => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(fieldListRef.value, (field) => {
+                return openBlock(), createBlock(unref(ColumnComponent), {
+                  key: field.field,
+                  field
+                }, null, 8, ["field"]);
+              }), 128))
+            ]),
+            _: 1
+          }, 16, ["data", "onScroll"])
+        ])
+      ], 64);
     };
   }
 });

package/es/components/iho-table/src/IhoTable.vue.d.ts

@@ -15,6 +15,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<AnyObject[]>;
         default: () => never[];
     };
+    anchorList: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
 }, {
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
         tableConfig: {
@@ -29,6 +33,10 @@ declare const _default: import("vue").DefineComponent<{
             type: PropType<AnyObject[]>;
             default: () => never[];
         };
+        anchorList: {
+            type: PropType<string[]>;
+            default: () => never[];
+        };
     }>> & {
         onFormChange?: ((...args: any[]) => any) | undefined;
         onCopy?: ((...args: any[]) => any) | undefined;
@@ -4383,6 +4391,14 @@ declare const _default: import("vue").DefineComponent<{
             }[] | undefined;
         } | undefined;
     }>;
+    onScroll: (params: any) => void;
+    updateAnchor: (field: string) => Promise<void>;
+    currentAnchorList: import("vue").Ref<{
+        field: string;
+        title: string;
+        left: number;
+    }[]>;
+    anchorValue: import("vue").Ref<any>;
     IhoTableColumn: import("vue").DefineComponent<{
         field: {
             type: PropType<IhoTableFieldItem>;
@@ -4394,6 +4410,31 @@ declare const _default: import("vue").DefineComponent<{
             required: true;
         };
     }>>, {}>;
+    ColumnAnchor: import("vue").DefineComponent<{
+        anchorList: {
+            type: PropType<import("../../../../es/components/iho-table/src/types").IanchorObj[]>;
+            default: () => never[];
+        };
+        value: {
+            type: StringConstructor;
+            default: string;
+        };
+    }, () => JSX.Element | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:value" | "updateAnchor")[], "updateAnchor" | "update:value", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        anchorList: {
+            type: PropType<import("../../../../es/components/iho-table/src/types").IanchorObj[]>;
+            default: () => never[];
+        };
+        value: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & {
+        "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+        onUpdateAnchor?: ((...args: any[]) => any) | undefined;
+    }, {
+        anchorList: import("../../../../es/components/iho-table/src/types").IanchorObj[];
+        value: string;
+    }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("toggleRowExpand" | "toggleTreeExpand" | "copy" | "scroll" | "formChange" | "settingClick" | "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")[], "toggleRowExpand" | "toggleTreeExpand" | "copy" | "scroll" | "formChange" | "settingClick" | "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", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     tableConfig: {
         type: PropType<IhoTableConfig>;
@@ -4407,6 +4448,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<AnyObject[]>;
         default: () => never[];
     };
+    anchorList: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
 }>> & {
     onFormChange?: ((...args: any[]) => any) | undefined;
     onCopy?: ((...args: any[]) => any) | undefined;
@@ -4470,6 +4515,7 @@ declare const _default: import("vue").DefineComponent<{
     onActiveCellChangeEnd?: ((...args: any[]) => any) | undefined;
     onSettingClick?: ((...args: any[]) => any) | undefined;
 }, {
+    anchorList: string[];
     fieldList: LowCodeTableFieldItem[];
     tableConfig: IhoTableConfig;
     tableData: AnyObject[];

package/es/components/iho-table/src/components/ColumnAnchor.d.ts

@@ -0,0 +1,28 @@
+import { PropType } from 'vue';
+import { IanchorObj } from '../../../../../es/components/iho-table/src/types';
+declare const _default: import("vue").DefineComponent<{
+    anchorList: {
+        type: PropType<IanchorObj[]>;
+        default: () => never[];
+    };
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => JSX.Element | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:value" | "updateAnchor")[], "updateAnchor" | "update:value", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    anchorList: {
+        type: PropType<IanchorObj[]>;
+        default: () => never[];
+    };
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+    onUpdateAnchor?: ((...args: any[]) => any) | undefined;
+}, {
+    anchorList: IanchorObj[];
+    value: string;
+}>;
+export default _default;

package/es/components/iho-table/src/components/ColumnAnchor.js

@@ -0,0 +1,47 @@
+import { defineComponent, createVNode, isVNode } from 'vue';
+import { NTabs, NTabPane } from 'naive-ui';
+
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var ColumnAnchor = defineComponent({
+  name: "ColumnAnchor",
+  props: {
+    anchorList: {
+      type: Array,
+      default: () => []
+    },
+    value: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:value", "updateAnchor"],
+  setup(props, {
+    attrs,
+    slots,
+    emit
+  }) {
+    function onUpdatedValue(value) {
+      emit("update:value", value);
+      emit("updateAnchor", value);
+    }
+    return () => {
+      let _slot;
+      return props.anchorList.length > 0 ? createVNode(NTabs, {
+        "type": "line",
+        "animated": true,
+        "pane-style": "padding: 0",
+        "value": props.value,
+        "onUpdate:value": onUpdatedValue
+      }, _isSlot(_slot = props.anchorList.map((field) => createVNode(NTabPane, {
+        "name": field.field,
+        "tab": field.title
+      }, null))) ? _slot : {
+        default: () => [_slot]
+      }) : null;
+    };
+  }
+});
+
+export { ColumnAnchor as default };

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

@@ -1 +1,2 @@
 export { default as IhoTableColumn } from './IhoTableColumn';
+export { default as ColumnAnchor } from './ColumnAnchor';

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

@@ -1 +1,2 @@
 export { default as IhoTableColumn } from './IhoTableColumn.js';
+export { default as ColumnAnchor } from './ColumnAnchor.js';

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

@@ -1,7 +1,7 @@
-import { Nullable } from '../../../../../es/shared/types';
+import { Nullable, UnionToTuple } from '../../../../../es/shared/types';
 import { InjectionKey, Ref } from 'vue';
 import { VxeTableEventProps } from 'vxe-table/types/table';
-import { IhoTableConfig, IhoTableHandler, UnionToTuple } from '../../../../../es/components/iho-table';
+import { IhoTableConfig, IhoTableEmitPayload, IhoTableFieldItem, IhoTableHandler } from '../../../../../es/components/iho-table';
 export declare enum WIDGET_TYPE {
     DEFAULT = "DEFAULT",
     PICTURE = "PICTURE",
@@ -46,7 +46,9 @@ export declare enum EDITABLE_WIDGET_TYPE {
     TIME = "TIME",
     NUMBER = "NUMBER"
 }
+export declare const IhoTableEventNameTuple: readonly ["formChange", "settingClick", ...("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<Nullable<IhoTableConfig>>>;
-export declare const InjectionIhoTableEmits: InjectionKey<(event: string, ...args: unknown[]) => void>;
+export declare const InjectionIhoTableFieldList: InjectionKey<Ref<Nullable<IhoTableFieldItem[]>>>;
+export declare const InjectionIhoTableEmits: InjectionKey<(<T extends typeof IhoTableEventNameTuple[number]>(event: T, ...args: IhoTableEmitPayload<T>) => void)>;
 export declare const InjectionIhoTableUUID: InjectionKey<Ref<string>>;
 export declare const InjectionIhoTableHandler: InjectionKey<IhoTableHandler>;

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

@@ -1,3 +1,5 @@
+import { getEventName } from '../utils/index.js';
+
 var WIDGET_TYPE = /* @__PURE__ */ ((WIDGET_TYPE2) => {
   WIDGET_TYPE2["DEFAULT"] = "DEFAULT";
   WIDGET_TYPE2["PICTURE"] = "PICTURE";
@@ -115,9 +117,15 @@ var EDITABLE_WIDGET_TYPE = /* @__PURE__ */ ((EDITABLE_WIDGET_TYPE2) => {
   EDITABLE_WIDGET_TYPE2["NUMBER"] = "NUMBER";
   return EDITABLE_WIDGET_TYPE2;
 })(EDITABLE_WIDGET_TYPE || {});
+const IhoTableEventNameTuple = [
+  "formChange",
+  "settingClick",
+  ...VxeEventListenerNameList.map(getEventName)
+];
 const InjectionIhoTableConfig = Symbol("injectionIhoTableConfig");
+const InjectionIhoTableFieldList = Symbol("injectionIhoTableFieldList");
 const InjectionIhoTableEmits = Symbol("InjectionIhoTableEmits");
 const InjectionIhoTableUUID = Symbol("InjectionIhoTableUUID");
 const InjectionIhoTableHandler = Symbol("InjectionIhoTableHandler");
 
-export { EDITABLE_WIDGET_TYPE, HIGHEST_PRIORITY, IhoTableRowGroupSequence, InjectionIhoTableConfig, InjectionIhoTableEmits, InjectionIhoTableHandler, InjectionIhoTableUUID, VxeEventListenerNameList, WIDGET_TYPE };
+export { EDITABLE_WIDGET_TYPE, HIGHEST_PRIORITY, IhoTableEventNameTuple, IhoTableRowGroupSequence, InjectionIhoTableConfig, InjectionIhoTableEmits, InjectionIhoTableFieldList, InjectionIhoTableHandler, InjectionIhoTableUUID, VxeEventListenerNameList, WIDGET_TYPE };

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

@@ -1,2 +1,3 @@
 export * from './tapHooks';
 export * from './useTablePlugin';
+export * from './useAnchor';

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

@@ -1,2 +1,3 @@
 export { applyTableConfigHooks, applyTableFieldHooks, createDataTransfer, createTableEventHandlers, createTableHooks } from './tapHooks/index.js';
 export { defineTablePlugin, useTablePlugin } from './useTablePlugin.js';
+export { useAnchor } from './useAnchor.js';

package/es/components/iho-table/src/hooks/useAnchor.d.ts

@@ -0,0 +1,13 @@
+import { Ref } from 'vue';
+import { VxeTableInstance } from 'vxe-table';
+import { IhoTableFieldItem } from '../../../../../es/components/iho-table/src/types';
+export declare const useAnchor: (anchorList: string[], $table: Ref<VxeTableInstance | undefined>, fieldListRef: Ref<IhoTableFieldItem[]>) => {
+    updateAnchor: (field: string) => Promise<void>;
+    onScroll: (params: any) => void;
+    currentAnchorList: Ref<{
+        field: string;
+        title: string;
+        left: number;
+    }[]>;
+    anchorValue: Ref<any>;
+};

package/es/components/iho-table/src/hooks/useAnchor.js

@@ -0,0 +1,66 @@
+import { ref, watch } from 'vue';
+import { useThrottleFn } from '@vueuse/core';
+
+const useAnchor = (anchorList, $table, fieldListRef) => {
+  const currentAnchorList = ref([]);
+  const anchorValue = ref();
+  let setAnchorStatus = true;
+  function initAnchor() {
+    var _a, _b;
+    if (anchorList == null ? void 0 : anchorList.length) {
+      let left = 0;
+      fieldListRef.value.forEach((column) => {
+        const { field, minWidth, width, fixed, title, visible } = column;
+        const colWidth = +(minWidth || width);
+        if (fixed == "left") ; else {
+          left += colWidth;
+          const anchorObj = anchorList.find((fieldItem) => fieldItem === field);
+          anchorObj && visible && currentAnchorList.value.push({
+            field,
+            title,
+            left: left - colWidth
+          });
+        }
+      });
+      anchorValue.value = ((_b = (_a = currentAnchorList.value) == null ? void 0 : _a[0]) == null ? void 0 : _b.field) || "";
+    }
+  }
+  async function updateAnchor(field) {
+    var _a, _b;
+    setAnchorStatus = false;
+    const anchorObj = currentAnchorList.value.find((fieldItem) => fieldItem.field === field);
+    if (anchorObj) {
+      await ((_b = $table.value) == null ? void 0 : _b.scrollTo((_a = anchorObj.left) != null ? _a : 0));
+      setTimeout(() => {
+        setAnchorStatus = true;
+      });
+    }
+  }
+  function setAnchorValue({ scrollLeft }) {
+    if (currentAnchorList.value.length && setAnchorStatus) {
+      const anchorObj = currentAnchorList.value.find((fieldItem) => scrollLeft < (fieldItem == null ? void 0 : fieldItem.left));
+      if (anchorObj) {
+        anchorValue.value = anchorObj.field;
+      }
+    }
+  }
+  const anchorEvent = useThrottleFn(setAnchorValue, 800);
+  function onScroll(params) {
+    anchorEvent(params);
+  }
+  watch(
+    () => fieldListRef.value,
+    (value) => {
+      initAnchor();
+    },
+    { immediate: true }
+  );
+  return {
+    updateAnchor,
+    onScroll,
+    currentAnchorList,
+    anchorValue
+  };
+};
+
+export { useAnchor };

package/es/components/iho-table/src/hooks/useTableContext.d.ts

@@ -0,0 +1,7 @@
+export declare function useTableContext(): {
+    configRef: import("vue").Ref<import("../../../../shared/types").Nullable<import("../types").IhoTableConfig>> | undefined;
+    fieldListRef: import("vue").Ref<import("../../../../shared/types").Nullable<import("../types").IhoTableFieldItem[]>> | undefined;
+    tableHandler: import("../types").IhoTableHandler | undefined;
+    tableEmit: (<T extends "toggleRowExpand" | "toggleTreeExpand" | "copy" | "scroll" | "formChange" | "settingClick" | "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) | undefined;
+    uuid: import("vue").Ref<string> | undefined;
+};

package/es/components/iho-table/src/hooks/useTableContext.js

@@ -0,0 +1,15 @@
+import { getCurrentInstance, inject } from 'vue';
+import { InjectionIhoTableConfig, InjectionIhoTableFieldList, InjectionIhoTableHandler, InjectionIhoTableUUID, InjectionIhoTableEmits } from '../constants/index.js';
+
+function useTableContext() {
+  if (!getCurrentInstance())
+    throw new Error("useTableContext can only be used in setup environment");
+  const configRef = inject(InjectionIhoTableConfig);
+  const fieldListRef = inject(InjectionIhoTableFieldList);
+  const tableHandler = inject(InjectionIhoTableHandler);
+  const uuid = inject(InjectionIhoTableUUID);
+  const tableEmit = inject(InjectionIhoTableEmits);
+  return { configRef, fieldListRef, tableHandler, tableEmit, uuid };
+}
+
+export { useTableContext };