@ticatec/topside-elements 1.0.0

package/dist/navigation/tabs/Tabs.svelte

@@ -0,0 +1,400 @@
+<script lang="ts">
+
+    import {onMount, onDestroy, tick} from "svelte";
+    import {Tween} from 'svelte/motion';
+    import {cubicOut} from 'svelte/easing';
+    import type {Snippet} from "svelte";
+    import type {OnTabAction, BeforeTabClose, IsTabClosable, TabRender} from "../../types";
+
+    interface Props {
+        class?: string;
+        simple?: boolean;
+        textField?: string;
+        keyField?: string;
+        style?: string;
+        tabs: Array<any>;
+        scrollStep?: number;
+        closable?: boolean | IsTabClosable;
+        activeTab?: any;
+        maxTabWidth?: number;
+        tabRender?: TabRender;
+        onrefresh?: OnTabAction;
+        /**
+         * 关闭标签前的否决钩子：返回 false 阻止关闭。
+         */
+        beforeRemove?: BeforeTabClose;
+        /**
+         * 标签被移除后的通知。
+         */
+        onremove?: OnTabAction;
+        children?: Snippet;
+    }
+
+    let {
+        class: className,
+        simple = false,
+        textField = 'text',
+        keyField = 'id',
+        style,
+        tabs = $bindable([]),
+        scrollStep= 100,
+        closable = false,
+        activeTab = $bindable(),
+        maxTabWidth,
+        tabRender,
+        onrefresh,
+        beforeRemove,
+        onremove,
+        children
+    }: Props = $props();
+
+    // 当 maxTabWidth 设置时，通过 CSS 变量给 .topside-tab 加 max-width，并对文字做省略。
+    // 不设置时变量为空字符串，CSS 中 var() 回退到 none，行为与之前完全一致。
+    let panelStyle = $derived(
+        (maxTabWidth != null ? `--topside-tab-max-width: ${maxTabWidth}px;` : '') + (style ?? '')
+    );
+
+    // $state proxies and their underlying values have different identities,
+    // so `tab === activeTab` is unreliable when the parent stores the active
+    // tab in $state. Compare by keyField (default 'id') instead.
+    const isActive = (tab: any) => {
+        if (tab == null || activeTab == null) return false;
+        const a = tab[keyField];
+        const b = activeTab[keyField];
+        if (a != null && b != null) return a === b;
+        return false;
+    };
+
+
+    let container: any;
+    let showLeft = $state(false);
+    let showRight = $state(false);
+    let scrollX = new Tween(0, {duration: 300, easing: cubicOut});
+    let currentLeft = 0;
+
+    onMount(() => {
+        if (activeTab == null && tabs.length > 0) {
+            activeTab = tabs[0];
+        }
+        checkOverflow();
+        window.addEventListener('resize', checkOverflow);
+        container.addEventListener('scroll', checkOverflow);
+    });
+
+    onDestroy(() => {
+        window.removeEventListener('resize', checkOverflow);
+        container.removeEventListener('scroll', checkOverflow);
+    });
+
+
+    const checkOverflow = () => {
+        if (container) {
+            if (currentLeft + container.clientWidth >= container.scrollWidth) {
+                currentLeft = container.scrollWidth - container.clientWidth;
+                scrollX.set(currentLeft);
+            }
+            if (currentLeft > 0 && container.clientWidth >= container.scrollWidth) {
+                currentLeft = 0;
+                scrollX.set(currentLeft);
+            }
+            showRight = currentLeft + container.clientWidth < container.scrollWidth;
+            showLeft = currentLeft > 0;
+        }
+    };
+
+    const scroll = (dir: 1 | -1) => {
+        const maxScroll = container.scrollWidth - container.clientWidth;
+        currentLeft += dir * scrollStep;
+        if (currentLeft < 0) currentLeft = 0;
+        if (currentLeft > maxScroll) currentLeft = maxScroll;
+        scrollX.set(currentLeft);
+        checkOverflow();
+    };
+
+
+    const handleTabClick = (tab: any) => () => {
+        if (!isActive(tab)) {
+            activeTab = tab;
+        }
+    }
+
+    const handleTabKeyDown = (tab: any) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleTabClick(tab)();
+        }
+    }
+
+    const handleIconKeyDown = (handler: () => void) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            e.stopPropagation();
+            handler();
+        }
+    }
+
+    const closeTab = (tab: any) => async (e: MouseEvent) => {
+        let pos = tabs.indexOf(tab);
+        if (pos > -1) {
+            const canClose = beforeRemove == null || (await beforeRemove(tab)) !== false;
+            if (canClose) {
+                tabs.splice(pos, 1);
+                tabs = [...tabs];
+                if (isActive(tab)) {
+                    if (pos >= tabs.length) {
+                        pos = tabs.length - 1;
+                    }
+                    activeTab = tabs[pos];
+                }
+                await tick();
+                checkOverflow();
+                onremove?.(tab);
+            }
+        }
+        e.stopPropagation();
+        e.preventDefault();
+    }
+
+    const reloadTab = (tab: any) => () => {
+        onrefresh?.(tab);
+    }
+    //
+
+</script>
+<div class="topside-tab-panel {className}" style={panelStyle}>
+    <div>
+        <div class="topside-tabs-wrap" class:simple>
+            <div class="scroll-left" role="button" tabindex="0" aria-label="Scroll tabs left"
+                 style="visibility: {showLeft ? 'visible' : 'hidden'}"
+                 onclick={() => scroll(-1)} onkeydown={handleIconKeyDown(() => scroll(-1))}>
+                <i class="icon_google_arrow_left" aria-hidden="true"></i>
+            </div>
+            <div class="tabs-panel" style="overflow: hidden;">
+                <div style="position: relative; left: {-scrollX.current}px" bind:this={container} role="tablist">
+                    {#each tabs as tab (tab)}
+                        <div class="topside-tab{isActive(tab) ? ' active' : ''}" onclick={handleTabClick(tab)}
+                             onkeydown={handleTabKeyDown(tab)} role="tab" tabindex={isActive(tab) ? 0 : -1}
+                             aria-selected={isActive(tab)}>
+                            {#if tabRender != null}
+                                {@const TabRender = tabRender}
+                                <TabRender {tab}
+                                           closeTab={(closable === true || (typeof (closable) == "function" && closable(tab))) ? closeTab(tab) : null}
+                                           reloadTab={onrefresh != null ? reloadTab(tab) : null}
+                                           closable={closable === true || (typeof (closable) == "function" && closable(tab))}/>
+                            {:else}
+                                <span>{tab[textField]}</span>
+                                {#if onrefresh != null}
+                                    <i class="icon_google_refresh tab-refresh" role="button" tabindex="0" aria-label="Refresh tab"
+                                       onclick={reloadTab(tab)} onkeydown={handleIconKeyDown(reloadTab(tab))}></i>
+                                {/if}
+                                {#if tabs.length > 1 && (closable === true || (typeof (closable) == "function" && closable(tab)))}
+                                    <i class="icon_google_clear tab-action" role="button" tabindex="0" aria-label="Close tab"
+                                       onclick={closeTab(tab)} onkeydown={handleIconKeyDown(() => closeTab(tab)(new MouseEvent('click')))}></i>
+                                {/if}
+                            {/if}
+                        </div>
+                    {/each}
+                </div>
+            </div>
+            <div class="scroll-right" role="button" tabindex="0" aria-label="Scroll tabs right"
+                 style="visibility: {showRight ? 'visible' : 'hidden'}"
+                 onclick={() => scroll(1)} onkeydown={handleIconKeyDown(() => scroll(1))}>
+                <i class="icon_google_arrow_right" aria-hidden="true"></i>
+            </div>
+        </div>
+        <div class="tab-content" style="flex: 1 1 auto; height: 100%; overflow: hidden">
+            {@render children?.()}
+        </div>
+    </div>
+</div>
+
+<style>
+    .topside-tab-panel {
+        width: 100%;
+        box-sizing: border-box;
+        position: relative;
+
+        & > div {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+
+        .tab-content {
+            border: 1px solid var(--topside-tab-border-color, #E2E8F0);
+            background-color: var(--topside-tab-bg, #F8FAFC);
+        }
+    }
+
+    .topside-tabs-wrap {
+        width: 100%;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        background-color: transparent;
+        flex: 0 0 auto;
+        align-items: center;
+        user-select: none;
+
+        .scroll-right, .scroll-left {
+            width: 24px;
+            flex: 0 0 auto;
+            text-align: center;
+            cursor: pointer;
+
+            &:hover {
+                color: var(--topside-primary-hover-text-color, #298DFF);
+            }
+
+            &:active {
+                position: relative;
+                top: 1px;
+            }
+
+            &:focus-visible {
+                outline: 2px solid var(--topside-primary-border-color, #298DFF);
+            }
+        }
+
+        .tabs-panel {
+            flex: 1 1 auto;
+            overflow: hidden;
+            position: relative;
+            white-space: nowrap;
+            bottom: -1px;
+
+            .topside-tab {
+                display: inline-block;
+                padding: 8px 20px 4px 20px;
+                margin-left: 4px;
+                border-left: 1px solid var(--topside-tab-border-color, #E2E8F0);
+                border-right: 1px solid var(--topside-tab-border-color, #E2E8F0);
+                border-top: 1px solid var(--topside-tab-border-color, #E2E8F0);
+                border-bottom: 1px solid var(--topside-tab-border-color, #E2E8F0);
+                cursor: pointer;
+                position: relative;
+                border-top-left-radius: var(--topside-tab-header-radius, 0);
+                border-top-right-radius: var(--topside-tab-header-radius, 0);
+                background-color: var(--topside-tab-inactive-background-color, #FFFFFF);
+                max-width: var(--topside-tab-max-width, none);
+
+                /* 当外层设置了 --topside-tab-max-width 时，文字超出用省略号 */
+                > span {
+                    display: inline-block;
+                    max-width: 100%;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    vertical-align: top;
+                }
+
+                .tab-refresh {
+                    position: absolute;
+                    display: none;
+                    left: 3px;
+                    top: 3px;
+                    font-size: 12px;
+                    width: 12px;
+                    height: 12px;
+
+                    &:active {
+                        top: 4px;
+                    }
+                }
+
+                .tab-action {
+                    position: absolute;
+                    display: none;
+                    right: 2px;
+                    top: 2px;
+                    font-size: 12px;
+                    line-height: 12px;
+                    width: 12px;
+                    height: 12px;
+                    border-radius: 50%;
+
+                    &:active {
+                        top: 3px;
+                    }
+                }
+
+                &:hover {
+                    color: var(--topside-tab-hover-text-color, #298DFF);
+
+                    .tab-action {
+                        display: block;
+                        cursor: pointer;
+                    }
+                }
+
+                &:focus-visible {
+                    outline: 2px solid var(--topside-primary-border-color, #298DFF);
+                    outline-offset: -2px;
+                }
+
+                &.active {
+                    color: var(--topside-tab-active-text-color, #0061FF);
+                    background-color: var(--topside-tab-bg, #F8FAFC);
+                    border-bottom: 1px solid var(--topside-tab-bg, #333333);
+                    font-weight: 600;
+                    cursor: default;
+
+                    .tab-action {
+                        background-color: var(--topside-tab-action-background, #ffffff);
+                    }
+
+                    .tab-refresh {
+                        display: block;
+                    }
+
+                    &:hover {
+                        color: var(--topside-tab-active-text-color, #0061FF);
+
+                        .tab-action {
+                            display: block;
+                        }
+                    }
+                }
+            }
+        }
+
+        &.simple {
+            .tabs-panel {
+                bottom: 0;
+
+                .topside-tab {
+                    margin-left: 4px;
+                    border-bottom: 2px solid transparent;
+                    background-color: transparent;
+                    padding: 8px 8px 4px 8px;
+                    border-left: none;
+                    border-right: none;
+                    border-top: none;
+
+                    .tab-action {
+                        display: none;
+                    }
+
+                    &.active {
+                        color: var(--topside-tab-active-text-color, #0061FF);
+                        border-bottom: 2px solid var(--topside-tab-active-text-color, #0061FF);
+                        font-weight: 600;
+                        cursor: default;
+
+                        .tab-refresh {
+                            display: none;
+                        }
+
+                        &:hover {
+                            color: var(--topside-tab-active-text-color, #0061FF);
+
+                            .tab-action {
+                                display: none;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>

package/dist/navigation/tabs/Tabs.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from "svelte";
+import type { OnTabAction, BeforeTabClose, IsTabClosable, TabRender } from "../../types";
+interface Props {
+    class?: string;
+    simple?: boolean;
+    textField?: string;
+    keyField?: string;
+    style?: string;
+    tabs: Array<any>;
+    scrollStep?: number;
+    closable?: boolean | IsTabClosable;
+    activeTab?: any;
+    maxTabWidth?: number;
+    tabRender?: TabRender;
+    onrefresh?: OnTabAction;
+    /**
+     * 关闭标签前的否决钩子：返回 false 阻止关闭。
+     */
+    beforeRemove?: BeforeTabClose;
+    /**
+     * 标签被移除后的通知。
+     */
+    onremove?: OnTabAction;
+    children?: Snippet;
+}
+declare const Tabs: import("svelte").Component<Props, {}, "tabs" | "activeTab">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/navigation/tabs/index.d.ts

@@ -0,0 +1,4 @@
+import Tabs from "./Tabs.svelte";
+import type { OnTabAction, BeforeTabClose, IsTabClosable, TabRender } from "../../types";
+export default Tabs;
+export type { OnTabAction, BeforeTabClose, IsTabClosable, TabRender };

package/dist/navigation/tabs/index.js

@@ -0,0 +1,2 @@
+import Tabs from "./Tabs.svelte";
+export default Tabs;

package/dist/overlay/common/DateFormats.d.ts

@@ -0,0 +1,5 @@
+export declare enum DateFormats {
+    ISO8601 = "YYYY-MM-DD",
+    USA = "MM/DD/YYYY",
+    EUROPE = "DD/MM/YYYY"
+}

package/dist/overlay/common/DateFormats.js

@@ -0,0 +1,6 @@
+export var DateFormats;
+(function (DateFormats) {
+    DateFormats["ISO8601"] = "YYYY-MM-DD";
+    DateFormats["USA"] = "MM/DD/YYYY";
+    DateFormats["EUROPE"] = "DD/MM/YYYY";
+})(DateFormats || (DateFormats = {}));

package/dist/overlay/common/FloatingPanel.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import {type Snippet} from "svelte";
+    import {outsideClick} from "./outsideClick";
+
+    interface Props {
+        /** 锚定目标元素；面板会出现在目标下方 */
+        target: HTMLElement;
+        /** 面板和目标之间的间距（px） */
+        margin?: number;
+        /** 点击面板和目标之外的区域时触发 */
+        onclose?: () => void;
+        /** 附加在面板根上的 class */
+        class?: string;
+        children?: Snippet;
+    }
+
+    let {
+        target,
+        margin = 4,
+        onclose,
+        class: className = '',
+        children
+    }: Props = $props();
+
+    let panelEl: HTMLElement;
+    let coords = $state({top: 0, left: 0});
+
+    const updatePosition = () => {
+        if (!target || !panelEl) return;
+        const rect = target.getBoundingClientRect();
+        coords = {
+            top: rect.bottom + margin,
+            left: rect.left,
+        };
+    };
+
+    // 把面板挂到 body 下，跳出任何父容器的 overflow / stacking context。
+    // 不依赖 Portal 库，直接 DOM API。
+    const mountToBody = (node: HTMLElement) => {
+        document.body.appendChild(node);
+        return {
+            destroy() {
+                node.remove();
+            }
+        };
+    };
+
+    $effect(() => {
+        if (!panelEl) return;
+        updatePosition();
+        window.addEventListener('resize', updatePosition);
+        // 捕获阶段监听所有 scroll（包括内部容器），保证面板跟随目标
+        window.addEventListener('scroll', updatePosition, true);
+        return () => {
+            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener('scroll', updatePosition, true);
+        };
+    });
+</script>
+
+<div
+    bind:this={panelEl}
+    class="floating-panel {className}"
+    style="position: fixed; top: {coords.top}px; left: {coords.left}px; z-index: var(--topside-z-floating-panel, 1010);"
+    use:mountToBody
+    use:outsideClick={{ callback: () => onclose?.(), exclude: [target] }}
+>
+    {@render children?.()}
+</div>

package/dist/overlay/common/FloatingPanel.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type Snippet } from "svelte";
+interface Props {
+    /** 锚定目标元素；面板会出现在目标下方 */
+    target: HTMLElement;
+    /** 面板和目标之间的间距（px） */
+    margin?: number;
+    /** 点击面板和目标之外的区域时触发 */
+    onclose?: () => void;
+    /** 附加在面板根上的 class */
+    class?: string;
+    children?: Snippet;
+}
+declare const FloatingPanel: import("svelte").Component<Props, {}, "">;
+type FloatingPanel = ReturnType<typeof FloatingPanel>;
+export default FloatingPanel;

package/dist/overlay/common/FullscreenOverlay.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+
+    import Portal from "svelte-portal";
+    import {onMount} from "svelte";
+    import type {Snippet} from "svelte";
+    import {acquireScrollLock} from "./scrollLock";
+    import {registerEscapeHandler} from "./escapeClose";
+
+    interface Props {
+        visible?: boolean;
+        children?: Snippet;
+    }
+
+    let {visible = $bindable(false), children}: Props = $props();
+
+    // Regression: this modal surface previously never locked body scroll or
+    // closed on Escape.
+    onMount(() => {
+        const release = acquireScrollLock();
+        const unregisterEscape = registerEscapeHandler(() => { visible = false; });
+        return () => {
+            release();
+            unregisterEscape();
+        };
+    });
+</script>
+
+{#if visible}
+    <Portal target="body">
+        <div class="topside-mask-overlay">
+            <!-- Backdrop click-to-close convenience only; aria-hidden must not be used
+                 here since it would hide the real, arbitrary interactive content
+                 rendered via `children` from assistive tech. -->
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div style="position: relative; width: 100%; height: 100%; overflow: hidden"
+                 onclick={()=>{visible = false}}>
+                {@render children?.()}
+            </div>
+        </div>
+    </Portal>
+{/if}

package/dist/overlay/common/FullscreenOverlay.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+interface Props {
+    visible?: boolean;
+    children?: Snippet;
+}
+declare const FullscreenOverlay: import("svelte").Component<Props, {}, "visible">;
+type FullscreenOverlay = ReturnType<typeof FullscreenOverlay>;
+export default FullscreenOverlay;

package/dist/overlay/common/ModalPopover.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+    import {type Snippet, onMount} from "svelte";
+    import Portal from "svelte-portal";
+    import {acquireScrollLock} from "./scrollLock";
+    import {registerEscapeHandler} from "./escapeClose";
+
+    interface Props {
+        visible?: boolean;
+        /** 是否允许点击遮罩/Escape 关闭 */
+        closable?: boolean;
+        theme?: string;
+        children: Snippet;
+    }
+
+    let {
+        visible = $bindable(false),
+        closable = true,
+        theme,
+        children
+    }: Props = $props();
+
+    let hidden = $state(true);
+
+    onMount(() => {
+        setTimeout(() => hidden = false, 100);
+        // Regression: this modal surface previously never locked body scroll
+        // or closed on Escape.
+        const release = acquireScrollLock();
+        const unregisterEscape = registerEscapeHandler(() => {
+            if (closable) visible = false;
+        });
+        return () => {
+            release();
+            unregisterEscape();
+        };
+    });
+</script>
+
+{#if visible}
+    <Portal target="body">
+        <div class="topside-mask-overlay" class:hidden data-theme={theme}>
+            <!-- Backdrop click-to-close convenience only; aria-hidden must not be used
+                 here since it would hide the real, arbitrary interactive content
+                 rendered via `children` from assistive tech. -->
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div class="topside-mask-center"
+                 onclick={() => { if (closable) visible = false; }}>
+                <div style="flex: 0 0 auto">
+                    {@render children()}
+                </div>
+            </div>
+        </div>
+    </Portal>
+{/if}
+

package/dist/overlay/common/ModalPopover.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type Snippet } from "svelte";
+interface Props {
+    visible?: boolean;
+    /** 是否允许点击遮罩/Escape 关闭 */
+    closable?: boolean;
+    theme?: string;
+    children: Snippet;
+}
+declare const ModalPopover: import("svelte").Component<Props, {}, "visible">;
+type ModalPopover = ReturnType<typeof ModalPopover>;
+export default ModalPopover;