@autoafleveren/ui 1.8.0 → 1.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autoafleveren/ui",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "type": "module",
   "files": [
     "dist/*",

package/src/modules/composables/useDrawer/index.ts

@@ -1,18 +1,27 @@
-import { createApp, inject, isRef, ref } from 'vue';
-import { RouterView } from 'vue-router';
+/* eslint-disable vue/one-component-per-file,@typescript-eslint/explicit-function-return-type */
+import { createApp, defineComponent, h, inject, isRef, ref } from 'vue';
+import { RouterView, useRoute } from 'vue-router';
 import { AppDrawer } from '~components';
 
 import type { App, Component, MaybeRef } from 'vue';
 import type { ModalInstance, DrawerProps } from '~components/AppDrawer/index.d';
 
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const KeyedRouterView = defineComponent({
+  name: 'KeyedRouterView',
+
+  setup() {
+    const route = useRoute();
+
+    return () => h(RouterView, { key: route.fullPath });
+  },
+});
+
 const state = {
   instances: ref<ModalInstance[]>([]),
 };
 
-function closeDrawer(modalInstance: Omit<ModalInstance, 'withRouter' | 'unique'>): void {
-  modalInstance?.instance?.unmount();
-  modalInstance?.element?.remove();
-
+function removeInstance(modalInstance: Omit<ModalInstance, 'withRouter' | 'unique'>): void {
   const index = state.instances.value.findIndex(instance => instance.instance._uid === modalInstance.instance._uid);
 
   if (index > -1) {
@@ -20,6 +29,13 @@ function closeDrawer(modalInstance: Omit<ModalInstance, 'withRouter' | 'unique'>
   }
 }
 
+function closeDrawer(modalInstance: Omit<ModalInstance, 'withRouter' | 'unique'>): void {
+  removeInstance(modalInstance);
+
+  modalInstance?.instance?.unmount();
+  modalInstance?.element?.remove();
+}
+
 export function useDrawer(component?: MaybeRef<Component | string>, options?: DrawerProps) {
   const instance = ref<ModalInstance>();
 
@@ -44,7 +60,7 @@ export function useDrawer(component?: MaybeRef<Component | string>, options?: Dr
     }
 
     if (!options?.content && !openOptions.content && openOptions.router) {
-      openOptions.content = RouterView;
+      openOptions.content = KeyedRouterView;
     }
 
     window.scrollTo(0, 0);
@@ -92,7 +108,7 @@ export function useDrawer(component?: MaybeRef<Component | string>, options?: Dr
           mountDrawer(modalInstance, modalRootElement, !!openOptions.router);
 
           if (openOptions.router && !openOptions.unique) {
-            modalInstance?.config?.globalProperties?.$router?.push?.(openOptions.router);
+            modalInstance?.config?.globalProperties?.$router?.replace?.(openOptions.router);
           }
 
           return;
@@ -102,18 +118,23 @@ export function useDrawer(component?: MaybeRef<Component | string>, options?: Dr
           mountDrawer(modalInstance, modalRootElement, !!openOptions.router);
 
           if (openOptions.router) {
-            modalInstance?.config?.globalProperties?.$router?.push?.(openOptions.router);
+            modalInstance?.config?.globalProperties?.$router?.replace?.(openOptions.router);
           }
         });
       }
     }).finally(() => {
       if (modalInstance) {
+        // Immediately remove from state so subsequent open() calls
+        // don't try to reuse this closing instance
+        removeInstance({
+          ref: modalRef,
+          instance: modalInstance,
+          element: modalRootElement,
+        });
+
         setTimeout(() => {
-          closeDrawer({
-            ref: modalRef,
-            instance: modalInstance,
-            element: modalRootElement,
-          });
+          modalInstance?.unmount();
+          modalRootElement?.remove();
         }, 500);
       }
     });