stk-table-vue 0.0.1-beta.1

package/README.md

@@ -0,0 +1,136 @@
+# StkTable
+
+Vue3 简易虚拟滚动表格。用于实时数据展示，新数据行高亮渐暗动效。
+js体积(38kb)
+
+## 功能
+* [x] 高亮行，单元格。
+* [x] 横向虚拟滚动。
+* [x] 列固定。
+* [x] 表头拖动更改顺序。
+* [x] 表头列宽拖动。
+* [x] 多级表头。（不支持横向虚拟滚动）
+
+## Usage
+> npm install stk-table-vue
+
+```html
+<script>
+import { StkTable } from 'stk-table-vue'
+import { ref } from 'vue'
+const stkTable = ref<InstanceType<typeof StkTable>>();
+// highlight
+// stkTable.value.setHighlightDimRow([rowId])
+// stkTable.value.setHighlightDimCell(rowId,colId)
+</script>
+
+<template>
+    <StkTable row-key="id" :data-source="[]" :columns="[]" />
+</template>
+
+```
+## API
+### StkTable Component Props
+```ts
+export type StkProps = Partial<{
+  width: string;
+
+  /** 最小表格宽度 */
+  minWidth: string;
+
+  /** 表格最大宽度*/
+  maxWidth: string;
+
+  /** 是否隐藏表头 */
+  headless: boolean;
+
+  /** 主题，亮、暗 */
+  theme: 'light' | 'dark';
+
+  /** 虚拟滚动 */
+  virtual: boolean;
+
+  /** x轴虚拟滚动 */
+  virtualX: boolean;
+
+  /** 表格列配置 */
+  columns: StkTableColumn<any>[];
+
+  /** 表格数据源 */
+  dataSource: any[];
+
+  /** 行唯一键 */
+  rowKey: UniqKey;
+
+  /** 列唯一键 */
+  colKey: UniqKey;
+
+  /** 空值展示文字 */
+  emptyCellText: string;
+
+  /** 暂无数据兜底高度是否撑满 */
+  noDataFull: boolean;
+
+  /** 是否展示暂无数据 */
+  showNoData: boolean;
+
+  /** 是否服务端排序，true则不排序数据 */
+  sortRemote: boolean;
+
+  /** 表头是否溢出展示... */
+  showHeaderOverflow: boolean;
+
+  /** 表体溢出是否展示... */
+  showOverflow: boolean;
+
+  /** 是否增加行hover class */
+  showTrHoverClass: boolean;
+
+  /** 表头是否可拖动 */
+  headerDrag: boolean;
+
+  /**
+   * 给行附加className<br>
+   * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
+   */
+  rowClassName: (row: any, i: number) => string;
+
+  /**
+   * 列宽是否可拖动<br>
+   * **不要设置**列minWidth，**必须**设置width<br>
+   * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
+   */
+  colResizable: boolean;
+
+  /** 可拖动至最小的列宽 */
+  colMinWidth: number;
+}>;
+```
+
+#### StkTableColumn
+``` ts
+type Sorter = boolean | Function;
+
+export type StkTableColumn<T extends Record<string, any>> = {
+  dataIndex: keyof T & string;
+  title?: string;
+  align?: 'right' | 'left' | 'center';
+  headerAlign?: 'right' | 'left' | 'center';
+  sorter?: Sorter;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  headerClassName?: string;
+  className?: string;
+  sortField?: keyof T;
+  sortType?: 'number' | 'string';
+  fixed?: 'left' | 'right' | null;
+
+  /** private */ rowSpan?: number;
+  /** private */ colSpan?: number;
+  customCell?: Component | VNode;
+  customHeaderCell?: Component | VNode;
+  children?: StkTableColumn<T>[];
+};
+```
+

package/lib/StkTable/StkTable.vue.d.ts

