feat: Expose triggerFlow method (resolves #864)

- refactor: Use proper component types

Author: Jasenkoo

src/VueDatePicker/VueDatePicker.vue

@@ -495,8 +495,8 @@
     const setMonthYear = (value: MonthYearOpt) => {
         if (dpMenuRef.value) {
             dpMenuRef.value.updateMonthYear(0, {
-                month: getNumVal(value.month),
-                year: getNumVal(value.year),
+                month: getNumVal(value.month) as number,
+                year: getNumVal(value.year) as number,
             });
         }
     };
@@ -514,6 +514,10 @@
         return closeMenu();
     };
 
+    const handleFlow = (skipStep = 0) => {
+        dpMenuRef.value?.handleFlow(skipStep);
+    };
+
     onClickOutside(dpWrapMenuRef, inputRef, () => clickOutside(validateBeforeEmit));
 
     defineExpose({
@@ -528,5 +532,6 @@
         parseModel,
         switchView,
         toggleMenu,
+        handleFlow,
     });
 </script>

src/VueDatePicker/components/DatepickerMenu.vue

@@ -234,7 +234,7 @@
     };
 
     const { arrowRight, arrowLeft, arrowDown, arrowUp } = useArrowNavigation();
-    const { flowStep, updateFlowStep, childMount, resetFlow } = useFlow(props, emit, dynCmpRef);
+    const { flowStep, updateFlowStep, childMount, resetFlow, handleFlow } = useFlow(props, emit, dynCmpRef);
 
     const displayComponent = computed(() => {
         if (props.monthPicker) return MonthPicker;
@@ -413,5 +413,6 @@
     defineExpose({
         updateMonthYear,
         switchView,
+        handleFlow,
     });
 </script>

src/VueDatePicker/composables/flow.ts

@@ -34,6 +34,9 @@ export const useFlow = (props: AllPropsType, emit: VueEmit, dynCmpRef: Ref<any>)
             emit('flow-step', flowStep.value);
             handleFlow();
         }
+        if (props.flow?.length === flowStep.value) {
+            resetFlow();
+        }
     };
 
     const resetFlow = (): void => {
@@ -48,7 +51,10 @@ export const useFlow = (props: AllPropsType, emit: VueEmit, dynCmpRef: Ref<any>)
         }
     };
 
-    const handleFlow = (): void => {
+    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);
@@ -60,5 +66,5 @@ export const useFlow = (props: AllPropsType, emit: VueEmit, dynCmpRef: Ref<any>)
         }
     };
 
-    return { childMount, updateFlowStep, resetFlow, flowStep };
+    return { childMount, updateFlowStep, resetFlow, handleFlow, flowStep };
 };

src/VueDatePicker/composables/position.ts

@@ -1,20 +1,20 @@
 import { h, ref, render, toRef, watch } from 'vue';
-import { OpenPosition } from '@/interfaces';
+import { type DatepickerInputRef, type DatepickerMenuRef, OpenPosition } from '@/interfaces';
 
 import { unrefElement } from '@/utils/util';
 import { MenuPlacement } from '@/constants';
 
-import type { Component, ComponentPublicInstance, ComputedRef, Ref, Slots } from 'vue';
-import type { ComponentRef, InlineOptions, VueEmit } from '@/interfaces';
+import type { Component, ComputedRef, Ref, Slots } from 'vue';
+import type { InlineOptions, VueEmit } from '@/interfaces';
 import type { AllPropsType } from '@/props';
 
 /**
  * Extracted code from the main component, used for calculating the position of the menu
  */
 interface Params {
     menuRef: Ref<HTMLElement | null>;
-    menuRefInner: Ref<ComponentPublicInstance | null>;
-    inputRef: ComponentRef;
+    menuRefInner: Ref<DatepickerMenuRef | null>;
+    inputRef: Ref<DatepickerInputRef | null>;
     pickerWrapperRef: Ref<HTMLElement | null>;
     inline: ComputedRef<InlineOptions>;
     emit: VueEmit;

src/VueDatePicker/interfaces.ts

@@ -1,5 +1,7 @@
 import type { ComponentPublicInstance, Ref } from 'vue';
 import type { HeaderPicker } from '@/constants';
+import DatepickerMenu from '@/components/DatepickerMenu.vue';
+import type DatepickerInput from '@/components/DatepickerInput.vue';
 
 export type DynamicClass = Record<string, boolean | undefined>;
 
@@ -85,7 +87,9 @@ export interface ConfigurableWindow {
     window?: Window;
 }
 
-export type MaybeElementRef = MaybeRef<HTMLElement | SVGElement | ComponentPublicInstance | undefined | null | Element>;
+export type MaybeElementRef = MaybeRef<
+    HTMLElement | SVGElement | ComponentPublicInstance | undefined | null | Element | any
+>;
 export type OnClickOutsideEvents = Pick<
     WindowEventMap,
     'click' | 'mousedown' | 'mouseup' | 'touchstart' | 'touchend' | 'pointerdown' | 'pointerup'
@@ -172,8 +176,6 @@ export interface ICalendarData {
     year: number;
 }
 
-export type ComponentRef = Ref<ComponentPublicInstance | HTMLElement | null>;
-
 export type TimeOverlayCheck = 'noHoursOverlay' | 'noMinutesOverlay' | 'noSecondsOverlay';
 
 export type DateTimeSetter = number | string | null;
@@ -189,15 +191,9 @@ export interface MonthYearOpt {
     year?: number | string;
 }
 
-export type DatepickerMenuRef = ComponentPublicInstance<{
-    updateMonthYear: (ins: number, val: { month: number | null; year: number | null }) => void;
-    switchView: (view: MenuView, instance?: number) => void;
-}>;
+export type DatepickerMenuRef = InstanceType<typeof DatepickerMenu>;
 
-export type DatepickerInputRef = ComponentPublicInstance<{
-    setParsedDate: (date: Date | Date[] | null) => void;
-    focusInput: () => void;
-}>;
+export type DatepickerInputRef = InstanceType<typeof DatepickerInput>;
 
 export interface ActionRowData {
     showSelect: boolean;