@autoafleveren/ui 1.5.5 → 1.6.0

package/package.json

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

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

@@ -62,7 +62,7 @@
     <div
       ref="actionBar"
       :class="{ 'translate-y-0! max-md:mt-0!': selection.length > 0 && isOpen }"
-      class="fixed inset-x-0 top-0 z-100 flex h-14 md:-mt-1 -translate-y-24 items-center justify-between bg-secondary
+      class="app-actionbar fixed inset-x-0 top-0 z-100 flex h-14 md:-mt-1 -translate-y-24 items-center justify-between bg-secondary
         px-4 text-white transition-[translate] ease-in-out max-md:transform-none! max-md:translate-none! max-md:-mt-10"
       data-test-action-bar-wrapper
     >

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

@@ -97,7 +97,7 @@
 
     loading.value = false;
 
-    if (props.action?.resetSelection ?? true) {
+    if (!props.context && (props.action?.resetSelection ?? true)) {
       actionBar.resetSelection();
     }
 

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

@@ -52,7 +52,7 @@
   <div
     ref="subMenu"
     :class="{ '-top-full left-full': props.context }"
-    class="absolute w-fit rounded-lg bg-secondary p-2"
+    class="absolute w-fit rounded-lg bg-secondary p-2 [.app-actionbar:not(.translate-y-0\!)_&]:hidden"
   >
     <div
       ref="submenuArrow"

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

@@ -30,7 +30,7 @@
     searchActionsQuery.value = value;
   });
 
