luna-plus 0.0.5

package/dist/DatePicker/DatePicker.svelte

@@ -0,0 +1,278 @@
+<script lang="ts">
+  import type { DatePickerType, DatePickerSize } from "./types";
+  import { onMount, onDestroy } from "svelte";
+  import { createCenteredDropdownTransition } from "../utils";
+  import Icon from "../Icon/Icon.svelte";
+  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/DatePicker/DatePicker.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { DatePickerType, DatePickerSize } from './types';
+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;
+}
+declare const DatePicker: import("svelte").Component<DatePickerProps, {}, "modelValue">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/DatePicker/index.d.ts

@@ -0,0 +1,4 @@
+import DatePicker from './DatePicker.svelte';
+export { DatePicker };
+export type { DatePickerProps, DatePickerType, DatePickerSize } from './types';
+export default DatePicker;

package/dist/DatePicker/index.js

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

package/dist/DatePicker/types.d.ts

@@ -0,0 +1,29 @@
+/** DatePicker 类型 */
+export type DatePickerType = 'date' | 'month' | 'year' | 'week';
+/** DatePicker 尺寸 */
+export type DatePickerSize = 'small' | 'default' | 'large';
+/** DatePicker 属性 */
+export interface DatePickerProps {
+    /** 绑定值 */
+    modelValue?: Date | string | null;
+    /** 类型 */
+    type?: DatePickerType;
+    /** 占位符 */
+    placeholder?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否可清空 */
+    clearable?: boolean;
+    /** 尺寸 */
+    size?: DatePickerSize;
+    /** 格式化 */
+    format?: string;
+    /** 值格式化 */
+    valueFormat?: string;
+    /** 禁用日期 */
+    disabledDate?: (date: Date) => boolean;
+    /** 弹层箭头（Popconfirm 风格） */
+    showMenuArrow?: boolean;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/DatePicker/types.js

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