@stonecrop/atable 0.2.16 → 0.2.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/atable",
-  "version": "0.2.16",
+  "version": "0.2.17",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -33,8 +33,8 @@
   "dependencies": {
     "uuid": "^9.0.0",
     "vue": "^3.4.23",
-    "@stonecrop/themes": "0.2.16",
-    "@stonecrop/utilities": "0.2.16"
+    "@stonecrop/themes": "0.2.17",
+    "@stonecrop/utilities": "0.2.17"
   },
   "devDependencies": {
     "@histoire/plugin-vue": "^0.17.17",
@@ -42,23 +42,25 @@
     "@typescript-eslint/eslint-plugin": "^7.6.0",
     "@typescript-eslint/parser": "^7.6.0",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vitest/coverage-v8": "^1.5.0",
-    "@vitest/ui": "^1.5.0",
-    "@vue/test-utils": "^2.3.2",
+    "@vitest/coverage-istanbul": "^1.6.0",
+    "@vitest/ui": "^1.6.0",
+    "@vue/test-utils": "^2.4.6",
+    "@vueuse/components": "^10.9.0",
+    "@vueuse/core": "^10.9.0",
     "cypress": "^12.11.0",
-    "eslint": "^8.40.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-vue": "^9.11.1",
+    "eslint": "^8.40.0",
     "histoire": "^0.17.17",
-    "jsdom": "^22.0.0",
+    "jsdom": "^24.0.0",
     "typescript": "^5.4.5",
     "vite": "^5.2.9",
-    "vitest": "^1.5.0",
+    "vitest": "^1.6.0",
     "vue-router": "^4",
-    "@stonecrop/aform": "0.2.16"
+    "@stonecrop/aform": "0.2.17"
   },
   "peerDependencies": {
-    "@stonecrop/aform": "0.2.16"
+    "@stonecrop/aform": "0.2.17"
   },
   "publishConfig": {
     "access": "public"

package/src/components/ACell.vue

@@ -37,7 +37,6 @@ const props = withDefaults(
 		tableid: string
 		addNavigation?: boolean | KeypressHandlers
 		tabIndex?: number
-		clickHandler?: (event: MouseEvent) => void
 	}>(),
 	{
 		tabIndex: 0,
@@ -47,8 +46,9 @@ const props = withDefaults(
 
 const tableData = inject<TableDataStore>(props.tableid)
 const cell = ref<HTMLTableCellElement>(null)
+const currentData = ref('')
+const cellModified = ref(false)
 
-let cellModified = ref(false)
 const displayValue = computed(() => {
 	const data = tableData.cellData<any>(props.colIndex, props.rowIndex)
 	if (tableData.columns[props.colIndex].format) {
@@ -69,12 +69,6 @@ const displayValue = computed(() => {
 })
 
 const handleInput = (event: MouseEvent) => {
-	// Not sure if click handler is needed anymore?
-	if (props.clickHandler) {
-		props.clickHandler(event)
-		return
-	}
-
 	if (tableData.columns[props.colIndex].mask) {
 		// TODO: add masking to cell values
 		// tableData.columns[props.colIndex].mask(event)
@@ -139,22 +133,21 @@ const cellWidth = computed(() => {
 	return tableData.columns[props.colIndex].width || '40ch'
 })
 
-let currentData = ''
 const onFocus = () => {
 	if (cell.value) {
-		currentData = cell.value.innerText
+		currentData.value = cell.value.textContent
 	}
 }
 
 const onChange = () => {
 	if (cell.value) {
-		if (cell.value.innerHTML !== currentData) {
-			currentData = cell.value.innerText
+		if (cell.value.textContent !== currentData.value) {
+			currentData.value = cell.value.textContent
 			cell.value.dispatchEvent(new Event('change'))
 			cellModified.value = true // set display instead
 			if (!tableData.columns[props.colIndex].format) {
 				// TODO: need to setup reverse format function
-				tableData.setCellData(props.rowIndex, props.colIndex, currentData)
+				tableData.setCellData(props.rowIndex, props.colIndex, currentData.value)
 			}
 		}
 	}

package/src/components/ARow.vue

@@ -1,17 +1,18 @@
 <template>
-	<tr ref="rowEl" :tabindex="tabIndex" v-show="rowVisible()" class="table-row">
+	<tr ref="rowEl" :tabindex="tabIndex" v-show="isRowVisible" class="table-row">
 		<!-- render numbered/tree view index -->
-		<td v-if="tableData.config.view === 'list'" :tabIndex="-1" class="list-index">
-			{{ rowIndex + 1 }}
-		</td>
-		<td
-			v-else-if="tableData.config.view === 'tree'"
-			:tabIndex="-1"
-			class="tree-index"
-			@click="toggleRowExpand(rowIndex)">
-			{{ getRowExpandSymbol() }}
-		</td>
-		<slot v-else name="indexCell"></slot>
+		<slot name="index">
+			<td v-if="tableData.config.view === 'list'" :tabIndex="-1" class="list-index">
+				{{ rowIndex + 1 }}
+			</td>
+			<td
+				v-else-if="tableData.config.view === 'tree'"
+				:tabIndex="-1"
+				class="tree-index"
+				@click="toggleRowExpand(rowIndex)">
+				{{ getRowExpandSymbol() }}
+			</td>
+		</slot>
 
 		<!-- render cell content -->
 		<slot></slot>
@@ -20,7 +21,7 @@
 
 <script setup lang="ts">
 import { TableRow } from 'types'
-import { inject, ref } from 'vue'
+import { computed, inject, ref } from 'vue'
 import { type KeypressHandlers, useKeyboardNav, defaultKeypressHandlers } from '@stonecrop/utilities'
 
 import TableDataStore from '.'
@@ -67,13 +68,13 @@ const getRowExpandSymbol = () => {
 	}
 }
 
-const rowVisible = () => {
+const isRowVisible = computed(() => {
 	return (
 		tableData.config.view !== 'tree' ||
 		tableData.display[props.rowIndex].isRoot ||
 		tableData.display[props.rowIndex].open
 	)
-}
+})
 
 const toggleRowExpand = (rowIndex: number) => {
 	tableData.toggleRowExpand(rowIndex)

package/src/components/ATable.vue

@@ -1,5 +1,8 @@
 <template>
-	<table class="atable" :style="{ width: tableData.config.fullWidth ? '100%' : 'auto' }">
+	<table
+		class="atable"
+		:style="{ width: tableData.config.fullWidth ? '100%' : 'auto' }"
+		v-on-click-outside="closeModal">
 		<slot name="header" :data="tableData">
 			<ATableHeader :columns="tableData.columns" :config="tableData.config" :tableid="tableData.id" />
 		</slot>
@@ -59,6 +62,7 @@
 <script setup lang="ts">
 import { v4 } from 'uuid'
 import { nextTick, provide, watch } from 'vue'
+import { vOnClickOutside } from '@vueuse/components'
 
 import { TableColumn, TableConfig, TableRow } from 'types'
 import TableDataStore from '.'
@@ -85,7 +89,6 @@ const props = withDefaults(
 const emit = defineEmits(['update:modelValue'])
 
 let rows = props.modelValue ? props.modelValue : props.rows
-
 let tableData = new TableDataStore(props.id, props.columns, rows, props.config)
 provide(tableData.id, tableData)
 
@@ -97,47 +100,47 @@ watch(
 	{ deep: true }
 )
 
-const formatCell = (event?: KeyboardEvent, column?: TableColumn, cellData?: any) => {
-	let colIndex: number
-	const target = event?.target as HTMLTableCellElement
-	if (event) {
-		colIndex = target.cellIndex + (tableData.zeroColumn ? -1 : 0)
-	} else if (column && cellData) {
-		colIndex = tableData.columns.indexOf(column)
-	}
-
-	if (!column && 'format' in tableData.columns[colIndex]) {
-		// TODO: (utils) create helper to extract format from string
-		const format = tableData.columns[colIndex].format
-		if (typeof format === 'function') {
-			return format(target.innerHTML)
-		} else if (typeof format === 'string') {
-			// parse format function from string
-			// eslint-disable-next-line @typescript-eslint/no-implied-eval
-			const formatFn: (args: any) => any = Function(`"use strict";return (${format})`)()
-			return formatFn(target.innerHTML)
-		} else {
-			return target.innerHTML
-		}
-	} else if (cellData && 'format' in column) {
-		const format = column.format
-		if (typeof format === 'function') {
-			return format(cellData)
-		} else if (typeof format === 'string') {
-			// parse format function from string
-			// eslint-disable-next-line @typescript-eslint/no-implied-eval
-			const formatFn: (args: any) => any = Function(`"use strict";return (${format})`)()
-			return formatFn(cellData)
-		} else {
-			return cellData
-		}
-	} else if (cellData && column.type.toLowerCase() in ['int', 'decimal', 'float', 'number', 'percent']) {
-		return cellData
-		// TODO: number formatting
-	} else {
-		return cellData
-	}
-}
+// const formatCell = (event?: KeyboardEvent, column?: TableColumn, cellData?: any) => {
+// 	let colIndex: number
+// 	const target = event?.target as HTMLTableCellElement
+// 	if (event) {
+// 		colIndex = target.cellIndex + (tableData.zeroColumn ? -1 : 0)
+// 	} else if (column && cellData) {
+// 		colIndex = tableData.columns.indexOf(column)
+// 	}
+
+// 	if (!column && 'format' in tableData.columns[colIndex]) {
+// 		// TODO: (utils) create helper to extract format from string
+// 		const format = tableData.columns[colIndex].format
+// 		if (typeof format === 'function') {
+// 			return format(target.innerHTML)
+// 		} else if (typeof format === 'string') {
+// 			// parse format function from string
+// 			// eslint-disable-next-line @typescript-eslint/no-implied-eval
+// 			const formatFn: (args: any) => any = Function(`"use strict";return (${format})`)()
+// 			return formatFn(target.innerHTML)
+// 		} else {
+// 			return target.innerHTML
+// 		}
+// 	} else if (cellData && 'format' in column) {
+// 		const format = column.format
+// 		if (typeof format === 'function') {
+// 			return format(cellData)
+// 		} else if (typeof format === 'string') {
+// 			// parse format function from string
+// 			// eslint-disable-next-line @typescript-eslint/no-implied-eval
+// 			const formatFn: (args: any) => any = Function(`"use strict";return (${format})`)()
+// 			return formatFn(cellData)
+// 		} else {
+// 			return cellData
+// 		}
+// 	} else if (cellData && column.type.toLowerCase() in ['int', 'decimal', 'float', 'number', 'percent']) {
+// 		return cellData
+// 		// TODO: number formatting
+// 	} else {
+// 		return cellData
+// 	}
+// }
 
 // const moveCursorToEnd = (target: HTMLElement) => {
 // 	target.focus()
@@ -145,17 +148,17 @@ const formatCell = (event?: KeyboardEvent, column?: TableColumn, cellData?: any)
 // 	document.getSelection().collapseToEnd()
 // }
 
-const clickOutside = (event: MouseEvent) => {
-	if (!tableData.modal.parent?.contains(event.target as HTMLElement)) {
-		if (tableData.modal.visible) {
-			// call set data
-			tableData.modal.visible = false
-		}
+const closeModal = (event: MouseEvent) => {
+	if (!(event.target instanceof Node)) {
+		// if the target is not a node, it's probably a custom click event to Document or Window
+		// err on the side of closing the modal in that case
+		if (tableData.modal.visible) tableData.modal.visible = false
+	} else if (!tableData.modal.parent?.contains(event.target)) {
+		if (tableData.modal.visible) tableData.modal.visible = false
 	}
 }
 
-window.addEventListener('click', clickOutside)
-window.addEventListener('keydown', (event: KeyboardEvent) => {
+window.addEventListener('keydown', async (event: KeyboardEvent) => {
 	if (event.key === 'Escape') {
 		if (tableData.modal.visible) {
 			tableData.modal.visible = false
@@ -163,17 +166,9 @@ window.addEventListener('keydown', (event: KeyboardEvent) => {
 			// focus on the parent cell again
 			const $parent = tableData.modal.parent
 			if ($parent) {
-				// wait for the modal to close
-				void nextTick().then(() => {
-					// for some reason, the parent is not immediately visible in the DOM;
-					// re-fetching the cell to add focus instead
-					const rowIndex = $parent.dataset.rowindex
-					const colIndex = $parent.dataset.colindex
-					const $parentCell = document.querySelectorAll(`[data-rowindex='${rowIndex}'][data-colindex='${colIndex}']`)
-					if ($parentCell) {
-						;($parentCell[0] as HTMLTableCellElement).focus()
-					}
-				})
+				// wait for the modal to close before focusing
+				await nextTick()
+				$parent.focus()
 			}
 		}
 	}