@autoafleveren/ui 1.3.2 → 1.4.0

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

@@ -0,0 +1,108 @@
+import { describe, it, expect, vi } from 'vitest';
+import { flushPromises, shallowMount } from '@vue/test-utils';
+import { TrashIcon } from '~icons';
+import { dropdownItems as dropdownItemsMock } from '../__mocks__';
+import AppDropdownItem from '../AppDropdownItem.vue';
+
+import type { VueWrapper } from '@vue/test-utils';
+import type { DropdownItem } from '../index.d';
+
+function createWrapper(
+  dropdownItem: DropdownItem = dropdownItemsMock[0],
+  onClick: () => void = vi.fn(),
+  confirm: boolean = false,
+): VueWrapper<InstanceType<typeof AppDropdownItem>> {
+  return shallowMount(AppDropdownItem, {
+    props: { ...dropdownItem, onClick, confirm },
+  });
+}
+
+describe('the AppDropdownItem component', () => {
+  it('renders the dropdown item', async () => {
+    expect.assertions(4);
+
+    const wrapper = createWrapper();
+
+    let dropdownItem = wrapper.find('[data-test-dropdown-item]');
+    expect(dropdownItem.exists()).toBe(true);
+    expect(dropdownItem.element.tagName).toBe('DIV');
+
+    await wrapper.setProps({ to: { name: 'home' } });
+
+    dropdownItem = wrapper.find('[data-test-dropdown-item]');
+    expect(dropdownItem.exists()).toBe(true);
+    expect(dropdownItem.element.tagName).toBe('A');
+  });
+
+  it('can disable an item', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper();
+
+    let dropdownItem = wrapper.find('[data-test-dropdown-item]');
+    expect(dropdownItem.classes('cursor-not-allowed!')).toBe(false);
+
+    await wrapper.setProps({ disabled: true });
+
+    dropdownItem = wrapper.find('[data-test-dropdown-item]');
+    expect(dropdownItem.classes('cursor-not-allowed!')).toBe(true);
+  });
+
+  it('can can click on a item', async () => {
+    expect.assertions(2);
+
+    const clickMock = vi.fn();
+    const wrapper = createWrapper(dropdownItemsMock[0], clickMock);
+
+    let dropdownItem = wrapper.find('[data-test-dropdown-item]');
+
+    await dropdownItem.trigger('click');
+
+    expect(clickMock).toHaveBeenCalledTimes(1);
+
+    await wrapper.setProps({ disabled: true });
+
+    dropdownItem = wrapper.find('[data-test-dropdown-item]');
+
+    await dropdownItem.trigger('click');
+
+    expect(clickMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders an icon when defined', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper();
+
+    let icon = wrapper.find('[data-test-icon]');
+    expect(icon.exists()).toBe(false);
+
+    await wrapper.setProps({ icon: TrashIcon, iconClasses: 'text-red-500' });
+
+    icon = wrapper.find('[data-test-icon]');
+    expect(icon.exists()).toBe(true);
+    expect(icon.classes('text-red-500')).toBe(true);
+  });
+});
+
+it('can confirm when click and confirm is true', async () => {
+  expect.assertions(5);
+
+  const clickMock = vi.fn();
+  const wrapper = createWrapper(dropdownItemsMock[1], clickMock, true);
+  const item = wrapper.find('[data-test-dropdown-item]');
+
+  expect(clickMock).toHaveBeenCalledTimes(0);
+
+  await item.trigger('click');
+
+  expect(clickMock).toHaveBeenCalledTimes(0);
+  expect((wrapper.vm as unknown as typeof AppDropdownItem).confirmed).toBe(true);
+
+  await item.trigger('click');
+
+  await flushPromises();
+
+  expect(clickMock).toHaveBeenCalledTimes(1);
+  expect((wrapper.vm as unknown as typeof AppDropdownItem).confirmed).toBe(false);
+});

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

@@ -0,0 +1,26 @@
+import type { RouteLocationRaw } from 'vue-router';
+import type { Component } from 'vue';
+import type { Props as ButtonProps } from '../AppButton/index.d';
+import type { types } from '.';
+
+export type Type = typeof types[number];
+
+export interface Props extends ButtonProps {
+  dropdownItems: DropdownItem[];
+  horizontalAlign?: 'left' | 'right';
+  openDirection?: 'up' | 'down';
+  buttonClasses?: string;
+  teleport?: boolean;
+}
+
+export interface DropdownItem {
+  label: string;
+  name?: string;
+  disabled?: boolean;
+  to?: RouteLocationRaw;
+  icon?: Component;
+  iconClasses?: string;
+  onClick?: () => void;
+  confirm?: boolean;
+  type?: Type;
+}

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

@@ -0,0 +1,8 @@
+import type { Type } from './index.d';
+
+export const types = ['default', 'danger'] as const;
+
+export const domClassesPerType: Record<Type, string[]> = {
+  default: ['text-white'],
+  danger: ['text-red-500'],
+};

package/src/modules/components/AppError/AppError.vue

@@ -0,0 +1,233 @@
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import {
+    Dialog,
+    DialogOverlay,
+    DialogTitle,
+    TransitionChild,
+    TransitionRoot,
+  } from '@headlessui/vue';
+  import { SuccessIcon, ErrorIcon } from '~icons';
+  import { AppButton } from '~components';
+
+  import type { Component } from 'vue';
+  import type { ErrorProps } from './index.d';
+
+  const props = withDefaults(defineProps<ErrorProps>(), {
+    type: 'default',
+    confirmButtonText: '',
+    cancelButtonText: '',
+    withBackdrop: true,
+    preventBackdropClose: true,
+    icon: undefined,
+    html: false,
+    title: '',
+    content: '',
+    extendedIconDomClasses: '',
+  });
+
+  const emit = defineEmits<{
+    (event: 'close', value: boolean): void;
+    (event: 'confirmed', value: true): void;
+  }>();
+
+  const isOpen = ref(true);
+  const confirmLoading = ref(false);
+  const cancelLoading = ref(false);
+
+  const dynamicIconProperties = computed((): Component | string | undefined => {
+    if (!props.icon && props.type === 'error') {
+      return ErrorIcon;
+    }
+
+    if (!props.icon && props.type === 'success') {
+      return SuccessIcon;
+    }
+
+    return props.icon;
+  });
+  const iconDomClasses = computed((): string[] => {
+    const defaultClasses = props.type === 'error' ? 'text-red-500' : 'text-green-500';
+
+    return [defaultClasses, props.extendedIconDomClasses];
+  });
+
+  async function close(confirmed: boolean): Promise<void> {
+    if (confirmed && typeof props.onConfirm === 'function') {
+      confirmLoading.value = true;
+
+      await Promise.resolve(props.onConfirm());
+    } else if (!confirmed && typeof props.onCancel === 'function') {
+      cancelLoading.value = true;
+
+      await Promise.resolve(props.onCancel());
+    }
+
+    isOpen.value = false;
+    emit('close', confirmed);
+  }
+</script>
+
+<template>
+  <TransitionRoot
+    :show="isOpen"
+    as="template"
+  >
+    <Dialog
+      as="div"
+      class="app-error-dialog fixed inset-0 top-16 z-50 overflow-y-auto md:left-20 md:top-0"
+      data-test-error-dialog
+      @close="() => !preventBackdropClose ? close(false) : undefined"
+    >
+      <div class="flex min-h-screen px-4 pb-20 pt-4 text-center md:items-center md:justify-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="app-error-dialog-overlay fixed inset-0 top-16 z-40 rounded-l-2xl bg-zinc-100 transition-opacity
+              md:left-20 md:top-0"
+          />
+        </TransitionChild>
+
+        <span
+          class="hidden md:inline-block md:h-screen md: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-lg overflow-hidden
+              text-left align-bottom transition-all md:my-8 md:max-w-2xl md:align-middle"
+          >
+            <div class="rounded-2xl bg-white p-10 drop-shadow-card">
+              <div class="flex flex-col items-center space-y-5">
+                <div
+                  v-if="dynamicIconProperties"
+                  class="mx-auto flex size-12 shrink-0 items-center justify-center rounded-full"
+                >
+                  <Component
+                    :is="dynamicIconProperties"
+                    :class="iconDomClasses"
+                    class="size-full"
+                    data-test-error-icon
+                  />
+                </div>
+
+                <div class="mt-3 text-center">
+                  <DialogTitle
+                    as="h3"
+                    class="text-2xl font-bold leading-6 text-zinc-900"
+                  >
+                    <slot name="title">
+                      {{ title }}
+                    </slot>
+                  </DialogTitle>
+
+                  <div
+                    class="mt-3 w-full px-10 text-center text-sm text-zinc-600"
+                    data-test-error-content
+                  >
+                    <slot>
+                      <div
+                        v-if="html"
+                        class="app-error-html-content"
+                        v-html="content"
+                      ></div>
+
+                      <p v-else>
+                        {{ content }}
+                      </p>
+                    </slot>
+                  </div>
+                </div>
+              </div>
+
+              <div class="mx-auto flex w-fit flex-col space-y-4 pt-10">
+                <AppButton
+                  v-if="confirmButtonText"
+                  :bordered="true"
+                  :disabled="confirmLoading || cancelLoading"
+                  :loading="confirmLoading"
+                  type="button"
+                  color-type="primary"
+                  class="justify-center"
+                  @click="() => close(true)"
+                >
+                  <template
+                    v-if="confirmButtonTrailingIcon"
+                    #trailingIcon
+                  >
+                    <Component
+                      :is="confirmButtonTrailingIcon"
+                      class="stroke-2"
+                    />
+                  </template>
+
+                  <template
+                    v-if="confirmButtonLeadingIcon"
+                    #leadingIcon
+                  >
+                    <Component
+                      :is="confirmButtonLeadingIcon"
+                      class="stroke-2"
+                    />
+                  </template>
+
+                  {{ confirmButtonText }}
+                </AppButton>
+
+                <AppButton
+                  v-if="cancelButtonText"
+                  :disabled="confirmLoading || cancelLoading"
+                  :loading="cancelLoading"
+                  color-type="plain"
+                  class="justify-center"
+                  @click="() => close(false)"
+                >
+                  <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>
+        </TransitionChild>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>