Merge pull request #1094 from chocolateimage/appcontext-slot-fix

fix: App Context missing in slots

Author: Jasenkoo

src/VueDatePicker/VueDatePicker.vue

@@ -83,6 +83,7 @@
         watch,
         Teleport as TeleportCmp,
         nextTick,
+        getCurrentInstance,
     } from 'vue';
 
     import DatepickerInput from '@/components/DatepickerInput.vue';
@@ -178,6 +179,8 @@
     const { menuTransition, showTransition } = useTransitions(defaultedTransitions);
     const { isMobile } = useResponsive(defaultedConfig);
 
+    const currentInstance = getCurrentInstance();
+
     onMounted(() => {
         parseExternalModelValue(props.modelValue);
         nextTick().then(() => {
@@ -320,7 +323,7 @@
 
     const openMenu = () => {
         if (!props.disabled && !props.readonly) {
-            shadowRender(DatepickerMenu, props);
+            shadowRender(currentInstance, DatepickerMenu, props);
             setMenuPosition(false);
             isOpen.value = true;
 

src/VueDatePicker/composables/position.ts

@@ -1,4 +1,4 @@
-import type { Component, ComputedRef, Ref, Slots } from 'vue';
+import type { Component, ComponentInternalInstance, ComputedRef, Ref, Slots } from 'vue';
 import { h, ref, render, toRef, watch } from 'vue';
 import {
     type DatepickerInputRef,
@@ -255,7 +255,7 @@ export const usePosition = ({
     };
 
     // Renders invisible menu on open to determine the menu dimensions
-    const shadowRender = (DPMenu: Component, props: AllPropsType) => {
+    const shadowRender = (instance: ComponentInternalInstance | null, DPMenu: Component, props: AllPropsType) => {
         const container = document.createElement('div');
         const input = unrefElement(inputRef as MaybeElementRef)?.getBoundingClientRect();
         container.setAttribute('id', 'dp--temp-container');
@@ -278,6 +278,9 @@ export const usePosition = ({
             },
             Object.fromEntries(mappedSlots.map((slot) => [slot, slots[slot]])),
         );
+        if (instance != null) {
+            el.appContext = instance.appContext;
+        }
 
         render(el, container);
         menuRect.value = el.el?.getBoundingClientRect();