@ticatec/topside-elements 1.0.0

package/dist/navigation/nav_menu/NavigatorMenu.svelte

@@ -0,0 +1,318 @@
+<script lang="ts">
+    import {onMount} from "svelte";
+    import type {Direction} from "../../types";
+    import type MenuItem from "./MenuItem";
+    import type {MenuNode, OnMenuItemClick} from "./MenuItem";
+    import NavigatorMenuItem from "./NavigatorMenuItem.svelte";
+
+    type GetText<T> = (item: T) => string;
+
+    interface Props {
+        /** 菜单节点列表 */
+        items?: Array<MenuNode>;
+        style?: string;
+        textField: string | GetText<MenuItem>;
+        onItemClick: OnMenuItemClick;
+        /** 菜单方向 */
+        direction?: Direction;
+        theme?: string;
+    }
+
+    let {
+        items = [],
+        style = '',
+        textField,
+        onItemClick,
+        direction = 'vertical',
+        theme
+    }: Props = $props();
+
+    // 横向模式：当前展开的 root 索引（同时只开一个 dropdown）
+    let openRootIdx = $state<number | null>(null);
+    let scrollViewport = $state<HTMLDivElement>();
+    let scrollTrack = $state<HTMLDivElement>();
+    let horizontalMenu = $state<HTMLElement>();
+    let hasOverflow = $state(false);
+    let canScrollLeft = $state(false);
+    let canScrollRight = $state(false);
+    let dropdownLeft = $state(0);
+
+    const rootText = (root: MenuNode): string => {
+        return typeof textField === 'string'
+            ? root.item?.[textField] ?? ''
+            : textField(root.item);
+    };
+
+    const updateDropdownPosition = () => {
+        if (openRootIdx === null || !horizontalMenu || !scrollTrack) return;
+        const item = scrollTrack.children[openRootIdx] as HTMLElement | undefined;
+        if (!item) return;
+        dropdownLeft = item.getBoundingClientRect().left - horizontalMenu.getBoundingClientRect().left;
+    };
+
+    const updateScrollState = () => {
+        if (!scrollViewport) return;
+        const maxScrollLeft = scrollViewport.scrollWidth - scrollViewport.clientWidth;
+        hasOverflow = maxScrollLeft > 1;
+        canScrollLeft = scrollViewport.scrollLeft > 1;
+        canScrollRight = scrollViewport.scrollLeft < maxScrollLeft - 1;
+        updateDropdownPosition();
+    };
+
+    const handleRootClick = (idx: number) => {
+        openRootIdx = openRootIdx === idx ? null : idx;
+        requestAnimationFrame(updateDropdownPosition);
+    };
+
+    const scrollMenu = (direction: -1 | 1) => {
+        scrollViewport?.scrollBy({
+            left: direction * Math.max(scrollViewport.clientWidth * 0.7, 160),
+            behavior: 'smooth'
+        });
+    };
+
+    // 横向模式下点叶子：触发 onItemClick + 关闭 dropdown
+    const handleLeafClickInDropdown = (item: MenuItem) => {
+        onItemClick?.(item);
+        openRootIdx = null;
+    };
+
+    // 点击 dropdown 外部时关闭（bubble 阶段）。root-item 自身会 stopPropagation，
+    // 所以点 root-item 时这里不会触发，由 root-item 的 onclick 自己处理 toggle。
+    const outerClick = (node: HTMLElement, callback: () => void) => {
+        const handleClick = (event: MouseEvent) => {
+            if (!node.contains(event.target as Node)) {
+                callback();
+            }
+        };
+        document.addEventListener('click', handleClick);
+        return {
+            destroy() {
+                document.removeEventListener('click', handleClick);
+            }
+        };
+    };
+
+    onMount(() => {
+        if (!scrollViewport || !scrollTrack) return;
+        const resizeObserver = new ResizeObserver(updateScrollState);
+        resizeObserver.observe(scrollViewport);
+        resizeObserver.observe(scrollTrack);
+        updateScrollState();
+        return () => resizeObserver.disconnect();
+    });
+</script>
+
+{#if direction === 'vertical'}
+    <div class="topside-navigator-menu vertical" {style} data-theme={theme || undefined}>
+        {#if items && items.length > 0}
+            <ul>
+                {#each items as menu}
+                    <NavigatorMenuItem {menu} onMenuItemClick={onItemClick} {textField}/>
+                {/each}
+            </ul>
+        {/if}
+    </div>
+{:else}
+    <nav bind:this={horizontalMenu} class="topside-navigator-menu horizontal" {style} data-theme={theme || undefined}>
+        {#if hasOverflow}
+            <button type="button" class="scroll-button previous" aria-label="向左滚动菜单" disabled={!canScrollLeft} onclick={() => scrollMenu(-1)}>
+                <i aria-hidden="true"></i>
+            </button>
+        {/if}
+        <div bind:this={scrollViewport} class="scroll-viewport" onscroll={updateScrollState}>
+            <div bind:this={scrollTrack} class="scroll-track">
+                {#each items as root, idx (idx)}
+                    <div
+                        class="root-item"
+                        class:open={openRootIdx === idx}
+                        class:leaf={!root.children?.length}
+                        onclick={(e) => { e.stopPropagation(); handleRootClick(idx); }}
+                        onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleRootClick(idx); }}
+                        role="button"
+                        tabindex="0"
+                    >
+                        <span class="label">{rootText(root)}</span>
+                        {#if root.children?.length}
+                            <i class="caret" aria-hidden="true"></i>
+                        {/if}
+                    </div>
+                {/each}
+            </div>
+        </div>
+        {#if hasOverflow}
+            <button type="button" class="scroll-button next" aria-label="向右滚动菜单" disabled={!canScrollRight} onclick={() => scrollMenu(1)}>
+                <i aria-hidden="true"></i>
+            </button>
+        {/if}
+        {#if openRootIdx !== null && items[openRootIdx]?.children?.length}
+            <div
+                class="dropdown-panel"
+                style:left="{dropdownLeft}px"
+                use:outerClick={() => { openRootIdx = null; }}
+            >
+                <ul class="dropdown">
+                    {#each items[openRootIdx].children ?? [] as child}
+                        <NavigatorMenuItem menu={child} onMenuItemClick={handleLeafClickInDropdown} {textField} cascade={true}/>
+                    {/each}
+                </ul>
+            </div>
+        {/if}
+    </nav>
+{/if}
+
+<style>
+    .topside-navigator-menu {
+        display: block;
+        width: 100%;
+        user-select: none;
+        background-color: var(--topside-nav-menu-bg);
+        color: var(--topside-nav-menu-color);
+        position: relative;
+        box-sizing: border-box;
+        font-size: 15px;
+    }
+
+    /* ---------- vertical（保持原样式） ---------- */
+    .topside-navigator-menu.vertical {
+        height: 100%;
+        overflow-x: hidden;
+        overflow-y: auto;
+        padding: 0.5em 1em 0.5em 0;
+    }
+
+    .topside-navigator-menu.vertical ul {
+        list-style-type: none;
+        padding-left: 0;
+        width: 100%;
+        box-sizing: border-box;
+        margin: 0;
+    }
+
+    /* ---------- horizontal 顶栏 ---------- */
+    .topside-navigator-menu.horizontal {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 0;
+        padding: 0 12px;
+        height: 48px;
+    }
+
+    .scroll-viewport {
+        flex: 1 1 auto;
+        min-width: 0;
+        height: 100%;
+        overflow-x: auto;
+        overflow-y: hidden;
+        scrollbar-width: none;
+        scroll-behavior: smooth;
+    }
+
+    .scroll-viewport::-webkit-scrollbar {
+        display: none;
+    }
+
+    .scroll-track {
+        display: flex;
+        align-items: center;
+        width: max-content;
+        min-width: 100%;
+        height: 100%;
+    }
+
+    .scroll-button {
+        flex: 0 0 32px;
+        width: 32px;
+        height: 100%;
+        padding: 0;
+        border: 0;
+        background: var(--topside-nav-menu-bg);
+        color: inherit;
+        cursor: pointer;
+        opacity: 0;
+        visibility: hidden;
+        pointer-events: none;
+        transition: opacity 0.15s ease, visibility 0.15s ease;
+    }
+
+    .topside-navigator-menu.horizontal:hover .scroll-button,
+    .topside-navigator-menu.horizontal:focus-within .scroll-button {
+        opacity: 1;
+        visibility: visible;
+        pointer-events: auto;
+    }
+
+    .scroll-button:hover:not(:disabled) {
+        background-color: var(--topside-nav-menu-hover-bg);
+        color: var(--topside-nav-menu-hover-color);
+    }
+
+    .scroll-button:disabled {
+        cursor: default;
+        opacity: 0.35;
+    }
+
+    .scroll-button i {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        border-top: 2px solid currentColor;
+        border-left: 2px solid currentColor;
+    }
+
+    .scroll-button.previous i {
+        transform: rotate(-45deg);
+    }
+
+    .scroll-button.next i {
+        transform: rotate(135deg);
+    }
+
+    .topside-navigator-menu.horizontal .root-item {
+        position: relative;
+        padding: 0 16px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        white-space: nowrap;
+        border-radius: 4px;
+
+        &:hover,
+        &.open {
+            background-color: var(--topside-nav-menu-hover-bg);
+            color: var(--topside-nav-menu-hover-color);
+        }
+
+        .label {
+            display: inline-block;
+        }
+
+        .caret {
+            display: inline-block;
+            margin-left: 6px;
+            border: 4px solid transparent;
+            border-top-color: currentColor;
+            transform: translateY(2px);
+        }
+    }
+
+    /* dropdown —— 直接贴在 root-item 底部，不留间隙 */
+    .dropdown-panel {
+        position: absolute;
+        top: 100%;
+        z-index: 1000;
+    }
+
+    .dropdown {
+        list-style: none;
+        margin: 0;
+        padding: 4px 0;
+        background: var(--topside-nav-menu-bg, #fff);
+        color: var(--topside-nav-menu-color, #374151);
+        border-radius: 6px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        min-width: 180px;
+    }
+</style>

package/dist/navigation/nav_menu/NavigatorMenu.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Direction } from "../../types";
+import type MenuItem from "./MenuItem";
+import type { MenuNode, OnMenuItemClick } from "./MenuItem";
+type GetText<T> = (item: T) => string;
+interface Props {
+    /** 菜单节点列表 */
+    items?: Array<MenuNode>;
+    style?: string;
+    textField: string | GetText<MenuItem>;
+    onItemClick: OnMenuItemClick;
+    /** 菜单方向 */
+    direction?: Direction;
+    theme?: string;
+}
+declare const NavigatorMenu: import("svelte").Component<Props, {}, "">;
+type NavigatorMenu = ReturnType<typeof NavigatorMenu>;
+export default NavigatorMenu;

package/dist/navigation/nav_menu/NavigatorMenuItem.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+    import {slide, fly} from "svelte/transition";
+    import type MenuItem from "./MenuItem";
+    import type {MenuNode, OnMenuItemClick} from "./MenuItem";
+    import NavigatorMenuItem from "./NavigatorMenuItem.svelte";
+
+    type GetText<T> = (item: T) => string;
+
+    interface Props {
+        menu: MenuNode;
+        textField: string | GetText<MenuItem>;
+        onMenuItemClick: OnMenuItemClick;
+        defaultExpand?: boolean;
+        /**
+         * 子菜单以级联方式展开（向右飞出，空间不够时向左）。
+         * 用于横向菜单 dropdown 内部。默认 false（嵌套堆叠）。
+         */
+        cascade?: boolean;
+    }
+
+    let {
+        menu,
+        textField,
+        onMenuItemClick,
+        defaultExpand = false,
+        cascade = false
+    }: Props = $props();
+
+    // defaultExpand seeds local interaction state once; subsequent prop changes must
+    // not overwrite a choice the user has already made.
+    const getInitialExpanded = () => defaultExpand;
+    let expand = $state(getInitialExpanded());
+    let respond = $state(true);
+    let liEl: HTMLElement;
+    /** true = 子菜单飞到左边（右边空间不够时） */
+    let flyLeft = $state(false);
+
+    let expandable = $derived(!!menu.children?.length);
+    let menuText = $derived(typeof textField == 'string' ? menu.item?.[textField] ?? 'Unknown item' : textField(menu.item));
+
+    // 级联模式下，展开前先测一下右边够不够放子菜单
+    const measureFlyout = () => {
+        if (!liEl) return;
+        const rect = liEl.getBoundingClientRect();
+        const assumedSubmenuWidth = 200;
+        flyLeft = rect.right + assumedSubmenuWidth > window.innerWidth;
+    };
+
+    function handleMenuItemClick() {
+        if (respond) {
+            respond = false;
+            setTimeout(() => respond = true, 200);
+            if (expandable) {
+                if (cascade && !expand) {
+                    measureFlyout();
+                }
+                expand = !expand;
+            } else {
+                onMenuItemClick?.(menu.item);
+            }
+        }
+    }
+
+    function handleMenuItemKeyDown(e: KeyboardEvent) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleMenuItemClick();
+        }
+    }
+</script>
+
+<li bind:this={liEl} class:expandable class:fold={!expand} class:cascade class:fly-left={flyLeft}>
+    <span
+        onclick={handleMenuItemClick}
+        onkeydown={handleMenuItemKeyDown}
+        role="button" tabindex="0"
+        aria-expanded={expandable ? expand : undefined}
+    >
+        <span class="label">{menuText}</span>
+        {#if expandable}
+            {#if cascade}
+                <i class="flyout-arrow" aria-hidden="true"></i>
+            {/if}
+        {/if}
+    </span>
+    {#if expandable && expand}
+        {#if cascade}
+            <ul class="flyout" transition:fly={{duration: 200, x: flyLeft ? -20 : 20}}>
+                {#each menu.children ?? [] as el}
+                    <NavigatorMenuItem menu={el} {onMenuItemClick} {textField} {cascade}/>
+                {/each}
+            </ul>
+        {:else}
+            <ul class="inline" transition:slide={{duration: 200}}>
+                {#each menu.children ?? [] as el}
+                    <NavigatorMenuItem menu={el} {onMenuItemClick} {textField} {cascade}/>
+                {/each}
+            </ul>
+        {/if}
+    {/if}
+</li>
+
+<style>
+    li {
+        position: relative;
+    }
+
+    li span {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        line-height: 1.5em;
+        box-sizing: border-box;
+        padding: 0.25em 0.75em 0.25em 0.5em;
+        cursor: pointer;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    li span:hover {
+        background-color: var(--topside-nav-menu-hover-bg);
+        color: var(--topside-nav-menu-hover-color);
+        border-radius: 4px;
+    }
+
+    li.expandable > span .label {
+        flex: 1 1 auto;
+    }
+
+    /* vertical 模式：hover 时右侧出现 ▲，fold 状态翻转 */
+    li:not(.cascade).expandable > span::after {
+        content: '▲';
+        transition: transform 200ms;
+        font-size: 0.9em;
+        margin-left: 8px;
+        color: var(--topside-nav-menu-color);
+    }
+    li:not(.cascade).fold > span::after {
+        transform: rotate(180deg);
+    }
+
+    /* cascade 模式：永远显示 ▶ 指示有侧向子菜单 */
+    li.cascade.expandable .flyout-arrow {
+        font-style: normal;
+        margin-left: 16px;
+        flex: 0 0 auto;
+    }
+    li.cascade.expandable .flyout-arrow::before {
+        content: '▶';
+        font-size: 0.7em;
+    }
+
+    /* vertical 嵌套 ul */
+    ul.inline {
+        list-style-type: none;
+        padding-left: 1em;
+        width: 100%;
+        box-sizing: border-box;
+        margin: 0;
+    }
+
+    /* 横向 cascade ul：默认飞到右边 */
+    ul.flyout {
+        list-style-type: none;
+        position: absolute;
+        top: 0;
+        left: 100%;
+        margin: 0;
+        padding: 4px 0;
+        background: var(--topside-nav-menu-bg, #fff);
+        color: var(--topside-nav-menu-color, #374151);
+        border-radius: 6px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        min-width: 180px;
+        z-index: 1000;
+    }
+
+    li.fly-left ul.flyout {
+        left: auto;
+        right: 100%;
+    }
+</style>

package/dist/navigation/nav_menu/NavigatorMenuItem.svelte.d.ts

@@ -0,0 +1,18 @@
+import type MenuItem from "./MenuItem";
+import type { MenuNode, OnMenuItemClick } from "./MenuItem";
+import NavigatorMenuItem from "./NavigatorMenuItem.svelte";
+type GetText<T> = (item: T) => string;
+interface Props {
+    menu: MenuNode;
+    textField: string | GetText<MenuItem>;
+    onMenuItemClick: OnMenuItemClick;
+    defaultExpand?: boolean;
+    /**
+     * 子菜单以级联方式展开（向右飞出，空间不够时向左）。
+     * 用于横向菜单 dropdown 内部。默认 false（嵌套堆叠）。
+     */
+    cascade?: boolean;
+}
+declare const NavigatorMenuItem: import("svelte").Component<Props, {}, "">;
+type NavigatorMenuItem = ReturnType<typeof NavigatorMenuItem>;
+export default NavigatorMenuItem;