@type-dom/ui 0.5.0 → 0.6.1

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

@@ -0,0 +1,646 @@
+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 { 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, valueEquals } from '../utils';
+import { timePickerDefaultProps, } from './props';
+import { useFormSize, useFormDisabled } from '../../td-form/hooks/use-form-common-props';
+import { PickerRangeTrigger } from './picker-range-trigger.class';
+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(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 nsDate = useNamespace('date');
+        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 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;
+            },
+            afterFocus() {
+                if (!props.automaticDropdown)
+                    return;
+                pickerVisible.set(true);
+            },
+            beforeBlur(event) {
+                return (!hasJustTabExitedInput &&
+                    refPopper.get()?.isFocusInsideContent?.(event));
+            },
+            afterBlur() {
+                if (isTimePicker.get() && !props.saveOnBlur) {
+                    if (!valueIsEmpty.get()) {
+                        pickerOptions.get().handleCancel?.();
+                    }
+                }
+                else {
+                    handleChange();
+                }
+                pickerVisible.set(false);
+                hasJustTabExitedInput = false;
+                if (props.validateEvent)
+                    formItem?.validate('blur').catch(NOOP);
+            },
+        });
+        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(null);
+                props.modelValue = props.vModel?.get();
+                nextTick(() => {
+                    emitChange(props.modelValue);
+                });
+            }
+            else {
+                nextTick(() => {
+                    if (val) {
+                        valueOnOpen.set(props.modelValue);
+                    }
+                });
+            }
+        });
+        const emitChange = (val, isClear) => {
+            // determine user real change only
+            if (isClear || !valueEquals(val, valueOnOpen.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(() => {
+            if (inputRef.get()) {
+                return Array.from(inputRef.get()?.$el?.querySelectorAll('input'));
+            }
+            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();
+            }
+        };
+        const onBeforeShow = () => {
+            pickerActualVisible.set(true);
+        };
+        const onShow = () => {
+            emit('visible-change', true);
+        };
+        const onHide = () => {
+            pickerActualVisible.set(false);
+            pickerVisible.set(false);
+            emit('visible-change', false);
+        };
+        const handleOpen = () => {
+            pickerVisible.set(true);
+        };
+        const handleClose = () => {
+            pickerVisible.set(false);
+        };
+        const displayValue = computed(() => {
+            const formattedValue = formatToString(parsedValue.get());
+            // console.warn('displayValue formattedValue is ', formattedValue);
+            if (isArray(userInput.get())) {
+                return [
+                    userInput.get()?.[0] ?? (formattedValue && formattedValue[0]) ?? '',
+                    userInput.get()?.[1] ?? (formattedValue && formattedValue[1]) ?? '',
+                ];
+            }
+            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())
+                return '';
+            if (formattedValue) {
+                return isDatesPicker.get() ||
+                    isMonthsPicker.get() ||
+                    isYearsPicker.get()
+                    ? formattedValue.join(', ')
+                    : formattedValue;
+            }
+            return '';
+        });
+        // 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() ? 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 (event?.target?.tagName !== 'INPUT' ||
+                isFocused.get() ||
+                !props.automaticDropdown) {
+                pickerVisible.set(true);
+            }
+        };
+        const onMouseEnter = () => {
+            if (props.readonly || pickerDisabled.get())
+                return;
+            if (!valueIsEmpty.get() && props.clearable) {
+                hovering.set(true);
+            }
+        };
+        const onMouseLeave = () => {
+            hovering.set(false);
+        };
+        const onTouchStartInput = (event) => {
+            if (props.readonly || pickerDisabled.get())
+                return;
+            if (event?.touches[0].target?.tagName !== 'INPUT' ||
+                isFocused.get() ||
+                !props.automaticDropdown) {
+                pickerVisible.set(true);
+            }
+        };
+        const isRangeInput = computed(() => {
+            return props.type?.includes('range');
+        });
+        const pickerSize = useFormSize();
+        const popperEl = computed(() => refPopper.get()?.popperRef?.get()?.contentRef?.get());
+        const stophandle = onClickOutside(inputRef, (e) => {
+            const unrefedPopperEl = unref(popperEl);
+            const inputEl = unrefElement(inputRef);
+            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?.();
+        });
+        const handleChange = () => {
+            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(null);
+                }
+            }
+            if (userInput.get() === '' || isRangeEmpty) {
+                emitInput(emptyValues.valueOnClear.get());
+                emitChange(emptyValues.valueOnClear.get(), true);
+                userInput.set(null);
+            }
+        };
+        const parseUserInputToDayjs = (value) => {
+            if (!value)
+                return null;
+            return pickerOptions.get().parseUserInput?.(value);
+        };
+        const formatToString = (value) => {
+            if (!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);
+        };
+        const handleKeydownInput = async (event) => {
+            if (props.readonly || pickerDisabled.get())
+                return;
+            const code = getEventCode(event);
+            emitKeydown(event);
+            if (code === EVENT_CODE.esc) {
+                if (pickerVisible.get() === true) {
+                    pickerVisible.set(false);
+                    event?.preventDefault();
+                    event?.stopPropagation();
+                }
+                return;
+            }
+            if (code === EVENT_CODE.down) {
+                if (pickerOptions.get().handleFocusPicker) {
+                    event?.preventDefault();
+                    event?.stopPropagation();
+                }
+                if (pickerVisible.get() === false) {
+                    pickerVisible.set(true);
+                    await nextTick();
+                }
+                if (pickerOptions.get().handleFocusPicker) {
+                    pickerOptions.get().handleFocusPicker?.();
+                    return;
+                }
+            }
+            if (code === EVENT_CODE.tab) {
+                hasJustTabExitedInput = true;
+                return;
+            }
+            if (code === EVENT_CODE.enter || code === EVENT_CODE.numpadEnter) {
+                if (!pickerVisible.get()) {
+                    pickerVisible.set(true);
+                }
+                else if (userInput.get() === null ||
+                    userInput.get() === '' ||
+                    isValidValue(parseUserInputToDayjs(displayValue.get()))) {
+                    handleChange();
+                    pickerVisible.set(false);
+                }
+                event?.preventDefault();
+                event?.stopPropagation();
+                return;
+            }
+            // if user is typing, do not let picker handle key input
+            if (userInput.get()) {
+                event?.stopPropagation();
+                return;
+            }
+            if (pickerOptions.get().handleKeydownInput) {
+                pickerOptions.get().handleKeydownInput?.(event);
+            }
+        };
+        const onUserInput = (e) => {
+            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) => {
+            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 = () => {
+            inputRef.get()?.focus?.();
+        };
+        const blur = () => {
+            inputRef?.get()?.blur?.();
+        };
+        // console.warn('props.defaultValue is ', props.defaultValue);
+        provide(PICKER_BASE_INJECTION_KEY, {
+            props,
+            emptyValues,
+        });
+        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,
+            effect: 'light',
+            pure: true,
+            trigger: 'click',
+            // v-bind="$attrs"
+            role: 'dialog',
+            teleported: true,
+            transition: `${nsDate.namespace.get()}-zoom-in-top`,
+            popperClass: computed(() => [
+                `${nsDate.namespace.get()}-picker__popper`,
+                props.popperClass,
+            ]),
+            popperStyle: props.popperStyle,
+            popperOptions: tdPopperOptions,
+            fallbackPlacements: props.fallbackPlacements,
+            gpuAcceleration: false,
+            placement: props.placement,
+            stopPopperMouseEvent: false,
+            hideAfter: 0,
+            persistent: true,
+            onBeforeShow: onBeforeShow,
+            onShow: onShow,
+            onHide: onHide,
+            slots: {
+                default: [
+                    new TdInput({
+                        vIf: computed(() => !isRangeInput.get()),
+                        id: props.id,
+                        refEl: inputRef,
+                        containerRole: 'combobox',
+                        vModel: displayValue,
+                        name: props.name,
+                        size: pickerSize.get(),
+                        disabled: pickerDisabled,
+                        placeholder: props.placeholder,
+                        class: computed(() => [
+                            nsDate.b('editor'),
+                            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'),
+                        ariaLabel: props.ariaLabel,
+                        tabindex: props.tabindex,
+                        validateEvent: false,
+                        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,
+                            }),
+                        },
+                    }),
+                ],
+                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
+            },
+        }));
+    }
+}
+//# sourceMappingURL=picker.class.js.map