feat(ui): introduce fields validation - WF-140

writer · Jan 7, 2025 · 0bdbc2b · 0bdbc2b
1 parent dc8618b
commit 0bdbc2b
Show file tree

Hide file tree

Showing 58 changed files with 863 additions and 51 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/ui/package.json b/src/ui/package.json
@@ -25,6 +25,7 @@
 		"@googlemaps/js-api-loader": "^1.16.6",
 		"@monaco-editor/loader": "^1.3.3",
 		"@tato30/vue-pdf": "^1.9.6",
+		"ajv": "^8.17.1",
 		"arquero": "^5.2.0",
 		"chroma-js": "^2.4.2",
 		"fuse.js": "7.0.0",

diff --git a/src/ui/src/builder/settings/BuilderFieldsAlign.vue b/src/ui/src/builder/settings/BuilderFieldsAlign.vue
@@ -24,6 +24,7 @@
 				v-if="mode == 'css'"
 				ref="freehandInputEl"
 				:value="component.content[fieldKey]"
+				:error="error"
 				@input="handleInputCss"
 			/>
 		</div>
@@ -38,6 +39,7 @@ import {
 	nextTick,
 	onBeforeUnmount,
 	onMounted,
+	PropType,
 	Ref,
 	ref,
 	toRefs,
@@ -135,11 +137,15 @@ const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
 	default: null,
 };
 
-const props = defineProps<{
-	componentId: Component["id"];
-	fieldKey: string;
-	direction: "horizontal" | "vertical";
-}>();
+const props = defineProps({
+	componentId: { type: String as PropType<Component["id"]>, required: true },
+	fieldKey: { type: String, required: true },
+	direction: {
+		type: String as PropType<"horizontal" | "vertical">,
+		required: true,
+	},
+	error: { type: String, required: false, default: undefined },
+});
 
 const { componentId, fieldKey, direction } = toRefs(props);
 const component = computed(() => wf.getComponentById(componentId.value));

diff --git a/src/ui/src/builder/settings/BuilderFieldsColor.vue b/src/ui/src/builder/settings/BuilderFieldsColor.vue
@@ -24,6 +24,7 @@
 				v-if="mode == 'css'"
 				ref="freehandInputEl"
 				:value="component.content[fieldKey]"
+				:error="error"
 				@input="handleInput"
 			/>
 		</div>
@@ -40,6 +41,7 @@ import {
 	Ref,
 	ref,
 	toRefs,
+	PropType,
 } from "vue";
 import { Component } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
@@ -65,10 +67,12 @@ const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
 	default: null,
 };
 
-const props = defineProps<{
-	componentId: Component["id"];
-	fieldKey: string;
-}>();
+const props = defineProps({
+	componentId: { type: String as PropType<Component["id"]>, required: true },
+	fieldKey: { type: String, required: true },
+	error: { type: String, required: false, default: undefined },
+});
+
 const { componentId, fieldKey } = toRefs(props);
 const component = computed(() => wf.getComponentById(componentId.value));
 

diff --git a/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue b/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
@@ -13,7 +13,10 @@
 		/>
 
 		<template v-if="mode == 'assisted'">
-			<div class="staticList">
+			<div
+				class="staticList"
+				:class="{ 'staticList--invalid': error !== undefined }"
+			>
 				<div
 					v-for="(entryValue, entryKey) in assistedEntries"
 					:key="entryKey"
@@ -54,6 +57,7 @@
 			<BuilderFieldsObject
 				:component-id="component.id"
 				:field-key="fieldKey"
+				:error="error"
 			></BuilderFieldsObject>
 		</template>
 	</div>
@@ -87,6 +91,7 @@ const props = defineProps({
 	componentId: { type: String, required: true },
 	fieldKey: { type: String, required: true },
 	instancePath: { type: Array as PropType<InstancePath>, required: true },
+	error: { type: String, required: false, default: undefined },
 });
 
 const { componentId, fieldKey } = toRefs(props);
