@autoafleveren/ui 1.4.14 → 1.5.1

package/package.json

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

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

@@ -8,7 +8,7 @@ export const domClassesPerType: Record<Type, string[]> = {
 };
 
 export const domClassesPerMenu: Record<'contextMenu' | 'actionBar', string[]> = {
-  contextMenu: ['focus:bg-zinc-600', 'px-2', 'py-1'],
+  contextMenu: ['hover:bg-zinc-600', 'focus:bg-zinc-600', 'px-2', 'py-1'],
   actionBar: ['hover:bg-black-100/20'],
 };
 

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

@@ -67,6 +67,10 @@
     openIndex.value = index;
   }
 
+  function focus(event: MouseEvent): void {
+    (event.target as HTMLDivElement | undefined)?.focus();
+  }
+
   defineExpose({ isOpen, open, close, submit });
   onClickOutside(contextMenuElement, close);
   onEscape(close);
@@ -107,7 +111,7 @@
       @confirm="deactivate"
       @confirmed="activate"
       @close="close"
-      @mouseover="($event) => ($event.target as HTMLDivElement | undefined)?.focus()"
+      @mouseenter="focus"
       @open="() => onItemOpen(index)"
     >
       <span class="text-base">{{ action.name }}</span>

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 {

package/src/modules/components/AppDrawer/AppDrawer.vue

@@ -5,7 +5,7 @@
 
   import type { DrawerProps } from './index.d';
 
-  withDefaults(defineProps<Omit<DrawerProps, 'router' | 'unique' | 'onOpen' | 'onClose' | 'plugins'>>(), {
+  withDefaults(defineProps<Omit<DrawerProps, 'router' | 'unique' | 'onOpen' | 'onClose' | 'plugins' | 'forceCreate'>>(), {
     withBackdrop: true,
     withFooter: true,
     preventBackdropClose: false,
@@ -110,7 +110,7 @@
                       <span class="sr-only">Close panel</span>
 
                       <FontAwesomeIcon
-                        :icon="byPrefixAndName.far?.['chevron-right']"
+                        :icon="closeIcon ?? byPrefixAndName.far?.['chevron-right']"
                         class="size-6"
                         aria-hidden="true"
                       />

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

@@ -1,5 +1,6 @@
 import type { Component, Plugin } from 'vue';
 import type { RouteRecordRaw } from 'vue-router';
+import type { FontAwesomeIconProps } from '@fortawesome/vue-fontawesome';
 import type { AppDrawer } from '~components';
 
 export type OnClose = () => unknown;
@@ -18,10 +19,13 @@ export interface DrawerProps {
   onClose?: OnClose;
   onOpen?: OnOpen;
   router?: RouteRecordRaw;
+  forceCreate?: boolean;
+  closeIcon?: FontAwesomeIconProps['icon'];
 }
 
 export interface ModalInstance {
   ref: AppDrawer;
   instance: App;
   element: HTMLDivElement;
+  withRouter: boolean;
 }

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

@@ -9,7 +9,7 @@ const state = {
   instances: ref<ModalInstance[]>([]),
 };
 
-function closeDrawer(modalInstance: ModalInstance): void {
+function closeDrawer(modalInstance: Omit<ModalInstance, 'withRouter'>): void {
   modalInstance?.instance?.unmount();
   modalInstance?.element?.remove();
 
@@ -23,7 +23,7 @@ function closeDrawer(modalInstance: ModalInstance): void {
 export function useDrawer(component?: MaybeRef<Component | string>, options?: DrawerProps) {
   const instance = ref<ModalInstance>();
 
-  function mountDrawer(modalInstance: ModalInstance['instance'], modalRootElement: ModalInstance['element']): void {
+  function mountDrawer(modalInstance: ModalInstance['instance'], modalRootElement: ModalInstance['element'], withRouter = false): void {
     const modalRef = modalInstance.mount(modalRootElement) as unknown as typeof AppDrawer;
 
     modalRef.open();
@@ -32,6 +32,7 @@ export function useDrawer(component?: MaybeRef<Component | string>, options?: Dr
       ref: modalRef,
       instance: modalInstance,
       element: modalRootElement,
+      withRouter,
     };
 
     state.instances.value.push(instance.value);
@@ -55,8 +56,10 @@ export function useDrawer(component?: MaybeRef<Component | string>, options?: Dr
     let modalRef = null as null | typeof AppDrawer;
 
     return new Promise(resolve => {
-      if (state.instances.value.length > 0 && openOptions.router) {
-        state.instances.value[state.instances.value.length - 1]?.instance?.config?.globalProperties?.$router?.push?.(openOptions.router);
+      const instancesWithRouter = state.instances.value.filter(stateInstance => stateInstance.withRouter);
+
+      if (openOptions.forceCreate !== true && instancesWithRouter.length > 0 && openOptions.router) {
+        instancesWithRouter[instancesWithRouter.length - 1]?.instance?.config?.globalProperties?.$router?.push?.(openOptions.router);
 
         return;
       }
@@ -85,7 +88,7 @@ export function useDrawer(component?: MaybeRef<Component | string>, options?: Dr
         });
 
         if (!hasReadyListener) {
-          mountDrawer(modalInstance, modalRootElement);
+          mountDrawer(modalInstance, modalRootElement, !!openOptions.router);
 
           if (openOptions.router) {
             modalInstance?.config?.globalProperties?.$router?.push?.(openOptions.router);
@@ -95,7 +98,7 @@ export function useDrawer(component?: MaybeRef<Component | string>, options?: Dr
         }
 
         hasReadyListener?.isReady()?.then?.(() => {
-          mountDrawer(modalInstance, modalRootElement);
+          mountDrawer(modalInstance, modalRootElement, !!openOptions.router);
 
           if (openOptions.router) {
             modalInstance?.config?.globalProperties?.$router?.push?.(openOptions.router);