holyes-table 0.0.1 → 1.0.0

package/dist/lib/pretextTable/type.d.ts

@@ -0,0 +1,258 @@
+import { VxeIconPropTypes } from 'vxe-pc-ui';
+export * from './useHolyesTable';
+export * from './hook/useFooter';
+export * from './hook/useFilter';
+export * from './hook/useTree';
+export * from './hook/useExpand';
+/** 列插槽类型 */
+export type HolyesTableSlotDefaultType = "a" | "tag" | "icon" | "buttons" | "switch";
+/** 表格列属性,额外属性 */
+export type HolyesTableColumnPropsTypeOption = {
+    /** 列宽度 */
+    width?: number;
+    /** 列最小宽度 */
+    minWidth?: number;
+    /** 列固定位置 */
+    fixed?: "left" | "right" | "";
+    /** 列是否可排序 */
+    sortable?: boolean;
+    /** 列类型 */
+    type?: "seq" | "checkbox" | "expand";
+    /** 列样式 */
+    style?: any;
+    /** 列是否可筛选 */
+    isFilter?: {
+        type: HolyesTableFilterType;
+        listOptions?: {
+            label: string;
+            value: HolyesTableFilterlistOptions;
+        }[];
+    };
+    /** 列是否可调整宽度 */
+    resizable?: boolean;
+    /** 列插槽 */
+    slots?: {
+        /** 列自定义插槽 */
+        default?: string;
+        /** 列自定义插槽高度，有插槽的话必填，插槽单元格不自动换行 */
+        defaultHeight?: number;
+        /** 列插槽类型 */
+        defaultType?: HolyesTableSlotDefaultType;
+        /** 列插槽默认属性 */
+        defaultProps?: {
+            /** 标签 插槽默认属性 */
+            tag?: {
+                /** 标签匹配规则 */
+                options?: {
+                    /** 标签状态 */
+                    status?: "primary" | "success" | "info" | "warning" | "error";
+                    /** 标签颜色 */
+                    color?: any;
+                    /** 标签显示的文本 */
+                    label?: string;
+                    /** 标签对比的值 */
+                    value: any;
+                }[];
+            };
+            /** 图标 插槽默认属性 */
+            icon?: {
+                /** 图标名称, 参考 vxe-icon 图标名称 */
+                name?: VxeIconPropTypes.Name;
+                /** 图标样式 */
+                style?: any;
+            };
+            /** 按钮 插槽默认属性 */
+            buttons?: {
+                /** 按钮组数组, 每个元素是一行div的按钮数组 */
+                options?: {
+                    /** 按钮内容*/
+                    title?: string;
+                    /** 按钮提示 */
+                    tip?: string;
+                    /** 按钮前缀图标 */
+                    prefixIcon?: any;
+                    /** 按钮大小 */
+                    size?: "medium" | "small" | "mini";
+                    /** 按钮类型 */
+                    type?: "primary" | "danger";
+                    /** 按钮样式, 默认button */
+                    mode?: "text" | "button";
+                    /** 按钮是否显示，取决于row的哪个字段 */
+                    showField?: string;
+                    /** 按钮是否禁用，取决于row的哪个字段 */
+                    disabledField?: string;
+                    /** 按钮是否加载中，取决于row的哪个字段 */
+                    loadingField?: string;
+                    /** 按钮点击事件 */
+                    onClick?: (row: any, index: number) => void;
+                    /** 其他参数 */
+                    params?: any;
+                }[][];
+            };
+            /** 开关 插槽默认属性 */
+            switch?: {
+                /** 开关选中时显示的文本 */
+                checkedChildren?: string;
+                /** 开关选中时显示的文本 */
+                openLabel?: string;
+                /** 开关未选中时显示的文本 */
+                uncheckedChildren?: string;
+                /** 开关未选中时显示的文本 */
+                closeLabel?: string;
+                /** 开关选中时的值 */
+                checkedValue?: any;
+                /** 开关未选中时的值 */
+                uncheckedValue?: any;
+                /** 开关选中时的值 */
+                openValue?: any;
+                /** 开关未选中时的值 */
+                closeValue?: any;
+                /** 按钮是否显示，取决于row的哪个字段 */
+                showField?: string;
+                /** 按钮是否禁用，取决于row的哪个字段 */
+                disabledField?: string;
+                /** 按钮是否加载中，取决于row的哪个字段 */
+                loadingField?: string;
+                /** 开关点击事件 */
+                onChange?: (row: any, index: number) => void;
+            };
+        };
+        /** 列表头插槽 */
+        header?: string;
+        /** 列表头插槽类型 */
+        headerType?: "a";
+        /** 表尾插槽 */
+        footer?: string;
+    };
+    footer?: {
+        /** 表尾行高度 */
+        height?: number;
+        /** 表尾类型 */
+        type?: HolyesTableFooterType;
+        dataType?: "number0" | "number1" | "number2" | "string";
+        /** 表尾文本 */
+        text?: string;
+    }[];
+    /** 表头分组 */
+    children?: HolyesTableColumnPropsType[];
+    /** 只对 treeConfig 配置时有效，指定为树节点 */
+    treeNode?: boolean;
+};
+/** 表格列属性 */
+export interface HolyesTableColumnPropsType extends HolyesTableColumnPropsTypeOption {
+    /** 列标题 */
+    title: string;
+    /** 列字段 */
+    field: string;
+}
+/** 表格列属性 */
+export interface HolyesTableKeyNames {
+    /** 行id */
+    id: string;
+    /** 序号 */
+    seq: string;
+    /** 斑马纹 */
+    stripe: string;
+    /** 行高 */
+    height: string;
+    /** 树是否展开 */
+    isCollapsed: string;
+    /** 树层级 */
+    level: string;
+    /** 树懒加载是否加载中 */
+    lazyLoading: string;
+    /** 设置数据后, 真实的序号 */
+    index: string;
+    /** 筛选后的子项数据 */
+    filterChildren: string;
+    /** 展开行是否展开 */
+    isRowExpanded: string;
+    /** 这行数据是否展开行的子项 */
+    isExpandRow: string;
+    /** 展开行是否有子展开项 */
+    expandChildren: string;
+}
+/** 展开行配置项 */
+export interface HolyesTableExpandConfig {
+    /** 是否开启展开行功能 */
+    isExpand: boolean;
+    /** 展开行高度(像素), 必填 */
+    height: number;
+    /** 展开/收起的触发方式, 默认是default(点击按钮触发) */
+    trigger?: "default" | "cell" | "row";
+    /** 展开行模式, 默认是undefined(展开行随着x轴滚动条滚动);
+     * inside(不随着x轴滚动条滚动) */
+    mode?: "inside" | undefined;
+    /** 插槽名称 */
+    slotName: string;
+}
+/** 筛选字段 类型 */
+export type HolyesTableFilterType = "inputFilter" | "numberFilter" | "numberFilter%" | "listFilter" | "";
+/** 筛选字段 列表选项 */
+export type HolyesTableFilterlistOptions = string | number | boolean;
+/** 表尾类型 */
+export type HolyesTableFooterType = "合计" | "文本";
+/** 表尾行数据类型 */
+export type HolyesTableFooterDataType = "number0" | "number1" | "number2" | "string";
+/** 表尾行字段类型 */
+export type HolyesTableFooterFieldTypes = {
+    /** 表尾行字段 */
+    field: string;
+    /** 表尾行类型 */
+    type: HolyesTableFooterType;
+    /** 表尾行文本 */
+    text?: string;
+    /** 表尾行数据类型 */
+    dataType?: HolyesTableFooterDataType;
+};
+/** 外面传入的表尾行属性 */
+export type HolyesTableFooterProps = {
+    height?: number;
+    fieldTypes?: HolyesTableFooterFieldTypes[];
+};
+/** 表尾行属性 */
+export type HolyesTableFooterColumns = {
+    /** 表尾行高度 */
+    height?: number;
+    /** 表尾行字段 */
+    field: string;
+    /** 表尾行固定位置 */
+    fixed?: string;
+    /** 表尾行类型 */
+    type?: HolyesTableFooterType;
+    /** 表尾行文本 */
+    text?: string;
+    /** 表尾行数据类型 */
+    dataType?: HolyesTableFooterDataType;
+    /** 表尾行数据 */
+    data: any;
+    /** 插槽 */
+    slot?: string;
+};
+/** 树形结构配置项 */
+export type HolyesTableTreeConfig = {
+    /** 是否开启展开行功能 */
+    isOpenTree: boolean;
+    /** 自动将列表转为树结构 */
+    transform?: boolean;
+    /** 节点id字段, 默认是id */
+    idField?: string;
+    /** 父节点字段, 默认是parentId */
+    parentField?: string;
+    /** 子节点字段, 默认是children */
+    childrenField?: string;
+    /** 树节点的缩进, 默认是20px */
+    indent?: number;
+    /** 展开/收起的触发方式, 默认是default(点击按钮触发) */
+    trigger?: "default" | "cell" | "row";
+    /** 是否懒加载 */
+    lazy?: boolean;
+    /** 只对 lazy 启用后有效，标识是否存在子节点，从而控制是否允许被点击, 默认是hasChild */
+    hasChildField?: string;
+    /** 懒加载方法 */
+    loadMethod?: (node: any) => any;
+    /** 数据刷新后, 是否保留展开状态, 默认是false;如果是true, 需要有idField */
+    reserve?: boolean;
+    /** 是否显示树形图标, 默认是true */
+    showIcon?: boolean;
+};

