@autoafleveren/ui 1.3.2 → 1.3.3

package/src/modules/components/AppInput/__tests__/location-input.spec.ts

@@ -0,0 +1,159 @@
+/* eslint-disable max-classes-per-file, class-methods-use-this */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { flushPromises, shallowMount } from '@vue/test-utils';
+import { location as locationMock } from '../__mocks__/location';
+import LocationInput from '../LocationInput.vue';
+
+import type { VueWrapper } from '@vue/test-utils';
+import type { LocationInputProps } from '../index.d';
+
+const googleEventListenerMock = vi.fn();
+let googleEventListenerHandler: () => void = () => undefined;
+
+const importLibrary = vi.fn().mockResolvedValue({
+  Autocomplete: class {
+    private readonly input: HTMLInputElement | null = null;
+    private readonly options: google.maps.places.AutocompleteOptions | null = null;
+
+    private constructor(input: HTMLInputElement, options: google.maps.places.AutocompleteOptions | null) {
+      this.input = input;
+      this.options = options;
+    }
+
+    public addListener(eventName: string, handler: () => void) {
+      googleEventListenerMock(eventName, handler);
+      googleEventListenerHandler = handler;
+    }
+
+    public getPlace() {
+      return {
+        geometry: {
+          location: {
+            lat: () => 51.000_000_3,
+            lng: () => 24.214_905_4,
+          },
+        },
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        address_components: [
+          {
+            types: ['postal_code'],
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            long_name: '0000 AB',
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            short_name: '0000 AB',
+          },
+          {
+            types: ['administrative_area_level_1'],
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            long_name: 'Gelderland',
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            short_name: 'GE',
+          },
+          {
+            types: ['route'],
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            long_name: 'johndoelane',
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            short_name: 'johndoelane',
+          },
+          {
+            types: ['street_number'],
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            long_name: '4a',
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            short_name: '4a',
+          },
+          {
+            types: ['locality'],
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            long_name: 'Chicago',
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            short_name: 'CH',
+          },
+        ],
+      };
+    }
+  },
+});
+
+// @ts-expect-error google does not exists on window
+window.google = { maps: { importLibrary } };
+
+function createWrapper(props?: Partial<LocationInputProps>): VueWrapper<InstanceType<typeof LocationInput>> {
+  return shallowMount(LocationInput, {
+    props: {
+      apiKey: 'apiKey',
+      ...props,
+    },
+  });
+}
+
+describe('the LocationInput component', () => {
+  beforeEach(() => {
+    importLibrary.mockClear();
+    googleEventListenerMock.mockClear();
+  });
+
+  it('should render the default elements', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.find('input').exists()).toBe(true);
+    expect(wrapper.find('[data-test-location-labels]').exists()).toBe(false);
+  });
+
+  it('should pass props and attrs to the input', () => {
+    const wrapper = createWrapper({ placeholder: 'placeholder' });
+
+    const input = wrapper.find('input');
+    expect(input.exists()).toBe(true);
+    expect(input.attributes('placeholder')).toBe('placeholder');
+  });
+
+  it('should execute all google handlers on mount', async () => {
+    expect.assertions(6);
+
+    expect(importLibrary).toHaveBeenCalledTimes(0);
+    expect(googleEventListenerMock).toHaveBeenCalledTimes(0);
+
+    createWrapper();
+
+    await flushPromises();
+
+    expect(importLibrary).toHaveBeenCalledTimes(1);
+    expect(importLibrary).toHaveBeenCalledWith('places');
+
+    expect(googleEventListenerMock).toHaveBeenCalledTimes(1);
+    expect(googleEventListenerMock).toHaveBeenCalledWith('place_changed', expect.any(Function));
+  });
+
+  it('emits an event if Google fires listener \'event_changed\'', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper();
+
+    expect(wrapper.emitted()).not.toHaveProperty('update:modelValue');
+
+    await flushPromises();
+
+    googleEventListenerHandler();
+
+    expect(wrapper.emitted()).toHaveProperty('update:modelValue');
+    expect(wrapper.emitted('update:modelValue')?.[0]?.[0]).toStrictEqual(locationMock);
+  });
+
+  it('shows custom location labels when input has value', () => {
+    const wrapper = createWrapper({
+      modelValue: locationMock,
+    });
+
+    expect(wrapper.find('[data-test-location-labels]').exists()).toBe(true);
+
+    expect(wrapper.find('[data-test-street-label]').exists()).toBe(true);
+    expect(wrapper.find('[data-test-street-label]').text()).toBe(
+      `${locationMock.street} ${locationMock.number}${locationMock.numberSuffix}`,
+    );
+
+    expect(wrapper.find('[data-test-postcode-label]').exists()).toBe(true);
+    expect(wrapper.find('[data-test-postcode-label]').text()).toBe(locationMock.postcode);
+  });
+});

