@stonecrop/aform 0.13.3 → 0.13.4

package/src/components/form/ADatePicker.vue

@@ -11,6 +11,30 @@
 					<th colspan="5" :tabindex="-1">{{ monthAndYear }}</th>
 					<td id="next-month-btn" :tabindex="-1" @click="nextMonth">&gt;</td>
 				</tr>
+				<tr v-if="selectRange">
+					<td colspan="7">
+						<div class="date-input">
+							<input
+								ref="start-date-input"
+								:value="getStartDate"
+								class="date-input-start aform_input-field"
+								type="text"
+								placeholder="start date"
+								@blur="enterInputDate()"
+								@keydown="enterDate" />
+							<div>-</div>
+							<input
+								ref="end-date-input"
+								:value="getEndDate"
+								class="date-input-end aform_input-field"
+								type="text"
+								placeholder="end date"
+								@blur="enterInputDate()"
+								@keydown="enterDate" />
+						</div>
+						<!-- {{ formattedDateRange }} -->
+					</td>
+				</tr>
 				<tr class="days-header">
 					<td>M</td>
 					<td>T</td>
@@ -26,15 +50,20 @@
 						v-for="colNo in numberOfColumns"
 						ref="celldate"
 						:key="getCurrentCell(rowNo, colNo)"
+						class="date-cell"
 						:contenteditable="false"
 						:spellcheck="false"
 						:tabindex="0"
 						:class="{
 							todaysDate: isTodaysDate(getCurrentDate(rowNo, colNo)),
 							selectedDate: isSelectedDate(getCurrentDate(rowNo, colNo)),
+							withinRange: selectRange ? isInDateRange(getCurrentDate(rowNo, colNo)) : false,
+							startDate: selectRange ? isStartDate(getCurrentDate(rowNo, colNo)) : false,
+							endDate: selectRange ? isEndDate(getCurrentDate(rowNo, colNo)) : false,
 						}"
 						@click.prevent.stop="selectDate(getCurrentCell(rowNo, colNo))"
-						@keydown.enter="selectDate(getCurrentCell(rowNo, colNo))">
+						@keydown.enter="selectDate(getCurrentCell(rowNo, colNo))"
+						@mouseover="hoverDate(getCurrentCell(rowNo, colNo))">
 						{{ new Date(getCurrentDate(rowNo, colNo)).getDate() }}
 					</td>
 				</tr>
@@ -44,7 +73,8 @@
 </template>
 
 <script setup lang="ts">
