From edde3a7c8c0dd74885f3f18801c219bcf8d03359 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Tue, 25 Feb 2025 16:47:28 +1100
Subject: [PATCH] feat: enhance SingleWeekPicker with year adjustment and
 accessibility improvements

---
 src/components/SingleWeekPicker.vue | 73 +++++++++++++++++++++++++----
 1 file changed, 63 insertions(+), 10 deletions(-)

diff --git a/src/components/SingleWeekPicker.vue b/src/components/SingleWeekPicker.vue
index 63eea6f..d37dd2f 100644
--- a/src/components/SingleWeekPicker.vue
+++ b/src/components/SingleWeekPicker.vue
@@ -147,11 +147,56 @@ function selectWeek(weekYear: number, weekNum: number) {
 	emit('update:modelValue', { weekYear, weekNum })
 }
 
+function changeYear(event: Event) {
+	const target = event.target as HTMLInputElement
+	const year = parseInt(target.value)
+	if (year) currentYear.value = year
+}
+
+function adjustYear() {
+	if (currentYear.value < 100) currentYear.value = parseInt(`20${currentYear.value}`)
+}
+
 </script>
 
 <template>
 	<div :id="`__datenel-${uniqueId}`" class='datenel-component'>
-		<div v-if="selectMonth"></div>
+		<div role="dialog" aria-label="Week selection panel, you are now at month and year quick-select" v-if="selectMonth">
+			<div class='__datenel_header'>
+				<button class='__datenel_stepper' @click="() => {
+					if (currentYear <= 100) return
+					currentYear -= 1
+				}" :aria-label="`Go to last year, ${currentYear - 1}, you are now at year ${currentYear}`"><svg
+						xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+						<path
+							d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z">
+						</path>
+					</svg></button>
+				<input class='__datenel_indicator' v-model="currentYear" @change="changeYear" @blur="adjustYear"
+					aria-label="Year input, type a year to go to that year" />
+				<button class='__datenel_stepper' @click="() => {
+					if (currentYear >= 9999) return
+					currentYear += 1
+				}" :aria-label="`Go to next year, ${currentYear + 1}, you are now at year ${currentYear}`"> <svg
+						xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+						<path
+							d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z">
+						</path>
+					</svg></button>
+			</div>
+
+			<div class='__datenel_body'>
+				<div class='__datenel_month-selector-body'>
+					<button v-for="(_, index) in 12" :class="`__datenel_item ${currentMonth === index && '__datenel_active'}`"
+						key={index} @click="() => {
+							currentMonth = index
+							selectMonth = false
+						}" :aria-label="`Go to ${new Date(currentYear, index).toLocaleString(localization, { month: 'long' })} of the year ${currentYear}`">
+						{{ new Date(currentYear, index).toLocaleString(localization, { month: 'long' }) }}
+					</button>
+				</div>
+			</div>
+		</div>
 
 		<div v-else>
 			<div class='__datenel_header'>
@@ -179,24 +224,32 @@ function selectWeek(weekYear: number, weekNum: number) {
 				<div class="__datenel_week-indicator">
 					<div class="__datenel_item __datenel_title">Wk</div>
 
-					<div v-for="week in calendarWeeks" :class="`__datenel_item ${false ? '__datenel_active' : ''}`" :key="calculateWeekNum(week[0]).weekNum" @click="() => {}">
+					<div v-for="week in calendarWeeks" :class="`__datenel_item ${false ? '__datenel_active' : ''}`"
+						:key="calculateWeekNum(week[0]).weekNum" @click="() => { }">
 						{{ calculateWeekNum(week[0]).weekNum }}
 					</div>
 				</div>
 
 				<div class='__datenel_calendar-view-body __datenel_flex' aria-live="polite">
 					<div class="__datenel_listitem">
-						<div v-for="(_, index) in Array.from({ length: 7 })" class='__datenel_item __datenel_day-indicator' :key="index">{{l10nDays[index]}}</div>
+						<div v-for="(_, index) in Array.from({ length: 7 })" class='__datenel_item __datenel_day-indicator'
+							:key="index">{{ l10nDays[index] }}</div>
 					</div>
 
-					<button v-for="(week, index) in calendarWeeks" :class="`__datenel_listitem ${ modelValue && (modelValue.weekNum === calculateWeekNum(week[0]).weekNum && modelValue.weekYear === calculateWeekNum(week[0]).weekYear)  ? '__datenel_active' : ''}`" :key="index" @click="selectWeek(calculateWeekNum(week[0]).weekYear, calculateWeekNum(week[0]).weekNum)" :aria-label="`Select week ${calculateWeekNum(week[0]).weekNum} of the year ${calculateWeekNum(week[0]).weekYear}, from ${week[0].toLocaleString(localization, { dateStyle: `full` })} to ${week[6].toLocaleString(localization, { weekday: 'long' })}, ${week[6].toLocaleString(localization, { month: 'long' })} ${week[6].getDate()}, ${week[6].getFullYear()}`">
-						<div
-							v-for="date in week"
+					<button v-for="(week, index) in calendarWeeks"
+						:class="`__datenel_listitem ${modelValue && (modelValue.weekNum === calculateWeekNum(week[0]).weekNum && modelValue.weekYear === calculateWeekNum(week[0]).weekYear) ? '__datenel_active' : ''}`"
+						:key="index" @click="selectWeek(calculateWeekNum(week[0]).weekYear, calculateWeekNum(week[0]).weekNum)"
+						:aria-label="`Select week ${calculateWeekNum(week[0]).weekNum} of the year ${calculateWeekNum(week[0]).weekYear}, from ${week[0].toLocaleString(localization, { dateStyle: `full` })} to ${week[6].toLocaleString(localization, { weekday: 'long' })}, ${week[6].toLocaleString(localization, { month: 'long' })} ${week[6].getDate()}, ${week[6].getFullYear()}`">
+						<div v-for="date in week"
 							:class="`__datenel_item __datenel_date ${currentMonth !== date.getMonth() && '__datenel_extra-month'}`"
-							:key="date.getDate()"
-						>
-							{{date.getDate()}}
-							<svg v-if="date.toDateString() === new Date().toDateString()" xmlns="http://www.w3.org/2000/svg" class='__datenel_today-indicator' viewBox="0 0 24 24" fill="currentColor"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path></svg>
+							:key="date.getDate()">
+							{{ date.getDate() }}
+							<svg v-if="date.toDateString() === new Date().toDateString()" xmlns="http://www.w3.org/2000/svg"
+								class='__datenel_today-indicator' viewBox="0 0 24 24" fill="currentColor">
+								<path
+									d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z">
+								</path>
+							</svg>
 						</div>
 					</button>
 				</div>