@autoafleveren/ui 1.3.2 → 1.4.0

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

@@ -0,0 +1,199 @@
+import { onMounted, onUnmounted, ref, unref, watch } from 'vue';
+import { tryOnMounted } from '@vueuse/core';
+import { autoUpdate, computePosition, flip, offset, size } from '@floating-ui/vue';
+
+import type { CSSProperties, MaybeRef } from 'vue';
+import type { FloatingElement, ComputePositionReturn } from '@floating-ui/vue';
+import type { Options, ReferenceElement } from './index.d';
+
+export function useClientPoint(element: MaybeRef<HTMLElement | undefined>, options?: Options) {
+  const clientPoint = ref<{ x: number; y: number }>({ x: 0, y: 0 });
+  const referenceElement = document.createElement('div');
+  referenceElement.style.position = 'absolute';
+  referenceElement.style.left = `${clientPoint.value.x}px`;
+  referenceElement.style.top = `${clientPoint.value.y}px`;
+
+  onMounted(() => {
+    document.body.append(referenceElement);
+  });
+
+  onUnmounted(() => {
+    referenceElement.remove();
+  });
+
+  function setPosition(clientX: number, clientY: number): void {
+    clientPoint.value = { x: clientX, y: clientY };
+    referenceElement.style.left = `${clientX}px`;
+    referenceElement.style.top = `${clientY}px`;
+
+    useComputedPosition(referenceElement, element, options);
+  }
+
+  return {
+    clientPoint,
+    setPosition,
+  };
+}
+
+export function useComputedPosition(referenceComponent: ReferenceElement, floatingComponent: ReferenceElement, options?: Options) {
+  const attribute = 'aria-expanded';
+  const isActive = ref<boolean>(options?.active ?? false);
+  const reference = ref<ReferenceElement>();
+  const floating = ref<FloatingElement>();
+  const observer = ref<MutationObserver>();
+  const sizeObserver = ref<MutationObserver>();
+  const cleanupAutoUpdate = ref<() => void>();
+  const computePositionPlacement = options?.placement ?? 'bottom-start';
+  const computePositionBoundary = 'clippingAncestors';
+  const alignCenter = options?.center ?? false;
+  const mainAxis = options?.mainAxis ?? 0;
+  const crossAxis = options?.crossAxis ?? 2;
+  const position = ref<ComputePositionReturn>();
+
+  function setup(referenceNode: HTMLElement, floatingNode: HTMLElement): void {
+    reference.value = referenceNode;
+    floating.value = floatingNode;
+
+    observer.value = new MutationObserver(mutations => {
+      const expended = (mutations[0].target as HTMLElement).getAttribute(attribute);
+
+      isActive.value = expended === 'true';
+    });
+    sizeObserver.value = new MutationObserver(async () => {
+      setComputedPosition();
+
+      await new Promise(resolve => { setTimeout(resolve, 500); });
+
+      setComputedPosition();
+    });
+
+    if (reference.value && floating.value) {
+      observer.value.observe(reference.value, {
+        attributes: true,
+        attributeFilter: [attribute],
+      });
+
+      setComputedPosition();
+    }
+
+    const sizeElement = typeof options?.sizeElement === 'string'
+      ? document.querySelector(options.sizeElement)
+      : options?.sizeElement;
+
+    if (sizeElement) {
+      sizeObserver.value.observe(sizeElement, {
+        childList: true,
+        subtree: true,
+      });
+    }
+  }
+
+  function getElement(element: ReferenceElement): HTMLElement {
+    const unreffedElement = unref(element);
+
+    if (typeof unreffedElement === 'function') {
+      return unreffedElement();
+    }
+
+    return unreffedElement as HTMLElement;
+  }
+
+  function setComputedPosition(): void {
+    if (!reference.value || !floating.value) {
+      console.error('Reference en/or floating element not found');
+
+      return;
+    }
+
+    cleanupAutoUpdate.value = autoUpdate(reference.value, floating.value, async () => {
+      if (!reference.value || !floating.value) {
+        console.error('reference and/or floating element not found');
+
+        return;
+      }
+
+      position.value = await computePosition(reference.value, floating.value, {
+        placement: computePositionPlacement,
+        middleware: [
+          flip({
+            boundary: computePositionBoundary,
+          }),
+          offset(({ rects }) => {
+            const center = (-rects.floating.width / 2) + (rects.reference.width / 2);
+
+            return {
+              mainAxis,
+              crossAxis: alignCenter ? center : crossAxis,
+            };
+          }),
+          ...(options?.sizeElement ? [
+            size({
+              apply({ elements }) {
+                const rect = elements.reference.getBoundingClientRect();
+                const offsetLeft = rect.x + rect.width;
+
+                const sizeElement = typeof options?.sizeElement === 'string'
+                  ? document.querySelector(options.sizeElement)
+                  : options?.sizeElement;
+                const rectRight = sizeElement?.getBoundingClientRect();
+                const offsetRight = rectRight?.x;
+
+                if (offsetLeft && offsetRight) {
+                  Object.assign(elements.floating.style, {
+                    width: `${Math.max(0, offsetRight - offsetLeft)}px`,
+                  });
+                }
+              },
+            }),
+          ] : []),
+          ...(options?.middleware ?? []),
+        ],
+      });
+
+      const style: CSSProperties = {
+        left: '0',
+        top: '0',
+        transform: `translate(${Math.round(position.value.x)}px,${Math.round(position.value.y)}px)`,
+      };
+
+      Object.assign(floating.value.style, style);
+
+      floating.value.dataset.position = position.value.placement;
+    });
+  }
+
+  function destroy(): void {
+    delete floating.value?.dataset.position;
+
+    cleanupAutoUpdate.value?.();
+  }
+
+  watch(isActive, () => {
+    setComputedPosition();
+  });
+
+  tryOnMounted(() => {
+    const referenceElement = getElement(referenceComponent);
+    const floatingElement = getElement(floatingComponent);
+
+    if (referenceElement && floatingElement) {
+      setup(referenceElement, floatingElement);
+
+      return;
+    }
+
+    console.error('Reference or floating element not found', referenceElement, floatingElement);
+  });
+
+  onUnmounted(() => {
+    destroy();
+
+    observer.value?.disconnect();
+  });
+
+  return {
+    position,
+    isActive,
+    setComputedPosition,
+  };
+}

