@autoafleveren/ui 1.6.4 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autoafleveren/ui",
-  "version": "1.6.4",
+  "version": "1.8.0",
   "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/components/AppDrawer/AppDrawer.vue

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
-  import { ref, provide } from 'vue';
+  /* eslint-disable vue/no-unused-properties */
+  import { ref, provide, computed } from 'vue';
   import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue';
   import { FontAwesomeIcon, byPrefixAndName } from '~icons';
 
   import type { DrawerProps } from './index.d';
 
-  withDefaults(defineProps<Omit<DrawerProps, 'router' | 'unique' | 'onOpen' | 'onClose' | 'plugins' | 'forceCreate'>>(), {
+  const props = withDefaults(defineProps<Omit<DrawerProps, 'router' | 'unique' | 'onOpen' | 'onClose' | 'plugins' | 'forceCreate'>>(), {
     withBackdrop: true,
     withFooter: true,
     preventBackdropClose: false,
@@ -21,6 +22,13 @@
   }>();
 
   const isOpen = ref(false);
+  const localOptions = ref<Partial<DrawerProps>>({});
+
+  const mergedProps = computed(() => ({ ...props, ...localOptions.value }));
+
+  function setOptions(options: DrawerProps): void {
+    localOptions.value = { ...localOptions.value, ...options };
+  }
 
   async function open(): Promise<void> {
     isOpen.value = true;
@@ -35,7 +43,7 @@
     emit('close', { animation: async () => new Promise(resolve => setTimeout(resolve, 350)) });
   }
 
-  defineExpose({ isOpen, open, close });
+  defineExpose({ isOpen, open, close, setOptions });
 
   provide('isDrawer', true);
 </script>
@@ -49,10 +57,10 @@
       :static="true"
       class="relative z-10 group/drawer is-drawer"
       data-test-drawer-dialog
-      @close="() => (preventBackdropClose || !withBackdrop) ? undefined : close()"
+      @close="() => (mergedProps.preventBackdropClose || !mergedProps.withBackdrop) ? undefined : close()"
     >
       <TransitionChild
-        v-if="withBackdrop"
+        v-if="mergedProps.withBackdrop"
         as="template"
         enter="ease-in-out duration-300"
         enter-from="opacity-0"
@@ -68,11 +76,11 @@
       </TransitionChild>
 
       <div
-        :class="{ 'pointer-events-none': !withBackdrop }"
+        :class="{ 'pointer-events-none': !mergedProps.withBackdrop }"
         class="fixed inset-0 overflow-hidden"
       >
         <div
-          :class="{ 'pointer-events-none': !withBackdrop }"
+          :class="{ 'pointer-events-none': !mergedProps.withBackdrop }"
           class="absolute inset-0 overflow-hidden"
         >
           <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
@@ -86,7 +94,7 @@
               leave-to="translate-x-full"
             >
               <DialogPanel
-                :class="panelClasses"
+                :class="mergedProps.panelClasses"
                 class="@container pointer-events-auto relative w-screen max-w-xl 2xl:max-w-4xl"
               >
                 <TransitionChild
@@ -110,7 +118,7 @@
                       <span class="sr-only">Close panel</span>
 
                       <FontAwesomeIcon
-                        :icon="closeIcon ?? byPrefixAndName.far?.['chevron-right']"
+                        :icon="mergedProps.closeIcon ?? byPrefixAndName.far?.['chevron-right']"
                         class="size-6"
                         aria-hidden="true"
                       />
@@ -119,22 +127,22 @@
                 </TransitionChild>
 
                 <div
-                  :class="modalClasses"
+                  :class="mergedProps.modalClasses"
                   class="flex h-full flex-col overflow-y-scroll rounded-l-[40px] bg-white pt-8 mb-8 shadow-[-6px_0px_6px_#20202010]"
                 >
                   <div
-                    :class="`relative mt-6 flex-1 px-2 sm:px-6 ${contentClasses}`"
+                    :class="`relative mt-6 flex-1 px-2 sm:px-6 ${mergedProps.contentClasses}`"
                     data-test-modal-content
                   >
                     <slot>
-                      <template v-if="typeof content === 'string'">
-                        {{ content }}
+                      <template v-if="typeof mergedProps.content === 'string'">
+                        {{ mergedProps.content }}
                       </template>
 
                       <Component
-                        :is="content"
+                        :is="mergedProps.content"
                         v-else
-                        v-bind="properties"
+                        v-bind="mergedProps.properties"
                       />
                     </slot>
                   </div>

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

@@ -1,4 +1,5 @@
 import { shallowRef } from 'vue';
+import { useContextMenu } from '~composables';
 
 import type { Action } from '~components/AppActionBar/index.d';
 import type { OnResetSelection } from './index.d';
@@ -13,6 +14,8 @@ const state = {
 };
 
 export function useActionBar<T = number>() {
+  const contextMenu = useContextMenu();
+
   function setSelection(selection: T[]): void {
     // @ts-expect-error type mismatch, but we want to allow any type of selection
     state.selection.value = selection;
@@ -25,6 +28,8 @@ export function useActionBar<T = number>() {
   }
 
   function setActions(actions: Action[]): void {
+    contextMenu.setActions(undefined);
+
     state.actions.value = actions;
 
     open();

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

@@ -9,7 +9,7 @@ const state = {
   instances: ref<ModalInstance[]>([]),
 };
 
-function closeDrawer(modalInstance: Omit<ModalInstance, 'withRouter'>): void {
+function closeDrawer(modalInstance: Omit<ModalInstance, 'withRouter' | 'unique'>): void {
   modalInstance?.instance?.unmount();
   modalInstance?.element?.remove();
 
@@ -60,6 +60,7 @@ export function useDrawer(component?: MaybeRef<Component | string>, options?: Dr
 
       if (openOptions.forceCreate !== true && instancesWithRouter.length > 0 && openOptions.router) {
         instancesWithRouter[instancesWithRouter.length - 1]?.instance?.config?.globalProperties?.$router?.push?.(openOptions.router);
+        instancesWithRouter[instancesWithRouter.length - 1]?.ref?.setOptions(openOptions);
 
         return;
       }
@@ -90,7 +91,7 @@ export function useDrawer(component?: MaybeRef<Component | string>, options?: Dr
         if (!hasReadyListener) {
           mountDrawer(modalInstance, modalRootElement, !!openOptions.router);
 
-          if (openOptions.router) {
+          if (openOptions.router && !openOptions.unique) {
             modalInstance?.config?.globalProperties?.$router?.push?.(openOptions.router);
           }
 
@@ -130,10 +131,25 @@ export function useDrawer(component?: MaybeRef<Component | string>, options?: Dr
     return Promise.resolve();
   }
 
+  async function closeAll(): Promise<void> {
+    state.instances.value.forEach(stateInstance => {
+      stateInstance.ref.close();
+
+      setTimeout(() => {
+        if (instance.value) {
+          closeDrawer(stateInstance);
+        }
+      }, 300);
+    });
+
+    return Promise.resolve();
+  }
+
   return {
     ...state,
     instance,
     open,
     close,
+    closeAll,
   };
 }