@autoafleveren/ui 1.7.0 → 1.8.0

package/package.json

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

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

@@ -97,10 +97,11 @@
     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">
+    <div v-if="search?.enabled && actionsWithFallback.length > 0">
       <AppInput
+        v-bind="search"
         :model-value="searchActionsQuery"
-        :placeholder="searchPlaceholder ?? ''"
+        :placeholder="search?.placeholder ?? ''"
         class="mb-2 text-zinc-700"
         type="text"
         data-test-driver-search

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

@@ -93,7 +93,7 @@ describe('the AppContextMenu ShortcutItem component', () => {
   });
 
   it('should render the search input when enableSearch is true', () => {
-    const wrapper = createWrapper(actionsMock, { enableSearch: true });
+    const wrapper = createWrapper(actionsMock, { search: { enabled: true } });
     const searchInput = wrapper.findComponent({ name: 'AppInput' });
 
     expect(searchInput.exists()).toBe(true);
@@ -101,8 +101,7 @@ describe('the AppContextMenu ShortcutItem component', () => {
 
   it('should use the searchPlaceholder prop as the input placeholder', () => {
     const wrapper = createWrapper(actionsMock, {
-      enableSearch: true,
-      searchPlaceholder: 'Search actions...',
+      search: { enabled: true, placeholder: 'Search actions...' },
     });
 
     const searchInput = wrapper.findComponent({ name: 'AppInput' });
@@ -111,7 +110,7 @@ describe('the AppContextMenu ShortcutItem component', () => {
   });
 
   it('should default the placeholder to an empty string when searchPlaceholder is not provided', () => {
-    const wrapper = createWrapper(actionsMock, { enableSearch: true });
+    const wrapper = createWrapper(actionsMock, { search: { enabled: true } });
     const searchInput = wrapper.findComponent({ name: 'AppInput' });
 
     expect(searchInput.attributes('placeholder')).toBe('');
@@ -119,7 +118,7 @@ describe('the AppContextMenu ShortcutItem component', () => {
 
   it('should display noResultsText when searching yields no results', async () => {
     const wrapper = createWrapper(actionsMock, {
-      enableSearch: true,
+      search: { enabled: true },
       noResultsText: 'No results found',
     });
 
@@ -138,7 +137,7 @@ describe('the AppContextMenu ShortcutItem component', () => {
   });
 
   it('should default noResultsText to an empty string when not provided', async () => {
-    const wrapper = createWrapper(actionsMock, { enableSearch: true });
+    const wrapper = createWrapper(actionsMock, { search: { enabled: true } });
     const searchInput = wrapper.findComponent({ name: 'AppInput' });
 
     await searchInput.vm.$emit('update:modelValue', 'test_action_non_existant');
@@ -154,7 +153,7 @@ describe('the AppContextMenu ShortcutItem component', () => {
   });
 
   it('should filter actions based on search query', async () => {
-    const wrapper = createWrapper(actionsMock, { enableSearch: true });
+    const wrapper = createWrapper(actionsMock, { search: { enabled: true } });
     const searchInput = wrapper.findComponent({ name: 'AppInput' });
 
     await searchInput.vm.$emit('update:modelValue', 'Action #1');
@@ -198,7 +197,7 @@ describe('the AppContextMenu ShortcutItem component', () => {
       { ...actionsMock[0], name: 'Action 5' },
     ];
 
-    const wrapper = createWrapper(manyActions, { enableSearch: true, maxList: 2 });
+    const wrapper = createWrapper(manyActions, { search: { enabled: true }, maxList: 2 });
     const searchInput = wrapper.findComponent({ name: 'AppInput' });
 
     await searchInput.vm.$emit('update:modelValue', 'Action');

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

@@ -1,5 +1,6 @@
 import type { App } from 'vue';
 import type AppContextMenu from './AppContextMenu.vue';
+import type { AppInputProps } from '~components/AppInput/index.d';
 
 export type { Action } from '~components/AppActionBar/index.d';
 
@@ -8,8 +9,10 @@ export interface Props {
   event: PointerEvent | MouseEvent;
   actions?: Action[];
   confirmed?: Action['key'];
-  enableSearch?: boolean;
-  searchPlaceholder?: string;
+  search?: Omit<AppInputProps<string>, 'modelValue'> & {
+    enabled?: boolean;
+    placeholder?: string;
+  };
   noResultsText?: string;
   maxList?: number;
 }