@lumen-design/collapse 0.0.2

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

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

package/dist/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 '@lumen-design/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/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/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/index.js

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

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

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

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@lumen-design/collapse",
+  "version": "0.0.2",
+  "description": "Collapse 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",
+    "build:watch": "svelte-package -i src -o dist --types -w"
+  },
+  "dependencies": {
+    "@lumen-design/icon": "0.0.2",
+    "lucide": "^0.563.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "svelte": "5.48.2"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
+}