bge-ui 1.3.4 → 1.3.6

package/src/datePicker/components/MonthPicker/MonthPicker.vue

@@ -0,0 +1,130 @@
+<template>
+    <InstanceWrap v-slot="{ instance }" :multi-calendars="defaultedMultiCalendars.count" :collapse="collapse" stretch>
+        <slot v-if="$slots['top-extra']" name="top-extra" :value="internalModelValue" />
+        <template v-if="$slots['month-year']">
+            <slot
+                name="month-year"
+                v-bind="{
+                    year,
+                    months: groupedMonths(instance),
+                    years: groupedYears(instance),
+                    selectMonth,
+                    selectYear,
+                    instance,
+                }"
+            />
+        </template>
+        <template v-else>
+            <SelectionOverlay
+                :items="groupedMonths(instance)"
+                :arrow-navigation="arrowNavigation"
+                :is-last="autoApply && !defaultedConfig.keepActionRow"
+                :esc-close="escClose"
+                :height="defaultedConfig.modeHeight"
+                :config="config"
+                :no-overlay-focus="Boolean(noOverlayFocus || textInput)"
+                use-relative
+                type="month"
+                @selected="selectMonth($event, instance)"
+                @hover-value="setHoverDate($event, instance)"
+            >
+                <template #header>
+                    <YearModePicker
+                        v-bind="$props"
+                        :items="groupedYears(instance)"
+                        :instance="instance"
+                        :show-year-picker="showYearPicker[instance]"
+                        :year="year(instance)"
+                        :is-disabled="(next: boolean) => isDisabled(instance, next)"
+                        @handle-year="handleYear(instance, $event)"
+                        @year-select="handleYearSelect($event, instance)"
+                        @toggle-year-picker="toggleYearPicker(instance, $event?.flow, $event?.show)"
+                    >
+                        <template v-for="(slot, i) in yearModeSlots" #[slot]="args" :key="i">
+                            <slot :name="slot" v-bind="args" />
+                        </template>
+                    </YearModePicker>
+                </template>
+                <template v-if="$slots[`month-overlay-value`]" #item="{ item }">
+                    <slot :name="`month-overlay-value`" :text="item.text" :value="item.value" />
+                </template>
+            </SelectionOverlay>
+        </template>
+    </InstanceWrap>
+</template>
+
+<script lang="ts" setup>
+    import { onMounted, useSlots } from 'vue';
+    import SelectionOverlay from '../../components/Common/SelectionOverlay.vue';
+    import InstanceWrap from '../../components/Common/InstanceWrap.vue';
+    import YearModePicker from '../../components/shared/YearModePicker.vue';
+
+    import { PickerBaseProps } from '../../props';
+    import { useMonthPicker } from '../../components/MonthPicker/month-picker';
+    import { mapSlots } from '../../composables';
+
+    const emit = defineEmits([
+        'update:internal-model-value',
+        'overlay-closed',
+        'reset-flow',
+        'range-start',
+        'range-end',
+        'auto-apply',
+        'update-month-year',
+        'update-flow-step',
+        'mount',
+        'invalid-fixed-range',
+        'overlay-toggle',
+    ]);
+
+    const slots = useSlots();
+    const yearModeSlots = mapSlots(slots, 'yearMode');
+
+    const props = defineProps({
+        ...PickerBaseProps,
+    });
+
+    onMounted(() => {
+        if (!props.shadow) {
+            emit('mount', null);
+        }
+    });
+
+    defineOptions({
+        compatConfig: {
+            MODE: 3,
+        },
+    });
+
+    const {
+        groupedMonths,
+        groupedYears,
+        year,
+        isDisabled,
+        defaultedMultiCalendars,
+        defaultedConfig,
+        showYearPicker,
+        modelValue,
+        presetDate,
+        setHoverDate,
+        selectMonth,
+        selectYear,
+        toggleYearPicker,
+        handleYearSelect,
+        handleYear,
+        getModelMonthYear,
+    } = useMonthPicker(props, emit);
+
+    const getSidebarProps = () => {
+        return {
+            modelValue,
+            year,
+            getModelMonthYear,
+            selectMonth,
+            selectYear,
+            handleYear,
+        };
+    };
+
+    defineExpose({ getSidebarProps, presetDate, toggleYearPicker: (flow: boolean) => toggleYearPicker(0, flow) });
+</script>

package/src/datePicker/components/MonthPicker/month-picker.ts

