@autoafleveren/ui 1.3.2 → 1.3.3

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

@@ -0,0 +1,43 @@
+import type Multiselect from '@vueform/multiselect';
+import type { types, classes } from '.';
+
+export type Type = typeof types[number];
+
+export type OpenDirection = 'up' | 'down';
+
+export type ClassesOptions = keyof typeof classes;
+
+export interface Props {
+  wrapperClasses?: string;
+  hasError?: boolean;
+  errorMessage?: string;
+  label?: string;
+  optionLabel?: string;
+  fetchOnOpen?: boolean;
+  openDirection?: OpenDirection;
+  dropdownClasses?: string;
+  additionalClasses?: Record<string, string>;
+  labelClasses?: string;
+  searchable?: boolean;
+  cacheable?: boolean;
+  onChange?: (value: unknown) => void;
+}
+
+export interface TagSlotProps {
+  disabled: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  option: any;
+  handleTagRemove: (option: unknown, $event: Event) => void;
+}
+
+export interface SingleLabelProps {
+  value: Record<string, unknown>;
+  classes: string | undefined;
+  clear: () => void;
+}
+
+export interface OptionProps {
+  option: Record<string, unknown>;
+}
+
+type MultiSelectSlots = keyof InstanceType<typeof Multiselect>['$slots'];

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

@@ -0,0 +1,69 @@
+/* eslint-disable max-len */
+export const classes = {
+  container: 'app-select scrollbar-primary relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-zinc-300 rounded-lg bg-white text-base leading-snug outline-hidden rounded-lg hover:bg-zinc-100',
+  containerDisabled: 'cursor-default bg-zinc-100',
+  containerOpen: 'rounded-b-none',
+  containerOpenTop: 'rounded-t-none',
+  containerActive: 'ring-1 ring-zinc-300',
+  singleLabel: 'flex items-center h-full max-w-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3 pr-16 box-border rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3',
+  singleLabelText: 'text-ellipsis overflow-hidden block whitespace-nowrap max-w-full',
+  multipleLabel: 'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3',
+  search: 'h-full w-full absolute inset-0 outline-hidden focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded-lg pl-3 rtl:pl-0 rtl:pr-3',
+  tags: 'min-w-0 grow shrink flex flex-wrap items-center mt-1 px-2',
+  tag: 'max-w-full bg-zinc-200 text-sm font-semibold py-1 pl-2 rounded-xs h-7 mr-1 mb-1 flex items-center whitespace-nowrap rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1',
+  tagDisabled: 'pr-2 opacity-50 rtl:pl-2',
+  tagRemove: 'flex items-center justify-center p-1 mx-0.5 rounded-xs group',
+  tagRemoveIcon: 'bg-multiselect-remove bg-center bg-no-repeat inline-block w-3 h-3 text-zinc-700',
+  tagText: 'overflow-hidden text-ellipsis whitespace-nowrap',
+  tagsSearchWrapper: 'inline-block relative mx-1 mb-1 grow shrink h-full',
+  tagsSearch: 'absolute inset-0 border-0 outline-hidden focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full bg-transparent',
+  tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
+  placeholder: 'flex text-base items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3 text-zinc-400 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3',
+  caret: 'bg-multiselect-caret bg-center bg-no-repeat w-5 h-8 py-px box-content mr-3 relative z-10 stroke-2 shrink-0 grow-0 transition-transform transform pointer-events-none rtl:mr-0 rtl:ml-3',
+  caretOpen: 'rotate-180 pointer-events-auto',
+  clear: 'pr-3 relative z-10 text-zinc-700 transition duration-300 shrink-0 grow-0 flex rtl:pr-0 rtl:pl-3',
+  clearIcon: 'bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block',
+  spinner: 'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3 animate-spin shrink-0 grow-0 rtl:mr-0 rtl:ml-3',
+  inifite: 'flex items-center justify-center w-full',
+  inifiteSpinner: 'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 animate-spin shrink-0 grow-0 m-3',
+  dropdown: 'max-h-60 absolute -left-[2px] -right-[2px] bottom-0 transform translate-y-full border-2 border-zinc-300 -mt-px overflow-y-auto z-50 bg-white flex flex-col rounded-b-lg',
+  dropdownTop: '-translate-y-full! top-px bottom-auto rounded-b-none rounded-t-lg',
+  dropdownHidden: 'hidden',
+  options: 'flex flex-col p-0 m-0 list-none',
+  optionsTop: '',
+  group: 'p-0 m-0',
+  groupLabel: 'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-zinc-200 cursor-default leading-normal',
+  groupLabelPointable: 'cursor-pointer',
+  groupLabelPointed: 'bg-zinc-300 text-zinc-700',
+  groupLabelSelected: 'bg-primary-active text-white',
+  groupLabelDisabled: 'bg-zinc-100 text-zinc-300 cursor-not-allowed',
+  groupLabelSelectedPointed: 'bg-primary-active text-white opacity-90',
+  groupLabelSelectedDisabled: 'text-white bg-primary-active bg-opacity-50 cursor-not-allowed',
+  groupOptions: 'p-0 m-0',
+  option: 'flex items-center justify-start box-border text-left cursor-pointer text-base leading-snug py-2 px-3',
+  optionPointed: 'text-zinc-800 bg-zinc-100',
+  optionSelected: 'text-white bg-primary',
+  optionDisabled: 'text-zinc-300 cursor-not-allowed',
+  optionSelectedPointed: 'text-white bg-primary opacity-90',
+  optionSelectedDisabled: 'text-green-100 bg-primary bg-opacity-50 cursor-not-allowed',
+  noOptions: 'py-2 px-3 text-zinc-600 bg-white text-left',
+  noResults: 'py-2 px-3 text-zinc-600 bg-white text-left',
+  fakeInput: 'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-hidden text-transparent',
+  spacer: 'h-9 py-px box-content',
+};
+
+type ClassKey = keyof typeof classes;
+
+function classKeyExists(classKey: string): classKey is ClassKey {
+  return classKey in classes;
+}
+
+export function getSlotClasses(slotName: string): string | undefined {
+  const classKey = Object.keys(classes).find(key => key.toLowerCase() === slotName);
+
+  if (classKey && classKeyExists(classKey)) {
+    return classes[classKey];
+  }
+
+  return undefined;
+}

