Dev

cypress.config.ts

@@ -23,4 +23,6 @@ export default defineConfig({
 		viewportHeight: 800,
 		viewportWidth: 1920,
 	},
+
+	numTestsKeptInMemory: 0,
 });

cypress/support/component.ts

@@ -7,6 +7,7 @@ import VStepperForm from '../../src/plugin/VStepperForm.vue';
 import * as DATA from '../templates/testData';
 import type { Component } from 'vue';
 import "cypress-real-events";
+import { pluginOptionsInjectionKey } from '../../src/plugin/utils/globals';
 
 
 // declare global {
@@ -95,7 +96,7 @@ Cypress.Commands.add('mountComponent', (options: MountComponentOptions = {}) =>
 				validationSchema: stepperProps.validationSchema ?? undefined,
 				...stepperProps,
 			},
-			global: { provide: { globalOptions: { ...globalOptions, ...globalProps }, }, },
+			global: { provide: { [pluginOptionsInjectionKey]: { ...globalOptions, ...globalProps }, }, },
 		}).as('wrapper');
 	});
 });

cypress/templates/testData.ts

@@ -5,6 +5,7 @@ import {
 	object as yupObject,
 } from 'yup';
 import { useDeepMerge } from '../../src/plugin/composables/helpers';
+import { pluginOptionsInjectionKey } from '../../src/plugin/utils/globals';
 
 
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Shared //
@@ -143,7 +144,6 @@ const defaultFields = {
 		name: 'combobox',
 		placeholder: 'Select an item',
 		type: 'combobox' as const,
-		variant: 'outlined',
 	},
 	color: {
 		label: 'Color',
@@ -592,7 +592,7 @@ const navigationTest = {
 	},
 	global: {
 		provide: {
-			globalOptions: {
+			[pluginOptionsInjectionKey]: {
 				color: 'primary',
 				validateOn: 'blur',
 				variant: 'outlined',

dist/FieldLabel-BRQ0K1ZH.mjs → dist/FieldLabel-C78b4p01.mjs

@@ -1,7 +1,7 @@
 import { FieldLabel as a } from "./vuetify-stepper-form.es.js";
 /**
  * @name @wdns/vuetify-stepper-form
- * @version 1.0.0
+ * @version 1.0.1
  * @description The Vuetify Stepper Form plugin provides a structured way to create multi-step forms using Vue 3, TypeScript, and Vuetify. It features a stepper layout that allows users to navigate between steps with form validation. The plugin is customizable and streamlines building dynamic, interactive forms that guide users through sequential steps.
  * @author WebDevNerdStuff & Bunnies... lots and lots of bunnies! <[email protected]> (https://webdevnerdstuff.com)
  * @copyright Copyright 2024, WebDevNerdStuff

dist/FieldLabel-mS_InZKL.js → dist/FieldLabel-_ATH8rEz.js

@@ -1,6 +1,6 @@
 "use strict";/**
  * @name @wdns/vuetify-stepper-form
- * @version 1.0.0
+ * @version 1.0.1
  * @description The Vuetify Stepper Form plugin provides a structured way to create multi-step forms using Vue 3, TypeScript, and Vuetify. It features a stepper layout that allows users to navigate between steps with form validation. The plugin is customizable and streamlines building dynamic, interactive forms that guide users through sequential steps.
  * @author WebDevNerdStuff & Bunnies... lots and lots of bunnies! <[email protected]> (https://webdevnerdstuff.com)
  * @copyright Copyright 2024, WebDevNerdStuff

dist/plugin/components/fields/VSFCustom/VSFCustom.vue.d.ts

@@ -53,6 +53,7 @@ declare function __VLS_template(): {
         blur: () => Promise<void>;
         change: () => Promise<void>;
         input: () => Promise<void>;
+        onUpdate: (value: any) => void;
         field: {
             options: KeyStringAny<any> | undefined;
             required: boolean | undefined;
@@ -101,7 +102,6 @@ declare function __VLS_template(): {
             variant?: string | undefined;
             transition?: import('vuetify/lib/components/index.mjs').VStepperWindowItem["transition"] | undefined;
             errorMessages: any;
-            modelValue: any;
         };
     }) => any>>;
     refs: {};

dist/plugin/index.d.ts

@@ -2,7 +2,6 @@ import { PluginOptions } from './types';
 import { Plugin } from 'vue';
 import { default as FieldLabel } from './components/shared/FieldLabel.vue';
 import { default as VStepperForm } from './VStepperForm.vue';
-export declare const globalOptions: unique symbol;
 export declare function createVStepperForm(options?: PluginOptions): Plugin;
 export default VStepperForm;
 export { FieldLabel, VStepperForm, };

dist/plugin/utils/globals.d.ts

@@ -1 +1,4 @@
+import { InjectionKey } from 'vue';
+import { PluginOptions } from '../types';
 export declare const componentName = "v-stepper-form";
+export declare const pluginOptionsInjectionKey: InjectionKey<PluginOptions>;

eslint.config.mjs

@@ -11,9 +11,12 @@ export default tseslint.config(
 	...wdnsConfig,
 	{
 		ignores: [
+			'*__TEMP.*',
+			'*__TEMP/',
 			'**/*.cy.ts',
 			'**/cypress/**',
 			'cypress.config.ts',
+			'src/playground/*',
 			'src/playground/configs/templates/PlaygroundPage.vue',
 			'src/types/cypress.d.ts',
 			'vite.build.config.mts',

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/documentation/components/examples/FieldSlotExample.vue

@@ -4,41 +4,35 @@
 		:pages="pages"
 		@submit="submitForm"
 	>
-		<template #[`field.foo`]="{ errorMessage, field, blur, change, input, FieldLabel }">
+		<template #[`field.foo`]="props">
 			<v-text-field
-				v-model="answers.foo"
-				v-bind="field"
-				:error="errorMessage"
-				:error-messages="errorMessage"
-				@blur="blur"
-				@change="change"
-				@input="input"
+				v-bind="props.field"
+				@blur="props.blur()"
+				@change="props.change()"
+				@input="props.input()"
+				@update:modelValue="props.onUpdate($event)"
 			>
 				<template #label>
 					<component
-						:is="FieldLabel"
-						:label="field.label"
-						:required="!!field.required"
+						:is="props.FieldLabel"
+						:label="props.field.label"
 					/>
 				</template>
 			</v-text-field>
 		</template>
 
 		<template #[`field.bar`]="props">
 			<v-text-field
-				v-model="answers.bar"
 				v-bind="props.field"
-				:error="props.errorMessage"
-				:error-messages="props.errorMessage"
 				@blur="props.blur()"
 				@change="props.change()"
 				@input="props.input()"
+				@update:modelValue="props.onUpdate($event)"
 			>
 				<template #label>
 					<component
 						:is="props.FieldLabel"
 						:label="props.field.label"
-						:required="!!props.field.required"
 					/>
 				</template>
 			</v-text-field>
@@ -91,35 +85,31 @@ const templateCode = `<template>
     title="Field Slots"
     @submit="submitForm"
   >
-    <template #[\`field.foo\`]="{ errorMessage, field, blur, change, input, FieldLabel }">
+    <template #[\`field.foo\`]="props">
       <v-text-field
-        v-model="answers.foo"
-        v-bind="field"
-        :error="errorMessage"
-        :error-messages="errorMessage"
-        @blur="blur"
-        @change="change"
-        @input="input"
+        v-bind="props.field"
+        @blur="props.blur()"
+        @change="props.change()"
+        @input="props.input()"
+        @update:modelValue="props.onUpdate($event)"
       >
         <template #label>
           <component
-            :is="FieldLabel"
-            :label="field.label"
-            :required="!!field.required"
+            :is="props.FieldLabel"
+            :label="props.field.label"
+            :required="!!props.field.required"
           />
         </template>
       </v-text-field>
     </template>
 
     <template #[\`field.bar\`]="props">
       <v-text-field
-        v-model="answers.bar"
         v-bind="props.field"
-        :error="props.errorMessage"
-        :error-messages="props.errorMessage"
         @blur="props.blur()"
         @change="props.change()"
         @input="props.input()"
+        @update:modelValue="props.onUpdate($event)"
       >
         <template #label>
           <component

src/documentation/sections/SlotsSection.vue

@@ -40,8 +40,11 @@
 									>[`field.${string}`]</a>
 								</span>
 							</td>
-							<td>
-								Slot that is used for adding your own fields
+							<td class="compact">
+								Slot for adding custom fields. Ensure to include the <code class="ic">onUpdate($event)</code> event
+								listener so the form can detect and handle updates properly. Refer to the <a
+									href="#examples-field-slots"
+								>Field Slot</a> example for usage.
 							</td>
 						</tr>
 						<tr>
@@ -86,6 +89,9 @@ const displaySlotsCode = `{
   change: () => void,
   input: () => void,
 
+  // Updating the model value
+  onUpdate: (value: any) => void,
+
   // Internal FieldLabel component
   FieldLabel: Component
 }`;
@@ -101,6 +107,10 @@ const displaySlotsCode = `{
 		> div {
 			padding: 0.5rem 0 !important;
 		}
+
+		&.compact {
+			line-height: 1.4 !important;
+		}
 	}
 }
 </style>

src/playground/configs/playground.ts

@@ -10,8 +10,11 @@ import PlaygroundApp from './PlaygroundApp.vue';
 
 const app = createApp(PlaygroundApp);
 
+app.use(createVStepperForm({
+	// variant: 'outlined',
+},
+));
 app.use(createVCodeBlock());
-app.use(createVStepperForm());
 app.use(createPinia());
 app.component('font-awesome-icon', FontAwesomeIcon);