@autoafleveren/ui 1.3.2 → 1.3.3

package/src/modules/components/AppInput/AppInput.vue

@@ -0,0 +1,247 @@
+<script lang="ts" generic="ModelValue" setup>
+  import { v4 as uuidv4 } from 'uuid';
+  import { computed, h, ref, useAttrs } from 'vue';
+  import '@vuepic/vue-datepicker/dist/main.css';
+  import { AppInputLabel, AppLicensePlate } from '~components';
+  import { FontAwesomeIcon, byPrefixAndName } from '~icons';
+  import InputIconSlot from './InputIconSlot.vue';
+  import { datePickerIconPerType, isDatePickerCheck, getDatePickerProps } from './datepicker';
+  import { getRichTextProps, isRichTextCheck } from './richText';
+  import { isLocationInputCheck } from './location';
+  import { isChoiceInputCheck } from './choice';
+  import InputComponent from './Input.vue';
+  import { appInputPropDefaults, mustRenderDefaultSlot, mustRenderIconSlot, getInputDomClasses } from '.';
+
+  import type { Component, VNode } from 'vue';
+  import type { VueDatePickerProps } from '@vuepic/vue-datepicker';
+  import type { AppInputProps, DatePickerType, RichTextType, RichtextProps } from './index.d';
+
+  const props = withDefaults(
+    defineProps<AppInputProps<ModelValue>>(),
+    appInputPropDefaults,
+  );
+
+  const emit = defineEmits<{ (event: 'update:modelValue', value: ModelValue): void }>();
+
+  const uuid = uuidv4();
+  const inputUuid = `input-${uuid}`;
+  const isOpen = ref(false);
+  const isFocused = ref(false);
+  const attrs = useAttrs();
+
+  const model = computed({
+    get: (): ModelValue => {
+      if (props.modelModifiers.dotToComma) {
+        const toParse = String(props.modelValue).replace(/,/g, '.');
+
+        if (!isFocused.value && parseFloat(toParse)) {
+          return String(parseFloat(toParse).toFixed(2)).replace(/\./g, ',') as ModelValue;
+        }
+
+        return String(props.modelValue).replace(/\./g, ',') as ModelValue;
+      }
+
+      return props.modelValue as ModelValue;
+    },
+    set: (value: ModelValue): void => {
+      if (props.modelModifiers.dotToComma) {
+        emit('update:modelValue', String(value).replace(/,/g, '.') as ModelValue);
+      } else {
+        emit('update:modelValue', value);
+      }
+    },
+  });
+  const isDatePicker = computed(() => isDatePickerCheck(props.type));
+  const isRichText = computed(() => isRichTextCheck(props.type));
+  const isChoiceInput = computed(() => isChoiceInputCheck(props.type));
+  const isLocationInput = computed(() => isLocationInputCheck(props.type));
+  const defaultTrailingIcon = computed((): Component | undefined => {
+    if (isDatePicker.value) {
+      const type = props.type as DatePickerType;
+
+      return h(FontAwesomeIcon, { icon: byPrefixAndName.far?.[datePickerIconPerType[type]], size: 'xs', class: 'size-4' });
+    }
+
+    if (isLocationInput.value) {
+      return h(FontAwesomeIcon, { icon: byPrefixAndName.far?.['location-dot'], size: 'xs' });
+    }
+
+    if (props.type === 'search') {
+      return h(FontAwesomeIcon, { icon: byPrefixAndName.far?.['magnifying-glass'], size: 'xs', class: 'size-4' });
+    }
+
+    return undefined;
+  });
+  const datePickerProps = computed((): VueDatePickerProps | undefined => {
+    const type = props.type as DatePickerType;
+
+    return isDatePicker.value ? getDatePickerProps(type, inputUuid) : undefined;
+  });
+  const richTextProps = computed((): RichtextProps | undefined => {
+    const type = props.type as RichTextType;
+    const defaultProps = getRichTextProps(type);
+
+    return isRichText.value ? { ...defaultProps, init: { ...defaultProps.init, ...props.init } } : undefined;
+  });
+  const inputType = computed(() => (props.type === 'license' ? 'text' : props.type));
+  const inputAttrs = computed(() => ({
+    id: inputUuid,
+    type: inputType.value,
+    required: props.required,
+    // @ts-expect-error multiple only exists on file inputs
+    multiple: props.multiple,
+    disabled: props.disabled,
+    readonly: props.readonly,
+  }));
+  const inputWrapperComponent = computed((): VNode => {
+    if (props.type === 'license') {
+      return h(AppLicensePlate, { licensePlateClasses: 'p-0!' });
+    }
+
+    return h('div');
+  });
+  const inputWrapperComponentClasses = computed((): string => {
+    const classes = props.inputWrapperClasses;
+    const additionalClasses = props.type === 'license'
+      ? 'items-stretch'
+      : 'relative w-full items-center justify-center';
+
+    return `${classes} ${additionalClasses}`;
+  });
+
+  function check(): void {
+    model.value = attrs.value as ModelValue;
+  }
+
+  function onlyAllowDecimalNumbers(event: KeyboardEvent): void {
+    if (props.modelModifiers.dotToComma) {
+      const key = event.key;
+
+      if (!/[\d,.]/.test(key)) {
+        event.preventDefault();
+      }
+    }
+  }
+
+  function onBlur(): void {
+    isFocused.value = false;
+
+    if (props.modelModifiers.dotToComma && parseFloat((String(model.value) as string))) {
+      model.value = String(parseFloat((String(model.value) as string).replace(/,/g, '.')).toFixed(2)).replace(/\./g, ',') as ModelValue;
+    }
+  }
+
+  function onFocus(): void {
+    isFocused.value = true;
+  }
+
+  defineOptions({ inheritAttrs: false });
+</script>
+
+<template>
+  <div
+    :class="wrapperClasses"
+    :aria-expanded="plain"
+    class="group"
+  >
+    <!--
+      eslint-disable vue/no-duplicate-attr-inheritance
+      Note: Must disable because defineOptions is not recognized in eslint-plugin-vue yet
+      TODO: Remove when eslint-plugin-vue fully supports all features in Vue 3.3
+    -->
+    <AppInputLabel
+      v-if="(label || $slots.label) && !isChoiceInput"
+      :type="type"
+      :has-error="hasError"
+      :disabled="disabled"
+      :for="isDatePicker ? `dp-input-${inputUuid}` : inputUuid"
+      :class="labelClasses"
+    >
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </AppInputLabel>
+
+    <Component
+      :is="inputWrapperComponent"
+      :class="inputWrapperComponentClasses"
+      class="flex"
+    >
+      <InputIconSlot
+        v-if="mustRenderIconSlot('leading', type, loading, plain, disabled, readonly, $slots)"
+        :loading="loading"
+        :class="iconClasses"
+        class="left-3.5 top-2.5"
+        data-test-leading-icon
+      >
+        <slot name="leadingIcon"></slot>
+      </InputIconSlot>
+
+      <InputComponent
+        v-model="model"
+        v-bind="{ ...inputAttrs, ...datePickerProps, ...richTextProps, ...$attrs }"
+        :custom="props.custom"
+        :tabindex="props.tabindex"
+        :class="getInputDomClasses(type, disabled, readonly, loading, hasError, isOpen, plain, $slots, $attrs)"
+        :data-error="hasError ? 'input' : undefined"
+        @open="() => isOpen = true"
+        @blur="onBlur"
+        @focus="onFocus"
+        @closed="() => isOpen = false"
+        @keypress="onlyAllowDecimalNumbers"
+      >
+        <slot></slot>
+      </InputComponent>
+
+      <template v-if="custom">
+        <slot
+          name="input"
+          v-bind="{ check, checked: attrs.value === model }"
+        ></slot>
+      </template>
+
+      <FontAwesomeIcon
+        v-if="!custom && type === 'checkbox'"
+        :icon="byPrefixAndName.far?.check"
+        class="pointer-events-none -ml-4 size-4 -translate-x-0.5 text-white"
+      />
+
+      <!-- Checkbox and radio label (default slot) -->
+      <label
+        v-if="mustRenderDefaultSlot(type, $slots, label)"
+        :for="inputUuid"
+        :class="`{ 'text-error!': hasError, ${labelClasses}}`"
+        :data-error="hasError ? type : undefined"
+        class="cursor-pointer select-none pl-2 text-base peer-disabled:cursor-not-allowed peer-disabled:text-zinc-300"
+        data-test-choice-label
+      >
+        <slot>{{ label }}</slot>
+      </label>
+
+      <InputIconSlot
+        v-if="mustRenderIconSlot('trailing', type, loading, plain, disabled, readonly, $slots)"
+        :loading="loading"
+        :class="iconClasses"
+        class="right-3.5 top-2.5"
+        data-test-trailing-icon
+      >
+        <slot name="trailingIcon">
+          <Component
+            :is="defaultTrailingIcon"
+            v-if="defaultTrailingIcon"
+          />
+        </slot>
+      </InputIconSlot>
+    </Component>
+
+    <p
+      v-if="hasError && errorMessage"
+      :class="errorWrapperClasses"
+      :data-error="hasError ? 'message' : undefined"
+      class="order-2 mt-1.5 flex items-center gap-x-1 text-xs italic text-error"
+      data-test-error-message
+    >
+      {{ errorMessage }}
+    </p>
+  </div>
+</template>