package/src/modules/components/AppStepper/AppStepper.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+  import { onMounted, useTemplateRef, watch, ref } from 'vue';
+  import { NumberFlip } from 'number-flip-animation';
+  import { FontAwesomeIcon, byPrefixAndName } from '~icons';
+  import { AppCard } from '~components';
+
+  defineProps<{ title?: string }>();
+
+  const model = defineModel<number>({ required: true });
+  const flipRef = useTemplateRef<HTMLDivElement>('flipRef');
+  const numberFlip = ref<NumberFlip>();
+
+  watch(model, (value: number) => {
+    numberFlip.value?.setNumber?.(value);
+  });
+
+  onMounted(() => {
+    if (flipRef.value) {
+      numberFlip.value = new NumberFlip({
+        rootElement: flipRef.value,
+        initialNumber: model.value,
+        durationSlide: 500,
+        wrapperClassname: 'flex overflow-hidden relative transition-opacity transition-1000',
+        digitClassname: 'flex flex-col absolute transition-transform transition-1000 ease-in-out *:text-center',
+      });
+
+      setTimeout(() => {
+        numberFlip.value?.setNumber?.(model.value);
+      }, 100);
+    }
+  });
+
+  function increment(): void {
+    model.value += 1;
+  }
+
+  function decrement(): void {
+    if (model.value === 0) {
+      return;
+    }
+
+    model.value -= 1;
+  }
+</script>
+
+<template>
+  <AppCard
+    content-classes="flex items-center"
+    class="p-4!"
+  >
+    <div class="mr-6 w-full select-none">
+      <slot>
+        {{ title }}
+      </slot>
+    </div>
+
+    <FontAwesomeIcon
+      :icon="byPrefixAndName.far?.minus"
+      :aria-disabled="model === 0"
+      class="cursor-pointer aria-disabled:cursor-not-allowed aria-disabled:opacity-50"
+      data-test-decrement-icon
+      @click="decrement"
+    />
+
+    <div
+      ref="flipRef"
+      class="w-16 shrink-0 justify-center text-center font-bold"
+      data-test-number-flip
+    ></div>
+
+    <FontAwesomeIcon
+      :icon="byPrefixAndName.far?.plus"
+      class="cursor-pointer"
+      data-test-increment-icon
+      @click="increment"
+    />
+  </AppCard>
+</template>
+