package/dist/lib/pretextTable/useHolyesTable.d.ts

@@ -0,0 +1,171 @@
+import { HolyesTableColumnPropsType, HolyesTableKeyNames } from './type';
+export declare const useHolyesTable: (dataObj: {
+    props: any;
+    emits: any;
+}) => {
+    keyNames: HolyesTableKeyNames;
+    nowDataSource: import('vue').ShallowRef<any[], any[]>;
+    pretextTableRef: import('vue').Ref<HTMLDivElement | null | undefined, HTMLDivElement | null | undefined>;
+    tableRef: import('vue').Ref<HTMLDivElement | null | undefined, HTMLDivElement | null | undefined>;
+    isLoading: import('vue').Ref<boolean, boolean>;
+    visibleData: import('vue').Ref<any[], any[]>;
+    visibleWidthStartColumnIndex: import('vue').Ref<number, number>;
+    visibleWidthEndColumnIndex: import('vue').Ref<number, number>;
+    gridTemplateColumns: import('vue').Ref<string, string>;
+    blurAnyElement: () => void;
+    columns: import('vue').ShallowRef<HolyesTableColumnPropsType[], HolyesTableColumnPropsType[]>;
+    onScroll: (e: Event) => void;
+    onWheel: (e: WheelEvent) => void;
+    topEmptyHeight: import('vue').Ref<number, number>;
+    scrollbarHeight: import('vue').Ref<number, number>;
+    headerHeight: import('vue').Ref<number, number>;
+    headerStyles: {
+        fontWeight: string;
+        fontSize: string;
+    };
+    realColumns: import('vue').ShallowRef<(HolyesTableColumnPropsType | null)[][], (HolyesTableColumnPropsType | null)[][]>;
+    headerRef: import('vue').Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+    updateFooter: (field?: string) => void;
+    updateFooterCellLabel: (field: string, rowIndex: number, label: string) => void;
+    footerHeight: import('vue').Ref<number, number>;
+    footerColumns: import('vue').Ref<{
+        height?: number | undefined;
+        field: string;
+        fixed?: string | undefined;
+        type?: import('./type').HolyesTableFooterType | undefined;
+        text?: string | undefined;
+        dataType?: import('./type').HolyesTableFooterDataType | undefined;
+        data: any;
+        slot?: string | undefined;
+    }[][], import('./type').HolyesTableFooterColumns[][] | {
+        height?: number | undefined;
+        field: string;
+        fixed?: string | undefined;
+        type?: import('./type').HolyesTableFooterType | undefined;
+        text?: string | undefined;
+        dataType?: import('./type').HolyesTableFooterDataType | undefined;
+        data: any;
+        slot?: string | undefined;
+    }[][]>;
+    getFooterHeight: (footerProps: import('./type').HolyesTableFooterProps[]) => void;
+    itemStyles: {
+        fontWeight: string;
+        fontSize: string;
+    };
+    fixedLeftIndex: import('vue').Ref<number, number>;
+    fixedRightIndex: import('vue').Ref<number, number>;
+    fixedColumnsLeft: import('vue').Ref<string[], string[]>;
+    fixedColumnsRight: import('vue').Ref<string[], string[]>;
+    getGridStyles: () => void;
+    divLineHeightOffset: number;
+    currentRow: import('vue').ShallowRef<any, any>;
+    cellClick: (item: any, column: HolyesTableColumnPropsType) => void;
+    headerClick: (column: any) => void;
+    hoverRow: import('vue').ShallowRef<any, any>;
+    cellMousemove: (item: any) => void;
+    headerChecked: import('vue').Ref<boolean, boolean>;
+    headerCheckedIndeterminate: import('vue').Ref<boolean, boolean>;
+    onHeaderChecked: () => void;
+    onCellChecked: (item: any) => void;
+    getCheckboxRecords: (isFull: boolean) => any[];
+    clearCheckboxRow: () => void;
+    sortField: import('vue').Ref<string, string>;
+    sortOrder: import('vue').Ref<"asc" | "desc" | null, "asc" | "desc" | null>;
+    sort: (field: string, order: "desc" | "asc" | null | "auto") => void;
+    filterPopupWidth: number;
+    filterPopupId: string;
+    inputFilterOptions: {
+        label: string;
+        value: string;
+    }[];
+    numberFilterOptions: {
+        label: string;
+        value: string;
+    }[];
+    filterFields: import('vue').Ref<{
+        field: string;
+        type: import('./type').HolyesTableFilterType;
+        isShow: boolean;
+        clientX: number;
+        clientY: number;
+        isActive: boolean;
+        value: string | number | null;
+        inputFilter?: {
+            type: "\u6A21\u7CCA" | "\u7CBE\u786E";
+        } | undefined;
+        numberFilter?: {
+            type: ">" | "\u2265" | "=" | "<" | "\u2264";
+        } | undefined;
+        listFilter?: {
+            listOptions: {
+                label: string;
+                value: import('./type').HolyesTableFilterlistOptions;
+            }[];
+            selectedValue: import('./type').HolyesTableFilterlistOptions[];
+        } | undefined;
+    }[], import('./type').FilterFieldsType[] | {
+        field: string;
+        type: import('./type').HolyesTableFilterType;
+        isShow: boolean;
+        clientX: number;
+        clientY: number;
+        isActive: boolean;
+        value: string | number | null;
+        inputFilter?: {
+            type: "\u6A21\u7CCA" | "\u7CBE\u786E";
+        } | undefined;
+        numberFilter?: {
+            type: ">" | "\u2265" | "=" | "<" | "\u2264";
+        } | undefined;
+        listFilter?: {
+            listOptions: {
+                label: string;
+                value: import('./type').HolyesTableFilterlistOptions;
+            }[];
+            selectedValue: import('./type').HolyesTableFilterlistOptions[];
+        } | undefined;
+    }[]>;
+    getFilterFields: () => void;
+    filterClick: (index: number, e: any) => void;
+    setFilter: (field: string, value?: any) => Promise<void>;
+    clearFilter: (field?: string) => Promise<void>;
+    setListFilterAll: (item: any) => void;
+    isDragging: import('vue').Ref<boolean, boolean>;
+    dragLineLeft: import('vue').Ref<number, number>;
+    startResize: (e: MouseEvent, column: HolyesTableColumnPropsType) => void;
+    /** 用于 tree-config，设置展开树形节点，二个参数设置这一行展开与否 */
+    setTreeExpand: (rows: any[], expanded: boolean) => Promise<void>;
+    /** 用于 tree-config，设置所有树节点的展开与否 */
+    setAllTreeExpand: (isExpand: boolean) => void;
+    /** 清除树形结构展开状态 */
+    clearTreeExpand: () => void;
+    /** 默认的树形结构配置项 */
+    defaultTreeConfig: {
+        isOpenTree: boolean;
+        transform: boolean;
+        idField: string;
+        parentField: string;
+        childrenField: string;
+        indent: number;
+        trigger: string;
+        lazy: boolean;
+        hasChildField: string;
+        showIcon: boolean;
+    };
+    /** 用于 expand-config，设置展开行，二个参数设置这一行展开与否 */
+    setRowExpand: (rows: any[], expanded: boolean) => void;
+    slotShowTimestamp: import('vue').Ref<number, number>;
+    isRefresh: import('vue').Ref<boolean, boolean>;
+    realTableHeight: import('vue').Ref<number, number>;
+    realTableWidth: import('vue').Ref<number, number>;
+    /** 加载数据 */
+    loadData: (tempData: any[]) => Promise<void>;
+    /** 重新设置数据 */
+    reloadData: (tempData: any[]) => Promise<void>;
+    getTableData: () => {
+        /** 全部数据 */
+        fullData: any[];
+        /** 当前筛选后数据 */
+        visibleData: any[];
+    };
+};

