@stonecrop/aform 0.2.11 → 0.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/aform",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -33,8 +33,8 @@
   "dependencies": {
     "uuid": "^9.0.0",
     "vue": "^3.4.23",
-    "@stonecrop/themes": "0.2.11",
-    "@stonecrop/utilities": "0.2.11"
+    "@stonecrop/themes": "0.2.13",
+    "@stonecrop/utilities": "0.2.13"
   },
   "devDependencies": {
     "@histoire/plugin-vue": "^0.17.17",
@@ -55,10 +55,10 @@
     "vite": "^5.2.9",
     "vitest": "^1.5.0",
     "vue-router": "^4",
-    "@stonecrop/atable": "0.2.11"
+    "@stonecrop/atable": "0.2.13"
   },
   "peerDependencies": {
-    "@stonecrop/atable": "0.2.11"
+    "@stonecrop/atable": "0.2.13"
   },
   "publishConfig": {
     "access": "public"

package/src/components/form/ADate.vue

@@ -1,277 +1,94 @@
 <template>
-	<div
-		v-if="!readonly"
-		:event="event"
-		:colIndex="colIndex"
-		:rowIndex="rowIndex"
-		:tableid="tableid"
-		class="adate"
-		tabindex="0"
-		ref="adatepicker">
-		<table>
-			<tr>
-				<td @click="previousMonth" :tabindex="-1">&lt;</td>
-				<th colspan="5">{{ monthAndYear }}</th>
-				<td @click="nextMonth" :tabindex="-1">&gt;</td>
-			</tr>
-			<tr v-for="rowNo in numberOfRows" :key="rowNo">
-				<!-- TODO: (style) remove inline styling and replace with theme package -->
-				<td
-					v-for="colNo in numberOfColumns"
-					:key="(rowNo - 1) * numberOfColumns + colNo"
-					:contenteditable="false"
-					:spellcheck="false"
-					:tabindex="0"
-					:style="{
-						border: isSelectedDate(currentDates[(rowNo - 1) * numberOfColumns + colNo])
-							? '2px solid var(--focus-cell-outline)'
-							: 'none',
-						borderBottomColor: isTodaysDate(currentDates[(rowNo - 1) * numberOfColumns + colNo])
-							? 'var(--focus-cell-outline)'
-							: 'none',
-					}"
-					@click.prevent.stop="selectDate($event, (rowNo - 1) * numberOfColumns + colNo)"
-					:class="{
-						todaysdate: isTodaysDate(currentDates[(rowNo - 1) * numberOfColumns + colNo]),
-						selecteddate: isSelectedDate(currentDates[(rowNo - 1) * numberOfColumns + colNo]),
-					}">
-					{{ new Date(currentDates[(rowNo - 1) * numberOfColumns + colNo]).getDate() }}
-				</td>
-			</tr>
-		</table>
+	<div>
+		<input
+			ref="dateRef"
+			type="date"
+			:id="uuid"
+			:disabled="readonly"
+			:required="required"
+			:value="inputDate"
+			@click="showPicker" />
+		<label :for="uuid">{{ label }}</label>
+		<p v-show="validation.errorMessage" v-html="validation.errorMessage"></p>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
-
-import { TableDataStore } from '@stonecrop/atable'
-import { defaultKeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
-
-const props = defineProps<{
-	colIndex?: number
-	rowIndex?: number
-	tableid?: string
-	event?: Event
-	indent?: number
-	readonly?: boolean
-}>()
-
-const tableData = inject<TableDataStore>(props.tableid)
-
-const numberOfRows = 6
-const numberOfColumns = 7
-const todaysDate = new Date()
-
-const selectedDate = ref<Date>()
-const currentMonth = ref<number>()
-const currentYear = ref<number>()
-const currentDates = ref<number[]>([])
-// const width = ref('')
-
-onMounted(async () => {
-	let cellDate = tableData.cellData<string | number | Date>(props.colIndex, props.rowIndex)
-	if (cellDate) {
-		if (!(cellDate instanceof Date)) {
-			cellDate = new Date(cellDate)
-		}
-
-		selectedDate.value = cellDate
-		currentMonth.value = selectedDate.value.getMonth()
-		currentYear.value = selectedDate.value.getFullYear()
-	} else {
-		currentMonth.value = todaysDate.getMonth()
-		currentYear.value = todaysDate.getFullYear()
-	}
-
-	renderMonth()
-	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()
-		}
-	}
-})
-
-watch([currentMonth, currentYear], () => {
-	renderMonth()
-})
-
-const renderMonth = () => {
-	currentDates.value = []
-	const firstOfMonth = new Date(currentYear.value, currentMonth.value, 1)
-	const monthStartWeekday = firstOfMonth.getDay()
-	const calendarStartDay = firstOfMonth.setDate(firstOfMonth.getDate() - monthStartWeekday)
-	for (let dayIndex of Array(43).keys()) {
-		currentDates.value.push(calendarStartDay + dayIndex * 86400000)
-	}
-}
-
-const previousYear = () => {
-	currentYear.value -= 1
-}
-
-const nextYear = () => {
-	currentYear.value += 1
-}
-
-const previousMonth = () => {
-	if (currentMonth.value == 0) {
-		currentMonth.value = 11
-		previousYear()
-	} else {
-		currentMonth.value -= 1
+import { ref } from 'vue'
+
+withDefaults(
+	defineProps<{
+		label: string
+		required?: boolean
+		readonly?: boolean
+		uuid?: string
+		validation?: Record<string, any>
+	}>(),
+	{
+		validation: () => ({ errorMessage: '&nbsp;' }),
 	}
-}
+)
 
-const nextMonth = () => {
-	if (currentMonth.value == 11) {
-		currentMonth.value = 0
-		nextYear()
-	} else {
-		currentMonth.value += 1
-	}
-}
+const inputDate = defineModel<string | number | Date>()
+const dateRef = ref<HTMLInputElement | null>(null)
 
-const isTodaysDate = (day: string | number | Date) => {
-	if (currentMonth.value !== todaysDate.getMonth()) {
-		return
+const showPicker = () => {
+	if (dateRef.value) {
+		dateRef.value.showPicker()
 	}
-	return todaysDate.toDateString() === new Date(day).toDateString()
 }
-
-const isSelectedDate = (day: string | number | Date) => {
-	return new Date(day).toDateString() === new Date(selectedDate.value).toDateString()
-}
-
-const selectDate = (event: Event, currentIndex: number) => {
-	selectedDate.value = new Date(currentDates.value[currentIndex])
-	updateData()
-	// TODO: (typing) figure out a way to close datepicker
-	// context.refs.adatepicker.destroy()
-}
-
-const updateData = () => {
-	// TODO: check proper date format to feed back (assuming number for now)
-	tableData.setCellData(props.rowIndex, props.colIndex, selectedDate.value.getTime())
-}
-
-// const dayWidth = computed(() => {
-// 	const widthValue = Number(width.value.replace('px', ''))
-// 	return `${widthValue / (numberOfColumns - 1)}px`
-// })
-
-const monthAndYear = computed(() => {
-	return new Date(currentYear.value, currentMonth.value, 1).toLocaleDateString(undefined, {
-		year: 'numeric',
-		month: 'long',
-	})
-})
-
-// setup keyboard navigation
-useKeyboardNav([
-	{
-		parent: 'table.adate',
-		selectors: 'td',
-		handlers: {
-			...defaultKeypressHandlers,
-			...{
-				'keydown.pageup': previousMonth,
-				'keydown.shift.pageup': previousYear,
-				'keydown.pagedown': nextMonth,
-				'keydown.shift.pagedown': nextYear,
-			},
-		},
-	},
-])
 </script>
 
 <style scoped>
-@import '@/theme/aform.css';
-
-.adate {
-	border: 2px solid var(--focus-cell-outline);
+div {
+	min-width: 40ch;
+	border: 1px solid transparent;
+	padding: 0rem;
+	margin: 0rem;
+	margin-right: 1ch;
+}
+
+input {
+	width: calc(100% - 1ch);
+	outline: 1px solid transparent;
+	border: 1px solid var(--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;
+}
+
+p,
+label {
+	color: var(--input-label-color);
+	display: block;
+	min-height: 1.15rem;
+	padding: 0rem;
+	margin: 0rem;
+	border: 1px solid transparent;
+	margin-bottom: 0.25rem;
+}
+
+p {
+	width: 100%;
+	color: red;
+	font-size: 85%;
+}
+
+label {
+	z-index: 2;
+	font-size: 80%;
 	position: absolute;
-	z-index: 100;
-	font-size: var(--table-font-size);
-	display: inline-table;
-	background-color: var(--row-color-zebra-light);
-	color: var(--cell-text-color);
-	outline: none;
-	width: calc(100% - 4px);
-}
-
-.adate tr {
-	height: 1.15rem;
-	text-align: center;
-	vertical-align: middle;
-}
-
-.adate td {
-	border: 2px solid transparent;
-	min-width: 2.25ch; /* this doesn't zoom correctly */
-}
-
-.adate td:hover {
-	border: 2px solid var(--focus-cell-outline);
-}
-
-.adate td {
-	border: 1px;
-	border-style: solid;
-	border-color: var(--cell-border-color);
-	border-radius: 0px;
-	box-sizing: border-box;
-	margin: 0px;
-	outline: none;
-	box-shadow: none;
-	color: var(--cell-text-color);
-	text-overflow: ellipsis;
-	overflow: hidden;
-	padding-left: 0.5ch;
-	padding-right: 0.5ch;
-}
-
-.adate td:focus,
-.adate td:focus-within {
-	background-color: var(--focus-cell-background);
-	outline-width: 2px;
-	outline-style: solid;
-	outline-color: var(--focus-cell-outline);
-	box-shadow: none;
-	overflow: hidden;
-	min-height: 1.15em;
-	max-height: 1.15em;
-	overflow: hidden;
-}
-
-button {
-	background-color: var(--row-color-zebra-light);
-	border: none;
-	padding: 0px;
-	margin: 0px;
-	color: var(--cell-text-color);
-	outline: none;
-	font-size: var(--table-font-size);
-}
-
-.dateheader {
-	font-weight: 700;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
+	background: white;
+	margin: calc(-1.5rem - calc(2.15rem / 2)) 0 0 1ch;
+	padding: 0 0.25ch 0 0.25ch;
 }
 
-.adate .todaysdate {
-	border-bottom-color: var(--focus-cell-outline);
+input:focus {
+	border: 1px solid var(--input-active-border-color);
 }
 
-.adate .selecteddate {
-	border: 2px solid var(--focus-cell-outline);
+input:focus + label {
+	color: var(--input-active-label-color);
 }
 </style>

package/src/components/form/ADatePicker.vue

@@ -0,0 +1,160 @@
+<template>
+	<div class="adatepicker" tabindex="0" ref="adatepicker">
+		<table>
+			<tr>
+				<td @click="previousMonth" :tabindex="-1">&lt;</td>
+				<th colspan="5" :tabindex="-1">{{ monthAndYear }}</th>
+				<td @click="nextMonth" :tabindex="-1">&gt;</td>
+			</tr>
+			<tr class="days-header">
+				<td>M</td>
+				<td>T</td>
+				<td>W</td>
+				<td>T</td>
+				<td>F</td>
+				<td>S</td>
+				<td>S</td>
+			</tr>
+			<tr v-for="rowNo in numberOfRows" :key="rowNo">
+				<td
+					v-for="colNo in numberOfColumns"
+					:key="getCurrentCell(rowNo, colNo)"
+					:contenteditable="false"
+					:spellcheck="false"
+					:tabindex="0"
+					@click.prevent.stop="selectDate(getCurrentCell(rowNo, colNo))"
+					@keydown.enter="selectDate(getCurrentCell(rowNo, colNo))"
+					:class="{
+						todaysDate: isTodaysDate(getCurrentDate(rowNo, colNo)),
+						selectedDate: isSelectedDate(getCurrentDate(rowNo, colNo)),
+					}">
+					{{ new Date(getCurrentDate(rowNo, colNo)).getDate() }}
+				</td>
+			</tr>
+		</table>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { defaultKeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+
+const numberOfRows = 6
+const numberOfColumns = 7
+
+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 adatepicker = ref<HTMLElement | null>(null)
+
+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()
+		}
+	}
+})
+
+const populateMonth = () => {
+	currentDates.value = []
+	const firstOfMonth = new Date(currentYear.value, currentMonth.value, 1)
+	const monthStartWeekday = firstOfMonth.getDay()
+	const calendarStartDay = firstOfMonth.setDate(firstOfMonth.getDate() - monthStartWeekday)
+
+	// assume midnight for all dates while building the calendar
+	for (const dayIndex of Array(43).keys()) {
+		currentDates.value.push(calendarStartDay + dayIndex * 86400000)
+	}
+}
+
+watch([currentMonth, currentYear], populateMonth)
+const previousYear = () => (currentYear.value -= 1)
+const nextYear = () => (currentYear.value += 1)
+
+const previousMonth = () => {
+	if (currentMonth.value == 0) {
+		currentMonth.value = 11
+		previousYear()
+	} else {
+		currentMonth.value -= 1
+	}
+}
+
+const nextMonth = () => {
+	if (currentMonth.value == 11) {
+		currentMonth.value = 0
+		nextYear()
+	} else {
+		currentMonth.value += 1
+	}
+}
+
+const isTodaysDate = (day: string | number | Date) => {
+	const todaysDate = new Date()
+	if (currentMonth.value !== todaysDate.getMonth()) {
+		return
+	}
+	return todaysDate.toDateString() === new Date(day).toDateString()
+}
+
+const isSelectedDate = (day: string | number | Date) => {
+	return new Date(day).toDateString() === new Date(selectedDate.value).toDateString()
+}
+
+const getCurrentCell = (rowNo: number, colNo: number) => {
+	return (rowNo - 1) * numberOfColumns + colNo
+}
+
+const getCurrentDate = (rowNo: number, colNo: number) => {
+	return currentDates.value[getCurrentCell(rowNo, colNo)]
+}
+
+const selectDate = (currentIndex: number) => {
+	date.value = selectedDate.value = new Date(currentDates.value[currentIndex])
+}
+
+const monthAndYear = computed(() => {
+	return new Date(currentYear.value, currentMonth.value, 1).toLocaleDateString(undefined, {
+		year: 'numeric',
+		month: 'long',
+	})
+})
+
+// setup keyboard navigation
+useKeyboardNav([
+	{
+		parent: adatepicker,
+		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
+			},
+		},
+	},
+])
+</script>
+
+<style>
+@import url('@stonecrop/themes/default/default.css');
+@import url('@/theme/adate.css');
+@import url('@/theme/aform.css');
+</style>

package/src/histoire.setup.ts

@@ -1,6 +1,8 @@
 import { defineSetupVue3 } from '@histoire/plugin-vue'
 
 import ACheckbox from '@/components/form/ACheckbox.vue'
+import ADate from '@/components/form/ADate.vue'
+import ADatePicker from '@/components/form/ADatePicker.vue'
 import AFieldset from '@/components/form/AFieldset.vue'
 import AForm from '@/components/AForm.vue'
 import ANumericInput from '@/components/form/ANumericInput.vue'
@@ -12,6 +14,8 @@ import '@stonecrop/atable/styles'
 export const setupVue3 = defineSetupVue3(({ app }) => {
 	// TODO: (typing) add typing for ATable components
 	app.component('ACheckbox', ACheckbox)
+	app.component('ADate', ADate)
+	app.component('ADatePicker', ADatePicker)
 	app.component('AFieldset', AFieldset)
 	app.component('AForm', AForm)
 	app.component('ANumericInput', ANumericInput)

package/src/index.ts

@@ -4,6 +4,7 @@ import ACheckbox from '@/components/form/ACheckbox.vue'
 import AComboBox from '@/components/form/AComboBox.vue'
 import ADate from '@/components/form/ADate.vue'
 import ADropdown from '@/components/form/ADropdown.vue'
+import ADatePicker from '@/components/form/ADatePicker.vue'
 import AFieldset from '@/components/form/AFieldset.vue'
 import AForm from '@/components/AForm.vue'
 import ANumericInput from '@/components/form/ANumericInput.vue'
@@ -16,6 +17,7 @@ function install(app: App /* options */) {
 	app.component('ACombobox', AComboBox)
 	app.component('ADate', ADate)
 	app.component('ADropdown', ADropdown)
+	app.component('ADatePicker', ADatePicker)
 	app.component('AFieldset', AFieldset)
 	app.component('AForm', AForm)
 	app.component('ANumericInput', ANumericInput)
@@ -24,4 +26,4 @@ function install(app: App /* options */) {
 	// app.component('AQuantity', AQuantity)
 }
 
-export { ACheckbox, AComboBox, ADate, ADropdown, AFieldset, AForm, ANumericInput, ATextInput, install }
+export { ACheckbox, AComboBox, ADate, ADropdown, ADatePicker, AFieldset, AForm, ANumericInput, ATextInput, install }

package/src/theme/adate.css

@@ -0,0 +1,49 @@
+.adatepicker {
+	font-size: var(--table-font-size);
+	display: inline-table;
+	color: var(--cell-text-color);
+	outline: none;
+	border-collapse: collapse;
+	/* width: calc(100% - 4px); */
+}
+
+.adatepicker tr {
+	height: 1.15rem;
+	height: 1.15rem;
+	text-align: center;
+	vertical-align: middle;
+}
+
+.adatepicker td {
+	border: 2px solid transparent;
+	outline: 2px solid transparent;
+	min-width: 3ch;
+	max-width: 3ch;
+}
+
+.adatepicker td:focus,
+.adatepicker td:focus-within {
+	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;
+	background: var(--gray-20);
+	font-weight: bolder;
+}
+
+.adatepicker .todaysDate {
+	font-weight: bolder;
+	text-decoration: underline;
+	color: black;
+}
+.days-header > td {
+	font-weight: bold;
+}
+.prev-date {
+	color: var(--gray-20);
+}