@autoafleveren/ui 1.3.2 → 1.4.0

package/src/modules/components/AppConfirm/__tests__/app-confirm.spec.ts

@@ -0,0 +1,366 @@
+import {
+  describe,
+  it,
+  expect,
+  vi,
+} from 'vitest';
+import { flushPromises, shallowMount } from '@vue/test-utils';
+import {
+  Dialog,
+  DialogTitle,
+  TransitionChild,
+  TransitionRoot,
+} from '@headlessui/vue';
+import Confirm from '../AppConfirm.vue';
+import { AppButton } from '~components';
+import HeadlessUiTransitionRootStub from '~/tests/stubs/HeadlessUiTransitionRootStub';
+import HeadlessUiDialogStub from '~/tests/stubs/HeadlessUiDialogStub';
+import HeadlessUiTransitionChildStub from '~/tests/stubs/HeadlessUiTransitionChildStub';
+
+import type { ConfirmProps } from '../index.d';
+
+function createWrapper(props: ConfirmProps) {
+  return shallowMount(Confirm, {
+    props,
+    global: {
+      stubs: {
+        Dialog: HeadlessUiDialogStub,
+        TransitionRoot: HeadlessUiTransitionRootStub,
+        TransitionChild: HeadlessUiTransitionChildStub,
+      },
+    },
+  });
+}
+
+describe('generic AppConfirm component', () => {
+  it('should display a confirm when title is set', () => {
+    const wrapper = createWrapper({ title: 'title' });
+
+    const transitionWrapper = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1];
+
+    expect(transitionWrapper.exists()).toBe(true);
+    expect(transitionWrapper.isVisible()).toBe(true);
+  });
+
+  it('should set the right title', () => {
+    const title = 'This is a test';
+
+    const wrapper = createWrapper({
+      title,
+      content: 'Bla',
+    });
+
+    const dialogTitleWrapper = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findComponent(DialogTitle);
+
+    expect(dialogTitleWrapper.text()).toStrictEqual(title);
+  });
+
+  it('should set the right content', () => {
+    const content = 'This is test content';
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content,
+    });
+
+    const dialogContent = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .find('[data-test-confirm-content]');
+
+    expect(dialogContent.text()).toStrictEqual(content);
+  });
+
+  it('should render the content as text by default', () => {
+    const content = '<p>This is test content</p>';
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content,
+    });
+
+    const dialogContent = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .find('[data-test-confirm-content]');
+
+    expect(dialogContent.text()).toBe(content);
+  });
+
+  it('should render the content as html when html is enabled', () => {
+    const content = '<p>This is test content</p>';
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content,
+      html: true,
+    });
+
+    const dialogContent = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .find('[data-test-confirm-content]');
+
+    expect(dialogContent.text()).toBe('This is test content');
+    expect(dialogContent.find('.app-confirm-html-content').find('p').exists()).toBe(true);
+    expect(dialogContent.find('.app-confirm-html-content').find('p').text()).toBe('This is test content');
+  });
+
+  it('should be able to set a custom text in confirm button', () => {
+    const confirmButtonText = 'huts';
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'Bla',
+      confirmButtonText,
+      cancelButtonText: 'cancel button',
+    });
+
+    const confirmButton = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findAllComponents(AppButton)[0];
+
+    expect(confirmButton.exists()).toBe(true);
+    expect(confirmButton.text()).toStrictEqual(confirmButtonText);
+  });
+
+  it('should be able to set a custom text in cancel button', () => {
+    const cancelButtonText = 'huts';
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'Bla',
+      confirmButtonText: 'confirm button',
+      cancelButtonText,
+    });
+
+    const cancelButton = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findAllComponents(AppButton)[1];
+
+    expect(cancelButton.exists()).toBe(true);
+    expect(cancelButton.text()).toStrictEqual(cancelButtonText);
+  });
+
+  it('should not have a default icon', () => {
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'Bla',
+    });
+
+    const appIconWrapper = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .find('[data-test-confirm-icon]');
+
+    expect(appIconWrapper.exists()).toBe(false);
+  });
+
+  it('should have a default icon for type "success"', () => {
+    const wrapper = createWrapper({
+      type: 'success',
+      title: 'This is a test',
+      content: 'Bla',
+    });
+
+    const appIconWrapper = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .find('[data-test-confirm-icon]');
+
+    expect(appIconWrapper.isVisible()).toBe(true);
+  });
+
+  it('should emit a close when confirm button is pressed', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'Bla',
+      confirmButtonText: 'confirm',
+    });
+
+    const confirmButton = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findAllComponents(AppButton)[0];
+
+    await confirmButton.trigger('click');
+
+    const emitted = wrapper.emitted<Event[]>();
+
+    expect(emitted).toHaveProperty('close');
+    expect(emitted.close[0][0]).toBe(true);
+  });
+
+  it('should emit a close when cancel button is pressed', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'Bla',
+      cancelButtonText: 'confirm',
+    });
+
+    const confirmButton = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findAllComponents(AppButton)[0];
+
+    await confirmButton.trigger('click');
+
+    const emitted = wrapper.emitted<Event[]>();
+
+    expect(emitted).toHaveProperty('close');
+    expect(emitted.close[0][0]).toBe(false);
+  });
+
+  it('should process promise when onConfirm is function', async () => {
+    expect.assertions(3);
+
+    const onConfirm = vi.fn();
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'Bla',
+      confirmButtonText: 'confirm',
+      onConfirm,
+    });
+
+    const confirmButton = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findAllComponents(AppButton)[0];
+
+    await confirmButton.trigger('click');
+
+    const emitted = wrapper.emitted<Event[]>();
+
+    expect(emitted).toHaveProperty('close');
+    expect(emitted.close[0][0]).toBe(true);
+
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+  });
+
+  it('should process promise when onCancel is function', async () => {
+    expect.assertions(3);
+
+    const onCancel = vi.fn();
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'Bla',
+      cancelButtonText: 'confirm',
+      onCancel,
+    });
+
+    const cancelButton = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findAllComponents(AppButton)[0];
+
+    await cancelButton.trigger('click');
+
+    const emitted = wrapper.emitted<Event[]>();
+
+    expect(emitted).toHaveProperty('close');
+    expect(emitted.close[0][0]).toBe(false);
+
+    expect(onCancel).toHaveBeenCalledTimes(1);
+  });
+
+  it('should show spinner when confirming', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'Bla',
+      confirmButtonText: 'confirm',
+      cancelButtonText: 'confirm',
+    });
+
+    // @ts-expect-error setting data on wrapper works in this case but not according to Typescript
+    wrapper.vm.confirmLoading = true;
+    // @ts-expect-error setting data on wrapper works in this case but not according to Typescript
+    wrapper.vm.cancelLoading = true;
+
+    await flushPromises();
+
+    const buttons = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findAllComponents(AppButton);
+
+    expect(buttons[0].props('loading')).toBe(true);
+    expect(buttons[1].props('loading')).toBe(true);
+  });
+
+  it('should close confirm when backdrop is clicked and preventBackdropClose is "false"', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'BlaBlaBla',
+      preventBackdropClose: false,
+    });
+
+    const dialog = wrapper.findComponent(Dialog);
+    expect(dialog.exists()).toBe(true);
+
+    dialog.vm.$emit('close');
+
+    await flushPromises();
+
+    const closeConfirmEmit = wrapper.emitted<Event[]>('close');
+
+    expect(closeConfirmEmit).toBeDefined();
+    expect(closeConfirmEmit).toHaveLength(1);
+  });
+
+  it('should not close confirm when backdrop is clicked', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'BlaBlaBla',
+    });
+
+    const dialog = wrapper.findComponent(Dialog);
+    expect(dialog.exists()).toBe(true);
+
+    dialog.vm.$emit('close');
+
+    await flushPromises();
+
+    const closeConfirmEmit = wrapper.emitted<Event[]>('close');
+
+    expect(closeConfirmEmit).toBeUndefined();
+  });
+
+  it('shouldn\'t close confirm when backdrop is clicked with prevent prop', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'BlaBlaBla',
+    });
+
+    await wrapper.setProps({ preventBackdropClose: true });
+
+    const dialog = wrapper.findComponent(Dialog);
+    expect(dialog.exists()).toBe(true);
+
+    dialog.vm.$emit('close');
+    await flushPromises();
+
+    const closeConfirmEmit = wrapper.emitted<Event[]>('close');
+
+    expect(closeConfirmEmit).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,31 @@
+import type { Component } from 'vue';
+
+export type Confirm = (options: ConfirmProps) => Promise<void>;
+export type ConfirmType = 'default' | 'success' | 'error';
+export type OnConfirm = () => unknown;
+export type OnCancel = () => unknown;
+
+export interface ConfirmProps {
+  title: string;
+  type?: ConfirmType;
+  content?: string;
+  confirmButtonText?: string;
+  confirmButtonTrailingIcon?: Component;
+  confirmButtonLeadingIcon?: Component;
+  cancelButtonText?: string;
+  cancelButtonTrailingIcon?: Component;
+  cancelButtonLeadingIcon?: Component;
+  withBackdrop?: boolean;
+  preventBackdropClose?: boolean;
+  icon?: string | Component;
+  html?: boolean;
+  animate?: boolean;
+  extendedIconDomClasses?: string;
+  onConfirm?: OnConfirm;
+  onCancel?: OnCancel;
+}
+
+export interface ConfirmInstance {
+  instance: App;
+  element: HTMLDivElement;
+}

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