package/src/modules/components/AppStepper/__tests__/app-stepper.spec.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import AppStepper from '../AppStepper.vue';
+
+import type { VueWrapper } from '@vue/test-utils';
+
+function createWrapper(modelValue = 5): VueWrapper<InstanceType<typeof AppStepper>> {
+  return shallowMount(AppStepper, {
+    props: { modelValue },
+  });
+}
+
+describe('the AppStepper component', () => {
+  it('renders the number flip element', () => {
+    const wrapper = createWrapper();
+
+    const element = wrapper.find('[data-test-number-flip]');
+    expect(element.exists()).toBe(true);
+  });
+
+  it('should decrement when clicking the decrement icon', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper();
+
+    const icon = wrapper.find('[data-test-decrement-icon]');
+    expect(icon.exists()).toBe(true);
+
+    await icon.trigger('click');
+
+    expect(wrapper.emitted('update:modelValue')).toStrictEqual([[4]]);
+  });
+
+  it('should not decrement when value below 0', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper(0);
+
+    const icon = wrapper.find('[data-test-decrement-icon]');
+    expect(icon.exists()).toBe(true);
+
+    await icon.trigger('click');
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+  });
+
+  it('should increment when clicking the increment icon', async () => {
+    expect.assertions(2);
+
+    const wrapper = createWrapper();
+
+    const icon = wrapper.find('[data-test-increment-icon]');
+    expect(icon.exists()).toBe(true);
+
+    await icon.trigger('click');
+
+    expect(wrapper.emitted('update:modelValue')).toStrictEqual([[6]]);
+  });
+});

package/src/modules/components/AppTable/AppTable.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="flow-root">
+    <div class="overflow-x-auto">
+      <div class="inline-block min-w-full">
+        <div class="overflow-hidden">
+          <table class="w-full">
+            <slot></slot>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  @reference "./../../../css/main.css";
+
+  :deep(table) {
+    @apply drop-shadow-card rounded-lg border border-solid border-zinc-200 border-spacing-0 border-separate;
+
+    th {
+      @apply bg-secondary text-white text-center font-bold whitespace-nowrap py-3 px-4 md:py-4 md:px-6
+        first:rounded-tl-lg first:text-left last:rounded-tr-lg;
+    }
+
+    tbody {
+      @apply divide-y divide-zinc-200;
+
+      &:last-child tr:last-child td {
+        @apply first:rounded-bl-lg last:rounded-br-lg border-b-0;
+      }
+
+      tr {
+        td {
+          @apply bg-white py-3 px-4 border-b border-zinc-200 whitespace-nowrap md:px-6 md:py-4;
+        }
+      }
+    }
+  }
+</style>

package/src/modules/components/AppTimeline/AppTimeline.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+  import AppTimelineItem from './AppTimelineItem.vue';
+
+  import type { TimelineProps } from './index.d';
+
+  withDefaults(defineProps<TimelineProps>(), {
+    type: 'default',
+  });
+</script>
+
+<template>
+  <div class="space-y-4">
+    <slot>
+      <AppTimelineItem
+        v-for="item in items"
+        :key="item.title"
+        :item="item"
+        :item-type="type"
+      />
+    </slot>
+  </div>
+</template>

package/src/modules/components/AppTimeline/AppTimelineItem.vue

@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { AppBadge } from '~components';
+  import AppTimelineItemIcon from './AppTimelineItemIcon.vue';
+  import { domClassesPerType } from './index';
+
+  import type { TimelineItemProps, TimelineBadgeType } from './index.d';
+
+  const props = withDefaults(defineProps<TimelineItemProps>(), {
+    itemType: 'default',
+  });
+
+  const dateFormat = computed(() => {
+    if (props.item.date && !props.item.time) {
+      return props.item.date.toLocaleDateString('nl-NL', {
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        timeStyle: undefined,
+      });
+    }
+
+    if (props.item.time && !props.item.date) {
+      return props.item.time;
+    }
+
+    return [];
+  });
+  const badgeType = computed<TimelineBadgeType>(() => {
+    return props.item?.badge ?? 'default';
+  });
+</script>
+
+<template>
+  <article
+    :class="{ 'after:hidden': item.last }"
+    class="relative flex w-full
+      before:absolute before:-top-5 before:left-4.5 before:h-5 before:w-0.5 before:bg-primary
+      after:absolute after:left-4.5 after:h-full after:w-0.5 after:bg-primary after:[min-height:60px]
+      first-of-type:before:hidden
+      last-of-type:from-primary last-of-type:to-white last-of-type:after:bg-transparent
+      last-of-type:after:bg-linear-to-b"
+  >
+    <div class="flex">
+      <slot
+        :value="item.icon"
+        name="icon"
+      >
+        <AppTimelineItemIcon :icon="item.icon" />
+      </slot>
+    </div>
+
+    <div class="ml-4">
+      <header
+        :class="{ 'flex items-center gap-3': itemType === 'inline', 'mb-0!': item.last }"
+      >
+        <AppBadge
+          :class="{ 'mb-2': itemType === 'default' }"
+          :type="badgeType"
+        >
+          <slot
+            :value="dateFormat"
+            name="date"
+          >
+            <time>{{ dateFormat }} uur</time>
+          </slot>
+        </AppBadge>
+
+        <h3
+          :class="{ domClassesPerType: badgeType }"
+          class="font-semibold"
+          data-test-timeline-title
+        >
+          <slot
+            :value="item.title"
+            name="title"
+          >
+            <span :class="domClassesPerType[badgeType]">
+              {{ item.title }}
+            </span>
+          </slot>
+        </h3>
+      </header>
+
+      <p
+        :class="{ 'mt-4': itemType === 'inline' }"
+        class="text-base empty:mt-0"
+        data-test-timeline-description
+      >
+        <slot :value="item.description">
+          {{ item.description }}
+        </slot>
+      </p>
+    </div>
+  </article>
+</template>

