refactor!: Use slots filtering when shadowDom is set explicitly (fixes #922)

Author: Jasenkoo

index.d.ts

@@ -121,6 +121,23 @@ export interface UIOptions {
     input: CustomClass;
 }
 
+export interface GeneralConfig {
+    allowStopPropagation?: boolean;
+    closeOnScroll?: boolean;
+    modeHeight?: number;
+    allowPreventDefault?: boolean;
+    closeOnClearValue?: boolean;
+    closeOnAutoApply?: boolean;
+    noSwipe?: boolean;
+    keepActionRow?: boolean;
+    onClickOutside?: (validate: () => boolean) => void;
+    tabOutClosesMenu?: boolean;
+    arrowLeft?: string;
+    keepViewOnOffsetClick?: boolean;
+    timeArrowHoldThreshold?: boolean;
+    shadowDom?: boolean;
+}
+
 export interface VueDatePickerProps {
     uid?: string;
     name?: string;
@@ -283,21 +300,7 @@ export interface VueDatePickerProps {
         | [DisabledTime[], DisabledTime[]];
     timePickerInline?: boolean;
     calendar?: (weeks: CalendarWeek[]) => CalendarWeek[];
-    config?: {
-        allowStopPropagation?: boolean;
-        closeOnScroll?: boolean;
-        modeHeight?: number;
-        allowPreventDefault?: boolean;
-        closeOnClearValue?: boolean;
-        closeOnAutoApply?: boolean;
-        noSwipe?: boolean;
-        keepActionRow?: boolean;
-        onClickOutside?: (validate: () => boolean) => void;
-        tabOutClosesMenu?: boolean;
-        arrowLeft?: string;
-        keepViewOnOffsetClick?: boolean;
-        timeArrowHoldThreshold?: boolean;
-    };
+    config?: GeneralConfig;
     quarterPicker?: boolean;
     yearFirst?: boolean;
     loading?: boolean;

src/VueDatePicker/composables/position.ts

@@ -13,6 +13,7 @@ import { MenuPlacement } from '@/constants';
 
 import type { Component, ComputedRef, Ref, Slots } from 'vue';
 import type { AllPropsType } from '@/props';
+import { useDefaults } from '@/composables/defaults';
 
 /**
  * Extracted code from the main component, used for calculating the position of the menu
@@ -37,6 +38,7 @@ export const usePosition = ({
     props,
     slots,
 }: Params) => {
+    const { defaultedConfig } = useDefaults(props);
     const menuRect = ref<DOMRect>({} as DOMRect);
     const xCorrect = ref(false);
 
@@ -257,6 +259,11 @@ export const usePosition = ({
         wrap.append(container);
 
         const pos = getShadowPos(input);
+        const mappedSlots = defaultedConfig.value.shadowDom
+            ? Object.keys(slots).filter((slot) =>
+                  ['right-sidebar', 'left-sidebar', 'top-extra', 'action-extra'].includes(slot),
+              )
+            : Object.keys(slots);
 
         const el = h(
             DPMenu,
@@ -265,11 +272,7 @@ export const usePosition = ({
                 shadow: true,
                 style: { opacity: 0, position: 'absolute', ...pos },
             },
-            Object.fromEntries(
-                Object.keys(slots)
-                    .filter((slot) => ['right-sidebar', 'left-sidebar', 'top-extra', 'action-extra'].includes(slot))
-                    .map((slot) => [slot, slots[slot]]),
-            ),
+            Object.fromEntries(mappedSlots.map((slot) => [slot, slots[slot]])),
         );
 
         render(el, container);

src/VueDatePicker/interfaces.ts

@@ -292,6 +292,7 @@ export interface Config {
     arrowLeft?: string;
     keepViewOnOffsetClick?: boolean;
     timeArrowHoldThreshold: number;
+    shadowDom?: boolean;
 }
 
 export interface Highlight {

src/VueDatePicker/utils/defaults.ts

@@ -174,6 +174,7 @@ export const getDefaultConfig = (config?: Partial<Config>): Config => {
         arrowLeft: undefined,
         keepViewOnOffsetClick: false,
         timeArrowHoldThreshold: 0,
+        shadowDom: false,
     };
     return { ...defaultConfig, ...(config ?? {}) };
 };