package/src/modules/components/AppInput/choice.ts

@@ -0,0 +1,24 @@
+import type { ChoiceType, InputType } from './index.d';
+
+export const choiceInputTypes = ['radio', 'checkbox'] as const;
+
+export function isChoiceInputCheck(inputType: InputType): inputType is ChoiceType {
+  // @ts-expect-error type-check function should not cause type error
+  return choiceInputTypes.includes(inputType);
+}
+
+export const defaultChoiceInputDomClasses = `peer text-zinc-700 appearance-none h-5 w-5 border
+  border-zinc-300 cursor-pointer checked:border-[5px]! checked:border-primary disabled:border-10
+  disabled:border-zinc-100! disabled:cursor-not-allowed focus:border-2 focus:border-primary
+  focus-visible:outline-hidden`;
+
+export const defaultCheckboxInputDomClasses = 'rounded-md bg-white checked:bg-primary';
+
+export function getChoiceInputDomClasses(inputType: InputType, hasError: boolean): Record<string, boolean> {
+  return {
+    [defaultChoiceInputDomClasses]: true,
+    [defaultCheckboxInputDomClasses]: inputType === 'checkbox',
+    'rounded-full': inputType === 'radio',
+    'border-error!': hasError,
+  };
+}

package/src/modules/components/AppInput/datepicker.ts

@@ -0,0 +1,62 @@
+import { nl } from 'date-fns/locale';
+
+import type { VueDatePickerProps } from '@vuepic/vue-datepicker';
+import type { DatePickerType, InputType } from './index.d';
+
+export const datePickerTypes = ['date', 'datetime', 'time', 'year', 'month', 'week'] as const;
+
+export const datePickerIconPerType: Record<DatePickerType, string> = {
+  time: 'clock',
+  week: 'calendar',
+  date: 'calendar',
+  year: 'calendar',
+  month: 'calendar',
+  datetime: 'calendar',
+};
+
+export function isDatePickerCheck(inputType: InputType): inputType is DatePickerType {
+  // @ts-expect-error type-check function should not cause type error
+  return datePickerTypes.includes(inputType);
+}
+
+export function getDatePickerFormat(datePickerType: DatePickerType): string {
+  switch (datePickerType) {
+    case 'datetime':
+      return 'd LLLL yyyy HH:mm';
+    case 'time':
+      return 'HH:mm';
+    case 'year':
+      return 'yyyy';
+    case 'month':
+      return 'LLLL';
+    case 'week':
+      return 'd LLLL yyyy';
+    case 'date':
+    default:
+      return 'd LLLL yyyy';
+  }
+}
+
+export function getDatePickerProps(
+  datePickerType: DatePickerType,
+  inputUuid: string,
+): VueDatePickerProps {
+  return {
+    locale: 'nl',
+    uid: inputUuid,
+    autoApply: true,
+    clearable: false,
+    formatLocale: nl,
+    format: getDatePickerFormat(datePickerType),
+    timePicker: datePickerType === 'time',
+    weekPicker: datePickerType === 'week',
+    yearPicker: datePickerType === 'year',
+    monthPicker: datePickerType === 'month',
+    enableTimePicker: ['time', 'datetime'].includes(datePickerType),
+    teleport: true,
+    textInput: {
+      ...(datePickerType === 'time' ? { format: 'HH:mm' } : {}),
+      ...(datePickerType === 'date' ? { format: 'dd-MM-yyyy' } : {}),
+    },
+  };
+}

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

