@lumen-design/cascader 0.0.2

package/dist/Cascader.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">
+    import { onMount } from 'svelte'
+    import { createDropdownTransition } from '../../utils'
+    import Icon from '@lumen-design/icon'
+    import { ChevronRight, ChevronDown, X, Check } from 'lucide'
+    import type { CascaderOption, CascaderProps as Props } from './types'
+
+    let {
+        modelValue = $bindable([]),
+        options = [],
+        placeholder = '请选择',
+        disabled = false,
+        clearable = false,
+        separator = ' / ',
+        expandTrigger = 'click',
+        size = 'default',
+        showMenuArrow = true,
+        class: cls = '',
+        ...attrs
+    }: Props = $props()
+
+    let visible = $state(false)
+    let reduceMotion = $state(false)
+    let inputRef: HTMLElement | null = $state(null)
+    let menus = $state<CascaderOption[][]>([])
+    let activeOptions = $state<CascaderOption[]>([])
+
+    $effect(() => {
+        menus = [options]
+    })
+
+    const getLabelsFromValue = (values: (string | number)[], opts: CascaderOption[]): string[] => {
+        const labels: string[] = []
+        let current = opts
+        for (const val of values) {
+            const opt = current.find((o) => o.value === val)
+            if (opt) {
+                labels.push(opt.label)
+                current = opt.children || []
+            }
+        }
+        return labels
+    }
+
+    const displayValue = $derived(activeOptions.length > 0 ? activeOptions.map((o) => o.label).join(separator) : modelValue.length > 0 ? getLabelsFromValue(modelValue, options).join(separator) : '')
+
+    const initMenus = (): void => {
+        menus = [options]
+        activeOptions = []
+        if (modelValue.length > 0) {
+            let current = options
+            for (const val of modelValue) {
+                const opt = current.find((o) => o.value === val)
+                if (opt) {
+                    activeOptions = [...activeOptions, opt]
+                    if (opt.children?.length) {
+                        menus = [...menus, opt.children]
+                        current = opt.children
+                    }
+                }
+            }
+        }
+    }
+
+    const handleToggle = (): void => {
+        if (disabled) return
+        visible = !visible
+        if (visible) initMenus()
+    }
+
+    const handleOptionClick = (option: CascaderOption, level: number): void => {
+        if (option.disabled) return
+        activeOptions = [...activeOptions.slice(0, level), option]
+        menus = [...menus.slice(0, level + 1)]
+        if (option.children?.length) {
+            menus = [...menus, option.children]
+        } else {
+            modelValue = activeOptions.map((o) => o.value)
+            visible = false
+        }
+    }
+
+    const handleOptionHover = (option: CascaderOption, level: number): void => {
+        if (expandTrigger !== 'hover' || option.disabled) return
+        activeOptions = [...activeOptions.slice(0, level), option]
+        menus = [...menus.slice(0, level + 1)]
+        if (option.children?.length) menus = [...menus, option.children]
+    }
+
+    const handleClear = (e: MouseEvent): void => {
+        e.stopPropagation()
+        modelValue = []
+        activeOptions = []
+        menus = [options]
+    }
+
+    const handleClickOutside = (e: MouseEvent): void => {
+        if (inputRef && !inputRef.contains(e.target as Node)) visible = false
+    }
+
+    const handleKeydown = (e: KeyboardEvent): void => {
+        if (e.key === 'Escape') visible = false
+    }
+
+    const dropdownTransition = $derived(createDropdownTransition(reduceMotion))
+
+    $effect(() => {
+        if (visible) document.addEventListener('click', handleClickOutside)
+        return () => document.removeEventListener('click', handleClickOutside)
+    })
+
+    $effect(() => {
+        if (typeof window !== 'undefined') {
+            reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false
+        }
+    })
+
+    onMount(() => {
+        if (typeof window !== 'undefined') {
+            reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false
+        }
+    })
+
+    const isActive = (option: CascaderOption, level: number): boolean => activeOptions[level]?.value === option.value
+
+    const classes = $derived(['lm-cascader', disabled && 'is-disabled', size !== 'default' && `lm-cascader--${size}`, cls].filter(Boolean).join(' '))
+</script>
+
+<div bind:this={inputRef} class={classes} {...attrs}>
+    <div
+        class="lm-cascader__input"
+        class:is-focus={visible}
+        role="combobox"
+        tabindex={disabled ? -1 : 0}
+        aria-expanded={visible}
+        aria-controls="cascader-dropdown"
+        aria-haspopup="listbox"
+        onclick={handleToggle}
+        onkeydown={handleKeydown}
+    >
+        <span class="lm-cascader__value" class:is-placeholder={!displayValue}>
+            {displayValue || placeholder}
+        </span>
+        {#if clearable && modelValue.length > 0 && !disabled}
+            <button type="button" class="lm-cascader__clear" onclick={handleClear} aria-label="清除">
+                <Icon icon={X} size={14} />
+            </button>
+        {:else}
+            <span class="lm-cascader__arrow" class:is-open={visible}>
+                <Icon icon={ChevronDown} size={14} />
+            </span>
+        {/if}
+    </div>
+
+    {#if visible}
+        <div
+            class="lm-cascader__dropdown"
+            role="listbox"
+            id="cascader-dropdown"
+            transition:dropdownTransition
+        >
+            {#if showMenuArrow}
+                <div class="lm-cascader__menu-arrow" aria-hidden="true"></div>
+            {/if}
+            {#each menus as menu, level}
+                <ul class="lm-cascader__menu" role="group">
+                    {#each menu as option (option.value)}
+                        <li
+                            class="lm-cascader__option"
+                            class:is-active={isActive(option, level)}
+                            class:is-disabled={option.disabled}
+                            role="option"
+                            aria-selected={isActive(option, level)}
+                            onmousedown={() => handleOptionClick(option, level)}
+                            onmouseenter={() => handleOptionHover(option, level)}
+                        >
+                            <span class="lm-cascader__option-label">{option.label}</span>
+                            <span class="lm-cascader__option-suffix" aria-hidden="true">
+                                {#if option.children?.length}
+                                    <Icon icon={ChevronRight} size={14} />
+                                {:else if isActive(option, level) && level === menus.length - 1}
+                                    <Icon icon={Check} size={14} />
+                                {/if}
+                            </span>
+                        </li>
+                    {/each}
+                </ul>
+            {/each}
+        </div>
+    {/if}
+</div>

package/dist/index.js

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

package/dist/types.js

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

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@lumen-design/cascader",
+  "version": "0.0.2",
+  "description": "Cascader 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",
+    "@lumen-design/utils": "0.0.2"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "svelte": "5.48.2"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
+}