@autoafleveren/ui 1.3.2 → 1.4.0

package/src/modules/components/AppActionBar/Components/MultiSelect.vue

@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import { useActionBar } from '~composables';
+  import { AppButton, AppSelect } from '~components';
+  import { classes } from '~components/AppSelect';
+
+  import type { ActionItemProps } from '../index.d';
+
+  const props = withDefaults(
+    defineProps<Omit<ActionItemProps, 'context' | 'confirmed'> & { submitButtonText?: string; cancelButtonText?: string }>(),
+    {
+      submitButtonText: 'Opslaan',
+      cancelButtonText: 'Annuleren',
+    },
+  );
+
+  const emit = defineEmits<{ submit: []; close: [] }>();
+
+  const modelValue = defineModel<number[]>();
+  const submitting = ref(false);
+  const actionBar = useActionBar();
+
+  const selectProps = computed(() => ({
+    minChars: 1,
+    resolveOnLoad: true,
+    closeOnSelect: false,
+    multiple: true,
+    clearable: true,
+    searchable: true,
+    fetchOnOpen: true,
+    hideSelected: true,
+    maxHeight: 200,
+    mode: 'tags',
+    placeholder: 'Zoeken...',
+    noOptionsText: 'Geen opties beschikbaar',
+    noResultsText: 'Geen resulaten gevonden',
+    valueProp: 'id',
+    ...props.action.componentProperties,
+  }));
+
+  async function submit(): Promise<void> {
+    submitting.value = true;
+
+    const response = await props.action?.onSubmit?.(modelValue.value, props.item ?? actionBar.tableSelection.value);
+
+    submitting.value = false;
+
+    if (response) {
+      emit('close');
+    }
+  }
+</script>
+
+<template>
+  <div>
+    <AppSelect
+      v-model="modelValue"
+      v-bind="selectProps"
+      :classes="{
+        dropdownHidden: 'block! relative!',
+        option: 'hover:bg-zinc-600 px-2.5 py-2.5 rounded-lg text-base h-10',
+        search: classes.search,
+        placeholder: `${classes.placeholder} max-h-11`,
+        tags: `${classes.tags} bg-white rounded-lg min-h-10 mb-2 mt-0! text-secondary pt-1`,
+        tag: `${classes.tag} text-secondary`,
+        tagDisabled: classes.tagDisabled,
+        tagRemove: classes.tagRemove,
+        tagRemoveIcon: classes.tagRemoveIcon,
+        tagText: classes.tagText,
+        tagsSearchWrapper: classes.tagsSearchWrapper,
+        tagsSearch: classes.tagsSearch,
+        tagsSearchCopy: classes.tagsSearchCopy,
+        spinner: `${classes.spinner} absolute`,
+      }"
+    />
+
+    <div class="mt-2 flex">
+      <AppButton
+        :block="true"
+        color-type="plain"
+        size="small"
+        data-test-cancel-button
+        @click="() => emit('close')"
+      >
+        <span class="text-white">
+          {{ cancelButtonText }}
+        </span>
+      </AppButton>
+
+      <AppButton
+        :block="true"
+        :loading="submitting"
+        color-type="primary"
+        size="small"
+        data-test-submit-button
+        @click="submit"
+      >
+        {{ submitButtonText }}
+      </AppButton>
+    </div>
+  </div>
+</template>

package/src/modules/components/AppActionBar/Components/__tests__/multi-select.spec.ts

