stk-table-vue 0.11.0-beta.3 → 0.11.0

package/lib/{index-Bia-FgZA.js → index-t5SJ6KNv.js}

@@ -1,26 +1,28 @@
 /**
  * name: stk-table-vue
- * version: v0.11.0-beta.2
+ * version: v0.11.0-beta.4
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
  * license: MIT
  */
-import { defineComponent, ref, h, onMounted, onUnmounted, createElementBlock, openBlock, withModifiers, normalizeStyle, createVNode, createElementVNode } from "vue";
+import { defineComponent, ref, reactive, h, onMounted, onUnmounted, createElementBlock, openBlock, withModifiers, normalizeStyle, normalizeClass, createElementVNode, createVNode } from "vue";
 import { StkTable as _sfc_main$1 } from "./stk-table-vue.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
-  emits: ["confirm"],
-  setup(__props, { expose: __expose, emit: __emit }) {
+  setup(__props, { expose: __expose }) {
+    const theme = ref("light");
+    const checkedTempValueSet = reactive(/* @__PURE__ */ new Set());
     const columns = ref([
       {
         title: "",
         dataIndex: "value",
+        width: 30,
         className: "stk-filter-dropdown-checkbox",
         customCell: ({ row }) => h("input", {
           type: "checkbox",
-          checked: row.selected,
-          onChange: (e) => handleSelectChange(e, row)
+          checked: checkedTempValueSet.has(row.value),
+          onClick: (e) => e.preventDefault()
         })
       },
       { title: "", dataIndex: "label", customCell: ({ row }) => h("span", [row.label]) }
@@ -29,24 +31,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const position = ref({ x: 0, y: 0 });
     const options = ref([]);
     const dropdownEl = ref();
-    const checkedTempValue = ref(/* @__PURE__ */ new Set());
-    const emit = __emit;
     onMounted(() => {
       document.addEventListener("click", handleClickOutside);
     });
     onUnmounted(() => {
       document.removeEventListener("click", handleClickOutside);
     });
-    function show(pos, opt) {
+    let onConfirmFn;
+    function show(pos, opt, onConfirm) {
       visible.value = true;
       position.value = pos;
       options.value = opt || [];
       initChecked();
-    }
-    function clear() {
-      options.value = [];
-      checkedTempValue.value.clear();
-      confirm();
+      onConfirmFn = onConfirm;
     }
     async function handleClickOutside(e) {
       var _a;
@@ -54,51 +51,68 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       hide();
     }
     function initChecked() {
-      checkedTempValue.value = new Set(options.value.filter((opt) => opt.selected).map((opt) => opt.value));
+      options.value.forEach((opt) => {
+        if (opt.selected) {
+          checkedTempValueSet.add(opt.value);
+        }
+      });
     }
-    function handleSelectChange(e, row) {
-      const target = e.target;
-      if (target.checked) {
-        checkedTempValue.value.add(row.value);
+    function updateChecked(checked, row) {
+      if (checked) {
+        checkedTempValueSet.add(row.value);
       } else {
-        checkedTempValue.value.delete(row.value);
+        checkedTempValueSet.delete(row.value);
       }
     }
     function confirm() {
-      options.value.forEach((opt) => opt.selected = checkedTempValue.value.has(opt.value));
-      emit("confirm", Array.from(checkedTempValue.value));
+      options.value.forEach((opt) => opt.selected = checkedTempValueSet.has(opt.value));
+      onConfirmFn(Array.from(checkedTempValueSet));
       hide();
     }
     function hide() {
       visible.value = false;
+      options.value = [];
+      checkedTempValueSet.clear();
+    }
+    function handleRowClick(e, row) {
+      const selected = checkedTempValueSet.has(row.value);
+      updateChecked(!selected, row);
+    }
+    function setTheme(t) {
+      theme.value = t;
+    }
+    function handleClear() {
+      checkedTempValueSet.clear();
     }
-    __expose({ visible, show, clear, hide });
+    __expose({ visible, show, hide, setTheme });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         ref_key: "dropdownEl",
         ref: dropdownEl,
-        class: "stk-filter-dropdown",
+        class: normalizeClass(["stk-filter-dropdown", [`stk-filter-dropdown--${theme.value}`]]),
         style: normalizeStyle({ top: position.value.y + "px", left: position.value.x + "px", display: visible.value ? void 0 : "none" }),
         onClick: _cache[0] || (_cache[0] = withModifiers(() => {
         }, ["stop"]))
       }, [
+        _cache[1] || (_cache[1] = createElementVNode("div", { style: { "padding": "4px" } }, "Filter (Beta)", -1)),
         createVNode(_sfc_main$1, {
           "row-key": "id",
-          theme: "dark",
           headless: "",
           virtual: "",
           "no-data-full": "",
+          theme: theme.value,
           "row-active": false,
           "row-height": 20,
           bordered: false,
           columns: columns.value,
-          "data-source": options.value
-        }, null, 8, ["columns", "data-source"]),
+          "data-source": options.value,
+          onRowClick: handleRowClick
+        }, null, 8, ["theme", "columns", "data-source"]),
         createElementVNode("footer", null, [
-          createElementVNode("button", { onClick: clear }, "❌"),
-          createElementVNode("button", { onClick: confirm }, "✔️")
+          createElementVNode("button", { onClick: handleClear }, "↺"),
+          createElementVNode("button", { onClick: confirm }, "✓")
         ])
-      ], 4);
+      ], 6);
     };
   }
 });

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

