refactor: Group common props into config, add option to disable `st…

…opPropagation` event (resolves #556)
Vuepic · Sep 8, 2023 · e092dad · e092dad
1 parent be047a7
commit e092dad
Show file tree

Hide file tree

Showing 17 changed files with 101 additions and 34 deletions.
diff --git a/src/VueDatePicker/VueDatePicker.vue b/src/VueDatePicker/VueDatePicker.vue
@@ -148,7 +148,7 @@
     const { setMenuFocused, setShiftKey } = useState();
     const { clearArrowNav } = useArrowNavigation();
     const { mapDatesArrToMap, validateDate, isValidTime } = useValidation(props);
-    const { defaultedTransitions, defaultedTextInput, defaultedInline } = useDefaults(props);
+    const { defaultedTransitions, defaultedTextInput, defaultedInline, defaultedConfig } = useDefaults(props);
     const { menuTransition, showTransition } = useTransitions(defaultedTransitions);
 
     onMounted(() => {
@@ -237,7 +237,7 @@
      */
     const onScroll = (): void => {
         if (isOpen.value) {
-            if (props.closeOnScroll) {
+            if (props.closeOnScroll || defaultedConfig.value.closeOnScroll) {
                 closeMenu();
             } else {
                 setMenuPosition();

diff --git a/src/VueDatePicker/components/Common/SelectionOverlay.vue b/src/VueDatePicker/components/Common/SelectionOverlay.vue
@@ -67,10 +67,10 @@
 <script lang="ts" setup>
     import { computed, nextTick, onBeforeUpdate, onMounted, onUnmounted, ref } from 'vue';
 
-    import { convertType, unrefElement } from '@/utils/util';
+    import { checkStopPropagation, convertType, unrefElement } from '@/utils/util';
     import { useArrowNavigation, useCommon, useDefaults } from '@/composables';
 
-    import type { DynamicClass, Flow, OverlayGridItem, TextInputProp } from '@/interfaces';
+    import type { Config, DynamicClass, Flow, OverlayGridItem, TextInputProp } from '@/interfaces';
     import type { PickerBasePropsType } from '@/props';
 
     const { setSelectionGrid, buildMultiLevelMatrix, setMonthPicker } = useArrowNavigation();
@@ -89,11 +89,14 @@
         useRelative?: boolean;
         height?: number | string;
         textInput?: TextInputProp;
+        config?: Partial<Config>;
     }
 
     const props = defineProps<Props>();
 
-    const { defaultedAriaLabels, defaultedTextInput } = useDefaults(props as unknown as PickerBasePropsType);
+    const { defaultedAriaLabels, defaultedTextInput, defaultedConfig } = useDefaults(
+        props as unknown as PickerBasePropsType,
+    );
     const { hideNavigationButtons } = useCommon();
 
     const scrollable = ref(false);
@@ -250,7 +253,7 @@
 
     const handleArrowKey = (ev: KeyboardEvent) => {
         if (props.arrowNavigation) return;
-        ev.stopImmediatePropagation();
+        checkStopPropagation(ev, defaultedConfig.value, true);
     };
 
     const setHoverValue = (val: number) => {

diff --git a/src/VueDatePicker/components/DatePicker/DpCalendar.vue b/src/VueDatePicker/components/DatePicker/DpCalendar.vue
@@ -58,7 +58,7 @@
                                 :aria-label="defaultedAriaLabels?.day?.(dayVal)"
                                 tabindex="0"
                                 :data-test="dayVal.value"
-                                @click.stop.prevent="$emit('select-date', dayVal)"
+                                @click.prevent="onDateSelect($event, dayVal)"
                                 @keydown.enter="$emit('select-date', dayVal)"
                                 @keydown.space="$emit('handle-space', dayVal)"
                                 @mouseenter="onMouseOver(dayVal, weekInd, dayInd)"
@@ -92,7 +92,11 @@
                                         ref="activeTooltip"
                                         :style="markerTooltipStyle"
                                     >
-                                        <div class="dp__tooltip_content" @click.stop v-if="dayVal.marker?.tooltip">
+                                        <div
+                                            class="dp__tooltip_content"
+                                            @click="onTpClick"
+                                            v-if="dayVal.marker?.tooltip"
+                                        >
                                             <div
                                                 v-for="(tooltip, i) in dayVal.marker.tooltip"
                                                 :key="i"
@@ -129,7 +133,7 @@
     import { computed, nextTick, onMounted, ref } from 'vue';
     import { getISOWeek, getWeek } from 'date-fns';
 
-    import { getDayNames, getDefaultMarker, unrefElement } from '@/utils/util';
+    import { checkStopPropagation, getDayNames, getDefaultMarker, unrefElement } from '@/utils/util';
     import { useArrowNavigation, useDefaults } from '@/composables';
     import { PickerBaseProps } from '@/props';
     import { getDate, isDateAfter, isDateEqual, resetDateTime, setDateMonthOrYear } from '@/utils/date-utils';
@@ -163,7 +167,7 @@
     });
 
     const { buildMultiLevelMatrix } = useArrowNavigation();
-    const { defaultedTransitions, defaultedAriaLabels, defaultedMultiCalendars } = useDefaults(props);
+    const { defaultedTransitions, defaultedConfig, defaultedAriaLabels, defaultedMultiCalendars } = useDefaults(props);
 
     const showMakerTooltip = ref<Date | null>(null);
     const markerTooltipStyle = ref<{ bottom: string; left?: string; right?: string; transform: string }>({
@@ -346,5 +350,14 @@
         return '';
     };
 
+    const onDateSelect = (ev: Event, dayVal: ICalendarDay) => {
+        checkStopPropagation(ev, defaultedConfig.value);
+        emit('select-date', dayVal);
+    };
+
+    const onTpClick = (ev: Event) => {
+        checkStopPropagation(ev, defaultedConfig.value);
+    };
+
     defineExpose({ triggerTransition });
 </script>
diff --git a/src/VueDatePicker/components/DatePicker/DpHeader.vue b/src/VueDatePicker/components/DatePicker/DpHeader.vue
@@ -46,6 +46,7 @@
                             :hide-navigation="hideNavigation"
                             :is-last="autoApply && !keepActionRow"
                             :skip-button-ref="false"
+                            :config="config"
                             :type="type.type"
                             :header-refs="[]"
                             :esc-close="escClose"

diff --git a/src/VueDatePicker/components/DatepickerInput.vue b/src/VueDatePicker/components/DatepickerInput.vue
@@ -59,7 +59,7 @@
                 v-if="clearable && !$slots['clear-icon'] && inputValue && !disabled && !readonly"
                 class="dp__clear_icon dp__input_icons"
                 data-test="clear-icon"
-                @click.stop.prevent="onClear"
+                @click.prevent="onClear($event)"
             />
         </div>
     </div>
@@ -76,6 +76,7 @@
 
     import type { PropType } from 'vue';
     import type { DynamicClass } from '@/interfaces';
+    import { checkStopPropagation } from '@/utils/util';
 
     defineOptions({
         compatConfig: {
@@ -104,8 +105,14 @@
         ...AllProps,
     });
 
-    const { defaultedTextInput, defaultedAriaLabels, defaultedInline, getDefaultPattern, getDefaultStartTime } =
-        useDefaults(props);
+    const {
+        defaultedTextInput,
+        defaultedAriaLabels,
+        defaultedInline,
+        defaultedConfig,
+        getDefaultPattern,
+        getDefaultStartTime,
+    } = useDefaults(props);
 
     const parsedDate = ref();
     const inputRef = ref<HTMLElement | null>(null);
@@ -226,8 +233,7 @@
 
     const handleOpen = (ev: KeyboardEvent | MouseEvent) => {
         ev.preventDefault();
-        ev.stopImmediatePropagation();
-        ev.stopPropagation();
+        checkStopPropagation(ev, defaultedConfig.value, true);
         if (
             defaultedTextInput.value.enabled &&
             defaultedTextInput.value.openMenu &&
@@ -253,7 +259,8 @@
         }
     };
 
-    const onClear = () => {
+    const onClear = (ev?: Event) => {
+        checkStopPropagation(ev, defaultedConfig.value, true);
         emit('clear');
     };
 

diff --git a/src/VueDatePicker/components/DatepickerMenu.vue b/src/VueDatePicker/components/DatepickerMenu.vue
@@ -109,7 +109,7 @@
     import ActionRow from '@/components/ActionRow.vue';
 
     import { mapSlots, useArrowNavigation, useState, useFlow, useDefaults } from '@/composables';
-    import { unrefElement } from '@/utils/util';
+    import { checkStopPropagation, unrefElement } from '@/utils/util';
     import { AllProps } from '@/props';
 
     import MonthPicker from '@/components/MonthPicker/MonthPicker.vue';
@@ -172,7 +172,7 @@
 
     const { setMenuFocused, setShiftKey, control } = useState();
     const slots = useSlots();
-    const { defaultedTextInput, defaultedInline } = useDefaults(props);
+    const { defaultedTextInput, defaultedInline, defaultedConfig } = useDefaults(props);
 
     const calendarWrapperRef = ref(null);
     const calendarWidth = ref(0);
@@ -194,11 +194,10 @@
             }
             if (menu) {
                 const stopDefault = (event: Event) => {
-                    if (props.allowPreventDefault) {
+                    if (props.allowPreventDefault || defaultedConfig.value.allowPreventDefault) {
                         event.preventDefault();
                     }
-                    event.stopImmediatePropagation();
-                    event.stopPropagation();
+                    checkStopPropagation(event, defaultedConfig.value, true);
                 };
                 menu.addEventListener('pointerdown', stopDefault);
                 menu.addEventListener('mousedown', stopDefault);
@@ -266,9 +265,8 @@
         }),
     );
 
-    const handleDpMenuClick = (e: Event) => {
-        e.stopPropagation();
-        e.stopImmediatePropagation();
+    const handleDpMenuClick = (ev: Event) => {
+        checkStopPropagation(ev, defaultedConfig.value, true);
     };
 
     const handleEsc = (): void => {
@@ -297,7 +295,7 @@
         if (!props.disableMonthYearSelect && ev.code === 'Tab') {
             if ((ev.target as HTMLElement).classList.contains('dp__menu') && control.value.shiftKeyInMenu) {
                 ev.preventDefault();
-                ev.stopImmediatePropagation();
+                checkStopPropagation(ev, defaultedConfig.value, true);
                 emit('close-picker');
             }
         }

diff --git a/src/VueDatePicker/components/MonthPicker/MonthPicker.vue b/src/VueDatePicker/components/MonthPicker/MonthPicker.vue
@@ -19,7 +19,8 @@
                 :arrow-navigation="arrowNavigation"
                 :is-last="autoApply && !keepActionRow"
                 :esc-close="escClose"
-                :height="modeHeight"
+                :height="modeHeight !== 255 ? modeHeight : defaultedConfig.modeHeight"
+                :config="config"
                 @selected="selectMonth($event, instance)"
                 @hover-value="setHoverDate($event, instance)"
                 use-relative
@@ -65,6 +66,7 @@
                                 :items="groupedYears(instance)"
                                 :text-input="textInput"
                                 :esc-close="escClose"
+                                :config="config"
                                 @toggle="toggleYearPicker(instance)"
                                 @selected="handleYearSelect($event, instance)"
                                 :is-last="autoApply && !keepActionRow"
@@ -125,6 +127,7 @@
         defaultedMultiCalendars,
         defaultedAriaLabels,
         defaultedTransitions,
+        defaultedConfig,
         setHoverDate,
         selectMonth,
         selectYear,

diff --git a/src/VueDatePicker/components/MonthPicker/month-picker.ts b/src/VueDatePicker/components/MonthPicker/month-picker.ts
@@ -20,7 +20,7 @@ import type { IDefaultSelect, OverlayGridItem, VueEmit } from '@/interfaces';
 import type { PickerBasePropsType } from '@/props';
 
 export const useMonthPicker = (props: PickerBasePropsType, emit: VueEmit) => {
-    const { defaultedMultiCalendars, defaultedAriaLabels, defaultedTransitions } = useDefaults(props);
+    const { defaultedMultiCalendars, defaultedAriaLabels, defaultedTransitions, defaultedConfig } = useDefaults(props);
 
     const { modelValue, year, month: instanceMonth, calendars } = useModel(props, emit);
     const months = computed(() => getMonths(props.formatLocale, props.locale, props.monthNameFormat));
@@ -190,6 +190,7 @@ export const useMonthPicker = (props: PickerBasePropsType, emit: VueEmit) => {
         defaultedMultiCalendars,
         defaultedAriaLabels,
         defaultedTransitions,
+        defaultedConfig,
         setHoverDate,
         selectMonth,
         selectYear,

diff --git a/src/VueDatePicker/components/TimePicker/TimeInput.vue b/src/VueDatePicker/components/TimePicker/TimeInput.vue
@@ -109,6 +109,7 @@
                     :esc-close="escClose"
                     :type="timeInput.type"
                     :text-input="textInput"
+                    :config="config"
                     :arrow-navigation="arrowNavigation"
                     @selected="handleTimeFromOverlay(timeInput.type, $event)"
                     @toggle="toggleOverlay(timeInput.type)"

diff --git a/src/VueDatePicker/components/TimePicker/TimePicker.vue b/src/VueDatePicker/components/TimePicker/TimePicker.vue
@@ -24,7 +24,11 @@
                     'dp--overlay-absolute': !props.timePicker && !timePickerInline,
                     'dp--overlay-relative': props.timePicker,
                 }"
-                :style="timePicker ? { height: `${modeHeight}px` } : undefined"
+                :style="
+                    timePicker
+                        ? { height: `${modeHeight !== 255 ? modeHeight : defaultedConfig.modeHeight}px` }
+                        : undefined
+                "
                 ref="overlayRef"
                 :tabindex="timePickerInline ? undefined : 0"
             >
@@ -138,7 +142,7 @@
     const { buildMatrix, setTimePicker } = useArrowNavigation();
     const slots = useSlots();
 
-    const { defaultedTransitions, defaultedAriaLabels, defaultedTextInput } = useDefaults(props);
+    const { defaultedTransitions, defaultedAriaLabels, defaultedTextInput, defaultedConfig } = useDefaults(props);
     const { transitionName, showTransition } = useTransitions(defaultedTransitions);
     const { hideNavigationButtons } = useCommon();
 

diff --git a/src/VueDatePicker/components/YearPicker/YearPicker.vue b/src/VueDatePicker/components/YearPicker/YearPicker.vue
@@ -13,7 +13,8 @@
             <selection-overlay
                 :items="groupedYears"
                 :is-last="autoApply && !keepActionRow"
-                :height="modeHeight"
+                :height="modeHeight !== 255 ? modeHeight : defaultedConfig.modeHeight"
+                :config="config"
                 type="year"
                 use-relative
                 @selected="selectYear"
@@ -32,6 +33,7 @@
 
     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']);
     const props = defineProps({
@@ -45,4 +47,5 @@
     });
 
     const { groupedYears, selectYear, setHoverValue } = useYearPicker(props, emit);
+    const { defaultedConfig } = useDefaults(props);
 </script>
diff --git a/src/VueDatePicker/composables/defaults.ts b/src/VueDatePicker/composables/defaults.ts
@@ -6,6 +6,7 @@ import {
     defaultPreviewFormat,
     defaultTransitions,
     getDefaultActionRowData,
+    getDefaultConfig,
     getDefaultFilters,
     getDefaultInlineOptions,
     getDefaultTextInputOptions,
@@ -62,6 +63,8 @@ export const useDefaults = (props: AllPropsType | PickerBasePropsType) => {
 
     const defaultedInline = computed(() => getDefaultInlineOptions(props.inline));
 
+    const defaultedConfig = computed(() => getDefaultConfig(props.config));
+
     return {
         defaultedTransitions,
         defaultedMultiCalendars,
@@ -72,6 +75,7 @@ export const useDefaults = (props: AllPropsType | PickerBasePropsType) => {
         defaultedPreviewFormat,
         defaultedTextInput,
         defaultedInline,
+        defaultedConfig,
         getDefaultPattern,
         getDefaultStartTime,
     };

diff --git a/src/VueDatePicker/interfaces.ts b/src/VueDatePicker/interfaces.ts
@@ -281,3 +281,10 @@ export interface InlineOptions {
 export type InlineProp = boolean | { input?: boolean };
 
 export type DisabledTimesArrProp = (ind: number, hours?: number) => TimeValuesInv;
+
+export interface Config {
+    allowStopPropagation: boolean;
+    closeOnScroll: boolean;
+    modeHeight: number;
+    allowPreventDefault: boolean;
+}
diff --git a/src/VueDatePicker/props.ts b/src/VueDatePicker/props.ts
@@ -26,6 +26,7 @@ import type {
     PresetDate,
     InlineProp,
     DisabledTimeArrProp,
+    Config,
 } from '@/interfaces';
 
 export const AllProps = {
@@ -168,6 +169,7 @@ export const AllProps = {
     showLastInRange: { type: Boolean as PropType<boolean>, default: true },
     timePickerInline: { type: Boolean as PropType<boolean>, default: false },
     calendar: { type: Function as PropType<(month: ICalendarDate[]) => ICalendarDate[]>, default: null },
+    config: { type: Object as PropType<Partial<Config>>, default: undefined },
 };
 
 export const PickerBaseProps = {

diff --git a/src/VueDatePicker/utils/defaults.ts b/src/VueDatePicker/utils/defaults.ts
@@ -11,6 +11,7 @@ import type {
     TextInputProp,
     InlineProp,
     InlineOptions,
+    Config,
 } from '@/interfaces';
 
 export const mergeDefaultTransitions = (conf: Partial<Transition>): Transition => ({
@@ -132,3 +133,13 @@ export const getDefaultInlineOptions = (inline: InlineProp): InlineOptions => {
         ...defaultOptions,
     };
 };
+
+export const getDefaultConfig = (config?: Partial<Config>): Config => {
+    const defaultConfig = {
+        allowStopPropagation: true,
+        closeOnScroll: false,
+        modeHeight: 255,
+        allowPreventDefault: false,
+    };
+    return { ...defaultConfig, ...(config ?? {}) };
+};