implement date picker

frontend/components/Form/DatePicker.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="dropdown dropdown-end w-full" ref="label">
+    <FormTextField tabindex="0" label="Date" v-model="dateText" :inline="inline" readonly />
+    <div @blur="resetTime" tabindex="0" class="mt-1 card compact dropdown-content shadow bg-base-100 rounded-box w-64">
+      <div class="card-body">
+        <div class="flex justify-between items-center">
+          <button class="btn btn-xs" @click="prevMonth">
+            <Icon class="h-5 w-5" name="mdi-arrow-left"></Icon>
+          </button>
+          <p class="text-center">{{ month }} {{ year }}</p>
+          <button class="btn btn-xs" @click="nextMonth">
+            <Icon class="h-5 w-5" name="mdi-arrow-right"></Icon>
+          </button>
+        </div>
+        <div class="grid grid-cols-7 gap-2">
+          <div v-for="d in daysIdx">
+            <p class="text-center">
+              {{ d }}
+            </p>
+          </div>
+          <template v-for="day in days">
+            <button
+              v-if="day.number != ''"
+              class="text-center btn-xs btn btn-outline"
+              @click="select($event, day.date)"
+            >
+              {{ day.number }}
+            </button>
+            <div v-else></div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const emit = defineEmits(['update:modelValue', 'update:text']);
+
+  const props = defineProps({
+    modelValue: {
+      type: Date,
+      required: false,
+      default: null,
+    },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  const selected = useVModel(props, 'modelValue', emit);
+  const dateText = computed(() => {
+    if (selected.value) {
+      return selected.value.toLocaleDateString();
+    }
+    return '';
+  });
+
+  const time = ref(new Date());
+  function resetTime() {
+    time.value = new Date();
+  }
+
+  const label = ref<HTMLElement>();
+  onClickOutside(label, () => {
+    resetTime();
+  });
+
+  const month = computed(() => {
+    return time.value.toLocaleString('default', { month: 'long' });
+  });
+
+  const year = computed(() => {
+    return time.value.getFullYear();
+  });
+
+  function nextMonth() {
+    time.value.setMonth(time.value.getMonth() + 1);
+    time.value = new Date(time.value);
+  }
+
+  function prevMonth() {
+    time.value.setMonth(time.value.getMonth() - 1);
+    time.value = new Date(time.value);
+  }
+
+  const daysIdx = computed(() => {
+    return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+  });
+
+  function select(e: MouseEvent, day: Date) {
+    console.log(day);
+    selected.value = day;
+    console.log(selected.value);
+    // @ts-ignore
+    e.target.blur();
+    resetTime();
+  }
+
+  type DayEntry = {
+    number: number | string;
+    date: Date;
+  };
+
+  function daysInMonth(month: number, year: number) {
+    return new Date(year, month, 0).getDate();
+  }
+
+  const days = computed<DayEntry[]>(() => {
+    const days = [];
+
+    const totalDays = daysInMonth(time.value.getMonth() + 1, time.value.getFullYear());
+
+    const firstDay = new Date(time.value.getFullYear(), time.value.getMonth(), 1).getDay();
+
+    for (let i = 0; i < firstDay; i++) {
+      days.push({
+        number: '',
+        date: new Date(),
+      });
+    }
+
+    for (let i = 1; i <= totalDays; i++) {
+      days.push({
+        number: i,
+        date: new Date(time.value.getFullYear(), time.value.getMonth(), i),
+      });
+    }
+
+    return days;
+  });
+</script>

frontend/components/Form/TextArea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="form-control">
+  <div class="form-control" v-if="!inline">
     <label class="label">
       <span class="label-text">{{ label }}</span>
     </label>
@@ -9,13 +9,19 @@
       <span class="label-text-alt"> {{ valueLen }}/{{ limit }}</span>
     </label>
   </div>
+  <div v-else class="sm:grid sm:grid-cols-4 sm:items-start sm:gap-4">
+    <label class="label">
+      <span class="label-text">{{ label }}</span>
+    </label>
+    <textarea class="textarea textarea-bordered col-span-3 mt-3 h-24" auto-grow v-model="value" :placeholder="placeholder" />
+  </div>
 </template>
 
 <script lang="ts" setup>
   const emit = defineEmits(['update:modelValue']);
   const props = defineProps({
     modelValue: {
-      type: String,
+      type: [String],
       required: true,
     },
     label: {
@@ -34,6 +40,10 @@
       type: String,
       default: '',
     },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
   });
 
   const value = useVModel(props, 'modelValue', emit);

frontend/components/Form/TextField.vue

@@ -1,10 +1,16 @@
 <template>
-  <div class="form-control w-full">
+  <div v-if="!inline" class="form-control w-full">
     <label class="label">
       <span class="label-text">{{ label }}</span>
     </label>
     <input ref="input" :type="type" v-model="value" class="input input-bordered w-full" />
   </div>
+  <div v-else class="sm:grid sm:grid-cols-4 sm:items-start sm:gap-4">
+    <label class="label">
+      <span class="label-text">{{ label }}</span>
+    </label>
+    <input class="input input-bordered col-span-3 w-full mt-2" v-model="value" />
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -14,7 +20,7 @@
       default: '',
     },
     modelValue: {
-      type: String,
+      type: [String, Number],
       default: null,
     },
     type: {
@@ -25,6 +31,10 @@
       type: Boolean,
       default: null,
     },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
   });
 
   const input = ref<HTMLElement | null>(null);