stk-table-vue 1.2.4 → 1.2.6

package/src/StkTable/components/DragHandle.vue

@@ -1,9 +1,9 @@
-<template>
-    <span class="drag-row-handle" draggable="true">
-        <svg viewBox="0 0 1024 1024" width="20" height="20" fill="currentColor">
-            <path
-                d="M640 853.3a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m-256 0a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m256-256a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m-256 0a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m256-256a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3zM384 341.3a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z"
-            ></path>
-        </svg>
-    </span>
-</template>
+<template>
+    <span class="drag-row-handle" draggable="true">
+        <svg viewBox="0 0 1024 1024" width="20" height="20" fill="currentColor">
+            <path
+                d="M640 853.3a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m-256 0a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m256-256a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m-256 0a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z m256-256a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3zM384 341.3a85.3 85.3 0 1 1 85.3-85.3 85.3 85.3 0 0 1-85.3 85.3z"
+            ></path>
+        </svg>
+    </span>
+</template>

package/src/StkTable/components/SortIcon.vue

@@ -1,6 +1,6 @@
-<template>
-    <svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 16 16">
-        <polygon class="arrow-up" fill="#757699" points="8 2 4.8 6 11.2 6"></polygon>
-        <polygon class="arrow-down" transform="translate(8, 12) rotate(-180) translate(-8, -12) " points="8 10 4.8 14 11.2 14"></polygon>
-    </svg>
-</template>
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 16 16">
+        <polygon class="arrow-up" fill="#757699" points="8 2 4.8 6 11.2 6"></polygon>
+        <polygon class="arrow-down" transform="translate(8, 12) rotate(-180) translate(-8, -12) " points="8 10 4.8 14 11.2 14"></polygon>
+    </svg>
+</template>

package/src/StkTable/components/TreeNodeCell.vue

@@ -1,19 +1,19 @@
-<template>
-    <div :title="row[col.dataIndex] || ''" :style="row.__T_LV__ ? `padding-left:${row.__T_LV__ * 16}px` : ''">
-        <TriangleIcon v-if="row.children !== void 0" @click="emit('click')" />
-        <span :style="!row.children ? 'padding-left: 16px;' : null">
-            {{ row[col.dataIndex] ?? '' }}
-        </span>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { PrivateStkTableColumn } from '../types';
-import TriangleIcon from './TriangleIcon.vue';
-
-defineProps<{
-    col: PrivateStkTableColumn<any>;
-    row: any;
-}>();
-const emit = defineEmits(['click']);
-</script>
+<template>
+    <div :title="row[col.dataIndex] || ''" :style="row.__T_LV__ ? `padding-left:${row.__T_LV__ * 16}px` : ''">
+        <TriangleIcon v-if="row.children !== void 0" @click="emit('click')" />
+        <span :style="!row.children ? 'padding-left: 16px;' : null">
+            {{ row[col.dataIndex] ?? '' }}
+        </span>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { PrivateStkTableColumn } from '../types';
+import TriangleIcon from './TriangleIcon.vue';
+
+defineProps<{
+    col: PrivateStkTableColumn<any>;
+    row: any;
+}>();
+const emit = defineEmits(['click']);
+</script>

package/src/StkTable/components/TriangleIcon.vue

@@ -1,3 +1,3 @@
-<template>
-    <div class="stk-fold-icon"></div>
-</template>
+<template>
+    <div class="stk-fold-icon"></div>
+</template>

package/src/StkTable/const.ts

@@ -1,50 +1,50 @@
-import { RowActiveOption, SortConfig } from './types';
-import { getBrowsersVersion } from './utils';
-
-export const DEFAULT_COL_WIDTH = 100;
-
-export const DEFAULT_TABLE_HEIGHT = 100;
-export const DEFAULT_TABLE_WIDTH = 200;
-export const DEFAULT_ROW_HEIGHT = 28;
-
-/** highlight background */
-export const HIGHLIGHT_COLOR = {
-    light: { from: '#71a2fd', to: '#fff' },
-    dark: { from: '#1e4c99', to: '#181c21' },
-};
-export const HIGHLIGHT_DURATION = 2000;
-
-/** highlight change frequency 1000/30 -> 30FPS */
-// export const HIGHLIGHT_FREQ = 1000 / 30;
-
-export const HIGHLIGHT_ROW_CLASS = 'highlight-row';
-export const HIGHLIGHT_CELL_CLASS = 'highlight-cell';
-
-const _chromeVersion = getBrowsersVersion('chrome');
-const _firefoxVersion = getBrowsersVersion('firefox');
-
-/** legacy sticky compatible mode  */
-export const IS_LEGACY_MODE = _chromeVersion < 56 || _firefoxVersion < 59;
-
-/** default props.smoothDefault */
-export const DEFAULT_SMOOTH_SCROLL = _chromeVersion < 85;
-
-export const STK_ID_PREFIX = 'stk';
-
-/** expanded row key prefix */
-export const EXPANDED_ROW_KEY_PREFIX = 'expanded-';
-
-/** cell key split str */
-export const CELL_KEY_SEPARATE = '--';
-
-export const DEFAULT_SORT_CONFIG = {
-    emptyToBottom: false,
-    stringLocaleCompare: false,
-    sortChildren: false,
-} satisfies SortConfig<any>;
-
-export const DEFAULT_ROW_ACTIVE_CONFIG: Required<RowActiveOption<any>> = {
-    enabled: true,
-    disabled: () => false,
-    revokable: true,
-};
+import { RowActiveOption, SortConfig } from './types';
+import { getBrowsersVersion } from './utils';
+
+export const DEFAULT_COL_WIDTH = 100;
+
+export const DEFAULT_TABLE_HEIGHT = 100;
+export const DEFAULT_TABLE_WIDTH = 200;
+export const DEFAULT_ROW_HEIGHT = 28;
+
+/** highlight background */
+export const HIGHLIGHT_COLOR = {
+    light: { from: '#71a2fd', to: '#fff' },
+    dark: { from: '#1e4c99', to: '#181c21' },
+};
+export const HIGHLIGHT_DURATION = 2000;
+
+/** highlight change frequency 1000/30 -> 30FPS */
+// export const HIGHLIGHT_FREQ = 1000 / 30;
+
+export const HIGHLIGHT_ROW_CLASS = 'highlight-row';
+export const HIGHLIGHT_CELL_CLASS = 'highlight-cell';
+
+const _chromeVersion = getBrowsersVersion('chrome');
+const _firefoxVersion = getBrowsersVersion('firefox');
+
+/** legacy sticky compatible mode  */
+export const IS_LEGACY_MODE = _chromeVersion < 56 || _firefoxVersion < 59;
+
+/** default props.smoothDefault */
+export const DEFAULT_SMOOTH_SCROLL = _chromeVersion < 85;
+
+export const STK_ID_PREFIX = 'stk';
+
+/** expanded row key prefix */
+export const EXPANDED_ROW_KEY_PREFIX = 'expanded-';
+
+/** cell key split str */
+export const CELL_KEY_SEPARATE = '--';
+
+export const DEFAULT_SORT_CONFIG = {
+    emptyToBottom: false,
+    stringLocaleCompare: false,
+    sortChildren: false,
+} satisfies SortConfig<any>;
+
+export const DEFAULT_ROW_ACTIVE_CONFIG: Required<RowActiveOption<any>> = {
+    enabled: true,
+    disabled: () => false,
+    revokable: true,
+};

package/src/StkTable/custom-cells/ChangeCell/ChangeCell.less

@@ -1,34 +1,34 @@
-.stk-change-cell {
-    // 默认（浅色）配色：涨红跌绿为 A 股习惯，颜色方向由组件按 colorReverse 决定
-    --stk-change-red: #e02020;
-    --stk-change-green: #00a870;
-    --stk-change-flat: #666;
-
-    display: inline-flex;
-    align-items: center;
-    gap: 2px;
-
-    &--red {
-        color: var(--stk-change-red);
-    }
-
-    &--green {
-        color: var(--stk-change-green);
-    }
-
-    &--flat {
-        color: var(--stk-change-flat);
-    }
-
-    &__arrow {
-        font-size: 0.85em;
-        line-height: 1;
-    }
-}
-
-// 暗色主题下适当提亮，跟随表格根节点 .stk-table.dark
-.stk-table.dark .stk-change-cell {
-    --stk-change-red: #ff5c5c;
-    --stk-change-green: #26c281;
-    --stk-change-flat: #aaa;
-}
+.stk-change-cell {
+    // 默认（浅色）配色：涨红跌绿为 A 股习惯，颜色方向由组件按 colorReverse 决定
+    --stk-change-red: #e02020;
+    --stk-change-green: #00a870;
+    --stk-change-flat: #666;
+
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+
+    &--red {
+        color: var(--stk-change-red);
+    }
+
+    &--green {
+        color: var(--stk-change-green);
+    }
+
+    &--flat {
+        color: var(--stk-change-flat);
+    }
+
+    &__arrow {
+        font-size: 0.85em;
+        line-height: 1;
+    }
+}
+
+// 暗色主题下适当提亮，跟随表格根节点 .stk-table.dark
+.stk-table.dark .stk-change-cell {
+    --stk-change-red: #ff5c5c;
+    --stk-change-green: #26c281;
+    --stk-change-flat: #aaa;
+}