package/dist/lib/pretextTable/utils/index.d.ts

@@ -0,0 +1,6 @@
+/** 等待指定时间 */
+export declare function sleep(time: number): Promise<unknown>;
+/** 失去焦点 */
+export declare const blurAnyElement: () => void;
+/** 估算文本字符单元数（英文/符号算1，中文等算2） */
+export declare const estimateCharUnits: (text: any) => number;

package/dist/lib/pretextTable/worker/pretextTableGetItemHeight.d.ts

@@ -0,0 +1,50 @@
+import { HolyesTableSlotDefaultType, HolyesTableKeyNames, HolyesTableTreeConfig } from '../type';
+/** 计算表格每行的高度的 worker 选项 */
+export type HolyesTableGetItemHeightOptions = {
+    /** 表格内容 */
+    tempData: any[];
+    /** 表格内容的索引 */
+    index: number;
+    /** 表格内容的样式 */
+    commonStyles: any;
+    /** 表格内容的样式 */
+    itemStyles: any;
+    /** 表格内容的高度 */
+    divLineHeight: number;
+    /** 每行的最小高度 */
+    cellMinHeight: number;
+    /** 行id的字段 */
+    keyNames: HolyesTableKeyNames;
+    /** 是否不自动换行 */
+    isNoAutoWrap: boolean;
+    /** 表格列属性 */
+    columns: {
+        title: string;
+        field: string;
+        minWidth: number | undefined;
+        width: number | undefined;
+        type: string;
+        slots?: {
+            /** 列自定义插槽 */
+            default?: string;
+            /** 列自定义插槽类型 */
+            defaultType?: HolyesTableSlotDefaultType;
+            /** 列自定义插槽高度，有插槽的话必填，插槽单元格不自动换行 */
+            defaultHeight?: number;
+        };
+        /** 是否树节点 */
+        treeNode?: boolean;
+    }[];
+    /** 树形结构配置项 */
+    treeConfig: HolyesTableTreeConfig;
+    /** 默认的树形结构配置项 */
+    defaultTreeConfig: any;
+};
+/** 计算表格每行的高度的 worker 回调 */
+export type HolyesTableGetItemHeightCallbackData = {
+    tempItemHeights: number;
+    heightDatas: {
+        pretextHeight: number;
+        id: string;
+    }[];
+};

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "holyes-table",
-  "version": "0.0.1",
-  "type": "module",
+  "version": "1.0.0",
   "description": "合力思虚拟滚动表格组件",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -29,12 +28,15 @@
     "大版本更新": "npm version major --registry https://registry.npmjs.org"
   },
   "peerDependencies": {
+    "@chenglou/pretext": "^0.0.7",
     "vue": "^3.3.13",
-    "xe-utils": "^4.0.4",
-    "vxe-pc-ui": "^4.9.41"
+    "vxe-pc-ui": "^4.9.41",
+    "xe-utils": "^4.0.4"
   },
   "devDependencies": {
+    "@chenglou/pretext": "^0.0.7",
     "@vitejs/plugin-vue": "^6.0.6",
+    "less": "^4.6.4",
     "typescript": "~6.0.2",
     "vite": "^8.0.3",
     "vite-plugin-dts": "^5.0.0",

package/dist/index.js

@@ -1,21 +0,0 @@
-import { createElementBlock as e, openBlock as t } from "vue";
-//#region lib/aa/aa.vue?vue&type=script&lang.ts
-var n = {
-	inheritAttrs: !1,
-	name: "aa"
-}, r = (e, t) => {
-	let n = e.__vccOpts || e;
-	for (let [e, r] of t) n[e] = r;
-	return n;
-};
-//#endregion
-//#region lib/aa/aa.vue
-function i(n, r, i, a, o, s) {
-	return t(), e("div", null, " 123 ");
-}
-var a = /* @__PURE__ */ r(n, [["render", i]]), o = a;
-o.install = (e) => {
-	e.component("HolyesTable", o);
-};
-//#endregion
-export { a as aa, o as default };

package/dist/lib/aa/aa.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;