[atable] don't set header width until rows are loaded (#223)

* fix: don't set header width until rows are loaded * fix: add changelogs * test: allow datepicker test to pass in December --------- Co-authored-by: Rohan Bansal <[email protected]>
agritheory · Dec 17, 2024 · 67ede22 · 67ede22
1 parent 13cadd0
commit 67ede22
Show file tree

Hide file tree

Showing 14 changed files with 121 additions and 79 deletions.
diff --git a/aform/package.json b/aform/package.json
@@ -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": {

diff --git a/aform/src/components/form/ADatePicker.vue b/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>

diff --git a/aform/tests/datepicker.spec.ts b/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 () => {

diff --git a/atable/package.json b/atable/package.json
@@ -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"
 	},

diff --git a/atable/src/components/ACell.vue b/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,7 +27,6 @@
 
 <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'
 

diff --git a/atable/src/components/ATable.vue b/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`
 		}

diff --git a/beam/package.json b/beam/package.json
@@ -40,7 +40,7 @@
 		"test:ui": "vitest --ui"
 	},
 	"dependencies": {
-		"@vueuse/core": "^11.1.0",
+		"@vueuse/core": "^12.0.0",
 		"mqtt": "^5.10.1",
 		"onscan.js": "^1.5.2",
 		"vue": "^3.5.11"

diff --git a/common/changes/@stonecrop/aform/fix-atable-cells-error_2024-12-17-07-46.json b/common/changes/@stonecrop/aform/fix-atable-cells-error_2024-12-17-07-46.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/aform",
+      "comment": "update deps",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/aform"
+}
diff --git a/common/changes/@stonecrop/atable/fix-atable-cells-error_2024-12-17-07-46.json b/common/changes/@stonecrop/atable/fix-atable-cells-error_2024-12-17-07-46.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/atable",
+      "comment": "don't set header width until rows are loaded",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/atable"
+}
diff --git a/common/changes/@stonecrop/beam/fix-atable-cells-error_2024-12-17-07-46.json b/common/changes/@stonecrop/beam/fix-atable-cells-error_2024-12-17-07-46.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/beam",
+      "comment": "update deps",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/beam"
+}
diff --git a/common/changes/@stonecrop/utilities/fix-atable-cells-error_2024-12-17-07-46.json b/common/changes/@stonecrop/utilities/fix-atable-cells-error_2024-12-17-07-46.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@stonecrop/utilities",
+      "comment": "update deps",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@stonecrop/utilities"
+}
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/common/config/rush/version-policies.json b/common/config/rush/version-policies.json
@@ -13,7 +13,7 @@
 		"definitionName": "lockStepVersion",
 		"policyName": "stonecrop",
 		"version": "0.3.0",
-		"nextBump": "minor"
+		"nextBump": "patch"
 	}
 	// {
 	//   /**

diff --git a/utilities/package.json b/utilities/package.json
@@ -38,7 +38,7 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
-		"@vueuse/core": "^11.1.0",
+		"@vueuse/core": "^12.0.0",
 		"vue": "^3.5.11"
 	},
 	"devDependencies": {