bge-ui 1.3.4 → 1.3.6

package/src/datePicker/composables/calendar-class.ts

@@ -0,0 +1,383 @@
+import { ref } from 'vue';
+import { addDays } from 'date-fns';
+
+import { useDefaults, useValidation } from '../composables/index';
+import { isModelAuto, matchDate } from '../utils/util';
+import { isDateAfter, isDateBefore, isDateBetween, isDateEqual, getDate, getWeekFromDate } from '../utils/date-utils';
+import { localToTz } from '../utils/timezone';
+
+import type { UnwrapRef, WritableComputedRef } from 'vue';
+import type { ICalendarDay, InternalModuleValue } from '../interfaces';
+import type { PickerBasePropsType } from '../props';
+
+export const useCalendarClass = (modelValue: WritableComputedRef<InternalModuleValue>, props: PickerBasePropsType) => {
+    const {
+        defaultedMultiCalendars,
+        defaultedMultiDates,
+        defaultedUI,
+        defaultedHighlight,
+        defaultedTz,
+        propDates,
+        defaultedRange,
+    } = useDefaults(props);
+    const { isDisabled } = useValidation(props);
+    // Track hovered date
+    const hoveredDate = ref<Date | null>(null);
+    // Today date
+    const today = ref<Date>(localToTz(new Date(), defaultedTz.value.timezone));
+
+    /**
+     * When using range picker keep track of hovered value in the calendar
+     */
+    const setHoverDate = (day: UnwrapRef<ICalendarDay>): void => {
+        if (!day.current && props.hideOffsetDates) {
+            return;
+        }
+        hoveredDate.value = day.value;
+    };
+
+    // When mouse leaves the menu clear the hover date data
+    const clearHoverDate = (): void => {
+        hoveredDate.value = null;
+    };
+
+    const checkRangeDirection = (isStart: boolean): boolean => {
+        if (
+            Array.isArray(modelValue.value) &&
+            defaultedRange.value.enabled &&
+            modelValue.value[0] &&
+            hoveredDate.value
+        ) {
+            return isStart
+                ? isDateAfter(hoveredDate.value, modelValue.value[0])
+                : isDateBefore(hoveredDate.value, modelValue.value[0]);
+        }
+        return true;
+    };
+
+    const checkDateEqual = (day: ICalendarDay, isStart: boolean) => {
+        const startDateCompare = () => {
+            if (!modelValue.value) return null;
+            return isStart ? (modelValue.value as Date[])[0] || null : (modelValue.value as Date[])[1];
+        };
+        const dateToCompare = modelValue.value && Array.isArray(modelValue.value) ? startDateCompare() : null;
+        return isDateEqual(getDate(day.value), dateToCompare);
+    };
+
+    const checkDateBefore = (isStart: boolean) => {
+        const dateToCompare = Array.isArray(modelValue.value) ? modelValue.value[0] : null;
+        return isStart ? !isDateBefore(hoveredDate.value ?? null, dateToCompare) : true;
+    };
+
+    /**
+     * Check when to add a proper active start/end date class on range picker
+     */
+    const rangeActiveStartEnd = (day: UnwrapRef<ICalendarDay>, isStart = true): boolean => {
+        if (
+            (defaultedRange.value.enabled || props.weekPicker) &&
+            Array.isArray(modelValue.value) &&
+            modelValue.value.length === 2
+        ) {
+            if (props.hideOffsetDates && !day.current) return false;
+            return isDateEqual(getDate(day.value), modelValue.value[isStart ? 0 : 1]);
+        }
+        if (defaultedRange.value.enabled) {
+            return (
+                (checkDateEqual(day, isStart) && checkDateBefore(isStart)) ||
+                (isDateEqual(day.value, Array.isArray(modelValue.value) ? modelValue.value[0] : null) &&
+                    checkRangeDirection(isStart))
+            );
+        }
+        return false;
+    };
+
+    // If the range mode is used, checks for the end value of hovered date
+    const isHoverDateStartEnd = (calendarDay: ICalendarDay, start?: boolean): boolean => {
+        if (Array.isArray(modelValue.value) && modelValue.value[0] && modelValue.value.length === 1) {
+            const isHover = isDateEqual(calendarDay.value, hoveredDate.value);
+            return start
+                ? isDateAfter(modelValue.value[0], calendarDay.value) && isHover
+                : isDateBefore(modelValue.value[0], calendarDay.value) && isHover;
+        }
+        return false;
+    };
+
+    /**
+     * Check if some date is active, in case of range, it will have two dates
+     */
+    const isActiveDate = (calendarDay: ICalendarDay): boolean => {
+        if (!modelValue.value) return false;
+        if (props.hideOffsetDates && !calendarDay.current) return false;
+        if (!defaultedRange.value.enabled) {
+            if (defaultedMultiDates.value.enabled && Array.isArray(modelValue.value)) {
+                return modelValue.value.some((dateVal) => isDateEqual(dateVal, calendarDay.value));
+            }
+            return isDateEqual(calendarDay.value, modelValue.value ? (modelValue.value as Date) : today.value);
+        }
+        if (props.modelAuto && Array.isArray(modelValue.value)) {
+            return isDateEqual(calendarDay.value, modelValue.value[0] ? modelValue.value[0] : today.value);
+        }
+        return false;
+    };
+
+    /**
+     * Check if range ends on the given day
+     */
+    const isHoverRangeEnd = (day: UnwrapRef<ICalendarDay>): boolean => {
+        if (defaultedRange.value.autoRange || props.weekPicker) {
+            if (hoveredDate.value) {
+                if (props.hideOffsetDates && !day.current) return false;
+                const rangeEnd = addDays(hoveredDate.value, +(defaultedRange.value.autoRange as number));
+                const range = getWeekFromDate(getDate(hoveredDate.value), props.weekStart);
+                return props.weekPicker
+                    ? isDateEqual(range[1], getDate(day.value))
+                    : isDateEqual(rangeEnd, getDate(day.value));
+            }
+            return false;
+        }
+        return false;
+    };
+
+    /**
+     * Check if date in auto range preview is in between
+     */
+    const isAutoRangeInBetween = (day: UnwrapRef<ICalendarDay>): boolean => {
+        if (defaultedRange.value.autoRange || props.weekPicker) {
+            if (hoveredDate.value) {
+                const rangeEnd = addDays(hoveredDate.value, +(defaultedRange.value.autoRange as number));
+                if (props.hideOffsetDates && !day.current) return false;
+                const range = getWeekFromDate(getDate(hoveredDate.value), props.weekStart);
+                return props.weekPicker
+                    ? isDateAfter(day.value, range[0]) && isDateBefore(day.value, range[1])
+                    : isDateAfter(day.value, hoveredDate.value) && isDateBefore(day.value, rangeEnd);
+            }
+            return false;
+        }
+        return false;
+    };
+
+    const isAutoRangeStart = (day: UnwrapRef<ICalendarDay>): boolean => {
+        if (defaultedRange.value.autoRange || props.weekPicker) {
+            if (hoveredDate.value) {
+                if (props.hideOffsetDates && !day.current) return false;
+                const range = getWeekFromDate(getDate(hoveredDate.value), props.weekStart);
+                return props.weekPicker ? isDateEqual(range[0], day.value) : isDateEqual(hoveredDate.value, day.value);
+            }
+            return false;
+        }
+        return false;
+    };
+
+    /**
+     * If range mode used, this will check if the calendar day is between 2 active dates
+     */
+    const rangeActive = (calendarDay: ICalendarDay): boolean => {
+        return isDateBetween(modelValue.value as Date[], hoveredDate.value, calendarDay.value);
+    };
+
+    const isSingleInModelAuto = (): boolean => {
+        if (props.modelAuto && Array.isArray(props.internalModelValue)) {
+            return !!props.internalModelValue[0];
+        }
+        return false;
+    };
+
+    const isModelAutoActive = () => {
+        if (props.modelAuto) return isModelAuto(props.internalModelValue);
+        return true;
+    };
+
+    // Check if date is hovered, for single picker mode
+    const dateHover = (day: ICalendarDay) => {
+        if (props.weekPicker) return false;
+        const isInRange = defaultedRange.value.enabled
+            ? !rangeActiveStartEnd(day) && !rangeActiveStartEnd(day, false)
+            : true;
+
+        return !isDisabled(day.value) && !isActiveDate(day) && !(!day.current && props.hideOffsetDates) && isInRange;
+    };
+
+    // Check if the date is selected
+    const isActive = (day: ICalendarDay) => {
+        if (defaultedRange.value.enabled) {
+            return props.modelAuto ? isSingleInModelAuto() && isActiveDate(day) : false;
+        }
+        return isActiveDate(day);
+    };
+
+    // Check if the date should be highlighted
+    const highlighted = (day: ICalendarDay) => {
+        if (defaultedHighlight.value) {
+            return matchDate(day.value, propDates.value.highlight);
+        }
+        return false;
+    };
+
+    // If enabled, checks the days that are also highlighted to not be marked as disabled
+    const disableHighlight = (day: ICalendarDay) => {
+        const disabled = isDisabled(day.value);
+        return (
+            disabled &&
+            (typeof defaultedHighlight.value === 'function'
+                ? !defaultedHighlight.value(day.value, disabled)
+                : !defaultedHighlight.value.options.highlightDisabled)
+        );
+    };
+
+    // Check if the given week day should be highlighted
+    const highlightedWeekDay = (day: ICalendarDay) => {
+        if (typeof defaultedHighlight.value === 'function') return defaultedHighlight.value(day.value);
+        return defaultedHighlight.value.weekdays?.includes(day.value.getDay());
+    };
+
+    const isBetween = (day: ICalendarDay) => {
+        if (
+            (defaultedRange.value.enabled || props.weekPicker) &&
+            (defaultedMultiCalendars.value.count > 0 ? day.current : true) &&
+            isModelAutoActive() &&
+            !(!day.current && props.hideOffsetDates) &&
+            !isActiveDate(day)
+        ) {
+            return rangeActive(day);
+        }
+        return false;
+    };
+
+    // Common classes to be checked for any mode
+    const sharedClasses = (day: ICalendarDay): Record<string, boolean> => {
+        const { isRangeStart, isRangeEnd } = rangeStartEnd(day);
+        const isRangeStartEnd = defaultedRange.value.enabled ? isRangeStart || isRangeEnd : false;
+        return {
+            dp__cell_offset: !day.current,
+            dp__pointer: !props.disabled && !(!day.current && props.hideOffsetDates) && !isDisabled(day.value),
+            dp__cell_disabled: isDisabled(day.value),
+            dp__cell_highlight:
+                !disableHighlight(day) &&
+                (highlighted(day) || highlightedWeekDay(day)) &&
+                !isActive(day) &&
+                !isRangeStartEnd &&
+                !isAutoRangeStart(day) &&
+                !(isBetween(day) && props.weekPicker) &&
+                !isRangeEnd,
+            dp__cell_highlight_active:
+                !disableHighlight(day) && (highlighted(day) || highlightedWeekDay(day)) && isActive(day),
+            dp__today: !props.noToday && isDateEqual(day.value, today.value) && day.current,
+            'dp--past': isDateBefore(day.value, today.value),
+            'dp--future': isDateAfter(day.value, today.value),
+        };
+    };
+
+    // Get set of classes for the single date picker
+    const singleDateClasses = (day: ICalendarDay): Record<string, boolean> => {
+        return {
+            dp__active_date: isActive(day),
+            dp__date_hover: dateHover(day),
+        };
+    };
+
+    // Get set of classes for the single week picker
+    const weekPickerSingleClasses = (day: ICalendarDay): Record<string, boolean> => {
+        if (modelValue.value && !Array.isArray(modelValue.value)) {
+            const week = getWeekFromDate(modelValue.value, props.weekStart);
+            return {
+                ...autoRangeClasses(day),
+                dp__range_start: isDateEqual(week[0], day.value),
+                dp__range_end: isDateEqual(week[1], day.value),
+                dp__range_between_week: isDateAfter(day.value, week[0]) && isDateBefore(day.value, week[1]),
+            };
+        }
+        return {
+            ...autoRangeClasses(day),
+        };
+    };
+
+    // Get set of classes for the range week picker
+    const weekPickerRangeClasses = (day: ICalendarDay) => {
+        if (modelValue.value && Array.isArray(modelValue.value)) {
+            const startWeek = getWeekFromDate(modelValue.value[0], props.weekStart);
+            const endWeek = modelValue.value[1] ? getWeekFromDate(modelValue.value[1], props.weekStart) : [];
+
+            return {
+                ...autoRangeClasses(day),
+                dp__range_start: isDateEqual(startWeek[0], day.value) || isDateEqual(endWeek[0], day.value),
+                dp__range_end: isDateEqual(startWeek[1], day.value) || isDateEqual(endWeek[1], day.value),
+                dp__range_between_week:
+                    (isDateAfter(day.value, startWeek[0]) && isDateBefore(day.value, startWeek[1])) ||
+                    (isDateAfter(day.value, endWeek[0]) && isDateBefore(day.value, endWeek[1])),
+                dp__range_between: isDateAfter(day.value, startWeek[1]) && isDateBefore(day.value, endWeek[0]),
+            };
+        }
+        return {
+            ...autoRangeClasses(day),
+        };
+    };
+
+    const rangeStartEnd = (day: ICalendarDay) => {
+        const isRangeStart =
+            defaultedMultiCalendars.value.count > 0
+                ? day.current && rangeActiveStartEnd(day) && isModelAutoActive()
+                : rangeActiveStartEnd(day) && isModelAutoActive();
+
+        const isRangeEnd =
+            defaultedMultiCalendars.value.count > 0
+                ? day.current && rangeActiveStartEnd(day, false) && isModelAutoActive()
+                : rangeActiveStartEnd(day, false) && isModelAutoActive();
+        return { isRangeStart, isRangeEnd };
+    };
+
+    // Get set of classes for the range
+    const rangeDateClasses = (day: ICalendarDay): Record<string, boolean> => {
+        const { isRangeStart, isRangeEnd } = rangeStartEnd(day);
+        return {
+            dp__range_start: isRangeStart,
+            dp__range_end: isRangeEnd,
+            dp__range_between: isBetween(day),
+            dp__date_hover:
+                isDateEqual(day.value, hoveredDate.value) && !isRangeStart && !isRangeEnd && !props.weekPicker,
+            dp__date_hover_start: isHoverDateStartEnd(day, true),
+            dp__date_hover_end: isHoverDateStartEnd(day, false),
+        };
+    };
+
+    // Get set of classes for auto range
+    const autoRangeClasses = (day: ICalendarDay): Record<string, boolean> => {
+        return {
+            ...rangeDateClasses(day),
+            dp__cell_auto_range: isAutoRangeInBetween(day),
+            dp__cell_auto_range_start: isAutoRangeStart(day),
+            dp__cell_auto_range_end: isHoverRangeEnd(day),
+        };
+    };
+
+    // Return specific set of classes depending on the config, since we don't need to check for all
+    const getModeClasses = (day: ICalendarDay) => {
+        if (defaultedRange.value.enabled) {
+            if (defaultedRange.value.autoRange) return autoRangeClasses(day);
+            if (props.modelAuto) return { ...singleDateClasses(day), ...rangeDateClasses(day) };
+            if (props.weekPicker) return weekPickerRangeClasses(day);
+            return rangeDateClasses(day);
+        }
+        if (props.weekPicker) {
+            return weekPickerSingleClasses(day);
+        }
+
+        return singleDateClasses(day);
+    };
+
+    // Get needed classes
+    const getDayClassData = (day: ICalendarDay): Record<string, boolean> => {
+        if (props.hideOffsetDates && !day.current) return {};
+        return {
+            ...sharedClasses(day),
+            ...getModeClasses(day),
+            [props.dayClass ? props.dayClass(day.value, props.internalModelValue) : '']: true,
+            ...(defaultedUI.value.calendarCell ?? {}),
+        };
+    };
+
+    return {
+        setHoverDate,
+        clearHoverDate,
+        getDayClassData,
+    };
+};

