@ticatec/topside-elements 1.0.0

package/dist/overlay/common/utils.js

@@ -0,0 +1,136 @@
+/**
+ * 是否空
+ * @param s
+ */
+const isEmpty = (s) => {
+    return s == null || (typeof s == "string" && s.trim().length == 0);
+};
+const getNumberValue = (n) => {
+    let v = typeof (n) == "number" ? n : typeof (n) == "string" ? parseFloat(n) : null;
+    return v != null ? isNaN(v) ? null : v : v;
+};
+const getStringValue = (n) => {
+    return typeof (n) == "string" ? n : typeof (n) == "number" ? n.toString() : null;
+};
+/**
+ * 睡眠n秒
+ * @param n
+ */
+const sleep = (n) => {
+    if (n < 0) {
+        n = 1;
+    }
+    return new Promise(resolve => {
+        setTimeout(() => {
+            resolve();
+        }, n * 1000);
+    });
+};
+/**
+ *
+ * @param precision
+ * @param allowNegative
+ */
+const getNumberRegex = (precision, allowNegative) => {
+    if (precision == null) {
+        return allowNegative ? `^-?\\d+(\\.\\d*)?$` : `^\\d+(\\.\\d*)?$`;
+    }
+    else if (precision > 0) {
+        return allowNegative ? `^-?\\d+(\\.\\d{0,${precision}})?$` : `^\\d+(\\.\\d{0,${precision}})?$`;
+    }
+    else {
+        return allowNegative ? `^-?\\d+$` : `^\\d+$`;
+    }
+};
+/**
+ * 检查是不是一个有效的数字
+ * @param n
+ * @param precision
+ * @param allowNegative
+ * @param max
+ * @param min
+ */
+const isValidNumber = (n, precision, allowNegative, max = null, min = null) => {
+    let valid = true;
+    if (precision != null && precision > 0) {
+        let base = Math.pow(10, precision);
+        valid = n * base == Math.floor(n * base);
+    }
+    if (valid && max != null) {
+        valid = n <= max;
+    }
+    if (valid && allowNegative && min != null) {
+        valid = n >= min;
+    }
+    return valid;
+};
+const formatNumber = (n, precision) => {
+    n = typeof n == "string" ? parseFloat(n) : n;
+    if (n == null || isNaN(n)) {
+        return '';
+    }
+    else {
+        if (precision != null) {
+            return n.toFixed(precision);
+        }
+        else {
+            return n.toString();
+        }
+    }
+};
+/**
+ * 过滤文件列表，返回符合 accept 规则的文件
+ * @param {FileList | File[]} files - 用户选择或拖入的文件列表
+ * @param {string} accept - 允许的文件类型，如 "image/*" 或 ".doc,.docx,.pdf"
+ * @returns {File[]} - 过滤后的符合规则的文件
+ */
+const filterFiles = (files, accept) => {
+    if (isEmpty(accept) || accept === "*/*" || !accept)
+        return Array.from(files); // 允许所有文件
+    const allowedExtensions = accept.split(",").map(ext => ext.trim().toLowerCase());
+    return Array.from(files).filter(file => {
+        const fileName = file.name.toLowerCase();
+        const fileType = file.type.toLowerCase();
+        // 如果是 image/*，则匹配所有图片类型
+        if (accept.includes("image/*") && fileType.startsWith("image/"))
+            return true;
+        // 其他情况，检查扩展名是否匹配
+        return allowedExtensions.some(ext => fileName.endsWith(ext));
+    });
+};
+/**
+ * 获取嵌套属性节点，如果中间为null，补空对象
+ * @param obj
+ * @param path
+ */
+const getNestedObject = (obj, keys) => {
+    let current = obj;
+    for (const property of keys) {
+        // 检查当前值是否为 null 或非对象，或者当前属性在对象中不存在
+        if (current === null || typeof current !== 'object' || !Object.prototype.hasOwnProperty.call(current, property)) {
+            return {}; // 如果中间任何值不存在，返回空对象
+        }
+        current = current[property]; // 访问下一层属性
+    }
+    return current;
+};
+/**
+ * 获取嵌套定义key的值
+ * @param data
+ * @param key
+ */
+const getNestedValue = (data, key) => {
+    let keys = key.split('.');
+    let attr = keys.pop();
+    if (attr == null) {
+        return null;
+    }
+    else {
+        let obj = keys.length > 0 ? getNestedObject(data, keys) : data;
+        return obj[attr];
+    }
+};
+export default {
+    isEmpty, getNumberValue, getStringValue, sleep, getNumberRegex, isValidNumber, formatNumber, filterFiles, getNestedObject,
+    getNestedValue
+};