@@ -0,0 +1,68 @@
+import type { IPropTypes } from '@tinymce/tinymce-vue/lib/cjs/main/ts/components/EditorPropTypes';
+import type { generalInputTypes } from '.';
+import type { choiceInputTypes } from './choice';
+import type { datePickerTypes } from './datepicker';
+import type { locationTypes } from './location';
+import type { richTextTypes } from './richText';
+
+export type ChoiceType = typeof choiceInputTypes[number];
+export type DatePickerType = typeof datePickerTypes[number];
+export type LocationType = typeof locationTypes[number];
+export type RichTextType = typeof richTextTypes[number];
+export type GeneralInputTypes = typeof generalInputTypes[number];
+export type InputType = GeneralInputTypes | ChoiceType | DatePickerType | LocationType | RichTextType | 'file' | 'license' | 'color';
+export type IconPosition = 'leading' | 'trailing';
+
+export interface AppInputProps<ModelValue> {
+  type: InputType;
+  modelValue: ModelValue;
+  modelModifiers?: {
+    dotToComma?: boolean;
+  };
+  readonly?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  custom?: boolean;
+  required?: boolean;
+  hasError?: boolean;
+  plain?: boolean;
+  errorMessage?: string;
+  label?: string;
+  tabindex?: number | string;
+  wrapperClasses?: string;
+  errorWrapperClasses?: string;
+  inputWrapperClasses?: string;
+  iconClasses?: string;
+  labelClasses?: string;
+  init?: Partial<IPropTypes & Record<string, unknown>>;
+}
+
+export type InputProps<ModelValue> = Pick<AppInputProps<ModelValue>, 'modelValue' | 'tabindex' | 'type' | 'custom'>;
+
+export interface LocationModelValue {
+  postcode?: string;
+  city?: string;
+  street?: string;
+  number?: number;
+  numberSuffix?: string;
+  province?: string;
+  provinceShort?: string;
+  lat?: number;
+  lng?: number;
+}
+
+export interface LocationInputProps {
+  placeholder?: string;
+  placeOptions?: google.maps.places.AutocompleteOptions | null;
+  modelValue?: LocationModelValue | null;
+}
+
+export interface FileInputProps {
+  modelValue: File | File[] | null;
+  multiple?: boolean;
+}
+
+export interface RichtextProps {
+  apiKey: string;
+  init: Partial<IPropTypes & Record<string, unknown>>;
+}

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

