Dev

src/App.vue

@@ -15,7 +15,7 @@
 				class="px-7"
 				style="max-width: 1368px;"
 			>
-				<DocsPage :codeBlockOptions="codeBlockSettings" />
+				<DocsPage />
 			</v-container>
 		</v-main>
 	</v-app>

src/documentation/components/ExampleContainer.vue

@@ -113,6 +113,7 @@
 </template>
 
 <script setup lang="ts">
+defineOptions({ inheritAttrs: false });
 const emit = defineEmits(['closePicker']);
 
 export interface ExampleCode {

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']);
 

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);

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({

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({

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;

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);
 

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({

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({

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,

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',

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({

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);

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;
 	}
@@ -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 //

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>();