lumen-plus 0.0.1

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

@@ -0,0 +1,180 @@
+import type { Snippet } from 'svelte';
+export type TableCellComponentProps<T = any> = Record<string, any> | ((row: T, column: TableColumn<T>, cellValue: any, index: number) => Record<string, any>);
+/** 表格列对齐方式 */
+export type TableAlign = 'left' | 'center' | 'right';
+/** 表格尺寸 */
+export type TableSize = 'large' | 'default' | 'small';
+/** 排序方向 */
+export type SortOrder = 'ascending' | 'descending' | null;
+/** 操作按钮类型 */
+export type TableActionButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+/** 操作按钮定义 */
+export interface TableActionButton<T = any> {
+    /** 按钮文本 */
+    label: string;
+    /** 按钮类型 */
+    type?: TableActionButtonType;
+    /** 是否禁用（可为函数动态判断） */
+    disabled?: boolean | ((row: T, index: number) => boolean);
+    /** 是否隐藏（可为函数动态判断） */
+    hidden?: boolean | ((row: T, index: number) => boolean);
+    /** 点击回调 */
+    onClick: (row: T, index: number) => void;
+}
+/** 表格列定义 */
+export interface TableColumn<T = any> {
+    /** 列标识 */
+    prop?: string;
+    /** 列标题 */
+    label?: string;
+    /** 列宽度 */
+    width?: number | string;
+    /** 最小宽度 */
+    minWidth?: number | string;
+    /** 是否固定列 */
+    fixed?: 'left' | 'right' | boolean;
+    /** 对齐方式 */
+    align?: TableAlign;
+    /** 表头对齐方式 */
+    headerAlign?: TableAlign;
+    /** 是否可排序 */
+    sortable?: boolean | 'custom';
+    /** 排序方法 */
+    sortMethod?: (a: T, b: T) => number;
+    /** 排序顺序 */
+    sortOrders?: SortOrder[];
+    /** 是否显示溢出提示 */
+    showOverflowTooltip?: boolean;
+    /** 格式化函数 */
+    formatter?: (row: T, column: TableColumn<T>, cellValue: any, index: number) => string | number;
+    /**
+     * 直接渲染一个组件作为单元格内容（例如 Tag）。
+     * 适合仅需要组件 + 文本内容的场景；复杂内容请使用 render。
+     */
+    cellComponent?: any;
+    /** cellComponent 的 props（对象或函数） */
+    cellComponentProps?: TableCellComponentProps<T>;
+    /** 列类名 */
+    className?: string;
+    /** 表头类名 */
+    labelClassName?: string;
+    /** 是否可调整列宽 */
+    resizable?: boolean;
+    /** 自定义渲染单元格 */
+    render?: Snippet<[{
+        row: T;
+        column: TableColumn<T>;
+        $index: number;
+        cellValue: any;
+    }]>;
+    /** 自定义渲染表头 */
+    renderHeader?: Snippet<[{
+        column: TableColumn<T>;
+        $index: number;
+    }]>;
+    /** 子列（用于多级表头） */
+    children?: TableColumn<T>[];
+    /** 列类型 */
+    type?: 'selection' | 'index' | 'expand' | 'actions';
+    /** 索引起始值（type=index 时有效） */
+    index?: number | ((index: number) => number);
+    /** 是否可选中（type=selection 时有效） */
+    selectable?: (row: T, index: number) => boolean;
+    /** 操作按钮列表（type=actions 时有效） */
+    actions?: TableActionButton<T>[];
+}
+/** 表格属性 */
+export interface TableProps<T = any> {
+    /** 表格数据 */
+    data?: T[];
+    /** 列定义 */
+    columns?: TableColumn<T>[];
+    /** 行唯一标识字段 */
+    rowKey?: string | ((row: T) => string | number);
+    /** 表格高度 */
+    height?: number | string;
+    /** 表格最大高度 */
+    maxHeight?: number | string;
+    /** 是否显示斑马纹 */
+    stripe?: boolean;
+    /** 是否显示边框 */
+    border?: boolean;
+    /** 表格尺寸 */
+    size?: TableSize;
+    /** 列宽是否自撑开 */
+    fit?: boolean;
+    /** 是否高亮当前行 */
+    highlightCurrentRow?: boolean;
+    /** 当前选中行 */
+    currentRowKey?: string | number;
+    /** 行类名 */
+    rowClassName?: string | ((row: T, rowIndex: number) => string);
+    /** 行样式 */
+    rowStyle?: string | Record<string, string> | ((row: T, rowIndex: number) => Record<string, string>);
+    /** 单元格类名 */
+    cellClassName?: string | ((row: T, column: TableColumn<T>, rowIndex: number, columnIndex: number) => string);
+    /** 单元格样式 */
+    cellStyle?: string | Record<string, string> | ((row: T, column: TableColumn<T>, rowIndex: number, columnIndex: number) => Record<string, string>);
+    /** 表头行类名 */
+    headerRowClassName?: string | ((column: TableColumn<T>, columnIndex: number) => string);
+    /** 表头行样式 */
+    headerRowStyle?: string | Record<string, string> | ((column: TableColumn<T>, columnIndex: number) => Record<string, string>);
+    /** 表头单元格类名 */
+    headerCellClassName?: string | ((column: TableColumn<T>, columnIndex: number) => string);
+    /** 表头单元格样式 */
+    headerCellStyle?: string | Record<string, string> | ((column: TableColumn<T>, columnIndex: number) => Record<string, string>);
+    /** 空数据提示文本 */
+    emptyText?: string;
+    /** 默认展开所有行 */
+    defaultExpandAll?: boolean;
+    /** 展开行 keys */
+    expandRowKeys?: (string | number)[];
+    /** 默认排序 */
+    defaultSort?: {
+        prop: string;
+        order: SortOrder;
+    };
+    /** Tooltip 效果 */
+    tooltipEffect?: 'dark' | 'light';
+    /** Tooltip 配置 */
+    tooltipOptions?: {
+        placement?: 'top' | 'bottom' | 'left' | 'right';
+        showArrow?: boolean;
+        effect?: 'dark' | 'light';
+    };
+    /** 是否显示表头 */
+    showHeader?: boolean;
+    /** 选中行 keys（多选模式） */
+    selectedRowKeys?: (string | number)[];
+    /** 是否加载中 */
+    loading?: boolean;
+    /** 自定义类名 */
+    class?: string;
+    /** 自定义空数据内容 */
+    empty?: Snippet;
+    /** 其他属性 */
+    [key: string]: unknown;
+}
+/** 排序变更事件参数 */
+export interface SortChangeEvent<T = any> {
+    column: TableColumn<T>;
+    prop: string;
+    order: SortOrder;
+}
+/** 选择变更事件参数 */
+export interface SelectionChangeEvent<T = any> {
+    selection: T[];
+}
+/** 行点击事件参数 */
+export interface RowClickEvent<T = any> {
+    row: T;
+    column: TableColumn<T>;
+    event: MouseEvent;
+}
+/** 单元格点击事件参数 */
+export interface CellClickEvent<T = any> {
+    row: T;
+    column: TableColumn<T>;
+    cell: HTMLElement;
+    event: MouseEvent;
+}

