bge-ui 1.3.4 → 1.3.6

package/src/datePicker/components/YearPicker/YearPicker.vue

@@ -0,0 +1,70 @@
+<template>
+    <div>
+        <slot v-if="$slots['top-extra']" name="top-extra" :value="internalModelValue" />
+        <template v-if="$slots['month-year']">
+            <slot
+                name="month-year"
+                v-bind="{
+                    years: groupedYears,
+                    selectYear,
+                }"
+            />
+        </template>
+        <template v-else>
+            <selection-overlay
+                :items="groupedYears"
+                :is-last="autoApply && !defaultedConfig.keepActionRow"
+                :height="defaultedConfig.modeHeight"
+                :config="config"
+                :no-overlay-focus="Boolean(noOverlayFocus || textInput)"
+                :focus-value="focusYear"
+                type="year"
+                use-relative
+                @selected="selectYear"
+                @hover-value="setHoverValue"
+            >
+                <template v-if="$slots['year-overlay-value']" #item="{ item }">
+                    <slot name="year-overlay-value" :text="item.text" :value="item.value" />
+                </template>
+            </selection-overlay>
+        </template>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import SelectionOverlay from '../../components/Common/SelectionOverlay.vue';
+
+    import { PickerBaseProps } from '../../props';
+    import { useYearPicker } from '../../components/YearPicker/year-picker';
+    import { useDefaults } from '../../composables';
+
+    const emit = defineEmits([
+        'update:internal-model-value',
+        'reset-flow',
+        'range-start',
+        'range-end',
+        'auto-apply',
+        'update-month-year',
+    ]);
+    const props = defineProps({
+        ...PickerBaseProps,
+    });
+
+    defineOptions({
+        compatConfig: {
+            MODE: 3,
+        },
+    });
+
+    const { groupedYears, modelValue, focusYear, selectYear, setHoverValue } = useYearPicker(props, emit);
+    const { defaultedConfig } = useDefaults(props);
+
+    const getSidebarProps = () => {
+        return {
+            modelValue,
+            selectYear,
+        };
+    };
+
+    defineExpose({ getSidebarProps });
+</script>

package/src/datePicker/components/YearPicker/year-picker.ts

