@autoafleveren/ui 1.4.13 → 1.4.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autoafleveren/ui",
-  "version": "1.4.13",
+  "version": "1.4.15",
   "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>

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

@@ -7,6 +7,7 @@
   import AppDataTableFooter from './AppDataTableFooter.vue';
 
   import type { ServerOptions, UpdateSortArgument } from 'vue3-easy-data-table';
+  import type { Action } from '~components/AppActionBar/index.d';
   import type { Props, DataTableInstance } from '.';
 
   const props = withDefaults(defineProps<Props<Item>>(), {
@@ -130,6 +131,14 @@
     emit('sortClient', value);
   }
 
+  function contextMenuOpen(item: unknown, event: PointerEvent | MouseEvent, confirmed?: Action['name']): void {
+    const result = props.onContextMenu?.(item, event, confirmed);
+
+    if (result !== false) {
+      contextMenu.open(item, event, confirmed);
+    }
+  }
+
   defineExpose({ dataTableInstance });
 
   defineOptions({ inheritAttrs: false });
@@ -160,7 +169,7 @@
       body-row-class-name="drop-shadow-xs rounded-xl"
       @update:items-selected="updateSelection"
       @click-row="clickRow"
-      @contextmenu-row="contextMenu.open"
+      @contextmenu-row="contextMenuOpen"
       @update:server-options="onUpdateServerOptions"
       @update-sort="onUpdateClientSort"
     >

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

@@ -1,4 +1,5 @@
 import type { Header } from 'vue3-easy-data-table';
+import type { Action } from '~components/AppActionBar/index.d';
 
 export interface Props<Item> {
   headers: Header[];
@@ -10,6 +11,7 @@ export interface Props<Item> {
   actionBarSelection?: boolean;
   actionBarSelectionKey?: string;
   hideFooter?: boolean;
+  onContextMenu?: (item: unknown, event: PointerEvent | MouseEvent, confirmed?: Action['name']) => void | false;
 }
 
 export interface DataTableInstance {