@autoafleveren/ui 1.3.2 → 1.4.0

package/src/modules/components/AppPagination/AppPagination.vue

@@ -0,0 +1,133 @@
+<script lang="ts" setup>
+  import { computed, ref } from 'vue';
+  import { ChevronLeftIcon, ChevronRightIcon } from '~icons';
+  import AppPaginationItem from './AppPaginationItem.vue';
+
+  import type { PaginationMeta } from '.';
+
+  const props = withDefaults(defineProps<{
+    meta?: PaginationMeta;
+    currentPage?: number;
+    lastPage?: number;
+    loaded?: boolean;
+  }>(), {
+    meta: undefined,
+    currentPage: undefined,
+    lastPage: undefined,
+    loaded: true,
+  });
+
+  const emit = defineEmits<{
+    (event: 'paginate', value: number): void;
+    (event: 'nextPage'): void;
+    (event: 'previousPage'): void;
+  }>();
+
+  const pageRange = ref<number>(2);
+
+  const currentPage = computed((): number => props.meta?.meta?.currentPage ?? props.currentPage ?? 1);
+  const lastPage = computed((): number => props.meta?.meta?.lastPage ?? props.lastPage ?? 1);
+  const rangeStart = computed((): number => {
+    const start = currentPage.value - pageRange.value;
+
+    return start > 0 ? start : 1;
+  });
+  const rangeEnd = computed((): number => {
+    const end = currentPage.value + pageRange.value;
+
+    return end < lastPage.value ? end : lastPage.value;
+  });
+  const previousPage = computed((): number | null => {
+    const previousPageMeta = currentPage.value - 1;
+
+    return previousPageMeta > 0 ? previousPageMeta : null;
+  });
+  const nextPage = computed((): number | null => {
+    const nextPageMeta = currentPage.value + 1;
+
+    return nextPageMeta <= lastPage.value ? nextPageMeta : null;
+  });
+  const pages = computed(() => {
+    const paginationPages: number[] = [];
+
+    if (rangeStart.value > 1) {
+      paginationPages.push(1);
+
+      if (rangeStart.value > 2) {
+        paginationPages.push(0);
+      }
+    }
+
+    for (let number = rangeStart.value; number <= rangeEnd.value; number += 1) {
+      paginationPages.push(number);
+    }
+
+    if (rangeEnd.value < lastPage.value) {
+      if ((rangeEnd.value + 1) !== lastPage.value) {
+        paginationPages.push(0);
+      }
+
+      paginationPages.push(lastPage.value);
+    }
+
+    return paginationPages;
+  });
+
+  function paginate(page: number | null): void {
+    if (page) {
+      emit('paginate', page);
+    }
+  }
+</script>
+
+<template>
+  <div class="my-0! flex items-center justify-between border-zinc-200 sm:px-6">
+    <div>
+      <nav
+        :class="{ 'pointer-events-none opacity-50': !loaded }"
+        class="flex rounded-lg border border-zinc-300"
+        aria-label="Pagination"
+      >
+        <AppPaginationItem
+          :disabled="previousPage === null"
+          href="#"
+          class="rounded-l-lg"
+          @click.prevent="() => emit('previousPage')"
+        >
+          <span class="sr-only">previous</span>
+
+          <ChevronLeftIcon
+            class="-mx-1.5 size-5 stroke-2"
+            aria-hidden="true"
+          />
+        </AppPaginationItem>
+
+        <AppPaginationItem
+          v-for="page in pages"
+          :key="`pagination-${page}`"
+          :as="page ? 'a' : 'span'"
+          :active="page === currentPage"
+          href="#"
+          @click.prevent="() => paginate(page)"
+        >
+          {{ page ? page : '...' }}
+        </AppPaginationItem>
+
+        <AppPaginationItem
+          :class="{ 'cursor-not-allowed': nextPage === null }"
+          :disabled="nextPage === null"
+          href="#"
+          class="rounded-r-lg"
+          @click.prevent="() => emit('nextPage')"
+        >
+          <span class="sr-only">next</span>
+
+          <ChevronRightIcon
+            class="-mx-1.5 size-5 stroke-2"
+            aria-hidden="true"
+          />
+        </AppPaginationItem>
+      </nav>
+    </div>
+  </div>
+</template>

