fix: adatepicker emits

aform/package.json

@@ -37,7 +37,7 @@
 	},
 	"devDependencies": {
 		"@agritheory/atable": "workspace:*",
-		"@histoire/plugin-vue": "^0.16.1",
+		"@histoire/plugin-vue": "0.17.1",
 		"@types/uuid": "^9.0.0",
 		"@typescript-eslint/eslint-plugin": "^5.59.5",
 		"@typescript-eslint/parser": "^5.59.5",
@@ -49,7 +49,7 @@
 		"eslint": "^8.40.0",
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-vue": "^9.11.1",
-		"histoire": "^0.16.1",
+		"histoire": "0.17.0",
 		"jsdom": "^22.0.0",
 		"typescript": "^5.0.4",
 		"vite": "^4.3.5",

aform/src/components/form/ADatePicker.vue

@@ -16,14 +16,13 @@
 				<td>S</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"
-					@click.prevent.stop="selectDate($event, (rowNo - 1) * numberOfColumns + colNo)"
+					@click.prevent.stop="selectDate((rowNo - 1) * numberOfColumns + colNo)"
 					:class="{
 						todaysDate: isTodaysDate(currentDates[(rowNo - 1) * numberOfColumns + colNo]),
 						selectedDate: isSelectedDate(currentDates[(rowNo - 1) * numberOfColumns + colNo]),
@@ -41,17 +40,17 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { defaultKeypressHandlers, useKeyboardNav } from '@agritheory/utilities'
 
 const props = defineProps<{
-	modelValue?: Number
+	modelValue?: number | Date
 	event?: Event
 }>()
 
-const emit = defineEmits(['update:value'])
+const emit = defineEmits(['update:modelValue'])
 
 const numberOfRows = 6
 const numberOfColumns = 7
 const todaysDate = new Date()
 
-const selectedDate = ref<Date>(props.modelValue || undefined)
+const selectedDate = ref(props.modelValue ? new Date(props.modelValue) : undefined)
 const currentMonth = ref<number>()
 const currentYear = ref<number>()
 const currentDates = ref<number[]>([])
@@ -70,11 +69,11 @@ onMounted(async () => {
 	renderMonth()
 	await nextTick()
 
-	const $selectedDate = document.getElementsByClassName('selecteddate')
+	const $selectedDate = document.getElementsByClassName('selectedDate')
 	if ($selectedDate.length > 0) {
 		;($selectedDate[0] as HTMLElement).focus()
 	} else {
-		const $todaysDate = document.getElementsByClassName('todaysdate')
+		const $todaysDate = document.getElementsByClassName('todaysDate')
 		if ($todaysDate.length > 0) {
 			;($todaysDate[0] as HTMLElement).focus()
 		}
@@ -132,18 +131,18 @@ const isSelectedDate = (day: string | number | Date) => {
 	return new Date(day).toDateString() === new Date(selectedDate.value).toDateString()
 }
 
-const value = computed({
-	get: () => {
-		return modelValue.value
-	},
-	set: newValue => {
-		selectDate(newValue)
-	},
-})
+// const value = computed({
+// 	get: () => {
+// 		return modelValue.value
+// 	},
+// 	set: newValue => {
+// 		selectDate(newValue)
+// 	},
+// })
 
 const selectDate = (currentIndex: number) => {
 	selectedDate.value = new Date(currentDates.value[currentIndex])
-	emit('modelValue', selectedDate.value.getTime())
+	emit('update:modelValue', selectedDate.value.getTime())
 }
 
 const monthAndYear = computed(() => {
@@ -167,8 +166,6 @@ useKeyboardNav([
 				'keydown.shift.pagedown': nextYear,
 				// 'keydown.tab': selectDate // select this date
 				// 'keydown.enter': selectDate // select this date
-				'keydown.shift.tab': () => {}, // disable - not working
-				'keydown.shift.enter': () => {}, // disable - not working
 			},
 		},
 	},

aform/src/histoire.setup.ts

@@ -1,6 +1,7 @@
 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'
@@ -13,6 +14,7 @@ import '@agritheory/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)

aform/stories/date.story.vue

@@ -1,17 +1,19 @@
 <template>
-	<Story title="ADatePicker">
-		<ADatePicker v-model="unsetDate" />
-		<ADatePicker v-model="defaultDate" />
-	</Story>
-	<Story title="ADate">
-		<ADate v-model="defaultDate" />
+	<Story title="date">
+		<Variant title="ADatePicker">
+			<ADatePicker v-model="unsetDate" />
+			<ADatePicker v-model="defaultDate" />
+		</Variant>
+		<Variant title="ADate">
+			<ADate v-model="defaultDate" />
+		</Variant>
 	</Story>
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
-const unsetDate = ref()
+const unsetDate = ref(new Date())
 const defaultDate = ref(new Date().setDate(new Date().getDate() - 2))
 
 watch(unsetDate, () => {

aform/tests/adatepicker.spec.ts

@@ -22,7 +22,7 @@ describe('text input component', () => {
 		todaysDate = new Date(todaysDate.getFullYear(), todaysDate.getMonth(), todaysDate.getDate())
 
 		const updateEvents = wrapper.emitted('update:modelValue')
-		console.log('emitted', updateEvents)
-		expect(updateEvents).toEqual(todaysDate.getTime())
+		expect(updateEvents).toBeTruthy()
+		expect(updateEvents![0][0]).toEqual(todaysDate.getTime())
 	})
 })

aform/tsconfig.json

@@ -18,6 +18,7 @@
 		"src/**/*.vue",
 		"stories/**/*.json",
 		"stories/**/*.story.vue",
+		"tests/**/*.spec.ts",
 		"tests/**/*.ts",
 		"tests/**/*.vue",
 		"types/**/*.ts"

atable/package.json

@@ -37,7 +37,7 @@
 	},
 	"devDependencies": {
 		"@agritheory/aform": "workspace:*",
-		"@histoire/plugin-vue": "^0.16.1",
+		"@histoire/plugin-vue": "0.17.1",
 		"@types/uuid": "^9.0.0",
 		"@typescript-eslint/eslint-plugin": "^5.59.5",
 		"@typescript-eslint/parser": "^5.59.5",
@@ -49,7 +49,7 @@
 		"eslint": "^8.40.0",
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-vue": "^9.11.1",
-		"histoire": "^0.16.1",
+		"histoire": "0.17.0",
 		"jsdom": "^22.0.0",
 		"typescript": "^5.0.4",
 		"vite": "^4.3.5",