@autoafleveren/ui 1.4.13 → 1.4.14

package/package.json

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

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

@@ -19,6 +19,7 @@
     },
   );
   const selected = ref([1]);
+  const openIndex = ref<number | null>(null);
 
   const selectionTextWithValue = computed((): string => {
     return selectionText.value.replace(':selection', String(selection.value.length));
@@ -38,11 +39,17 @@
   }
 
   function closeActionBar(): void {
+    openIndex.value = null;
+
     resetSelection();
 
     close();
   }
 
+  function onOpen(index: number): void {
+    openIndex.value = index;
+  }
+
   onKeyStroke(['Escape'], (event: Event) => {
     event.preventDefault();
 
@@ -81,6 +88,8 @@
           v-for="(action, index) in actions"
           :key="`action-item-${index}`"
           :action="action"
+          :is-open="openIndex === index"
+          @open="() => onOpen(index)"
           @close="closeActionBar"
         />
       </div>

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { computed, nextTick, onMounted, ref, toValue, useTemplateRef } from 'vue';
+  import { computed, nextTick, onMounted, ref, toValue, useTemplateRef, watch } from 'vue';
   import { WarningIcon } from '~icons';
   import { AppLoader } from '~components';
   import { useActionBar, useContextMenu, useFocusTrap } from '~composables';
@@ -19,6 +19,7 @@
     (event: 'close'): void;
     (event: 'confirm'): void;
     (event: 'confirmed'): void;
+    (event: 'open'): void;
   }>();
 
   const actionBar = useActionBar();
@@ -55,6 +56,12 @@
     return props.action.hidden;
   });
 
+  watch(() => props.isOpen, (value: boolean) => {
+    if (!value) {
+      subMenuClose();
+    }
+  });
+
   onMounted(() => {
     if (props.confirmed) {
       confirm.value = true;
@@ -78,6 +85,8 @@
         }
       }
 
+      emit('open');
+
       return;
     }
 
@@ -110,7 +119,6 @@
 
     emit('close');
   }
-
   onEscape(close);
   onBack(subMenuClose);
 </script>
@@ -143,6 +151,7 @@
         :is="action.suffixIcon"
         v-if="action.suffixIcon && context"
         class="size-5 ml-auto"
+        @close="subMenuClose"
       />
     </div>
 

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

@@ -7,7 +7,7 @@
   import type { ActionItemProps } from '../index.d';
 
   const props = withDefaults(
-    defineProps<Omit<ActionItemProps, 'context' | 'confirmed'> & { submitButtonText?: string; cancelButtonText?: string }>(),
+    defineProps<Omit<ActionItemProps, 'context' | 'confirmed' | 'isOpen'> & { submitButtonText?: string; cancelButtonText?: string }>(),
     {
       submitButtonText: 'Opslaan',
       cancelButtonText: 'Annuleren',

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

@@ -28,4 +28,5 @@ export interface ActionItemProps {
   confirmed?: boolean;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   item?: any;
+  isOpen?: boolean;
 }

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

@@ -18,6 +18,7 @@
 
   const isOpen = ref(true);
   const isLoading = ref(false);
+  const openIndex = ref<number | null>(null);
   const actionbar = useActionBar();
   const contextMenu = useContextMenu();
   const contextMenuElement = ref<HTMLDivElement>();
@@ -62,6 +63,10 @@
     }, 300);
   }
 
+  function onItemOpen(index: number): void {
+    openIndex.value = index;
+  }
+
   defineExpose({ isOpen, open, close, submit });
   onClickOutside(contextMenuElement, close);
   onEscape(close);
@@ -94,6 +99,7 @@
       :key="`action-item-${index}`"
       :action="action"
       :context="true"
+      :is-open="openIndex === index"
       :item="item"
       :confirmed="confirmed && confirmed === action.key"
       :tabindex="`100${index}`"
@@ -102,6 +108,7 @@
       @confirmed="activate"
       @close="close"
       @mouseover="($event) => ($event.target as HTMLDivElement | undefined)?.focus()"
+      @open="() => onItemOpen(index)"
     >
       <span class="text-base">{{ action.name }}</span>
     </AppActionBarItem>