-  const actionsWithFallback = computed((): Action[] => props.actions ?? actionbar.actions.value);
+  const actionsWithFallback = computed((): Action[] => props.actions ?? contextMenu.actions.value ?? actionbar.actions.value);
   const normalizedSearchQuery = computed((): string => searchActionsQuery.value?.toLowerCase().trim() || '');
   const isSearching = computed((): boolean => normalizedSearchQuery.value?.length > 0);
   const filteredActions = computed((): Action[] => {
@@ -98,7 +98,7 @@
     v-if="isOpen && (actionsWithFallback.length > 0 || contextMenu.shortcuts.value.length > 0)"
     ref="contextMenuElement"
     :style="`left: ${event.x}px; top: ${event.y}px;`"
-    class="app-context-menu fixed z-50 flex w-64 flex-col rounded-lg bg-secondary p-2 drop-shadow-card empty:hidden"
+    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">

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

@@ -18,6 +18,7 @@ export interface ContextMenuInstance {
   ref: AppContextMenu;
   instance: App;
   element: HTMLDivElement;
+  activeRow?: HTMLTableRowElement | null;
 }
 
 export interface Shortcut {

package/src/modules/components/AppDataTable/AppDataTable.vue

@@ -294,7 +294,8 @@
       .vue3-easy-data-table__body tr {
         @apply bg-white;
 
-        &:hover {
+        &:hover,
+        &.app-context-menu-active-row {
           td {
             @apply bg-zinc-50;
           }

package/src/modules/composables/useContextMenu/__tests__/index.spec.ts

@@ -0,0 +1,98 @@
+import { describe, it, expect, beforeAll, beforeEach, vi } from 'vitest';
+import { flushPromises } from '@vue/test-utils';
+import { activeRowClass, useContextMenu } from '../index';
+import ResizeObserverMock from '~/tests/mocks/resize-observer';
+
+function createRowWithCell(): { row: HTMLTableRowElement; cell: HTMLTableCellElement } {
+  const table = document.createElement('table');
+  const tbody = document.createElement('tbody');
+  const row = document.createElement('tr');
+  const cell = document.createElement('td');
+
+  row.append(cell);
+  tbody.append(row);
+  table.append(tbody);
+  document.body.append(table);
+
+  return { row, cell };
+}
+
+describe('the useContextMenu composable', () => {
+  const contextMenu = useContextMenu();
+
+  beforeAll(() => {
+    global.ResizeObserver = ResizeObserverMock;
+
+    window.scrollTo = vi.fn();
+  });
+
+  beforeEach(async () => {
+    contextMenu.closeAll();
+
+    await new Promise(resolve => setTimeout(resolve, 600));
+
+    document.body.innerHTML = '';
+  });
+
+  it('adds the active row class to the closest table row when opened from a cell event', async () => {
+    expect.assertions(3);
+
+    const { row, cell } = createRowWithCell();
+    const event = new MouseEvent('contextmenu', { bubbles: true });
+
+    Object.defineProperty(event, 'target', { value: cell, configurable: true });
+
+    contextMenu.open({ id: 1 }, event);
+
+    await flushPromises();
+
+    expect(row.classList.contains(activeRowClass)).toBe(true);
+    expect(document.querySelectorAll(`tr.${activeRowClass}`)).toHaveLength(1);
+
+    contextMenu.close();
+
+    await new Promise(resolve => setTimeout(resolve, 350));
+
+    expect(row.classList.contains(activeRowClass)).toBe(false);
+  });
+
+  it('does not throw and adds no class when the event target is not inside table row', async () => {
+    expect.assertions(1);
+
+    const target = document.createElement('div');
+    document.body.append(target);
+
+    const event = new MouseEvent('contextmenu', { bubbles: true });
+    Object.defineProperty(event, 'target', { value: target, configurable: true });
+
+    contextMenu.open({ id: 1 }, event);
+
+    await flushPromises();
+
+    expect(document.querySelectorAll(`.${activeRowClass}`)).toHaveLength(0);
+  });
+
+  it('removes the active row class from the previous row when a new context menu is opened', async () => {
+    expect.assertions(3);
+
+    const { row: firstRow, cell: firstCell } = createRowWithCell();
+    const firstEvent = new MouseEvent('contextmenu', { bubbles: true });
+    Object.defineProperty(firstEvent, 'target', { value: firstCell, configurable: true });
+
+    contextMenu.open({ id: 1 }, firstEvent);
+    await flushPromises();
+
+    expect(firstRow.classList.contains(activeRowClass)).toBe(true);
+
+    const { row: secondRow, cell: secondCell } = createRowWithCell();
+    const secondEvent = new MouseEvent('contextmenu', { bubbles: true });
+    Object.defineProperty(secondEvent, 'target', { value: secondCell, configurable: true });
+
+    contextMenu.open({ id: 2 }, secondEvent);
+    await flushPromises();
+
+    expect(firstRow.classList.contains(activeRowClass)).toBe(false);
+    expect(secondRow.classList.contains(activeRowClass)).toBe(true);
+  });
+});
+

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

@@ -1,17 +1,22 @@
-import { createApp, inject, ref } from 'vue';
+import { createApp, inject, ref, shallowRef } from 'vue';
 import { get } from 'radash';
 import { AppContextMenu } from '~components';
 
 import type { App, Ref } from 'vue';
 import type { ContextMenuInstance, Shortcut, Props } from '~components/AppContextMenu/index.d';
+import type { Action } from '~components/AppActionBar/index.d';
+
+export const activeRowClass = 'app-context-menu-active-row';
 
 const state = {
   instances: ref<ContextMenuInstance[]>([]),
   shortcuts: ref<Shortcut[]>([]),
   item: ref<unknown>(),
+  actions: shallowRef<Action[]>([]),
 };
 
 function closeContextMenu(contextInstance: ContextMenuInstance): void {
+  contextInstance?.activeRow?.classList.remove(activeRowClass);
   contextInstance?.instance?.unmount();
   contextInstance?.element?.remove();
 }
@@ -22,6 +27,8 @@ interface UseContextMenu<T> {
   close: () => Promise<void>;
   closeAll: () => void;
   shortcuts: Ref<Shortcut[]>;
+  actions: Ref<Action[]>;
+  setActions: (actions: Action[]) => void;
   instance: Ref<ContextMenuInstance | undefined>;
   instances: Ref<ContextMenuInstance[]>;
 }
@@ -42,6 +49,9 @@ export function useContextMenu<T>(): UseContextMenu<T> {
     const contextMenuRootElement = document.createElement('div');
     document.body.append(contextMenuRootElement);
 
+    const activeRow = (event.target as HTMLElement | null)?.closest('tr') ?? null;
+    activeRow?.classList.add(activeRowClass);
+
     let contextInstance = null as null | App;
     let contextMenuRef = null as null | typeof AppContextMenu;
 
@@ -73,6 +83,7 @@ export function useContextMenu<T>(): UseContextMenu<T> {
         ref: contextMenuRef,
         instance: contextInstance,
         element: contextMenuRootElement,
+        activeRow,
       };
 
       // @ts-expect-error contextInstance wrong type
@@ -85,6 +96,7 @@ export function useContextMenu<T>(): UseContextMenu<T> {
             // @ts-expect-error contextInstance can not be null
             instance: contextInstance,
             element: contextMenuRootElement,
+            activeRow,
           });
         }, 500);
       }
@@ -103,6 +115,10 @@ export function useContextMenu<T>(): UseContextMenu<T> {
     return Promise.resolve();
   }
 
+  function setActions(actions: Action[]): void {
+    state.actions.value = actions;
+  }
+
   function closeAll(): void {
     state.instances.value.forEach(stateInstance => {
       stateInstance?.ref.close();
@@ -123,5 +139,6 @@ export function useContextMenu<T>(): UseContextMenu<T> {
     close,
     closeAll,
     setShortcuts,
+    setActions,
   } as unknown as UseContextMenu<T>;
 }

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

@@ -1,3 +1,5 @@
 export interface Options {
   childTargetClass?: string;
+  allowOutsideClick?: boolean;
+  preventScroll?: boolean;
 }

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

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