lumen-plus 0.0.1

package/dist/components/Popconfirm/Popconfirm.svelte

@@ -0,0 +1,228 @@
+<script lang="ts" module>
+    let currentVisiblePopconfirm: symbol | null = $state(null)
+</script>
+
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import Icon from '../Icon'
+    import Button from '../../Button/src'
+    import { CircleHelp, CircleAlert, Info, CircleCheck } from 'lucide'
+
+    interface PopconfirmProps {
+        title?: string
+        confirmButtonText?: string
+        cancelButtonText?: string
+        confirmButtonType?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+        cancelButtonType?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+        icon?: 'question' | 'warning' | 'info' | 'success'
+        iconColor?: string
+        hideIcon?: boolean
+        hideAfter?: number
+        width?: string | number
+        placement?: 'top' | 'bottom' | 'left' | 'right'
+        disabled?: boolean
+        visible?: boolean
+        children?: Snippet
+        onConfirm?: () => void | Promise<void>
+        onCancel?: () => void
+        class?: string
+        [key: string]: any
+    }
+
+    /** 图标映射（静态，避免重复创建） */
+    const ICON_MAP = {
+        question: CircleHelp,
+        warning: CircleAlert,
+        info: Info,
+        success: CircleCheck,
+    } as const
+
+    /** 默认图标颜色（静态） */
+    const DEFAULT_ICON_COLORS = {
+        question: '#0062FF',
+        warning: '#FF974A',
+        info: '#92929D',
+        success: '#31C27C',
+    } as const
+
+    let {
+        title = 'Are you sure?',
+        confirmButtonText = 'Yes',
+        cancelButtonText = 'No',
+        confirmButtonType = 'primary',
+        cancelButtonType = 'default',
+        icon = 'question',
+        iconColor = '',
+        hideIcon = false,
+        hideAfter = 0,
+        width = 150,
+        placement = 'top',
+        disabled = false,
+        visible = undefined,
+        children,
+        onConfirm,
+        onCancel,
+        class: cls = '',
+        ...attrs
+    }: PopconfirmProps = $props()
+
+    const instanceId = Symbol('popconfirm')
+
+    let internalVisible = $state(false)
+    let isVisible = $derived(visible !== undefined ? visible : internalVisible)
+    let loading = $state(false)
+    let popperElement: HTMLElement | null = $state(null)
+    let adjustedPlacement = $state<'top' | 'bottom' | 'left' | 'right' | null>(null)
+    let actualPlacement = $derived(adjustedPlacement || placement)
+
+    /** 隐藏定时器（普通变量，无需响应式） */
+    let hideTimer: ReturnType<typeof setTimeout> | null = null
+
+    const currentIcon = $derived(ICON_MAP[icon])
+    const currentIconColor = $derived(iconColor || DEFAULT_ICON_COLORS[icon])
+
+    const clearHideTimer = (): void => {
+        if (hideTimer) {
+            clearTimeout(hideTimer)
+            hideTimer = null
+        }
+    }
+
+    const closePopconfirm = (): void => {
+        clearHideTimer()
+        internalVisible = false
+        if (currentVisiblePopconfirm === instanceId) currentVisiblePopconfirm = null
+    }
+
+    const handleTriggerClick = (e: MouseEvent): void => {
+        if (disabled) return
+        e.stopPropagation()
+        if (!internalVisible) {
+            if (currentVisiblePopconfirm !== null && currentVisiblePopconfirm !== instanceId) {
+                window.dispatchEvent(new CustomEvent('popconfirm:close', { detail: { except: instanceId } }))
+            }
+            currentVisiblePopconfirm = instanceId
+            internalVisible = true
+
+            if (hideAfter > 0) {
+                clearHideTimer()
+                hideTimer = setTimeout(closePopconfirm, hideAfter)
+            }
+        } else {
+            closePopconfirm()
+        }
+    }
+
+    const handleConfirm = async (): Promise<void> => {
+        if (loading) return
+
+        if (onConfirm) {
+            const result = onConfirm()
+            if (result instanceof Promise) {
+                loading = true
+                try {
+                    await result
+                } finally {
+                    loading = false
+                }
+            }
+        }
+
+        closePopconfirm()
+    }
+
+    const handleCancel = (): void => {
+        if (loading) return
+        onCancel?.()
+        closePopconfirm()
+    }
+
+    const handleClickOutside = (e: MouseEvent): void => {
+        if (!isVisible) return
+        const target = e.target as HTMLElement
+        const popconfirm = document.querySelector('.lm-popconfirm')
+        if (popconfirm && !popconfirm.contains(target)) closePopconfirm()
+    }
+
+    const handleGlobalClose = (e: Event): void => {
+        const customEvent = e as CustomEvent
+        if (customEvent.detail?.except !== instanceId && internalVisible) closePopconfirm()
+    }
+
+    $effect(() => {
+        window.addEventListener('popconfirm:close', handleGlobalClose)
+        return () => window.removeEventListener('popconfirm:close', handleGlobalClose)
+    })
+
+    $effect(() => {
+        if (isVisible) {
+            document.addEventListener('click', handleClickOutside)
+
+            setTimeout(() => {
+                if (!popperElement) return
+
+                const rect = popperElement.getBoundingClientRect()
+                const viewportWidth = window.innerWidth
+                const viewportHeight = window.innerHeight
+                const margin = 12
+
+                let newPlacement = placement
+                if (placement === 'top' && rect.top < margin) newPlacement = 'bottom'
+                else if (placement === 'bottom' && rect.bottom > viewportHeight - margin) newPlacement = 'top'
+                else if (placement === 'left' && rect.left < margin) newPlacement = 'right'
+                else if (placement === 'right' && rect.right > viewportWidth - margin) newPlacement = 'left'
+
+                adjustedPlacement = newPlacement
+            }, 0)
+
+            return () => document.removeEventListener('click', handleClickOutside)
+        } else {
+            adjustedPlacement = null
+        }
+    })
+
+    const classes = $derived(`lm-popconfirm${isVisible ? ' is-visible' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const popperClasses = $derived(`lm-popconfirm__popper is-${actualPlacement}`)
+
+    const widthStyle = $derived(typeof width === 'number' ? `${width}px` : width)
+</script>
+
+<div {...attrs} class={classes}>
+    <div class="lm-popconfirm__reference" role="button" tabindex="0" onclick={handleTriggerClick} onkeydown={(e: KeyboardEvent) => e.key === 'Enter' && handleTriggerClick(e as any)}>
+        {#if children}
+            {@render children()}
+        {/if}
+    </div>
+
+    {#if isVisible}
+        <div
+            bind:this={popperElement}
+            class={popperClasses}
+            style="width: {widthStyle}"
+            role="dialog"
+            aria-modal="false"
+            tabindex="-1"
+            onclick={(e: MouseEvent) => e.stopPropagation()}
+            onkeydown={(e: KeyboardEvent) => e.stopPropagation()}
+        >
+            <div class="lm-popconfirm__arrow"></div>
+            <div class="lm-popconfirm__content">
+                {#if !hideIcon}
+                    <div class="lm-popconfirm__icon">
+                        <Icon icon={currentIcon} size={18} color={currentIconColor} />
+                    </div>
+                {/if}
+                <div class="lm-popconfirm__title">{title}</div>
+            </div>
+            <div class="lm-popconfirm__actions">
+                <Button size="small" type={cancelButtonType} onclick={handleCancel} disabled={loading}>
+                    {cancelButtonText}
+                </Button>
+                <Button size="small" type={confirmButtonType} onclick={handleConfirm} {loading}>
+                    {confirmButtonText}
+                </Button>
+            </div>
+        </div>
+    {/if}
+</div>

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

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+interface PopconfirmProps {
+    title?: string;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+    confirmButtonType?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    cancelButtonType?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    icon?: 'question' | 'warning' | 'info' | 'success';
+    iconColor?: string;
+    hideIcon?: boolean;
+    hideAfter?: number;
+    width?: string | number;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    disabled?: boolean;
+    visible?: boolean;
+    children?: Snippet;
+    onConfirm?: () => void | Promise<void>;
+    onCancel?: () => void;
+    class?: string;
+    [key: string]: any;
+}
+declare const Popconfirm: import("svelte").Component<PopconfirmProps, {}, "">;
+type Popconfirm = ReturnType<typeof Popconfirm>;
+export default Popconfirm;

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

@@ -0,0 +1,4 @@
+import Popconfirm from './Popconfirm.svelte';
+export { Popconfirm };
+export type { PopconfirmProps, PopconfirmPlacement, PopconfirmIcon, PopconfirmButtonType } from './types';
+export default Popconfirm;

package/dist/components/Popconfirm/index.js

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

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

@@ -0,0 +1,21 @@
+export type PopconfirmPlacement = 'top' | 'bottom' | 'left' | 'right';
+export type PopconfirmIcon = 'question' | 'warning' | 'info' | 'success';
+export type PopconfirmButtonType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export interface PopconfirmProps {
+    title?: string;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+    confirmButtonType?: PopconfirmButtonType;
+    cancelButtonType?: PopconfirmButtonType;
+    icon?: PopconfirmIcon;
+    iconColor?: string;
+    hideIcon?: boolean;
+    hideAfter?: number;
+    width?: string | number;
+    placement?: PopconfirmPlacement;
+    disabled?: boolean;
+    visible?: boolean;
+    onConfirm?: () => void | Promise<void>;
+    onCancel?: () => void;
+    class?: string;
+}

package/dist/components/Popconfirm/types.js

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

package/dist/components/Popover/Popover.svelte

@@ -0,0 +1,176 @@
+<script lang="ts" module>
+    let currentVisiblePopover: symbol | null = $state(null)
+</script>
+
+<script lang="ts">
+    import type { PopoverProps } from './types'
+    import { onDestroy } from 'svelte'
+
+    let {
+        content = undefined,
+        placement = 'top',
+        width = 200,
+        visible = undefined,
+        disabled = false,
+        showArrow = true,
+        trigger = 'hover',
+        class: cls = '',
+        children,
+        ...attrs
+    }: PopoverProps & { trigger?: 'hover' | 'click' } = $props()
+
+    const instanceId = Symbol('popover')
+
+    let internalVisible = $state(false)
+    let isVisible = $derived(visible !== undefined ? visible : internalVisible)
+    let popperElement: HTMLElement | null = $state(null)
+    let adjustedPlacement = $state<string | null>(null)
+    let actualPlacement = $derived(adjustedPlacement || placement)
+
+    /** 隐藏定时器（普通变量，无需响应式） */
+    let hideTimer: ReturnType<typeof setTimeout> | null = null
+
+    const clearHideTimer = (): void => {
+        if (hideTimer) {
+            clearTimeout(hideTimer)
+            hideTimer = null
+        }
+    }
+
+    const showPopover = (): void => {
+        if (disabled) return
+        if (currentVisiblePopover !== null && currentVisiblePopover !== instanceId) {
+            window.dispatchEvent(new CustomEvent('popover:close', { detail: { except: instanceId } }))
+        }
+        currentVisiblePopover = instanceId
+        internalVisible = true
+        clearHideTimer()
+    }
+
+    const closePopover = (): void => {
+        internalVisible = false
+        if (currentVisiblePopover === instanceId) currentVisiblePopover = null
+    }
+
+    const handleTriggerClick = (e: MouseEvent): void => {
+        if (disabled) return
+        e.stopPropagation()
+        if (!internalVisible) showPopover()
+        else closePopover()
+    }
+
+    const handleRefEnter = (): void => {
+        if (trigger !== 'hover') return
+        showPopover()
+    }
+
+    const handleRefLeave = (): void => {
+        if (trigger !== 'hover') return
+        clearHideTimer()
+        hideTimer = setTimeout(closePopover, 120)
+    }
+
+    const handlePopperEnter = (): void => {
+        if (trigger !== 'hover') return
+        clearHideTimer()
+    }
+
+    const handlePopperLeave = (): void => {
+        if (trigger !== 'hover') return
+        hideTimer = setTimeout(closePopover, 120)
+    }
+
+    const handleClickOutside = (e: MouseEvent): void => {
+        if (!isVisible) return
+        const target = e.target as HTMLElement
+        const popover = document.querySelector('.lm-popover')
+        if (popover && !popover.contains(target)) closePopover()
+    }
+
+    const handleGlobalClose = (e: Event): void => {
+        const customEvent = e as CustomEvent
+        if (customEvent.detail?.except !== instanceId && internalVisible) closePopover()
+    }
+
+    $effect(() => {
+        window.addEventListener('popover:close', handleGlobalClose)
+        return () => window.removeEventListener('popover:close', handleGlobalClose)
+    })
+
+    onDestroy(() => {
+        clearHideTimer()
+        if (currentVisiblePopover === instanceId) currentVisiblePopover = null
+    })
+
+    $effect(() => {
+        if (isVisible) {
+            document.addEventListener('click', handleClickOutside)
+
+            setTimeout(() => {
+                if (!popperElement) return
+                const rect = popperElement.getBoundingClientRect()
+                const viewportWidth = window.innerWidth
+                const viewportHeight = window.innerHeight
+                const margin = 12
+
+                let newPlacement = placement
+                // basic collision handling based on main axis
+                if (placement.startsWith('top') && rect.top < margin) newPlacement = 'bottom'
+                if (placement.startsWith('bottom') && rect.bottom > viewportHeight - margin) newPlacement = 'top'
+                if (placement.startsWith('left') && rect.left < margin) newPlacement = 'right'
+                if (placement.startsWith('right') && rect.right > viewportWidth - margin) newPlacement = 'left'
+
+                adjustedPlacement = newPlacement
+            }, 0)
+
+            return () => document.removeEventListener('click', handleClickOutside)
+        } else {
+            adjustedPlacement = null
+        }
+    })
+
+    const classes = $derived(`lm-popover${isVisible ? ' is-visible' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const popperClasses = $derived(`lm-popover__popper is-${actualPlacement}`)
+
+    // width handled by CSS; inline width removed to avoid inline styles
+</script>
+
+<div {...attrs} class={classes}>
+    <div
+        class="lm-popover__reference"
+        role="button"
+        tabindex="0"
+        onclick={handleTriggerClick}
+        onkeydown={(e: KeyboardEvent) => e.key === 'Enter' && handleTriggerClick(e as any)}
+        onmouseenter={handleRefEnter}
+        onmouseleave={handleRefLeave}
+    >
+        {#if children}
+            {@render children()}
+        {/if}
+    </div>
+
+    {#if isVisible}
+        <div
+            bind:this={popperElement}
+            class={popperClasses}
+            role="dialog"
+            aria-modal="false"
+            tabindex="-1"
+            onclick={(e: MouseEvent) => e.stopPropagation()}
+            onkeydown={(e: KeyboardEvent) => e.stopPropagation()}
+            onmouseenter={handlePopperEnter}
+            onmouseleave={handlePopperLeave}
+        >
+            {#if showArrow}
+                <div class="lm-popover__arrow"></div>
+            {/if}
+            <div class="lm-popover__content">
+                {#if content}
+                    {@render content()}
+                {/if}
+            </div>
+        </div>
+    {/if}
+</div>

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

@@ -0,0 +1,7 @@
+import type { PopoverProps } from './types';
+type $$ComponentProps = PopoverProps & {
+    trigger?: 'hover' | 'click';
+};
+declare const Popover: import("svelte").Component<$$ComponentProps, {}, "">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

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

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

package/dist/components/Popover/index.js

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

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

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+/** Popover 位置 */
+export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+/** Popover 属性 */
+export interface PopoverProps {
+    /** 内容 */
+    content?: Snippet;
+    /** 位置 */
+    placement?: PopoverPlacement;
+    /** 宽度 */
+    width?: string | number;
+    /** 是否可见 */
+    visible?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否显示箭头 */
+    showArrow?: boolean;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+    /** 其他属性 */
+    [key: string]: unknown;
+}

package/dist/components/Popover/types.js

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

package/dist/components/Progress/Progress.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    interface ProgressProps {
+        percentage?: number
+        status?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
+        showText?: boolean
+        strokeWidth?: number
+        color?: string
+        class?: string
+    }
+
+    let { percentage = 0, status = 'primary', showText = true, strokeWidth = 6, color, class: cls = '', ...attrs }: ProgressProps = $props()
+
+    const pct = $derived(Math.max(0, Math.min(100, Math.round(percentage))))
+
+    const classes = $derived(cls ? `lm-progress ${cls}` : 'lm-progress')
+
+    const innerStyle = $derived.by(() => {
+        const styles = [`width: ${pct}%`, `height: ${strokeWidth}px`]
+        if (color) styles.push(`background-color: ${color}`)
+        return styles.join('; ')
+    })
+
+    const trackStyle = $derived(`height: ${strokeWidth}px`)
+</script>
+
+<div {...attrs} class={classes}>
+    <div class="lm-progress__track" style={trackStyle}>
+        <div class={'lm-progress__bar lm-progress__bar--' + status} style={innerStyle}></div>
+    </div>
+    {#if showText}
+        <span class="lm-progress__text">{pct}%</span>
+    {/if}
+</div>

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

@@ -0,0 +1,11 @@
+interface ProgressProps {
+    percentage?: number;
+    status?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    showText?: boolean;
+    strokeWidth?: number;
+    color?: string;
+    class?: string;
+}
+declare const Progress: import("svelte").Component<ProgressProps, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

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

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

package/dist/components/Progress/index.js

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

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

@@ -0,0 +1,17 @@
+/** Progress 状态 */
+export type ProgressStatus = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+/** Progress 属性 */
+export interface ProgressProps {
+    /** 百分比 */
+    percentage?: number;
+    /** 状态 */
+    status?: ProgressStatus;
+    /** 是否显示文字 */
+    showText?: boolean;
+    /** 进度条宽度 */
+    strokeWidth?: number;
+    /** 自定义颜色 */
+    color?: string;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Progress/types.js

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

package/dist/components/Radio/Radio.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface RadioProps {
+        checked?: boolean
+        value?: string | number
+        disabled?: boolean
+        size?: 'small' | 'medium' | 'large'
+        label?: string
+        name?: string
+        children?: Snippet
+        onchange?: (value: string | number) => void
+        class?: string
+    }
+
+    let { checked = $bindable(false), value, disabled = false, size = 'medium', label, name, children, onchange, class: cls = '', ...attrs }: RadioProps = $props()
+
+    const classes = $derived(`lm-radio lm-radio--${size}${checked ? ' is-checked' : ''}${disabled ? ' is-disabled' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const handleInputChange = (e: Event): void => {
+        if (disabled) return
+        if ((e.currentTarget as HTMLInputElement).checked) {
+            checked = true
+            if (value !== undefined) onchange?.(value)
+        }
+    }
+</script>
+
+<label class={classes}>
+    <span class="lm-radio__input">
+        <input {...attrs} type="radio" class="lm-radio__original" {value} {name} {disabled} {checked} onchange={handleInputChange} />
+        <span class="lm-radio__inner">
+            {#if checked}
+                <span class="lm-radio__dot"></span>
+            {/if}
+        </span>
+    </span>
+
+    {#if children || label}
+        <span class="lm-radio__label">
+            {#if children}
+                {@render children()}
+            {:else if label}
+                {label}
+            {/if}
+        </span>
+    {/if}
+</label>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface RadioProps {
+    checked?: boolean;
+    value?: string | number;
+    disabled?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    label?: string;
+    name?: string;
+    children?: Snippet;
+    onchange?: (value: string | number) => void;
+    class?: string;
+}
+declare const Radio: import("svelte").Component<RadioProps, {}, "checked">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;

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

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

package/dist/components/Radio/index.js

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