@@ -0,0 +1 @@
+export const types = ['default', 'success', 'error'] as const;

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

@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+  import { computed, nextTick, onUnmounted, ref } from 'vue';
+  import { onClickOutside } from '@vueuse/core';
+  import { useActionBar, useClientPoint, useContextMenu, useFocusTrap } from '~composables';
+  import AppActionBarItem from '~components/AppActionBar/AppActionBarItem.vue';
+  import ShortcutItem from './ShortcutItem.vue';
+
+  import type { Props, Action } from './index.d';
+
+  const props = defineProps<Props>();
+
+  const emit = defineEmits<{
+    (event: 'actionClicked', action: Action): void;
+    (event: 'close'): void;
+    (event: 'open'): void;
+    (event: 'cancel'): void;
+  }>();
+
+  const isOpen = ref(true);
+  const isLoading = ref(false);
+  const actionbar = useActionBar();
+  const contextMenu = useContextMenu();
+  const contextMenuElement = ref<HTMLDivElement>();
+  const clientComputedPosition = useClientPoint(contextMenuElement);
+  const { activate, deactivate, onEscape } = useFocusTrap(contextMenuElement);
+
+  const actionsWithFallback = computed((): Action[] => props.actions ?? actionbar.actions.value);
+
+  onUnmounted(deactivate);
+
+  async function open(): Promise<void> {
+    isOpen.value = true;
+
+    emit('open');
+
+    document.querySelector('#app')?.classList.add('context-menu-open');
+
+    clientComputedPosition.setPosition(props.event.x, props.event.y);
+
+    await nextTick();
+
+    activate();
+  }
+
+  async function close(): Promise<void> {
+    isOpen.value = false;
+
+    deactivate();
+
+    emit('close');
+
+    document.querySelector('#app')?.classList.remove('context-menu-open');
+  }
+
+  async function submit(action: Action): Promise<void> {
+    emit('actionClicked', action);
+
+    isOpen.value = false;
+
+    setTimeout(() => {
+      isLoading.value = false;
+    }, 300);
+  }
+
+  defineExpose({ isOpen, open, close, submit });
+  onClickOutside(contextMenuElement, close);
+  onEscape(close);
+</script>
+
+<template>
+  <div
+    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"
+    data-test-context-menu
+  >
+    <div
+      v-if="contextMenu.shortcuts.value.length > 0"
+      :class="{ 'mb-2': actionsWithFallback.length > 0 }"
+      class="flex justify-between divide-x divide-zinc-600 rounded-md border border-zinc-600"
+    >
+      <ShortcutItem
+        v-for="shortcut in contextMenu.shortcuts.value"
+        :key="shortcut.name"
+        :shortcut="shortcut"
+        :item="item"
+        @close="close"
+      />
+    </div>
+
+    <AppActionBarItem
+      v-for="(action, index) in actionsWithFallback"
+      :key="`action-item-${index}`"
+      :action="action"
+      :context="true"
+      :item="item"
+      :confirmed="confirmed && confirmed === action.key"
+      :tabindex="`100${index}`"
+      class="flex h-10 items-center space-x-2 first:rounded-t-lg last:rounded-b-lg focus:outline-none"
+      @confirm="deactivate"
+      @confirmed="activate"
+      @close="close"
+      @mouseover="($event) => ($event.target as HTMLDivElement | undefined)?.focus()"
+    >
+      <span class="text-base">{{ action.name }}</span>
+    </AppActionBarItem>
+  </div>
+</template>

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

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+  import { ref } from 'vue';
+
+  import type { Shortcut } from './index.d';
+
+  const props = defineProps<{ shortcut: Shortcut; item: unknown }>();
+
+  const emit = defineEmits<{ (event: 'close'): void }>();
+
+  const name = ref(props.shortcut.name);
+
+  async function click(event): Promise<void> {
+    const closeOnComplete = await props.shortcut.click(props.shortcut, props.item, event);
+
+    if (props.shortcut.copied) {
+      name.value = 'Gekopieërd';
+
+      setTimeout(() => {
+        name.value = props.shortcut.name;
+      }, 1500);
+    }
+
+    if (closeOnComplete === true) {
+      emit('close');
+    }
+  }
+</script>
+
+<template>
+  <button
+    type="button"
+    tabindex="-1"
+    class="w-full p-1.5 text-xxs text-white cursor-pointer hover:bg-zinc-600 focus:outline-0"
+    @click="click"
+  >
+    {{ shortcut.copied ? name : shortcut.name }}
+  </button>
+</template>

