@autoafleveren/ui 1.3.3 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autoafleveren/ui",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "type": "module",
   "files": [
     "dist/*",
@@ -86,7 +86,9 @@
     "@vuepic/vue-datepicker": "^11.0.2",
     "@vueuse/components": "^13.5.0",
     "@vueuse/core": "^13.5.0",
+    "@vueuse/integrations": "^13.7.0",
     "date-fns": "^4.1.0",
+    "focus-trap": "^7",
     "js-cookie": "^3.0.5",
     "laravel-echo": "^2.1.7",
     "mini-svg-data-uri": "^1.4.4",

package/src/modules/components/AppActionBar/AppActionBarItem.vue

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
-  import { computed, onMounted, ref, toValue, useTemplateRef } from 'vue';
-  import { onClickOutside } from '@vueuse/core';
+  import { computed, nextTick, onMounted, ref, toValue, useTemplateRef } from 'vue';
   import { WarningIcon } from '~icons';
   import { AppLoader } from '~components';
-  import { useActionBar, useContextMenu } from '~composables';
+  import { useActionBar, useContextMenu, useFocusTrap } from '~composables';
   import AppActionBarSubMenu from './AppActionBarSubMenu.vue';
   import { domClassesPerMenu, domClassesPerType } from '.';
 
@@ -16,11 +15,16 @@
     confirmed: false,
   });
 
-  const emit = defineEmits<{ (event: 'close'): void }>();
+  const emit = defineEmits<{
+    (event: 'close'): void;
+    (event: 'confirm'): void;
+    (event: 'confirmed'): void;
+  }>();
 
   const actionBar = useActionBar();
   const contextMenu = useContextMenu();
-  const actionBarElement = useTemplateRef<HTMLDivElement>('actionBarItem');
+  const submenuElement = useTemplateRef<HTMLDivElement>('submenuElement');
+  const { activate, deactivate, onEscape, onBack } = useFocusTrap(submenuElement);
   const confirm = ref(false);
   const loading = ref(false);
   const modelValueSubMenu = ref<number[]>([]);
@@ -61,6 +65,17 @@
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     if ((props.action.confirm || props.action.component) && !confirm.value) {
       confirm.value = true;
+
+      if (props.action.component) {
+        await nextTick();
+
+        emit('confirm');
+
+        await nextTick();
+
+        setTimeout(activate, 300);
+      }
+
       return;
     }
 
@@ -81,27 +96,37 @@
   }
 
   function subMenuClose(): void {
+    deactivate();
+
     confirm.value = false;
 
+    emit('confirmed');
+  }
+
+  function close(): void {
+    subMenuClose();
+
     emit('close');
   }
 
-  onClickOutside(actionBarElement, () => {
-    confirm.value = false;
-  });
+  onEscape(close);
+  onBack(subMenuClose);
 </script>
 
 <template>
   <div
     v-if="itemHidden !== true"
-    ref="actionBarItem"
-    :class="[...domClassesPerType[type], ...domClassesPerMenu[props.context ? 'contextMenu' : 'actionBar']]"
-    class="relative cursor-pointer rounded-md  transition-colors duration-200"
+    :class="[
+      ...domClassesPerType[type],
+      ...domClassesPerMenu[props.context ? 'contextMenu' : 'actionBar'],
+      props.action.component ? 'has-submenu' : '',
+    ]"
+    class="relative cursor-pointer rounded-md transition-colors duration-200"
   >
     <div
       v-tippy="context ? undefined : action.name"
       :class="{ 'px-2.5 py-4': !context }"
-      class="flex size-full items-center space-x-2 whitespace-nowrap"
+      class="app-action-bar-item flex size-full items-center space-x-2 whitespace-nowrap"
       data-test-action-bar-icon
       @click="onClickAction"
     >
@@ -115,6 +140,7 @@
 
     <AppActionBarSubMenu
       v-if="props.action.component && confirm"
