@autoafleveren/ui 1.3.2 → 1.3.3

package/src/modules/components/AppDisclosure/__tests__/app-disclosure.spec.ts

@@ -0,0 +1,41 @@
+import { Disclosure } from '@headlessui/vue';
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import AppDisclosure from '../AppDisclosure.vue';
+
+describe('the AppDisclosure component', () => {
+  it('should render the Disclosure component as root element', () => {
+    const wrapper = shallowMount(AppDisclosure);
+
+    const disclosure = wrapper.findComponent(Disclosure);
+    expect(disclosure.exists()).toBe(true);
+    expect(wrapper.element).toStrictEqual(disclosure.element);
+  });
+
+  it('should always render the Disclosure component as div', () => {
+    const wrapper = shallowMount(AppDisclosure);
+
+    const disclosure = wrapper.findComponent(Disclosure);
+    expect(disclosure.props('as')).toBe('div');
+  });
+
+  it('can set the disclosure open by default', () => {
+    const wrapper = shallowMount(AppDisclosure, {
+      props: { defaultOpen: true },
+    });
+
+    const disclosure = wrapper.findComponent(Disclosure);
+    expect(disclosure.props('defaultOpen')).toBe(true);
+  });
+
+  it('should render the default slot content inside the disclosure', () => {
+    const content = '<span data-test-content>Content</span>';
+    const wrapper = shallowMount(AppDisclosure, {
+      slots: { default: content },
+    });
+    expect(wrapper.text()).toBe('Content');
+
+    const disclosure = wrapper.findComponent(Disclosure);
+    expect(disclosure.find('[data-test-content]').exists()).toBe(true);
+  });
+});

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

@@ -0,0 +1,149 @@
+<script lang="ts" setup>
+  import { ref, provide } from 'vue';
+  import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue';
+  import { FontAwesomeIcon, byPrefixAndName } from '~icons';
+
+  import type { DrawerProps } from './index.d';
+
+  withDefaults(defineProps<Omit<DrawerProps, 'router' | 'unique' | 'onOpen' | 'onClose' | 'plugins'>>(), {
+    withBackdrop: true,
+    withFooter: true,
+    preventBackdropClose: false,
+    contentClasses: '',
+    modalClasses: '',
+    panelClasses: '',
+    properties: undefined,
+  });
+
+  const emit = defineEmits<{
+    (event: 'open'): void;
+    (event: 'close', value: { animation: () => Promise<void> }): void;
+  }>();
+
+  const isOpen = ref(false);
+
+  async function open(): Promise<void> {
+    isOpen.value = true;
+
+    emit('open');
+  }
+
+  async function close(): Promise<void> {
+    isOpen.value = false;
+
+    // eslint-disable-next-line no-promise-executor-return
+    emit('close', { animation: async () => new Promise(resolve => setTimeout(resolve, 350)) });
+  }
+
+  defineExpose({ isOpen, open, close });
+
+  provide('isDrawer', true);
+</script>
+
+<template>
+  <TransitionRoot
+    :show="isOpen"
+    as="template"
+  >
+    <Dialog
+      :static="true"
+      class="relative z-10 group/drawer is-drawer"
+      data-test-drawer-dialog
+      @close="() => (preventBackdropClose || !withBackdrop) ? undefined : close()"
+    >
+      <TransitionChild
+        v-if="withBackdrop"
+        as="template"
+        enter="ease-in-out duration-300"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="ease-in-out duration-300"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div
+          class="fixed inset-0 bg-zinc-500/75 transition-opacity"
+          data-test-backdrop
+        ></div>
+      </TransitionChild>
+
+      <div
+        :class="{ 'pointer-events-none': !withBackdrop }"
+        class="fixed inset-0 overflow-hidden"
+      >
+        <div
+          :class="{ 'pointer-events-none': !withBackdrop }"
+          class="absolute inset-0 overflow-hidden"
+        >
+          <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
+            <TransitionChild
+              as="template"
+              enter="transform transition ease-in-out duration-300 sm:duration-500"
+              enter-from="translate-x-full"
+              enter-to="translate-x-0"
+              leave="transform transition ease-in-out duration-300 sm:duration-500"
+              leave-from="translate-x-0"
+              leave-to="translate-x-full"
+            >
+              <DialogPanel
+                :class="panelClasses"
+                class="@container pointer-events-auto relative w-screen max-w-xl 2xl:max-w-4xl"
+              >
+                <TransitionChild
+                  as="template"
+                  enter="ease-in-out duration-300"
+                  enter-from="opacity-0"
+                  enter-to="opacity-100"
+                  leave="ease-in-out duration-300"
+                  leave-from="opacity-100"
+                  leave-to="opacity-0"
+                >
+                  <div class="absolute left-0 bottom-2 z-20 -ml-8 flex sm:-ml-5 sm:-translate-y-2.5 sm:pr-4">
+                    <button
+                      type="button"
+                      class="focus:outline-hidden cursor-pointer z-40 p-2 relative rounded-full bg-primary text-white drop-shadow-xs
+                        hover:bg-primary-active"
+                      @click="close"
+                    >
+                      <span class="absolute -inset-1.5"></span>
+
+                      <span class="sr-only">Close panel</span>
+
+                      <FontAwesomeIcon
+                        :icon="byPrefixAndName.far?.['chevron-right']"
+                        class="size-6"
+                        aria-hidden="true"
+                      />
+                    </button>
+                  </div>
+                </TransitionChild>
+
+                <div
+                  :class="modalClasses"
+                  class="flex h-full flex-col overflow-y-scroll rounded-l-[40px] bg-white pt-8 mb-8 shadow-[-6px_0px_6px_#20202010]"
+                >
+                  <div
+                    :class="`relative mt-6 flex-1 px-2 sm:px-6 ${contentClasses}`"
+                    data-test-modal-content
+                  >
+                    <slot>
+                      <template v-if="typeof content === 'string'">
+                        {{ content }}
+                      </template>
+
+                      <Component
+                        :is="content"
+                        v-else
+                        v-bind="properties"
+                      />
+                    </slot>
+                  </div>
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>