package/dist/overlay/context-menu/ContextMenu.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { ContextMenuItem } from "./ContextMenuItem.js";
+declare class ContextMenuController {
+    visible: boolean;
+    position: {
+        x: number;
+        y: number;
+    };
+    items: ContextMenuItem[];
+    width: number;
+    height: number;
+    theme: unknown;
+    /**
+     * 唤起右键菜单
+     */
+    show(event: MouseEvent, list: ContextMenuItem[], width?: number, height?: number, currentTheme?: string): void;
+    /**
+     * 关闭右键菜单
+     */
+    hide(): void;
+}
+declare const contextMenuSvelte: ContextMenuController;
+export default contextMenuSvelte;

package/dist/overlay/context-menu/ContextMenu.svelte.js

@@ -0,0 +1,53 @@
+// src/lib/overlay/context-menu/ContextMenu.svelte.ts
+import ContextMenuPanel from "./ContextMenuPanel.svelte";
+import { createSingletonMounter } from '../common/mountSingleton';
+/**
+ * 懒挂载：第一次 show() 时把面板挂到 document.body，后续复用同一个实例。
+ * 不需要用户在 app 根节点手动挂 <ContextMenu />。
+ */
+const ensureMounted = createSingletonMounter(() => ContextMenuPanel);
+class ContextMenuController {
+    visible = $state(false);
+    position = $state({ x: 0, y: 0 });
+    items = $state([]);
+    width = $state(150);
+    height = $state(150);
+    theme = $state();
+    /**
+     * 唤起右键菜单
+     */
+    show(event, list, width = 150, height = 150, currentTheme) {
+        ensureMounted();
+        event.preventDefault();
+        // 快速闪烁重置，确保旧菜单的生命周期彻底刷新
+        this.visible = false;
+        this.items = list;
+        this.width = width;
+        this.height = height;
+        this.theme = currentTheme;
+        let x = event.clientX;
+        let y = event.clientY;
+        // 视口边界碰撞检测（Window Bounds Detection）
+        if (x + this.width > window.innerWidth) {
+            x = window.innerWidth - this.width;
+        }
+        if (y + this.height > window.innerHeight) {
+            y = window.innerHeight - this.height;
+        }
+        // 钳制下界：当菜单本身比视口还宽/高时，上面的右/下边界修正会把
+        // x/y 推成负数，导致菜单被裁掉一部分甚至完全移出左上角视口之外。
+        x = Math.max(0, x);
+        y = Math.max(0, y);
+        this.position = { x, y };
+        this.visible = true;
+    }
+    /**
+     * 关闭右键菜单
+     */
+    hide() {
+        this.visible = false;
+    }
+}
+// 导出全局单例
+const contextMenuSvelte = new ContextMenuController();
+export default contextMenuSvelte;

package/dist/overlay/context-menu/ContextMenuItem.d.ts

@@ -0,0 +1,31 @@
+export type ContextMenuAction = () => void;
+export interface ContextMenuItem {
+    /**
+     * Display text for the menu item
+     */
+    label?: string;
+    /**
+     * Action to execute when item is clicked
+     */
+    handler?: ContextMenuAction;
+    /**
+     * Whether the item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether this is a separator item
+     */
+    separator?: boolean;
+    /**
+     * Icon class or name for the menu item
+     */
+    icon?: string;
+    /**
+     * Custom CSS styles for the item
+     */
+    style?: string;
+}
+/**
+ * Context menu event handler type
+ */
+export type OnContextMenu = (event: MouseEvent, data: any) => void;

package/dist/overlay/context-menu/ContextMenuItem.js