package/src/modules/composables/useConfirm/__tests__/index.spec.ts

@@ -0,0 +1,29 @@
+import { describe, it, expect, beforeAll, vi } from 'vitest';
+import { flushPromises } from '@vue/test-utils';
+import { useConfirm } from '../index';
+import ResizeObserverMock from '~/tests/mocks/resize-observer';
+
+describe('the useConfirm composables', () => {
+  const confirm = useConfirm();
+  beforeAll(() => {
+    global.ResizeObserver = ResizeObserverMock;
+
+    window.scrollTo = vi.fn();
+  });
+
+  it('create a div, append this to the body and destroys on unmount', async () => {
+    confirm.open({ title: 'title' });
+
+    await flushPromises();
+
+    let documentModalHolder = document.querySelector('[data-test-confirm-dialog]');
+
+    expect(documentModalHolder).not.toBeNull();
+
+    confirm.close();
+
+    documentModalHolder = document.querySelector('[data-test-confirm-dialog]');
+
+    expect(documentModalHolder).toBeNull();
+  });
+});

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

@@ -0,0 +1,63 @@
+import { createApp, ref } from 'vue';
+import { AppConfirm } from '~components';
+
+import type { App } from 'vue';
+import type { ConfirmInstance, ConfirmProps } from '~components/AppConfirm/index.d';
+
+const state = {
+  instances: ref<ConfirmInstance[]>([]),
+};
+
+function closeConfirm(confirmInstance: ConfirmInstance): void {
+  confirmInstance?.instance?.unmount();
+  confirmInstance?.element?.remove();
+}
+
+export function useConfirm(confirmProps: Partial<ConfirmProps> = {}) {
+  async function open(options: ConfirmProps): Promise<unknown> {
+    window.scrollTo(0, 0);
+
+    const confirmRootElement = document.createElement('div');
+    document.body.append(confirmRootElement);
+
+    let confirmInstance = null as null | App;
+
+    return new Promise(resolve => {
+      confirmInstance = createApp(AppConfirm, {
+        ...confirmProps,
+
+        ...options,
+
+        onClose: resolve,
+      });
+
+      confirmInstance.mount(confirmRootElement);
+
+      state.instances.value.push({
+        instance: confirmInstance,
+        element: confirmRootElement,
+      });
+    }).finally(() => {
+      if (confirmInstance) {
+        setTimeout(() => {
+          closeConfirm({
+            instance: confirmInstance,
+            element: confirmRootElement,
+          });
+        }, 500);
+      }
+    });
+  }
+
+  async function close(): Promise<void> {
+    state.instances.value.forEach(instance => closeConfirm(instance));
+
+    return Promise.resolve();
+  }
+
+  return {
+    ...state,
+    open,
+    close,
+  };
+}

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

