village-hall
/
opnform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve tel input styling

This commit is contained in:
Julien Nahum 2023-09-12 11:25:34 +02:00
parent a53677d2ed
commit 65fb751d38
2 changed files with 18 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
resources/js/components/forms/PhoneInput.vue
View File

@ -13,30 +13,24 @@
</small> </small>
</div> </div>
<div :id="id ? id : name" :disabled="disabled" :name="name" :style="inputStyle" class="flex items-center"> <div :id="id ? id : name" :disabled="disabled" :name="name" :style="inputStyle" class="flex items-center">
<v-select class="w-1/4 mt-1" :data="countries" :value="selectedCountryCode" :inner-style="{ width: '474px' }" <v-select class="w-[110px]" dropdown-class="w-[400px]" input-class="rounded-r-none" :data="countries" :value="selectedCountryCode"
:searchable="true" :search-keys="['name']" :option-key="'code'" :color="'#3B82F6'" :searchable="true" :search-keys="['name']" :option-key="'code'" :color="color"
:placeholder="'Select a country'" :uppercase-labels="true" :theme="theme" @input="onCountryChange"> :placeholder="'Select a country'" :uppercase-labels="true" :theme="theme" @input="onCountryChange">
<template #option="props"> <template #option="props">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2 hover:text-white">
<country-flag :country="props.option.code" /> <country-flag size="normal" class="!-mt-[9px]" :country="props.option.code"/>
<span>{{ props.option.name }}</span> <span class="grow">{{ props.option.name }}</span>
<span>{{ props.option.code }}</span>
<span>{{ props.option.dial_code }}</span> <span>{{ props.option.dial_code }}</span>
</div> </div>
</template> </template>
<template #selected="props"> <template #selected="props">
<div class="flex items-center space-x-2 justify-start"> <div class="flex items-center space-x-2 justify-center overflow-hidden">
<country-flag :country="props.option.code" :style="{ <country-flag size="normal" class="!-mt-[9px]" :country="props.option.code" />
'margin-top': '-0.7em',
'margin-left': '-0.9em',
'margin-right': '-0.6em',
'margin-bottom': '-0.7em'
}" />
<span>{{ props.option.dial_code }}</span> <span>{{ props.option.dial_code }}</span>
</div> </div>
</template> </template>
</v-select> </v-select>
<input v-model="inputVal" type="text" class="inline-flex-grow ml-5" <input v-model="inputVal" type="text" class="inline-flex-grow !border-l-0 !rounded-l-none"
:class="[theme.default.input, { '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200': disabled }]" :class="[theme.default.input, { '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200': disabled }]"
:placeholder="placeholder" :style="inputStyle" @input="onInput"> :placeholder="placeholder" :style="inputStyle" @input="onInput">
</div> </div>
@ -97,5 +91,3 @@ export default {
} }
} }
</script> </script>
<style scoped></style>

7
resources/js/components/forms/components/VSelect.vue
View File

@ -16,7 +16,7 @@
<span class="inline-block w-full rounded-md"> <span class="inline-block w-full rounded-md">
<button type="button" :dusk="dusk" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" <button type="button" :dusk="dusk" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
class="cursor-pointer" class="cursor-pointer"
:style="inputStyle" :class="[theme.SelectInput.input,{'py-2':!multiple || loading,'py-1': multiple, '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled}]" :style="inputStyle" :class="[theme.SelectInput.input,{'py-2':!multiple || loading,'py-1': multiple, '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200':disabled}, inputClass]"
@click="openDropdown" @click="openDropdown"
> >
<div :class="{'h-6':!multiple, 'min-h-8':multiple && !loading}"> <div :class="{'h-6':!multiple, 'min-h-8':multiple && !loading}">
@ -43,7 +43,7 @@
<!-- Select popover, show/hide based on select state. --> <!-- Select popover, show/hide based on select state. -->
<div v-show="isOpen" :dusk="dusk+'_dropdown' " <div v-show="isOpen" :dusk="dusk+'_dropdown' "
class="absolute mt-1 w-full rounded-md bg-white dark:bg-notion-dark-light shadow-lg z-10" class="absolute mt-1 w-full rounded-md bg-white dark:bg-notion-dark-light shadow-lg z-10"
:style="innerStyle" :class="dropdownClass"
> >
<ul tabindex="-1" role="listbox" aria-labelled by="listbox-label" aria-activedescendant="listbox-item-3" <ul tabindex="-1" role="listbox" aria-labelled by="listbox-label" aria-activedescendant="listbox-item-3"
class="rounded-md text-base leading-6 shadow-xs overflow-auto focus:outline-none sm:text-sm sm:leading-5 relative" class="rounded-md text-base leading-6 shadow-xs overflow-auto focus:outline-none sm:text-sm sm:leading-5 relative"
@ -100,7 +100,8 @@ export default {
props: { props: {
data: Array, data: Array,
value: { default: null }, value: { default: null },
innerStyle: { type: Object, default: null }, inputClass: {type: String, default: null},
dropdownClass: {type: String, default: null},
label: { type: String, default: null }, label: { type: String, default: null },
dusk: { type: String, default: null }, dusk: { type: String, default: null },
loading: { type: Boolean, default: false }, loading: { type: Boolean, default: false },