@@ -0,0 +1,232 @@
+import { computed, nextTick, onMounted, ref } from 'vue';
+import { getMonth, getYear } from 'date-fns';
+
+import { checkMinMaxValue, getMonths, groupListAndMap } from '../../utils/util';
+import {
+    checkHighlightMonth,
+    getDate,
+    getDisabledMonths,
+    getMaxMonth,
+    getMinMonth,
+    isDateBetween,
+    resetDate,
+    setDateMonthOrYear,
+} from '../../utils/date-utils';
+import { useDefaults, useModel, useValidation } from '../../composables';
+import {
+    checkRangeAutoApply,
+    getRangeWithFixedDate,
+    handleMultiDatesSelect,
+    setMonthOrYearRange,
+    setPresetDate,
+} from '../../composables/shared';
+
+import type { IDefaultSelect, OverlayGridItem, VueEmit } from '../../interfaces';
+import type { PickerBasePropsType } from '../../props';
+import { useMonthOrQuarterPicker } from '../../components/shared/month-quarter-picker';
+
+export const useMonthPicker = (props: PickerBasePropsType, emit: VueEmit) => {
+    const {
+        defaultedMultiCalendars,
+        defaultedAriaLabels,
+        defaultedTransitions,
+        defaultedConfig,
+        defaultedRange,
+        defaultedHighlight,
+        propDates,
+        defaultedTz,
+        defaultedFilters,
+        defaultedMultiDates,
+    } = useDefaults(props);
+    const reMap = () => {
+        if (props.isTextInputDate) onYearSelect(getYear(getDate(props.startDate)), 0);
+    };
+    const { modelValue, year, month: instanceMonth, calendars } = useModel(props, emit, reMap);
+    const months = computed(() => getMonths(props.formatLocale, props.locale, props.monthNameFormat));
+    const hoverDate = ref<Date | null>(null);
+    const { checkMinMaxRange } = useValidation(props);
+
+    const {
+        selectYear: onYearSelect,
+        groupedYears,
+        showYearPicker,
+        toggleYearPicker,
+        handleYearSelect,
+        handleYear,
+        isDisabled,
+    } = useMonthOrQuarterPicker({
+        modelValue,
+        multiCalendars: defaultedMultiCalendars,
+        range: defaultedRange,
+        highlight: defaultedHighlight,
+        calendars,
+        year,
+        propDates,
+        month: instanceMonth,
+        filters: defaultedFilters,
+        props,
+        emit,
+    });
+
+    onMounted(() => {
+        if (props.startDate) {
+            if ((modelValue.value && props.focusStartDate) || !modelValue.value) {
+                onYearSelect(getYear(getDate(props.startDate)), 0);
+            }
+        }
+    });
+
+    const getMonthYear = (date?: Date) => {
+        if (date) {
+            return { month: getMonth(date), year: getYear(date) };
+        }
+        return { month: null, year: null };
+    };
+
+    const getModelMonthYear = () => {
+        if (modelValue.value) {
+            if (Array.isArray(modelValue.value)) {
+                return modelValue.value.map((val) => getMonthYear(val));
+            }
+            return getMonthYear(modelValue.value);
+        }
+        return getMonthYear();
+    };
+
+    const checkActiveMonth = (instance: number, month: number) => {
+        const calendar = calendars.value[instance];
+        const activeMonthYear = getModelMonthYear();
+        if (Array.isArray(activeMonthYear)) {
+            return activeMonthYear.some((value) => value.year === calendar?.year && value.month === month);
+        }
+        return calendar?.year === activeMonthYear.year && month === activeMonthYear.month;
+    };
+
+    const isSameMonthYear = (month: number, instance: number, i: number) => {
+        const currentModel = getModelMonthYear();
+
+        if (Array.isArray(currentModel)) {
+            const currentYear = year.value(instance);
+
+            return currentYear === currentModel[i]?.year && month === currentModel[i]?.month;
+        }
+        return false;
+    };
+
+    const isMonthBetween = (month: number, instance: number) => {
+        if (defaultedRange.value.enabled) {
+            const currentModel = getModelMonthYear();
+            if (Array.isArray(modelValue.value) && Array.isArray(currentModel)) {
+                const isModel = isSameMonthYear(month, instance, 0) || isSameMonthYear(month, instance, 1);
+                const current = setDateMonthOrYear(resetDate(getDate()), month, year.value(instance));
+                return isDateBetween(modelValue.value, hoverDate.value, current) && !isModel;
+            }
+            return false;
+        }
+        return false;
+    };
+
+    const groupedMonths = computed(() => (instance: number): OverlayGridItem[][] => {
+        return groupListAndMap(months.value, (month: IDefaultSelect) => {
+            const active = checkActiveMonth(instance, month.value);
+            const disabled =
+                checkMinMaxValue(
+                    month.value,
+                    getMinMonth(year.value(instance), propDates.value.minDate),
+                    getMaxMonth(year.value(instance), propDates.value.maxDate),
+                ) ||
+                getDisabledMonths(propDates.value.disabledDates, year.value(instance)).includes(month.value) ||
+                defaultedFilters.value.months?.includes(month.value);
+            const isBetween = isMonthBetween(month.value, instance);
+            const highlighted = checkHighlightMonth(defaultedHighlight.value, month.value, year.value(instance));
+            return { active, disabled, isBetween, highlighted };
+        });
+    });
+
+    const monthToDate = (month: number, instance: number) => {
+        return setDateMonthOrYear(resetDate(getDate()), month, year.value(instance));
+    };
+
+    const selectSingleMonth = (month: number, instance: number) => {
+        const date = modelValue.value ? (modelValue.value as Date) : resetDate(new Date());
+        modelValue.value = setDateMonthOrYear(date, month, year.value(instance));
+        emit('auto-apply');
+        emit('update-flow-step');
+    };
+
+    const selectRangedMonth = (month: number, instance: number) => {
+        const date = monthToDate(month, instance);
+        if (defaultedRange.value.fixedEnd || defaultedRange.value.fixedStart) {
+            modelValue.value = getRangeWithFixedDate(date, modelValue, emit, defaultedRange);
+        } else if (!modelValue.value) {
+            modelValue.value = [monthToDate(month, instance)];
+        } else if (checkMinMaxRange(date, modelValue.value)) {
+            modelValue.value = setMonthOrYearRange(modelValue, monthToDate(month, instance), emit);
+        }
+        nextTick().then(() => {
+            checkRangeAutoApply(modelValue.value as Date[], emit, props.autoApply, props.modelAuto);
+        });
+    };
+
+    const selectMultiMonths = (month: number, instance: number) => {
+        handleMultiDatesSelect(monthToDate(month, instance), modelValue, defaultedMultiDates.value.limit);
+        emit('auto-apply', true);
+    };
+
+    const selectMonth = (month: number, instance: number) => {
+        calendars.value[instance].month = month;
+        emitMonthYearUpdate(instance, calendars.value[instance].year, month);
+        if (defaultedMultiDates.value.enabled) return selectMultiMonths(month, instance);
+        if (defaultedRange.value.enabled) return selectRangedMonth(month, instance);
+        return selectSingleMonth(month, instance);
+    };
+
+    const selectYear = (year: number, instance: number) => {
+        onYearSelect(year, instance);
+        emitMonthYearUpdate(instance, year, null);
+    };
+
+    const emitMonthYearUpdate = (instance: number, year: number, monthVal: number | null) => {
+        let month = monthVal;
+        if (!month && month !== 0) {
+            const value = getModelMonthYear();
+            month = Array.isArray(value) ? value[instance].month : value.month;
+        }
+        emit('update-month-year', { instance, year, month });
+    };
+
+    const setHoverDate = (month: number, instance: number) => {
+        hoverDate.value = monthToDate(month, instance);
+    };
+
+    const presetDate = (value: Date[] | string[] | Date | string, noTz?: boolean) => {
+        setPresetDate({
+            value,
+            modelValue,
+            range: defaultedRange.value.enabled,
+            timezone: noTz ? undefined : defaultedTz.value.timezone,
+        });
+        emit('auto-apply');
+    };
+
+    return {
+        groupedMonths,
+        groupedYears,
+        year,
+        isDisabled,
+        defaultedMultiCalendars,
+        defaultedAriaLabels,
+        defaultedTransitions,
+        defaultedConfig,
+        showYearPicker,
+        modelValue,
+        presetDate,
+        setHoverDate,
+        selectMonth,
+        selectYear,
+        toggleYearPicker,
+        handleYearSelect,
+        handleYear,
+        getModelMonthYear,
+    };
+};

