From 924e774e32fdbe94e53ddbd21335a3edf4927788 Mon Sep 17 00:00:00 2001
From: Lucas Werkmeister <lucas.werkmeister@wikimedia.de>
Date: Mon, 23 Sep 2024 18:10:58 +0200
Subject: [PATCH] Restructure error computation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Since Codex wants the status and messages as separate props, but we
compute them at the same time, let’s have the computed return an object
with both props.

Bug: T370054
---
 src/components/LemmaInput.vue | 34 ++++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/components/LemmaInput.vue b/src/components/LemmaInput.vue
index 7833aceb..7f77697a 100644
--- a/src/components/LemmaInput.vue
+++ b/src/components/LemmaInput.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CdxField, CdxTextInput } from '@wikimedia/codex';
+import { CdxField, CdxTextInput, ValidationMessages, ValidationStatusType } from '@wikimedia/codex';
 import RequiredAsterisk from '@/components/RequiredAsterisk.vue';
 import { useMessages } from '@/plugins/MessagesPlugin/Messages';
 import { useConfig } from '@/plugins/ConfigPlugin/Config';
@@ -21,23 +21,33 @@ const messages = useMessages();
 const config = useConfig();
 const exampleLemma = config.placeholderExampleData.lemma;
 const store = useStore();
-const error = computed( () => {
+const error = computed( (): {
+	status: ValidationStatusType;
+	messages: ValidationMessages;
+} => {
 	const inputLength = Array.from( props.modelValue ).length;
 	if ( inputLength > config.maxLemmaLength ) {
 		return {
-			type: 'error',
-			message: messages.getUnescaped(
-				'wikibaselexeme-newlexeme-lemma-too-long-error',
-				config.maxLemmaLength.toString(),
-			),
+			status: 'error',
+			messages: {
+				error: messages.getUnescaped(
+					'wikibaselexeme-newlexeme-lemma-too-long-error',
+					config.maxLemmaLength.toString(),
+				),
+			},
 		};
 	}
 	if ( !store.state.perFieldErrors.lemmaErrors.length ) {
-		return null;
+		return {
+			status: 'default',
+			messages: {},
+		};
 	}
 	return {
-		type: 'error',
-		message: messages.getUnescaped( store.state.perFieldErrors.lemmaErrors[ 0 ].messageKey ),
+		status: 'error',
+		messages: {
+			error: messages.getUnescaped( store.state.perFieldErrors.lemmaErrors[ 0 ].messageKey ),
+		},
 	};
 } );
 </script>
@@ -53,8 +63,8 @@ export default {
 <template>
 	<cdx-field
 		class="wbl-snl-lemma-input"
-		:status="error !== null ? 'error' : 'default'"
-		:messages="error !== null ? { error: error.message } : {}"
+		:status="error.status"
+		:messages="error.messages"
 	>
 		<!-- eslint-disable vue/v-on-event-hyphenation -->
 		<cdx-text-input