package/src/modules/components/AppContextMenu/__mocks__/index.ts

@@ -0,0 +1,25 @@
+import { PencilIcon } from '~icons';
+
+import type { Shortcut } from '~components/AppContextMenu/index.d';
+import type { Action } from '~components/AppActionBar/index.d';
+
+export const shortcutItem: Shortcut = {
+  name: 'shortcut',
+  click: () => {},
+};
+
+export const defaultAction: Action = {
+  name: 'Action #1',
+  icon: PencilIcon,
+  confirm: false,
+  type: 'default',
+};
+
+export const confirmableAction: Action = {
+  name: 'Action confirm',
+  icon: PencilIcon,
+  confirm: true,
+  type: 'danger',
+};
+
+export const actions = [defaultAction, confirmableAction];

package/src/modules/components/AppContextMenu/__tests__/app-context-menu.spec.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import { useContextMenu } from '~composables';
+import { actions as actionsMock, shortcutItem as shortcutItemMock } from '../__mocks__';
+import AppActionBarItem from '~components/AppActionBar/AppActionBarItem.vue';
+import AppContextMenu from '../AppContextMenu.vue';
+import ShortcutItem from '../ShortcutItem.vue';
+
+import type { Action } from '~components/AppActionBar/index.d';
+
+class MockPointerEvent {}
+const contextMenu = useContextMenu();
+
+function createWrapper(actions: Action[] = actionsMock) {
+  return shallowMount(AppContextMenu, { props: {
+    actions,
+    event: new MockPointerEvent() as PointerEvent,
+    item: {},
+  } });
+}
+
+describe('the AppContextMenu ShortcutItem component', () => {
+  it('should display the context menu', () => {
+    const wrapper = createWrapper();
+
+    const menu = wrapper.find('[data-test-context-menu]');
+    expect(menu.exists()).toBe(true);
+  });
+
+  it('should render the shortcut items when exists', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper();
+
+    let shortcutItems = wrapper.findAllComponents(ShortcutItem);
+    expect(shortcutItems).toHaveLength(0);
+
+    contextMenu.setShortcuts([shortcutItemMock, shortcutItemMock]);
+
+    await wrapper.vm.$nextTick();
+
+    shortcutItems = wrapper.findAllComponents(ShortcutItem);
+    expect(shortcutItems).toHaveLength(2);
+    expect(shortcutItems[0].props('shortcut')).toStrictEqual(shortcutItemMock);
+  });
+
+  it('should render the actionbar items', () => {
+    expect.assertions(5);
+
+    const wrapper = createWrapper();
+
+    const actionBarItems = wrapper.findAllComponents(AppActionBarItem);
+    expect(actionBarItems).toHaveLength(2);
+    expect(actionBarItems[0].props('action')).toStrictEqual(actionsMock[0]);
+    expect(actionBarItems[1].props('action')).toStrictEqual(actionsMock[1]);
+    expect(actionBarItems[1].props('context')).toBe(true);
+    expect(actionBarItems[1].text()).toBe(actionsMock[1].name);
+  });
+
+  it('should emit when action bar items emits close', () => {
+    expect.assertions(1);
+
+    const wrapper = createWrapper();
+
+    const actionBarItem = wrapper.findComponent(AppActionBarItem);
+
+    actionBarItem.vm.$emit('close');
+
+    expect(wrapper.emitted()).toHaveProperty('close');
+  });
+});

