fix: location input fetching

Author: vis97c

packages/components-vue/src/components/Modal.vue

@@ -177,7 +177,7 @@
 	const modalId = computed(() => {
 		const seed = _.deburr(props.subtitle || props.title);
 
-		return `modal_${seed.replace(" ", "") || randomId}`;
+		return `modal_${seed.replaceAll(" ", "") || randomId}`;
 	});
 	const saveButtonOptions = computed<iButtonConfig>(() => ({
 		title: t("ok"),

packages/components-vue/src/components/base/Input.vue

@@ -57,7 +57,7 @@
 	const inputId = computed(() => {
 		const seed = _.deburr(props.id || props.name || props.placeholder || props.title);
 
-		return `input_${seed.replace(" ", "") || randomId}`;
+		return `input_${seed.replaceAll(" ", "") || randomId}`;
 	});
 
 	function handleInput(e: Event) {

packages/components-vue/src/components/base/Select.vue

@@ -2,7 +2,7 @@
 	<select
 		v-bind="{
 			...$attrs,
-			..._.omit(props, 'modelValue'),
+			..._.omit(props, ['modelValue', 'options']),
 			id: selectId,
 			name: name ?? selectId,
 			title,
@@ -66,7 +66,7 @@
 	const selectId = computed(() => {
 		const seed = _.deburr(props.id || props.name || props.placeholder || props.title);
 
-		return `select_${seed.replace(" ", "") || randomId}`;
+		return `select_${seed.replaceAll(" ", "") || randomId}`;
 	});
 
 	function handleInput(e: Event) {
@@ -83,8 +83,6 @@
 	watch(
 		selectOptions,
 		(options) => {
-			// reset model
-			if (!options.length) emit("update:model-value", "");
 			// set single option as value
 			if (options.length === 1) emit("update:model-value", options[0].value);
 		},

packages/components-vue/src/components/form/Input.vue

@@ -148,6 +148,7 @@
 					v-if="!defaultCountry || models[i].value.length === 1"
 					v-model="models[i].value[0]"
 					:options="countriesArr"
+					name="country"
 					:value="defaultCountry"
 					icon="earth-americas"
 					:theme="theme"
@@ -160,12 +161,8 @@
 				>
 					<SelectFilter
 						v-model="models[i].value[1]"
-						:options="
-							statesArr ||
-							(statesReq.loading || statesReq.content.length
-								? statesReq.content.map(stateToOption)
-								: [models[i].value[0] || defaultCountry])
-						"
+						:options="statesArr || statesReq.content.map(stateToOption)"
+						name="state"
 						icon="mountain-sun"
 						:theme="theme"
 						:disabled="!(models[i].value[0] || defaultCountry)"
@@ -174,11 +171,8 @@
 					/>
 					<SelectFilter
 						v-model="models[i].value[2]"
-						:options="
-							citiesReq.loading || citiesReq.content.length
-								? citiesReq.content.map(cityToOption)
-								: [models[i].value[1]]
-						"
+						:options="citiesReq.content.map(cityToOption)"
+						name="city"
 						icon="city"
 						:theme="theme"
 						:disabled="!models[i].value[1]"
@@ -271,7 +265,7 @@
 	</div>
 </template>
 <script setup lang="ts">
-	import { computed } from "vue";
+	import { computed, reactive } from "vue";
 	import validator from "validator";
 	import _ from "lodash";
 
@@ -372,7 +366,7 @@
 	const models = computed(() => {
 		return props.modelValue.map((value, valueIndex) =>
 			computed({
-				get: () => value,
+				get: () => (Array.isArray(value) ? reactive(value) : value),
 				set: (newValue) => {
 					emit("update:model-value", props.modelValue.toSpliced(valueIndex, 1, newValue));
 				},

packages/components-vue/src/components/form/InputCountriesAPI.vue

@@ -11,12 +11,7 @@
 			<LoaderContentFetch
 				v-slot="citiesReq"
 				:theme="theme"
-				:promise="
-					!!(countryValue && model[0]) &&
-					model[0] !== model[0] &&
-					!!(statesReq.content.length || states) &&
-					unHydrate(getStateCities)
-				"
+				:promise="!!model[1] && unHydrate(getStateCities)"
 				:payload="[countryValue, model[1]]"
 				:fallback="[]"
 				unwrap

packages/components-vue/src/components/form/InputNValues.vue

@@ -6,7 +6,7 @@
 		<slot></slot>
 	</div>
 	<p v-else class="--txtColor-danger">
-		{{ values.map((l) => t("form_requires_n_values", l)).join(" | ") }}
+		{{ values.map((l) => t("form_requires_n_values", l)).join(" or ") }}
 	</p>
 </template>
 

packages/components-vue/src/components/loader/ContentFetch.vue

@@ -108,21 +108,31 @@
 
 	// refetch on url or promise change
 	watch(
-		[() => props.url, () => props.promise],
-		(newValues, oldValues) => {
-			const sameUrl = newValues[0] === oldValues[0];
-			const samePromise = newValues[1] === oldValues[1];
+		() => props.url,
+		(newUrl, oldUrl) => {
+			// prevent muntiple requests
+			if (newUrl === oldUrl) return;
+
+			// refresh
+			if (!loading.value && !!newUrl) refresh();
+			else if (props.fallback) content.value = props.fallback;
+		},
+		{ immediate: false }
+	);
+	watch(
+		() => props.promise,
+		(newPromise, oldPromise) => {
 			/**
 			 * The same promise would trigger the watcher
 			 * We assume here that the same promise is provided
 			 */
-			const possibleSamePromise = newValues[1] && oldValues[1];
+			const possibleSamePromise = !!newPromise && !!oldPromise;
 
 			// prevent muntiple requests
-			if ((sameUrl && samePromise) || !!possibleSamePromise) return;
+			if (newPromise === oldPromise || !!possibleSamePromise) return;
 
 			// refresh
-			if (!loading.value && !!(newValues[1] || newValues[0])) refresh();
+			if (!loading.value && !!newPromise) refresh();
 			else if (props.fallback) content.value = props.fallback;
 		},
 		{ immediate: false }

packages/components-vue/src/components/select/Filter.vue

@@ -47,7 +47,7 @@
 			:theme="theme"
 			:aria-label="t('select_restablish_field')"
 			:title="t('select_restablish_field')"
-			@click.prevent="model = ''"
+			@click.prevent="resetModel"
 		>
 			<IconFa name="xmark" size="20" />
 		</ActionLink>
@@ -56,7 +56,7 @@
 
 <script setup lang="ts">
 	import type { IconName } from "@fortawesome/fontawesome-common-types";
-	import { computed, ref } from "vue";
+	import { computed, ref, watch } from "vue";
 	import _ from "lodash";
 
 	import type { iFormIconProps, iFormOption } from "@open-xamu-co/ui-common-types";
@@ -111,38 +111,24 @@
 	const selectFilterName = computed(() => {
 		const seed = _.deburr(props.id || props.name || props.placeholder || props.title);
 
-		return `select-filter_${seed.replace(" ", "") || randomId}`;
+		return `select-filter_${seed.replaceAll(" ", "") || randomId}`;
 	});
-	const selectOptions = computed<iFormOption[]>(() => {
-		return (props.options ?? []).map(toOption);
-	});
-	const textModel = ref<string | number>(props.modelValue || "");
+	const selectOptions = computed<iFormOption[]>(() => (props.options ?? []).map(toOption));
+	const textModel = ref<string | number>("");
 	/**
 	 * Input model
 	 */
 	const model = computed({
-		get: () => props.modelValue,
-		set: (newModel = "") => {
-			const deburr = (string: string) => _.deburr(string).toLowerCase();
+		get: () => {
+			return props.modelValue;
+		},
+		set: (newModel) => {
+			emit("update:model-value", newModel);
 
 			// look for alias first
-			const option = selectOptions.value.find(({ value, alias }) => {
-				const match = alias ?? value;
-
-				if (typeof newModel === "string" && typeof match === "string") {
-					if (deburr(match) === deburr(newModel)) return true;
-				}
-
-				return match === newModel;
-			});
-
-			if (option) {
-				textModel.value = option.alias || option.value;
-				emit("update:model-value", option.value);
-			} else if (newModel === "") {
-				textModel.value = newModel;
-				emit("update:model-value", newModel);
-			}
+			const option = selectOptions.value.find(({ value }) => value === newModel);
+
+			if (option) textModel.value = option.alias || option.value;
 		},
 	});
 	const isInvalid = computed<boolean>(() => {
@@ -151,15 +137,45 @@
 		return (model.value && !option) || props.invalid;
 	});
 
+	/**
+	 * Clears up input model
+	 */
+	function resetModel() {
+		model.value = "";
+		textModel.value = "";
+	}
+
 	/**
 	 * Handle select input
 	 * @listenerOverride select filter requires specific event handling
 	 */
 	function handleInputChange(e: Event) {
 		const { target } = e as Event & { target: HTMLSelectElement };
+		const deburr = (v: string | number) => _.deburr(String(v)).toLowerCase();
+		const newModel = deburr(target.value);
 
-		model.value = target.value;
+		// look for alias first
+		const option = selectOptions.value.find(({ value, alias }) => {
+			const match = deburr(alias ?? value);
+
+			return match === newModel;
+		});
+
+		if (option) model.value = option.value;
+		else if (model.value) model.value = "";
 	}
 
+	// lifecycle
+
 	if (isBrowser) supportsDatalist.value = !!HTMLDataListElement;
+
+	watch(
+		selectOptions,
+		(newOptions) => {
+			const option = newOptions.find(({ value }) => value === props.modelValue);
+
+			if (option) textModel.value = option.alias || option.value;
+		},
+		{ immediate: true }
+	);
 </script>