feat(ui): introduce CoreColorInput. WF-9

src/ui/src/core/index.ts

@@ -1,21 +1,21 @@
 /* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ref, Ref } from "vue";
+import { computed, ref, Ref } from "vue";
 import {
 	Component,
 	ComponentMap,
 	InstancePath,
 	MailItem,
 	UserFunction,
 } from "../writerTypes";
+import { auditAndFixComponents } from "./auditAndFix";
+import { loadExtensions } from "./loadExtensions";
+import { parseAccessor } from "./parsing";
 import {
-	getSupportedComponentTypes,
 	getComponentDefinition,
+	getSupportedComponentTypes,
 } from "./templateMap";
 import * as typeHierarchy from "./typeHierarchy";
-import { auditAndFixComponents } from "./auditAndFix";
-import { parseAccessor } from "./parsing";
-import { loadExtensions } from "./loadExtensions";
 
 const RECONNECT_DELAY_MS = 1000;
 const KEEP_ALIVE_DELAY_MS = 60000;
@@ -127,7 +127,7 @@ export function generateCore() {
 		Object.entries(mutations).forEach(([key, value]) => {
 			/*
 			Splits the key while respecting escaped dots.
-			For example, "files.myfile\.sh" will be split into ["files", "myfile.sh"] 
+			For example, "files.myfile\.sh" will be split into ["files", "myfile.sh"]
 			*/
 
 			const mutationFlag = key.charAt(0);
@@ -443,8 +443,8 @@ export function generateCore() {
 	 */
 	async function sendComponentUpdate(): Promise<void> {
 		/*
- 		Ensure that the backend receives only components 
-		created by the frontend (Builder-managed components, BMC), 
+ 		Ensure that the backend receives only components
+		created by the frontend (Builder-managed components, BMC),
 		and not the components it generated (Code-managed components, CMC).
  		*/
 
@@ -594,6 +594,7 @@ export function generateCore() {
 		getSessionTimestamp,
 		getUserState,
 		isChildOf,
+		components: computed(() => Object.values(components.value)),
 	};
 
 	return core;

src/ui/src/core/templateMap.ts

@@ -16,6 +16,7 @@ import CoreTags from "../core_components/content/CoreTags.vue";
 import CoreAvatar from "../core_components/content/CoreAvatar.vue";
 // input
 import CoreCheckboxInput from "../core_components/input/CoreCheckboxInput.vue";
+import CoreColorInput from "../core_components/input/CoreColorInput.vue";
 import CoreDateInput from "../core_components/input/CoreDateInput.vue";
 import CoreDropdownInput from "../core_components/input/CoreDropdownInput.vue";
 import CoreFileInput from "../core_components/input/CoreFileInput.vue";
@@ -93,6 +94,7 @@ const templateMap = {
 	textareainput: CoreTextareaInput,
 	numberinput: CoreNumberInput,
 	sliderinput: CoreSliderInput,
+	colorinput: CoreColorInput,
 	dateinput: CoreDateInput,
 	timeinput: CoreTimeInput,
 	radioinput: CoreRadioInput,

src/ui/src/core_components/base/BaseInputColor.vue

@@ -0,0 +1,51 @@
+<template>
+	<input
+		ref="pickerEl"
+		type="color"
+		class="BaseInputColor"
+		:value="value"
+		:list="datalistId"
+		@input="handleInput"
+		@change="handleChange"
+	/>
+	<datalist v-if="datalistId" :id="datalistId">
+		<option v-for="color of customColors" :key="color">{{ color }}</option>
+	</datalist>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed, ref } from "vue";
+import useId from "./hooks/useId";
+
+const pickerEl = ref<HTMLInputElement | undefined>();
+
+const props = defineProps({
+	value: { type: String, required: false, default: undefined },
+	customColors: { type: Array as PropType<string[]>, default: () => [] },
+});
+
+const emit = defineEmits({
+	"update:value": (value: string) => typeof value === "string",
+	change: (value: string) => typeof value === "string",
+});
+
+const datalistId = computed(() =>
+	props.customColors?.length ? useId() : null,
+);
+
+function handleInput(event: Event) {
+	emit("update:value", (event.target as HTMLInputElement).value);
+}
+
+function handleChange(event: Event) {
+	emit("change", (event.target as HTMLInputElement).value);
+}
+</script>
+
+<style scoped>
+.BaseInputColor {
+	width: 12ch;
+	border: 0;
+	outline: none;
+}
+</style>

src/ui/src/core_components/base/hooks/useId.ts

@@ -0,0 +1,9 @@
+/**
+ * Simply generate a uniq ID to use as HTML `id` attribute
+ */
+export default function useId() {
+	// `crypto.randomUUID` is only available in HTTPS context
+	return typeof crypto.randomUUID === "function"
+		? crypto.randomUUID()
+		: Date.now().toString();
+}

src/ui/src/core_components/input/CoreColorInput.vue

@@ -0,0 +1,100 @@
+<template>
+	<BaseInputWrapper
+		ref="rootInstance"
+		:label="fields.label.value"
+		class="CoreColorInput"
+	>
+		<BaseInputColor
+			:value="formValue"
+			:custom-colors="colorList"
+			@update:value="handleInput($event, 'wf-change')"
+			@change="handleInput($event, 'wf-change-finish')"
+		/>
+	</BaseInputWrapper>
+</template>
+
+<script lang="ts">
+import { ComponentPublicInstance } from "vue";
+import { cssClasses } from "../../renderer/sharedStyleFields";
+import { FieldType, WriterComponentDefinition } from "../../writerTypes";
+import BaseInputColor from "../base/BaseInputColor.vue";
+import BaseInputWrapper from "../base/BaseInputWrapper.vue";
+
+const description =
+	"A user input component that allows users to select a color using a color picker interface.";
+
+const onChangeHandlerStub = `
+def onchange_handler(state, payload):
+
+	# Set the state variable "new_color" to the new value, provided as string.
+
+	state["new_color"] = payload`;
+
+const definition = {
+	name: "Color Input",
+	description,
+	category: "Input",
+	fields: {
+		label: {
+			name: "Label",
+			init: "Input Label",
+			type: FieldType.Text,
+		},
+		colorList: {
+			name: "Color List",
+			desc: "List of predefined colors",
+			type: FieldType.Object,
+			init: JSON.stringify([
+				"#5551ff",
+				"#3be19b",
+				"#ff3d00",
+				"#333333",
+				"#0094d1",
+			]),
+		},
+		cssClasses,
+	},
+	events: {
+		"wf-change": {
+			desc: "Capture changes as they happen.",
+			stub: onChangeHandlerStub,
+			bindable: true,
+		},
+		"wf-change-finish": {
+			desc: "Capture changes once this control has lost focus.",
+			stub: onChangeHandlerStub,
+		},
+	},
+} satisfies WriterComponentDefinition;
+
+export default { writer: definition };
+</script>
+<script setup lang="ts">
+import { computed, inject, ref } from "vue";
+import injectionKeys from "../../injectionKeys";
+import { useFormValueBroker } from "../../renderer/useFormValueBroker";
+
+const fields = inject(injectionKeys.evaluatedFields);
+const rootInstance = ref<ComponentPublicInstance | null>(null);
+const wf = inject(injectionKeys.core);
+const instancePath = inject(injectionKeys.instancePath);
+
+const colorList = computed(() =>
+	Array.isArray(fields.colorList.value) ? fields.colorList.value : undefined,
+);
+
+const { formValue, handleInput } = useFormValueBroker<string>(
+	wf,
+	instancePath,
+	rootInstance,
+);
+</script>
+
+<style scoped>
+@import "../../renderer/sharedStyles.css";
+@import "../../renderer/colorTransformations.css";
+
+.CoreColorInput {
+	width: fit-content;
+}
+</style>

src/ui/src/renderer/useFormValueBroker.ts

@@ -1,6 +1,6 @@
 import { ComponentPublicInstance, computed, Ref, ref, watch } from "vue";
-import { Core, InstancePath } from "../writerTypes";
 import { useEvaluator } from "../renderer/useEvaluator";
+import { Core, InstancePath } from "../writerTypes";
 
 /**
  *
@@ -10,14 +10,14 @@ import { useEvaluator } from "../renderer/useEvaluator";
  * @param componentId
  * @returns
  */
-export function useFormValueBroker(
+export function useFormValueBroker<T = any>(
 	wf: Core,
 	instancePath: InstancePath,
 	emitterEl: Ref<HTMLElement | ComponentPublicInstance>,
 ) {
-	const formValue: Ref<any> = ref();
+	const formValue: Ref<T> = ref();
 	const isBusy = ref(false);
-	const queuedEvent: Ref<{ eventValue: any; emitEventType: string }> =
+	const queuedEvent: Ref<{ eventValue: T; emitEventType: string }> =
 		ref(null);
 
 	const componentId = instancePath.at(-1).componentId;