@autoafleveren/ui 1.3.2 → 1.4.0

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

@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest';
+import { flushPromises, shallowMount } from '@vue/test-utils';
+import AppTimelineItem from '../AppTimelineItem.vue';
+import AppTimeline from '../AppTimeline.vue';
+import { timelineItems } from '../__mocks__/timeline';
+
+import type { VueWrapper, ComponentMountingOptions } from '@vue/test-utils';
+import type { TimelineProps } from '../index.d';
+
+function createWrapper(
+  items: TimelineProps['items'],
+  slots?: ComponentMountingOptions<typeof AppTimeline>['slots'],
+): VueWrapper<InstanceType<typeof AppTimeline>> {
+  return shallowMount(AppTimeline, {
+    props: {
+      items,
+    },
+    slots,
+  });
+}
+
+describe('the AppTimeline component', () => {
+  it('renders the timeline items', () => {
+    const wrapper = createWrapper(timelineItems);
+
+    const items = wrapper.findAllComponents(AppTimelineItem);
+    expect(items[0].props()).toStrictEqual({ item: timelineItems[0], itemType: 'default' });
+    expect(items[1].props()).toStrictEqual({ item: timelineItems[1], itemType: 'default' });
+    expect(items[2].props()).toStrictEqual({ item: timelineItems[2], itemType: 'default' });
+  });
+
+  it('renders the timeline items inline', async () => {
+    const wrapper = createWrapper(timelineItems);
+    wrapper.setProps({ type: 'inline' });
+
+    await flushPromises();
+
+    const items = wrapper.findAllComponents(AppTimelineItem);
+    expect(items[0].props()).toStrictEqual({ item: timelineItems[0], itemType: 'inline' });
+    expect(items[1].props()).toStrictEqual({ item: timelineItems[1], itemType: 'inline' });
+    expect(items[2].props()).toStrictEqual({ item: timelineItems[2], itemType: 'inline' });
+  });
+
+  it('can override the default slot', () => {
+    const slot = '<span>slot</span>';
+    const wrapper = createWrapper(timelineItems, {
+      default: slot,
+    });
+
+    const items = wrapper.findAllComponents(AppTimelineItem);
+    expect(items).toHaveLength(0);
+
+    expect(wrapper.element.innerHTML).toBe(slot);
+  });
+});

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

@@ -0,0 +1,30 @@
+import type { Component } from 'vue';
+import type { types } from '.';
+
+export type TimelineBadgeType = typeof types[number];
+export type TimelineType = 'inline' | 'default';
+
+export interface TimelineProps {
+  items?: TimelineItem[];
+  type?: TimelineType;
+}
+
+export interface TimelineItemProps {
+  item: TimelineItem;
+  itemType?: TimelineType;
+}
+
+export interface TimelineItemIconProps {
+  icon: TimelineItem['icon'] | undefined;
+}
+
+export interface TimelineItem {
+  title: string;
+  description?: string;
+  date?: Date;
+  time?: number | string;
+  icon?: Component;
+  sort?: number;
+  last?: boolean;
+  badge?: TimelineBadgeType;
+}

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

@@ -0,0 +1,13 @@
+import type { TimelineBadgeType } from './index.d';
+
+export const types = ['plain', 'default', 'success', 'warning', 'error', 'info', 'inactive'] as const;
+
+export const domClassesPerType: Record<TimelineBadgeType, string[]> = {
+  plain: [],
+  default: ['text-zinc-600'],
+  success: ['text-green-600'],
+  warning: ['text-yellow-600'],
+  error: ['text-red-600'],
+  info: ['text-sky-600'],
+  inactive: ['text-orange-500'],
+};

package/src/modules/components/AppToggle/AppToggle.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+  import type { Props } from './index.d';
+
+  const props = withDefaults(defineProps<Props>(), {
+    disabled: false,
+  });
+
+  const modelValue = defineModel<boolean>({ required: false });
+
+  function toggle(): void {
+    if (!props.disabled) {
+      modelValue.value = !modelValue.value;
+    }
+  }
+</script>
+
+<template>
+  <button
+    :aria-checked="modelValue"
+    :disabled="disabled"
+    type="button"
+    class="group relative inline-flex h-6 w-12 shrink-0 cursor-pointer rounded-full border-2 border-transparent
+      bg-zinc-200 transition-colors duration-200 ease-in-out
+      disabled:cursor-not-allowed disabled:opacity-60
+      aria-checked:bg-primary"
+    role="switch"
+    @click="toggle"
+  >
+    <span
+      aria-hidden="true"
+      class="pointer-events-none inline-block size-5 translate-x-0 rounded-full bg-white shadow ring-0
+        transition duration-200 ease-in-out group-aria-checked:!translate-x-6"
+      data-test-handle
+    ></span>
+  </button>
+</template>