@@ -4,7 +4,9 @@ import { ScrollbarOptions } from './useScrollbar';
 
 /** Generic stands for DataType */
 type DT = any & PrivateRowDT;
-declare function setFilter(status: Record<UniqKey, FilterStatus>): void;
+declare function setFilter(status: Record<UniqKey, FilterStatus> | null, option?: {
+    remote?: boolean;
+}): void;
 /**
  * 选中一行
  *
@@ -105,6 +107,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     rowCurrentRevokable?: boolean;
     /** 表头行高。default = rowHeight */
     headerRowHeight?: number | string | null;
+    /** 表尾行高。default = rowHeight */
+    footerRowHeight?: number | string | null;
     /** 虚拟滚动 */
     virtual?: boolean;
     /** x轴虚拟滚动(必须设置列宽)*/
@@ -222,6 +226,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
      * 实验性功能配置
      */
     experimental?: ExperimentalConfig;
+    /** 表格底部合计行数据 */
+    footerData?: DT[];
 }>, {
     width: string;
     fixedMode: boolean;
@@ -232,10 +238,12 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     theme: string;
     rowHeight: number;
     autoRowHeight: () => false;
+    footerData: () => never[];
     rowHover: boolean;
     rowActive: () => Required<RowActiveOption<any>>;
     rowCurrentRevokable: boolean;
     headerRowHeight: number;
+    footerRowHeight: number;
     virtual: boolean;
     virtualX: boolean;
     columns: () => never[];
@@ -531,6 +539,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     rowCurrentRevokable?: boolean;
     /** 表头行高。default = rowHeight */
     headerRowHeight?: number | string | null;
+    /** 表尾行高。default = rowHeight */
+    footerRowHeight?: number | string | null;
     /** 虚拟滚动 */
     virtual?: boolean;
     /** x轴虚拟滚动(必须设置列宽)*/
@@ -648,6 +658,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
      * 实验性功能配置
      */
     experimental?: ExperimentalConfig;
+    /** 表格底部合计行数据 */
+    footerData?: DT[];
 }>, {
     width: string;
     fixedMode: boolean;
@@ -658,10 +670,12 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     theme: string;
     rowHeight: number;
     autoRowHeight: () => false;
+    footerData: () => never[];
     rowHover: boolean;
     rowActive: () => Required<RowActiveOption<any>>;
     rowCurrentRevokable: boolean;
     headerRowHeight: number;
+    footerRowHeight: number;
     virtual: boolean;
     virtualX: boolean;
     columns: () => never[];
@@ -778,6 +792,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     rowHover: boolean;
     rowActive: boolean | RowActiveOption<DT>;
     rowCurrentRevokable: boolean;
+    footerRowHeight: number | string | null;
     virtual: boolean;
     virtualX: boolean;
     columns: StkTableColumn<DT>[];
@@ -813,6 +828,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     smoothScroll: boolean;
     scrollRowByRow: boolean | "scrollbar";
     experimental: ExperimentalConfig;
+    footerData: DT[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/lib/src/StkTable/components/Filter/Dropdown/index.d.ts

@@ -1,32 +1,24 @@
-import { FilterOption } from '../types';
-
-export declare function getDropdownIns(onConfirm: (values: FilterOption['value'][]) => void): Promise<import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{
-    onConfirm?: ((options: FilterOption[]) => any) | undefined;
-}>, {
+export declare function getDropdownIns(): Promise<import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {
     visible: import('vue').Ref<boolean, boolean>;
     show: (pos: {
         x: number;
         y: number;
-    }, opt?: FilterOption[]) => void;
-    clear: () => void;
+    }, opt: import('../types').FilterOption[], onConfirm: (values: import('../types').FilterOption["value"][]) => void) => void;
     hide: () => void;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    confirm: (options: FilterOption[]) => void;
-}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+    setTheme: (t: "light" | "dark") => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
     P: {};
     B: {};
     D: {};
     C: {};
     M: {};
     Defaults: {};
-}, Readonly<{}> & Readonly<{
-    onConfirm?: ((options: FilterOption[]) => any) | undefined;
-}>, {
+}, Readonly<{}> & Readonly<{}>, {
     visible: import('vue').Ref<boolean, boolean>;
     show: (pos: {
         x: number;
         y: number;
-    }, opt?: FilterOption[]) => void;
-    clear: () => void;
+    }, opt: import('../types').FilterOption[], onConfirm: (values: import('../types').FilterOption["value"][]) => void) => void;
     hide: () => void;