package/src/datePicker/composables/common.ts

@@ -0,0 +1,25 @@
+import { computed } from 'vue';
+
+import type { Flow, MultiCalendarsOptions } from '../interfaces';
+
+export const useCommon = () => {
+    const hideNavigationButtons = computed(() => (hideNavigation: Flow[] | undefined, key: Flow) => {
+        return hideNavigation?.includes(key);
+    });
+
+    const showLeftIcon = computed(() => (multiCalendars: MultiCalendarsOptions, instance: number) => {
+        if (multiCalendars.count) {
+            return !multiCalendars.solo ? instance === 0 : true;
+        }
+        return true;
+    });
+
+    const showRightIcon = computed(() => (multiCalendars: MultiCalendarsOptions, instance: number) => {
+        if (multiCalendars.count) {
+            return !multiCalendars.solo ? instance === multiCalendars.count - 1 : true;
+        }
+        return true;
+    });
+
+    return { hideNavigationButtons, showLeftIcon, showRightIcon };
+};

package/src/datePicker/composables/defaults.ts

@@ -0,0 +1,123 @@
+import { computed } from 'vue';
+
+import {
+    defaultAriaLabels,
+    defaultMultiCalendars,
+    defaultPreviewFormat,
+    defaultTransitions,
+    getDefaultActionRowData,
+    getDefaultConfig,
+    getDefaultFilters,
+    getDefaultHighlight,
+    getDefaultInlineOptions,
+    getDefaultMultiDates,
+    getDefaultRangeOptions,
+    getDefaultTextInputOptions,
+    getDefaultTimeZone,
+    getDefaultUI,
+    getDefaultWeekNumbers,
+    mapPropDates,
+} from '../utils/defaults';
+import { assignDefaultTime } from '../utils/date-utils';
+
+import type { TimeModel } from '../interfaces';
+import type { AllPropsType, PickerBasePropsType } from '../props';
+
+export const useDefaults = (props: AllPropsType | PickerBasePropsType) => {
+    // Shared method for time format
+    const getTimeFormat = (): string => {
+        const seconds = props.enableSeconds ? ':ss' : '';
+        const minutes = props.enableMinutes ? ':mm' : '';
+        return props.is24 ? `HH${minutes}${seconds}` : `hh${minutes}${seconds} aa`;
+    };
+
+    // Get default format pattern, returns user specified if defined first
+    const getDefaultPattern = (): string => {
+        if (props.format) return props.format as string;
+        if (props.monthPicker) return 'MM/yyyy';
+        if (props.timePicker) return getTimeFormat();
+        if (props.weekPicker) return `${defaultedWeekNumbers.value?.type === 'iso' ? 'RR' : 'ww'}-yyyy`;
+        if (props.yearPicker) return 'yyyy';
+        if (props.quarterPicker) return 'QQQ/yyyy';
+        return props.enableTimePicker ? `MM/dd/yyyy, ${getTimeFormat()}` : 'MM/dd/yyyy';
+    };
+    const assignTime = (date: TimeModel) => assignDefaultTime(date, props.enableSeconds);
+    const getDefaultStartTime = (): TimeModel | TimeModel[] | null => {
+        if (defaultedRange.value.enabled) {
+            if (props.startTime && Array.isArray(props.startTime)) {
+                return [assignTime(props.startTime[0]), assignTime(props.startTime[1])];
+            }
+            return null;
+        }
+        return props.startTime && !Array.isArray(props.startTime) ? assignTime(props.startTime) : null;
+    };
+
+    const defaultedMultiCalendars = computed(() => defaultMultiCalendars(props.multiCalendars));
+
+    const defaultedStartTime = computed(() => getDefaultStartTime());
+
+    const defaultedAriaLabels = computed(() => defaultAriaLabels(props.ariaLabels));
+
+    const defaultedFilters = computed(() => getDefaultFilters(props.filters));
+
+    const defaultedTransitions = computed(() => defaultTransitions(props.transitions));
+
+    const defaultedActionRow = computed(() => getDefaultActionRowData(props.actionRow));
+
+    const defaultedPreviewFormat = computed(() =>
+        defaultPreviewFormat(props.previewFormat, props.format, getDefaultPattern()),
+    );
+
+    const defaultedTextInput = computed(() => getDefaultTextInputOptions(props.textInput));
+
+    const defaultedInline = computed(() => getDefaultInlineOptions(props.inline));
+
+    const defaultedConfig = computed(() => getDefaultConfig(props.config));
+
+    const defaultedHighlight = computed(() => getDefaultHighlight(props.highlight));
+
+    const defaultedWeekNumbers = computed(() => getDefaultWeekNumbers(props.weekNumbers));
+
+    const defaultedTz = computed(() => getDefaultTimeZone(props.timezone));
+
+    const defaultedMultiDates = computed(() => getDefaultMultiDates(props.multiDates));
+
+    const propDates = computed(() =>
+        mapPropDates({
+            minDate: props.minDate,
+            maxDate: props.maxDate,
+            disabledDates: props.disabledDates,
+            allowedDates: props.allowedDates,
+            highlight: defaultedHighlight.value,
+            markers: props.markers,
+            timezone: defaultedTz.value,
+            isSpecific: props.monthPicker || props.yearPicker || props.quarterPicker,
+        }),
+    );
+
+    const defaultedRange = computed(() => getDefaultRangeOptions(props.range));
+
+    const defaultedUI = computed(() => getDefaultUI(props.ui));
+
+    return {
+        defaultedTransitions,
+        defaultedMultiCalendars,
+        defaultedStartTime,
+        defaultedAriaLabels,
+        defaultedFilters,
+        defaultedActionRow,
+        defaultedPreviewFormat,
+        defaultedTextInput,
+        defaultedInline,
+        defaultedConfig,
+        defaultedHighlight,
+        defaultedWeekNumbers,
+        defaultedRange,
+        propDates,
+        defaultedTz,
+        defaultedMultiDates,
+        defaultedUI,
+        getDefaultPattern,
+        getDefaultStartTime,
+    };
+};