package/src/modules/components/AppToggle/__tests__/app-toggle.spec.ts

@@ -0,0 +1,54 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import AppToggle from '../AppToggle.vue';
+
+import type { VueWrapper } from '@vue/test-utils';
+
+function createWrapper(modelValue = false, disabled = false): VueWrapper<InstanceType<typeof AppToggle>> {
+  return shallowMount(AppToggle, { props: { modelValue, disabled } });
+}
+
+describe('the AppToggle component', () => {
+  it('renders the toggle', () => {
+    const wrapper = createWrapper();
+
+    const button = wrapper.find('button');
+    expect(button.exists()).toBe(true);
+    expect(button.attributes('aria-checked')).toBe('false');
+    expect(button.attributes('disabled')).toBeUndefined();
+    expect(button.find('[data-test-handle]').exists()).toBe(true);
+  });
+
+  it('should change checked when active', () => {
+    const wrapper = createWrapper(true);
+
+    const button = wrapper.find('button');
+    expect(button.exists()).toBe(true);
+    expect(button.attributes('aria-checked')).toBe('true');
+  });
+
+  it('can disable the toggle', () => {
+    const wrapper = createWrapper(true, true);
+
+    const button = wrapper.find('button');
+    expect(button.exists()).toBe(true);
+    expect(button.attributes('disabled')).toBe('');
+  });
+
+  it('can toggle', async () => {
+    expect.assertions(5);
+
+    const wrapper = createWrapper();
+
+    const button = wrapper.find('button');
+    expect(button.exists()).toBe(true);
+    expect(button.attributes('aria-checked')).toBe('false');
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+
+    await button.trigger('click');
+
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(1);
+    expect(wrapper.emitted('update:modelValue')?.[0][0]).toBe(true);
+  });
+});

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

@@ -0,0 +1,3 @@
+export interface Props {
+  disabled?: boolean;
+}

package/src/modules/components/AppToggleCard/AppToggleCard.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+  import { useSlots } from 'vue';
+  import { AppToggle } from '~/modules';
+
+  defineProps<{
+    title: string;
+    disabled?: boolean;
+  }>();
+
+  const modelValue = defineModel<boolean>();
+  const slots = useSlots();
+</script>
+
+<template>
+  <div
+    :class="disabled ? 'bg-zinc-50' : 'bg-white'"
+    class="rounded-xl p-4 shadow-[0px_2px_4px_0px_rgba(32,32,32,0.08)]"
+  >
+    <div class="flex justify-between">
+      <span data-test-title>
+        <slot
+          name="title"
+          data-test-title-slot
+        >
+          {{ title }}
+        </slot>
+      </span>
+
+      <AppToggle
+        :ref="title"
+        v-model="modelValue"
+        :disabled="disabled"
+        data-test-toggle
+      />
+    </div>
+
+    <div
+      v-if="slots.default"
+      v-show="modelValue"
+      data-test-default-slot
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>

package/src/modules/components/AppToggleCard/__tests__/app-toggle-card.spec.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import { AppToggle, AppToggleCard } from '~/modules';
+
+import type { VueWrapper } from '@vue/test-utils';
+
+function createWrapper(title = 'title', disabled = false): VueWrapper<InstanceType<typeof AppToggleCard>> {
+  return shallowMount(AppToggleCard, {
+    global: {
+      stubs: {
+        AppToggle: false,
+      },
+    },
+    props: { title, disabled },
+  });
+}
+
+describe('the AppToggleCard component', () => {
+  it('should render the title', () => {
+    const title = 'ToggleCard title';
+    const wrapper = createWrapper(title);
+
+    const titleWrapper = wrapper.find('[data-test-title]');
+    expect(titleWrapper.exists()).toBe(true);
+    expect(titleWrapper.text()).toStrictEqual(title);
+  });
+
+  it('should update modelValue on change', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper();
+    expect(wrapper.vm.modelValue).toBe(false);
+
+    const toggle = wrapper.findComponent(AppToggle);
+    expect(toggle.exists()).toBe(true);
+
+    await toggle.trigger('click');
+
+    expect(wrapper.vm.modelValue).toBe(true);
+  });
+
+  it('should not be turned off when disabled', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper('disabled item', true);
+    expect(wrapper.vm.modelValue).toBe(false);
+
+    const toggle = wrapper.findComponent(AppToggle);
+    expect(toggle.exists()).toBe(true);
+
+    await toggle.trigger('click');
+
+    expect(wrapper.vm.modelValue).toBe(false);
+  });
+});

