lumen-plus 0.0.1

package/dist/components/Icon/Icon.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import type { IconNode } from 'lucide'
+
+    interface IconProps {
+        icon: IconNode
+        size?: number | string
+        color?: string
+        strokeWidth?: number
+        class?: string
+    }
+
+    let { icon, size = 24, color = 'currentColor', strokeWidth = 2, class: cls = '', ...attrs }: IconProps = $props()
+
+    const sizeValue = $derived(typeof size === 'number' ? `${size}px` : size)
+
+    const classes = $derived(cls ? `lm-icon ${cls}` : 'lm-icon')
+
+    // 归一化图标节点：使用 $derived，基于 icon 变更计算，避免非反应式更新
+    type IconTuple = [string, Record<string, any>]
+    const normalized = $derived.by(() => {
+        const tuples = icon.filter((item: unknown) => Array.isArray(item)).map(([tag, nodeAttrs]: any) => [tag as string, Object.freeze({ ...nodeAttrs })]) as IconTuple[]
+        return Object.freeze(tuples) as ReadonlyArray<IconTuple>
+    })
+</script>
+
+<svg
+    {...attrs}
+    class={classes}
+    xmlns="http://www.w3.org/2000/svg"
+    width={sizeValue}
+    height={sizeValue}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke={color}
+    stroke-width={strokeWidth}
+    stroke-linecap="round"
+    stroke-linejoin="round"
+>
+    {#each normalized as item}
+        {@const [tag, attrs] = item}
+        <svelte:element this={tag} {...attrs} />
+    {/each}
+</svg>

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

@@ -0,0 +1,12 @@
+import type { IconNode } from 'lucide';
+interface IconProps {
+    icon: IconNode;
+    size?: number | string;
+    color?: string;
+    strokeWidth?: number;
+    class?: string;
+}
+declare const Icon: import("svelte").Component<IconProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;
+//# sourceMappingURL=Icon.svelte.d.ts.map

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

@@ -0,0 +1,5 @@
+export { default } from './Icon.svelte';
+export { default as Icon } from './Icon.svelte';
+export type { IconProps } from './types';
+export type { IconNode } from 'lucide';
+export { Check, X, Plus, Minus, Edit, Trash2, Copy, Download, Upload, Save, Search, Filter, Settings, RefreshCw, MoreVertical, MoreHorizontal, ChevronLeft, ChevronRight, ChevronUp, ChevronDown, ArrowLeft, ArrowRight, ArrowUp, ArrowDown, AlertCircle, AlertTriangle, CheckCircle, Info, XCircle, HelpCircle, Eye, EyeOff, Heart, Star, Home, Menu, Bell, User, Mail, Lock, Calendar, Clock, File, Folder, FileText, Image, Play, Pause, Volume2, VolumeX, } from 'lucide';

package/dist/components/Icon/index.js

@@ -0,0 +1,15 @@
+export { default } from './Icon.svelte';
+export { default as Icon } from './Icon.svelte';
+export { 
+// Actions
+Check, X, Plus, Minus, Edit, Trash2, Copy, Download, Upload, Save, Search, Filter, Settings, RefreshCw, MoreVertical, MoreHorizontal, 
+// Arrows
+ChevronLeft, ChevronRight, ChevronUp, ChevronDown, ArrowLeft, ArrowRight, ArrowUp, ArrowDown, 
+// Status
+AlertCircle, AlertTriangle, CheckCircle, Info, XCircle, HelpCircle, 
+// UI
+Eye, EyeOff, Heart, Star, Home, Menu, Bell, User, Mail, Lock, Calendar, Clock, 
+// Files
+File, Folder, FileText, Image, 
+// Media
+Play, Pause, Volume2, VolumeX, } from 'lucide';

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

@@ -0,0 +1,14 @@
+import type { IconNode } from 'lucide';
+/** Icon 属性 */
+export interface IconProps {
+    /** 图标 */
+    icon: IconNode;
+    /** 尺寸 */
+    size?: number | string;
+    /** 颜色 */
+    color?: string;
+    /** 描边宽度 */
+    strokeWidth?: number;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Icon/types.js

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

package/dist/components/Image/Image.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { ImageFit } from './types'
+    import Icon from '../Icon'
+    import { X, ChevronLeft, ChevronRight } from 'lucide'
+
+    interface ImageProps {
+        src?: string
+        alt?: string
+        fit?: ImageFit
+        lazy?: boolean
+        previewSrcList?: string[]
+        initialIndex?: number
+        hideOnClickModal?: boolean
+        placeholder?: Snippet
+        error?: Snippet
+        onload?: (e: Event) => void
+        onerror?: (e: Event) => void
+        children?: Snippet
+        class?: string
+    }
+
+    let {
+        src = '',
+        alt = '',
+        fit = 'fill',
+        lazy = false,
+        previewSrcList = [],
+        initialIndex = 0,
+        hideOnClickModal = false,
+        placeholder,
+        error,
+        onload,
+        onerror,
+        children,
+        class: cls = '',
+        ...attrs
+    }: ImageProps = $props()
+
+    let status = $state<'loading' | 'loaded' | 'error'>('loading')
+    let showPreview = $state(false)
+    let previewIndex = $state(0)
+
+    const hasPreview = $derived(previewSrcList.length > 0)
+    const currentPreviewSrc = $derived(previewSrcList[previewIndex] || src)
+
+    const handleLoad = (e: Event): void => {
+        status = 'loaded'
+        onload?.(e)
+    }
+
+    const handleError = (e: Event): void => {
+        status = 'error'
+        onerror?.(e)
+    }
+
+    const openPreview = (): void => {
+        if (hasPreview) {
+            previewIndex = 0
+            showPreview = true
+        }
+    }
+
+    const closePreview = (): void => {
+        showPreview = false
+    }
+
+    const prevImage = (): void => {
+        previewIndex = (previewIndex - 1 + previewSrcList.length) % previewSrcList.length
+    }
+
+    const nextImage = (): void => {
+        previewIndex = (previewIndex + 1) % previewSrcList.length
+    }
+
+    const handleKeydown = (e: KeyboardEvent): void => {
+        if (e.key === 'Escape') closePreview()
+        else if (e.key === 'ArrowLeft') prevImage()
+        else if (e.key === 'ArrowRight') nextImage()
+    }
+
+    $effect(() => {
+        if (src) status = 'loading'
+    })
+
+    const classes = $derived(`lm-image${hasPreview ? ' is-preview' : ''}${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} {...attrs}>
+    {#if status === 'loading' && placeholder}
+        <div class="lm-image__placeholder">
+            {@render placeholder()}
+        </div>
+    {/if}
+
+    {#if status === 'error' && error}
+        <div class="lm-image__error">
+            {@render error()}
+        </div>
+    {:else if hasPreview}
+        <button type="button" class="lm-image__wrapper" onclick={openPreview}>
+            <img {src} {alt} class="lm-image__inner" style="object-fit: {fit}" loading={lazy ? 'lazy' : undefined} onload={handleLoad} onerror={handleError} />
+        </button>
+    {:else}
+        <img {src} {alt} class="lm-image__inner" style="object-fit: {fit}" loading={lazy ? 'lazy' : undefined} onload={handleLoad} onerror={handleError} />
+    {/if}
+
+    {#if children}
+        {@render children()}
+    {/if}
+</div>
+
+{#if showPreview}
+    <div class="lm-image-viewer" role="dialog" aria-modal="true" tabindex="-1" onkeydown={handleKeydown} onclick={hideOnClickModal ? closePreview : undefined}>
+        <div class="lm-image-viewer__mask"></div>
+
+        <button type="button" class="lm-image-viewer__close" onclick={closePreview} aria-label="Close">
+            <Icon icon={X} size={24} color="#fff" />
+        </button>
+
+        {#if previewSrcList.length > 1}
+            <button type="button" class="lm-image-viewer__prev" onclick={prevImage} aria-label="Previous">
+                <Icon icon={ChevronLeft} size={24} color="#fff" />
+            </button>
+            <button type="button" class="lm-image-viewer__next" onclick={nextImage} aria-label="Next">
+                <Icon icon={ChevronRight} size={24} color="#fff" />
+            </button>
+        {/if}
+
+        <div class="lm-image-viewer__canvas">
+            <img src={currentPreviewSrc} alt="" class="lm-image-viewer__img" />
+        </div>
+    </div>
+{/if}

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { ImageFit } from './types';
+interface ImageProps {
+    src?: string;
+    alt?: string;
+    fit?: ImageFit;
+    lazy?: boolean;
+    previewSrcList?: string[];
+    initialIndex?: number;
+    hideOnClickModal?: boolean;
+    placeholder?: Snippet;
+    error?: Snippet;
+    onload?: (e: Event) => void;
+    onerror?: (e: Event) => void;
+    children?: Snippet;
+    class?: string;
+}
+declare const Image: import("svelte").Component<ImageProps, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

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

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

package/dist/components/Image/index.js

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

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

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+/** Image 填充模式 */
+export type ImageFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+/** Image 属性 */
+export interface ImageProps {
+    /** 图片地址 */
+    src?: string;
+    /** 图片描述 */
+    alt?: string;
+    /** 填充模式 */
+    fit?: ImageFit;
+    /** 是否懒加载 */
+    lazy?: boolean;
+    /** 预览图片列表 */
+    previewSrcList?: string[];
+    /** 初始预览索引 */
+    initialIndex?: number;
+    /** 是否隐藏点击图片时的预览 */
+    hideOnClickModal?: boolean;
+    /** 加载中插槽 */
+    placeholder?: Snippet;
+    /** 加载失败插槽 */
+    error?: Snippet;
+    /** 加载事件 */
+    onload?: (e: Event) => void;
+    /** 错误事件 */
+    onerror?: (e: Event) => void;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Image/types.js

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

package/dist/components/Input/Input.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+    import Icon from '../Icon'
+    import { Eye, EyeOff, XCircle } from 'lucide'
+    import type { InputProps } from './types'
+
+    let {
+        value = $bindable(''),
+        autofilled = $bindable(false),
+        type = 'text',
+        size = 'medium',
+        placeholder = '',
+        disabled = false,
+        clearable = false,
+        readonly = false,
+        showPassword = false,
+        maxlength,
+        name,
+        id,
+        autocomplete,
+        prefix,
+        suffix,
+        oninput,
+        onchange,
+        onfocus,
+        onblur,
+        onkeydown,
+        onkeyup,
+        onclear,
+        class: cls = '',
+        ...attrs
+    }: InputProps = $props()
+
+    let inputRef: HTMLInputElement | null = $state(null)
+    let focused = $state(false)
+    let showClear = $derived(clearable && value && !disabled && !readonly && focused)
+
+    let passwordVisible = $state(false)
+    const showPwdToggle = $derived(showPassword && type === 'password' && !disabled)
+    const resolvedType = $derived(showPwdToggle ? (passwordVisible ? 'text' : 'password') : type)
+
+    const suffixCount = $derived((suffix ? 1 : 0) + (showClear ? 1 : 0) + (showPwdToggle ? 1 : 0))
+
+    const classes = $derived(
+        `lm-input lm-input--${size}${disabled ? ' is-disabled' : ''}${focused ? ' is-focused' : ''}${prefix ? ' has-prefix' : ''}${suffixCount >= 1 ? ' has-suffix' : ''}${suffixCount >= 2 ? ' has-suffix-2' : ''}${suffixCount >= 3 ? ' has-suffix-3' : ''}${cls ? ` ${cls}` : ''}`
+    )
+
+    const handleInput = (e: Event & { currentTarget: HTMLInputElement }): void => {
+        value = e.currentTarget.value
+        oninput?.(e)
+    }
+
+    const handleChange = (e: Event & { currentTarget: HTMLInputElement }): void => {
+        value = e.currentTarget.value; onchange?.(e)
+    }
+
+    const handleFocus = (e: FocusEvent & { currentTarget: HTMLInputElement }): void => {
+        updateAutofillFromNode(e.currentTarget)
+        focused = true
+        onfocus?.(e)
+    }
+
+    const handleAnimationStart = (e: AnimationEvent & { currentTarget: HTMLInputElement }): void => {
+        if (e.animationName === 'lm-input-autofill') {
+            updateAutofillFromNode(e.currentTarget)
+        }
+    }
+
+    const handleBlur = (e: FocusEvent & { currentTarget: HTMLInputElement }): void => {
+        focused = false
+        onblur?.(e)
+    }
+
+    const handleClear = (): void => {
+        value = ''
+        onclear?.()
+        inputRef?.focus()
+    }
+
+    const handleTogglePassword = (): void => {
+        passwordVisible = !passwordVisible
+        inputRef?.focus()
+    }
+
+    const updateAutofillFromNode = (node: HTMLInputElement): void => {
+        try {
+            autofilled = node.matches(':-webkit-autofill')
+            if (autofilled) {
+                const domValue = node.value ?? ''
+                if (domValue && domValue !== value) value = domValue
+            }
+        } catch {
+            autofilled = false
+        }
+    }
+
+    const autofillProbe = (node: HTMLInputElement) => {
+        updateAutofillFromNode(node)
+        const raf = requestAnimationFrame(() => updateAutofillFromNode(node))
+        const timer = setTimeout(() => updateAutofillFromNode(node), 200)
+
+        return {
+            destroy() {
+                cancelAnimationFrame(raf)
+                clearTimeout(timer)
+            },
+        }
+    }
+</script>
+
+<div class={classes}>
+    {#if prefix}
+        <span class="lm-input__prefix">
+            {@render prefix()}
+        </span>
+    {/if}
+
+    <input
+        bind:this={inputRef}
+        use:autofillProbe
+        {...attrs}
+        id={id}
+        name={name}
+        autocomplete={autocomplete as any}
+        type={resolvedType}
+        class="lm-input__inner"
+        {placeholder}
+        {disabled}
+        {readonly}
+        {maxlength}
+        bind:value={value}
+        oninput={handleInput}
+        onchange={handleChange}
+        onfocus={handleFocus}
+        onanimationstart={handleAnimationStart}
+        onblur={handleBlur}
+        {onkeydown}
+        {onkeyup}
+    />
+
+    {#if suffix || showClear || showPwdToggle}
+        <span class="lm-input__suffix">
+            {#if showPwdToggle}
+                <button
+                    type="button"
+                    class="lm-input__password"
+                    onmousedown={(e: MouseEvent) => {
+                        e.preventDefault()
+                        handleTogglePassword()
+                    }}
+                    tabindex="-1"
+                    aria-label={passwordVisible ? '隐藏密码' : '显示密码'}
+                >
+                    <Icon icon={passwordVisible ? EyeOff : Eye} size={16} />
+                </button>
+            {/if}
+
+            {#if showClear}
+                <button
+                    type="button"
+                    class="lm-input__clear"
+                    onmousedown={(e: MouseEvent) => {
+                        e.preventDefault()
+                        handleClear()
+                    }}
+                    tabindex="-1"
+                    aria-label="Clear input"
+                >
+                    <Icon icon={XCircle} size={16} />
+                </button>
+            {/if}
+
+            {#if suffix}
+                {@render suffix()}
+            {/if}
+        </span>
+    {/if}
+</div>

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

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

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

@@ -0,0 +1,4 @@
+import Input from './Input.svelte';
+export { Input };
+export type { InputProps, InputType, InputSize } from './types';
+export default Input;

package/dist/components/Input/index.js

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

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

@@ -0,0 +1,72 @@
+import type { Snippet } from 'svelte';
+/** Input 类型 */
+export type InputType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
+/** Input 尺寸 */
+export type InputSize = 'small' | 'medium' | 'large';
+/** Input 属性 */
+export interface InputProps {
+    /** 绑定值 */
+    value?: string;
+    /** 输入框类型 */
+    type?: InputType;
+    /** 尺寸 */
+    size?: InputSize;
+    /** 占位符 */
+    placeholder?: string;
+    /** 原生 name（对浏览器自动填充很关键） */
+    name?: string;
+    /** 原生 id */
+    id?: string;
+    /** 原生 autocomplete */
+    autocomplete?: string;
+    /** 原生 autocapitalize */
+    autocapitalize?: 'off' | 'on' | 'characters' | 'none' | 'sentences' | 'words' | null;
+    /** 原生 spellcheck */
+    spellcheck?: boolean;
+    /** 无可视 label 时的可访问性标签（透传到 input） */
+    'aria-label'?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否可清空 */
+    clearable?: boolean;
+    /** 是否只读 */
+    readonly?: boolean;
+    /** 密码可见切换（仅 type=password 时生效） */
+    showPassword?: boolean;
+    /** 最大长度 */
+    maxlength?: number;
+    /** 前缀内容 */
+    prefix?: Snippet;
+    /** 后缀内容 */
+    suffix?: Snippet;
+    /** 输入事件 */
+    oninput?: (e: Event & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+    /** 变化事件 */
+    onchange?: (e: Event & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+    /** 聚焦事件 */
+    onfocus?: (e: FocusEvent & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+    /** 失焦事件 */
+    onblur?: (e: FocusEvent & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+    /** 键盘按下事件 */
+    onkeydown?: (e: KeyboardEvent & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+    /** 键盘抬起事件 */
+    onkeyup?: (e: KeyboardEvent & {
+        currentTarget: HTMLInputElement;
+    }) => void;
+    /** 清空事件 */
+    onclear?: () => void;
+    /** 自定义类名 */
+    class?: string;
+    /** 是否被浏览器自动填充（只读，由组件内部检测 :-webkit-autofill 设置） */
+    autofilled?: boolean;
+}

package/dist/components/Input/types.js

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

package/dist/components/InputNumber/InputNumber.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+    import type { InputNumberSize } from './types'
+    import Icon from '../Icon'
+    import { Minus, Plus, ChevronUp, ChevronDown } from 'lucide'
+
+    interface InputNumberProps {
+        modelValue?: number
+        min?: number
+        max?: number
+        step?: number
+        precision?: number
+        size?: InputNumberSize
+        disabled?: boolean
+        readonly?: boolean
+        controls?: boolean
+        controlsPosition?: '' | 'right'
+        placeholder?: string
+        class?: string
+    }
+
+    let {
+        modelValue = $bindable(0),
+        min = -Infinity,
+        max = Infinity,
+        step = 1,
+        precision,
+        size = 'default',
+        disabled = false,
+        readonly = false,
+        controls = true,
+        controlsPosition = '',
+        placeholder = '',
+        class: cls = '',
+        ...attrs
+    }: InputNumberProps = $props()
+
+    let isFocused = $state(false)
+
+    const formatValue = (val: number): number => {
+        if (precision !== undefined) {
+            return Number(val.toFixed(precision))
+        }
+        return val
+    }
+
+    const clampValue = (val: number): number => {
+        return Math.min(max, Math.max(min, val))
+    }
+
+    const increase = (): void => {
+        if (disabled || readonly) return
+        const newVal = clampValue(formatValue((modelValue ?? 0) + step))
+        modelValue = newVal
+    }
+
+    const decrease = (): void => {
+        if (disabled || readonly) return
+        const newVal = clampValue(formatValue((modelValue ?? 0) - step))
+        modelValue = newVal
+    }
+
+    const handleInput = (e: Event): void => {
+        const target = e.target as HTMLInputElement
+        const val = parseFloat(target.value)
+        if (!isNaN(val)) {
+            modelValue = clampValue(formatValue(val))
+        }
+    }
+
+    const handleBlur = (): void => {
+        isFocused = false
+        if (modelValue !== undefined) {
+            modelValue = clampValue(formatValue(modelValue))
+        }
+    }
+
+    const isMinDisabled = $derived((modelValue ?? 0) <= min)
+    const isMaxDisabled = $derived((modelValue ?? 0) >= max)
+
+    const classes = $derived(
+        `lm-input-number lm-input-number--${size}${controls ? ' is-controls' : ''}${controlsPosition === 'right' ? ' is-controls-right' : ''}${disabled ? ' is-disabled' : ''}${isFocused ? ' is-focus' : ''}${cls ? ` ${cls}` : ''}`
+    )
+</script>
+
+<div class={classes} {...attrs}>
+    {#if controls && controlsPosition !== 'right'}
+        <button type="button" class="lm-input-number__decrease" disabled={disabled || isMinDisabled} onclick={decrease} tabindex="-1">
+            <Icon icon={Minus} size={14} />
+        </button>
+    {/if}
+
+    <input type="number" class="lm-input-number__input" value={modelValue} {min} {max} {step} {disabled} {readonly} {placeholder} oninput={handleInput} onfocus={() => isFocused = true} onblur={handleBlur} />
+
+    {#if controls && controlsPosition !== 'right'}
+        <button type="button" class="lm-input-number__increase" disabled={disabled || isMaxDisabled} onclick={increase} tabindex="-1">
+            <Icon icon={Plus} size={14} />
+        </button>
+    {/if}
+
+    {#if controls && controlsPosition === 'right'}
+        <div class="lm-input-number__controls">
+            <button type="button" class="lm-input-number__increase" disabled={disabled || isMaxDisabled} onclick={increase} tabindex="-1">
+                <Icon icon={ChevronUp} size={12} />
+            </button>
+            <button type="button" class="lm-input-number__decrease" disabled={disabled || isMinDisabled} onclick={decrease} tabindex="-1">
+                <Icon icon={ChevronDown} size={12} />
+            </button>
+        </div>
+    {/if}
+</div>