@@ -0,0 +1 @@
+export {};

package/dist/overlay/context-menu/ContextMenuPanel.svelte

@@ -0,0 +1,211 @@
+<script lang="ts">
+    import {tick} from 'svelte';
+    import contextMenuSvelte from './ContextMenu.svelte.js';
+    import type {ContextMenuItem} from "./ContextMenuItem";
+
+    let focusedIndex = $state(-1);
+    let menuPanel = $state<HTMLDivElement | null>(null);
+    let previouslyFocused: HTMLElement | null = null;
+
+    // 状态响应器：一旦菜单被激活，立即强制捕获焦点
+    $effect(() => {
+        if (contextMenuSvelte.visible) {
+            previouslyFocused = document.activeElement as HTMLElement | null;
+            focusedIndex = -1; // 初始化键盘高亮位置
+            tick().then(() => {
+                menuPanel?.focus();
+            });
+        } else if (previouslyFocused) {
+            // Regression: closing the menu previously just dropped focus back
+            // to the document body instead of wherever the user was before
+            // opening it (right-clicking a table row, say).
+            previouslyFocused.focus();
+            previouslyFocused = null;
+        }
+    });
+
+    // 优雅的失焦自毁逻辑，彻底省去全局 window.addEventListener('click')
+    function handleBlur(event: FocusEvent) {
+        if (menuPanel && menuPanel.contains(event.relatedTarget as Node)) {
+            return; // 焦点在菜单内部子项转移时，不触发自毁
+        }
+        contextMenuSvelte.hide();
+    }
+
+    // A11y 无障碍环形滚动算法
+    function moveSelection(direction: number) {
+        const enabledIndices = contextMenuSvelte.items
+            .map((item: ContextMenuItem, index: number) => ({item, index}))
+            .filter((sub:any) => !sub.item.disabled && !sub.item.separator)
+            .map((sub:any) => sub.index);
+
+        if (enabledIndices.length === 0) return;
+
+        let currentMatchIndex = enabledIndices.indexOf(focusedIndex);
+        let newMatchIndex = currentMatchIndex + direction;
+
+        if (newMatchIndex < 0) {
+            newMatchIndex = enabledIndices.length - 1;
+        } else if (newMatchIndex >= enabledIndices.length) {
+            newMatchIndex = 0;
+        }
+
+        focusedIndex = enabledIndices[newMatchIndex];
+    }
+
+    // 拦截全局键盘事件
+    function handleKeyDown(event: KeyboardEvent) {
+        if (!contextMenuSvelte.visible) return;
+
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                moveSelection(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                moveSelection(-1);
+                break;
+            case 'Enter':
+            case ' ': // 空格键触发
+                event.preventDefault();
+                if (focusedIndex >= 0) {
+                    const item = contextMenuSvelte.items[focusedIndex];
+                    if (!item.disabled && item.handler) {
+                        item.handler();
+                    }
+                    contextMenuSvelte.hide();
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                // Stop this from also reaching the shared window-level Escape
+                // stack (escapeClose.ts) — otherwise a context menu opened on
+                // top of a Dialog/Popover would close both on one Escape press.
+                event.stopPropagation();
+                contextMenuSvelte.hide();
+                break;
+            case 'Tab':
+                event.preventDefault(); // 强行拦截 Tab 破坏 DOM 焦点序列
+                break;
+        }
+    }
+
+    function activateItem(event: MouseEvent | KeyboardEvent, index: number) {
+        if (event instanceof KeyboardEvent && event.key !== 'Enter' && event.key !== ' ') return;
+        event.preventDefault();
+        event.stopPropagation();
+        const item = contextMenuSvelte.items[index];
+        if (item.disabled) return;
+        item.handler?.();
+        contextMenuSvelte.hide();
+    }
+</script>
+
+{#if contextMenuSvelte.visible}
+    <div
+            bind:this={menuPanel}
+            class="topside-context-menu"
+            data-theme={contextMenuSvelte.theme}
+            style="left: {contextMenuSvelte.position.x}px; top: {contextMenuSvelte.position.y}px;"
+            role="menu"
+            tabindex="0"
+            aria-activedescendant={focusedIndex >= 0 ? `topside-menu-item-${focusedIndex}` : undefined}
+            onkeydown={handleKeyDown}
+            onblur={handleBlur}
+    >
+        {#each contextMenuSvelte.items as item, index}
+            {#if item.separator}
+                <div class="menu-separator" role="separator"></div>
+            {:else}
+                <div
+                        id="topside-menu-item-{index}"
+                        class="menu-item"
+                        class:disabled={item.disabled}
+                        class:focused={focusedIndex === index}
+                        style={item.style || ''}
+                        role="menuitem"
+                        tabindex="-1"
+                        aria-disabled={item.disabled}
+                        onclick={(event) => activateItem(event, index)}
+                        onkeydown={(event) => activateItem(event, index)}
+                        onmouseenter={() => { if(!item.disabled) focusedIndex = index; }}
+                >
+                    {#if item.icon}
+                        <img class="menu-item-icon" src={item.icon} alt=""/>
+                    {/if}
+                    <span class="menu-item-text">{item.label}</span>
+                </div>
+            {/if}
+        {/each}
+    </div>
+{/if}
+
+<style>@charset "UTF-8";
+.topside-context-menu {
+  /* event.clientX/clientY (used to compute .position in ContextMenu.svelte.ts) and the
+     window.innerWidth/innerHeight bounds check there are both viewport-relative.
+     `position: absolute` would place this element relative to the document instead,
+     so the menu drifted away from the cursor by the page's scroll offset. `fixed`
+     keeps the same coordinate frame as the values driving left/top. */
+  position: fixed;
+  z-index: var(--topside-z-context-menu, 1000);
+  outline: none;
+  border-radius: var(--topside-radius);
+  /* 1. 深度整合：基础环境与阴影规范 */
+  background-color: var(--topside-contextmenu-color-surface);
+  color: var(--topside-contextmenu-color);
+  border: 1px solid var(--topside-color-border-secondary);
+  box-shadow: var(--topside-contextmenu-shadow);
+  padding: var(--topside-contextmenu-margin);
+  min-width: var(--topside-contextmenu-minimal-width);
+  min-height: var(--topside-contextmenu-minimal-height);
+}
+.topside-context-menu .menu-item {
+  padding: var(--topside-contextmenu-item-margin);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--topside-contextmenu-spacing);
+  border-radius: var(--topside-radius);
+  /* 丝滑的交互切色动效 */
+  transition: background-color 0.1s ease, color 0.1s ease;
+  /* 2. 深度整合：使 hover 状态与键盘聚焦的 .focused 状态视觉高度统一 */
+}
+.topside-context-menu .menu-item:hover, .topside-context-menu .menu-item.focused {
+  background-color: var(--topside-contextmenu-color-hover-surface);
+  color: var(--topside-contextmenu-color-hover);
+  outline: none;
+}
+.topside-context-menu .menu-item .menu-item-icon {
+  height: 1.5em;
+  width: 1.5em;
+  object-fit: contain;
+}
+.topside-context-menu .menu-item .menu-item-text {
+  flex: 1;
+  font-size: 1em;
+  white-space: nowrap;
+}
+.topside-context-menu .menu-item {
+  /* 禁用逻辑样式隔离 */
+}
+.topside-context-menu .menu-item.disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.topside-context-menu .menu-item.disabled:hover, .topside-context-menu .menu-item.disabled.focused {
+  background-color: transparent;
+  color: inherit;
+}
+.topside-context-menu .menu-item.disabled .menu-item-icon {
+  filter: grayscale(1);
+}
+.topside-context-menu {
+  /* 精致的微分割线设计 */
+}
+.topside-context-menu .menu-separator {
+  height: 1px;
+  background-color: var(--topside-contextmenu-color-separator);
+  margin: var(--topside-contextmenu-separator-margin) 0;
+}</style>

package/dist/overlay/context-menu/ContextMenuPanel.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ContextMenuPanel: import("svelte").Component<Record<string, never>, {}, "">;
+type ContextMenuPanel = ReturnType<typeof ContextMenuPanel>;
+export default ContextMenuPanel;