package/src/modules/components/index.ts

@@ -0,0 +1,43 @@
+export { default as AppAlert } from './AppAlert/AppAlert.vue';
+export { default as AppAvatar } from './AppAvatar/AppAvatar.vue';
+export { default as AppBackButton } from './AppBackButton/AppBackButton.vue';
+export { default as AppBadge } from './AppBadge/AppBadge.vue';
+export { default as AppButton } from './AppButton/AppButton.vue';
+export { default as AppDropdownButton } from './AppDropdownButton/AppDropdownButton.vue';
+export { default as AppColor } from './AppColor/AppColor.vue';
+export { default as AppColorCard } from './AppColorCard/AppColorCard.vue';
+export { default as AppCard } from './AppCard/AppCard.vue';
+export { default as AppConfirm } from './AppConfirm/AppConfirm.vue';
+export { default as AppError } from './AppError/AppError.vue';
+export { default as AppImageDropzone } from './AppImageDropzone/AppImageDropzone.vue';
+export { default as AppModal } from './AppModal/AppModal.vue';
+export { default as AppDefinitionList } from './AppDefinitionList/AppDefinitionList.vue';
+export { default as AppDefinitionItem } from './AppDefinitionList/AppDefinitionItem.vue';
+export { default as AppDisclosure } from './AppDisclosure/AppDisclosure.vue';
+export { default as AppDisclosureButton } from './AppDisclosure/AppDisclosureButton.vue';
+export { default as AppDisclosurePanel } from './AppDisclosure/AppDisclosurePanel.vue';
+export { default as AppInput } from './AppInput/AppInput.vue';
+export { default as AppSelect } from './AppSelect/AppSelect.vue';
+export { default as AppInputLabel } from './AppInputLabel/AppInputLabel.vue';
+export { default as AppLoader } from './AppLoader/AppLoader.vue';
+export { default as AppMaps } from './AppMaps/AppMaps.vue';
+export { default as AppNavigationMenu } from './AppNavigationMenu/AppNavigationMenu.vue';
+export { default as AppLicensePlate } from './AppLicensePlate/AppLicensePlate.vue';
+export { default as AppTimeline } from './AppTimeline/AppTimeline.vue';
+export { default as AppTimelineItem } from './AppTimeline/AppTimelineItem.vue';
+export { default as AppTimelineItemIcon } from './AppTimeline/AppTimelineItemIcon.vue';
+export { default as AppTable } from './AppTable/AppTable.vue';
+export { default as AppDataTable } from './AppDataTable/AppDataTable.vue';
+export { default as AppActionBar } from './AppActionBar/AppActionBar.vue';
+export { default as AppPagination } from './AppPagination/AppPagination.vue';
+export { default as AppToggle } from './AppToggle/AppToggle.vue';
+export { default as AppToggleCard } from './AppToggleCard/AppToggleCard.vue';
+export { default as AppMenu } from './AppMenu/AppMenu.vue';
+export { default as AppSection } from './AppSection/AppSection.vue';
+export { default as AppContextMenu } from './AppContextMenu/AppContextMenu.vue';
+export { default as AppProgressBar } from './AppProgressBar/AppProgressBar.vue';
+export { default as AppProgressBarStep } from './AppProgressBar/AppProgressBarStep.vue';
+export { default as AppRating } from './AppRating/AppRating.vue';
+export { default as AppStepper } from './AppStepper/AppStepper.vue';
+export { default as AppDrawer } from './AppDrawer/AppDrawer.vue';
+

package/src/modules/composables/index.ts

@@ -0,0 +1,14 @@
+export { useTippy, Tippy } from 'vue-tippy';
+
+export * from './useNavigation';
+export * from './useLayout';
+export * from './useGoogleApi';
+export * from './useConfirm';
+export * from './useError';
+export * from './useModal';
+export * from './useDrawer';
+export * from './useActionBar';
+export * from './useEcho';
+export * from './useContextMenu';
+export * from './useComputedPosition';
+export * from './useFocusTrap';

package/src/modules/composables/useActionBar/__mocks__/index.ts

@@ -0,0 +1,17 @@
+import { PencilIcon } from '~icons';
+
+import type { Action } from '~components/AppActionBar/index.d';
+
+export const confirmableAction = {
+  name: 'Delete',
+  icon: PencilIcon,
+  confirm: true,
+};
+
+export const actions: Action[] = [
+  {
+    name: 'Edit',
+    icon: PencilIcon,
+  },
+  confirmableAction,
+];

package/src/modules/composables/useActionBar/__tests__/index.spec.ts

