From 755e680f873476ec3ad4d52f17179b18e16a2419 Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Mon, 12 May 2025 12:34:40 -0700
Subject: [PATCH 1/4] fix type

---
 src/plugin/components/fields/VSFButtonField/VSFButtonField.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugin/components/fields/VSFButtonField/VSFButtonField.vue b/src/plugin/components/fields/VSFButtonField/VSFButtonField.vue
index 4e6f763..e46713e 100644
--- a/src/plugin/components/fields/VSFButtonField/VSFButtonField.vue
+++ b/src/plugin/components/fields/VSFButtonField/VSFButtonField.vue
@@ -210,7 +210,7 @@ const getIcon = (option: Option, prop: string): string => {
 };
 
 
-function getId(option: { id?: string; }, key: string | number) {
+function getId(option: { id?: string | number; }, key: string | number) {
 	if (option.id != null) {
 		return option.id;
 	}

From eaff29e532cbe93e00d64c8f8522a4acba91d982 Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Mon, 12 May 2025 13:08:23 -0700
Subject: [PATCH 2/4] fixing prop junk

---
 src/App.vue                                          |  2 +-
 src/documentation/components/ExampleContainer.vue    |  1 +
 .../components/examples/ButtonsFieldExample.vue      |  5 +++++
 .../components/examples/ColumnsExample.vue           |  5 +++++
 .../components/examples/ConditionalFieldExample.vue  |  5 +++++
 .../components/examples/ConditionalPageExample.vue   |  5 +++++
 .../examples/DynamicAnswersQuestionsExample.vue      |  6 ++++++
 .../components/examples/FieldSlotExample.vue         |  5 +++++
 .../components/examples/SimpleExample.vue            |  5 +++++
 .../components/examples/SummaryPageExample.vue       |  5 +++++
 .../components/examples/TemplateExample.vue          |  7 +++++++
 .../components/examples/TooltipExample.vue           |  6 ++++++
 .../components/examples/ValidationExample.vue        |  7 +++++++
 src/documentation/sections/ExampleSection.vue        | 12 ------------
 14 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3b369d2..5e7044c 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,7 +15,7 @@
 				class="px-7"
 				style="max-width: 1368px;"
 			>
-				<DocsPage :codeBlockOptions="codeBlockSettings" />
+				<DocsPage />
 			</v-container>
 		</v-main>
 	</v-app>
diff --git a/src/documentation/components/ExampleContainer.vue b/src/documentation/components/ExampleContainer.vue
index 0be7166..7ccbaf7 100644
--- a/src/documentation/components/ExampleContainer.vue
+++ b/src/documentation/components/ExampleContainer.vue
@@ -113,6 +113,7 @@
 </template>
 
 <script setup lang="ts">
+defineOptions({ inheritAttrs: false });
 const emit = defineEmits(['closePicker']);
 
 export interface ExampleCode {
diff --git a/src/documentation/components/examples/ButtonsFieldExample.vue b/src/documentation/components/examples/ButtonsFieldExample.vue
index dc7af0a..cc55934 100644
--- a/src/documentation/components/examples/ButtonsFieldExample.vue
+++ b/src/documentation/components/examples/ButtonsFieldExample.vue
@@ -154,6 +154,11 @@ import {
 } from 'yup';
 import AnswersDialog from '../AnswersDialog.vue';
 
+interface Props {
+	open?: HTMLPreElement | null;
+}
+
+defineProps<Props>();
 
 const emit = defineEmits(['codeUpdated']);
 
diff --git a/src/documentation/components/examples/ColumnsExample.vue b/src/documentation/components/examples/ColumnsExample.vue
index ef0d66b..20daaed 100644
--- a/src/documentation/components/examples/ColumnsExample.vue
+++ b/src/documentation/components/examples/ColumnsExample.vue
@@ -20,6 +20,11 @@
 <script setup lang="ts">
 import AnswersDialog from '../AnswersDialog.vue';
 
+interface Props {
+	open?: HTMLPreElement | null;
+}
+
+defineProps<Props>();
 
 const links = inject<Docs.Links>('links')!;
 const dialog = ref(false);
diff --git a/src/documentation/components/examples/ConditionalFieldExample.vue b/src/documentation/components/examples/ConditionalFieldExample.vue
index 6f7de07..045696b 100644
--- a/src/documentation/components/examples/ConditionalFieldExample.vue
+++ b/src/documentation/components/examples/ConditionalFieldExample.vue
@@ -15,6 +15,11 @@
 import { ref } from 'vue';
 import AnswersDialog from '../AnswersDialog.vue';
 
+interface Props {
+	open?: HTMLPreElement | null;
+}
+
+defineProps<Props>();
 
 const dialog = ref(false);
 const formAnswers = ref({
diff --git a/src/documentation/components/examples/ConditionalPageExample.vue b/src/documentation/components/examples/ConditionalPageExample.vue
index b3e14e1..75c9d3e 100644
--- a/src/documentation/components/examples/ConditionalPageExample.vue
+++ b/src/documentation/components/examples/ConditionalPageExample.vue
@@ -15,6 +15,11 @@
 import { ref } from 'vue';
 import AnswersDialog from '../AnswersDialog.vue';
 
+interface Props {
+		open?: HTMLPreElement | null;
+}
+
+defineProps<Props>();
 
 const dialog = ref(false);
 const answers = ref({
diff --git a/src/documentation/components/examples/DynamicAnswersQuestionsExample.vue b/src/documentation/components/examples/DynamicAnswersQuestionsExample.vue
index 7174425..783aa7f 100644
--- a/src/documentation/components/examples/DynamicAnswersQuestionsExample.vue
+++ b/src/documentation/components/examples/DynamicAnswersQuestionsExample.vue
@@ -17,6 +17,12 @@ import type { MaybeRef } from 'vue';
 import AnswersDialog from '../AnswersDialog.vue';
 
 
+interface Props {
+	open?: HTMLPreElement | null;
+}
+
+defineProps<Props>();
+
 const dialog = ref(false);
 const answers = ref<{
 	foobar: string | null;
diff --git a/src/documentation/components/examples/FieldSlotExample.vue b/src/documentation/components/examples/FieldSlotExample.vue
index 466aa2d..5c1548e 100644
--- a/src/documentation/components/examples/FieldSlotExample.vue
+++ b/src/documentation/components/examples/FieldSlotExample.vue
@@ -49,6 +49,11 @@
 import { ref } from 'vue';
 import AnswersDialog from '../AnswersDialog.vue';
 
+interface Props {
+	open?: HTMLPreElement | null;
+}
+
+defineProps<Props>();
 
 const dialog = ref(false);
 
diff --git a/src/documentation/components/examples/SimpleExample.vue b/src/documentation/components/examples/SimpleExample.vue
index a4ea2bd..8de162d 100644
--- a/src/documentation/components/examples/SimpleExample.vue
+++ b/src/documentation/components/examples/SimpleExample.vue
@@ -15,6 +15,11 @@
 import { ref } from 'vue';
 import AnswersDialog from '../AnswersDialog.vue';
 
+interface Props {
+	open?: HTMLPreElement | null;
+}
+
+defineProps<Props>();
 
 const dialog = ref(false);
 const answers = ref({
diff --git a/src/documentation/components/examples/SummaryPageExample.vue b/src/documentation/components/examples/SummaryPageExample.vue
index 351ebad..6b09736 100644
--- a/src/documentation/components/examples/SummaryPageExample.vue
+++ b/src/documentation/components/examples/SummaryPageExample.vue
@@ -19,6 +19,11 @@
 import { ref } from 'vue';
 import AnswersDialog from '../AnswersDialog.vue';
 
+interface Props {
+	open?: HTMLPreElement | null;
+}
+
+defineProps<Props>();
 
 const dialog = ref(false);
 const answers = ref({
diff --git a/src/documentation/components/examples/TemplateExample.vue b/src/documentation/components/examples/TemplateExample.vue
index f69761c..5fa50a7 100644
--- a/src/documentation/components/examples/TemplateExample.vue
+++ b/src/documentation/components/examples/TemplateExample.vue
@@ -14,6 +14,13 @@ import {
 	string as yupString,
 } from 'yup';
 
+
+interface Props {
+	open?: HTMLPreElement | null;
+}
+
+defineProps<Props>();
+
 const answers = ref({
 	bar: null,
 	foo: null,
diff --git a/src/documentation/components/examples/TooltipExample.vue b/src/documentation/components/examples/TooltipExample.vue
index ad5fe5b..9872d52 100644
--- a/src/documentation/components/examples/TooltipExample.vue
+++ b/src/documentation/components/examples/TooltipExample.vue
@@ -20,6 +20,12 @@ import { ref } from 'vue';
 import AnswersDialog from '../AnswersDialog.vue';
 
 
+interface Props {
+	open?: HTMLPreElement | null;
+}
+
+defineProps<Props>();
+
 const dialog = ref(false);
 const answers = ref({
 	address: '123 Street',
diff --git a/src/documentation/components/examples/ValidationExample.vue b/src/documentation/components/examples/ValidationExample.vue
index f6b6831..23c9e5b 100644
--- a/src/documentation/components/examples/ValidationExample.vue
+++ b/src/documentation/components/examples/ValidationExample.vue
@@ -20,6 +20,13 @@ import {
 } from 'yup';
 import AnswersDialog from '../AnswersDialog.vue';
 
+
+interface Props {
+	open?: HTMLPreElement | null;
+}
+
+defineProps<Props>();
+
 const dialog = ref(false);
 
 const answers = ref({
diff --git a/src/documentation/sections/ExampleSection.vue b/src/documentation/sections/ExampleSection.vue
index 0e2fb22..4aa1e87 100755
--- a/src/documentation/sections/ExampleSection.vue
+++ b/src/documentation/sections/ExampleSection.vue
@@ -15,7 +15,6 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('SimpleExampleRef')"
-			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('SimpleExampleRef');"
 		>
 			<Example.SimpleExample
@@ -26,7 +25,6 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('ColumnsExampleRef')"
-			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('ColumnsExampleRef');"
 		>
 			<Example.ColumnsExample
@@ -37,7 +35,6 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('FieldSlotExampleRef')"
-			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('FieldSlotExampleRef');"
 		>
 			<Example.FieldSlotExample
@@ -49,7 +46,6 @@
 		<ExampleContainer
 			id="validation-example"
 			:code="getTemplateCode('ValidationExampleRef')"
-			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('ValidationExampleRef');"
 		>
 			<Example.ValidationExample
@@ -60,7 +56,6 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('ButtonsFieldExampleRef')"
-			:codeBlockSettings="codeBlockSettings"
 			:codeUpdatedAt="ButtonsFieldExampleCode?.updatedAt"
 			:updatedCode="ButtonsFieldExampleCode?.updatedCode"
 			@closePicker="closePicker('ButtonsFieldExampleRef');"
@@ -74,7 +69,6 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('SummaryPageExampleRef')"
-			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('SummaryPageExampleRef');"
 		>
 			<Example.SummaryPageExample
@@ -85,7 +79,6 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('TooltipExampleRef')"
-			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('TooltipExampleRef');"
 		>
 			<Example.TooltipExample
@@ -96,7 +89,6 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('ConditionalPageExampleRef')"
-			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('ConditionalPageExampleRef');"
 		>
 			<Example.ConditionalPageExample
@@ -107,7 +99,6 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('ConditionalFieldExampleRef')"
-			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('ConditionalFieldExampleRef');"
 		>
 			<Example.ConditionalFieldExample
@@ -118,7 +109,6 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('DynamicAnswersQuestionsExampleRef')"
-			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('DynamicAnswersQuestionsExampleRef');"
 		>
 			<Example.DynamicAnswersQuestionsExample
@@ -134,8 +124,6 @@ import type { ExampleCode } from '../components/ExampleContainer.vue';
 import ExampleContainer from '../components/ExampleContainer.vue';
 import * as Example from '../components/examples';
 
-
-const codeBlockSettings = inject<Docs.CodeBlockSettings>('codeBlockSettings')!;
 const classes = inject<Docs.GlobalClasses>('classes')!;
 
 const SimpleExampleRef = ref(null);

From 8446d7f037e5adf012929d926d161694171ef50c Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Mon, 12 May 2025 13:11:11 -0700
Subject: [PATCH 3/4] fixed type

---
 src/plugin/components/shared/FieldLabel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugin/components/shared/FieldLabel.vue b/src/plugin/components/shared/FieldLabel.vue
index 2e22b73..07e358b 100644
--- a/src/plugin/components/shared/FieldLabel.vue
+++ b/src/plugin/components/shared/FieldLabel.vue
@@ -11,7 +11,7 @@
 <script lang="ts" setup>
 export interface FieldLabelProps {
 	label: string | undefined;
-	required: boolean | undefined;
+	required?: boolean | undefined;
 }
 
 const { label, required = false } = defineProps<FieldLabelProps>();

From 7c732dc904bb7b88c58f4468eae2d683ae0da3dd Mon Sep 17 00:00:00 2001
From: WebDevNerdStuff <webdevnerdstuff@gmail.com>
Date: Mon, 12 May 2025 13:15:45 -0700
Subject: [PATCH 4/4] fix if value.value is number

---
 .../fields/VSFButtonField/VSFButtonField.vue         | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/plugin/components/fields/VSFButtonField/VSFButtonField.vue b/src/plugin/components/fields/VSFButtonField/VSFButtonField.vue
index e46713e..55924df 100644
--- a/src/plugin/components/fields/VSFButtonField/VSFButtonField.vue
+++ b/src/plugin/components/fields/VSFButtonField/VSFButtonField.vue
@@ -317,7 +317,17 @@ const isActive = (val: string | number): boolean | undefined => {
 		return undefined;
 	}
 
-	return value.value === val || (value.value as string[]).includes(val as string);
+	// If value.value is a number, compare directly.
+	if (typeof value.value === 'number') {
+		return value.value === val;
+	}
+
+	// If value.value is a string or an array of strings, handle both cases.
+	if (typeof value.value === 'string' || Array.isArray(value.value)) {
+		return (value.value as string[]).includes(val as string);
+	}
+
+	return undefined;
 };
 
 // ------------------------- Variants //