bge-ui 1.3.4 → 1.3.6

package/src/datePicker/composables/external-internal-mapper.ts

@@ -0,0 +1,442 @@
+import { ref, toRef, watch } from 'vue';
+import { addHours, format, getHours, getMinutes, getMonth, getSeconds, getYear, parse, set, setYear } from 'date-fns';
+
+import {
+    checkPartialRangeValue,
+    checkRangeEnabled,
+    dateToUtc,
+    formatDate,
+    getDate,
+    getWeekFromDate,
+    isValidDate,
+    setDateMonthOrYear,
+    setDateTime,
+} from '../utils/date-utils';
+import { convertType, errors } from '../utils/util';
+import { useDefaults } from '../composables/defaults';
+
+import type { ModelValue, VueEmit, TimeModel, MonthModel, ModelTypeConverted } from '../interfaces';
+import type { AllPropsType } from '../props';
+import type { Ref } from 'vue';
+import { getTimezoneOffset, localToTz } from '../utils/timezone';
+import { modelTypePredefined } from '../constants';
+
+/**
+ * Handles values from external to internal and vise versa
+ */
+export const useExternalInternalMapper = (emit: VueEmit, props: AllPropsType, isInputFocused: Ref<boolean>) => {
+    const internalModelValue = ref();
+
+    const { defaultedTextInput, defaultedRange, defaultedTz, defaultedMultiDates, getDefaultPattern } =
+        useDefaults(props);
+
+    const inputValue = ref('');
+    const formatRef = toRef(props, 'format');
+    const formatLocale = toRef(props, 'formatLocale');
+
+    watch(
+        internalModelValue,
+        () => {
+            if (typeof props.onInternalModelChange === 'function') {
+                emit('internal-model-change', internalModelValue.value, emitModelValue(true));
+            }
+        },
+        { deep: true },
+    );
+
+    watch(defaultedRange, (newVal, oldVal) => {
+        if (newVal.enabled !== oldVal.enabled) {
+            internalModelValue.value = null;
+        }
+    });
+
+    watch(formatRef, () => {
+        formatInputValue();
+    });
+
+    const convertModelToTz = (date: Date) => {
+        if (defaultedTz.value.timezone && defaultedTz.value.convertModel) {
+            return localToTz(date, defaultedTz.value.timezone);
+        }
+        return date;
+    };
+
+    const convertZonedModelToLocal = (date: Date) => {
+        if (defaultedTz.value.timezone && defaultedTz.value.convertModel) {
+            const offset = getTimezoneOffset(defaultedTz.value.timezone);
+            return addHours(date, offset);
+        }
+        return date;
+    };
+
+    const formatDateFn = (value: Date | Date[], customPattern?: string, parser = false) => {
+        return formatDate(
+            value,
+            props.format,
+            props.formatLocale,
+            defaultedTextInput.value.rangeSeparator,
+            props.modelAuto,
+            customPattern ?? getDefaultPattern(),
+            parser,
+        );
+    };
+
+    const getTimeVal = (date?: Date): TimeModel | ModelTypeConverted | null => {
+        if (!date) return null;
+        if (props.modelType) return toModelType(date);
+        return {
+            hours: getHours(date),
+            minutes: getMinutes(date),
+            seconds: props.enableSeconds ? getSeconds(date) : 0,
+        };
+    };
+
+    const getMonthVal = (date: Date): MonthModel | ModelTypeConverted => {
+        if (props.modelType) return toModelType(date);
+        return { month: getMonth(date), year: getYear(date) };
+    };
+
+    const mapYearExternalToInternal = (value: number | number[]): Date | Date[] => {
+        if (Array.isArray(value)) {
+            if (defaultedMultiDates.value.enabled) {
+                return value.map((val) => convertCustomModeType(val, setYear(getDate(), val)));
+            }
+            return checkRangeEnabled(
+                () => [
+                    setYear(getDate(), value[0]),
+                    value[1] ? setYear(getDate(), value[1]) : checkPartialRangeValue(defaultedRange.value.partialRange),
+                ],
+                defaultedRange.value.enabled,
+            );
+        }
+        return setYear(getDate(), +value);
+    };
+
+    const convertCustomModeType = (value: unknown, defaultValue: Date): Date => {
+        const shouldConvert = (typeof value === 'string' || typeof value === 'number') && props.modelType;
+        if (shouldConvert) return parseModelType(value);
+        return defaultValue;
+    };
+
+    const mapTimeExternalToInternal = (value: TimeModel | TimeModel[]): Date | Date[] => {
+        // Unlike in other modes, partial range is not supported here, since the time needs to be defined on both time inputs
+        if (Array.isArray(value)) {
+            return [
+                convertCustomModeType(
+                    value[0],
+                    setDateTime(null, +value[0].hours, +value[0].minutes, value[0].seconds),
+                ),
+                convertCustomModeType(
+                    value[1],
+                    setDateTime(null, +value[1].hours, +value[1].minutes, value[1].seconds),
+                ),
+            ];
+        }
+        return convertCustomModeType(value, setDateTime(null, value.hours, value.minutes, value.seconds));
+    };
+
+    const mapMonthExternalToInternal = (value: MonthModel | MonthModel[]): Date | Date[] => {
+        const today = set(getDate(), { date: 1 });
+        if (Array.isArray(value)) {
+            if (defaultedMultiDates.value.enabled) {
+                return value.map((val) => convertCustomModeType(val, setDateMonthOrYear(today, +val.month, +val.year)));
+            }
+            return checkRangeEnabled(
+                () => [
+                    convertCustomModeType(value[0], setDateMonthOrYear(today, +value[0].month, +value[0].year)),
+                    convertCustomModeType(
+                        value[1],
+                        value[1]
+                            ? setDateMonthOrYear(today, +value[1].month, +value[1].year)
+                            : checkPartialRangeValue(defaultedRange.value.partialRange),
+                    ),
+                ],
+                defaultedRange.value.enabled,
+            );
+        }
+        return convertCustomModeType(value, setDateMonthOrYear(today, +value.month, +value.year));
+    };
+
+    // Map external multi dates format to internal model value
+    const mapMultiDateExternalToInternal = (value: Date[] | string[]) => {
+        if (Array.isArray(value)) {
+            return value.map((date) => parseModelType(date));
+        }
+        throw new Error(errors.dateArr('multi-dates'));
+    };
+
+    // Map external week picker format to internal model value
+    const mapWeekExternalToInternal = (value: Date[]) => {
+        if (Array.isArray(value) && defaultedRange.value.enabled) {
+            const startWeek = value[0];
+            const endWeek = value[1];
+            return [
+                getDate(Array.isArray(startWeek) ? startWeek[0] : null),
+                getDate(Array.isArray(endWeek) ? endWeek[0] : null),
+            ];
+        }
+        return getDate(value[0]);
+    };
+
+    // Map external format to internal model value for range and single picker
+    const mapDateExternalToInternal = (value: Date | Date[]) => {
+        if (props.modelAuto) {
+            if (Array.isArray(value)) return [parseModelType(value[0]), parseModelType(value[1])];
+            // In case of auto-apply, if we add null, it will never select range
+            return props.autoApply ? [parseModelType(value)] : [parseModelType(value), null];
+        }
+        if (Array.isArray(value)) {
+            return checkRangeEnabled(
+                () =>
+                    value[1]
+                        ? [
+                              parseModelType(value[0]),
+                              value[1]
+                                  ? parseModelType(value[1])
+                                  : checkPartialRangeValue(defaultedRange.value.partialRange),
+                          ]
+                        : [parseModelType(value[0])],
+                defaultedRange.value.enabled,
+            );
+        }
+        return parseModelType(value);
+    };
+
+    /**
+     * When emitting value back to host, if partial date is enabled and second value is not selected
+     * auto add 'null' value as second value
+     */
+    const sanitizeModelValue = () => {
+        if (
+            Array.isArray(internalModelValue.value) &&
+            defaultedRange.value.enabled &&
+            internalModelValue.value.length === 1
+        ) {
+            internalModelValue.value.push(checkPartialRangeValue(defaultedRange.value.partialRange));
+        }
+    };
+
+    // Shared method, create mapped array of dates to emit
+    const getRangeEmitValue = (): Date[] => {
+        const modelValue = internalModelValue.value as Date[];
+        return [
+            toModelType(modelValue[0]),
+            modelValue[1] ? toModelType(modelValue[1]) : checkPartialRangeValue(defaultedRange.value.partialRange),
+        ] as Date[];
+    };
+
+    // Get value for model-auto, single or array, internally it is always handled as an array
+    const getModelAutoForExternal = () =>
+        (internalModelValue.value as Date[])[1]
+            ? getRangeEmitValue()
+            : toModelType(convertType(internalModelValue.value[0]));
+
+    // Map internal value for external
+    const getMultiDatesForExternal = () =>
+        ((internalModelValue.value as Date[]) || []).map((date) => toModelType(date) as string);
+
+    // Parent internal to external function mapper that will return proper date format based on provided config
+    const mapInternalDatesToExternal = (noSanitize: boolean = false) => {
+        if (!noSanitize) {
+            sanitizeModelValue();
+        }
+        if (props.modelAuto) return getModelAutoForExternal();
+        if (defaultedMultiDates.value.enabled) return getMultiDatesForExternal();
+        if (Array.isArray(internalModelValue.value)) {
+            return checkRangeEnabled(() => getRangeEmitValue(), defaultedRange.value.enabled);
+        }
+        return toModelType(convertType(internalModelValue.value));
+    };
+
+    const mapExternalToInternal = (value: ModelValue) => {
+        if (!value || (Array.isArray(value) && !value.length)) return null;
+        if (props.timePicker) return mapTimeExternalToInternal(convertType(value));
+        if (props.monthPicker) return mapMonthExternalToInternal(convertType(value));
+        if (props.yearPicker) return mapYearExternalToInternal(convertType(value));
+        if (defaultedMultiDates.value.enabled) return mapMultiDateExternalToInternal(convertType(value));
+        if (props.weekPicker) return mapWeekExternalToInternal(convertType(value));
+        return mapDateExternalToInternal(convertType(value));
+    };
+
+    /**
+     * Map external values to dates that will be used internally by the datepicker
+     * Also does the validation of the provided value, if invalid it will use null as a default or an empty value
+     */
+    const parseExternalModelValue = (value: ModelValue): void => {
+        const mappedDate = mapExternalToInternal(value);
+        if (isValidDate(convertType(mappedDate))) {
+            internalModelValue.value = convertType(mappedDate);
+            formatInputValue();
+        } else {
+            internalModelValue.value = null;
+            inputValue.value = '';
+        }
+    };
+
+    const formatRangeTextInput = () => {
+        const formatter = (value: Date) => format(value, defaultedTextInput.value.format as string);
+        return `${formatter(internalModelValue.value[0])} ${defaultedTextInput.value.rangeSeparator} ${
+            internalModelValue.value[1] ? formatter(internalModelValue.value[1]) : ''
+        }`;
+    };
+
+    // If text input format is enabled, on input focus, set the text to the given format
+    const formatForTextInput = () => {
+        if (isInputFocused.value && internalModelValue.value) {
+            if (Array.isArray(internalModelValue.value)) return formatRangeTextInput();
+            return format(internalModelValue.value, defaultedTextInput.value.format as string);
+        }
+        return formatDateFn(internalModelValue.value);
+    };
+
+    // Get proper input value depending on the mode
+    const getInputValue = (): string => {
+        if (!internalModelValue.value) return '';
+        if (defaultedMultiDates.value.enabled)
+            return (internalModelValue.value as Date[]).map((date) => formatDateFn(date)).join('; ');
+        if (defaultedTextInput.value.enabled && typeof defaultedTextInput.value.format === 'string')
+            return formatForTextInput();
+        return formatDateFn(internalModelValue.value);
+    };
+
+    /**
+     * Map the date value(s) to the human-readable text for the input field
+     */
+    const formatInputValue = (): void => {
+        if (
+            !props.format ||
+            typeof props.format === 'string' ||
+            (defaultedTextInput.value.enabled && typeof defaultedTextInput.value.format === 'string')
+        ) {
+            inputValue.value = getInputValue();
+        } else {
+            inputValue.value = props.format(internalModelValue.value);
+        }
+    };
+
+    const parseModelType = (value: string | number | Date): Date => {
+        if (props.utc) {
+            const toDate = new Date(value);
+            return props.utc === 'preserve' ? new Date(toDate.getTime() + toDate.getTimezoneOffset() * 60000) : toDate;
+        }
+        if (props.modelType) {
+            if (modelTypePredefined.includes(props.modelType)) return convertModelToTz(new Date(value));
+
+            if (props.modelType === 'format' && (typeof props.format === 'string' || !props.format))
+                return convertModelToTz(
+                    parse(value as string, getDefaultPattern(), new Date(), { locale: formatLocale.value }),
+                );
+
+            return convertModelToTz(
+                parse(value as string, props.modelType, new Date(), { locale: formatLocale.value }),
+            );
+        }
+
+        return convertModelToTz(new Date(value));
+    };
+
+    const toModelType = (val: Date): string | number | Date => {
+        if (!val) return '';
+        if (props.utc) {
+            return dateToUtc(val, props.utc === 'preserve', props.enableSeconds);
+        }
+        if (props.modelType) {
+            if (props.modelType === 'timestamp') return +convertZonedModelToLocal(val);
+            if (props.modelType === 'iso') return convertZonedModelToLocal(val).toISOString();
+
+            if (props.modelType === 'format' && (typeof props.format === 'string' || !props.format))
+                return formatDateFn(convertZonedModelToLocal(val));
+
+            return formatDateFn(convertZonedModelToLocal(val), props.modelType, true);
+        }
+        return convertZonedModelToLocal(val);
+    };
+
+    const emitValue = (value: ModelValue, useTz = false, returnOnly = false) => {
+        if (returnOnly) return value;
+        emit('update:model-value', value);
+        if (defaultedTz.value.emitTimezone && useTz) {
+            const zonedValue = Array.isArray(value)
+                ? value.map((date) => localToTz(convertType(date), defaultedTz.value.emitTimezone))
+                : localToTz(convertType(value), defaultedTz.value.emitTimezone);
+            emit('update:model-timezone-value', zonedValue);
+        }
+    };
+
+    /**
+     * Shared code between modes that support range and partial range
+     * Maps the internal model-value into appropriate output
+     */
+    const mapInternalToSpecificExternal = <T extends (val: Date) => ReturnType<T> | ReturnType<T>[]>(mapper: T) => {
+        if (Array.isArray(internalModelValue.value)) {
+            if (defaultedMultiDates.value.enabled) {
+                return internalModelValue.value.map((value) => mapper(value));
+            }
+            return [
+                mapper(internalModelValue.value[0]),
+                internalModelValue.value[1]
+                    ? mapper(internalModelValue.value[1])
+                    : checkPartialRangeValue(defaultedRange.value.partialRange),
+            ];
+        }
+        return mapper(convertType(internalModelValue.value));
+    };
+
+    const mapInternalWeekPickerToExternal = () => {
+        if (Array.isArray(internalModelValue.value)) {
+            const startWeek = getWeekFromDate(internalModelValue.value[0], props.weekStart);
+            const endWeek = internalModelValue.value[1]
+                ? getWeekFromDate(internalModelValue.value[1], props.weekStart)
+                : [];
+            return [startWeek.map((date) => getDate(date)), endWeek.map((date) => getDate(date))];
+        }
+        return getWeekFromDate(internalModelValue.value, props.weekStart).map((date) => getDate(date));
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const modeEmitter = (mapper: any, returnOnly: boolean) =>
+        emitValue(convertType(mapInternalToSpecificExternal(mapper)), false, returnOnly);
+
+    const emitWeekPicker = (returnOnly: boolean) => {
+        const value = mapInternalWeekPickerToExternal();
+        if (returnOnly) return value;
+        return emit('update:model-value', mapInternalWeekPickerToExternal());
+    };
+
+    /**
+     * When date is selected, emit event to update modelValue on external,
+     * and format input value
+     */
+    const emitModelValue = (returnOnly: boolean = false) => {
+        if (!returnOnly) {
+            formatInputValue();
+        }
+
+        if (props.monthPicker) return modeEmitter(getMonthVal, returnOnly);
+        if (props.timePicker) return modeEmitter(getTimeVal, returnOnly);
+        if (props.yearPicker) return modeEmitter(getYear, returnOnly);
+        if (props.weekPicker) return emitWeekPicker(returnOnly);
+        return emitValue(mapInternalDatesToExternal(returnOnly), true, returnOnly);
+    };
+
+    // Check if there is any selection before emitting value, to prevent null setting
+    const checkBeforeEmit = (): boolean => {
+        if (internalModelValue.value) {
+            if (defaultedRange.value.enabled) {
+                if (defaultedRange.value.partialRange) return internalModelValue.value.length >= 1;
+                return internalModelValue.value.length === 2;
+            }
+            return !!internalModelValue.value;
+        }
+        return false;
+    };
+
+    return {
+        inputValue,
+        internalModelValue,
+        checkBeforeEmit,
+        parseExternalModelValue,
+        formatInputValue,
+        emitModelValue,
+    };
+};

package/src/datePicker/composables/flow.ts

@@ -0,0 +1,70 @@
+import { ref, reactive, computed, nextTick } from 'vue';
+
+import { CMP, FlowStep } from '../constants';
+
+import type { Ref } from 'vue';
+import type { Flow, VueEmit } from '../interfaces';
+import type { AllPropsType } from '../props';
+
+export const useFlow = (props: AllPropsType, emit: VueEmit, dynCmpRef: Ref<any>) => {
+    const flowStep = ref(0);
+
+    const childrenMounted = reactive({
+        [CMP.timePicker]: !props.enableTimePicker || props.timePicker || props.monthPicker,
+        [CMP.calendar]: false,
+        [CMP.header]: false,
+    });
+
+    const specificMode = computed(() => props.monthPicker || props.timePicker);
+
+    const childMount = (cmp: unknown): void => {
+        if (props.flow?.length) {
+            if (!cmp && specificMode.value) return handleFlow();
+            childrenMounted[cmp as CMP] = true;
+
+            if (!Object.keys(childrenMounted).filter((key) => !childrenMounted[key as CMP]).length) {
+                handleFlow();
+            }
+        }
+    };
+
+    const updateFlowStep = (): void => {
+        if (props.flow?.length && flowStep.value !== -1) {
+            flowStep.value += 1;
+            emit('flow-step', flowStep.value);
+            handleFlow();
+        }
+        if (props.flow?.length === flowStep.value) {
+            nextTick().then(() => resetFlow());
+        }
+    };
+
+    const resetFlow = (): void => {
+        flowStep.value = -1;
+    };
+
+    const handleFlowStep = (step: Flow, fn: string, ...args: Array<boolean | string>) => {
+        if (props.flow[flowStep.value] === step) {
+            if (dynCmpRef.value) {
+                dynCmpRef.value[fn]?.(...args);
+            }
+        }
+    };
+
+    const handleFlow = (skipStep = 0): void => {
+        if (skipStep) {
+            flowStep.value += skipStep;
+        }
+        handleFlowStep(FlowStep.month, 'toggleMonthPicker', true);
+        handleFlowStep(FlowStep.year, 'toggleYearPicker', true);
+        handleFlowStep(FlowStep.calendar, 'toggleTimePicker', false, true);
+        handleFlowStep(FlowStep.time, 'toggleTimePicker', true, true);
+
+        const flowValue = props.flow[flowStep.value];
+        if (flowValue === FlowStep.hours || flowValue === FlowStep.minutes || flowValue === FlowStep.seconds) {
+            handleFlowStep(flowValue, 'toggleTimePicker', true, true, flowValue);
+        }
+    };
+
+    return { childMount, updateFlowStep, resetFlow, handleFlow, flowStep };
+};

package/src/datePicker/composables/index.ts

@@ -0,0 +1,14 @@
+export * from './state';
+export * from './arrow-navigate';
+export * from './external-internal-mapper';
+export * from './month-year';
+export * from './position';
+export * from './slots';
+export * from './transition';
+export * from './model';
+export * from './defaults';
+export * from './calendar-class';
+export * from './validation';
+export * from './common';
+export * from './flow';
+export * from './month-year';

package/src/datePicker/composables/model.ts

@@ -0,0 +1,89 @@
+import { computed, ref, reactive, watch } from 'vue';
+import { getHours, getMinutes, getMonth, getYear } from 'date-fns';
+
+import { getDate } from '../utils/date-utils';
+
+import type { ICalendarData, InternalModuleValue, TimeType, VueEmit } from '../interfaces';
+import type { PickerBasePropsType } from '../props';
+import { useDefaults } from '../composables/defaults';
+import { localToTz } from '../utils/timezone';
+
+export const useModel = (props: PickerBasePropsType, emit: VueEmit, reMap?: () => void) => {
+    const { defaultedRange, defaultedTz } = useDefaults(props);
+
+    const today = getDate(localToTz(getDate(), defaultedTz.value.timezone));
+    const calendars = ref<ICalendarData[]>([{ month: getMonth(today), year: getYear(today) }]);
+
+    const timeGetter = (type: TimeType) => {
+        const fn = {
+            hours: getHours(today),
+            minutes: getMinutes(today),
+            seconds: 0,
+        };
+
+        return defaultedRange.value.enabled ? [fn[type], fn[type]] : fn[type];
+    };
+    // Time values
+    const time = reactive({
+        hours: timeGetter('hours'),
+        minutes: timeGetter('minutes'),
+        seconds: timeGetter('seconds'),
+    });
+
+    watch(
+        defaultedRange,
+        (newVal, oldVal) => {
+            if (newVal.enabled !== oldVal.enabled) {
+                time.hours = timeGetter('hours');
+                time.minutes = timeGetter('minutes');
+                time.seconds = timeGetter('seconds');
+            }
+        },
+        { deep: true },
+    );
+
+    const modelValue = computed({
+        get: (): InternalModuleValue => {
+            return props.internalModelValue;
+        },
+        set: (value: InternalModuleValue): void => {
+            if (!props.readonly && !props.disabled) {
+                emit('update:internal-model-value', value);
+            }
+        },
+    });
+
+    const month = computed(
+        () =>
+            (instance: number): number =>
+                calendars.value[instance] ? calendars.value[instance].month : 0,
+    );
+
+    // Get year based on the calendar instance
+    const year = computed(
+        () =>
+            (instance: number): number =>
+                calendars.value[instance] ? calendars.value[instance].year : 0,
+    );
+
+    watch(
+        modelValue,
+        (newVal, oldVal) => {
+            if (reMap) {
+                if (JSON.stringify(newVal ?? {}) !== JSON.stringify(oldVal ?? {})) {
+                    reMap();
+                }
+            }
+        },
+        { deep: true },
+    );
+
+    return {
+        calendars,
+        time,
+        modelValue,
+        month,
+        year,
+        today,
+    };
+};

package/src/datePicker/composables/month-year.ts

@@ -0,0 +1,72 @@
+import { computed } from 'vue';
+import { addMonths, addYears, getMonth, getYear, set, setYear, subMonths, subYears } from 'date-fns';
+
+import { useDefaults, useValidation } from '../composables/index';
+import { getDate, validateMonthYear } from '../utils/date-utils';
+
+import type { VueEmit } from '../interfaces';
+import type { PickerBasePropsType } from '../props';
+
+export const useMonthYearPick = (props: { month: number; year: number } & PickerBasePropsType, emit: VueEmit) => {
+    const { defaultedFilters, propDates } = useDefaults(props);
+    const { validateMonthYearInRange } = useValidation(props);
+
+    const recursiveMonthAdjust = (date: Date, increment: boolean): Date => {
+        let monthDate = date;
+        if (defaultedFilters.value.months.includes(getMonth(monthDate))) {
+            monthDate = increment ? addMonths(date, 1) : subMonths(date, 1);
+            return recursiveMonthAdjust(monthDate, increment);
+        }
+        return monthDate;
+    };
+
+    const recursiveYearAdjust = (date: Date, increment: boolean): Date => {
+        let yearDate = date;
+        if (defaultedFilters.value.years.includes(getYear(yearDate))) {
+            yearDate = increment ? addYears(date, 1) : subYears(date, 1);
+            return recursiveYearAdjust(yearDate, increment);
+        }
+        return yearDate;
+    };
+
+    const handleMonthYearChange = (isNext: boolean, fromNav = false): void => {
+        const initialDate = set(getDate(), { month: props.month, year: props.year });
+        let date = isNext ? addMonths(initialDate, 1) : subMonths(initialDate, 1);
+        if (props.disableYearSelect) {
+            date = setYear(date, props.year);
+        }
+
+        let month = getMonth(date);
+        let year = getYear(date);
+
+        if (defaultedFilters.value.months.includes(month)) {
+            date = recursiveMonthAdjust(date, isNext);
+            month = getMonth(date);
+            year = getYear(date);
+        }
+
+        if (defaultedFilters.value.years.includes(year)) {
+            date = recursiveYearAdjust(date, isNext);
+            year = getYear(date);
+        }
+        if (validateMonthYearInRange(month, year, isNext, props.preventMinMaxNavigation)) {
+            updateMonthYear(month, year, fromNav);
+        }
+    };
+
+    const updateMonthYear = (month: number, year: number, fromNav: boolean): void => {
+        emit('update-month-year', { month, year, fromNav });
+    };
+
+    const isDisabled = computed(() => (next: boolean) => {
+        return validateMonthYear(
+            set(getDate(), { month: props.month, year: props.year }),
+            propDates.value.maxDate,
+            propDates.value.minDate,
+            props.preventMinMaxNavigation,
+            next,
+        );
+    });
+
+    return { handleMonthYearChange, isDisabled, updateMonthYear };
+};