package/src/modules/components/AppPagination/AppPaginationItem.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+  import type { Component } from 'vue';
+
+  withDefaults(defineProps<{
+    as?: string | Component;
+    active?: boolean;
+    disabled?: boolean;
+  }>(), {
+    as: 'a',
+    active: false,
+    disabled: false,
+  });
+</script>
+
+<template>
+  <Component
+    :is="as"
+    :class="{
+      '-ml-px border-primary! bg-primary text-white hover:bg-primary!': active,
+      'border-y border-y-zinc-300! bg-zinc-100! text-zinc-300!': disabled,
+      'hover:border-y hover:border-zinc-300 hover:bg-zinc-100': as === 'a',
+    }"
+    class="-my-px flex items-center border-y border-r border-y-transparent border-r-zinc-300 px-3 py-1
+      last:border-r-0"
+  >
+    <slot></slot>
+  </Component>
+</template>

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

@@ -0,0 +1,20 @@
+import type { PaginationMeta } from '../index.d';
+
+export const meta: PaginationMeta = {
+  links: {
+    first: 'http://platform.auto.test/api/v1/users?page=1',
+    last: 'http://platform.auto.test/api/v1/users?page=20',
+    next: 'http://platform.auto.pro.test/api/v1/users?page=2',
+    // eslint-disable-next-line unicorn/prevent-abbreviations
+    prev: null,
+  },
+  meta: {
+    currentPage: 1,
+    from: 1,
+    lastPage: 20,
+    path: 'http://platform.auto.test/api/v1/users',
+    perPage: 15,
+    to: 16,
+    total: 290,
+  },
+};

package/src/modules/components/AppPagination/__tests__/app-pagination.spec.ts