package/src/modules/components/AppInput/FileInput.vue

@@ -0,0 +1,58 @@
+<script  lang="ts" setup>
+  import { computed } from 'vue';
+  import { FontAwesomeIcon, byPrefixAndName } from '~icons';
+  import { AppButton } from '~components';
+
+  import type { FileInputProps } from './index.d';
+
+  const props = defineProps<FileInputProps>();
+
+  const emit = defineEmits<{
+    (event: 'update:modelValue', value: FileInputProps['modelValue']): void;
+  }>();
+
+  const model = computed({
+    get: (): FileInputProps['modelValue'] => props.modelValue,
+    set: (value: FileInputProps['modelValue']): void => emit('update:modelValue', value),
+  });
+
+  function onFileSelected(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    const files = target.files;
+
+    if (!files) { return; }
+
+    // eslint-disable-next-line unicorn/prefer-spread
+    model.value = Array.from(files);
+  }
+
+  defineOptions({ inheritAttrs: false });
+</script>
+
+<template>
+  <div>
+    <label>
+      <input
+        v-bind="{ ...$attrs }"
+        :multiple="multiple"
+        type="file"
+        class="hidden"
+        data-test-input
+        @change="onFileSelected"
+      >
+
+      <slot>
+        <AppButton
+          as="span"
+          color-type="secondary"
+          class="size-10 p-2.5!"
+        >
+          <FontAwesomeIcon
+            :icon="byPrefixAndName.far?.paperclip"
+            class="size-5"
+          />
+        </AppButton>
+      </slot>
+    </label>
+  </div>
+</template>