@@ -0,0 +1,74 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { flushPromises, shallowMount } from '@vue/test-utils';
+import { AppSelect } from '~components';
+import MultiSelect from '../MultiSelect.vue';
+import { submitMock, componentAction } from '../../__mocks__';
+
+import type { VueWrapper } from '@vue/test-utils';
+import type { Action } from '../../index.d';
+
+function createWrapper(action: Action = componentAction): VueWrapper<InstanceType<typeof MultiSelect>> {
+  return shallowMount(MultiSelect, {
+    props: { action },
+  });
+}
+
+describe('the MultiSelect component', () => {
+  beforeEach(() => {
+    submitMock.mockClear();
+  });
+
+  it('should render AppSelect with props', () => {
+    const wrapper = createWrapper();
+
+    const select = wrapper.findComponent(AppSelect);
+
+    expect(select.exists()).toBe(true);
+    expect(select.props()).toStrictEqual({
+      additionalClasses: undefined,
+      cacheable: false,
+      dropdownClasses: undefined,
+      errorMessage: undefined,
+      fetchOnOpen: true,
+      hasError: false,
+      label: undefined,
+      labelClasses: undefined,
+      onChange: undefined,
+      openDirection: 'down',
+      optionLabel: 'name',
+      wrapperClasses: undefined,
+      searchable: true,
+    });
+  });
+
+  it('should emit when clicked on cancel button', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper();
+
+    const button = wrapper.findComponent('[data-test-cancel-button]');
+    expect(button.exists()).toBe(true);
+
+    expect(wrapper.emitted('close')).toBeUndefined();
+
+    await button.trigger('click');
+
+    expect(wrapper.emitted('close')).toBeDefined();
+  });
+
+  it('should execute onClick when clicked on submit button', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper();
+
+    const button = wrapper.findComponent('[data-test-submit-button]');
+    expect(button.exists()).toBe(true);
+
+    expect(submitMock).toHaveBeenCalledTimes(0);
+
+    await button.trigger('click');
+    await flushPromises();
+
+    expect(submitMock).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,36 @@
+import { vi } from 'vitest';
+import { TrashIcon } from '~icons';
+
+import type { Action } from '../index.d';
+
+export const clickMock = vi.fn().mockResolvedValue(undefined);
+export const submitMock = vi.fn().mockResolvedValue(undefined);
+
+export const action: Action = {
+  name: 'action',
+  icon: TrashIcon,
+  confirm: false,
+  onClick: clickMock,
+};
+
+export const confirmableAction: Action = {
+  name: 'confirmable',
+  icon: TrashIcon,
+  confirm: true,
+  onClick: clickMock,
+};
+
+export const actions: Action[] = [
+  action,
+  confirmableAction,
+];
+
+export const componentAction: Action = {
+  name: 'confirmable',
+  icon: TrashIcon,
+  confirm: true,
+  component: 'multi-select',
+  componentProperties: { options: [{ id: 1, name: 'Option 1' }, { id: 2, name: 'Option 2' }] },
+  onClick: clickMock,
+  onSubmit: submitMock,
+};

package/src/modules/components/AppActionBar/__tests__/app-action-bar-item.spec.ts

@@ -0,0 +1,134 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { flushPromises, shallowMount } from '@vue/test-utils';
+import { useActionBar } from '~composables';
+import AppActionBarItem from '../AppActionBarItem.vue';
+import AppActionBarSubMenu from '../AppActionBarSubMenu.vue';
+import { action as actionMock, confirmableAction as confirmableActionMock, clickMock } from '../__mocks__';
+
+import type { VueWrapper } from '@vue/test-utils';
+import type { Action } from '../index.d';
+
+function createWrapper(action: Action = actionMock): VueWrapper<InstanceType<typeof AppActionBarItem>> {
+  return shallowMount(AppActionBarItem, {
+    props: { action },
+  });
+}
+
+describe('the AppActionBarItem component', () => {
+  beforeEach(() => {
+    clickMock.mockClear();
+  });
+
+  it('executes the handler when click', async () => {
+    expect.assertions(4);
+
+    const wrapper = createWrapper();
+
+    const icon = wrapper.find('[data-test-action-bar-icon]');
+
+    expect(wrapper.findComponent(AppActionBarSubMenu).exists()).toBe(false);
+
+    expect(clickMock).toHaveBeenCalledTimes(0);
+
+    await icon.trigger('click');
+
+    expect(clickMock).toHaveBeenCalledTimes(1);
+    expect(wrapper.findComponent(AppActionBarSubMenu).exists()).toBe(false);
+  });
+
+  it('can confirm when click and confirmable is true', async () => {
+    expect.assertions(5);
+
+    const wrapper = createWrapper(confirmableActionMock);
+    const icon = wrapper.find('[data-test-action-bar-icon]');
+
+    expect(clickMock).toHaveBeenCalledTimes(0);
+
+    await icon.trigger('click');
+
+    expect(clickMock).toHaveBeenCalledTimes(0);
+    expect((wrapper.vm as unknown as typeof AppActionBarItem).confirm).toBe(true);
+
+    await icon.trigger('click');
+
+    expect(clickMock).toHaveBeenCalledTimes(1);
+    expect((wrapper.vm as unknown as typeof AppActionBarItem).confirm).toBe(false);
+  });
+
+  it('should set loading state clicked', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper();
+    const icon = wrapper.find('[data-test-action-bar-icon]');
+
+    expect((wrapper.vm as unknown as typeof AppActionBarItem).loading).toBe(false);
+
+    icon.trigger('click');
+
+    expect((wrapper.vm as unknown as typeof AppActionBarItem).loading).toBe(true);
+
+    await flushPromises();
+
+    expect((wrapper.vm as unknown as typeof AppActionBarItem).loading).toBe(false);
+  });
+
+  it('should reset selection after click by default', async () => {
+    expect.assertions(2);
+
+    const actionBar = useActionBar();
+    actionBar.setSelection([1, 2]);
+    expect(actionBar.selection.value).toStrictEqual([1, 2]);
+
+    const wrapper = createWrapper();
+    const icon = wrapper.find('[data-test-action-bar-icon]');
+
+    await icon.trigger('click');
+
+    expect(actionBar.selection.value).toStrictEqual([]);
+  });
+
+  it('should not reset selection after click when resetSelection is false', async () => {
+    expect.assertions(1);
+
+    const actionBar = useActionBar();
+    actionBar.setSelection([1, 2]);
+
+    const wrapper = createWrapper({ ...actionMock, resetSelection: false });
+
+    await wrapper.trigger('click');
+
+    expect(actionBar.selection.value).toStrictEqual([1, 2]);
+  });
+
+  it('should render sub menu when action has subActions', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper({ ...actionMock, component: 'multi-select' });
+    const icon = wrapper.find('[data-test-action-bar-icon]');
+
+    expect(wrapper.findComponent(AppActionBarSubMenu).exists()).toBe(false);
+
+    await icon.trigger('click');
+
+    expect(wrapper.findComponent(AppActionBarSubMenu).exists()).toBe(true);
+  });
+
+  it('should emit when AppActionBarSubMenu emits "close"', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper({ ...actionMock, component: 'multi-select' });
+    const icon = wrapper.find('[data-test-action-bar-icon]');
+
+    await icon.trigger('click');
+
+    const subMenu = wrapper.findComponent(AppActionBarSubMenu);
+
+    expect(subMenu.exists()).toBe(true);
+
+    expect(wrapper.emitted('confirmed')).toBeUndefined();
+
+    subMenu.vm.$emit('close');
+
+    expect(wrapper.emitted('confirmed')).toBeDefined();
+  });
+});

