matt
/
opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix phone input align

This commit is contained in:
Julien Nahum 2024-03-12 23:44:49 +01:00
parent 3aa80b2b75
commit 4994fd3285
1 changed files with 28 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/components/forms/PhoneInput.vue
View File

@ -6,12 +6,14 @@
<slot name="label"/> <slot name="label"/>
</template> </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" <v-select v-model="selectedCountryCode" class="w-[130px]" dropdown-class="w-[300px]" input-class="rounded-r-none"
:data="countries" :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" :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"> <template #option="props">
<div class="flex items-center space-x-2 hover:text-white"> <div class="flex items-center space-x-2 hover:text-white">
@ -27,7 +29,8 @@
</div> </div>
</template> </template>
</v-select> </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 }]" :class="[theme.default.input, { '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200': disabled }]"
:placeholder="placeholder" :style="inputStyle" @input="onInput" :placeholder="placeholder" :style="inputStyle" @input="onInput"
> >