stk-table-vue 1.2.4 → 1.2.6

package/src/StkTable/custom-cells/FilterCell/Dropdown/index.vue

@@ -1,186 +1,186 @@
-<script setup lang="ts">
-import { StkTableColumn } from '@/StkTable/types';
-import { h, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
-import StkTable from '../../../StkTable.vue';
-import type { FilterOption } from '../types.js';
-
-const theme = ref<'light' | 'dark'>('light');
-const checkedTempValueSet = reactive<Set<FilterOption['value']>>(new Set());
-
-const columns = ref<StkTableColumn<FilterOption>[]>([
-    {
-        title: '',
-        dataIndex: 'value',
-        width: 30,
-        className: 'stk-filter-dropdown-checkbox',
-        customCell: ({ row }) =>
-            h('input', {
-                type: 'checkbox',
-                checked: checkedTempValueSet.has(row.value),
-            }),
-    },
-    { title: '', dataIndex: 'label' },
-]);
-
-const visible = ref(false);
-const position = ref<{ x: number; y: number }>({ x: 0, y: 0 });
-const options = ref<FilterOption[]>([]);
-
-const dropdownEl = ref<HTMLDivElement>();
-
-const DROPDOWN_DEFAULT_WIDTH = 300; // 默认宽度（用于首次计算）
-const DROPDOWN_DEFAULT_HEIGHT = 400; // 默认高度（用于首次计算）
-const PADDING = 6; // 与屏幕边缘的安全距离
-
-onMounted(() => {
-    document.addEventListener('click', handleClickOutside);
-});
-
-onUnmounted(() => {
-    document.removeEventListener('click', handleClickOutside);
-});
-
-let onConfirmFn: (values: FilterOption['value'][]) => void;
-
-function getDropdownSize() {
-    if (!dropdownEl.value) {
-        return [DROPDOWN_DEFAULT_WIDTH, DROPDOWN_DEFAULT_HEIGHT] as const;
-    }
-    const rect = dropdownEl.value.getBoundingClientRect();
-    return [rect.width || DROPDOWN_DEFAULT_WIDTH, rect.height || DROPDOWN_DEFAULT_HEIGHT] as const;
-}
-
-function calculatePosition(docPos: { x: number; y: number; height?: number }) {
-    // docPos 是相对于文档的坐标（已包含滚动偏移）
-    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-    const viewportWidth = document.documentElement.clientWidth;
-    const viewportHeight = document.documentElement.clientHeight;
-
-    const [dropdownWidth, dropdownHeight] = getDropdownSize();
-
-    let finalX = docPos.x;
-    let finalY = docPos.y;
-
-    // 检测是否超出右边界（相对于视口）
-    const relativeX = docPos.x - scrollLeft;
-    if (relativeX + dropdownWidth > viewportWidth - PADDING) {
-        finalX = viewportWidth - dropdownWidth - PADDING + scrollLeft;
-    }
-
-    // 检测是否超出下边界（相对于视口）
-    const relativeY = docPos.y - scrollTop;
-    if (relativeY + dropdownHeight > viewportHeight - PADDING) {
-        // 如果下方空间不足，尝试在上方显示
-        const triggerHeight = docPos.height || 30;
-        if (relativeY - triggerHeight >= dropdownHeight + PADDING) {
-            // 上方空间足够，在触发元素上方显示
-            finalY = docPos.y - triggerHeight - dropdownHeight - PADDING;
-        } else {
-            // 上方空间也不足，使用最大可用空间（从视口顶部开始）
-            finalY = PADDING + scrollTop;
-        }
-    }
-
-    // 确保不会超出左边界和上边界
-    finalX = Math.max(PADDING + scrollLeft, finalX);
-    finalY = Math.max(PADDING + scrollTop, finalY);
-
-    return { x: finalX, y: finalY };
-}
-
-async function show(pos: { x: number; y: number; height?: number }, opt: FilterOption[], onConfirm: (values: FilterOption['value'][]) => void) {
-    if (dropdownEl.value) {
-        dropdownEl.value.style.visibility = 'hidden';
-    }
-    visible.value = true;
-    options.value = opt || [];
-    initChecked();
-    onConfirmFn = onConfirm;
-    await nextTick();
-    position.value = calculatePosition(pos);
-    if (dropdownEl.value) {
-        dropdownEl.value.style.visibility = 'visible';
-    }
-}
-
-async function handleClickOutside(e: MouseEvent) {
-    if (!visible.value || dropdownEl.value?.contains(e.target as Node)) return;
-    hide();
-}
-
-function initChecked() {
-    options.value.forEach(opt => {
-        if (opt.selected) {
-            checkedTempValueSet.add(opt.value);
-        }
-    });
-}
-
-function updateChecked(checked: boolean, row: FilterOption) {
-    if (checked) {
-        checkedTempValueSet.add(row.value);
-    } else {
-        checkedTempValueSet.delete(row.value);
-    }
-}
-
-function confirm() {
-    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: MouseEvent, row: FilterOption) {
-    const selected = checkedTempValueSet.has(row.value);
-    updateChecked(!selected, row);
-}
-
-function setTheme(t: 'light' | 'dark') {
-    theme.value = t;
-}
-
-function handleClear() {
-    checkedTempValueSet.clear();
-    options.value.forEach(opt => (opt.selected = false));
-    onConfirmFn([]);
-    hide();
-}
-
-defineExpose({ visible, show, hide, setTheme });
-</script>
-<template>
-    <div
-        ref="dropdownEl"
-        class="stk-filter-dropdown"
-        :class="[`stk-filter-dropdown--${theme}`]"
-        :style="{
-            top: position.y + 'px',
-            left: position.x + 'px',
-            display: visible ? void 0 : 'none',
-        }"
-        @click.stop
-    >
-        <StkTable
-            row-key="id"
-            headless
-            virtual
-            no-data-full
-            :theme="theme"
-            :row-active="false"
-            :row-height="20"
-            :bordered="false"
-            :columns="columns"
-            :data-source="options"
-            @row-click="handleRowClick"
-        />
-        <footer>
-            <button @click="handleClear">↺</button>
-            <button @click="confirm">✓</button>
-        </footer>
-    </div>
-</template>
+<script setup lang="ts">
+import { StkTableColumn } from '@/StkTable/types';
+import { h, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
+import StkTable from '../../../StkTable.vue';
+import type { FilterOption } from '../types.js';
+
+const theme = ref<'light' | 'dark'>('light');
+const checkedTempValueSet = reactive<Set<FilterOption['value']>>(new Set());
+
+const columns = ref<StkTableColumn<FilterOption>[]>([
+    {
+        title: '',
+        dataIndex: 'value',
+        width: 30,
+        className: 'stk-filter-dropdown-checkbox',
+        customCell: ({ row }) =>
+            h('input', {
+                type: 'checkbox',
+                checked: checkedTempValueSet.has(row.value),
+            }),
+    },
+    { title: '', dataIndex: 'label' },
+]);
+
+const visible = ref(false);
+const position = ref<{ x: number; y: number }>({ x: 0, y: 0 });
+const options = ref<FilterOption[]>([]);
+
+const dropdownEl = ref<HTMLDivElement>();
+
+const DROPDOWN_DEFAULT_WIDTH = 300; // 默认宽度（用于首次计算）
+const DROPDOWN_DEFAULT_HEIGHT = 400; // 默认高度（用于首次计算）
+const PADDING = 6; // 与屏幕边缘的安全距离
+
+onMounted(() => {
+    document.addEventListener('click', handleClickOutside);
+});
+
+onUnmounted(() => {
+    document.removeEventListener('click', handleClickOutside);
+});
+
+let onConfirmFn: (values: FilterOption['value'][]) => void;
+
+function getDropdownSize() {
+    if (!dropdownEl.value) {
+        return [DROPDOWN_DEFAULT_WIDTH, DROPDOWN_DEFAULT_HEIGHT] as const;
+    }
+    const rect = dropdownEl.value.getBoundingClientRect();
+    return [rect.width || DROPDOWN_DEFAULT_WIDTH, rect.height || DROPDOWN_DEFAULT_HEIGHT] as const;
+}
+
+function calculatePosition(docPos: { x: number; y: number; height?: number }) {
+    // docPos 是相对于文档的坐标（已包含滚动偏移）
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+    const viewportWidth = document.documentElement.clientWidth;
+    const viewportHeight = document.documentElement.clientHeight;
+
+    const [dropdownWidth, dropdownHeight] = getDropdownSize();
+
+    let finalX = docPos.x;
+    let finalY = docPos.y;
+
+    // 检测是否超出右边界（相对于视口）
+    const relativeX = docPos.x - scrollLeft;
+    if (relativeX + dropdownWidth > viewportWidth - PADDING) {
+        finalX = viewportWidth - dropdownWidth - PADDING + scrollLeft;
+    }
+
+    // 检测是否超出下边界（相对于视口）
+    const relativeY = docPos.y - scrollTop;
+    if (relativeY + dropdownHeight > viewportHeight - PADDING) {
+        // 如果下方空间不足，尝试在上方显示
+        const triggerHeight = docPos.height || 30;
+        if (relativeY - triggerHeight >= dropdownHeight + PADDING) {
+            // 上方空间足够，在触发元素上方显示
+            finalY = docPos.y - triggerHeight - dropdownHeight - PADDING;
+        } else {
+            // 上方空间也不足，使用最大可用空间（从视口顶部开始）
+            finalY = PADDING + scrollTop;
+        }
+    }
+
+    // 确保不会超出左边界和上边界
+    finalX = Math.max(PADDING + scrollLeft, finalX);
+    finalY = Math.max(PADDING + scrollTop, finalY);
+
+    return { x: finalX, y: finalY };
+}
+
+async function show(pos: { x: number; y: number; height?: number }, opt: FilterOption[], onConfirm: (values: FilterOption['value'][]) => void) {
+    if (dropdownEl.value) {
+        dropdownEl.value.style.visibility = 'hidden';
+    }
+    visible.value = true;
+    options.value = opt || [];
+    initChecked();
+    onConfirmFn = onConfirm;
+    await nextTick();
+    position.value = calculatePosition(pos);
+    if (dropdownEl.value) {
+        dropdownEl.value.style.visibility = 'visible';
+    }
+}
+
+async function handleClickOutside(e: MouseEvent) {
+    if (!visible.value || dropdownEl.value?.contains(e.target as Node)) return;
+    hide();
+}
+
+function initChecked() {
+    options.value.forEach(opt => {
+        if (opt.selected) {
+            checkedTempValueSet.add(opt.value);
+        }
+    });
+}
+
+function updateChecked(checked: boolean, row: FilterOption) {
+    if (checked) {
+        checkedTempValueSet.add(row.value);
+    } else {
+        checkedTempValueSet.delete(row.value);
+    }
+}
+
+function confirm() {
+    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: MouseEvent, row: FilterOption) {
+    const selected = checkedTempValueSet.has(row.value);
+    updateChecked(!selected, row);
+}
+
+function setTheme(t: 'light' | 'dark') {
+    theme.value = t;
+}
+
+function handleClear() {
+    checkedTempValueSet.clear();
+    options.value.forEach(opt => (opt.selected = false));
+    onConfirmFn([]);
+    hide();
+}
+
+defineExpose({ visible, show, hide, setTheme });
+</script>
+<template>
+    <div
+        ref="dropdownEl"
+        class="stk-filter-dropdown"
+        :class="[`stk-filter-dropdown--${theme}`]"
+        :style="{
+            top: position.y + 'px',
+            left: position.x + 'px',
+            display: visible ? void 0 : 'none',
+        }"
+        @click.stop
+    >
+        <StkTable
+            row-key="id"
+            headless
+            virtual
+            no-data-full
+            :theme="theme"
+            :row-active="false"
+            :row-height="20"
+            :bordered="false"
+            :columns="columns"
+            :data-source="options"
+            @row-click="handleRowClick"
+        />
+        <footer>
+            <button @click="handleClear">↺</button>
+            <button @click="confirm">✓</button>
+        </footer>
+    </div>
+</template>

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

@@ -1,118 +1,118 @@
-.stk-table.header-text-overflow {
-    .stk-filter >span {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-}
-
-.stk-filter {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    cursor: pointer;
-    flex: 1;
-    min-width: 0;
-    &--light {
-        --icon-active-color: #1b63d9;
-        --icon-hover-color: #1890ff;
-    }
-
-    &--dark {
-        --icon-active-color: #1b63d9;
-        --icon-hover-color: #4f8df4;
-    }
-
-    &.stk-filter--active {
-        .stk-filter-icon {
-            color: var(--icon-active-color);
-        }
-    }
-    >span {
-        flex: 1;
-        min-width: 0;
-        overflow: hidden;
-    }
-
-    .stk-filter-icon {
-        display: inline-flex;
-        width: 16px;
-        height: 16px;
-        cursor: pointer;
-        opacity: 0.6;
-        transition: opacity 0.2s;
-        flex-shrink: 0;
-        &:hover {
-            opacity: 1;
-            color: var(--icon-hover-color);
-        }
-    }
-}
-
-.stk-filter-dropdown {
-    --border-color: #303439;
-    --btn-hover-color: #2a2f34;
-    --bg-color: #181c21;
-    --text-color: rgba(255, 255, 255, 0.85);
-    --cell-hover-color: #2a2f34;
-
-    &--light {
-        --border-color: #e8e8e8;
-        --btn-hover-color: #f5f5f5;
-        --bg-color: #ffffff;
-        --text-color: rgba(0, 0, 0, 0.85);
-        --cell-hover-color: #fafafa;
-
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    }
-
-    position: absolute;
-    width: 120px;
-    max-height: 200px;
-    background-color: var(--bg-color);
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    z-index: 1000;
-    display: flex;
-    flex-direction: column;
-    color: var(--text-color);
-
-    > .stk-table {
-        --cell-padding-x: 4px;
-        padding: 8px 0;
-        flex: 1;
-        min-height: 0;
-
-        tr {
-            cursor: pointer;
-        }
-    }
-
-    .stk-filter-dropdown-checkbox {
-        text-align: center;
-        > [type='checkbox'] {
-            vertical-align: middle;
-        }
-    }
-
-    footer {
-        display: flex;
-        border-top: 1px solid var(--border-color);
-
-        button {
-            flex: 1;
-            cursor: pointer;
-            background: transparent;
-            border: none;
-            color: var(--text-color);
-
-            &:first-child {
-                border-right: 1px solid var(--border-color);
-            }
-
-            &:hover {
-                background-color: var(--btn-hover-color);
-            }
-        }
-    }
-}
+.stk-table.header-text-overflow {
+    .stk-filter >span {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+.stk-filter {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    cursor: pointer;
+    flex: 1;
+    min-width: 0;
+    &--light {
+        --icon-active-color: #1b63d9;
+        --icon-hover-color: #1890ff;
+    }
+
+    &--dark {
+        --icon-active-color: #1b63d9;
+        --icon-hover-color: #4f8df4;
+    }
+
+    &.stk-filter--active {
+        .stk-filter-icon {
+            color: var(--icon-active-color);
+        }
+    }
+    >span {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+    }
+
+    .stk-filter-icon {
+        display: inline-flex;
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+        opacity: 0.6;
+        transition: opacity 0.2s;
+        flex-shrink: 0;
+        &:hover {
+            opacity: 1;
+            color: var(--icon-hover-color);
+        }
+    }
+}
+
+.stk-filter-dropdown {
+    --border-color: #303439;
+    --btn-hover-color: #2a2f34;
+    --bg-color: #181c21;
+    --text-color: rgba(255, 255, 255, 0.85);
+    --cell-hover-color: #2a2f34;
+
+    &--light {
+        --border-color: #e8e8e8;
+        --btn-hover-color: #f5f5f5;
+        --bg-color: #ffffff;
+        --text-color: rgba(0, 0, 0, 0.85);
+        --cell-hover-color: #fafafa;
+
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    }
+
+    position: absolute;
+    width: 120px;
+    max-height: 200px;
+    background-color: var(--bg-color);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    color: var(--text-color);
+
+    > .stk-table {
+        --cell-padding-x: 4px;
+        padding: 8px 0;
+        flex: 1;
+        min-height: 0;
+
+        tr {
+            cursor: pointer;
+        }
+    }
+
+    .stk-filter-dropdown-checkbox {
+        text-align: center;
+        > [type='checkbox'] {
+            vertical-align: middle;
+        }
+    }
+
+    footer {
+        display: flex;
+        border-top: 1px solid var(--border-color);
+
+        button {
+            flex: 1;
+            cursor: pointer;
+            background: transparent;
+            border: none;
+            color: var(--text-color);
+
+            &:first-child {
+                border-right: 1px solid var(--border-color);
+            }
+
+            &:hover {
+                background-color: var(--btn-hover-color);
+            }
+        }
+    }
+}