-import { defaultKeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
+/* removed keyboard nav temportarily since it interfered with user experience navigating input fields */
+// import { defaultKeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
 import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from 'vue'
 
 import type { ComponentProps } from '../../types'
@@ -52,32 +82,105 @@ import type { ComponentProps } from '../../types'
 const numberOfRows = 6
 const numberOfColumns = 7
 
-const { mode, label } = defineProps<ComponentProps>()
+const { mode, label, selectRange = false } = defineProps<ComponentProps>()
 
 const date = defineModel<number | Date>({ default: new Date() })
 const selectedDate = ref(new Date(date.value))
 const currentMonth = ref<number>(selectedDate.value.getMonth())
 const currentYear = ref<number>(selectedDate.value.getFullYear())
 const currentDates = ref<number[]>([])
-const datepickerRef = useTemplateRef<HTMLDivElement>('datepicker')
 
-onMounted(async () => {
-	populateMonth()
+/* needed for keyboard navigation. uncomment if implementing */
+// const datepickerRef = useTemplateRef<HTMLDivElement>('datepicker')
 
-	// required to allow the elements to be focused in the next step
-	await nextTick()
+const hoveredDate = ref(new Date(date.value))
+const start_date = ref<Date | null>(null)
+const end_date = ref<Date | null>(null)
+const startDateInput = useTemplateRef<HTMLInputElement>('start-date-input')
+const endDateInput = useTemplateRef<HTMLInputElement>('end-date-input')
 
-	const $selectedDate = document.getElementsByClassName('selectedDate')
-	if ($selectedDate.length > 0) {
-		;($selectedDate[0] as HTMLElement).focus()
-	} else {
-		const $todaysDate = document.getElementsByClassName('todaysDate')
-		if ($todaysDate.length > 0) {
-			;($todaysDate[0] as HTMLElement).focus()
-		}
-	}
+/*******************
+Emits
+*******************/
+
+const emit = defineEmits<{
+	'get-date': [{ start: Date | null; end: Date | null; selected: Date }]
+}>()
+
+/*******************
+Computed
+*******************/
+
+const monthAndYear = computed(() => {
+	return new Date(currentYear.value, currentMonth.value, 1).toLocaleDateString(undefined, {
+		year: 'numeric',
+		month: 'long',
+	})
+})
+
+const getStartDate = computed(() => {
+	return start_date.value != null ? parseDateToString(start_date.value) : ''
 })
 
+const getEndDate = computed(() => {
+	return end_date.value != null ? parseDateToString(end_date.value) : ''
+})
+
+/*******************
+Functions
+*******************/
+
+const parseDateToString = (date: Date | null) => {
+	if (!validateDate(date)) return ''
+	return date.getMonth() + 1 + '/' + date.getDate() + '/' + date.getFullYear()
+}
+
+const isTodaysDate = (day: string | number | Date): boolean => {
+	const todaysDate = new Date()
+	if (currentMonth.value !== todaysDate.getMonth()) return false
+	return todaysDate.toDateString() === new Date(day).toDateString()
+}
+
+const isSelectedDate = (day: string | number | Date) => {
+	return new Date(day).toDateString() === new Date(selectedDate.value).toDateString()
+}
+
+const isStartDate = (day: string | number | Date) => {
+	const start = start_date.value
+	if (!validateDate(start)) return false
+	return new Date(day).toDateString() === start.toDateString()
+}
+
+const isEndDate = (day: string | number | Date) => {
+	const end = end_date.value
+	if (!validateDate(end)) return false
+	return new Date(day).toDateString() === end.toDateString()
+}
+
+const getCurrentCell = (rowNo: number, colNo: number) => {
+	return (rowNo - 1) * numberOfColumns + colNo
+}
+
+const isInDateRange = (day: string | number | Date) => {
+	const start = start_date.value
+	if (!validateDate(start)) return false
+	const this_date = new Date(day)
+
+	//the end is either the selected end date or wherever the user is hovering
+	const end = end_date.value
+	const temp_end_date = validateDate(end) ? end : new Date(hoveredDate.value)
+
+	return this_date.getTime() > start.getTime() && this_date.getTime() < temp_end_date.getTime()
+}
+
+const getCurrentDate = (rowNo: number, colNo: number) => {
+	return currentDates.value[getCurrentCell(rowNo, colNo)]
+}
+
+const hoverDate = (currentIndex: number) => {
+	hoveredDate.value = new Date(currentDates.value[currentIndex])
+}
+
 const populateMonth = () => {
 	currentDates.value = []
 	const firstOfMonth = new Date(currentYear.value, currentMonth.value, 1)
@@ -89,8 +192,6 @@ const populateMonth = () => {
 		currentDates.value.push(calendarStartDay + dayIndex * 86400000)
 	}
 }
-
-watch([currentMonth, currentYear], populateMonth)
 const previousYear = () => (currentYear.value -= 1)
 const nextYear = () => (currentYear.value += 1)
 
@@ -112,57 +213,141 @@ const nextMonth = () => {
 	}
 }
 
-const isTodaysDate = (day: string | number | Date) => {
-	const todaysDate = new Date()
-	if (currentMonth.value !== todaysDate.getMonth()) {
-		return
-	}
-	return todaysDate.toDateString() === new Date(day).toDateString()
+const enterDate = (event: KeyboardEvent) => {
+	if (event.key === 'Enter') enterInputDate()
 }
 
-const isSelectedDate = (day: string | number | Date) => {
-	return new Date(day).toDateString() === new Date(selectedDate.value).toDateString()
+// useKeyboardNav([
+// 	{
+// 		parent: datepickerRef,
+// 		selectors: 'td',
+// 		handlers: {
+// 			...defaultKeypressHandlers,
+// 			...{
+// 				'keydown.pageup': previousMonth,
+// 				'keydown.shift.pageup': previousYear,
+// 				'keydown.pagedown': nextMonth,
+// 				'keydown.shift.pagedown': nextYear,
+// 				// TODO: this is a hack to override the stonecrop enter handler;
+// 				// store context inside the component so that handlers can be setup consistently
+// 				// eslint-disable-next-line @typescript-eslint/no-empty-function
+// 				'keydown.enter': () => {}, // select this date
+// 			},
+// 		},
+// 	},
+// ])
+
+const selectDate = (currentIndex: number) => {
+	date.value = selectedDate.value = new Date(currentDates.value[currentIndex])
+
+	if (selectRange) {
+		const start = start_date.value
+		if (start == null || end_date.value != null) {
+			start_date.value = date.value
+			end_date.value = null
+		} else if (validateDate(start) && selectedDate.value.getTime() < start.getTime()) {
+			end_date.value = null
+			start_date.value = date.value
+		} else {
+			end_date.value = date.value
+		}
+		if (startDateInput.value) startDateInput.value.value = parseDateToString(start_date.value) ?? ''
+		if (endDateInput.value) endDateInput.value.value = parseDateToString(end_date.value) ?? ''
+	}
+	emitData()
 }
 
-const getCurrentCell = (rowNo: number, colNo: number) => {
-	return (rowNo - 1) * numberOfColumns + colNo
+const testDateOrder = () => {
+	const start = start_date.value
+	const end = end_date.value
+	if (validateDate(end) && validateDate(start) && end.getTime() < start.getTime())
+		[start_date.value, end_date.value] = [end, start]
 }
 
-const getCurrentDate = (rowNo: number, colNo: number) => {
-	return currentDates.value[getCurrentCell(rowNo, colNo)]
+const validateDate = (date: unknown): date is Date => {
+	return date instanceof Date && !isNaN(date.getTime())
 }
 
-const selectDate = (currentIndex: number) => {
-	date.value = selectedDate.value = new Date(currentDates.value[currentIndex])
+const enterInputDate = () => {
+	if (startDateInput.value?.value == '') {
+		start_date.value = null
+	} else if (startDateInput.value) {
+		const start = new Date(startDateInput.value.value)
+		start_date.value = validateDate(start) ? start : null
+	}
+
+	if (endDateInput.value?.value == '') {
+		end_date.value = null
+	} else if (endDateInput.value) {
+		const end = new Date(endDateInput.value.value)
+		end_date.value = validateDate(end) ? end : null
+	}
+
+	if (validateDate(start_date.value)) {
+		if (validateDate(end_date.value)) testDateOrder()
+		selectedDate.value = start_date.value
+	}
+
+	emitData()
 }
 
-const monthAndYear = computed(() => {
-	return new Date(currentYear.value, currentMonth.value, 1).toLocaleDateString(undefined, {
-		year: 'numeric',
-		month: 'long',
+const emitData = () => {
+	emit('get-date', {
+		start: selectRange ? start_date.value : null,
+		end: selectRange ? end_date.value : null,
+		selected: selectedDate.value,
 	})
+}
+
+/*******************
+Hooks
+*******************/
+
+onMounted(async () => {
+	populateMonth()
+	// required to allow the elements to be focused in the next step
+	await nextTick()
+	const $selectedDate = document.getElementsByClassName('selectedDate')
+	if ($selectedDate.length > 0) {
+		;($selectedDate[0] as HTMLElement).focus()
+	} else {
+		const $todaysDate = document.getElementsByClassName('todaysDate')
+		if ($todaysDate.length > 0) {
+			;($todaysDate[0] as HTMLElement).focus()
+		}
+	}
 })
 
 // setup keyboard navigation
-useKeyboardNav([
-	{
-		parent: datepickerRef,
-		selectors: 'td',
-		handlers: {
-			...defaultKeypressHandlers,
-			...{
-				'keydown.pageup': previousMonth,
-				'keydown.shift.pageup': previousYear,
-				'keydown.pagedown': nextMonth,
-				'keydown.shift.pagedown': nextYear,
-				// TODO: this is a hack to override the stonecrop enter handler;
-				// store context inside the component so that handlers can be setup consistently
-
-				'keydown.enter': () => {}, // select this date
-			},
-		},
-	},
-])
+// useKeyboardNav([
+// 	{
+// 		parent: datepickerRef,
+// 		selectors: 'td',
+// 		handlers: {
+// 			...defaultKeypressHandlers,
+// 			...{
+// 				'keydown.pageup': previousMonth,
+// 				'keydown.shift.pageup': previousYear,
+// 				'keydown.pagedown': nextMonth,
+// 				'keydown.shift.pagedown': nextYear,
+// 				// TODO: this is a hack to override the stonecrop enter handler;
+// 				// store context inside the component so that handlers can be setup consistently
+
+// 				'keydown.enter': () => {}, // select this date
+// 			},
+// 		},
+// 	},
+// ])
+
+/*******************
+Watchers
+*******************/
+
+watch([currentMonth, currentYear], populateMonth)
+
+/*******************
+Expose
+*******************/
 
 defineExpose({ currentMonth, currentYear, selectedDate })
 </script>
@@ -175,6 +360,7 @@ defineExpose({ currentMonth, currentYear, selectedDate })
 	color: var(--sc-cell-text-color);
 	outline: none;
 	border-collapse: collapse;
+	margin-bottom: 10px;
 	/* width: calc(100% - 4px); */
 }
 
@@ -190,26 +376,45 @@ defineExpose({ currentMonth, currentYear, selectedDate })
 	outline: 2px solid transparent;
 	min-width: 3ch;
 	max-width: 3ch;
+	cursor: pointer;
+}
+.adatepicker td.date-cell:hover {
+	background: var(--sc-gray-10);
 }
 
 .adatepicker td:focus,
 .adatepicker td:focus-within {
-	outline: 1px dashed black;
+	/* outline: 1px dashed black; */
 	box-shadow: none;
 	overflow: hidden;
 	min-height: 1.15em;
 	max-height: 1.15em;
 	overflow: hidden;
 }
-.adatepicker .selectedDate {
-	outline: 1px solid black;
+.adatepicker .selectedDate,
+.adatepicker .startDate,
+.adatepicker .endDate {
+	/* outline: 1px solid black; */
 	background: var(--sc-gray-20);
 	font-weight: bolder;
 }
+.adatepicker .startDate {
+	/* border-radius: 5px 0px 0px 5px; */
+	border-left: 1px solid var(--sc-gray-50);
+	background: var(--sc-gray-20) !important;
+}
+.adatepicker .endDate {
+	border-right: 1px solid var(--sc-gray-50);
+	/* border-radius: 0px 5px 5px 0px; */
+	background: var(--sc-gray-20) !important;
+}
+.adatepicker .withinRange {
+	background: var(--sc-gray-5);
+}
 
 .adatepicker .todaysDate {
 	font-weight: bolder;
-	text-decoration: underline;
+	/* text-decoration: underline; */
 	color: black;
 }
 .days-header > td {
@@ -218,4 +423,15 @@ defineExpose({ currentMonth, currentYear, selectedDate })
 .prev-date {
 	color: var(--sc-gray-20);
 }
+
+.adatepicker .date-input {
+	display: flex;
+	width: 100%;
+	gap: 5px;
+	align-items: center;
+}
+.adatepicker .date-input > input {
+	width: 50%;
+	padding: 2px;
+}
 </style>

package/src/components/form/ADateRange.vue

@@ -0,0 +1,190 @@
+<template>
+	<div class="adaterange">
+		<template v-if="mode === 'display'">
+			<span class="aform_display-value">{{ displayValue }}</span>
+			<label>{{ label }}</label>
+		</template>
+
+		<template v-else>
+			<input
+				:id="uuid"
+				class="adate-input aform_input-field"
+				type="text"
+				:value="rangeDisplay"
+				placeholder="Select date range"
+				:disabled="mode === 'read'"
+				readonly
+				@click="openPicker" />
+			<label :for="uuid">{{ label }}</label>
+
+			<p v-show="validation.errorMessage" v-html="validation.errorMessage"></p>
+
+			<ADateSelection
+				v-if="showPicker"
+				ref="pickerRef"
+				class="picker"
+				:select-range="true"
+				:show-time="false"
+				@get-date="handlePickerDate" />
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { onClickOutside } from '@vueuse/core'
+import ADateSelection from './ADateSelection.vue'
+import type { ComponentProps } from '../../types'
+
+const { label = 'Date Range', mode, uuid, validation = { errorMessage: '&nbsp;' } } = defineProps<ComponentProps>()
+
+export interface DateRangeValue {
+	start_date: string | null
+	end_date: string | null
+}
+
+const modelValue = defineModel<DateRangeValue>({
+	default: () => ({ start_date: null, end_date: null }),
+})
+
+const startDate = ref<Date | null>(modelValue.value.start_date ? new Date(modelValue.value.start_date) : null)
+const endDate = ref<Date | null>(modelValue.value.end_date ? new Date(modelValue.value.end_date) : null)
+
+const showPicker = ref(false)
+const pickerRef = ref(null)
+onClickOutside(pickerRef, () => (showPicker.value = false))
+
+const openPicker = () => {
+	if (mode !== 'read') showPicker.value = true
+}
+
+const formatDate = (d: Date | null): string => {
+	if (!d) return ''
+	return `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`
+}
+
+const rangeDisplay = computed(() => {
+	const s = formatDate(startDate.value)
+	const e = formatDate(endDate.value)
+	if (s && e) return `${s} — ${e}`
+	if (s) return `${s} — ...`
+	return ''
+})
+
+const displayValue = computed(() => {
+	const s = modelValue.value.start_date
+	const e = modelValue.value.end_date
+	if (!s && !e) return ''
+	const fmt = (d: string) => new Date(d).toLocaleDateString()
+	if (s && e) return `${fmt(s)} — ${fmt(e)}`
+	if (s) return `From ${fmt(s)}`
+	return `Until ${fmt(e!)}`
+})
+
+const ensureOrder = () => {
+	const s = startDate.value
+	const e = endDate.value
+	if (s && e && e.getTime() < s.getTime()) {
+		;[startDate.value, endDate.value] = [e, s]
+	}
+}
+
+const toISODate = (d: Date | null): string | null => (d ? d.toISOString().split('T')[0] : null)
+
+const emitModel = () => {
+	modelValue.value = {
+		start_date: toISODate(startDate.value),
+		end_date: toISODate(endDate.value),
+	}
+}
+
+const handlePickerDate = (data: { selected: Date; start?: Date | null; end?: Date | null }) => {
+	if (data.start) startDate.value = data.start
+	if (data.end) {
+		endDate.value = data.end
+		ensureOrder()
+		showPicker.value = false
+	}
+	emitModel()
+}
+
+watch(
+	() => modelValue.value,
+	newVal => {
+		startDate.value = newVal.start_date ? new Date(newVal.start_date) : null
+		endDate.value = newVal.end_date ? new Date(newVal.end_date) : null
+	},
+	{ deep: true }
+)
+</script>
+
+<style scoped>
+.adaterange {
+	min-width: 40ch;
+	width: 100%;
+	box-sizing: border-box;
+	border: 1px solid transparent;
+	padding: 0;
+	margin: 0;
+	margin-right: 1ch;
+	position: relative;
+	overflow: visible;
+}
+
+.adate-input {
+	width: calc(100% - 1ch);
+	box-sizing: border-box;
+	outline: 1px solid transparent;
+	border: 1px solid var(--sc-input-border-color);
+	padding: 1ch 0.5ch 0.5ch 1ch;
+	margin: calc(1.15rem / 2) 0 0 0;
+	min-height: 1.15rem;
+	border-radius: 0.25rem;
+	cursor: pointer;
+	background: white;
+	font-size: 1rem;
+}
+
+.adate-input:focus {
+	border: 1px solid var(--sc-input-active-border-color);
+}
+
+.adate-input:focus + label {
+	color: var(--sc-input-active-label-color);
+}
+
+p,
+label {
+	color: var(--sc-input-label-color);
+	display: block;
+	min-height: 1.15rem;
+	padding: 0;
+	margin: 0;
+	border: 1px solid transparent;
+	margin-bottom: 0.25rem;
+	box-sizing: border-box;
+}
+
+p {
+	width: 100%;
+	color: red;
+	font-size: 85%;
+}
+
+label {
+	z-index: 0;
+	font-size: 80%;
+	position: absolute;
+	background: white;
+	margin: calc(-1.5rem - calc(2.15rem / 2)) 0 0 1ch;
+	padding: 0 0.25ch 0 0.25ch;
+	box-sizing: border-box;
+}
+
+.picker {
+	position: absolute;
+	top: 50px;
+	left: 0;
+	z-index: 1000;
+}
+</style>