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

…onecrop

aform/CHANGELOG.json

@@ -1,6 +1,30 @@
 {
   "name": "@stonecrop/aform",
   "entries": [
+    {
+      "version": "0.2.64",
+      "tag": "@stonecrop/aform_v0.2.64",
+      "date": "Wed, 11 Dec 2024 07:45:13 GMT",
+      "comments": {
+        "minor": [
+          {
+            "comment": "update dependencies"
+          }
+        ]
+      }
+    },
+    {
+      "version": "0.2.63",
+      "tag": "@stonecrop/aform_v0.2.63",
+      "date": "Mon, 09 Dec 2024 18:06:22 GMT",
+      "comments": {}
+    },
+    {
+      "version": "0.2.62",
+      "tag": "@stonecrop/aform_v0.2.62",
+      "date": "Thu, 05 Dec 2024 14:20:47 GMT",
+      "comments": {}
+    },
     {
       "version": "0.2.61",
       "tag": "@stonecrop/aform_v0.2.61",

aform/CHANGELOG.md

@@ -1,6 +1,23 @@
 # Change Log - @stonecrop/aform
 
-This log was last generated on Tue, 03 Dec 2024 06:50:08 GMT and should not be manually modified.
+This log was last generated on Wed, 11 Dec 2024 07:45:13 GMT and should not be manually modified.
+
+## 0.2.64
+Wed, 11 Dec 2024 07:45:13 GMT
+
+### Minor changes
+
+- update dependencies
+
+## 0.2.63
+Mon, 09 Dec 2024 18:06:22 GMT
+
+_Version update only_
+
+## 0.2.62
+Thu, 05 Dec 2024 14:20:47 GMT
+
+_Version update only_
 
 ## 0.2.61
 Tue, 03 Dec 2024 06:50:08 GMT

aform/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@stonecrop/aform",
-	"version": "0.2.61",
+	"version": "0.2.64",
 	"license": "MIT",
 	"type": "module",
 	"author": {
@@ -45,7 +45,7 @@
 		"@stonecrop/themes": "workspace:*",
 		"@stonecrop/utilities": "workspace:*",
 		"@vueuse/core": "^11.1.0",
-		"vue": "^3.5.6"
+		"vue": "^3.5.11"
 	},
 	"devDependencies": {
 		"@microsoft/api-documenter": "^7.25.3",

atable/CHANGELOG.json

@@ -1,6 +1,36 @@
 {
   "name": "@stonecrop/atable",
   "entries": [
+    {
+      "version": "0.2.64",
+      "tag": "@stonecrop/atable_v0.2.64",
+      "date": "Wed, 11 Dec 2024 07:45:13 GMT",
+      "comments": {
+        "minor": [
+          {
+            "comment": "use pinia to track table state"
+          }
+        ]
+      }
+    },
+    {
+      "version": "0.2.63",
+      "tag": "@stonecrop/atable_v0.2.63",
+      "date": "Mon, 09 Dec 2024 18:06:22 GMT",
+      "comments": {}
+    },
+    {
+      "version": "0.2.62",
+      "tag": "@stonecrop/atable_v0.2.62",
+      "date": "Thu, 05 Dec 2024 14:20:47 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "expose table data on initialization"
+          }
+        ]
+      }
+    },
     {
       "version": "0.2.61",
       "tag": "@stonecrop/atable_v0.2.61",

atable/CHANGELOG.md

@@ -1,6 +1,25 @@
 # Change Log - @stonecrop/atable
 
-This log was last generated on Tue, 03 Dec 2024 06:50:08 GMT and should not be manually modified.
+This log was last generated on Wed, 11 Dec 2024 07:45:13 GMT and should not be manually modified.
+
+## 0.2.64
+Wed, 11 Dec 2024 07:45:13 GMT
+
+### Minor changes
+
+- use pinia to track table state
+
+## 0.2.63
+Mon, 09 Dec 2024 18:06:22 GMT
+
+_Version update only_
+
+## 0.2.62
+Thu, 05 Dec 2024 14:20:47 GMT
+
+### Patches
+
+- expose table data on initialization
 
 ## 0.2.61
 Tue, 03 Dec 2024 06:50:08 GMT

atable/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@stonecrop/atable",
-	"version": "0.2.61",
+	"version": "0.2.64",
 	"license": "MIT",
 	"type": "module",
 	"author": {
@@ -49,7 +49,8 @@
 		"@stonecrop/utilities": "workspace:*",
 		"@vueuse/components": "^10.11.0",
 		"@vueuse/core": "^11.1.0",
-		"vue": "^3.5.6"
+		"pinia": "^2.3.0",
+		"vue": "^3.5.11"
 	},
 	"devDependencies": {
 		"@microsoft/api-documenter": "^7.25.3",

atable/src/components/ACell.vue

@@ -13,9 +13,9 @@
 		@blur="updateCellData"
 		@input="updateCellData"
 		@click="showModal"
-		@mousedown="showModal"
 		class="atable-cell"
-		:class="pinned ? 'sticky-column' : ''">
+		:class="pinned ? 'sticky-column' : ''"
+		v-on-click-outside="store.closeModal">
 		<component
 			v-if="column.cellComponent"
 			:is="column.cellComponent"
@@ -28,47 +28,46 @@
 
 <script setup lang="ts">
 import { KeypressHandlers, defaultKeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
+import { vOnClickOutside } from '@vueuse/components'
 import { useElementBounding } from '@vueuse/core'
-import { computed, CSSProperties, inject, ref, useTemplateRef } from 'vue'
+import { computed, CSSProperties, ref, useTemplateRef } from 'vue'
 
-import TableDataStore from '.'
-import type { CellContext } from '@/types'
+import { createTableStore } from '@/stores/table'
 import { isHtmlString } from '@/utils'
 
 const {
 	colIndex,
 	rowIndex,
-	tableid,
+	store,
 	addNavigation = true,
 	tabIndex = 0,
 } = defineProps<{
 	colIndex: number
 	rowIndex: number
-	tableid: string
+	store: ReturnType<typeof createTableStore>
 	addNavigation?: boolean | KeypressHandlers
 	tabIndex?: number
 	pinned?: boolean
 }>()
 
-const tableData = inject<TableDataStore>(tableid)
 const cellRef = useTemplateRef<HTMLTableCellElement>('cell')
 const { bottom, left } = useElementBounding(cellRef)
 
 // keep a shallow copy of the original cell value for comparison
-const originalData = tableData.cellData<any>(colIndex, rowIndex)
+const originalData = store.getCellData(colIndex, rowIndex)
+const displayValue = store.getCellDisplayValue(colIndex, rowIndex)
 const currentData = ref('')
 const cellModified = ref(false)
 
-const table = tableData.table
-const column = tableData.columns[colIndex]
-const row = tableData.rows[rowIndex]
+const column = store.columns[colIndex]
+const row = store.rows[rowIndex]
 
 const textAlign = column.align || 'center'
 const cellWidth = column.width || '40ch'
 
 const isHtmlValue = computed(() => {
 	// TODO: check if display value is a native DOM element
-	return typeof displayValue.value === 'string' ? isHtmlString(displayValue.value) : false
+	return typeof displayValue === 'string' ? isHtmlString(displayValue) : false
 })
 
 const cellStyle = computed((): CSSProperties => {
@@ -77,56 +76,34 @@ const cellStyle = computed((): CSSProperties => {
 		width: cellWidth,
 		backgroundColor: !cellModified.value ? 'inherit' : 'var(--sc-cell-modified)',
 		fontWeight: !cellModified.value ? 'inherit' : 'bold',
-		paddingLeft: getIndent(colIndex, tableData.display[rowIndex]?.indent),
+		paddingLeft: store.getIndent(colIndex, store.display[rowIndex]?.indent),
 	}
 })
 
-const displayValue = computed(() => {
-	const cellData = tableData.cellData<any>(colIndex, rowIndex)
-	return getFormattedValue(cellData)
-})
-
-const getFormattedValue = (value: any) => {
-	const format = column.format
-
-	if (!format) {
-		return value
-	}
-
-	if (typeof format === 'function') {
-		return format(value, { table, row, column })
-	} else if (typeof format === 'string') {
-		// parse format function from string
-		// eslint-disable-next-line @typescript-eslint/no-implied-eval
-		const formatFn: (value: any, context?: CellContext) => string = Function(`"use strict";return (${format})`)()
-		return formatFn(value, { table, row, column })
-	}
-
-	return value
-}
-
 const showModal = () => {
 	if (column.mask) {
 		// TODO: add masking to cell values
 		// column.mask(event)
 	}
 
 	if (column.modalComponent) {
-		tableData.modal.visible = true
-		tableData.modal.colIndex = colIndex
-		tableData.modal.rowIndex = rowIndex
-		tableData.modal.parent = cellRef.value
-		tableData.modal.top = bottom.value
-		tableData.modal.left = left.value
-		tableData.modal.width = cellWidth
-
-		if (typeof column.modalComponent === 'function') {
-			tableData.modal.component = column.modalComponent({ table, row, column })
-		} else {
-			tableData.modal.component = column.modalComponent
-		}
+		store.$patch(state => {
+			state.modal.visible = true
+			state.modal.colIndex = colIndex
+			state.modal.rowIndex = rowIndex
+			state.modal.parent = cellRef.value
+			state.modal.top = bottom.value
+			state.modal.left = left.value
+			state.modal.width = cellWidth
+
+			if (typeof column.modalComponent === 'function') {
+				state.modal.component = column.modalComponent({ table: state.table, row, column })
+			} else {
+				state.modal.component = column.modalComponent
+			}
 
-		tableData.modal.componentProps = column.modalComponentExtraProps
+			state.modal.componentProps = column.modalComponentExtraProps
+		})
 	}
 }
 
@@ -161,7 +138,7 @@ if (addNavigation) {
 // 	if (event) {
 // 		// custom components need to handle their own updateData, this is the default
 // 		if (!column.component) {
-// 			tableData.setCellData(rowIndex, colIndex, cell.value.innerHTML)
+// 			store.setCellData(colIndex, rowIndex, cell.value.innerHTML)
 // 		}
 // 		cellModified.value = true
 // 	}
@@ -177,7 +154,7 @@ const updateCellData = () => {
 	if (cellRef.value) {
 		// only apply changes if the cell value has changed after being mounted
 		if (column.format) {
-			cellModified.value = cellRef.value.textContent !== getFormattedValue(originalData)
+			cellModified.value = cellRef.value.textContent !== store.getFormattedValue(colIndex, rowIndex, originalData)
 		} else {
 			cellModified.value = cellRef.value.textContent !== originalData
 		}
@@ -187,19 +164,11 @@ const updateCellData = () => {
 			cellRef.value.dispatchEvent(new Event('change'))
 			if (!column.format) {
 				// TODO: need to setup reverse format function
-				tableData.setCellData(rowIndex, colIndex, currentData.value)
+				store.setCellData(colIndex, rowIndex, currentData.value)
 			}
 		}
 	}
 }
-
-const getIndent = (colIndex: number, indentLevel?: number) => {
-	if (indentLevel && colIndex === 0 && indentLevel > 0) {
-		return `${indentLevel}ch`
-	} else {
-		return 'inherit'
-	}
-}
 </script>
 
 <style>

atable/src/components/AExpansionRow.vue

@@ -1,49 +1,48 @@
 <template>
 	<tr v-bind="$attrs" ref="rowEl" :tabindex="tabIndex" class="expandable-row">
-		<td :tabIndex="-1" @click="tableData.toggleRowExpand(rowIndex)" class="row-index">
+		<td :tabIndex="-1" @click="store.toggleRowExpand(rowIndex)" class="row-index">
 			{{ rowExpandSymbol }}
 		</td>
 		<slot name="row" />
 	</tr>
-	<tr v-if="tableData.display[rowIndex].expanded" ref="rowExpanded" :tabindex="tabIndex" class="expanded-row">
-		<td :tabIndex="-1" :colspan="tableData.columns.length + 1" class="expanded-row-content">
+	<tr v-if="store.display[rowIndex].expanded" ref="rowExpanded" :tabindex="tabIndex" class="expanded-row">
+		<td :tabIndex="-1" :colspan="store.columns.length + 1" class="expanded-row-content">
 			<slot name="content" />
 		</td>
 	</tr>
 </template>
 
 <script setup lang="ts">
 import { type KeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
-import { computed, inject, useTemplateRef } from 'vue'
+import { computed, useTemplateRef } from 'vue'
 
-import TableDataStore from '.'
+import { createTableStore } from '@/stores/table'
 
 const {
 	rowIndex,
-	tableid,
+	store,
 	tabIndex = -1,
 	addNavigation,
 } = defineProps<{
 	rowIndex: number
-	tableid: string
+	store: ReturnType<typeof createTableStore>
 	tabIndex?: number
 	addNavigation?: boolean | KeypressHandlers
 }>()
 
-const tableData = inject<TableDataStore>(tableid)
 const rowRef = useTemplateRef<HTMLTableRowElement>('rowEl')
 // const expandedRowRef = useTemplateRef<HTMLDivElement>('rowExpanded')
 
 const rowExpandSymbol = computed(() => {
-	return tableData.display[rowIndex].expanded ? '▼' : '►'
+	return store.display[rowIndex].expanded ? '▼' : '►'
 })
 
 if (addNavigation) {
 	const handlers: KeypressHandlers = {
 		'keydown.control.g': (event: KeyboardEvent) => {
 			event.stopPropagation()
 			event.preventDefault()
-			tableData.toggleRowExpand(rowIndex)
+			store.toggleRowExpand(rowIndex)
 		},
 	}