package/src/modules/components/AppContextMenu/__tests__/shortcut-item.spec.ts

@@ -0,0 +1,29 @@
+import { describe, it, expect, vi } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import { shortcutItem as shortcutItemMock } from '../__mocks__';
+import ShortcutItem from '../ShortcutItem.vue';
+
+import type { Shortcut } from '~components/AppContextMenu';
+
+function createWrapper(shortcut: Shortcut = shortcutItemMock) {
+  return shallowMount(ShortcutItem, { props: { shortcut, item: {} } });
+}
+
+describe('the AppContextMenu ShortcutItem component', () => {
+  it('should display the name', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.text()).toBe(shortcutItemMock.name);
+  });
+
+  it('should execute click event', async () => {
+    expect.assertions(1);
+
+    const clickSpy = vi.fn();
+    const wrapper = createWrapper({ ...shortcutItemMock, click: clickSpy });
+
+    await wrapper.trigger('click');
+
+    expect(clickSpy).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,23 @@
+import type { App } from 'vue';
+import type AppContextMenu from './AppContextMenu.vue';
+
+export type { Action } from '~components/AppActionBar/index.d';
+
+export interface Props {
+  item: unknown;
+  event: PointerEvent | MouseEvent;
+  actions?: Action[];
+  confirmed?: Action['key'];
+}
+
+export interface ContextMenuInstance {
+  ref: AppContextMenu;
+  instance: App;
+  element: HTMLDivElement;
+}
+
+export interface Shortcut {
+  name: string;
+  click: (shortcut: Shortcut, item: unknown, event: MouseEvent | PointerEvent) => boolean | void;
+  copied?: boolean;
+}