package/src/datePicker/components/QuarterPicker/QuarterPicker.vue

@@ -0,0 +1,111 @@
+<template>
+    <InstanceWrap v-slot="{ instance }" :multi-calendars="defaultedMultiCalendars.count" :collapse="collapse" stretch>
+        <div class="dp-quarter-picker-wrap" :style="{ minHeight: `${defaultedConfig.modeHeight}px` }">
+            <slot v-if="$slots['top-extra']" name="top-extra" :value="internalModelValue" />
+            <div>
+                <YearModePicker
+                    v-bind="$props"
+                    :items="groupedYears(instance)"
+                    :instance="instance"
+                    :show-year-picker="showYearPicker[instance]"
+                    :year="year(instance)"
+                    :is-disabled="(next: boolean) => isDisabled(instance, next)"
+                    @handle-year="handleYear(instance, $event)"
+                    @year-select="handleYearSelect($event, instance)"
+                    @toggle-year-picker="toggleYearPicker(instance, $event?.flow, $event?.show)"
+                >
+                    <template v-for="(slot, i) in yearModeSlots" #[slot]="args" :key="i">
+                        <slot :name="slot" v-bind="args" />
+                    </template>
+                </YearModePicker>
+            </div>
+            <div class="dp--quarter-items">
+                <div v-for="(quarter, i) in quarters(instance)" :key="i">
+                    <button
+                        type="button"
+                        class="dp--qr-btn"
+                        :class="{
+                            'dp--qr-btn-active': quarter.active,
+                            'dp--qr-btn-between': quarter.isBetween,
+                            'dp--qr-btn-disabled': quarter.disabled,
+                            'dp--highlighted': quarter.highlighted,
+                        }"
+                        :data-test="quarter.value"
+                        :disabled="quarter.disabled"
+                        @click="selectQuarter(quarter.value, instance, quarter.disabled)"
+                        @mouseover="setHoverDate(quarter.value)"
+                    >
+                        <template v-if="$slots['quarter']"
+                            ><slot name="quarter" :value="quarter.value" :text="quarter.text"
+                        /></template>
+                        <template v-else>
+                            {{ quarter.text }}
+                        </template>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </InstanceWrap>
+</template>
+
+<script lang="ts" setup>
+    import { useSlots } from 'vue';
+
+    import InstanceWrap from '../../components/Common/InstanceWrap.vue';
+    import YearModePicker from '../../components/shared/YearModePicker.vue';
+
+    import { useQuarterPicker } from '../../components/QuarterPicker/quarter-picker';
+    import { mapSlots } from '../../composables';
+    import { PickerBaseProps } from '../../props';
+
+    const emit = defineEmits([
+        'update:internal-model-value',
+        'reset-flow',
+        'overlay-closed',
+        'auto-apply',
+        'range-start',
+        'range-end',
+        'overlay-toggle',
+        'update-month-year',
+    ]);
+    const props = defineProps({
+        ...PickerBaseProps,
+    });
+
+    const slots = useSlots();
+    const yearModeSlots = mapSlots(slots, 'yearMode');
+
+    defineOptions({
+        compatConfig: {
+            MODE: 3,
+        },
+    });
+
+    const {
+        defaultedMultiCalendars,
+        defaultedConfig,
+        groupedYears,
+        year,
+        isDisabled,
+        quarters,
+        modelValue,
+        showYearPicker,
+        setHoverDate,
+        selectQuarter,
+        toggleYearPicker,
+        handleYearSelect,
+        handleYear,
+    } = useQuarterPicker(props, emit);
+
+    const getSidebarProps = () => {
+        return {
+            modelValue,
+            year,
+            selectQuarter,
+            handleYearSelect,
+            handleYear,
+        };
+    };
+
+    defineExpose({ getSidebarProps });
+</script>