package/dist/components/Table/types.js

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

package/dist/components/Tabs/TabPane.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import { getContext, onDestroy } from 'svelte'
+    import { TABS_CONTEXT_KEY } from './TabsContext'
+
+    interface TabPaneProps {
+        name: string
+        label?: string | Snippet | ((...args: any[]) => any)
+        disabled?: boolean
+        closable?: boolean
+        onclose?: () => void
+        children?: Snippet
+        class?: string
+    }
+
+    let { name, label, disabled = false, closable = false, onclose, children, class: cls = '', ...attrs }: TabPaneProps = $props()
+
+    const tabs = getContext<any>(TABS_CONTEXT_KEY)
+
+    $effect(() => {
+        tabs?.register?.({ name, label, disabled, closable, onclose })
+    })
+
+    onDestroy(() => {
+        tabs?.unregister?.(name)
+    })
+
+    const isActive = $derived(tabs?.active === name)
+
+    const classes = $derived(`lm-tab-pane${isActive ? ' is-active' : ''}${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} role="tabpanel" aria-hidden={!isActive || undefined} {...attrs}>
+    {#if isActive && children}
+        {@render children()}
+    {/if}
+</div>

package/dist/components/Tabs/TabPane.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface TabPaneProps {
+    name: string;
+    label?: string | Snippet | ((...args: any[]) => any);
+    disabled?: boolean;
+    closable?: boolean;
+    onclose?: () => void;
+    children?: Snippet;
+    class?: string;
+}
+declare const TabPane: import("svelte").Component<TabPaneProps, {}, "">;
+type TabPane = ReturnType<typeof TabPane>;
+export default TabPane;

package/dist/components/Tabs/Tabs.svelte

@@ -0,0 +1,251 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import { setContext } from 'svelte'
+    import { TABS_CONTEXT_KEY } from './TabsContext'
+    import Icon from '../Icon'
+    import { ChevronLeft, ChevronRight, X, Plus } from 'lucide'
+
+    interface TabsProps {
+        modelValue?: string
+        type?: 'line' | 'card' | 'button' | 'editable'
+        size?: 'small' | 'medium' | 'large'
+        editable?: boolean
+        onadd?: () => void
+        children?: Snippet
+        class?: string
+    }
+
+    type Pane = { name: string; label?: string | Snippet | ((...args: any[]) => any); disabled?: boolean; closable?: boolean; onclose?: () => void; order: number }
+
+    let { modelValue = $bindable(''), type = 'line', size = 'medium', editable = false, onadd, children, class: cls = '', ...attrs }: TabsProps = $props()
+
+    let panes = $state<Pane[]>([])
+    let navRef: HTMLDivElement | null = $state(null)
+    let indicatorStyle = $state<{ width: number; x: number }>({ width: 0, x: 0 })
+
+    let showScroll = $state(false)
+    let canScrollPrev = $state(false)
+    let canScrollNext = $state(false)
+    let pendingSelectLast = $state(false)
+
+    const register = (pane: { name: string; label?: string | Snippet | ((...args: any[]) => any); disabled?: boolean; closable?: boolean; onclose?: () => void }): void => {
+        if (!pane?.name || panes.some((p) => p.name === pane.name)) return
+        panes = [...panes, { ...pane, order: panes.length }]
+        if (!modelValue) modelValue = pane.name
+        
+        // 如果有待选中最后一个的标志，选中新添加的 tab
+        if (pendingSelectLast) {
+            modelValue = pane.name
+            pendingSelectLast = false
+            scrollToEnd()
+        }
+    }
+
+    const unregister = (name: string): void => {
+        panes = panes.filter((p) => p.name !== name)
+    }
+
+    setContext(TABS_CONTEXT_KEY, {
+        get active() {
+            return modelValue
+        },
+        register,
+        unregister,
+    })
+
+    const classes = $derived(`lm-tabs lm-tabs--${type} lm-tabs--${size}${cls ? ` ${cls}` : ''}`)
+
+    const setActive = (name: string): void => {
+        modelValue = name
+        updateIndicator()
+        scrollActiveIntoView()
+    }
+
+    const updateScrollState = (): void => {
+        if (!navRef) return
+        const overflow = navRef.scrollWidth > navRef.clientWidth + 1
+        showScroll = overflow
+        canScrollPrev = overflow && navRef.scrollLeft > 0
+        canScrollNext = overflow && navRef.scrollLeft + navRef.clientWidth < navRef.scrollWidth - 1
+    }
+
+    const scrollActiveIntoView = (): void => {
+        queueMicrotask(() => {
+            if (!navRef) return
+            const activeEl = navRef.querySelector('.lm-tabs__item.is-active') as HTMLElement | null
+            if (!activeEl) return
+
+            const navRect = navRef.getBoundingClientRect()
+            const itemRect = activeEl.getBoundingClientRect()
+
+            const leftOverflow = itemRect.left < navRect.left + 24
+            const rightOverflow = itemRect.right > navRect.right - 24
+            if (!leftOverflow && !rightOverflow) return
+
+            const nextScrollLeft = activeEl.offsetLeft - (navRef.clientWidth - activeEl.offsetWidth) / 2
+            navRef.scrollTo({ left: nextScrollLeft, behavior: 'smooth' })
+        })
+    }
+
+    const scrollNavBy = (delta: number): void => {
+        if (!navRef) return
+        navRef.scrollBy({ left: delta, behavior: 'smooth' })
+    }
+
+    const scrollToEnd = (): void => {
+        queueMicrotask(() => {
+            if (!navRef) return
+            navRef.scrollTo({ left: navRef.scrollWidth, behavior: 'smooth' })
+        })
+    }
+
+    const updateIndicator = (): void => {
+        queueMicrotask(() => {
+            if (!navRef) return
+            const activeEl = navRef.querySelector('.lm-tabs__item.is-active') as HTMLElement | null
+            if (!activeEl) return
+            const labelEl = activeEl.querySelector('.lm-tabs__label') as HTMLElement | null
+            if (labelEl) {
+                const labelRect = labelEl.getBoundingClientRect()
+                const navRect = navRef.getBoundingClientRect()
+                indicatorStyle = {
+                    width: Math.round(labelRect.width),
+                    x: Math.round(labelRect.left - navRect.left + navRef.scrollLeft),
+                }
+                return
+            }
+
+            const labelWidth = activeEl.getBoundingClientRect().width
+            const navRect = navRef.getBoundingClientRect()
+            const itemRect = activeEl.getBoundingClientRect()
+            indicatorStyle = {
+                width: Math.round(labelWidth),
+                x: Math.round(itemRect.left - navRect.left + navRef.scrollLeft + (itemRect.width - labelWidth) / 2),
+            }
+        })
+    }
+
+    $effect(() => {
+        panes
+        modelValue
+        navRef
+        updateIndicator()
+        queueMicrotask(() => updateScrollState())
+    })
+
+    const handleNavScroll = (): void => {
+        updateScrollState()
+    }
+
+    let resizeObserver: ResizeObserver | null = null
+    $effect(() => {
+        if (!navRef || typeof ResizeObserver === 'undefined') return
+        resizeObserver?.disconnect()
+        resizeObserver = new ResizeObserver(() => updateScrollState())
+        resizeObserver.observe(navRef)
+        return () => resizeObserver?.disconnect()
+    })
+</script>
+
+<div class={classes} role="tablist" {...attrs}>
+    <div class="lm-tabs__header" class:has-scroll={showScroll}>
+        {#if showScroll}
+            <button
+                type="button"
+                class="lm-tabs__scroll-btn lm-tabs__scroll-btn--prev"
+                aria-label="Scroll left"
+                disabled={!canScrollPrev}
+                onclick={(e: MouseEvent) => {
+                    e.stopPropagation()
+                    scrollNavBy(-Math.max(120, (navRef?.clientWidth ?? 0) * 0.6))
+                }}
+            >
+                <Icon icon={ChevronLeft} size={14} />
+            </button>
+        {/if}
+        <div bind:this={navRef} class="lm-tabs__nav" onscroll={handleNavScroll}>
+            {#each panes as pane}
+                <div
+                    class="lm-tabs__item"
+                    class:is-active={pane.name === modelValue}
+                    class:is-disabled={pane.disabled}
+                    class:is-closable={pane.closable || (type === 'editable' && editable)}
+                    role="tab"
+                    aria-selected={pane.name === modelValue}
+                    tabindex={pane.disabled ? -1 : 0}
+                    onclick={() => !pane.disabled && setActive(pane.name)}
+                    onkeydown={(e: KeyboardEvent) => {
+                        if (pane.disabled) return
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault()
+                            setActive(pane.name)
+                        }
+                    }}
+                >
+                    <span class="lm-tabs__label">
+                        {#if type === 'card' || type === 'button' || type === 'editable'}
+                            {#if typeof pane.label === 'string'}
+                                {pane.label}
+                            {:else}
+                                {pane.name}
+                            {/if}
+                        {:else if typeof pane.label === 'string'}
+                            {pane.label}
+                        {:else if pane.label}
+                            {@render pane.label()}
+                        {:else}
+                            {pane.name}
+                        {/if}
+                    </span>
+                    {#if pane.closable || (type === 'editable' && editable)}
+                        <button
+                            class="lm-tabs__close"
+                            type="button"
+                            aria-label="Close tab"
+                            onclick={(e: MouseEvent) => {
+                                e.stopPropagation()
+                                pane.onclose?.()
+                                unregister(pane.name)
+                            }}
+                        >
+                            <Icon icon={X} size={12} />
+                        </button>
+                    {/if}
+                </div>
+            {/each}
+            <div class="lm-tabs__indicator" style={`transform: translateX(${indicatorStyle.x}px); width: ${indicatorStyle.width}px;`}></div>
+        </div>
+        {#if showScroll}
+            <button
+                type="button"
+                class="lm-tabs__scroll-btn lm-tabs__scroll-btn--next"
+                aria-label="Scroll right"
+                disabled={!canScrollNext}
+                onclick={(e: MouseEvent) => {
+                    e.stopPropagation()
+                    scrollNavBy(Math.max(120, (navRef?.clientWidth ?? 0) * 0.6))
+                }}
+            >
+                <Icon icon={ChevronRight} size={14} />
+            </button>
+        {/if}
+        {#if type === 'editable' && editable && onadd}
+            <button
+                class="lm-tabs__add"
+                aria-label="Add tab"
+                onclick={(e: MouseEvent) => {
+                    e.stopPropagation()
+                    pendingSelectLast = true
+                    onadd?.()
+                }}
+            >
+                <Icon icon={Plus} size={14} />
+            </button>
+        {/if}
+    </div>
+    <div class="lm-tabs__content">
+        {#if children}
+            {@render children()}
+        {/if}
+    </div>
+</div>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface TabsProps {
+    modelValue?: string;
+    type?: 'line' | 'card' | 'button' | 'editable';
+    size?: 'small' | 'medium' | 'large';
+    editable?: boolean;
+    onadd?: () => void;
+    children?: Snippet;
+    class?: string;
+}
+declare const Tabs: import("svelte").Component<TabsProps, {}, "modelValue">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/Tabs/TabsContext.d.ts

@@ -0,0 +1,11 @@
+export declare const TABS_CONTEXT_KEY: unique symbol;
+export interface TabsRegisterPayload {
+    name: string;
+    label?: string;
+    disabled?: boolean;
+}
+export interface TabsContext {
+    readonly active: string;
+    register: (pane: TabsRegisterPayload) => void;
+    unregister: (name: string) => void;
+}

package/dist/components/Tabs/TabsContext.js

@@ -0,0 +1 @@
+export const TABS_CONTEXT_KEY = Symbol('lm-tabs');

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

@@ -0,0 +1,3 @@
+export { default as Tabs } from './Tabs.svelte';
+export { default as TabPane } from './TabPane.svelte';
+export type { TabsProps, TabPaneProps, TabsType, TabsSize } from './types';

package/dist/components/Tabs/index.js

@@ -0,0 +1,2 @@
+export { default as Tabs } from './Tabs.svelte';
+export { default as TabPane } from './TabPane.svelte';

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

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+/** Tabs 类型 */
+export type TabsType = 'line' | 'card' | 'button' | 'editable';
+/** Tabs 尺寸 */
+export type TabsSize = 'small' | 'medium' | 'large';
+/** Tabs 属性 */
+export interface TabsProps {
+    /** 绑定值 */
+    modelValue?: string;
+    /** 类型 */
+    type?: TabsType;
+    /** 尺寸 */
+    size?: TabsSize;
+    /** 是否可编辑 */
+    editable?: boolean;
+    /** 添加回调 */
+    onadd?: () => void;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** TabPane 属性 */
+export interface TabPaneProps {
+    /** 唯一标识 */
+    name: string;
+    /** 标签 */
+    label?: string | Snippet | ((...args: any[]) => any);
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否可关闭 */
+    closable?: boolean;
+    /** 关闭回调 */
+    onclose?: () => void;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Tabs/types.js

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

package/dist/components/Tag/Tag.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import Icon from '../Icon'
+    import { X } from 'lucide'
+
+    interface TagProps {
+        type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+        size?: 'small' | 'medium' | 'large'
+        round?: boolean
+        closable?: boolean
+        children?: Snippet
+        onclose?: () => void
+        class?: string
+    }
+
+    let { type = 'default', size = 'medium', round = false, closable = false, children, onclose, class: cls = '', ...attrs }: TagProps = $props()
+
+    let visible = $state(true)
+
+    const classes = $derived(`lm-tag lm-tag--${type} lm-tag--${size}${round ? ' is-round' : ''}${closable ? ' is-closable' : ''}${!visible ? ' is-hidden' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const handleClose = (): void => {
+        visible = false
+        onclose?.()
+    }
+</script>
+
+{#if visible}
+    <span {...attrs} class={classes}>
+        {#if children}
+            {@render children()}
+        {/if}
+        {#if closable}
+            <button class="lm-tag__close" type="button" aria-label="Close" onclick={handleClose}>
+                <Icon icon={X} size={12} />
+            </button>
+        {/if}
+    </span>
+{/if}

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface TagProps {
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    size?: 'small' | 'medium' | 'large';
+    round?: boolean;
+    closable?: boolean;
+    children?: Snippet;
+    onclose?: () => void;
+    class?: string;
+}
+declare const Tag: import("svelte").Component<TagProps, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;

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

@@ -0,0 +1,4 @@
+import Tag from './Tag.svelte';
+export { Tag };
+export type { TagProps, TagType, TagSize } from './types';
+export default Tag;

package/dist/components/Tag/index.js

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

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

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+/** Tag 类型 */
+export type TagType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+/** Tag 尺寸 */
+export type TagSize = 'small' | 'medium' | 'large';
+/** Tag 属性 */
+export interface TagProps {
+    /** 类型 */
+    type?: TagType;
+    /** 尺寸 */
+    size?: TagSize;
+    /** 是否圆角 */
+    round?: boolean;
+    /** 是否可关闭 */
+    closable?: boolean;
+    /** 子内容 */
+    children?: Snippet;
+    /** 关闭回调 */
+    onclose?: () => void;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Tag/types.js

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