@@ -0,0 +1,127 @@
+import { createApp, inject, ref } from 'vue';
+import { get } from 'radash';
+import { AppContextMenu } from '~components';
+
+import type { App, Ref } from 'vue';
+import type { Action, ContextMenuInstance, Shortcut } from '~components/AppContextMenu/index.d';
+
+const state = {
+  instances: ref<ContextMenuInstance[]>([]),
+  shortcuts: ref<Shortcut[]>([]),
+  item: ref<unknown>(),
+};
+
+function closeContextMenu(contextInstance: ContextMenuInstance): void {
+  contextInstance?.instance?.unmount();
+  contextInstance?.element?.remove();
+}
+
+interface UseContextMenu<T> {
+  setShortcuts: (shortcuts: Shortcut[]) => void;
+  open: (item: T, event: PointerEvent | MouseEvent, confirmed?: Action['name']) => Promise<unknown>;
+  close: () => Promise<void>;
+  closeAll: () => void;
+  shortcuts: Ref<Shortcut[]>;
+  instance: Ref<ContextMenuInstance | undefined>;
+  instances: Ref<ContextMenuInstance[]>;
+}
+
+export function useContextMenu<T>(): UseContextMenu<T> {
+  const instance = ref<ContextMenuInstance>();
+  // @ts-expect-error UILibraryOptions exists on window
+  const plugins = inject<Plugin[]>('plugins', get(window.UILibraryOptions, 'plugins'));
+
+  function setShortcuts(shortcuts: Shortcut[]): void {
+    state.shortcuts.value = shortcuts;
+  }
+
+  async function open(item: T, event: PointerEvent | MouseEvent, confirmed?: Action['name']): Promise<unknown> {
+    // @ts-expect-error parameter not matched
+    state.instances.value.forEach(closeContextMenu);
+
+    const contextMenuRootElement = document.createElement('div');
+    document.body.append(contextMenuRootElement);
+
+    let contextInstance = null as null | App;
+    let contextMenuRef = null as null | typeof AppContextMenu;
+
+    state.item.value = item;
+
+    return new Promise(resolve => {
+      contextInstance = createApp(AppContextMenu, {
+        item,
+
+        confirmed,
+
+        event,
+
+        onClose: (data: unknown) => {
+          resolve(data);
+        },
+      });
+
+      plugins?.forEach(plugin => {
+        // @ts-expect-error plugin not typed correctly
+        contextInstance?.use(plugin);
+      });
+
+      contextMenuRef = contextInstance.mount(contextMenuRootElement) as unknown as typeof AppContextMenu;
+
+      contextMenuRef.open();
+
+      instance.value = {
+        ref: contextMenuRef,
+        instance: contextInstance,
+        element: contextMenuRootElement,
+      };
+
+      // @ts-expect-error contextInstance wrong type
+      state.instances.value.push(instance.value);
+    }).finally(() => {
+      if (contextInstance) {
+        setTimeout(() => {
+          closeContextMenu({
+            ref: contextMenuRef,
+            // @ts-expect-error contextInstance can not be null
+            instance: contextInstance,
+            element: contextMenuRootElement,
+          });
+        }, 500);
+      }
+    });
+  }
+
+  async function close(): Promise<void> {
+    instance.value?.ref.close();
+
+    setTimeout(() => {
+      if (instance.value) {
+        closeContextMenu(instance.value);
+      }
+    }, 300);
+
+    return Promise.resolve();
+  }
+
+  function closeAll(): void {
+    state.instances.value.forEach(stateInstance => {
+      stateInstance?.ref.close();
+
+      setTimeout(() => {
+        if (stateInstance) {
+          // @ts-expect-error contextInstance can not be null
+          closeContextMenu(stateInstance);
+        }
+      }, 300);
+    });
+  }
+
+  return {
+    ...state,
+    instance,
+    open,
+    close,
+    closeAll,
+    setShortcuts,
+  } as unknown as UseContextMenu<T>;
+}

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

