From f0d3572b7602546fc4826001e0a975864f906189 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Tue, 28 Jan 2025 17:56:02 +0100
Subject: [PATCH] feat(ui): introduce `FieldType.Boolean` - WF

This new field is just an alias for `FieldType.Text` but it will
make `useEvaluator` parse the value and accept `"yes"` or `True`
and return the boolean value.

This unlock the usage of boolean value in the state like:

```py
wf.init_state({
  "string": "yes",
  "true": True,
})
```

This is also the first step to introduce a new field setting UX for
boolean value (like a checkbox or something).
---
 .../settings/BuilderSettingsProperties.vue    |  5 +-
 .../core/content/CoreAnnotatedText.vue        | 17 ++----
 .../components/core/content/CoreChatbot.vue   |  9 +--
 .../components/core/content/CoreDataframe.vue | 57 +++++--------------
 .../core/content/CoreDataframeLegacy.vue      | 43 ++++----------
 .../core/content/CoreJsonViewer.vue           | 17 ++----
 .../core/content/CoreProgressBar.vue          | 12 ++--
 .../src/components/core/content/CoreTags.vue  | 14 ++---
 .../src/components/core/content/CoreText.vue  | 15 ++---
 .../core/content/CoreVideoPlayer.vue          | 34 +++--------
 .../src/components/core/embed/CoreMapbox.vue  | 12 ++--
 src/ui/src/components/core/embed/CorePDF.vue  |  9 +--
 .../components/core/input/CoreFileInput.vue   | 10 +---
 .../components/core/input/CoreTextInput.vue   | 14 ++---
 .../src/components/core/layout/CoreColumn.vue | 16 ++----
 .../components/core/layout/CoreSection.vue    |  4 +-
 .../components/core/layout/CoreSidebar.vue    |  2 +-
 .../src/components/core/layout/CoreStep.vue   | 25 ++++----
 .../src/components/core/other/CoreButton.vue  | 11 ++--
 .../components/core/other/CorePagination.vue  | 21 ++-----
 .../src/components/core/other/CoreTimer.vue   | 14 ++---
 src/ui/src/composables/useFieldValue.ts       | 10 ----
 src/ui/src/renderer/sharedStyleFields.ts      | 20 +++++--
 src/ui/src/renderer/useEvaluator.ts           | 12 +++-
 src/ui/src/writerTypes.ts                     |  1 +
 25 files changed, 152 insertions(+), 252 deletions(-)
 delete mode 100644 src/ui/src/composables/useFieldValue.ts

diff --git a/src/ui/src/builder/settings/BuilderSettingsProperties.vue b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
index a23176d7..e3bb6444 100644
--- a/src/ui/src/builder/settings/BuilderSettingsProperties.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
@@ -50,7 +50,10 @@
 					></BuilderFieldsKeyValue>
 
 					<BuilderFieldsText
-						v-if="fieldValue.type == FieldType.Text"
+						v-if="
+							fieldValue.type == FieldType.Text ||
+							fieldValue.type == FieldType.Boolean
+						"
 						:field-key="fieldKey"
 						:component-id="selectedComponent.id"
 					></BuilderFieldsText>
diff --git a/src/ui/src/components/core/content/CoreAnnotatedText.vue b/src/ui/src/components/core/content/CoreAnnotatedText.vue
index b89a9bb0..1866883b 100644
--- a/src/ui/src/components/core/content/CoreAnnotatedText.vue
+++ b/src/ui/src/components/core/content/CoreAnnotatedText.vue
@@ -16,7 +16,7 @@
 				</span>
 			</span>
 		</span>
-		<template v-if="fields.copyButtons.value === 'yes'">
+		<template v-if="fields.copyButtons.value">
 			<SharedControlBar
 				:copy-raw-content="textToString(safeText)"
 				:copy-structured-content="stringifyData(safeText)"