package/src/StkTable/custom-cells/ChangeCell/createChangeCell.ts

@@ -1,90 +1,90 @@
-import type { CustomCellProps } from '../../types';
-import { defineComponent, h, markRaw } from 'vue';
-import { formatNumber, type FormatNumberOptions } from '../utils/formatNumber';
-
-/** createChangeCell 配置选项 */
-export interface CreateChangeCellOptions extends FormatNumberOptions {
-    /** 涨跌颜色是否反转：false=A股(涨红跌绿，默认)，true=国际(涨绿跌红) */
-    colorReverse?: boolean;
-    /** 是否显示涨跌箭头 ▲/▼，默认 false */
-    arrow?: boolean;
-    /** 自定义上涨颜色（覆盖默认配色，传入后不受 colorReverse 影响） */
-    riseColor?: string;
-    /** 自定义下跌颜色 */
-    fallColor?: string;
-    /** 自定义平盘颜色 */
-    flatColor?: string;
-}
-
-/** 涨跌方向：涨 / 跌 / 平（含空值） */
-type ChangeDir = 'rise' | 'fall' | 'flat';
-
-/** 根据原始值判断涨跌方向 */
-function resolveDir(rawValue: any): ChangeDir {
-    const num = rawValue === '' || rawValue == null ? NaN : Number(rawValue);
-    if (Number.isNaN(num) || num === 0) return 'flat';
-    return num > 0 ? 'rise' : 'fall';
-}
-
-/**
- * 涨跌单元格工厂函数
- *
- * 在 {@link formatNumber} 的基础上叠加涨跌染色与箭头。染色按 `cellValue` 正负判断，
- * 颜色方向可通过 `colorReverse` 切换（A股 / 国际），也可用 `riseColor` 等自定义。
- * 数字对齐请在列配置上设置 `align: 'right'`。
- *
- * @param options 格式化 + 染色/箭头选项
- * @returns `ChangeCell` 组件构造函数，使用时需调用一次：`customCell: ChangeCell()`
- *
- * @example
- * ```ts
- * const { ChangeCell } = createChangeCell({ decimals: 2, showSign: true, arrow: true });
- * const ChangeCellComp = ChangeCell();
- * const columns = [
- *   { title: '涨跌额', dataIndex: 'change', align: 'right', customCell: ChangeCellComp },
- * ];
- * ```
- */
-export function createChangeCell(options: CreateChangeCellOptions = {}) {
-    const { colorReverse = false, arrow = false, riseColor, fallColor, flatColor } = options;
-
-    /** 单元格组件 - 用于 customCell */
-    function ChangeCell() {
-        return markRaw(
-            defineComponent({
-                // eslint-disable-next-line vue/require-prop-types
-                props: ['row', 'col', 'cellValue', 'rowIndex', 'colIndex', 'expanded', 'treeExpanded'],
-                setup(props: CustomCellProps<any>) {
-                    return () => {
-                        const raw = props.cellValue;
-                        const dir = resolveDir(raw);
-
-                        // 颜色 class：涨=红/跌=绿（colorReverse 时互换），平=中性
-                        let colorClass = 'stk-change-cell--flat';
-                        if (dir === 'rise') colorClass = colorReverse ? 'stk-change-cell--green' : 'stk-change-cell--red';
-                        else if (dir === 'fall') colorClass = colorReverse ? 'stk-change-cell--red' : 'stk-change-cell--green';
-
-                        // 自定义颜色（若传）直接内联覆盖
-                        const customColor = dir === 'rise' ? riseColor : dir === 'fall' ? fallColor : flatColor;
-
-                        // 箭头：涨 ▲ / 跌 ▼，平及空值不显示
-                        const arrowChar = arrow && dir !== 'flat' ? (dir === 'rise' ? '▲' : '▼') : ''; // TODO: 支持自定义箭头
-
-                        return h(
-                            'span',
-                            {
-                                class: ['stk-change-cell', colorClass],
-                                style: customColor ? { color: customColor } : undefined,
-                            },
-                            [arrowChar ? h('span', { class: 'stk-change-cell__arrow' }, arrowChar) : null, formatNumber(raw, options)],
-                        );
-                    };
-                },
-            }),
-        );
-    }
-
-    return {
-        ChangeCell,
-    };
-}
+import type { CustomCellProps } from '../../types';
+import { defineComponent, h, markRaw } from 'vue';
+import { formatNumber, type FormatNumberOptions } from '../utils/formatNumber';
+
+/** createChangeCell 配置选项 */
+export interface CreateChangeCellOptions extends FormatNumberOptions {
+    /** 涨跌颜色是否反转：false=A股(涨红跌绿，默认)，true=国际(涨绿跌红) */
+    colorReverse?: boolean;
+    /** 是否显示涨跌箭头 ▲/▼，默认 false */
+    arrow?: boolean;
+    /** 自定义上涨颜色（覆盖默认配色，传入后不受 colorReverse 影响） */
+    riseColor?: string;
+    /** 自定义下跌颜色 */
+    fallColor?: string;
+    /** 自定义平盘颜色 */
+    flatColor?: string;
+}
+
+/** 涨跌方向：涨 / 跌 / 平（含空值） */
+type ChangeDir = 'rise' | 'fall' | 'flat';
+
+/** 根据原始值判断涨跌方向 */
+function resolveDir(rawValue: any): ChangeDir {
+    const num = rawValue === '' || rawValue == null ? NaN : Number(rawValue);
+    if (Number.isNaN(num) || num === 0) return 'flat';
+    return num > 0 ? 'rise' : 'fall';
+}
+
+/**
+ * 涨跌单元格工厂函数
+ *
+ * 在 {@link formatNumber} 的基础上叠加涨跌染色与箭头。染色按 `cellValue` 正负判断，
+ * 颜色方向可通过 `colorReverse` 切换（A股 / 国际），也可用 `riseColor` 等自定义。
+ * 数字对齐请在列配置上设置 `align: 'right'`。
+ *
+ * @param options 格式化 + 染色/箭头选项
+ * @returns `ChangeCell` 组件构造函数，使用时需调用一次：`customCell: ChangeCell()`
+ *
+ * @example
+ * ```ts
+ * const { ChangeCell } = createChangeCell({ decimals: 2, showSign: true, arrow: true });
+ * const ChangeCellComp = ChangeCell();
+ * const columns = [
+ *   { title: '涨跌额', dataIndex: 'change', align: 'right', customCell: ChangeCellComp },
+ * ];
+ * ```
+ */
+export function createChangeCell(options: CreateChangeCellOptions = {}) {
+    const { colorReverse = false, arrow = false, riseColor, fallColor, flatColor } = options;
+
+    /** 单元格组件 - 用于 customCell */
+    function ChangeCell() {
+        return markRaw(
+            defineComponent({
+                // eslint-disable-next-line vue/require-prop-types
+                props: ['row', 'col', 'cellValue', 'rowIndex', 'colIndex', 'expanded', 'treeExpanded'],
+                setup(props: CustomCellProps<any>) {
+                    return () => {
+                        const raw = props.cellValue;
+                        const dir = resolveDir(raw);
+
+                        // 颜色 class：涨=红/跌=绿（colorReverse 时互换），平=中性
+                        let colorClass = 'stk-change-cell--flat';
+                        if (dir === 'rise') colorClass = colorReverse ? 'stk-change-cell--green' : 'stk-change-cell--red';
+                        else if (dir === 'fall') colorClass = colorReverse ? 'stk-change-cell--red' : 'stk-change-cell--green';
+
+                        // 自定义颜色（若传）直接内联覆盖
+                        const customColor = dir === 'rise' ? riseColor : dir === 'fall' ? fallColor : flatColor;
+
+                        // 箭头：涨 ▲ / 跌 ▼，平及空值不显示
+                        const arrowChar = arrow && dir !== 'flat' ? (dir === 'rise' ? '▲' : '▼') : ''; // TODO: 支持自定义箭头
+
+                        return h(
+                            'span',
+                            {
+                                class: ['stk-change-cell', colorClass],
+                                style: customColor ? { color: customColor } : undefined,
+                            },
+                            [arrowChar ? h('span', { class: 'stk-change-cell__arrow' }, arrowChar) : null, formatNumber(raw, options)],
+                        );
+                    };
+                },
+            }),
+        );
+    }
+
+    return {
+        ChangeCell,
+    };
+}

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

