From 19435b672eef2e24a6ae2a04e2325a74ce004a00 Mon Sep 17 00:00:00 2001
From: Devesh0129 <talsaniadevesh29@gmail.com>
Date: Wed, 22 Apr 2026 00:51:15 +0200
Subject: [PATCH 1/3] Files added

---
 .../gui-editor/properties/DateProperty.vue    | 49 +++++++++++++++++
 .../gui-editor/properties/EmailProperty.vue   | 55 +++++++++++++++++++
 .../resolveCorrespondingComponent.ts          | 12 ++++
 3 files changed, 116 insertions(+)
 create mode 100644 meta_configurator/src/components/panels/gui-editor/properties/DateProperty.vue
 create mode 100644 meta_configurator/src/components/panels/gui-editor/properties/EmailProperty.vue

diff --git a/meta_configurator/src/components/panels/gui-editor/properties/DateProperty.vue b/meta_configurator/src/components/panels/gui-editor/properties/DateProperty.vue
new file mode 100644
index 000000000..15ebfad2a
--- /dev/null
+++ b/meta_configurator/src/components/panels/gui-editor/properties/DateProperty.vue
@@ -0,0 +1,49 @@
+<!-- Date picker for string properties with date format -->
+<script setup lang="ts">
+import {ref, watch} from 'vue';
+import DatePicker from 'primevue/datepicker';
+import type {JsonSchemaWrapper} from '@/schema/jsonSchemaWrapper';
+import type {PathElement} from '@/utility/path';
+import type {ValidationResult} from '@/schema/validationService';
+import {isReadOnly} from '@/components/panels/gui-editor/configTreeNodeReadingUtils';
+
+const props = defineProps<{
+  propertyName: PathElement;
+  propertyData: string | undefined;
+  propertySchema: JsonSchemaWrapper;
+  validationResults: ValidationResult;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:propertyData', newValue: string | undefined): void;
+}>();
+
+// convert string to Date for the picker
+const dateValue = ref<Date | undefined>(
+  props.propertyData ? new Date(props.propertyData) : undefined
+);
+
+watch(() => props.propertyData, newVal => {
+  dateValue.value = newVal ? new Date(newVal) : undefined;
+});
+
+function updateValue(newDate: Date | undefined) {
+  if (!newDate) {
+    emit('update:propertyData', undefined);
+    return;
+  }
+  // convert Date back to ISO date string (YYYY-MM-DD)
+  const isoString = newDate.toISOString().split('T')[0];
+  emit('update:propertyData', isoString);
+}
+</script>
+
+<template>
+  <DatePicker
+    :class="{'underline decoration-wavy decoration-red-600': !props.validationResults.valid}"
+    class="h-8"
+    v-model="dateValue"
+    dateFormat="yy-mm-dd"
+    :disabled="isReadOnly(props.propertySchema)"
+    @update:modelValue="updateValue" />
+</template>
diff --git a/meta_configurator/src/components/panels/gui-editor/properties/EmailProperty.vue b/meta_configurator/src/components/panels/gui-editor/properties/EmailProperty.vue
new file mode 100644
index 000000000..1388236ec
--- /dev/null
+++ b/meta_configurator/src/components/panels/gui-editor/properties/EmailProperty.vue
@@ -0,0 +1,55 @@
+<!-- Email input for string properties with email format -->
+<script setup lang="ts">
+import {ref, watch, computed} from 'vue';
+import InputText from 'primevue/inputtext';
+import type {JsonSchemaWrapper} from '@/schema/jsonSchemaWrapper';
+import type {PathElement} from '@/utility/path';
+import type {ValidationResult} from '@/schema/validationService';
+import {isReadOnly} from '@/components/panels/gui-editor/configTreeNodeReadingUtils';
+import {useSettings} from '@/settings/useSettings';
+
+const props = defineProps<{
+  propertyName: PathElement;
+  propertyData: string | undefined;
+  propertySchema: JsonSchemaWrapper;
+  validationResults: ValidationResult;
+}>();
+
+const settings = useSettings();
+
+const emit = defineEmits<{
+  (e: 'update:propertyData', newValue: string | undefined): void;
+}>();
+
+const newPropertyData = ref(props.propertyData);
+
+watch(() => props.propertyData, newVal => {
+  newPropertyData.value = newVal;
+});
+
+function updateValue() {
+  emit('update:propertyData', newPropertyData.value);
+}
+</script>
+
+<template>
+  <InputText
+    type="email"
+    :class="{'underline decoration-wavy decoration-red-600': !props.validationResults.valid}"
+    class="h-8 tableInput"
+    v-model="newPropertyData"
+    placeholder="email@example.com"
+    :disabled="isReadOnly(props.propertySchema)"
+    @blur="updateValue"
+    @keydown.down.stop
+    @keydown.up.stop
+    @keydown.left.stop
+    @keydown.right.stop
+    @keyup.enter="updateValue" />
+</template>
+
+<style scoped>
+.tableInput {
+  border: v-bind("settings.guiEditor.showBorderAroundInputFields ? '1px solid #d1d5db' : 'none'");
+}
+</style>
\ No newline at end of file
diff --git a/meta_configurator/src/components/panels/gui-editor/resolveCorrespondingComponent.ts b/meta_configurator/src/components/panels/gui-editor/resolveCorrespondingComponent.ts
index 0b5e05e54..5244db058 100644
--- a/meta_configurator/src/components/panels/gui-editor/resolveCorrespondingComponent.ts
+++ b/meta_configurator/src/components/panels/gui-editor/resolveCorrespondingComponent.ts
@@ -4,6 +4,8 @@ import StringProperty from '@/components/panels/gui-editor/properties/StringProp
 import NumberProperty from '@/components/panels/gui-editor/properties/NumberProperty.vue';
 import SimpleObjectProperty from '@/components/panels/gui-editor/properties/SimpleObjectProperty.vue';
 import SimpleArrayProperty from '@/components/panels/gui-editor/properties/SimpleArrayProperty.vue';
