@type-dom/ui 0.0.10 → 0.1.1

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

@@ -0,0 +1,574 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Picker = void 0;
+const tslib_1 = require("tslib");
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
+const use_locale_1 = require("../../../../hooks/use-locale");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
+const use_focus_controller_1 = require("../../../../hooks/use-focus-controller");
+const use_empty_values_1 = require("../../../../hooks/use-empty-values");
+const aria_1 = require("../../../../constants/aria");
+const td_tooltip_class_1 = require("../../../feedback/td-tooltip/td-tooltip.class");
+const td_input_class_1 = require("../../td-input/td-input.class");
+const use_form_item_1 = require("../../td-form/hooks/use-form-item");
+const utils_2 = require("../utils");
+const props_1 = require("./props");
+const svgs_1 = require("@type-dom/svgs");
+const use_form_common_props_1 = require("../../td-form/hooks/use-form-common-props");
+const picker_range_trigger_class_1 = require("./picker-range-trigger.class");
+class Picker extends framework_1.TypeFragment {
+    constructor(params = {}) {
+        super();
+        this.className = 'Picker';
+        this.assignProps(props_1.timePickerDefaultProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        const props = this.props;
+        const emit = this.emit;
+        const attrs = (0, framework_1.useAttrs)();
+        const { lang } = (0, use_locale_1.useLocale)();
+        const nsDate = (0, use_namespace_1.useNamespace)('date');
+        const nsInput = (0, use_namespace_1.useNamespace)('input');
+        const nsRange = (0, use_namespace_1.useNamespace)('range');
+        const { form, formItem } = (0, use_form_item_1.useFormItem)();
+        const tdPopperOptions = (0, framework_1.inject)('TdPopperOptions', {});
+        const { valueOnClear } = (0, use_empty_values_1.useEmptyValues)(props, undefined);
+        const refPopper = (0, signals_1.signal)();
+        const inputRef = (0, signals_1.signal)();
+        const pickerVisible = (0, signals_1.signal)(false);
+        const pickerActualVisible = (0, signals_1.signal)(false);
+        const valueOnOpen = (0, signals_1.signal)(undefined);
+        let hasJustTabExitedInput = false;
+        const { isFocused, handleFocus, handleBlur } = (0, use_focus_controller_1.useFocusController)(inputRef, {
+            beforeFocus() {
+                return props.readonly || (0, signals_1.unref)(pickerDisabled.get());
+            },
+            afterFocus() {
+                pickerVisible.set(true);
+            },
+            beforeBlur(event) {
+                var _a;
+                return (!hasJustTabExitedInput &&
+                    ((_a = refPopper.get()) === null || _a === void 0 ? void 0 : _a.isFocusInsideContent(event)));
+            },
+            afterBlur() {
+                handleChange();
+                pickerVisible.set(false);
+                hasJustTabExitedInput = false;
+                props.validateEvent &&
+                    (formItem === null || formItem === void 0 ? void 0 : formItem.validate('blur').catch((err) => (0, utils_1.debugWarn)(err)));
+            },
+        });
+        const rangeInputKls = (0, signals_1.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 = (0, signals_1.computed)(() => [
+            nsInput.e('icon'),
+            nsRange.e('close-icon'),
+            !showClose.get() ? nsRange.e('close-icon--hidden') : '',
+        ]);
+        (0, signals_1.watch)(pickerVisible, (val) => {
+            if (!val) {
+                userInput.set(undefined);
+                (0, framework_1.nextTick)(() => {
+                    emitChange(props.modelValue);
+                });
+            }
+            else {
+                (0, framework_1.nextTick)(() => {
+                    if (val) {
+                        valueOnOpen.set(props.modelValue);
+                    }
+                });
+            }
+        });
+        const emitChange = (val, isClear) => {
+            // determine user real change only
+            if (isClear || !(0, utils_2.valueEquals)(val, valueOnOpen.get())) {
+                emit('change', val);
+                props.validateEvent &&
+                    (formItem === null || formItem === void 0 ? void 0 : formItem.validate('change').catch((err) => (0, utils_1.debugWarn)(err)));
+            }
+        };
+        const emitInput = (input) => {
+            if (!(0, utils_2.valueEquals)(props.modelValue, input)) {
+                let formatted;
+                if ((0, utils_1.isArray)(input)) {
+                    formatted = input.map((item) => (0, utils_2.formatter)(item, props.valueFormat, lang.get()));
+                }
+                else if (input) {
+                    formatted = (0, utils_2.formatter)(input, props.valueFormat, lang.get());
+                }
+                emit('update:modelValue', input ? formatted : input, lang.get());
+            }
+        };
+        const emitKeydown = (e) => {
+            emit('keydown', e);
+        };
+        const refInput = (0, signals_1.computed)(() => {
+            var _a, _b, _c;
+            if (inputRef) {
+                return Array.from((_c = (_b = (_a = inputRef.get()) === null || _a === void 0 ? void 0 : _a.dom) === null || _b === void 0 ? void 0 : _b.querySelectorAll) === null || _c === void 0 ? void 0 : _c.call(_b, 'input'));
+            }
+            return [];
+        });
+        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 onPick = (date = '', visible = false) => {
+            pickerVisible.set(visible);
+            let result;
+            if ((0, utils_1.isArray)(date)) {
+                result = date.map((_) => _.toDate());
+            }
+            else {
+                // clear btn emit undefined
+                result = date ? date.toDate() : date;
+            }
+            userInput.set(undefined);
+            emitInput(result);
+        };
+        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 pickerDisabled = (0, signals_1.computed)(() => {
+            return props.disabled || (0, signals_1.unref)(form === null || form === void 0 ? void 0 : form.disabled);
+        });
+        const parsedValue = (0, signals_1.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 ((0, utils_1.isArray)(props.modelValue)) {
+                    dayOrDays = props.modelValue.map((d) => (0, utils_2.parseDate)(d, props.valueFormat, lang.get()));
+                }
+                else {
+                    dayOrDays = (0, utils_2.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 (!(0, utils_1.isEqual)(availableResult, dayOrDays)) {
+                    dayOrDays = availableResult;
+                    // The result is corrected only when model-value exists
+                    if (!valueIsEmpty.get()) {
+                        emitInput((0, utils_2.dayOrDaysToDate)(dayOrDays));
+                    }
+                }
+            }
+            if ((0, utils_1.isArray)(dayOrDays) && dayOrDays.some((day) => !day)) {
+                dayOrDays = [];
+            }
+            return dayOrDays;
+        });
+        const displayValue = (0, signals_1.computed)(() => {
+            var _a, _b;
+            if (!pickerOptions.get().panelReady)
+                return '';
+            const formattedValue = formatDayjsToString(parsedValue.get());
+            if ((0, utils_1.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]) || '',
+                ];
+            }
+            else if (userInput.get() !== undefined) {
+                return userInput.get();
+            }
+            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 '';
+        });
+        const isTimeLikePicker = (0, signals_1.computed)(() => { var _a; return (_a = props.type) === null || _a === void 0 ? void 0 : _a.includes('time'); });
+        const isTimePicker = (0, signals_1.computed)(() => { var _a; return (_a = props.type) === null || _a === void 0 ? void 0 : _a.startsWith('time'); });
+        const isDatesPicker = (0, signals_1.computed)(() => props.type === 'dates');
+        const isMonthsPicker = (0, signals_1.computed)(() => props.type === 'months');
+        const isYearsPicker = (0, signals_1.computed)(() => props.type === 'years');
+        const triggerIcon = (0, signals_1.computed)(() => props.prefixIcon ||
+            (isTimeLikePicker.get() ? svgs_1.ElClockSvg : svgs_1.ElCalendarSvg));
+        const showClose = (0, signals_1.signal)(false);
+        const onClearIconClick = (event) => {
+            var _a, _b;
+            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) {
+                    (_b = (_a = pickerOptions.get()).handleClear) === null || _b === void 0 ? void 0 : _b.call(_a);
+                }
+                else {
+                    emitInput(valueOnClear.get());
+                }
+                emitChange(valueOnClear.get(), true);
+                showClose.set(false);
+                onHide();
+            }
+            emit('clear');
+        };
+        const valueIsEmpty = (0, signals_1.computed)(() => {
+            const { modelValue } = props;
+            return (!modelValue ||
+                ((0, utils_1.isArray)(modelValue) && !modelValue.filter(Boolean).length));
+        });
+        const onMouseDownInput = (event) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+            var _a;
+            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()) {
+                pickerVisible.set(true);
+            }
+        });
+        const onMouseEnter = () => {
+            if (props.readonly || pickerDisabled.get())
+                return;
+            if (!valueIsEmpty.get() && props.clearable) {
+                showClose.set(true);
+            }
+        };
+        const onMouseLeave = () => {
+            showClose.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()) {
+                pickerVisible.set(true);
+            }
+        };
+        const isRangeInput = (0, signals_1.computed)(() => {
+            var _a;
+            return (_a = props.type) === null || _a === void 0 ? void 0 : _a.includes('range');
+        });
+        const pickerSize = (0, use_form_common_props_1.useFormSize)();
+        const popperEl = (0, signals_1.computed)(() => { var _a, _b, _c; return (_c = (_b = (_a = (0, signals_1.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 stophandle = (0, framework_1.onClickOutside)(inputRef, (e) => {
+            const unrefedPopperEl = (0, signals_1.unref)(popperEl);
+            const inputEl = (0, framework_1.unrefElement)(inputRef);
+            if ((unrefedPopperEl &&
+                (e.target === unrefedPopperEl ||
+                    e.composedPath().includes(unrefedPopperEl))) ||
+                e.target === inputEl ||
+                (inputEl && e.composedPath().includes(inputEl)))
+                return;
+            pickerVisible.set(false);
+        });
+        (0, framework_1.onBeforeUnmount)(() => {
+            stophandle === null || stophandle === void 0 ? void 0 : stophandle();
+        });
+        const userInput = (0, signals_1.signal)(undefined);
+        const handleChange = () => {
+            if (userInput.get()) {
+                const value = parseUserInputToDayjs(displayValue.get());
+                if (value) {
+                    if (isValidValue(value)) {
+                        emitInput((0, utils_2.dayOrDaysToDate)(value));
+                        userInput.set(undefined);
+                    }
+                }
+            }
+            if (userInput.get() === '') {
+                emitInput(valueOnClear.get());
+                emitChange(valueOnClear.get());
+                userInput.set(undefined);
+            }
+        };
+        const parseUserInputToDayjs = (value) => {
+            if (!value)
+                return undefined;
+            return pickerOptions.get().parseUserInput(value);
+        };
+        const formatDayjsToString = (value) => {
+            if (!value)
+                return undefined;
+            return pickerOptions.get().formatToString(value);
+        };
+        const isValidValue = (value) => {
+            return pickerOptions.get().isValidValue(value);
+        };
+        const handleKeydownInput = (event) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d;
+            if (props.readonly || pickerDisabled.get())
+                return;
+            const { code } = event;
+            emitKeydown(event);
+            if (code === aria_1.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();
+                }
+                return;
+            }
+            if (code === aria_1.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();
+                }
+                if (pickerVisible.get() === false) {
+                    pickerVisible.set(true);
+                    yield (0, framework_1.nextTick)();
+                }
+                if (pickerOptions.get().handleFocusPicker) {
+                    (_b = (_a = pickerOptions.get()).handleFocusPicker) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    return;
+                }
+            }
+            if (code === aria_1.EVENT_CODE.tab) {
+                hasJustTabExitedInput = true;
+                return;
+            }
+            if (code === aria_1.EVENT_CODE.enter || code === aria_1.EVENT_CODE.numpadEnter) {
+                if (userInput.get() === undefined ||
+                    userInput.get() === '' ||
+                    isValidValue(parseUserInputToDayjs(displayValue.get()))) {
+                    handleChange();
+                    pickerVisible.set(false);
+                }
+                event === null || event === void 0 ? void 0 : 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();
+                return;
+            }
+            if (pickerOptions.get().handleKeydownInput) {
+                (_d = (_c = pickerOptions.get()).handleKeydownInput) === null || _d === void 0 ? void 0 : _d.call(_c, event);
+            }
+        });
+        const onUserInput = (e) => {
+            // userInput.set(e) // todo
+            // 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) => {
+            var _a;
+            const target = event === null || event === void 0 ? void 0 : event.target;
+            if (userInput.get()) {
+                userInput.set([target.value, (_a = userInput === null || userInput === void 0 ? void 0 : userInput.get()) === null || _a === void 0 ? void 0 : _a[1]]);
+            }
+            else {
+                userInput.set([target.value, undefined]);
+            }
+        };
+        const handleEndInput = (event) => {
+            var _a;
+            const target = event === null || event === void 0 ? void 0 : event.target;
+            if (userInput.get()) {
+                userInput.set([(_a = userInput.get()) === null || _a === void 0 ? void 0 : _a[0], target.value]);
+            }
+            else {
+                userInput.set([undefined, target.value]);
+            }
+        };
+        const handleStartChange = () => {
+            var _a;
+            const values = userInput.get();
+            const value = parseUserInputToDayjs(values && values[0]);
+            const parsedVal = (0, signals_1.unref)(parsedValue);
+            if (value && value.isValid()) {
+                userInput.set([
+                    formatDayjsToString(value),
+                    ((_a = displayValue.get()) === null || _a === void 0 ? void 0 : _a[1]) || undefined,
+                ]);
+                const newValue = [
+                    value,
+                    parsedVal && (parsedVal[1] || undefined),
+                ];
+                if (isValidValue(newValue)) {
+                    emitInput((0, utils_2.dayOrDaysToDate)(newValue));
+                    userInput.set(undefined);
+                }
+            }
+        };
+        const handleEndChange = () => {
+            var _a;
+            const values = (0, signals_1.unref)(userInput);
+            const value = parseUserInputToDayjs(values && values[1]);
+            const parsedVal = (0, signals_1.unref)(parsedValue);
+            if (value && value.isValid()) {
+                userInput.set([
+                    ((_a = (0, signals_1.unref)(displayValue)) === null || _a === void 0 ? void 0 : _a[0]) || undefined,
+                    formatDayjsToString(value),
+                ]);
+                const newValue = [parsedVal && parsedVal[0], value];
+                if (isValidValue(newValue)) {
+                    emitInput((0, utils_2.dayOrDaysToDate)(newValue));
+                    userInput.set(undefined);
+                }
+            }
+        };
+        const pickerOptions = (0, signals_1.signal)({});
+        const onSetPickerOption = (e) => {
+            pickerOptions.get()[e[0]] = e[1];
+            pickerOptions.get().panelReady = true;
+        };
+        const onCalendarChange = (e) => {
+            emit('calendar-change', e);
+        };
+        // @ts-ignore
+        const onPanelChange = (value, mode, view) => {
+            emit('panel-change', value, mode, view);
+        };
+        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();
+        };
+        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();
+        };
+        (0, framework_1.provide)('EP_PICKER_BASE', {
+            props,
+        });
+        (0, framework_1.defineExpose)({
+            /**
+             * @description focus input box.
+             */
+            focus,
+            /**
+             * @description blur input box.
+             */
+            blur,
+            /**
+             * @description opens picker
+             */
+            handleOpen,
+            /**
+             * @description closes picker
+             */
+            handleClose,
+            /**
+             * @description pick item manually
+             */
+            onPick,
+        });
+        this.addChild(new td_tooltip_class_1.TdTooltip({
+            refEl: refPopper,
+            visible: pickerVisible.get(),
+            effect: 'light',
+            pure: true,
+            trigger: 'click',
+            // v-bind: $attrs,
+            role: 'dialog',
+            teleported: true,
+            transition: `${nsDate.namespace.get()}-zoom-in-top`,
+            popperClass: [
+                `${nsDate.namespace.get()}-picker__popper`,
+                props.popperClass,
+            ],
+            popperOptions: tdPopperOptions,
+            fallbackPlacements: props.fallbackPlacements,
+            gpuAcceleration: false,
+            placement: props.placement,
+            stopPopperMouseEvent: false,
+            hideAfter: 0,
+            persistent: true,
+            emits: {
+                beforeShow: onBeforeShow,
+                show: onShow,
+                hide: onHide,
+            },
+            slots: {
+                default: [
+                    new td_input_class_1.TdInput({
+                        vIf: !isRangeInput,
+                        id: props.id,
+                        refEl: inputRef,
+                        containerRole: 'combobox',
+                        modelValue: displayValue.get(),
+                        // name: name,
+                        size: pickerSize.get(),
+                        disabled: pickerDisabled.get(),
+                        placeholder: props.placeholder,
+                        class: [
+                            nsDate.b('editor'),
+                            nsDate.bm('editor', props.type) /* $attrs.class*/,
+                        ],
+                        // style: $attrs.style,
+                        readonly: !props.editable ||
+                            props.readonly ||
+                            isDatesPicker.get() ||
+                            isMonthsPicker.get() ||
+                            isYearsPicker.get() ||
+                            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(),
+                        },
+                    }),
+                    new picker_range_trigger_class_1.PickerRangeTrigger({}),
+                ],
+                content: [],
+            },
+        }));
+    }
+}
+exports.Picker = Picker;