+    setTheme: (t: "light" | "dark") => void;
 }, {}, {}, {}, {}>>;

package/lib/src/StkTable/components/Filter/Dropdown/index.vue.d.ts

@@ -3,17 +3,13 @@ import { FilterOption } from '../types';
 declare function show(pos: {
     x: number;
     y: number;
-}, opt?: FilterOption[]): void;
-declare function clear(): void;
+}, opt: FilterOption[], onConfirm: (values: FilterOption['value'][]) => void): void;
 declare function hide(): void;
+declare function setTheme(t: 'light' | 'dark'): void;
 declare const _default: import('vue').DefineComponent<{}, {
     visible: import('vue').Ref<boolean, boolean>;
     show: typeof show;
-    clear: typeof clear;
     hide: typeof hide;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    confirm: (options: FilterOption[]) => void;
-}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
-    onConfirm?: ((options: FilterOption[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    setTheme: typeof setTheme;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -5,15 +5,17 @@ declare function __VLS_template(): {
     default?(_: {}): any;
 };
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<CustomHeaderCellProps<any> & {
+    theme?: "light" | "dark";
     active?: boolean;
-    options?: FilterOption[];
+    options: FilterOption[];
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:filterStatus": (value: any[]) => void;
+    change: (value: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<CustomHeaderCellProps<any> & {
+    theme?: "light" | "dark";
     active?: boolean;
-    options?: FilterOption[];
+    options: FilterOption[];
 }>>> & Readonly<{
-    "onUpdate:filterStatus"?: ((value: any[]) => any) | undefined;
+    onChange?: ((value: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/lib/src/StkTable/components/Filter/types.d.ts

@@ -2,15 +2,9 @@ export interface FilterOption {
     label: string;
     value: any;
     selected?: boolean;
-    /**
-     * TODO: 自定义筛选函数
-     * @param row 行数据
-     * @returns 是否匹配
-     */
-    matchFn?: (row: any) => boolean;
 }
 export interface FilterStatus {
-    value: any[];
+    value: FilterOption['value'][];
 }
 export interface UseFilterOptions {
     filterRemote: boolean;

package/lib/src/StkTable/components/Filter/useFilter.d.ts

@@ -2,12 +2,20 @@ import { UniqKey } from '../../types';
 import { VNode } from 'vue';
 import { FilterOption, FilterStatus } from './types';
 
+/**
+ * 从数据源提取筛选选项
+ * @param dataSource 数据源
+ * @param columnKey 列名
+ * @returns 筛选选项数组
+//  */
 /**
  * 表格筛选功能Hook (BETA)
  * @beta
  * @returns
  */
-export declare function useFilter(): {
+export declare function useFilter(option?: {
+    remote?: boolean;
+}): {
     Filter: (config?: {
         options?: FilterOption[];
     }, component?: VNode) => import('vue').Raw<import('vue').DefineComponent<{

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

@@ -27,6 +27,13 @@ export type CustomHeaderCellProps<T extends Record<string, any>> = {
     rowIndex: number;
     colIndex: number;
 };
+export type CustomFooterCellProps<T extends Record<string, any>> = {
+    col: StkTableColumn<T>;
+    row: T;
+    cellValue: any;
+    rowIndex: number;
+    colIndex: number;
+};
 export type MergeCellsParam<T extends Record<string, any>> = {
     row: T;
     col: StkTableColumn<T>;
@@ -89,6 +96,8 @@ export type StkTableColumn<T extends Record<string, any>> = {
     sortConfig?: Omit<SortConfig<T>, 'defaultSort'>;
     /** 固定列 */
     fixed?: 'left' | 'right' | null;
+    /** 是否隐藏列 */
+    hidden?: boolean;
     /**
      * 自定义 td 渲染内容。
      *
@@ -109,6 +118,17 @@ export type StkTableColumn<T extends Record<string, any>> = {
      * @param props.colIndex 列索引
      */
     customHeaderCell?: CustomCell<CustomHeaderCellProps<T>, T>;
+    /**
+     * 自定义 tfoot td 渲染内容
+     *
+     * 组件prop入参:
+     * @param props.row tfoot行的记录。
+     * @param props.col 列配置
+     * @param props.cellValue row[col.dataIndex] 的值
+     * @param props.rowIndex tfoot行索引（从0开始）
+     * @param props.colIndex 列索引
+     */
+    customFooterCell?: CustomCell<CustomFooterCellProps<T>, T>;
     /** 二级表头 */
     children?: StkTableColumn<T>[];
     /** 单元格合并 */
@@ -124,22 +144,22 @@ export type PrivateStkTableColumn<T extends Record<string, any>> = StkTableColum
      * parent not ref
      * @private
      */
-    __PARENT__?: StkTableColumn<T> | null;
+    __P__?: StkTableColumn<T> | null;
     /**
      * Save the calculated width. Used for horizontal virtual scrolling.
      * @private
      */
-    __WIDTH__?: number;
+    __W__?: number;
 };
 /** private row keys */
 export type PrivateRowDT = {
     /**
      * Only expanded row will add this key
      *
-     * If user define the `__ROW_K__` in table data, this value will be used as the row key
+     * If user define the `__R_K__` in table data, this value will be used as the row key
      * @private
      */
-    __ROW_K__?: string;
+    __R_K__?: string;
     /**
      * if row expanded
      * @private
@@ -218,7 +238,9 @@ export type SortConfig<T extends Record<string, any>> = {
 /** th td type */
 export declare const enum TagType {
     TH = 0,
-    TD = 1
+    TD = 1,
+    /** tfoot */
+    TF = 2
 }
 export type HighlightConfig = {
     /** Duration of the highlight in seconds */