+import DateProperty from '@/components/panels/gui-editor/properties/DateProperty.vue';
+import EmailProperty from '@/components/panels/gui-editor/properties/EmailProperty.vue';
 import type {
   AddItemTreeNodeData,
   ConfigTreeNodeData,
@@ -81,6 +83,16 @@ export function resolveCorrespondingComponent(
     return h(StringProperty, propsObject);
   }
 
+  if (nodeData.schema.hasType('string') && nodeData.schema.format === 'date') {
+    // @ts-ignore
+    return h(DateProperty, propsObject);
+  }
+
+  if (nodeData.schema.hasType('string') && nodeData.schema.format === 'email') {
+    // @ts-ignore
+    return h(EmailProperty, propsObject);
+  }
+
   if (nodeData.schema.hasType('boolean')) {
     // @ts-ignore
     return h(BooleanProperty, propsObject);

From 957237f7e3f88105af8ba7184da84e4ba691080d Mon Sep 17 00:00:00 2001
From: Devesh0129 <Devesh0129@users.noreply.github.com>
Date: Tue, 21 Apr 2026 22:53:00 +0000
Subject: [PATCH 2/3] apply formatting changes

---
 .../panels/gui-editor/properties/DateProperty.vue     |  9 ++++++---
 .../panels/gui-editor/properties/EmailProperty.vue    | 11 +++++++----
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/meta_configurator/src/components/panels/gui-editor/properties/DateProperty.vue b/meta_configurator/src/components/panels/gui-editor/properties/DateProperty.vue
index 15ebfad2a..c3566fd51 100644
--- a/meta_configurator/src/components/panels/gui-editor/properties/DateProperty.vue
+++ b/meta_configurator/src/components/panels/gui-editor/properties/DateProperty.vue
@@ -23,9 +23,12 @@ const dateValue = ref<Date | undefined>(
   props.propertyData ? new Date(props.propertyData) : undefined
 );
 
-watch(() => props.propertyData, newVal => {
-  dateValue.value = newVal ? new Date(newVal) : undefined;
-});
+watch(
+  () => props.propertyData,
+  newVal => {
+    dateValue.value = newVal ? new Date(newVal) : undefined;
+  }
+);
 
 function updateValue(newDate: Date | undefined) {
   if (!newDate) {
diff --git a/meta_configurator/src/components/panels/gui-editor/properties/EmailProperty.vue b/meta_configurator/src/components/panels/gui-editor/properties/EmailProperty.vue
index 1388236ec..3a692dae8 100644
--- a/meta_configurator/src/components/panels/gui-editor/properties/EmailProperty.vue
+++ b/meta_configurator/src/components/panels/gui-editor/properties/EmailProperty.vue
@@ -23,9 +23,12 @@ const emit = defineEmits<{
 
 const newPropertyData = ref(props.propertyData);
 
-watch(() => props.propertyData, newVal => {
-  newPropertyData.value = newVal;
-});
+watch(
+  () => props.propertyData,
+  newVal => {
+    newPropertyData.value = newVal;
+  }
+);
 
 function updateValue() {
   emit('update:propertyData', newPropertyData.value);
@@ -52,4 +55,4 @@ function updateValue() {
 .tableInput {
   border: v-bind("settings.guiEditor.showBorderAroundInputFields ? '1px solid #d1d5db' : 'none'");
 }
-</style>
\ No newline at end of file
+</style>

From 69a9a185ba67d0c4dc628cb107e18d34c4b53cf6 Mon Sep 17 00:00:00 2001
From: Devesh0129 <talsaniadevesh29@gmail.com>
Date: Thu, 30 Apr 2026 14:35:22 +0200
Subject: [PATCH 3/3] Date and email property components

---
 .../panels/gui-editor/resolveCorrespondingComponent.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/meta_configurator/src/components/panels/gui-editor/resolveCorrespondingComponent.ts b/meta_configurator/src/components/panels/gui-editor/resolveCorrespondingComponent.ts
index 5244db058..3644174af 100644
--- a/meta_configurator/src/components/panels/gui-editor/resolveCorrespondingComponent.ts
+++ b/meta_configurator/src/components/panels/gui-editor/resolveCorrespondingComponent.ts
@@ -77,12 +77,6 @@ export function resolveCorrespondingComponent(
       ...propsObject,
     });
   }
-
-  if (nodeData.schema.hasType('string')) {
-    // @ts-ignore
-    return h(StringProperty, propsObject);
-  }
-
   if (nodeData.schema.hasType('string') && nodeData.schema.format === 'date') {
     // @ts-ignore
     return h(DateProperty, propsObject);
@@ -92,6 +86,10 @@ export function resolveCorrespondingComponent(
     // @ts-ignore
     return h(EmailProperty, propsObject);
   }
+  if (nodeData.schema.hasType('string')) {
+    // @ts-ignore
+    return h(StringProperty, propsObject);
+  }
 
   if (nodeData.schema.hasType('boolean')) {
     // @ts-ignore