Add DateProperty and EmailProperty components

meta_configurator/src/components/panels/gui-editor/properties/DateProperty.vue

@@ -0,0 +1,52 @@
+<!-- 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>

meta_configurator/src/components/panels/gui-editor/properties/EmailProperty.vue

@@ -0,0 +1,58 @@
+<!-- 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 protected]"
+    :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>

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,
@@ -75,7 +77,15 @@ export function resolveCorrespondingComponent(
       ...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('string')) {
     // @ts-ignore
     return h(StringProperty, propsObject);