custom input fields

packages/client/hmi-client/src/assets/css/theme/_variables.scss

@@ -42,6 +42,7 @@ $fontWeightSemiBold: 600;
 //global
 $textColor: rgb(16, 24, 40);
 $textSecondaryColor: $emphasis-medium !default;
+$smallBorderRadius: 2px !default;
 $borderRadius: 4px !default;
 $mediumBorderRadius: 6px !default;
 $bigBorderRadius: 8px !default;
@@ -868,12 +869,15 @@ $petri-inputBox: var(--surface-0);
 
 :root {
 	--editing-color: rgb(238, 238, 136);
+	--border-radius-small: #{$smallBorderRadius};
 	--border-radius: #{$borderRadius};
 	--border-radius-medium: #{$mediumBorderRadius};
 	--border-radius-big: #{$bigBorderRadius};
 	--border-radius-bigger: #{$biggerBorderRadius};
 	--chevron-hover: #1b807332;
 	--content-padding: #{$panelContentPadding};
+	--error-message-background: #{$errorMessageBg};
+	--error-message-color: #{$errorMessageTextColor};
 	--focus-ring: #{$focusShadow};
 	--font-body-large: #{$fontBodyLarge};
 	--font-body-medium: #{$fontBodyMedium};
@@ -939,6 +943,7 @@ $petri-inputBox: var(--surface-0);
 	--warning-color: #FFAB00;
 	--surface-error: #FDDDD3;
 	--error-color: #F35625;
+	--error-border-color: #F89A7C;
 	--surface-hover: var(--gray-100);
 	--surface-secondary: #f9fbfa;
 	--surface-section: #ffffff;

packages/client/hmi-client/src/components/widgets/tera-input-field.vue

@@ -0,0 +1,109 @@
+<template>
+	<div
+		class="input-container"
+		:class="{ error: errorMessage, disabled: disabled, focused: focused }"
+		@click="focusInput"
+	>
+		<label for="custom-input" class="input-label">{{ label }}</label>
+		<input
+			id="custom-input"
+			class="input-field"
+			ref="inputField"
+			:value="modelValue"
+			@input="updateValue"
+			:disabled="disabled"
+			@focus="onFocus"
+			@blur="onBlur"
+		/>
+	</div>
+	<p v-if="errorMessage" class="error-message">
+		<i class="pi pi-exclamation-circle" /> {{ errorMessage }}
+	</p>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineProps<{
+	modelValue: string;
+	label?: string;
+	errorMessage?: string;
+	disabled?: boolean;
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+const inputField = ref<HTMLInputElement | null>(null);
+const focused = ref(false);
+
+const focusInput = () => {
+	inputField.value?.focus();
+};
+
+const onFocus = () => {
+	focused.value = true;
+};
+
+const onBlur = () => {
+	focused.value = false;
+};
+
+const updateValue = (event: Event) => {
+	const value = (event.target as HTMLInputElement).value;
+	emit('update:modelValue', value);
+};
+</script>
+
+<style scoped>
+.input-container {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+	padding: var(--gap-xsmall) var(--gap-small);
+	background-color: #fff;
+	border: 1px solid var(--surface-border-alt);
+	border-radius: var(--border-radius-small);
+	cursor: text;
+	margin-bottom: var(--gap-small);
+	transition: border-color 0.3s ease-in-out;
+
+	&.disabled {
+		opacity: 0.5;
+	}
+
+	&.focused {
+		border-color: var(--primary-color);
+	}
+	&.error {
+		border-color: var(--error-border-color);
+	}
+	input {
+		min-width: 0;
+	}
+}
+
+.input-label {
+	background-color: transparent;
+	color: var(--text-color-secondary);
+	cursor: text;
+	padding-right: var(--gap-small);
+}
+
+.input-field {
+	text-align: right;
+	flex-grow: 1;
+	border: none;
+	background-color: transparent;
+}
+
+.error-message {
+	color: var(--error-message-color);
+	font-size: var(--font-caption);
+	word-wrap: break-word;
+	display: flex;
+	align-items: center;
+	i {
+		margin-right: var(--gap-small);
+	}
+}
+</style>

packages/client/hmi-client/src/router/index.ts

@@ -16,6 +16,7 @@ import AMRPetriTest from '@/temp/AMRPetriTest.vue';
 import PyodideTest from '@/temp/PyodideTest.vue';
 import JupyterTest from '@/temp/JupyterTest.vue';
 import ModelTemplateTest from '@/temp/model-template-test.vue';
+import CustomInputTest from '@/temp/custom-input-test.vue';
 import { RouteName } from './routes';
 
 export enum RoutePath {
@@ -67,7 +68,8 @@ const routes = [
 	{ path: '/amr-petri-test', component: AMRPetriTest },
 	{ path: '/pyodide-test', component: PyodideTest },
 	{ path: '/jupyter-test', component: JupyterTest },
-	{ path: '/model-template-test', component: ModelTemplateTest }
+	{ path: '/model-template-test', component: ModelTemplateTest },
+	{ path: '/custom-input-test', component: CustomInputTest }
 ];
 
 const router = createRouter({

packages/client/hmi-client/src/temp/custom-input-test.vue

@@ -0,0 +1,40 @@
+<template>
+	<div class="flex flex-column pl-8 gap-5">
+		<div class="w-2">
+			<label>normal input</label>
+			<tera-input-field v-model="teststring" label="Label" />
+		</div>
+
+		<div class="w-2">
+			<label>Error input</label>
+			<tera-input-field
+				label="Label"
+				:error-message="errormessage"
+				v-model="errorstring"
+				@update:model-value="onUpdate"
+			/>
+		</div>
+
+		<div class="w-2">
+			<label>Disabled input</label>
+			<tera-input-field label="Label" model-value="Disabled" disabled />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import teraInputField from '@/components/widgets/tera-input-field.vue';
+import { ref } from 'vue';
+
+const teststring = ref<string>('');
+const errorstring = ref<string>('Error message error message');
+const errormessage = ref<string>('Error message error message');
+
+function onUpdate(value: string) {
+	if (value) {
+		errormessage.value = 'Error message error message';
+	} else {
+		errormessage.value = '';
+	}
+}
+</script>