@@ -1,4 +1,4 @@
-export { createChangeCell } from './createChangeCell';
-export type { CreateChangeCellOptions } from './createChangeCell';
-
-import './ChangeCell.less';
+export { createChangeCell } from './createChangeCell';
+export type { CreateChangeCellOptions } from './createChangeCell';
+
+import './ChangeCell.less';

package/src/StkTable/custom-cells/CheckboxCell/CheckboxCell.less

@@ -1,14 +1,14 @@
-.stk-checkbox-cell {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-
-    .stk-checkbox-native {
-        width: 16px;
-        height: 16px;
-        cursor: pointer;
-        vertical-align: middle;
-    }
-}
+.stk-checkbox-cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+
+    .stk-checkbox-native {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+        vertical-align: middle;
+    }
+}

package/src/StkTable/custom-cells/CheckboxCell/CheckboxCell.vue

@@ -1,56 +1,56 @@
-<template>
-    <div class="stk-checkbox-cell">
-        <component
-            :is="customComponent"
-            v-if="customComponent"
-            :model-value="checked"
-            :checked="checked"
-            :indeterminate="indeterminate"
-            @update:model-value="handleChange"
-            @update:checked="handleChange"
-            @change="handleChange"
-            @click.stop
-        />
-        <input
-            v-else
-            type="checkbox"
-            :checked="checked"
-            :indeterminate.prop="indeterminate"
-            class="stk-checkbox-native"
-            @change="handleChange"
-            @click.stop
-        />
-    </div>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps<{
-    /** 当前是否选中 */
-    checked?: boolean;
-    /** 是否半选状态 */
-    indeterminate?: boolean;
-    /** 自定义 checkbox 组件（如 Element Plus / Ant Design Vue 的 Checkbox） */
-    customComponent?: any;
-}>();
-
-const emit = defineEmits<{
-    (e: 'change', checked: boolean): void;
-}>();
-
-/** 防重保护：部分 UI 库（Element Plus / Arco Design）会同时触发多个事件 */
-let _lastValue: boolean | undefined;
-
-function handleChange(e: any) {
-    let checked: boolean;
-    if (typeof e === 'boolean') {
-        checked = e;
-    } else if (e?.target?.checked !== undefined) {
-        checked = e.target.checked;
-    } else {
-        checked = !!e;
-    }
-    if (checked === _lastValue) return;
-    _lastValue = checked;
-    emit('change', checked);
-}
-</script>
+<template>
+    <div class="stk-checkbox-cell">
+        <component
+            :is="customComponent"
+            v-if="customComponent"
+            :model-value="checked"
+            :checked="checked"
+            :indeterminate="indeterminate"
+            @update:model-value="handleChange"
+            @update:checked="handleChange"
+            @change="handleChange"
+            @click.stop
+        />
+        <input
+            v-else
+            type="checkbox"
+            :checked="checked"
+            :indeterminate.prop="indeterminate"
+            class="stk-checkbox-native"
+            @change="handleChange"
+            @click.stop
+        />
+    </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+    /** 当前是否选中 */
+    checked?: boolean;
+    /** 是否半选状态 */
+    indeterminate?: boolean;
+    /** 自定义 checkbox 组件（如 Element Plus / Ant Design Vue 的 Checkbox） */
+    customComponent?: any;
+}>();
+
+const emit = defineEmits<{
+    (e: 'change', checked: boolean): void;
+}>();
+
+/** 防重保护：部分 UI 库（Element Plus / Arco Design）会同时触发多个事件 */
+let _lastValue: boolean | undefined;
+
+function handleChange(e: any) {
+    let checked: boolean;
+    if (typeof e === 'boolean') {
+        checked = e;
+    } else if (e?.target?.checked !== undefined) {
+        checked = e.target.checked;
+    } else {
+        checked = !!e;
+    }
+    if (checked === _lastValue) return;
+    _lastValue = checked;
+    emit('change', checked);
+}
+</script>