lumen-plus 0.0.1

package/dist/components/Drawer/Drawer.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import type { DrawerDirection } from './types';
+interface DrawerProps {
+    open?: boolean;
+    title?: string | Snippet;
+    direction?: DrawerDirection;
+    size?: string | number;
+    showClose?: boolean;
+    modal?: boolean;
+    closeOnClickModal?: boolean;
+    closeOnPressEscape?: boolean;
+    lockScroll?: boolean;
+    appendToBody?: boolean;
+    beforeClose?: () => boolean | Promise<boolean>;
+    onclose?: () => void;
+    onopen?: () => void;
+    header?: Snippet;
+    footer?: Snippet<[{
+        close: () => void;
+    }]>;
+    children?: Snippet;
+    class?: string;
+}
+declare const Drawer: import("svelte").Component<DrawerProps, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/components/Drawer/index.d.ts

@@ -0,0 +1,4 @@
+import Drawer from './Drawer.svelte';
+export { Drawer };
+export type { DrawerProps, DrawerDirection } from './types';
+export default Drawer;

package/dist/components/Drawer/index.js

@@ -0,0 +1,3 @@
+import Drawer from './Drawer.svelte';
+export { Drawer };
+export default Drawer;

package/dist/components/Drawer/types.d.ts

@@ -0,0 +1,40 @@
+import type { Snippet } from 'svelte';
+/** Drawer 方向 */
+export type DrawerDirection = 'ltr' | 'rtl' | 'ttb' | 'btt';
+/** Drawer 属性 */
+export interface DrawerProps {
+    /** 是否显示 */
+    open?: boolean;
+    /** 标题 */
+    title?: string | Snippet;
+    /** 方向 */
+    direction?: DrawerDirection;
+    /** 尺寸（宽度或高度） */
+    size?: string | number;
+    /** 是否显示关闭按钮 */
+    showClose?: boolean;
+    /** 是否显示遮罩 */
+    modal?: boolean;
+    /** 点击遮罩是否关闭 */
+    closeOnClickModal?: boolean;
+    /** 按 ESC 是否关闭 */
+    closeOnPressEscape?: boolean;
+    /** 是否锁定 body 滚动 */
+    lockScroll?: boolean;
+    /** 是否追加到 body */
+    appendToBody?: boolean;
+    /** 关闭前回调 */
+    beforeClose?: () => boolean | Promise<boolean>;
+    /** 关闭事件 */
+    onclose?: () => void;
+    /** 打开事件 */
+    onopen?: () => void;
+    /** 头部插槽 */
+    header?: Snippet;
+    /** 底部插槽 */
+    footer?: Snippet;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Drawer/types.js

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

package/dist/components/Dropdown/Dropdown.svelte

@@ -0,0 +1,387 @@
+<script lang="ts">
+    import type { DropdownProps } from './types'
+    import { setDropdownContext } from './DropdownContext'
+    import { onDestroy } from 'svelte'
+    import { scale } from 'svelte/transition'
+    import { ChevronDown } from 'lucide'
+    import Icon from '../../Icon/src'
+
+    type DropdownExclusiveOpenDetail = {
+        group: string
+        id: string
+    }
+
+    let {
+        trigger = 'hover',
+        placement = 'bottom',
+        disabled = false,
+        hideOnClick = true,
+        showTimeout = 150,
+        hideTimeout = 150,
+        maxHeight,
+        showArrow = true,
+        offset = 12,
+        showCaret = true,
+        icon,
+        iconSize = 16,
+        prefix,
+        group,
+        splitButton = false,
+        type = 'default',
+        size = 'default',
+        popperClass = '',
+        children,
+        dropdown,
+        class: cls = '',
+        onclick,
+        oncommand,
+        onvisibleChange
+    }: DropdownProps = $props()
+
+    let visible = $state(false)
+    // 用于承载 Svelte 的 in/out 动画（与 visible 解耦，避免关闭瞬间闪烁）
+    let motionVisible = $state(false)
+    let triggerRef = $state<HTMLElement | null>(null)
+    let popperRef = $state<HTMLElement | null>(null)
+    let showTimer: ReturnType<typeof setTimeout> | null = null
+    let hideTimer: ReturnType<typeof setTimeout> | null = null
+    
+    // 自适应定位 - 使用固定定位精确控制位置
+    let computedStyle = $state<{ top: string; left: string } | null>(null)
+    let computedPlacement = $state<string | null>(null)
+    const finalPlacement = $derived(computedPlacement || placement)
+
+    const instanceId =
+        typeof globalThis !== 'undefined' && 'crypto' in globalThis && typeof globalThis.crypto?.randomUUID === 'function'
+            ? globalThis.crypto.randomUUID()
+            : `${Date.now()}-${Math.random().toString(16).slice(2)}`
+
+    const broadcastExclusiveOpen = (): void => {
+        if (!group) return
+        if (typeof document === 'undefined') return
+        document.dispatchEvent(
+            new CustomEvent<DropdownExclusiveOpenDetail>('lm-dropdown:exclusive-open', {
+                detail: { group, id: instanceId }
+            })
+        )
+    }
+
+    const clearTimers = (): void => {
+        if (showTimer) {
+            clearTimeout(showTimer)
+            showTimer = null
+        }
+        if (hideTimer) {
+            clearTimeout(hideTimer)
+            hideTimer = null
+        }
+    }
+
+    const open = (): void => {
+        if (disabled) return
+        clearTimers()
+        visible = true
+        motionVisible = true
+        broadcastExclusiveOpen()
+        onvisibleChange?.(true)
+    }
+
+    const close = (): void => {
+        clearTimers()
+        visible = false
+        motionVisible = false
+        onvisibleChange?.(false)
+    }
+
+    const handleExclusiveOpen = (e: Event): void => {
+        if (!group) return
+        const { detail } = e as CustomEvent<DropdownExclusiveOpenDetail>
+        if (!detail || detail.group !== group || detail.id === instanceId) return
+        if (visible) close()
+    }
+
+    const delayOpen = (): void => {
+        if (disabled) return
+        clearTimers()
+        showTimer = setTimeout(open, showTimeout)
+    }
+
+    const delayClose = (): void => {
+        clearTimers()
+        hideTimer = setTimeout(close, hideTimeout)
+    }
+
+    const handleTriggerClick = (e: MouseEvent): void => {
+        if (disabled) return
+        e.stopPropagation()
+        if (trigger === 'click') {
+            visible ? close() : open()
+        }
+    }
+
+    const handleTriggerContextMenu = (e: MouseEvent): void => {
+        if (disabled || trigger !== 'contextmenu') return
+        e.preventDefault()
+        e.stopPropagation()
+        open()
+    }
+
+    const handleTriggerEnter = (): void => {
+        if (trigger !== 'hover') return
+        delayOpen()
+    }
+
+    const handleTriggerLeave = (): void => {
+        if (trigger !== 'hover') return
+        delayClose()
+    }
+
+    const handlePopperEnter = (): void => {
+        if (trigger !== 'hover') return
+        clearTimers()
+    }
+
+    const handlePopperLeave = (): void => {
+        if (trigger !== 'hover') return
+        delayClose()
+    }
+
+    const handleCommand = (command: string | number | object | undefined): void => {
+        oncommand?.(command as string | number | object)
+        if (hideOnClick) close()
+    }
+
+    const handleClickOutside = (e: MouseEvent): void => {
+        if (!visible) return
+        const target = e.target as Node
+        if (triggerRef?.contains(target) || popperRef?.contains(target)) return
+        close()
+    }
+
+    const handleSplitClick = (): void => {
+        onclick?.()
+    }
+
+    // 设置上下文供子组件使用
+    setDropdownContext({
+        handleCommand,
+        close
+    })
+
+    // 计算弹出位置
+    const computePosition = (): void => {
+        if (!popperRef || !triggerRef) return
+        
+        const triggerRect = triggerRef.getBoundingClientRect()
+        const viewportW = window.innerWidth
+        const viewportH = window.innerHeight
+        const gap = offset
+        const margin = 8
+        
+        // 先测量 popper 尺寸（需要确保内部内容已渲染）
+        const popperW = popperRef.offsetWidth
+        const popperH = popperRef.offsetHeight
+        
+        let pl = placement
+        let x: number
+        let y: number
+        
+        // 计算初始位置并检测主轴翻转
+        const canPlaceTop = triggerRect.top - gap - popperH >= margin
+        const canPlaceBottom = triggerRect.bottom + gap + popperH <= viewportH - margin
+        const canPlaceLeft = triggerRect.left - gap - popperW >= margin
+        const canPlaceRight = triggerRect.right + gap + popperW <= viewportW - margin
+        
+        if (pl.startsWith('bottom') && !canPlaceBottom && canPlaceTop) {
+            pl = pl.replace('bottom', 'top') as typeof placement
+        } else if (pl.startsWith('top') && !canPlaceTop && canPlaceBottom) {
+            pl = pl.replace('top', 'bottom') as typeof placement
+        } else if (pl.startsWith('left') && !canPlaceLeft && canPlaceRight) {
+            pl = pl.replace('left', 'right') as typeof placement
+        } else if (pl.startsWith('right') && !canPlaceRight && canPlaceLeft) {
+            pl = pl.replace('right', 'left') as typeof placement
+        }
+        
+        // 计算主轴坐标
+        if (pl.startsWith('top')) {
+            y = triggerRect.top - gap - popperH
+        } else if (pl.startsWith('bottom')) {
+            y = triggerRect.bottom + gap
+        } else if (pl.startsWith('left')) {
+            x = triggerRect.left - gap - popperW
+        } else {
+            x = triggerRect.right + gap
+        }
+        
+        // 计算次轴坐标
+        if (pl.startsWith('top') || pl.startsWith('bottom')) {
+            if (pl.endsWith('-start')) {
+                x = triggerRect.left
+            } else if (pl.endsWith('-end')) {
+                x = triggerRect.right - popperW
+            } else {
+                x = triggerRect.left + (triggerRect.width - popperW) / 2
+            }
+            // 水平边界约束
+            x = Math.max(margin, Math.min(x!, viewportW - popperW - margin))
+        } else {
+            if (pl.endsWith('-start')) {
+                y = triggerRect.top
+            } else if (pl.endsWith('-end')) {
+                y = triggerRect.bottom - popperH
+            } else {
+                y = triggerRect.top + (triggerRect.height - popperH) / 2
+            }
+            // 垂直边界约束
+            y = Math.max(margin, Math.min(y!, viewportH - popperH - margin))
+        }
+        
+        computedPlacement = pl
+        computedStyle = { top: `${y!}px`, left: `${x!}px` }
+    }
+
+    $effect(() => {
+        if (group && typeof document !== 'undefined') {
+            document.addEventListener('lm-dropdown:exclusive-open', handleExclusiveOpen)
+            return () => document.removeEventListener('lm-dropdown:exclusive-open', handleExclusiveOpen)
+        }
+    })
+
+    $effect(() => {
+        if (visible) {
+            document.addEventListener('click', handleClickOutside)
+            
+            // 使用 requestAnimationFrame 确保 DOM 已渲染
+            requestAnimationFrame(() => {
+                computePosition()
+            })
+
+            return () => document.removeEventListener('click', handleClickOutside)
+        }
+    })
+
+    onDestroy(() => {
+        clearTimers()
+    })
+
+    const rootClasses = $derived(`lm-dropdown${visible ? ' is-open' : ''}${cls ? ` ${cls}` : ''}`)
+    const popperClasses = $derived(
+        `lm-dropdown__popper is-${finalPlacement}${popperClass ? ` ${popperClass}` : ''}`
+    )
+    const sizeClass = $derived(size !== 'default' ? ` lm-dropdown--${size}` : '')
+
+    const buttonSizeClass = $derived(size !== 'default' ? ` lm-button--${size}` : '')
+    const mainButtonClass = $derived(`lm-button lm-button--${type}${buttonSizeClass}`)
+    const caretButtonClass = $derived(`lm-button lm-button--${type} lm-dropdown__caret-button${buttonSizeClass}`)
+
+    const caretIconSize = $derived(size === 'large' ? 14 : size === 'small' ? 12 : 13)
+
+    const maxHeightVar = $derived(
+        maxHeight ? (typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight) : undefined
+    )
+
+    const popperTop = $derived(computedStyle?.top)
+    const popperLeft = $derived(computedStyle?.left)
+</script>
+
+<div class={rootClasses + sizeClass}>
+    {#if splitButton}
+        <div class="lm-dropdown__split-button" bind:this={triggerRef}>
+            <button
+                class={mainButtonClass}
+                type="button"
+                disabled={disabled}
+                onclick={handleSplitClick}
+            >
+                {#if children}
+                    {@render children()}
+                {/if}
+            </button>
+            <button
+                class={caretButtonClass}
+                type="button"
+                disabled={disabled}
+                aria-label="打开下拉菜单"
+                title="打开下拉菜单"
+                onclick={handleTriggerClick}
+                oncontextmenu={handleTriggerContextMenu}
+                onmouseenter={handleTriggerEnter}
+                onmouseleave={handleTriggerLeave}
+            >
+                <Icon icon={ChevronDown} size={caretIconSize} aria-hidden="true" />
+            </button>
+        </div>
+    {:else}
+        <div
+            class="lm-dropdown__trigger"
+            bind:this={triggerRef}
+            role="button"
+            tabindex={disabled ? -1 : 0}
+            onclick={handleTriggerClick}
+            oncontextmenu={handleTriggerContextMenu}
+            onmouseenter={handleTriggerEnter}
+            onmouseleave={handleTriggerLeave}
+            onkeydown={(e: KeyboardEvent) => {
+                if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+                    e.preventDefault()
+                    open()
+                }
+            }}
+        >
+            {#if prefix}
+                <span class="lm-dropdown__trigger-prefix">
+                    {@render prefix()}
+                </span>
+            {:else if icon}
+                <span class="lm-dropdown__trigger-icon">
+                    <Icon icon={icon} size={iconSize} />
+                </span>
+            {/if}
+            {#if children}
+                {@render children()}
+            {/if}
+            {#if showCaret}
+                <span class="lm-dropdown__caret" aria-hidden="true">
+                    <Icon icon={ChevronDown} size={caretIconSize} />
+                </span>
+            {/if}
+        </div>
+    {/if}
+
+    <div
+        class={popperClasses}
+        bind:this={popperRef}
+        role="menu"
+        tabindex="-1"
+        style:--lm-dropdown-top={popperTop}
+        style:--lm-dropdown-left={popperLeft}
+        style:--lm-dropdown-max-height={maxHeightVar}
+        aria-hidden={!motionVisible}
+        onmouseenter={handlePopperEnter}
+        onmouseleave={handlePopperLeave}
+    >
+        {#if motionVisible}
+            <div
+                class="lm-dropdown__motion"
+                transition:scale|global={{ duration: 160, start: 0.95 }}
+                onintrostart={() => {
+                    // 确保动画开始时已经定位到正确坐标
+                    requestAnimationFrame(() => computePosition())
+                }}
+                onintroend={() => {
+                    // 动画完成后再算一次，避免字体/图标加载导致尺寸变化
+                    requestAnimationFrame(() => computePosition())
+                }}
+            >
+                {#if showArrow}
+                    <div class="lm-dropdown__arrow"></div>
+                {/if}
+                <div class="lm-dropdown__content">
+                    {#if dropdown}
+                        {@render dropdown()}
+                    {/if}
+                </div>
+            </div>
+        {/if}
+    </div>
+</div>

package/dist/components/Dropdown/Dropdown.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DropdownProps } from './types';
+declare const Dropdown: import("svelte").Component<DropdownProps, {}, "">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

package/dist/components/Dropdown/DropdownContext.d.ts

@@ -0,0 +1,7 @@
+export declare const DROPDOWN_CONTEXT_KEY: unique symbol;
+export interface DropdownContext {
+    handleCommand: (command: string | number | object | undefined) => void;
+    close: () => void;
+}
+export declare const setDropdownContext: (ctx: DropdownContext) => void;
+export declare const getDropdownContext: () => DropdownContext | undefined;

package/dist/components/Dropdown/DropdownContext.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from 'svelte';
+export const DROPDOWN_CONTEXT_KEY = Symbol('dropdown');
+export const setDropdownContext = (ctx) => {
+    setContext(DROPDOWN_CONTEXT_KEY, ctx);
+};
+export const getDropdownContext = () => {
+    return getContext(DROPDOWN_CONTEXT_KEY);
+};

package/dist/components/Dropdown/DropdownItem.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    import type { DropdownItemProps } from './types'
+    import { getDropdownContext } from './DropdownContext'
+
+    let {
+        command,
+        disabled = false,
+        divided = false,
+        icon,
+        children,
+        class: cls = ''
+    }: DropdownItemProps = $props()
+
+    const ctx = getDropdownContext()
+
+    const handleClick = (): void => {
+        if (disabled) return
+        ctx?.handleCommand(command)
+    }
+
+    const handleKeyDown = (e: KeyboardEvent): void => {
+        if (disabled) return
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            ctx?.handleCommand(command)
+        }
+    }
+
+    const classes = $derived(
+        `lm-dropdown-item${disabled ? ' is-disabled' : ''}${divided ? ' is-divided' : ''}${cls ? ` ${cls}` : ''}`
+    )
+</script>
+
+<li
+    class={classes}
+    role="menuitem"
+    tabindex={disabled ? -1 : 0}
+    aria-disabled={disabled}
+    onclick={handleClick}
+    onkeydown={handleKeyDown}
+>
+    {#if icon}
+        <span class="lm-dropdown-item__icon">
+            {@render icon()}
+        </span>
+    {/if}
+    {#if children}
+        {@render children()}
+    {/if}
+</li>

package/dist/components/Dropdown/DropdownItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DropdownItemProps } from './types';
+declare const DropdownItem: import("svelte").Component<DropdownItemProps, {}, "">;
+type DropdownItem = ReturnType<typeof DropdownItem>;
+export default DropdownItem;

package/dist/components/Dropdown/DropdownMenu.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import type { DropdownMenuProps } from './types'
+
+    let {
+        children,
+        class: cls = ''
+    }: DropdownMenuProps = $props()
+
+    const classes = $derived(`lm-dropdown-menu${cls ? ` ${cls}` : ''}`)
+</script>
+
+<ul class={classes} role="menu">
+    {#if children}
+        {@render children()}
+    {/if}
+</ul>

package/dist/components/Dropdown/DropdownMenu.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DropdownMenuProps } from './types';
+declare const DropdownMenu: import("svelte").Component<DropdownMenuProps, {}, "">;
+type DropdownMenu = ReturnType<typeof DropdownMenu>;
+export default DropdownMenu;

package/dist/components/Dropdown/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Dropdown } from './Dropdown.svelte';
+export { default as DropdownMenu } from './DropdownMenu.svelte';
+export { default as DropdownItem } from './DropdownItem.svelte';
+export * from './types';
+export * from './DropdownContext';

package/dist/components/Dropdown/index.js

@@ -0,0 +1,5 @@
+export { default as Dropdown } from './Dropdown.svelte';
+export { default as DropdownMenu } from './DropdownMenu.svelte';
+export { default as DropdownItem } from './DropdownItem.svelte';
+export * from './types';
+export * from './DropdownContext';

package/dist/components/Dropdown/types.d.ts

@@ -0,0 +1,81 @@
+import type { Snippet } from 'svelte';
+import type { IconNode } from 'lucide';
+/** Dropdown 触发方式 */
+export type DropdownTrigger = 'hover' | 'click' | 'contextmenu';
+/** Dropdown 位置 */
+export type DropdownPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+/** Dropdown 尺寸 */
+export type DropdownSize = 'large' | 'default' | 'small';
+/** Dropdown 属性 */
+export interface DropdownProps {
+    /** 触发器左侧图标（lucide IconNode） */
+    icon?: IconNode;
+    /** 图标尺寸，默认 16 */
+    iconSize?: number;
+    /** 触发器左侧自定义内容（如 Avatar），优先级高于 icon */
+    prefix?: Snippet;
+    /** 触发方式 */
+    trigger?: DropdownTrigger;
+    /** 弹出位置 */
+    placement?: DropdownPlacement;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 点击菜单项后是否隐藏菜单 */
+    hideOnClick?: boolean;
+    /** 弹出延迟（hover 时生效，毫秒） */
+    showTimeout?: number;
+    /** 隐藏延迟（hover 时生效，毫秒） */
+    hideTimeout?: number;
+    /** 下拉菜单最大高度 */
+    maxHeight?: number | string;
+    /** 是否显示箭头 */
+    showArrow?: boolean;
+    /** 弹层与触发器间隔（px） */
+    offset?: number;
+    /** 触发器右侧是否显示下拉箭头（默认 false，推荐在 Button 内自渲染箭头） */
+    showCaret?: boolean;
+    /** 同组互斥：同一 group 的 Dropdown 打开时会关闭其它同组 */
+    group?: string;
+    /** 是否为分割按钮模式 */
+    splitButton?: boolean;
+    /** 按钮类型（split-button 模式） */
+    type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default';
+    /** 尺寸 */
+    size?: DropdownSize;
+    /** 弹出框自定义类名 */
+    popperClass?: string;
+    /** 触发元素 */
+    children?: Snippet;
+    /** 下拉菜单内容 */
+    dropdown?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+    /** 点击分割按钮左侧时触发 */
+    onclick?: () => void;
+    /** 点击菜单项时触发，参数为 command */
+    oncommand?: (command: string | number | object) => void;
+    /** 下拉菜单显示/隐藏时触发 */
+    onvisibleChange?: (visible: boolean) => void;
+}
+/** DropdownMenu 属性 */
+export interface DropdownMenuProps {
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** DropdownItem 属性 */
+export interface DropdownItemProps {
+    /** 指令，点击后会作为参数传给 oncommand 回调 */
+    command?: string | number | object;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否显示分割线 */
+    divided?: boolean;
+    /** 图标 */
+    icon?: Snippet;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Dropdown/types.js

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