@autoafleveren/ui 1.5.6 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autoafleveren/ui",
-  "version": "1.5.6",
+  "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/composables/useContextMenu/index.ts

@@ -1,9 +1,10 @@
-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';
 
@@ -11,6 +12,7 @@ const state = {
   instances: ref<ContextMenuInstance[]>([]),
   shortcuts: ref<Shortcut[]>([]),
   item: ref<unknown>(),
+  actions: shallowRef<Action[]>([]),
 };
 
 function closeContextMenu(contextInstance: ContextMenuInstance): void {
@@ -25,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[]>;
 }
@@ -111,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();
@@ -131,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>();