luna-plus 0.0.5

package/dist/DateTimePicker/DateTimePicker.svelte

@@ -0,0 +1,500 @@
+<script lang="ts">
+  import { createDropdownTransition } from "../utils";
+  import { onDestroy, onMount } from "svelte";
+  import Icon from "../Icon/Icon.svelte";
+  import {
+    Calendar,
+    ChevronLeft,
+    ChevronRight,
+    X,
+    ChevronDown,
+    ChevronsLeft,
+    ChevronsRight,
+  } from "lucide";
+
+  import type { DateTimePickerProps } from "./types";
+
+  const pad2 = (n: number): string => String(n).padStart(2, "0");
+
+  const parseTimeParts = (val: string): { h: string; m: string; s: string } => {
+    if (!val) return { h: "00", m: "00", s: "00" };
+    const [h = "00", m = "00", s = "00"] = val.split(":");
+    return {
+      h: h.padStart(2, "0").slice(-2),
+      m: m.padStart(2, "0").slice(-2),
+      s: s.padStart(2, "0").slice(-2),
+    };
+  };
+
+  const formatDate = (date: Date, fmt: string): string => {
+    const y = date.getFullYear();
+    const m = pad2(date.getMonth() + 1);
+    const d = pad2(date.getDate());
+    return fmt.replace("YYYY", String(y)).replace("MM", m).replace("DD", d);
+  };
+
+  const formatTime = (date: Date, timeFormat: string): string => {
+    const h = pad2(date.getHours());
+    const m = pad2(date.getMinutes());
+    const s = pad2(date.getSeconds());
+    return timeFormat.includes("ss") ? `${h}:${m}:${s}` : `${h}:${m}`;
+  };
+
+  const normalizeTimeInput = (input: string, timeFormat: string): string => {
+    const raw = (input ?? "").trim();
+    if (!raw) return "";
+    const wantSeconds = timeFormat.includes("ss");
+    const parts = raw.split(":");
+    if (parts.length < 2 || parts.length > 3) return "";
+
+    const h = Number.parseInt(parts[0] ?? "0", 10);
+    const m = Number.parseInt(parts[1] ?? "0", 10);
+    const s = Number.parseInt(parts[2] ?? "0", 10);
+    if (
+      !Number.isFinite(h) ||
+      !Number.isFinite(m) ||
+      (!wantSeconds && parts.length === 3 && !Number.isFinite(s))
+    )
+      return "";
+    if (h < 0 || h > 23 || m < 0 || m > 59) return "";
+    if (wantSeconds && (s < 0 || s > 59)) return "";
+    return wantSeconds
+      ? `${pad2(h)}:${pad2(m)}:${pad2(s)}`
+      : `${pad2(h)}:${pad2(m)}`;
+  };
+
+  const toDate = (val: Date | string): Date =>
+    val instanceof Date ? val : new Date(val);
+
+  const parseDateInput = (input: string): Date | null => {
+    const raw = (input ?? "").trim();
+    if (!raw) return null;
+    const parts = raw.replace(/\//g, "-").split("-");
+    if (parts.length !== 3) return null;
+    const y = Number.parseInt(parts[0] ?? "0", 10);
+    const m = Number.parseInt(parts[1] ?? "0", 10);
+    const d = Number.parseInt(parts[2] ?? "0", 10);
+    if (!Number.isFinite(y) || !Number.isFinite(m) || !Number.isFinite(d))
+      return null;
+    if (y < 1000 || m < 1 || m > 12 || d < 1 || d > 31) return null;
+    const dt = new Date(y, m - 1, d);
+    // reject overflow dates like 2026-02-31
+    if (dt.getFullYear() !== y || dt.getMonth() !== m - 1 || dt.getDate() !== d)
+      return null;
+    return dt;
+  };
+
+  const combine = (
+    dateOnly: Date,
+    t: { h: string; m: string; s: string },
+    timeFormat: string,
+  ): Date => {
+    const next = new Date(dateOnly);
+    const h = Number.parseInt(t.h, 10);
+    const m = Number.parseInt(t.m, 10);
+    const s = Number.parseInt(t.s, 10);
+    next.setHours(
+      Number.isFinite(h) ? h : 0,
+      Number.isFinite(m) ? m : 0,
+      timeFormat.includes("ss") && Number.isFinite(s) ? s : 0,
+      0,
+    );
+    return next;
+  };
+
+  let {
+    modelValue = $bindable<Date | string | null>(null),
+    placeholder = "选择日期时间",
+    disabled = false,
+    clearable = false,
+    readonly = false,
+    size = "default",
+    dateFormat = "YYYY-MM-DD",
+    datePlaceholder = "选择日期",
+    timeFormat = "HH:mm:ss",
+    defaultTime = "00:00:00",
+    timePlaceholder = "选择时间",
+    showMenuArrow = true,
+    class: cls = "",
+    ...attrs
+  }: DateTimePickerProps = $props();
+
+  const showSeconds = $derived(timeFormat.includes("ss"));
+
+  let visible = $state(false);
+  let reduceMotion = $state(false);
+  let rootRef: HTMLDivElement | null = $state(null);
+
+  let currentYear = $state(new Date().getFullYear());
+  let currentMonth = $state(new Date().getMonth());
+
+  let tempDate = $state<Date | null>(null);
+  let tempDateText = $state("");
+  let tempTime = $state("");
+
+  const dropdownId = `lm-date-time-picker-dropdown-${Math.random().toString(36).slice(2)}`;
+
+  const selectedCommitted = $derived(modelValue ? toDate(modelValue) : null);
+
+  const displayValue = $derived.by(() => {
+    if (!selectedCommitted) return "";
+    const dateStr = formatDate(selectedCommitted, dateFormat);
+    const timeStr = formatTime(selectedCommitted, timeFormat);
+    return `${dateStr} ${timeStr}`;
+  });
+
+  const weekDays = ["日", "一", "二", "三", "四", "五", "六"];
+
+  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 isSelected = (date: Date): boolean => {
+    if (!tempDate) return false;
+    return (
+      date.getFullYear() === tempDate.getFullYear() &&
+      date.getMonth() === tempDate.getMonth() &&
+      date.getDate() === tempDate.getDate()
+    );
+  };
+
+  const isToday = (date: Date): boolean => {
+    const today = new Date();
+    return (
+      date.getFullYear() === today.getFullYear() &&
+      date.getMonth() === today.getMonth() &&
+      date.getDate() === today.getDate()
+    );
+  };
+
+  const openWithCommittedOrNow = (): void => {
+    const base = selectedCommitted ?? new Date();
+    tempDate = new Date(base.getFullYear(), base.getMonth(), base.getDate());
+    tempDateText = formatDate(tempDate, dateFormat);
+
+    if (selectedCommitted) tempTime = formatTime(selectedCommitted, timeFormat);
+    else
+      tempTime =
+        normalizeTimeInput(defaultTime, timeFormat) ||
+        (showSeconds ? "00:00:00" : "00:00");
+
+    currentYear = base.getFullYear();
+    currentMonth = base.getMonth();
+  };
+
+  const toggle = (): void => {
+    if (disabled || readonly) return;
+    const next = !visible;
+    visible = next;
+    if (next) openWithCommittedOrNow();
+  };
+
+  const closeAndRevert = (): void => {
+    visible = false;
+    // revert temp state next time open
+  };
+
+  const handleKeydown = (e: KeyboardEvent): void => {
+    if (e.key === "Escape") closeAndRevert();
+    else if (e.key === "Enter" || e.key === " ") toggle();
+  };
+
+  const handleClickOutside = (e: MouseEvent): void => {
+    if (visible && rootRef && !rootRef.contains(e.target as Node))
+      closeAndRevert();
+  };
+
+  const handleClear = (e: MouseEvent): void => {
+    e.stopPropagation();
+    modelValue = null;
+    closeAndRevert();
+  };
+
+  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 handleSelectDate = (date: Date): void => {
+    tempDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    tempDateText = formatDate(tempDate, dateFormat);
+  };
+
+  const setNow = (): void => {
+    const now = new Date();
+    tempDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    tempDateText = formatDate(tempDate, dateFormat);
+
+    tempTime = formatTime(now, timeFormat);
+
+    currentYear = now.getFullYear();
+    currentMonth = now.getMonth();
+  };
+
+  const normalizedDate = $derived.by(
+    () => parseDateInput(tempDateText) ?? tempDate,
+  );
+
+  const isDateValid = $derived.by(() => !!normalizedDate);
+
+  const isTimeValid = $derived.by(() => {
+    const normalized = normalizeTimeInput(tempTime || defaultTime, timeFormat);
+    return !!normalized;
+  });
+
+  const handleConfirm = (): void => {
+    const normalized = normalizeTimeInput(tempTime || defaultTime, timeFormat);
+    const dateToUse = normalizedDate;
+    if (!dateToUse || !normalized) return;
+    modelValue = combine(dateToUse, parseTimeParts(normalized), timeFormat);
+    visible = false;
+  };
+
+  const dropdownTransition = $derived(createDropdownTransition(reduceMotion));
+
+  $effect(() => {
+    if (visible) document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  });
+
+  onMount(() => {
+    if (typeof window !== "undefined") {
+      reduceMotion =
+        window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ??
+        false;
+    }
+  });
+
+  onDestroy(() => {
+    document.removeEventListener("click", handleClickOutside);
+  });
+
+  const classes = $derived(
+    [
+      "lm-date-time-picker",
+      `lm-date-time-picker--${size}`,
+      disabled && "is-disabled",
+      cls,
+    ]
+      .filter(Boolean)
+      .join(" "),
+  );
+</script>
+
+<div bind:this={rootRef} class={classes} {...attrs}>
+  <div
+    class="lm-date-time-picker__trigger"
+    class:is-focus={visible}
+    role="combobox"
+    tabindex={disabled ? -1 : 0}
+    aria-controls={dropdownId}
+    aria-expanded={visible}
+    aria-disabled={disabled}
+    onclick={toggle}
+    onkeydown={handleKeydown}
+  >
+    <span class="lm-date-time-picker__prefix">
+      <Icon icon={Calendar} size={14} />
+    </span>
+    <span
+      class="lm-date-time-picker__value"
+      class:is-placeholder={!displayValue}
+    >
+      {displayValue || placeholder}
+    </span>
+
+    {#if clearable && modelValue && !disabled}
+      <button
+        type="button"
+        class="lm-date-time-picker__clear"
+        onclick={handleClear}
+        aria-label="清除"
+      >
+        <Icon icon={X} size={14} />
+      </button>
+    {:else}
+      <span
+        class="lm-date-time-picker__arrow"
+        class:is-open={visible}
+        aria-hidden="true"
+      >
+        <Icon icon={ChevronDown} size={14} />
+      </span>
+    {/if}
+  </div>
+
+  {#if visible}
+    <div
+      id={dropdownId}
+      class="lm-date-time-picker__dropdown"
+      role="dialog"
+      transition:dropdownTransition
+    >
+      {#if showMenuArrow}
+        <div class="lm-date-time-picker__menu-arrow" aria-hidden="true"></div>
+      {/if}
+
+      <div class="lm-date-time-picker__panel">
+        <div class="lm-date-time-picker__date-panel">
+          <div
+            class="lm-date-time-picker__time-inputs"
+            aria-label="日期时间输入"
+          >
+            <input
+              class="lm-date-time-picker__date-input"
+              type="text"
+              value={tempDateText}
+              placeholder={datePlaceholder}
+              oninput={(e: Event) =>
+                (tempDateText = (e.currentTarget as HTMLInputElement).value)}
+              onblur={() => {
+                const parsed = parseDateInput(tempDateText);
+                if (parsed) {
+                  tempDate = parsed;
+                  tempDateText = formatDate(parsed, dateFormat);
+                  currentYear = parsed.getFullYear();
+                  currentMonth = parsed.getMonth();
+                }
+              }}
+            />
+            <input
+              class="lm-date-time-picker__time-input"
+              type="text"
+              value={tempTime}
+              placeholder={timePlaceholder}
+              oninput={(e: Event) =>
+                (tempTime = (e.currentTarget as HTMLInputElement).value)}
+              onblur={() => {
+                const normalized = normalizeTimeInput(tempTime, timeFormat);
+                if (normalized) tempTime = normalized;
+              }}
+            />
+          </div>
+
+          <div class="lm-date-time-picker__header">
+            <div class="lm-date-time-picker__nav-group" aria-hidden="false">
+              <button
+                type="button"
+                class="lm-date-time-picker__nav"
+                onclick={prevYear}
+                aria-label="上一年"
+              >
+                <Icon icon={ChevronsLeft} size={16} />
+              </button>
+              <button
+                type="button"
+                class="lm-date-time-picker__nav"
+                onclick={prevMonth}
+                aria-label="上个月"
+              >
+                <Icon icon={ChevronLeft} size={14} />
+              </button>
+            </div>
+            <span class="lm-date-time-picker__title"
+              >{currentYear}年 {currentMonth + 1}月</span
+            >
+            <div class="lm-date-time-picker__nav-group" aria-hidden="false">
+              <button
+                type="button"
+                class="lm-date-time-picker__nav"
+                onclick={nextMonth}
+                aria-label="下个月"
+              >
+                <Icon icon={ChevronRight} size={14} />
+              </button>
+              <button
+                type="button"
+                class="lm-date-time-picker__nav"
+                onclick={nextYear}
+                aria-label="下一年"
+              >
+                <Icon icon={ChevronsRight} size={16} />
+              </button>
+            </div>
+          </div>
+
+          <div class="lm-date-time-picker__body">
+            <div class="lm-date-time-picker__week">
+              {#each weekDays as day}
+                <span class="lm-date-time-picker__week-day">{day}</span>
+              {/each}
+            </div>
+            <div class="lm-date-time-picker__days">
+              {#each daysInMonth as item (item.date.toISOString())}
+                <button
+                  type="button"
+                  class="lm-date-time-picker__day"
+                  class:is-other={!item.isCurrentMonth}
+                  class:is-today={isToday(item.date)}
+                  class:is-selected={isSelected(item.date)}
+                  onclick={() => handleSelectDate(item.date)}
+                >
+                  {item.date.getDate()}
+                </button>
+              {/each}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="lm-date-time-picker__footer">
+        <button
+          type="button"
+          class="lm-date-time-picker__btn lm-date-time-picker__btn--text"
+          onclick={setNow}>此刻</button
+        >
+        <button
+          type="button"
+          class="lm-date-time-picker__btn"
+          onclick={handleConfirm}
+          disabled={!isDateValid || !isTimeValid}>确定</button
+        >
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/DateTimePicker/DateTimePicker.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DateTimePickerProps } from './types';
+declare const DateTimePicker: import("svelte").Component<DateTimePickerProps, {}, "modelValue">;
+type DateTimePicker = ReturnType<typeof DateTimePicker>;
+export default DateTimePicker;

package/dist/DateTimePicker/index.d.ts

@@ -0,0 +1,4 @@
+import DateTimePicker from './DateTimePicker.svelte';
+export default DateTimePicker;
+export { DateTimePicker };
+export type { DateTimePickerProps } from './types';

package/dist/DateTimePicker/index.js

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

package/dist/DateTimePicker/types.d.ts

@@ -0,0 +1,21 @@
+export type DateTimePickerSize = 'small' | 'default' | 'large';
+export interface DateTimePickerProps {
+    /** Datetime value */
+    modelValue?: Date | string | null;
+    placeholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    readonly?: boolean;
+    size?: DateTimePickerSize;
+    /** Date display format (e.g. YYYY-MM-DD) */
+    dateFormat?: string;
+    datePlaceholder?: string;
+    /** Time format passed to TimePicker (e.g. HH:mm or HH:mm:ss) */
+    timeFormat?: string;
+    /** Default time when opening without value */
+    defaultTime?: string;
+    timePlaceholder?: string;
+    /** Whether to show the menu arrow */
+    showMenuArrow?: boolean;
+    class?: string;
+}

package/dist/DateTimePicker/types.js

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

package/dist/Descriptions/Descriptions.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { DescriptionsSize, DescriptionsDirection } from './types'
+    import { setContext } from 'svelte'
+    import { DESCRIPTIONS_CONTEXT_KEY, type DescriptionsContext } from './DescriptionsContext'
+
+    interface DescriptionsProps {
+        title?: string | Snippet
+        extra?: Snippet
+        border?: boolean
+        column?: number
+        direction?: DescriptionsDirection
+        size?: DescriptionsSize
+        children?: Snippet
+        class?: string
+    }
+
+    let { title, extra, border = false, column = 3, direction = 'horizontal', size = 'default', children, class: cls = '', ...attrs }: DescriptionsProps = $props()
+
+    const context: DescriptionsContext = {
+        get border() {
+            return border
+        },
+        get column() {
+            return column
+        },
+        get direction() {
+            return direction
+        },
+        get size() {
+            return size
+        },
+    }
+
+    setContext(DESCRIPTIONS_CONTEXT_KEY, context)
+
+    const classes = $derived(`lm-descriptions lm-descriptions--${size}${border ? ' is-bordered' : ''}${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div class={classes} {...attrs}>
+    {#if title || extra}
+        <div class="lm-descriptions__header">
+            {#if title}
+                <div class="lm-descriptions__title">
+                    {#if typeof title === 'string'}
+                        {title}
+                    {:else}
+                        {@render title()}
+                    {/if}
+                </div>
+            {/if}
+            {#if extra}
+                <div class="lm-descriptions__extra">
+                    {@render extra()}
+                </div>
+            {/if}
+        </div>
+    {/if}
+
+    <div class="lm-descriptions__body">
+        <table class="lm-descriptions__table">
+            <tbody>
+                {#if children}
+                    {@render children()}
+                {/if}
+            </tbody>
+        </table>
+    </div>
+</div>

package/dist/Descriptions/Descriptions.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { DescriptionsSize, DescriptionsDirection } from './types';
+interface DescriptionsProps {
+    title?: string | Snippet;
+    extra?: Snippet;
+    border?: boolean;
+    column?: number;
+    direction?: DescriptionsDirection;
+    size?: DescriptionsSize;
+    children?: Snippet;
+    class?: string;
+}
+declare const Descriptions: import("svelte").Component<DescriptionsProps, {}, "">;
+type Descriptions = ReturnType<typeof Descriptions>;
+export default Descriptions;

package/dist/Descriptions/DescriptionsContext.d.ts

@@ -0,0 +1,8 @@
+import type { DescriptionsSize, DescriptionsDirection } from './types';
+export declare const DESCRIPTIONS_CONTEXT_KEY: unique symbol;
+export interface DescriptionsContext {
+    border: boolean;
+    column: number;
+    direction: DescriptionsDirection;
+    size: DescriptionsSize;
+}

package/dist/Descriptions/DescriptionsContext.js

@@ -0,0 +1 @@
+export const DESCRIPTIONS_CONTEXT_KEY = Symbol('descriptions');

package/dist/Descriptions/DescriptionsItem.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import { getContext } from 'svelte'
+    import { DESCRIPTIONS_CONTEXT_KEY, type DescriptionsContext } from './DescriptionsContext'
+
+    interface DescriptionsItemProps {
+        label?: string | Snippet
+        span?: number
+        labelWidth?: string | number
+        align?: 'left' | 'center' | 'right'
+        labelAlign?: 'left' | 'center' | 'right'
+        children?: Snippet
+        class?: string
+    }
+
+    let { label = '', span = 1, labelWidth, align = 'left', labelAlign = 'left', children, class: cls = '', ...attrs }: DescriptionsItemProps = $props()
+
+    const descriptions = getContext<DescriptionsContext>(DESCRIPTIONS_CONTEXT_KEY)
+    const isBordered = $derived(descriptions?.border ?? false)
+
+    const labelStyle = $derived(labelWidth ? `width: ${typeof labelWidth === 'number' ? `${labelWidth}px` : labelWidth}; text-align: ${labelAlign}` : `text-align: ${labelAlign}`)
+
+    const contentStyle = $derived(`text-align: ${align}`)
+    const classes = $derived(cls ? `lm-descriptions-item ${cls}` : 'lm-descriptions-item')
+</script>
+
+{#if isBordered}
+    <tr class={classes} {...attrs}>
+        <th class="lm-descriptions-item__label" style={labelStyle}>
+            {#if typeof label === 'string'}
+                {label}
+            {:else if label}
+                {@render label()}
+            {/if}
+        </th>
+        <td class="lm-descriptions-item__content" colspan={span * 2 - 1} style={contentStyle}>
+            {#if children}
+                {@render children()}
+            {/if}
+        </td>
+    </tr>
+{:else}
+    <tr class={classes} {...attrs}>
+        <td class="lm-descriptions-item__cell" colspan={span}>
+            <span class="lm-descriptions-item__label" style={labelStyle}>
+                {#if typeof label === 'string'}
+                    {label}
+                {:else if label}
+                    {@render label()}
+                {/if}
+            </span>
+            <span class="lm-descriptions-item__content" style={contentStyle}>
+                {#if children}
+                    {@render children()}
+                {/if}
+            </span>
+        </td>
+    </tr>
+{/if}