@type-dom/ui 0.6.0 → 0.9.0

package/dist/components/form/td-time-picker/common/picker.class.js

@@ -1,93 +1,115 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { TypeFragment, defineExpose, inject, nextTick, 
-// useAttrs,
-onClickOutside, unrefElement, provide, onBeforeUnmount, } from '@type-dom/framework';
-import { debugWarn, isArray, isEqual } from '@type-dom/utils';
-import { computed, signal, unref, watch } from '@type-dom/signals';
-import { useLocale } from '../../../../hooks/use-locale';
+import { Fragment, inject, nextTick, provide, onBeforeUnmount, unref, watch, defaultProps, Span, } from '@type-dom/framework';
+import { computed, signal } from '@type-dom/signals';
+import { onClickOutside, unrefElement } from '@type-dom/use';
+import { getEventCode, isArray, NOOP } from '@type-dom/utils';
 import { useNamespace } from '../../../../hooks/use-namespace';
 import { useFocusController } from '../../../../hooks/use-focus-controller';
-import { useEmptyValues, } from '../../../../hooks/use-empty-values';
+import { useAttrs } from '../../../../hooks/use-attrs';
+import { 
+// EmptyValuesContext,
+useEmptyValues, } from '../../../../hooks/use-empty-values';
+import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '../../../../constants/event';
 import { EVENT_CODE } from '../../../../constants/aria';
 import { TdTooltip } from '../../../feedback/td-tooltip/td-tooltip.class';
 import { TdInput } from '../../td-input/td-input.class';
+import { TdIcon } from '../../../basic/td-icon/td-icon.class';
 import { useFormItem } from '../../td-form/hooks/use-form-item';
-import { dayOrDaysToDate, formatter, parseDate, valueEquals } from '../utils';
+import { dayOrDaysToDate, valueEquals } from '../utils';
 import { timePickerDefaultProps, } from './props';
-// import { TdPopper } from '../../../feedback/td-popper/td-popper.class';
-// import { ElCalendarSvg, ElClockSvg } from '@type-dom/svgs';
-import { useFormSize } from '../../td-form/hooks/use-form-common-props';
+import { useFormSize, useFormDisabled } from '../../td-form/hooks/use-form-common-props';
 import { PickerRangeTrigger } from './picker-range-trigger.class';
