@stonecrop/atable 0.4.36 → 0.4.37

package/dist/stores/table.js

@@ -281,7 +281,7 @@ export const createTableStore = (initData) => {
             }
             else if (typeof format === 'string') {
                 // parse format function from string
-                // eslint-disable-next-line @typescript-eslint/no-implied-eval
+                // eslint-disable-next-line @typescript-eslint/no-implied-eval, @typescript-eslint/no-unsafe-call
                 const formatFn = Function(`"use strict";return (${format})`)();
                 return formatFn(value, { table: table.value, row, column });
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/atable",
-  "version": "0.4.36",
+  "version": "0.4.37",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -38,31 +38,31 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@vueuse/components": "^13.6.0",
-    "@vueuse/core": "^13.6.0",
+    "@vueuse/components": "^14.0.0",
+    "@vueuse/core": "^14.0.0",
     "pinia": "^3.0.3",
     "vue": "^3.5.22",
-    "@stonecrop/themes": "0.4.36",
-    "@stonecrop/utilities": "0.4.36"
+    "@stonecrop/themes": "0.4.37",
+    "@stonecrop/utilities": "0.4.37"
   },
   "devDependencies": {
-    "@microsoft/api-documenter": "^7.26.31",
-    "@rushstack/heft": "^0.74.2",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
+    "@eslint/js": "^9.38.0",
+    "@microsoft/api-documenter": "^7.27.3",
+    "@rushstack/heft": "^1.1.3",
     "@vitejs/plugin-vue": "^6.0.1",
-    "@vitest/coverage-istanbul": "^3.2.4",
-    "@vitest/ui": "^3.2.4",
+    "@vitest/coverage-istanbul": "^4.0.5",
+    "@vitest/ui": "^4.0.5",
     "@vue/test-utils": "^2.4.6",
-    "cypress": "^14.5.3",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-vue": "^9.33.0",
-    "eslint": "^8.57.1",
-    "jsdom": "^26.1.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-vue": "^10.5.1",
+    "eslint": "^9.38.0",
+    "globals": "^16.4.0",
+    "jsdom": "^27.1.0",
     "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.2",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite": "^7.1.1",
-    "vitest": "^3.2.4",
+    "vitest": "^4.0.5",
     "vue-router": "^4.6.3",
     "stonecrop-rig": "0.2.22"
   },
@@ -78,7 +78,7 @@
     "build": "heft build && vite build && rushx docs",
     "dev": "vite",
     "docs": "cd ../common/autoinstallers/doc-tools && node generate-docs.mjs atable",
-    "lint": "eslint . --ext .ts,.vue",
+    "lint": "eslint .",
     "preview": "vite preview",
     "test": "vitest run --coverage.enabled false",
     "test:watch": "vitest watch",

package/src/components/ACell.vue

@@ -8,15 +8,15 @@
 		:tabindex="tabIndex"
 		:spellcheck="false"
 		:style="cellStyle"
+		class="atable-cell"
+		:class="cellClasses"
 		@focus="onFocus"
 		@paste="updateCellData"
 		@input="debouncedUpdateCellData"
-		@click="onCellClick"
-		class="atable-cell"
-		:class="cellClasses">
+		@click="onCellClick">
 		<component
-			v-if="column.cellComponent"
 			:is="column.cellComponent"
+			v-if="column.cellComponent"
 			:value="displayValue"
 			v-bind="column.cellComponentProps" />
 		<span v-else-if="isHtmlValue" v-html="displayValue" />
@@ -173,7 +173,7 @@ const selectAllText = () => {
 					selection.removeAllRanges()
 					selection.addRange(range)
 				}
-			} catch (error) {
+			} catch {
 				// Fallback for environments where Range API is not fully supported
 				// This is expected in some test environments
 			}
@@ -202,7 +202,7 @@ const saveCursorPosition = () => {
 				return preCaretRange.toString().length
 			}
 		}
-	} catch (error) {
+	} catch {
 		// Fallback for environments where Selection API is not fully supported
 	}
 	return 0
