From f5f088954829c25d9df8b3087f609c32fac0b8e4 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Mon, 24 Feb 2025 13:41:16 +1100
Subject: [PATCH] feat: implement v-model support for SingleDatePicker and
 enhance layout styling

---
 playground/App.vue                  |  6 +++++-
 playground/index.scss               |  2 ++
 src/components/SingleDatePicker.vue | 18 ++++++++++++++++--
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/playground/App.vue b/playground/App.vue
index 290a89c..0faf946 100644
--- a/playground/App.vue
+++ b/playground/App.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import {SingleDatePicker} from '../src'
+import {ref} from 'vue'
+
+const date = ref(new Date())
 </script>
 
 <template>
+  <div>{{date.toDateString()}}</div>
   <div class="container">
-    <SingleDatePicker />
+    <SingleDatePicker v-model="date" />
   </div>
 </template>
 
diff --git a/playground/index.scss b/playground/index.scss
index 2c7be10..bc016ef 100644
--- a/playground/index.scss
+++ b/playground/index.scss
@@ -5,6 +5,8 @@ body {
 		width: 100vw;
 		height: 100vh;
 		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
 		justify-content: center;
 		align-items: center;
 	}
diff --git a/src/components/SingleDatePicker.vue b/src/components/SingleDatePicker.vue
index 76b32ba..55d9a85 100644
--- a/src/components/SingleDatePicker.vue
+++ b/src/components/SingleDatePicker.vue
@@ -28,9 +28,14 @@
 		localization: {
 			type: String,
 			required: false,
+		},
+		modelValue: {
+			type: Date,
+			required: false,
 		}
 	})
 
+	const emit = defineEmits(['update:modelValue'])
 	const selectMonth = ref(false)
 	const uniqueId = generateUniqueId()
 	const currentMonth = ref(new Date().getMonth())
@@ -51,6 +56,14 @@
 	onMounted(() => {
 		applyColor(uniqueId, colorScheme.value)
 		l10nDays.value = getL10Weekday(localization?.value || navigator.languages[0])
+		
+		if (props.modelValue) {
+			currentMonth.value = props.modelValue.getMonth()
+			currentYear.value = props.modelValue.getFullYear()
+		} else {
+			currentMonth.value = new Date().getMonth()
+			currentYear.value = new Date().getFullYear()
+		}
 		dates.value = getCalendarDates(currentMonth.value, currentYear.value)
 	})
 
@@ -79,6 +92,7 @@
 
 	function selectDate(date: Date) {
 		console.log(date)
+		emit('update:modelValue', date)
 	}
 
 </script>
@@ -97,10 +111,10 @@
 			<div class='__datenel_body'>
 				<div class='__datenel_calendar-view-body __datenel_grid' aria-live="polite">
 					<div class='__datenel_item __datenel_day-indicator' v-for="(day, index) in l10nDays" :key="index">{{ day }}</div>
-					<!-- ${selectedDate.toDateString() === date.toDateString() && '__datenel_active'} -->
+					<!--  -->
 					<button
 						v-for="date in dates"
-						:class="`__datenel_item __datenel_date ${notAvailable(date) && '__datenel_not-available'} `"
+						:class="`__datenel_item __datenel_date ${notAvailable(date) && '__datenel_not-available'} ${modelValue?.toDateString() === date.toDateString() && '__datenel_active'}`"
 						:key="date.toISOString()"
 						@click="selectDate(date)"
 						:aria-label="`${date.toLocaleString(localization, { dateStyle: 'full' })}${date.toDateString() === new Date().toDateString() ? ', this is today' : ''}, click to select this date`"