From 4994fd32856ec5a6980887476fee5dbf934e5ee6 Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Tue, 12 Mar 2024 23:44:49 +0100
Subject: [PATCH] Fix phone input align

---
 client/components/forms/PhoneInput.vue | 53 ++++++++++++++------------
 1 file changed, 28 insertions(+), 25 deletions(-)

diff --git a/client/components/forms/PhoneInput.vue b/client/components/forms/PhoneInput.vue
index ddd7f006..dccb6853 100644
--- a/client/components/forms/PhoneInput.vue
+++ b/client/components/forms/PhoneInput.vue
@@ -3,48 +3,51 @@
     v-bind="inputWrapperProps"
   >
     <template #label>
-      <slot name="label" />
+      <slot name="label"/>
     </template>
 
-    <div :id="id ? id : name" :name="name" :style="inputStyle" class="flex items-center">
+    <div :id="id ? id : name" :name="name" :style="inputStyle" class="flex items-start">
       <v-select v-model="selectedCountryCode" class="w-[130px]" dropdown-class="w-[300px]" input-class="rounded-r-none"
                 :data="countries"
-                :disabled="(disabled || countries.length===1)?true:null" :searchable="true" :search-keys="['name']" :option-key="'code'" :color="color"
+                :disabled="(disabled || countries.length===1)?true:null" :searchable="true" :search-keys="['name']"
+                :option-key="'code'" :color="color"
                 :has-error="hasError"
-                :placeholder="'Select a country'" :uppercase-labels="true" :theme="theme" @update:model-value="onChangeCountryCode"
+                :placeholder="'Select a country'" :uppercase-labels="true" :theme="theme"
+                @update:model-value="onChangeCountryCode"
       >
         <template #option="props">
           <div class="flex items-center space-x-2 hover:text-white">
-            <country-flag size="normal" class="!-mt-[9px]" :country="props.option.code" />
+            <country-flag size="normal" class="!-mt-[9px]" :country="props.option.code"/>
             <span class="grow">{{ props.option.name }}</span>
             <span>{{ props.option.dial_code }}</span>
           </div>
         </template>
         <template #selected="props">
           <div class="flex items-center space-x-2 justify-center overflow-hidden">
-            <country-flag size="normal" class="!-mt-[9px]" :country="props.option.code" />
+            <country-flag size="normal" class="!-mt-[9px]" :country="props.option.code"/>
             <span>{{ props.option.dial_code }}</span>
           </div>
         </template>
       </v-select>
-      <input v-model="inputVal" type="text" class="inline-flex-grow !border-l-0 !rounded-l-none" :disabled="disabled?true:null"
+      <input v-model="inputVal" type="text" class="inline-flex-grow !border-l-0 !rounded-l-none"
+             :disabled="disabled?true:null"
              :class="[theme.default.input, { '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200': disabled }]"
              :placeholder="placeholder" :style="inputStyle" @input="onInput"
       >
     </div>
 
     <template #help>
-      <slot name="help" />
+      <slot name="help"/>
     </template>
 
     <template #error>
-      <slot name="error" />
+      <slot name="error"/>
     </template>
   </input-wrapper>
 </template>
 
 <script>
-import { inputProps, useFormInput } from './useFormInput.js'
+import {inputProps, useFormInput} from './useFormInput.js'
 import InputWrapper from './components/InputWrapper.vue'
 import countryCodes from '~/data/country_codes.json'
 import CountryFlag from 'vue-country-flag-next'
@@ -52,20 +55,20 @@ import parsePhoneNumber from 'libphonenumber-js'
 
 export default {
   phone: 'PhoneInput',
-  components: { InputWrapper, CountryFlag },
+  components: {InputWrapper, CountryFlag},
   props: {
     ...inputProps,
-    canOnlyCountry: { type: Boolean, default: false },
-    unavailableCountries: { type: Array, default: () => [] }
+    canOnlyCountry: {type: Boolean, default: false},
+    unavailableCountries: {type: Array, default: () => []}
   },
 
-  setup (props, context) {
+  setup(props, context) {
     return {
       ...useFormInput(props, context)
     }
   },
 
-  data () {
+  data() {
     return {
       selectedCountryCode: null,
       inputVal: null
@@ -73,7 +76,7 @@ export default {
   },
 
   computed: {
-    countries () {
+    countries() {
       return countryCodes.filter((item) => {
         return !this.unavailableCountries.includes(item.code)
       })
@@ -82,7 +85,7 @@ export default {
 
   watch: {
     inputVal: {
-      handler (val) {
+      handler(val) {
         if (val && val.startsWith('0')) {
           val = val.substring(1)
         }
@@ -93,17 +96,17 @@ export default {
         }
       }
     },
-    compVal(newVal,  oldVal){
-        this.initState()
+    compVal(newVal, oldVal) {
+      this.initState()
     },
-    selectedCountryCode (newVal, oldVal) {
+    selectedCountryCode(newVal, oldVal) {
       if (this.compVal && newVal && oldVal) {
         this.compVal = this.compVal.replace(oldVal.code + oldVal.dial_code, newVal.code + newVal.dial_code)
       }
     }
   },
 
-  mounted () {
+  mounted() {
     if (this.compVal) {
       this.initState()
     }
@@ -116,17 +119,17 @@ export default {
   },
 
   methods: {
-    getCountryBy (code = 'US', type = 'code') {
+    getCountryBy(code = 'US', type = 'code') {
       if (!code) code = 'US' // Default US
       return this.countries.find((item) => {
         return item[type] === code
       }) ?? null
     },
-    onInput (event) {
+    onInput(event) {
       this.inputVal = event?.target?.value.replace(/[^0-9]/g, '')
 
     },
-    onChangeCountryCode () {
+    onChangeCountryCode() {
       if (!this.selectedCountryCode && this.countries.length > 0) {
         this.selectedCountryCode = this.countries[0]
       }
@@ -135,7 +138,7 @@ export default {
       }
     },
     initState() {
-      if(this.compVal  === null){
+      if (this.compVal === null) {
         return;
       }
       if (!this.compVal?.startsWith('+')) {