+      ref="submenuElement"
       v-model="modelValueSubMenu"
       v-bind="props"
       @close="subMenuClose"

package/src/modules/components/AppActionBar/__tests__/app-action-bar-item.spec.ts

@@ -125,10 +125,10 @@ describe('the AppActionBarItem component', () => {
 
     expect(subMenu.exists()).toBe(true);
 
-    expect(wrapper.emitted('close')).toBeUndefined();
+    expect(wrapper.emitted('confirmed')).toBeUndefined();
 
     subMenu.vm.$emit('close');
 
-    expect(wrapper.emitted('close')).toBeDefined();
+    expect(wrapper.emitted('confirmed')).toBeDefined();
   });
 });

package/src/modules/components/AppActionBar/index.ts

@@ -8,7 +8,7 @@ export const domClassesPerType: Record<Type, string[]> = {
 };
 
 export const domClassesPerMenu: Record<'contextMenu' | 'actionBar', string[]> = {
-  contextMenu: ['hover:bg-zinc-600', 'px-2', 'py-1'],
+  contextMenu: ['focus:bg-zinc-600', 'px-2', 'py-1'],
   actionBar: ['hover:bg-black-100/20'],
 };
 

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-  import { computed, ref } from 'vue';
-  import { onClickOutside, onKeyStroke } from '@vueuse/core';
-  import { useActionBar, useClientPoint, useContextMenu } from '~composables';
+  import { computed, nextTick, onUnmounted, ref } from 'vue';
+  import { onClickOutside } from '@vueuse/core';
+  import { useActionBar, useClientPoint, useContextMenu, useFocusTrap } from '~composables';
   import AppActionBarItem from '~components/AppActionBar/AppActionBarItem.vue';
   import ShortcutItem from './ShortcutItem.vue';
 
@@ -22,9 +22,12 @@
   const contextMenu = useContextMenu();
   const contextMenuElement = ref<HTMLDivElement>();
   const clientComputedPosition = useClientPoint(contextMenuElement);
+  const { activate, deactivate, onEscape } = useFocusTrap(contextMenuElement);
 
   const actionsWithFallback = computed((): Action[] => props.actions ?? actionbar.actions.value);
 
