@autoafleveren/ui 1.5.5 → 1.5.6

package/package.json

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

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

@@ -5,6 +5,8 @@ import { AppContextMenu } from '~components';
 import type { App, Ref } from 'vue';
 import type { ContextMenuInstance, Shortcut, Props } from '~components/AppContextMenu/index.d';
 
+export const activeRowClass = 'app-context-menu-active-row';
+
 const state = {
   instances: ref<ContextMenuInstance[]>([]),
   shortcuts: ref<Shortcut[]>([]),
@@ -12,6 +14,7 @@ const state = {
 };
 
 function closeContextMenu(contextInstance: ContextMenuInstance): void {
+  contextInstance?.activeRow?.classList.remove(activeRowClass);
   contextInstance?.instance?.unmount();
   contextInstance?.element?.remove();
 }
@@ -42,6 +45,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 +79,7 @@ export function useContextMenu<T>(): UseContextMenu<T> {
         ref: contextMenuRef,
         instance: contextInstance,
         element: contextMenuRootElement,
+        activeRow,
       };
 
       // @ts-expect-error contextInstance wrong type
@@ -85,6 +92,7 @@ export function useContextMenu<T>(): UseContextMenu<T> {
             // @ts-expect-error contextInstance can not be null
             instance: contextInstance,
             element: contextMenuRootElement,
+            activeRow,
           });
         }, 500);
       }