@@ -0,0 +1,109 @@
+import { computed, nextTick, onMounted, ref } from 'vue';
+import { getYear, setYear, startOfYear } from 'date-fns';
+
+import { useDefaults, useModel } from '../../composables';
+import { checkMinMaxValue, getYears, groupListAndMap } from '../../utils/util';
+import {
+    checkHighlightYear,
+    getDate,
+    getMinMaxYear,
+    isDateBetween,
+    resetDate,
+    resetDateTime,
+} from '../../utils/date-utils';
+import { checkRangeAutoApply, setMonthOrYearRange } from '../../composables/shared';
+
+import type { PickerBasePropsType } from '../../props';
+import type { VueEmit, IDefaultSelect } from '../../interfaces';
+
+export const useYearPicker = (props: PickerBasePropsType, emit: VueEmit) => {
+    const reMap = () => {
+        if (props.isTextInputDate) focusYear.value = getYear(getDate(props.startDate));
+    };
+    const { modelValue } = useModel(props, emit, reMap);
+    const hoverDate = ref<Date | null>(null);
+    const { defaultedHighlight, defaultedMultiDates, defaultedFilters, defaultedRange, propDates } = useDefaults(props);
+    const focusYear = ref();
+
+    onMounted(() => {
+        if (props.startDate) {
+            if ((modelValue.value && props.focusStartDate) || !modelValue.value) {
+                focusYear.value = getYear(getDate(props.startDate));
+            }
+        }
+    });
+
+    const isYearActive = (year: number) => {
+        if (Array.isArray(modelValue.value)) {
+            return modelValue.value.some((date) => getYear(date) === year);
+        }
+        return modelValue.value ? getYear(modelValue.value) === year : false;
+    };
+
+    const isYearBetween = (year: number) => {
+        if (defaultedRange.value.enabled) {
+            if (Array.isArray(modelValue.value)) {
+                return isDateBetween(modelValue.value, hoverDate.value, yearToDate(year));
+            }
+            return false;
+        }
+        return false;
+    };
+
+    const groupedYears = computed(() => {
+        return groupListAndMap(getYears(props.yearRange, props.locale, props.reverseYears), (year: IDefaultSelect) => {
+            const active = isYearActive(year.value);
+            const disabled =
+                checkMinMaxValue(
+                    year.value,
+                    getMinMaxYear(propDates.value.minDate),
+                    getMinMaxYear(propDates.value.maxDate),
+                ) || defaultedFilters.value.years.includes(year.value);
+            const isBetween = isYearBetween(year.value) && !active;
+            const highlighted = checkHighlightYear(defaultedHighlight.value, year.value);
+            return { active, disabled, isBetween, highlighted };
+        });
+    });
+
+    const yearToDate = (year: number): Date => {
+        return setYear(resetDate(startOfYear(new Date())), year);
+    };
+
+    const selectYear = (year: number) => {
+        emit('update-month-year', { instance: 0, year });
+        if (defaultedMultiDates.value.enabled) {
+            if (!modelValue.value) {
+                modelValue.value = [setYear(resetDateTime(startOfYear(getDate())), year)];
+            } else if (Array.isArray(modelValue.value)) {
+                const years = modelValue.value?.map((date) => getYear(date));
+                if (years.includes(year)) {
+                    modelValue.value = modelValue.value.filter((date) => getYear(date) !== year);
+                } else {
+                    modelValue.value.push(setYear(resetDateTime(getDate()), year));
+                }
+            }
+            return emit('auto-apply', true);
+        }
+        if (defaultedRange.value.enabled) {
+            modelValue.value = setMonthOrYearRange(modelValue, yearToDate(year), emit);
+            nextTick().then(() => {
+                checkRangeAutoApply(modelValue.value as Date[], emit, props.autoApply, props.modelAuto);
+            });
+        } else {
+            modelValue.value = yearToDate(year);
+            emit('auto-apply');
+        }
+    };
+
+    const setHoverValue = (value: number) => {
+        hoverDate.value = setYear(resetDate(new Date()), value);
+    };
+
+    return {
+        groupedYears,
+        modelValue,
+        focusYear,
+        setHoverValue,
+        selectYear,
+    };
+};

package/src/datePicker/components/shared/YearModePicker.vue

