stk-table-vue 0.8.13 → 0.9.0-beta.1

package/README.md

@@ -1,180 +1,172 @@
-<p align="center">
-    <a href="https://ja-plus.github.io/stk-table-vue/">
-        <img src="./docs-src/public/assets/logo.svg" width="152">
-    </a>
-    <h3 align='center'>Stk Table Vue</h3>
-    <p align="center">
-        <a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/v/stk-table-vue"></a>
-        <a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/dw/stk-table-vue"></a>
-        <a href="https://github.com/ja-plus/stk-table-vue/stargazers"><img src="https://img.shields.io/github/stars/ja-plus/stk-table-vue.svg"></a>
-        <a href="https://raw.githubusercontent.com/ja-plus/stk-table-vue/master/LICENSE"><img src="https://img.shields.io/npm/l/stk-table-vue"></a>
-        <a href="https://github.com/ja-plus/stk-table-vue"><img src="https://img.shields.io/npm/types/stk-table-vue"></a>
-    </p>
-</p>
-
-> Stk Table Vue(Sticky Table) is a high-performance virtual list component based on Vue.
->
-> Used for real-time data display, with data highlighting and dynamic effects
->
-> Support Vue3 and Vue2.7
-
-
-## Documentation
-### [Stk Table Vue Official en](https://ja-plus.github.io/stk-table-vue/en/)
-### [Stk Table Vue Official zh-CN](https://ja-plus.github.io/stk-table-vue/)
-
-
-## Repo: 
-- [Github](https://github.com/ja-plus/stk-table-vue)
-- [Gitee](https://gitee.com/japlus/stk-table-vue) 🇨🇳
-
-## Demo
-[<span style="font-size: 16px;font-weight: bold;">Online Demo in stackblitz</span>](https://stackblitz.com/edit/vitejs-vite-ad91hh?file=src%2FDemo%2Findex.vue)
-
-## Compare
-Compare performance with other vue table [vue-table-compare](https://github.com/ja-plus/vue-table-compare)
-
-
-
-## Usage
-> npm install stk-table-vue
-
-```html
-<script setup>
-import { StkTable } from 'stk-table-vue'
-import { ref, useTemplateRef } from 'vue'
-const stkTableRef = ref<InstanceType<typeof StkTable>>();
-// or Vue 3.5 useTemplateRef
-const stkTableRef = useTemplateRef('stkTableRef');
-
-// highlight row
-stkTableRef.value.setHighlightDimRow([rowKey]，{
-  method: 'css'|'animation',// default animation。
-  className: 'custom-class-name', // method css。
-  keyframe: [{backgroundColor:'#aaa'}, {backgroundColor: '#222'}],//same as https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
-  duration: 2000,。
-});
- // highlight cell
-stkTableRef.value.setHighlightDimCell(rowKey, colDataIndex, {
-  method: 'css'|'animation',
-  className:'custom-class-name', // method css。
-  keyframe: [{backgroundColor:'#aaa'}, {backgroundColor: '#222'}], // method animation。
-  duration: 2000,。
-});
-
-const columns = [
-  {title: 'name', dataIndex: 'name'},
-  {title: 'age', dataIndex: 'age'},
-  {title: 'address', dataIndex: 'address'},
-];
-
-const dataSource = [
-  {id: 1, name: 'John', age: 32, address: 'New York'},
-  {id: 2, name: 'Jim', age: 42, address: 'London'},
-  {id: 3, name: 'Joe', age: 52, address: 'Tokyo'},
-  {id: 4, name: 'Jack', age: 62, address: 'Sydney'},
-  {id: 5, name: 'Jill', age: 72, address: 'Paris'},
-]
-
-</script>
-
-<template>
-    <StkTable ref='stkTableRef' row-key="id" :data-source="dataSource" :columns="columns"></StkTable>
-</template>
-
-```
-
-### Vue2.7 Usage
-[Vue2.7 Usage](https://ja-plus.github.io/stk-table-vue/main/start/vue2-usage.html)
-
-## API
-### Props
-[Props 表格配置](https://ja-plus.github.io/stk-table-vue/main/api/table-props.html)
-
-### Emits
-[Emits 事件](https://ja-plus.github.io/stk-table-vue/main/api/emits.html)
-
-### Slots
-[Slots 插槽](https://ja-plus.github.io/stk-table-vue/main/api/slots.html)
-
-### Expose
-[Expose 实例方法](https://ja-plus.github.io/stk-table-vue/main/api/expose.html)
-
-### StkTableColumn 列配置
-[StkTableColumn 列配置](https://ja-plus.github.io/stk-table-vue/main/api/stk-table-column.html)
-
-### setHighlightDimCell & setHighlightDimRow
-[Highlight 高亮](https://ja-plus.github.io/stk-table-vue/main/api/expose.html#sethighlightdimcell)
-
-
-### Example
-```vue
-<template>
- <StkTable
-    ref="stkTable"
-    row-key="name"
-    v-model:columns="columns"
-    :style="{height:props.height}"
-    theme='dark'
-    height='200px'
-    bordered="h"
-    :row-height="28"
-    :show-overflow="false"
-    :show-header-overflow="false"
-    :sort-remote="false"
-    col-resizable
-    header-drag
-    virtual
-    virtual-x
-    no-data-full
-    col-resizable
-    auto-resize
-    fixed-col-shadow
-    :col-min-width="10"
-    :headless="false"
-    :data-source="dataSource"
-    @current-change="onCurrentChange"
-    @row-menu="onRowMenu"
-    @header-row-menu="onHeaderRowMenu"
-    @row-click="onRowClick"
-    @row-dblclick="onRowDblclick"
-    @sort-change="handleSortChange"
-    @cell-click="onCellClick"
-    @header-cell-click="onHeaderCellClick"
-    @scroll="onTableScroll"
-    @scroll-x="onTableScrollX"
-    @col-order-change="onColOrderChange"
-  />
-</template>
-<script setup>
-  import { h, defineComponent } from 'vue';
-  const columns = [
-    {
-      title: 'Name',
-      dataIndex: 'name',
-      fixed: 'left',
-      width: '200px',
-      headerClassName: 'my-th',
-      className: 'my-td',
-      sorter: true,
-      customHeaderCell: function FunctionalComponent(props){
-          return h(
-              'span',
-              { style: 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap' },
-              props.col.title + '(render) text-overflow,',
-          );
-      },
-      customCell: defineComponent({
-        setup(){
-          //...
-          return () => <div></div> // vue jsx
-        }
-      })
-    },
-  ]
-</script>
-```
-
-
-## Other
-* `$*$`
+<p align="center">
+    <a href="https://ja-plus.github.io/stk-table-vue/">
+        <img src="./docs-src/public/assets/logo.svg" width="152">
+    </a>
+    <h3 align='center'>Stk Table Vue</h3>
+    <p align="center">
+        <a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/v/stk-table-vue"></a>
+        <a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/dw/stk-table-vue"></a>
+        <a href="https://github.com/ja-plus/stk-table-vue/stargazers"><img src="https://img.shields.io/github/stars/ja-plus/stk-table-vue.svg"></a>
+        <a href="https://raw.githubusercontent.com/ja-plus/stk-table-vue/master/LICENSE"><img src="https://img.shields.io/npm/l/stk-table-vue"></a>
+        <a href="https://github.com/ja-plus/stk-table-vue"><img src="https://img.shields.io/npm/types/stk-table-vue"></a>
+    </p>
+</p>
+
+> Stk Table Vue(Sticky Table) is a high-performance virtual list component based on Vue.
+>
+> Used for real-time data display, with data highlighting and dynamic effects
+>
+> Support Vue3 and Vue2.7
+
+
+## Documentation
+### [Stk Table Vue Official en](https://ja-plus.github.io/stk-table-vue/en/)
+### [Stk Table Vue Official zh-CN](https://ja-plus.github.io/stk-table-vue/)
+
+
+## Repo: 
+- [Github](https://github.com/ja-plus/stk-table-vue)
+- [Gitee](https://gitee.com/japlus/stk-table-vue) 🇨🇳
+
+## Demo
+[<span style="font-size: 16px;font-weight: bold;">Online Demo in stackblitz</span>](https://stackblitz.com/edit/vitejs-vite-ad91hh?file=src%2FDemo%2Findex.vue)
+
+## Usage
+> npm install stk-table-vue
+
+```html
+<script setup>
+import { StkTable } from 'stk-table-vue'
+import { ref, useTemplateRef } from 'vue'
+const stkTableRef = ref<InstanceType<typeof StkTable>>();
+// or Vue 3.5 useTemplateRef
+const stkTableRef = useTemplateRef('stkTableRef');
+
+// highlight row
+stkTableRef.value.setHighlightDimRow([rowKey]，{
+  method: 'css'|'animation',// default animation。
+  className: 'custom-class-name', // method css。
+  keyframe: [{backgroundColor:'#aaa'}, {backgroundColor: '#222'}],//same as https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
+  duration: 2000,。
+});
+ // highlight cell
+stkTableRef.value.setHighlightDimCell(rowKey, colDataIndex, {
+  method: 'css'|'animation',
+  className:'custom-class-name', // method css。
+  keyframe: [{backgroundColor:'#aaa'}, {backgroundColor: '#222'}], // method animation。
+  duration: 2000,。
+});
+
+const columns = [
+  {title: 'name', dataIndex: 'name'},
+  {title: 'age', dataIndex: 'age'},
+  {title: 'address', dataIndex: 'address'},
+];
+
+const dataSource = [
+  {id: 1, name: 'John', age: 32, address: 'New York'},
+  {id: 2, name: 'Jim', age: 42, address: 'London'},
+  {id: 3, name: 'Joe', age: 52, address: 'Tokyo'},
+  {id: 4, name: 'Jack', age: 62, address: 'Sydney'},
+  {id: 5, name: 'Jill', age: 72, address: 'Paris'},
+]
+
+</script>
+
+<template>
+    <StkTable ref='stkTableRef' row-key="id" :data-source="dataSource" :columns="columns"></StkTable>
+</template>
+
+```
+
+### Vue2.7 Usage
+[Vue2.7 Usage](https://ja-plus.github.io/stk-table-vue/main/start/vue2-usage.html)
+
+## API
+* [Props](https://ja-plus.github.io/stk-table-vue/main/api/table-props.html)
+
+* [Emits](https://ja-plus.github.io/stk-table-vue/main/api/emits.html)
+
+* [Slots](https://ja-plus.github.io/stk-table-vue/main/api/slots.html)
+
+* [Expose](https://ja-plus.github.io/stk-table-vue/main/api/expose.html)
+
+* [StkTableColumn: Define column type](https://ja-plus.github.io/stk-table-vue/main/api/stk-table-column.html)
+
+* [Highlight: setHighlightDimCell & setHighlightDimRow](https://ja-plus.github.io/stk-table-vue/main/api/expose.html#sethighlightdimcell)
+
+
+### Example
+```vue
+<template>
+ <StkTable
+    ref="stkTable"
+    row-key="name"
+    v-model:columns="columns"
+    :style="{height:props.height}"
+    theme='dark'
+    height='200px'
+    bordered="h"
+    :row-height="28"
+    :show-overflow="false"
+    :show-header-overflow="false"
+    :sort-remote="false"
+    col-resizable
+    header-drag
+    virtual
+    virtual-x
+    no-data-full
+    col-resizable
+    auto-resize
+    fixed-col-shadow
+    :col-min-width="10"
+    :headless="false"
+    :data-source="dataSource"
+    @current-change="onCurrentChange"
+    @row-menu="onRowMenu"
+    @header-row-menu="onHeaderRowMenu"
+    @row-click="onRowClick"
+    @row-dblclick="onRowDblclick"
+    @sort-change="handleSortChange"
+    @cell-click="onCellClick"
+    @header-cell-click="onHeaderCellClick"
+    @scroll="onTableScroll"
+    @scroll-x="onTableScrollX"
+    @col-order-change="onColOrderChange"
+  />
+</template>
+<script setup>
+  import { h, defineComponent } from 'vue';
+  const columns = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      fixed: 'left',
+      width: '200px',
+      headerClassName: 'my-th',
+      className: 'my-td',
+      sorter: true,
+      customHeaderCell: function FunctionalComponent(props){
+          return h(
+              'span',
+              { style: 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap' },
+              props.col.title + '(render) text-overflow,',
+          );
+      },
+      customCell: defineComponent({
+        setup(){
+          //...
+          return () => <div></div> // vue jsx
+        }
+      })
+    },
+  ]
+</script>
+```
+
+## Compare
+Compare performance with other vue table [vue-table-compare](https://github.com/ja-plus/vue-table-compare)
+
+
+## Other
+* `$*$`

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

@@ -1,9 +1,12 @@
 import { AutoRowHeightConfig, ColResizableConfig, DragRowConfig, ExpandConfig, HeaderDragConfig, HighlightConfig, Order, PrivateRowDT, PrivateStkTableColumn, RowActiveOption, SeqConfig, SortConfig, SortOption, StkTableColumn, TreeConfig, UniqKey, UniqKeyProp } from './types/index';
+import { ScrollbarOptions } from './useScrollbar';
 
 /** Generic stands for DataType */
 type DT = any & PrivateRowDT;
 /**
  * 选中一行
+ *
+ * en: Select a row
  * @param {string} rowKeyOrRow selected rowKey, undefined to unselect
  * @param {boolean} option.silent if set true not emit `current-change`. default:false
  * @param {boolean} option.deep if set true, deep search in children. default:false
@@ -62,8 +65,8 @@ declare function __VLS_template(): {
         row: any;
         col: StkTableColumn<any> | undefined;
     }): any;
-    empty?(_: {}): any;
     customBottom?(_: {}): any;
+    empty?(_: {}): any;
 };
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     width?: string;
@@ -203,6 +206,13 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
      * - scrollbar：仅拖动滚动条生效
      */
     scrollRowByRow?: boolean | "scrollbar";
+    /**
+     * 自定义滚动条配置
+     * - false: 禁用自定义滚动条
+     * - true: 启用默认配置的自定义滚动条
+     * - ScrollbarOptions: 启用并配置自定义滚动条
+     */
+    scrollbar?: boolean | ScrollbarOptions;
 }>, {
     width: string;
     fixedMode: boolean;
@@ -255,6 +265,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     cellFixedMode: string;
     smoothScroll: boolean;
     scrollRowByRow: boolean;
+    scrollbar: boolean;
 }>>, {
     /**
      * 重新计算虚拟列表宽高
@@ -572,6 +583,13 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
      * - scrollbar：仅拖动滚动条生效
      */
     scrollRowByRow?: boolean | "scrollbar";
+    /**
+     * 自定义滚动条配置
+     * - false: 禁用自定义滚动条
+     * - true: 启用默认配置的自定义滚动条
+     * - ScrollbarOptions: 启用并配置自定义滚动条
+     */
+    scrollbar?: boolean | ScrollbarOptions;
 }>, {
     width: string;
     fixedMode: boolean;
@@ -624,6 +642,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     cellFixedMode: string;
     smoothScroll: boolean;
     scrollRowByRow: boolean;
+    scrollbar: boolean;
 }>>> & Readonly<{
     onScroll?: ((ev: Event, data: {
         startIndex: number;
@@ -680,6 +699,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     minWidth: string;
     maxWidth: string;
     sortConfig: SortConfig<DT>;
+    colKey: UniqKeyProp;
     rowHeight: number;
     headless: boolean;
     autoRowHeight: boolean | AutoRowHeightConfig<DT>;
@@ -687,7 +707,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     optimizeVue2Scroll: boolean;
     rowKey: UniqKeyProp;
     headerRowHeight: number | string | null;
-    colKey: UniqKeyProp;
+    scrollbar: boolean | ScrollbarOptions;
     fixedMode: boolean;
     theme: "light" | "dark";
     rowHover: boolean;

package/lib/src/StkTable/useScrollbar.d.ts

@@ -0,0 +1,57 @@
+import { Ref } from 'vue';
+
+export type ScrollbarOptions = {
+    enabled?: boolean;
+    /** scroll-y width */
+    width?: number;
+    /** scroll-x height */
+    height?: number;
+    /** min scroll-y width */
+    minWidth?: number;
+    /** min scroll-x height */
+    minHeight?: number;
+};
+/**
+ * 自定义滚动条hooks
+ * @param containerRef 滚动容器的ref
+ * @param options 滚动条配置选项
+ * @returns 滚动条相关状态和方法
+ */
+export declare function useScrollbar(containerRef: Ref<HTMLDivElement | undefined>, options?: boolean | ScrollbarOptions): {
+    scrollbarOptions: {
+        enabled: boolean;
+        width: number;
+        height: number;
+        minWidth: number;
+        minHeight: number;
+    };
+    scrollbar: Ref<{
+        h: number;
+        w: number;
+        top: number;
+        left: number;
+    }, {
+        h: number;
+        w: number;
+        top: number;
+        left: number;
+    } | {
+        h: number;
+        w: number;
+        top: number;
+        left: number;
+    }>;
+    showScrollbar: Ref<{
+        x: boolean;
+        y: boolean;
+    }, {
+        x: boolean;
+        y: boolean;
+    } | {
+        x: boolean;
+        y: boolean;
+    }>;
+    onVerticalScrollbarMouseDown: (e: MouseEvent | TouchEvent) => void;
+    onHorizontalScrollbarMouseDown: (e: MouseEvent | TouchEvent) => void;
+    updateCustomScrollbar: () => void;
+};

package/lib/src/StkTable/utils/index.d.ts

@@ -51,3 +51,13 @@ export declare function howDeepTheHeader(arr: StkTableColumn<any>[], level?: num
 export declare function transformWidthToStr(width?: string | number): string | undefined;
 export declare function getBrowsersVersion(browserName: string): number;
 export declare function pureCellKeyGen(rowKey: UniqKey, colKey: UniqKey): string;
+export declare function getClosestTr(e: MouseEvent): HTMLTableRowElement | null;
+export declare function getClosestTrIndex(e: MouseEvent): number;
+export declare function getClosestColKey(e: MouseEvent): string | undefined;
+/**
+ * 改进的节流函数，确保最后一个调用不会被丢弃
+ * @param fn 要执行的函数
+ * @param delay 延迟时间（毫秒）
+ * @returns 节流处理后的函数
+ */
+export declare function throttle<T extends (...args: any[]) => any>(fn: T, delay: number): (...args: Parameters<T>) => void;