package/src/modules/components/AppActionBar/__tests__/app-action-bar-sub-menu.spec.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest';
+import { flushPromises, shallowMount } from '@vue/test-utils';
+import AppActionBarSubMenu from '../AppActionBarSubMenu.vue';
+import MultiSelect from '../Components/MultiSelect.vue';
+import { componentAction } from '../__mocks__';
+
+import type { VueWrapper } from '@vue/test-utils';
+import type { Action } from '../index.d';
+
+function createWrapper(action: Action = componentAction): VueWrapper<InstanceType<typeof AppActionBarSubMenu>> {
+  return shallowMount(AppActionBarSubMenu, {
+    props: { action },
+  });
+}
+
+describe('the AppActionBarSubMenu component', () => {
+  it('renders variable component based on name', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper();
+
+    await flushPromises();
+
+    const menu = wrapper.findComponent('[data-test-action-menu]');
+
+    expect(wrapper.findComponent(MultiSelect).exists()).toBe(true);
+
+    expect(menu.exists()).toBe(true);
+    expect(menu.attributes('options')).toBeDefined();
+  });
+
+  it('should emit when compoment emits "close"', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper();
+
+    await flushPromises();
+
+    expect(wrapper.emitted('close')).toBeUndefined();
+
+    wrapper.findComponent(MultiSelect).vm.$emit('close');
+
+    expect(wrapper.emitted('close')).toBeDefined();
+  });
+});

package/src/modules/components/AppActionBar/__tests__/app-action-bar.spec.ts

