Fix phone input align
This commit is contained in:
Julien Nahum
parent
3aa80b2b75
commit
4994fd3285
|
|
@ -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){
|
||||
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('+')) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue