refactor: Add intl-tel-input package for phone number input

Author: danielswiatek

frontend/package.json

@@ -28,6 +28,7 @@
     "@vueuse/core": "^10.6.1",
     "crypto-js": "^4.2.0",
     "http2-proxy": "^5.0.53",
+    "intl-tel-input": "^24.4.0",
     "remixicon": "^3.5.0",
     "socket.io-client": "^4.7.2",
     "vue": "^3.4.18",

frontend/src/components/BasicInputs/BasicInputPhoneNumber.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import intlTelInput from 'intl-tel-input/intlTelInputWithUtils'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+import useValidationModel from '../../composables/useValidationModel'
+
+import BasicFormGroup from './components/BasicFormGroup.vue'
+import { type BasicInputDefaultProps } from './defaultProps'
+
+const props = withDefaults(
+  defineProps<
+    BasicInputDefaultProps<string> & {
+      inputClass?: string
+      disableValidation?: boolean
+    }
+  >(),
+  {
+    type: 'number',
+    autocapitalize: 'off',
+    inputClass: '',
+    disableValidation: false,
+  }
+)
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', eventArgs: string | undefined): void
+  (event: 'focus'): void
+  (event: 'blur'): void
+}>()
+const { model, errorMessage } = props.disableValidation
+  ? {
+      model: useVModel(props, 'modelValue', emit),
+      errorMessage: undefined,
+    }
+  : useValidationModel(props, emit)
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let intl: any = null
+const phone = ref()
+onMounted(async () => {
+  // await import('intl-tel-input/build/js/utils.js')
+  intl = intlTelInput(phone.value, {
+    separateDialCode: true,
+    strictMode: true,
+    initialCountry: 'de',
+    autoPlaceholder: 'off',
+  })
+})
+
+onUnmounted(() => {
+  intl?.destroy()
+})
+</script>
+
+<template>
+  <BasicFormGroup
+    :id="id"
+    :name="name"
+    :label="label"
+    :required="required"
+    :error-message="errorMessage"
+  >
+    <div class="intl-tel-wrapper">
+      <input
+        :id="id || name || label"
+        ref="phone"
+        :value="model"
+        type="tel"
+        :placeholder="placeholder || label || name"
+        :class="inputClass"
+        :name="id || name || label"
+        :disabled="disabled"
+      />
+    </div>
+    <template #label>
+      <slot name="label"></slot>
+    </template>
+  </BasicFormGroup>
+</template>
+
+<style lang="scss">
+@import 'intl-tel-input/build/css/intlTelInput.css';
+.intl-tel-wrapper {
+  .iti {
+    @apply block w-full;
+    .form-control {
+      @apply block w-full;
+    }
+  }
+}
+</style>

frontend/src/components/UIComponents/KontaktItem.vue

@@ -3,6 +3,7 @@ import { TrashIcon } from '@heroicons/vue/24/outline'
 import { ref, watch } from 'vue'
 
 import BasicCheckbox from '../BasicInputs/BasicCheckbox.vue'
+import BasicInputPhoneNumber from '../BasicInputs/BasicInputPhoneNumber.vue'
 
 import BasicInput from '@/components/BasicInputs/BasicInput.vue'
 import type { TKontaktSchema } from '@codeanker/api'
@@ -45,7 +46,7 @@ watch(
       placeholder="Nachname eingeben"
       required
     />
-    <BasicInput
+    <BasicInputPhoneNumber
       v-model="kontakt.telefon"
       label="Mobiltelefonnummer"
       placeholder="Mobiltelefonnummer eingeben"

frontend/src/components/forms/person/FormContactGeneral.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 
 import BasicInput from '@/components/BasicInputs/BasicInput.vue'
+import BasicInputPhoneNumber from '@/components/BasicInputs/BasicInputPhoneNumber.vue'
 
 export interface IContact {
   email: string
@@ -37,9 +38,8 @@ const model = computed({
       placeholder="Email-Adresse"
       required
     />
-    <BasicInput
+    <BasicInputPhoneNumber
       v-model="model.telefon"
-      type="tel"
       label="Telefonnummer"
       placeholder="Telefonnummer"
       required