@type-dom/ui 0.6.0 → 0.9.0

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

@@ -1,84 +1,109 @@
-import { inject, TypeFragment } from '@type-dom/framework';
+import { inject, Fragment, Div, Button, Transition, unref, nextTick, watch } from '@type-dom/framework';
 import dayjs from 'dayjs';
 import { computed, signal } from '@type-dom/signals';
-// import { isUndefined } from '@type-dom/utils';
+import { isUndefined, getEventCode, rAF } from '@type-dom/utils';
 import { EVENT_CODE } from '../../../../constants/aria';
-// import { useNamespace } from '../../../../hooks/use-namespace';
+import { useNamespace } from '../../../../hooks/use-namespace';
 import { useLocale } from '../../../../hooks/use-locale';
+import { PICKER_BASE_INJECTION_KEY, ROOT_COMMON_PICKER_INJECTION_KEY } from '../constants';
 import { useTimePanel } from '../composables/use-time-panel';
-import { buildAvailableTimeSlotGetter,
-// useOldValue,
- } from '../composables/use-time-picker';
-export class PanelTimePick extends TypeFragment {
+import { buildAvailableTimeSlotGetter, useOldValue, } from '../composables/use-time-picker';
+import { BasicTimeSpinner } from './basic-time-spinner.class';
+export class PanelTimePick extends Fragment {
     constructor(params = {}) {
-        super();
-        this.className = 'PanelTimePick';
-        // this.assignProps(panelTimePickerProps);
-        this.props = this.useParams(params);
+        super(params);
     }
     setup() {
         const props = this.props;
-        const emit = this.emit; // defineEmits(['pick', 'select-range', 'set-picker-option'])
+        const emit = this.emit;
         // Injections
-        const pickerBase = inject('EP_PICKER_BASE');
-        const { 
-        // arrowControl,
-        disabledHours, disabledMinutes, disabledSeconds, defaultValue, } = pickerBase.props;
+        const pickerBase = inject(PICKER_BASE_INJECTION_KEY);
+        // 实时响应式解析值（对应 EP 的 :spinner-date="parsedValue"）；插槽里的
+        // parsedValue 是 .get() 快照，无法随 model 变化更新，故改从公共 picker context 取。
+        // 修复 TD-TimePicker-001（滚动弹回 0 / 点击不更新输入框）。
+        const commonPicker = inject(ROOT_COMMON_PICKER_INJECTION_KEY);
+        const { arrowControl, disabledHours, disabledMinutes, disabledSeconds, defaultValue, } = pickerBase.props;
+        // console.warn('defaultValue is ', defaultValue)
         const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } = buildAvailableTimeSlotGetter(disabledHours, disabledMinutes, disabledSeconds);
-        // const ns = useNamespace('time');
-        const { lang } = useLocale();
+        const ns = useNamespace('time');
+        const { t, lang } = useLocale();
         // data
         const selectionRange = signal([0, 2]);
-        // const oldValue = useOldValue(props);
+        const oldValue = useOldValue(props, {
+            modelValue: computed(() => pickerBase.props.vModel?.get()),
+            valueOnClear: computed(() => pickerBase?.emptyValues ? pickerBase.emptyValues.valueOnClear.get() : null),
+        });
         // computed
-        // const transitionName = computed(() => {
-        //   return isUndefined(props.actualVisible)
-        //     ? `${ns.namespace.get()}-zoom-in-top`
-        //     : '';
-        // });
+        const transitionName = computed(() => {
+            return isUndefined(unref(props.actualVisible))
+                ? `${ns.namespace.get()}-zoom-in-top`
+                : '';
+        });
         const showSeconds = computed(() => {
-            var _a;
-            return (_a = props.format) === null || _a === void 0 ? void 0 : _a.includes('ss');
+            return props.format?.includes('ss');
+        });
+        const amPmMode = computed(() => {
+            if (props.format?.includes('A'))
+                return 'A';
+            if (props.format?.includes('a'))
+                return 'a';
+            return '';
         });
-        // const amPmMode = computed(() => {
-        //   if (props.format?.includes('A')) return 'A';
-        //   if (props.format?.includes('a')) return 'a';
-        //   return '';
-        // });
         // method
         const isValidValue = (_date) => {
             const parsedDate = dayjs(_date).locale(lang.get());
             const result = getRangeAvailableTime(parsedDate);
             return parsedDate.isSame(result);
         };
-        // const handleCancel = () => {
-        //   emit('pick', oldValue.get(), false);
-        // };
-        // const handleConfirm = (visible = false, first = false) => {
-        //   if (first) return;
-        //   emit('pick', props.parsedValue, visible);
-        // };
-        // const handleChange = (_date: Dayjs) => {
-        //   // visible avoids edge cases, when use scrolls during panel closing animation
-        //   if (!props.visible) {
-        //     return;
-        //   }
-        //   const result = getRangeAvailableTime(_date).millisecond(0);
-        //   emit('pick', result, true);
-        // };
-        // const setSelectionRange = (start: number, end: number) => {
-        //   emit('select-range', start, end);
-        //   selectionRange.set([start, end]);
-        // };
+        const handleCancel = () => {
+            const old = oldValue.get();
+            emit('pick', old, false);
+            nextTick(() => {
+                oldValue.set(old);
+            });
+        };
+        const handleConfirm = (visible = false, first = false) => {
+            if (first)
+                return;
+            emit('pick', unref(commonPicker.parsedValue), visible);
+        };
+        const handleChange = (_date) => {
+            // visible avoids edge cases, when use scrolls during panel closing animation
+            if (!unref(props.visible)) {
+                return;
+            }
+            const result = getRangeAvailableTime(_date)?.millisecond(0);
+            emit('pick', result, true);
+        };
+        const setSelectionRange = (start, end) => {
+            emit('select-range', start, end);
+            selectionRange.set([start, end]);
+        };
         const changeSelectionRange = (step) => {
-            const list = [0, 3].concat(showSeconds.get() ? [6] : []);
-            const mapping = ['hours', 'minutes'].concat(showSeconds.get() ? ['seconds'] : []);
+            const actualFormat = props.format || '';
+            const hourIndex = actualFormat.indexOf('HH');
+            const minuteIndex = actualFormat.indexOf('mm');
+            const secondIndex = actualFormat.indexOf('ss');
+            const list = [];
+            const mapping = [];
+            if (hourIndex !== -1) {
+                list.push(hourIndex);
+                mapping.push('hours');
+            }
+            if (minuteIndex !== -1) {
+                list.push(minuteIndex);
+                mapping.push('minutes');
+            }
+            if (secondIndex !== -1 && showSeconds.get()) {
+                list.push(secondIndex);
+                mapping.push('seconds');
+            }
             const index = list.indexOf(selectionRange.get()[0]);
             const next = (index + step + list.length) % list.length;
             timePickerOptions['start_emitSelectRange'](mapping[next]);
         };
         const handleKeydown = (event) => {
-            const code = event.code;
+            const code = getEventCode(event);
             const { left, right, up, down } = EVENT_CODE;
             if ([left, right].includes(code)) {
                 const step = code === left ? -1 : 1;
@@ -93,7 +118,7 @@ export class PanelTimePick extends TypeFragment {
                 return;
             }
         };
-        const { timePickerOptions, getAvailableTime } = useTimePanel({
+        const { timePickerOptions, onSetOption, getAvailableTime } = useTimePanel({
             getAvailableHours,
             getAvailableMinutes,
             getAvailableSeconds,
@@ -106,20 +131,80 @@ export class PanelTimePick extends TypeFragment {
                 return null;
             return dayjs(value, props.format).locale(lang.get());
         };
-        const formatToString = (value) => {
-            if (!value)
-                return null;
-            return value.format(props.format);
-        };
         const getDefaultValue = () => {
+            // 不要  || ''   这是 Invalid Date
             return dayjs(defaultValue).locale(lang.get());
         };
         emit('set-picker-option', ['isValidValue', isValidValue]);
-        emit('set-picker-option', ['formatToString', formatToString]);
         emit('set-picker-option', ['parseUserInput', parseUserInput]);
         emit('set-picker-option', ['handleKeydownInput', handleKeydown]);
-        emit('set-picker-option', ['getRangeAvailableTime', getRangeAvailableTime]);
         emit('set-picker-option', ['getDefaultValue', getDefaultValue]);
+        emit('set-picker-option', ['getRangeAvailableTime', getRangeAvailableTime]);
+        emit('set-picker-option', ['handleCancel', handleCancel]);
+        // Build UI structure
+        const spinner = new BasicTimeSpinner({
+            ref: 'spinner',
+            role: props.datetimeRole || 'start',
+            visible: props.visible,
+            arrowControl: arrowControl,
+            showSeconds: showSeconds.get(),
+            amPmMode: amPmMode.get(),
+            // 单一时间面板：parsedValue 恒为单个 Dayjs（不会是数组），从公共 context 取实时值
+            spinnerDate: commonPicker.parsedValue,
+            disabledHours: disabledHours,
+            disabledMinutes: disabledMinutes,
+            disabledSeconds: disabledSeconds,
+            onChange: handleChange,
+            onSetOption: onSetOption,
+            onSelectRange: setSelectionRange,
+        });
+        // actualVisible 置 true 时 transitionName 由动画名变空会重渲染面板，可能把已设好的
+        // scrollTop 再次复位为 0；这里在重渲染完成后再定位一次作为兜底。
+        watch(() => unref(props.actualVisible) || unref(props.visible), (visible) => {
+            if (!visible)
+                return;
+            nextTick(() => rAF(() => {
+                spinner.scrollToCurrent?.();
+            }));
+        });
+        this.addChildren(new Transition({
+            name: transitionName.get(),
+            // 浮层 enter 完成后重新定位滚动条：打开瞬间设好的 scrollTop 会在过渡/重渲染后
+            // 被复位为 0，悬浮（adjustCurrentSpinner）才跳到当前值。after-enter 是稳定时机。
+            onAfterEnter: () => {
+                spinner.scrollToCurrent?.();
+            },
+            slot: new Div({
+                vIf: computed(() => unref(props.actualVisible) || unref(props.visible)),
+                class: ns.b('panel'),
+                slot: [
+                    // Content section with TimeSpinner
+                    new Div({
+                        class: computed(() => [
+                            ns.be('panel', 'content'),
+                            { 'has-seconds': showSeconds.get() }
+                        ]),
+                        slot: spinner,
+                    }),
+                    // Footer section with buttons
+                    new Div({
+                        class: ns.be('panel', 'footer'),
+                        slot: [
+                            new Button({
+                                class: [ns.be('panel', 'btn'), 'cancel'],
+                                onClick: handleCancel,
+                                slot: t('el.datepicker.cancel'),
+                            }),
+                            new Button({
+                                class: [ns.be('panel', 'btn'), 'confirm'],
+                                onClick: () => handleConfirm(),
+                                slot: t('el.datepicker.confirm'),
+                            }),
+                        ],
+                    }),
+                ],
+            })
+        }));
     }
 }
 //# sourceMappingURL=panel-time-pick.class.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"panel-time-pick.class.js","sourceRoot":"","sources":["../../../../../src/components/form/td-time-picker/time-picker-com/panel-time-pick.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAqB,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9E,OAAO,KAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AACrD,iDAAiD;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,kEAAkE;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,OAAO,EACL,4BAA4B;AAC5B,eAAe;EAChB,MAAM,gCAAgC,CAAC;AAExC,MAAM,OAAO,aAAc,SAAQ,YAAY;IAI7C,YAAY,SAA+B,EAAE;QAC3C,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC;QAEjC,0CAA0C;QAC1C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CACf,CAAC;IACtB,CAAC;IAEQ,KAAK;QACZ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,6DAA6D;QAErF,aAAa;QACb,MAAM,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAQ,CAAC;QACnD,MAAM;QACJ,gBAAgB;QAChB,aAAa,EACb,eAAe,EACf,eAAe,EACf,YAAY,GACb,GAAG,UAAU,CAAC,KAAK,CAAC;QACrB,MAAM,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,GACnE,4BAA4B,CAC1B,aAAa,EACb,eAAe,EACf,eAAe,CAChB,CAAC;QAEJ,mCAAmC;QACnC,MAAM,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,CAAC;QAC7B,OAAO;QACP,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QACtC,uCAAuC;QACvC,WAAW;QACX,0CAA0C;QAC1C,4CAA4C;QAC5C,4CAA4C;QAC5C,YAAY;QACZ,MAAM;QACN,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE;;YAChC,OAAO,MAAA,KAAK,CAAC,MAAM,0CAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACtC,CAAC,CAAC,CAAC;QACH,oCAAoC;QACpC,iDAAiD;QACjD,iDAAiD;QACjD,eAAe;QACf,MAAM;QACN,SAAS;QACT,MAAM,YAAY,GAAG,CAAC,KAAY,EAAE,EAAE;YACpC,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;YACnD,MAAM,MAAM,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAC;YACjD,OAAO,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACnC,CAAC,CAAC;QACF,+BAA+B;QAC/B,yCAAyC;QACzC,KAAK;QACL,8DAA8D;QAC9D,uBAAuB;QACvB,8CAA8C;QAC9C,KAAK;QACL,2CAA2C;QAC3C,kFAAkF;QAClF,0BAA0B;QAC1B,cAAc;QACd,MAAM;QACN,gEAAgE;QAChE,gCAAgC;QAChC,KAAK;QAEL,8DAA8D;QAC9D,sCAAsC;QACtC,sCAAsC;QACtC,KAAK;QAEL,MAAM,oBAAoB,GAAG,CAAC,IAAY,EAAE,EAAE;YAC5C,MAAM,IAAI,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACzD,MAAM,OAAO,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,MAAM,CACzC,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CACrC,CAAC;YACF,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YACpD,MAAM,IAAI,GAAG,CAAC,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;YACxD,iBAAiB,CAAC,uBAAuB,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5D,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC7C,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;YAExB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC;YAE7C,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;gBACjC,MAAM,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACpC,oBAAoB,CAAC,IAAI,CAAC,CAAC;gBAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YAED,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC9B,MAAM,IAAI,GAAG,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAClC,iBAAiB,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC;gBAC5C,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,GAAG,YAAY,CAAC;YAC3D,iBAAiB;YACjB,mBAAmB;YACnB,mBAAmB;SACpB,CAAC,CAAC;QAEH,MAAM,qBAAqB,GAAG,CAAC,IAAW,EAAE,EAAE;YAC5C,OAAO,gBAAgB,CAAC,IAAI,EAAE,KAAK,CAAC,YAAY,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;QAChE,CAAC,CAAC;QAEF,MAAM,cAAc,GAAG,CAAC,KAAY,EAAE,EAAE;YACtC,IAAI,CAAC,KAAK;gBAAE,OAAO,IAAI,CAAC;YACxB,OAAO,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QACvD,CAAC,CAAC;QAEF,MAAM,cAAc,GAAG,CAAC,KAAY,EAAE,EAAE;YACtC,IAAI,CAAC,KAAK;gBAAE,OAAO,IAAI,CAAC;YACxB,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACpC,CAAC,CAAC;QAEF,MAAM,eAAe,GAAG,GAAG,EAAE;YAC3B,OAAO,KAAK,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QAChD,CAAC,CAAC;QAEF,IAAI,CAAC,mBAAmB,EAAE,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC,CAAC;QAC1D,IAAI,CAAC,mBAAmB,EAAE,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC,CAAC;QAC9D,IAAI,CAAC,mBAAmB,EAAE,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC,CAAC;QAC9D,IAAI,CAAC,mBAAmB,EAAE,CAAC,oBAAoB,EAAE,aAAa,CAAC,CAAC,CAAC;QACjE,IAAI,CAAC,mBAAmB,EAAE,CAAC,uBAAuB,EAAE,qBAAqB,CAAC,CAAC,CAAC;QAC5E,IAAI,CAAC,mBAAmB,EAAE,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC,CAAC;IAClE,CAAC;CACF"}
+{"version":3,"file":"panel-time-pick.class.js","sourceRoot":"","sources":["../../../../../src/components/form/td-time-picker/time-picker-com/panel-time-pick.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAiB,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,qBAAqB,CAAC;AACrH,OAAO,KAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAY,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,yBAAyB,EAAE,gCAAgC,EAAE,MAAM,cAAc,CAAC;AAE3F,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAE7D,OAAO,EAAE,4BAA4B,EACnC,WAAW,GACZ,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,MAAM,OAAO,aAAc,SAAQ,QAA8C;IAE/E,YAAY,SAA+C,EAAE;QAC3D,KAAK,CAAC,MAAM,CAAC,CAAC;IAChB,CAAC;IAEQ,KAAK;QACZ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAEvB,aAAa;QACb,MAAM,UAAU,GAAG,MAAM,CAAC,yBAAyB,CAAE,CAAC;QACtD,qDAAqD;QACrD,iEAAiE;QACjE,2CAA2C;QAC3C,MAAM,YAAY,GAAG,MAAM,CAAC,gCAAgC,CAAwB,CAAC;QACrF,MAAM,EACJ,YAAY,EACZ,aAAa,EACb,eAAe,EACf,eAAe,EACf,YAAY,GACb,GAAG,UAAU,CAAC,KAAK,CAAC;QACrB,iDAAiD;QACjD,MAAM,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,GACnE,4BAA4B,CAC1B,aAAc,EACd,eAAgB,EAChB,eAAgB,CACjB,CAAC;QAEJ,MAAM,EAAE,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC;QAChC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,CAAC;QAEhC,OAAO;QACP,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QACtC,MAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,EAAE;YAClC,UAAU,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC;YAC1D,YAAY,EAAE,QAAQ,CAAC,GAAG,EAAE,CAC1B,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,WAAW,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAC3E;SACF,CAAC,CAAC;QAEH,WAAW;QACX,MAAM,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE;YACnC,OAAO,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;gBAC5C,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,GAAG,EAAE,cAAc;gBACrC,CAAC,CAAC,EAAE,CAAC;QACT,CAAC,CAAC,CAAC;QACH,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE;YAChC,OAAO,KAAK,CAAC,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACtC,CAAC,CAAC,CAAC;QACH,MAAM,QAAQ,GAAG,QAAQ,CAAC,GAAG,EAAE;YAC7B,IAAI,KAAK,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,CAAC;gBAAE,OAAO,GAAG,CAAC;YAC5C,IAAI,KAAK,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,CAAC;gBAAE,OAAO,GAAG,CAAC;YAC5C,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC,CAAC;QAEH,SAAS;QACT,MAAM,YAAY,GAAG,CAAC,KAAY,EAAE,EAAE;YACpC,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;YACnD,MAAM,MAAM,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAC;YACjD,OAAO,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACnC,CAAC,CAAC;QAEF,MAAM,YAAY,GAAG,GAAG,EAAE;YACxB,MAAM,GAAG,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC;YAC3B,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;YACzB,QAAQ,CAAC,GAAG,EAAE;gBACZ,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YACpB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,CAAC,OAAO,GAAG,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,EAAE;YACvD,IAAI,KAAK;gBAAE,OAAO;YAClB,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;QACzD,CAAC,CAAC;QAEF,MAAM,YAAY,GAAG,CAAC,KAAY,EAAE,EAAE;YACpC,6EAA6E;YAC7E,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC;gBAC1B,OAAO;YACT,CAAC;YACD,MAAM,MAAM,GAAG,qBAAqB,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;YAC5D,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;QAC7B,CAAC,CAAC;QAEF,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,EAAE;YACvD,IAAI,CAAC,cAAc,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;YACjC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC;QACnC,CAAC,CAAC;QAEF,MAAM,oBAAoB,GAAG,CAAC,IAAY,EAAE,EAAE;YAC5C,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,IAAI,EAAE,CAAC;YACxC,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAC7C,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAC/C,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAC/C,MAAM,IAAI,GAAa,EAAE,CAAC;YAC1B,MAAM,OAAO,GAAa,EAAE,CAAC;YAC7B,IAAI,SAAS,KAAK,CAAC,CAAC,EAAE,CAAC;gBACrB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;gBACrB,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACxB,CAAC;YACD,IAAI,WAAW,KAAK,CAAC,CAAC,EAAE,CAAC;gBACvB,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;gBACvB,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAC1B,CAAC;YACD,IAAI,WAAW,KAAK,CAAC,CAAC,IAAI,WAAW,CAAC,GAAG,EAAE,EAAE,CAAC;gBAC5C,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;gBACvB,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAC1B,CAAC;YAED,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YACpD,MAAM,IAAI,GAAG,CAAC,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;YACxD,iBAAiB,CAAC,uBAAuB,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5D,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC7C,MAAM,IAAI,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;YAEjC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC;YAE7C,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;gBACjC,MAAM,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACpC,oBAAoB,CAAC,IAAI,CAAC,CAAC;gBAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YAED,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC9B,MAAM,IAAI,GAAG,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAClC,iBAAiB,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC;gBAC5C,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,EAAE,iBAAiB,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,YAAY,CAAC;YACxE,iBAAiB;YACjB,mBAAmB;YACnB,mBAAmB;SACpB,CAAC,CAAC;QAEH,MAAM,qBAAqB,GAAG,CAAC,IAAW,EAAE,EAAE;YAC5C,OAAO,gBAAgB,CAAC,IAAI,EAAE,KAAK,CAAC,YAAY,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;QAChE,CAAC,CAAC;QAEF,MAAM,cAAc,GAAG,CAAC,KAAY,EAAE,EAAE;YACtC,IAAI,CAAC,KAAK;gBAAE,OAAO,IAAI,CAAC;YACxB,OAAO,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QACvD,CAAC,CAAC;QAEF,MAAM,eAAe,GAAG,GAAG,EAAE;YAC3B,8BAA8B;YAC9B,OAAO,KAAK,CAAC,YAA+B,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QACnE,CAAC,CAAC;QAEF,IAAI,CAAC,mBAAmB,EAAE,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC,CAAC;QAC1D,IAAI,CAAC,mBAAmB,EAAE,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC,CAAC;QAC9D,IAAI,CAAC,mBAAmB,EAAE,CAAC,oBAAoB,EAAE,aAAa,CAAC,CAAC,CAAC;QACjE,IAAI,CAAC,mBAAmB,EAAE,CAAC,iBAAiB,EAAE,eAAe,CAAC,CAAC,CAAC;QAChE,IAAI,CAAC,mBAAmB,EAAE,CAAC,uBAAuB,EAAE,qBAAqB,CAAC,CAAC,CAAC;QAC5E,IAAI,CAAC,mBAAmB,EAAE,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC,CAAC;QAE1D,qBAAqB;QACrB,MAAM,OAAO,GAAG,IAAI,gBAAgB,CAAC;YACnC,GAAG,EAAE,SAAS;YACd,IAAI,EAAE,KAAK,CAAC,YAAY,IAAI,OAAO;YACnC,OAAO,EAAE,KAAK,CAAC,OAAO;YACtB,YAAY,EAAE,YAAY;YAC1B,WAAW,EAAE,WAAW,CAAC,GAAG,EAAE;YAC9B,QAAQ,EAAE,QAAQ,CAAC,GAAG,EAAE;YACxB,wDAAwD;YACxD,WAAW,EAAE,YAAY,CAAC,WAAyC;YACnE,aAAa,EAAE,aAAa;YAC5B,eAAe,EAAE,eAAe;YAChC,eAAe,EAAE,eAAe;YAChC,QAAQ,EAAE,YAAY;YACtB,WAAW,EAAE,WAAW;YACxB,aAAa,EAAE,iBAAiB;SACjC,CAAC,CAAC;QACH,6DAA6D;QAC7D,wCAAwC;QACxC,KAAK,CACH,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EACxD,CAAC,OAAO,EAAE,EAAE;YACV,IAAI,CAAC,OAAO;gBAAE,OAAO;YACrB,QAAQ,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,GAAG,EAAE;gBACrB,OAAuD,CAAC,eAAe,EAAE,EAAE,CAAC;YAC/E,CAAC,CAAC,CAAC,CAAC;QACN,CAAC,CACF,CAAC;QACF,IAAI,CAAC,WAAW,CACd,IAAI,UAAU,CAAC;YACb,IAAI,EAAE,cAAc,CAAC,GAAG,EAAE;YAC1B,kDAAkD;YAClD,2DAA2D;YAC3D,YAAY,EAAE,GAAG,EAAE;gBAChB,OAAuD,CAAC,eAAe,EAAE,EAAE,CAAC;YAC/E,CAAC;YACD,IAAI,EAAE,IAAI,GAAG,CAAC;gBACZ,GAAG,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;gBACvE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;gBACpB,IAAI,EAAE;oBACJ,mCAAmC;oBACnC,IAAI,GAAG,CAAC;wBACN,KAAK,EAAE,QAAQ,CAAC,GAAG,EAAE,CAAC;4BACpB,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC;4BACzB,EAAE,aAAa,EAAE,WAAW,CAAC,GAAG,EAAE,EAAE;yBACrC,CAAC;wBACF,IAAI,EAAE,OAAO;qBACd,CAAC;oBACF,8BAA8B;oBAC9B,IAAI,GAAG,CAAC;wBACN,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;wBAC/B,IAAI,EAAE;4BACJ,IAAI,MAAM,CAAC;gCACT,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,QAAQ,CAAC;gCACxC,OAAO,EAAE,YAAY;gCACrB,IAAI,EAAE,CAAC,CAAC,sBAAsB,CAAC;6BAChC,CAAC;4BACF,IAAI,MAAM,CAAC;gCACT,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;gCACzC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE;gCAC9B,IAAI,EAAE,CAAC,CAAC,uBAAuB,CAAC;6BACjC,CAAC;yBACH;qBACF,CAAC;iBACH;aACF,CAAC;SACH,CAAC,CAEH,CAAC;IACJ,CAAC;CACF"}

package/dist/components/form/td-time-picker/time-picker-com/panel-time-range.class.d.ts

@@ -1 +1,7 @@
+import { FragmentProps, Fragment } from '@type-dom/framework';
+import { PanelTimeRangeProps } from '../props/panel-time-range';
+export declare class PanelTimeRange extends Fragment<PanelTimeRangeProps & FragmentProps> {
+    constructor(params?: PanelTimeRangeProps & FragmentProps);
+    setup(): void;
+}
 //# sourceMappingURL=panel-time-range.class.d.ts.map

package/dist/components/form/td-time-picker/time-picker-com/panel-time-range.class.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel-time-range.class.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/td-time-picker/time-picker-com/panel-time-range.class.ts"],"names":[],"mappings":""}
+{"version":3,"file":"panel-time-range.class.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/td-time-picker/time-picker-com/panel-time-range.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,aAAa,EACb,QAAQ,EAIT,MAAM,qBAAqB,CAAC;AAW7B,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAQhE,qBAAa,cAAe,SAAQ,QAAQ,CAAC,mBAAmB,GAAG,aAAa,CAAC;gBAEnE,MAAM,GAAE,mBAAmB,GAAG,aAAkB;IAInD,KAAK;CAmYf"}

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

@@ -1,2 +1,335 @@
-"use strict";
+import { inject, Fragment, emit, Div, nextTick, unref, watch, } from '@type-dom/framework';
+import { computed, signal } from '@type-dom/signals';
+import dayjs from 'dayjs';
+import { union } from 'lodash-es';
+import { rAF } from '@type-dom/utils';
+import { EVENT_CODE } from '../../../../constants/aria';
+import { useLocale } from '../../../../hooks/use-locale';
+import { useNamespace } from '../../../../hooks/use-namespace';
+import { PICKER_BASE_INJECTION_KEY, ROOT_COMMON_PICKER_INJECTION_KEY } from '../constants';
+import { useTimePanel } from '../composables/use-time-panel';
+import { buildAvailableTimeSlotGetter, useOldValue, } from '../composables/use-time-picker';
+import { BasicTimeSpinner } from './basic-time-spinner.class';
+import { TdButton } from '../../../basic/td-button/td-button.class';
+export class PanelTimeRange extends Fragment {
+    constructor(params = {}) {
+        super(params);
+    }
+    setup() {
+        const props = this.props;
+        // Namespace
+        const nsTime = useNamespace('time');
+        const nsPicker = useNamespace('picker');
+        // Injections
+        const pickerBase = inject(PICKER_BASE_INJECTION_KEY);
+        // 实时响应式解析值（对应 EP 的 :spinner-date="parsedValue"）。插槽里的 props.parsedValue
+        // 是 .get() 快照，无法随 model 变化更新；若据此派生 startTime/endTime，显示不跟随实际值，
+        // 且快照在面板重渲染时机刷新会触发 spinner 的 watch(spinnerDate)→adjustSpinners 抢回滚动位置，
+        // 表现为“无法滚动 / 无法选中”。故改从公共 picker context 取（同 panel-time-pick）。
+        const commonPicker = inject(ROOT_COMMON_PICKER_INJECTION_KEY);
+        const { arrowControl, disabledHours, disabledMinutes, disabledSeconds, defaultValue, } = pickerBase.props;
+        const { t, lang } = useLocale();
+        // Helper function
+        const makeSelectRange = (start, end) => {
+            const result = [];
+            for (let i = start; i <= end; i++) {
+                result.push(i);
+            }
+            return result;
+        };
+        // Computed - startTime and endTime
+        // 用注入的 commonPicker.parsedValue（响应式 signal）取实时值；插槽里的 props.parsedValue
+        // 是 .get() 快照，无法随 model 变化更新。修复“显示不对应实际值 / 无法滚动选中”。
+        const startTime = computed(() => unref(commonPicker.parsedValue)?.[0]);
+        const endTime = computed(() => unref(commonPicker.parsedValue)?.[1]);
+        // Old value management
+        const oldValue = useOldValue(props, {
+            modelValue: computed(() => pickerBase.props.vModel?.get()),
+            valueOnClear: computed(() => pickerBase?.emptyValues
+                ? pickerBase.emptyValues.valueOnClear.get()
+                : null),
+        });
+        // Computed - showSeconds and amPmMode
+        const showSeconds = computed(() => {
+            return props.format?.includes('ss');
+        });
+        const amPmMode = computed(() => {
+            if (props.format?.includes('A'))
+                return 'A';
+            if (props.format?.includes('a'))
+                return 'a';
+            return '';
+        });
+        // Computed - container classes
+        const startContainerKls = computed(() => [
+            nsTime.be('range-picker', 'body'),
+            nsTime.be('panel', 'content'),
+            nsTime.is('arrow', arrowControl),
+            showSeconds.get() ? 'has-seconds' : '',
+        ]);
+        const endContainerKls = computed(() => [
+            nsTime.be('range-picker', 'body'),
+            nsTime.be('panel', 'content'),
+            nsTime.is('arrow', arrowControl),
+            showSeconds.get() ? 'has-seconds' : '',
+        ]);
+        // Disabled time functions
+        const disabledHours_ = (role, compare) => {
+            const defaultDisable = disabledHours ? disabledHours(role) : [];
+            const isStart = role === 'start';
+            const compareDate = (compare || (isStart ? endTime.get() : startTime.get()));
+            const compareHour = compareDate.hour();
+            const nextDisable = isStart
+                ? makeSelectRange(compareHour + 1, 23)
+                : makeSelectRange(0, compareHour - 1);
+            return union(defaultDisable, nextDisable);
+        };
+        const disabledMinutes_ = (hour, role, compare) => {
+            const defaultDisable = disabledMinutes
+                ? disabledMinutes(hour, role)
+                : [];
+            const isStart = role === 'start';
+            const compareDate = (compare || (isStart ? endTime.get() : startTime.get()));
+            const compareHour = compareDate.hour();
+            if (hour !== compareHour) {
+                return defaultDisable;
+            }
+            const compareMinute = compareDate.minute();
+            const nextDisable = isStart
+                ? makeSelectRange(compareMinute + 1, 59)
+                : makeSelectRange(0, compareMinute - 1);
+            return union(defaultDisable, nextDisable);
+        };
+        const disabledSeconds_ = (hour, minute, role, compare) => {
+            const defaultDisable = disabledSeconds
+                ? disabledSeconds(hour, minute, role)
+                : [];
+            const isStart = role === 'start';
+            const compareDate = (compare || (isStart ? endTime.get() : startTime.get()));
+            const compareHour = compareDate.hour();
+            const compareMinute = compareDate.minute();
+            if (hour !== compareHour || minute !== compareMinute) {
+                return defaultDisable;
+            }
+            const compareSecond = compareDate.second();
+            const nextDisable = isStart
+                ? makeSelectRange(compareSecond + 1, 59)
+                : makeSelectRange(0, compareSecond - 1);
+            return union(defaultDisable, nextDisable);
+        };
+        const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } = buildAvailableTimeSlotGetter(disabledHours_, disabledMinutes_, disabledSeconds_);
+        const { timePickerOptions, getAvailableTime, onSetOption } = useTimePanel({
+            getAvailableHours,
+            getAvailableMinutes,
+            getAvailableSeconds,
+        });
+        // Selection range
+        const selectionRange = signal([0, 2]);
+        const offset = computed(() => (showSeconds.get() ? 11 : 8));
+        // Methods
+        const handleCancel = () => {
+            const old = oldValue.get();
+            emit(this, 'pick', old, false);
+            nextTick(() => {
+                oldValue.set(old);
+            });
+        };
+        const handleConfirm = (visible = false) => {
+            emit(this, 'pick', [startTime.get(), endTime.get()], visible);
+        };
+        const handleMinChange = (date) => {
+            handleChange(date.millisecond(0), endTime.get());
+        };
+        const handleMaxChange = (date) => {
+            handleChange(startTime.get(), date.millisecond(0));
+        };
+        const handleChange = (start, end) => {
+            if (!unref(props.visible)) {
+                return;
+            }
+            emit(this, 'pick', [start, end], true);
+        };
+        const btnConfirmDisabled = computed(() => {
+            return startTime.get() > endTime.get();
+        });
+        const setMinSelectionRange = (start, end) => {
+            emit(this, 'select-range', start, end, 'min');
+            selectionRange.set([start, end]);
+        };
+        const setMaxSelectionRange = (start, end) => {
+            emit(this, 'select-range', start, end, 'max');
+            const _offset = offset.get();
+            selectionRange.set([start + _offset, end + _offset]);
+        };
+        const changeSelectionRange = (step) => {
+            const list = showSeconds.get()
+                ? [0, 3, 6, 11, 14, 17]
+                : [0, 3, 8, 11];
+            const mapping = ['hours', 'minutes'].concat(showSeconds.get() ? ['seconds'] : []);
+            const index = list.indexOf(selectionRange.get()[0]);
+            const next = (index + step + list.length) % list.length;
+            const half = list.length / 2;
+            if (next < half) {
+                timePickerOptions['start_emitSelectRange'](mapping[next]);
+            }
+            else {
+                timePickerOptions['end_emitSelectRange'](mapping[next - half]);
+            }
+        };
+        const handleKeydown = (event) => {
+            const code = event.code;
+            const { left, right, up, down } = EVENT_CODE;
+            if ([left, right].includes(code)) {
+                const step = code === left ? -1 : 1;
+                changeSelectionRange(step);
+                event.preventDefault();
+                return;
+            }
+            if ([up, down].includes(code)) {
+                const step = code === up ? -1 : 1;
+                const role = selectionRange.get()[0] < offset.get() ? 'start' : 'end';
+                timePickerOptions[`${role}_scrollDown`](step);
+                event.preventDefault();
+                return;
+            }
+        };
+        const isValidValue = (_date) => {
+            const parsedDate = _date.map((_) => dayjs(_).locale(lang.get()));
+            const result = getRangeAvailableTime(parsedDate);
+            return (parsedDate[0].isSame(result[0]) && parsedDate[1].isSame(result[1]));
+        };
+        const getRangeAvailableTime = ([start, end]) => {
+            return [
+                getAvailableTime(start, 'start', true, end),
+                getAvailableTime(end, 'end', false, start),
+            ];
+        };
+        const parseUserInput = (days) => {
+            if (!days)
+                return null;
+            if (Array.isArray(days)) {
+                return days.map((d) => dayjs(d, props.format).locale(lang.get()));
+            }
+            return dayjs(days, props.format).locale(lang.get());
+        };
+        const getDefaultValue = () => {
+            if (Array.isArray(defaultValue)) {
+                return defaultValue.map((d) => dayjs(d).locale(lang.get()));
+            }
+            const defaultDay = dayjs(defaultValue).locale(lang.get());
+            return [defaultDay, defaultDay.add(60, 'm')];
+        };
+        // Emit options to parent picker
+        emit(this, 'set-picker-option', ['parseUserInput', parseUserInput]);
+        emit(this, 'set-picker-option', ['isValidValue', isValidValue]);
+        emit(this, 'set-picker-option', ['handleKeydownInput', handleKeydown]);
+        emit(this, 'set-picker-option', ['getDefaultValue', getDefaultValue]);
+        emit(this, 'set-picker-option', ['getRangeAvailableTime', getRangeAvailableTime]);
+        emit(this, 'set-picker-option', ['handleCancel', handleCancel]);
+        // Build UI
+        // 传响应式 computed（startTime/endTime），而非 startTime.get() / endTime.get() 快照：
+        // 否则 spinner 的 timePartials / arrowControlTimeList 在构造后冻结，点击箭头或滚动后
+        // 底层值已变化但面板显示不刷新（表现为“箭头无效”“选项不对应实际值”）。
+        const startSpinner = new BasicTimeSpinner({
+            role: 'start',
+            visible: props.visible,
+            showSeconds: showSeconds.get(),
+            amPmMode: amPmMode.get(),
+            arrowControl: arrowControl,
+            spinnerDate: startTime,
+            disabledHours: disabledHours_,
+            disabledMinutes: disabledMinutes_,
+            disabledSeconds: disabledSeconds_,
+            onChange: handleMinChange,
+            onSetOption,
+            onSelectRange: setMinSelectionRange,
+        });
+        const endSpinner = new BasicTimeSpinner({
+            role: 'end',
+            visible: props.visible,
+            showSeconds: showSeconds.get(),
+            amPmMode: amPmMode.get(),
+            arrowControl: arrowControl,
+            spinnerDate: endTime,
+            disabledHours: disabledHours_,
+            disabledMinutes: disabledMinutes_,
+            disabledSeconds: disabledSeconds_,
+            onChange: handleMaxChange,
+            onSetOption,
+            onSelectRange: setMaxSelectionRange,
+        });
+        // 浮层打开（actualVisible/visible 变 true）时重新定位滚动条：本框架下 TdTooltip content 为
+        // persistent，spinner 在加载即挂载，加载时布局未完成 scrollTop 会被钳为 0；若不在此重定位，
+        // 打开后列表会停在 0 而非当前值。对应 EP：spinner 在浮层打开时才挂载、onMounted 即定位。
+        watch(() => unref(props.actualVisible) || unref(props.visible), (visible) => {
+            if (!visible)
+                return;
+            nextTick(() => rAF(() => {
+                startSpinner.scrollToCurrent?.();
+                endSpinner.scrollToCurrent?.();
+            }));
+        });
+        this.addChild(new Div({
+            // 注意：props.actualVisible / props.visible 都是 signal，必须 unref 取布尔值。
+            // 直接写 props.actualVisible（signal 对象）会恒为 truthy，导致面板在加载时就渲染、
+            // spinner 立即挂载并在 onMounted 里 emitSelectRange('hours') → 聚焦输入框（叠加
+            // automaticDropdown 还会打开浮层）。与 PanelTimePick 保持一致：仅在浮层可见时渲染。
+            vIf: computed(() => unref(props.actualVisible) || unref(props.visible)),
+            class: [nsTime.b('range-picker'), nsPicker.b('panel')],
+            slot: [
+                // Content area with two time spinners
+                new Div({
+                    class: nsTime.be('range-picker', 'content'),
+                    slot: [
+                        // Start time cell
+                        new Div({
+                            class: nsTime.be('range-picker', 'cell'),
+                            slot: [
+                                new Div({
+                                    class: nsTime.be('range-picker', 'header'),
+                                    slot: t('el.datepicker.startTime'),
+                                }),
+                                new Div({
+                                    class: startContainerKls,
+                                    slot: startSpinner,
+                                }),
+                            ],
+                        }),
+                        // End time cell
+                        new Div({
+                            class: nsTime.be('range-picker', 'cell'),
+                            slot: [
+                                new Div({
+                                    class: nsTime.be('range-picker', 'header'),
+                                    slot: t('el.datepicker.endTime'),
+                                }),
+                                new Div({
+                                    class: endContainerKls,
+                                    slot: endSpinner,
+                                }),
+                            ],
+                        }),
+                    ],
+                }),
+                // Footer with cancel and confirm buttons
+                new Div({
+                    class: nsTime.be('panel', 'footer'),
+                    slot: [
+                        new TdButton({
+                            class: [nsTime.be('panel', 'btn'), 'cancel'],
+                            onClick: handleCancel,
+                            slot: t('el.datepicker.cancel'),
+                        }),
+                        new TdButton({
+                            class: [nsTime.be('panel', 'btn'), 'confirm'],
+                            disabled: btnConfirmDisabled,
+                            onClick: () => handleConfirm(),
+                            slot: t('el.datepicker.confirm'),
+                        }),
+                    ],
+                }),
+            ],
+        }));
+    }
+}
 //# sourceMappingURL=panel-time-range.class.js.map