package/src/modules/components/AppInput/Input.vue

@@ -0,0 +1,141 @@
+<script lang="ts" generic="ModelValue" setup>
+  /* eslint-disable @programic/vue-no-multiple-template-root */
+  import { computed } from 'vue';
+  import { getInputComponent } from '.';
+
+  import type { Component } from 'vue';
+  import type { InputProps } from './index.d';
+
+  const props = defineProps<InputProps<ModelValue> & { custom?: boolean }>();
+
+  const emit = defineEmits<{
+    (event: 'update:modelValue', value: ModelValue): void;
+    (event: 'open'): void;
+  }>();
+
+  /*
+    'defineModel' cannot be used with generic components yet.
+    See https://github.com/vuejs/language-tools/issues/3164
+    TODO: Change to defineModel when it's supported
+   */
+  const model = computed({
+    get: (): ModelValue => props.modelValue,
+    set: (value: ModelValue): void => emit('update:modelValue', value),
+  });
+  const inputComponent = computed((): string | Component => {
+    return getInputComponent(props.type);
+  });
+
+  function onInputTextarea(event: Event): void {
+    // @ts-expect-error cannot set string to ModelValue
+    model.value = event.target.value;
+  }
+</script>
+
+<template>
+  <!--
+    v-model is not working on dynamic components acting as native html element.
+    That's why we use v-if/v-else-if/v-else. TODO: Change to dynamic component if Vue changes this behaviour.
+    See https://vuejs.org/api/built-in-special-elements.html#component
+  -->
+  <input
+    v-if="inputComponent === 'input'"
+    v-show="!custom"
+    v-model="model"
+    :type="type"
+    :tabindex="tabindex"
+    data-test-input
+  >
+
+  <textarea
+    v-else-if="inputComponent === 'textarea'"
+    :value="modelValue as string"
+    :tabindex="tabindex"
+    data-test-textarea
+    @input="onInputTextarea"
+  ></textarea>
+
+  <Component
+    :is="inputComponent"
+    v-else
+    v-model="model"
+    :tabindex="tabindex"
+    @open="() => emit('open')"
+  >
+    <slot></slot>
+  </Component>
+</template>
+
+<style>
+  @reference "./../../../css/main.css";
+
+  .dp__menu .dp__overlay {
+    @apply bg-white rounded-lg;
+  }
+</style>
+
+<style scoped>
+  @reference "./../../../css/main.css";
+
+  :deep(> div) {
+    @apply h-full;
+  }
+
+  .dp__main {
+    @apply h-[44px]! bg-white group-aria-expanded:bg-transparent!;
+  }
+
+  :deep(*) {
+    > .dp__theme_light {
+      @apply bg-white!;
+
+      --dp-primary-color: var(--color-primary);
+      --dp-primary-text-color: #fff;
+
+      > div:not(.dp__arrow_top):not(.dp__arrow_bottom) {
+        @apply h-full;
+      }
+    }
+
+    > .dp__input_wrap {
+      --dp-font-family: 'Inter', sans-serif;
+      --dp-font-size: 14px;
+
+      @apply h-full;
+
+      > .dp--clear-btn {
+        @apply right-10 bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block;
+
+        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 320 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z'%3e%3c/path%3e%3c/svg%3e");
+
+        > svg {
+          @apply hidden;
+        }
+      }
+    }
+
+    > .dp__input {
+      @apply pl-3! pr-10! py-3! h-full! border-none! bg-transparent! hover:bg-zinc-100! rounded-lg placeholder:text-zinc-500!;
+
+      &.dp__disabled {
+        @apply cursor-not-allowed border-zinc-100! bg-zinc-100! group-aria-expanded:bg-transparent!;
+      }
+
+      &.dp__input_readonly {
+        @apply cursor-default border-zinc-300! bg-zinc-50! group-aria-expanded:bg-transparent!;
+      }
+    }
+
+    .dp__icon {
+      @apply text-zinc-700 -mr-4;
+    }
+
+    > .dp__input_icon {
+      @apply hidden mr-3;
+    }
+
+    > .dp__active_date {
+      @apply bg-primary!;
+    }
+  }
+</style>

