@chenzy-design/svelte 0.1.0

package/dist/date-picker/DatePicker.svelte.d.ts

@@ -0,0 +1,181 @@
+import { type Snippet } from 'svelte';
+type Size = 'small' | 'default' | 'large';
+type Status = 'default' | 'warning' | 'error';
+type WeekStart = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+type PickerType = 'date' | 'dateTime' | 'month' | 'year';
+type CSSProperties = Record<string, string | number>;
+type PresetPosition = 'left' | 'right' | 'top' | 'bottom';
+interface DisabledTime {
+    disabledHours?: () => number[];
+    disabledMinutes?: (hour: number) => number[];
+    disabledSeconds?: (hour: number, minute: number) => number[];
+}
+interface Preset {
+    label: string;
+    value: Date | (() => Date);
+}
+interface DayStatus {
+    isSelected: boolean;
+    isToday: boolean;
+    isDisabled: boolean;
+    isInMonth: boolean;
+}
+interface Props {
+    type?: PickerType;
+    value?: Date | Date[] | null;
+    defaultValue?: Date | Date[] | null;
+    open?: boolean;
+    defaultOpen?: boolean;
+    placeholder?: string;
+    size?: Size;
+    status?: Status;
+    disabled?: boolean;
+    clearable?: boolean;
+    disabledDate?: (date: Date) => boolean;
+    disabledTime?: (date: Date) => DisabledTime;
+    presets?: Preset[];
+    weekStart?: WeekStart;
+    showSecond?: boolean;
+    locale?: string;
+    /** token 格式串 (YYYY/MM/DD/HH/mm/ss)。传入则触发器变可输入文本框，显示+手输解析按此格式。 */
+    format?: string;
+    onChange?: (v: Date | Date[] | null) => void;
+    onOpenChange?: (open: boolean) => void;
+    /** 手动键入解析失败 (editable 模式)。 */
+    onParseError?: (e: {
+        text: string;
+    }) => void;
+    /** 可见年月切换 (头部导航)。 */
+    onPanelChange?: (e: {
+        panelDate: Date;
+    }) => void;
+    /** 点击快捷选项。 */
+    onPresetClick?: (e: {
+        preset: Preset;
+    }) => void;
+    /** 点击清除。 */
+    onClear?: (e: Record<string, never>) => void;
+    /** 点击确认按钮 (dateTime / needConfirm)。 */
+    onConfirm?: (e: {
+        value: Date | Date[] | null;
+    }) => void;
+    /** 触发器获得焦点。 */
+    onFocus?: (e: FocusEvent) => void;
+    /** 触发器失去焦点。 */
+    onBlur?: (e: FocusEvent) => void;
+    ariaLabel?: string;
+    /** 用 Snippet 自定义范围分隔符，优先于 rangeSeparator 字符串。 */
+    rangeSeparatorNode?: Snippet;
+    /** 选完月/年后自动切换到日视图（默认 true）。 */
+    autoSwitchDate?: boolean;
+    /** 浮层自动调整位置防溢出（默认 true）。 */
+    autoAdjustOverflow?: boolean;
+    /** 范围模式下在面板内嵌输入框（默认 false）。 */
+    insetInput?: boolean;
+    /** 浮层弹出位置（默认 'bottomLeft'）。 */
+    position?: string;
+    /** 触发器与浮层间距。 */
+    spacing?: number;
+    /** 浮层挂载容器。 */
+    getPopupContainer?: () => HTMLElement;
+    /** weekStart 别名。 */
+    weekStartsOn?: WeekStart;
+    /** 点击取消按钮。 */
+    onCancel?: (date: Date | Date[] | null, dateStr: string) => void;
+    /** onChange 参数改为 dateFirst（仅声明，透传语义）。 */
+    onChangeWithDateFirst?: boolean;
+    /** 点击外部关闭时触发。 */
+    onClickOutSide?: (e: MouseEvent) => void;
+    /** 无边框模式 */
+    borderless?: boolean;
+    /** 面板尺寸 compact 时面板更紧凑 */
+    density?: 'default' | 'compact';
+    /** 触发器前缀内容，渲染在 input 左侧 */
+    prefix?: Snippet | string;
+    /** 自定义清除按钮图标 */
+    clearIcon?: Snippet;
+    /** 是否显示清除按钮（默认 true，受 clearable 控制） */
+    showClear?: boolean;
+    /** 输入框 readonly 属性 */
+    inputReadOnly?: boolean;
+    /** 输入框内联样式 */
+    inputStyle?: CSSProperties | string;
+    /** 挂载时自动聚焦 */
+    autoFocus?: boolean;
+    /** 下拉浮层 className */
+    dropdownClassName?: string;
+    /** 下拉浮层样式 */
+    dropdownStyle?: CSSProperties | string;
+    /** 浮层溢出冗余值 */
+    dropdownMargin?: number | {
+        x?: number;
+        y?: number;
+    };
+    /** 浮层 z-index（默认 1030） */
+    zIndex?: number;
+    /** 面板展开动画，false 时添加 cd-date-picker--no-motion（默认 true） */
+    motion?: boolean;
+    /** 聚焦时阻止滚动 */
+    preventScroll?: boolean;
+    /** 阻止浮层点击事件冒泡（默认 true） */
+    stopPropagation?: boolean;
+    /** 面板顶部额外区域 */
+    topSlot?: Snippet;
+    /** 面板底部额外区域 */
+    bottomSlot?: Snippet;
+    /** 面板左侧额外区域 */
+    leftSlot?: Snippet;
+    /** 面板右侧额外区域 */
+    rightSlot?: Snippet;
+    /** 多选（仅 type='date'），value 变为 Date[] */
+    multiple?: boolean;
+    /** multiple=true 时最多选择数量 */
+    max?: number;
+    /** 范围日期分隔符（默认 '~'） */
+    rangeSeparator?: string;
+    /** 单击选择范围的起始偏移 */
+    startDateOffset?: (date: Date) => Date;
+    /** 单击选择范围的结束偏移 */
+    endDateOffset?: (date: Date) => Date;
+    /** 年份滚轮最小年 */
+    startYear?: number;
+    /** 年份滚轮最大年 */
+    endYear?: number;
+    /** 范围选择双面板同步切换月份（默认 false） */
+    syncSwitchMonth?: boolean;
+    /** 自定义日期单元格内容 */
+    renderDate?: Snippet<[{
+        day: number;
+        fullDate: string;
+    }]>;
+    /** 完全自定义日期格子 */
+    renderFullDate?: Snippet<[{
+        day: number;
+        fullDate: string;
+        dayStatus: DayStatus;
+    }]>;
+    /** 完全自定义触发器 */
+    triggerRender?: Snippet<[{
+        value: Date | Date[] | null;
+        placeholder: string;
+    }]>;
+    /** 透传给内部 TimePicker 的参数 */
+    timePickerOpts?: Record<string, unknown>;
+    /** 隐藏禁止的时间选项 */
+    hideDisabledOptions?: boolean;
+    /** 禁止时间选择 */
+    disabledTimePicker?: boolean;
+    /** dateTime/dateTimeRange 时需要点击确认才写入 */
+    needConfirm?: boolean;
+    /** 快捷选项列表位置（默认 'bottom'） */
+    presetPosition?: PresetPosition;
+    /** 透传给年月 ScrollList 的参数 */
+    yearAndMonthOpts?: {
+        yearCyclic?: boolean;
+        monthCyclic?: boolean;
+    } | Record<string, unknown>;
+}
+declare const DatePicker: import("svelte").Component<Props, {}, "">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;
+//# sourceMappingURL=DatePicker.svelte.d.ts.map

