Add date field

src/components/fields/Date.vue

@@ -1,26 +1,10 @@
 <template>
-    <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
+    <v-text type="date" :required="field.required" :name="field.key" :label="field.name" :id="innerId" :hint="field.hint" v-model="inner" :max-today="field.max_today"></v-text>
-        <input
-            :id="innerId"
-            v-model="inner"
-            :name="field.key"
-            type="date"
-            :max="max"
-            placeholder=""
-            class="bg-white rounded-lg focus:outline-none text-gray-600 text-left py-1 px-2 @sm:py-2 text-sm @sm:text-base @sm:px-3 w-full"
-        />
-        <div v-if="field.hint" class="absolute right-0 mr-2 flex items-center h-full">
-            <hint :value="field.hint"></hint>
-        </div>
-        <field-label :name="field.name" :required="field.required"></field-label>
-    </label>
 </template>
 
 <script setup>
 import {computed} from 'vue';
-import FieldLabel from '../FieldLabel.vue';
+import VText from './VText.vue';
-import dayjs from 'dayjs';
-import Hint from '../Hint.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
@@ -47,10 +31,6 @@ const props = defineProps({
 
 const innerId = computed(() => (props.id ? props.id : props.field.key));
 
-const max = computed(() => {
-    return props.field.max_today ? dayjs().format('YYYY-MM-DD') : null;
-});
-
 const inner = computed({
     get: () => props.modelValue,
     set: (v) => emit('update:modelValue', v),

src/components/fields/Nami.vue

@@ -126,6 +126,17 @@
                                     :required="memberField.required"
                                     :class="colClassesForField(memberField)"
                                 ></v-text>
+                                <v-text
+                                    v-if="memberField.type === 'DateField'"
+                                    v-model="member[memberField.key]"
+                                    :max-today="memberField.max_today"
+                                    :name="`${field.key}-memberattr-${member.id}-${memberField.key}`"
+                                    :id="`${field.key}-memberattr-${member.id}-${memberField.key}`"
+                                    :label="memberField.name"
+                                    :required="memberField.required"
+                                    :class="colClassesForField(memberField)"
+                                    type="date"
+                                ></v-text>
                             </template>
                         </div>
                     </accordion>

src/components/fields/Text.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-text :required="field.required" :name="field.key" :label="field.name" :id="innerId" :hint="field.hint" v-model="inner"></v-text>
+    <v-text type="text" :required="field.required" :name="field.key" :label="field.name" :id="innerId" :hint="field.hint" v-model="inner"></v-text>
 </template>
 
 <script setup>

src/components/fields/VText.vue

@@ -22,6 +22,7 @@
 import {computed} from 'vue';
 import FieldLabel from '../FieldLabel.vue';
 import Hint from '../Hint.vue';
+import dayjs from 'dayjs';
 
 const emit = defineEmits(['update:modelValue', 'keypress']);
 const props = defineProps({
@@ -46,14 +47,15 @@ const props = defineProps({
         type: String,
         default: () => '',
     },
-    max: {
-        type: String,
-        default: () => '',
-    },
     label: {
         required: true,
         type: String,
     },
+    maxToday: {
+        required: false,
+        type: Boolean,
+        default: () => false,
+    },
     type: {
         required: false,
         type: String,
@@ -66,6 +68,10 @@ const props = defineProps({
     },
 });
 
+const max = computed(() => {
+    return props.maxToday ? dayjs().format('YYYY-MM-DD') : null;
+});
+
 const inner = computed({
     get: () => props.modelValue,
     set: (v) => emit('update:modelValue', v),