From c47ba5036988ada112aaca3b9b60dec2d30b5597 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Thu, 4 Jul 2024 22:37:46 +0200
Subject: [PATCH] feat(ui): introduce `CoreColorInput`. WF-9

---
 .../public/components/colorinput.png          | Bin 0 -> 4227 bytes
 src/ui/src/core/templateMap.ts                |   2 +
 .../core_components/base/BaseInputColor.vue   |  53 ++++++++++
 .../core_components/input/CoreColorInput.vue  | 100 ++++++++++++++++++
 src/ui/src/renderer/useFormValueBroker.ts     |   8 +-
 5 files changed, 159 insertions(+), 4 deletions(-)
 create mode 100644 docs/framework/public/components/colorinput.png
 create mode 100644 src/ui/src/core_components/base/BaseInputColor.vue
 create mode 100644 src/ui/src/core_components/input/CoreColorInput.vue

diff --git a/docs/framework/public/components/colorinput.png b/docs/framework/public/components/colorinput.png
new file mode 100644
index 0000000000000000000000000000000000000000..a0d96a8c5dea0cb5bbe7fa52c0f98d9c61731646
GIT binary patch
literal 4227
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
R;0FT8Q18BO&0Xi%{{Xk&5G()y

literal 0
HcmV?d00001

diff --git a/src/ui/src/core/templateMap.ts b/src/ui/src/core/templateMap.ts
index b9a476552..6a0606339 100644
--- a/src/ui/src/core/templateMap.ts
+++ b/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,
diff --git a/src/ui/src/core_components/base/BaseInputColor.vue b/src/ui/src/core_components/base/BaseInputColor.vue
new file mode 100644
index 000000000..7a6ba7257
--- /dev/null
+++ b/src/ui/src/core_components/base/BaseInputColor.vue
@@ -0,0 +1,53 @@
+<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, inject, ref } from "vue";
+import injectionKeys from "../../injectionKeys";
+
+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 pickerEl = ref<HTMLInputElement | undefined>();
+
+const flattenedInstancePath = inject(injectionKeys.flattenedInstancePath);
+
+const datalistId = computed(() =>
+	props.customColors?.length ? `${flattenedInstancePath}_datalist` : 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>
diff --git a/src/ui/src/core_components/input/CoreColorInput.vue b/src/ui/src/core_components/input/CoreColorInput.vue
new file mode 100644
index 000000000..0c37e598a
--- /dev/null
+++ b/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>
diff --git a/src/ui/src/renderer/useFormValueBroker.ts b/src/ui/src/renderer/useFormValueBroker.ts
index 8d19dabd7..3d2623973 100644
--- a/src/ui/src/renderer/useFormValueBroker.ts
+++ b/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;