@@ -0,0 +1,62 @@
+import { describe, it, expect } from 'vitest';
+import { useActionBar } from '../index';
+import { actions } from '../__mocks__';
+
+describe('the useActionBar composables', () => {
+  const actionBar = useActionBar();
+
+  it('can set a selection', () => {
+    actionBar.setSelection([1, 2]);
+
+    expect(actionBar.selection.value).toStrictEqual([1, 2]);
+
+    actionBar.setSelection([2, 3]);
+
+    expect(actionBar.selection.value).toStrictEqual([2, 3]);
+
+    actionBar.resetSelection();
+
+    expect(actionBar.selection.value).toStrictEqual([]);
+  });
+
+  it('can set actions', () => {
+    actionBar.setActions(actions);
+
+    expect(actionBar.actions.value).toStrictEqual(actions);
+
+    actionBar.setSelection([]);
+
+    expect(actionBar.selection.value).toStrictEqual([]);
+  });
+
+  it('can close the actionBar', () => {
+    actionBar.isOpen.value = true;
+
+    actionBar.close();
+
+    expect(actionBar.isOpen.value).toBe(false);
+  });
+
+  it('can open the actionBar', () => {
+    actionBar.isOpen.value = false;
+
+    actionBar.open();
+
+    expect(actionBar.isOpen.value).toBe(true);
+  });
+
+  it('can set onResetSelection callback', () => {
+    expect(actionBar.onResetSelection.value).toBeUndefined();
+
+    actionBar.setSelection([1]);
+
+    let newSelection: Array<number | string> = [1];
+    actionBar.onResetSelection.value = ((selection: Array<number | string>) => {
+      newSelection = selection;
+    });
+
+    actionBar.resetSelection();
+
+    expect(newSelection).toStrictEqual([]);
+  });
+});

package/src/modules/composables/useActionBar/index.d.ts

@@ -0,0 +1 @@
+export type OnResetSelection = (selection: Array<number | string>) => unknown;

package/src/modules/composables/useActionBar/index.ts

@@ -0,0 +1,67 @@
+import { shallowRef } from 'vue';
+
+import type { Action } from '~components/AppActionBar/index.d';
+import type { OnResetSelection } from './index.d';
+
+const state = {
+  selection: shallowRef<Array<string | number>>([]),
+  tableSelection: shallowRef<unknown[]>([]),
+  actions: shallowRef<Action[]>([]),
+  isOpen: shallowRef(false),
+  onResetSelection: shallowRef<OnResetSelection>(),
+  selectionText: shallowRef<string>(':selection selected'),
+};
+
+export function useActionBar<T = number>() {
+  function setSelection(selection: T[]): void {
+    // @ts-expect-error type mismatch, but we want to allow any type of selection
+    state.selection.value = selection;
+
+    open();
+  }
+
+  function setTableSelection(selection: unknown[]): void {
+    state.tableSelection.value = selection;
+  }
+
+  function setActions(actions: Action[]): void {
+    state.actions.value = actions;
+
+    open();
+  }
+
+  function resetSelection(): void {
+    state.selection.value.splice(0);
+
+    state.onResetSelection.value?.(state.selection.value);
+  }
+
+  function setSelectionText(selectionText: string): void {
+    state.selectionText.value = selectionText;
+  }
+
+  function close(): void {
+    state.isOpen.value = false;
+
+    document.querySelectorAll('[data-tippy-root]')?.forEach(tippyRoot => {
+      // @ts-expect-error global _tippy not recognized
+      // eslint-disable-next-line no-underscore-dangle
+      tippyRoot._tippy?.hide(); tippyRoot._tippy?.destroy();
+    });
+  }
+
+  function open(): void {
+    state.isOpen.value = true;
+  }
+
+  return {
+    ...state,
+    resetSelection,
+    setSelection,
+    setTableSelection,
+    setSelectionText,
+    setActions,
+    open,
+    close,
+  };
+}

package/src/modules/composables/useComputedPosition/index.d.ts

@@ -0,0 +1,16 @@
+import type { MaybeRef } from 'vue';
+import type { Middleware } from '@floating-ui/dom';
+import type { Placement } from '@floating-ui/utils';
+import type { MaybeFunction } from '~/typings/utilities';
+
+export interface Options {
+  center?: boolean;
+  active?: boolean;
+  placement?: Placement;
+  mainAxis?: number;
+  crossAxis?: number;
+  sizeElement?: string | HTMLElement;
+  middleware?: Middleware[];
+}
+
+export type ReferenceElement = MaybeRef<MaybeFunction<Component | HTMLElement>>;