src/components/SingleDatePicker.vue

@@ -8,23 +8,23 @@
 export default {
 	name: 'SingleDatePicker',
 }
-</script>
 
-<script setup lang="ts">
+export interface SingleDatePickerPropsColorScheme {
-	import { ref, defineProps, watch, onMounted, toRefs, getCurrentInstance, PropType } from 'vue'
-	import { generateUniqueId, applyColor, getL10Weekday, getCalendarDates } from '../utils'
-
-	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 emit = defineEmits(['update:modelValue', 'close'])
-	const selectMonth = ref(false)
+const selectMonth = ref(false)
-	const uniqueId = generateUniqueId()
+const uniqueId = generateUniqueId()
-	const currentMonth = ref(new Date().getMonth())
+const currentMonth = ref(new Date().getMonth())
-	const currentYear = ref(new Date().getFullYear())
+const currentYear = ref(new Date().getFullYear())
-	const l10nDays = ref<string[]>([])
+const l10nDays = ref<string[]>([])
-	const dates = ref<Date[]>([])
+const dates = ref<Date[]>([])
-	const hasCloseListener = getCurrentInstance()?.vnode?.props?.onClose !== undefined
+const hasCloseListener = getCurrentInstance()?.vnode?.props?.onClose !== undefined
-	const availableRangeStart = ref<Date | null>(null)
+const availableRangeStart = ref<Date | null>(null)
-	const availableRangeEnd = 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>
 

src/components/SingleWeekPicker.vue

@@ -8,23 +8,23 @@
 export default {
 	name: 'SingleDatePicker',
 }
-</script>
 
-<script setup lang="ts">
+export interface SingleWeekPickerPropsColorScheme {
-import { ref, defineProps, toRefs, onMounted, getCurrentInstance, watch } from 'vue'
-import { generateUniqueId, applyColor, getL10Weekday, getCalendarDates, calculateWeekNum } from '../utils'
-
-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()