@autoafleveren/ui 1.5.1 → 1.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autoafleveren/ui",
-  "version": "1.5.1",
+  "version": "1.5.5",
   "type": "module",
   "files": [
     "dist/*",
@@ -70,7 +70,7 @@
   },
   "packageManager": "yarn@4.6.0",
   "dependencies": {
-    "@awesome.me/kit-ed6848cc31": "^1.0.7",
+    "@awesome.me/kit-ed6848cc31": "^1.0.10",
     "@floating-ui/vue": "^1.1.7",
     "@fortawesome/fontawesome-svg-core": "^7.0.0",
     "@fortawesome/vue-fontawesome": "^3.1.1",

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

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
   import { computed, nextTick, onUnmounted, ref } from 'vue';
-  import { onClickOutside } from '@vueuse/core';
+  import { onClickOutside, useDebounceFn } from '@vueuse/core';
   import { useActionBar, useClientPoint, useContextMenu, useFocusTrap } from '~composables';
   import AppActionBarItem from '~components/AppActionBar/AppActionBarItem.vue';
+  import AppInput from '~components/AppInput/AppInput.vue';
   import ShortcutItem from './ShortcutItem.vue';
 
   import type { Props, Action } from './index.d';
@@ -19,13 +20,29 @@
   const isOpen = ref(true);
   const isLoading = ref(false);
   const openIndex = ref<number | null>(null);
+  const searchActionsQuery = ref<string>('');
   const actionbar = useActionBar();
   const contextMenu = useContextMenu();
   const contextMenuElement = ref<HTMLDivElement>();
   const clientComputedPosition = useClientPoint(contextMenuElement);
   const { activate, deactivate, onEscape } = useFocusTrap(contextMenuElement);
+  const onSearchActionsQueryInput = useDebounceFn((value: string) => {
+    searchActionsQuery.value = value;
+  });
 
   const actionsWithFallback = computed((): Action[] => props.actions ?? actionbar.actions.value);
+  const normalizedSearchQuery = computed((): string => searchActionsQuery.value?.toLowerCase().trim() || '');
+  const isSearching = computed((): boolean => normalizedSearchQuery.value?.length > 0);
+  const filteredActions = computed((): Action[] => {
+    const actions = actionsWithFallback.value;
+    const limit = props.maxList ?? actions.length;
+
+    if (!isSearching.value) return actions.slice(0, limit);
+
+    return actions
+      .filter(action => action.name.toLowerCase().includes(normalizedSearchQuery.value))
+      .slice(0, limit);
+  });
 
   onUnmounted(deactivate);
 
@@ -84,9 +101,20 @@
     class="app-context-menu fixed z-50 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">
+      <AppInput
+        :model-value="searchActionsQuery"
+        :placeholder="searchPlaceholder ?? ''"
+        class="mb-2 text-zinc-700"
+        type="text"
+        data-test-driver-search
+        @update:model-value="onSearchActionsQueryInput"
+      />
+    </div>
+
     <div
       v-if="contextMenu.shortcuts.value.length > 0"
-      :class="{ 'mb-2': actionsWithFallback.length > 0 }"
+      :class="{ 'mb-2': filteredActions.length > 0 }"
       class="flex justify-between divide-x divide-zinc-600 rounded-md border border-zinc-600"
     >
       <ShortcutItem
@@ -99,7 +127,7 @@
     </div>
 
     <AppActionBarItem
-      v-for="(action, index) in actionsWithFallback"
+      v-for="(action, index) in filteredActions"
       :key="`action-item-${index}`"
       :action="action"
       :context="true"
@@ -116,5 +144,13 @@
     >
       <span class="text-base">{{ action.name }}</span>
     </AppActionBarItem>
+
+    <p
+      v-if="isSearching && filteredActions.length === 0"
+      class="px-4 py-2 text-sm text-zinc-500"
+      data-test-context-menu-no-results
+    >
+      {{ noResultsText ?? '' }}
+    </p>
   </div>
 </template>

package/src/modules/components/AppContextMenu/__tests__/app-context-menu.spec.ts

@@ -1,5 +1,5 @@
-import { describe, it, expect } from 'vitest';
-import { shallowMount } from '@vue/test-utils';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { flushPromises, shallowMount } from '@vue/test-utils';
 import { useContextMenu } from '~composables';
 import { actions as actionsMock, shortcutItem as shortcutItemMock } from '../__mocks__';
 import AppActionBarItem from '~components/AppActionBar/AppActionBarItem.vue';
@@ -11,19 +11,28 @@ import type { Action } from '~components/AppActionBar/index.d';
 class MockPointerEvent {}
 const contextMenu = useContextMenu();
 
-function createWrapper(actions: Action[] = actionsMock) {
+function createWrapper(actions: Action[] = actionsMock, props: Record<string, unknown> = {}) {
   return shallowMount(AppContextMenu, { props: {
     actions,
     event: new MockPointerEvent() as PointerEvent,
     item: {},
+    ...props,
   } });
 }
 
 describe('the AppContextMenu ShortcutItem component', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it('should display the context menu', () => {
     const wrapper = createWrapper();
-
     const menu = wrapper.find('[data-test-context-menu]');
+
     expect(menu.exists()).toBe(true);
   });
 
@@ -31,8 +40,8 @@ describe('the AppContextMenu ShortcutItem component', () => {
     expect.assertions(3);
 
     const wrapper = createWrapper();
-
     let shortcutItems = wrapper.findAllComponents(ShortcutItem);
+
     expect(shortcutItems).toHaveLength(0);
 
     contextMenu.setShortcuts([shortcutItemMock, shortcutItemMock]);
@@ -40,6 +49,7 @@ describe('the AppContextMenu ShortcutItem component', () => {
     await wrapper.vm.$nextTick();
 
     shortcutItems = wrapper.findAllComponents(ShortcutItem);
+
     expect(shortcutItems).toHaveLength(2);
     expect(shortcutItems[0].props('shortcut')).toStrictEqual(shortcutItemMock);
   });
@@ -48,8 +58,8 @@ describe('the AppContextMenu ShortcutItem component', () => {
     expect.assertions(5);
 
     const wrapper = createWrapper();
-
     const actionBarItems = wrapper.findAllComponents(AppActionBarItem);
+
     expect(actionBarItems).toHaveLength(2);
     expect(actionBarItems[0].props('action')).toStrictEqual(actionsMock[0]);
     expect(actionBarItems[1].props('action')).toStrictEqual(actionsMock[1]);
@@ -61,11 +71,144 @@ describe('the AppContextMenu ShortcutItem component', () => {
     expect.assertions(1);
 
     const wrapper = createWrapper();
-
     const actionBarItem = wrapper.findComponent(AppActionBarItem);
 
     actionBarItem.vm.$emit('close');
 
     expect(wrapper.emitted()).toHaveProperty('close');
   });
+
+  it('should not render the search input when enableSearch is false', () => {
+    const wrapper = createWrapper(actionsMock, { enableSearch: false });
+    const searchInput = wrapper.findComponent({ name: 'AppInput' });
+
+    expect(searchInput.exists()).toBe(false);
+  });
+
+  it('should not render the search input when enableSearch is not provided', () => {
+    const wrapper = createWrapper();
+    const searchInput = wrapper.findComponent({ name: 'AppInput' });
+
+    expect(searchInput.exists()).toBe(false);
+  });
+
+  it('should render the search input when enableSearch is true', () => {
+    const wrapper = createWrapper(actionsMock, { enableSearch: true });
+    const searchInput = wrapper.findComponent({ name: 'AppInput' });
+
+    expect(searchInput.exists()).toBe(true);
+  });
+
+  it('should use the searchPlaceholder prop as the input placeholder', () => {
+    const wrapper = createWrapper(actionsMock, {
+      enableSearch: true,
+      searchPlaceholder: 'Search actions...',
+    });
+
+    const searchInput = wrapper.findComponent({ name: 'AppInput' });
+
+    expect(searchInput.attributes('placeholder')).toBe('Search actions...');
+  });
+
+  it('should default the placeholder to an empty string when searchPlaceholder is not provided', () => {
+    const wrapper = createWrapper(actionsMock, { enableSearch: true });
+    const searchInput = wrapper.findComponent({ name: 'AppInput' });
+
+    expect(searchInput.attributes('placeholder')).toBe('');
+  });
+
+  it('should display noResultsText when searching yields no results', async () => {
+    const wrapper = createWrapper(actionsMock, {
+      enableSearch: true,
+      noResultsText: 'No results found',
+    });
+
+    const searchInput = wrapper.findComponent({ name: 'AppInput' });
+
+    await searchInput.vm.$emit('update:modelValue', 'nonexistentaction');
+
+    vi.runAllTimers();
+    await flushPromises();
+    await wrapper.vm.$nextTick();
+
+    const noResults = wrapper.find('[data-test-context-menu-no-results]');
+
+    expect(noResults.exists()).toBe(true);
+    expect(noResults.text()).toBe('No results found');
+  });
+
+  it('should default noResultsText to an empty string when not provided', async () => {
+    const wrapper = createWrapper(actionsMock, { enableSearch: true });
+    const searchInput = wrapper.findComponent({ name: 'AppInput' });
+
+    await searchInput.vm.$emit('update:modelValue', 'test_action_non_existant');
+
+    vi.runAllTimers();
+
+    await wrapper.vm.$nextTick();
+
+    const noResults = wrapper.find('[data-test-context-menu-no-results]');
+
+    expect(noResults.exists()).toBe(true);
+    expect(noResults.text()).toBe('');
+  });
+
+  it('should filter actions based on search query', async () => {
+    const wrapper = createWrapper(actionsMock, { enableSearch: true });
+    const searchInput = wrapper.findComponent({ name: 'AppInput' });
+
+    await searchInput.vm.$emit('update:modelValue', 'Action #1');
+    vi.runAllTimers();
+    await wrapper.vm.$nextTick();
+
+    const actionBarItems = wrapper.findAllComponents(AppActionBarItem);
+
+    expect(actionBarItems).toHaveLength(1);
+    expect(actionBarItems[0].props('action')).toStrictEqual(actionsMock[0]);
+  });
+
+  it('should limit the number of displayed actions when maxList is set', () => {
+    const wrapper = createWrapper(actionsMock, { maxList: 1 });
+    const actionBarItems = wrapper.findAllComponents(AppActionBarItem);
+
+    expect(actionBarItems).toHaveLength(1);
+    expect(actionBarItems[0].props('action')).toStrictEqual(actionsMock[0]);
+  });
+
+  it('should display all actions when maxList is not set', () => {
+    const wrapper = createWrapper(actionsMock);
+    const actionBarItems = wrapper.findAllComponents(AppActionBarItem);
+
+    expect(actionBarItems).toHaveLength(actionsMock.length);
+  });
+
+  it('should display all actions when maxList exceeds the number of actions', () => {
+    const wrapper = createWrapper(actionsMock, { maxList: 100 });
+    const actionBarItems = wrapper.findAllComponents(AppActionBarItem);
+
+    expect(actionBarItems).toHaveLength(actionsMock.length);
+  });
+
+  it('should limit filtered search results to maxList', async () => {
+    const manyActions: Action[] = [
+      { ...actionsMock[0], name: 'Action 1' },
+      { ...actionsMock[0], name: 'Action 2' },
+      { ...actionsMock[0], name: 'Action 3' },
+      { ...actionsMock[0], name: 'Action 4' },
+      { ...actionsMock[0], name: 'Action 5' },
+    ];
+
+    const wrapper = createWrapper(manyActions, { enableSearch: true, maxList: 2 });
+    const searchInput = wrapper.findComponent({ name: 'AppInput' });
+
+    await searchInput.vm.$emit('update:modelValue', 'Action');
+
+    vi.runAllTimers();
+
+    await wrapper.vm.$nextTick();
+
+    const actionBarItems = wrapper.findAllComponents(AppActionBarItem);
+
+    expect(actionBarItems).toHaveLength(2);
+  });
 });

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

@@ -8,6 +8,10 @@ export interface Props {
   event: PointerEvent | MouseEvent;
   actions?: Action[];
   confirmed?: Action['key'];
+  enableSearch?: boolean;
+  searchPlaceholder?: string;
+  noResultsText?: string;
+  maxList?: number;
 }
 
 export interface ContextMenuInstance {

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

@@ -135,7 +135,7 @@
     const result = props.onContextMenu?.(item, event, confirmed);
 
     if (result !== false) {
-      contextMenu.open(item, event, confirmed);
+      contextMenu.open(item, event, { confirmed });
     }
   }
 

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

@@ -3,7 +3,7 @@ import { get } from 'radash';
 import { AppContextMenu } from '~components';
 
 import type { App, Ref } from 'vue';
-import type { Action, ContextMenuInstance, Shortcut } from '~components/AppContextMenu/index.d';
+import type { ContextMenuInstance, Shortcut, Props } from '~components/AppContextMenu/index.d';
 
 const state = {
   instances: ref<ContextMenuInstance[]>([]),
@@ -18,7 +18,7 @@ function closeContextMenu(contextInstance: ContextMenuInstance): void {
 
 interface UseContextMenu<T> {
   setShortcuts: (shortcuts: Shortcut[]) => void;
-  open: (item: T, event: PointerEvent | MouseEvent, confirmed?: Action['name']) => Promise<unknown>;
+  open: (item: T, event: PointerEvent | MouseEvent, props?: Partial<Props>) => Promise<unknown>;
   close: () => Promise<void>;
   closeAll: () => void;
   shortcuts: Ref<Shortcut[]>;
@@ -35,7 +35,7 @@ export function useContextMenu<T>(): UseContextMenu<T> {
     state.shortcuts.value = shortcuts;
   }
 
-  async function open(item: T, event: PointerEvent | MouseEvent, confirmed?: Action['name']): Promise<unknown> {
+  async function open(item: T, event: PointerEvent | MouseEvent, props?: Partial<Props>): Promise<unknown> {
     // @ts-expect-error parameter not matched
     state.instances.value.forEach(closeContextMenu);
 
@@ -51,10 +51,10 @@ export function useContextMenu<T>(): UseContextMenu<T> {
       contextInstance = createApp(AppContextMenu, {
         item,
 
-        confirmed,
-
         event,
 
+        ...props,
+
         onClose: (data: unknown) => {
           resolve(data);
         },

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

@@ -73,7 +73,11 @@ export function useEcho(listenerName: string | null = null) {
 
     const channelName = channel ?? Object.keys(state.casters)[0];
 
-    state.casters[channelName]?.whisper?.(event, data);
+    try {
+      state.casters[channelName]?.whisper?.(event, data);
+    } catch {
+      //
+    }
   }
 
   function listen<T = unknown>(event: string, callback: (data: T) => void, channel?: string): void {

package/src/modules/layouts/Platform/Platform.vue

@@ -68,7 +68,7 @@
 
     <main
       class="relative order-4 flex min-h-[calc(100vh-5rem)] shrink-0 flex-col overflow-y-auto overflow-x-hidden
-        bg-zinc-100 transition-all duration-300 context-menu-open:overflow-y-hidden justify-self-start
+        bg-zinc-100 context-menu-open:overflow-y-hidden scrollbar-gutter-stable justify-self-start
         md:order-3 md:-mt-0 md:h-screen md:grow md:basis-0 md:overflow-y-auto md:overflow-x-hidden"
     >
       <AppActionBar />