feat: add localization support to SingleDatePicker and update TypeScript configuration

src/components/SingleDatePicker.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 	import { ref, defineProps, watch, onMounted, toRefs } from 'vue'
-	import { generateUniqueId, applyColor } from '../utils'
+	import { generateUniqueId, applyColor, getL10Weekday } from '../utils'
 
 	interface SingleDatePickerProps {
 		colorScheme: {
@@ -9,7 +9,8 @@
 			borderColor: string
 			hoverColor: string
 			reversedColor: string
-		}
+		},
+		localization: string
 	}
 
 	const props = defineProps({
@@ -23,6 +24,10 @@
 				reversedColor: '#ffffff',
 			}),
 			required: false,
+		},
+		localization: {
+			type: String,
+			required: false,
 		}
 	})
 
@@ -30,8 +35,9 @@
 	const uniqueId = generateUniqueId()
 	const currentMonth = ref(new Date().getMonth())
 	const currentYear = ref(new Date().getFullYear())
+	const l10nDays = ref<string[]>([])
 
-	const { colorScheme } = toRefs(props)
+	const { colorScheme, localization } = toRefs(props)
 
 	watch(colorScheme, newVal => {
 		applyColor(uniqueId, newVal)
@@ -39,6 +45,7 @@
 
 	onMounted(() => {
 		applyColor(uniqueId, colorScheme.value)
+		l10nDays.value = getL10Weekday(localization?.value || navigator.languages[0])
 	})
 
 	function goToLastMonth() {
@@ -64,12 +71,18 @@
 <template>
 	<div :id="`__datenel-${uniqueId}`">
 		<div class='datenel-component' role="dialog" aria-label="Date selection panel" v-if="!selectMonth">
-			<div className='__datenel_header'>
+			<div class='__datenel_header'>
-				<button className='__datenel_stepper' @click="goToLastMonth()" :aria-label="`Go to last month, ${new Date(currentYear, currentMonth - 1).toLocaleString('default', { month: 'long', year: 'numeric' })}`"><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>
+				<button class='__datenel_stepper' @click="goToLastMonth()" :aria-label="`Go to last month, ${new Date(currentYear, currentMonth - 1).toLocaleString('default', { month: 'long', year: 'numeric' })}`"><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>
-				<button className='__datenel_indicator' @click="selectMonth = true" :aria-label="`You are now at ${new Date(currentYear, currentMonth).toLocaleString('default', { month: 'long', year: 'numeric' })}. Click here to quick-select month or year.`">
+				<button class='__datenel_indicator' @click="selectMonth = true" :aria-label="`You are now at ${new Date(currentYear, currentMonth).toLocaleString('default', { month: 'long', year: 'numeric' })}. Click here to quick-select month or year.`">
 					{{  new Date(currentYear, currentMonth).toLocaleString('default', { month: 'long', year: 'numeric' }) }}
 				</button>
-				<button className='__datenel_stepper' @click="goToNextMonth()" :aria-label="`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString('default', { month: 'long', year: 'numeric' })}`"><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>
+				<button class='__datenel_stepper' @click="goToNextMonth()" :aria-label="`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString('default', { month: 'long', year: 'numeric' })}`"><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_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>
+				</div>
 			</div>
 		</div>
 	</div>

tsconfig.app.json

@@ -12,7 +12,7 @@
     "sourceMap": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
-    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+    "lib": ["esnext", "DOM", "dom.iterable", "scripthost"],
     "skipLibCheck": true
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "playground/**/*.ts", "playground/**/*.d.ts", "playground/**/*.tsx", "playground/**/*.vue"]

tsconfig.node.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "target": "ES2022",
-    "lib": ["ES2023"],
+    "lib": ["ES2023", "DOM"],
     "module": "ESNext",
     "skipLibCheck": true,