lumen-plus 0.0.1

package/dist/components/Select/Select.svelte

@@ -0,0 +1,215 @@
+<script lang="ts">
+    import type { SelectOption, SelectProps } from './types'
+    import { onMount, onDestroy, tick } from 'svelte'
+    import { createDropdownTransition } from '../../utils'
+    import Icon from '../Icon'
+    import { ChevronDown, X } from 'lucide'
+
+    let {
+        modelValue = $bindable(),
+        options = [],
+        placeholder = '请选择',
+        disabled = false,
+        clearable = false,
+        multiple = false,
+        size = 'default',
+        filterable = false,
+        showMenuArrow = true,
+        onvisiblechange,
+        onchange,
+        children,
+        class: cls = '',
+        ...attrs
+    }: SelectProps = $props()
+
+    let visible = $state(false)
+    let reduceMotion = $state(false)
+    let searchQuery = $state('')
+    let rootEl: HTMLDivElement | null = $state(null)
+    let inputEl: HTMLInputElement | null = $state(null)
+    const dropdownId = `lm-select-dropdown-${Math.random().toString(36).slice(2, 9)}`
+
+    const selectedValues = $derived.by((): (string | number)[] => {
+        if (multiple) return Array.isArray(modelValue) ? modelValue : []
+        return modelValue !== undefined && modelValue !== null && !Array.isArray(modelValue) ? [modelValue] : []
+    })
+
+    const hasValue = $derived(selectedValues.length > 0)
+
+    const filteredOptions = $derived.by(() => {
+        if (!filterable) return options
+        const query = searchQuery.trim().toLowerCase()
+        if (!query) return options
+        return options.filter((opt) => opt.label.toLowerCase().includes(query))
+    })
+
+    const displayLabel = $derived.by(() => {
+        if (!hasValue) return ''
+        const labels = selectedValues
+            .map((v) => options.find((opt) => opt.value === v)?.label)
+            .filter((v): v is string => Boolean(v))
+        return labels.join(', ')
+    })
+
+    const isSelected = (value: string | number): boolean => selectedValues.includes(value)
+
+    const open = async (): Promise<void> => {
+        if (disabled || visible) return
+        visible = true
+        onvisiblechange?.(true)
+        if (filterable) {
+            searchQuery = ''
+            await tick()
+            inputEl?.focus()
+        }
+    }
+
+    const close = (): void => {
+        if (!visible) return
+        visible = false
+        onvisiblechange?.(false)
+        searchQuery = ''
+    }
+
+    const toggle = (): void => {
+        if (visible) close()
+        else void open()
+    }
+
+    const commitValue = (next: string | number | (string | number)[] | undefined): void => {
+        modelValue = next as any
+        onchange?.(next)
+    }
+
+    const handleSelect = (option: SelectOption): void => {
+        if (option.disabled) return
+
+        if (multiple) {
+            const next = new Set(selectedValues)
+            if (next.has(option.value)) next.delete(option.value)
+            else next.add(option.value)
+            commitValue(Array.from(next))
+        } else {
+            commitValue(option.value)
+            close()
+        }
+    }
+
+    const handleClear = (e: MouseEvent): void => {
+        e.preventDefault()
+        e.stopPropagation()
+        commitValue(multiple ? [] : undefined)
+    }
+
+    const handleTriggerKeydown = (e: KeyboardEvent): void => {
+        if (e.key === 'Escape') {
+            close()
+            return
+        }
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            toggle()
+            return
+        }
+        if (e.key === 'ArrowDown') {
+            e.preventDefault()
+            void open()
+        }
+    }
+
+    const handlePointerDownOutside = (e: PointerEvent): void => {
+        if (!rootEl) return
+        const path = typeof e.composedPath === 'function' ? (e.composedPath() as EventTarget[]) : ([] as EventTarget[])
+        if (path.includes(rootEl)) return
+        close()
+    }
+
+    const dropdownTransition = $derived(createDropdownTransition(reduceMotion))
+
+    onMount(() => {
+        if (typeof window !== 'undefined') {
+            reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false
+        }
+        document.addEventListener('pointerdown', handlePointerDownOutside, true)
+    })
+
+    onDestroy(() => {
+        document.removeEventListener('pointerdown', handlePointerDownOutside, true)
+    })
+
+    const classes = $derived(`lm-select lm-select--${size}${visible ? ' is-focus' : ''}${disabled ? ' is-disabled' : ''}${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} bind:this={rootEl} {...attrs}>
+    <div
+        class="lm-select__trigger"
+        role="combobox"
+        tabindex={disabled ? -1 : 0}
+        aria-controls={dropdownId}
+        aria-expanded={visible}
+        aria-haspopup="listbox"
+        aria-disabled={disabled}
+        onclick={toggle}
+        onkeydown={handleTriggerKeydown}
+    >
+        {#if filterable && visible}
+            <input
+                bind:this={inputEl}
+                class="lm-select__input"
+                type="text"
+                bind:value={searchQuery}
+                {placeholder}
+                onclick={(e: MouseEvent) => e.stopPropagation()}
+                onkeydown={(e: KeyboardEvent) => e.key === 'Escape' && close()}
+            />
+        {:else}
+            <span class="lm-select__value" class:is-placeholder={!hasValue}>
+                {hasValue ? displayLabel : placeholder}
+            </span>
+        {/if}
+
+        <span class="lm-select__suffix">
+            {#if clearable && hasValue && !disabled}
+                <button type="button" class="lm-select__clear" onclick={handleClear} aria-label="清空">
+                    <Icon icon={X} size={14} />
+                </button>
+            {:else}
+                <Icon icon={ChevronDown} size={14} class="lm-select__arrow{visible ? ' is-reverse' : ''}" />
+            {/if}
+        </span>
+    </div>
+
+    {#if visible}
+        <div id={dropdownId} class="lm-select__dropdown" role="listbox" transition:dropdownTransition>
+            {#if showMenuArrow}
+                <div class="lm-select__menu-arrow" aria-hidden="true"></div>
+            {/if}
+            <div class="lm-select__menu-content">
+                {#if children}
+                    {@render children()}
+                {:else if filteredOptions.length > 0}
+                    {#each filteredOptions as option (option.value)}
+                        <button
+                            type="button"
+                            class="lm-select__option{isSelected(option.value) ? ' is-selected' : ''}"
+                            role="option"
+                            aria-selected={isSelected(option.value)}
+                            disabled={option.disabled}
+                            onclick={() => handleSelect(option)}
+                            onkeydown={(e: KeyboardEvent) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault()
+                                    handleSelect(option)
+                                }
+                            }}
+                        >
+                            {option.label}
+                        </button>
+                    {/each}
+                {:else}
+                    <div class="lm-select__empty">无匹配数据</div>
+                {/if}
+            </div>
+        </div>
+    {/if}
+</div>

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

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

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

@@ -0,0 +1,4 @@
+import Select from './Select.svelte';
+export { Select };
+export type { SelectProps, SelectOption, SelectSize } from './types';
+export default Select;

package/dist/components/Select/index.js

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

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

@@ -0,0 +1,41 @@
+import type { Snippet } from 'svelte';
+/** Select 选项 */
+export interface SelectOption {
+    /** 选项值 */
+    value: string | number;
+    /** 选项标签 */
+    label: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+}
+/** Select 尺寸 */
+export type SelectSize = 'small' | 'default' | 'large';
+/** Select 属性 */
+export interface SelectProps {
+    /** 绑定值 */
+    modelValue?: string | number | (string | number)[];
+    /** 选项列表 */
+    options?: SelectOption[];
+    /** 占位符 */
+    placeholder?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否可清空 */
+    clearable?: boolean;
+    /** 是否多选 */
+    multiple?: boolean;
+    /** 尺寸 */
+    size?: SelectSize;
+    /** 是否可搜索 */
+    filterable?: boolean;
+    /** 是否显示下拉菜单箭头 */
+    showMenuArrow?: boolean;
+    /** 下拉显隐变化 */
+    onvisiblechange?: (visible: boolean) => void;
+    /** 选中值变化 */
+    onchange?: (value: string | number | (string | number)[] | undefined) => void;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Select/types.js

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

package/dist/components/Skeleton/Skeleton.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface SkeletonProps {
+        animated?: boolean
+        rows?: number
+        loading?: boolean
+        throttle?: number
+        children?: Snippet
+        template?: Snippet
+        class?: string
+    }
+
+    let { animated = true, rows = 3, loading = true, throttle = 0, children, template, class: cls = '', ...attrs }: SkeletonProps = $props()
+
+    let shouldShow = $state(false)
+
+    $effect(() => {
+        if (throttle > 0 && loading) {
+            const timer = setTimeout(() => {
+                shouldShow = true
+            }, throttle)
+            return () => clearTimeout(timer)
+        }
+        shouldShow = loading
+    })
+
+    const classes = $derived(`lm-skeleton${animated ? ' is-animated' : ''}${cls ? ` ${cls}` : ''}`)
+    const rowIndices = $derived(Array.from({ length: rows }, (_, i) => i))
+</script>
+
+{#if shouldShow}
+    <div class={classes} {...attrs}>
+        {#if template}
+            {@render template()}
+        {:else}
+            {#each rowIndices as i (i)}
+                <div class="lm-skeleton__item lm-skeleton__p" class:is-first={i === 0} class:is-last={i === rows - 1}></div>
+            {/each}
+        {/if}
+    </div>
+{:else if children}
+    {@render children()}
+{/if}

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface SkeletonProps {
+    animated?: boolean;
+    rows?: number;
+    loading?: boolean;
+    throttle?: number;
+    children?: Snippet;
+    template?: Snippet;
+    class?: string;
+}
+declare const Skeleton: import("svelte").Component<SkeletonProps, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/Skeleton/SkeletonItem.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import type { SkeletonItemVariant } from './types'
+
+    interface SkeletonItemProps {
+        variant?: SkeletonItemVariant
+        class?: string
+    }
+
+    let { variant = 'text', class: cls = '', ...attrs }: SkeletonItemProps = $props()
+
+    const classes = $derived(`lm-skeleton__item lm-skeleton__${variant}${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} {...attrs}></div>

package/dist/components/Skeleton/SkeletonItem.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SkeletonItemVariant } from './types';
+interface SkeletonItemProps {
+    variant?: SkeletonItemVariant;
+    class?: string;
+}
+declare const SkeletonItem: import("svelte").Component<SkeletonItemProps, {}, "">;
+type SkeletonItem = ReturnType<typeof SkeletonItem>;
+export default SkeletonItem;

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

@@ -0,0 +1,5 @@
+import Skeleton from './Skeleton.svelte';
+import SkeletonItem from './SkeletonItem.svelte';
+export { Skeleton, SkeletonItem };
+export type { SkeletonProps, SkeletonItemProps, SkeletonItemVariant } from './types';
+export default Skeleton;

package/dist/components/Skeleton/index.js

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

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

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+/** Skeleton 属性 */
+export interface SkeletonProps {
+    /** 是否显示加载动画 */
+    animated?: boolean;
+    /** 渲染行数 */
+    rows?: number;
+    /** 是否加载中 */
+    loading?: boolean;
+    /** 是否显示节流效果 */
+    throttle?: number;
+    /** 子内容（加载完成后显示） */
+    children?: Snippet;
+    /** 自定义模板 */
+    template?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** SkeletonItem 变体 */
+export type SkeletonItemVariant = 'text' | 'p' | 'h1' | 'h3' | 'caption' | 'button' | 'image' | 'circle' | 'rect';
+/** SkeletonItem 属性 */
+export interface SkeletonItemProps {
+    /** 变体类型 */
+    variant?: SkeletonItemVariant;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Skeleton/types.js

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