@lumen-design/input 0.0.2

package/dist/Input.svelte

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

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

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

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

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@lumen-design/input",
+  "version": "0.0.2",
+  "description": "Input component for Lumen UI",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "svelte-package -i src -o dist --types",
+    "postbuild": "cp -f src/*.d.ts dist/ 2>/dev/null || true",
+    "build:watch": "svelte-package -i src -o dist --types -w"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "svelte": "5.48.2"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "dependencies": {
+    "lucide": "^0.563.0"
+  }
+}