@lumen-design/color-picker 0.0.2

package/dist/ColorPicker.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+    import type { ColorPickerSize } from './types'
+    import Icon from '@lumen-design/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/index.js

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

package/dist/types.js

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

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@lumen-design/color-picker",
+  "version": "0.0.2",
+  "description": "ColorPicker 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"
+  }
+}