feat: Add option to select and jump (resolves #87)

Author: Jasenkoo

index.d.ts

@@ -11,7 +11,8 @@ type EmitEvents =
     | 'focus'
     | 'blur'
     | 'internalModelChange'
-    | 'recalculatePosition';
+    | 'recalculatePosition'
+    | 'flow-step';
 
 interface Vue3DatePicker {
     uid?: string;
@@ -181,6 +182,7 @@ interface Vue3DatePicker {
     autocomplete?: string;
     multiDates?: boolean;
     presetRanges?: { label: string; range: Date[] | string[] }[];
+    flow: ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')[];
 }
 
 interface PublicMethods extends MethodOptions {

src/Vue3DatePicker/Vue3DatePicker.vue

@@ -107,13 +107,15 @@
                     readonly,
                     multiDates,
                     presetRanges,
+                    flow,
                 }"
                 v-model:internalModelValue="internalModelValue"
                 @close-picker="closeMenu"
                 @select-date="selectDate"
                 @dp-open="recalculatePosition"
                 @auto-apply="autoApplyValue"
                 @time-update="timeUpdate"
+                @flow-step="$emit('flow-step', $event)"
             >
                 <template v-for="(slot, i) in slotList" #[slot]="args" :key="i">
                     <slot :name="slot" v-bind="{ ...args }" />
@@ -156,6 +158,7 @@
         IDisableDates,
         AltPosition,
         PresetRange,
+        Flow,
     } from './interfaces';
     import { getDefaultPattern, isValidTime } from './utils/date-utils';
     import { getDefaultTextInputOptions, getDefaultFilters, mergeDefaultTransitions } from './utils/util';
@@ -175,6 +178,7 @@
         'blur',
         'internalModelChange',
         'recalculatePosition',
+        'flow-step',
     ]);
     const props = defineProps({
         uid: { type: String as PropType<string>, default: null },
@@ -269,6 +273,7 @@
         autocomplete: { type: String as PropType<string>, default: null },
         multiDates: { type: Boolean as PropType<boolean>, default: false },
         presetRanges: { type: Array as PropType<PresetRange[]>, default: () => [] },
+        flow: { type: Array as PropType<Flow>, default: () => [] },
     });
     const slots = useSlots();
     const isOpen = ref(false);

src/Vue3DatePicker/components/Calendar.vue

@@ -122,7 +122,7 @@
     import { getDayNames, getDefaultMarker, unrefElement } from '../utils/util';
     import { isDateAfter, isDateEqual, setDateMonthOrYear } from '../utils/date-utils';
 
-    const emit = defineEmits(['selectDate', 'setHoverDate', 'handleScroll']);
+    const emit = defineEmits(['selectDate', 'setHoverDate', 'handleScroll', 'mount']);
 
     const props = defineProps({
         locale: { type: String as PropType<string>, default: 'en-Us' },
@@ -173,6 +173,7 @@
             startTransitions.value = true;
         }
         prevDate.value = setDateMonthOrYear(new Date(), props.month, props.year);
+        emit('mount');
     });
 
     const specificMode = computed(() => props.monthPicker || props.timePicker);

src/Vue3DatePicker/components/DatepickerMenu.vue

@@ -28,9 +28,14 @@
             </div>
             <div class="dp__instance_calendar" ref="calendarWrapperRef" role="document">
                 <div :class="menuCalendarClassWrapper">
-                    <div v-for="instance in calendarAmm" :key="instance" :class="calendarInstanceClassWrapper">
+                    <div v-for="(instance, i) in calendarAmm" :key="instance" :class="calendarInstanceClassWrapper">
                         <component
                             :is="monthYearComponent ? monthYearComponent : MonthYearInput"
+                            :ref="
+                                (el) => {
+                                    if (el) monthYearInputRefs[i] = el;
+                                }
+                            "
                             v-if="!disableMonthYearSelect && !timePicker"
                             v-bind="{
                                 months,
@@ -46,6 +51,8 @@
                                 minDate,
                                 maxDate,
                             }"
+                            @mount="childMount('monthYearInput')"
+                            @reset-flow="resetFlow"
                             @update:month="updateMonthYear(instance, $event, true)"
                             @update:year="updateMonthYear(instance, $event, false)"
                             @month-year-select="monthYearSelect"
@@ -56,6 +63,7 @@
                         </component>
                         <Calendar
                             v-bind="calendarProps"