package/src/modules/components/AppInput/InputIconSlot.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+  import AppLoader from '../AppLoader/AppLoader.vue';
+
+  defineProps<{
+    loading?: boolean;
+  }>();
+</script>
+
+<template>
+  <span class="app-input__icon pointer-events-none absolute z-10 mt-px h-5">
+    <AppLoader
+      v-if="loading"
+      size="small"
+      class="w-4"
+    />
+
+    <slot v-else></slot>
+  </span>
+</template>
+
+<style scoped>
+  @reference "./../../../css/main.css";
+
+  .app-input__icon > :deep(*) {
+    @apply h-full!;
+  }
+</style>

package/src/modules/components/AppInput/LocationInput.vue

@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+  import { computed, onMounted, ref } from 'vue';
+  import { AppBadge } from '~components';
+
+  import type { LocationModelValue, LocationInputProps } from './index.d';
+
+  const props = withDefaults(defineProps<LocationInputProps>(), {
+    placeholder: '',
+    placeOptions: null,
+  });
+
+  const emit = defineEmits<{
+    (event: 'update:modelValue', value: LocationModelValue): void;
+  }>();
+
+  const input = ref<HTMLInputElement | null>(null);
+  const inputModel = ref('');
+
+  const hasLocation = computed((): boolean => {
+    return !!props.modelValue?.postcode || !!props.modelValue?.street || !!props.modelValue?.number;
+  });
+
+  onMounted(async () => {
+    if (!input.value) {
+      return;
+    }
+
+    if (!window?.google) {
+      console.error('Google not defined. use composable useGoogleApi at setup');
+      return;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { Autocomplete } = await google.maps.importLibrary('places') as google.maps.PlacesLibrary;
+
+    const autocomplete = new Autocomplete(input.value as HTMLInputElement, {
+      strictBounds: false,
+      types: ['address'],
+      componentRestrictions: {
+        country: 'nl',
+      },
+      ...props.placeOptions,
+    });
+
+    autocomplete.addListener('place_changed', () => {
+      inputModel.value = '';
+
+      const place = autocomplete.getPlace();
+      const geoLocation = place.geometry?.location;
+      const addressComponents = place.address_components ?? [];
+
+      const lat = geoLocation?.lat();
+      const lng = geoLocation?.lng();
+
+      const postcode = addressComponents.find(component => {
+        return component.types.includes('postal_code');
+      })?.long_name;
+      const street = addressComponents.find(component => {
+        return component.types.includes('route');
+      })?.long_name;
+      const number = parseInt(addressComponents.find(component => {
+        return component.types.includes('street_number');
+      })?.long_name.split(/(\d*)(.*)/s)?.[1] ?? '', 10);
+      const numberSuffix = addressComponents.find(component => {
+        return component.types.includes('street_number');
+      })?.long_name.split(/(\d*)(.*)/s)?.[2];
+      const city = addressComponents.find(component => {
+        return component.types.includes('locality');
+      })?.long_name;
+      const province = addressComponents.find(component => {
+        return component.types.includes('administrative_area_level_1');
+      })?.long_name;
+      const provinceShort = addressComponents.find(component => {
+        return component.types.includes('administrative_area_level_1');
+      })?.short_name;
+
+      input.value?.blur();
+
+      emit('update:modelValue', {
+        postcode,
+        street,
+        number: number > 0 ? number : undefined,
+        numberSuffix,
+        city,
+        province,
+        provinceShort,
+        lat,
+        lng,
+      });
+    });
+  });
+
+  defineOptions({ inheritAttrs: false });
+</script>
+
+<template>
+  <div class="relative w-full">
+    <!--
+      eslint-disable vue/no-duplicate-attr-inheritance
+      Note: Must disable because defineOptions is not recognized in eslint-plugin-vue yet
+      TODO: Remove when eslint-plugin-vue fully supports all features in Vue 3.3
+    -->
+    <input
+      ref="input"
+      :value="inputModel"
+      :placeholder="hasLocation ? '' : placeholder"
+      v-bind="{ ...$attrs }"
+      class="peer text-zinc-900"
+      @keydown.enter.prevent
+    >
+
+    <div
+      v-if="hasLocation"
+      class="pointer-events-none absolute inset-0 flex items-center px-2 peer-focus:hidden"
+      data-test-location-labels
+    >
+      <div class="flex space-x-2">
+        <AppBadge
+          class="empty:hidden"
+          data-test-street-label
+        >
+          {{ modelValue?.street }} {{ modelValue?.number }}{{ modelValue?.numberSuffix }}
+        </AppBadge>
+
+        <AppBadge
+          class="empty:hidden"
+          data-test-postcode-label
+        >
+          {{ modelValue?.postcode }}
+        </AppBadge>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+  @reference "./../../../css/main.css";
+
+  .pac-container {
+    @apply rounded-b-xl shadow-none drop-shadow-lg after:hidden;
+
+    .pac-item {
+      @apply py-2! px-4! cursor-pointer text-zinc-900 hover:bg-zinc-50;
+
+      .pac-icon-marker {
+        @apply hidden;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,13 @@
+import type { LocationModelValue } from '../index.d';
+
+export const location: LocationModelValue = {
+  postcode: '0000 AB',
+  city: 'Chicago',
+  street: 'johndoelane',
+  number: 4,
+  numberSuffix: 'a',
+  provinceShort: 'GE',
+  province: 'Gelderland',
+  lat: 51.000_000_3,
+  lng: 24.214_905_4,
+};