@@ -0,0 +1,105 @@
+<template>
+    <div class="dp--year-mode-picker" :class="{ 'dp--hidden-el': overlayOpen }">
+        <ArrowBtn
+            v-if="showLeftIcon(defaultedMultiCalendars, instance)"
+            ref="mpPrevIconRef"
+            :aria-label="defaultedAriaLabels?.prevYear"
+            :disabled="isDisabled(false)"
+            :class="defaultedUI?.navBtnPrev"
+            @activate="handleYear(false)"
+        >
+            <slot v-if="$slots['arrow-left']" name="arrow-left" />
+            <ChevronLeftIcon v-if="!$slots['arrow-left']" />
+        </ArrowBtn>
+        <button
+            ref="mpYearButtonRef"
+            class="dp__btn dp--year-select"
+            type="button"
+            :aria-label="`${year}-${defaultedAriaLabels?.openYearsOverlay}`"
+            :data-test="`year-mode-btn-${instance}`"
+            @click="() => toggleYearPicker(false)"
+            @keydown.enter="() => toggleYearPicker(false)"
+        >
+            <slot v-if="$slots.year" name="year" :year="year" />
+            <template v-if="!$slots.year">{{ year }}</template>
+        </button>
+        <ArrowBtn
+            v-if="showRightIcon(defaultedMultiCalendars, instance)"
+            ref="mpNextIconRef"
+            :aria-label="defaultedAriaLabels?.nextYear"
+            :disabled="isDisabled(true)"
+            :class="defaultedUI?.navBtnNext"
+            @activate="handleYear(true)"
+        >
+            <slot v-if="$slots['arrow-right']" name="arrow-right" />
+            <ChevronRightIcon v-if="!$slots['arrow-right']" />
+        </ArrowBtn>
+    </div>
+    <transition :name="transitionName(showYearPicker)" :css="showTransition">
+        <SelectionOverlay
+            v-if="showYearPicker"
+            :items="items"
+            :text-input="textInput"
+            :esc-close="escClose"
+            :config="config"
+            :is-last="autoApply && !defaultedConfig.keepActionRow"
+            :hide-navigation="hideNavigation"
+            :aria-labels="ariaLabels"
+            :overlay-label="defaultedAriaLabels?.yearPicker?.(true)"
+            type="year"
+            @toggle="toggleYearPicker"
+            @selected="handleYearSelect($event)"
+        >
+            <template #button-icon>
+                <slot v-if="$slots['calendar-icon']" name="calendar-icon" />
+                <CalendarIcon v-if="!$slots['calendar-icon']" />
+            </template>
+            <template v-if="$slots['year-overlay-value']" #item="{ item }">
+                <slot name="year-overlay-value" :text="item.text" :value="item.value" />
+            </template>
+        </SelectionOverlay>
+    </transition>
+</template>
+
+<script setup lang="ts">
+    import SelectionOverlay from '../../components/Common/SelectionOverlay.vue';
+    import ArrowBtn from '../../components/Common/ArrowBtn.vue';
+    import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from '../../components/Icons';
+
+    import { useCommon, useDefaults, useTransitions } from '../../composables';
+    import { PickerBaseProps } from '../../props';
+
+    import { type PropType, ref } from 'vue';
+    import type { OverlayGridItem } from '../../interfaces';
+
+    const emit = defineEmits(['toggle-year-picker', 'year-select', 'handle-year']);
+    const props = defineProps({
+        ...PickerBaseProps,
+        showYearPicker: { type: Boolean as PropType<boolean>, default: false },
+        items: { type: Array as PropType<OverlayGridItem[][]>, default: () => [] },
+        instance: { type: Number as PropType<number>, default: 0 },
+        year: { type: Number as PropType<number>, default: 0 },
+        isDisabled: { type: Function as PropType<(isNext: boolean) => boolean>, default: () => false },
+    });
+
+    const { showRightIcon, showLeftIcon } = useCommon();
+    const { defaultedConfig, defaultedMultiCalendars, defaultedAriaLabels, defaultedTransitions, defaultedUI } =
+        useDefaults(props);
+    const { showTransition, transitionName } = useTransitions(defaultedTransitions);
+
+    const overlayOpen = ref(false);
+
+    const toggleYearPicker = (flow = false, show?: boolean) => {
+        overlayOpen.value = !overlayOpen.value;
+        emit('toggle-year-picker', { flow, show });
+    };
+
+    const handleYearSelect = (year: number) => {
+        overlayOpen.value = false;
+        emit('year-select', year);
+    };
+
+    const handleYear = (increment = false): void => {
+        emit('handle-year', increment);
+    };
+</script>

package/src/datePicker/components/shared/month-quarter-picker.ts

