stk-table-vue 1.2.4 → 1.2.6

package/src/StkTable/custom-cells/FilterCell/Filter.vue

@@ -1,66 +1,66 @@
-<script setup lang="ts">
-import { CustomHeaderCellProps } from '../../types';
-import { computed } from 'vue';
-import { getDropdownIns } from './Dropdown/index';
-import { FilterOption } from './types';
-
-const props = defineProps<
-    CustomHeaderCellProps<any> & {
-        theme?: 'light' | 'dark';
-        active?: boolean; // 是否激活筛选
-        getOptions: () => FilterOption[]; // 懒获取筛选选项，仅在下拉打开时调用
-    }
->();
-
-// 从父组件继承 theme，默认为 'light'
-const theme = computed(() => props.theme || 'light');
-
-const emit = defineEmits<{
-    (e: 'change', value: FilterOption['value'][]): void;
-}>();
-
-function handleIconClick(e: MouseEvent) {
-    e.stopPropagation();
-    const target = e.target as HTMLElement;
-    const rect = target.getBoundingClientRect();
-
-    // 计算相对于文档的位置（考虑滚动偏移）
-    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-
-    getDropdownIns().then(ins => {
-        if (ins.visible) {
-            ins.hide();
-            return;
-        }
-        ins.setTheme(theme.value);
-        ins.show(
-            {
-                x: rect.left + scrollLeft,
-                y: rect.bottom + scrollTop,
-                height: rect.height,
-            },
-            props.getOptions(),
-            handleConfirm,
-        );
-    });
-}
-
-function handleConfirm(value: FilterOption['value'][]) {
-    emit('change', value);
-}
-</script>
-
-<template>
-    <div class="stk-filter" :class="[{ 'stk-filter--active': props.active }, `stk-filter--${theme}`]">
-        <slot>
-            <span>{{ props.col.title }}</span>
-        </slot>
-        <svg class="stk-filter-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" @click="handleIconClick">
-            <path
-                fill="currentColor"
-                d="M950.58 0 l-894.06 0 q-91.93 17.17 -34.34 119.21 l293.97 251.54 l6.06 9.1 q16.17 20.2 16.17 47.48 l0 468.74 l1.01 8.08 q3.03 10.11 9.09 19.2 q2.02 2.02 5.05 7.07 q36.37 33.34 84.86 4.04 l216.19 -124.26 q21.21 -22.22 18.18 -50.51 l0 -332.36 l1.01 -11.12 q4.04 -26.26 22.23 -45.46 l292.96 -251.54 l9.1 -10.11 q43.44 -54.55 14.14 -81.82 q-28.29 -27.28 -61.62 -27.28 ZM832.38 119.21 l-277.81 235.38 l0 377.82 l-96.98 55.57 l0 -433.39 l-275.8 -235.38 l650.59 0 Z"
-            />
-        </svg>
-    </div>
-</template>
+<script setup lang="ts">
+import { CustomHeaderCellProps } from '../../types';
+import { computed } from 'vue';
+import { getDropdownIns } from './Dropdown/index';
+import { FilterOption } from './types';
+
+const props = defineProps<
+    CustomHeaderCellProps<any> & {
+        theme?: 'light' | 'dark';
+        active?: boolean; // 是否激活筛选
+        getOptions: () => FilterOption[]; // 懒获取筛选选项，仅在下拉打开时调用
+    }
+>();
+
+// 从父组件继承 theme，默认为 'light'
+const theme = computed(() => props.theme || 'light');
+
+const emit = defineEmits<{
+    (e: 'change', value: FilterOption['value'][]): void;
+}>();
+
+function handleIconClick(e: MouseEvent) {
+    e.stopPropagation();
+    const target = e.target as HTMLElement;
+    const rect = target.getBoundingClientRect();
+
+    // 计算相对于文档的位置（考虑滚动偏移）
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+
+    getDropdownIns().then(ins => {
+        if (ins.visible) {
+            ins.hide();
+            return;
+        }
+        ins.setTheme(theme.value);
+        ins.show(
+            {
+                x: rect.left + scrollLeft,
+                y: rect.bottom + scrollTop,
+                height: rect.height,
+            },
+            props.getOptions(),
+            handleConfirm,
+        );
+    });
+}
+
+function handleConfirm(value: FilterOption['value'][]) {
+    emit('change', value);
+}
+</script>
+
+<template>
+    <div class="stk-filter" :class="[{ 'stk-filter--active': props.active }, `stk-filter--${theme}`]">
+        <slot>
+            <span>{{ props.col.title }}</span>
+        </slot>
+        <svg class="stk-filter-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" @click="handleIconClick">
+            <path
+                fill="currentColor"
+                d="M950.58 0 l-894.06 0 q-91.93 17.17 -34.34 119.21 l293.97 251.54 l6.06 9.1 q16.17 20.2 16.17 47.48 l0 468.74 l1.01 8.08 q3.03 10.11 9.09 19.2 q2.02 2.02 5.05 7.07 q36.37 33.34 84.86 4.04 l216.19 -124.26 q21.21 -22.22 18.18 -50.51 l0 -332.36 l1.01 -11.12 q4.04 -26.26 22.23 -45.46 l292.96 -251.54 l9.1 -10.11 q43.44 -54.55 14.14 -81.82 q-28.29 -27.28 -61.62 -27.28 ZM832.38 119.21 l-277.81 235.38 l0 377.82 l-96.98 55.57 l0 -433.39 l-275.8 -235.38 l650.59 0 Z"
+            />
+        </svg>
+    </div>
+</template>