+                            v-model:flow-step="flowStep"
                             :instance="instance"
                             :mapped-dates="mappedDates(instance)"
                             :month="month(instance)"
@@ -64,6 +72,8 @@
                             @select-date="selectDate($event, !isFirstInstance(instance))"
                             @set-hover-date="setHoverDate($event)"
                             @handle-scroll="handleScroll($event, instance)"
+                            @mount="childMount('calendar')"
+                            @reset-flow="resetFlow"
                         >
                             <template v-for="(slot, i) in calendarSlots" #[slot]="args" :key="i">
                                 <slot :name="slot" v-bind="{ ...args }" />
@@ -96,9 +106,11 @@
                             customProps,
                             enableSeconds,
                         }"
+                        @mount="childMount('timePicker')"
                         @update:hours="updateTime($event)"
                         @update:minutes="updateTime($event, false)"
                         @update:seconds="updateTime($event, false, true)"
+                        @reset-flow="resetFlow"
                     >
                         <template v-for="(slot, i) in timePickerSlots" #[slot]="args" :key="i">
                             <slot :name="slot" v-bind="args" />
@@ -163,6 +175,7 @@
         ComputedRef,
         ref,
         onUnmounted,
+        reactive,
     } from 'vue';
     import Calendar from './Calendar.vue';
     import ActionRow from './ActionRow.vue';
@@ -171,6 +184,7 @@
 
     import {
         DynamicClass,
+        Flow,
         ICalendarDate,
         IDateFilter,
         IDefaultSelect,
@@ -179,7 +193,10 @@
         IMarker,
         InternalModuleValue,
         ITimeValue,
+        MenuChildCmp,
+        MonthYearInputRef,
         PresetRange,
+        TimePickerRef,
         WeekStartNum,
         WeekStartStr,
     } from '../interfaces';
@@ -195,6 +212,7 @@
         'dpOpen',
         'autoApply',
         'timeUpdate',
+        'flow-step',
     ]);
     const props = defineProps({
         internalModelValue: { type: [Date, Array] as PropType<InternalModuleValue>, default: null },
@@ -265,12 +283,17 @@
         readonly: { type: Boolean as PropType<boolean>, default: false },
         multiDates: { type: Boolean as PropType<boolean>, default: false },
         presetRanges: { type: Array as PropType<PresetRange[]>, default: () => [] },
+        flow: { type: Array as PropType<Flow>, default: () => [] },
     });
     const slots = useSlots();
     const calendarWrapperRef = ref(null);
+    const childrenMounted = reactive({ timePicker: false, monthYearInput: false, calendar: false });
+    const monthYearInputRefs = ref<MonthYearInputRef[]>([]);
+    const timePickerRef = ref<TimePickerRef | null>(null);
     const dpMenuRef = ref(null);
     const calendarWidth = ref(0);
     const menuMount = ref(false);
+    const flowStep = ref(0);
 
     onMounted(() => {
         menuMount.value = true;
@@ -294,6 +317,18 @@
         document.removeEventListener('resize', getCalendarWidth);
     });
 
+    const updateFlowStep = (): void => {
+        if (props.flow?.length && flowStep.value !== -1) {
+            flowStep.value += 1;
+            emit('flow-step', flowStep.value);
+            handleFlow();
+        }
+    };
+
+    const resetFlow = (): void => {
+        flowStep.value = -1;
+    };
+
     const {
         updateTime,
         updateMonthYear,
@@ -322,7 +357,7 @@
         isHoverDateStartEnd,
         isHoverDate,
         presetDateRange,
-    } = useCalendar(props, emit);
+    } = useCalendar(props, emit, updateFlowStep);
 
     const calendarSlots = mapSlots(slots, 'calendar');
     const actionSlots = mapSlots(slots, 'action');
@@ -494,4 +529,43 @@
             emit('selectDate');
         }
     };
