@autoafleveren/ui 1.6.3 → 1.7.0

package/package.json

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

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

@@ -84,10 +84,6 @@
     openIndex.value = index;
   }
 
-  function focus(event: MouseEvent): void {
-    (event.target as HTMLDivElement | undefined)?.focus();
-  }
-
   defineExpose({ isOpen, open, close, submit });
   onClickOutside(contextMenuElement, close);
   onEscape(close);
@@ -139,7 +135,6 @@
       @confirm="deactivate"
       @confirmed="activate"
       @close="close"
-      @mouseenter="focus"
       @open="() => onItemOpen(index)"
     >
       <span class="text-base">{{ action.name }}</span>

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

package/src/modules/composables/useFocusTrap/index.d.ts

@@ -2,4 +2,6 @@ export interface Options {
   childTargetClass?: string;
   allowOutsideClick?: boolean;
   preventScroll?: boolean;
+  clickOutsideDeactivates?: boolean;
+  returnFocusOnDeactivate?: boolean;
 }

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

@@ -8,7 +8,7 @@ import type { Options } from './index.d';
 
 export function useFocusTrap(
   target: MaybeRefOrGetter<Arrayable<MaybeRefOrGetter<string> | MaybeComputedElementRef>>,
-  options: Options = { allowOutsideClick: true, preventScroll: false },
+  options: Options = { allowOutsideClick: true, preventScroll: false, clickOutsideDeactivates: true, returnFocusOnDeactivate: true },
 ) {
   const isActive = ref<boolean>(false);
   const { activate: activateTrap, deactivate: deactivateTrap } = useFocusTrapVueUse(target, options);