Dev

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "vuetify-stepper-form",
+	"name": "@wdns/vuetify-stepper-form",
 	"version": "1.0.0-beta1",
 	"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.",
 	"private": false,
@@ -137,6 +137,7 @@
 		"vite-plugin-eslint": "^1.8.1",
 		"vite-plugin-static-copy": "^2.0.0",
 		"vite-plugin-stylelint": "6.0.0-beta.1",
+		"vite-plugin-vue-devtools": "^7.6.0",
 		"vite-plugin-vuetify": "^2.0.4",
 		"vitest": "^2.1.4",
 		"vue-tsc": "^2.1.8",

src/documentation/components/examples/ButtonsFieldExample.vue

@@ -13,6 +13,7 @@
 		color="primary"
 		:density="buttonDensityModel"
 		:pages="pages"
+		:validationSchema="validationSchema"
 		:variant="buttonVariantModel"
 		@submit="submitForm"
 	/>
@@ -21,8 +22,8 @@
 		v-model="drawer"
 		fixed
 		location="right"
-		:scrim="false"
-		temporary
+		:scrim="!mobile ? false : 'transparent'"
+		:temporary="!mobile"
 	>
 		<v-container>
 			<div class="d-flex justify-space-between align-center mb-2">
@@ -83,17 +84,6 @@
 						:true-value="true"
 					/>
 				</v-col>
-				<v-col
-					class="py-0"
-					cols="12"
-				>
-					<v-checkbox
-						v-model="multipleModel"
-						v-bind="optionsSettings"
-						label="Multiple"
-						:true-value="true"
-					/>
-				</v-col>
 				<v-col
 					class="pb-0"
 					cols="12"
@@ -156,6 +146,12 @@
 </template>
 
 <script setup lang="ts">
+import { useDisplay } from 'vuetify';
+import {
+	array as yupArray,
+	object as yupObject,
+	string as yupString,
+} from 'yup';
 import AnswersDialog from '../AnswersDialog.vue';
 
 
@@ -168,6 +164,7 @@ const optionsSettings = {
 	density: 'comfortable' as const,
 	hideDetails: true,
 };