package/src/StkTable/custom-cells/FilterCell/createFilterCell.ts

@@ -1,120 +1,120 @@
-import { CustomHeaderCellProps, UniqKey } from '@/StkTable/types';
-import { computed, defineComponent, getCurrentInstance, h, markRaw, ref, VNode, watch } from 'vue';
-import Filter from './Filter.vue';
-import type { CreateFilterCellOption, FilterComponentConfig, FilterOption, FilterStatus } from './types.js';
-
-/**
- * 从数据源提取筛选选项
- *
- * @param dataSource 数据源
- * @param columnKey 列名
- * @returns 筛选选项数组
- */
-function extractFilterOptions(dataSource: any[], columnKey: string): FilterOption[] {
-    const uniqueValues = new Set<any>();
-
-    dataSource.forEach(row => {
-        const val = row[columnKey];
-        if (val !== undefined && val !== null) {
-            uniqueValues.add(val);
-        }
-    });
-
-    return Array.from(uniqueValues).map(value => ({
-        label: String(value),
-        value,
-    }));
-}
-
-/**
- * 表格筛选功能工厂函数 (BETA)
- *
- * Q: 为什么要通过 stkTableInstance 来设置筛选状态，而不是直接在 createFilterCell 中传入dataSource。
- * A: 因为 createFilterCell 不一定有 dataSource的上下文，它可能在独立的js/ts 中使用，而非Vue SFC。而通过 stkTableInstance 可以获取到 dataSource
- * @beta
- * @returns
- */
-export function createFilterCell(option?: CreateFilterCellOption) {
-    const filterStatus = ref<Record<UniqKey, FilterStatus>>({});
-
-    function FilterComponent(config?: FilterComponentConfig, component?: VNode | ((props: CustomHeaderCellProps<any>) => VNode)) {
-        return markRaw(
-            defineComponent({
-                // eslint-disable-next-line vue/require-prop-types
-                props: ['col', 'colIndex'],
-                setup(props: CustomHeaderCellProps<any>) {
-                    const colKey = props.col.dataIndex;
-
-                    const currentInstance = getCurrentInstance();
-                    /**
-                     * 查找最近的StkTable组件实例
-                     * @returns
-                     */
-                    function findStkTableInstance(curIns: any) {
-                        let current = curIns;
-                        while ((current = current.parent)) {
-                            if (current.type?.name === 'StkTable') {
-                                return current;
-                            }
-                        }
-                        return null;
-                    }
-                    const stkTableInstance = findStkTableInstance(currentInstance);
-                    // 从 StkTable 实例获取 theme
-                    const theme = computed(() => stkTableInstance?.props?.theme || 'light');
-                    const filterNumber = computed(() => {
-                        return filterStatus.value[colKey]?.value.length || 0;
-                    });
-
-                    // 自动从数据中提取筛选选项（懒计算，仅在下拉打开时触发）
-                    let cachedAutoOptions: FilterOption[] | null = null;
-                    // 数据源变化时清除缓存，下次打开下拉时重新计算
-                    watch(
-                        () => stkTableInstance?.props?.dataSource,
-                        () => {
-                            cachedAutoOptions = null;
-                        },
-                    );
-                    function getAutoOptions(): FilterOption[] {
-                        if (!config?.autoOptions) return [];
-                        if (cachedAutoOptions) return cachedAutoOptions;
-                        const dataSource: any[] = stkTableInstance?.props?.dataSource || [];
-                        cachedAutoOptions = extractFilterOptions(dataSource, colKey);
-                        return cachedAutoOptions;
-                    }
-
-                    // 优先使用 FilterComponent 传入的 options，其次使用自动提取的选项
-                    function getResolvedOptions(): FilterOption[] {
-                        return config?.options ?? getAutoOptions();
-                    }
-
-                    function handleChange(value: FilterOption['value'][]) {
-                        filterStatus.value[colKey] = {
-                            value,
-                            filter: config?.filter ?? filterStatus.value[colKey]?.filter,
-                        };
-                        option?.onChange?.({ colKey, status: filterStatus.value[colKey] });
-                        stkTableInstance?.exposed?.setFilter(filterStatus.value, option);
-                    }
-                    return () =>
-                        h(
-                            Filter,
-                            {
-                                ...props,
-                                theme: theme.value,
-                                active: filterNumber.value > 0,
-                                getOptions: getResolvedOptions,
-                                onChange: handleChange,
-                            },
-                            component ? { default: () => [h(component, props)] } : undefined,
-                        );
-                },
-            }),
-        );
-    }
-
-    return {
-        Filter: FilterComponent,
-        filterStatus,
-    };
-}
+import { CustomHeaderCellProps, UniqKey } from '@/StkTable/types';
+import { computed, defineComponent, getCurrentInstance, h, markRaw, ref, VNode, watch } from 'vue';
+import Filter from './Filter.vue';
+import type { CreateFilterCellOption, FilterComponentConfig, FilterOption, FilterStatus } from './types.js';
+
+/**
+ * 从数据源提取筛选选项
+ *
+ * @param dataSource 数据源
+ * @param columnKey 列名
+ * @returns 筛选选项数组
+ */
+function extractFilterOptions(dataSource: any[], columnKey: string): FilterOption[] {
+    const uniqueValues = new Set<any>();
+
+    dataSource.forEach(row => {
+        const val = row[columnKey];
+        if (val !== undefined && val !== null) {
+            uniqueValues.add(val);
+        }
+    });
+
+    return Array.from(uniqueValues).map(value => ({
+        label: String(value),
+        value,
+    }));
+}
+
+/**
+ * 表格筛选功能工厂函数 (BETA)
+ *
+ * Q: 为什么要通过 stkTableInstance 来设置筛选状态，而不是直接在 createFilterCell 中传入dataSource。
+ * A: 因为 createFilterCell 不一定有 dataSource的上下文，它可能在独立的js/ts 中使用，而非Vue SFC。而通过 stkTableInstance 可以获取到 dataSource
+ * @beta
+ * @returns
+ */
+export function createFilterCell(option?: CreateFilterCellOption) {
+    const filterStatus = ref<Record<UniqKey, FilterStatus>>({});
+
+    function FilterComponent(config?: FilterComponentConfig, component?: VNode | ((props: CustomHeaderCellProps<any>) => VNode)) {
+        return markRaw(
+            defineComponent({
+                // eslint-disable-next-line vue/require-prop-types
+                props: ['col', 'colIndex'],
+                setup(props: CustomHeaderCellProps<any>) {
+                    const colKey = props.col.dataIndex;
+
+                    const currentInstance = getCurrentInstance();
+                    /**
+                     * 查找最近的StkTable组件实例
+                     * @returns
+                     */
+                    function findStkTableInstance(curIns: any) {
+                        let current = curIns;
+                        while ((current = current.parent)) {
+                            if (current.type?.name === 'StkTable') {
+                                return current;
+                            }
+                        }
+                        return null;
+                    }
+                    const stkTableInstance = findStkTableInstance(currentInstance);
+                    // 从 StkTable 实例获取 theme
+                    const theme = computed(() => stkTableInstance?.props?.theme || 'light');
+                    const filterNumber = computed(() => {
+                        return filterStatus.value[colKey]?.value.length || 0;
+                    });
+
+                    // 自动从数据中提取筛选选项（懒计算，仅在下拉打开时触发）
+                    let cachedAutoOptions: FilterOption[] | null = null;
+                    // 数据源变化时清除缓存，下次打开下拉时重新计算
+                    watch(
+                        () => stkTableInstance?.props?.dataSource,
+                        () => {
+                            cachedAutoOptions = null;
+                        },
+                    );
+                    function getAutoOptions(): FilterOption[] {
+                        if (!config?.autoOptions) return [];
+                        if (cachedAutoOptions) return cachedAutoOptions;
+                        const dataSource: any[] = stkTableInstance?.props?.dataSource || [];
+                        cachedAutoOptions = extractFilterOptions(dataSource, colKey);
+                        return cachedAutoOptions;
+                    }
+
+                    // 优先使用 FilterComponent 传入的 options，其次使用自动提取的选项
+                    function getResolvedOptions(): FilterOption[] {
+                        return config?.options ?? getAutoOptions();
+                    }
+
+                    function handleChange(value: FilterOption['value'][]) {
+                        filterStatus.value[colKey] = {
+                            value,
+                            filter: config?.filter ?? filterStatus.value[colKey]?.filter,
+                        };
+                        option?.onChange?.({ colKey, status: filterStatus.value[colKey] });
+                        stkTableInstance?.exposed?.setFilter(filterStatus.value, option);
+                    }
+                    return () =>
+                        h(
+                            Filter,
+                            {
+                                ...props,
+                                theme: theme.value,
+                                active: filterNumber.value > 0,
+                                getOptions: getResolvedOptions,
+                                onChange: handleChange,
+                            },
+                            component ? { default: () => [h(component, props)] } : undefined,
+                        );
+                },
+            }),
+        );
+    }
+
+    return {
+        Filter: FilterComponent,
+        filterStatus,
+    };
+}

