lumen-plus 0.0.1

package/dist/components/Affix/Affix.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { AffixPosition } from './types'
+    import { onMount, onDestroy } from 'svelte'
+
+    interface AffixProps {
+        offset?: number
+        position?: AffixPosition
+        target?: string
+        zIndex?: number
+        onchange?: (fixed: boolean) => void
+        children?: Snippet
+        class?: string
+    }
+
+    let { offset = 0, position = 'top', target, zIndex = 100, onchange, children, class: cls = '', ...attrs }: AffixProps = $props()
+
+    let fixed = $state(false)
+    let affixRef: HTMLDivElement | null = $state(null)
+    let placeholderRef: HTMLDivElement | null = $state(null)
+    let container: HTMLElement | Window = $state(window)
+    let width = $state(0)
+    let height = $state(0)
+    let fixedTop = $state<number | undefined>(undefined)
+    let fixedBottom = $state<number | undefined>(undefined)
+
+    const updateFixed = (): void => {
+        if (!affixRef) return
+
+        const rect = (placeholderRef || affixRef).getBoundingClientRect()
+        const containerRect = container === window ? { top: 0, bottom: window.innerHeight } : (container as HTMLElement).getBoundingClientRect()
+
+        let shouldFix = false
+
+        if (position === 'top') {
+            shouldFix = rect.top - containerRect.top < offset
+            if (shouldFix) {
+                fixedTop = containerRect.top + offset
+                fixedBottom = undefined
+            }
+        } else {
+            shouldFix = containerRect.bottom - rect.bottom < offset
+            if (shouldFix) {
+                fixedBottom = window.innerHeight - containerRect.bottom + offset
+                fixedTop = undefined
+            }
+        }
+
+        if (shouldFix !== fixed) {
+            fixed = shouldFix
+            onchange?.(fixed)
+        }
+
+        if (fixed) {
+            width = rect.width
+            height = rect.height
+        }
+    }
+
+    onMount(() => {
+        if (target) {
+            const el = document.querySelector(target)
+            if (el) container = el as HTMLElement
+        }
+
+        const scrollEl = container === window ? window : container
+        scrollEl.addEventListener('scroll', updateFixed, { passive: true })
+        window.addEventListener('resize', updateFixed, { passive: true })
+        updateFixed()
+    })
+
+    onDestroy(() => {
+        const scrollEl = container === window ? window : container
+        scrollEl.removeEventListener('scroll', updateFixed)
+        window.removeEventListener('resize', updateFixed)
+    })
+
+    const classes = $derived(`lm-affix${fixed ? ' is-fixed' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const affixStyle = $derived.by(() => {
+        if (!fixed) return undefined
+        const styles: string[] = [`z-index: ${zIndex}`, `width: ${width}px`]
+        if (fixedTop !== undefined) styles.push(`top: ${fixedTop}px`)
+        if (fixedBottom !== undefined) styles.push(`bottom: ${fixedBottom}px`)
+        return styles.join('; ')
+    })
+
+    const placeholderStyle = $derived(fixed ? `width: ${width}px; height: ${height}px` : undefined)
+</script>
+
+<div bind:this={placeholderRef} style={placeholderStyle}>
+    <div bind:this={affixRef} class={classes} style={affixStyle} {...attrs}>
+        {#if children}
+            {@render children()}
+        {/if}
+    </div>
+</div>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { AffixPosition } from './types';
+interface AffixProps {
+    offset?: number;
+    position?: AffixPosition;
+    target?: string;
+    zIndex?: number;
+    onchange?: (fixed: boolean) => void;
+    children?: Snippet;
+    class?: string;
+}
+declare const Affix: import("svelte").Component<AffixProps, {}, "">;
+type Affix = ReturnType<typeof Affix>;
+export default Affix;

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

@@ -0,0 +1,4 @@
+import Affix from './Affix.svelte';
+export { Affix };
+export type { AffixProps, AffixPosition } from './types';
+export default Affix;

package/dist/components/Affix/index.js

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

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+export type AffixPosition = 'top' | 'bottom';
+export interface AffixProps {
+    offset?: number;
+    position?: AffixPosition;
+    target?: string;
+    zIndex?: number;
+    onchange?: (fixed: boolean) => void;
+    children?: Snippet;
+    class?: string;
+}

package/dist/components/Affix/types.js

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

package/dist/components/Alert/Alert.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { IconNode } from 'lucide'
+    import { CheckCircle, AlertTriangle, AlertCircle, Info, X } from 'lucide'
+    import Icon from '../Icon'
+
+    interface AlertProps {
+        type?: 'info' | 'success' | 'warning' | 'danger'
+        title?: string
+        closable?: boolean
+        showIcon?: boolean
+        center?: boolean
+        closeText?: string
+        duration?: number
+        children?: Snippet
+        onclose?: () => void
+        class?: string
+    }
+
+    const ICON_MAP: Record<string, IconNode> = {
+        success: CheckCircle,
+        warning: AlertTriangle,
+        danger: AlertCircle,
+        info: Info,
+    }
+
+    let { type = 'info', title, closable = false, showIcon = true, center = false, closeText, duration = 0, children, onclose, class: cls = '', ...attrs }: AlertProps = $props()
+
+    let visible = $state(true)
+
+    let timer: ReturnType<typeof setTimeout> | null = null
+
+    const classes = $derived(`lm-alert lm-alert--${type}${!visible ? ' is-hidden' : ''}${center ? ' is-center' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const handleClose = (): void => {
+        visible = false
+        onclose?.()
+    }
+
+    $effect(() => {
+        if (!visible || !duration || duration <= 0) return
+        if (timer) clearTimeout(timer)
+        timer = setTimeout(handleClose, duration)
+        return () => {
+            if (timer) clearTimeout(timer)
+        }
+    })
+</script>
+
+{#if visible}
+    <div {...attrs} class={classes} role="alert">
+        {#if showIcon}
+            <div class="lm-alert__icon">
+                <Icon icon={ICON_MAP[type]} size={20} />
+            </div>
+        {/if}
+        <div class="lm-alert__content">
+            {#if title}
+                <div class="lm-alert__title">{title}</div>
+            {/if}
+            {#if children}
+                <div class="lm-alert__description">
+                    {@render children()}
+                </div>
+            {/if}
+        </div>
+        {#if closable}
+            <button type="button" class="lm-alert__close" onclick={handleClose} aria-label="Close">
+                {#if closeText}
+                    {closeText}
+                {:else}
+                    <Icon icon={X} size={16} />
+                {/if}
+            </button>
+        {/if}
+    </div>
+{/if}

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface AlertProps {
+    type?: 'info' | 'success' | 'warning' | 'danger';
+    title?: string;
+    closable?: boolean;
+    showIcon?: boolean;
+    center?: boolean;
+    closeText?: string;
+    duration?: number;
+    children?: Snippet;
+    onclose?: () => void;
+    class?: string;
+}
+declare const Alert: import("svelte").Component<AlertProps, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

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

@@ -0,0 +1,4 @@
+import Alert from './Alert.svelte';
+export { Alert };
+export type { AlertProps, AlertType } from './types';
+export default Alert;

package/dist/components/Alert/index.js

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

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

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+export type AlertType = 'info' | 'success' | 'warning' | 'danger';
+export interface AlertProps {
+    type?: AlertType;
+    title?: string;
+    closable?: boolean;
+    showIcon?: boolean;
+    center?: boolean;
+    closeText?: string;
+    duration?: number;
+    children?: Snippet;
+    onclose?: () => void;
+    class?: string;
+}
+export interface AlertEmits {
+    close: void;
+}
+export interface AlertSlots {
+    icon?: any;
+    title?: any;
+    default?: any;
+    actions?: any;
+}

package/dist/components/Alert/types.js

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

package/dist/components/Autocomplete/Autocomplete.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+    import Icon from '../Icon'
+    import { X, Loader2, ChevronDown } from 'lucide'
+
+    interface SuggestionItem {
+        value: string
+        [key: string]: any
+    }
+
+    interface Props {
+        modelValue?: string
+        placeholder?: string
+        disabled?: boolean
+        clearable?: boolean
+        loading?: boolean
+        debounce?: number
+        valueKey?: string
+        fetchSuggestions?: (query: string) => Promise<SuggestionItem[]> | SuggestionItem[]
+        size?: 'small' | 'default' | 'large'
+        showMenuArrow?: boolean
+        class?: string
+    }
+
+    let {
+        modelValue = $bindable(''),
+        placeholder = '',
+        disabled = false,
+        clearable = false,
+        loading = $bindable(false),
+        debounce = 300,
+        valueKey = 'value',
+        fetchSuggestions,
+        size = 'default',
+        showMenuArrow = true,
+        class: cls = '',
+        ...attrs
+    }: Props = $props()
+
+    let visible = $state(false)
+    let suggestions = $state<SuggestionItem[]>([])
+    let highlightIndex = $state(-1)
+    let inputRef: HTMLElement | null = $state(null)
+    let debounceTimer: ReturnType<typeof setTimeout> | null = null
+
+    const handleInput = (e: Event): void => {
+        modelValue = (e.target as HTMLInputElement).value
+        highlightIndex = -1
+        if (debounceTimer) clearTimeout(debounceTimer)
+        debounceTimer = setTimeout(() => fetchData(modelValue), debounce)
+    }
+
+    const fetchData = async (query: string): Promise<void> => {
+        if (!fetchSuggestions) {
+            suggestions = []
+            visible = false
+            return
+        }
+        loading = true
+        try {
+            suggestions = await fetchSuggestions(query)
+            visible = suggestions.length > 0
+        } catch {
+            suggestions = []
+            visible = false
+        } finally {
+            loading = false
+        }
+    }
+
+    const handleSelect = (item: SuggestionItem): void => {
+        modelValue = item[valueKey]
+        visible = false
+        suggestions = []
+    }
+
+    const handleClear = (e: MouseEvent): void => {
+        e.stopPropagation()
+        modelValue = ''
+        suggestions = []
+        visible = false
+    }
+
+    const handleKeydown = (e: KeyboardEvent): void => {
+        if (!visible) return
+        if (e.key === 'ArrowDown') {
+            e.preventDefault()
+            highlightIndex = Math.min(highlightIndex + 1, suggestions.length - 1)
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault()
+            highlightIndex = Math.max(highlightIndex - 1, 0)
+        } else if (e.key === 'Enter' && highlightIndex >= 0 && suggestions[highlightIndex]) {
+            e.preventDefault()
+            handleSelect(suggestions[highlightIndex])
+        } else if (e.key === 'Escape') {
+            visible = false
+        }
+    }
+
+    const handleClickOutside = (e: MouseEvent): void => {
+        if (inputRef && !inputRef.contains(e.target as Node)) visible = false
+    }
+
+    $effect(() => {
+        if (visible) document.addEventListener('click', handleClickOutside)
+        return () => document.removeEventListener('click', handleClickOutside)
+    })
+
+    const classes = $derived(['lm-autocomplete', disabled && 'is-disabled', size !== 'default' && `lm-autocomplete--${size}`, cls].filter(Boolean).join(' '))
+</script>
+
+<div bind:this={inputRef} class={classes} {...attrs}>
+    <div class="lm-autocomplete__input" class:is-focus={visible}>
+        <input
+            type="text"
+            value={modelValue}
+            {placeholder}
+            {disabled}
+            role="combobox"
+            aria-expanded={visible}
+            aria-controls="autocomplete-listbox"
+            aria-autocomplete="list"
+            oninput={handleInput}
+            onfocus={() => suggestions.length > 0 && (visible = true)}
+            onkeydown={handleKeydown}
+        />
+        {#if loading}
+            <span class="lm-autocomplete__loading" aria-label="加载中">
+                <Icon icon={Loader2} size={14} />
+            </span>
+        {:else if clearable && modelValue && !disabled}
+            <button type="button" class="lm-autocomplete__clear" onclick={handleClear} aria-label="清除">
+                <Icon icon={X} size={14} />
+            </button>
+        {:else}
+            <span class="lm-autocomplete__arrow" class:is-open={visible} aria-hidden="true">
+                <Icon icon={ChevronDown} size={14} />
+            </span>
+        {/if}
+    </div>
+
+    {#if visible && suggestions.length > 0}
+        <div class="lm-autocomplete__dropdown" role="listbox" id="autocomplete-listbox">
+            {#if showMenuArrow}
+                <div class="lm-autocomplete__menu-arrow" aria-hidden="true"></div>
+            {/if}
+
+            <ul class="lm-autocomplete__menu" role="group">
+                {#each suggestions as item, index (item[valueKey])}
+                    <li
+                        class="lm-autocomplete__item"
+                        class:is-highlighted={index === highlightIndex}
+                        role="option"
+                        aria-selected={index === highlightIndex}
+                        onmousedown={() => handleSelect(item)}
+                        onmouseenter={() => (highlightIndex = index)}
+                    >
+                        {item[valueKey]}
+                    </li>
+                {/each}
+            </ul>
+        </div>
+    {/if}
+</div>

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

@@ -0,0 +1,20 @@
+interface SuggestionItem {
+    value: string;
+    [key: string]: any;
+}
+interface Props {
+    modelValue?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    loading?: boolean;
+    debounce?: number;
+    valueKey?: string;
+    fetchSuggestions?: (query: string) => Promise<SuggestionItem[]> | SuggestionItem[];
+    size?: 'small' | 'default' | 'large';
+    showMenuArrow?: boolean;
+    class?: string;
+}
+declare const Autocomplete: import("svelte").Component<Props, {}, "modelValue" | "loading">;
+type Autocomplete = ReturnType<typeof Autocomplete>;
+export default Autocomplete;

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

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

package/dist/components/Autocomplete/index.js

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

package/dist/components/Avatar/Avatar.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface AvatarProps {
+        src?: string
+        alt?: string
+        size?: 'small' | 'medium' | 'large' | number
+        shape?: 'circle' | 'square'
+        fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+        children?: Snippet
+        onerror?: (e: Event) => void
+        class?: string
+    }
+
+    let { src, alt = '', size = 'medium', shape = 'circle', fit = 'cover', children, onerror, class: cls = '', ...attrs }: AvatarProps = $props()
+
+    let hasError = $state(false)
+
+    const sizeClass = $derived(typeof size === 'number' ? 'lm-avatar--custom' : `lm-avatar--${size}`)
+    const classes = $derived(`lm-avatar ${sizeClass} lm-avatar--${shape}${cls ? ` ${cls}` : ''}`)
+
+    const styleAttr = $derived.by(() => {
+        if (typeof size !== 'number') return undefined
+        const px = `${size}px`
+        return `width:${px};height:${px};font-size:${Math.max(12, Math.round(size / 2.8))}px;`
+    })
+
+    const handleError = (e: Event): void => {
+        hasError = true
+        onerror?.(e)
+    }
+
+    $effect(() => {
+        if (hasError && src) hasError = false
+    })
+</script>
+
+<span {...attrs} class={classes} style={styleAttr} aria-label={alt} role="img">
+    {#if src && !hasError}
+        <img class="lm-avatar__img" {src} {alt} style={`object-fit:${fit};`} onerror={handleError} />
+    {:else}
+        <span class="lm-avatar__placeholder">
+            {#if children}
+                {@render children()}
+            {:else}
+                {alt?.slice(0, 1).toUpperCase()}
+            {/if}
+        </span>
+    {/if}
+</span>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface AvatarProps {
+    src?: string;
+    alt?: string;
+    size?: 'small' | 'medium' | 'large' | number;
+    shape?: 'circle' | 'square';
+    fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    children?: Snippet;
+    onerror?: (e: Event) => void;
+    class?: string;
+}
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

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

@@ -0,0 +1,4 @@
+import Avatar from './Avatar.svelte';
+export { Avatar };
+export type { AvatarProps, AvatarSize, AvatarShape, AvatarFit } from './types';
+export default Avatar;

package/dist/components/Avatar/index.js

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

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

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+/** Avatar 尺寸 */
+export type AvatarSize = 'small' | 'medium' | 'large' | number;
+/** Avatar 形状 */
+export type AvatarShape = 'circle' | 'square';
+/** Avatar 图片适应方式 */
+export type AvatarFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+/** Avatar 属性 */
+export interface AvatarProps {
+    /** 图片地址 */
+    src?: string;
+    /** 替代文本 */
+    alt?: string;
+    /** 尺寸 */
+    size?: AvatarSize;
+    /** 形状 */
+    shape?: AvatarShape;
+    /** 图片适应方式 */
+    fit?: AvatarFit;
+    /** 子内容 */
+    children?: Snippet;
+    /** 图片加载失败回调 */
+    onerror?: (e: Event) => void;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Avatar/types.js

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

package/dist/components/Backtop/Backtop.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import { onMount, onDestroy } from 'svelte'
+    import Icon from '../Icon'
+    import { ArrowUp } from 'lucide'
+
+    interface BacktopProps {
+        visibilityHeight?: number
+        right?: number
+        bottom?: number
+        target?: string
+        onclick?: () => void
+        children?: Snippet
+        class?: string
+    }
+
+    let { visibilityHeight = 200, right = 40, bottom = 40, target, onclick, children, class: cls = '', ...attrs }: BacktopProps = $props()
+
+    let visible = $state(false)
+    let container: HTMLElement | Window = $state(window)
+
+    const handleScroll = (): void => {
+        const scrollTop = container === window ? document.documentElement.scrollTop || document.body.scrollTop : (container as HTMLElement).scrollTop
+        visible = scrollTop >= visibilityHeight
+    }
+
+    const scrollToTop = (): void => {
+        const el = container === window ? document.documentElement : (container as HTMLElement)
+        el.scrollTo({ top: 0, behavior: 'smooth' })
+        onclick?.()
+    }
+
+    onMount(() => {
+        if (target) {
+            const el = document.querySelector(target)
+            if (el) container = el as HTMLElement
+        }
+        const scrollEl = container === window ? window : container
+        scrollEl.addEventListener('scroll', handleScroll, { passive: true })
+        handleScroll()
+    })
+
+    onDestroy(() => {
+        const scrollEl = container === window ? window : container
+        scrollEl.removeEventListener('scroll', handleScroll)
+    })
+
+    const classes = $derived(`lm-backtop${visible ? ' is-visible' : ''}${cls ? ` ${cls}` : ''}`)
+    const style = $derived(`right: ${right}px; bottom: ${bottom}px`)
+</script>
+
+{#if visible}
+    <button type="button" class={classes} {style} onclick={scrollToTop} aria-label="Back to top" {...attrs}>
+        {#if children}
+            {@render children()}
+        {:else}
+            <Icon icon={ArrowUp} size={20} />
+        {/if}
+    </button>
+{/if}

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface BacktopProps {
+    visibilityHeight?: number;
+    right?: number;
+    bottom?: number;
+    target?: string;
+    onclick?: () => void;
+    children?: Snippet;
+    class?: string;
+}
+declare const Backtop: import("svelte").Component<BacktopProps, {}, "">;
+type Backtop = ReturnType<typeof Backtop>;
+export default Backtop;

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

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

package/dist/components/Backtop/index.js

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