lumen-plus 0.0.1

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

@@ -0,0 +1,21 @@
+export type DateTimePickerSize = 'small' | 'default' | 'large';
+export interface DateTimePickerProps {
+    /** Datetime value */
+    modelValue?: Date | string | null;
+    placeholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    readonly?: boolean;
+    size?: DateTimePickerSize;
+    /** Date display format (e.g. YYYY-MM-DD) */
+    dateFormat?: string;
+    datePlaceholder?: string;
+    /** Time format passed to TimePicker (e.g. HH:mm or HH:mm:ss) */
+    timeFormat?: string;
+    /** Default time when opening without value */
+    defaultTime?: string;
+    timePlaceholder?: string;
+    /** Whether to show the menu arrow */
+    showMenuArrow?: boolean;
+    class?: string;
+}

package/dist/components/DateTimePicker/types.js

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

package/dist/components/Descriptions/Descriptions.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { DescriptionsSize, DescriptionsDirection } from './types'
+    import { setContext } from 'svelte'
+    import { DESCRIPTIONS_CONTEXT_KEY, type DescriptionsContext } from './DescriptionsContext'
+
+    interface DescriptionsProps {
+        title?: string | Snippet
+        extra?: Snippet
+        border?: boolean
+        column?: number
+        direction?: DescriptionsDirection
+        size?: DescriptionsSize
+        children?: Snippet
+        class?: string
+    }
+
+    let { title, extra, border = false, column = 3, direction = 'horizontal', size = 'default', children, class: cls = '', ...attrs }: DescriptionsProps = $props()
+
+    const context: DescriptionsContext = {
+        get border() {
+            return border
+        },
+        get column() {
+            return column
+        },
+        get direction() {
+            return direction
+        },
+        get size() {
+            return size
+        },
+    }
+
+    setContext(DESCRIPTIONS_CONTEXT_KEY, context)
+
+    const classes = $derived(`lm-descriptions lm-descriptions--${size}${border ? ' is-bordered' : ''}${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} {...attrs}>
+    {#if title || extra}
+        <div class="lm-descriptions__header">
+            {#if title}
+                <div class="lm-descriptions__title">
+                    {#if typeof title === 'string'}
+                        {title}
+                    {:else}
+                        {@render title()}
+                    {/if}
+                </div>
+            {/if}
+            {#if extra}
+                <div class="lm-descriptions__extra">
+                    {@render extra()}
+                </div>
+            {/if}
+        </div>
+    {/if}
+
+    <div class="lm-descriptions__body">
+        <table class="lm-descriptions__table">
+            <tbody>
+                {#if children}
+                    {@render children()}
+                {/if}
+            </tbody>
+        </table>
+    </div>
+</div>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { DescriptionsSize, DescriptionsDirection } from './types';
+interface DescriptionsProps {
+    title?: string | Snippet;
+    extra?: Snippet;
+    border?: boolean;
+    column?: number;
+    direction?: DescriptionsDirection;
+    size?: DescriptionsSize;
+    children?: Snippet;
+    class?: string;
+}
+declare const Descriptions: import("svelte").Component<DescriptionsProps, {}, "">;
+type Descriptions = ReturnType<typeof Descriptions>;
+export default Descriptions;

package/dist/components/Descriptions/DescriptionsContext.d.ts

@@ -0,0 +1,8 @@
+import type { DescriptionsSize, DescriptionsDirection } from './types';
+export declare const DESCRIPTIONS_CONTEXT_KEY: unique symbol;
+export interface DescriptionsContext {
+    border: boolean;
+    column: number;
+    direction: DescriptionsDirection;
+    size: DescriptionsSize;
+}

package/dist/components/Descriptions/DescriptionsContext.js

@@ -0,0 +1 @@
+export const DESCRIPTIONS_CONTEXT_KEY = Symbol('descriptions');

package/dist/components/Descriptions/DescriptionsItem.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import { getContext } from 'svelte'
+    import { DESCRIPTIONS_CONTEXT_KEY, type DescriptionsContext } from './DescriptionsContext'
+
+    interface DescriptionsItemProps {
+        label?: string | Snippet
+        span?: number
+        labelWidth?: string | number
+        align?: 'left' | 'center' | 'right'
+        labelAlign?: 'left' | 'center' | 'right'
+        children?: Snippet
+        class?: string
+    }
+
+    let { label = '', span = 1, labelWidth, align = 'left', labelAlign = 'left', children, class: cls = '', ...attrs }: DescriptionsItemProps = $props()
+
+    const descriptions = getContext<DescriptionsContext>(DESCRIPTIONS_CONTEXT_KEY)
+    const isBordered = $derived(descriptions?.border ?? false)
+
+    const labelStyle = $derived(labelWidth ? `width: ${typeof labelWidth === 'number' ? `${labelWidth}px` : labelWidth}; text-align: ${labelAlign}` : `text-align: ${labelAlign}`)
+
+    const contentStyle = $derived(`text-align: ${align}`)
+    const classes = $derived(cls ? `lm-descriptions-item ${cls}` : 'lm-descriptions-item')
+</script>
+
+{#if isBordered}
+    <tr class={classes} {...attrs}>
+        <th class="lm-descriptions-item__label" style={labelStyle}>
+            {#if typeof label === 'string'}
+                {label}
+            {:else if label}
+                {@render label()}
+            {/if}
+        </th>
+        <td class="lm-descriptions-item__content" colspan={span * 2 - 1} style={contentStyle}>
+            {#if children}
+                {@render children()}
+            {/if}
+        </td>
+    </tr>
+{:else}
+    <tr class={classes} {...attrs}>
+        <td class="lm-descriptions-item__cell" colspan={span}>
+            <span class="lm-descriptions-item__label" style={labelStyle}>
+                {#if typeof label === 'string'}
+                    {label}
+                {:else if label}
+                    {@render label()}
+                {/if}
+            </span>
+            <span class="lm-descriptions-item__content" style={contentStyle}>
+                {#if children}
+                    {@render children()}
+                {/if}
+            </span>
+        </td>
+    </tr>
+{/if}

package/dist/components/Descriptions/DescriptionsItem.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface DescriptionsItemProps {
+    label?: string | Snippet;
+    span?: number;
+    labelWidth?: string | number;
+    align?: 'left' | 'center' | 'right';
+    labelAlign?: 'left' | 'center' | 'right';
+    children?: Snippet;
+    class?: string;
+}
+declare const DescriptionsItem: import("svelte").Component<DescriptionsItemProps, {}, "">;
+type DescriptionsItem = ReturnType<typeof DescriptionsItem>;
+export default DescriptionsItem;

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

@@ -0,0 +1,5 @@
+import Descriptions from './Descriptions.svelte';
+import DescriptionsItem from './DescriptionsItem.svelte';
+export { Descriptions, DescriptionsItem };
+export type { DescriptionsProps, DescriptionsItemProps, DescriptionsSize, DescriptionsDirection } from './types';
+export default Descriptions;

package/dist/components/Descriptions/index.js

@@ -0,0 +1,4 @@
+import Descriptions from './Descriptions.svelte';
+import DescriptionsItem from './DescriptionsItem.svelte';
+export { Descriptions, DescriptionsItem };
+export default Descriptions;

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

@@ -0,0 +1,41 @@
+import type { Snippet } from 'svelte';
+/** Descriptions 尺寸 */
+export type DescriptionsSize = 'large' | 'default' | 'small';
+/** Descriptions 方向 */
+export type DescriptionsDirection = 'horizontal' | 'vertical';
+/** Descriptions 属性 */
+export interface DescriptionsProps {
+    /** 标题 */
+    title?: string | Snippet;
+    /** 额外内容 */
+    extra?: Snippet;
+    /** 是否显示边框 */
+    border?: boolean;
+    /** 一行显示的列数 */
+    column?: number;
+    /** 方向 */
+    direction?: DescriptionsDirection;
+    /** 尺寸 */
+    size?: DescriptionsSize;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** DescriptionsItem 属性 */
+export interface DescriptionsItemProps {
+    /** 标签 */
+    label?: string | Snippet;
+    /** 占用列数 */
+    span?: number;
+    /** 标签宽度 */
+    labelWidth?: string | number;
+    /** 内容对齐方式 */
+    align?: 'left' | 'center' | 'right';
+    /** 标签对齐方式 */
+    labelAlign?: 'left' | 'center' | 'right';
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Descriptions/types.js

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

package/dist/components/Dialog/Dialog.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import Icon from '../Icon'
+    import { X } from 'lucide'
+
+    interface DialogProps {
+        visible?: boolean
+        title?: string
+        width?: string
+        showClose?: boolean
+        modal?: boolean
+        closeOnClickModal?: boolean
+        closeOnEsc?: boolean
+        center?: boolean
+        header?: Snippet
+        footer?: Snippet
+        children?: Snippet
+        onclose?: () => void
+        onopen?: () => void
+        class?: string
+    }
+
+    let {
+        visible = $bindable(false),
+        title = '',
+        width = '50%',
+        showClose = true,
+        modal = true,
+        closeOnClickModal = true,
+        closeOnEsc = true,
+        center = false,
+        header,
+        footer,
+        children,
+        onclose,
+        onopen,
+        class: cls = '',
+        ...attrs
+    }: DialogProps = $props()
+
+    const classes = $derived(`lm-dialog${center ? ' is-center' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const dialogStyle = $derived(`width: ${width}`)
+
+    /** 关闭对话框 */
+    const handleClose = (): void => {
+        visible = false
+        onclose?.()
+    }
+
+    /** 遮罩层点击 */
+    const handleModalClick = (e: MouseEvent): void => {
+        if (closeOnClickModal && e.target === e.currentTarget) {
+            handleClose()
+        }
+    }
+
+    /** 键盘事件 */
+    const handleKeyDown = (e: KeyboardEvent): void => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            handleClose()
+        }
+    }
+
+    /** ESC 键处理 */
+    const handleEscKey = (e: KeyboardEvent): void => {
+        if (closeOnEsc && e.key === 'Escape') {
+            handleClose()
+        }
+    }
+
+    // ESC 键监听
+    $effect(() => {
+        if (!visible || !closeOnEsc) return
+
+        onopen?.()
+        document.addEventListener('keydown', handleEscKey)
+
+        return () => {
+            document.removeEventListener('keydown', handleEscKey)
+        }
+    })
+</script>
+
+{#if visible}
+    <div class="lm-dialog-wrapper" onclick={handleModalClick} onkeydown={handleKeyDown} role="presentation">
+        {#if modal}
+            <div class="lm-dialog-overlay"></div>
+        {/if}
+
+        <div {...attrs} class={classes} style={dialogStyle} role="dialog" aria-modal="true">
+            {#if header || title || showClose}
+                <div class="lm-dialog__header">
+                    {#if header}
+                        {@render header()}
+                    {:else if title}
+                        <span class="lm-dialog__title">{title}</span>
+                    {/if}
+
+                    {#if showClose}
+                        <button type="button" class="lm-dialog__close" onclick={handleClose} aria-label="Close">
+                            <Icon icon={X} size={18} />
+                        </button>
+                    {/if}
+                </div>
+            {/if}
+
+            {#if children}
+                <div class="lm-dialog__body">
+                    {@render children()}
+                </div>
+            {/if}
+
+            {#if footer}
+                <div class="lm-dialog__footer">
+                    {@render footer()}
+                </div>
+            {/if}
+        </div>
+    </div>
+{/if}

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface DialogProps {
+    visible?: boolean;
+    title?: string;
+    width?: string;
+    showClose?: boolean;
+    modal?: boolean;
+    closeOnClickModal?: boolean;
+    closeOnEsc?: boolean;
+    center?: boolean;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    onclose?: () => void;
+    onopen?: () => void;
+    class?: string;
+}
+declare const Dialog: import("svelte").Component<DialogProps, {}, "visible">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

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

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

package/dist/components/Dialog/index.js

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

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

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+/** Dialog 属性 */
+export interface DialogProps {
+    /** 是否可见 */
+    visible?: boolean;
+    /** 标题 */
+    title?: string;
+    /** 宽度 */
+    width?: string;
+    /** 是否显示关闭按钮 */
+    showClose?: boolean;
+    /** 是否显示遮罩层 */
+    modal?: boolean;
+    /** 点击遮罩层是否关闭 */
+    closeOnClickModal?: boolean;
+    /** 按 ESC 是否关闭 */
+    closeOnEsc?: boolean;
+    /** 是否居中 */
+    center?: boolean;
+    /** 头部内容 */
+    header?: Snippet;
+    /** 底部内容 */
+    footer?: Snippet;
+    /** 子内容 */
+    children?: Snippet;
+    /** 关闭回调 */
+    onclose?: () => void;
+    /** 打开回调 */
+    onopen?: () => void;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Dialog/types.js

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

package/dist/components/Divider/Divider.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface DividerProps {
+        direction?: 'horizontal' | 'vertical'
+        contentPosition?: 'left' | 'center' | 'right'
+        borderStyle?: 'solid' | 'dashed' | 'dotted'
+        children?: Snippet
+        class?: string
+    }
+
+    let { direction = 'horizontal', contentPosition = 'center', borderStyle = 'solid', children, class: cls = '', ...attrs }: DividerProps = $props()
+
+    const classes = $derived(`lm-divider lm-divider--${direction} lm-divider--${borderStyle}${direction === 'horizontal' && children ? ` is-${contentPosition}` : ''}${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div {...attrs} class={classes} role="separator" aria-orientation={direction === 'vertical' ? 'vertical' : 'horizontal'}>
+    {#if direction === 'horizontal' && children}
+        <span class="lm-divider__text">{@render children()}</span>
+    {:else}
+        <span class="lm-divider__line" aria-hidden="true"></span>
+    {/if}
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface DividerProps {
+    direction?: 'horizontal' | 'vertical';
+    contentPosition?: 'left' | 'center' | 'right';
+    borderStyle?: 'solid' | 'dashed' | 'dotted';
+    children?: Snippet;
+    class?: string;
+}
+declare const Divider: import("svelte").Component<DividerProps, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

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

@@ -0,0 +1,4 @@
+import Divider from './Divider.svelte';
+export { Divider };
+export type { DividerProps, DividerDirection, DividerContentPosition, DividerBorderStyle } from './types';
+export default Divider;

package/dist/components/Divider/index.js

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

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+/** Divider 方向 */
+export type DividerDirection = 'horizontal' | 'vertical';
+/** Divider 内容位置 */
+export type DividerContentPosition = 'left' | 'center' | 'right';
+/** Divider 边框样式 */
+export type DividerBorderStyle = 'solid' | 'dashed' | 'dotted';
+/** Divider 属性 */
+export interface DividerProps {
+    /** 方向 */
+    direction?: DividerDirection;
+    /** 内容位置 */
+    contentPosition?: DividerContentPosition;
+    /** 边框样式 */
+    borderStyle?: DividerBorderStyle;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Divider/types.js

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

package/dist/components/Drawer/Drawer.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { DrawerDirection } from './types'
+    import Icon from '../Icon'
+    import { X } from 'lucide'
+
+    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
+    }
+
+    let {
+        open = $bindable(false),
+        title = '',
+        direction = 'rtl',
+        size = '30%',
+        showClose = true,
+        modal = true,
+        closeOnClickModal = true,
+        closeOnPressEscape = true,
+        lockScroll = true,
+        appendToBody = false,
+        beforeClose,
+        onclose,
+        onopen,
+        header,
+        footer,
+        children,
+        class: cls = '',
+        ...attrs
+    }: DrawerProps = $props()
+
+    let drawerRef: HTMLDivElement | null = $state(null)
+    let visible = $state(false)
+    let closing = $state(false)
+
+    const sizeStyle = $derived(typeof size === 'number' ? `${size}px` : size)
+    const isHorizontal = $derived(direction === 'ltr' || direction === 'rtl')
+
+    const panelStyle = $derived(isHorizontal ? `width: ${sizeStyle}` : `height: ${sizeStyle}`)
+
+    const classes = $derived(`lm-drawer lm-drawer--${direction}${visible ? ' is-open' : ''}${closing ? ' is-closing' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const close = async (): Promise<void> => {
+        if (closing) return
+        if (beforeClose) {
+            const result = await beforeClose()
+            if (!result) return
+        }
+        closing = true
+        setTimeout(() => {
+            open = false
+            visible = false
+            closing = false
+            onclose?.()
+        }, 300)
+    }
+
+    const handleOverlayClick = (): void => {
+        if (closeOnClickModal) close()
+    }
+
+    const handleKeydown = (e: KeyboardEvent): void => {
+        if (e.key === 'Escape' && closeOnPressEscape) close()
+    }
+
+    $effect(() => {
+        if (open && !closing) {
+            visible = true
+            onopen?.()
+            if (lockScroll) document.body.style.overflow = 'hidden'
+            setTimeout(() => drawerRef?.focus(), 0)
+        } else if (!open && !closing) {
+            visible = false
+            if (lockScroll) document.body.style.overflow = ''
+        }
+    })
+
+    $effect(() => {
+        return () => {
+            if (lockScroll) document.body.style.overflow = ''
+        }
+    })
+</script>
+
+{#if visible || closing}
+    <div bind:this={drawerRef} class={classes} role="dialog" aria-modal="true" tabindex="-1" onkeydown={handleKeydown} {...attrs}>
+        {#if modal}
+            <div class="lm-drawer__overlay" onclick={handleOverlayClick} aria-hidden="true"></div>
+        {/if}
+
+        <div class="lm-drawer__panel" style={panelStyle}>
+            <header class="lm-drawer__header">
+                {#if header}
+                    {@render header()}
+                {:else if title}
+                    <span class="lm-drawer__title">
+                        {#if typeof title === 'string'}
+                            {title}
+                        {:else}
+                            {@render title()}
+                        {/if}
+                    </span>
+                {/if}
+
+                {#if showClose}
+                    <button type="button" class="lm-drawer__close" onclick={close} aria-label="Close">
+                        <Icon icon={X} size={16} />
+                    </button>
+                {/if}
+            </header>
+
+            <div class="lm-drawer__body">
+                {#if children}
+                    {@render children()}
+                {/if}
+            </div>
+
+            {#if footer}
+                <footer class="lm-drawer__footer">
+                    {@render footer({ close })}
+                </footer>
+            {/if}
+        </div>
+    </div>
+{/if}