@stonecrop/atable 0.2.63 → 0.2.64

package/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,34 +76,10 @@ 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
@@ -112,21 +87,23 @@ const showModal = () => {
 	}
 
 	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>

package/src/components/AExpansionRow.vue

@@ -1,12 +1,12 @@
 <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>
@@ -14,28 +14,27 @@
 
 <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) {
@@ -43,7 +42,7 @@ if (addNavigation) {
 		'keydown.control.g': (event: KeyboardEvent) => {
 			event.stopPropagation()
 			event.preventDefault()
-			tableData.toggleRowExpand(rowIndex)
+			store.toggleRowExpand(rowIndex)
 		},
 	}
 

package/src/components/ARow.vue

@@ -1,20 +1,20 @@
 <template>
 	<tr ref="rowEl" :tabindex="tabIndex" v-show="isRowVisible" class="table-row">
 		<!-- render numbered/tree view index; skip render for uncounted lists -->
-		<slot name="index" v-if="tableData.config.view !== 'uncounted'">
+		<slot name="index" v-if="store.config.view !== 'uncounted'">
 			<td
-				v-if="tableData.config.view === 'list'"
+				v-if="store.config.view === 'list'"
 				:tabIndex="-1"
 				class="list-index"
-				:class="hasPinnedColumns ? 'sticky-index' : ''">
+				:class="store.hasPinnedColumns ? 'sticky-index' : ''">
 				{{ rowIndex + 1 }}
 			</td>
 			<td
-				v-else-if="tableData.config.view === 'tree'"
+				v-else-if="store.config.view === 'tree'"
 				:tabIndex="-1"
 				class="tree-index"
-				:class="hasPinnedColumns ? 'sticky-index' : ''"
-				@click="toggleRowExpand(rowIndex)">
+				:class="store.hasPinnedColumns ? 'sticky-index' : ''"
+				@click="store.toggleRowExpand(rowIndex)">
 				{{ rowExpandSymbol }}
 			</td>
 		</slot>
@@ -26,46 +26,25 @@
 
 <script setup lang="ts">
 import { type KeypressHandlers, useKeyboardNav, defaultKeypressHandlers } from '@stonecrop/utilities'
-import { computed, inject, useTemplateRef } from 'vue'
+import { useTemplateRef } from 'vue'
 
-import TableDataStore from '.'
+import { createTableStore } from '@/stores/table'
 
 const {
 	rowIndex,
-	tableid,
+	store,
 	tabIndex = -1,
 	addNavigation = false, // default to allowing cell navigation
 } = 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 hasPinnedColumns = computed(() => tableData.columns.some(col => col.pinned))
-
-const isRowVisible = computed(() => {
-	return tableData.config.view !== 'tree' || tableData.display[rowIndex].isRoot || tableData.display[rowIndex].open
-})
-
-const rowExpandSymbol = computed(() => {
-	if (tableData.config.view !== 'tree') {
-		return ''
-	}
-
-	if (tableData.display[rowIndex].isRoot || tableData.display[rowIndex].isParent) {
-		return tableData.display[rowIndex].childrenOpen ? '-' : '+'
-	}
-
-	return ''
-})
-
-const toggleRowExpand = (rowIndex: number) => {
-	tableData.toggleRowExpand(rowIndex)
-}
+const isRowVisible = store.isRowVisible(rowIndex)
+const rowExpandSymbol = store.getRowExpandSymbol(rowIndex)
 
 if (addNavigation) {
 	let handlers = defaultKeypressHandlers
@@ -94,6 +73,7 @@ if (addNavigation) {
 	display: flex;
 	background-color: white;
 }
+
 .list-index {
 	color: var(--sc-header-text-color);
 	font-weight: bold;
@@ -108,6 +88,7 @@ if (addNavigation) {
 	padding-top: var(--sc-atable-row-padding);
 	padding-bottom: var(--sc-atable-row-padding);
 }
+
 .tree-index {
 	color: var(--sc-header-text-color);
 	font-weight: bold;

package/src/components/ATable.vue

@@ -1,25 +1,16 @@
 <template>
-	<table
-		ref="table"
-		class="atable"
-		:style="{ width: tableData.config.fullWidth ? '100%' : 'auto' }"
-		v-on-click-outside="closeModal">
-		<slot name="header" :data="tableData">
-			<ATableHeader :columns="tableData.columns" :tableid="tableData.id" />
+	<table ref="table" class="atable" :style="{ width: store.config.fullWidth ? '100%' : 'auto' }">
+		<slot name="header" :data="store">
+			<ATableHeader :columns="store.columns" :store="store" />
 		</slot>
 
 		<tbody>
-			<slot name="body" :data="tableData">
-				<ARow
-					v-for="(row, rowIndex) in tableData.rows"
-					:key="row.id"
-					:row="row"
-					:rowIndex="rowIndex"
-					:tableid="tableData.id">
+			<slot name="body" :data="store">
+				<ARow v-for="(row, rowIndex) in store.rows" :key="row.id" :row="row" :rowIndex="rowIndex" :store="store">
 					<ACell
-						v-for="(col, colIndex) in tableData.columns"
+						v-for="(col, colIndex) in store.columns"
 						:key="col.name"
-						:tableid="tableData.id"
+						:store="store"
 						:col="col"
 						spellcheck="false"
 						:pinned="col.pinned"
@@ -29,32 +20,32 @@
 						:style="{
 							textAlign: col?.align || 'center',
 							minWidth: col?.width || '40ch',
-							width: tableData.config.fullWidth ? 'auto' : null,
+							width: store.config.fullWidth ? 'auto' : null,
 						}" />
 				</ARow>
 			</slot>
 		</tbody>
 
-		<slot name="footer" :data="tableData" />
-		<slot name="modal" :data="tableData">
+		<slot name="footer" :data="store" />
+		<slot name="modal" :data="store">
 			<ATableModal
-				v-show="tableData.modal.visible"
-				:colIndex="tableData.modal.colIndex"
-				:rowIndex="tableData.modal.rowIndex"
-				:tableid="tableData.id"
+				v-show="store.modal.visible"
+				:colIndex="store.modal.colIndex"
+				:rowIndex="store.modal.rowIndex"
+				:store="store"
 				:style="{
-					left: tableData.modal.left + 'px',
-					top: tableData.modal.top + 'px',
-					maxWidth: tableData.modal.width + 'px',
+					left: store.modal.left + 'px',
+					top: store.modal.top + 'px',
+					maxWidth: store.modal.width + 'px',
 				}">
 				<template #default>
 					<component
-						:key="`${tableData.modal.rowIndex}:${tableData.modal.colIndex}`"
-						:is="tableData.modal.component"
-						:colIndex="tableData.modal.colIndex"
-						:rowIndex="tableData.modal.rowIndex"
-						:tableid="tableData.id"
-						v-bind="tableData.modal.componentProps" />
+						:key="`${store.modal.rowIndex}:${store.modal.colIndex}`"
+						:is="store.modal.component"
+						:colIndex="store.modal.colIndex"
+						:rowIndex="store.modal.rowIndex"
+						:store="store"
+						v-bind="store.modal.componentProps" />
 				</template>
 			</ATableModal>
 		</slot>
@@ -62,15 +53,14 @@
 </template>
 
 <script setup lang="ts">
-import { vOnClickOutside } from '@vueuse/components'
 import { useMutationObserver } from '@vueuse/core'
-import { nextTick, provide, watch, onMounted, useTemplateRef } from 'vue'
+import { nextTick, watch, onMounted, useTemplateRef } from 'vue'
 
-import TableDataStore from '.'
 import ACell from '@/components/ACell.vue'
 import ARow from '@/components/ARow.vue'
 import ATableHeader from '@/components/ATableHeader.vue'
 import ATableModal from '@/components/ATableModal.vue'
+import { createTableStore } from '@/stores/table'
 import type { TableColumn, TableConfig, TableRow } from '@/types'
 
 const {
@@ -87,15 +77,25 @@ const {
 	config?: TableConfig
 }>()
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+	'update:modelValue': [value: TableRow[]]
+	cellUpdate: [colIndex: number, rowIndex: number, newCellValue: any, prevCellValue: any]
+}>()
 
 const tableRef = useTemplateRef<HTMLTableElement>('table')
 const rowsValue = modelValue ? modelValue : rows
-const tableData = new TableDataStore(id, columns, rowsValue, config)
-provide(tableData.id, tableData)
+const store = createTableStore({ columns, rows: rowsValue, id, config })
+
+store.$onAction(({ name, store, args }) => {
+	if (name === 'setCellData') {
+		const [colIndex, rowIndex, newCellValue] = args
+		const prevCellValue = store.getCellData(colIndex, rowIndex)
+		emit('cellUpdate', [colIndex, rowIndex, newCellValue, prevCellValue])
+	}
+})
 
 watch(
-	() => tableData.rows,
+	() => store.rows,
 	newValue => {
 		emit('update:modelValue', newValue)
 	},
@@ -107,7 +107,7 @@ onMounted(() => {
 		assignStickyCellWidths()
 
 		// in tree view, also add a mutation observer to capture and adjust expanded rows
-		if (tableData.config.view === 'tree') {
+		if (store.config.view === 'tree') {
 			useMutationObserver(tableRef, assignStickyCellWidths, { childList: true, subtree: true })
 		}
 	}
@@ -153,12 +153,12 @@ const assignStickyCellWidths = () => {
 // 	if (event) {
 // 		colIndex = target.cellIndex
 // 	} else if (column && cellData) {
-// 		colIndex = tableData.columns.indexOf(column)
+// 		colIndex = store.columns.indexOf(column)
 // 	}
 
-// 	if (!column && 'format' in tableData.columns[colIndex]) {
+// 	if (!column && 'format' in store.columns[colIndex]) {
 // 		// TODO: (utils) create helper to extract format from string
-// 		const format = tableData.columns[colIndex].format
+// 		const format = store.columns[colIndex].format
 // 		if (typeof format === 'function') {
 // 			return format(target.innerHTML)
 // 		} else if (typeof format === 'string') {
@@ -195,23 +195,13 @@ const assignStickyCellWidths = () => {
 // 	document.getSelection().collapseToEnd()
 // }
 
-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('keydown', (event: KeyboardEvent) => {
 	if (event.key === 'Escape') {
-		if (tableData.modal.visible) {
-			tableData.modal.visible = false
+		if (store.modal.visible) {
+			store.modal.visible = false
 
 			// focus on the parent cell again
-			const $parent = tableData.modal.parent
+			const $parent = store.modal.parent
 			if ($parent) {
 				// wait for the modal to close before focusing
 				void nextTick().then(() => {
@@ -222,7 +212,7 @@ window.addEventListener('keydown', (event: KeyboardEvent) => {
 	}
 })
 
-defineExpose({ tableData })
+defineExpose({ store })
 </script>
 
 <style>

package/src/components/ATableHeader.vue

@@ -2,19 +2,19 @@
 	<thead id="resizable" v-if="columns.length">
 		<tr class="atable-header-row" tabindex="-1">
 			<th
-				v-if="tableData.zeroColumn"
+				v-if="store.zeroColumn"
 				id="header-index"
 				:class="[
-					hasPinnedColumns ? 'sticky-index' : '',
-					tableData.config.view === 'tree' ? 'tree-index' : '',
-					tableData.config.view === 'list-expansion' ? 'list-expansion-index' : '',
+					store.hasPinnedColumns ? 'sticky-index' : '',
+					store.config.view === 'tree' ? 'tree-index' : '',
+					store.config.view === 'list-expansion' ? 'list-expansion-index' : '',
 				]"
 				class="list-index" />
 			<th
 				v-for="(column, colKey) in columns"
 				:key="column.name"
 				tabindex="-1"
-				:style="getHeaderCellStyle(column)"
+				:style="store.getHeaderCellStyle(column)"
 				:class="column.pinned ? 'sticky-column' : ''">
 				<slot>{{ column.label || String.fromCharCode(colKey + 97).toUpperCase() }}</slot>
 			</th>
@@ -23,22 +23,13 @@
 </template>
 
 <script setup lang="ts">
-import { CSSProperties, inject, computed } from 'vue'
-
-import TableDataStore from '.'
+import { createTableStore } from '@/stores/table'
 import type { TableColumn } from '@/types'
 
-const { columns, tableid } = defineProps<{ columns: TableColumn[]; tableid?: string }>()
-
-const tableData = inject<TableDataStore>(tableid)
-
-const hasPinnedColumns = computed(() => tableData.columns.some(col => col.pinned))
-
-const getHeaderCellStyle = (column: TableColumn): CSSProperties => ({
-	minWidth: column.width || '40ch',
-	textAlign: column.align || 'center',
-	width: tableData.config.fullWidth ? 'auto' : null,
-})
+const { columns, store } = defineProps<{
+	columns: TableColumn[]
+	store: ReturnType<typeof createTableStore>
+}>()
 </script>
 
 <style>

package/src/components/ATableModal.vue

@@ -5,20 +5,17 @@
 </template>
 
 <script setup lang="ts">
-// import { inject } from 'vue'
+import { createTableStore } from '@/stores/table'
 
-// import TableDataStore from '.'
-
-/* const { colIndex, rowIndex, tableid } = */ defineProps<{
+/* const { colIndex, rowIndex, store } = */ defineProps<{
 	colIndex?: number
 	rowIndex?: number
-	tableid?: string
+	store?: ReturnType<typeof createTableStore>
 }>()
 
-// const tableData = inject<TableDataStore>(tableid)
 // const cellBackgroundColor = computed(() => {
-// 	if (tableData.modal.parent) {
-// 		let computedstyle = window.getComputedStyle(tableData.modal.parent)
+// 	if (store.modal.parent) {
+// 		let computedstyle = window.getComputedStyle(store.modal.parent)
 // 		return 'blue'
 // 	} else {
 // 		return 'inherit'

package/src/index.ts

@@ -1,3 +1,4 @@
+import { createPinia } from 'pinia'
 import { App } from 'vue'
 
 import ACell from '@/components/ACell.vue'
@@ -6,7 +7,7 @@ import ARow from '@/components/ARow.vue'
 import ATable from '@/components/ATable.vue'
 import ATableHeader from '@/components/ATableHeader.vue'
 import ATableModal from '@/components/ATableModal.vue'
-import TableDataStore from './components'
+export { createTableStore } from '@/stores/table'
 export type { CellContext, TableColumn, TableConfig, TableDisplay, TableRow, TableModal } from '@/types'
 
 /**
@@ -15,6 +16,9 @@ export type { CellContext, TableColumn, TableConfig, TableDisplay, TableRow, Tab
  * @public
  */
 function install(app: App /* options */) {
+	const pinia = createPinia()
+	app.use(pinia)
+
 	app.component('ACell', ACell)
 	app.component('AExpansionRow', AExpansionRow)
 	app.component('ARow', ARow)
@@ -23,4 +27,4 @@ function install(app: App /* options */) {
 	app.component('ATableModal', ATableModal)
 }
 
-export { install, ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableModal, TableDataStore }
+export { install, ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableModal }