Merge remote-tracking branch 'upstream/development' into feat-nuxt-st…

…onecrop

aform/CHANGELOG.json

@@ -1,6 +1,30 @@
 {
   "name": "@stonecrop/aform",
   "entries": [
+    {
+      "version": "0.3.2",
+      "tag": "@stonecrop/aform_v0.3.2",
+      "date": "Tue, 17 Dec 2024 10:07:54 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "format adate emit response to fit native datepicker"
+          }
+        ]
+      }
+    },
+    {
+      "version": "0.3.1",
+      "tag": "@stonecrop/aform_v0.3.1",
+      "date": "Tue, 17 Dec 2024 08:28:48 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "update deps"
+          }
+        ]
+      }
+    },
     {
       "version": "0.3.0",
       "tag": "@stonecrop/aform_v0.3.0",

aform/CHANGELOG.md

@@ -1,6 +1,20 @@
 # Change Log - @stonecrop/aform
 
-This log was last generated on Mon, 16 Dec 2024 07:40:48 GMT and should not be manually modified.
+This log was last generated on Tue, 17 Dec 2024 10:07:54 GMT and should not be manually modified.
+
+## 0.3.2
+Tue, 17 Dec 2024 10:07:54 GMT
+
+### Patches
+
+- format adate emit response to fit native datepicker
+
+## 0.3.1
+Tue, 17 Dec 2024 08:28:48 GMT
+
+### Patches
+
+- update deps
 
 ## 0.3.0
 Mon, 16 Dec 2024 07:40:48 GMT

aform/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@stonecrop/aform",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"license": "MIT",
 	"type": "module",
 	"author": {
@@ -44,7 +44,7 @@
 	"dependencies": {
 		"@stonecrop/themes": "workspace:*",
 		"@stonecrop/utilities": "workspace:*",
-		"@vueuse/core": "^11.1.0",
+		"@vueuse/core": "^12.0.0",
 		"vue": "^3.5.11"
 	},
 	"devDependencies": {

aform/src/components/form/ADate.vue

@@ -1,12 +1,12 @@
 <template>
 	<div>
 		<input
+			v-model="inputDate"
 			ref="date"
 			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>
@@ -26,7 +26,10 @@ const {
 	validation = { errorMessage: '&nbsp;' },
 } = defineProps<ComponentProps>()
 
-const inputDate = defineModel<string | number | Date>()
+const inputDate = defineModel<string | number | Date>({
+	// format the date to be compatible with the native input datepicker
+	set: value => new Date(value).toISOString().split('T')[0],
+})
 const dateRef = useTemplateRef<HTMLInputElement>('date')
 
 const showPicker = () => {

aform/src/components/form/ADatePicker.vue

@@ -1,38 +1,40 @@
 <template>
 	<div class="adatepicker" tabindex="0" ref="datepicker">
 		<table>
-			<tr>
-				<td id="previous-month-btn" @click="previousMonth" :tabindex="-1">&lt;</td>
-				<th colspan="5" :tabindex="-1">{{ monthAndYear }}</th>
-				<td id="next-month-btn" @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">
-				<!-- the 'ref' key is currently only used for test references -->
-				<td
-					v-for="colNo in numberOfColumns"
-					ref="celldate"
-					: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>
+			<tbody>
+				<tr>
+					<td id="previous-month-btn" @click="previousMonth" :tabindex="-1">&lt;</td>
+					<th colspan="5" :tabindex="-1">{{ monthAndYear }}</th>
+					<td id="next-month-btn" @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">
+					<!-- the 'ref' key is currently only used for test references -->
+					<td
+						v-for="colNo in numberOfColumns"
+						ref="celldate"
+						: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>
+			</tbody>
 		</table>
 	</div>
 </template>

aform/tests/datepicker.spec.ts

@@ -71,7 +71,7 @@ describe('datepicker component', () => {
 
 		const $prevMonthBtn = wrapper.find('#next-month-btn')
 		await $prevMonthBtn.trigger('click')
-		expect(wrapper.vm.currentMonth).toBe(new Date().getMonth() + 1)
+		expect(wrapper.vm.currentMonth).toBe((new Date().getMonth() + 1) % 12)
 	})
 
 	it('select next year', async () => {

atable/CHANGELOG.json

@@ -1,6 +1,30 @@
 {
   "name": "@stonecrop/atable",
   "entries": [
+    {
+      "version": "0.3.2",
+      "tag": "@stonecrop/atable_v0.3.2",
+      "date": "Tue, 17 Dec 2024 10:07:54 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "update table cell value reactively"
+          }
+        ]
+      }
+    },
+    {
+      "version": "0.3.1",
+      "tag": "@stonecrop/atable_v0.3.1",
+      "date": "Tue, 17 Dec 2024 08:28:48 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "don't set header width until rows are loaded"
+          }
+        ]
+      }
+    },
     {
       "version": "0.3.0",
       "tag": "@stonecrop/atable_v0.3.0",

atable/CHANGELOG.md

@@ -1,6 +1,20 @@
 # Change Log - @stonecrop/atable
 
-This log was last generated on Mon, 16 Dec 2024 07:40:48 GMT and should not be manually modified.
+This log was last generated on Tue, 17 Dec 2024 10:07:54 GMT and should not be manually modified.
+
+## 0.3.2
+Tue, 17 Dec 2024 10:07:54 GMT
+
+### Patches
+
+- update table cell value reactively
+
+## 0.3.1
+Tue, 17 Dec 2024 08:28:48 GMT
+
+### Patches
+
+- don't set header width until rows are loaded
 
 ## 0.3.0
 Mon, 16 Dec 2024 07:40:48 GMT

atable/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@stonecrop/atable",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"license": "MIT",
 	"type": "module",
 	"author": {
@@ -47,8 +47,8 @@
 	"dependencies": {
 		"@stonecrop/themes": "workspace:*",
 		"@stonecrop/utilities": "workspace:*",
-		"@vueuse/components": "^10.11.0",
-		"@vueuse/core": "^11.1.0",
+		"@vueuse/components": "^12.0.0",
+		"@vueuse/core": "^12.0.0",
 		"pinia": "^2.3.0",
 		"vue": "^3.5.11"
 	},

atable/src/components/ACell.vue

@@ -14,8 +14,7 @@
 		@input="updateCellData"
 		@click="showModal"
 		class="atable-cell"
-		:class="pinned ? 'sticky-column' : ''"
-		v-on-click-outside="store.closeModal">
+		:class="pinned ? 'sticky-column' : ''">
 		<component
 			v-if="column.cellComponent"
 			:is="column.cellComponent"
@@ -28,9 +27,8 @@
 
 <script setup lang="ts">
 import { KeypressHandlers, defaultKeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
-import { vOnClickOutside } from '@vueuse/components'
 import { useElementBounding } from '@vueuse/core'
-import { computed, CSSProperties, ref, useTemplateRef } from 'vue'
+import { computed, CSSProperties, ref, useTemplateRef, watch } from 'vue'
 
 import { createTableStore } from '../stores/table'
 import { isHtmlString } from '../utils'
@@ -55,7 +53,7 @@ const { bottom, left } = useElementBounding(cellRef)
 
 // keep a shallow copy of the original cell value for comparison
 const originalData = store.getCellData(colIndex, rowIndex)
-const displayValue = store.getCellDisplayValue(colIndex, rowIndex)
+const displayValue = ref(store.getCellDisplayValue(colIndex, rowIndex))
 const currentData = ref('')
 const cellModified = ref(false)
 
@@ -65,9 +63,16 @@ const row = store.rows[rowIndex]
 const textAlign = column.align || 'center'
 const cellWidth = column.width || '40ch'
 
+watch(
+	() => store.getCellData(colIndex, rowIndex),
+	cellData => {
+		displayValue.value = store.getFormattedValue(colIndex, rowIndex, cellData)
+	}
+)
+
 const isHtmlValue = computed(() => {
 	// TODO: check if display value is a native DOM element
-	return typeof displayValue === 'string' ? isHtmlString(displayValue) : false
+	return typeof displayValue.value === 'string' ? isHtmlString(displayValue.value) : false
 })
 
 const cellStyle = computed((): CSSProperties => {

atable/src/components/ATable.vue

@@ -1,5 +1,9 @@
 <template>
-	<table ref="table" class="atable" :style="{ width: store.config.fullWidth ? '100%' : 'auto' }">
+	<table
+		ref="table"
+		class="atable"
+		:style="{ width: store.config.fullWidth ? '100%' : 'auto' }"
+		v-on-click-outside="store.closeModal">
 		<slot name="header" :data="store">
 			<ATableHeader :columns="store.columns" :store="store" />
 		</slot>
@@ -53,6 +57,7 @@
 </template>
 
 <script setup lang="ts">
+import { vOnClickOutside } from '@vueuse/components'
 import { useMutationObserver } from '@vueuse/core'
 import { nextTick, watch, onMounted, useTemplateRef } from 'vue'
 
@@ -121,7 +126,7 @@ const assignStickyCellWidths = () => {
 	const firstDataRow = table.rows[1]
 	const headerCells = headerRow ? Array.from(headerRow.cells) : []
 	for (const [index, headerCell] of headerCells.entries()) {
-		const rowCell = firstDataRow.cells[index]
+		const rowCell = firstDataRow?.cells[index]
 		if (rowCell) {
 			headerCell.style.width = `${rowCell.offsetWidth}px`
 		}

atable/src/types/index.ts

@@ -14,10 +14,24 @@ export type TableColumn = {
 
 	cellComponent?: string
 	cellComponentProps?: Record<string, any>
-	modalComponent?: string | ((context?: CellContext) => string)
+	/**
+	 * The component to use for the modal. If a function is provided, it will be called with the cell context.
+	 * The following properties are available on the cell context:
+	 * - `row` - the row object
+	 * - `column` - the column object
+	 * - `table` - the table object
+	 *
+	 * The function should return the name of the component to use for the modal.
+	 *
+	 * Additionally, the following properties will be automatically passed to the modal component:
+	 * - `colIndex` - the column index of the current cell
+	 * - `rowIndex` - the row index of the current cell
+	 * - `store` - the table data store
+	 */
+	modalComponent?: string | ((context: CellContext) => string)
 	modalComponentExtraProps?: Record<string, any>
 
-	format?: string | ((value: any, context?: CellContext) => string)
+	format?: string | ((value: any, context: CellContext) => string)
 	mask?: (value: any) => any
 }
 

atable/tests/cell.spec.ts

@@ -4,19 +4,18 @@ import { mount } from '@vue/test-utils'
 
 import ATable from '../src/components/ATable.vue'
 import data from './data/http_logs.json'
+import type { TableColumn, TableConfig } from '../src/types'
 
 describe('table cell component', () => {
-	const columns = [
+	const columns: TableColumn[] = [
 		{
 			label: 'Home Page',
 			name: 'home_page',
 			type: 'Data',
 			align: 'left',
 			edit: false,
 			width: '35ch',
-			format: (value: { title?: string; value?: any }) => {
-				return value.title
-			},
+			format: (value: { title: string }) => value.title,
 		},
 		{
 			label: 'HTTP Method',
@@ -33,17 +32,15 @@ describe('table cell component', () => {
 			align: 'center',
 			edit: true,
 			width: '25ch',
-			modalComponent: 'ADate',
-			format: (value: number) => {
-				return new Date(Number(value)).toLocaleDateString('en-US')
-			},
+			modalComponent: 'DateInput',
+			format: (value: number) => new Date(value).toLocaleDateString('en-US'),
 		},
 	]
 
 	const props = {
 		columns,
 		modelValue: data,
-		config: { view: 'list' },
+		config: { view: 'list' } as TableConfig,
 	}
 
 	beforeEach(() => {