@@ -0,0 +1,199 @@
+import { computed, onMounted, ref, watch } from 'vue';
+import { addYears, differenceInYears, endOfYear, getMonth, getYear, set, startOfYear, subYears } from 'date-fns';
+
+import { checkHighlightYear, getDate, getMinMaxYear, resetDate, validateMonthYear } from '../../utils/date-utils';
+import { checkMinMaxValue, getYears, groupListAndMap } from '../../utils/util';
+
+import type { ComputedRef, WritableComputedRef, Ref } from 'vue';
+import type {
+    InternalModuleValue,
+    MultiCalendarsOptions,
+    ICalendarData,
+    IDefaultSelect,
+    OverlayGridItem,
+    VueEmit,
+    Highlight,
+    HighlightFn,
+    PropDates,
+    DateFilter,
+    RangeConfig,
+} from '../../interfaces';
+import type { PickerBasePropsType } from '../../props';
+import { FlowStep } from '../../constants';
+
+interface Opts {
+    multiCalendars: ComputedRef<MultiCalendarsOptions>;
+    calendars: Ref<ICalendarData[]>;
+    modelValue: WritableComputedRef<InternalModuleValue>;
+    props: PickerBasePropsType;
+    year: ComputedRef<(instance: number) => number>;
+    month: ComputedRef<(instance: number) => number>;
+    highlight: ComputedRef<Highlight | HighlightFn>;
+    propDates: ComputedRef<PropDates>;
+    filters: ComputedRef<DateFilter>;
+    range: ComputedRef<RangeConfig>;
+    emit: VueEmit;
+}
+
+/**
+ * Both modes shared logic
+ */
+export const useMonthOrQuarterPicker = ({
+    multiCalendars,
+    range,
+    highlight,
+    propDates,
+    calendars,
+    modelValue,
+    props,
+    filters,
+    year,
+    month,
+    emit,
+}: Opts) => {
+    const years = computed(() => getYears(props.yearRange, props.locale, props.reverseYears));
+    const showYearPicker = ref([false]);
+
+    const isDisabled = computed(() => (instance: number, next: boolean) => {
+        const currentDate = set(resetDate(new Date()), {
+            month: month.value(instance),
+            year: year.value(instance),
+        });
+        const date = next ? endOfYear(currentDate) : startOfYear(currentDate);
+        return validateMonthYear(
+            date,
+            propDates.value.maxDate,
+            propDates.value.minDate,
+            props.preventMinMaxNavigation,
+            next,
+        );
+    });
+
+    const isSoloMultiInRange = () => {
+        return Array.isArray(modelValue.value) && multiCalendars.value.solo && modelValue.value[1];
+    };
+
+    const assignMultiCalendars = () => {
+        for (let i = 0; i < multiCalendars.value.count; i++) {
+            if (i === 0) {
+                calendars.value[i] = calendars.value[0];
+            } else if (i === multiCalendars.value.count - 1 && isSoloMultiInRange()) {
+                calendars.value[i] = {
+                    month: getMonth((modelValue.value as Date[])[1]),
+                    year: getYear((modelValue.value as Date[])[1]),
+                };
+            } else {
+                const prevDate = set(getDate(), calendars.value[i - 1]);
+                calendars.value[i] = { month: getMonth(prevDate), year: getYear(addYears(prevDate, 1)) };
+            }
+        }
+    };
+
+    const updateMultiCalendars = (instance: number) => {
+        if (!instance) return assignMultiCalendars();
+        const date = set(getDate(), calendars.value[instance]);
+        calendars.value[0].year = getYear(subYears(date, multiCalendars.value.count - 1));
+        return assignMultiCalendars();
+    };
+
+    const getDateToFocus = (dateOne: Date, dateTwo: Date) => {
+        const diff = differenceInYears(dateTwo, dateOne);
+        return range.value.showLastInRange && diff > 1 ? dateTwo : dateOne;
+    };
+
+    const getRangedValueDate = (dates: Date[]) => {
+        if (props.focusStartDate) return dates[0];
+        if (multiCalendars.value.solo) return dates[0];
+        return dates[1] ? getDateToFocus(dates[0], dates[1]) : dates[0];
+    };
+
+    const checkModelValue = () => {
+        if (modelValue.value) {
+            const firstDate = Array.isArray(modelValue.value) ? getRangedValueDate(modelValue.value) : modelValue.value;
+            calendars.value[0] = { month: getMonth(firstDate), year: getYear(firstDate) };
+        }
+    };
+
+    const assign = () => {
+        checkModelValue();
+        if (multiCalendars.value.count) {
+            assignMultiCalendars();
+        }
+    };
+
+    watch(modelValue, (newVal, oldVal) => {
+        if (props.isTextInputDate) {
+            if (JSON.stringify(newVal ?? {}) !== JSON.stringify(oldVal ?? {})) {
+                assign();
+            }
+        }
+    });
+
+    onMounted(() => {
+        assign();
+    });
+
+    const selectYear = (year: number, instance: number) => {
+        calendars.value[instance].year = year;
+        emit('update-month-year', { instance, year, month: calendars.value[instance].month });
+        if (multiCalendars.value.count && !multiCalendars.value.solo) {
+            updateMultiCalendars(instance);
+        }
+    };
+
+    const groupedYears = computed(() => (instance: number): OverlayGridItem[][] => {
+        return groupListAndMap(years.value, (y: IDefaultSelect) => {
+            const active = year.value(instance) === y.value;
+            const disabled =
+                checkMinMaxValue(
+                    y.value,
+                    getMinMaxYear(propDates.value.minDate),
+                    getMinMaxYear(propDates.value.maxDate),
+                ) || filters.value.years?.includes(year.value(instance));
+            const highlighted = checkHighlightYear(highlight.value, y.value);
+
+            return { active, disabled, highlighted };
+        });
+    });
+
+    const handleYearSelect = (year: number, instance: number) => {
+        selectYear(year, instance);
+        toggleYearPicker(instance);
+    };
+
+    const handleYear = (instance: number, increment = false): void => {
+        if (!isDisabled.value(instance, increment)) {
+            const yearToSelect = increment ? year.value(instance) + 1 : year.value(instance) - 1;
+            selectYear(yearToSelect, instance);
+        }
+    };
+
+    const toggleYearPicker = (instance: number, flow = false, show?: boolean): void => {
+        if (!flow) {
+            emit('reset-flow');
+        }
+
+        if (show !== undefined) {
+            showYearPicker.value[instance] = show;
+        } else {
+            showYearPicker.value[instance] = !showYearPicker.value[instance];
+        }
+
+        if (!showYearPicker.value[instance]) {
+            emit('overlay-closed');
+            emit('overlay-toggle', { open: false, overlay: FlowStep.year });
+        } else {
+            emit('overlay-toggle', { open: true, overlay: FlowStep.year });
+        }
+    };
+
+    return {
+        isDisabled,
+        groupedYears,
+        showYearPicker,
+        selectYear,
+        toggleYearPicker,
+        handleYearSelect,
+        handleYear,
+    };
+};