+  onUnmounted(deactivate);
+
   async function open(): Promise<void> {
     isOpen.value = true;
 
@@ -33,11 +36,17 @@
     document.querySelector('#app')?.classList.add('context-menu-open');
 
     clientComputedPosition.setPosition(props.event.x, props.event.y);
+
+    await nextTick();
+
+    activate();
   }
 
   async function close(): Promise<void> {
     isOpen.value = false;
 
+    deactivate();
+
     emit('close');
 
     document.querySelector('#app')?.classList.remove('context-menu-open');
@@ -55,11 +64,7 @@
 
   defineExpose({ isOpen, open, close, submit });
   onClickOutside(contextMenuElement, close);
-  onKeyStroke(['Escape'], (event: Event) => {
-    event.preventDefault();
-
-    close();
-  });
+  onEscape(close);
 </script>
 
 <template>
@@ -91,8 +96,12 @@
       :context="true"
       :item="item"
       :confirmed="confirmed && confirmed === action.key"
-      class="flex h-10 items-center space-x-2 first:rounded-t-lg last:rounded-b-lg"
+      :tabindex="`100${index}`"
+      class="flex h-10 items-center space-x-2 first:rounded-t-lg last:rounded-b-lg focus:outline-none"
+      @confirm="deactivate"
+      @confirmed="activate"
       @close="close"
+      @mouseover="($event) => ($event.target as HTMLDivElement | undefined)?.focus()"
     >
       <span class="text-base">{{ action.name }}</span>
     </AppActionBarItem>

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

@@ -29,7 +29,8 @@
 <template>
   <button
     type="button"
-    class="w-full p-1.5 text-xxs text-white cursor-pointer hover:bg-zinc-600"
+    tabindex="-1"
+    class="w-full p-1.5 text-xxs text-white cursor-pointer hover:bg-zinc-600 focus:outline-0"
     @click="click"
   >
     {{ shortcut.copied ? name : shortcut.name }}

package/src/modules/components/AppDefinitionList/AppDefinitionList.vue

@@ -19,6 +19,7 @@
         <AppDefinitionItem
           v-for="(item, index) in items"
           :key="index"
+          :tabindex="`1${index}`"
           :title="item.title"
           :description="item.description"
           :component="item.component"

package/src/modules/composables/index.ts

@@ -11,3 +11,4 @@ export * from './useActionBar';
 export * from './useEcho';
 export * from './useContextMenu';
 export * from './useComputedPosition';
+export * from './useFocusTrap';

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

@@ -0,0 +1,3 @@
+export interface Options {
+  childTargetClass?: string;
+}

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

@@ -0,0 +1,98 @@
+import { ref } from 'vue';
+import { onKeyStroke, useActiveElement } from '@vueuse/core';
+import { useFocusTrap as useFocusTrapVueUse } from '@vueuse/integrations/useFocusTrap';
+
+import type { MaybeRefOrGetter } from 'vue';
+import type { Arrayable, MaybeComputedElementRef } from '@vueuse/core';
+import type { Options } from './index.d';
+
+export function useFocusTrap(
+  target: MaybeRefOrGetter<Arrayable<MaybeRefOrGetter<string> | MaybeComputedElementRef>>,
+  options: Options = {},
+) {
+  const isActive = ref<boolean>(false);
+  const { activate: activateTrap, deactivate: deactivateTrap } = useFocusTrapVueUse(target);
+  const activeElement = useActiveElement();
+  const onEscapeCallback = ref<() => void>();
+  const onBackCallback = ref<() => void>();
+
+  function onEscape(callback: () => void): void {
+    onEscapeCallback.value = callback;
+  }
+
+  function onBack(callback: () => void): void {
+    onBackCallback.value = callback;
+  }
+
+  function activate(): void {
+    isActive.value = true;
+
+    try {
+      activateTrap();
+    } catch (error) {
+      console.warn(error);
+    }
+  }
+
+  function deactivate(): void {
+    isActive.value = false;
+
+    deactivateTrap();
+  }
+
+  onKeyStroke(['Escape'], (event: KeyboardEvent) => {
+    if (!isActive.value) {
+      return;
+    }
+
+    event.preventDefault();
+
+    onEscapeCallback.value?.();
+  });
+  onKeyStroke(['Enter', 'ArrowRight'], (event: KeyboardEvent) => {
+    if (!isActive.value) {
+      return;
+    }
+
+    event.preventDefault();
+
+    if (event.key === 'Enter' || (event.key === 'ArrowRight' && activeElement.value?.classList.contains('has-submenu'))) {
+      if (options.childTargetClass) {
+        (activeElement.value?.querySelector(options?.childTargetClass ?? '.app-action-bar-item') as HTMLDivElement | undefined)?.click();
+
+        return;
+      }
+
+      (activeElement.value?.firstElementChild as HTMLDivElement | undefined)?.click();
+    }
+  });
+  onKeyStroke(['ArrowLeft'], () => {
+    if (!isActive.value) {
+      return;
+    }
+
+    onBackCallback.value?.();
+  });
+  onKeyStroke(['ArrowDown', 'ArrowUp'], (event: KeyboardEvent) => {
+    if (!isActive.value) {
+      return;
+    }
+
+    event.preventDefault();
+
+    if (event.key === 'ArrowUp') {
+      (activeElement.value?.previousElementSibling as HTMLDivElement | undefined)?.focus();
+      return;
+    }
+
+    (activeElement.value?.nextElementSibling as HTMLDivElement | undefined)?.focus();
+  });
+
+  return {
+    isActive,
+    activate,
+    deactivate,
+    onEscape,
+    onBack,
+  };
+}