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

dev #2

Merged
Astrian merged 12 commits from dev into main 2025-02-25 22:26:27 +00:00
Conversation 0 Commits 12 Files Changed 11 +232 -232
2 changed files with 232 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8a76679159 - Show all commits

94
src/components/SingleDatePicker.vue
View File

@ -8,23 +8,23 @@
export default {
name: 'SingleDatePicker',
}
</script>
<script setup lang="ts">
import { ref, defineProps, watch, onMounted, toRefs, getCurrentInstance, PropType } from 'vue'
import { generateUniqueId, applyColor, getL10Weekday, getCalendarDates } from '../utils'
interface SingleDatePickerPropsColorScheme {
export interface SingleDatePickerPropsColorScheme {
mainColor: string
accentColor: string
borderColor: string
hoverColor: string
reversedColor: string
}
}
type SingleDatePickerPropsAvailableDates = [Date | null, Date | null]
export type SingleDatePickerPropsAvailableDates = [Date | null, Date | null]
</script>
const props = defineProps({
<script setup lang="ts">
import { ref, defineProps, watch, onMounted, toRefs, getCurrentInstance, PropType } from 'vue'
import { generateUniqueId, applyColor, getL10Weekday, getCalendarDates } from '../utils'
const props = defineProps({
/**
* The color scheme of the component
*
@ -118,34 +118,34 @@ export default {
type: Function,
required: false,
}
})
})
const emit = defineEmits(['update:modelValue', 'close'])
const selectMonth = ref(false)
const uniqueId = generateUniqueId()
const currentMonth = ref(new Date().getMonth())
const currentYear = ref(new Date().getFullYear())
const l10nDays = ref<string[]>([])
const dates = ref<Date[]>([])
const hasCloseListener = getCurrentInstance()?.vnode?.props?.onClose !== undefined
const availableRangeStart = ref<Date | null>(null)
const availableRangeEnd = ref<Date | null>(null)
const emit = defineEmits(['update:modelValue', 'close'])
const selectMonth = ref(false)
const uniqueId = generateUniqueId()
const currentMonth = ref(new Date().getMonth())
const currentYear = ref(new Date().getFullYear())
const l10nDays = ref<string[]>([])
const dates = ref<Date[]>([])
const hasCloseListener = getCurrentInstance()?.vnode?.props?.onClose !== undefined
const availableRangeStart = ref<Date | null>(null)
const availableRangeEnd = ref<Date | null>(null)
const { colorScheme, localization, availableRange } = toRefs(props)
const { colorScheme, localization, availableRange } = toRefs(props)
watch(colorScheme, newVal => {
watch(colorScheme, newVal => {
applyColor(uniqueId, newVal)
})
})
watch([currentMonth, currentYear], () => {
watch([currentMonth, currentYear], () => {
dates.value = getCalendarDates(currentMonth.value, currentYear.value)
})
})
watch([availableRange], () => {
watch([availableRange], () => {
calculateAvailableRange()
})
})
onMounted(() => {
onMounted(() => {
applyColor(uniqueId, colorScheme.value)
l10nDays.value = getL10Weekday(localization?.value || navigator.languages[0])
@ -159,45 +159,45 @@ export default {
dates.value = getCalendarDates(currentMonth.value, currentYear.value)
calculateAvailableRange()
})
})
function goToLastMonth() {
function goToLastMonth() {
if (currentMonth.value === 0) {
currentMonth.value = 11
currentYear.value -= 1
} else {
currentMonth.value -= 1
}
}
}
function goToNextMonth() {
function goToNextMonth() {
if (currentMonth.value === 11) {
currentMonth.value = 0
currentYear.value += 1
} else {
currentMonth.value += 1
}
}
}
function notAvailable(date: Date): boolean {
function notAvailable(date: Date): boolean {
return currentMonth.value !== date.getMonth() || (availableRangeStart.value !== null && date < availableRangeStart.value) || (availableRangeEnd.value !== null && date > availableRangeEnd.value)
}
}
function selectDate(date: Date) {
function selectDate(date: Date) {
emit('update:modelValue', date)
}
}
function changeYear(event: Event) {
function changeYear(event: Event) {
const target = event.target as HTMLInputElement
const year = parseInt(target.value)
if (year) currentYear.value = year
}
}
function adjustYear() {
function adjustYear() {
if (currentYear.value < 100) currentYear.value = parseInt(`20${currentYear.value}`)
}
}
function monthNotAvailable(month: number): boolean {
function monthNotAvailable(month: number): boolean {
// When the last day of a month not inside the range of available dates
const lastDayOfMonth = new Date(currentYear.value, month + 1, 0)
if (availableRangeStart.value && lastDayOfMonth < availableRangeStart.value) return true
@ -205,13 +205,13 @@ export default {
const firstDayOfMonth = new Date(currentYear.value, month, 1)
if (availableRangeEnd.value && firstDayOfMonth > availableRangeEnd.value) return true
return false
}
}
function closePanel() {
function closePanel() {
emit('close')
}
}
function calculateAvailableRange() {
function calculateAvailableRange() {
if (!props.availableRange) {
availableRangeStart.value = null
availableRangeEnd.value = null
@ -245,7 +245,7 @@ export default {
availableRangeStart.value = null
availableRangeEnd.value = null
}
}
}
</script>

14
src/components/SingleWeekPicker.vue
View File

@ -8,23 +8,23 @@
export default {
name: 'SingleDatePicker',
}
</script>
<script setup lang="ts">
import { ref, defineProps, toRefs, onMounted, getCurrentInstance, watch } from 'vue'
import { generateUniqueId, applyColor, getL10Weekday, getCalendarDates, calculateWeekNum } from '../utils'
interface SingleWeekPickerPropsColorScheme {
export interface SingleWeekPickerPropsColorScheme {
mainColor: string
accentColor: string
borderColor: string
hoverColor: string
reversedColor: string
}
interface SingleWeekPickerModelValue {
export interface SingleWeekPickerModelValue {
weekYear: number
weekNum: number
}
</script>
<script setup lang="ts">
import { ref, defineProps, toRefs, onMounted, getCurrentInstance, watch } from 'vue'
import { generateUniqueId, applyColor, getL10Weekday, getCalendarDates, calculateWeekNum } from '../utils'
const selectMonth = ref(false)
const uniqueId = generateUniqueId()