-export class Picker extends TypeFragment {
+import { isFunction } from 'lodash-es';
+import { useCommonPicker } from '../composables/use-common-picker';
+import { PICKER_BASE_INJECTION_KEY, PICKER_POPPER_OPTIONS_INJECTION_KEY, ROOT_COMMON_PICKER_INJECTION_KEY } from '../constants';
+import { ElCalendarSvg, ElClockSvg } from '@type-dom/svgs';
+export class Picker extends Fragment {
+    focus;
+    blur;
+    handleOpen;
+    handleClose;
+    onPick;
     constructor(params = {}) {
-        super();
-        this.className = 'Picker';
-        this.assignProps(timePickerDefaultProps);
-        this.props = this.useParams(params);
+        super(params);
+        defaultProps(this, timePickerDefaultProps);
+        this.addEmits([
+            UPDATE_MODEL_EVENT,
+            CHANGE_EVENT,
+            'focus',
+            'blur',
+            'clear',
+            'calendar-change',
+            'panel-change',
+            'visible-change',
+            'keydown',
+        ]);
     }
     setup() {
         const props = this.props;
         const emit = this.emit;
-        // const attrs = useAttrs();
-        const { lang } = useLocale();
+        const attrs = useAttrs();
         const nsDate = useNamespace('date');
-        // const nsInput = useNamespace('input');
-        // const nsRange = useNamespace('range');
-        const { form, formItem } = useFormItem();
-        const tdPopperOptions = inject('TdPopperOptions', {});
-        const { valueOnClear } = useEmptyValues(props, undefined);
+        const nsInput = useNamespace('input');
+        const nsRange = useNamespace('range');
+        const { formItem } = useFormItem();
+        const tdPopperOptions = inject(PICKER_POPPER_OPTIONS_INJECTION_KEY, {});
+        const emptyValues = useEmptyValues(props, null);
         const refPopper = signal();
         const inputRef = signal();
-        const pickerVisible = signal(false);
-        const pickerActualVisible = signal(false);
-        const valueOnOpen = signal(undefined);
+        const valueOnOpen = signal(null);
         let hasJustTabExitedInput = false;
+        const pickerDisabled = useFormDisabled();
+        // console.warn('picker props is ', props);
+        const commonPicker = useCommonPicker(props, emit);
+        const { parsedValue, pickerActualVisible, userInput, pickerVisible, pickerOptions, valueIsEmpty, emitInput, onPick, onSetPickerOption, onCalendarChange, onPanelChange, } = commonPicker;
         const { isFocused, handleFocus, handleBlur } = useFocusController(inputRef, {
+            disabled: pickerDisabled,
             beforeFocus() {
-                return props.readonly || unref(pickerDisabled.get());
+                return props.readonly;
             },
             afterFocus() {
+                if (!props.automaticDropdown)
+                    return;
                 pickerVisible.set(true);
             },
             beforeBlur(event) {
-                var _a;
                 return (!hasJustTabExitedInput &&
-                    ((_a = refPopper.get()) === null || _a === void 0 ? void 0 : _a.isFocusInsideContent(event)));
+                    refPopper.get()?.isFocusInsideContent?.(event));
             },
             afterBlur() {
-                handleChange();
+                if (isTimePicker.get() && !props.saveOnBlur) {
+                    if (!valueIsEmpty.get()) {
+                        pickerOptions.get().handleCancel?.();
+                    }
+                }
+                else {
+                    handleChange();
+                }
                 pickerVisible.set(false);
                 hasJustTabExitedInput = false;
-                props.validateEvent &&
-                    (formItem === null || formItem === void 0 ? void 0 : formItem.validate('blur').catch((err) => debugWarn(err)));
+                if (props.validateEvent)
+                    formItem?.validate('blur').catch(NOOP);
             },
         });
-        // const rangeInputKls = computed(() => [
-        //   nsDate.b('editor'),
-        //   nsDate.bm('editor', props.type),
-        //   nsInput.e('wrapper'),
-        //   nsDate.is('disabled', pickerDisabled.get()),
-        //   nsDate.is('active', pickerVisible.get()),
-        //   nsRange.b('editor'),
-        //   pickerSize ? nsRange.bm('editor', pickerSize.get()) : '',
-        //   // attrs.class, // todo
-        // ]);
-        // const clearIconKls = computed(() => [
-        //   nsInput.e('icon'),
-        //   nsRange.e('close-icon'),
-        //   !showClose.get() ? nsRange.e('close-icon--hidden') : '',
-        // ]);
-        watch(() => pickerVisible.get(), (val) => {
+        const hovering = signal(false);
+        const rangeInputKls = computed(() => [
+            nsDate.b('editor'),
+            nsDate.bm('editor', props.type),
+            nsInput.e('wrapper'),
+            nsDate.is('disabled', pickerDisabled.get()),
+            nsDate.is('active', pickerVisible.get()),
+            nsRange.b('editor'),
+            pickerSize ? nsRange.bm('editor', pickerSize.get()) : '',
+            attrs.get().class,
+        ]);
+        const clearIconKls = computed(() => [
+            nsInput.e('icon'),
+            nsRange.e('close-icon'),
+            !showClearBtn.get() ? nsRange.em('close-icon', 'hidden') : '',
+        ]);
+        watch(pickerVisible, (val) => {
             if (!val) {
-                userInput.set(undefined);
+                userInput.set(null);
+                props.modelValue = props.vModel?.get();
                 nextTick(() => {
                     emitChange(props.modelValue);
                 });
@@ -103,61 +125,36 @@ export class Picker extends TypeFragment {
         const emitChange = (val, isClear) => {
             // determine user real change only
             if (isClear || !valueEquals(val, valueOnOpen.get())) {
-                emit('change', val);
-                props.validateEvent &&
-                    (formItem === null || formItem === void 0 ? void 0 : formItem.validate('change').catch((err) => debugWarn(err)));
-            }
-        };
-        const emitInput = (input) => {
-            if (!valueEquals(props.modelValue, input)) {
-                let formatted;
-                if (isArray(input)) {
-                    formatted = input.map((item) => formatter(item, props.valueFormat, lang.get()));
-                }
-                else if (input) {
-                    formatted = formatter(input, props.valueFormat, lang.get());
-                }
-                emit('update:modelValue', input ? formatted : input, lang.get());
+                emit(CHANGE_EVENT, val);
+                // Set the value of valueOnOpen when clearing to avoid triggering change events multiple times.
+                isClear && (valueOnOpen.set(val));
+                if (props.validateEvent)
+                    formItem?.validate('change').catch(NOOP);
             }
         };
         const emitKeydown = (e) => {
             emit('keydown', e);
         };
-        // const refInput = computed<HTMLInputElement[]>(() => {
-        //   if (inputRef) {
-        //     return Array.from<HTMLInputElement>(
-        //       inputRef.get()?.dom?.querySelectorAll?.('input')!
-        //     );
-        //   }
-        //   return [];
-        // });
-        // const setSelectionRange = (
-        //   start: number,
-        //   end: number,
-        //   pos?: 'min' | 'max'
-        // ) => {
-        //   const _inputs = refInput.get();
-        //   if (!_inputs.length) return;
-        //   if (!pos || pos === 'min') {
-        //     _inputs[0].setSelectionRange(start, end);
-        //     _inputs[0].focus();
-        //   } else if (pos === 'max') {
-        //     _inputs[1].setSelectionRange(start, end);
-        //     _inputs[1].focus();
-        //   }
-        // };
-        const onPick = (date = '', visible = false) => {
-            pickerVisible.set(visible);
-            let result;
-            if (isArray(date)) {
-                result = date.map((_) => _.toDate());
+        const refInput = computed(() => {
+            if (inputRef.get()) {
+                return Array.from(inputRef.get()?.$el?.querySelectorAll('input'));
             }
-            else {
-                // clear btn emit undefined
-                result = date ? date.toDate() : date;
+            return [];
+        });
+        // Vue: const setSelectionRange = (start, end, pos) => { ... }
+        // TypeDOM: 保留此函数用于未来完整实现 (当前简化版不传递 slot props)
+        const setSelectionRange = (start, end, pos) => {
+            const _inputs = refInput.get();
+            if (!_inputs.length)
+                return;
+            if (!pos || pos === 'min') {
+                _inputs[0].setSelectionRange(start, end);
+                _inputs[0].focus();
+            }
+            else if (pos === 'max') {
+                _inputs[1].setSelectionRange(start, end);
+                _inputs[1].focus();
             }
-            userInput.set(undefined);
-            emitInput(result);
         };
         const onBeforeShow = () => {
             pickerActualVisible.set(true);
@@ -176,55 +173,20 @@ export class Picker extends TypeFragment {
         const handleClose = () => {
             pickerVisible.set(false);
         };
-        const pickerDisabled = computed(() => {
-            return props.disabled || unref(form === null || form === void 0 ? void 0 : form.disabled);
-        });
-        const parsedValue = computed(() => {
-            var _a, _b, _c, _d;
-            let dayOrDays;
-            if (valueIsEmpty.get()) {
-                if (pickerOptions.get().getDefaultValue) {
-                    dayOrDays = (_b = (_a = pickerOptions.get()).getDefaultValue) === null || _b === void 0 ? void 0 : _b.call(_a);
-                }
-            }
-            else {
-                if (isArray(props.modelValue)) {
-                    dayOrDays = props.modelValue.map((d) => parseDate(d, props.valueFormat, lang.get()));
-                }
-                else {
-                    dayOrDays = parseDate(props.modelValue, props.valueFormat, lang.get());
-                }
-            }
-            if (pickerOptions.get().getRangeAvailableTime) {
-                const availableResult = (_d = (_c = pickerOptions
-                    .get()).getRangeAvailableTime) === null || _d === void 0 ? void 0 : _d.call(_c, dayOrDays);
-                if (!isEqual(availableResult, dayOrDays)) {
-                    dayOrDays = availableResult;
-                    // The result is corrected only when model-value exists
-                    if (!valueIsEmpty.get()) {
-                        emitInput(dayOrDaysToDate(dayOrDays));
-                    }
-                }
-            }
-            if (isArray(dayOrDays) && dayOrDays.some((day) => !day)) {
-                dayOrDays = [];
-            }
-            return dayOrDays;
-        });
         const displayValue = computed(() => {
-            var _a, _b;
-            if (!pickerOptions.get().panelReady)
-                return '';
-            const formattedValue = formatDayjsToString(parsedValue.get());
+            const formattedValue = formatToString(parsedValue.get());
+            // console.warn('displayValue formattedValue is ', formattedValue);
             if (isArray(userInput.get())) {
                 return [
-                    ((_a = userInput.get()) === null || _a === void 0 ? void 0 : _a[0]) || (formattedValue && formattedValue[0]) || '',
-                    ((_b = userInput.get()) === null || _b === void 0 ? void 0 : _b[1]) || (formattedValue && formattedValue[1]) || '',
+                    userInput.get()?.[0] ?? (formattedValue && formattedValue[0]) ?? '',
+                    userInput.get()?.[1] ?? (formattedValue && formattedValue[1]) ?? '',
                 ];
             }
-            else if (userInput.get() !== undefined) {
+            else if (userInput.get() !== null) {
                 return userInput.get();
             }
+            if (isTimePicker.get() && valueIsEmpty.get() && !props.saveOnBlur)
+                return '';
             if (!isTimePicker.get() && valueIsEmpty.get())
                 return '';
             if (!pickerVisible.get() && valueIsEmpty.get())
@@ -238,142 +200,155 @@ export class Picker extends TypeFragment {
             }
             return '';
         });
-        // const isTimeLikePicker = computed(() => props.type?.includes('time'));
-        const isTimePicker = computed(() => { var _a; return (_a = props.type) === null || _a === void 0 ? void 0 : _a.startsWith('time'); });
+        // todo props.type 响应式 ？？？？
+        const isTimeLikePicker = computed(() => props.type?.includes('time'));
+        const isTimePicker = computed(() => props.type?.startsWith('time'));
         const isDatesPicker = computed(() => props.type === 'dates');
         const isMonthsPicker = computed(() => props.type === 'months');
         const isYearsPicker = computed(() => props.type === 'years');
-        // const triggerIcon = computed(
-        //   () =>
-        //     props.prefixIcon ||
-        //     (isTimeLikePicker.get() ? ElClockSvg : ElCalendarSvg)
-        // );
-        const showClose = signal(false);
-        // const onClearIconClick = (event: MouseEvent) => {
-        //   if (props.readonly || pickerDisabled.get()) return;
-        //   if (showClose.get()) {
-        //     event.stopPropagation();
-        //     // When the handleClear Function was provided, emit undefined will be executed inside it
-        //     // There is no need for us to execute emit undefined twice. #14752
-        //     if (pickerOptions.get().handleClear) {
-        //       pickerOptions.get().handleClear?.();
-        //     } else {
-        //       emitInput(valueOnClear.get());
-        //     }
-        //     emitChange(valueOnClear.get(), true);
-        //     showClose.set(false);
-        //     onHide();
-        //   }
-        //   emit('clear');
-        // };
-        const valueIsEmpty = computed(() => {
-            const { modelValue } = props;
-            return (!modelValue ||
-                (isArray(modelValue) && !modelValue.filter(Boolean).length));
-        });
-        const onMouseDownInput = (event) => __awaiter(this, void 0, void 0, function* () {
-            var _a;
+        const triggerIcon = computed(() => props.prefixIcon ||
+            (isTimeLikePicker.get() ? new ElClockSvg() : new ElCalendarSvg()));
+        const showClearBtn = computed(() => props.clearable &&
+            !pickerDisabled.get() &&
+            !props.readonly &&
+            !valueIsEmpty.get() &&
+            (hovering.get() || isFocused.get()));
+        const onClear = (event) => {
+            if (props.readonly || pickerDisabled.get())
+                return;
+            if (showClearBtn.get()) {
+                event?.stopPropagation();
+                // When the handleClear Function was provided, emit null will be executed inside it
+                // There is no need for us to execute emit null twice. #14752
+                if (pickerOptions.get().handleClear) {
+                    pickerOptions.get().handleClear();
+                }
+                else {
+                    emitInput(emptyValues.valueOnClear.get());
+                }
+                emitChange(emptyValues.valueOnClear.get(), true);
+                onHide();
+            }
+            emit('clear');
+        };
+        const onMouseDownInput = async (event) => {
             if (props.readonly || pickerDisabled.get())
                 return;
-            if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.tagName) !== 'INPUT' ||
-                isFocused.get()) {
+            if (event?.target?.tagName !== 'INPUT' ||
+                isFocused.get() ||
+                !props.automaticDropdown) {
                 pickerVisible.set(true);
             }
-        });
+        };
         const onMouseEnter = () => {
             if (props.readonly || pickerDisabled.get())
                 return;
             if (!valueIsEmpty.get() && props.clearable) {
-                showClose.set(true);
+                hovering.set(true);
             }
         };
         const onMouseLeave = () => {
-            showClose.set(false);
+            hovering.set(false);
         };
         const onTouchStartInput = (event) => {
-            var _a;
             if (props.readonly || pickerDisabled.get())
                 return;
-            if (((_a = event === null || event === void 0 ? void 0 : event.touches[0].target) === null || _a === void 0 ? void 0 : _a.tagName) !== 'INPUT' ||
-                isFocused.get()) {
+            if (event?.touches[0].target?.tagName !== 'INPUT' ||
+                isFocused.get() ||
+                !props.automaticDropdown) {
                 pickerVisible.set(true);
             }
         };
         const isRangeInput = computed(() => {
-            var _a;
-            return (_a = props.type) === null || _a === void 0 ? void 0 : _a.includes('range');
+            return props.type?.includes('range');
         });
         const pickerSize = useFormSize();
-        const popperEl = computed(() => { var _a, _b, _c; return (_c = (_b = (_a = unref(refPopper)) === null || _a === void 0 ? void 0 : _a.popperRef) === null || _b === void 0 ? void 0 : _b.get()) === null || _c === void 0 ? void 0 : _c.contentRef; }).get();
+        const popperEl = computed(() => refPopper.get()?.popperRef?.get()?.contentRef?.get());
         const stophandle = onClickOutside(inputRef, (e) => {
             const unrefedPopperEl = unref(popperEl);
             const inputEl = unrefElement(inputRef);
-            if ((unrefedPopperEl &&
-                (e.target === unrefedPopperEl ||
-                    e.composedPath().includes(unrefedPopperEl))) ||
-                e.target === inputEl ||
-                (inputEl && e.composedPath().includes(inputEl)))
+            const composedPath = e.composedPath();
+            // 关键修复：使用 composedPath() 进行判断，因为它更可靠
+            // 检查点击是否在 popper 弹框内
+            if (unrefedPopperEl && composedPath.includes(unrefedPopperEl)) {
+                return;
+            }
+            // 检查点击是否在 input 或其子元素内
+            // 由于 event.target 可能为空，我们检查 composedPath 是否包含 input 相关的类名
+            const isClickInsideInput = composedPath.some((el) => {
+                // 检查是否是 input 元素或其容器
+                return el?.classList?.contains('td-input__inner') ||
+                    el?.classList?.contains('td-input__wrapper') ||
+                    el?.classList?.contains('td-date-editor') ||
+                    el === inputEl;
+            });
+            if (isClickInsideInput) {
                 return;
+            }
             pickerVisible.set(false);
         });
         onBeforeUnmount(() => {
-            stophandle === null || stophandle === void 0 ? void 0 : stophandle();
+            stophandle?.();
         });
-        const userInput = signal(undefined);
         const handleChange = () => {
-            if (userInput.get()) {
+            if (isTimePicker.get() && !props.saveOnBlur)
+                return;
+            const isRangeEmpty = isArray(userInput.get()) && userInput.get().every((v) => v === '');
+            if (userInput.get() && !isRangeEmpty) {
                 const value = parseUserInputToDayjs(displayValue.get());
                 if (value) {
                     if (isValidValue(value)) {
                         emitInput(dayOrDaysToDate(value));
-                        userInput.set(undefined);
                     }
+                    userInput.set(null);
                 }
             }
-            if (userInput.get() === '') {
-                emitInput(valueOnClear.get());
-                emitChange(valueOnClear.get());
-                userInput.set(undefined);
+            if (userInput.get() === '' || isRangeEmpty) {
+                emitInput(emptyValues.valueOnClear.get());
+                emitChange(emptyValues.valueOnClear.get(), true);
+                userInput.set(null);
             }
         };
         const parseUserInputToDayjs = (value) => {
             if (!value)
-                return undefined;
-            return pickerOptions.get().parseUserInput(value);
+                return null;
+            return pickerOptions.get().parseUserInput?.(value);
         };
-        const formatDayjsToString = (value) => {
+        const formatToString = (value) => {
             if (!value)
-                return undefined;
-            return pickerOptions.get().formatToString(value);
+                return null;
+            const res = isArray(value)
+                ? value.map((_) => _.format(props.format))
+                : value.format(props.format);
+            return res;
         };
         const isValidValue = (value) => {
-            return pickerOptions.get().isValidValue(value);
+            return pickerOptions.get().isValidValue?.(value);
         };
-        const handleKeydownInput = (event) => __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d;
+        const handleKeydownInput = async (event) => {
             if (props.readonly || pickerDisabled.get())
                 return;
-            const { code } = event;
+            const code = getEventCode(event);
             emitKeydown(event);
             if (code === EVENT_CODE.esc) {
                 if (pickerVisible.get() === true) {
                     pickerVisible.set(false);
-                    event === null || event === void 0 ? void 0 : event.preventDefault();
-                    event === null || event === void 0 ? void 0 : event.stopPropagation();
+                    event?.preventDefault();
+                    event?.stopPropagation();
                 }
                 return;
             }
             if (code === EVENT_CODE.down) {
                 if (pickerOptions.get().handleFocusPicker) {
-                    event === null || event === void 0 ? void 0 : event.preventDefault();
-                    event === null || event === void 0 ? void 0 : event.stopPropagation();
+                    event?.preventDefault();
+                    event?.stopPropagation();
                 }
                 if (pickerVisible.get() === false) {
                     pickerVisible.set(true);
-                    yield nextTick();
+                    await nextTick();
                 }
                 if (pickerOptions.get().handleFocusPicker) {
-                    (_b = (_a = pickerOptions.get()).handleFocusPicker) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    pickerOptions.get().handleFocusPicker?.();
                     return;
                 }
             }
@@ -382,151 +357,136 @@ export class Picker extends TypeFragment {
                 return;
             }
             if (code === EVENT_CODE.enter || code === EVENT_CODE.numpadEnter) {
-                if (userInput.get() === undefined ||
+                if (!pickerVisible.get()) {
+                    pickerVisible.set(true);
+                }
+                else if (userInput.get() === null ||
                     userInput.get() === '' ||
                     isValidValue(parseUserInputToDayjs(displayValue.get()))) {
                     handleChange();
                     pickerVisible.set(false);
                 }
-                event === null || event === void 0 ? void 0 : event.stopPropagation();
+                event?.preventDefault();
+                event?.stopPropagation();
                 return;
             }
             // if user is typing, do not let picker handle key input
             if (userInput.get()) {
-                event === null || event === void 0 ? void 0 : event.stopPropagation();
+                event?.stopPropagation();
                 return;
             }
             if (pickerOptions.get().handleKeydownInput) {
-                (_d = (_c = pickerOptions.get()).handleKeydownInput) === null || _d === void 0 ? void 0 : _d.call(_c, event);
+                pickerOptions.get().handleKeydownInput?.(event);
             }
-        });
+        };
         const onUserInput = (e) => {
-            // userInput.set(e) // todo
+            userInput.set(e);
             // Temporary fix when the picker is dismissed and the input box
             // is focused, just mimic the behavior of antdesign.
             if (!pickerVisible.get()) {
                 pickerVisible.set(true);
             }
         };
-        // const handleStartInput = (event?: Event) => {
-        //   const target = event?.target as HTMLInputElement;
-        //   if (userInput.get()) {
-        //     userInput.set([target.value, userInput?.get()?.[1]]);
-        //   } else {
-        //     userInput.set([target.value, undefined]);
-        //   }
-        // };
-        //
-        // const handleEndInput = (event?: Event) => {
-        //   const target = event?.target as HTMLInputElement;
-        //   if (userInput.get()) {
-        //     userInput.set([userInput.get()?.[0], target.value]);
-        //   } else {
-        //     userInput.set([undefined, target.value]);
-        //   }
-        // };
-        //
-        // const handleStartChange = () => {
-        //   const values = userInput.get() as string[];
-        //   const value = parseUserInputToDayjs(values && values[0]) as Dayjs;
-        //   const parsedVal = unref(parsedValue) as [Dayjs, Dayjs];
-        //   if (value && value.isValid()) {
-        //     userInput.set([
-        //       formatDayjsToString(value) as string,
-        //       displayValue.get()?.[1] || undefined,
-        //     ]);
-        //     const newValue = [
-        //       value,
-        //       parsedVal && (parsedVal[1] || undefined),
-        //     ] as DayOrDays;
-        //     if (isValidValue(newValue)) {
-        //       emitInput(dayOrDaysToDate(newValue));
-        //       userInput.set(undefined);
-        //     }
-        //   }
-        // };
-        //
-        // const handleEndChange = () => {
-        //   const values = unref(userInput) as string[];
-        //   const value = parseUserInputToDayjs(values && values[1]) as Dayjs;
-        //   const parsedVal = unref(parsedValue) as [Dayjs, Dayjs];
-        //   if (value && value.isValid()) {
-        //     userInput.set([
-        //       unref(displayValue)?.[0] || undefined,
-        //       formatDayjsToString(value) as string,
-        //     ]);
-        //     const newValue = [parsedVal && parsedVal[0], value] as DayOrDays;
-        //     if (isValidValue(newValue)) {
-        //       emitInput(dayOrDaysToDate(newValue));
-        //       userInput.set(undefined);
-        //     }
-        //   }
-        // };
-        const pickerOptions = signal({});
-        // const onSetPickerOption = <T extends keyof PickerOptions>(
-        //   e: [T, PickerOptions[T]]
-        // ) => {
-        //   pickerOptions.get()[e[0]] = e[1];
-        //   pickerOptions.get().panelReady = true;
-        // };
-        //
-        // const onCalendarChange = (e: [Date, undefined | Date]) => {
-        //   emit('calendar-change', e);
-        // };
-        // const onPanelChange = (
-        //   value: [Dayjs, Dayjs],
-        //   mode: 'month' | 'year',
-        //   view: unknown
-        // ) => {
-        //   emit('panel-change', value, mode, view);
-        // };
+        const handleStartInput = (event) => {
+            const target = event?.target;
+            if (userInput.get()) {
+                userInput.set([target.value, userInput.get()?.[1] ?? null]);
+            }
+            else {
+                userInput.set([target.value, null]);
+            }
+        };
+        const handleEndInput = (event) => {
+            const target = event?.target;
+            if (userInput.get()) {
+                userInput.set([userInput.get()?.[0] ?? null, target.value]);
+            }
+            else {
+                userInput.set([null, target.value]);
+            }
+        };
+        const handleStartChange = () => {
+            const values = userInput.get();
+            const value = parseUserInputToDayjs(values && values[0]);
+            const parsedVal = parsedValue.get();
+            if (value && value.isValid()) {
+                userInput.set([
+                    formatToString(value),
+                    displayValue.get()?.[1] ?? null,
+                ]);
+                const newValue = [
+                    value,
+                    parsedVal && (parsedVal[1] || null),
+                ];
+                if (isValidValue(newValue)) {
+                    emitInput(dayOrDaysToDate(newValue));
+                    userInput.set(null);
+                }
+            }
+        };
+        const handleEndChange = () => {
+            const values = userInput.get();
+            const value = parseUserInputToDayjs(values && values[1]);
+            const parsedVal = parsedValue.get();
+            if (value && value.isValid()) {
+                userInput.set([
+                    displayValue.get()?.[0] || null,
+                    formatToString(value),
+                ]);
+                const newValue = [parsedVal && parsedVal[0], value];
+                if (isValidValue(newValue)) {
+                    emitInput(dayOrDaysToDate(newValue));
+                    userInput.set(null);
+                }
+            }
+        };
         const focus = () => {
-            var _a, _b;
-            (_b = (_a = inputRef.get()) === null || _a === void 0 ? void 0 : _a.dom) === null || _b === void 0 ? void 0 : _b.focus();
+            inputRef.get()?.focus?.();
         };
         const blur = () => {
-            var _a, _b;
-            (_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.get()) === null || _a === void 0 ? void 0 : _a.dom) === null || _b === void 0 ? void 0 : _b.blur();
+            inputRef?.get()?.blur?.();
         };
-        provide('EP_PICKER_BASE', {
+        // console.warn('props.defaultValue is ', props.defaultValue);
+        provide(PICKER_BASE_INJECTION_KEY, {
             props,
+            emptyValues,
         });
-        defineExpose({
-            /**
-             * @description focus input box.
-             */
-            focus,
-            /**
-             * @description blur input box.
-             */
-            blur,
-            /**
-             * @description opens picker
-             */
-            handleOpen,
-            /**
-             * @description closes picker
-             */
-            handleClose,
-            /**
-             * @description pick item manually
-             */
-            onPick,
-        });
+        provide(ROOT_COMMON_PICKER_INJECTION_KEY, commonPicker);
+        /**
+         * @description focus input box.
+         */
+        this.focus = focus;
+        /**
+         * @description blur input box.
+         */
+        this.blur = blur;
+        /**
+         * @description opens picker
+         */
+        this.handleOpen = handleOpen;
+        /**
+         * @description closes picker
+         */
+        this.handleClose = handleClose;
+        /**
+         * @description pick item manually
+         */
+        this.onPick = onPick;
         this.addChild(new TdTooltip({
             refEl: refPopper,
-            visible: pickerVisible.get(),
+            visible: pickerVisible,
             effect: 'light',
             pure: true,
             trigger: 'click',
-            // v-bind: $attrs,
+            // v-bind="$attrs"
             role: 'dialog',
             teleported: true,
             transition: `${nsDate.namespace.get()}-zoom-in-top`,
-            popperClass: [
+            popperClass: computed(() => [
                 `${nsDate.namespace.get()}-picker__popper`,
                 props.popperClass,
-            ],
+            ]),
+            popperStyle: props.popperStyle,
             popperOptions: tdPopperOptions,
             fallbackPlacements: props.fallbackPlacements,
             gpuAcceleration: false,
@@ -534,53 +494,151 @@ export class Picker extends TypeFragment {
             stopPopperMouseEvent: false,
             hideAfter: 0,
             persistent: true,
-            emits: {
-                beforeShow: onBeforeShow,
-                show: onShow,
-                hide: onHide,
-            },
+            onBeforeShow: onBeforeShow,
+            onShow: onShow,
+            onHide: onHide,
             slots: {
                 default: [
                     new TdInput({
-                        vIf: !isRangeInput,
+                        vIf: computed(() => !isRangeInput.get()),
                         id: props.id,
                         refEl: inputRef,
                         containerRole: 'combobox',
-                        modelValue: displayValue.get(),
-                        // name: name,
+                        vModel: displayValue,
+                        name: props.name,
                         size: pickerSize.get(),
-                        disabled: pickerDisabled.get(),
+                        disabled: pickerDisabled,
                         placeholder: props.placeholder,
-                        class: [
+                        class: computed(() => [
                             nsDate.b('editor'),
-                            nsDate.bm('editor', props.type) /* $attrs.class*/,
-                        ],
-                        // style: $attrs.style,
-                        readonly: !props.editable ||
+                            nsDate.bm('editor', props.type),
+                            nsDate.is('focus', pickerVisible.get()),
+                            attrs.get().class,
+                        ]),
+                        styleObj: props.styleObj,
+                        readonly: computed(() => !props.editable ||
                             props.readonly ||
                             isDatesPicker.get() ||
                             isMonthsPicker.get() ||
                             isYearsPicker.get() ||
-                            props.type === 'week',
+                            props.type === 'week'),
                         ariaLabel: props.ariaLabel,
                         tabindex: props.tabindex,
                         validateEvent: false,
-                        events: {
-                            input: onUserInput,
-                            focus: handleFocus,
-                            blur: handleBlur,
-                            keydown: handleKeydownInput,
-                            change: handleChange,
-                            mousedown: onMouseDownInput,
-                            mouseenter: onMouseEnter,
-                            mouseleave: onMouseLeave,
-                            touchstart: onTouchStartInput,
-                            click: (evt) => evt === null || evt === void 0 ? void 0 : evt.stopPropagation(),
+                        onInput: onUserInput,
+                        onFocus: handleFocus,
+                        onBlur: handleBlur,
+                        onKeydown: handleKeydownInput,
+                        onChange: handleChange,
+                        onMousedown: onMouseDownInput,
+                        onMouseenter: onMouseEnter,
+                        onMouseleave: onMouseLeave,
+                        onTouchstart: (e) => {
+                            // .passive is required for touch event 实现等效代码
+                            // <!-- 编译后的 JavaScript -->  todo 事件 参数
+                            // element.addEventListener('touchstart', handler, { passive: true })
+                            onTouchStartInput(e);
+                        },
+                        onClick: (e) => {
+                            e?.stopPropagation();
+                        },
+                        slots: {
+                            prefix: [
+                                new TdIcon({
+                                    vIf: triggerIcon,
+                                    class: nsInput.e('icon'),
+                                    onMousedown: onMouseDownInput,
+                                    onTouchstart: onTouchStartInput,
+                                    slot: () => triggerIcon.get(),
+                                }),
+                            ],
+                            suffix: [
+                                new TdIcon({
+                                    vIf: showClearBtn,
+                                    class: clearIconKls,
+                                    onMousedown: (evt) => evt?.preventDefault(),
+                                    onClick: onClear,
+                                    slot: props.clearIcon,
+                                }),
+                            ],
+                        },
+                    }),
+                    new PickerRangeTrigger({
+                        vIf: isRangeInput,
+                        id: props.id,
+                        refEl: inputRef,
+                        vModel: displayValue,
+                        name: props.name,
+                        disabled: pickerDisabled,
+                        // readonly: !props.editable || props.readonly,
+                        startPlaceholder: props.startPlaceholder,
+                        endPlaceholder: props.endPlaceholder,
+                        class: rangeInputKls,
+                        styleObj: props.styleObj,
+                        attrObj: {
+                            ariaLabel: props.ariaLabel,
+                            tabindex: props.tabindex,
+                            // autocomplete: 'off',
+                            role: 'combobox',
+                        },
+                        onClick: onMouseDownInput,
+                        onFocus: handleFocus,
+                        onBlur: handleBlur,
+                        onStartInput: handleStartInput,
+                        onStartChange: handleStartChange,
+                        onEndInput: handleEndInput,
+                        onEndChange: handleEndChange,
+                        onMousedown: onMouseDownInput,
+                        onMouseenter: onMouseEnter,
+                        onMouseleave: onMouseLeave,
+                        onTouchstart: onTouchStartInput, // todo .passive
+                        onKeydown: handleKeydownInput,
+                        slots: {
+                            prefix: new TdIcon({
+                                vIf: triggerIcon,
+                                class: [nsInput.e('icon'), nsRange.e('icon')],
+                                slot: () => triggerIcon.get(),
+                            }),
+                            rangeSeparator: new Span({
+                                class: nsRange.b('separator'),
+                                slot: props.slots?.rangeSeparator ?? new Span({
+                                    class: nsRange.b('separator'),
+                                    slot: props.rangeSeparator
+                                }),
+                            }),
+                            suffix: new TdIcon({
+                                vIf: props.clearIcon,
+                                class: clearIconKls,
+                                onMousedown: (evt) => evt?.preventDefault(),
+                                onClick: onClear,
+                                slot: props.clearIcon,
+                            }),
                         },
                     }),
-                    new PickerRangeTrigger({}),
                 ],
-                content: [],
+                content: (isFunction(props.slots?.default) && props.slots?.default({
+                    visible: pickerVisible,
+                    actualVisible: pickerActualVisible,
+                    parsedValue: parsedValue.get(),
+                    format: props.format,
+                    dateFormat: props.dateFormat,
+                    timeFormat: props.timeFormat,
+                    unlinkPanels: props.unlinkPanels,
+                    type: props.type,
+                    defaultValue: props.defaultValue,
+                    showNow: props.showNow,
+                    showConfirm: props.showConfirm,
+                    showFooter: props.showFooter,
+                    showWeekNumber: props.showWeekNumber,
+                    singlePanel: props.singlePanel,
+                    onPick: onPick,
+                    onSelectRange: setSelectionRange,
+                    onSetPickerOption: onSetPickerOption,
+                    onCalendarChange: onCalendarChange,
+                    onClear: onClear,
+                    onPanelChange: onPanelChange,
+                    onMouseDown: (evt) => evt.stopPropagation(),
+                })) ?? undefined
             },
         }));
     }