package/src/modules/components/AppTimeline/AppTimelineItemIcon.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { CheckIcon } from '~icons';
+
+  import type { Component } from 'vue';
+  import type { TimelineItemIconProps } from './index.d';
+
+  const props = defineProps<TimelineItemIconProps>();
+
+  const timelineIcon = computed((): Component => {
+    return props.icon ?? CheckIcon;
+  });
+  const timelineIconClass = computed(() => {
+    return props.icon ? ['w-full'] : [
+      'bg-primary',
+      'w-6',
+      'h-6',
+      'text-white',
+      'stroke-3',
+      'p-1',
+      'z-10',
+      'mx-auto',
+      'flex',
+      'items-center',
+      'justify-center',
+      'rounded-full',
+    ];
+  });
+  const wrapperClasses = computed(() => {
+    return props.icon ? [
+      'border-primary',
+      'border-2',
+      '-translate-y-2',
+      'h-10',
+      'w-10',
+      'rounded-full',
+      'flex',
+      'justify-center',
+      'items-center',
+      'p-1.5',
+      'z-50',
+      'bg-white',
+    ] : ['w-10'];
+  });
+</script>
+
+<template>
+  <div :class="wrapperClasses">
+    <Component
+      :is="timelineIcon"
+      :class="timelineIconClass"
+      class="relative"
+    />
+  </div>
+</template>

package/src/modules/components/AppTimeline/__mocks__/timeline.ts

@@ -0,0 +1,29 @@
+import { HandThumbUpIcon } from '~icons';
+
+import type { TimelineItem } from '../index.d';
+
+export const timelineItemWithIcon: TimelineItem = {
+  title: 'title with icon',
+  description: 'description with icon',
+  date: new Date('2023-05-31 02:02:02'),
+  icon: HandThumbUpIcon,
+};
+
+export const timelineItemWithDate: TimelineItem = {
+  title: 'title without icon',
+  description: 'description without icon',
+  date: new Date('2023-05-31 02:02:02'),
+};
+
+export const timelineItemWithTime: TimelineItem = {
+  title: 'title without icon',
+  description: 'description without icon',
+  time: '12:00',
+  sort: 1200,
+};
+
+export const timelineItems: TimelineItem[] = [
+  timelineItemWithIcon,
+  timelineItemWithDate,
+  timelineItemWithTime,
+];

package/src/modules/components/AppTimeline/__tests__/app-timeline-item-Icon.spec.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import { CheckIcon, HandThumbUpIcon } from '~icons';
+import AppTimelineItemIcon from '../AppTimelineItemIcon.vue';
+
+import type { VueWrapper } from '@vue/test-utils';
+import type { TimelineItemIconProps } from '../index.d';
+
+function createWrapper(
+  icon: TimelineItemIconProps['icon'] = undefined,
+): VueWrapper<InstanceType<typeof AppTimelineItemIcon>> {
+  return shallowMount(AppTimelineItemIcon, {
+    props: {
+      icon,
+    },
+  });
+}
+
+describe('the AppTimelineItemIcon component', () => {
+  it('renders an default icon when prop is null', () => {
+    const wrapper = createWrapper();
+
+    const icon = wrapper.findComponent(CheckIcon);
+    expect(icon.exists()).toBe(true);
+    expect(icon.classes('bg-primary')).toBe(true);
+  });
+
+  it('renders the icon when passed by prop', () => {
+    const wrapper = createWrapper(HandThumbUpIcon);
+
+    const icon = wrapper.findComponent(HandThumbUpIcon);
+    expect(icon.exists()).toBe(true);
+    expect(icon.classes('w-full')).toBe(true);
+  });
+});

package/src/modules/components/AppTimeline/__tests__/app-timeline-item.spec.ts

