@type-dom/ui 0.5.0 → 0.6.1

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

@@ -0,0 +1,682 @@
+/**
+ * Panel Date Range Component | 日期范围面板组件
+ *
+ * 从 Element Plus date-picker-panel/src/date-picker-com/panel-date-range.vue 转换而来
+ */
+import { Div, Button, Span, 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 { TdBasicDateTable } from './basic-date-table.class';
+import { TdBasicMonthTable } from './basic-month-table.class';
+import { TdBasicYearTable } from './basic-year-table.class';
+import { usePanelDateRange } from '../composables/use-panel-date-range';
+import { ElArrowLeftSvg, ElArrowRightSvg, ElDArrowLeftSvg, ElDArrowRightSvg } from '@type-dom/svgs';
+import { TdIcon } from '../../../basic/td-icon/td-icon.class';
+export const TdPanelDateRangeEmits = [
+    'pick',
+    'calendar-change',
+    'panel-change',
+    'set-picker-option',
+    'changerange',
+    'clear',
+];
+export class TdPanelDateRange extends Div {
+    ppNs = useNamespace('picker-panel');
+    drpNs = useNamespace('date-range-picker');
+    locale = useLocale();
+    t = this.locale.t;
+    lang = this.locale.lang;
+    // ---- Signals ----
+    leftDate;
+    rightDate;
+    /** range 选择时当前的起始锚点（选第一下 set 为 minDate，选第二下确定范围） */
+    minDate;
+    /** range 选择时当前的结束点（悬停/dragging 中变化） */
+    maxDate;
+    /** 是否处于范围拖拽选中过程中（onSelect 发射） */
+    selecting;
+    // ---- usePanelDateRange composable ----
+    pdr;
+    // ---- Computed ----
+    hasShortcuts;
+    showTime;
+    dateRangeDisabled;
+    enableMonthArrow;
+    enableYearArrow;
+    constructor(params = {}) {
+        super(params);
+        addEmits(this, TdPanelDateRangeEmits);
+        const now = dayjs();
+        this.leftDate = signal(params.leftDate || now);
+        this.rightDate = signal(params.rightDate || now.add(1, 'month'));
+        this.minDate = signal(null);
+        this.maxDate = signal(null);
+        this.selecting = signal(false);
+        // 集成 usePanelDateRange composable
+        this.pdr = usePanelDateRange({
+            props: params,
+            emit: this.emit.bind(this),
+            leftDate: this.leftDate,
+            rightDate: this.rightDate,
+            disabledDate: params.disabledDate,
+            lang: this.lang,
+            t: this.t.bind(this),
+        });
+        this.hasShortcuts = computed(() => !!(this.props.shortcuts && this.props.shortcuts.length > 0));
+        this.showTime = computed(() => this.props.type === 'datetimerange');
+        this.dateRangeDisabled = computed(() => this.props.disabled || false);
+        // EP 等效: enableMonthArrow
+        // unlinkPanels 时，检查左侧下一月是否已到达右侧当前月
+        this.enableMonthArrow = computed(() => {
+            const nextMonth = (this.pdr.leftMonth.get() + 1) % 12;
+            const yearOffset = this.pdr.leftMonth.get() + 1 >= 12 ? 1 : 0;
+            return (!!this.props.unlinkPanels &&
+                new Date(this.pdr.leftYear.get() + yearOffset, nextMonth) <
+                    new Date(this.pdr.rightYear.get(), this.pdr.rightMonth.get()));
+        });
+        // EP 等效: enableYearArrow
+        // unlinkPanels 时，检查左右面板年份差是否 >= 12 个月
+        this.enableYearArrow = computed(() => {
+            return (!!this.props.unlinkPanels &&
+                this.pdr.rightYear.get() * 12 +
+                    this.pdr.rightMonth.get() -
+                    (this.pdr.leftYear.get() * 12 + this.pdr.leftMonth.get() + 1) >=
+                    12);
+        });
+    }
+    setup() {
+        this.addChild(new Div({
+            class: [
+                this.ppNs.b(),
+                this.drpNs.b(),
+                this.ppNs.is('border', this.props.border),
+                computed(() => this.ppNs.is('disabled', this.dateRangeDisabled.get())),
+                {
+                    'has-sidebar': this.hasShortcuts.get(),
+                    'has-time': this.showTime.get(),
+                    'single-panel': this.props.singlePanel,
+                },
+            ],
+            slot: this.renderBodyWrapper(),
+        }));
+    }
+    // ==================== Render: body-wrapper ====================
+    renderBodyWrapper() {
+        return [this.hasShortcuts.get() ? this.renderSidebar() : null, this.renderBody()];
+    }
+    renderSidebar() {
+        return new Div({
+            class: this.ppNs.e('sidebar'),
+            slot: (this.props.shortcuts || []).map((shortcut) => new Button({
+                type: 'button',
+                disabled: this.dateRangeDisabled.get(),
+                class: this.ppNs.e('shortcut'),
+                slot: shortcut.text,
+                onClick: () => this.handleShortcutClick(shortcut),
+            })),
+        });
+    }
+    renderBody() {
+        return new Div({
+            class: this.ppNs.e('body'),
+            slot: [
+                this.showTime.get() ? this.renderTimeHeader() : null,
+                this.renderPanels(),
+                this.renderFooter(),
+            ],
+        });
+    }
+    // ==================== Render: time header ====================
+    /**
+     * 渲染时间头部（简化版，未集成真实 TimePickPanel）
+     *
+     * 样式与 panel-date-pick renderTimePickPanel 一致，
+     * 左右两个时间区分别显示当前 leftDate/rightDate 的时间部分。
+     * 完整 EP 版本会用 <time-pick-panel> 做可交互时间选择，此处为占位。
+     */
+    renderTimeHeader() {
+        const drpNs = this.drpNs;
+        const tpNs = useNamespace('time-picker-panel');
+        const leftTime = this.leftDate.get();
+        const rightTime = this.rightDate.get();
+        const hourNums = Array.from({ length: 24 }, (_, i) => i);
+        const minuteNums = Array.from({ length: 60 }, (_, i) => i);
+        const secondNums = Array.from({ length: 60 }, (_, i) => i);
+        const timeCellCls = [tpNs.e('cell'), computed(() => tpNs.em('cell', 'active'))];
+        const renderTimeColumn = (vals, selected) => vals.map((v) => new Div({
+            class: v === selected ? timeCellCls : tpNs.e('cell'),
+            slot: String(v).padStart(2, '0'),
+        }));
+        const renderTimePanel = (dt) => new Div({
+            class: tpNs.e('content'),
+            slot: [
+                new Div({
+                    class: tpNs.em('content', 'wrap'),
+                    slot: new Div({
+                        class: tpNs.e('spinner'),
+                        slot: renderTimeColumn(hourNums, dt.hour()),
+                    }),
+                }),
+                new Div({
+                    class: tpNs.em('content', 'wrap'),
+                    slot: new Div({
+                        class: tpNs.e('spinner'),
+                        slot: renderTimeColumn(minuteNums, dt.minute()),
+                    }),
+                }),
+                new Div({
+                    class: tpNs.em('content', 'wrap'),
+                    slot: new Div({
+                        class: tpNs.e('spinner'),
+                        slot: renderTimeColumn(secondNums, dt.second()),
+                    }),
+                }),
+            ],
+        });
+        return new Div({
+            class: drpNs.e('time-header'),
+            slot: [
+                new Div({
+                    class: [tpNs.b(), tpNs.em('', 'range-left'), drpNs.e('time-content')],
+                    slot: renderTimePanel(leftTime),
+                }),
+                new Div({
+                    class: [tpNs.b(), tpNs.em('', 'range-right'), drpNs.e('time-content')],
+                    slot: renderTimePanel(rightTime),
+                }),
+            ],
+        });
+    }
+    // ==================== Render: panels ====================
+    renderPanels() {
+        return new Div({
+            class: [this.ppNs.e('content'), this.drpNs.e('content')],
+            slot: this.props.singlePanel
+                ? [this.renderLeftPanel(true)]
+                : [this.renderLeftPanel(false), this.renderRightPanel()],
+        });
+    }
+    renderLeftPanel(isSingle) {
+        return new Div({
+            class: [this.drpNs.e('content'), computed(() => this.drpNs.is('left', !isSingle))],
+            slot: [this.renderLeftHeader(), this.renderLeftContent()],
+        });
+    }
+    renderRightPanel() {
+        return new Div({
+            class: [this.drpNs.e('content'), this.drpNs.is('right', true)],
+            slot: [this.renderRightHeader(), this.renderRightContent()],
+        });
+    }
+    // ==================== Render: left header ====================
+    renderLeftHeader() {
+        const unlink = this.props.unlinkPanels;
+        const disabled = this.dateRangeDisabled.get();
+        return new Div({
+            class: this.drpNs.e('header'),
+            slot: [
+                // d-arrow-left (prev year) — 始终可见
+                new Button({
+                    type: 'button',
+                    class: [this.ppNs.e('icon-btn'), 'd-arrow-left'],
+                    ariaLabel: '上一年',
+                    disabled,
+                    onClick: () => this.leftPrevYear(),
+                    slot: new TdIcon({ slot: new ElDArrowLeftSvg() }),
+                }),
+                // arrow-left (prev month) — 仅 date 视图可见
+                new Button({
+                    vShow: this.pdr.leftCurrentView.get() === 'date',
+                    type: 'button',
+                    class: [this.ppNs.e('icon-btn'), 'arrow-left'],
+                    ariaLabel: '上一月',
+                    disabled,
+                    onClick: () => this.leftPrevMonth(),
+                    slot: new TdIcon({ slot: new ElArrowLeftSvg() }),
+                }),
+                // 年份标签
+                new Span({
+                    attrObj: {
+                        role: 'button',
+                        tabindex: this.props.disabled ? undefined : 0,
+                        'aria-disabled': !!this.props.disabled,
+                    },
+                    class: this.drpNs.e('header-label'),
+                    onClick: () => this.pdr.showLeftPicker('year'),
+                    onKeydownEnter: () => this.pdr.showLeftPicker('year'),
+                    slot: computed(() => this.pdr.leftYearLabel.get()),
+                }),
+                // 月份标签 — 仅 date 视图可见
+                new Span({
+                    vShow: this.pdr.leftCurrentView.get() === 'date',
+                    attrObj: {
+                        role: 'button',
+                        tabindex: this.props.disabled ? undefined : 0,
+                        'aria-disabled': !!this.props.disabled,
+                    },
+                    class: this.drpNs.e('header-label'),
+                    onClick: () => this.pdr.showLeftPicker('month'),
+                    onKeydownEnter: () => this.pdr.showLeftPicker('month'),
+                    slot: computed(() => this.t('el.datepicker.month' + (this.pdr.leftMonth.get() + 1))),
+                }),
+                // arrow-right (next month) — 仅 unlinkPanels 且 date 视图可见
+                ...(unlink
+                    ? [
+                        new Button({
+                            vShow: this.pdr.leftCurrentView.get() === 'date',
+                            type: 'button',
+                            class: [this.ppNs.e('icon-btn'), 'arrow-right'],
+                            ariaLabel: '下一月',
+                            disabled: (!this.enableMonthArrow.get() && disabled) || disabled,
+                            onClick: () => this.leftNextMonth(),
+                            slot: new TdIcon({ slot: new ElArrowRightSvg() }),
+                        }),
+                    ]
+                    : []),
+                // d-arrow-right (next year) — 仅 unlinkPanels 可见
+                ...(unlink
+                    ? [
+                        new Button({
+                            type: 'button',
+                            class: [this.ppNs.e('icon-btn'), 'd-arrow-right'],
+                            ariaLabel: '下一年',
+                            disabled: (!this.enableYearArrow.get() && disabled) || disabled,
+                            onClick: () => this.leftNextYear(),
+                            slot: new TdIcon({ slot: new ElDArrowRightSvg() }),
+                        }),
+                    ]
+                    : []),
+            ],
+        });
+    }
+    // ==================== Render: right header ====================
+    renderRightHeader() {
+        const unlink = this.props.unlinkPanels;
+        const disabled = this.dateRangeDisabled.get();
+        return new Div({
+            class: this.drpNs.e('header'),
+            slot: [
+                // d-arrow-left (prev year) — 仅 unlinkPanels 可见
+                ...(unlink
+                    ? [
+                        new Button({
+                            type: 'button',
+                            class: [this.ppNs.e('icon-btn'), 'd-arrow-left'],
+                            ariaLabel: '上一年',
+                            disabled: (!this.enableYearArrow.get() && disabled) || disabled,
+                            onClick: () => this.rightPrevYear(),
+                            slot: new TdIcon({ slot: new ElDArrowLeftSvg() }),
+                        }),
+                    ]
+                    : []),
+                // arrow-left (prev month) — 仅 unlinkPanels 且 date 视图可见
+                ...(unlink
+                    ? [
+                        new Button({
+                            vShow: this.pdr.rightCurrentView.get() === 'date',
+                            type: 'button',
+                            class: [this.ppNs.e('icon-btn'), 'arrow-left'],
+                            ariaLabel: '上一月',
+                            disabled: (!this.enableMonthArrow.get() && disabled) || disabled,
+                            onClick: () => this.rightPrevMonth(),
+                            slot: new TdIcon({ slot: new ElArrowLeftSvg() }),
+                        }),
+                    ]
+                    : []),
+                // 年份标签
+                new Span({
+                    attrObj: {
+                        role: 'button',
+                        tabindex: this.props.disabled ? undefined : 0,
+                        'aria-disabled': !!this.props.disabled,
+                    },
+                    class: this.drpNs.e('header-label'),
+                    onClick: () => this.pdr.showRightPicker('year'),
+                    onKeydownEnter: () => this.pdr.showRightPicker('year'),
+                    slot: computed(() => this.pdr.rightYearLabel.get()),
+                }),
+                // 月份标签 — 仅 date 视图可见
+                new Span({
+                    vShow: this.pdr.rightCurrentView.get() === 'date',
+                    attrObj: {
+                        role: 'button',
+                        tabindex: this.props.disabled ? undefined : 0,
+                        'aria-disabled': !!this.props.disabled,
+                    },
+                    class: this.drpNs.e('header-label'),
+                    onClick: () => this.pdr.showRightPicker('month'),
+                    onKeydownEnter: () => this.pdr.showRightPicker('month'),
+                    slot: computed(() => this.t('el.datepicker.month' + (this.pdr.rightMonth.get() + 1))),
+                }),
+                // arrow-right (next month) — 仅 date 视图可见，始终存在
+                new Button({
+                    vShow: this.pdr.rightCurrentView.get() === 'date',
+                    type: 'button',
+                    class: [this.ppNs.e('icon-btn'), 'arrow-right'],
+                    ariaLabel: '下一月',
+                    disabled,
+                    onClick: () => this.rightNextMonth(),
+                    slot: new TdIcon({ slot: new ElArrowRightSvg() }),
+                }),
+                // d-arrow-right (next year) — 始终可见
+                new Button({
+                    type: 'button',
+                    class: [this.ppNs.e('icon-btn'), 'd-arrow-right'],
+                    ariaLabel: '下一年',
+                    disabled,
+                    onClick: () => this.rightNextYear(),
+                    slot: new TdIcon({ slot: new ElDArrowRightSvg() }),
+                }),
+            ],
+        });
+    }
+    // ==================== Render: content (tables) ====================
+    renderLeftContent() {
+        const leftView = this.pdr.leftCurrentView.get();
+        const leftDateVal = this.leftDate.get();
+        return new Div({
+            slot: [
+                leftView === 'date'
+                    ? new TdBasicDateTable({
+                        selectionMode: 'range',
+                        date: leftDateVal,
+                        parsedValue: this.props.parsedValue,
+                        disabledDate: this.props.disabledDate,
+                        disabled: this.props.disabled,
+                        cellClassName: this.props.cellClassName,
+                        showWeekNumber: this.props.showWeekNumber,
+                        minDate: this.minDate.get(),
+                        maxDate: this.maxDate.get(),
+                        rangeState: {
+                            endDate: this.maxDate.get(),
+                            selecting: this.selecting.get(),
+                        },
+                        onPick: (value) => this.handleLeftDatePick(value),
+                        onChangeRange: (val) => this.handleChangeRange(val),
+                        onSelect: (selecting) => this.handleSelect(selecting),
+                    })
+                    : null,
+                leftView === 'year'
+                    ? new TdBasicYearTable({
+                        selectionMode: 'year',
+                        date: leftDateVal,
+                        parsedValue: this.props.parsedValue,
+                        disabledDate: this.props.disabledDate,
+                        disabled: this.props.disabled,
+                        onPick: (year) => this.pdr.handleLeftYearPick(year),
+                    })
+                    : null,
+                leftView === 'month'
+                    ? new TdBasicMonthTable({
+                        selectionMode: 'month',
+                        date: leftDateVal,
+                        parsedValue: this.props.parsedValue,
+                        disabledDate: this.props.disabledDate,
+                        disabled: this.props.disabled,
+                        onPick: (month) => this.pdr.handleLeftMonthPick(month),
+                    })
+                    : null,
+            ],
+        });
+    }
+    renderRightContent() {
+        const rightView = this.pdr.rightCurrentView.get();
+        const rightDateVal = this.rightDate.get();
+        return new Div({
+            slot: [
+                rightView === 'date'
+                    ? new TdBasicDateTable({
+                        selectionMode: 'range',
+                        date: rightDateVal,
+                        parsedValue: this.props.parsedValue,
+                        disabledDate: this.props.disabledDate,
+                        disabled: this.props.disabled,
+                        cellClassName: this.props.cellClassName,
+                        showWeekNumber: this.props.showWeekNumber,
+                        minDate: this.minDate.get(),
+                        maxDate: this.maxDate.get(),
+                        rangeState: {
+                            endDate: this.maxDate.get(),
+                            selecting: this.selecting.get(),
+                        },
+                        onPick: (value) => this.handleRightDatePick(value),
+                        onChangeRange: (val) => this.handleChangeRange(val),
+                        onSelect: (selecting) => this.handleSelect(selecting),
+                    })
+                    : null,
+                rightView === 'year'
+                    ? new TdBasicYearTable({
+                        selectionMode: 'year',
+                        date: rightDateVal,
+                        parsedValue: this.props.parsedValue,
+                        disabledDate: this.props.disabledDate,
+                        disabled: this.props.disabled,
+                        onPick: (year) => this.pdr.handleRightYearPick(year),
+                    })
+                    : null,
+                rightView === 'month'
+                    ? new TdBasicMonthTable({
+                        selectionMode: 'month',
+                        date: rightDateVal,
+                        parsedValue: this.props.parsedValue,
+                        disabledDate: this.props.disabledDate,
+                        disabled: this.props.disabled,
+                        onPick: (month) => this.pdr.handleRightMonthPick(month),
+                    })
+                    : null,
+            ],
+        });
+    }
+    // ==================== Render: footer ====================
+    renderFooter() {
+        if (!this.showTime.get())
+            return null;
+        const hasFooter = this.props.showConfirm || this.props.clearable !== false;
+        if (!hasFooter)
+            return null;
+        const disabled = this.dateRangeDisabled.get();
+        return new Div({
+            class: this.ppNs.e('footer'),
+            slot: [
+                this.props.clearable !== false
+                    ? new Button({
+                        type: 'button',
+                        class: [this.ppNs.e('link-btn'), this.ppNs.is('disabled', disabled)],
+                        disabled,
+                        onClick: () => this.handleClear(),
+                        slot: this.t('el.datepicker.clear'),
+                    })
+                    : null,
+                this.props.showConfirm
+                    ? new Button({
+                        type: 'button',
+                        class: [this.ppNs.e('link-btn'), this.ppNs.is('disabled', disabled)],
+                        disabled,
+                        onClick: () => this.handleRangeConfirm(),
+                        slot: this.t('el.datepicker.confirm'),
+                    })
+                    : null,
+            ],
+        });
+    }
+    // ==================== Navigation Methods ====================
+    // --- Left Panel ---
+    leftPrevYear() {
+        this.leftDate.set(this.pdr.adjustDateByView(this.pdr.leftCurrentView.get(), this.leftDate.get(), false));
+        if (!this.props.unlinkPanels) {
+            this.rightDate.set(this.leftDate.get().add(1, 'month'));
+        }
+        this.pdr.handlePanelChange('year');
+    }
+    leftNextYear() {
+        this.leftDate.set(this.pdr.adjustDateByView(this.pdr.leftCurrentView.get(), this.leftDate.get(), true));
+        this.pdr.handlePanelChange('year');
+        // 不同步 rightDate（EP 行为）
+    }
+    leftPrevMonth() {
+        this.leftDate.set(this.leftDate.get().subtract(1, 'month'));
+        if (!this.props.unlinkPanels) {
+            this.rightDate.set(this.rightDate.get().subtract(1, 'month'));
+        }
+        this.pdr.handlePanelChange('month');
+    }
+    leftNextMonth() {
+        this.leftDate.set(this.leftDate.get().add(1, 'month'));
+        this.pdr.handlePanelChange('month');
+        // 不同步 rightDate（EP 行为）
+    }
+    // --- Right Panel ---
+    rightPrevYear() {
+        // 仅在 unlinkPanels 时触发（按钮条件渲染）
+        this.rightDate.set(this.pdr.adjustDateByView(this.pdr.rightCurrentView.get(), this.rightDate.get(), false));
+        this.pdr.handlePanelChange('year');
+    }
+    rightNextYear() {
+        if (!this.props.unlinkPanels) {
+            this.leftDate.set(this.pdr.adjustDateByView(this.pdr.leftCurrentView.get(), this.leftDate.get(), true));
+            this.rightDate.set(this.leftDate.get().add(1, 'month'));
+        }
+        else {
+            this.rightDate.set(this.pdr.adjustDateByView(this.pdr.rightCurrentView.get(), this.rightDate.get(), true));
+        }
+        this.pdr.handlePanelChange('year');
+    }
+    rightPrevMonth() {
+        // 仅在 unlinkPanels 时触发（按钮条件渲染）
+        this.rightDate.set(this.rightDate.get().subtract(1, 'month'));
+        this.pdr.handlePanelChange('month');
+    }
+    rightNextMonth() {
+        this.leftDate.set(this.leftDate.get().add(1, 'month'));
+        this.rightDate.set(this.leftDate.get().add(1, 'month'));
+        this.pdr.handlePanelChange('month');
+    }
+    // ==================== Event Handlers ====================
+    handleShortcutClick(shortcut) {
+        const value = typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value;
+        if (Array.isArray(value) && value.length === 2) {
+            const start = dayjs(value[0]).locale(this.lang.get());
+            const end = dayjs(value[1]).locale(this.lang.get());
+            this.leftDate.set(start);
+            this.rightDate.set(end);
+            this.minDate.set(start);
+            this.maxDate.set(end);
+            this.emit('pick', [start, end]);
+        }
+        if (shortcut.onClick) {
+            shortcut.onClick({ emit: (e, ...a) => this.emit(e, ...a) });
+        }
+    }
+    /**
+     * 处理左面板日期选择（range 模式下 first/second click）
+     *
+     * basic-date-table selectionMode='range' 的 onPick 发射 {minDate,maxDate} 结构
+     * 对应 useBasicDateTable.handleRangePick：
+     *   - 第一次点击（未 selecting 或未设置 minDate）：{minDate: newDate, maxDate: null}
+     *   - 第二次点击（范围结束）：{minDate, maxDate} 已排序
+     */
+    handleLeftDatePick(value) {
+        const { minDate, maxDate } = value;
+        if (!maxDate) {
+            // 第一次点击：只设锚点，把右面板的"范围选择状态"置为 dragging
+            this.minDate.set(minDate);
+            this.maxDate.set(null);
+            this.leftDate.set(minDate);
+            // 仅在跨面板时设右面板起始月为 minDate（若 minDate > rightDate）
+            if (minDate.isAfter(this.rightDate.get(), 'month')) {
+                this.rightDate.set(minDate.add(1, 'month'));
+            }
+        }
+        else {
+            // 同面板内完成两次点击（或者同一月内开始+结束）：直接 emit 完整范围
+            const start = minDate.isBefore(maxDate) ? minDate : maxDate;
+            const end = minDate.isBefore(maxDate) ? maxDate : minDate;
+            this.leftDate.set(start);
+            this.rightDate.set(end);
+            this.minDate.set(start);
+            this.maxDate.set(end);
+            this.selecting.set(false);
+            this.emit('pick', [start, end], !this.showTime.get());
+        }
+    }
+    /**
+     * 处理右面板日期选择
+     *
+     * 若 selecting=true（左面板已点了第一下），则本次点击即右边界：最终 emit [minDate, date]
+     * 否则：从右面板开始点第一下（反向选择），后续由左侧第二次点击收尾
+     */
+    handleRightDatePick(value) {
+        const { minDate: valMin, maxDate } = value;
+        if (this.selecting.get() && this.minDate.get()) {
+            // 左面板已选了起始锚点 → 右面板是结束锚点
+            const start = this.minDate.get();
+            const end = valMin;
+            const sortedStart = start.isBefore(end) ? start : end;
+            const sortedEnd = start.isBefore(end) ? end : start;
+            this.leftDate.set(sortedStart);
+            this.rightDate.set(sortedEnd);
+            this.minDate.set(sortedStart);
+            this.maxDate.set(sortedEnd);
+            this.selecting.set(false);
+            this.emit('pick', [sortedStart, sortedEnd], !this.showTime.get());
+        }
+        else if (!maxDate) {
+            // 反向：用户直接在右面板点第一下 → 设为暂时右边界
+            this.maxDate.set(valMin);
+            this.rightDate.set(valMin);
+            if (valMin.isBefore(this.leftDate.get(), 'month')) {
+                this.leftDate.set(valMin.subtract(1, 'month'));
+            }
+        }
+        else {
+            const start = valMin.isBefore(maxDate) ? valMin : maxDate;
+            const end = valMin.isBefore(maxDate) ? maxDate : valMin;
+            this.leftDate.set(start);
+            this.rightDate.set(end);
+            this.minDate.set(start);
+            this.maxDate.set(end);
+            this.selecting.set(false);
+            this.emit('pick', [start, end], !this.showTime.get());
+        }
+    }
+    /**
+     * 范围悬停/拖拽更新
+     * RangeState.endDate: 当前悬停的结束日期
+     * RangeState.selecting: 是否正处于选择拖拽过程
+     */
+    handleChangeRange(val) {
+        this.maxDate.set(val.endDate);
+        this.emit('changerange', val);
+    }
+    /**
+     * basic-date-table 发射 onSelect：表示一次 pick 后 range 的 selecting 状态变化
+     * - true：刚点了第一下（进入范围选择过程）
+     * - false：点了第二下（选择过程结束）
+     */
+    handleSelect(selecting) {
+        this.selecting.set(selecting);
+    }
+    handleClear() {
+        const now = dayjs();
+        this.leftDate.set(now);
+        this.rightDate.set(now.add(1, 'month'));
+        this.minDate.set(null);
+        this.maxDate.set(null);
+        this.selecting.set(false);
+        this.pdr.leftCurrentView.set('date');
+        this.pdr.rightCurrentView.set('date');
+        this.emit('pick', []);
+        this.emit('clear');
+    }
+    handleRangeConfirm() {
+        // 优先使用 min/max（正在选择过程中但点了确认），否则回退到左右面板日期
+        const start = this.minDate.get() ?? this.leftDate.get();
+        const end = this.maxDate.get() ?? this.rightDate.get();
+        const sortedStart = start.isBefore(end) ? start : end;
+        const sortedEnd = start.isBefore(end) ? end : start;
+        this.emit('pick', [sortedStart, sortedEnd], false);
+    }
+}
+//# sourceMappingURL=panel-date-range.class.js.map