@uzum-tech/ui 1.12.21 → 1.13.0

package/es/date-picker-v2/src/DatePickerV2.js

@@ -0,0 +1,750 @@
+import { h, defineComponent, ref, computed, provide, withDirectives, toRef, Transition, watch, nextTick } from 'vue';
+import { VBinder, VTarget, VFollower } from 'vueuc';
+import { clickoutside } from 'vdirs';
+import { format, parse, getYear, getMonth, startOfDay, getTime, isValid } from 'date-fns';
+import { useIsMounted, useMergedState } from 'vooks';
+import { getPreciseEventTarget } from 'seemly';
+import { DateIcon } from '../../_internal/icons';
+import { UInput } from '../../input';
+import { UBaseIcon, UInternalSelection } from '../../_internal';
+import { useFormItem, useTheme, useConfig, useLocale, useThemeClass } from '../../_mixins';
+import { call, useAdjustedTo } from '../../_utils';
+import { UButton } from '../../button';
+import { datePickerV2Light } from '../styles';
+import { datePickerV2InjectionKey } from './interface';
+import CalendarPanel from './panel/CalendarPanel';
+import CalendarRangePanel from './panel/CalendarRangePanel';
+import style from './styles/index.cssr';
+export const datePickerV2Props = Object.assign(Object.assign({}, useTheme.props), { to: useAdjustedTo.propTo, type: {
+        type: String,
+        default: 'date'
+    }, bordered: {
+        type: Boolean,
+        default: undefined
+    }, round: Boolean, clearable: Boolean, defaultValue: [Number, Array], disabled: {
+        type: Boolean,
+        default: undefined
+    }, placement: {
+        type: String,
+        default: 'bottom-start'
+    }, value: [Number, Array], size: String, placeholder: String, startPlaceholder: String, endPlaceholder: String, separator: String, format: {
+        type: String,
+        default: 'DD.MM.YYYY'
+    }, triggerPreset: {
+        type: String,
+        default: 'input'
+    }, isDateDisabled: Function, show: {
+        type: Boolean,
+        default: undefined
+    }, status: String, inputReadonly: Boolean, 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onFocus: [Function, Array], onBlur: [Function, Array] });
+export default defineComponent({
+    name: 'DatePickerV2',
+    props: datePickerV2Props,
+    setup(props) {
+        var _a;
+        const { localeRef, dateLocaleRef } = useLocale('DatePicker');
+        const formItem = useFormItem(props);
+        const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
+        const { mergedClsPrefixRef, mergedBorderedRef, namespaceRef, inlineThemeDisabled } = useConfig(props);
+        const triggerElRef = ref(null);
+        const inputInstRef = ref(null);
+        const panelRef = ref(null);
+        const uncontrolledShowRef = ref(false);
+        const controlledShowRef = toRef(props, 'show');
+        const mergedShowRef = useMergedState(controlledShowRef, uncontrolledShowRef);
+        const isRange = computed(() => props.type === 'daterange');
+        const dateFnsOptionsRef = computed(() => {
+            return {
+                locale: dateLocaleRef.value.locale
+            };
+        });
+        function normalizeFormat(format) {
+            return format
+                .replace(/Y{4}/g, 'yyyy')
+                .replace(/Y{2}/g, 'yy')
+                .replace(/D{2}/g, 'dd')
+                .replace(/D{1}/g, 'd');
+        }
+        const mergedFormatRef = computed(() => normalizeFormat(props.format));
+        const uncontrolledValueRef = ref((_a = props.defaultValue) !== null && _a !== void 0 ? _a : null);
+        const controlledValueRef = toRef(props, 'value');
+        const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
+        // Состояние панели календаря
+        const now = Date.now();
+        const initialDate = computed(() => {
+            const value = mergedValueRef.value;
+            if (value === null || value === undefined)
+                return now;
+            return Array.isArray(value) ? value[0] : value;
+        });
+        const displayYearRef = ref(getYear(initialDate.value));
+        const displayMonthRef = ref(getMonth(initialDate.value));
+        const showYearDropdownRef = ref(false);
+        const singleInputValueRef = ref('');
+        const rangeStartInputValueRef = ref('');
+        const rangeEndInputValueRef = ref('');
+        const skipInputSyncRef = ref(false);
+        const rangeEditedPartRef = ref(null);
+        // Состояние для range
+        const isSelectingRef = ref(false);
+        const startDateRef = ref(null);
+        const endDateRef = ref(null);
+        const hoverDateRef = ref(null);
+        // Инициализация range из value
+        if (isRange.value && Array.isArray(mergedValueRef.value)) {
+            startDateRef.value = mergedValueRef.value[0];
+            endDateRef.value = mergedValueRef.value[1];
+        }
+        // Вычисляем текущий rangeValue для отображения (с preview)
+        const currentRangeValueRef = computed(() => {
+            var _a;
+            if (!isRange.value)
+                return null;
+            if (isSelectingRef.value && startDateRef.value !== null) {
+                // В процессе выбора - показываем preview
+                const start = startDateRef.value;
+                const end = (_a = hoverDateRef.value) !== null && _a !== void 0 ? _a : startDateRef.value;
+                return [Math.min(start, end), Math.max(start, end)];
+            }
+            if (startDateRef.value !== null && endDateRef.value !== null) {
+                return [startDateRef.value, endDateRef.value];
+            }
+            return null;
+        });
+        const singlePlaceholderRef = computed(() => {
+            var _a;
+            return (_a = props.placeholder) !== null && _a !== void 0 ? _a : localeRef.value.selectDate;
+        });
+        const startPlaceholderRef = computed(() => {
+            var _a;
+            return (_a = props.startPlaceholder) !== null && _a !== void 0 ? _a : localeRef.value.startDatePlaceholder;
+        });
+        const endPlaceholderRef = computed(() => {
+            var _a;
+            return (_a = props.endPlaceholder) !== null && _a !== void 0 ? _a : localeRef.value.endDatePlaceholder;
+        });
+        function syncInputValue(value) {
+            if (Array.isArray(value)) {
+                rangeStartInputValueRef.value =
+                    value[0] === null || value[0] === undefined
+                        ? ''
+                        : format(value[0], mergedFormatRef.value);
+                rangeEndInputValueRef.value =
+                    value[1] === null || value[1] === undefined
+                        ? ''
+                        : format(value[1], mergedFormatRef.value);
+            }
+            else {
+                singleInputValueRef.value =
+                    value === null || value === undefined
+                        ? ''
+                        : format(value, mergedFormatRef.value);
+            }
+        }
+        watch(mergedValueRef, (value) => {
+            const skipSync = skipInputSyncRef.value;
+            if (skipSync) {
+                skipInputSyncRef.value = false;
+            }
+            else {
+                syncInputValue(value);
+            }
+            if (isRange.value &&
+                Array.isArray(value) &&
+                value.length >= 2 &&
+                value[0] != null &&
+                value[1] != null) {
+                startDateRef.value = value[0];
+                endDateRef.value = value[1];
+            }
+            else if (value === null ||
+                value === undefined ||
+                !Array.isArray(value)) {
+                startDateRef.value = null;
+                endDateRef.value = null;
+            }
+            if (value === null || value === undefined)
+                return;
+            const target = Array.isArray(value)
+                ? rangeEditedPartRef.value === 'end' &&
+                    value[1] !== null &&
+                    value[1] !== undefined
+                    ? value[1]
+                    : value[0]
+                : value;
+            if (target === null || target === undefined)
+                return;
+            displayYearRef.value = getYear(target);
+            displayMonthRef.value = getMonth(target);
+            if (mergedShowRef.value) {
+                setTimeout(() => {
+                    if (panelRef.value) {
+                        if (!showYearDropdownRef.value) {
+                            panelRef.value.scrollToMonthInMonthList(displayYearRef.value, displayMonthRef.value);
+                        }
+                        panelRef.value.scrollToMonthInCalendar(displayMonthRef.value);
+                    }
+                }, 50);
+            }
+        }, { immediate: true });
+        // merged isDateDisabled для одиночного режима (type='date')
+        function mergedIsDateDisabledSingle(ts) {
+            const fn = props.isDateDisabled;
+            if (!fn)
+                return false;
+            return fn(ts);
+        }
+        // merged isDateDisabled для диапазона (type='daterange')
+        function mergedIsDateDisabledRange(ts) {
+            var _a;
+            const fn = props.isDateDisabled;
+            if (!fn)
+                return false;
+            // если передали (date) => boolean — ведём себя как в single
+            if (fn.length <= 1) {
+                return fn(ts);
+            }
+            const rangeFn = fn;
+            const mergedValue = mergedValueRef.value;
+            if (!Array.isArray(mergedValue)) {
+                return rangeFn(ts, 'start', null);
+            }
+            if (!isSelectingRef.value) {
+                // как selectingPhaseRef === 'start' в старом компоненте
+                return rangeFn(ts, 'start', null);
+            }
+            const memorizedStart = (_a = startDateRef.value) !== null && _a !== void 0 ? _a : mergedValue[0];
+            if (memorizedStart == null) {
+                return rangeFn(ts, 'start', null);
+            }
+            if (ts < memorizedStart) {
+                return rangeFn(ts, 'start', [memorizedStart, memorizedStart]);
+            }
+            return rangeFn(ts, 'end', [memorizedStart, memorizedStart]);
+        }
+        const displayValueRef = computed(() => {
+            const value = mergedValueRef.value;
+            if (value === null || value === undefined)
+                return '';
+            if (Array.isArray(value))
+                return '';
+            return format(value, mergedFormatRef.value);
+        });
+        const displayStartValueRef = computed(() => {
+            const value = mergedValueRef.value;
+            if (!Array.isArray(value) || value === null || value === undefined) {
+                return '';
+            }
+            return format(value[0], mergedFormatRef.value);
+        });
+        const displayEndValueRef = computed(() => {
+            const value = mergedValueRef.value;
+            if (!Array.isArray(value) || value === null || value === undefined) {
+                return '';
+            }
+            return format(value[1], mergedFormatRef.value);
+        });
+        const triggerDisplayValueRef = computed(() => {
+            if (isRange.value) {
+                const start = displayStartValueRef.value || startPlaceholderRef.value;
+                const end = displayEndValueRef.value || endPlaceholderRef.value;
+                return `${start} — ${end}`;
+            }
+            return displayValueRef.value || singlePlaceholderRef.value;
+        });
+        const hasDisplayValueRef = computed(() => {
+            const value = mergedValueRef.value;
+            if (isRange.value) {
+                return Array.isArray(value) && (value[0] !== null || value[1] !== null);
+            }
+            return value !== null && value !== undefined;
+        });
+        const themeRef = useTheme('DatePickerV2', '-date-picker-v2', style, datePickerV2Light, props, mergedClsPrefixRef);
+        provide(datePickerV2InjectionKey, {
+            mergedClsPrefixRef,
+            mergedThemeRef: themeRef,
+            localeRef,
+            dateLocaleRef,
+            isDateDisabledRef: toRef(props, 'isDateDisabled')
+        });
+        function doUpdateShow(show) {
+            const { 'onUpdate:show': _onUpdateShow, onUpdateShow } = props;
+            if (_onUpdateShow)
+                call(_onUpdateShow, show);
+            if (onUpdateShow)
+                call(onUpdateShow, show);
+            uncontrolledShowRef.value = show;
+        }
+        function doUpdateValue(value) {
+            const { 'onUpdate:value': _onUpdateValue, onUpdateValue } = props;
+            const { triggerFormChange, triggerFormInput } = formItem;
+            if (_onUpdateValue)
+                call(_onUpdateValue, value);
+            if (onUpdateValue)
+                call(onUpdateValue, value);
+            uncontrolledValueRef.value = value;
+            triggerFormChange();
+            triggerFormInput();
+        }
+        function doFocus(e) {
+            const { onFocus } = props;
+            const { triggerFormFocus } = formItem;
+            if (onFocus)
+                call(onFocus, e);
+            triggerFormFocus();
+        }
+        function doBlur(e) {
+            const { onBlur } = props;
+            const { triggerFormBlur } = formItem;
+            if (onBlur)
+                call(onBlur, e);
+            triggerFormBlur();
+        }
+        function handleTriggerClick() {
+            if (mergedDisabledRef.value)
+                return;
+            if (!mergedShowRef.value) {
+                doUpdateShow(true);
+            }
+        }
+        function handleInputFocus(e) {
+            if (mergedDisabledRef.value)
+                return;
+            doFocus(e);
+        }
+        function handleInputBlur(e) {
+            doBlur(e);
+        }
+        function handleClickOutside(e) {
+            var _a;
+            if (mergedShowRef.value &&
+                !((_a = triggerElRef.value) === null || _a === void 0 ? void 0 : _a.contains(getPreciseEventTarget(e)))) {
+                doUpdateShow(false);
+            }
+        }
+        function handleClear() {
+            doUpdateValue(null);
+            doUpdateShow(false);
+            singleInputValueRef.value = '';
+            rangeStartInputValueRef.value = '';
+            rangeEndInputValueRef.value = '';
+            // Сброс состояния range
+            if (isRange.value) {
+                isSelectingRef.value = false;
+                startDateRef.value = null;
+                endDateRef.value = null;
+                hoverDateRef.value = null;
+            }
+        }
+        function handleSelect(value) {
+            doUpdateValue(value);
+            doUpdateShow(false);
+        }
+        function handleKeydown(e) {
+            if (e.key === 'Escape' && mergedShowRef.value) {
+                doUpdateShow(false);
+            }
+        }
+        function strictParse(string, pattern, backup, option) {
+            const result = parse(string, pattern, backup, option);
+            if (!isValid(result))
+                return result;
+            if (format(result, pattern, option) === string)
+                return result;
+            return new Date(NaN);
+        }
+        function handleSingleUpdateValue(v) {
+            singleInputValueRef.value = v;
+            if (v === '') {
+                doUpdateValue(null);
+                return;
+            }
+            const parsedDate = strictParse(v, mergedFormatRef.value, new Date(), dateFnsOptionsRef.value);
+            if (isValid(parsedDate)) {
+                skipInputSyncRef.value = true;
+                doUpdateValue(getTime(startOfDay(parsedDate)));
+            }
+            else {
+                singleInputValueRef.value = v;
+            }
+        }
+        function focusRangeInputAndMoveCursorToEnd(which) {
+            void nextTick(() => {
+                var _a;
+                const inst = inputInstRef.value;
+                const ref = which === 'start' ? inst === null || inst === void 0 ? void 0 : inst.inputElRef : inst === null || inst === void 0 ? void 0 : inst.inputEl2Ref;
+                const el = ref
+                    ? typeof ref === 'object' && ref !== null && 'value' in ref
+                        ? ref.value
+                        : ref
+                    : undefined;
+                if (el === null || el === void 0 ? void 0 : el.focus) {
+                    el.focus();
+                    const len = (el.value || '').length;
+                    (_a = el.setSelectionRange) === null || _a === void 0 ? void 0 : _a.call(el, len, len);
+                }
+            });
+        }
+        function handleRangeUpdateValue(v) {
+            const prevStart = rangeStartInputValueRef.value;
+            const prevEnd = rangeEndInputValueRef.value;
+            if (v[0] === '' && v[1] === '') {
+                doUpdateValue(null);
+                rangeStartInputValueRef.value = '';
+                rangeEndInputValueRef.value = '';
+                return;
+            }
+            const [startStr, endStr] = v;
+            const startDate = strictParse(startStr, mergedFormatRef.value, new Date(), dateFnsOptionsRef.value);
+            const endDate = strictParse(endStr, mergedFormatRef.value, new Date(), dateFnsOptionsRef.value);
+            const startValid = isValid(startDate);
+            const endValid = isValid(endDate);
+            const changedStart = startStr !== prevStart;
+            const changedEnd = endStr !== prevEnd;
+            if (changedStart)
+                rangeEditedPartRef.value = 'start';
+            if (changedEnd)
+                rangeEditedPartRef.value = 'end';
+            const startTs = startValid ? getTime(startOfDay(startDate)) : 0;
+            const endTs = endValid ? getTime(startOfDay(endDate)) : 0;
+            const rangeInvalid = startValid && endValid && endTs < startTs;
+            if (changedEnd && endValid && !rangeInvalid) {
+                displayYearRef.value = getYear(endTs);
+                displayMonthRef.value = getMonth(endTs);
+            }
+            else if (changedStart && startValid && !rangeInvalid) {
+                displayYearRef.value = getYear(startTs);
+                displayMonthRef.value = getMonth(startTs);
+            }
+            if (startValid && endValid && !rangeInvalid) {
+                ;
+                [rangeStartInputValueRef.value, rangeEndInputValueRef.value] = v;
+                skipInputSyncRef.value = true;
+                doUpdateValue([startTs, endTs]);
+                if (mergedShowRef.value) {
+                    setTimeout(() => {
+                        if (panelRef.value) {
+                            if (!showYearDropdownRef.value) {
+                                panelRef.value.scrollToMonthInMonthList(displayYearRef.value, displayMonthRef.value);
+                            }
+                            panelRef.value.scrollToMonthInCalendar(displayMonthRef.value);
+                        }
+                    }, 50);
+                }
+            }
+            else if (rangeInvalid) {
+                const currentValue = mergedValueRef.value;
+                const restoredStart = Array.isArray(currentValue) && currentValue[0] != null
+                    ? format(currentValue[0], mergedFormatRef.value)
+                    : '';
+                const restoredEnd = Array.isArray(currentValue) && currentValue[1] != null
+                    ? format(currentValue[1], mergedFormatRef.value)
+                    : '';
+                if (changedEnd) {
+                    rangeEndInputValueRef.value = restoredEnd;
+                    rangeStartInputValueRef.value = startStr;
+                    focusRangeInputAndMoveCursorToEnd('end');
+                }
+                else {
+                    rangeStartInputValueRef.value = restoredStart;
+                    rangeEndInputValueRef.value = endStr;
+                    focusRangeInputAndMoveCursorToEnd('start');
+                }
+            }
+            else {
+                ;
+                [rangeStartInputValueRef.value, rangeEndInputValueRef.value] = v;
+            }
+        }
+        // Обработчик ввода в инпут
+        function handleInputUpdateValue(value) {
+            if (isRange.value) {
+                if (!Array.isArray(value))
+                    return;
+                handleRangeUpdateValue(value);
+            }
+            else {
+                if (typeof value !== 'string')
+                    return;
+                handleSingleUpdateValue(value);
+            }
+        }
+        // Обработчики для панели календаря
+        function handleDateClick(ts) {
+            // Не даём кликать по disabled датам (учитываем single/range логику)
+            if (isRange.value) {
+                if (mergedIsDateDisabledRange(ts))
+                    return;
+                // Логика для range
+                const normalizedTs = getTime(startOfDay(ts));
+                if (!isSelectingRef.value) {
+                    // Первый клик - начинаем выбор
+                    isSelectingRef.value = true;
+                    startDateRef.value = normalizedTs;
+                    endDateRef.value = null;
+                    hoverDateRef.value = null;
+                }
+                else {
+                    // Второй клик - завершаем выбор
+                    isSelectingRef.value = false;
+                    const start = startDateRef.value;
+                    if (start === null)
+                        return;
+                    const end = normalizedTs;
+                    // Устанавливаем правильный порядок
+                    if (start <= end) {
+                        startDateRef.value = start;
+                        endDateRef.value = end;
+                    }
+                    else {
+                        startDateRef.value = end;
+                        endDateRef.value = start;
+                    }
+                    hoverDateRef.value = null;
+                    // Обновляем значение и закрываем
+                    if (startDateRef.value !== null && endDateRef.value !== null) {
+                        rangeEditedPartRef.value = 'end';
+                        handleSelect([startDateRef.value, endDateRef.value]);
+                    }
+                }
+            }
+            else {
+                if (mergedIsDateDisabledSingle(ts))
+                    return;
+                // Логика для single date
+                handleSelect(ts);
+            }
+        }
+        function handleDateMouseEnter(ts) {
+            if (isRange.value && isSelectingRef.value) {
+                hoverDateRef.value = getTime(startOfDay(ts));
+            }
+        }
+        function handleMonthSelect(year, month) {
+            displayYearRef.value = year;
+            displayMonthRef.value = month;
+            // Скроллим к выбранному месяцу в календаре (ждём пока DOM обновится после смены года)
+            setTimeout(() => {
+                if (panelRef.value) {
+                    panelRef.value.scrollToMonthInCalendar(month);
+                }
+            }, 50);
+        }
+        function handleYearSelect(year) {
+            displayYearRef.value = year;
+            showYearDropdownRef.value = false;
+            // После закрытия dropdown нужно проскроллить к выбранному году и месяцу
+            setTimeout(() => {
+                if (panelRef.value) {
+                    panelRef.value.scrollToMonthInMonthList(year, displayMonthRef.value);
+                    panelRef.value.scrollToMonthInCalendar(displayMonthRef.value);
+                }
+            }, 50);
+        }
+        function handleToggleYearDropdown() {
+            showYearDropdownRef.value = !showYearDropdownRef.value;
+            // При открытии dropdown скроллим к текущему году
+            setTimeout(() => {
+                if (panelRef.value) {
+                    panelRef.value.scrollToYear(displayYearRef.value);
+                    panelRef.value.scrollToMonthInMonthList(displayYearRef.value, displayMonthRef.value);
+                }
+            }, 50);
+        }
+        function handleMonthScroll(year) {
+            displayYearRef.value = year;
+        }
+        // Watch для открытия панели - скроллим к выбранному году и месяцу
+        watch(mergedShowRef, (newShow) => {
+            if (newShow) {
+                // Обновляем displayYear и displayMonth из выбранной даты (или текущей)
+                const targetDate = initialDate.value;
+                displayYearRef.value = getYear(targetDate);
+                displayMonthRef.value = getMonth(targetDate);
+                // Используем setTimeout чтобы дать время панели отрендериться
+                setTimeout(() => {
+                    if (panelRef.value) {
+                        // Скроллим к месяцу в списке месяцев (левая колонка)
+                        if (!showYearDropdownRef.value) {
+                            panelRef.value.scrollToMonthInMonthList(displayYearRef.value, displayMonthRef.value);
+                        }
+                        // Скроллим к месяцу в календаре (правая колонка - только 12 месяцев)
+                        panelRef.value.scrollToMonthInCalendar(displayMonthRef.value);
+                    }
+                }, 50);
+            }
+        });
+        const cssVarsRef = computed(() => {
+            const theme = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { panelColor, panelBoxShadow, panelBorderRadius, panelTextColor, dividerColor, itemTextColor, itemTextColorOtherMonth, itemTextColorDisabled, itemColorHover, itemColorActive, itemTextColorActive, itemColorIncluded, itemBorderRadius, iconColor, iconColorDisabled, weekdayTextColor, weekendTextColor, monthItemHeight, monthItemColorHover, monthItemColorActive, monthItemTextColorActive, yearTriggerColor, yearTriggerColorHover, yearTriggerTextColor, currentDateIndicatorColor } } = theme;
+            return {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-panel-color': panelColor,
+                '--u-panel-box-shadow': panelBoxShadow,
+                '--u-panel-border-radius': panelBorderRadius,
+                '--u-panel-text-color': panelTextColor,
+                '--u-divider-color': dividerColor,
+                '--u-item-text-color': itemTextColor,
+                '--u-item-text-color-other-month': itemTextColorOtherMonth,
+                '--u-item-text-color-disabled': itemTextColorDisabled,
+                '--u-item-color-hover': itemColorHover,
+                '--u-item-color-active': itemColorActive,
+                '--u-item-text-color-active': itemTextColorActive,
+                '--u-item-color-included': itemColorIncluded,
+                '--u-item-border-radius': itemBorderRadius,
+                '--u-icon-color': iconColor,
+                '--u-icon-color-disabled': iconColorDisabled,
+                '--u-weekday-text-color': weekdayTextColor,
+                '--u-weekend-text-color': weekendTextColor,
+                '--u-month-item-height': monthItemHeight,
+                '--u-month-item-color-hover': monthItemColorHover,
+                '--u-month-item-color-active': monthItemColorActive,
+                '--u-month-item-text-color-active': monthItemTextColorActive,
+                '--u-year-trigger-color': yearTriggerColor,
+                '--u-year-trigger-color-hover': yearTriggerColorHover,
+                '--u-year-trigger-text-color': yearTriggerTextColor,
+                '--u-current-date-indicator-color': currentDateIndicatorColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('date-picker-v2', undefined, cssVarsRef, props)
+            : undefined;
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            mergedBordered: mergedBorderedRef,
+            mergedDisabled: mergedDisabledRef,
+            mergedStatus: mergedStatusRef,
+            mergedSize: mergedSizeRef,
+            mergedShow: mergedShowRef,
+            mergedValue: mergedValueRef,
+            isRange,
+            displayValue: displayValueRef,
+            displayStartValue: displayStartValueRef,
+            displayEndValue: displayEndValueRef,
+            namespace: namespaceRef,
+            adjustedTo: useAdjustedTo(props),
+            isMounted: useIsMounted(),
+            triggerElRef,
+            inputInstRef,
+            panelRef,
+            mergedTheme: themeRef,
+            displayYear: displayYearRef,
+            displayMonth: displayMonthRef,
+            showYearDropdown: showYearDropdownRef,
+            currentRangeValue: currentRangeValueRef,
+            isSelecting: isSelectingRef,
+            handleTriggerClick,
+            handleInputFocus,
+            handleInputBlur,
+            handleClickOutside,
+            handleClear,
+            handleSelect,
+            handleKeydown,
+            handleInputUpdateValue,
+            handleSingleUpdateValue,
+            handleRangeUpdateValue,
+            handleDateClick,
+            handleDateMouseEnter,
+            handleMonthSelect,
+            handleYearSelect,
+            handleToggleYearDropdown,
+            handleMonthScroll,
+            mergedIsDateDisabledSingle,
+            mergedIsDateDisabledRange,
+            triggerDisplayValue: triggerDisplayValueRef,
+            hasDisplayValue: hasDisplayValueRef,
+            singlePlaceholder: singlePlaceholderRef,
+            startPlaceholder: startPlaceholderRef,
+            endPlaceholder: endPlaceholderRef,
+            singleInputValue: singleInputValueRef,
+            rangeStartInputValue: rangeStartInputValueRef,
+            rangeEndInputValue: rangeEndInputValueRef,
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+        };
+    },
+    render() {
+        var _a;
+        const { mergedClsPrefix, clearable, isRange } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        const commonInputProps = {
+            bordered: this.mergedBordered,
+            round: this.round,
+            size: this.mergedSize,
+            passivelyActivated: true,
+            disabled: this.mergedDisabled,
+            readonly: this.inputReadonly || this.mergedDisabled,
+            clearable,
+            onClear: this.handleClear,
+            onClick: this.handleTriggerClick,
+            onFocus: this.handleInputFocus,
+            onBlur: this.handleInputBlur,
+            onUpdateValue: this.handleInputUpdateValue
+        };
+        return (h("div", { ref: "triggerElRef", class: [
+                `${mergedClsPrefix}-date-picker-v2`,
+                this.mergedDisabled && `${mergedClsPrefix}-date-picker-v2--disabled`,
+                isRange && `${mergedClsPrefix}-date-picker-v2--range`,
+                this.themeClass
+            ], style: this.cssVars, onKeydown: this.handleKeydown },
+            h(VBinder, null, {
+                default: () => [
+                    h(VTarget, null, {
+                        default: () => {
+                            var _a, _b, _c, _d, _e, _f, _g, _h;
+                            if (this.$slots.trigger) {
+                                return this.$slots.trigger({
+                                    open: this.handleTriggerClick,
+                                    value: this.triggerDisplayValue
+                                });
+                            }
+                            if (this.triggerPreset === 'select') {
+                                return (h(UInternalSelection, { ref: "inputInstRef", selectedOption: this.hasDisplayValue
+                                        ? {
+                                            label: this.triggerDisplayValue,
+                                            value: this.triggerDisplayValue
+                                        }
+                                        : null, round: this.round, status: this.mergedStatus, clsPrefix: mergedClsPrefix, bordered: this.mergedBordered, size: this.mergedSize, theme: (_b = (_a = this.mergedTheme) === null || _a === void 0 ? void 0 : _a.peers) === null || _b === void 0 ? void 0 : _b.Select, themeOverrides: (_d = (_c = this.mergedTheme) === null || _c === void 0 ? void 0 : _c.peerOverrides) === null || _d === void 0 ? void 0 : _d.Select, placeholder: isRange
+                                        ? `${this.startPlaceholder} — ${this.endPlaceholder}`
+                                        : this.singlePlaceholder, active: this.mergedShow, clearable: this.clearable, disabled: this.mergedDisabled, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onClick: this.handleTriggerClick, onClear: this.handleClear }, {
+                                    arrow: () => { var _a, _b; return (_b = (_a = this.$slots).arrow) === null || _b === void 0 ? void 0 : _b.call(_a); }
+                                }));
+                            }
+                            if (this.triggerPreset === 'button') {
+                                return (h(UButton, { round: this.round, size: this.mergedSize, theme: (_f = (_e = this.mergedTheme) === null || _e === void 0 ? void 0 : _e.peers) === null || _f === void 0 ? void 0 : _f.Button, themeOverrides: (_h = (_g = this.mergedTheme) === null || _g === void 0 ? void 0 : _g.peerOverrides) === null || _h === void 0 ? void 0 : _h.Button, onClick: this.handleTriggerClick }, this.triggerDisplayValue));
+                            }
+                            return isRange ? (h(UInput, Object.assign({ ref: "inputInstRef", status: this.mergedStatus, value: [
+                                    this.rangeStartInputValue,
+                                    this.rangeEndInputValue
+                                ], placeholder: [
+                                    this.startPlaceholder,
+                                    this.endPlaceholder
+                                ], pair: true, theme: this.mergedTheme.peers.Input, themeOverrides: this.mergedTheme.peerOverrides.Input, internalForceFocus: this.mergedShow }, commonInputProps), {
+                                separator: () => this.separator === undefined ? (h("span", { class: `${mergedClsPrefix}-date-picker-v2__separator` }, "\u2014")) : (this.separator),
+                                [clearable ? 'clear-icon-placeholder' : 'suffix']: () => (h(UBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-date-picker-v2-icon` }, { default: () => h(DateIcon, null) }))
+                            })) : (h(UInput, Object.assign({ ref: "inputInstRef", status: this.mergedStatus, value: this.singleInputValue, placeholder: this.singlePlaceholder, theme: this.mergedTheme.peers.Input, themeOverrides: this.mergedTheme.peerOverrides.Input, internalForceFocus: this.mergedShow }, commonInputProps), {
+                                [clearable ? 'clear-icon-placeholder' : 'suffix']: () => (h(UBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-date-picker-v2-icon` }, { default: () => h(DateIcon, null) }))
+                            }));
+                        }
+                    }),
+                    h(VFollower, { show: this.mergedShow, containerClass: this.namespace, to: this.adjustedTo, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, placement: this.placement }, {
+                        default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
+                            default: () => {
+                                if (!this.mergedShow)
+                                    return null;
+                                return withDirectives(isRange ? (h(CalendarRangePanel, { ref: "panelRef", value: this.currentRangeValue, displayYear: this.displayYear, displayMonth: this.displayMonth, showYearDropdown: this.showYearDropdown, isSelecting: this.isSelecting, isDateDisabled: this.mergedIsDateDisabledRange, onDateClick: this.handleDateClick, onDateMouseEnter: this.handleDateMouseEnter, onMonthSelect: this.handleMonthSelect, onYearSelect: this.handleYearSelect, onToggleYearDropdown: this.handleToggleYearDropdown, onMonthScroll: this.handleMonthScroll, style: this.cssVars, themeClass: this.themeClass })) : (h(CalendarPanel, { ref: "panelRef", value: this.mergedValue, displayYear: this.displayYear, displayMonth: this.displayMonth, showYearDropdown: this.showYearDropdown, isDateDisabled: this.mergedIsDateDisabledSingle, onDateClick: this.handleDateClick, onMonthSelect: this.handleMonthSelect, onYearSelect: this.handleYearSelect, onToggleYearDropdown: this.handleToggleYearDropdown, onMonthScroll: this.handleMonthScroll, style: this.cssVars, themeClass: this.themeClass })), [
+                                    [
+                                        clickoutside,
+                                        this.handleClickOutside,
+                                        undefined,
+                                        { capture: true }
+                                    ]
+                                ]);
+                            }
+                        }))
+                    })
+                ]
+            })));
+    }
+});