package/dist/date-picker/DatePicker.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.svelte.d.ts","sourceRoot":"","sources":["../../src/date-picker/DatePicker.svelte.ts"],"names":[],"mappings":"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"}

package/dist/date-picker/DatePickerKbdFixture.svelte

@@ -0,0 +1,26 @@
+<!--
+  仅供 DatePicker.kbd.test.ts（browser project）使用的网格键盘 e2e 夹具。
+  trigger 按钮控制 open（受控）；测试先聚焦 trigger 再点开面板，
+  验证：打开后焦点落在 role=grid 容器（aria-activedescendant 模型），方向键移动
+  aria-activedescendant 指向的日期格；Esc 关闭归还焦点到 trigger。
+  固定 value（2024-03-15）让初始高亮稳定（aria-activedescendant 指向该日）。
+-->
+<script lang="ts">
+  import { LocaleProvider } from '../locale-provider/index.js';
+  import DatePicker from './DatePicker.svelte';
+
+  let open = $state(false);
+  // 固定锚点日期：2024-03-15（周五）。面板打开时高亮对齐该日，方向键移动可预期。
+  const value = new Date(2024, 2, 15);
+</script>
+
+<LocaleProvider locale="en_US">
+  <button type="button" data-testid="before" onclick={() => (open = true)}>open date picker</button>
+  <DatePicker
+    {open}
+    {value}
+    locale="en-US"
+    ariaLabel="pick date"
+    onOpenChange={(v) => (open = v)}
+  />
+</LocaleProvider>

package/dist/date-picker/DatePickerKbdFixture.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const DatePickerKbdFixture: import("svelte").Component<Record<string, never>, {}, "">;
+type DatePickerKbdFixture = ReturnType<typeof DatePickerKbdFixture>;
+export default DatePickerKbdFixture;
+//# sourceMappingURL=DatePickerKbdFixture.svelte.d.ts.map