@@ -0,0 +1,121 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import { AppBadge } from '~components';
+import { timelineItemWithDate, timelineItemWithTime, timelineItemWithIcon } from '../__mocks__/timeline';
+import AppTimelineItem from '../AppTimelineItem.vue';
+import AppTimelineItemIcon from '../AppTimelineItemIcon.vue';
+
+import type { VueWrapper, ComponentMountingOptions } from '@vue/test-utils';
+import type { TimelineItemProps } from '../index.d';
+
+function createWrapper(
+  item: TimelineItemProps['item'],
+  slots?: ComponentMountingOptions<typeof AppTimelineItem>['slots'],
+): VueWrapper<InstanceType<typeof AppTimelineItem>> {
+  return shallowMount(AppTimelineItem, {
+    props: {
+      item,
+    },
+    slots,
+  });
+}
+
+describe('the AppTimelineItem component', () => {
+  it('renders a badge with date by prop', () => {
+    const wrapper = createWrapper(timelineItemWithDate);
+
+    const badge = wrapper.findComponent(AppBadge);
+    expect(badge.exists()).toBe(true);
+    expect(badge.text()).toBe('31 mei, 02:02 uur');
+  });
+
+  it('renders a badge with date by slot', () => {
+    const date = '<span>date</span>';
+    const wrapper = createWrapper(timelineItemWithDate, {
+      date,
+    });
+
+    const badge = wrapper.findComponent(AppBadge);
+    expect(badge.exists()).toBe(true);
+    expect(badge.element.innerHTML).toBe(date);
+  });
+
+  it('renders a badge with time by prop', () => {
+    const wrapper = createWrapper(timelineItemWithTime);
+
+    const badge = wrapper.findComponent(AppBadge);
+    expect(badge.exists()).toBe(true);
+    expect(badge.text()).toBe('12:00 uur');
+  });
+
+  it('renders a badge with time by slot', () => {
+    const time = '<time>12:00 uur</time>';
+    const wrapper = createWrapper(timelineItemWithTime, {
+      time,
+    });
+
+    const badge = wrapper.findComponent(AppBadge);
+    expect(badge.exists()).toBe(true);
+    expect(badge.element.innerHTML).toBe(time);
+  });
+
+  it('renders a title by prop', () => {
+    const wrapper = createWrapper(timelineItemWithDate);
+
+    const title = wrapper.find('[data-test-timeline-title]');
+    expect(title.exists()).toBe(true);
+    expect(title.text()).toBe(timelineItemWithDate.title);
+  });
+
+  it('renders a title by slot', () => {
+    const titleSlot = '<span>title</span>';
+    const wrapper = createWrapper(timelineItemWithDate, {
+      title: titleSlot,
+    });
+
+    const title = wrapper.find('[data-test-timeline-title]');
+    expect(title.exists()).toBe(true);
+    expect(title.element.innerHTML).toBe(titleSlot);
+  });
+
+  it('renders a icon by prop', () => {
+    const wrapper = createWrapper(timelineItemWithIcon);
+
+    const timelineItemIcon = wrapper.findComponent(AppTimelineItemIcon);
+    expect(timelineItemIcon.exists()).toBe(true);
+    expect(timelineItemIcon.props('icon')).toBeTypeOf('function');
+  });
+
+  it('renders a icon by slot', () => {
+    const icon = '<span data-test-icon="">icon</span>';
+    const wrapper = createWrapper(timelineItemWithIcon, {
+      icon,
+    });
+
+    const timelineItemIcon = wrapper.findComponent(AppTimelineItemIcon);
+    expect(timelineItemIcon.exists()).toBe(false);
+
+    const timelineItemIconSlot = wrapper.find('[data-test-icon]');
+    expect(timelineItemIconSlot.exists()).toBe(true);
+    expect(timelineItemIconSlot.html()).toBe(icon);
+  });
+
+  it('renders a description by prop', () => {
+    const wrapper = createWrapper(timelineItemWithDate);
+
+    const description = wrapper.find('[data-test-timeline-description]');
+    expect(description.exists()).toBe(true);
+    expect(description.text()).toBe(timelineItemWithDate.description);
+  });
+
+  it('renders a description by slot', () => {
+    const descriptionSlot = '<span>description</span>';
+    const wrapper = createWrapper(timelineItemWithDate, {
+      default: descriptionSlot,
+    });
+
+    const description = wrapper.find('[data-test-timeline-description]');
+    expect(description.exists()).toBe(true);
+    expect(description.element.innerHTML).toBe(descriptionSlot);
+  });
+});