@@ -0,0 +1,34 @@
+import { describe, it, expect, beforeAll, vi } from 'vitest';
+import { flushPromises } from '@vue/test-utils';
+import { useDrawer } from '../index';
+import ResizeObserverMock from '~/tests/mocks/resize-observer';
+
+describe('the useDrawer composables', () => {
+  const drawer = useDrawer('content');
+
+  beforeAll(() => {
+    global.ResizeObserver = ResizeObserverMock;
+
+    window.scrollTo = vi.fn();
+  });
+
+  it('create a div, append this to the body and destroys on unmount', async () => {
+    expect.assertions(2);
+
+    drawer.open({ content: 'title' });
+
+    await flushPromises();
+
+    let documentDrawerHolder = document.querySelector('[data-test-drawer-dialog]');
+
+    expect(documentDrawerHolder).not.toBeNull();
+
+    drawer.close();
+
+    await new Promise(resolve => setTimeout(resolve, 500));
+
+    documentDrawerHolder = document.querySelector('[data-test-drawer-dialog]');
+
+    expect(documentDrawerHolder).toBeNull();
+  });
+});

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

@@ -0,0 +1,136 @@
+import { createApp, inject, isRef, ref } from 'vue';
+import { RouterView } from 'vue-router';
+import { AppDrawer } from '~components';
+
+import type { App, Component, MaybeRef } from 'vue';
+import type { ModalInstance, DrawerProps } from '~components/AppDrawer/index.d';
+
+const state = {
+  instances: ref<ModalInstance[]>([]),
+};
+
+function closeDrawer(modalInstance: ModalInstance): void {
+  modalInstance?.instance?.unmount();
+  modalInstance?.element?.remove();
+
+  const index = state.instances.value.findIndex(instance => instance.instance._uid === modalInstance.instance._uid);
+
+  if (index > -1) {
+    state.instances.value.splice(index, 1);
+  }
+}
+
+export function useDrawer(component?: MaybeRef<Component | string>, options?: DrawerProps) {
+  const instance = ref<ModalInstance>();
+
+  function mountDrawer(modalInstance: ModalInstance['instance'], modalRootElement: ModalInstance['element']): void {
+    const modalRef = modalInstance.mount(modalRootElement) as unknown as typeof AppDrawer;
+
+    modalRef.open();
+
+    instance.value = {
+      ref: modalRef,
+      instance: modalInstance,
+      element: modalRootElement,
+    };
+
+    state.instances.value.push(instance.value);
+  }
+
+  async function open(openOptions: DrawerProps): Promise<unknown> {
+    if (options) {
+      options.content = component;
+    }
+
+    if (!options?.content && !openOptions.content && openOptions.router) {
+      openOptions.content = RouterView;
+    }
+
+    window.scrollTo(0, 0);
+
+    const modalRootElement = document.createElement('div');
+    document.body.append(modalRootElement);
+
+    let modalInstance = null as null | App;
+    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);
+
+        return;
+      }
+
+      if (isRef(component)) {
+        modalRef = component.value as typeof AppDrawer;
+      } else {
+        modalInstance = createApp(AppDrawer, {
+          ...options,
+
+          ...openOptions,
+
+          onClose: (data: unknown) => {
+            options?.onClose?.();
+
+            resolve(data);
+          },
+        });
+
+        // @ts-expect-error ui library options not defined on window
+        const plugins = inject('plugins') || window.UILibraryOptions?.plugins;
+        const hasReadyListener = plugins?.find(plugin => typeof plugin?.isReady === 'function');
+
+        plugins?.forEach(plugin => {
+          modalInstance?.use(plugin);
+        });
+
+        if (!hasReadyListener) {
+          mountDrawer(modalInstance, modalRootElement);
+
+          if (openOptions.router) {
+            modalInstance?.config?.globalProperties?.$router?.push?.(openOptions.router);
+          }
+
+          return;
+        }
+
+        hasReadyListener?.isReady()?.then?.(() => {
+          mountDrawer(modalInstance, modalRootElement);
+
+          if (openOptions.router) {
+            modalInstance?.config?.globalProperties?.$router?.push?.(openOptions.router);
+          }
+        });
+      }
+    }).finally(() => {
+      if (modalInstance) {
+        setTimeout(() => {
+          closeDrawer({
+            ref: modalRef,
+            instance: modalInstance,
+            element: modalRootElement,
+          });
+        }, 500);
+      }
+    });
+  }
+
+  async function close(): Promise<void> {
+    instance.value?.ref.close();
+
+    setTimeout(() => {
+      if (instance.value) {
+        closeDrawer(instance.value);
+      }
+    }, 300);
+
+    return Promise.resolve();
+  }
+
+  return {
+    ...state,
+    instance,
+    open,
+    close,
+  };
+}