@autoafleveren/ui 1.7.0 → 1.8.1

package/package.json

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

package/src/modules/components/AppContextMenu/AppContextMenu.vue

@@ -97,10 +97,11 @@
     class="app-context-menu fixed z-100 flex w-64 flex-col rounded-lg bg-secondary p-2 drop-shadow-card empty:hidden"
     data-test-context-menu
   >
-    <div v-if="enableSearch && actionsWithFallback.length > 0">
+    <div v-if="search?.enabled && actionsWithFallback.length > 0">
       <AppInput
+        v-bind="search"
         :model-value="searchActionsQuery"
-        :placeholder="searchPlaceholder ?? ''"
+        :placeholder="search?.placeholder ?? ''"
         class="mb-2 text-zinc-700"
         type="text"
         data-test-driver-search

package/src/modules/components/AppContextMenu/__tests__/app-context-menu.spec.ts

@@ -93,7 +93,7 @@ describe('the AppContextMenu ShortcutItem component', () => {
   });
 
   it('should render the search input when enableSearch is true', () => {
-    const wrapper = createWrapper(actionsMock, { enableSearch: true });
+    const wrapper = createWrapper(actionsMock, { search: { enabled: true } });
     const searchInput = wrapper.findComponent({ name: 'AppInput' });
 
     expect(searchInput.exists()).toBe(true);
@@ -101,8 +101,7 @@ describe('the AppContextMenu ShortcutItem component', () => {
 
   it('should use the searchPlaceholder prop as the input placeholder', () => {
     const wrapper = createWrapper(actionsMock, {
-      enableSearch: true,
-      searchPlaceholder: 'Search actions...',
+      search: { enabled: true, placeholder: 'Search actions...' },
     });
 
     const searchInput = wrapper.findComponent({ name: 'AppInput' });
@@ -111,7 +110,7 @@ describe('the AppContextMenu ShortcutItem component', () => {
   });
 
   it('should default the placeholder to an empty string when searchPlaceholder is not provided', () => {
-    const wrapper = createWrapper(actionsMock, { enableSearch: true });
+    const wrapper = createWrapper(actionsMock, { search: { enabled: true } });
     const searchInput = wrapper.findComponent({ name: 'AppInput' });
 
     expect(searchInput.attributes('placeholder')).toBe('');
@@ -119,7 +118,7 @@ describe('the AppContextMenu ShortcutItem component', () => {
 
   it('should display noResultsText when searching yields no results', async () => {
     const wrapper = createWrapper(actionsMock, {
-      enableSearch: true,
+      search: { enabled: true },
       noResultsText: 'No results found',
     });
 
@@ -138,7 +137,7 @@ describe('the AppContextMenu ShortcutItem component', () => {
   });
 
   it('should default noResultsText to an empty string when not provided', async () => {
-    const wrapper = createWrapper(actionsMock, { enableSearch: true });
+    const wrapper = createWrapper(actionsMock, { search: { enabled: true } });
     const searchInput = wrapper.findComponent({ name: 'AppInput' });
 
     await searchInput.vm.$emit('update:modelValue', 'test_action_non_existant');
@@ -154,7 +153,7 @@ describe('the AppContextMenu ShortcutItem component', () => {
   });
 
   it('should filter actions based on search query', async () => {
-    const wrapper = createWrapper(actionsMock, { enableSearch: true });
+    const wrapper = createWrapper(actionsMock, { search: { enabled: true } });
     const searchInput = wrapper.findComponent({ name: 'AppInput' });
 
     await searchInput.vm.$emit('update:modelValue', 'Action #1');
@@ -198,7 +197,7 @@ describe('the AppContextMenu ShortcutItem component', () => {
       { ...actionsMock[0], name: 'Action 5' },
     ];
 
-    const wrapper = createWrapper(manyActions, { enableSearch: true, maxList: 2 });
+    const wrapper = createWrapper(manyActions, { search: { enabled: true }, maxList: 2 });
     const searchInput = wrapper.findComponent({ name: 'AppInput' });
 
     await searchInput.vm.$emit('update:modelValue', 'Action');

package/src/modules/components/AppContextMenu/index.d.ts

@@ -1,5 +1,6 @@
 import type { App } from 'vue';
 import type AppContextMenu from './AppContextMenu.vue';
+import type { AppInputProps } from '~components/AppInput/index.d';
 
 export type { Action } from '~components/AppActionBar/index.d';
 
@@ -8,8 +9,10 @@ export interface Props {
   event: PointerEvent | MouseEvent;
   actions?: Action[];
   confirmed?: Action['key'];
-  enableSearch?: boolean;
-  searchPlaceholder?: string;
+  search?: Omit<AppInputProps<string>, 'modelValue'> & {
+    enabled?: boolean;
+    placeholder?: string;
+  };
   noResultsText?: string;
   maxList?: number;
 }

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);
       }
     });