@type-dom/ui 0.6.0 → 0.9.0

package/dist/components/form/td-date-picker-panel/date-picker-com/panel-date-pick.class.js

@@ -0,0 +1,1022 @@
+/**
+ * Panel Date Pick Component | 日期选择面板组件（简化版）
+ *
+ * 从 Element Plus date-picker-panel/src/date-picker-com/panel-date-pick.vue 转换而来
+ *
+ * @note 这是一个简化版本，保留了核心架构和关键功能
+ *       完整实现需要约 400+ 行代码
+ */
+import { Div, Button, Span, Input, watch, unref, defaultProps, addEmits, } from '@type-dom/framework';
+import { signal, computed } from '@type-dom/signals';
+import dayjs from 'dayjs';
+import { useNamespace } from '../../../../hooks/use-namespace';
+import { useLocale } from '../../../../hooks/use-locale';
+import { getValidDateOfMonth, getValidDateOfYear } from '../utils';
+import { TdBasicDateTable } from './basic-date-table.class';
+import { TdBasicMonthTable } from './basic-month-table.class';
+import { TdBasicYearTable } from './basic-year-table.class';
+import { ElArrowLeftSvg, ElArrowRightSvg, ElDArrowLeftSvg, ElDArrowRightSvg } from '@type-dom/svgs';
+import { TdIcon } from '../../../basic/td-icon/td-icon.class';
+import { EVENT_CODE } from '../../../../constants/aria';
+import { tdPanelDatePickProps, tdPanelDatePickEmits } from './panel-date-pick.const';
+/**
+ * 日期选择面板组件
+ *
+ * 提供单日期选择功能，支持多种选择模式：
+ * - date: 日期选择
+ * - week: 周选择
+ * - month: 月选择
+ * - year: 年选择
+ * - dates: 多日期选择
+ * - months: 多月选择
+ * - years: 多年选择
+ *
+ * @example
+ * ```typescript
+ * const panel = new TdPanelDatePick({
+ *   type: 'date',
+ *   visible: true,
+ *   border: true,
+ *   disabled: false
+ * })
+ * ```
+ */
+export class TdPanelDatePick extends Div {
+    // hooks
+    ppNs;
+    dpNs;
+    tpNs;
+    tsNs;
+    t;
+    lang;
+    // 内部状态 signals
+    currentView;
+    innerDate;
+    userInputDate;
+    userInputTime;
+    timePickerVisible;
+    isChangeToNow = false;
+    isShortcut = false;
+    // 计算属性
+    yearLabel;
+    monthLabel;
+    visibleDate;
+    visibleTime;
+    timeFormat;
+    dateFormat;
+    hasShortcuts;
+    showTime;
+    selectionMode;
+    footerVisible;
+    footerFilled;
+    defaultTimeD;
+    // 主体内容容器（innerDate / currentView 变化时需要重建其内部）
+    bodyWrapper;
+    constructor(params) {
+        super(params);
+        defaultProps(this, tdPanelDatePickProps);
+        addEmits(this, Object.keys(tdPanelDatePickEmits));
+    }
+    setup() {
+        const props = this.props;
+        // ========== 初始化 hooks ==========
+        this.ppNs = useNamespace('picker-panel');
+        this.dpNs = useNamespace('date-picker');
+        this.tpNs = useNamespace('time-panel');
+        this.tsNs = useNamespace('time-spinner');
+        const localeData = useLocale();
+        this.t = localeData.t;
+        this.lang = localeData.lang;
+        // ========== 初始化 signals ==========
+        const pv = props.parsedValue;
+        this.innerDate = signal(pv && !Array.isArray(pv) ? dayjs(pv) : dayjs());
+        this.currentView = signal('date');
+        this.userInputDate = signal(null);
+        this.userInputTime = signal(null);
+        this.timePickerVisible = signal(false);
+        // ========== 初始化 计算属性 ==========
+        this.yearLabel = computed(() => {
+            const yearTranslation = this.t('el.datepicker.year');
+            const year = this.innerDate.get().year();
+            if (this.currentView.get() === 'year') {
+                const startYear = Math.floor(year / 10) * 10;
+                if (yearTranslation) {
+                    return `${startYear} ${yearTranslation} - ${startYear + 9} ${yearTranslation}`;
+                }
+                return `${startYear} - ${startYear + 9}`;
+            }
+            return `${year} ${yearTranslation}`;
+        });
+        this.monthLabel = computed(() => {
+            const month = this.innerDate.get().month() + 1;
+            return this.t(`el.datepicker.month${month}`);
+        });
+        this.timeFormat = computed(() => {
+            return this.props.timeFormat || 'HH:mm:ss';
+        });
+        this.dateFormat = computed(() => {
+            return this.props.dateFormat || 'YYYY-MM-DD';
+        });
+        this.visibleDate = computed(() => {
+            if (this.userInputDate.get())
+                return this.userInputDate.get();
+            const dateValue = this.innerDate.get();
+            return dateValue.format(this.dateFormat.get());
+        });
+        this.visibleTime = computed(() => {
+            if (this.userInputTime.get())
+                return this.userInputTime.get();
+            const dateValue = this.innerDate.get();
+            return dateValue.format(this.timeFormat.get());
+        });
+        this.hasShortcuts = computed(() => {
+            return !!(this.props.shortcuts && this.props.shortcuts.length > 0);
+        });
+        this.showTime = computed(() => {
+            return this.props.type === 'datetime' || this.props.type === 'datetimerange';
+        });
+        this.selectionMode = computed(() => {
+            return (this.props.selectionMode || this.props.type || 'date');
+        });
+        this.footerVisible = computed(() => {
+            const mode = this.selectionMode.get();
+            const showDateFooter = this.showTime.get() || mode === 'dates';
+            const showYearFooter = mode === 'years';
+            const showMonthFooter = mode === 'months';
+            const isDateView = this.currentView.get() === 'date';
+            const isYearView = this.currentView.get() === 'year';
+            const isMonthView = this.currentView.get() === 'month';
+            return ((showDateFooter && isDateView) ||
+                (showYearFooter && isYearView) ||
+                (showMonthFooter && isMonthView));
+        });
+        this.footerFilled = computed(() => {
+            const isMultiple = ['dates', 'months', 'years'].includes(this.selectionMode.get());
+            // EP 公式: 单选+显示Now 或 有Confirm按钮时视为已填充
+            return (!isMultiple && !!this.props.showNow) || !!this.props.showConfirm;
+        });
+        // 默认时间（用于合并到选择的日期中）
+        this.defaultTimeD = computed(() => {
+            if (this.props.defaultTime) {
+                return dayjs(this.props.defaultTime);
+            }
+            return dayjs();
+        });
+        // ========== 构建 DOM ==========
+        const ppNs = this.ppNs;
+        const dpNs = this.dpNs;
+        // 预先创建主体内容容器（供下方主容器 slot 引用，后续响应式重建其内部）
+        this.bodyWrapper = new Div({ class: ppNs.e('body') });
+        // 主容器
+        this.addChild(new Div({
+            class: [
+                ppNs.b(),
+                dpNs.b(),
+                ppNs.is('border', props.border),
+                ppNs.is('disabled', props.disabled),
+                {
+                    'has-sidebar': this.hasShortcuts.get(),
+                    'has-time': this.showTime.get(),
+                },
+            ],
+            slot: [
+                // 侧边栏（快捷选项）
+                this.renderSidebar(),
+                // 主体内容容器（内部随 innerDate / currentView 响应式重建）
+                this.bodyWrapper,
+            ],
+        }));
+        // ========== 响应式重渲（innerDate / currentView 等变化时重建主体内容） ==========
+        // TypeDOM 为命令式框架，setup() 里一次性构建的 DOM 不会随 signal 自动刷新。
+        // 这里把内容作为函数 slot 传给 bodyWrapper，transformSlot 内部通过 watch 追踪
+        // 依赖并在依赖变化时自动清理旧子树、挂载新子树（静态数组 slot 在已挂载元素上
+        // 不会重新挂载子节点，因此必须用函数 slot 才能保证重渲正确生效）。
+        this.bodyWrapper.replaceChildren(() => [
+            // 时间选择器头部（仅 datetime 类型）
+            this.showTime.get() ? this.renderTimeHeader() : null,
+            // 日期导航头部
+            this.renderHeader(),
+            // 内容区域（根据 currentView 显示不同表格）
+            this.renderContent(),
+            // 底部（现在/确定按钮）
+            this.renderFooter(),
+        ]);
+        // ========== watch（对应 EP 的 watch） ==========
+        // Watch 1: selectionMode -> currentView 自动切换
+        watch(() => unref(props.selectionMode) || unref(props.type) || 'date', (val) => {
+            if (['month', 'year'].includes(val)) {
+                this.currentView.set(val);
+            }
+            else if (val === 'years') {
+                this.currentView.set('year');
+            }
+            else if (val === 'months') {
+                this.currentView.set('month');
+            }
+            else {
+                this.currentView.set('date');
+            }
+        }, { immediate: true });
+        // Watch 2: defaultValue 变化时重置 innerDate
+        watch(() => unref(props.defaultValue), (val) => {
+            if (val) {
+                const parsed = dayjs(val).locale(this.lang.get());
+                if (parsed.isValid()) {
+                    this.innerDate.set(parsed);
+                }
+            }
+        }, { immediate: true });
+        // Watch 3: parsedValue 变化时同步 innerDate
+        watch(() => unref(props.parsedValue), (val) => {
+            if (val && !this.isMultipleType()) {
+                if (!Array.isArray(val)) {
+                    // EP 直接 innerDate = val（val 已是 Dayjs），无需重解析
+                    this.innerDate.set(val);
+                }
+            }
+            else if (!val) {
+                // EP 使用 getDefaultValue()：含 defaultTimeD 回退
+                const defVal = props.defaultValue;
+                if (defVal) {
+                    const parsed = dayjs(defVal).locale(this.lang.get());
+                    if (parsed.isValid()) {
+                        this.innerDate.set(parsed);
+                    }
+                }
+                else {
+                    // 无 defaultValue 时回退到 defaultTimeD + 当前日期
+                    const defaultTimeD = this.defaultTimeD.get();
+                    this.innerDate.set(dayjs()
+                        .locale(this.lang.get())
+                        .hour(defaultTimeD.hour())
+                        .minute(defaultTimeD.minute())
+                        .second(defaultTimeD.second()));
+                }
+            }
+        }, { immediate: true });
+        // ========== 注册 picker options（供父组件调用）==========
+        this.emit('set-picker-option', ['isValidValue', this.isValidValue.bind(this)]);
+        this.emit('set-picker-option', ['parseUserInput', this.parseUserInput.bind(this)]);
+        this.emit('set-picker-option', ['handleFocusPicker', this.handleFocusPicker.bind(this)]);
+    }
+    /**
+     * 渲染侧边栏
+     */
+    renderSidebar() {
+        const ppNs = this.ppNs;
+        if (!this.hasShortcuts.get()) {
+            return new Div({ class: '' });
+        }
+        return new Div({
+            class: ppNs.e('sidebar'),
+            slot: (this.props.shortcuts || []).map((shortcut) => new Button({
+                type: 'button',
+                disabled: this.props.disabled,
+                class: ppNs.e('shortcut'),
+                slot: shortcut.text,
+                onClick: () => this.handleShortcutClick(shortcut),
+            })),
+        });
+    }
+    /**
+     * 渲染时间选择器头部
+     * 包含日期输入框、时间输入框和时间选择面板
+     */
+    renderTimeHeader() {
+        const dpNs = this.dpNs;
+        return new Div({
+            class: dpNs.e('time-header'),
+            slot: [
+                // 日期输入框
+                new Span({
+                    class: dpNs.e('editor-wrap'),
+                    slot: new Input({
+                        attrObj: {
+                            placeholder: this.t('el.datepicker.selectDate'),
+                            disabled: this.props.disabled,
+                        },
+                        modelValue: this.visibleDate,
+                        onInput: (val) => this.userInputDate.set(val),
+                        onChange: (val) => this.handleVisibleDateChange(val),
+                    }),
+                }),
+                // 时间输入框 + 时间选择面板
+                new Span({
+                    class: dpNs.e('editor-wrap'),
+                    slot: [
+                        new Input({
+                            attrObj: {
+                                placeholder: this.t('el.datepicker.selectTime'),
+                                disabled: this.props.disabled,
+                            },
+                            modelValue: this.visibleTime,
+                            onFocus: () => this.onTimePickerInputFocus(),
+                            onInput: (val) => this.userInputTime.set(val),
+                            onChange: (val) => this.handleVisibleTimeChange(val),
+                        }),
+                        // 时间选择面板
+                        this.timePickerVisible.get()
+                            ? new Div({
+                                class: dpNs.e('time-panel-wrap'),
+                                slot: this.renderTimePickPanel(),
+                            })
+                            : null,
+                    ],
+                }),
+            ],
+        });
+    }
+    /**
+     * 渲染时间选择面板（简化版，使用原生 select 替代完整 TimePickPanel）
+     */
+    renderTimePickPanel() {
+        const dpNs = this.dpNs;
+        const tpNs = this.tpNs;
+        const currentDate = this.innerDate.get();
+        return new Div({
+            class: [tpNs.b(), dpNs.e('time-panel')],
+            slot: [
+                new Div({
+                    class: tpNs.e('content'),
+                    slot: [
+                        this.renderTimeSpinner('hour', currentDate.hour(), 23),
+                        this.renderTimeSpinner('minute', currentDate.minute(), 59),
+                        this.renderTimeSpinner('second', currentDate.second(), 59),
+                    ],
+                }),
+                new Div({
+                    class: tpNs.e('footer'),
+                    slot: new Button({
+                        text: true,
+                        size: 'small',
+                        class: [tpNs.e('btn'), 'cancel'],
+                        slot: this.t('el.datepicker.cancel'),
+                        onClick: () => this.handleTimePickClose(),
+                    }),
+                }),
+            ],
+        });
+    }
+    /**
+     * 渲染时间滚动器（小时/分钟/秒）
+     */
+    renderTimeSpinner(unit, value, max) {
+        const tsNs = this.tsNs;
+        const items = [];
+        for (let i = 0; i <= max; i++) {
+            items.push(new Div({
+                class: [tsNs.e('item'), i === value ? 'is-active' : ''],
+                slot: String(i).padStart(2, '0'),
+                onClick: () => this.handleTimeSpinnerClick(unit, i),
+            }));
+        }
+        return new Div({
+            class: tsNs.e('wrapper'),
+            slot: new Div({
+                class: tsNs.e('list'),
+                slot: items,
+            }),
+        });
+    }
+    /**
+     * 时间滚动器项点击
+     */
+    handleTimeSpinnerClick(unit, value) {
+        const newDate = this.innerDate.get()[unit](value);
+        this.innerDate.set(newDate);
+        this.emit('pick', newDate, true);
+    }
+    /**
+     * 渲染日期导航头部
+     */
+    renderHeader() {
+        const dpNs = this.dpNs;
+        const ppNs = this.ppNs;
+        return new Div({
+            vShow: this.currentView.get() !== 'time',
+            class: [
+                dpNs.e('header'),
+                (this.currentView.get() === 'year' || this.currentView.get() === 'month') &&
+                    dpNs.em('header', 'bordered'),
+            ],
+            slot: [
+                // 上一年/上一月按钮
+                new Span({
+                    class: dpNs.e('prev-btn'),
+                    slot: [
+                        // 上一年
+                        new Button({
+                            type: 'button',
+                            ariaLabel: '上一年',
+                            class: [ppNs.e('icon-btn'), 'd-arrow-left'],
+                            disabled: this.props.disabled,
+                            onClick: () => this.moveByYear(false),
+                            slot: new TdIcon({ slot: new ElDArrowLeftSvg() }),
+                        }),
+                        // 上一月（仅在 date 视图显示）
+                        new Button({
+                            vShow: this.currentView.get() === 'date',
+                            type: 'button',
+                            ariaLabel: '上一月',
+                            class: [ppNs.e('icon-btn'), 'arrow-left'],
+                            disabled: this.props.disabled,
+                            onClick: () => this.moveByMonth(false),
+                            slot: new TdIcon({ slot: new ElArrowLeftSvg() }),
+                        }),
+                    ],
+                }),
+                // 年份标签（可点击切换到年视图）
+                new Span({
+                    attrObj: {
+                        role: 'button',
+                        tabindex: this.props.disabled ? undefined : 0,
+                        'aria-disabled': this.props.disabled,
+                    },
+                    class: dpNs.e('header-label'),
+                    onKeydownEnter: () => this.showPicker('year'),
+                    onClick: () => this.showPicker('year'),
+                    slot: this.yearLabel.get(),
+                }),
+                // 月份标签（仅在 date 视图显示）
+                new Span({
+                    vShow: this.currentView.get() === 'date',
+                    attrObj: {
+                        role: 'button',
+                        'aria-live': 'polite',
+                        tabindex: this.props.disabled ? undefined : 0,
+                        'aria-disabled': this.props.disabled,
+                    },
+                    class: [dpNs.e('header-label'), { active: this.currentView.get() === 'month' }],
+                    onKeydownEnter: () => this.showPicker('month'),
+                    onClick: () => this.showPicker('month'),
+                    slot: this.monthLabel.get(),
+                }),
+                // 下一月/下一年按钮
+                new Span({
+                    class: dpNs.e('next-btn'),
+                    slot: [
+                        // 下一月（仅在 date 视图显示）
+                        new Button({
+                            vShow: this.currentView.get() === 'date',
+                            type: 'button',
+                            ariaLabel: '下一月',
+                            class: [ppNs.e('icon-btn'), 'arrow-right'],
+                            disabled: this.props.disabled,
+                            onClick: () => this.moveByMonth(true),
+                            slot: new TdIcon({ slot: new ElArrowRightSvg() }),
+                        }),
+                        // 下一年
+                        new Button({
+                            type: 'button',
+                            ariaLabel: '下一年',
+                            class: [ppNs.e('icon-btn'), 'd-arrow-right'],
+                            disabled: this.props.disabled,
+                            onClick: () => this.moveByYear(true),
+                            slot: new TdIcon({ slot: new ElDArrowRightSvg() }),
+                        }),
+                    ],
+                }),
+            ],
+        });
+    }
+    /**
+     * 渲染内容区域
+     */
+    renderContent() {
+        const ppNs = this.ppNs;
+        const currentView = this.currentView.get();
+        return new Div({
+            class: ppNs.e('content'),
+            onKeydown: (e) => this.handleKeydownTable(e),
+            slot: [
+                // 日期表格
+                currentView === 'date'
+                    ? new TdBasicDateTable({
+                        selectionMode: this.props.selectionMode || 'date',
+                        date: this.innerDate.get(),
+                        // 单值模式下选中值即 innerDate（handleDatePick 已将其设为选中日期），
+                        // 用它驱动 cell 的 isCurrent 高亮；dates 多选模式回退到 props.parsedValue
+                        parsedValue: this.selectionMode.get() === 'dates'
+                            ? this.props.parsedValue
+                            : this.innerDate.get(),
+                        disabledDate: this.props.disabledDate,
+                        disabled: this.props.disabled,
+                        cellClassName: this.props.cellClassName,
+                        showWeekNumber: this.props.showWeekNumber,
+                        onPick: (value) => this.handleDatePick(value),
+                    })
+                    : null,
+                // 年份表格
+                currentView === 'year'
+                    ? new TdBasicYearTable({
+                        selectionMode: this.props.selectionMode || 'year',
+                        date: this.innerDate.get(),
+                        disabledDate: this.props.disabledDate,
+                        disabled: this.props.disabled,
+                        parsedValue: this.selectionMode.get() === 'years'
+                            ? this.props.parsedValue
+                            : this.innerDate.get(),
+                        cellClassName: this.props.cellClassName,
+                        onPick: (value) => this.handleYearPick(value),
+                    })
+                    : null,
+                // 月份表格
+                currentView === 'month'
+                    ? new TdBasicMonthTable({
+                        selectionMode: this.props.selectionMode || 'month',
+                        date: this.innerDate.get(),
+                        parsedValue: this.selectionMode.get() === 'months'
+                            ? this.props.parsedValue
+                            : this.innerDate.get(),
+                        disabledDate: this.props.disabledDate,
+                        disabled: this.props.disabled,
+                        cellClassName: this.props.cellClassName,
+                        onPick: (value) => this.handleMonthPick(value),
+                    })
+                    : null,
+            ],
+        });
+    }
+    /**
+     * 渲染底部
+     */
+    renderFooter() {
+        const ppNs = this.ppNs;
+        if (!this.footerVisible.get() || !this.footerFilled.get()) {
+            return new Div({ class: '' });
+        }
+        return new Div({
+            class: ppNs.e('footer'),
+            slot: [
+                // "现在"按钮
+                this.props.showNow && !this.isMultipleType()
+                    ? new Button({
+                        text: true,
+                        size: 'small',
+                        class: ppNs.e('link-btn'),
+                        disabled: this.disabledNow(),
+                        onClick: () => this.changeToNow(),
+                        slot: this.t('el.datepicker.now'),
+                    })
+                    : null,
+                // "确定"按钮
+                this.props.showConfirm
+                    ? new Button({
+                        plain: true,
+                        size: 'small',
+                        class: ppNs.e('link-btn'),
+                        disabled: this.disabledConfirm(),
+                        onClick: () => this.onConfirm(),
+                        slot: this.t('el.datepicker.confirm'),
+                    })
+                    : null,
+            ],
+        });
+    }
+    // ==================== 事件处理方法 ====================
+    /**
+     * 格式化 emit 的日期值
+     * - 当有 defaultTime 且非特殊操作时，使用 defaultTime 的时间
+     * - 当 showTime 时，重置毫秒为 0
+     * - 否则返回当天开始时间
+     */
+    formatEmit(emitDayjs) {
+        const hasDefaultTime = !!this.props.defaultTime;
+        if (hasDefaultTime && !this.visibleTime.get() && !this.isChangeToNow && !this.isShortcut) {
+            const defaultTime = this.defaultTimeD.get();
+            return defaultTime.year(emitDayjs.year()).month(emitDayjs.month()).date(emitDayjs.date());
+        }
+        if (this.showTime.get())
+            return emitDayjs.millisecond(0);
+        return emitDayjs.startOf('day');
+    }
+    /**
+     * 统一的 emit 方法，处理格式化和状态重置
+     */
+    emitValue(value, ...args) {
+        if (!value) {
+            this.emit('pick', value, ...args);
+        }
+        else if (Array.isArray(value)) {
+            const dates = value.map((v) => this.formatEmit(v));
+            this.emit('pick', dates, ...args);
+        }
+        else {
+            this.emit('pick', this.formatEmit(value), ...args);
+        }
+        this.userInputDate.set(null);
+        this.userInputTime.set(null);
+        this.isChangeToNow = false;
+        this.isShortcut = false;
+    }
+    /**
+     * 处理快捷选项点击
+     *
+     * 忠实于 EP panel-date-pick.vue handleShortcutClick：
+     * - 单日期面板：shortcut.value 为 Dayjs 或返回 Dayjs 的函数，发射单值
+     * - 设置 isShortcut=true 以便 formatEmit 走正确分支
+     */
+    handleShortcutClick(shortcut) {
+        const shortcutValue = typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value;
+        if (shortcutValue) {
+            this.isShortcut = true;
+            this.emitValue(dayjs(shortcutValue).locale(this.lang.get()));
+            return;
+        }
+        if (shortcut.onClick) {
+            shortcut.onClick({
+                emit: this.emit.bind(this),
+            });
+        }
+    }
+    /**
+     * 处理日期选择
+     *
+     * 忠实于 EP panel-date-pick.vue handleDatePick：
+     * - date 模式：保留 parsedValue 的年月日（extractFirst），否则用 value
+     * - week 模式：发射 value.date
+     * - dates 模式：发射 value 并保持面板打开
+     */
+    handleDatePick(value, keepOpen) {
+        const mode = this.selectionMode.get();
+        if (mode === 'date' && dayjs.isDayjs(value)) {
+            // extractFirst 等效：数组取首，否则原值；用 isDayjs 做安全检查
+            const parsedValue = this.props.parsedValue;
+            let parsedDateValue;
+            if (Array.isArray(parsedValue)) {
+                const first = parsedValue[0];
+                parsedDateValue = dayjs.isDayjs(first) ? first : undefined;
+            }
+            else {
+                parsedDateValue = dayjs.isDayjs(parsedValue) ? parsedValue : undefined;
+            }
+            const newDate = parsedDateValue
+                ? parsedDateValue.year(value.year()).month(value.month()).date(value.date())
+                : value;
+            this.innerDate.set(newDate);
+            this.emitValue(newDate, this.showTime.get() || keepOpen);
+        }
+        else if (mode === 'week') {
+            // week 模式：value 为 WeekPickerEmits { year, month, date }
+            this.emitValue(value.date);
+        }
+        else if (mode === 'dates') {
+            // 多选日期：保持面板打开
+            this.emitValue(value, true);
+        }
+    }
+    /**
+     * 处理年份选择
+     *
+     * 忠实于 EP panel-date-pick.vue handleYearPick：
+     * - year 模式：startOf('year') + getValidDateOfYear 校验，切换视图后 focus
+     * - years 模式（多年多选）：直接 emit
+     * - 其他：切换到 month 视图，校验后 emit + focus
+     *
+     * @param value 年份表格 emit 的是年份数字（如 2025），并非 Dayjs
+     */
+    async handleYearPick(value, keepOpen) {
+        const mode = this.selectionMode.get();
+        const year = typeof value === 'number' ? value : value.year();
+        const lang = this.lang.get();
+        if (mode === 'year') {
+            const data = this.innerDate.get().startOf('year').year(year);
+            const valid = getValidDateOfYear(data, lang, this.props.disabledDate);
+            this.innerDate.set(valid);
+            this.emitValue(valid, false);
+        }
+        else if (mode === 'years') {
+            // 多年多选：直接 emit value
+            this.emitValue(value, keepOpen ?? true);
+        }
+        else {
+            const data = this.innerDate.get().year(year);
+            const valid = getValidDateOfYear(data, lang, this.props.disabledDate);
+            this.innerDate.set(valid);
+            this.currentView.set('month');
+            if (['month', 'year', 'date', 'week'].includes(mode)) {
+                this.emitValue(valid, true);
+                this.handleFocusPicker();
+            }
+        }
+        this.handlePanelChange('year');
+    }
+    /**
+     * 处理月份选择
+     *
+     * 忠实于 EP panel-date-pick.vue handleMonthPick：
+     * - month 模式：getValidDateOfMonth 校验，emit
+     * - months 模式（多月多选）：直接 emit
+     * - 其他：切换到 date 视图，校验后 emit + focus
+     *
+     * @param value 月份表格 emit 的是月份数字（1-12），并非 Dayjs
+     */
+    async handleMonthPick(value, keepOpen) {
+        const mode = this.selectionMode.get();
+        // dayjs 月份为 0-indexed，表格 cell.text 为 1-12
+        const month = typeof value === 'number' ? value - 1 : value.month();
+        const lang = this.lang.get();
+        if (mode === 'month') {
+            const valid = getValidDateOfMonth(this.innerDate.get(), this.innerDate.get().year(), month, lang, this.props.disabledDate);
+            this.innerDate.set(valid);
+            this.emitValue(valid, false);
+        }
+        else if (mode === 'months') {
+            // 多月多选：直接 emit value
+            this.emitValue(value, keepOpen ?? true);
+        }
+        else {
+            const valid = getValidDateOfMonth(this.innerDate.get(), this.innerDate.get().year(), month, lang, this.props.disabledDate);
+            this.innerDate.set(valid);
+            this.currentView.set('date');
+            if (['month', 'year', 'date', 'week'].includes(mode)) {
+                this.emitValue(valid, true);
+                this.handleFocusPicker();
+            }
+        }
+        this.handlePanelChange('month');
+    }
+    /**
+     * 切换视图
+     */
+    showPicker(view) {
+        if (this.props.disabled)
+            return;
+        this.currentView.set(view);
+    }
+    /**
+     * 按年份移动（年视图时跳转 10 年）
+     */
+    moveByYear(next) {
+        const offset = next ? 1 : -1;
+        if (this.currentView.get() === 'year') {
+            this.innerDate.set(this.innerDate.get().add(offset * 10, 'year'));
+        }
+        else {
+            this.innerDate.set(this.innerDate.get().add(offset, 'year'));
+        }
+        this.handlePanelChange('year');
+    }
+    /**
+     * 按月份移动
+     */
+    moveByMonth(next) {
+        const offset = next ? 1 : -1;
+        this.innerDate.set(this.innerDate.get().add(offset, 'month'));
+        this.handlePanelChange('month');
+    }
+    /**
+     * 处理面板变化（日期、年份、月份切换时触发）
+     */
+    handlePanelChange(source) {
+        this.emit('panel-change', this.innerDate.get(), source);
+    }
+    /**
+     * 处理表格键盘事件
+     */
+    handleKeydownTable(e) {
+        const code = e.key || '';
+        const validCode = [
+            EVENT_CODE.up,
+            EVENT_CODE.down,
+            EVENT_CODE.left,
+            EVENT_CODE.right,
+            EVENT_CODE.home,
+            EVENT_CODE.end,
+            EVENT_CODE.pageUp,
+            EVENT_CODE.pageDown,
+        ];
+        if (validCode.includes(code)) {
+            this.handleKeyControl(code);
+            e.stopPropagation();
+            e.preventDefault();
+        }
+        if ([EVENT_CODE.enter, EVENT_CODE.space, EVENT_CODE.numpadEnter].includes(code) &&
+            this.userInputDate.get() === null &&
+            this.userInputTime.get() === null) {
+            e.preventDefault();
+            this.emitValue(this.innerDate.get());
+        }
+    }
+    /**
+     * 键盘导航控制
+     */
+    handleKeyControl(code) {
+        const { up, down, left, right, home, end, pageUp, pageDown } = EVENT_CODE;
+        const mapping = {
+            year: {
+                [up]: -4,
+                [down]: 4,
+                [left]: -1,
+                [right]: 1,
+                offset: (date, step) => date.setFullYear(date.getFullYear() + step),
+            },
+            month: {
+                [up]: -4,
+                [down]: 4,
+                [left]: -1,
+                [right]: 1,
+                offset: (date, step) => date.setMonth(date.getMonth() + step),
+            },
+            week: {
+                [up]: -1,
+                [down]: 1,
+                [left]: -1,
+                [right]: 1,
+                offset: (date, step) => date.setDate(date.getDate() + step * 7),
+            },
+            date: {
+                [up]: -7,
+                [down]: 7,
+                [left]: -1,
+                [right]: 1,
+                [home]: (date) => -date.getDay(),
+                [end]: (date) => -date.getDay() + 6,
+                [pageUp]: (date) => -new Date(date.getFullYear(), date.getMonth(), 0).getDate(),
+                [pageDown]: (date) => new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(),
+                offset: (date, step) => date.setDate(date.getDate() + step),
+            },
+        };
+        const keyboardMode = this.selectionMode.get();
+        const newDate = this.innerDate.get().toDate();
+        while (Math.abs(this.innerDate.get().diff(newDate, 'year', true)) < 1) {
+            const map = mapping[keyboardMode];
+            if (!map)
+                return;
+            const mapValue = map[code];
+            const step = typeof mapValue === 'function'
+                ? mapValue(newDate)
+                : (mapValue ?? 0);
+            map.offset(newDate, step);
+            if (this.props.disabledDate && this.props.disabledDate(newDate)) {
+                break;
+            }
+            const result = dayjs(newDate);
+            this.innerDate.set(result);
+            this.emit('pick', result, true);
+            break;
+        }
+    }
+    // ==================== 时间选择相关方法 ====================
+    /**
+     * 时间选择面板获得焦点
+     */
+    onTimePickerInputFocus() {
+        this.timePickerVisible.set(true);
+    }
+    /**
+     * 关闭时间选择面板
+     */
+    handleTimePickClose() {
+        this.timePickerVisible.set(false);
+    }
+    /**
+     * 获取日期的时间单位
+     */
+    getUnits(date) {
+        return {
+            hour: date.hour(),
+            minute: date.minute(),
+            second: date.second(),
+            year: date.year(),
+            month: date.month(),
+            date: date.date(),
+        };
+    }
+    /**
+     * 处理可见时间变化
+     */
+    handleVisibleTimeChange(value) {
+        const newDate = dayjs(value, this.timeFormat.get());
+        if (newDate.isValid()) {
+            const { year, month, date } = this.getUnits(this.innerDate.get());
+            const updated = newDate.year(year).month(month).date(date);
+            this.innerDate.set(updated);
+            this.userInputTime.set(null);
+            this.timePickerVisible.set(false);
+            this.emit('pick', updated, true);
+        }
+    }
+    /**
+     * 处理可见日期变化
+     */
+    handleVisibleDateChange(value) {
+        const newDate = dayjs(value, this.dateFormat.get());
+        if (newDate.isValid()) {
+            if (this.props.disabledDate && this.props.disabledDate(newDate.toDate())) {
+                return;
+            }
+            const { hour, minute, second } = this.getUnits(this.innerDate.get());
+            const updated = newDate.hour(hour).minute(minute).second(second);
+            this.innerDate.set(updated);
+            this.userInputDate.set(null);
+            this.emit('pick', updated, true);
+        }
+    }
+    /**
+     * 是否为多选类型
+     */
+    isMultipleType() {
+        return ['dates', 'months', 'years'].includes(this.props.type || '');
+    }
+    /**
+     * "现在"按钮是否禁用
+     */
+    disabledNow() {
+        if (this.props.disabled)
+            return true;
+        if (this.props.disabledDate) {
+            return this.props.disabledDate(dayjs().toDate());
+        }
+        return false;
+    }
+    /**
+     * "确定"按钮是否禁用
+     */
+    disabledConfirm() {
+        const parsedValue = this.props.parsedValue;
+        if (!parsedValue)
+            return true;
+        if (this.props.disabledDate) {
+            if (Array.isArray(parsedValue)) {
+                return this.props.disabledDate(parsedValue[0].toDate());
+            }
+            return this.props.disabledDate(parsedValue.toDate());
+        }
+        return false;
+    }
+    /**
+     * 切换到当前时间
+     */
+    changeToNow() {
+        const now = dayjs();
+        // 检查是否被禁用
+        if (this.props.disabledDate && this.props.disabledDate(now.toDate())) {
+            return;
+        }
+        this.isChangeToNow = true;
+        this.innerDate.set(now);
+        this.emitValue(now);
+    }
+    /**
+     * 确认选择
+     */
+    onConfirm() {
+        const parsedValue = this.props.parsedValue;
+        const isMultiple = this.isMultipleType();
+        if (!parsedValue) {
+            // 没有值时使用 defaultValue + defaultTime
+            const defaultValue = this.props.defaultValue;
+            if (defaultValue) {
+                let value = dayjs(defaultValue);
+                if (this.props.defaultTime) {
+                    const defaultTime = dayjs(this.props.defaultTime);
+                    value = value
+                        .hour(defaultTime.hour())
+                        .minute(defaultTime.minute())
+                        .second(defaultTime.second());
+                }
+                this.emitValue(value);
+            }
+            return;
+        }
+        if (isMultiple) {
+            // 多选模式：使用 emitValue 确保日期经过 formatEmit 格式化
+            this.emitValue(parsedValue);
+        }
+        else {
+            // 单选模式使用 formatEmit 格式化
+            this.emitValue(parsedValue);
+        }
+    }
+    // ========== 供父组件通过 set-picker-option 调用的方法 ==========
+    /**
+     * 检查日期值是否有效
+     */
+    isValidValue(date) {
+        const d = dayjs(date);
+        return d.isValid() && (!this.props.disabledDate || !this.props.disabledDate(d.toDate()));
+    }
+    /**
+     * 解析用户输入
+     */
+    parseUserInput(value) {
+        if (Array.isArray(value)) {
+            return value.map((v) => this.parseUserInput(v));
+        }
+        const format = this.props.format || 'YYYY-MM-DD';
+        const parsed = dayjs(value, format);
+        return parsed.isValid() ? parsed : dayjs();
+    }
+    /**
+     * 聚焦选择器
+     */
+    handleFocusPicker() {
+        const type = this.selectionMode.get();
+        if (type === 'week') {
+            // week 模式需要特殊处理：首次按键时触发 down 导航
+            this.handleKeyControl(EVENT_CODE.down);
+        }
+    }
+}
+//# sourceMappingURL=panel-date-pick.class.js.map