@@ -0,0 +1,143 @@
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { describe, it, expect } from 'vitest';
+import AppPagination from '../AppPagination.vue';
+import AppPaginationItem from '../AppPaginationItem.vue';
+import { meta } from '../__mocks__';
+
+import type { VueWrapper } from '@vue/test-utils';
+import type { PaginationMeta } from '../index.d';
+
+function createWrapper(
+  currentPage = 1,
+  lastPage = 20,
+  paginationMeta: PaginationMeta | undefined = undefined,
+): VueWrapper<InstanceType<typeof AppPagination>> {
+  return shallowMount(AppPagination, {
+    props: {
+      currentPage,
+      lastPage,
+      meta: paginationMeta,
+    },
+  });
+}
+
+describe('the generic AppPagination component', () => {
+  it('should render pagination items without meta prop', () => {
+    const wrapper = createWrapper();
+
+    const itemElements = wrapper.findAllComponents(AppPaginationItem);
+
+    const expectedItems = [
+      'previous',
+      '1',
+      '2',
+      '3',
+      '...',
+      '20',
+      'next',
+    ];
+
+    expect(itemElements).toHaveLength(expectedItems.length);
+
+    expectedItems.forEach((item, index) => {
+      expect(itemElements[index].text()).toBe(item);
+    });
+  });
+
+  it('should render pagination items with meta prop', () => {
+    const wrapper = createWrapper(undefined, undefined, meta);
+
+    const itemElements = wrapper.findAllComponents(AppPaginationItem);
+
+    const expectedItems = [
+      'previous',
+      '1',
+      '2',
+      '3',
+      '...',
+      '20',
+      'next',
+    ];
+
+    expect(itemElements).toHaveLength(expectedItems.length);
+
+    expectedItems.forEach((item, index) => {
+      expect(itemElements[index].text()).toBe(item);
+    });
+  });
+
+  it('should disable previous when on first page', () => {
+    const wrapper = createWrapper();
+
+    let itemElements = wrapper.findAllComponents(AppPaginationItem);
+    expect(itemElements[0].props('disabled')).toBe(true);
+
+    wrapper.setProps({
+      currentPage: undefined,
+      lastPage: undefined,
+      meta,
+    });
+
+    itemElements = wrapper.findAllComponents(AppPaginationItem);
+    expect(itemElements[0].props('disabled')).toBe(true);
+  });
+
+  it('should disable next when on last page', () => {
+    const wrapper = createWrapper(20);
+
+    let itemElements = wrapper.findAllComponents(AppPaginationItem);
+    expect(itemElements[itemElements.length - 1].props('disabled')).toBe(true);
+
+    wrapper.setProps({
+      currentPage: undefined,
+      lastPage: undefined,
+      meta: {
+        ...meta,
+        meta: {
+          ...meta.meta,
+          currentPage: 20,
+          from: 280,
+          to: 290,
+        },
+      },
+    });
+
+    itemElements = wrapper.findAllComponents(AppPaginationItem);
+    expect(itemElements[itemElements.length - 1].props('disabled')).toBe(true);
+  });
+
+  it('should add active state to active item', async () => {
+    expect.assertions(4);
+
+    const wrapper = createWrapper();
+
+    const itemElements = wrapper.findAllComponents(AppPaginationItem);
+    expect(itemElements[1].props('active')).toBe(true);
+    expect(itemElements[2].props('active')).toBe(false);
+
+    await wrapper.setProps({ currentPage: 2 });
+    await nextTick();
+
+    const itemElementsSecondPage = wrapper.findAllComponents(AppPaginationItem);
+
+    expect(itemElementsSecondPage[1].props('active')).toBe(false);
+    expect(itemElementsSecondPage[2].props('active')).toBe(true);
+  });
+
+  it('should emit \'paginate\'', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper();
+
+    const itemElements = wrapper.findAllComponents(AppPaginationItem);
+
+    await itemElements[2].trigger('click');
+
+    const emitted = wrapper.emitted<Event[]>();
+
+    expect(emitted).toHaveProperty('paginate');
+    expect(emitted.paginate).toHaveLength(1);
+    expect(emitted.paginate[0][0]).toBe(2);
+  });
+});

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

@@ -0,0 +1,24 @@
+export interface MetaLink {
+  url: string | null;
+  active: boolean;
+  label: string;
+}
+
+export interface PaginationMeta {
+  links: {
+    first: string;
+    last: string;
+    next: string | null;
+    prev: string | null;
+  };
+  meta: {
+    links?: MetaLink[];
+    currentPage: number;
+    from: number;
+    lastPage: number;
+    path: string;
+    perPage: number;
+    to: number;
+    total: number;
+  };
+}

package/src/modules/components/AppProgressBar/AppProgressBar.vue