@@ -0,0 +1,92 @@
+import { nextTick } from 'vue';
+import { describe, it, expect, beforeEach } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import { XMarkIcon } from '~icons';
+import { useActionBar } from '~composables';
+import { AppInput } from '~components';
+import AppActionBar from '../AppActionBar.vue';
+import AppActionBarItem from '../AppActionBarItem.vue';
+import { actions as actionsMock } from '../__mocks__';
+
+import type { VueWrapper } from '@vue/test-utils';
+
+const actionBar = useActionBar();
+
+function createWrapper(): VueWrapper<InstanceType<typeof AppActionBar>> {
+  return shallowMount(AppActionBar);
+}
+
+describe('the AppActionBar component', () => {
+  beforeEach(async () => {
+    actionBar.setSelection([1, 2]);
+    actionBar.setActions(actionsMock);
+    actionBar.open();
+
+    await nextTick();
+  });
+
+  it('should add classes to wrapper div when actionBar is open', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper();
+
+    expect(wrapper.find('[data-test-action-bar-wrapper]').classes('translate-y-0!')).toBe(true);
+
+    actionBar.close();
+
+    await nextTick();
+
+    expect(wrapper.find('[data-test-action-bar-wrapper]').classes('translate-y-0!')).toBe(false);
+  });
+
+  it('renders checkbox', () => {
+    const wrapper = createWrapper();
+
+    // @ts-expect-error input wrong type, need upgrade ts
+    const checkbox = wrapper.findComponent(AppInput);
+    expect(checkbox.exists()).toBe(true);
+    // @ts-expect-error input wrong type, need upgrade ts
+    expect(checkbox.props('modelValue')).toStrictEqual([1]);
+  });
+
+  it('renders the selection text', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper();
+
+    let selectionText = wrapper.find('[data-test-selection-text]');
+    expect(selectionText.exists()).toBe(true);
+    expect(selectionText.text()).toBe('2 selected');
+
+    actionBar.setSelectionText(':selection items geselected');
+    actionBar.setSelection([1, 2, 3, 4]);
+
+    await nextTick();
+
+    selectionText = wrapper.find('[data-test-selection-text]');
+    expect(selectionText.text()).toBe('4 items geselected');
+  });
+
+  it('renders the AppActionBarItems', () => {
+    const wrapper = createWrapper();
+
+    const actionBarItems = wrapper.findAllComponents(AppActionBarItem);
+    expect(actionBarItems).toHaveLength(actionsMock.length);
+    expect(actionBarItems[0].props('action')).toStrictEqual(actionsMock[0]);
+    expect(actionBarItems[1].props('action')).toStrictEqual(actionsMock[1]);
+  });
+
+  it('can close the actionbar with the close icon', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper();
+
+    const closeIcon = wrapper.findComponent(XMarkIcon);
+    expect(closeIcon.exists()).toBe(true);
+
+    await closeIcon.trigger('click');
+
+    expect(actionBar.selection.value).toHaveLength(0);
+    expect(actionBar.isOpen.value).toBe(false);
+  });
+});

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

@@ -0,0 +1,29 @@
+import type { Component } from 'vue';
+import type { types } from '.';
+
+export type Type = typeof types[number];
+
+export type ActionComponent = 'multi-select';
+
+export interface Action {
+  name: string;
+  key?: string;
+  icon: Component;
+  confirm?: boolean;
+  type?: Type;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  hidden?: boolean | ((items: any[], context: boolean) => boolean);
+  onClick?: (item: unknown) => Promise<unknown>;
+  onSubmit?: (modelValue: unknown, item: unknown) => Promise<boolean>;
+  resetSelection?: boolean;
+  component?: Component | ActionComponent;
+  componentProperties?: Record<string, unknown>;
+}
+
+export interface ActionItemProps {
+  action: Action;
+  context?: boolean;
+  confirmed?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  item?: any;
+}

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

@@ -0,0 +1,18 @@
+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'],
+};
+
+export const domClassesPerMenu: Record<'contextMenu' | 'actionBar', string[]> = {
+  contextMenu: ['focus:bg-zinc-600', 'px-2', 'py-1'],
+  actionBar: ['hover:bg-black-100/20'],
+};
+
+export const arrowClassPerMenu: Record<'contextMenu' | 'actionBar', string> = {
+  actionBar: 'before:-top-4 before:left-1/2 before:border-x-10 before:border-b-10 before:border-x-transparent before:border-b-secondary',
+  contextMenu: '',
+};

package/src/modules/components/AppAlert/AppAlert.vue