package/src/datePicker/components/QuarterPicker/quarter-picker.ts

@@ -0,0 +1,153 @@
+import { computed, ref } from 'vue';
+import {
+    eachQuarterOfInterval,
+    endOfQuarter,
+    endOfYear,
+    format,
+    getMonth,
+    getQuarter,
+    getYear,
+    isSameQuarter,
+    set,
+    startOfQuarter,
+    startOfYear,
+} from 'date-fns';
+
+import { useDefaults, useModel, useValidation } from '../../composables';
+import { useMonthOrQuarterPicker } from '../../components/shared/month-quarter-picker';
+import { checkRangeAutoApply, handleMultiDatesSelect, setMonthOrYearRange } from '../../composables/shared';
+
+import type { PickerBasePropsType } from '../../props';
+import type { VueEmit } from '../../interfaces';
+import { isDateBetween, isDateEqual } from '../../utils/date-utils';
+
+export const useQuarterPicker = (props: PickerBasePropsType, emit: VueEmit) => {
+    const hoverDate = ref();
+    const {
+        defaultedMultiCalendars,
+        defaultedConfig,
+        defaultedHighlight,
+        defaultedRange,
+        propDates,
+        defaultedFilters,
+        defaultedMultiDates,
+    } = useDefaults(props);
+    const { modelValue, year, month, calendars } = useModel(props, emit);
+    const { isDisabled: isDateDisabled } = useValidation(props);
+    const { selectYear, groupedYears, showYearPicker, isDisabled, toggleYearPicker, handleYearSelect, handleYear } =
+        useMonthOrQuarterPicker({
+            modelValue,
+            multiCalendars: defaultedMultiCalendars,
+            range: defaultedRange,
+            highlight: defaultedHighlight,
+            calendars,
+            propDates,
+            month,
+            year,
+            filters: defaultedFilters,
+            props,
+            emit,
+        });
+
+    const formatQuarterText = (start: Date, end: Date) => {
+        return [start, end].map((date) => format(date, 'MMMM', { locale: props.formatLocale })).join('-');
+    };
+
+    const isQuarterActive = computed(() => (date: Date) => {
+        if (modelValue.value) {
+            if (Array.isArray(modelValue.value)) {
+                return modelValue.value.some((val) => isSameQuarter(date, val));
+            }
+            return isSameQuarter(modelValue.value, date);
+        }
+        return false;
+    });
+
+    const isQuarterBetween = (date: Date) => {
+        if (defaultedRange.value.enabled) {
+            if (Array.isArray(modelValue.value)) {
+                const isModel = isDateEqual(date, modelValue.value[0]) || isDateEqual(date, modelValue.value[1]);
+                return isDateBetween(modelValue.value, hoverDate.value, date) && !isModel;
+            }
+            return false;
+        }
+        return false;
+    };
+
+    const matchQuarter = (value: { quarter: number; year: number }, date: Date) => {
+        return value.quarter === getQuarter(date) && value.year === getYear(date);
+    };
+
+    const isHighlighted = (start: Date) => {
+        return typeof defaultedHighlight.value === 'function'
+            ? defaultedHighlight.value({ quarter: getQuarter(start), year: getYear(start) })
+            : !!defaultedHighlight.value.quarters.find((value: any) => matchQuarter(value, start));
+    };
+
+    const quarters = computed(() => (instance: number) => {
+        const activeYear = set(new Date(), { year: year.value(instance) });
+        return eachQuarterOfInterval({
+            start: startOfYear(activeYear),
+            end: endOfYear(activeYear),
+        }).map((quarter) => {
+            const start = startOfQuarter(quarter);
+            const end = endOfQuarter(quarter);
+            const disabled = isDateDisabled(quarter);
+            const isBetween = isQuarterBetween(start);
+            const highlighted = isHighlighted(start);
+            return {
+                text: formatQuarterText(start, end),
+                value: start,
+                active: isQuarterActive.value(start),
+                highlighted,
+                disabled: disabled,
+                isBetween,
+            };
+        });
+    });
+
+    const selectMultiQuarters = (date: Date) => {
+        handleMultiDatesSelect(date, modelValue, defaultedMultiDates.value.limit);
+        emit('auto-apply', true);
+    };
+
+    const selectRangedQuarter = (date: Date) => {
+        modelValue.value = setMonthOrYearRange(modelValue, date, emit);
+        checkRangeAutoApply(modelValue.value, emit, props.autoApply, props.modelAuto);
+    };
+
+    const selectSingleQuarter = (date: Date) => {
+        modelValue.value = date;
+        emit('auto-apply');
+    };
+
+    const selectQuarter = (date: Date, instance: number, disabled: boolean) => {
+        if (disabled) return;
+        calendars.value[instance].month = getMonth(endOfQuarter(date));
+
+        if (defaultedMultiDates.value.enabled) return selectMultiQuarters(date);
+        if (defaultedRange.value.enabled) return selectRangedQuarter(date);
+        return selectSingleQuarter(date);
+    };
+
+    const setHoverDate = (date: Date) => {
+        hoverDate.value = date;
+    };
+
+    return {
+        defaultedConfig,
+        defaultedMultiCalendars,
+        groupedYears,
+        year,
+        isDisabled,
+        quarters,
+        showYearPicker,
+        modelValue,
+        setHoverDate,
+        selectYear,
+        selectQuarter,
+        toggleYearPicker,
+        handleYearSelect,
+        handleYear,
+    };
+};