Astrian/datenel-vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add localization support to SingleDatePicker and update TypeScript configuration

Browse Source
This commit is contained in:
Astrian Zheng 2025-02-24 12:08:12 +11:00
parent 4f2ca30b3b
commit d8cfd5926f
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
3 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/SingleDatePicker.vue
View File

@ -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'>
<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 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.`">
<div class='__datenel_header'>
<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 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>

2
tsconfig.app.json
View File

@ -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"]

2
tsconfig.node.json
View File

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