fix: modal, form & dropdown performance

Author: vis97c

packages/common-helpers/src/form/input.ts

@@ -66,20 +66,24 @@ function getDefault<V extends iFormValue = iFormValue>(
 export class FormInputDefault<T extends eFormTypeSimple | eFormTypeComplex = eFormTypeSimple>
 	implements iFormInputDefault<T>
 {
+	// private
+	private _options!: iSelectOption[];
 	// public
 	public type!: T;
 	// public readonly
 	public readonly required!: boolean;
-	public readonly options!: iSelectOption[];
 	public readonly placeholder!: string;
 	public readonly icon!: tFormIcon;
 	public readonly autocomplete!: tFormAutocomplete;
 	public readonly min!: number;
 	public readonly max!: number;
 
-	constructor(formInput: iFormInputDefault<T>) {
+	constructor(
+		formInput: iFormInputDefault<T>,
+		private _rerender?: (fi?: Partial<iFormInputDefault<T>>) => void
+	) {
 		this.required = formInput.required ?? false;
-		this.options = formInput.options?.map(toOption) ?? [];
+		this._options = formInput.options?.map(toOption) ?? [];
 		this.min = formInput.min ?? 1;
 
 		// max cannot be lower than min or more than options if they exist
@@ -92,6 +96,28 @@ export class FormInputDefault<T extends eFormTypeSimple | eFormTypeComplex = eFo
 		if (formInput.icon) this.icon = getIcon(formInput.icon, formInput.type);
 		if (formInput.autocomplete) this.autocomplete = formInput.autocomplete;
 	}
+
+	get options(): iSelectOption[] {
+		return this._options;
+	}
+	set options(updatedOptions: iSelectOption[] | undefined) {
+		this._options = updatedOptions || [];
+		this.rerender();
+	}
+
+	/** Rerender component */
+	public rerender(): void {
+		this._rerender?.(this);
+	}
+
+	/**
+	 * set rerender function
+	 */
+	public setRerender(rerender: (fi?: Partial<iFormInputDefault<T>>) => void) {
+		this._rerender = rerender;
+
+		return this;
+	}
 }
 
 export class FormInput<V extends iFormValue = iFormValue>
@@ -101,8 +127,6 @@ export class FormInput<V extends iFormValue = iFormValue>
 	// private
 	private _values!: (V | V[])[];
 	private _defaults?: [iFormInputDefault, iFormInputDefault, ...iFormInputDefault[]];
-	/** Rerender component */
-	private _rerender?: () => void;
 	// public readonly
 	public readonly name!: string;
 	public readonly title!: string;
@@ -115,9 +139,10 @@ export class FormInput<V extends iFormValue = iFormValue>
 	 */
 	constructor(
 		formInput: iFormInput<V>,
-		private _onUpdatedValues?: (updatedValues: (V | V[])[]) => void
+		private _onUpdatedValues?: (updatedValues: (V | V[])[]) => void,
+		rerender?: (fi?: Partial<iFormInput<V>>) => void
 	) {
-		super(formInput);
+		super(formInput, rerender);
 
 		const values = Array(this.min).fill(getDefault(formInput.type, formInput.defaults));
 
@@ -150,15 +175,16 @@ export class FormInput<V extends iFormValue = iFormValue>
 		updatedDefaults: [iFormInputDefault, iFormInputDefault, ...iFormInputDefault[]] | undefined
 	) {
 		this._defaults = updatedDefaults;
-		// rerender on defaults change
-		this._rerender?.();
+		this.rerender();
 	}
 
 	/**
 	 * set rerender function
+	 *
+	 * @override
 	 */
-	public setRerender(rerender: () => void) {
-		this._rerender = rerender;
+	public setRerender(rerender: (fi?: Partial<iFormInput<V>>) => void) {
+		super.setRerender(rerender);
 
 		return this;
 	}
@@ -193,11 +219,12 @@ export class FormInput<V extends iFormValue = iFormValue>
 	) {
 		const oldFormInput: iFormInput<V> = {
 			...this,
-			values: this._values,
-			defaults: this._defaults,
+			options: this.options,
+			values: this.values,
+			defaults: this.defaults,
 		};
 
-		return new FormInput({ ...oldFormInput, ...overrides }, onUpdatedValues);
+		return new FormInput({ ...oldFormInput, ...overrides }, onUpdatedValues, this.rerender);
 	}
 
 	/**

packages/components-vue/src/components/Dropdown.vue

@@ -24,7 +24,6 @@
 		computed,
 		ref,
 		watch,
-		onMounted,
 		onUnmounted,
 		type Component as VueComponent,
 		type DefineComponent,
@@ -96,12 +95,15 @@
 	});
 
 	function setModel(value = !model.value) {
+		if (value) document.addEventListener("click", clickOutside, true);
+
 		return (model.value = value);
 	}
 
 	function closeDropdown() {
 		emit("close");
 		emit("update:model-value", setModel(false));
+		document.removeEventListener("click", clickOutside, true);
 	}
 	function clickOutside(e: MouseEvent) {
 		const target = e.target as HTMLElement;
@@ -130,10 +132,5 @@
 		},
 		{ immediate: false }
 	);
-	onMounted(() => {
-		document.addEventListener("click", clickOutside, true);
-	});
-	onUnmounted(() => {
-		document.removeEventListener("click", clickOutside, true);
-	});
+	onUnmounted(closeDropdown);
 </script>

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

@@ -1,7 +1,7 @@
 <template>
 	<slot v-if="$slots.toggle" name="toggle" v-bind="{ toggleModal, model }"></slot>
 	<Teleport v-if="!disabled" :id="modalId" :key="modalId" :to="target || 'body'">
-		<dialog ref="modalRef" @close="closeAndResetModal" @mousedown="clickOutside">
+		<dialog ref="modalRef" @close="closeModal" @mousedown="clickOutside">
 			<div
 				v-show="!loading && !hide"
 				class="modal"
@@ -21,7 +21,7 @@
 						<ActionLink
 							:theme="theme"
 							:aria-label="cancelButtonOptions.title"
-							@click.stop="closeAndResetModal"
+							@click.stop="closeModal()"
 						>
 							<IconFa name="xmark" size="20" />
 						</ActionLink>
@@ -35,7 +35,7 @@
 							:theme="theme"
 							:aria-label="saveButtonOptions.title"
 							:class="saveButtonOptions.btnClass"
-							@click="emit('save', closeAndResetModal, $event)"
+							@click="emit('save', closeModal, $event)"
 						>
 							{{ saveButtonOptions.title }}
 						</ActionButton>
@@ -46,7 +46,7 @@
 							:class="cancelButtonOptions.btnClass"
 							data-dismiss="modal"
 							round=":sm-inv"
-							@click.stop="closeAndResetModal"
+							@click.stop="closeModal()"
 						>
 							<IconFa name="xmark" hidden="-full:sm" />
 							<IconFa name="xmark" regular hidden="-full:sm" />
@@ -66,11 +66,7 @@
 						<p class="--txtColor-light --txtShadow --txtSize-sm">
 							{{ props.hideMessage ? props.hideMessage : t("modal_taking_too_long") }}
 						</p>
-						<ActionButton
-							:theme="theme"
-							:aria-label="t('close')"
-							@click="closeAndResetModal"
-						>
+						<ActionButton :theme="theme" :aria-label="t('close')" @click="closeModal()">
 							{{ t("close") }}
 						</ActionButton>
 					</div>
@@ -192,16 +188,39 @@
 		...(!!props.cancelButton && props.cancelButton),
 	}));
 
-	function closeAndResetModal() {
+	function closeModal(success?: boolean) {
 		modalRef.value?.close();
 		loadingTooLong.value = false;
+		localModel.value = false;
+		resolver.value?.(success); // resolve promise early
 		emit("update:model-value", false);
 		emit("close");
 	}
 	function clickOutside(e: Event) {
 		if (modalRef.value !== e.target) return;
 
-		closeAndResetModal();
+		closeModal();
+	}
+	/**
+	 * Opens modal if requirements are met
+	 */
+	function openModal() {
+		localModel.value = true;
+		modalRef.value?.showModal();
+
+		// close modal if requirements are not meet
+		if (!props.loading && props.hide) {
+			Swal.fire({
+				title: t("swal.modal_unauthorized"),
+				text: props.hideMessage || t("swal.modal_unauthorized_text"),
+				icon: "warning",
+			});
+
+			return closeModal();
+		}
+
+		// display message if loading longer than usual
+		setTimeout(() => (loadingTooLong.value = props.loading), 3000);
 	}
 	/**
 	 * Toggles modal
@@ -210,55 +229,27 @@
 	function toggleModal(success?: boolean) {
 		return new Promise<boolean | undefined>((resolve) => {
 			if (model.value) {
-				// old promise
-				resolver.value?.(success);
-				// current promise
-				resolve(success);
-			} else resolver.value = resolve;
-
-			model.value = !model.value;
+				closeModal(success); // close & resolve old promise
+				resolve(undefined); // bypass promise
+			} else {
+				resolver.value = resolve;
+				openModal();
+			}
 		});
 	}
 
-	/**
-	 * Modal model
-	 */
-	const model = computed({
-		get() {
-			return !props.disabled && localModel.value;
-		},
-		set(value) {
-			if (!value) closeAndResetModal();
-			else {
-				modalRef.value?.showModal();
-
-				// close modal if requirements are not meet
-				if (!props.loading && props.hide) {
-					value = false;
-					closeAndResetModal();
-					Swal.fire({
-						title: t("swal.modal_unauthorized"),
-						text: props.hideMessage || t("swal.modal_unauthorized_text"),
-						icon: "warning",
-					});
-				}
-
-				// display message if loading longer than usual
-				setTimeout(() => (loadingTooLong.value = props.loading), 3000);
-			}
-
-			localModel.value = value;
-		},
-	});
+	/** Modal model */
+	const model = computed(() => !props.disabled && (props.modelValue || localModel.value));
 
 	// lifecycle
 	onMounted(() => {
-		if (props.modelValue) model.value = props.modelValue;
+		watch(
+			() => props.modelValue,
+			(show) => {
+				if (show) openModal();
+			},
+			{ immediate: true }
+		);
 	});
-	onUnmounted(closeAndResetModal);
-	watch(
-		() => props.modelValue,
-		(show) => (model.value = show),
-		{ immediate: false }
-	);
+	onUnmounted(closeModal);
 </script>

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

@@ -76,16 +76,14 @@
 	}
 
 	// lifecycle
-
-	// set single option as value
-	if (selectOptions.value.length === 1) emit("update:model-value", selectOptions.value[0].value);
-
 	watch(
 		selectOptions,
 		(options) => {
 			// set single option as value
-			if (options.length === 1) emit("update:model-value", options[0].value);
+			if (options.length === 1 && props.modelValue !== options[0].value) {
+				emit("update:model-value", options[0].value);
+			}
 		},
-		{ immediate: false }
+		{ immediate: true }
 	);
 </script>

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

@@ -59,7 +59,7 @@
 		>
 			<div
 				v-if="input.defaults && input.defaults.length >= 2"
-				class="flx --flxColumn --flxRow-wrap:md --flx-start-stretch --flx"
+				class="flx --flxColumn --flxRow-wrap:md --flx-start-stretch --flx --gap-5"
 			>
 				<!-- Recursion -->
 				<Input
@@ -68,12 +68,14 @@
 						input.defaults?.[index].placeholder || input.defaults?.[index].type || index
 					"
 					:input="
-						input.setRerender($forceUpdate).clone({
-							...input.defaults[index], // sub input
-							multiple: false,
-							defaults: undefined,
-							values: [models[i].value[index]],
-						})
+						input
+							.clone({
+								...input.defaults[index], // sub input
+								multiple: false,
+								defaults: undefined,
+								values: [models[i].value[index]],
+							})
+							.setRerender($forceUpdate)
 					"
 					:theme="theme"
 					class="--width-180 --flx"