@autoafleveren/ui 1.3.2 → 1.4.0

package/src/modules/components/AppDataTable/__tests__/app-data-table.spec.ts

@@ -0,0 +1,153 @@
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { describe, it, expect, beforeEach } from 'vitest';
+import Vue3EasyDataTable from 'vue3-easy-data-table';
+import { useActionBar } from '~/modules';
+import Vue3EasyDataTableStub, {
+  dataTableInstance,
+  previousPageMock,
+  nextPageMock,
+  updatePageMock,
+} from '~/tests/stubs/Vue3EasyDataTableStub';
+import AppDataTableFooter from '../AppDataTableFooter.vue';
+import AppDataTable from '../AppDataTable.vue';
+import { items, headers } from '../__mocks__';
+
+import type { VueWrapper } from '@vue/test-utils';
+
+const actionBar = useActionBar();
+
+function createWrapper(
+  modelValue = [],
+  actionBarSelection = true,
+  actionBarSelectionKey = 'id',
+// @ts-expect-error Type VueWrapper
+): VueWrapper<InstanceType<typeof AppDataTable>> {
+  return shallowMount(AppDataTable, {
+    props: {
+      items,
+      headers,
+      modelValue,
+      actionBarSelection,
+      actionBarSelectionKey,
+    },
+    slots: {
+      itemId: 'id',
+    },
+    global: {
+      stubs: {
+        DataTable: Vue3EasyDataTableStub,
+      },
+    },
+  });
+}
+
+describe('the generic AppDataTable component', () => {
+  beforeEach(() => {
+    actionBar.setSelection([]);
+  });
+
+  it('should render the Vue3EasyDataTable', () => {
+    const wrapper = createWrapper();
+
+    const easyDataTable = wrapper.findComponent(Vue3EasyDataTable);
+    expect(easyDataTable.exists()).toBe(true);
+    expect(easyDataTable.props('hideFooter')).toBe(true);
+    expect(easyDataTable.props('itemsSelected')).toStrictEqual([]);
+  });
+
+  it('should update actionbar selection when Vue3EasyDataTable selection changed by default', () => {
+    const wrapper = createWrapper();
+
+    expect(actionBar.selection.value).toStrictEqual([]);
+
+    const easyDataTable = wrapper.findComponent(Vue3EasyDataTable);
+    easyDataTable.vm.$emit('update:items-selected', [{ id: 1 }, { id: 2 }, { id: 3 }]);
+
+    expect(actionBar.selection.value).toStrictEqual([1, 2, 3]);
+  });
+
+  // eslint-disable-next-line max-len
+  it('should not update actionbar selection when Vue3EasyDataTable selection changed when prop "actionBarSelection" is set to false', () => {
+    const wrapper = createWrapper([], false);
+
+    expect(actionBar.selection.value).toStrictEqual([]);
+
+    const easyDataTable = wrapper.findComponent(Vue3EasyDataTable);
+    easyDataTable.vm.$emit('update:items-selected', [{ id: 1 }, { id: 2 }, { id: 3 }]);
+
+    expect(actionBar.selection.value).toStrictEqual([]);
+  });
+
+  it('can specify the actionBarSelectionKey', () => {
+    const wrapper = createWrapper([], true, 'title');
+
+    expect(actionBar.selection.value).toStrictEqual([]);
+    const easyDataTable = wrapper.findComponent(Vue3EasyDataTable);
+
+    easyDataTable.vm.$emit('update:items-selected', [
+      { id: 1, title: 'title 1' },
+      { id: 2, title: 'title 2' },
+      { id: 3, title: 'title 3' },
+    ]);
+
+    expect(actionBar.selection.value).toStrictEqual(['title 1', 'title 2', 'title 3']);
+  });
+
+  it('should render the AppDataTableFooter', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper();
+
+    await nextTick();
+
+    const dataTableFooter = wrapper.findComponent(AppDataTableFooter);
+    expect(dataTableFooter.exists()).toBe(true);
+    expect(dataTableFooter.props('dataTable')).toStrictEqual(dataTableInstance);
+  });
+
+  it('should execute "nextPage" when AppDataTableFooter emits "nextPage', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper();
+
+    await nextTick();
+
+    expect(nextPageMock).toHaveBeenCalledTimes(0);
+
+    const dataTableFooter = wrapper.findComponent(AppDataTableFooter);
+    dataTableFooter.vm.$emit('nextPage');
+
+    expect(nextPageMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('should execute "prevPage" when AppDataTableFooter emits "previousPage', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper();
+
+    await nextTick();
+
+    expect(previousPageMock).toHaveBeenCalledTimes(0);
+
+    const dataTableFooter = wrapper.findComponent(AppDataTableFooter);
+    dataTableFooter.vm.$emit('previousPage');
+
+    expect(previousPageMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('should execute "updatePage" when AppDataTableFooter emits "updatePage', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper();
+
+    await nextTick();
+
+    expect(updatePageMock).toHaveBeenCalledTimes(0);
+
+    const dataTableFooter = wrapper.findComponent(AppDataTableFooter);
+    dataTableFooter.vm.$emit('updatePage');
+
+    expect(updatePageMock).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,29 @@
+import type { Header } from 'vue3-easy-data-table';
+
+export interface Props<Item> {
+  headers: Header[];
+  items: Item[];
+  modelValue?: number[];
+  currentPage?: number;
+  rowItems?: number[];
+  rowsPerPage?: number;
+  actionBarSelection?: boolean;
+  actionBarSelectionKey?: string;
+  hideFooter?: boolean;
+}
+
+export interface DataTableInstance {
+  clientItemsLength: number;
+  currentPageFirstIndex: number;
+  currentPageLastIndex: number;
+  currentPaginationNumber: number;
+  isFirstPage: boolean;
+  isLastPage: boolean;
+  maxPaginationNumber: number;
+  nextPage: () => void;
+  prevPage: () => void;
+  rowsPerPageActiveOption: number;
+  rowsPerPageOptions: number[];
+  updatePage: (page: number) => void;
+  updateRowsPerPageActiveOption: (option: number) => void;
+}

package/src/modules/components/AppDefinitionList/AppDefinitionItem.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+  import { computed, useSlots } from 'vue';
+
+  import type { DefinitionItem } from './index.d';
+
+  const props = withDefaults(defineProps<{
+    title?: DefinitionItem['title'];
+    description?: DefinitionItem['description'];
+    component?: DefinitionItem['component'];
+    componentProperties?: DefinitionItem['componentProperties'];
+    hideEmptyValues?: boolean;
+  }>(), {
+    title: undefined,
+    description: undefined,
+    component: undefined,
+    componentProperties: undefined,
+    hideEmptyValues: false,
+  });
+
+  const slots = useSlots();
+
+  const hasTitle = computed(() => !!slots.title || !!props.title);
+  const hasDescription = computed(() => !!slots.default || !!props.description || !!props.component);
+</script>
+
+<template>
+  <div
+    v-if="hasDescription || !hasDescription && !hideEmptyValues"
+    class="flex w-full"
+    data-test-item
+  >
+    <dt
+      v-if="hasTitle"
+      :class="{ 'w-1/2': hasDescription || component }"
+      class="font-bold text-zinc-900"
+      data-test-title
+    >
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </dt>
+
+    <dd
+      v-if="hasDescription || component || $slots.default"
+      :class="{ 'w-1/2': hasTitle }"
+      data-test-description
+    >
+      <slot>{{ description }}</slot>
+
+      <component
+        :is="component"
+        v-bind="componentProperties"
+        data-test-component
+      />
+    </dd>
+  </div>
+</template>

package/src/modules/components/AppDefinitionList/AppDefinitionList.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+  import AppDefinitionItem from './AppDefinitionItem.vue';
+
+  import type { DefinitionItem } from './index.d';
+
+  withDefaults(defineProps<{
+    items?: DefinitionItem[];
+    hideEmptyValues?: boolean;
+  }>(), {
+    items: undefined,
+    hideEmptyValues: false,
+  });
+</script>
+
+<template>
+  <div class="flex flex-col gap-1.5">
+    <slot>
+      <template v-if="items">
+        <AppDefinitionItem
+          v-for="(item, index) in items"
+          :key="index"
+          :tabindex="`1${index}`"
+          :title="item.title"
+          :description="item.description"
+          :component="item.component"
+          :component-properties="item.componentProperties"
+          :hide-empty-values="hideEmptyValues"
+        />
+      </template>
+    </slot>
+  </div>
+</template>

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

@@ -0,0 +1,31 @@
+import AppButton from '../../AppButton/AppButton.vue';
+
+import type { DefinitionItem } from '../index.d';
+
+export const definitionItem: DefinitionItem = {
+  title: 'title 1',
+  description: 'description 1',
+};
+
+export const definitionItemWithoutDescription: DefinitionItem = {
+  title: 'title 1',
+  description: undefined,
+};
+
+export const definitionItemWithComponent: DefinitionItem = {
+  title: 'title 3',
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  component: AppButton,
+  componentProperties: {
+    size: 'small',
+  },
+};
+
+export const items: DefinitionItem[] = [
+  definitionItem,
+  {
+    title: 'title 2',
+    description: 'description 2',
+  },
+  definitionItemWithComponent,
+];

package/src/modules/components/AppDefinitionList/__tests__/app-definition-item.spec.ts

@@ -0,0 +1,93 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import AppDefinitionItem from '../AppDefinitionItem.vue';
+import { definitionItem as definitionItemMock,
+  definitionItemWithoutDescription as definitionItemWithoutDescriptionMock,
+  definitionItemWithComponent as definitionItemWithComponentMock,
+} from '../__mocks__';
+
+import type { VueWrapper } from '@vue/test-utils';
+import type { DefinitionItem } from '../index.d';
+import type { DefinedComponent } from '~/typings/utilities';
+
+function createWrapper(
+  item: DefinitionItem | null = definitionItemMock,
+  asSlot = false,
+  hideEmptyValues = false,
+): VueWrapper<InstanceType<typeof AppDefinitionItem>> {
+  return shallowMount(AppDefinitionItem, {
+    props: !asSlot ? {
+      title: item?.title,
+      description: item?.description,
+      component: item?.component,
+      componentProperties: item?.componentProperties,
+      hideEmptyValues,
+    } : {},
+    slots: asSlot ? {
+      title: item?.title ?? '',
+      default: item?.description ?? '',
+    } : {},
+  });
+}
+
+describe('the AppDefinitionItem component', () => {
+  it('renders nothing when empty', () => {
+    const wrapper = createWrapper(null);
+
+    const item = wrapper.find('[data-test-item]');
+    expect(item.exists()).toBe(true);
+
+    const title = wrapper.find('[data-test-title]');
+    expect(title.exists()).toBe(false);
+
+    const description = wrapper.find('[data-test-description]');
+    expect(description.exists()).toBe(false);
+  });
+
+  it('renders the title as prop', () => {
+    const wrapper = createWrapper();
+
+    const title = wrapper.find('[data-test-title]');
+    expect(title.exists()).toBe(true);
+    expect(title.text()).toBe(definitionItemMock.title);
+  });
+
+  it('renders the description as prop', () => {
+    const wrapper = createWrapper();
+
+    const description = wrapper.find('[data-test-description]');
+    expect(description.exists()).toBe(true);
+    expect(description.text()).toBe(definitionItemMock.description);
+  });
+
+  it('renders the title as slot', () => {
+    const wrapper = createWrapper(definitionItemMock, true);
+
+    const title = wrapper.find('[data-test-title]');
+    expect(title.exists()).toBe(true);
+    expect(title.text()).toBe(definitionItemMock.title);
+  });
+
+  it('renders the description as slot', () => {
+    const wrapper = createWrapper(definitionItemMock, true);
+
+    const description = wrapper.find('[data-test-description]');
+    expect(description.exists()).toBe(true);
+    expect(description.text()).toBe(definitionItemMock.description);
+  });
+
+  it('does not render when description is empty and hideEmptyValues is true', () => {
+    const wrapper = createWrapper(definitionItemWithoutDescriptionMock, false, true);
+
+    const item = wrapper.find('[data-test-item]');
+    expect(item.exists()).toBe(false);
+  });
+
+  it('render the component with props when provided', () => {
+    const wrapper = createWrapper(definitionItemWithComponentMock);
+
+    const component = wrapper.findComponent('[data-test-component]' as unknown as DefinedComponent);
+    expect(component.exists()).toBe(true);
+    expect(component.props('size')).toStrictEqual(definitionItemWithComponentMock.componentProperties?.size);
+  });
+});

package/src/modules/components/AppDefinitionList/__tests__/app-definition-list.spec.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import AppDefinitionItem from '../AppDefinitionItem.vue';
+import AppDefinitionList from '../AppDefinitionList.vue';
+import { items as itemsMock } from '../__mocks__';
+
+import type { VueWrapper } from '@vue/test-utils';
+
+function createWrapper(hideEmptyValues = false): VueWrapper<InstanceType<typeof AppDefinitionList>> {
+  return shallowMount(AppDefinitionList, {
+    props: {
+      items: itemsMock,
+      hideEmptyValues,
+    },
+  });
+}
+
+describe('the AppDefinitionList component', () => {
+  it('renders AppDefinitionItem for each item', () => {
+    const wrapper = createWrapper();
+
+    const items = wrapper.findAllComponents(AppDefinitionItem);
+    expect(items).toHaveLength(3);
+
+    expect(items[0].props('title')).toBe(itemsMock[0].title);
+    expect(items[0].props('description')).toBe(itemsMock[0].description);
+    expect(items[1].props('title')).toBe(itemsMock[1].title);
+    expect(items[1].props('description')).toBe(itemsMock[1].description);
+    expect(items[1].props('hideEmptyValues')).toBe(false);
+    expect(items[1].props('component')).toBeUndefined();
+    expect(items[2].props('description')).toBeUndefined();
+    expect(items[2].props('component')).toStrictEqual(itemsMock[2].component);
+    expect(items[2].props('componentProperties')).toStrictEqual(itemsMock[2].componentProperties);
+  });
+});

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

@@ -0,0 +1,8 @@
+import type { Component, VNode } from 'vue';
+
+export interface DefinitionItem {
+  title: string;
+  description?: string;
+  component?: Component | VNode;
+  componentProperties?: Record<string, unknown>;
+}

package/src/modules/components/AppDisclosure/AppDisclosure.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+  import { Disclosure } from '@headlessui/vue';
+
+  withDefaults(defineProps<{
+    defaultOpen?: boolean;
+  }>(), {
+    defaultOpen: false,
+  });
+</script>
+
+<template>
+  <Disclosure
+    :default-open="defaultOpen"
+    class="border-b border-zinc-200 last:border-0"
+    as="div"
+  >
+    <slot></slot>
+  </Disclosure>
+</template>

package/src/modules/components/AppDisclosure/AppDisclosureButton.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { DisclosureButton } from '@headlessui/vue';
+  import { ChevronDownIcon } from '~icons';
+
+  const toggleButton = ref<InstanceType<typeof DisclosureButton> | null>(null);
+
+  function onButtonClick(): void {
+    if (toggleButton.value?.$el.dataset.headlessuiState === 'open') {
+      toggleButton.value?.$el.blur();
+    }
+  }
+</script>
+
+<template>
+  <DisclosureButton
+    ref="toggleButton"
+    v-slot="{ open }"
+    as="button"
+    class="flex w-full items-center py-4 text-zinc-900
+      outline-0 transition-font focus:font-bold"
+    @click="onButtonClick"
+  >
+    <span
+      :class="{ 'font-bold': open }"
+      class="text-left"
+    >
+      <slot></slot>
+    </span>
+
+    <span class="ml-auto pl-2">
+      <slot
+        :open="open"
+        name="icon"
+      >
+        <ChevronDownIcon
+          :class="{ 'rotate-180': open }"
+          class="size-5 text-zinc-900 transition-transform"
+        />
+      </slot>
+    </span>
+  </DisclosureButton>
+</template>

package/src/modules/components/AppDisclosure/AppDisclosurePanel.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+  import { DisclosurePanel } from '@headlessui/vue';
+
+  withDefaults(defineProps<{
+    static?: boolean;
+    unmount?: boolean;
+  }>(), {
+    static: false,
+    unmount: true,
+  });
+</script>
+
+<template>
+  <Transition
+    enter-active-class="transition duration-100 ease-out"
+    enter-from-class="transform scale-95 opacity-0"
+    enter-to-class="transform scale-100 opacity-100"
+    leave-active-class="transition duration-75 ease-out"
+    leave-from-class="transform scale-100 opacity-100"
+    leave-to-class="transform scale-95 opacity-0"
+  >
+    <DisclosurePanel
+      :static="static"
+      :unmount="unmount"
+      class="-mt-2 mb-4"
+      as="div"
+    >
+      <slot></slot>
+    </DisclosurePanel>
+  </Transition>
+</template>

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

@@ -0,0 +1,70 @@
+import { defineComponent } from 'vue';
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import { DisclosureButton } from '@headlessui/vue';
+import AppDisclosureButton from '../AppDisclosureButton.vue';
+
+import type { Component, PropType } from 'vue';
+import type { ComponentMountingOptions, VueWrapper } from '@vue/test-utils';
+
+const DisclosureButtonStub = defineComponent({
+  name: 'DisclosureButtonStub',
+
+  props: {
+    as: {
+      type: [String, Object] as PropType<string | Component>,
+      default: 'button',
+    },
+  },
+
+  data() {
+    return {
+      open: false,
+    };
+  },
+
+  template: `
+    <button>
+      <slot :open="open"></slot>
+    </button>
+  `,
+});
+
+function createWrapper(
+  slots?: ComponentMountingOptions<typeof AppDisclosureButton>['slots'],
+): VueWrapper<InstanceType<typeof AppDisclosureButton>> {
+  return shallowMount(AppDisclosureButton, {
+    slots,
+    global: {
+      stubs: {
+        DisclosureButton: DisclosureButtonStub,
+      },
+    },
+  });
+}
+
+describe('the AppDisclosureButton component', () => {
+  it('should render DisclosureButton as root element', () => {
+    const wrapper = createWrapper();
+
+    const disclosureButton = wrapper.findComponent(DisclosureButton);
+    expect(disclosureButton.exists()).toBe(true);
+    expect(wrapper.element).toStrictEqual(disclosureButton.element);
+  });
+
+  it('should always render the Disclosure component as button', () => {
+    const wrapper = createWrapper();
+
+    const disclosureButton = wrapper.findComponent(DisclosureButton);
+    expect(disclosureButton.props('as')).toBe('button');
+  });
+
+  it('should render the default slot content inside the disclosure', () => {
+    const content = '<span data-test-content>Content</span>';
+    const wrapper = createWrapper({ default: content });
+    expect(wrapper.text()).toBe('Content');
+
+    const disclosureButton = wrapper.findComponent(DisclosureButton);
+    expect(disclosureButton.find('[data-test-content]').exists()).toBe(true);
+  });
+});

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

@@ -0,0 +1,64 @@
+import { Transition } from 'vue';
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import { DisclosurePanel } from '@headlessui/vue';
+import AppDisclosurePanel from '../AppDisclosurePanel.vue';
+
+describe('the AppDisclosurePanel component', () => {
+  it('should render a Transition as root element', () => {
+    const wrapper = shallowMount(AppDisclosurePanel);
+
+    const transition = wrapper.findComponent(Transition);
+    expect(transition.exists()).toBe(true);
+  });
+
+  it('should render the DisclosurePanel inside the Transition', () => {
+    const wrapper = shallowMount(AppDisclosurePanel);
+
+    const transition = wrapper.findComponent(Transition);
+    const disclosurePanel = transition.findComponent(DisclosurePanel);
+    expect(disclosurePanel.exists()).toBe(true);
+  });
+
+  it('should always render the DisclosurePanel component as div', () => {
+    const wrapper = shallowMount(AppDisclosurePanel);
+
+    const disclosurePanel = wrapper.findComponent(DisclosurePanel);
+    expect(disclosurePanel.props('as')).toBe('div');
+  });
+
+  it('can change the static prop', async () => {
+    const wrapper = shallowMount(AppDisclosurePanel);
+    expect(wrapper.props('static')).toBe(false);
+
+    const disclosurePanel = wrapper.findComponent(DisclosurePanel);
+    expect(disclosurePanel.props('static')).toBe(false);
+
+    await wrapper.setProps({ static: true });
+
+    expect(disclosurePanel.props('static')).toBe(true);
+  });
+
+  it('can change the unmount prop', async () => {
+    const wrapper = shallowMount(AppDisclosurePanel);
+    expect(wrapper.props('unmount')).toBe(true);
+
+    const disclosurePanel = wrapper.findComponent(DisclosurePanel);
+    expect(disclosurePanel.props('unmount')).toBe(true);
+
+    await wrapper.setProps({ unmount: false });
+
+    expect(disclosurePanel.props('unmount')).toBe(false);
+  });
+
+  it('should render the default slot content inside the disclosure panel', () => {
+    const content = '<span data-test-content>Content</span>';
+    const wrapper = shallowMount(AppDisclosurePanel, {
+      slots: { default: content },
+    });
+    expect(wrapper.text()).toBe('Content');
+
+    const disclosurePanel = wrapper.findComponent(DisclosurePanel);
+    expect(disclosurePanel.find('[data-test-content]').exists()).toBe(true);
+  });
+});