+const { mobile } = useDisplay();
 
 const buttonVariantOptions = [
 	{
@@ -239,31 +236,37 @@ const buttonDensityOptions = [
 		value: 'oversized',
 	},
 ];
-const multipleModel = ref(false);
 const useIcon = ref(false);
 
 
-const answers = ref<{ iLikeButtons: string | string[] | null | undefined; }>({
+const answers = ref<{
+	animalsILike: string[] | null | undefined;
+	iLikeButtons: string | null | undefined;
+}>({
+	animalsILike: null,
 	iLikeButtons: null,
 });
 
-watch(() => multipleModel.value, () => {
-	answers.value.iLikeButtons = multipleModel.value ? [] as string[] : null;
-});
-
 const appendIcon = ref(false);
 const prependIcon = ref(false);
 const useColors = ref(false);
 
 
+watch(() => [useIcon.value, useColors.value, appendIcon.value, prependIcon.value], () => {
+	answers.value = {
+		animalsILike: null,
+		iLikeButtons: null,
+	};
+});
+
+
 const pages = computed(() => [
 	{
 		fields: [
 			{
 				align: buttonAlignModel,
 				block: buttonBlock,
 				label: 'I like buttons',
-				multiple: multipleModel,
 				name: 'iLikeButtons',
 				options: [
 					{
@@ -290,6 +293,42 @@ const pages = computed(() => [
 						value: 'maybe',
 					},
 				],
+				required: true,
+				type: 'buttons' as const,
+			},
+			{
+				align: buttonAlignModel,
+				block: buttonBlock,
+				label: 'I like...',
+				multiple: true,
+				name: 'animalsILike',
+				options: [
+					{
+						appendIcon: appendIcon.value ? 'mdi:mdi-rabbit' : undefined,
+						color: useColors.value ? 'white' : undefined,
+						icon: useIcon.value ? 'mdi:mdi-rabbit' : undefined,
+						label: 'Bunnies',
+						prependIcon: prependIcon.value ? 'mdi:mdi-rabbit' : undefined,
+						value: 'bunnies',
+					},
+					{
+						appendIcon: appendIcon.value ? 'mdi:mdi-tortoise' : undefined,
+						color: useColors.value ? 'success' : undefined,
+						icon: useIcon.value ? 'mdi:mdi-tortoise' : undefined,
+						label: 'Turtles',
+						prependIcon: prependIcon.value ? 'mdi:mdi-tortoise' : undefined,
+						value: 'turtles',
+					},
+					{
+						appendIcon: appendIcon.value ? 'mdi:mdi-duck' : undefined,
+						color: useColors.value ? 'yellow' : undefined,
+						icon: useIcon.value ? 'mdi:mdi-duck' : undefined,
+						label: 'duck',
+						prependIcon: prependIcon.value ? 'mdi:mdi-duck' : undefined,
+						value: 'duck',
+					},
+				],
+				required: true,
 				type: 'buttons' as const,
 			},
 		],
@@ -303,6 +342,12 @@ watch(() => pages.value, () => {
 	exampleKey.value = String(Math.random());
 });
 
+const validationSchema = yupObject({
+	animalsILike: yupArray().required('This field is required.')
+		.min(1, 'Must select at least ${min} option.'),
+	iLikeButtons: yupString().required('This field is required.'),
+});
+
 function submitForm(): void {
 	dialog.value = true;
 }
@@ -373,16 +418,34 @@ const maybeOption = computed(() => buildOption({
 	value: 'maybe',
 }));
 
+const bunniesOption = computed(() => buildOption({
+	color: 'white',
+	icon: 'mdi:mdi-rabbit',
+	label: 'Bunnies',
+	value: 'bunnies',
+}));
+
+const turtlesOption = computed(() => buildOption({
+	color: 'success',
+	icon: 'mdi:mdi-tortoise',
+	label: 'Turtles',
+	value: 'turtles',
+}));
+
+const duckOption = computed(() => buildOption({
+	color: 'yellow',
+	icon: 'mdi:mdi-duck',
+	label: 'duck',
+	value: 'duck',
+}));
+
+
 const exampleAnswer = computed<string>(() => {
-	if (!answers.value.iLikeButtons || (answers.value.iLikeButtons as string[]).length === 0) {
+	if (!answers.value.iLikeButtons) {
 		return 'null';
 	}
 
-	if (multipleModel.value) {
-		return `${JSON.stringify(answers.value.iLikeButtons)}`;
-	}
-
-	return `'${answers.value.iLikeButtons as string}'`;
+	return `'${answers.value.iLikeButtons}'`;
 });
 
 const scriptCode = computed(() => (
@@ -398,8 +461,7 @@ const pages = computed(() => [
         align: '${buttonAlignModel.value}',
         block: ${buttonBlock.value},
         label: 'I like buttons',
-        multiple: ${multipleModel.value},
-        name: 'foo',
+        name: 'iLikeButtons',
         options: [
           {${yesOption.value}
           }
@@ -410,6 +472,22 @@ const pages = computed(() => [
         ],
         type: 'buttons',
       },
+      {
+        align: '${buttonAlignModel.value}',
+        block: ${buttonBlock.value},
+        label: 'Animals I Like',
+        multiple: true,
+        name: 'animalsILike',
+        options: [
+          {${bunniesOption.value}
+          }
+          {${turtlesOption.value}
+          },
+          {${duckOption.value}
+          }
+        ],
+        type: 'buttons',
+      },
     ],
     title: 'Page 1',
   },
@@ -425,7 +503,7 @@ watch(() => [scriptCode.value, templateCode.value], () => {
 });
 
 const exampleCode = computed(() => ({
-	desc: multipleModel.value,
+	desc: 'This example utilizes a custom-built component designed for this form, allowing users to select a value through buttons.',
 	name: 'Buttons Field',
 	script: scriptCode.value,
 	template: templateCode.value,

src/documentation/sections/ComponentsSection.vue

@@ -22,7 +22,7 @@
 				v-for="component in componentList"
 				:key="component.title"
 			>
-				<code class="ic mr-2">{{ component.title }}</code>
+				<span><code class="ic mr-2 d-inline-flex">{{ component.title }}</code></span>
 			</template>
 		</v-col>
 
@@ -98,19 +98,6 @@
 			An example of its usage can be found in the <a href="#examples-buttons-field">Buttons Field</a> example within the
 			Examples section below.
 		</v-col>
-
-		<!-- <v-col
-			id="components-field-label"
-			cols="12"
-		>
-			<h3 :class="classes.h3">
-				<a
-					:class="classes.headerA"
-					href="#components-field-label"
-				>#</a>
-				Field Label
-			</h3>
-		</v-col> -->
 	</v-row>
 </template>
 
@@ -191,11 +178,15 @@ const buttonsFieldOptions = `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'];
 }`;
 </script>
 

src/documentation/sections/UsageSection.vue

@@ -23,8 +23,6 @@
 			>
 				<template #label>
 					Global Plugin Registration
-					<!-- <br>
-					<i>Global options have a higher precedence and will override local props</i> -->
 				</template>
 			</VCodeBlock>
 		</v-col>
@@ -69,6 +67,7 @@ app.use(createVStepperForm({
 
 app.mount('#app');`;
 
+// Needed to add ${''} to prevent console thinking it's actually trying to import the plugin //
 const usageGlobalComponent = `import { createApp } from 'vue';
 import App from './App.vue';
 import { VStepperForm } from  '@wdns/vuetify-stepper-form';
@@ -86,7 +85,7 @@ const usageIndividual = `<template>
 </template>
 
 \<script setup\>
-  import VStepperForm from  '@wdns/vuetify-stepper-form';
+  im${''}port { VStepperForm } from  '@wdns/vuetify-stepper-form';
 
   const foo = ref(null);
 \</script\>`;

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;