* fixing ts issues

* fixing some quirks and issues with button field

Author: webdevnerdstuff

src/plugin/VStepperForm.vue

@@ -103,7 +103,6 @@
 							</v-stepper-window>
 
 							<v-stepper-actions v-if="!settings.hideActions">
-
 								<template #next>
 									<v-btn
 										v-if="!lastPage"
@@ -129,11 +128,6 @@
 									/>
 								</template>
 							</v-stepper-actions>
-
-							<v-row>
-								<v-col>
-								</v-col>
-							</v-row>
 						</Form>
 					</template>
 				</v-stepper>

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

@@ -1,4 +1,5 @@
 <template>
+	{{ fieldWidth }}
 	<Field
 		v-slot="{ errorMessage, validate }"
 		v-model="modelValue"
@@ -36,24 +37,25 @@
 					}"
 				>
 					<template #default>
-						<!-- {{ fieldVariant }} -->
-						<!-- {{ modelValue === option.value ? 'solo' : fieldVariant }} -->
 						<v-btn
 							v-bind="boundSettings"
 							:id="getId(option, key)"
 							:active="isActive(option.value)"
 							:appendIcon="getIcon(option, 'appendIcon')"
 							class="text-none"
 							:class="{
+								...buttonClass,
 								[`${field.selectedClass}`]: isActive(option.value),
 							}"
+							:color="option?.color || field?.color || settings?.color"
+							:density="(buttonDensity as VBtn['density'])"
 							:height="fieldHeight"
 							:icon="getIcon(option, 'icon')"
-							:minWidth="field?.minWidth || '100px'"
+							:minWidth="fieldMinWidth || (option?.icon ? 'auto' : '100px')"
 							:prependIcon="getIcon(option, 'prependIcon')"
 							:variant="getVariant(option.value)"
-							:width="field?.width || '100px'"
-							@click="onActions(validate, 'click', option.value);"
+							:width="fieldWidth"
+							@click.prevent="onActions(validate, 'click', option.value);"
 							@keydown.space.prevent="onActions(validate, 'click', option.value)"
 							@mousedown="onFocus(option.value)"
 							@mouseleave="onFocus(null)"
@@ -100,12 +102,13 @@ import { Field } from 'vee-validate';
 import { VMessages } from 'vuetify/components';
 import type { Option, VSFButtonFieldProps } from './index';
 import type { FieldLabelProps } from '../../shared/FieldLabel.vue';
+import type { VBtn } from 'vuetify/components';
 import { useBindingSettings } from '../../../composables/bindings';
 import { useOnActions } from '../../../composables/validation';
 import FieldLabel from '../../shared/FieldLabel.vue';
 
 const emit = defineEmits(['validate']);
-const modelValue = defineModel<any>();
+const modelValue = defineModel<unknown>();
 const props = defineProps<VSFButtonFieldProps>();
 
 const { field } = props;
