fix: emits for FormSelect and PhoneInput component (#10226)

This commit is contained in:
Shivam Mishra
2024-10-04 15:09:42 +05:30
committed by GitHub
parent 83100b8f60
commit bd88bfb0fe
3 changed files with 14 additions and 17 deletions

View File

@@ -8,7 +8,7 @@ import {
export default { export default {
props: { props: {
value: { modelValue: {
type: [String, Number], type: [String, Number],
default: '', default: '',
}, },
@@ -29,7 +29,7 @@ export default {
default: false, default: false,
}, },
}, },
emits: ['blur', 'input', 'setCode'], emits: ['blur', 'setCode', 'update:modelValue'],
data() { data() {
return { return {
selectedIndex: -1, selectedIndex: -1,
@@ -37,7 +37,7 @@ export default {
searchCountry: '', searchCountry: '',
activeCountryCode: getActiveCountryCode(), activeCountryCode: getActiveCountryCode(),
activeDialCode: getActiveDialCode(), activeDialCode: getActiveDialCode(),
phoneNumber: this.value, phoneNumber: this.modelValue,
}; };
}, },
computed: { computed: {
@@ -76,12 +76,12 @@ export default {
}, },
}, },
watch: { watch: {
value() { modelValue() {
const number = parsePhoneNumber(this.value); const number = parsePhoneNumber(this.modelValue);
if (number) { if (number) {
this.activeCountryCode = number.country; this.activeCountryCode = number.country;
this.activeDialCode = `+${number.countryCallingCode}`; this.activeDialCode = `+${number.countryCallingCode}`;
this.phoneNumber = this.value.replace( this.phoneNumber = this.modelValue.replace(
`+${number.countryCallingCode}`, `+${number.countryCallingCode}`,
'' ''
); );
@@ -103,7 +103,8 @@ export default {
}, },
onChange(e) { onChange(e) {
this.phoneNumber = e.target.value; this.phoneNumber = e.target.value;
this.$emit('input', e.target.value, this.activeDialCode); this.$emit('update:modelValue', e.target.value);
this.$emit('setCode', this.activeDialCode);
}, },
onBlur(e) { onBlur(e) {
this.$emit('blur', e.target.value); this.$emit('blur', e.target.value);

View File

@@ -201,9 +201,6 @@ export default {
} }
return contactObject; return contactObject;
}, },
onPhoneNumberInputChange(value, code) {
this.activeDialCode = code;
},
setPhoneCode(code) { setPhoneCode(code) {
if (this.phoneNumber !== '' && this.parsePhoneNumber) { if (this.phoneNumber !== '' && this.parsePhoneNumber) {
const dialCode = this.parsePhoneNumber.countryCallingCode; const dialCode = this.parsePhoneNumber.countryCallingCode;
@@ -336,7 +333,6 @@ export default {
:value="phoneNumber" :value="phoneNumber"
:error="isPhoneNumberNotValid" :error="isPhoneNumberNotValid"
:placeholder="$t('CONTACT_FORM.FORM.PHONE_NUMBER.PLACEHOLDER')" :placeholder="$t('CONTACT_FORM.FORM.PHONE_NUMBER.PLACEHOLDER')"
@input="onPhoneNumberInputChange"
@blur="v$.phoneNumber.$touch" @blur="v$.phoneNumber.$touch"
@set-code="setPhoneCode" @set-code="setPhoneCode"
/> />

View File

@@ -29,7 +29,7 @@ export default {
type: String, type: String,
required: true, required: true,
}, },
value: { modelValue: {
type: String, type: String,
default: '', default: '',
}, },
@@ -42,10 +42,10 @@ export default {
default: '', default: '',
}, },
}, },
emits: ['input'], emits: ['update:modelValue'],
methods: { methods: {
onInput(e) { onInput(e) {
this.$emit('input', e.target.value); this.$emit('update:modelValue', e.target.value);
}, },
}, },
}; };
@@ -61,11 +61,11 @@ export default {
> >
<select <select
:id="id" :id="id"
:selected="value" :selected="modelValue"
:name="name" :name="name"
:class="{ :class="{
'text-ash-400': !value, 'text-ash-400': !modelValue,
'text-ash-900': value, 'text-ash-900': modelValue,
'pl-9': icon, 'pl-9': icon,
}" }"
class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm outline-none appearance-none rounded-xl select-caret ring-ash-200 ring-1 ring-inset placeholder:text-ash-900 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6" class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm outline-none appearance-none rounded-xl select-caret ring-ash-200 ring-1 ring-inset placeholder:text-ash-900 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"