@@ -0,0 +1,133 @@
+import VueDatePicker from '@vuepic/vue-datepicker';
+import Editor from '@tinymce/tinymce-vue';
+import { datePickerTypes, isDatePickerCheck } from './datepicker';
+import { isLocationInputCheck } from './location';
+import { isRichTextCheck } from './richText';
+import { choiceInputTypes, getChoiceInputDomClasses, isChoiceInputCheck } from './choice';
+import LocationInput from './LocationInput.vue';
+import FileInput from './FileInput.vue';
+
+import type { Component, Slots, InputHTMLAttributes } from 'vue';
+import type { IconPosition, InputType } from './index.d';
+
+export const generalInputTypes = ['email', 'number', 'search', 'tel', 'text', 'url', 'password', 'textarea'] as const;
+export const inputTypes = [...generalInputTypes, ...choiceInputTypes, ...datePickerTypes, 'file', 'license'] as const;
+
+export const appInputPropDefaults = {
+  disabled: false,
+  readonly: false,
+  loading: false,
+  required: false,
+  multiple: false,
+  hasError: false,
+  label: undefined,
+  plain: false,
+  custom: false,
+  errorMessage: '',
+  modelModifiers: () => ({}),
+} as const;
+
+export function getInputComponent(inputType: InputType): string | Component {
+  if (isDatePickerCheck(inputType)) {
+    return VueDatePicker;
+  }
+
+  if (isRichTextCheck(inputType)) {
+    return Editor;
+  }
+
+  if (isLocationInputCheck(inputType)) {
+    return LocationInput;
+  }
+
+  if (inputType === 'file') {
+    return FileInput;
+  }
+
+  if (inputType === 'textarea') {
+    return 'textarea';
+  }
+
+  return 'input';
+}
+
+export function isLicenseInputCheck(inputType: InputType): boolean {
+  return inputType === 'license';
+}
+
+export function mustRenderDefaultSlot(inputType: InputType, slots: Slots, label?: string): boolean {
+  return isChoiceInputCheck(inputType) && (!!slots.default || !!label);
+}
+
+export function mustRenderIconSlot(
+  position: IconPosition,
+  inputType: InputType,
+  isLoading: boolean,
+  plain: boolean,
+  disabled: boolean,
+  readonly: boolean,
+  slots: Slots,
+): boolean {
+  if (isChoiceInputCheck(inputType) || isLicenseInputCheck(inputType)) {
+    return false;
+  }
+
+  if (position === 'leading' && isLocationInputCheck(inputType)) {
+    return false;
+  }
+
+  if (position === 'trailing') {
+    return !!slots.trailingIcon
+      || (isDatePickerCheck(inputType) && !plain && !disabled && !readonly)
+      || (isLocationInputCheck(inputType) && !plain)
+      || (inputType === 'search' && !plain)
+      || (isLoading && !slots.leadingIcon);
+  }
+
+  return !!slots[`${position}Icon`];
+}
+
+export const defaultInputDomClasses = `block w-full appearance-none rounded-lg
+  placeholder:text-zinc-300 focus:outline-hidden text-base
+  disabled:cursor-not-allowed disabled:border-zinc-100 disabled:!bg-zinc-50`;
+
+export function getInputDomClasses(
+  inputType: InputType,
+  isDisabled: boolean,
+  isReadonly: boolean,
+  loading: boolean,
+  hasError: boolean,
+  isOpen: boolean,
+  plain: boolean,
+  slots: Slots,
+  attributes: InputHTMLAttributes,
+): Record<string, boolean> {
+  if (isChoiceInputCheck(inputType)) {
+    return getChoiceInputDomClasses(inputType, hasError);
+  }
+
+  const inputTextCenter = (attributes?.class ?? '').includes('text-center');
+  const leadingIcon = mustRenderIconSlot('leading', inputType, loading, plain, isDisabled, isReadonly, slots);
+  const trailingIcon = mustRenderIconSlot('trailing', inputType, loading, plain, isDisabled, isReadonly, slots);
+
+  return {
+    'border-zinc-300': !hasError,
+    'border-zinc-100! bg-zinc-50!': isDisabled,
+    'px-10': inputTextCenter && (leadingIcon || trailingIcon),
+    'pl-10 pr-5 group-aria-expanded:pl-7': leadingIcon && !inputTextCenter,
+    'pr-10 pl-3': trailingIcon && !inputTextCenter,
+    'px-3': !leadingIcon && !trailingIcon,
+    'pr-0!': isDatePickerCheck(inputType),
+    'pl-0!': !leadingIcon && isDatePickerCheck(inputType),
+    [defaultInputDomClasses]: !plain,
+    'block w-full appearance-none bg-transparent focus:outline-hidden focus-visible:outline-hidden': plain,
+    'py-3': !isDatePickerCheck(inputType),
+    'h-[42px]': inputType !== 'textarea',
+    'h-24': inputType === 'textarea',
+    'border-error text-error placeholder-error focus:ring-error focus:border-error': hasError,
+    'text-center bg-transparent text-lg uppercase': isLicenseInputCheck(inputType),
+    'border bg-white focus:ring-1 focus:ring-zinc-300 hover:bg-zinc-100!': !isLicenseInputCheck(inputType) && !plain,
+    'border ring-1 ring-zinc-300': isOpen && !plain,
+    'read-only:cursor-default read-only:border-zinc-300 read-only:bg-zinc-50': !isDatePickerCheck(inputType),
+  };
+}

package/src/modules/components/AppInput/location.ts

@@ -0,0 +1,8 @@
+import type { LocationType, InputType } from './index.d';
+
+export const locationTypes = ['location'] as const;
+
+export function isLocationInputCheck(inputType: InputType): inputType is LocationType {
+  // @ts-expect-error type-check function should not cause type error
+  return locationTypes.includes(inputType);
+}

package/src/modules/components/AppInput/richText.ts

