lumen-plus 0.0.1

package/dist/components/Collapse/Collapse.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import { setContext } from 'svelte'
+    import { COLLAPSE_CONTEXT_KEY, type CollapseContext } from './CollapseContext'
+
+    interface CollapseProps {
+        modelValue?: string | string[]
+        accordion?: boolean
+        onchange?: (value: string | string[]) => void
+        children?: Snippet
+        class?: string
+    }
+
+    let { modelValue = $bindable([]), accordion = false, onchange, children, class: cls = '', ...attrs }: CollapseProps = $props()
+
+    const activeNames = $derived(Array.isArray(modelValue) ? modelValue : modelValue ? [modelValue] : [])
+
+    const toggle = (name: string): void => {
+        let newValue: string | string[]
+        if (accordion) {
+            newValue = activeNames.includes(name) ? '' : name
+        } else {
+            newValue = activeNames.includes(name) ? activeNames.filter((n) => n !== name) : [...activeNames, name]
+        }
+        modelValue = newValue
+        onchange?.(newValue)
+    }
+
+    const context: CollapseContext = {
+        get activeNames() {
+            return activeNames
+        },
+        get accordion() {
+            return accordion
+        },
+        toggle,
+    }
+
+    setContext(COLLAPSE_CONTEXT_KEY, context)
+
+    const classes = $derived(cls ? `lm-collapse ${cls}` : 'lm-collapse')
+</script>
+
+<div class={classes} role="tablist" {...attrs}>
+    {#if children}
+        {@render children()}
+    {/if}
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface CollapseProps {
+    modelValue?: string | string[];
+    accordion?: boolean;
+    onchange?: (value: string | string[]) => void;
+    children?: Snippet;
+    class?: string;
+}
+declare const Collapse: import("svelte").Component<CollapseProps, {}, "modelValue">;
+type Collapse = ReturnType<typeof Collapse>;
+export default Collapse;

package/dist/components/Collapse/CollapseContext.d.ts

@@ -0,0 +1,6 @@
+export declare const COLLAPSE_CONTEXT_KEY: unique symbol;
+export interface CollapseContext {
+    activeNames: string[];
+    accordion: boolean;
+    toggle: (name: string) => void;
+}

package/dist/components/Collapse/CollapseContext.js

@@ -0,0 +1 @@
+export const COLLAPSE_CONTEXT_KEY = Symbol('collapse');

package/dist/components/Collapse/CollapseItem.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import { getContext, onMount } from 'svelte'
+    import { COLLAPSE_CONTEXT_KEY, type CollapseContext } from './CollapseContext'
+    import Icon from '../Icon'
+    import { ChevronRight } from 'lucide'
+
+    interface CollapseItemProps {
+        name: string
+        title?: string | Snippet
+        disabled?: boolean
+        children?: Snippet
+        class?: string
+    }
+
+    let { name, title = '', disabled = false, children, class: cls = '', ...attrs }: CollapseItemProps = $props()
+
+    const collapse = getContext<CollapseContext>(COLLAPSE_CONTEXT_KEY)
+
+    const isActive = $derived(collapse?.activeNames.includes(name) ?? false)
+
+    let wrapEl: HTMLDivElement | null = null
+    let contentEl: HTMLDivElement | null = null
+    let wrapHeight = $state<string>('0px')
+    let reduceMotion = $state(false)
+
+    const setHeightInstant = (value: string): void => {
+        wrapHeight = value
+    }
+
+    const animateTo = (value: string): void => {
+        requestAnimationFrame(() => {
+            wrapHeight = value
+        })
+    }
+
+    const open = (): void => {
+        if (!wrapEl) return
+
+        const targetHeight = contentEl?.scrollHeight ?? wrapEl.scrollHeight
+        setHeightInstant('0px')
+        animateTo(`${targetHeight}px`)
+    }
+
+    const close = (): void => {
+        if (!wrapEl) return
+
+        const currentHeight = wrapEl.getBoundingClientRect().height
+        setHeightInstant(`${currentHeight}px`)
+        animateTo('0px')
+    }
+
+    const handleWrapTransitionEnd = (e: TransitionEvent): void => {
+        if (e.target !== wrapEl) return
+        if (e.propertyName !== 'height') return
+        if (isActive) {
+            wrapHeight = 'auto'
+        }
+    }
+
+    onMount(() => {
+        if (typeof window !== 'undefined') {
+            reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false
+        }
+
+        wrapHeight = isActive ? 'auto' : '0px'
+    })
+
+    let prevActive = $state<boolean>(false)
+    $effect(() => {
+        const activeNow = isActive
+        if (!wrapEl) {
+            prevActive = activeNow
+            return
+        }
+
+        if (reduceMotion) {
+            wrapHeight = activeNow ? 'auto' : '0px'
+            prevActive = activeNow
+            return
+        }
+
+        if (activeNow === prevActive) return
+        prevActive = activeNow
+
+        if (activeNow) open()
+        else close()
+    })
+
+    const handleClick = (): void => {
+        if (!disabled) collapse?.toggle(name)
+    }
+
+    const handleKeydown = (e: KeyboardEvent): void => {
+        if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
+            e.preventDefault()
+            collapse?.toggle(name)
+        }
+    }
+
+    const classes = $derived(`lm-collapse-item${isActive ? ' is-active' : ''}${disabled ? ' is-disabled' : ''}${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} {...attrs}>
+    <div class="lm-collapse-item__header" role="tab" tabindex={disabled ? -1 : 0} aria-expanded={isActive} aria-disabled={disabled} onclick={handleClick} onkeydown={handleKeydown}>
+        <span class="lm-collapse-item__title">
+            {#if typeof title === 'string'}
+                {title}
+            {:else if title}
+                {@render title()}
+            {/if}
+        </span>
+        <span class="lm-collapse-item__arrow" class:is-active={isActive}>
+            <Icon icon={ChevronRight} size={16} />
+        </span>
+    </div>
+
+    <div
+        class="lm-collapse-item__wrap"
+        class:is-active={isActive}
+        role="tabpanel"
+        aria-hidden={!isActive}
+        bind:this={wrapEl}
+        style:height={wrapHeight}
+        ontransitionend={handleWrapTransitionEnd}
+    >
+        <div class="lm-collapse-item__content" bind:this={contentEl}>
+            {#if children}
+                {@render children()}
+            {/if}
+        </div>
+    </div>
+</div>

package/dist/components/Collapse/CollapseItem.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface CollapseItemProps {
+    name: string;
+    title?: string | Snippet;
+    disabled?: boolean;
+    children?: Snippet;
+    class?: string;
+}
+declare const CollapseItem: import("svelte").Component<CollapseItemProps, {}, "">;
+type CollapseItem = ReturnType<typeof CollapseItem>;
+export default CollapseItem;

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

@@ -0,0 +1,5 @@
+import Collapse from './Collapse.svelte';
+import CollapseItem from './CollapseItem.svelte';
+export { Collapse, CollapseItem };
+export type { CollapseProps, CollapseItemProps } from './types';
+export default Collapse;

package/dist/components/Collapse/index.js

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

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

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+/** Collapse 属性 */
+export interface CollapseProps {
+    /** 当前激活的面板 */
+    modelValue?: string | string[];
+    /** 是否手风琴模式 */
+    accordion?: boolean;
+    /** 变更事件 */
+    onchange?: (value: string | string[]) => void;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** CollapseItem 属性 */
+export interface CollapseItemProps {
+    /** 唯一标识 */
+    name: string;
+    /** 标题 */
+    title?: string | Snippet;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Collapse/types.js

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

package/dist/components/ColorPicker/ColorPicker.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+    import type { ColorPickerSize } from './types'
+    import Icon from '../Icon'
+    import { ChevronDown } from 'lucide'
+    import { onMount, onDestroy } from 'svelte'
+    import { createDropdownTransition } from '../../utils'
+
+    interface ColorPickerProps {
+        modelValue?: string
+        disabled?: boolean
+        size?: ColorPickerSize
+        showAlpha?: boolean
+        predefine?: string[]
+        class?: string
+    }
+
+    let { modelValue = $bindable('#409eff'), disabled = false, size = 'default', showAlpha = false, predefine = [], class: cls = '', ...attrs }: ColorPickerProps = $props()
+
+    let visible = $state(false)
+    let tempValue = $state(modelValue)
+    let reduceMotion = $state(false)
+    let pickerRef: HTMLDivElement | null = null
+
+    const handleClickOutside = (e: MouseEvent): void => {
+        if (visible && pickerRef && !pickerRef.contains(e.target as Node)) {
+            visible = false
+            tempValue = modelValue
+        }
+    }
+
+    const toggle = (): void => {
+        if (disabled) return
+        visible = !visible
+        if (visible) {
+            tempValue = modelValue
+        } else {
+            tempValue = modelValue
+        }
+    }
+
+    const selectColor = (color: string): void => {
+        tempValue = color
+    }
+
+    const handleInputChange = (e: Event): void => {
+        const target = e.target as HTMLInputElement
+        tempValue = target.value
+    }
+
+    const cancel = (): void => {
+        tempValue = modelValue
+        visible = false
+    }
+
+    const confirm = (): void => {
+        modelValue = tempValue
+        visible = false
+    }
+
+    onMount(() => {
+        document.addEventListener('click', handleClickOutside)
+        if (typeof window !== 'undefined') {
+            reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false
+        }
+    })
+
+    onDestroy(() => {
+        document.removeEventListener('click', handleClickOutside)
+    })
+
+    const classes = $derived(`lm-color-picker lm-color-picker--${size}${disabled ? ' is-disabled' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const dropdownTransition = $derived(createDropdownTransition(reduceMotion))
+</script>
+
+<div class={classes} bind:this={pickerRef} {...attrs}>
+    <button type="button" class="lm-color-picker__trigger" class:is-focus={visible} onclick={toggle} {disabled}>
+        <span class="lm-color-picker__color" style="background-color:{modelValue}"></span>
+        <span class="lm-color-picker__icon" class:is-open={visible} aria-hidden="true">
+            <Icon icon={ChevronDown} size={14} />
+        </span>
+    </button>
+
+    {#if visible}
+        <div class="lm-color-picker__dropdown" transition:dropdownTransition>
+            <div class="lm-color-picker__panel">
+                <input type="color" class="lm-color-picker__input" value={tempValue} oninput={handleInputChange} />
+
+                {#if predefine.length > 0}
+                    <div class="lm-color-picker__predefine">
+                        {#each predefine as color (color)}
+                            <span
+                                class="lm-color-picker__predefine-color{tempValue === color ? ' is-active' : ''}"
+                                style="background-color:{color}"
+                                onclick={() => selectColor(color)}
+                                role="button"
+                                tabindex="0"
+                                onkeydown={(e: KeyboardEvent) => e.key === 'Enter' && selectColor(color)}
+                            ></span>
+                        {/each}
+                    </div>
+                {/if}
+
+                <div class="lm-color-picker__footer">
+                    <input type="text" class="lm-color-picker__hex" value={tempValue} oninput={handleInputChange} />
+                    <button type="button" class="lm-color-picker__btn lm-color-picker__btn--cancel" onclick={cancel}>取消</button>
+                    <button type="button" class="lm-color-picker__btn lm-color-picker__btn--confirm" onclick={confirm}>确定</button>
+                </div>
+            </div>
+        </div>
+    {/if}
+</div>

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

@@ -0,0 +1,12 @@
+import type { ColorPickerSize } from './types';
+interface ColorPickerProps {
+    modelValue?: string;
+    disabled?: boolean;
+    size?: ColorPickerSize;
+    showAlpha?: boolean;
+    predefine?: string[];
+    class?: string;
+}
+declare const ColorPicker: import("svelte").Component<ColorPickerProps, {}, "modelValue">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
+export default ColorPicker;

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

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

package/dist/components/ColorPicker/index.js

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

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

@@ -0,0 +1,17 @@
+/** ColorPicker 尺寸 */
+export type ColorPickerSize = 'small' | 'default' | 'large';
+/** ColorPicker 属性 */
+export interface ColorPickerProps {
+    /** 绑定值 */
+    modelValue?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 尺寸 */
+    size?: ColorPickerSize;
+    /** 是否显示透明度 */
+    showAlpha?: boolean;
+    /** 预定义颜色 */
+    predefine?: string[];
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/ColorPicker/types.js

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

package/dist/components/Container/Aside.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface AsideProps {
+        width?: string
+        children?: Snippet
+        class?: string
+    }
+
+    let { width, children, class: cls = '', ...attrs }: AsideProps = $props()
+
+    const classes = $derived(cls ? `lm-aside ${cls}` : 'lm-aside')
+    const style = $derived(width ? `width: ${width}` : '')
+</script>
+
+<aside {...attrs} class={classes} {style}>
+    {#if children}
+        {@render children()}
+    {/if}
+</aside>

package/dist/components/Container/Aside.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface AsideProps {
+    width?: string;
+    children?: Snippet;
+    class?: string;
+}
+declare const Aside: import("svelte").Component<AsideProps, {}, "">;
+type Aside = ReturnType<typeof Aside>;
+export default Aside;

package/dist/components/Container/Container.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface ContainerProps {
+        direction?: 'horizontal' | 'vertical'
+        children?: Snippet
+        class?: string
+    }
+
+    let { direction = 'vertical', children, class: cls = '', ...attrs }: ContainerProps = $props()
+
+    const classes = $derived(`lm-container${direction === 'horizontal' ? ' is-horizontal' : ''}${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div {...attrs} class={classes}>
+    {#if children}
+        {@render children()}
+    {/if}
+</div>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface ContainerProps {
+    direction?: 'horizontal' | 'vertical';
+    children?: Snippet;
+    class?: string;
+}
+declare const Container: import("svelte").Component<ContainerProps, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/dist/components/Container/Footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface FooterProps {
+        height?: string
+        children?: Snippet
+        class?: string
+    }
+
+    let { height, children, class: cls = '', ...attrs }: FooterProps = $props()
+
+    const classes = $derived(cls ? `lm-footer ${cls}` : 'lm-footer')
+    const style = $derived(height ? `height: ${height}` : '')
+</script>
+
+<footer {...attrs} class={classes} {style}>
+    {#if children}
+        {@render children()}
+    {/if}
+</footer>

package/dist/components/Container/Footer.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface FooterProps {
+    height?: string;
+    children?: Snippet;
+    class?: string;
+}
+declare const Footer: import("svelte").Component<FooterProps, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;

package/dist/components/Container/Header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface HeaderProps {
+        height?: string
+        children?: Snippet
+        class?: string
+    }
+
+    let { height, children, class: cls = '', ...attrs }: HeaderProps = $props()
+
+    const classes = $derived(cls ? `lm-header ${cls}` : 'lm-header')
+    const style = $derived(height ? `height: ${height}` : '')
+</script>
+
+<header {...attrs} class={classes} {style}>
+    {#if children}
+        {@render children()}
+    {/if}
+</header>

package/dist/components/Container/Header.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface HeaderProps {
+    height?: string;
+    children?: Snippet;
+    class?: string;
+}
+declare const Header: import("svelte").Component<HeaderProps, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/components/Container/Main.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface MainProps {
+        children?: Snippet
+        class?: string
+    }
+
+    let { children, class: cls = '', ...attrs }: MainProps = $props()
+
+    const classes = $derived(cls ? `lm-main ${cls}` : 'lm-main')
+</script>
+
+<main {...attrs} class={classes}>
+    {#if children}
+        {@render children()}
+    {/if}
+</main>

package/dist/components/Container/Main.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface MainProps {
+    children?: Snippet;
+    class?: string;
+}
+declare const Main: import("svelte").Component<MainProps, {}, "">;
+type Main = ReturnType<typeof Main>;
+export default Main;

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

@@ -0,0 +1,6 @@
+export { default as Container } from './Container.svelte';
+export { default as Header } from './Header.svelte';
+export { default as Footer } from './Footer.svelte';
+export { default as Aside } from './Aside.svelte';
+export { default as Main } from './Main.svelte';
+export type { ContainerProps, ContainerDirection, HeaderProps, FooterProps, AsideProps, MainProps } from './types';

package/dist/components/Container/index.js

@@ -0,0 +1,5 @@
+export { default as Container } from './Container.svelte';
+export { default as Header } from './Header.svelte';
+export { default as Footer } from './Footer.svelte';
+export { default as Aside } from './Aside.svelte';
+export { default as Main } from './Main.svelte';

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

@@ -0,0 +1,46 @@
+import type { Snippet } from 'svelte';
+/** Container 方向 */
+export type ContainerDirection = 'horizontal' | 'vertical';
+/** Container 属性 */
+export interface ContainerProps {
+    /** 方向 */
+    direction?: ContainerDirection;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** Header 属性 */
+export interface HeaderProps {
+    /** 高度 */
+    height?: string;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** Footer 属性 */
+export interface FooterProps {
+    /** 高度 */
+    height?: string;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** Aside 属性 */
+export interface AsideProps {
+    /** 宽度 */
+    width?: string;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** Main 属性 */
+export interface MainProps {
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/components/Container/types.js

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