@@ -192,6 +197,9 @@ onMounted(async () => {
 	border: 1px solid var(--builderSeparatorColor);
 	border-radius: 8px;
 }
+.staticList--invalid {
+	border-color: var(--wdsColorOrange5);
+}
 
 .staticList:empty::before {
 	content: "No entries yet.";

diff --git a/src/ui/src/builder/settings/BuilderFieldsObject.vue b/src/ui/src/builder/settings/BuilderFieldsObject.vue
@@ -6,6 +6,7 @@
 		variant="code"
 		:value="component.content[fieldKey]"
 		:placeholder="templateField?.default"
+		:error="error"
 		@input="
 			(ev: Event) =>
 				formatAndSetContentValue((ev.target as HTMLInputElement).value)
@@ -14,20 +15,21 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs, inject, computed } from "vue";
-import { Component } from "@/writerTypes";
+import { toRefs, inject, computed, PropType } from "vue";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
+import { Component } from "@/writerTypes";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { setContentValue } = useComponentActions(wf, ssbm);
 
-const props = defineProps<{
-	componentId: Component["id"];
-	fieldKey: string;
-}>();
+const props = defineProps({
+	componentId: { type: String as PropType<Component["id"]>, required: true },
+	fieldKey: { type: String, required: true },
+	error: { type: String, required: false, default: undefined },
+});
 const { componentId, fieldKey } = toRefs(props);
 const component = computed(() => wf.getComponentById(componentId.value));
 

diff --git a/src/ui/src/builder/settings/BuilderFieldsPadding.vue b/src/ui/src/builder/settings/BuilderFieldsPadding.vue
@@ -94,6 +94,7 @@
 				v-if="mode == 'css'"
 				ref="freehandInputEl"
 				:value="component.content[fieldKey]"
+				:error="error"
 				@input="handleInputCss"
 			/>
 		</div>
@@ -108,6 +109,7 @@ import {
 	nextTick,
 	onBeforeUnmount,
 	onMounted,
+	PropType,
 	Ref,
 	ref,
 	toRefs,
@@ -183,10 +185,11 @@ const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
 	default: null,
 };
 
-const props = defineProps<{
-	componentId: Component["id"];
-	fieldKey: string;
-}>();
+const props = defineProps({
+	componentId: { type: String as PropType<Component["id"]>, required: true },
+	fieldKey: { type: String, required: true },
+	error: { type: String, required: false, default: undefined },
+});
 
 const { componentId, fieldKey } = toRefs(props);
 const component = computed(() => wf.getComponentById(componentId.value));

diff --git a/src/ui/src/builder/settings/BuilderFieldsShadow.vue b/src/ui/src/builder/settings/BuilderFieldsShadow.vue
@@ -93,6 +93,7 @@
 				v-if="mode == 'css'"
 				ref="freehandInputEl"
 				:value="component.content[fieldKey]"
+				:error="error"
 				@input="handleCSSInput"
 			/>
 		</div>
@@ -106,6 +107,7 @@ import {
 	nextTick,
 	onBeforeUnmount,
 	onMounted,
+	PropType,
 	Ref,
 	ref,
 	toRefs,
@@ -138,10 +140,12 @@ const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
 	default: null,
 };
 
-const props = defineProps<{
-	componentId: Component["id"];
-	fieldKey: string;
-}>();
+const props = defineProps({
+	componentId: { type: String as PropType<Component["id"]>, required: true },
+	fieldKey: { type: String, required: true },
+	error: { type: String, required: false, default: undefined },
+});
+
 const { componentId, fieldKey } = toRefs(props);
 const component = computed(() => wf.getComponentById(componentId.value));
 

diff --git a/src/ui/src/builder/settings/BuilderFieldsText.vue b/src/ui/src/builder/settings/BuilderFieldsText.vue
@@ -12,6 +12,7 @@
 				:value="component.content[fieldKey]"
 				:placeholder="templateField?.default"
 				:options="options"
+				:error="error"
 				@input="handleInput"
 			/>
 		</template>
@@ -23,14 +24,15 @@
 				:input-id="inputId"
 				:value="component.content[fieldKey]"
 				:placeholder="templateField?.default"
+				:error="error"
 				@input="handleInput"
 			/>
 		</template>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { toRefs, inject, computed } from "vue";
+import { toRefs, inject, computed, PropType } from "vue";
 import { Component, FieldControl } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
@@ -40,10 +42,11 @@ const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { setContentValue } = useComponentActions(wf, ssbm);
 
-const props = defineProps<{
-	componentId: Component["id"];
-	fieldKey: string;
-}>();
+const props = defineProps({
+	componentId: { type: String as PropType<Component["id"]>, required: true },
+	fieldKey: { type: String, required: true },
+	error: { type: String, required: false, default: undefined },
+});
 const { componentId, fieldKey } = toRefs(props);
 const component = computed(() => wf.getComponentById(componentId.value));
 const templateField = computed(() => {

diff --git a/src/ui/src/builder/settings/BuilderFieldsWidth.vue b/src/ui/src/builder/settings/BuilderFieldsWidth.vue
@@ -23,6 +23,7 @@
 						ref="fixedEl"
 						type="number"
 						:model-value="valuePickFixed"
+						:invalid="error !== undefined"
 						@update:model-value="handleInputFixed"
 					/>
 					<div>px</div>
@@ -47,6 +48,7 @@ import {
 	nextTick,
 	onBeforeUnmount,
 	onMounted,
+	PropType,
 	Ref,
 	ref,
 	toRefs,
@@ -111,10 +113,11 @@ const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
 	default: null,
 };
 
-const props = defineProps<{
-	componentId: Component["id"];
-	fieldKey: string;
-}>();
+const props = defineProps({
+	componentId: { type: String as PropType<Component["id"]>, required: true },
+	fieldKey: { type: String, required: true },
+	error: { type: String, required: false, default: undefined },
+});
 
 const { componentId, fieldKey } = toRefs(props);
 const component = computed(() => wf.getComponentById(componentId.value));

diff --git a/src/ui/src/builder/settings/BuilderSettingsBinding.vue b/src/ui/src/builder/settings/BuilderSettingsBinding.vue
@@ -26,6 +26,7 @@ import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
+import BuilderSectionTitle from "./BuilderSectionTitle.vue";
 
 const hint =
 	'Links this component to a state element, in a two-way fashion. Reference the state element directly, i.e. use "my_var" instead of "@{my_var}".';