fixing field slot issues

Author: webdevnerdstuff

cypress.config.ts

@@ -24,5 +24,5 @@ export default defineConfig({
 		viewportWidth: 1920,
 	},
 
-	numTestsKeptInMemory: 0,
+	// numTestsKeptInMemory: 0,
 });

cypress/templates/testData.ts

@@ -144,7 +144,6 @@ const defaultFields = {
 		name: 'combobox',
 		placeholder: 'Select an item',
 		type: 'combobox' as const,
-		variant: 'outlined',
 	},
 	color: {
 		label: 'Color',

src/documentation/components/examples/ConditionalFieldExample.vue

@@ -1,13 +1,13 @@
 <template>
 	<VStepperForm
-		v-model="answers"
+		v-model="formAnswers"
 		:pages="pages"
 		@submit="submitForm"
 	/>
 
 	<AnswersDialog
 		v-model="dialog"
-		:answers="answers"
+		:answers="formAnswers"
 	/>
 </template>
 
@@ -17,7 +17,7 @@ import AnswersDialog from '../AnswersDialog.vue';
 
 
 const dialog = ref(false);
-const answers = ref({
+const formAnswers = ref({
 	bar: null,
 	conditionalParent: null,
 	foo: null,
@@ -46,16 +46,16 @@ const pages = [
 				label: 'Foo',
 				name: 'foo',
 				type: 'text' as const,
-				when() {
-					return answers.value.conditionalParent === 'foo';
+				when(answers: any) {
+					return answers.conditionalParent === 'foo';
 				},
 			},
 			{
 				label: 'Bar',
 				name: 'bar',
 				type: 'text' as const,
-				when() {
-					return answers.value.conditionalParent === 'bar';
+				when(answers: any) {
+					return answers.conditionalParent === 'bar';
 				},
 			},
 		],
@@ -68,7 +68,7 @@ function submitForm(): void {
 
 const templateCode = `<template>
   <VStepperForm
-    v-model="answers"
+    v-model="formAnswers"
     :pages="pages"
     @submit="submitForm"
   />
@@ -79,7 +79,7 @@ const scriptCode = `\<script setup\>
 import { ref } from 'vue';
 
 
-const answers = ref({
+const formAnswers = ref({
   bar: null,
   conditionalParent: null,
   foo: null,
@@ -108,16 +108,16 @@ const pages = [
         label: 'Foo',
         name: 'foo',
         type: 'text' as const,
-        when() {
-          return answers.value.conditionalParent === 'foo';
+        when(answers) {
+          return answers.conditionalParent === 'foo';
         },
       },
       {
         label: 'Bar',
         name: 'bar',
         type: 'text' as const,
-        when() {
-          return answers.value.conditionalParent === 'bar';
+        when(answers) {
+          return answers.conditionalParent === 'bar';
         },
       },
     ],

src/playground/configs/templates/PlaygroundPage.vue

@@ -9,11 +9,11 @@
 			#[`field.slotField`]="props"
 		>
 			<v-text-field
-				v-model="allFieldsExample.answers.slotField"
 				v-bind="props.field"
 				@blur="props.blur()"
 				@change="props.change()"
 				@input="props.input()"
+				@update:modelValue="props.onUpdate($event)"
 			>
 				<template #label>
 					<component
@@ -66,6 +66,9 @@ const keys = [
 	'conditionalPage',
 ];
 
+
+
+
 // ? Change the key to test different examples //
 const answerAndPagesKey = keys[0];
 
@@ -283,33 +286,7 @@ const customSlots = [
 // & ------------------------- All Fields Example //
 const allFieldsExample = reactive({
 	answers: {
-		autocomplete: undefined,
-		// autocomplete: 'foo',
-		buttonField: [],
-		checkboxMultiple: undefined,
-		// checkboxMultiple: ['option1', 'option3'],
-		checkboxSingle: null,
-		// checkboxSingle: 'yes',
-		color: '#ff0000',
-		// combobox: null,
-		// combobox: 'Foo',
-		// combobox: 'foo',
-		combobox: null,
-		// combobox: { title: 'Foo', value: 'foo' },
-
-		customBar: null,
-		desc: 'Hello World',
-		email: null,
-		file: null,
-		name: null,
-		// radio: 'option1',
-		radio: null,
-		// radioMultiple: ['option1', 'option3'],
-		// selectField: null,
-		selectField: 'foo',
 		slotField: null,
-		switchQuestion: true,
-		// switchQuestion: 'yes',
 	},
 	formSettings: {
 		fieldColumns: {
@@ -319,7 +296,7 @@ const allFieldsExample = reactive({
 			xl: 6,
 		},
 		// headerTooltips: true,
-		jumpAhead: true,
+		// jumpAhead: true,
 		summaryColumns: { sm: 6 },
 		// tooltipLocation: 'bottom',
 		// tooltipTransition: 'fab-transition',
@@ -346,11 +323,11 @@ const allFieldsExample = reactive({
 				{ ...autocompleteProps },
 				{ ...comboboxProps },
 				{ ...colorFieldProps },
-
 			],
 			title: 'Less Common Fields',
 		},
 		{
+			editable: false,
 			fields: [
 				{ ...checkboxMultipleProps },
 				{ ...checkboxSingleProps },
@@ -557,14 +534,14 @@ const conditionalPageExample = reactive({
 	}),
 });
 
-// & v Conditional Field Example //
-const conditionalExample = reactive({
+// & ------------------------- Conditional Field Example //
+const conditionalFieldExample = reactive({
 	answers: {
-		aConditional: null,
-		bConditional: null,
-		cConditional: null,
-		conditionalParent: null,
-		fooQuestion: null,
+		aConditional: undefined,
+		bConditional: undefined,
+		cConditional: undefined,
+		conditionalParent: undefined,
+		fooQuestion: undefined,
 	},
 	formSettings: {
 		title: 'Conditional Field Example',
@@ -629,6 +606,9 @@ const conditionalExample = reactive({
 					whenParentName: 'conditionalParent',
 				},
 			],
+			when(answers: any) {
+				return answers?.conditionalParent === 'c';
+			},
 		},
 	],
 	validation: yupObject({
@@ -657,26 +637,29 @@ function isRequired(field: string) {
 }
 
 const formAnswers = reactive({
-	allFields: { ...allFieldsExample.answers, ...DATA.answers },
-	conditionalField: { ...conditionalExample.answers, ...DATA.answers },
-	conditionalPage: { ...conditionalPageExample.answers, ...DATA.answers },
+	allFields: {
+		...allFieldsExample.answers,
+		// ...DATA.answers,
+	},
+	conditionalField: conditionalFieldExample.answers,
+	conditionalPage: conditionalPageExample.answers,
 });
 
 const formPages = {
 	allFields: allFieldsExample.pages,
-	conditionalField: conditionalExample.pages,
+	conditionalField: conditionalFieldExample.pages,
 	conditionalPage: conditionalPageExample.pages,
 };
 
 const formSchemas = {
 	allFields: allFieldsExample.validation,
-	conditionalField: conditionalExample.validation,
+	conditionalField: conditionalFieldExample.validation,
 	conditionalPage: conditionalPageExample.validation,
 };
 
 const formFormSettings = {
 	allFields: allFieldsExample.formSettings,
-	conditionalField: conditionalExample.formSettings,
+	conditionalField: conditionalFieldExample.formSettings,
 	conditionalPage: conditionalPageExample.formSettings,
 };
 

src/plugin/VStepperForm.vue

@@ -240,7 +240,7 @@ Object.values(pages).forEach((p: Page) => {
 	}
 });
 
-
+// TODO: Maybe add vertical stepper when out of Vuetify labs //
 // const StepperComponent = markRaw(props.direction === 'vertical' ? VStepperVertical : VStepper);
 // console.log('StepperComponent', StepperComponent);
 
@@ -264,10 +264,6 @@ onMounted(() => {
 // -------------------------------------------------- Data //
 const modelValue = defineModel<any>();
 
-watchDeep(modelValue, () => {
-	callbacks();
-});
-
 const stepperModel = ref(1);
 
 const currentPageIdx = computed(() => stepperModel.value - 1);
@@ -375,7 +371,6 @@ function headerItemEnabled(page: Page): boolean {
 	const pageEditable = page.editable !== false;
 	const pageNotEditable = page.editable === false;
 	const currentPageEditable = currentPages[currentPageIdx.value]?.editable !== false;
-	// const currentPageNotEditable = currentPages[currentPageIdx.value]?.editable === false;
 	const lastPageIdx = currentPages.length - 1;
 
 	const previousPageIdx = pageIdx - 1;
@@ -386,31 +381,6 @@ function headerItemEnabled(page: Page): boolean {
 	const nextPageEditable = currentPages[nextPageIdx]?.editable !== false;
 	const nextPageNotEditable = currentPages[nextPageIdx]?.editable === false;
 
-	// const debug = true;
-
-	// if (debug) {
-	// 	console.groupCollapsed('page', page.title);
-	// 	console.log('previousPageIdx\t', previousPageIdx);
-	// 	console.log('currentPageIdx\t', currentPageIdx.value);
-	// 	console.log('nextPageIdx\t\t', nextPageIdx);
-
-	// 	console.log('lastPageIdx\t\t', lastPageIdx);
-	// 	console.log('pageIdx\t\t\t', pageIdx);
-	// 	console.log('');
-	// 	console.log('pageEditable\t\t\t', pageEditable);
-	// 	console.log('pageNotEditable\t\t\t', pageNotEditable);
-	// 	console.log('currentPageEditable\t\t', currentPageEditable);
-	// 	console.log('currentPageNotEditable\t', currentPageNotEditable);
-	// 	console.log('previousPageEditable\t', previousPageEditable);
-	// 	console.log('previousPageNotEditable\t', previousPageNotEditable);
-	// 	console.log('nextPageEditable\t\t', nextPageEditable);
-	// 	console.log('nextPageNotEditable\t\t', nextPageNotEditable);
-	// 	console.log('');
-	// 	console.log('getFirstAndLastEditableFalse.value\t\t', { firstNonEditableIndex, lastNonEditableIndex });
-	// 	console.groupEnd();
-	// 	console.log('');
-	// }
-
 	// & Always True //
 	// Always set current page to editable //
 	if (currentPageIdx.value === pageIdx) {
@@ -475,6 +445,12 @@ const $useForm = useForm({
 	valueOnMount: settings.value?.validateOnMount,
 });
 
+// ? Make sure to update the modelValue when the form values change //
+watchDeep($useForm.values, () => {
+	modelValue.value = $useForm.values;
+	callbacks();
+});
+
 
 // ------------------------ Run Validation //
 function headerCheckPreviousStepValidation(index: number): void {
@@ -615,7 +591,6 @@ function onFieldValidate(field: Field, next: () => void): void {
 	$useForm.validateField(field.name, {}, { name: field.name })
 		.then(() => {
 			checkForPageErrors($useForm.errorBag.value, 'field', shouldAutoPage);
-
 		});
 }
 
@@ -639,7 +614,7 @@ const computedPages = computed<Page[]>(() => {
 		localPage.visible = true;
 
 		if (localPage.when) {
-			const enabledPage: boolean = (localPage.when as (value: any) => boolean)(modelValue.value);
+			const enabledPage: boolean = (localPage.when as (value: any) => boolean)($useForm.values);
 
 			if (pages[pageIdx]) {
 				pages[pageIdx].visible = enabledPage;
@@ -651,11 +626,12 @@ const computedPages = computed<Page[]>(() => {
 });
 
 function whenCallback(): void {
-	Object.values(computedPages.value).forEach((page: Page, pageIdx: number) => {
+	Object.values(pages).forEach((page: Page, pageIdx: number) => {
 		if (page.fields) {
 			Object.values(page.fields).forEach((field: Field, fieldIdx) => {
+
 				if (field.when) {
-					const enabledField: boolean = field.when(modelValue.value);
+					const enabledField: boolean = field.when($useForm.values);
 					const indexPage = computedPages.value[pageIdx];
 
 					if (indexPage?.fields && indexPage?.fields[fieldIdx]) {

src/plugin/__tests__/slots/FieldSlots.cy.ts

@@ -110,8 +110,8 @@ describe('Stepper Form Slots', () => {
 							onBlur: slotProps.blur,
 							onChange: slotProps.change,
 							onInput: slotProps.input,
-							'onUpdate:modelValue': (value: any) => {
-								answers.value.firstSlot = value;
+							'onUpdate:modelValue': (value) => {
+								slotProps.onUpdate(value);
 							},
 							...slotProps.field,
 						},
@@ -127,8 +127,8 @@ describe('Stepper Form Slots', () => {
 							onBlur: slotProps.blur,
 							onChange: slotProps.change,
 							onInput: slotProps.input,
-							'onUpdate:modelValue': (value: any) => {
-								answers.value.secondSlot = value;
+							'onUpdate:modelValue': (value) => {
+								slotProps.onUpdate(value);
 							},
 							...slotProps.field,
 						},
@@ -144,8 +144,8 @@ describe('Stepper Form Slots', () => {
 							onBlur: slotProps.blur,
 							onChange: slotProps.change,
 							onInput: slotProps.input,
-							'onUpdate:modelValue': (value: any) => {
-								answers.value.thirdSlot = value;
+							'onUpdate:modelValue': (value) => {
+								slotProps.onUpdate(value);
 							},
 							...slotProps.field,
 						},