feat: Emit blur event when inline date picker loses focus (resolves #995)

Author: Jasenkoo

src/VueDatePicker/VueDatePicker.vue

@@ -60,6 +60,7 @@
                         @date-update="$emit('date-update', $event)"
                         @invalid-date="$emit('invalid-date', $event)"
                         @overlay-toggle="$emit('overlay-toggle', $event)"
+                        @menu-blur="$emit('blur')"
                     >
                         <template v-for="(slot, i) in slotList" #[slot]="args" :key="i">
                             <slot :name="slot" v-bind="{ ...args }" />

src/VueDatePicker/components/DatepickerMenu.vue

@@ -167,6 +167,7 @@
         'date-update',
         'invalid-date',
         'overlay-toggle',
+        'menu-blur',
     ]);
 
     const props = defineProps({
@@ -202,6 +203,7 @@
     const innerMenuRef = ref(null);
     const menuMount = ref(false);
     const dynCmpRef = ref<any>(null);
+    const isMenuActive = ref(false);
 
     onMounted(() => {
         if (!props.shadow) {
@@ -216,6 +218,7 @@
             }
             if (menu) {
                 const stopDefault = (event: Event) => {
+                    isMenuActive.value = true;
                     if (defaultedConfig.value.allowPreventDefault) {
                         event.preventDefault();
                     }
@@ -225,10 +228,12 @@
                 menu.addEventListener('mousedown', stopDefault);
             }
         }
+        document.addEventListener('mousedown', handleClickOutside);
     });
 
     onUnmounted(() => {
         window.removeEventListener('resize', getCalendarWidth);
+        document.addEventListener('mousedown', handleClickOutside);
     });
 
     const getCalendarWidth = (): void => {
@@ -419,6 +424,16 @@
         }
     };
 
+    const handleClickOutside = (event: MouseEvent) => {
+        if (defaultedInline.value.enabled && !defaultedInline.value.input) {
+            const activeClick = dpMenuRef.value?.contains(event.target as HTMLElement);
+            if (!activeClick && isMenuActive.value) {
+                isMenuActive.value = false;
+                emit('menu-blur');
+            }
+        }
+    };
+
     defineExpose({
         updateMonthYear,
         switchView,