@@ -27,6 +27,7 @@
 
 <script lang="ts">
 import {
+	baseYesNoField,
 	buttonColor,
 	buttonTextColor,
 	cssClasses,
@@ -61,24 +62,16 @@ export default {
 				category: FieldCategory.Style,
 			},
 			rotateHue: {
+				...baseYesNoField,
 				name: "Rotate hue",
 				desc: "If active, rotates the hue depending on the content of the string. If turned off, the reference colour is always used.",
-				type: FieldType.Text,
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 				default: "yes",
 				category: FieldCategory.Style,
 			},
 			copyButtons: {
+				...baseYesNoField,
 				name: "Copy buttons",
 				desc: "If active, adds a control bar with both copy text and JSON buttons.",
-				type: FieldType.Text,
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 				default: "no",
 				category: FieldCategory.Style,
 			},
@@ -161,7 +154,7 @@ function calculateColorStep(s: string, stepsLength = COLOR_STEPS.length) {
 }
 
 function generateColor(s: string) {
-	if (fields.rotateHue.value == "no") {
+	if (!fields.rotateHue.value) {
 		return fields.referenceColor.value;
 	}
 
diff --git a/src/ui/src/components/core/content/CoreChatbot.vue b/src/ui/src/components/core/content/CoreChatbot.vue
index 0cba76b7..4ce4f7e1 100644
--- a/src/ui/src/components/core/content/CoreChatbot.vue
+++ b/src/ui/src/components/core/content/CoreChatbot.vue
@@ -13,7 +13,7 @@ See the stubs for more details.
 					v-for="(message, messageId) in messages"
 					:key="messageId"
 					:message="message"
-					:use-markdown="fields.useMarkdown.value == 'yes'"
+					:use-markdown="fields.useMarkdown.value"
 					:assistant-role-color="fields.assistantRoleColor.value"
 					:initials="
 						message.role === 'assistant'
@@ -99,6 +99,7 @@ See the stubs for more details.
 import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	accentColor,
+	baseYesNoField,
 	buttonColor,
 	buttonTextColor,
 	containerBackgroundColor,
@@ -210,14 +211,10 @@ export default {
 				type: FieldType.Text,
 			},
 			useMarkdown: {
+				...baseYesNoField,
 				name: "Use Markdown",
 				desc: "If active, the output will be sanitized; unsafe elements will be removed.",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 			},
 			enableFileUpload: {
 				name: "Enable file upload",
diff --git a/src/ui/src/components/core/content/CoreDataframe.vue b/src/ui/src/components/core/content/CoreDataframe.vue
index 650adf5e..6627485a 100644
--- a/src/ui/src/components/core/content/CoreDataframe.vue
+++ b/src/ui/src/components/core/content/CoreDataframe.vue
@@ -10,7 +10,7 @@
 				/>
 			</div>
 			<WdsControl
-				v-if="fields.enableDownload.value === 'yes'"
+				v-if="fields.enableDownload.value"
 				title="Download"
 				class="download"
 				@click="download"
@@ -24,7 +24,7 @@
 				:style="gridStyle"
 				:class="{
 					scrolled: rowOffset > 0,
-					wrapText: fields.wrapText.value === 'yes',
+					wrapText: fields.wrapText.value,
 				}"
 			>
 				<div
@@ -119,6 +119,7 @@ import {
 	secondaryTextColor,
 	accentColor,
 	separatorColor,
+	baseYesNoField,
 } from "@/renderer/sharedStyleFields";
 import { onMounted } from "vue";
 import { watch } from "vue";
@@ -193,51 +194,31 @@ export default {
 				default: DEFAULT_DATA_FRAME,
 			},
 			showIndex: {
+				...baseYesNoField,
 				name: "Show index",
 				desc: "Shows the dataframe's index. If an Arrow table is used, shows the zero-based integer index.",
-				type: FieldType.Text,
 				default: "yes",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 			},
 			enableSearch: {
+				...baseYesNoField,
 				name: "Enable search",
-				type: FieldType.Text,
 				default: "no",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 			},
 			enableRecordAdd: {
+				...baseYesNoField,
 				name: "Enable adding a record",
-				type: FieldType.Text,
 				default: "no",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 			},
 			enableRecordUpdate: {
+				...baseYesNoField,
 				name: "Enable updating a record",
-				type: FieldType.Text,
 				default: "no",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 			},
 			enableDownload: {
+				...baseYesNoField,
 				name: "Enable download",
 				desc: "Allows the user to download the data as CSV.",
-				type: FieldType.Text,
 				default: "no",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 			},
 			actions: {
 				name: "Actions",
@@ -246,13 +227,9 @@ export default {
 				default: JSON.stringify({ remove: "Remove", open: "Open" }),
 			},
 			useMarkdown: {
+				...baseYesNoField,
 				name: "Use Markdown",
-				type: FieldType.Text,
 				desc: "If active, the output will be sanitized; unsafe elements will be removed.",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 				default: "no",
 			},
 			displayRowCount: {
@@ -263,14 +240,10 @@ export default {
 				default: "10",
 			},
 			wrapText: {
+				...baseYesNoField,
 				name: "Wrap text",
-				type: FieldType.Text,
 				category: FieldCategory.Style,
 				desc: "Not wrapping text allows for an uniform grid, but may be inconvenient if your data contains longer text fields.",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 				default: "no",
 			},
 			primaryTextColor,
@@ -377,15 +350,15 @@ const displayRowCount = computed(() =>
 const hasActions = computed(
 	() => Object.keys(fields.actions.value || {}).length > 0,
 );
-const useMarkdown = computed(() => fields.useMarkdown.value == "yes");
-const enableRecordUpdate = computed(
-	() => fields.enableRecordUpdate.value == "yes",
+const useMarkdown = computed(() => Boolean(fields.useMarkdown.value));
+const enableRecordUpdate = computed(() =>
+	Boolean(fields.enableRecordUpdate.value),
 );
-const enableRecordAdd = computed(() => fields.enableRecordAdd.value == "yes");
+const enableRecordAdd = computed(() => Boolean(fields.enableRecordAdd.value));
 
 const rowOffset = computed(() => {
 	let maxOffset: number;
-	if (fields.wrapText.value == "yes") {
+	if (fields.wrapText.value) {
 		maxOffset = rowCount.value - 1;
 	} else {
 		maxOffset = rowCount.value - displayRowCount.value;
diff --git a/src/ui/src/components/core/content/CoreDataframeLegacy.vue b/src/ui/src/components/core/content/CoreDataframeLegacy.vue
index eb0a0f24..84a62d9b 100644
--- a/src/ui/src/components/core/content/CoreDataframeLegacy.vue
+++ b/src/ui/src/components/core/content/CoreDataframeLegacy.vue
@@ -1,7 +1,7 @@
 <template>
 	<div ref="rootEl" class="CoreDataframe">
 		<div ref="toolsEl" class="tools">
-			<div v-if="fields.enableSearch.value === 'yes'">
+			<div v-if="fields.enableSearch.value">
 				<WdsTextInput
 					class="search"
 					placeholder="Search"
@@ -10,7 +10,7 @@
 				/>
 			</div>
 			<WdsControl
-				v-if="fields.enableDownload.value === 'yes'"
+				v-if="fields.enableDownload.value"
 				title="Download"
 				class="download"
 				@click="download"
@@ -24,7 +24,7 @@
 				:style="gridStyle"
 				:class="{
 					scrolled: rowOffset > 0,
-					wrapText: fields.wrapText.value === 'yes',
+					wrapText: fields.wrapText.value,
 				}"
 			>
 				<div
@@ -89,7 +89,7 @@
 						class="cell"
 					>
 						<BaseMarkdown
-							v-if="fields.useMarkdown.value == 'yes'"
+							v-if="fields.useMarkdown.value"
 							:raw-text="row[columnName]"
 						>
 						</BaseMarkdown>
@@ -112,6 +112,7 @@
 import { Ref, computed, inject, ref } from "vue";
 import { FieldCategory, FieldType } from "@/writerTypes";
 import {
+	baseYesNoField,
 	cssClasses,
 	primaryTextColor,
 	secondaryTextColor,
@@ -144,42 +145,26 @@ export default {
 				default: defaultDataframe,
 			},
 			showIndex: {
+				...baseYesNoField,
 				name: "Show index",
 				desc: "Shows the dataframe's index. If an Arrow table is used, shows the zero-based integer index.",
-				type: FieldType.Text,
 				default: "yes",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 			},
 			enableSearch: {
+				...baseYesNoField,
 				name: "Enable search",
-				type: FieldType.Text,
 				default: "no",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 			},
 			enableDownload: {
+				...baseYesNoField,
 				name: "Enable download",
 				desc: "Allows the user to download the data as CSV.",
-				type: FieldType.Text,
 				default: "no",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 			},
 			useMarkdown: {
+				...baseYesNoField,
 				name: "Use Markdown",
-				type: FieldType.Text,
 				desc: "If active, the output will be sanitized; unsafe elements will be removed.",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 				default: "no",
 			},
 			displayRowCount: {
@@ -190,14 +175,10 @@ export default {
 				default: "10",
 			},
 			wrapText: {
+				...baseYesNoField,
 				name: "Wrap text",
-				type: FieldType.Text,
 				category: FieldCategory.Style,
 				desc: "Not wrapping text allows for an uniform grid, but may be inconvenient if your data contains longer text fields.",
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 				default: "no",
 			},
 			primaryTextColor,
@@ -252,7 +233,7 @@ const gridContainerEl: Ref<HTMLElement> = ref();
 let baseTable: aq.internal.ColumnTable = null;
 const table: Ref<aq.internal.ColumnTable> = ref(null);
 const tableIndex = ref([]);
-const isIndexShown = computed(() => fields.showIndex.value == "yes");
+const isIndexShown = computed(() => fields.showIndex.value);
 const orderSetting: Ref<OrderSetting> = ref(null);
 const relativePosition: Ref<number> = ref(0);
 const columnWidths: Ref<number[]> = ref([]);
@@ -286,7 +267,7 @@ const displayRowCount = computed(() =>
 );
 const rowOffset = computed(() => {
 	let maxOffset: number;
-	if (fields.wrapText.value == "yes") {
+	if (fields.wrapText.value) {
 		maxOffset = rowCount.value - 1;
 	} else {
 		maxOffset = rowCount.value - displayRowCount.value;
diff --git a/src/ui/src/components/core/content/CoreJsonViewer.vue b/src/ui/src/components/core/content/CoreJsonViewer.vue
index 7cee5b18..636a70c9 100644
--- a/src/ui/src/components/core/content/CoreJsonViewer.vue
+++ b/src/ui/src/components/core/content/CoreJsonViewer.vue
@@ -3,8 +3,8 @@
 		<SharedJsonViewer
 			:data="data ?? {}"
 			:initial-depth="initialDepth"
-			:enable-copy-to-json="fields.copy.value === 'yes'"
-			:hide-root="fields.hideRoot.value === 'yes'"
+			:enable-copy-to-json="fields.copy.value"
+			:hide-root="fields.hideRoot.value"
 		/>
 	</div>
 </template>
@@ -12,6 +12,7 @@
 <script lang="ts">
 import {
 	accentColor,
+	baseYesNoField,
 	cssClasses,
 	secondaryTextColor,
 	separatorColor,
@@ -56,24 +57,16 @@ const definition: WriterComponentDefinition = {
 			init: "0",
 		},
 		hideRoot: {
+			...baseYesNoField,
 			name: "Hide root",
 			desc: "Don't show the type of the root node when it's an Object or an Array.",
-			type: FieldType.Text,
-			options: {
-				yes: "yes",
-				no: "no",
-			},
 			default: "no",
 			category: FieldCategory.Style,
 		},
 		copy: {
+			...baseYesNoField,
 			name: "Copy",
 			desc: "If active, adds a control bar with copy JSON button.",
-			type: FieldType.Text,
-			options: {
-				yes: "yes",
-				no: "no",
-			},
 			default: "no",
 			category: FieldCategory.Style,
 		},
diff --git a/src/ui/src/components/core/content/CoreProgressBar.vue b/src/ui/src/components/core/content/CoreProgressBar.vue
index 92a3ac66..09578497 100644
--- a/src/ui/src/components/core/content/CoreProgressBar.vue
+++ b/src/ui/src/components/core/content/CoreProgressBar.vue
@@ -47,6 +47,7 @@ import {
 	accentColor,
 	primaryTextColor,
 	separatorColor,
+	baseYesNoField,
 } from "@/renderer/sharedStyleFields";
 
 const clickHandlerStub = `
@@ -81,14 +82,10 @@ const definition: WriterComponentDefinition = {
 			default: "1",
 		},
 		displayPercentage: {
+			...baseYesNoField,
 			name: "Display percentage",
 			default: "no",
-			type: FieldType.Text,
 			category: FieldCategory.Style,
-			options: {
-				yes: "Yes",
-				no: "No",
-			},
 		},
 		accentColor,
 		primaryTextColor,
@@ -109,7 +106,6 @@ export default { writer: definition };
 <script setup lang="ts">
 import { CSSProperties, computed, inject, ref } from "vue";
 import injectionKeys from "@/injectionKeys";
-import { useFieldValueAsYesNo } from "@/composables/useFieldValue";
 import { getClick } from "@/renderer/syntheticEvents";
 import { usePercentageFormatter } from "@/composables/useFormatter";
 
@@ -122,7 +118,9 @@ const label = computed(() => String(fields.label?.value));
 const value = computed(() => Number(fields.value.value));
 const min = computed(() => Number(fields.min.value));
 const max = computed(() => Number(fields.max.value));
-const displayPercentage = useFieldValueAsYesNo(fields, "displayPercentage");
+const displayPercentage = computed(() =>
+	Boolean(fields.displayPercentage.value),
+);
 
 const progression = computed<number | undefined>(() => {
 	if (value.value === undefined || Number.isNaN(value.value)) {
diff --git a/src/ui/src/components/core/content/CoreTags.vue b/src/ui/src/components/core/content/CoreTags.vue
index 938b5708..6870d222 100644
--- a/src/ui/src/components/core/content/CoreTags.vue
+++ b/src/ui/src/components/core/content/CoreTags.vue
@@ -25,7 +25,11 @@
 
 <script lang="ts">
 import { FieldCategory, FieldType } from "@/writerTypes";
-import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
+import {
+	baseYesNoField,
+	cssClasses,
+	primaryTextColor,
+} from "@/renderer/sharedStyleFields";
 import { WdsColor } from "@/wds/tokens";
 
 const clickHandlerStub = `
@@ -61,13 +65,9 @@ export default {
 				category: FieldCategory.Style,
 			},
 			rotateHue: {
+				...baseYesNoField,
 				name: "Rotate hue",
 				desc: "If active, rotates the hue depending on the content of the string. If turned off, the reference colour is always used.",
-				type: FieldType.Text,
-				options: {
-					yes: "yes",
-					no: "no",
-				},
 				default: "yes",
 				category: FieldCategory.Style,
 			},
@@ -113,7 +113,7 @@ const isClickable = computed(() => {
 });
 
 function generateColor(s: string) {
-	if (fields.rotateHue.value == "no") {
+	if (!fields.rotateHue.value) {
 		return fields.referenceColor.value;
 	}
 	const baseColor = chroma(fields.referenceColor.value);
diff --git a/src/ui/src/components/core/content/CoreText.vue b/src/ui/src/components/core/content/CoreText.vue
index 8894993d..12ee25ba 100644
--- a/src/ui/src/components/core/content/CoreText.vue
+++ b/src/ui/src/components/core/content/CoreText.vue
@@ -9,7 +9,7 @@
 		<BaseEmptiness v-if="isEmpty" :component-id="componentId" />
 		<template v-else>
 			<BaseMarkdown
-				v-if="fields.useMarkdown.value == 'yes'"
+				v-if="fields.useMarkdown.value"
 				:raw-text="fields.text.value"
 				:style="contentStyle"
 			>
@@ -22,7 +22,11 @@
 </template>
 
 <script lang="ts">
-import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
+import {
+	baseYesNoField,
+	cssClasses,
+	primaryTextColor,
+} from "@/renderer/sharedStyleFields";
 import { getClick } from "@/renderer/syntheticEvents";
 import { FieldCategory, FieldControl, FieldType } from "@/writerTypes";
 
@@ -50,14 +54,10 @@ export default {
 				control: FieldControl.Textarea,
 			},
 			useMarkdown: {
+				...baseYesNoField,
 				name: "Use Markdown",
 				desc: "The Markdown output will be sanitised; unsafe elements will be removed.",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 			},
 			alignment: {
 				name: "Alignment",
@@ -83,6 +83,7 @@ export default {
 	},
 };
 </script>
+
 <script setup lang="ts">
 import { Ref, computed, inject, ref } from "vue";
 import injectionKeys from "@/injectionKeys";
diff --git a/src/ui/src/components/core/content/CoreVideoPlayer.vue b/src/ui/src/components/core/content/CoreVideoPlayer.vue
index b8651c42..c6043286 100644
--- a/src/ui/src/components/core/content/CoreVideoPlayer.vue
+++ b/src/ui/src/components/core/content/CoreVideoPlayer.vue
@@ -14,10 +14,10 @@ Afterwards, you can reference the video using the syntax \`@{vid_f}\`.
 	<div class="CoreVideoPlayer">
 		<video
 			:src="fields.src.value"
-			:controls="fields.controls.value === 'yes'"
-			:autoplay="fields.autoplay.value === 'yes'"
-			:loop="fields.loop.value === 'yes'"
-			:muted="fields.muted.value === 'yes'"
+			:controls="fields.controls.value"
+			:autoplay="fields.autoplay.value"
+			:loop="fields.loop.value"
+			:muted="fields.muted.value"
 		></video>
 		<div class="mask" />
 	</div>
@@ -25,7 +25,7 @@ Afterwards, you can reference the video using the syntax \`@{vid_f}\`.
 
 <script lang="ts">
 import { FieldType } from "@/writerTypes";
-import { cssClasses } from "@/renderer/sharedStyleFields";
+import { baseYesNoField, cssClasses } from "@/renderer/sharedStyleFields";
 
 const description =
 	"A video player component that can play various video formats.";
@@ -43,44 +43,28 @@ export default {
 				type: FieldType.Text,
 			},
 			controls: {
+				...baseYesNoField,
 				name: "Controls",
 				desc: "Display video player controls.",
 				default: "yes",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 			},
 			autoplay: {
+				...baseYesNoField,
 				name: "Autoplay",
 				desc: "Autoplay the video when the component is loaded.",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 			},
 			loop: {
+				...baseYesNoField,
 				name: "Loop",
 				desc: "Loop the video when it reaches the end.",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 			},
 			muted: {
+				...baseYesNoField,
 				name: "Muted",
 				desc: "Mute the video by default.",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 			},
 			cssClasses,
 		},
diff --git a/src/ui/src/components/core/embed/CoreMapbox.vue b/src/ui/src/components/core/embed/CoreMapbox.vue
index 358e2af5..25087d2e 100644
--- a/src/ui/src/components/core/embed/CoreMapbox.vue
+++ b/src/ui/src/components/core/embed/CoreMapbox.vue
@@ -11,7 +11,7 @@
 
 <script lang="ts">
 import { FieldType } from "@/writerTypes";
-import { cssClasses } from "@/renderer/sharedStyleFields";
+import { baseYesNoField, cssClasses } from "@/renderer/sharedStyleFields";
 import { useLogger } from "@/composables/useLogger";
 
 const markersDefaultData = [
@@ -60,13 +60,9 @@ export default {
 				type: FieldType.Object,
 			},
 			controls: {
+				...baseYesNoField,
 				name: "Controls visible",
 				default: "yes",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 				desc: "Show map controls",
 			},
 			cssClasses,
@@ -131,7 +127,7 @@ const initMap = async () => {
 			rootEl.value.dispatchEvent(event);
 		});
 		controls = new mapboxgl.NavigationControl();
-		if (fields.controls.value === "yes") {
+		if (fields.controls.value) {
 			map.value.addControl(controls);
 		}
 		if (fields.markers.value) {
@@ -169,7 +165,7 @@ const renderMarkers = async () => {
 
 watch(fields.controls, () => {
 	if (map.value) {
-		if (fields.controls.value === "yes") {
+		if (fields.controls) {
 			map.value.addControl(controls);
 		} else {
 			map.value.removeControl(controls);
diff --git a/src/ui/src/components/core/embed/CorePDF.vue b/src/ui/src/components/core/embed/CorePDF.vue
index 608576e6..41d026f0 100644
--- a/src/ui/src/components/core/embed/CorePDF.vue
+++ b/src/ui/src/components/core/embed/CorePDF.vue
@@ -1,6 +1,6 @@
 <template>
 	<div ref="rootEl" class="CorePDF">
-		<div v-if="fields.controls.value === 'yes'" class="controls">
+		<div v-if="fields.controls.value" class="controls">
 			<WdsControl @click="() => gotoPage(page - 1)">
 				<i class="material-symbols-outlined">arrow_upward</i>
 			</WdsControl>
@@ -51,6 +51,7 @@ import {
 	separatorColor,
 	primaryTextColor,
 	containerBackgroundColor,
+	baseYesNoField,
 } from "@/renderer/sharedStyleFields";
 import WdsControl from "@/wds/WdsControl.vue";
 
@@ -85,12 +86,8 @@ export default {
 				desc: "The page to be displayed.",
 			},
 			controls: {
+				...baseYesNoField,
 				name: "Controls",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 				desc: "Show controls to navigate the PDF.",
 				default: "yes",
 			},
diff --git a/src/ui/src/components/core/input/CoreFileInput.vue b/src/ui/src/components/core/input/CoreFileInput.vue
index 5c1b0a98..c2931537 100644
--- a/src/ui/src/components/core/input/CoreFileInput.vue
+++ b/src/ui/src/components/core/input/CoreFileInput.vue
@@ -48,7 +48,7 @@
 
 <script lang="ts">
 import { ComponentPublicInstance } from "vue";
-import { cssClasses } from "@/renderer/sharedStyleFields";
+import { baseYesNoField, cssClasses } from "@/renderer/sharedStyleFields";
 import { FieldType } from "@/writerTypes";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 
@@ -94,13 +94,9 @@ export default {
 				desc: "Provides hints for browsers to select the correct file types. You can specify extensions and MIME types separated by comma, or leave empty to accept any file.",
 			},
 			allowMultipleFiles: {
+				...baseYesNoField,
 				name: "Allow multiple files",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 			},
 			cssClasses,
 		},
@@ -145,7 +141,7 @@ const selectedFiles = computed<SavedFile[]>(() =>
 const allowFileTypes = computed(() => fields.allowFileTypes?.value ?? "");
 
 const allowMultipleFilesFlag = computed(() => {
-	return fields.allowMultipleFiles.value == "yes" ? true : undefined;
+	return fields.allowMultipleFiles.value || undefined;
 });
 
 const encodeFile = async (file: File) => {
diff --git a/src/ui/src/components/core/input/CoreTextInput.vue b/src/ui/src/components/core/input/CoreTextInput.vue
index 0d9b2fd3..4ac645f0 100644
--- a/src/ui/src/components/core/input/CoreTextInput.vue
+++ b/src/ui/src/components/core/input/CoreTextInput.vue
@@ -5,7 +5,7 @@
 		class="CoreTextInput"
 	>
 		<input
-			:type="fields.passwordMode.value == 'yes' ? 'password' : 'text'"
+			:type="fields.passwordMode.value ? 'password' : 'text'"
 			:value="formValue"
 			:placeholder="fields.placeholder.value"
 			aria-autocomplete="none"
@@ -29,7 +29,11 @@
 
 <script lang="ts">
 import { FieldCategory, FieldType } from "@/writerTypes";
-import { accentColor, cssClasses } from "@/renderer/sharedStyleFields";
+import {
+	accentColor,
+	baseYesNoField,
+	cssClasses,
+} from "@/renderer/sharedStyleFields";
 import { ComponentPublicInstance } from "vue";
 
 const description =
@@ -58,13 +62,9 @@ export default {
 				type: FieldType.Text,
 			},
 			passwordMode: {
+				...baseYesNoField,
 				name: "Password mode",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 				category: FieldCategory.Style,
 			},
 			accentColor,
diff --git a/src/ui/src/components/core/layout/CoreColumn.vue b/src/ui/src/components/core/layout/CoreColumn.vue
index 2a55154c..54662d5b 100644
--- a/src/ui/src/components/core/layout/CoreColumn.vue
+++ b/src/ui/src/components/core/layout/CoreColumn.vue
@@ -3,7 +3,7 @@
 		class="CoreColumn"
 		:style="rootStyle"
 		:class="{
-			sticky: isSticky,
+			sticky: fields.isSticky.value,
 			collapsible: isCollapsible,
 			collapsibleToRight: isCollapsibleToRight,
 			collapsed: isCollapsed,
@@ -47,6 +47,7 @@ import {
 	separatorColor,
 	startCollapsed,
 	isCollapsible as isCollapsibleField,
+	baseYesNoField,
 } from "@/renderer/sharedStyleFields";
 
 const description =
@@ -73,13 +74,9 @@ export default {
 				category: FieldCategory.Style,
 			},
 			isSticky: {
+				...baseYesNoField,
 				name: "Sticky",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 				category: FieldCategory.Style,
 			},
 			isCollapsible: isCollapsibleField,
@@ -109,11 +106,10 @@ const wf = inject(injectionKeys.core);
 const componentId = inject(injectionKeys.componentId);
 
 const fields = inject(injectionKeys.evaluatedFields);
-const isCollapsible = computed(() => fields.isCollapsible.value == "yes");
-const isCollapsed: Ref<boolean> = ref(
-	fields.isCollapsible.value == "yes" && fields.startCollapsed.value == "yes",
+const isCollapsible = computed(() => Boolean(fields.isCollapsible.value));
+const isCollapsed = ref(
+	fields.isCollapsible.value && fields.startCollapsed.value,
 );
-const isSticky = computed(() => fields.isSticky.value == "yes");
 
 const rootStyle = computed(() => {
 	let flex: string;
diff --git a/src/ui/src/components/core/layout/CoreSection.vue b/src/ui/src/components/core/layout/CoreSection.vue
index 516ae3c8..26d7aa05 100644
--- a/src/ui/src/components/core/layout/CoreSection.vue
+++ b/src/ui/src/components/core/layout/CoreSection.vue
@@ -93,9 +93,9 @@ import BaseCollapseButton from "../base/BaseCollapseButton.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
 
-const isCollapsible = computed(() => fields.isCollapsible.value === "yes");
+const isCollapsible = computed(() => fields.isCollapsible.value);
 const isCollapsed = ref<boolean>(
-	isCollapsible.value && fields.startCollapsed.value === "yes",
+	isCollapsible.value && fields.startCollapsed.value,
 );
 </script>
 
diff --git a/src/ui/src/components/core/layout/CoreSidebar.vue b/src/ui/src/components/core/layout/CoreSidebar.vue
index 946ec736..1b151117 100644
--- a/src/ui/src/components/core/layout/CoreSidebar.vue
+++ b/src/ui/src/components/core/layout/CoreSidebar.vue
@@ -75,7 +75,7 @@ import { computed, inject, onMounted, Ref, ref, watch } from "vue";
 import injectionKeys from "@/injectionKeys";
 
 const fields = inject(injectionKeys.evaluatedFields);
-const isCollapsed: Ref<boolean> = ref(fields.startCollapsed.value == "yes");
+const isCollapsed: Ref<boolean> = ref(fields.startCollapsed.value);
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const componentId = inject(injectionKeys.componentId);
diff --git a/src/ui/src/components/core/layout/CoreStep.vue b/src/ui/src/components/core/layout/CoreStep.vue
index 28efff02..836ff9ac 100644
--- a/src/ui/src/components/core/layout/CoreStep.vue
+++ b/src/ui/src/components/core/layout/CoreStep.vue
@@ -18,7 +18,7 @@
 			:disabled="!isBeingEdited"
 			:class="{
 				active: isStepActive,
-				completed: fields.isCompleted.value == 'yes',
+				completed: fields.isCompleted.value,
 			}"
 			stepindex="0"
 			@click="activateStep"
@@ -28,11 +28,11 @@
 				<div
 					class="status"
 					:class="{
-						completed: fields.isCompleted.value == 'yes',
+						completed: fields.isCompleted.value,
 					}"
 				>
 					<i
-						v-if="fields.isCompleted.value == 'yes'"
+						v-if="fields.isCompleted.value"
 						class="material-symbols-outlined"
 					>
 						done
@@ -72,6 +72,7 @@ import {
 	contentHAlign,
 	cssClasses,
 	contentPadding,
+	baseYesNoField,
 } from "@/renderer/sharedStyleFields";
 import { onBeforeUnmount } from "vue";
 
@@ -97,14 +98,10 @@ export default {
 				default: "16px",
 			},
 			isCompleted: {
+				...baseYesNoField,
 				name: "Completed",
 				desc: "Use a state reference to dynamically mark this step as complete.",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 			},
 			contentHAlign,
 			cssClasses,
@@ -203,7 +200,7 @@ function activateNextStep() {
 	const subsequentSteps = stepContainerData.value.steps.slice(
 		currentStepIndex + 1,
 	);
-	let nextStep = subsequentSteps.find((step) => step.isCompleted != "yes");
+	let nextStep = subsequentSteps.find((step) => !step.isCompleted);
 	if (!nextStep) {
 		const lastStep = stepContainerData.value.steps.at(-1);
 		nextStep = lastStep;
@@ -222,7 +219,7 @@ function checkIfStepIsParent(childId: Component["id"]): boolean {
 }
 
 function activateDefaultStep() {
-	if (fields.isCompleted.value != "yes") {
+	if (!fields.isCompleted.value) {
 		activateStep();
 		return;
 	}
@@ -270,7 +267,7 @@ Prevent a step of being active while completed.
 watch([isStepActive, fields.isCompleted], () => {
 	if (isBeingEdited.value) return;
 	if (!isStepActive.value) return;
-	if (fields.isCompleted.value == "yes") {
+	if (fields.isCompleted.value) {
 		activateNextStep();
 	}
 });
@@ -278,9 +275,9 @@ watch([isStepActive, fields.isCompleted], () => {
 /*
 Activate any step that was previously complete but switched to non-completed.
 */
-watch(fields.isCompleted, (value: string, oldValue: string) => {
-	if (oldValue !== "yes") return;
-	if (value !== "no") return;
+watch(fields.isCompleted, (value: boolean, oldValue: boolean) => {
+	if (!oldValue) return;
+	if (value) return;
 	activateDefaultStep();
 });
 
diff --git a/src/ui/src/components/core/other/CoreButton.vue b/src/ui/src/components/core/other/CoreButton.vue
index 8d572f69..9f5bf0d1 100644
--- a/src/ui/src/components/core/other/CoreButton.vue
+++ b/src/ui/src/components/core/other/CoreButton.vue
@@ -25,6 +25,7 @@ import {
 	buttonShadow,
 	separatorColor,
 	cssClasses,
+	baseYesNoField,
 } from "@/renderer/sharedStyleFields";
 import { watch } from "vue";
 import { getClick } from "@/renderer/syntheticEvents";
@@ -57,13 +58,9 @@ export default {
 				type: FieldType.Text,
 			},
 			isDisabled: {
+				...baseYesNoField,
 				name: "Disabled",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 				desc: "Disables all event handlers.",
 			},
 			buttonColor,
@@ -92,8 +89,8 @@ const isDisabled = inject(injectionKeys.isDisabled);
 
 watch(
 	fields.isDisabled,
-	(newFieldValue: string) => {
-		isDisabled.value = newFieldValue == "yes";
+	(newFieldValue: boolean) => {
+		isDisabled.value = newFieldValue;
 	},
 	{
 		immediate: true,
diff --git a/src/ui/src/components/core/other/CorePagination.vue b/src/ui/src/components/core/other/CorePagination.vue
index f91817c9..444c42b3 100644
--- a/src/ui/src/components/core/other/CorePagination.vue
+++ b/src/ui/src/components/core/other/CorePagination.vue
@@ -73,6 +73,7 @@
 
 <script lang="ts">
 import { FieldType } from "@/writerTypes";
+import { baseYesNoField } from "@/renderer/sharedStyleFields";
 
 const pageChangeStub = `
 def handle_page_change(state, payload):
@@ -127,23 +128,15 @@ export default {
 				desc: "A comma-separated list of page size options. If it's empty, the user can't change the page size. Set your default page size as the first option.",
 			},
 			pageSizeShowAll: {
+				...baseYesNoField,
 				name: "Show All Option",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 				desc: "Show an option to show all records.",
 			},
 			jumpTo: {
+				...baseYesNoField,
 				name: "Jump To",
 				default: "no",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 				desc: "Show an option to jump to a specific page.",
 			},
 			// Disabled for now, I am waiting functions to manipulate Hash params from the URL
@@ -194,11 +187,9 @@ const { handleInput: handlePageSizeInput } = useFormValueBroker(
 	rootEl,
 );
 const pagesizeEnabled = computed(
-	() =>
-		fields.pageSizeOptions.value !== "" ||
-		fields.pageSizeShowAll.value === "yes",
+	() => fields.pageSizeOptions.value !== "" || fields.pageSizeShowAll.value,
 );
-const jumptoEnabled = computed(() => fields.jumpTo.value === "yes");
+const jumptoEnabled = computed(() => fields.jumpTo.value);
 
 const firstItem = computed(() => {
 	if (fields.totalItems.value == 0) {
@@ -226,7 +217,7 @@ const pageSizeOptions = computed(() => {
 		const n = parseInt(inputs[o], 10);
 		options.push({ value: n, label: `${n} items` });
 	}
-	if (fields.pageSizeShowAll.value === "yes") {
+	if (fields.pageSizeShowAll.value) {
 		options.push({ value: totalItem.value, label: "All items" });
 	}
 
diff --git a/src/ui/src/components/core/other/CoreTimer.vue b/src/ui/src/components/core/other/CoreTimer.vue
index 316f24bd..231697b7 100644
--- a/src/ui/src/components/core/other/CoreTimer.vue
+++ b/src/ui/src/components/core/other/CoreTimer.vue
@@ -9,7 +9,11 @@
 
 <script lang="ts">
 import { FieldType } from "@/writerTypes";
-import { accentColor, cssClasses } from "@/renderer/sharedStyleFields";
+import {
+	accentColor,
+	baseYesNoField,
+	cssClasses,
+} from "@/renderer/sharedStyleFields";
 const description =
 	"A component that emits an event repeatedly at specified time intervals, enabling time-based refresh.";
 
@@ -33,14 +37,10 @@ export default {
 				type: FieldType.Number,
 			},
 			isActive: {
+				...baseYesNoField,
 				name: "Active",
 				default: "yes",
 				desc: "Whether the timer should trigger tick events.",
-				type: FieldType.Text,
-				options: {
-					yes: "Yes",
-					no: "No",
-				},
 			},
 			accentColor,
 			cssClasses,
@@ -66,7 +66,7 @@ const wf = inject(injectionKeys.core);
 const rootEl: Ref<HTMLElement> = ref(null);
 
 const intervalMs = computed(() => fields.intervalMs.value);
-const isActive = computed(() => fields.isActive.value == "yes");
+const isActive = computed(() => fields.isActive.value);
 const isFailing = ref(false);
 const componentId = inject(injectionKeys.componentId);
 const isTickHandlerSet = computed(
diff --git a/src/ui/src/composables/useFieldValue.ts b/src/ui/src/composables/useFieldValue.ts
deleted file mode 100644
index 595f1f93..00000000
--- a/src/ui/src/composables/useFieldValue.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ComputedRef, computed } from "vue";
-
-type Fields = Record<string, ComputedRef<unknown>>;
-
-export function useFieldValueAsYesNo(
-	fields: Fields,
-	key: string,
-): ComputedRef<boolean> {
-	return computed(() => fields[key].value === "yes");
-}
diff --git a/src/ui/src/renderer/sharedStyleFields.ts b/src/ui/src/renderer/sharedStyleFields.ts
index e6f99081..6763e3b9 100644
--- a/src/ui/src/renderer/sharedStyleFields.ts
+++ b/src/ui/src/renderer/sharedStyleFields.ts
@@ -111,21 +111,31 @@ export const contentPadding: WriterComponentDefinitionField = {
 	category: FieldCategory.Style,
 };
 
-const yesNoOptions = { yes: "Yes", no: "No" };
+export const baseYesNoFieldOptions = Object.freeze({
+	yes: "Yes",
+	no: "No",
+	false: "false",
+	true: "true",
+});
+
+export const baseYesNoField = Object.freeze<
+	Pick<WriterComponentDefinitionField, "options" | "type">
+>({
+	type: FieldType.Boolean,
+	options: baseYesNoFieldOptions,
+});
 
 export const isCollapsible: WriterComponentDefinitionField = {
+	...baseYesNoField,
 	name: "Collapsible",
 	default: "no",
-	type: FieldType.Text,
-	options: yesNoOptions,
 	category: FieldCategory.Style,
 };
 
 export const startCollapsed: WriterComponentDefinitionField = {
+	...baseYesNoField,
 	name: "Start collapsed",
-	type: FieldType.Text,
 	category: FieldCategory.Style,
 	default: "no",
-	options: yesNoOptions,
 	desc: "Only applied when the component is collapsible.",
 };
diff --git a/src/ui/src/renderer/useEvaluator.ts b/src/ui/src/renderer/useEvaluator.ts
index ec82916e..91b38845 100644
--- a/src/ui/src/renderer/useEvaluator.ts
+++ b/src/ui/src/renderer/useEvaluator.ts
@@ -17,7 +17,7 @@ export function useEvaluator(wf: Core) {
 			s = "";
 		let level = 0;
 
-		let i = 0
+		let i = 0;
 		while (i < expr.length) {
 			const c = expr.charAt(i);
 			if (c == "\\") {
@@ -51,7 +51,7 @@ export function useEvaluator(wf: Core) {
 				s += c;
 			}
 
-			i++
+			i++;
 		}
 
 		if (s) {
@@ -173,7 +173,11 @@ export function useEvaluator(wf: Core) {
 			typeof evaluated == "undefined" ||
 			evaluated === null ||
 			evaluated === "";
-		if (fieldType == FieldType.Object || fieldType == FieldType.KeyValue || fieldType == FieldType.Tools) {
+		if (
+			fieldType == FieldType.Object ||
+			fieldType == FieldType.KeyValue ||
+			fieldType == FieldType.Tools
+		) {
 			if (!evaluated) {
 				return JSON.parse(defaultValue ?? null);
 			}
@@ -194,6 +198,8 @@ export function useEvaluator(wf: Core) {
 			if (typeof n === "undefined" || Number.isNaN(n))
 				return floatDefaultValue ?? null;
 			return n;
+		} else if (fieldType == FieldType.Boolean) {
+			return evaluated === "yes" || evaluated === "true";
 		} else if (fieldType == FieldType.IdKey) {
 			return contentValue;
 		} else {
diff --git a/src/ui/src/writerTypes.ts b/src/ui/src/writerTypes.ts
index 4eb9d554..431a5120 100644
--- a/src/ui/src/writerTypes.ts
+++ b/src/ui/src/writerTypes.ts
@@ -122,6 +122,7 @@ export const enum ClipboardOperation {
 
 export const enum FieldType {
 	Text = "Text",
+	Boolean = "Boolean",
 	KeyValue = "Key-Value",
 	Color = "Color",
 	Shadow = "Shadow",