@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+  import { computed, useSlots } from 'vue';
+
+  import type { DefaultSlotProps, DefaultSlot, Props, Step } from './index.d';
+
+  const props = withDefaults(defineProps<Props>(), { unmount: true });
+
+  defineSlots<{ default?: (props: DefaultSlotProps) => void }>();
+
+  const slots = useSlots();
+  const gridCols = ['grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4', 'grid-cols-5', 'grid-cols-6', 'grid-cols-7', 'grid-cols-8'];
+
+  const hasStepSlots = computed(() => slots.default !== undefined);
+  const progressSteps = computed((): Step[] => {
+    if (props.steps) {
+      return props.steps;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    return slots.default?.().map((step: DefaultSlot, index: number) => {
+      return {
+        name: step?.props?.name ?? step?.type?.props?.name,
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        completed: active.value >= index,
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        active: active.value === index,
+        component: step,
+      } as Step;
+    }) ?? [];
+  });
+  const active = computed((): number => {
+    if (props.activeIndex !== undefined && props.activeIndex > -1) {
+      return props.activeIndex;
+    }
+
+    return progressSteps.value?.findIndex(step => step.active);
+  });
+  const percentage = computed((): number | string => {
+    if (props.percentage) return props.percentage;
+
+    if (!progressSteps.value) return 0;
+
+    const completedSteps = progressSteps.value.filter(step => step.completed).length;
+
+    return (completedSteps / progressSteps.value.length) * 100;
+  });
+</script>
+
+<template>
+  <div>
+    <div class="mt-6">
+      <div class="overflow-hidden rounded-full bg-zinc-200">
+        <div
+          :style="`width: ${percentage}%`"
+          class="h-2.5 rounded-full bg-primary transition-all"
+          data-test-progress-bar
+        ></div>
+      </div>
+
+      <div
+        :class="gridCols[progressSteps.length - 1]"
+        class="mt-3 hidden w-full text-sm font-medium text-zinc-600 sm:grid"
+      >
+        <div
+          v-for="(step, index) in progressSteps"
+          :key="`step-${index}`"
+          :class="{ 'font-bold': step.completed }"
+          class="text-base text-zinc-900"
+          data-test-step-title
+        >
+          <slot
+            :name="`step-${(index + 1)}`"
+            :step="step"
+          >
+            {{ step.name }}
+          </slot>
+        </div>
+      </div>
+
+      <template v-if="hasStepSlots">
+        <template v-for="(step, index) in progressSteps">
+          <Component
+            :is="step.component"
+            v-if="(unmount && (step?.active ?? true)) || !unmount"
+            v-show="(!unmount && (step?.active ?? true)) || unmount"
+            :key="index"
+          />
+        </template>
+      </template>
+    </div>
+  </div>
+</template>

package/src/modules/components/AppProgressBar/AppProgressBarStep.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="mt-8">
+    <slot></slot>
+  </div>
+</template>

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

@@ -0,0 +1,17 @@
+export const steps = [
+  {
+    name: 'Step 1',
+    completed: true,
+    active: true,
+  },
+  {
+    name: 'Step 2',
+    completed: false,
+    active: false,
+  },
+  {
+    name: 'Step 3',
+    completed: false,
+    active: false,
+  },
+];

package/src/modules/components/AppProgressBar/__tests__/app-progress-bar-step.spec.ts

@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import AppProgressBarStep from '../AppProgressBarStep.vue';
+
+function createWrapper() {
+  return shallowMount(AppProgressBarStep, {
+    slots: { default: '<p data-test-content>Content</p>' },
+  });
+}
+
+describe('the AppProgressBarStep component', () => {
+  it('should render the default slot', () => {
+    const wrapper = createWrapper();
+
+    const content = wrapper.find('[data-test-content]');
+    expect(content.exists()).toBe(true);
+  });
+});

package/src/modules/components/AppProgressBar/__tests__/app-progress-bar.spec.ts

@@ -0,0 +1,77 @@
+import { describe, it, expect } from 'vitest';
+import { h } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import AppProgressBar from '../AppProgressBar.vue';
+import AppProgressBarStep from '../AppProgressBarStep.vue';
+import { steps } from '../__mocks__';
+
+import type { ComponentMountingOptions } from '@vue/test-utils';
+
+function createWrapper(
+  slots: ComponentMountingOptions<typeof AppProgressBar>['slots'] = {},
+  props: ComponentMountingOptions<typeof AppProgressBar>['props'] = { percentage: 25 },
+) {
+  return shallowMount(AppProgressBar, {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    props,
+    slots,
+    global: {
+      stubs: {
+        AppProgressBarStep: false,
+      },
+    },
+  });
+}
+
+describe('the AppProgressBar component', () => {
+  it('should render the progress bar with prop percentage', () => {
+    const wrapper = createWrapper();
+
+    const progressBar = wrapper.find('[data-test-progress-bar]');
+    expect(progressBar.exists()).toBe(true);
+    // @ts-expect-error style does exists on element
+    expect(progressBar.element?.style?.getPropertyValue('width')).toBe('25%');
+  });
+
+  it('should render the progress bar steps by props', () => {
+    const wrapper = createWrapper({}, { steps });
+
+    const progressBar = wrapper.find('[data-test-progress-bar]');
+    expect(progressBar.exists()).toBe(true);
+    // @ts-expect-error style does exists on element
+    expect(progressBar.element?.style?.getPropertyValue('width')).toBe('33.33333333333333%');
+
+    const titles = wrapper.findAll('[data-test-step-title]');
+    expect(titles).toHaveLength(steps.length);
+    expect(titles[0].text()).toBe(steps[0].name);
+    expect(titles[1].text()).toBe(steps[1].name);
+  });
+
+  it('should render the progress bar steps by slot', () => {
+    const step1 = h(AppProgressBarStep, { name: steps[0].name });
+    const step2 = h(AppProgressBarStep, { name: steps[1].name });
+    const step3 = h(AppProgressBarStep, { name: steps[2].name });
+
+    const wrapper = createWrapper({ default: [step1, step2, step3] }, { activeIndex: 1 });
+
+    const progressBar = wrapper.find('[data-test-progress-bar]');
+    expect(progressBar.exists()).toBe(true);
+    // @ts-expect-error style do exists on element
+    expect(progressBar.element?.style?.getPropertyValue('width')).toBe('66.66666666666666%');
+
+    const titles = wrapper.findAll('[data-test-step-title]');
+    expect(titles).toHaveLength(3);
+    expect(titles[0].text()).toBe(steps[0].name);
+    expect(titles[1].text()).toBe(steps[1].name);
+  });
+
+  it('should unmount steps when unmount prop is set to "false"', () => {
+    const step1 = h(AppProgressBarStep, { name: steps[0].name });
+    const step2 = h(AppProgressBarStep, { name: steps[1].name });
+    const step3 = h(AppProgressBarStep, { name: steps[2].name });
+
+    const wrapper = createWrapper({ default: [step1, step2, step3] }, { activeIndex: 1, unmount: false });
+
+    expect(wrapper.findAll('[data-test-step-title]')).toHaveLength(3);
+  });
+});

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

@@ -0,0 +1,21 @@
+import type { Component, RendererElement, RendererNode, VNode } from 'vue';
+
+export interface Props {
+  steps?: Step[];
+  percentage?: number | string;
+  activeIndex?: number;
+  unmount?: boolean;
+}
+
+export interface Step {
+  name: string;
+  completed?: boolean;
+  active?: boolean;
+  component?: Component;
+}
+
+export interface DefaultSlotProps {
+  name: string;
+}
+
+export type DefaultSlot = VNode<RendererNode, RendererElement, DefaultSlotProps> & { type?: { props: DefaultSlotProps }};

package/src/modules/components/AppRating/AppRating.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+  import StarRating from './VueStarRating/StarRating.vue';
+  import { AppCard } from '~components';
+
+  withDefaults(defineProps<{
+    title?: string;
+    stars?: number;
+    showRating?: boolean;
+    readonly?: boolean;
+  }>(), { title: '', stars: 5, showRating: false, readonly: false });
+
+  const model = defineModel<number>({ required: true });
+</script>
+
+<template>
+  <AppCard
+    content-classes="flex items-center gap-8 select-none"
+    class="p-4!"
+  >
+    <div>
+      <slot>
+        {{ title }}
+      </slot>
+    </div>
+
+    <StarRating
+      v-model:rating="model"
+      :rounded-corners="false"
+      :max-rating="stars"
+      :show-rating="showRating"
+      :increment="0.5"
+      :padding="0.5"
+      :star-size="25"
+      :border-width="0"
+      :inline="true"
+      :read-only="readonly"
+      active-color="#FACC15"
+      inactive-color="#D4D4D8"
+      class="-mt-1 ml-auto"
+    />
+  </AppCard>
+</template>