package/src/StkTable/custom-cells/FilterCell/index.ts

@@ -1,6 +1,6 @@
-// 导出Filter组件相关模块
-export { createFilterCell } from './createFilterCell';
-export type { FilterStatus, CreateFilterCellOption } from './types';
-// export { default as Filter } from './Filter.vue';
-
-import './Filter.less';
+// 导出Filter组件相关模块
+export { createFilterCell } from './createFilterCell';
+export type { FilterStatus, CreateFilterCellOption } from './types';
+// export { default as Filter } from './Filter.vue';
+
+import './Filter.less';

package/src/StkTable/custom-cells/FilterCell/types.ts

@@ -1,43 +1,43 @@
-// Filter组件相关类型定义
-
-import { UniqKey } from '@/StkTable/types';
-
-/** 筛选选项接口 */
-export interface FilterOption {
-    label: string;
-    value: any;
-    selected?: boolean;
-}
-
-/** 筛选状态接口 */
-export interface FilterStatus {
-    value: FilterOption['value'][];
-    /**
-     * 自定义筛选逻辑函数。
-     * 当选中筛选条件时，根据此函数的返回值决定记录是否保留。
-     * @param row 当前行数据
-     * @param cellValue 当前单元格的值（即 row[columnKey]）
-     * @param filterValues 当前选中的筛选值数组
-     * @returns 返回 true 保留记录，false 过滤掉
-     */
-    filter?: (args: { row: any; cellValue: any; filterValues: FilterOption['value'][] }) => boolean;
-}
-
-/** FilterComponent 配置接口 */
-export interface FilterComponentConfig {
-    options?: FilterOption[];
-    filter?: FilterStatus['filter'];
-    /**
-     * 是否自动从数据中提取筛选选项，默认 false
-     * en: Whether to automatically extract filter options from the data source
-     */
-    autoOptions?: boolean;
-}
-
-/** createFilter选项接口 */
-export interface CreateFilterCellOption {
-    /** 是否远程筛选 */
-    remote?: boolean;
-    /** 筛选状态改变时触发 */
-    onChange?: (data: { colKey: UniqKey; status: FilterStatus }) => void;
-}
+// Filter组件相关类型定义
+
+import { UniqKey } from '@/StkTable/types';
+
+/** 筛选选项接口 */
+export interface FilterOption {
+    label: string;
+    value: any;
+    selected?: boolean;
+}
+
+/** 筛选状态接口 */
+export interface FilterStatus {
+    value: FilterOption['value'][];
+    /**
+     * 自定义筛选逻辑函数。
+     * 当选中筛选条件时，根据此函数的返回值决定记录是否保留。
+     * @param row 当前行数据
+     * @param cellValue 当前单元格的值（即 row[columnKey]）
+     * @param filterValues 当前选中的筛选值数组
+     * @returns 返回 true 保留记录，false 过滤掉
+     */
+    filter?: (args: { row: any; cellValue: any; filterValues: FilterOption['value'][] }) => boolean;
+}
+
+/** FilterComponent 配置接口 */
+export interface FilterComponentConfig {
+    options?: FilterOption[];
+    filter?: FilterStatus['filter'];
+    /**
+     * 是否自动从数据中提取筛选选项，默认 false
+     * en: Whether to automatically extract filter options from the data source
+     */
+    autoOptions?: boolean;
+}
+
+/** createFilter选项接口 */
+export interface CreateFilterCellOption {
+    /** 是否远程筛选 */
+    remote?: boolean;
+    /** 筛选状态改变时触发 */
+    onChange?: (data: { colKey: UniqKey; status: FilterStatus }) => void;
+}

