update vselect & phone input

This commit is contained in:
Forms Dev 2023-11-17 17:18:43 +05:30
parent 81a6d33681
commit 0e8765509a
4 changed files with 57 additions and 45 deletions

View File

@ -1,18 +1,11 @@
<template>
<div :class="wrapperClass" :style="inputStyle">
<slot name="label">
<label v-if="label" :for="id ? id : name"
:class="[theme.default.label, { 'uppercase text-xs': uppercaseLabels, 'text-sm': !uppercaseLabels }]"
<input-wrapper
v-bind="$props"
>
{{ label }}
<span v-if="required" class="text-red-500 required-dot">*</span>
</label>
</slot>
<div v-if="help && helpPosition == 'above_input'" class="flex mb-1">
<small :class="theme.default.help" class="grow">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
</div>
<template #label>
<slot name="label" />
</template>
<div :id="id ? id : name" :name="name" :style="inputStyle" class="flex items-center">
<v-select v-model="selectedCountryCode" class="w-[130px]" dropdown-class="w-[300px]" input-class="rounded-r-none"
:data="countries"
@ -39,30 +32,50 @@
:placeholder="placeholder" :style="inputStyle" @input="onInput"
>
</div>
<div v-if="help && helpPosition=='below_input'" class="flex">
<small :class="theme.default.help" class="grow">
<slot name="help"><span class="field-help" v-html="help" /></slot>
</small>
</div>
<has-error v-if="hasValidation" :form="form" :field="name" />
</div>
<template #help>
<slot name="help" />
</template>
<template #error>
<slot name="error" />
</template>
</input-wrapper>
</template>
<script>
import inputMixin from '~/mixins/forms/input.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'
import parsePhoneNumber from 'libphonenumber-js'
export default {
phone: 'PhoneInput',
components: { CountryFlag },
mixins: [inputMixin],
components: { InputWrapper, CountryFlag },
props: {
...inputProps,
canOnlyCountry: { type: Boolean, default: false },
unavailableCountries: { type: Array, default: () => [] }
},
setup (props, context) {
const {
compVal,
inputStyle,
hasValidation,
hasError
} = useFormInput(props, context)
return {
compVal,
inputStyle,
hasValidation,
hasError
}
},
data () {
return {
selectedCountryCode: null,

View File

@ -7,7 +7,6 @@
</template>
<v-select v-model="compVal"
:dusk="name"
:data="finalOptions"
:label="label"
:option-key="optionKey"
@ -29,6 +28,7 @@
@update-options="updateOptions"
>
<template #selected="{option}">
<slot name="selected" :option="option" :optionName="getOptionName(option)">
<template v-if="multiple">
<div class="flex items-center truncate mr-6">
<span v-for="(item,index) in option" :key="item" class="truncate">
@ -38,12 +38,11 @@
</div>
</template>
<template v-else>
<slot name="selected" :option="option" :optionName="getOptionName(option)">
<div class="flex items-center truncate mr-6">
<div>{{ getOptionName(option) }}</div>
</div>
</slot>
</template>
</slot>
</template>
<template #option="{option, selected}">
<slot name="option" :option="option" :selected="selected">

View File

@ -31,7 +31,7 @@
</span>
</button>
</span>
<div v-show="isOpen" :dusk="dusk+'_dropdown' "
<div v-show="isOpen"
class="absolute mt-1 rounded-md bg-white dark:bg-notion-dark-light shadow-lg z-10"
:class="dropdownClass"
>
@ -51,7 +51,7 @@
<li v-for="item in filteredOptions" :key="item[optionKey]" role="option" :style="optionStyle"
:class="{'px-3 pr-9': multiple, 'px-3': !multiple}"
class="text-gray-900 cursor-default select-none relative py-2 cursor-pointer group hover:text-white hover-bg-form-color focus:outline-none focus-text-white focus-nt-blue"
:dusk="dusk+'_option'" @click="select(item)"
@click="select(item)"
>
<slot name="option" :option="item" :selected="isSelected(item)" />
</li>

View File

@ -207,8 +207,8 @@
Use simple text input
</v-checkbox>
<template v-if="field.type === 'phone_number' && !field.use_simple_text_input">
<v-select v-model="field.unavailable_countries" class="mt-4"
:data="allCountries" :multiple="true"
<select-input v-model="field.unavailable_countries" class="mt-4" wrapper-class="relative"
:options="allCountries" :multiple="true"
:searchable="true" :search-keys="['name']" :option-key="'code'" :emit-key="'code'"
label="Disabled countries" :placeholder="'Select a country'"
help="Remove countries from the phone input"
@ -233,8 +233,8 @@
</svg>
</span>
</template>
</v-select>
<small class="flex">
</select-input>
<small class="flex -mt-2">
<a href="#" class="grow" @click.prevent="selectAllCountries">Select All</a>
<a href="#" @click.prevent="field.unavailable_countries=null">Un-select All</a>
</small>