@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+  import { useSlots } from 'vue';
+  import { domClassesPerType, statusIconPerType } from '.';
+
+  import type { Type } from './index.d';
+
+  withDefaults(defineProps<{
+    type: Type;
+    title?: string;
+    description?: string;
+    withIcon?: boolean;
+  }>(), {
+    title: undefined,
+    description: undefined,
+    withIcon: true,
+  });
+
+  const slots = useSlots();
+</script>
+
+<template>
+  <div
+    :class="domClassesPerType[type]"
+    class="app-alert inline-flex max-w-[410px] flex-col rounded-lg px-4 py-2 text-sm text-zinc-900"
+  >
+    <div class="flex items-center font-bold">
+      <span
+        v-if="withIcon"
+        class="mr-2"
+      >
+        <slot
+          :type="type"
+          name="icon"
+        >
+          <Component
+            :is="statusIconPerType[type]"
+            class="size-5"
+          />
+        </slot>
+      </span>
+
+      <span data-test-title>
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </span>
+    </div>
+
+    <div
+      v-if="description || slots.description"
+      class="mt-1 text-zinc-700"
+      data-test-description
+    >
+      <slot name="description">
+        {{ description }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  @reference "./../../../css/main.css";
+
+  .app-alert > :deep(*) {
+    a {
+      @apply underline;
+    }
+  }
+</style>

package/src/modules/components/AppAlert/__tests__/app-alert.spec.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import AppAlert from '../AppAlert.vue';
+
+import type { ComponentMountingOptions, VueWrapper } from '@vue/test-utils';
+import type { Type } from '../index.d';
+
+function createWrapper(
+  type: Type,
+  title: string,
+  description?: string,
+  slots?: ComponentMountingOptions<typeof AppAlert>['slots'],
+): VueWrapper<InstanceType<typeof AppAlert>> {
+  return shallowMount(AppAlert, {
+    props: {
+      type,
+      title,
+      description,
+      withIcon: false,
+    },
+    slots,
+  });
+}
+
+describe('the AppAlert component', () => {
+  it('can render an alert with a title via the title prop', () => {
+    const title = 'Example alert title';
+    const wrapper = createWrapper('success', title);
+
+    const titleWrapper = wrapper.find('[data-test-title]');
+    expect(titleWrapper.exists()).toBe(true);
+    expect(titleWrapper.text()).toBe(title);
+  });
+
+  it('can render an alert with a title via the title slot', () => {
+    const title = 'Example alert title';
+    const titleSlotSelector = 'data-test-title-slot';
+    const titleSlotText = 'Example slot alert title';
+    const titleSlot = `<i ${titleSlotSelector}>${titleSlotText}</i>`;
+    const wrapper = createWrapper('success', title, undefined, { title: titleSlot });
+
+    const titleSlotWrapper = wrapper.find(`[data-test-title] > [${titleSlotSelector}]`);
+    expect(titleSlotWrapper.exists()).toBe(true);
+    expect(titleSlotWrapper.text()).toBe(titleSlotText);
+  });
+
+  it('can render an alert with a description via the description prop', () => {
+    const description = 'Example alert description';
+    const wrapper = createWrapper('success', 'title', description);
+
+    const descriptionWrapper = wrapper.find('[data-test-description]');
+    expect(descriptionWrapper.exists()).toBe(true);
+    expect(descriptionWrapper.text()).toBe(description);
+  });
+
+  it('can render an alert with a description via the description slot', () => {
+    const description = 'Example alert description';
+    const descriptionSlotSelector = 'data-test-description-slot';
+    const descriptionSlotText = 'Example slot alert description';
+    const descriptionSlot = `<i ${descriptionSlotSelector}>${descriptionSlotText}</i>`;
+    const wrapper = createWrapper('success', 'title', description, { description: descriptionSlot });
+
+    const descriptionSlotWrapper = wrapper.find(`[data-test-description] > [${descriptionSlotSelector}]`);
+    expect(descriptionSlotWrapper.exists()).toBe(true);
+    expect(descriptionSlotWrapper.text()).toBe(descriptionSlotText);
+  });
+});

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

@@ -0,0 +1,3 @@
+import type { types } from '.';
+
+export type Type = typeof types[number];

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

@@ -0,0 +1,18 @@
+import { SuccessIcon, WarningIcon, ErrorIcon } from '~icons/status';
+
+import type { Component } from 'vue';
+import type { Type } from './index.d';
+
+export const types = ['success', 'warning', 'error'] as const;
+
+export const domClassesPerType: Record<Type, string[]> = {
+  success: ['bg-green-100'],
+  warning: ['bg-yellow-100'],
+  error: ['bg-red-100'],
+};
+
+export const statusIconPerType: Record<Type, Component> = {
+  success: SuccessIcon,
+  warning: WarningIcon,
+  error: ErrorIcon,
+};