Restructured Project Rep

components/DatePicker.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { DatePicker as VCalendarDatePicker } from 'v-calendar'
+import 'v-calendar/dist/style.css'
+
+const props = defineProps({
+  modelValue: {
+    type: Date,
+    default: null
+  },
+  mode: {
+    type: String,
+    default: "date"
+  }
+})
+
+const emit = defineEmits(['update:model-value', 'close'])
+
+const colorMode = useColorMode()
+
+const isDark = computed(() => colorMode.value === 'dark')
+
+const date = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:model-value', value)
+    emit('close')
+  }
+})
+
+const attrs = [{
+  key: 'today',
+  highlight: {
+    fillMode: 'outline',
+  },
+  dates: new Date()
+}]
+</script>
+
+<template>
+  <VCalendarDatePicker
+      show-weeknumbers
+      v-model="date"
+      :mode="props.mode"
+      is24hr
+      transparent
+      borderless
+      color="green"
+      :attributes="attrs"
+      :is-dark="isDark"
+      title-position="left"
+      trim-weeks
+      :first-day-of-week="2"
+  />
+</template>