package/src/StkTable/custom-cells/NumberCell/createNumberCell.ts

@@ -1,43 +1,43 @@
-import type { CustomCellProps } from '../../types';
-import { defineComponent, h, markRaw } from 'vue';
-import { formatNumber, type FormatNumberOptions } from '../utils/formatNumber';
-
-/** createNumberCell 配置选项（等同于格式化选项） */
-export interface CreateNumberCellOptions extends FormatNumberOptions {}
-
-/**
- * 数字格式化单元格工厂函数
- *
- * 纯展示型单元格：将 `cellValue` 经 {@link formatNumber} 格式化为文本。
- * 数字对齐请在列配置上设置 `align: 'right'`。
- *
- * @param options 格式化选项
- * @returns `NumberCell` 组件构造函数，使用时需调用一次：`customCell: NumberCell()`
- *
- * @example
- * ```ts
- * const { NumberCell } = createNumberCell({ decimals: 2 });
- * const NumberCellComp = NumberCell();
- * const columns = [
- *   { title: '现价', dataIndex: 'price', align: 'right', customCell: NumberCellComp },
- * ];
- * ```
- */
-export function createNumberCell(options?: CreateNumberCellOptions) {
-    /** 单元格组件 - 用于 customCell */
-    function NumberCell() {
-        return markRaw(
-            defineComponent({
-                // eslint-disable-next-line vue/require-prop-types
-                props: ['row', 'col', 'cellValue', 'rowIndex', 'colIndex', 'expanded', 'treeExpanded'],
-                setup(props: CustomCellProps<any>) {
-                    return () => h('span', { class: 'stk-number-cell' }, formatNumber(props.cellValue, options));
-                },
-            }),
-        );
-    }
-
-    return {
-        NumberCell,
-    };
-}
+import type { CustomCellProps } from '../../types';
+import { defineComponent, h, markRaw } from 'vue';
+import { formatNumber, type FormatNumberOptions } from '../utils/formatNumber';
+
+/** createNumberCell 配置选项（等同于格式化选项） */
+export interface CreateNumberCellOptions extends FormatNumberOptions {}
+
+/**
+ * 数字格式化单元格工厂函数
+ *
+ * 纯展示型单元格：将 `cellValue` 经 {@link formatNumber} 格式化为文本。
+ * 数字对齐请在列配置上设置 `align: 'right'`。
+ *
+ * @param options 格式化选项
+ * @returns `NumberCell` 组件构造函数，使用时需调用一次：`customCell: NumberCell()`
+ *
+ * @example
+ * ```ts
+ * const { NumberCell } = createNumberCell({ decimals: 2 });
+ * const NumberCellComp = NumberCell();
+ * const columns = [
+ *   { title: '现价', dataIndex: 'price', align: 'right', customCell: NumberCellComp },
+ * ];
+ * ```
+ */
+export function createNumberCell(options?: CreateNumberCellOptions) {
+    /** 单元格组件 - 用于 customCell */
+    function NumberCell() {
+        return markRaw(
+            defineComponent({
+                // eslint-disable-next-line vue/require-prop-types
+                props: ['row', 'col', 'cellValue', 'rowIndex', 'colIndex', 'expanded', 'treeExpanded'],
+                setup(props: CustomCellProps<any>) {
+                    return () => h('span', { class: 'stk-number-cell' }, formatNumber(props.cellValue, options));
+                },
+            }),
+        );
+    }
+
+    return {
+        NumberCell,
+    };
+}

package/src/StkTable/custom-cells/NumberCell/index.ts

@@ -1,2 +1,2 @@
-export { createNumberCell } from './createNumberCell';
-export type { CreateNumberCellOptions } from './createNumberCell';
+export { createNumberCell } from './createNumberCell';
+export type { CreateNumberCellOptions } from './createNumberCell';