@@ -131,20 +134,24 @@ if (modelValue?.value == null) {
 const currentValue = ref(modelValue.value);
 
 // ------------------------- Validate On Actions //
-async function onActions(validate: FieldValidateResult, action: ValidateAction, value?: unknown): Promise<void> {
+async function onActions(validate: FieldValidateResult, action: ValidateAction, value?: string | number): Promise<void> {
 	if (currentValue.value === value && (fieldValidateOn.value === 'change' || fieldValidateOn.value === 'input')) {
 		return;
 	}
 
 	if (!field?.disabled && value) {
 		if (field?.multiple) {
-			if (Array(modelValue.value).includes(value)) {
-				const index = Array(modelValue.value).indexOf(value);
-				Array(modelValue.value).splice(index, 1);
+			const localModelValue = modelValue.value as string[];
+
+			if (localModelValue != null && localModelValue.includes(String(value))) {
+				const index = localModelValue.indexOf(String(value));
+				localModelValue.splice(index, 1);
 			}
 			else {
-				Array(modelValue.value).push(value);
+				localModelValue.push(String(value));
 			}
+
+			modelValue.value = localModelValue;
 		}
 		else {
 			modelValue.value = value;
@@ -165,13 +172,22 @@ async function onActions(validate: FieldValidateResult, action: ValidateAction,
 		});
 }
 
+const buttonDensity = computed<VSFButtonFieldProps['field']['density']>(() => {
+	const density = field?.density ?? settings.value?.density;
+
+	if (['comfortable', 'compact', 'default'].includes(density as string)) {
+		return density;
+	}
+
+	return;
+});
 
 // -------------------------------------------------- Bound Settings //
 const bindSettings = computed(() => ({
 	...field,
 	border: field?.border ? `${field?.color} ${field?.border}` : undefined,
 	color: field.color || settings.value?.color,
-	density: field.density || settings.value?.density,
+	density: field?.density ?? settings.value?.density as VBtn['density'],
 	hideDetails: field.hideDetails || settings.value?.hideDetails,
 	multiple: undefined,
 }));
@@ -203,7 +219,7 @@ function getId(option: { id?: string; }, key: string | number) {
 
 
 // -------------------------------------------------- Properties //
-const densityHeight = {
+const densityValues = {
 	comfortable: '48px',
 	compact: '40px',
 	default: '56px',
@@ -213,21 +229,28 @@ const densityHeight = {
 
 const fieldDensity = computed(() => field?.density ?? settings.value?.density);
 
-const fieldHeight = computed(() => {
-	if (field?.height) {
-		return field?.height;
+function useSize(val: string) {
+
+	if (field?.[val]) {
+		return field[val] as string;
+	}
+	else if (val === 'minWidth') {
+		return field[val] || undefined;
 	}
 
+	return fieldDensity.value ? densityValues[fieldDensity.value] : densityValues['default'];
+}
 
-	return fieldDensity.value ? densityHeight[fieldDensity.value] : densityHeight['default'];
-});
+const fieldHeight = computed(() => useSize('height'));
+const fieldWidth = computed(() => useSize('width'));
+const fieldMinWidth = computed(() => useSize('minWidth'));
 
 const isActive = (val: string | number): boolean | undefined => {
 	if (!modelValue.value) {
 		return undefined;
 	}
 
-	return modelValue.value === val || Array(modelValue.value).includes(val);
+	return modelValue.value === val || (modelValue.value as string[]).includes(val as string);
 };
 
 const fieldVariant = ref<VSFButtonFieldProps['field']['variant']>(field?.variant);
@@ -318,6 +341,16 @@ const buttonFieldContainerClass = computed(() => {
 	};
 });
 
+const buttonClass = computed(() => {
+	if (fieldDensity.value === 'expanded' || fieldDensity.value === 'oversized') {
+		return {
+			[`v-btn--density-${fieldDensity.value}`]: true,
+		};
+	}
+
+	return {};
+});
+
 // -------------------------------------------------- Focused //
 const isFocused = shallowRef(null);
 

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

@@ -9,6 +9,7 @@ import type { VBtn } from 'vuetify/components';
 
 export interface Option {
 	appendIcon?: VBtn['appendIcon'];
+	color?: VBtn['color'];
 	icon?: VBtn['icon'];
 	id?: Field['id'];
 	label: Field['label'];

src/plugin/types/index.ts

@@ -53,7 +53,7 @@ declare global {
 	* VTextField
 	* VTextarea
 */
-export type GlobalDensity = null | 'default' | 'comfortable' | 'compact';
+export type GlobalDensity = null | 'default' | 'comfortable' | 'compact' | 'expanded' | 'oversized';
 export type GlobalVariant = 'filled' | 'underlined' | 'outlined' | 'plain' | 'solo' | 'solo-inverted' | 'solo-filled';
 
 
@@ -126,7 +126,7 @@ export interface Field {
 	class?: string;
 	color?: Props['color'];
 	columns?: Props['fieldColumns'];
-	density?: Props['density'];
+	density?: GlobalDensity;
 	disabled?: boolean | ((value: any) => boolean);
 	error?: boolean;
 	errorMessages?: string | string[];