package/src/datePicker/composables/arrow-navigate.ts

@@ -0,0 +1,191 @@
+import { computed, reactive, ref } from 'vue';
+
+type ElRefs = Array<HTMLElement | null>;
+
+const refSets = reactive({
+    monthYear: [] as ElRefs,
+    calendar: [] as ElRefs[],
+    time: [] as ElRefs,
+    actionRow: [] as ElRefs,
+    selectionGrid: [] as ElRefs[],
+    timePicker: {
+        '0': [] as ElRefs[],
+        '1': [] as ElRefs[],
+    },
+    monthPicker: [] as ElRefs[],
+});
+const timePickerBackRef = ref<HTMLElement | null>(null);
+const isSelectionGrid = ref(false);
+const isTimePicker = ref(false);
+const isMonthPicker = ref(false);
+const isTimePickerMode = ref(false);
+
+const selectedIndex = ref(0);
+const activeRow = ref(0);
+
+export const useArrowNavigation = () => {
+    const matrix = computed((): ElRefs[] => {
+        if (isSelectionGrid.value) return [...refSets.selectionGrid, refSets.actionRow].filter((set) => set.length);
+        if (isTimePicker.value) {
+            return [
+                ...refSets.timePicker[0],
+                ...refSets.timePicker[1],
+                isTimePickerMode.value ? [] : [timePickerBackRef.value],
+                refSets.actionRow,
+            ].filter((set) => set.length);
+        }
+        if (isMonthPicker.value) return [...refSets.monthPicker, refSets.actionRow];
+        return [refSets.monthYear, ...refSets.calendar, refSets.time, refSets.actionRow].filter((set) => set.length);
+    });
+
+    // Handles left and right arrow
+    const handleSelectionIndexX = (increment?: boolean): void => {
+        selectedIndex.value = increment ? selectedIndex.value + 1 : selectedIndex.value - 1;
+        let el = null;
+        if (matrix.value[activeRow.value]) {
+            el = matrix.value[activeRow.value][selectedIndex.value];
+        }
+
+        if (!el && matrix.value[activeRow.value + (increment ? 1 : -1)]) {
+            activeRow.value = activeRow.value + (increment ? 1 : -1);
+            selectedIndex.value = increment ? 0 : matrix.value[activeRow.value].length - 1;
+        } else if (!el) {
+            selectedIndex.value = increment ? selectedIndex.value - 1 : selectedIndex.value + 1;
+        }
+    };
+
+    // Handles up and down arrow
+    const handleSelectionIndexY = (increment?: boolean): void => {
+        if ((activeRow.value === 0 && !increment) || (activeRow.value === matrix.value.length && increment)) return;
+        activeRow.value = increment ? activeRow.value + 1 : activeRow.value - 1;
+        const el = matrix.value[activeRow.value];
+
+        if (!el) {
+            activeRow.value = increment ? activeRow.value - 1 : activeRow.value + 1;
+        } else if (
+            matrix.value[activeRow.value] &&
+            !matrix.value[activeRow.value][selectedIndex.value] &&
+            selectedIndex.value !== 0
+        ) {
+            selectedIndex.value = matrix.value[activeRow.value].length - 1;
+        }
+    };
+
+    const handleElFocus = (increment: boolean): void => {
+        let el = null;
+        if (matrix.value[activeRow.value]) {
+            el = matrix.value[activeRow.value][selectedIndex.value];
+        }
+        if (el) {
+            el.focus({ preventScroll: !isSelectionGrid.value });
+        } else {
+            selectedIndex.value = increment ? selectedIndex.value - 1 : selectedIndex.value + 1;
+        }
+    };
+
+    const arrowRight = (): void => {
+        handleSelectionIndexX(true);
+        handleElFocus(true);
+    };
+
+    const arrowLeft = (): void => {
+        handleSelectionIndexX(false);
+        handleElFocus(false);
+    };
+
+    const arrowUp = (): void => {
+        handleSelectionIndexY(false);
+        handleElFocus(true);
+    };
+
+    const arrowDown = (): void => {
+        handleSelectionIndexY(true);
+        handleElFocus(true);
+    };
+
+    /**
+     * Add values per page, holds the ref values of the focusable elements
+     * Build top to bottom
+     */
+    const buildMatrix = (elements: Array<HTMLElement | null>, set: 'monthYear' | 'time' | 'actionRow'): void => {
+        refSets[set] = elements;
+    };
+
+    const buildMultiLevelMatrix = (
+        elements: HTMLElement[][],
+        set: 'calendar' | 'selectionGrid' | 'monthPicker',
+    ): void => {
+        refSets[set] = elements;
+    };
+
+    const resetNavigation = (): void => {
+        selectedIndex.value = 0;
+        activeRow.value = 0;
+    };
+
+    const setMonthPicker = (value: boolean): void => {
+        isMonthPicker.value = value;
+        resetNavigation();
+    };
+
+    /**
+     * For selection grid, things are handled per grid
+     */
+    const setSelectionGrid = (value: boolean): void => {
+        isSelectionGrid.value = value;
+        resetNavigation();
+        if (!value) {
+            refSets.selectionGrid = [];
+        }
+    };
+
+    const setTimePicker = (value: boolean, mode = false) => {
+        isTimePicker.value = value;
+        isTimePickerMode.value = mode;
+        resetNavigation();
+        if (!value) {
+            refSets.timePicker[0] = [];
+            refSets.timePicker[1] = [];
+        }
+    };
+
+    const setTimePickerElements = (elements: HTMLElement[][], order: 0 | 1 = 0): void => {
+        refSets.timePicker[order] = elements;
+    };
+
+    const setTimePickerBackRef = (el: HTMLElement | null): void => {
+        timePickerBackRef.value = el;
+    };
+
+    const clearArrowNav = (): void => {
+        refSets.monthYear = [];
+        refSets.calendar = [];
+        refSets.time = [];
+        refSets.actionRow = [];
+        refSets.selectionGrid = [];
+        refSets.timePicker[0] = [];
+        refSets.timePicker[1] = [];
+        isSelectionGrid.value = false;
+        isTimePicker.value = false;
+        isTimePickerMode.value = false;
+        isMonthPicker.value = false;
+        resetNavigation();
+        timePickerBackRef.value = null;
+    };
+
+    return {
+        buildMatrix,
+        buildMultiLevelMatrix,
+        setTimePickerBackRef,
+        setSelectionGrid,
+        setTimePicker,
+        setTimePickerElements,
+        arrowRight,
+        arrowLeft,
+        arrowUp,
+        arrowDown,
+        clearArrowNav,
+        setMonthPicker,
+        refSets, // exposed for testing
+    };
+};