+
+    const childMount = (cmp: MenuChildCmp): void => {
+        if (props.flow?.length) {
+            childrenMounted[cmp] = true;
+
+            if (!Object.keys(childrenMounted).filter((key) => !childrenMounted[key as MenuChildCmp]).length) {
+                handleFlow();
+            }
+        }
+    };
+
+    const handleFlow = (): void => {
+        if (props.flow[flowStep.value] === 'month') {
+            if (monthYearInputRefs.value[0]) {
+                monthYearInputRefs.value[0].toggleMonthPicker(true);
+            }
+        }
+        if (props.flow[flowStep.value] === 'year') {
+            if (monthYearInputRefs.value) {
+                monthYearInputRefs.value[0].toggleYearPicker(true);
+            }
+        }
+        if (props.flow[flowStep.value] === 'calendar') {
+            if (timePickerRef.value) {
+                timePickerRef.value.toggleTimePicker(false, true);
+            }
+        }
+        if (props.flow[flowStep.value] === 'time') {
+            if (timePickerRef.value) {
+                timePickerRef.value.toggleTimePicker(true, true);
+            }
+        }
+        const flowValue = props.flow[flowStep.value];
+        if (flowValue === 'hours' || flowValue === 'minutes' || flowValue === 'seconds') {
+            if (timePickerRef.value) {
+                timePickerRef.value.toggleTimePicker(true, true, flowValue);
+            }
+        }
+    };
 </script>

src/Vue3DatePicker/components/MonthYearInput.vue

@@ -163,7 +163,7 @@
 </template>
 
 <script lang="ts" setup>
-    import { computed, PropType, ref } from 'vue';
+    import { computed, onMounted, PropType, ref } from 'vue';
 
     import { ChevronLeftIcon, ChevronRightIcon, CalendarIcon } from './Icons';
     import SelectionGrid from './SelectionGrid.vue';
@@ -173,7 +173,7 @@
     import { useTransitions } from './composition/transition';
     import { getMonth, getYear } from 'date-fns';
 
-    const emit = defineEmits(['update:month', 'update:year', 'monthYearSelect']);
+    const emit = defineEmits(['update:month', 'update:year', 'monthYearSelect', 'mount', 'reset-flow']);
     const props = defineProps({
         months: { type: Array as PropType<IDefaultSelect[]>, default: () => [] },
         years: { type: Array as PropType<IDefaultSelect[]>, default: () => [] },
@@ -195,16 +195,20 @@
     const showYearPicker = ref(false);
     const { handleMonthYearChange } = useMontYearPick(props, emit);
 
+    onMounted(() => {
+        emit('mount');
+    });
+
     const onMonthUpdate = (month: number): void => {
         emit('update:month', month);
         emit('monthYearSelect');
-        toggleMonthPicker();
+        toggleMonthPicker(true);
     };
 
     const onYearUpdate = (year: number): void => {
         emit('update:year', year);
         emit('monthYearSelect', true);
-        toggleYearPicker();
+        toggleYearPicker(true);
     };
 
     const minYear = computed(() => (props.minDate ? getYear(new Date(props.minDate)) : null));
@@ -263,15 +267,28 @@
         return true;
     });
 
-    const toggleMonthPicker = (): void => {
+    const toggleMonthPicker = (flow = false): void => {
+        checkFlow(flow);
         showMonthPicker.value = !showMonthPicker.value;
     };
 
-    const toggleYearPicker = (): void => {
+    const toggleYearPicker = (flow = false): void => {
+        checkFlow(flow);
         showYearPicker.value = !showYearPicker.value;
     };
 
+    const checkFlow = (flow: boolean): void => {
+        if (!flow) {
+            emit('reset-flow');
+        }
+    };
+
     const handleYear = (increment = false): void => {
         emit('update:year', increment ? props.year + 1 : props.year - 1);
     };
+
+    defineExpose({
+        toggleMonthPicker,
+        toggleYearPicker,
+    });
 </script>

src/Vue3DatePicker/components/SelectionGrid.vue

@@ -32,8 +32,8 @@
                 aria-label="Toggle overlay"
                 :class="actionButtonClass"
                 tabindex="0"
-                @click="$emit('toggle')"
-                @keydown.enter="$emit('toggle')"
+                @click="toggle"
+                @keydown.enter="toggle"
             >
                 <slot name="button-icon" />
             </div>
@@ -47,7 +47,7 @@
     import { IDefaultSelect, DynamicClass } from '../interfaces';
     import { getKey, unrefElement } from '../utils/util';
 
-    const emit = defineEmits(['update:modelValue', 'selected', 'toggle']);
+    const emit = defineEmits(['update:modelValue', 'selected', 'toggle', 'reset-flow']);
 
     const props = defineProps({
         items: { type: Array as PropType<IDefaultSelect[][]>, default: () => [] },
@@ -167,4 +167,9 @@
             emit('selected');
         }
     };
+
+    const toggle = () => {
+        emit('toggle');
+        emit('reset-flow');
+    };
 </script>