@@ -227,7 +227,7 @@ const restoreCursorPosition = (position: number) => {
 
 		while ((node = walker.nextNode())) {
 			const textNode = node as Text
-			const nextCharIndex = charIndex + textNode.textContent!.length
+			const nextCharIndex = charIndex + textNode.textContent.length
 
 			if (position <= nextCharIndex) {
 				range = document.createRange()
@@ -244,7 +244,7 @@ const restoreCursorPosition = (position: number) => {
 			selection.removeAllRanges()
 			selection.addRange(range)
 		}
-	} catch (error) {
+	} catch {
 		// Fallback for environments where DOM APIs are not fully supported
 	}
 }
@@ -266,7 +266,7 @@ const updateCellData = (payload: Event) => {
 	if (column.format) {
 		cellModified.value = target.textContent !== store.getFormattedValue(colIndex, rowIndex, originalData)
 		// TODO: need to setup reverse format function?
-		store.setCellText(colIndex, rowIndex, target.textContent!)
+		store.setCellText(colIndex, rowIndex, target.textContent)
 	} else {
 		cellModified.value = target.textContent !== originalData
 		store.setCellData(colIndex, rowIndex, target.textContent)

package/src/components/AExpansionRow.vue

@@ -1,6 +1,6 @@
 <template>
 	<tr v-bind="$attrs" ref="rowEl" :tabindex="tabIndex" class="expandable-row">
-		<td :tabIndex="-1" @click="store.toggleRowExpand(rowIndex)" class="row-index">
+		<td :tabIndex="-1" class="row-index" @click="store.toggleRowExpand(rowIndex)">
 			{{ rowExpandSymbol }}
 		</td>
 		<slot name="row" />
@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { type KeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
+import { defaultKeypressHandlers, type KeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
 import { computed, useTemplateRef } from 'vue'
 
 import { createTableStore } from '../stores/table'
@@ -22,7 +22,7 @@ const {
 	rowIndex,
 	store,
 	tabIndex = -1,
-	addNavigation,
+	addNavigation = defaultKeypressHandlers,
 } = defineProps<{
 	rowIndex: number
 	store: ReturnType<typeof createTableStore>

package/src/components/AGanttCell.vue

@@ -75,9 +75,9 @@ const {
 	rowIndex,
 	colIndex,
 	start = 0,
-	end,
+	end = 0,
 	colspan = 1,
-	label,
+	label = '',
 	color = '#cccccc',
 } = defineProps<{
 	store: ReturnType<typeof createTableStore>
@@ -100,12 +100,12 @@ const barColor = ref(color.length >= 6 ? color : '#cccccc')
 const barId = `gantt-bar-row-${rowIndex}-col-${colIndex}`
 
 // Template refs
-const containerRef = useTemplateRef('container')
-const barRef = useTemplateRef('bar')
-const leftResizeHandleRef = useTemplateRef('leftResizeHandle')
-const rightResizeHandleRef = useTemplateRef('rightResizeHandle')
-const leftConnectionHandleRef = useTemplateRef('leftConnectionHandle')
-const rightConnectionHandleRef = useTemplateRef('rightConnectionHandle')
+const containerRef = useTemplateRef<HTMLDivElement>('container')
+const barRef = useTemplateRef<HTMLDivElement>('bar')
+const leftResizeHandleRef = useTemplateRef<HTMLDivElement>('leftResizeHandle')
+const rightResizeHandleRef = useTemplateRef<HTMLDivElement>('rightResizeHandle')
+const leftConnectionHandleRef = useTemplateRef<HTMLDivElement>('leftConnectionHandle')
+const rightConnectionHandleRef = useTemplateRef<HTMLDivElement>('rightConnectionHandle')
 
 // Position tracking
 const { width: totalBarWidth } = useElementBounding(containerRef)

package/src/components/AGanttConnection.vue

@@ -40,13 +40,13 @@
 			<!-- Visible connection path -->
 			<path
 				v-for="connection in visibleConnections"
+				:id="connection.id"
 				:key="connection.id"
 				:d="getPathData(connection)"
 				:stroke="connection.style?.color || '#666'"
 				:stroke-width="connection.style?.width || 2"
 				fill="none"
 				marker-mid="url(#arrowhead-marker)"
-				:id="connection.id"
 				class="connection-path animated-path"
 				@dblclick="handleConnectionDelete(connection)" />
 		</svg>
@@ -78,7 +78,7 @@ const visibleConnections = computed(() => {
 	})
 })
 
-const getPathData = (connection: ConnectionPath, isMarker: Boolean = false) => {
+const getPathData = (connection: ConnectionPath) => {
 	const fromHandle = store.connectionHandles.find(
 		handle => handle.barId === connection.from.barId && handle.side === connection.from.side
 	)

package/src/components/ARow.vue

@@ -1,7 +1,7 @@
 <template>
-	<tr ref="rowEl" :tabindex="tabIndex" v-show="isRowVisible" class="atable-row">
+	<tr v-show="isRowVisible" ref="rowEl" :tabindex="tabIndex" class="atable-row">
 		<!-- render numbered/tree view index; skip render for uncounted lists -->
-		<slot name="index" v-if="store.config.view !== 'uncounted'">
+		<slot v-if="store.config.view !== 'uncounted'" name="index">
 			<td
 				v-if="store.config.view === 'list'"
 				:tabIndex="-1"

package/src/components/ATable.vue

@@ -3,31 +3,31 @@
 		<!-- Main table view -->
 		<table
 			ref="table"
+			v-on-click-outside="store.closeModal"
 			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>
 
 			<tbody>
 				<slot name="body" :data="store">
-					<ARow v-for="(row, rowIndex) in store.rows" :key="row.id" :row="row" :rowIndex="rowIndex" :store="store">
+					<ARow v-for="(row, rowIndex) in store.rows" :key="row.id" :row="row" :row-index="rowIndex" :store="store">
 						<template v-for="(column, colIndex) in getProcessedColumnsForRow(row)" :key="column.name">
 							<component
-								v-if="column.isGantt"
 								:is="column.ganttComponent || 'AGanttCell'"
+								v-if="column.isGantt"
 								:store="store"
-								:columnsCount="store.columns.length - pinnedColumnCount"
+								:columns-count="store.columns.length - pinnedColumnCount"
 								:color="row.gantt?.color"
 								:start="row.gantt?.startIndex"
 								:end="row.gantt?.endIndex"
 								:colspan="column.colspan"
 								:pinned="column.pinned"
-								:rowIndex="rowIndex"
-								:colIndex="column.originalIndex ?? colIndex"
+								:row-index="rowIndex"
+								:col-index="column.originalIndex ?? colIndex"
 								:style="{
 									textAlign: column?.align || 'center',
 									minWidth: column?.width || '40ch',
@@ -35,12 +35,12 @@
 								}"
 								@connection:create="handleConnectionCreate" />
 							<component
-								v-else
 								:is="column.cellComponent || 'ACell'"
+								v-else
 								:store="store"
 								:pinned="column.pinned"
-								:rowIndex="rowIndex"
-								:colIndex="colIndex"
+								:row-index="rowIndex"
+								:col-index="colIndex"
 								:style="{
 									textAlign: column?.align || 'center',
 									width: store.config.fullWidth ? 'auto' : null,
@@ -58,10 +58,10 @@
 				<ATableModal v-show="store.modal.visible" :store="store">
 					<template #default>
 						<component
-							:key="`${store.modal.rowIndex}:${store.modal.colIndex}`"
 							:is="store.modal.component"
-							:colIndex="store.modal.colIndex"
-							:rowIndex="store.modal.rowIndex"
+							:key="`${store.modal.rowIndex}:${store.modal.colIndex}`"
+							:col-index="store.modal.colIndex"
+							:row-index="store.modal.rowIndex"
 							:store="store"
 							v-bind="store.modal.componentProps" />
 					</template>
@@ -92,7 +92,7 @@ import type { ConnectionEvent, ConnectionPath, GanttDragEvent, TableColumn, Tabl
 const rows = defineModel<TableRow[]>('rows', { required: true })
 const columns = defineModel<TableColumn[]>('columns', { required: true })
 
-const { id, config = new Object() } = defineProps<{
+const { id = '', config = new Object() } = defineProps<{
 	id?: string
 	config?: TableConfig
 }>()

package/src/components/ATableHeader.vue

@@ -12,8 +12,8 @@
 				class="list-index" />
 			<th
 				v-for="(column, colKey) in columns"
-				v-resize-observer="onResize"
 				:key="column.name"
+				v-resize-observer="onResize"
 				:data-colindex="colKey"
 				tabindex="-1"
 				:style="store.getHeaderCellStyle(column)"

package/src/components/ATableModal.vue

@@ -1,12 +1,12 @@
 <template>
-	<div class="amodal" ref="amodal" tabindex="-1" @click.stop @input.stop :style="amodalStyles">
+	<div ref="amodal" class="amodal" tabindex="-1" :style="amodalStyles" @click.stop @input.stop>
 		<slot />
 	</div>
 </template>
 
 <script setup lang="ts">
 import { useElementBounding } from '@vueuse/core'
-import { useTemplateRef, computed } from 'vue'
+import { useTemplateRef, computed, type StyleValue } from 'vue'
 
 import { createTableStore } from '../stores/table'
 
@@ -15,11 +15,12 @@ const { store } = defineProps<{ store: ReturnType<typeof createTableStore> }>()
 const amodalRef = useTemplateRef('amodal')
 const { width: modalWidth, height: modalHeight } = useElementBounding(amodalRef)
 
-const amodalStyles = computed(() => {
+const amodalStyles = computed((): StyleValue => {
 	if (!(store.modal.height && store.modal.width && store.modal.left && store.modal.bottom)) return
 
-	// eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
-	const table = store.modal.cell?.closest('table')!
+	const table = store.modal.cell?.closest('table')
+	if (!table) return {}
+
 	const maxHeight = table.offsetHeight || 0
 	const maxWidth = table.offsetWidth || 0
 

package/src/stores/table.ts

@@ -351,7 +351,7 @@ export const createTableStore = (initData: {
 				return format(value, { table: table.value, row, column })
 			} else if (typeof format === 'string') {
 				// parse format function from string
-				// eslint-disable-next-line @typescript-eslint/no-implied-eval
+				// eslint-disable-next-line @typescript-eslint/no-implied-eval, @typescript-eslint/no-unsafe-call
 				const formatFn: (value: any, context?: CellContext) => string = Function(`"use strict";return (${format})`)()
 				return formatFn(value, { table: table.value, row, column })
 			}