package/src/modules/components/AppDrawer/__tests__/app-drawer.spec.ts

@@ -0,0 +1,120 @@
+import { describe, it, expect } from 'vitest';
+import { flushPromises, shallowMount } from '@vue/test-utils';
+import { Dialog, TransitionChild, TransitionRoot } from '@headlessui/vue';
+import { AppDrawer } from '~components';
+import HeadlessUiTransitionRootStub from '~/tests/stubs/HeadlessUiTransitionRootStub';
+import HeadlessUiDialogStub from '~/tests/stubs/HeadlessUiDialogStub';
+import HeadlessUiTransitionChildStub from '~/tests/stubs/HeadlessUiTransitionChildStub';
+
+import type { DrawerProps } from '../index.d';
+
+function createWrapper(props: DrawerProps) {
+  return shallowMount(AppDrawer, {
+    props,
+    global: {
+      stubs: {
+        Dialog: HeadlessUiDialogStub,
+        TransitionRoot: HeadlessUiTransitionRootStub,
+        TransitionChild: HeadlessUiTransitionChildStub,
+      },
+    },
+  });
+}
+
+describe('generic AppDrawer component', () => {
+  it('should display a drawer when content is set', () => {
+    const wrapper = createWrapper({ content: 'content' });
+
+    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 content', () => {
+    const content = 'This is test content';
+
+    const wrapper = createWrapper({ content });
+
+    const modalContent = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .find('[data-test-modal-content]');
+
+    expect(modalContent.text()).toStrictEqual(content);
+  });
+
+  it('should render the content as text by default', () => {
+    const content = 'This is test content';
+
+    const wrapper = createWrapper({ content });
+
+    const modalContent = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .find('[data-test-modal-content]');
+
+    expect(modalContent.text()).toBe(content);
+  });
+
+  it('should close drawer when backdrop is clicked and preventBackdropClose is "false"', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper({
+      content: 'BlaBlaBla',
+      preventBackdropClose: false,
+    });
+
+    const dialog = wrapper.findComponent(Dialog);
+    expect(dialog.exists()).toBe(true);
+
+    dialog.vm.$emit('close');
+
+    await flushPromises();
+
+    const closeDrawerEmit = wrapper.emitted<Event[]>('close');
+
+    expect(closeDrawerEmit).toBeDefined();
+    expect(closeDrawerEmit).toHaveLength(1);
+  });
+
+  it('should not render backdrop when withBackdrop is "false"', () => {
+    const wrapper = createWrapper({
+      content: 'BlaBlaBla',
+      withBackdrop: false,
+    });
+
+    expect(wrapper.find('[data-test-backdrop]').exists()).toBe(false);
+  });
+
+  it('should render backdrop when withBackdrop is "true"', () => {
+    const wrapper = createWrapper({
+      content: 'BlaBlaBla',
+      withBackdrop: true,
+    });
+
+    expect(wrapper.find('[data-test-backdrop]').exists()).toBe(true);
+  });
+
+  it('should not close drawer when backdrop is clicked with \'preventBackdropClose = true\'', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper({
+      content: 'BlaBlaBla',
+      preventBackdropClose: true,
+    });
+
+    const dialog = wrapper.findComponent(Dialog);
+    expect(dialog.exists()).toBe(true);
+
+    dialog.vm.$emit('close');
+
+    await flushPromises();
+
+    const closeDrawerEmit = wrapper.emitted<Event[]>('close');
+
+    expect(closeDrawerEmit).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,27 @@
+import type { Component, Plugin } from 'vue';
+import type { RouteRecordRaw } from 'vue-router';
+import type { AppDrawer } from '~components';
+
+export type OnClose = () => unknown;
+export type OnOpen = () => unknown;
+
+export interface DrawerProps {
+  unique?: boolean;
+  withBackdrop?: boolean;
+  preventBackdropClose?: boolean;
+  contentClasses?: string;
+  modalClasses?: string;
+  panelClasses?: string;
+  content?: string | Component;
+  properties?: Record<string, unknown>;
+  plugins?: Plugin[];
+  onClose?: OnClose;
+  onOpen?: OnOpen;
+  router?: RouteRecordRaw;
+}
+
+export interface ModalInstance {
+  ref: AppDrawer;
+  instance: App;
+  element: HTMLDivElement;
+}

package/src/modules/components/AppDropdownButton/AppDropdownButton.vue

@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { Menu, MenuButton, MenuItems } from '@headlessui/vue';
+  import { ChevronDownIcon } from '~icons';
+  import { AppButton } from '~components';
+  import { useComputedPosition } from '~composables';
+  import AppDropdownItem from './AppDropdownItem.vue';
+
+  import type { Props } from './index.d';
+
+  // eslint-disable-next-line vue/no-unused-properties
+  const props = withDefaults(defineProps<Props>(), {
+    horizontalAlign: 'left',
+    openDirection: 'down',
+    teleport: false,
+  });
+
+  const button = ref<typeof MenuButton>();
+  const dropdown = ref<typeof MenuItems>();
+  const isActive = ref(false);
+
+  if (props.teleport) {
+    const { isActive: computedActiveState } = useComputedPosition(button, dropdown);
+
+    watch(computedActiveState, value => {
+      isActive.value = value;
+    });
+  }
+
+  // eslint-disable-next-line @programic/vue-script-setup-newlines-between-groups
+  defineExpose({ isActive });
+</script>
+
+<template>
+  <div class="relative inline-block text-left">
+    <Menu>
+      <MenuButton ref="button">
+        <AppButton v-bind="{ ...$props, class: buttonClasses }">
+          <slot></slot>
+
+          <template #trailingIcon>
+            <slot name="trailingIcon">
+              <ChevronDownIcon />
+            </slot>
+          </template>
+        </AppButton>
+      </MenuButton>
+
+      <Teleport
+        :disabled="!teleport"
+        to="body"
+      >
+        <MenuItems
+          ref="dropdown"
+          :unmount="false"
+          :class="{
+            'right-0 origin-top-right': horizontalAlign === 'right',
+            'left-0 origin-top-left': horizontalAlign === 'left',
+            'bottom-full mb-2': openDirection === 'up',
+          }"
+          class="absolute z-10 mt-4 w-48 rounded-lg bg-secondary p-2 drop-shadow-card focus:outline-hidden"
+          role="menu"
+          aria-orientation="vertical"
+          aria-labelledby="menu-button"
+          tabindex="-1"
+        >
+          <template
+            v-for="item in dropdownItems"
+            :key="item.label"
+          >
+            <AppDropdownItem v-bind="item">
+              <slot
+                :name="`item-${item.name}`"
+                :item="item"
+              ></slot>
+            </AppDropdownItem>
+          </template>
+        </MenuItems>
+      </Teleport>
+    </Menu>
+  </div>
+</template>

package/src/modules/components/AppDropdownButton/AppDropdownItem.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+  import { computed, ref, useTemplateRef } from 'vue';
+  import { onClickOutside } from '@vueuse/core';
+  import { MenuItem } from '@headlessui/vue';
+  import { RouterLink } from 'vue-router';
+  import { WarningIcon } from '~icons';
+  import { domClassesPerType } from '.';
+
+  import type { DropdownItem, Type } from './index.d';
+
+  // eslint-disable-next-line vue/no-unused-properties
+  const props = withDefaults(defineProps<DropdownItem>(), {
+    confirm: false,
+    type: 'default',
+  });
+
+  const dropdownItemElement = useTemplateRef<HTMLDivElement>('dropdownItem');
+  const confirmed = ref(false);
+
+  const icon = computed(() => ((props.confirm && confirmed.value) ? WarningIcon : props.icon));
+  const itemComponent = computed((): typeof RouterLink | string => (props.to ? RouterLink : 'div'));
+  const type = computed((): Type => props.type ?? 'default');
+
+  function onItemClick(event: MouseEvent): void {
+    if ((props.confirm && !confirmed.value) || props.disabled) {
+      event.preventDefault();
+
+      confirmed.value = true;
+      return;
+    }
+
+    confirmed.value = false;
+
+    props.onClick?.();
+  }
+
+  onClickOutside(dropdownItemElement, () => {
+    confirmed.value = false;
+  });
+</script>
+
+<template>
+  <div ref="dropdownItem">
+    <MenuItem>
+      <Component
+        :is="itemComponent"
+        :to="to"
+        :class="[...domClassesPerType[type], { 'cursor-not-allowed!': disabled }]"
+        class="flex h-10 cursor-pointer items-center rounded-lg px-2.5 py-4 text-base hover:bg-zinc-600"
+        data-test-dropdown-item
+        @click="onItemClick"
+      >
+        <slot>
+          <Component
+            :is="icon"
+            v-if="icon"
+            :class="iconClasses"
+            class="mr-2 size-4"
+            data-test-icon
+          />
+
+          {{ label }}
+        </slot>
+      </Component>
+    </MenuItem>
+  </div>
+</template>

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

@@ -0,0 +1,25 @@
+import { TrashIcon } from '~icons';
+
+import type { DropdownItem } from '../index.d';
+
+export const dropdownItems: DropdownItem[] = [
+  {
+    label: 'Item 1',
+  },
+  {
+    label: 'Item 2',
+    to: { name: 'home' },
+    icon: TrashIcon,
+    iconClasses: 'text-red-500',
+  },
+  {
+    label: 'Item 3',
+    icon: TrashIcon,
+    name: 'slot',
+  },
+  {
+    label: 'Item 4',
+    icon: TrashIcon,
+    disabled: true,
+  },
+];

package/src/modules/components/AppDropdownButton/__tests__/app-dropdown-button.spec.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import { MenuItems } from '@headlessui/vue';
+import { AppButton } from '~components';
+import AppDropdownButton from '../AppDropdownButton.vue';
+import AppDropdownItem from '../AppDropdownItem.vue';
+import { dropdownItems as dropdownItemsMock } from '../__mocks__';
+
+import type { VueWrapper } from '@vue/test-utils';
+import type { DropdownItem, Props } from '../index.d';
+
+function createWrapper(
+  dropdownItems: DropdownItem[] = [...dropdownItemsMock],
+  props: Props[] = [],
+): VueWrapper<InstanceType<typeof AppDropdownButton>> {
+  return shallowMount(AppDropdownButton, {
+    slots: { default: 'Button text' },
+    // @ts-expect-error prop destruction not work correctly
+    props: {
+      dropdownItems,
+      ...props,
+    },
+  });
+}
+
+describe('the AppDropdownButton component', () => {
+  it('renders the button with props', async () => {
+    expect.assertions(4);
+
+    const wrapper = createWrapper();
+
+    let button = wrapper.findComponent(AppButton);
+    expect(button.exists()).toBe(true);
+    expect(button.props('colorType')).toBe('primary');
+    expect(button.text()).toBe('Button text');
+
+    await wrapper.setProps({ colorType: 'secondary' });
+
+    button = wrapper.findComponent(AppButton);
+    expect(button.props('colorType')).toBe('secondary');
+  });
+
+  it('renders the dropdown menu', async () => {
+    expect.assertions(8);
+
+    const wrapper = createWrapper();
+
+    let menuItems = wrapper.findComponent(MenuItems);
+    expect(menuItems.exists()).toBe(true);
+    expect(menuItems.classes('left-0')).toBe(true);
+    expect(menuItems.classes('right-0')).toBe(false);
+    expect(menuItems.classes('bottom-full')).toBe(false);
+
+    await wrapper.setProps({ horizontalAlign: 'right', openDirection: 'up' });
+
+    menuItems = wrapper.findComponent(MenuItems);
+    expect(menuItems.exists()).toBe(true);
+    expect(menuItems.classes('left-0')).toBe(false);
+    expect(menuItems.classes('right-0')).toBe(true);
+    expect(menuItems.classes('bottom-full')).toBe(true);
+  });
+
+  it('renders the dropdown menu items', () => {
+    const wrapper = createWrapper();
+
+    const items = wrapper.findAllComponents(AppDropdownItem);
+    expect(items).toHaveLength(4);
+
+    expect(items[0].props('label')).toBe(dropdownItemsMock[0].label);
+    expect(items[1].props('label')).toBe(dropdownItemsMock[1].label);
+
+    expect(items[0].props('icon')).toBeUndefined();
+    expect(items[1].props('icon')).toStrictEqual(dropdownItemsMock[1].icon);
+
+    expect(items[1].props('onClick')).toStrictEqual(dropdownItemsMock[1].onClick);
+    expect(items[2].props('onClick')).toStrictEqual(dropdownItemsMock[2].onClick);
+
+    expect(items[2].props('disabled')).toBe(false);
+    expect(items[3].props('disabled')).toBe(dropdownItemsMock[3].disabled);
+  });
+});