lumen-plus 0.0.1

package/dist/components/Notification/Notification.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+    import Icon from '../Icon'
+    import { CheckCircle, AlertTriangle, XCircle, Info, X } from 'lucide'
+    import type { IconNode } from 'lucide'
+    import type { NotificationItem, NotificationOptions, NotificationType, NotificationPlacement } from './types'
+
+    interface Props {
+        defaultPlacement?: NotificationPlacement
+    }
+
+    let { defaultPlacement = 'top-right' }: Props = $props()
+
+    let notifications = $state<NotificationItem[]>([])
+
+    /** 图标映射（静态，避免重复创建） */
+    const ICON_MAP: Record<NotificationType, IconNode> = {
+        success: CheckCircle,
+        warning: AlertTriangle,
+        error: XCircle,
+        info: Info,
+    }
+
+    /** 根据类型获取图标 */
+    const getIcon = (type?: NotificationType): IconNode => ICON_MAP[type || 'info']
+
+    /** 移除通知 */
+    const removeNotification = (id: number): void => {
+        notifications = notifications.filter((n) => n.id !== id)
+    }
+
+    /** 添加通知 */
+    const addNotification = (options: NotificationOptions): void => {
+        const id = Date.now()
+        const item: NotificationItem = {
+            id,
+            type: 'info',
+            duration: 4500,
+            placement: defaultPlacement,
+            ...options,
+        }
+        notifications = [...notifications, item]
+
+        if (item.duration && item.duration > 0) {
+            setTimeout(() => removeNotification(id), item.duration)
+        }
+    }
+
+    /** 按位置分组的通知 */
+    const groupedNotifications = $derived.by(() => {
+        if (notifications.length === 0) return null
+        const groups: Record<string, NotificationItem[]> = {}
+        for (const n of notifications) {
+            const placement = n.placement || defaultPlacement
+            ;(groups[placement] ??= []).push(n)
+        }
+        return groups
+    })
+
+    // 监听事件
+    $effect(() => {
+        const handler = (event: CustomEvent<NotificationOptions>): void => {
+            addNotification(event.detail)
+        }
+        window.addEventListener('lumen-notification', handler as EventListener)
+        return () => window.removeEventListener('lumen-notification', handler as EventListener)
+    })
+</script>
+
+{#if groupedNotifications}
+    {#each Object.entries(groupedNotifications) as [placement, items] (placement)}
+        <div class="lm-notification-container lm-notification-container--{placement}">
+            {#each items as notification (notification.id)}
+                <div class="lm-notification lm-notification--{notification.type}">
+                    <div class="lm-notification__content">
+                        <div class="lm-notification__header">
+                            <Icon icon={getIcon(notification.type)} size={18} class="lm-notification__icon" />
+                            {#if notification.title}
+                                <div class="lm-notification__title">{notification.title}</div>
+                            {/if}
+                        </div>
+                        <div class="lm-notification__message" class:is-with-title={!!notification.title}>{notification.message}</div>
+                    </div>
+                    <button type="button" class="lm-notification__close" onclick={() => removeNotification(notification.id)} aria-label="Close">
+                        <Icon icon={X} size={14} />
+                    </button>
+                </div>
+            {/each}
+        </div>
+    {/each}
+{/if}

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

@@ -0,0 +1,7 @@
+import type { NotificationPlacement } from './types';
+interface Props {
+    defaultPlacement?: NotificationPlacement;
+}
+declare const Notification: import("svelte").Component<Props, {}, "">;
+type Notification = ReturnType<typeof Notification>;
+export default Notification;

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

@@ -0,0 +1,4 @@
+import Notification from './Notification.svelte';
+export { Notification };
+export type { NotificationOptions, NotificationItem, NotificationType, NotificationPlacement, CloseNotificationFn } from './types';
+export default Notification;

package/dist/components/Notification/index.js

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

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

@@ -0,0 +1,24 @@
+/** 通知类型 */
+export type NotificationType = 'success' | 'warning' | 'error' | 'info';
+/** 通知位置 */
+export type NotificationPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/** 通知配置选项 */
+export interface NotificationOptions {
+    /** 标题 */
+    title?: string;
+    /** 消息内容 */
+    message: string;
+    /** 类型 */
+    type?: NotificationType;
+    /** 显示时间（毫秒） */
+    duration?: number;
+    /** 显示位置 */
+    placement?: NotificationPlacement;
+}
+/** 通知项（内部使用） */
+export interface NotificationItem extends NotificationOptions {
+    /** 唯一标识 */
+    id: number;
+}
+/** 关闭通知的回调函数类型 */
+export type CloseNotificationFn = (id: number) => void;

package/dist/components/Notification/types.js

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

package/dist/components/Pagination/Pagination.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+    import type { PaginationLayout } from './types'
+    import Icon from '../Icon'
+    import Button from '../Button'
+    import Select from '../Select'
+    import Input from '../Input'
+    import { ChevronLeft, ChevronRight } from 'lucide'
+
+    interface PaginationProps {
+        currentPage?: number
+        pageSize?: number
+        total?: number
+        pagerCount?: number
+        pageSizes?: number[]
+        layout?: PaginationLayout[]
+        disabled?: boolean
+        hideOnSinglePage?: boolean
+        small?: boolean
+        background?: boolean
+        onchange?: (page: number) => void
+        onsizechange?: (size: number) => void
+        prevText?: string
+        nextText?: string
+        class?: string
+    }
+
+    let {
+        currentPage = $bindable(1),
+        pageSize = $bindable(10),
+        total = 0,
+        pagerCount = 7,
+        pageSizes = [10, 20, 30, 50],
+        layout = ['prev', 'pager', 'next'],
+        disabled = false,
+        hideOnSinglePage = false,
+        small = false,
+        background = false,
+        onchange,
+        onsizechange,
+        prevText = '',
+        nextText = '',
+        class: cls = '',
+        ...attrs
+    }: PaginationProps = $props()
+
+    let jumperValue = $state('')
+
+    const totalPages = $derived(Math.max(1, Math.ceil(total / pageSize)))
+    const shouldHide = $derived(hideOnSinglePage && totalPages <= 1)
+
+    // 转换 pageSizes 为 Select 需要的 options 格式
+    const sizeOptions = $derived(pageSizes.map(size => ({ value: size, label: `${size} 条/页` })))
+
+    const pagers = $derived.by(() => {
+        const pages: (number | 'prev-more' | 'next-more')[] = []
+        const half = Math.floor(pagerCount / 2)
+
+        if (totalPages <= pagerCount) {
+            for (let i = 1; i <= totalPages; i++) pages.push(i)
+        } else {
+            pages.push(1)
+            const start = Math.max(2, currentPage - half + 1)
+            const end = Math.min(totalPages - 1, currentPage + half - 1)
+
+            if (start > 2) pages.push('prev-more')
+            for (let i = start; i <= end; i++) pages.push(i)
+            if (end < totalPages - 1) pages.push('next-more')
+            pages.push(totalPages)
+        }
+        return pages
+    })
+
+    const goTo = (page: number): void => {
+        if (disabled || page < 1 || page > totalPages || page === currentPage) return
+        currentPage = page
+        onchange?.(page)
+    }
+
+    const handleSizeChange = (newSize: number): void => {
+        pageSize = newSize
+        currentPage = 1
+        onsizechange?.(newSize)
+        onchange?.(1)
+    }
+
+    const handleJump = (): void => {
+        const page = parseInt(jumperValue, 10)
+        if (!isNaN(page)) goTo(Math.min(Math.max(1, page), totalPages))
+        jumperValue = ''
+    }
+
+    const handleMoreClick = (type: 'prev-more' | 'next-more'): void => {
+        const jump = pagerCount - 2
+        goTo(type === 'prev-more' ? Math.max(1, currentPage - jump) : Math.min(totalPages, currentPage + jump))
+    }
+
+    const classes = $derived(`lm-pagination${small ? ' lm-pagination--small' : ''}${background ? ' is-background' : ''}${disabled ? ' is-disabled' : ''}${cls ? ` ${cls}` : ''}`)
+</script>
+
+{#if !shouldHide}
+    <div class={classes} role="navigation" aria-label="Pagination" {...attrs}>
+        {#each layout as item (item)}
+            {#if item === 'total'}
+                <span class="lm-pagination__total">共 {total} 条</span>
+            {:else if item === 'sizes'}
+                <Select
+                    class="lm-pagination__sizes"
+                    modelValue={pageSize}
+                    options={sizeOptions}
+                    size={small ? 'small' : 'default'}
+                    {disabled}
+                    onchange={(val) => handleSizeChange(val as number)}
+                />
+            {:else if item === 'prev'}
+                <Button
+                    class="lm-pagination__btn lm-pagination__btn--prev"
+                    size={small ? 'small' : 'medium'}
+                    disabled={disabled || currentPage <= 1}
+                    onclick={() => goTo(currentPage - 1)}
+                    aria-label="Previous page"
+                >
+                    {#if prevText}
+                        {prevText}
+                    {:else}
+                        <Icon icon={ChevronLeft} size={16} />
+                    {/if}
+                </Button>
+            {:else if item === 'pager'}
+                <ul class="lm-pagination__pager">
+                    {#each pagers as p (p)}
+                        {#if p === 'prev-more' || p === 'next-more'}
+                            <li class="lm-pagination__more">
+                                <Button class="lm-pagination__more-btn" size={small ? 'small' : 'medium'} onclick={() => handleMoreClick(p)}>
+                                    <span class="lm-pagination__ellipsis">...</span>
+                                </Button>
+                            </li>
+                        {:else}
+                            <li>
+                                <Button
+                                    class="lm-pagination__number{p === currentPage ? ' is-active' : ''}"
+                                    size={small ? 'small' : 'medium'}
+                                    onclick={() => goTo(p)}
+                                    aria-current={p === currentPage ? 'page' : undefined}
+                                >
+                                    {p}
+                                </Button>
+                            </li>
+                        {/if}
+                    {/each}
+                </ul>
+            {:else if item === 'next'}
+                <Button
+                    class="lm-pagination__btn lm-pagination__btn--next"
+                    size={small ? 'small' : 'medium'}
+                    disabled={disabled || currentPage >= totalPages}
+                    onclick={() => goTo(currentPage + 1)}
+                    aria-label="Next page"
+                >
+                    {#if nextText}
+                        {nextText}
+                    {:else}
+                        <Icon icon={ChevronRight} size={16} />
+                    {/if}
+                </Button>
+            {:else if item === 'jumper'}
+                <span class="lm-pagination__jump">
+                    前往
+                    <Input
+                        class="lm-pagination__editor"
+                        bind:value={jumperValue}
+                        size={small ? 'small' : 'medium'}
+                        {disabled}
+                        onkeydown={(e) => e.key === 'Enter' && handleJump()}
+                    />
+                    页
+                </span>
+            {/if}
+        {/each}
+    </div>
+{/if}

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

@@ -0,0 +1,21 @@
+import type { PaginationLayout } from './types';
+interface PaginationProps {
+    currentPage?: number;
+    pageSize?: number;
+    total?: number;
+    pagerCount?: number;
+    pageSizes?: number[];
+    layout?: PaginationLayout[];
+    disabled?: boolean;
+    hideOnSinglePage?: boolean;
+    small?: boolean;
+    background?: boolean;
+    onchange?: (page: number) => void;
+    onsizechange?: (size: number) => void;
+    prevText?: string;
+    nextText?: string;
+    class?: string;
+}
+declare const Pagination: import("svelte").Component<PaginationProps, {}, "currentPage" | "pageSize">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

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

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

package/dist/components/Pagination/index.js

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

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

@@ -0,0 +1,35 @@
+/** Pagination 布局项 */
+export type PaginationLayout = 'prev' | 'pager' | 'next' | 'jumper' | 'sizes' | 'total';
+/** Pagination 属性 */
+export interface PaginationProps {
+    /** 当前页码 */
+    currentPage?: number;
+    /** 每页条数 */
+    pageSize?: number;
+    /** 总条数 */
+    total?: number;
+    /** 页码按钮数量 */
+    pagerCount?: number;
+    /** 每页条数选项 */
+    pageSizes?: number[];
+    /** 布局 */
+    layout?: PaginationLayout[];
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否隐藏只有一页时的分页 */
+    hideOnSinglePage?: boolean;
+    /** 是否使用小型分页 */
+    small?: boolean;
+    /** 是否使用背景色 */
+    background?: boolean;
+    /** 页码变更事件 */
+    onchange?: (page: number) => void;
+    /** 每页条数变更事件 */
+    onsizechange?: (size: number) => void;
+    /** 上一页文本 */
+    prevText?: string;
+    /** 下一页文本 */
+    nextText?: string;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Pagination/types.js

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

package/dist/components/PinInput/PinInput.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+    import type { PinInputProps } from './types'
+
+    let {
+        value = $bindable(''),
+        length = 6,
+        type = 'text',
+        size = 'medium',
+        disabled = false,
+        mask = false,
+        placeholder = '',
+        autoFocus = false,
+        oninput,
+        oncomplete,
+        class: className = '',
+        ...restProps
+    }: PinInputProps = $props()
+
+    let inputRefs = $state<(HTMLInputElement | null)[]>([])
+    let focusedIndex = $state<number | null>(null)
+    let internalValues = $state<string[]>([])
+    let lastSyncedValue = ''
+
+    /** 输入框索引数组（静态缓存） */
+    const inputIndices = $derived(Array.from({ length }, (_, i) => i))
+
+    // 初始化
+    $effect(() => {
+        if (internalValues.length !== length) {
+            internalValues = Array(length).fill('')
+        }
+        if (inputRefs.length !== length) {
+            inputRefs = Array(length).fill(null)
+        }
+    })
+
+    // 同步外部值
+    $effect(() => {
+        const joined = internalValues.join('')
+        if (value !== lastSyncedValue && value !== joined) {
+            const chars = value.split('')
+            const newValues = Array(length).fill('')
+            for (let i = 0; i < Math.min(chars.length, length); i++) {
+                newValues[i] = chars[i]
+            }
+            internalValues = newValues
+            lastSyncedValue = value
+        }
+    })
+
+    const isComplete = $derived(internalValues.filter(Boolean).length === length)
+    const isPassword = $derived(mask || type === 'password')
+
+    const rootClasses = $derived(
+        `lm-pin-input lm-pin-input--${size}${disabled ? ' is-disabled' : ''}${isPassword ? ' is-password' : ''}${isComplete ? ' is-complete' : ''}${className ? ` ${className}` : ''}`
+    )
+
+    /** 更新值 */
+    const updateValue = (newValues: string[]): void => {
+        internalValues = newValues
+        const newValue = newValues.join('')
+        value = newValue
+        lastSyncedValue = newValue
+    }
+
+    /** 输入处理 */
+    const handleInput = (index: number, event: Event): void => {
+        const input = event.currentTarget as HTMLInputElement
+        let inputValue = input.value
+
+        if (type === 'number') {
+            inputValue = inputValue.replace(/\D/g, '')
+        }
+
+        if (inputValue.length > 1) {
+            inputValue = inputValue.slice(-1)
+        }
+
+        const newValues = [...internalValues]
+        newValues[index] = inputValue
+        updateValue(newValues)
+
+        if (inputValue && index < length - 1) {
+            setTimeout(() => inputRefs[index + 1]?.focus(), 0)
+        }
+
+        oninput?.(value)
+        if (value.length === length) {
+            oncomplete?.(value)
+        }
+    }
+
+    /** 键盘处理 */
+    const handleKeyDown = (index: number, event: KeyboardEvent): void => {
+        const { key } = event
+
+        if (key === 'Backspace') {
+            if (!internalValues[index] && index > 0) {
+                event.preventDefault()
+                const newValues = [...internalValues]
+                newValues[index - 1] = ''
+                updateValue(newValues)
+                inputRefs[index - 1]?.focus()
+            }
+        } else if (key === 'ArrowLeft' && index > 0) {
+            event.preventDefault()
+            inputRefs[index - 1]?.focus()
+        } else if (key === 'ArrowRight' && index < length - 1) {
+            event.preventDefault()
+            inputRefs[index + 1]?.focus()
+        } else if (key === 'Delete') {
+            event.preventDefault()
+            const newValues = [...internalValues]
+            newValues[index] = ''
+            updateValue(newValues)
+        }
+    }
+
+    /** 粘贴处理 */
+    const handlePaste = (event: ClipboardEvent): void => {
+        event.preventDefault()
+        let pastedText = event.clipboardData?.getData('text') || ''
+
+        if (type === 'number') {
+            pastedText = pastedText.replace(/\D/g, '')
+        }
+
+        const chars = pastedText.slice(0, length).split('')
+        const newValues = Array(length).fill('')
+        chars.forEach((char, i) => {
+            newValues[i] = char
+        })
+        updateValue(newValues)
+
+        inputRefs[Math.min(chars.length, length - 1)]?.focus()
+
+        oninput?.(value)
+        if (chars.length === length) {
+            oncomplete?.(value)
+        }
+    }
+
+    // 自动聚焦
+    $effect(() => {
+        if (autoFocus && inputRefs[0]) {
+            inputRefs[0].focus()
+        }
+    })
+</script>
+
+<div {...restProps} class={rootClasses} role="group" aria-label="PIN input">
+    {#each inputIndices as index (index)}
+        {@const currentValue = internalValues[index] || ''}
+        {@const isFocused = focusedIndex === index}
+
+        <input
+            bind:this={inputRefs[index]}
+            type={isPassword ? 'password' : type === 'number' ? 'text' : type}
+            inputmode={type === 'number' ? 'numeric' : 'text'}
+            class="lm-pin-input__input"
+            class:is-focused={isFocused}
+            value={currentValue}
+            {placeholder}
+            {disabled}
+            maxlength="1"
+            autocomplete="off"
+            aria-label="PIN digit {index + 1} of {length}"
+            oninput={(e: Event) => handleInput(index, e)}
+            onkeydown={(e: KeyboardEvent) => handleKeyDown(index, e)}
+            onpaste={handlePaste}
+            onfocus={() => (focusedIndex = index)}
+            onblur={() => (focusedIndex = null)}
+        />
+    {/each}
+</div>

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

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

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

@@ -0,0 +1,4 @@
+import PinInput from './PinInput.svelte';
+export { PinInput };
+export type { PinInputProps, PinInputType, PinInputSize } from './types';
+export default PinInput;

package/dist/components/PinInput/index.js

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

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

@@ -0,0 +1,31 @@
+/** PinInput 类型 */
+export type PinInputType = 'text' | 'number' | 'password';
+/** PinInput 尺寸 */
+export type PinInputSize = 'small' | 'medium' | 'large';
+/** PinInput 属性 */
+export interface PinInputProps {
+    /** 绑定值 */
+    value?: string;
+    /** 输入框数量 */
+    length?: number;
+    /** 输入类型 */
+    type?: PinInputType;
+    /** 尺寸 */
+    size?: PinInputSize;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否遮罩（密码模式） */
+    mask?: boolean;
+    /** 占位符 */
+    placeholder?: string;
+    /** 是否自动聚焦 */
+    autoFocus?: boolean;
+    /** 输入事件 */
+    oninput?: (value: string) => void;
+    /** 完成事件 */
+    oncomplete?: (value: string) => void;
+    /** 自定义类名 */
+    class?: string;
+    /** 其他属性 */
+    [key: string]: unknown;
+}

package/dist/components/PinInput/types.js

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