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
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.