@@ -0,0 +1,45 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type Editor from '@tinymce/tinymce-vue';
+import type { RichTextType, InputType, RichtextProps } from './index.d';
+
+export const richTextTypes = ['richText'] as const;
+
+export function isRichTextCheck(inputType: InputType): inputType is RichTextType {
+  // @ts-expect-error type-check function should not cause type error
+  return richTextTypes.includes(inputType);
+}
+
+export function getRichTextProps(apiKey: string): RichtextProps {
+  return {
+    apiKey,
+    init: {
+      plugins: 'link',
+      toolbar: 'bold italic underline | link',
+      link_title: false,
+      theme: 'silver',
+      menubar: false,
+      statusbar: false,
+      resize: true,
+      language: 'nl',
+      language_url: '/src/modules/plugins/TinyMCE/lang/nl.js',
+      valid_elements: 'p,b,strong,i,em,u,a[href|target],span[style|text-decoration=underline]',
+      content_style: 'html, body { height: calc(100% - 10px); }',
+      setup: (editor: typeof Editor): void => {
+        editor.editorManager.IconManager.add('default', {
+          icons: {
+            bold: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 384 512"><path d="M0 56C0 42.7 10.7 32 24 32l48 0 16 0 124 0c68.5 0 124 55.5 124 124c0 34.7-14.3 66.2-37.3 88.7C339.7 264.9 368 307.1 368 356c0 68.5-55.5 124-124 124L88 480l-16 0-48 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l24 0 0-176L48 80 24 80C10.7 80 0 69.3 0 56zM212 232c42 0 76-34 76-76s-34-76-76-76L96 80l0 152 116 0zM96 280l0 152 148 0c42 0 76-34 76-76s-34-76-76-76l-32 0L96 280z"/></svg>',
+            underline: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 448 512"><path d="M16 56c0-13.3 10.7-24 24-24l96 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-24 0 0 144c0 61.9 50.1 112 112 112s112-50.1 112-112l0-144-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l96 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-24 0 0 144c0 88.4-71.6 160-160 160s-160-71.6-160-160L64 80 40 80C26.7 80 16 69.3 16 56zM0 456c0-13.3 10.7-24 24-24l400 0c13.3 0 24 10.7 24 24s-10.7 24-24 24L24 480c-13.3 0-24-10.7-24-24z"/></svg>',
+            italic: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 384 512"><path d="M128 56c0-13.3 10.7-24 24-24l208 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-68.7 0L144.7 432l87.3 0c13.3 0 24 10.7 24 24s-10.7 24-24 24L24 480c-13.3 0-24-10.7-24-24s10.7-24 24-24l68.7 0L239.3 80 152 80c-13.3 0-24-10.7-24-24z"/></svg>',
+            link: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 640 512"><path d="M580.3 267.2c56.2-56.2 56.2-147.3 0-203.5C526.8 10.2 440.9 7.3 383.9 57.2l-6.1 5.4c-10 8.7-11 23.9-2.3 33.9s23.9 11 33.9 2.3l6.1-5.4c38-33.2 95.2-31.3 130.9 4.4c37.4 37.4 37.4 98.1 0 135.6L433.1 346.6c-37.4 37.4-98.2 37.4-135.6 0c-35.7-35.7-37.6-92.9-4.4-130.9l4.7-5.4c8.7-10 7.7-25.1-2.3-33.9s-25.1-7.7-33.9 2.3l-4.7 5.4c-49.8 57-46.9 142.9 6.6 196.4c56.2 56.2 147.3 56.2 203.5 0L580.3 267.2zM59.7 244.8C3.5 301 3.5 392.1 59.7 448.2c53.6 53.6 139.5 56.4 196.5 6.5l6.1-5.4c10-8.7 11-23.9 2.3-33.9s-23.9-11-33.9-2.3l-6.1 5.4c-38 33.2-95.2 31.3-130.9-4.4c-37.4-37.4-37.4-98.1 0-135.6L207 165.4c37.4-37.4 98.1-37.4 135.6 0c35.7 35.7 37.6 92.9 4.4 130.9l-5.4 6.1c-8.7 10-7.7 25.1 2.3 33.9s25.1 7.7 33.9-2.3l5.4-6.1c49.9-57 47-142.9-6.5-196.5c-56.2-56.2-147.3-56.2-203.5 0L59.7 244.8z"/></svg>',
+            'chevron-left': '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 320 512"><path d="M15 239c-9.4 9.4-9.4 24.6 0 33.9L207 465c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L65.9 256 241 81c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L15 239z"/></svg>',
+            'chevron-right': '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 320 512"><path d="M305 239c9.4 9.4 9.4 24.6 0 33.9L113 465c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l175-175L79 81c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L305 239z"/></svg>',
+            'chevron-up': '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 512 512"><path d="M239 111c9.4-9.4 24.6-9.4 33.9 0L465 303c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-175-175L81 337c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9L239 111z"/></svg>',
+            'chevron-down': '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 512 512"><path d="M239 401c9.4 9.4 24.6 9.4 33.9 0L465 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-175 175L81 175c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9L239 401z"/></svg>',
+            close: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 384 512"><path d="M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z"/></svg>',
+            checkmark: '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 448 512"><path d="M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z"/></svg>',
+          },
+        });
+      },
+    },
+  };
+}

package/src/modules/components/AppInputLabel/AppInputLabel.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+  import type { Props } from './index.d';
+
+  defineProps<Props>();
+</script>
+
+<template>
+  <label
+    :class="{ 'text-error': hasError, 'select-none text-zinc-300': disabled }"
+    :data-error="hasError ? 'label' : undefined"
+    class="mb-2 block text-base font-semibold text-zinc-900"
+  >
+    <slot></slot>
+  </label>
+</template>

package/src/modules/components/AppInputLabel/__tests__/app-input-label.spec.ts

@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import AppInputLabel from '../AppInputLabel.vue';
+
+import type { VueWrapper } from '@vue/test-utils';
+import type { Props } from '../index.d';
+
+function createWrapper(
+  props: Props = {},
+): VueWrapper<InstanceType<typeof AppInputLabel>> {
+  return shallowMount(AppInputLabel, { props, slots: { default: 'label' } });
+}
+
+describe('the AppInputLabel component', () => {
+  it('renders default slot', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.text()).toBe('label');
+    expect(wrapper.classes('text-error')).toBe(false);
+    expect(wrapper.classes('select-none')).toBe(false);
+  });
+
+  it('should add classes when has error', () => {
+    const wrapper = createWrapper({ hasError: true });
+
+    expect(wrapper.text()).toBe('label');
+    expect(wrapper.classes('text-error')).toBe(true);
+    expect(wrapper.classes('select-none')).toBe(false);
+  });
+
+  it('should add classes when disabled', () => {
+    const wrapper = createWrapper({ disabled: true });
+
+    expect(wrapper.text()).toBe('label');
+    expect(wrapper.classes('text-error')).toBe(false);
+    expect(wrapper.classes('select-none')).toBe(true);
+  });
+});

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

@@ -0,0 +1,6 @@
+import type { AppInputProps } from '~components/AppInput/index.d';
+
+export interface Props {
+  disabled?: AppInputProps['disabled'];
+  hasError?: AppInputProps['hasError'];
+}

package/src/modules/components/AppLicensePlate/AppLicensePlate.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+  import type { Country } from './index.d';
+
+  withDefaults(defineProps<{
+    license?: string;
+    country?: Country;
+    licensePlateClasses?: string;
+  }>(), {
+    license: undefined,
+    country: 'NL',
+    licensePlateClasses: undefined,
+  });
+</script>
+
+<template>
+  <div class="flex text-sm font-bold">
+    <span
+      class="flex items-center rounded-l-lg bg-indigo-900 px-2 py-[0.188rem] text-white"
+      data-test-country-code
+    >
+      {{ country }}
+    </span>
+
+    <span
+      :class="licensePlateClasses"
+      class="w-full rounded-r-lg bg-yellow-400 px-2 py-[0.188rem] uppercase"
+      data-test-license-plate
+    >
+      <slot>
+        {{ license }}
+      </slot>
+    </span>
+  </div>
+</template>

package/src/modules/components/AppLicensePlate/__tests__/app-license-plate.spec.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import AppLicensePlate from '../AppLicensePlate.vue';
+
+const licensePlate = '7-SNZ-01';
+
+describe('the AppLicensePlate component', () => {
+  it('should render the country code', () => {
+    const wrapper = shallowMount(AppLicensePlate);
+
+    const countryCodeElement = wrapper.find('[data-test-country-code]');
+    expect(countryCodeElement.exists()).toBe(true);
+    expect(countryCodeElement.text()).toBe('NL');
+  });
+
+  it('should render the license plate by prop', () => {
+    const wrapper = shallowMount(AppLicensePlate, {
+      props: { license: licensePlate },
+    });
+
+    const licensePlateElement = wrapper.find('[data-test-license-plate]');
+    expect(licensePlateElement.exists()).toBe(true);
+    expect(licensePlateElement.text()).toBe(licensePlate);
+  });
+
+  it('should render the license plate by slot', () => {
+    const wrapper = shallowMount(AppLicensePlate, {
+      slots: { default: licensePlate },
+    });
+
+    const licensePlateElement = wrapper.find('[data-test-license-plate]');
+    expect(licensePlateElement.exists()).toBe(true);
+    expect(licensePlateElement.text()).toBe(licensePlate);
+  });
+
+  it('should render the additional classes', () => {
+    const wrapper = shallowMount(AppLicensePlate, {
+      props: {
+        licensePlateClasses: 'extra-class',
+      },
+    });
+
+    const licensePlateElement = wrapper.find('[data-test-license-plate]');
+    expect(licensePlateElement.classes('extra-class')).toBe(true);
+  });
+});

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

@@ -0,0 +1 @@
+export type Country = 'NL';