fixing misc little bugs and quirks

Author: webdevnerdstuff

src/plugin/VStepperForm.vue

@@ -321,7 +321,6 @@ function removePageError(pageIndex: number): void {
 // ------------------------ Check the if the page has errors //
 function checkForPageErrors(errors: ValidateResult['errors'], source: string, next = () => { }): void {
 	const currentPage = stepperModel.value - 1;
-
 	const page = pages[currentPage];
 
 	if (!page) {
@@ -330,7 +329,7 @@ function checkForPageErrors(errors: ValidateResult['errors'], source: string, ne
 
 	const pageIndex = pages.findIndex((p) => p === page);
 	const pageFields = page?.fields ?? [];
-	const hasErrorInField = Object.keys(Array(errors)).some(errorKey => pageFields.some(field => field.name === errorKey));
+	const hasErrorInField = Object.keys(errors as object[]).some(errorKey => pageFields.some(field => field.name === errorKey));
 
 	if (hasErrorInField) {
 		currentPageHasErrors.value = true;

src/plugin/components/fields/VSFButtonField/VSFButtonField.vue

@@ -1,6 +1,6 @@
 <template>
 	<Field
-		v-slot="{ errorMessage, validate }"
+		v-slot="{ errorMessage, validate, handleInput }"
 		v-model="modelValue"
 		:name="field.name"
 		type="text"
@@ -49,14 +49,15 @@
 							}"
 							:color="option?.color || field?.color || settings?.color"
 							:density="fieldDensity"
-							:height="fieldHeight"
+							:height="getHeight(option)"
 							:icon="getIcon(option, 'icon')"
-							:minWidth="fieldMinWidth || (option?.icon ? 'auto' : '100px')"
+							:maxWidth="getMaxWidth(option)"
+							:minWidth="getMinWidth(option)"
 							:prependIcon="getIcon(option, 'prependIcon')"
 							:variant="getVariant(option.value)"
-							:width="fieldWidth"
-							@click.prevent="onActions(validate, 'click', option.value);"
-							@keydown.space.prevent="onActions(validate, 'click', option.value)"
+							:width="getWidth(option)"
+							@click.prevent="onActions(validate, 'click', option.value); handleInput(modelValue)"
+							@keydown.space.prevent="onActions(validate, 'click', option.value); handleInput(modelValue)"
 							@mousedown="onFocus(option.value)"
 							@mouseleave="onFocus(null)"
 							@mouseup="onFocus(null)"
@@ -67,6 +68,7 @@
 							>
 								<span
 									class="vsf-button-field__btn-label"
+									:class="getLabelClass(option)"
 									v-html="option.label"
 								></span>
 							</template>
@@ -141,7 +143,7 @@ async function onActions(validate: FieldValidateResult, action: ValidateAction,
 
 	if (!field?.disabled && value) {
 		if (field?.multiple) {
-			const localModelValue = modelValue.value as string[];
+			const localModelValue = modelValue.value == null ? [] : modelValue.value as string[];
 
 			if (localModelValue != null && localModelValue.includes(String(value))) {
 				const index = localModelValue.indexOf(String(value));
@@ -210,6 +212,8 @@ function getId(option: { id?: string; }, key: string | number) {
 
 
 // -------------------------------------------------- Properties //
+
+// ------------------------- Density & Sizes //
 const densityValues = {
 	comfortable: '48px',
 	compact: '40px',
@@ -220,21 +224,57 @@ const densityValues = {
 
 const fieldDensity = computed<VBtn['density']>(() => (field?.density ?? settings.value?.density) as VBtn['density']);
 
-function useSize(val: string) {
+function getDensityValue(): string {
+	return fieldDensity.value ? densityValues[fieldDensity.value] : densityValues['default'];
+}
+
+function getMinWidth(option: Option): string | number | undefined {
+	const minWidth = option?.minWidth ?? field?.minWidth;
 
-	if (field?.[val]) {
-		return field[val] as string;
+	if (minWidth != null) {
+		return minWidth as string;
 	}
-	else if (val === 'minWidth') {
-		return field[val] || undefined;
+
+	if (option?.icon) {
+		return getDensityValue();
 	}
 
-	return fieldDensity.value ? densityValues[fieldDensity.value] : densityValues['default'];
+	return '100px';
+}
+
+function getMaxWidth(option: Option): string | number | undefined {
+	const maxWidth = option?.maxWidth ?? field?.maxWidth;
+
+	if (maxWidth != null) {
+		return maxWidth as string;
+	}
+
+	return undefined;
 }
 
-const fieldHeight = computed(() => useSize('height'));
-const fieldWidth = computed(() => useSize('width'));
-const fieldMinWidth = computed(() => useSize('minWidth'));
+function getWidth(option: Option): string | number | undefined {
+	const width = option?.width ?? field?.width;
+
+	if (width != null) {
+		return width as string;
+	}
+
+	if (option?.icon) {
+		return getDensityValue();
+	}
+
+	return 'fit-content';
+}
+
+function getHeight(option: Option): string | number | undefined {
+	const height = option?.height ?? field?.height;
+
+	if (height != null) {
+		return height as string;
+	}
+
+	return getDensityValue();
+}
 
 const isActive = (val: string | number): boolean | undefined => {
 	if (!modelValue.value) {
@@ -244,6 +284,7 @@ const isActive = (val: string | number): boolean | undefined => {
 	return modelValue.value === val || (modelValue.value as string[]).includes(val as string);
 };
 
+// ------------------------- Variants //
 const fieldVariant = ref<VSFButtonFieldProps['field']['variant']>(field?.variant);
 
 function getVariant(val: string | number): VSFButtonFieldProps['field']['variant'] {
@@ -317,6 +358,7 @@ const buttontextcolor = ref('rgb(var(--v-theme-on-surface))');
 // -------------------------------------------------- Classes //
 const itemGroupClass = computed(() => {
 	return {
+		[`align-${field?.align}`]: field?.align != null,
 		'd-flex': true,
 		'flex-column': field?.block,
 		[`ga-${gap.value}`]: !containsSizeUnit(gap.value),
@@ -344,6 +386,16 @@ const buttonClass = computed(() => {
 	return {};
 });
 
+const getLabelClass = (option: Option): object => {
+	const isActiveOption = isActive(option.value);
+	const optionVariant = getVariant(option.value);
+	const useBgColor = isActiveOption || optionVariant === 'flat' || optionVariant === 'elevated';
+
+	return {
+		[`bg-${option?.color}`]: useBgColor,
+	};
+};
+
 // -------------------------------------------------- Focused //
 const isFocused = shallowRef(null);
 

src/plugin/components/fields/VSFButtonField/index.ts

@@ -11,11 +11,15 @@ export interface Option {
 	appendIcon?: VBtn['appendIcon'];
 	class?: string;
 	color?: VBtn['color'];
+	height?: VBtn['height'];
 	icon?: VBtn['icon'];
 	id?: Field['id'];
 	label: Field['label'];
+	maxWidth?: VBtn['maxWidth'];
+	minWidth?: VBtn['minWidth'];
 	prependIcon?: VBtn['prependIcon'];
 	value: string | number;
+	width?: VBtn['width'];
 }
 
 interface InternalField extends Field, Partial<Pick<VBtn,
@@ -25,6 +29,7 @@ interface InternalField extends Field, Partial<Pick<VBtn,
 	'border' |
 	'height' |
 	'icon' |
+	'maxWidth' |
 	'minWidth' |
 	'prependIcon' |
 	'selectedClass' |