@lumen-design/date-picker 0.0.2

package/dist/DatePicker.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+    import type { DatePickerType, DatePickerSize } from './types'
+    import { onMount, onDestroy } from 'svelte'
+    import { createCenteredDropdownTransition } from '../../utils'
+    import Icon from '@lumen-design/icon'
+    import { Calendar, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, X } from 'lucide'
+
+    interface DatePickerProps {
+        modelValue?: Date | string | null
+        type?: DatePickerType
+        placeholder?: string
+        disabled?: boolean
+        clearable?: boolean
+        size?: DatePickerSize
+        format?: string
+        valueFormat?: string
+        disabledDate?: (date: Date) => boolean
+        showMenuArrow?: boolean
+        class?: string
+    }
+
+    let {
+        modelValue = $bindable(null),
+        type = 'date',
+        placeholder = '选择日期',
+        disabled = false,
+        clearable = false,
+        size = 'default',
+        format = 'YYYY-MM-DD',
+        valueFormat,
+        disabledDate,
+        showMenuArrow = true,
+        class: cls = '',
+        ...attrs
+    }: DatePickerProps = $props()
+
+    let visible = $state(false)
+    let reduceMotion = $state(false)
+    let pickerRef: HTMLDivElement | null = null
+    let currentYear = $state(new Date().getFullYear())
+    let currentMonth = $state(new Date().getMonth())
+
+    const weekDays = ['日', '一', '二', '三', '四', '五', '六']
+
+    // 优化: 移除冗余的箭头函数包装
+    const selectedDate = $derived(modelValue ? (modelValue instanceof Date ? modelValue : new Date(modelValue)) : null)
+
+    const displayValue = $derived.by(() => {
+        if (!selectedDate) return ''
+        const y = selectedDate.getFullYear()
+        const m = String(selectedDate.getMonth() + 1).padStart(2, '0')
+        const d = String(selectedDate.getDate()).padStart(2, '0')
+        return format.replace('YYYY', String(y)).replace('MM', m).replace('DD', d)
+    })
+
+    const daysInMonth = $derived.by(() => {
+        const firstDay = new Date(currentYear, currentMonth, 1)
+        const lastDay = new Date(currentYear, currentMonth + 1, 0)
+        const days: { date: Date; isCurrentMonth: boolean }[] = []
+        const startDay = firstDay.getDay()
+
+        for (let i = startDay - 1; i >= 0; i--) {
+            days.push({ date: new Date(currentYear, currentMonth, -i), isCurrentMonth: false })
+        }
+        for (let i = 1; i <= lastDay.getDate(); i++) {
+            days.push({ date: new Date(currentYear, currentMonth, i), isCurrentMonth: true })
+        }
+        const remaining = 42 - days.length
+        for (let i = 1; i <= remaining; i++) {
+            days.push({ date: new Date(currentYear, currentMonth + 1, i), isCurrentMonth: false })
+        }
+        return days
+    })
+
+    const classes = $derived(`lm-date-picker lm-date-picker--${size}${disabled ? ' is-disabled' : ''}${cls ? ` ${cls}` : ''}`)
+
+    const handleClickOutside = (e: MouseEvent): void => {
+        if (visible && pickerRef && !pickerRef.contains(e.target as Node)) visible = false
+    }
+
+    const toggle = (): void => {
+        if (disabled) return
+        visible = !visible
+        if (visible && selectedDate) {
+            currentYear = selectedDate.getFullYear()
+            currentMonth = selectedDate.getMonth()
+        }
+    }
+
+    const prevMonth = (): void => {
+        if (currentMonth === 0) {
+            currentMonth = 11
+            currentYear--
+        } else {
+            currentMonth--
+        }
+    }
+
+    const prevYear = (): void => {
+        currentYear--
+    }
+
+    const nextMonth = (): void => {
+        if (currentMonth === 11) {
+            currentMonth = 0
+            currentYear++
+        } else {
+            currentMonth++
+        }
+    }
+
+    const nextYear = (): void => {
+        currentYear++
+    }
+
+    const formatDate = (date: Date, fmt: string): string => {
+        const y = date.getFullYear()
+        const m = String(date.getMonth() + 1).padStart(2, '0')
+        const d = String(date.getDate()).padStart(2, '0')
+        return fmt.replace('YYYY', String(y)).replace('MM', m).replace('DD', d)
+    }
+
+    const selectDate = (date: Date): void => {
+        if (disabledDate?.(date)) return
+        modelValue = valueFormat ? formatDate(date, valueFormat) : date
+        visible = false
+    }
+
+    const isSelected = (date: Date): boolean => {
+        if (!selectedDate) return false
+        return date.getFullYear() === selectedDate.getFullYear() && date.getMonth() === selectedDate.getMonth() && date.getDate() === selectedDate.getDate()
+    }
+
+    const isToday = (date: Date): boolean => {
+        const today = new Date()
+        return date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() && date.getDate() === today.getDate()
+    }
+
+    const handleClear = (e: MouseEvent): void => {
+        e.stopPropagation()
+        modelValue = null
+    }
+
+    const dropdownTransition = $derived(createCenteredDropdownTransition(reduceMotion))
+
+    onMount(() => {
+        document.addEventListener('click', handleClickOutside)
+        if (typeof window !== 'undefined') {
+            reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false
+        }
+    })
+    onDestroy(() => document.removeEventListener('click', handleClickOutside))
+</script>
+
+<div class={classes} bind:this={pickerRef} {...attrs}>
+    <button type="button" class="lm-date-picker__trigger" class:is-focus={visible} onclick={toggle} {disabled}>
+        <Icon icon={Calendar} size={14} class="lm-date-picker__prefix" />
+        <span class="lm-date-picker__input" class:is-placeholder={!displayValue}>{displayValue || placeholder}</span>
+        {#if clearable && modelValue && !disabled}
+            <span
+                class="lm-date-picker__clear"
+                role="button"
+                tabindex="0"
+                onclick={handleClear}
+                onkeydown={(e: KeyboardEvent) => e.key === 'Enter' && handleClear(e as unknown as MouseEvent)}
+                aria-label="清空"><Icon icon={X} size={14} /></span
+            >
+        {/if}
+    </button>
+
+    {#if visible}
+        <div class="lm-date-picker__dropdown" transition:dropdownTransition>
+            {#if showMenuArrow}
+                <div class="lm-date-picker__menu-arrow" aria-hidden="true"></div>
+            {/if}
+            <div class="lm-date-picker__header">
+                <div class="lm-date-picker__nav-group">
+                    <button type="button" class="lm-date-picker__nav" onclick={prevYear} aria-label="上一年"><Icon icon={ChevronsLeft} size={16} /></button>
+                    <button type="button" class="lm-date-picker__nav" onclick={prevMonth} aria-label="上个月"><Icon icon={ChevronLeft} size={14} /></button>
+                </div>
+                <span class="lm-date-picker__title">{currentYear}年 {currentMonth + 1}月</span>
+                <div class="lm-date-picker__nav-group">
+                    <button type="button" class="lm-date-picker__nav" onclick={nextMonth} aria-label="下个月"><Icon icon={ChevronRight} size={14} /></button>
+                    <button type="button" class="lm-date-picker__nav" onclick={nextYear} aria-label="下一年"><Icon icon={ChevronsRight} size={16} /></button>
+                </div>
+            </div>
+            <div class="lm-date-picker__body">
+                <div class="lm-date-picker__week">
+                    {#each weekDays as day}<span class="lm-date-picker__week-day">{day}</span>{/each}
+                </div>
+                <div class="lm-date-picker__days">
+                    {#each daysInMonth as { date, isCurrentMonth }}
+                        <button
+                            type="button"
+                            class="lm-date-picker__day{!isCurrentMonth ? ' is-other-month' : ''}{isSelected(date) ? ' is-selected' : ''}{isToday(date) ? ' is-today' : ''}{disabledDate?.(date)
+                                ? ' is-disabled'
+                                : ''}"
+                            disabled={disabledDate?.(date)}
+                            onclick={() => selectDate(date)}>{date.getDate()}</button
+                        >
+                    {/each}
+                </div>
+            </div>
+        </div>
+    {/if}
+</div>

package/dist/index.js

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

package/dist/types.js

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

package/package.json

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