@autoafleveren/ui 1.3.2 → 1.4.0

package/src/modules/components/AppModal/AppModal.vue

@@ -0,0 +1,261 @@
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import { Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
+  import { onKeyStroke } from '@vueuse/core';
+  import { AppButton } from '~components';
+  import { FontAwesomeIcon, byPrefixAndName } from '~icons';
+
+  import type { Component } from 'vue';
+  import type { ModalProps } from './index.d';
+
+  const props = withDefaults(defineProps<Omit<ModalProps, 'onOpen' | 'onClose' | 'plugins'>>(), {
+    submitButtonText: 'Opslaan',
+    cancelButtonText: 'Annuleren',
+    withBackdrop: true,
+    withFooter: true,
+    preventBackdropClose: false,
+    preventBackdropCloseOnLoading: true,
+    contentClasses: '',
+    modalClasses: '',
+    title: '',
+    content: '',
+    properties: undefined,
+  });
+
+  const emit = defineEmits<{
+    (event: 'open'): void;
+    (event: 'close', value: { animation: () => Promise<void> }): void;
+    (event: 'cancel'): void;
+    (event: 'submit', value: FormData): void;
+  }>();
+
+  const isOpen = ref(false);
+  const form = ref<HTMLFormElement>();
+  const modalLoading = ref(false);
+  const cancelLoading = ref(false);
+  const contentRef = ref<Component>();
+
+  const preventBackdropCloseComputed = computed(() => {
+    return props.preventBackdropClose
+      || (props.preventBackdropCloseOnLoading && (modalLoading.value || cancelLoading.value));
+  });
+
+  async function open(): Promise<void> {
+    isOpen.value = true;
+
+    emit('open');
+  }
+
+  async function close(): Promise<void> {
+    cancelLoading.value = true;
+
+    isOpen.value = false;
+
+    // eslint-disable-next-line no-promise-executor-return
+    emit('close', { animation: async () => new Promise(resolve => setTimeout(resolve, 350)) });
+
+    cancelLoading.value = false;
+  }
+
+  async function cancel(): Promise<void> {
+    // @ts-expect-error cancel not always exists
+    const returnValue1 = await contentRef.value?.cancel?.();
+    const returnValue2 = await props.onCancel?.();
+
+    if (props.onCancel === undefined) {
+      emit('cancel');
+    }
+
+    if (returnValue1 === false || returnValue2 === false) {
+      return;
+    }
+
+    await close();
+  }
+
+  async function submit(): Promise<void> {
+    modalLoading.value = true;
+
+    const formData = new FormData(form.value);
+
+    // @ts-expect-error submit not always exists
+    await contentRef.value?.submit?.(formData);
+    await props.onSubmit?.(formData);
+
+    modalLoading.value = false;
+  }
+
+  defineExpose({
+    isOpen,
+    open,
+    close,
+    submit,
+  });
+
+  onKeyStroke('Escape', close, { dedupe: true });
+</script>
+
+<template>
+  <TransitionRoot
+    :show="isOpen"
+    as="template"
+  >
+    <Dialog
+      as="div"
+      class="app-modal-dialog fixed inset-0 z-250 overflow-y-auto"
+      data-test-modal-dialog
+      @close="() => !preventBackdropCloseComputed ? close() : undefined"
+    >
+      <div class="flex min-h-screen items-center justify-center text-center">
+        <TransitionChild
+          v-if="withBackdrop"
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <DialogOverlay class="fixed inset-0 z-40 bg-black/20 backdrop-blur-xs transition-opacity" />
+        </TransitionChild>
+
+        <span
+          class="inline-block h-screen align-middle"
+          aria-hidden="true"
+        >
+          &#8203;
+        </span>
+
+        <TransitionChild
+          as="template"
+          enter="ease-in-out duration-300"
+          enter-from="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
+          enter-to="opacity-100 translate-y-0 md:scale-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100 translate-y-0 md:scale-100"
+          leave-to="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
+        >
+          <div
+            :class="`relative z-50 mx-auto inline-block w-full max-w-2xl rounded-2xl p-4
+              text-left align-middle transition-all md:max-w-[70vw] ${modalClasses}`"
+          >
+            <div class="rounded-2xl bg-zinc-100 drop-shadow-card">
+              <div class="flex flex-col items-center space-y-5">
+                <div class="w-full text-center">
+                  <DialogTitle
+                    as="h3"
+                    class="flex justify-between px-8 pt-8 text-2xl font-bold leading-6 text-zinc-900"
+                  >
+                    <slot name="title">
+                      {{ title }}
+                    </slot>
+
+                    <FontAwesomeIcon
+                      :icon="byPrefixAndName.far?.xmark"
+                      class="size-5 cursor-pointer"
+                      @click="close"
+                    />
+                  </DialogTitle>
+
+                  <div
+                    :class="`my-6 px-8 w-full text-center text-sm text-zinc-600 ${contentClasses}`"
+                    data-test-modal-content
+                  >
+                    <form ref="form">
+                      <slot>
+                        <template v-if="typeof content === 'string'">
+                          {{ content }}
+                        </template>
+
+                        <Component
+                          :is="content"
+                          v-else
+                          ref="contentRef"
+                          v-bind="properties"
+                          @close="close"
+                          @submit="submit"
+                          @cancel="cancel"
+                        />
+                      </slot>
+                    </form>
+                  </div>
+                </div>
+              </div>
+
+              <div
+                v-if="withFooter"
+                class="w-full rounded-b-xl bg-white p-8"
+              >
+                <div class="ml-auto flex w-fit flex-row-reverse items-center">
+                  <AppButton
+                    v-if="submitButtonText"
+                    :disabled="modalLoading || cancelLoading"
+                    :loading="modalLoading"
+                    type="button"
+                    color-type="primary"
+                    class="ml-6 justify-center"
+                    @click="submit"
+                  >
+                    <template
+                      v-if="submitButtonTrailingIcon"
+                      #trailingIcon
+                    >
+                      <Component
+                        :is="submitButtonTrailingIcon"
+                        class="stroke-2"
+                      />
+                    </template>
+
+                    <template
+                      v-if="submitButtonLeadingIcon"
+                      #leadingIcon
+                    >
+                      <Component
+                        :is="submitButtonLeadingIcon"
+                        class="stroke-2"
+                      />
+                    </template>
+
+                    {{ submitButtonText }}
+                  </AppButton>
+
+                  <AppButton
+                    v-if="cancelButtonText"
+                    :disabled="modalLoading || cancelLoading"
+                    :loading="cancelLoading"
+                    color-type="plain"
+                    class="justify-center text-zinc-900!"
+                    @click="cancel"
+                  >
+                    <template
+                      v-if="cancelButtonTrailingIcon"
+                      #trailingIcon
+                    >
+                      <Component
+                        :is="cancelButtonTrailingIcon"
+                        class="stroke-2"
+                      />
+                    </template>
+
+                    <template
+                      v-if="cancelButtonLeadingIcon"
+                      #leadingIcon
+                    >
+                      <Component
+                        :is="cancelButtonLeadingIcon"
+                        class="stroke-2"
+                      />
+                    </template>
+
+                    {{ cancelButtonText }}
+                  </AppButton>
+                </div>
+              </div>
+            </div>
+          </div>
+        </TransitionChild>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>

package/src/modules/components/AppModal/__tests__/app-modal.spec.ts

@@ -0,0 +1,282 @@
+import { describe, it, expect, vi } from 'vitest';
+import { flushPromises, shallowMount } from '@vue/test-utils';
+import { Dialog, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
+import { AppButton, AppModal } from '~components';
+import HeadlessUiTransitionRootStub from '~/tests/stubs/HeadlessUiTransitionRootStub';
+import HeadlessUiDialogStub from '~/tests/stubs/HeadlessUiDialogStub';
+import HeadlessUiTransitionChildStub from '~/tests/stubs/HeadlessUiTransitionChildStub';
+
+import type { ModalProps } from '../index.d';
+
+function createWrapper(props: ModalProps) {
+  return shallowMount(AppModal, {
+    props,
+    global: {
+      stubs: {
+        Dialog: HeadlessUiDialogStub,
+        TransitionRoot: HeadlessUiTransitionRootStub,
+        TransitionChild: HeadlessUiTransitionChildStub,
+      },
+    },
+  });
+}
+
+describe('generic AppModal component', () => {
+  it('should display a modal 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 titleWrapper = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findComponent(DialogTitle);
+
+    expect(titleWrapper.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 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({
+      title: 'This is a test',
+      content,
+    });
+
+    const modalContent = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .find('[data-test-modal-content]');
+
+    expect(modalContent.text()).toBe(content);
+  });
+
+  it('shouldn\'t render the submit button when submitButtonText is set to null', () => {
+    const content = 'This is test content';
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content,
+      submitButtonText: null,
+    });
+
+    const buttons = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findAllComponents(AppButton);
+
+    expect(buttons).toHaveLength(1);
+    expect(buttons[0].text()).toBe('Annuleren');
+  });
+
+  it('shouldn\'t render the cancel button when cancelButtonText is set to null', () => {
+    const content = 'This is test content';
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content,
+      cancelButtonText: null,
+    });
+
+    const buttons = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findAllComponents(AppButton);
+
+    expect(buttons).toHaveLength(1);
+    expect(buttons[0].text()).toBe('Opslaan');
+  });
+
+  it('should be able to set a custom text in submit button', () => {
+    const submitButtonText = 'huts';
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'Bla',
+      submitButtonText,
+      cancelButtonText: 'cancel button',
+    });
+
+    const button = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findAllComponents(AppButton)[0];
+
+    expect(button.exists()).toBe(true);
+    expect(button.text()).toStrictEqual(submitButtonText);
+  });
+
+  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',
+      submitButtonText: '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 emit a submit when submit button is pressed', async () => {
+    expect.assertions(2);
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const submitSpy = vi.fn().mockResolvedValue(undefined);
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'Bla',
+      submitButtonText: 'confirm',
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      onSubmit: submitSpy,
+    });
+
+    const button = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findAllComponents(AppButton)[0];
+
+    expect(submitSpy).toHaveBeenCalledTimes(0);
+
+    await button.trigger('click');
+
+    expect(submitSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should emit a cancel when cancel button is pressed', async () => {
+    expect.assertions(1);
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'Bla',
+    });
+
+    const cancelButton = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findAllComponents(AppButton)[1];
+
+    await cancelButton.trigger('click');
+
+    const emitted = wrapper.emitted<Event[]>();
+
+    await flushPromises();
+
+    expect(emitted).toHaveProperty('cancel');
+  });
+
+  it('should show spinner when confirming', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'Bla',
+      submitButtonText: 'confirm',
+      cancelButtonText: 'confirm',
+      onSubmit: async () => new Promise(resolve => setTimeout(resolve, 250)),
+    });
+
+    // @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);
+
+    const button = wrapper.findComponent(TransitionRoot)
+      .findComponent(Dialog)
+      .findAllComponents(TransitionChild)[1]
+      .findAllComponents(AppButton)[0];
+
+    await button.trigger('click');
+
+    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 with \'preventBackdropClose = true\'', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper({
+      title: 'This is a test',
+      content: 'BlaBlaBla',
+      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/AppModal/index.d.ts

@@ -0,0 +1,36 @@
+import type { Component, Plugin } from 'vue';
+import type { AppModal } from '~components';
+
+export type OnSubmit = (data: FormData) => unknown;
+export type OnCancel = () => unknown;
+export type OnClose = () => unknown;
+export type OnOpen = () => unknown;
+
+export interface ModalProps {
+  title: string;
+  submitButtonText?: string | null;
+  submitButtonTrailingIcon?: Component;
+  submitButtonLeadingIcon?: Component;
+  cancelButtonText?: string | null;
+  cancelButtonTrailingIcon?: Component;
+  cancelButtonLeadingIcon?: Component;
+  withBackdrop?: boolean;
+  withFooter?: boolean;
+  preventBackdropClose?: boolean;
+  preventBackdropCloseOnLoading?: boolean;
+  contentClasses?: string;
+  modalClasses?: string;
+  content?: string | Component;
+  properties?: Record<string, unknown>;
+  plugins?: Plugin[];
+  onSubmit?: OnSubmit;
+  onCancel?: OnCancel;
+  onClose?: OnClose;
+  onOpen?: OnOpen;
+}
+
+export interface ModalInstance {
+  ref: AppModal;
+  instance: App;
+  element: HTMLDivElement;
+}

package/src/modules/components/AppNavigationMenu/AppNavigationMenu.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+  import { useNavigation } from '~composables';
+  import { ChevronRightIcon, ChevronLeftIcon } from '~icons';
+  import MainMenuMobile from './Mobile.vue';
+  import NavigationItem from './NavigationItem.vue';
+  import SupportItem from './SupportItem.vue';
+
+  const { navigationItems, mainMenuOpen, expanded, toggleExpand, contactIcon } = useNavigation();
+</script>
+
+<template>
+  <div
+    class="relative before:absolute before:-right-4 before:top-0 before:z-[-1] before:size-4 before:bg-secondary
+      after:absolute after:-right-4 after:bottom-0 after:z-[-1] after:size-4 after:bg-secondary"
+  >
+    <aside
+      :class="{
+        'flex-col px-3 md:w-20!': mainMenuOpen,
+        'md:w-72!': expanded,
+      }"
+      :aria-expanded="expanded"
+      class="app-navigation-menu group sticky top-0 hidden h-screen w-0 justify-center py-5 transition-all duration-500
+        before:absolute before:-right-8  before:top-0 before:size-8 before:bg-zinc-100 after:absolute after:-right-8
+        after:bottom-0 after:size-8 after:bg-zinc-100 md:flex md:bg-secondary"
+      data-test-main-menu
+    >
+      <ul
+        :class="{ 'mx-auto': !expanded }"
+        class="mb-auto transition-all duration-500 z-10"
+      >
+        <li
+          v-for="item in navigationItems.filter(item => item.bottom !== true && item.visible !== false)"
+          :key="item.name"
+          data-test-top-navigation-item
+        >
+          <NavigationItem
+            :item="item"
+            :link-classes="item.linkClasses"
+          />
+        </li>
+      </ul>
+
+      <ul
+        :class="{ 'mx-auto': !expanded }"
+        class="mt-auto pb-10 transition-all duration-500"
+      >
+        <li
+          v-for="item in navigationItems.filter(item => item.bottom && item.visible !== false)"
+          :key="item.name"
+          data-test-bottom-navigation-item
+        >
+          <NavigationItem
+            :item="item"
+            :link-classes="item.linkClasses"
+          />
+        </li>
+
+        <li v-if="contactIcon">
+          <SupportItem class="static!" />
+        </li>
+      </ul>
+
+      <div
+        class="absolute bottom-2 right-5 hidden size-10 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-secondary
+          transition-all duration-200 md:flex"
+        @click="toggleExpand"
+      >
+        <div
+          :class="{ '-translate-x-4!': !expanded }"
+          class="flex translate-x-4 space-x-4 transition-transform duration-700"
+        >
+          <ChevronLeftIcon class="size-5 text-zinc-400 hover:text-white" />
+
+          <ChevronRightIcon class="size-5 text-zinc-400 hover:text-white" />
+        </div>
+      </div>
+    </aside>
+
+    <MainMenuMobile />
+  </div>
+</template>
+
+<style scoped>
+  @reference "./../../../css/main.css";
+
+  .app-navigation-menu:before {
+    border-top-left-radius: 50%;
+    box-shadow: -1rem 0 0 0 var(--color-secondary);
+  }
+
+  .app-navigation-menu:after {
+    border-bottom-left-radius: 50%;
+    box-shadow: -1rem 0 0 0 var(--color-secondary);
+  }
+</style>