feat(ui): introduce FieldType.Boolean - WF-165

src/ui/src/builder/settings/BuilderSettingsProperties.vue

@@ -54,7 +54,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"
 						:error="errorsByFields[fieldKey]"

src/ui/src/components/core/content/CoreAnnotatedText.spec.ts

@@ -33,10 +33,10 @@ describe("CoreAnnotatedText", async () => {
 					[injectionKeys.evaluatedFields as symbol]: {
 						text: ref(text),
 						seed: ref(1),
-						useMarkdown: ref("no"),
-						rotateHue: ref("yes"),
+						useMarkdown: ref(false),
+						rotateHue: ref(true),
 						referenceColor: ref(WdsColor.Blue5),
-						copyButtons: ref("yes"),
+						copyButtons: ref(true),
 					},
 				},
 			},
@@ -73,10 +73,10 @@ describe("CoreAnnotatedText", async () => {
 					[injectionKeys.evaluatedFields as symbol]: {
 						text: ref(text),
 						seed: ref(1),
-						useMarkdown: ref("yes"),
-						rotateHue: ref("yes"),
+						useMarkdown: ref(true),
+						rotateHue: ref(true),
 						referenceColor: ref(WdsColor.Blue5),
-						copyButtons: ref("yes"),
+						copyButtons: ref(true),
 					},
 				},
 			},

src/ui/src/components/core/content/CoreAnnotatedText.vue

@@ -27,7 +27,7 @@
 			</span>
 		</template>
 		<SharedControlBar
-			v-if="fields.copyButtons.value === 'yes'"
+			v-if="fields.copyButtons.value"
 			:copy-raw-content="copyRawContent"
 			:copy-structured-content="copyStructuredContent"
 		/>
@@ -36,6 +36,7 @@
 
 <script lang="ts">
 import {
+	baseYesNoField,
 	buttonColor,
 	buttonTextColor,
 	cssClasses,
@@ -72,34 +73,22 @@ 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,
 			},
 			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",
-				},
 			},
 			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,
 			},
@@ -117,7 +106,6 @@ import { FieldCategory, FieldType } from "@/writerTypes";
 import injectionKeys from "@/injectionKeys";
 import { computed, inject, readonly, ref, watch } from "vue";
 import chroma, { Color } from "chroma-js";
-import { useFieldValueAsYesNo } from "@/composables/useFieldValue";
 import BaseEmptiness from "../base/BaseEmptiness.vue";
 import BaseMarkdownRaw from "../base/BaseMarkdownRaw.vue";
 
@@ -132,7 +120,7 @@ const isBeingEdited = inject(injectionKeys.isBeingEdited);
 const componentId = inject(injectionKeys.componentId);
 const isEmpty = computed(() => !fields.text.value);
 const shouldDisplay = computed(() => !isEmpty.value || isBeingEdited.value);
-const useMarkdown = useFieldValueAsYesNo(fields, "useMarkdown");
+const useMarkdown = computed(() => Boolean(fields.useMarkdown.value));
 
 const COLOR_STEPS = [
 	{ h: -78, s: -34, l: 16 },
@@ -229,7 +217,7 @@ function getAnnotationBgColor(content: AnnotatedTextElementArray) {
 }
 
 function generateColor(s: string) {
-	if (fields.rotateHue.value == "no") {
+	if (!fields.rotateHue.value) {
 		return fields.referenceColor.value;
 	}
 

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,
@@ -212,14 +213,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",

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"
@@ -137,6 +137,7 @@ import {
 	secondaryTextColor,
 	accentColor,
 	separatorColor,
+	baseYesNoField,
 } from "@/renderer/sharedStyleFields";
 import { onMounted } from "vue";
 import { watch } from "vue";
@@ -215,51 +216,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",
@@ -269,13 +250,9 @@ export default {
 				validator: validatorObjectRecordNotNested,
 			},
 			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: {
@@ -287,14 +264,10 @@ export default {
 				validator: validatorPositiveNumber,
 			},
 			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,
@@ -408,12 +381,12 @@ 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 wrapText = computed(() => fields.wrapText.value === "yes");
+const enableRecordAdd = computed(() => Boolean(fields.enableRecordAdd.value));
+const wrapText = computed(() => Boolean(fields.wrapText.value));
 
 const rowOffset = computed(() => {
 	let maxOffset: number;

src/ui/src/components/core/content/CoreJsonViewer.vue

@@ -3,15 +3,16 @@
 		<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>
 
 <script lang="ts">
 import {
 	accentColor,
+	baseYesNoField,
 	cssClasses,
 	secondaryTextColor,
 	separatorColor,
@@ -61,24 +62,16 @@ const definition: WriterComponentDefinition = {
 			validator: validatorPositiveNumber,
 		},
 		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,
 		},

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, useTemplateRef } 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)) {