Skip to content

Commit

Permalink
fix: array type inputs not always emitting
Browse files Browse the repository at this point in the history
vis97c committed Jun 4, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent d263f5c commit 5a8fbec
Showing 3 changed files with 30 additions and 19 deletions.
32 changes: 21 additions & 11 deletions packages/components-vue/src/components/form/Input.vue
Original file line number Diff line number Diff line change
@@ -109,9 +109,7 @@
:invalid="invalid"
:model-value="[model]"
:disabled="readonly"
@update:model-value="
models[i].value = models[i].value.toSpliced(index, 1, $event[0])
"
@update:model-value="updateArrModel(i, index, $event[0])"
/>
</div>
<FormInputNValues
@@ -120,24 +118,26 @@
:values="[2]"
>
<InputText
v-model="models[i].value[0]"
:model-value="models[i].value[0]"
v-bind="inputProps"
:invalid="isInvalidByValidation"
:theme="theme"
:disabled="readonly"
:placeholder="getInputPlaceholder()"
type="password"
class="--width-180:md --flx"
@update:model-value="updateArrModel(i, 0, $event)"
/>
<InputText
v-model="models[i].value[1]"
:model-value="models[i].value[1]"
v-bind="inputProps"
:invalid="isInvalidByValidation"
:theme="theme"
:disabled="readonly"
:placeholder="getInputPlaceholder(1)"
type="password"
class="--width-180:md --flx"
@update:model-value="updateArrModel(i, 1, $event)"
/>
</FormInputNValues>
<FormInputNValues
@@ -168,21 +168,23 @@
:values="[2]"
>
<SelectSimple
v-model="models[i].value[0]"
:model-value="models[i].value[0]"
:theme="theme"
:disabled="readonly"
:options="indicativesArr"
class="--width-180:md --flx"
@update:model-value="updateArrModel(i, 0, $event)"
/>
<InputText
v-model="models[i].value[1]"
:model-value="models[i].value[1]"
v-bind="inputProps"
:invalid="isInvalidByValidation"
:theme="theme"
:disabled="readonly"
:placeholder="getInputPlaceholder()"
type="tel"
class="--width-180:md --flx"
@update:model-value="updateArrModel(i, 1, $event)"
/>
</FormInputNValues>
<FormInputCountriesAPI
@@ -191,11 +193,10 @@
:states="states"
:theme="theme"
:model="models[i].value"
:values="[1, 3]"
>
<SelectFilter
v-if="!defaultCountry || models[i].value.length === 1"
v-model="models[i].value[0]"
:model-value="models[i].value[0]"
:options="countriesArr"
name="country"
:value="defaultCountry"
@@ -204,30 +205,33 @@
:disabled="readonly"
:placeholder="getInputPlaceholder()"
class="--width-180:md --flx"
@update:model-value="updateArrModel(i, 0, $event)"
/>
<div
v-if="models[i].value.length === 3"
class="flx --flxColumn --flxRow-wrap:md --flx-start-stretch --gap-5 --flx"
>
<SelectFilter
v-model="models[i].value[1]"
:model-value="models[i].value[1]"
:options="statesArr || statesReq?.content?.map(stateToOption)"
name="state"
icon="mountain-sun"
:theme="theme"
:disabled="readonly || !(models[i].value[0] || defaultCountry)"
:placeholder="getInputPlaceholder(1)"
class="--width-180:md --flx"
@update:model-value="updateArrModel(i, 1, $event)"
/>
<SelectFilter
v-model="models[i].value[2]"
:model-value="models[i].value[2]"
:options="citiesReq.content.map(cityToOption)"
name="city"
icon="city"
:theme="theme"
:disabled="readonly || !models[i].value[1]"
:placeholder="getInputPlaceholder(2)"
class="--width-180:md --flx"
@update:model-value="updateArrModel(i, 2, $event)"
/>
</div>
</FormInputCountriesAPI>
@@ -432,6 +436,12 @@
);
});
function updateArrModel(modelIndex: number, valuePosition: number, newValue: any) {
const model: any[] = models.value[modelIndex].value;
models.value[modelIndex].value = model.toSpliced(valuePosition, 1, newValue);
}
function choose(value: string | number) {
if (props.input.multiple) {
if (props.modelValue.includes(value)) {
14 changes: 7 additions & 7 deletions packages/components-vue/src/components/form/Stages.vue
Original file line number Diff line number Diff line change
@@ -121,7 +121,7 @@
:aria-label="t('clear')"
:theme="theme"
:disabled="!canSubmit"
@click="fullReset"
@click="resetStages"
>
<IconFa name="broom" :size="20" />
</ActionLink>
@@ -232,7 +232,7 @@
emit("submited", successOrInvalid);
if (successOrInvalid) {
resetStages(props.stages); // reset form
resetStages(); // reset form
props.successFn?.();
}
}
@@ -244,7 +244,7 @@
function getValues(inputs: FormInputClass[]): Record<string, unknown[]> {
return inputs.reduce((acc, input) => ({ ...acc, [input.name]: input.values }), {});
}
function resetStages(newStages: iForm[][]) {
function setStages(newStages: iForm[][]) {
loading.value = true;
// reset
@@ -284,15 +284,15 @@
loading.value = false;
}
function fullReset() {
function resetStages() {
const wasListened = lastListened.value;
loading.value = true;
lastListened.value = undefined;
if (wasListened) emit("input-values", {}, true);
resetStages(props.stages);
setStages(props.stages);
canSubmit.value = !!props.optional;
activeStage.value = 0;
}
@@ -317,9 +317,9 @@
watch(
() => props.stages,
(newStages) => resetStages(newStages),
(newStages) => setStages(newStages),
{ immediate: true }
);
onBeforeUnmount(fullReset);
onBeforeUnmount(resetStages);
</script>
3 changes: 2 additions & 1 deletion packages/components-vue/src/components/select/Filter.vue
Original file line number Diff line number Diff line change
@@ -35,8 +35,9 @@
<InputText
v-model="aliasModel"
:list="selectFilterName"
autocomplete="off"
v-bind="{
..._.omit(props, 'modelValue'),
..._.omit(props, ['modelValue', 'autocomplete']),
type: 'text',
placeholder: t('select_filter_options'),
disabled: (!!modelValue && !isInvalid) || disabled,

0 comments on commit 5a8fbec

Please sign in to comment.