feat: override form input values within update hook

Author: vis97c

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

@@ -139,7 +139,7 @@ export class FormInput<V extends iFormValue = iFormValue>
 	 */
 	constructor(
 		formInput: iFormInput<V>,
-		private _onUpdatedValues?: (updatedValues: (V | V[])[]) => void,
+		private _onUpdatedValues?: (updatedValues: (V | V[])[]) => (V | V[])[] | undefined | void,
 		rerender?: (fi?: Partial<iFormInput<V>>) => void
 	) {
 		super(formInput, rerender);
@@ -162,9 +162,8 @@ export class FormInput<V extends iFormValue = iFormValue>
 			// set defaults
 			this._values = Array(this.min).fill(getDefault(this.type, this.defaults));
 		} else {
-			this._values = updatedValues;
 			// run hook on values change
-			this._onUpdatedValues?.(this._values);
+			this._values = this._onUpdatedValues?.(updatedValues) ?? updatedValues;
 		}
 	}
 
@@ -215,7 +214,7 @@ export class FormInput<V extends iFormValue = iFormValue>
 	 */
 	public clone(
 		overrides?: Omit<iFormInput<V>, "name"> & { name?: string },
-		onUpdatedValues: ((updatedValues: (V | V[])[]) => void) | undefined = this._onUpdatedValues
+		onUpdatedValues?: (updatedValues: (V | V[])[]) => (V | V[])[] | undefined | void
 	) {
 		const oldFormInput: iFormInput<V> = {
 			...this,
@@ -224,7 +223,11 @@ export class FormInput<V extends iFormValue = iFormValue>
 			defaults: this.defaults,
 		};
 
-		return new FormInput({ ...oldFormInput, ...overrides }, onUpdatedValues, this.rerender);
+		return new FormInput(
+			{ ...oldFormInput, ...overrides },
+			onUpdatedValues || this._onUpdatedValues,
+			this.rerender
+		);
 	}
 
 	/**

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

@@ -11,29 +11,40 @@
 			>
 				<component
 					:is="input.multiple ? ActionButtonToggle : ActionButton"
-					v-for="(option, optionIndex) in options"
-					:key="optionIndex"
+					v-for="option in options"
+					:key="`choice-${_.snakeCase(String(option.value))}-${input.options.length}`"
 					:theme="theme"
 					:aria-label="option.alias || option.value"
 					:active="modelValue.includes(option.value)"
 					:title="modelValue.includes(option.value) ? t('select_selected') : ''"
 					:disabled="readonly || (!input.multiple && modelValue.includes(option.value))"
+					:round="!!option.icon || (!!option.pattern && !option.alias)"
+					:tooltip="option.icon ? option.alias : ''"
+					tooltip-as-text
+					tooltip-position="bottom"
 					@click="choose(option.value)"
 				>
-					<span>{{ option.alias || option.value }}</span>
 					<template v-if="option.icon">
 						<IconFa :name="option.icon" />
 						<IconFa v-if="input.multiple" :name="option.icon" regular />
 					</template>
-					<figure
-						v-else-if="option.pattern"
-						class="avatar --size-xs --bdr --bdrColor-light"
-						:style="
-							validator.isURL(option.pattern)
-								? { backgroundImage: `url('${option.pattern}')` }
-								: { backgroundColor: option.pattern }
-						"
-					></figure>
+					<template v-else-if="option.pattern">
+						<span v-if="option.alias">{{ option.alias }}</span>
+						<figure
+							class="avatar --size-xs --bdr"
+							:class="`--bdrColor-${
+								themeValues[
+									!input.multiple && modelValue.includes(option.value) ? 0 : 1
+								]
+							}`"
+							:style="
+								validator.isURL(option.pattern)
+									? { backgroundImage: `url('${option.pattern}')` }
+									: { backgroundColor: option.pattern }
+							"
+						></figure>
+					</template>
+					<span v-else>{{ option.alias || option.value }}</span>
 				</component>
 			</div>
 		</FormInputOptions>
@@ -318,6 +329,7 @@
 	import useInput from "../../composables/input";
 	import useCountries from "../../composables/countries";
 	import { useHelpers } from "../../composables/utils";
+	import useTheme from "../../composables/theme";
 
 	interface iFormInputProps extends iUseThemeProps {
 		modelValue: any[];
@@ -344,6 +356,7 @@
 	const { isValidFormInputValue, notEmptyValue } = useHelpers(useForm).utils;
 	const { getInputPlaceholder, getInputAutocomplete, getInputTextType } = useInput(props);
 	const { defaultCountry } = useCountries();
+	const { themeValues } = useTheme(props);
 
 	const countriesArr = computed(() => {
 		return (props.countries || []).map(({ code, name }) => ({ value: code, alias: name }));

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

@@ -22,6 +22,7 @@
 					{{ getSuggestedTitle(input) }}
 				</p>
 				<FormInput
+					:key="`simple-${input.name}-${String(input.values[0])}-${input.options.length}`"
 					:readonly="readonly"
 					:theme="theme"
 					:input="input"

packages/components-vue/src/components/input/Text.vue

@@ -21,7 +21,7 @@
 		</BaseWrapper>
 		<template v-if="type === 'number' && (Number.isInteger(min) || Number.isInteger(max))">
 			<ActionButtonToggle
-				:disabled="Number(model) <= minValue"
+				:disabled="disabled || Number(model) <= minValue"
 				:size="size"
 				:theme="invalid ? eColors.DANGER : theme"
 				:aria-label="t('decrease')"
@@ -35,7 +35,7 @@
 				<IconFa name="minus" regular />
 			</ActionButtonToggle>
 			<ActionButtonToggle
-				:disabled="Number(model) >= maxValue"
+				:disabled="disabled || Number(model) >= maxValue"
 				:size="size"
 				:theme="invalid ? eColors.DANGER : theme"
 				:tooltip="t('increase')"

packages/styles/src/components/action/_box.scss

@@ -119,7 +119,7 @@
 				@include module.extend-maps(
 						module.$element-sizes,
 						meta.get-function("box-square-size-selector"),
-						md,
+						lg,
 						".--square"
 					)
 					using($name, $value, $is-default) {

packages/styles/src/components/avatar/_avatar.scss

@@ -19,7 +19,7 @@
 			@include module.extend-maps(
 					module.$element-sizes,
 					meta.get-function("avatar-size-selector"),
-					sm
+					md
 				)
 				using($name, $value, $is-default) {
 				width: $value;

packages/styles/src/utils/_variables.scss

@@ -214,8 +214,9 @@ $viewports: (
 
 // element sizes
 $element-sizes: (
-	xs: $font-size-md * 2,
-	sm: $font-size-md * 3,
-	md: $font-size-md * 6,
-	lg: $font-size-md * 9,
+	xs: $font-size-md * 1.5,
+	sm: $font-size-md * 2,
+	md: $font-size-md * 3,
+	lg: $font-size-md * 6,
+	xl: $font-size-md * 9,
 );