[DEV] fixing and updating minor stuff

Author: webdevnerdstuff

src/plugin/VStepperForm.vue

@@ -12,15 +12,6 @@
 						</h2>
 					</v-col>
 				</v-row>
-				<v-row>
-					<v-col>
-						stepperMode: {{ stepperModel }}
-						<br />
-						currentPageHasErrors: {{ currentPageHasErrors }}
-						<br />
-						errorPageIndexes: {{ errorPageIndexes }}
-					</v-col>
-				</v-row>
 			</v-container>
 
 			<v-container
@@ -185,12 +176,12 @@ const injectedOptions = inject(globalOptions, {});
 
 // -------------------------------------------------- Props //
 const props = withDefaults(defineProps<Props>(), AllProps);
-const stepperProps = reactive<Settings>(useMergeProps(attrs, injectedOptions, props));
+const stepperProps: Settings = reactive<Settings>(useMergeProps(attrs, injectedOptions, props));
 const { direction, title, width } = toRefs(props);
 const pages = reactive<Page[]>(props.pages);
 const originalPages = JSON.parse(JSON.stringify(pages));
 
-const settings = ref<Settings>({
+const settings: Ref<Settings> = ref<Settings>({
 	altLabels: stepperProps.altLabels,
 	autoPage: stepperProps.autoPage,
 	autoPageDelay: stepperProps.autoPageDelay,
@@ -226,7 +217,7 @@ const settings = ref<Settings>({
 });
 
 
-const allFieldsArray = ref<Field[]>([]);
+const allFieldsArray: Ref<Field[]> = ref<Field[]>([]);
 
 Object.values(pages).forEach((p: Page) => {
 	Object.values(p.fields).forEach((field: Field) => {
@@ -266,7 +257,7 @@ const stepperModel = ref(1);
 
 
 const { sm } = useDisplay();
-const transition = computed<Props['transition']>(() => stepperProps.transition);
+const transition: ComputedRef<Props['transition']> = computed(() => stepperProps.transition);
 const parentForm = useTemplateRef<PrivateFormContext>('stepperFormRef');
 
 provide('parentForm', parentForm);
@@ -324,7 +315,7 @@ function headerItemDisabled(page: Page): boolean {
 const validationSchema = computed(() => toTypedSchema(props.validationSchema as Props['validationSchema']));
 const fieldsHaveErrors = ref(false);
 const currentPageHasErrors = ref(false);
-const errorPageIndexes = ref<number[]>([]);
+const errorPageIndexes: Ref<number[]> = ref<number[]>([]);
 
 // ------------------------ Run Validation //
 function runValidation(

src/plugin/__tests__/index.test.ts

@@ -83,7 +83,11 @@
 							@change="onActions(validate, 'change')"
 							@input="onActions(validate, 'input')"
 						>
-							<template #message>
+							<!-- ! TODO: This needs to be fixed as it doesn't work when using inline prop -->
+							<template
+								v-if="!field.inline"
+								#message
+							>
 								{{ Object.keys(field?.options as KeyStringAny).length - 1 === key ? errorMessage : '' }}
 							</template>
 						</v-checkbox>

src/plugin/components/fields/VSFCheckbox/VSFCheckbox.vue

@@ -13,9 +13,9 @@
 			v-model="modelValue"
 			:error="errorMessage ? errorMessage?.length > 0 : false"
 			:error-messages="errorMessage"
-			@blur="onActions(validate, 'blur')"
-			@change="onActions(validate, 'change')"
-			@input="onActions(validate, 'input')"
+			@blur="onActions((validate as ValidateFieldResult), 'blur')"
+			@change="onActions((validate as ValidateFieldResult), 'change')"
+			@input="onActions((validate as ValidateFieldResult), 'input')"
 		>
 			<template #label>
 				<FieldLabel
@@ -51,7 +51,7 @@ const fieldValidateOn = computed(() => field?.validateOn ?? settings?.validateOn
 
 
 // ------------------------- Validate On Actions //
-async function onActions(validate: FieldValidateResult, action: ValidateAction): Promise<void> {
+async function onActions(validate: ValidateFieldResult, action: ValidateAction): Promise<void> {
 	useOnActions({
 		action,
 		emit,

src/plugin/components/fields/VSFSwitch/VSFSwitch.vue

@@ -132,7 +132,7 @@ import {
 	VTextarea,
 	VTextField,
 } from 'vuetify/components';
-import { VColorField } from '@wdns/vuetify-color-field';
+import VColorField from '@wdns/vuetify-color-field';
 import { useColumnErrorCheck } from '../../composables/helpers';
 
 
@@ -218,7 +218,6 @@ function getColumnClasses(field: Field) {
 	});
 
 	return {
-		'py-0': true,
 		'v-col-12': true,
 		'v-cols': true,
 		[`v-col-sm-${field?.columns?.sm ?? columnsMerged.value.sm}`]: true,

src/plugin/components/shared/PageContainer.vue

@@ -2,8 +2,9 @@
 
 exports[`Classes Composable > useContainerClasses > should return class object 1`] = `
 {
-  "v-plugin-template": true,
-  "v-plugin-template--container": true,
-  "v-plugin-template--container-option": true,
+  "d-flex flex-column justify-center align-center": false,
+  "v-stepper-form": true,
+  "v-stepper-form--container": true,
+  "v-stepper-form--container-undefined": true,
 }
 `;

src/plugin/composables/__tests__/__snapshots__/classes.test.ts.snap

@@ -1,28 +1,38 @@
 import { describe, it, expect } from 'vitest';
 import {
-	useConvertToUnit,
+	useColumnErrorCheck,
 } from '../helpers';
 
 describe('Helpers Composable', () => {
-	describe('useConvertToUnit', () => {
-		it('should return string with a default px unit', () => {
-			const unit = useConvertToUnit({ value: '10' });
-			expect(unit).toBe('10px');
-		});
-
-		it('should return number with a default px unit', () => {
-			const unit = useConvertToUnit({ value: 10 });
-			expect(unit).toBe('10px');
-		});
+	describe('useColumnErrorCheck', () => {
+		describe('Errors', () => {
+			const propName = 'columns';
 
-		it('should return string with a supplied unit', () => {
-			const unit = useConvertToUnit({ unit: 'em', value: '10' });
-			expect(unit).toBe('10em');
-		});
+			it('should return without throwing error if using correct column values', () => {
+				expect(() => useColumnErrorCheck({
+					columns: {
+						lg: 12,
+						md: 12,
+						sm: 12,
+						xl: 12,
+					},
+					propName: 'columns',
+				}))
+					.not.toThrow();
+			});
 
-		it('should return number with a supplied unit', () => {
-			const unit = useConvertToUnit({ unit: 'em', value: 10 });
-			expect(unit).toBe('10em');
+			it('should fail if using incorrect column values', () => {
+				expect(() => useColumnErrorCheck({
+					columns: {
+						lg: 120,
+						md: 120,
+						sm: 120,
+						xl: 120,
+					},
+					propName: propName,
+				}))
+					.toThrowError(`The ${propName} prop column values must be between 1 and 12`);
+			});
 		});
 	});
 });

src/plugin/composables/__tests__/helpers.test.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable no-unused-vars */
-import { App, CSSProperties } from 'vue';
+import { App } from 'vue';
 import type {
 	VBtn,
 	// VIcon,
@@ -292,16 +292,6 @@ export interface UseStepperContainerClasses {
 	): ComputedClasses;
 }
 
-// ------------------------- Styles //
-export interface UseContainerStyle {
-	(
-		options: {
-			displayType?: string;
-		}
-	): CSSProperties;
-}
-
-
 // -------------------------------------------------- Plugin Component //
 declare module "vue" {
 	interface ComponentCustomProperties { }