luna-plus 0.0.5

package/dist/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/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/Image/index.js

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

package/dist/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/Image/types.js

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

package/dist/Input/Input.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+    import Icon from '../Icon/Icon.svelte'
+    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/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/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/Input/index.js

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

package/dist/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/Input/types.js

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

package/dist/InputNumber/InputNumber.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+    import type { InputNumberSize } from './types'
+    import Icon from '../Icon/Icon.svelte'
+    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>

package/dist/InputNumber/InputNumber.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { InputNumberSize } from './types';
+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;
+}
+declare const InputNumber: import("svelte").Component<InputNumberProps, {}, "modelValue">;
+type InputNumber = ReturnType<typeof InputNumber>;
+export default InputNumber;

package/dist/InputNumber/index.d.ts

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

package/dist/InputNumber/index.js

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

package/dist/InputNumber/types.d.ts

@@ -0,0 +1,29 @@
+/** InputNumber 尺寸 */
+export type InputNumberSize = 'small' | 'default' | 'large';
+/** InputNumber 属性 */
+export 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;
+}

package/dist/InputNumber/types.js

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

package/dist/InputTag/InputTag.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+    import Tag from '../Tag'
+
+    import type { InputTagProps } from './types'
+
+    const escapeRegExp = (s: string): string => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+
+    let {
+        modelValue = $bindable<string[]>([]),
+        placeholder = '请输入标签',
+        disabled = false,
+        readonly = false,
+        size = 'default',
+        max,
+        allowDuplicates = false,
+        separator = /[,，\n]/,
+        tagType = 'info',
+        onchange,
+        class: cls = '',
+        ...attrs
+    }: InputTagProps = $props()
+
+    let inputRef: HTMLInputElement | null = $state(null)
+    let inputValue = $state('')
+    let focused = $state(false)
+
+    const separatorRe = $derived.by(() => {
+        if (separator instanceof RegExp) return separator
+        const s = String(separator ?? '')
+        if (!s) return /[,，\n]/
+        return new RegExp(`[${escapeRegExp(s)}]`)
+    })
+
+    const tagSize = $derived.by(() => {
+        if (size === 'small') return 'small'
+        if (size === 'large') return 'large'
+        return 'medium'
+    })
+
+    const classes = $derived(
+        [
+            'lm-input-tag',
+            `lm-input-tag--${size}`,
+            disabled && 'is-disabled',
+            readonly && 'is-readonly',
+            focused && 'is-focused',
+            cls,
+        ]
+            .filter(Boolean)
+            .join(' ')
+    )
+
+    const focusInput = (): void => {
+        if (disabled || readonly) return
+        inputRef?.focus()
+    }
+
+    const emitChange = (): void => {
+        onchange?.([...modelValue])
+    }
+
+    const addTag = (tag: string): boolean => {
+        const nextTag = tag.trim()
+        if (!nextTag) return false
+        if (!allowDuplicates && modelValue.includes(nextTag)) return false
+        if (typeof max === 'number' && max >= 0 && modelValue.length >= max) return false
+
+        modelValue = [...modelValue, nextTag]
+        emitChange()
+        return true
+    }
+
+    const removeAt = (index: number): void => {
+        if (disabled || readonly) return
+        if (index < 0 || index >= modelValue.length) return
+        modelValue = modelValue.filter((_, i) => i !== index)
+        emitChange()
+    }
+
+    const commitFromRaw = (raw: string): void => {
+        const text = (raw ?? '').trim()
+        if (!text) return
+
+        const parts = text
+            .split(separatorRe)
+            .map((s) => s.trim())
+            .filter(Boolean)
+
+        let added = false
+        for (const part of parts) {
+            const ok = addTag(part)
+            added = added || ok
+            if (typeof max === 'number' && max >= 0 && modelValue.length >= max) break
+        }
+
+        if (added) inputValue = ''
+    }
+
+    const handleInput = (e: Event & { currentTarget: HTMLInputElement }): void => {
+        if (disabled || readonly) return
+        const val = e.currentTarget.value
+
+        // If user pasted multiple tags, commit all but keep the last chunk for continued typing.
+        const chunks = val.split(separatorRe)
+        if (chunks.length <= 1) {
+            inputValue = val
+            return
+        }
+
+        const last = chunks.pop() ?? ''
+        for (const chunk of chunks) commitFromRaw(chunk)
+        inputValue = last
+    }
+
+    const handleKeydown = (e: KeyboardEvent): void => {
+        if (disabled || readonly) return
+
+        if (e.key === 'Enter' || e.key === 'Tab') {
+            if (inputValue.trim()) {
+                e.preventDefault()
+                commitFromRaw(inputValue)
+            }
+            return
+        }
+
+        if (e.key === ',' || e.key === '，') {
+            e.preventDefault()
+            commitFromRaw(inputValue)
+            return
+        }
+
+        if (e.key === 'Backspace' && !inputValue) {
+            if (modelValue.length > 0) removeAt(modelValue.length - 1)
+        }
+    }
+</script>
+
+<div class={classes} onclick={focusInput} {...attrs}>
+    <div class="lm-input-tag__inner">
+        {#each modelValue as tag, i (allowDuplicates ? i : tag)}
+            <Tag type={tagType} size={tagSize} closable={!disabled && !readonly} onclose={() => removeAt(i)}>
+                {tag}
+            </Tag>
+        {/each}
+
+        <input
+            bind:this={inputRef}
+            class="lm-input-tag__input"
+            type="text"
+            value={inputValue}
+            placeholder={modelValue.length === 0 ? placeholder : ''}
+            disabled={disabled}
+            readonly={readonly}
+            onfocus={() => (focused = true)}
+            onblur={() => (focused = false)}
+            oninput={handleInput}
+            onkeydown={handleKeydown}
+        />
+    </div>
+</div>

package/dist/InputTag/InputTag.svelte.d.ts

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

package/dist/InputTag/index.d.ts

@@ -0,0 +1,4 @@
+import InputTag from './InputTag.svelte';
+export default InputTag;
+export { InputTag };
+export type { InputTagProps, InputTagSize, InputTagTagType } from './types';

package/dist/InputTag/index.js

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