@@ -0,0 +1,169 @@
+import { SortOption, StkProps, StkTableColumn } from '../StkTable/types/index';
+/**
+ * 选中一行，
+ * @param {string} rowKey
+ * @param {boolean} option.silent 是否触发回调
+ */
+declare function setCurrentRow(rowKey: string, option?: {
+    silent: boolean;
+}): void;
+/** 高亮一个单元格 */
+declare function setHighlightDimCell(rowKeyValue: string, dataIndex: string): void;
+/**
+ * 高亮一行
+ * @param rowKeyValues
+ */
+declare function setHighlightDimRow(rowKeyValues: Array<string | number>): void;
+/**
+ * 设置表头排序状态
+ * @param {string} dataIndex 列字段
+ * @param {'asc'|'desc'|null} order
+ * @param {object} option.sortOption 指定排序参数
+ * @param {boolean} option.sort 是否触发排序
+ * @param {boolean} option.silent 是否触发回调
+ */
+declare function setSorter(dataIndex: string, order: null | 'asc' | 'desc', option?: {
+    sortOption?: SortOption;
+    silent?: boolean;
+    sort?: boolean;
+}): any[];
+/** 重置排序 */
+declare function resetSorter(): void;
+/** 滚动 */
+declare function scrollTo(top?: number, left?: number): void;
+/** 获取当前状态的表格数据 */
+declare function getTableData(): any[];
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<StkProps>, {
+    width: string;
+    minWidth: string;
+    maxWidth: string;
+    headless: boolean;
+    theme: string;
+    virtual: boolean;
+    virtualX: boolean;
+    columns: () => never[];
+    dataSource: () => never[];
+    rowKey: string;
+    colKey: string;
+    emptyCellText: string;
+    noDataFull: boolean;
+    showNoData: boolean;
+    sortRemote: boolean;
+    showHeaderOverflow: boolean;
+    showOverflow: boolean;
+    showTrHoverClass: boolean;
+    headerDrag: boolean;
+    rowClassName: () => "";
+    colResizable: boolean;
+    colMinWidth: number;
+}>, {
+    setCurrentRow: typeof setCurrentRow;
+    setHighlightDimCell: typeof setHighlightDimCell;
+    setHighlightDimRow: typeof setHighlightDimRow;
+    setSorter: typeof setSorter;
+    resetSorter: typeof resetSorter;
+    scrollTo: typeof scrollTo;
+    getTableData: typeof getTableData;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "row-click": (...args: any[]) => void;
+    "sort-change": (...args: any[]) => void;
+    "current-change": (...args: any[]) => void;
+    "row-dblclick": (...args: any[]) => void;
+    "header-row-menu": (...args: any[]) => void;
+    "row-menu": (...args: any[]) => void;
+    "cell-click": (...args: any[]) => void;
+    "header-cell-click": (...args: any[]) => void;
+    "col-order-change": (...args: any[]) => void;
+    "th-drop": (...args: any[]) => void;
+    "th-drag-start": (...args: any[]) => void;
+    scroll: (...args: any[]) => void;
+    columns: (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<StkProps>, {
+    width: string;
+    minWidth: string;
+    maxWidth: string;
+    headless: boolean;
+    theme: string;
+    virtual: boolean;
+    virtualX: boolean;
+    columns: () => never[];
+    dataSource: () => never[];
+    rowKey: string;
+    colKey: string;
+    emptyCellText: string;
+    noDataFull: boolean;
+    showNoData: boolean;
+    sortRemote: boolean;
+    showHeaderOverflow: boolean;
+    showOverflow: boolean;
+    showTrHoverClass: boolean;
+    headerDrag: boolean;
+    rowClassName: () => "";
+    colResizable: boolean;
+    colMinWidth: number;
+}>>> & {
+    "onRow-click"?: ((...args: any[]) => any) | undefined;
+    "onSort-change"?: ((...args: any[]) => any) | undefined;
+    "onCurrent-change"?: ((...args: any[]) => any) | undefined;
+    "onRow-dblclick"?: ((...args: any[]) => any) | undefined;
+    "onHeader-row-menu"?: ((...args: any[]) => any) | undefined;
+    "onRow-menu"?: ((...args: any[]) => any) | undefined;
+    "onCell-click"?: ((...args: any[]) => any) | undefined;
+    "onHeader-cell-click"?: ((...args: any[]) => any) | undefined;
+    "onCol-order-change"?: ((...args: any[]) => any) | undefined;
+    "onTh-drop"?: ((...args: any[]) => any) | undefined;
+    "onTh-drag-start"?: ((...args: any[]) => any) | undefined;
+    onScroll?: ((...args: any[]) => any) | undefined;
+    onColumns?: ((...args: any[]) => any) | undefined;
+}, {
+    columns: StkTableColumn<any>[];
+    dataSource: any[];
+    width: string;
+    minWidth: string;
+    maxWidth: string;
+    headless: boolean;
+    theme: "light" | "dark";
+    virtual: boolean;
+    virtualX: boolean;
+    rowKey: import('../StkTable/types/index').UniqKey;
+    colKey: import('../StkTable/types/index').UniqKey;
+    emptyCellText: string;
+    noDataFull: boolean;
+    showNoData: boolean;
+    sortRemote: boolean;
+    showHeaderOverflow: boolean;
+    showOverflow: boolean;
+    showTrHoverClass: boolean;
+    headerDrag: boolean;
+    rowClassName: Function;
+    colResizable: boolean;
+    colMinWidth: number;
+}, {}>, {
+    tableHeader?(_: {
+        column: StkTableColumn<any>;
+    }): any;
+    empty?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/StkTable/const.d.ts

@@ -0,0 +1,20 @@
+export declare const Default_Col_Width = "100";
+export declare const Default_Table_Height = 100;
+export declare const Default_Table_Width = 200;
+/** 高亮背景色 */
+export declare const Highlight_Color: {
+    light: {
+        from: string;
+        to: string;
+    };
+    dark: {
+        from: string;
+        to: string;
+    };
+};
+/** 高亮持续时间 */
+export declare const Highlight_Duration = 2000;
+/** 高亮变更频率 */
+export declare const Highlight_Color_Change_Freq = 100;
+/** 是否兼容低版本模式 */
+export declare const Is_Legacy_Mode: boolean;

package/lib/StkTable/index.d.ts

@@ -0,0 +1,2 @@
+export { default as StkTable } from './StkTable.vue';
+export { tableSort, insertToOrderedArray } from './utils';

package/lib/StkTable/types/index.d.ts

@@ -0,0 +1,82 @@
+import { Component, VNode } from 'vue';
+type Sorter = boolean | Function;
+export type StkTableColumn<T extends Record<string, any>> = {
+    dataIndex: keyof T & string;
+    title?: string;
+    align?: 'right' | 'left' | 'center';
+    headerAlign?: 'right' | 'left' | 'center';
+    sorter?: Sorter;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    headerClassName?: string;
+    className?: string;
+    sortField?: keyof T;
+    sortType?: 'number' | 'string';
+    fixed?: 'left' | 'right' | null;
+    /** private */ rowSpan?: number;
+    /** private */ colSpan?: number;
+    customCell?: Component | VNode;
+    customHeaderCell?: Component | VNode;
+    children?: StkTableColumn<T>[];
+};
+export type SortOption = Pick<StkTableColumn<any>, 'sorter' | 'dataIndex' | 'sortField' | 'sortType'>;
+export type SortState = {
+    dataIndex: string;
+    order: null | 'asc' | 'desc';
+    sortType?: 'number' | 'string';
+};
+export type UniqKey = string | ((param: any) => string);
+export type StkProps = {
+    width: string;
+    /** 最小表格宽度 */
+    minWidth: string;
+    /** 表格最大宽度*/
+    maxWidth: string;
+    /** 是否隐藏表头 */
+    headless: boolean;
+    /** 主题，亮、暗 */
+    theme: 'light' | 'dark';
+    /** 虚拟滚动 */
+    virtual: boolean;
+    /** x轴虚拟滚动 */
+    virtualX: boolean;
+    /** 表格列配置 */
+    columns: StkTableColumn<any>[];
+    /** 表格数据源 */
+    dataSource: any[];
+    /** 行唯一键 */
+    rowKey: UniqKey;
+    /** 列唯一键 */
+    colKey: UniqKey;
+    /** 空值展示文字 */
+    emptyCellText: string;
+    /** 暂无数据兜底高度是否撑满 */
+    noDataFull: boolean;
+    /** 是否展示暂无数据 */
+    showNoData: boolean;
+    /** 是否服务端排序，true则不排序数据 */
+    sortRemote: boolean;
+    /** 表头是否溢出展示... */
+    showHeaderOverflow: boolean;
+    /** 表体溢出是否展示... */
+    showOverflow: boolean;
+    /** 是否增加行hover class */
+    showTrHoverClass: boolean;
+    /** 表头是否可拖动 */
+    headerDrag: boolean;
+    /**
+     * 给行附加className<br>
+     * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
+     */
+    rowClassName: Function;
+    /**
+     * 列宽是否可拖动<br>
+     * **不要设置**列minWidth，**必须**设置width<br>
+     * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
+     */
+    colResizable: boolean;
+    /** 可拖动至最小的列宽 */
+    colMinWidth: number;
+};
+export {};

package/lib/StkTable/useColResize.d.ts

@@ -0,0 +1,18 @@
+import { Ref } from 'vue';
+import { StkTableColumn } from './types';
+type Params = {
+    props: any;
+    emit: any;
+    tableContainer: Ref<HTMLElement | undefined>;
+    tableHeaderLast: Ref<StkTableColumn<any>[]>;
+    colResizeIndicator: Ref<HTMLElement | undefined>;
+    colKeyGen: (p: any) => string;
+};
+/** 列宽拖动 */
+export declare function useColResize({ tableContainer, tableHeaderLast, colResizeIndicator, props, emit, colKeyGen }: Params): {
+    isColResizing: Ref<boolean>;
+    onThResizeMouseDown: (e: MouseEvent, col: StkTableColumn<any>, isPrev?: boolean) => void;
+    onThResizeMouseMove: (e: MouseEvent) => void;
+    onThResizeMouseUp: (e: MouseEvent) => void;
+};
+export {};

package/lib/StkTable/useThDrag.d.ts

@@ -0,0 +1,14 @@
+type Params = {
+    emit: any;
+};
+/**
+ * 列顺序拖动
+ * @param param0
+ * @returns
+ */
+export declare function useThDrag({ emit }: Params): {
+    onThDragStart: (e: MouseEvent) => void;
+    onThDragOver: (e: MouseEvent) => void;
+    onThDrop: (e: MouseEvent) => void;
+};
+export {};

package/lib/StkTable/useVirtualScroll.d.ts

@@ -0,0 +1,35 @@
+import { Ref, ShallowRef } from 'vue';
+import { StkTableColumn } from './types';
+type Option = {
+    tableContainer: Ref<HTMLElement | undefined>;
+    props: any;
+    dataSourceCopy: ShallowRef<any[]>;
+    tableHeaderLast: Ref<StkTableColumn<any>[]>;
+};
+export declare function useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLast }: Option): {
+    virtualScroll: Ref<{
+        containerHeight: number;
+        startIndex: number;
+        rowHeight: number;
+        offsetTop: number;
+        scrollTop: number;
+    }>;
+    virtualScrollX: Ref<{
+        containerWidth: number;
+        startIndex: number;
+        endIndex: number;
+        offsetLeft: number;
+        scrollLeft: number;
+    }>;
+    virtual_on: import("vue").ComputedRef<any>;
+    virtual_dataSourcePart: import("vue").ComputedRef<any[]>;
+    virtual_offsetBottom: import("vue").ComputedRef<number>;
+    virtualX_on: import("vue").ComputedRef<any>;
+    virtualX_columnPart: import("vue").ComputedRef<StkTableColumn<any>[]>;
+    virtualX_offsetRight: import("vue").ComputedRef<number>;
+    initVirtualScrollY: (height?: number) => void;
+    initVirtualScrollX: () => void;
+    updateVirtualScrollY: (sTop?: number) => void;
+    updateVirtualScrollX: (sLeft?: number) => void;
+};
+export {};

package/lib/StkTable/utils.d.ts

@@ -0,0 +1,23 @@
+import { SortOption, SortState, StkTableColumn } from './types';
+/**
+ * 对有序数组插入新数据
+ * @param {object} sortState
+ * @param {string} sortState.dataIndex 排序的列
+ * @param {null|'asc'|'desc'} sortState.order 排序顺序
+ * @param {'number'|'string'} [sortState.sortType] 排序方式
+ * @param {object} newItem 要插入的数据
+ * @param {Array} targetArray 表格数据
+ */
+export declare function insertToOrderedArray(sortState: SortState, newItem: any, targetArray: any[]): any[];
+/**
+ * 表格排序抽离
+ * 可以在组件外部自己实现表格排序，组件配置remote，使表格不排序。
+ * 使用者在@sort-change事件中自行更改table props 'dataSource'完成排序。
+ * TODO: key 唯一值，排序字段相同时，根据唯一值排序。
+ * @param {SortOption} sortOption 列配置
+ * @param {string|null} order 排序方式
+ * @param {any} dataSource 排序的数组
+ */
+export declare function tableSort(sortOption: SortOption, order: string | null, dataSource: any[]): any[];
+/** column 的层级 */
+export declare function howDeepTheColumn(arr: StkTableColumn<any>[], level?: number): number;

package/lib/StkTableC/store.d.ts

@@ -0,0 +1,12 @@
+declare namespace _default {
+    namespace state {
+        namespace currentItem {
+            let value: null;
+        }
+        namespace currentHover {
+            let value_1: null;
+            export { value_1 as value };
+        }
+    }
+}
+export default _default;