package/dist/date-picker/DatePickerKbdFixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerKbdFixture.svelte.d.ts","sourceRoot":"","sources":["../../src/date-picker/DatePickerKbdFixture.svelte.ts"],"names":[],"mappings":"AAuBA,QAAA,MAAM,oBAAoB,2DAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/date-picker/RangePicker.kbd.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=RangePicker.kbd.test.d.ts.map

package/dist/date-picker/RangePicker.kbd.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangePicker.kbd.test.d.ts","sourceRoot":"","sources":["../../src/date-picker/RangePicker.kbd.test.ts"],"names":[],"mappings":""}

package/dist/date-picker/RangePicker.kbd.test.js

@@ -0,0 +1,60 @@
+// RangePicker 键盘 e2e（browser project / 真实 chromium）。
+// 双面板（左=cursor 月、右=cursor+1 月），同 DatePicker 用 aria-activedescendant 模型：
+// 焦点停在高亮所在面板的 role=grid 容器，方向键改变该容器的 aria-activedescendant；
+// 高亮跨面板时 activedescendant 在两个网格间切换（先读源码 leftActiveId/rightActiveId 确认）。
+//   1. 打开后焦点落在左网格，aria-activedescendant 指向起始高亮（defaultValue[0]=2024-03-10）。
+//   2. 方向键移动高亮（aria-activedescendant 变化）。
+//   3. 键盘选区：两次 Enter 选起止，onChange 拿到提交的 [start, end]，面板关闭归还 trigger。
+import { describe, it, expect } from 'vitest';
+import { page } from 'vitest/browser';
+import { renderKbdFixture, userEvent } from '../test-utils/kbd.js';
+import RangePickerKbdFixture from './RangePickerKbdFixture.svelte';
+function loc(el) {
+    return page.elementLocator(el);
+}
+// 任一网格的 aria-activedescendant 后缀（-YYYY-M-D）；高亮不在该面板时返回 ''。
+function activeSuffix(grid) {
+    const id = grid.getAttribute('aria-activedescendant');
+    if (!id)
+        return '';
+    return id.split('-').slice(-3).join('-');
+}
+describe('RangePicker 键盘 e2e（双面板网格 + 范围选择）', () => {
+    it('左网格方向键移动 aria-activedescendant；两次 Enter 提交区间并归还 trigger', async () => {
+        const changes = [];
+        const { baseElement } = renderKbdFixture(RangePickerKbdFixture, {
+            onChange: (v) => changes.push(v),
+        });
+        const trigger = baseElement.querySelector('[data-testid="before"]');
+        expect(trigger).not.toBeNull();
+        await userEvent.click(trigger);
+        const dialog = document.querySelector('[role="dialog"]');
+        expect(dialog).not.toBeNull();
+        const grids = Array.from(dialog.querySelectorAll('[role="grid"]'));
+        expect(grids.length).toBe(2);
+        const [leftGrid] = grids;
+        // 1. 焦点落在左网格（起始高亮 defaultValue[0]=2024-03-10 在左面板）。
+        await expect.element(loc(leftGrid)).toHaveFocus();
+        expect(activeSuffix(leftGrid)).toBe('2024-2-10');
+        // 2. ArrowRight → 11，ArrowDown → +7（18）。activedescendant 随之变化。
+        await userEvent.keyboard('{ArrowRight}');
+        await expect.poll(() => activeSuffix(leftGrid)).toBe('2024-2-11');
+        await userEvent.keyboard('{ArrowDown}');
+        await expect.poll(() => activeSuffix(leftGrid)).toBe('2024-2-18');
+        // 3. 键盘选区：Enter 定起点（3/18）；再 ArrowRight 到 3/19；Enter 定终点提交。
+        await userEvent.keyboard('{Enter}');
+        await userEvent.keyboard('{ArrowRight}');
+        await expect.poll(() => activeSuffix(leftGrid)).toBe('2024-2-19');
+        await userEvent.keyboard('{Enter}');
+        // onChange 收到提交的区间 [2024-03-18, 2024-03-19]（排序后），面板关闭。
+        await expect.poll(() => changes.length).toBeGreaterThan(0);
+        const last = changes[changes.length - 1];
+        expect(last).not.toBeNull();
+        const [start, end] = last;
+        expect(start.getMonth()).toBe(2);
+        expect(start.getDate()).toBe(18);
+        expect(end.getDate()).toBe(19);
+        // 提交后面板关闭，焦点归还 trigger（focus trap returnFocus）。
+        await expect.element(loc(trigger)).toHaveFocus();
+    });
+});