@stonecrop/atable 0.2.5

package/src/components/ACell.vue

@@ -0,0 +1,213 @@
+<template>
+	<td
+		ref="cell"
+		:data-colindex="colIndex"
+		:data-rowindex="rowIndex"
+		:data-editable="tableData.columns[colIndex].edit"
+		:contenteditable="tableData.columns[colIndex].edit"
+		:tabindex="tabIndex"
+		:spellcheck="false"
+		:style="cellStyle"
+		@focus="onFocus"
+		@paste="onChange"
+		@blur="onChange"
+		@input="onChange"
+		@click="handleInput"
+		@mousedown="handleInput">
+		<component
+			v-if="tableData.columns[colIndex].cellComponent"
+			:is="tableData.columns[colIndex].cellComponent"
+			:value="displayValue"
+			v-bind="tableData.columns[colIndex].cellComponentProps">
+		</component>
+		<span v-else>{{ displayValue }}</span>
+	</td>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, inject, ref } from 'vue'
+
+import { defaultKeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
+import TableDataStore from '.'
+
+const props = withDefaults(
+	defineProps<{
+		colIndex: number
+		rowIndex: number
+		tableid: string
+		addNavigation?: boolean | object
+		tabIndex?: number
+		clickHandler?: (event: MouseEvent) => void
+	}>(),
+	{
+		tabIndex: 0,
+		addNavigation: true,
+	}
+)
+
+const tableData = inject<TableDataStore>(props.tableid)
+const cell = ref<HTMLTableCellElement>(null)
+
+let cellModified = ref(false)
+const displayValue = computed(() => {
+	const data = tableData.cellData<any>(props.colIndex, props.rowIndex)
+	if (tableData.columns[props.colIndex].format) {
+		const format = tableData.columns[props.colIndex].format
+		if (typeof format === 'function') {
+			return format(data)
+		} 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(data)
+		} else {
+			return data
+		}
+	} else {
+		return data
+	}
+})
+
+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)
+	}
+
+	if (tableData.columns[props.colIndex].modalComponent) {
+		const domRect = cell.value.getBoundingClientRect()
+		tableData.modal.visible = true
+		tableData.modal.colIndex = props.colIndex
+		tableData.modal.rowIndex = props.rowIndex
+		tableData.modal.parent = cell.value
+		tableData.modal.top = domRect.top + domRect.height
+		tableData.modal.left = domRect.left
+		tableData.modal.width = cellWidth.value
+		tableData.modal.component = tableData.columns[props.colIndex].modalComponent
+		tableData.modal.componentProps = tableData.columns[props.colIndex].modalComponentProps
+	}
+}
+
+if (props.addNavigation) {
+	let handlers = {
+		...defaultKeypressHandlers,
+		...{
+			'keydown.f2': handleInput,
+			'keydown.alt.up': handleInput,
+			'keydown.alt.down': handleInput,
+			'keydown.alt.left': handleInput,
+			'keydown.alt.right': handleInput,
+		},
+	}
+
+	if (typeof props.addNavigation === 'object') {
+		handlers = {
+			...handlers,
+			...props.addNavigation,
+		}
+	}
+
+	useKeyboardNav([
+		{
+			selectors: cell,
+			handlers: handlers,
+		},
+	])
+}
+
+// const updateData = (event: Event) => {
+// 	if (event) {
+// 		// custom components need to handle their own updateData, this is the default
+// 		if (!tableData.columns[props.colIndex].component) {
+// 			tableData.setCellData(props.rowIndex, props.colIndex, cell.value.innerHTML)
+// 		}
+// 		cellModified.value = true
+// 	}
+// }
+
+const textAlign = computed(() => {
+	return tableData.columns[props.colIndex].align || 'center'
+})
+
+const cellWidth = computed(() => {
+	return tableData.columns[props.colIndex].width || '40ch'
+})
+
+let currentData = ''
+const onFocus = () => {
+	if (cell.value) {
+		currentData = cell.value.innerText
+	}
+}
+
+const onChange = () => {
+	if (cell.value) {
+		if (cell.value.innerHTML !== currentData) {
+			currentData = cell.value.innerText
+			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)
+			}
+		}
+	}
+}
+
+const getIndent = (colKey: number, indent: number) => {
+	if (indent && colKey === 0 && indent > 0) {
+		return `${indent}ch`
+	} else {
+		return 'inherit'
+	}
+}
+
+const cellStyle: CSSProperties = {
+	textAlign: textAlign.value,
+	width: cellWidth.value,
+	backgroundColor: !cellModified.value ? 'inherit' : 'var(--cell-modified-color)',
+	fontWeight: !cellModified.value ? 'inherit' : 'bold',
+	paddingLeft: getIndent(props.colIndex, tableData.display[props.rowIndex]?.indent),
+}
+</script>
+
+<style scoped>
+@import url('@stonecrop/themes/default/default.css');
+td {
+	border-radius: 0px;
+	box-sizing: border-box;
+	margin: 0px;
+	outline: none;
+	box-shadow: none;
+	color: var(--cell-text-color);
+	text-overflow: ellipsis;
+	overflow: hidden;
+	padding-left: 0.5ch !important;
+	padding-right: 0.5ch;
+
+	padding-top: var(--atable-row-padding);
+	padding-bottom: var(--atable-row-padding);
+
+	border-spacing: 0px;
+	border-collapse: collapse;
+}
+
+td:focus,
+td:focus-within {
+	background-color: var(--focus-cell-background);
+	outline-width: 2px;
+	outline-style: solid;
+	outline-color: var(--focus-cell-outline);
+	box-shadow: none;
+	overflow: hidden;
+	min-height: 1.15em;
+	max-height: 1.15em;
+	overflow: hidden;
+}
+</style>

package/src/components/AExpansionRow.vue

@@ -0,0 +1,88 @@
+<template>
+	<tr v-bind="$attrs" ref="rowEl" :tabindex="tabIndex" class="expandable-row">
+		<td :tabIndex="-1" @click="tableData.toggleRowExpand(rowIndex)" class="row-index">
+			{{ getRowExpandSymbol() }}
+		</td>
+		<slot name="row" />
+	</tr>
+	<tr v-if="tableData.display[props.rowIndex].expanded" ref="rowExpanded" :tabindex="tabIndex" class="expanded-row">
+		<td :tabIndex="-1" :colspan="tableData.columns.length + 1" class="expanded-row-content">
+			<slot name="content" />
+		</td>
+	</tr>
+</template>
+
+<script setup lang="ts">
+import { TableRow } from 'types'
+import { inject, ref } from 'vue'
+
+import { useKeyboardNav } from '@stonecrop/utilities'
+
+import TableDataStore from '.'
+
+const props = withDefaults(
+	defineProps<{
+		row: TableRow
+		rowIndex: number
+		tableid: string
+		tabIndex?: number
+		addNavigation?: {
+			[key: string]: (ev: KeyboardEvent) => any
+		}
+	}>(),
+	{
+		tabIndex: -1,
+	}
+)
+
+const tableData = inject<TableDataStore>(props.tableid)
+const rowEl = ref<HTMLTableRowElement>(null)
+const rowExpanded = ref<HTMLDivElement>(null)
+
+const getRowExpandSymbol = () => {
+	return tableData.display[props.rowIndex].expanded ? '▼' : '►'
+}
+
+if (props.addNavigation !== undefined) {
+	const keyboardNav = Object.assign({}, props.addNavigation)
+	keyboardNav['keydown.control.g'] = (event: KeyboardEvent) => {
+		event.stopPropagation()
+		event.preventDefault()
+		tableData.toggleRowExpand(props.rowIndex)
+	}
+
+	useKeyboardNav([
+		{
+			selectors: rowEl,
+			handlers: keyboardNav,
+		},
+	])
+}
+</script>
+
+<style scoped>
+@import url('@stonecrop/themes/default/default.css');
+.row-index {
+	color: var(--header-text-color);
+	font-weight: bold;
+	text-align: center;
+	user-select: none;
+	width: 2ch;
+}
+
+.expandable-row {
+	border-top: 1px solid var(--row-border-color);
+	height: var(--atable-row-height);
+}
+
+.expanded-row {
+	border-bottom: 1px solid var(--row-border-color);
+	border-top: 1px solid var(--row-border-color);
+}
+
+.expanded-row-content {
+	border-bottom: 1px solid var(--row-border-color);
+	border-top: 1px solid var(--row-border-color);
+	padding: 1.5rem;
+}
+</style>

package/src/components/ARow.vue

@@ -0,0 +1,116 @@
+<template>
+	<tr ref="rowEl" :tabindex="tabIndex" v-show="rowVisible()" 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>
+
+		<!-- render cell content -->
+		<slot></slot>
+	</tr>
+</template>
+
+<script setup lang="ts">
+import { TableRow } from 'types'
+import { inject, ref } from 'vue'
+import { useKeyboardNav } from '@stonecrop/utilities'
+
+import TableDataStore from '.'
+
+const props = withDefaults(
+	defineProps<{
+		row: TableRow
+		rowIndex: number
+		tableid: string
+		tabIndex?: number
+		addNavigation?: object
+	}>(),
+	{
+		tabIndex: -1,
+	}
+)
+
+const tableData = inject<TableDataStore>(props.tableid)
+const rowEl = ref<HTMLTableRowElement>(null)
+const numberedRowWidth = tableData.numberedRowWidth.value
+
+const getRowExpandSymbol = () => {
+	if (tableData.config.view !== 'tree') {
+		return ''
+	}
+
+	if (tableData.display[props.rowIndex].isRoot) {
+		if (tableData.display[props.rowIndex].childrenOpen) {
+			return '-'
+		} else {
+			return '+'
+		}
+	}
+
+	if (tableData.display[props.rowIndex].isParent) {
+		if (tableData.display[props.rowIndex].childrenOpen) {
+			return '-'
+		} else {
+			return '+'
+		}
+	} else {
+		return ''
+	}
+}
+
+const rowVisible = () => {
+	return (
+		tableData.config.view !== 'tree' ||
+		tableData.display[props.rowIndex].isRoot ||
+		tableData.display[props.rowIndex].open
+	)
+}
+
+const toggleRowExpand = (rowIndex: number) => {
+	tableData.toggleRowExpand(rowIndex)
+}
+
+if (props.addNavigation) {
+	useKeyboardNav([
+		{
+			selectors: rowEl,
+			handlers: props.addNavigation,
+		},
+	])
+}
+</script>
+
+<style scoped>
+@import url('@stonecrop/themes/default/default.css');
+.table-row {
+	border-top: 1px solid var(--row-border-color);
+	height: var(--atable-row-height);
+}
+
+.list-index {
+	color: var(--header-text-color);
+	font-weight: bold;
+	padding-left: var(--atable-row-padding);
+	padding-right: 1em;
+	text-align: center;
+	user-select: none;
+	width: v-bind(numberedRowWidth);
+	max-width: v-bind(numberedRowWidth);
+}
+
+.tree-index {
+	color: var(--header-text-color);
+	font-weight: bold;
+	text-align: center;
+	user-select: none;
+	width: 2ch;
+}
+</style>

package/src/components/ATable.vue

@@ -0,0 +1,210 @@
+<template>
+	<table class="atable" :style="{ width: tableData.config.fullWidth ? '100%' : 'auto' }">
+		<slot name="header" :data="tableData">
+			<ATableHeader :columns="tableData.columns" :config="tableData.config" :tableid="tableData.id" />
+		</slot>
+
+		<tbody>
+			<slot name="body" :data="tableData">
+				<ARow
+					v-for="(row, rowIndex) in tableData.rows"
+					:key="row.id || v4()"
+					:row="row"
+					:rowIndex="rowIndex"
+					:tableid="tableData.id">
+					<ACell
+						v-for="(col, colIndex) in tableData.columns"
+						:key="`${colIndex}:${rowIndex}`"
+						:tableid="tableData.id"
+						:col="col"
+						spellcheck="false"
+						:rowIndex="rowIndex"
+						:colIndex="colIndex + (tableData.zeroColumn ? 0 : -1)"
+						:component="col.cellComponent"
+						:style="{
+							textAlign: col?.align || 'center',
+							minWidth: col?.width || '40ch',
+							width: tableData.config.fullWidth ? 'auto' : null,
+						}" />
+				</ARow>
+			</slot>
+		</tbody>
+
+		<slot name="footer" :data="tableData" />
+		<slot name="modal" :data="tableData">
+			<ATableModal
+				v-show="tableData.modal.visible"
+				:colIndex="tableData.modal.colIndex"
+				:rowIndex="tableData.modal.rowIndex"
+				:tableid="tableData.id"
+				:style="{
+					left: tableData.modal.left + 'px',
+					top: tableData.modal.top + 'px',
+					maxWidth: tableData.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" />
+				</template>
+			</ATableModal>
+		</slot>
+	</table>
+</template>
+
+<script setup lang="ts">
+import { v4 } from 'uuid'
+import { nextTick, provide, watch } from 'vue'
+
+import { TableColumn, TableConfig, TableRow } from 'types'
+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'
+
+const props = withDefaults(
+	defineProps<{
+		id?: string
+		modelValue: TableRow[]
+		columns: TableColumn[]
+		rows?: TableRow[]
+		config?: TableConfig
+		tableid?: string
+	}>(),
+	{
+		rows: () => [],
+		config: () => new Object(),
+	}
+)
+
+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)
+
+watch(
+	() => tableData.rows,
+	(newValue, oldValue) => {
+		emit('update:modelValue', newValue)
+	},
+	{ 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 moveCursorToEnd = (target: HTMLElement) => {
+	target.focus()
+	document.execCommand('selectAll', false, null)
+	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
+		}
+	}
+}
+
+window.addEventListener('click', clickOutside)
+window.addEventListener('keydown', (event: KeyboardEvent) => {
+	if (event.key === 'Escape') {
+		if (tableData.modal.visible) {
+			tableData.modal.visible = false
+
+			// 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()
+					}
+				})
+			}
+		}
+	}
+})
+</script>
+
+<style scoped>
+@import url('@stonecrop/themes/default/default.css');
+
+table {
+	display: table;
+	border-collapse: collapse;
+	caret-color: var(--brand-color);
+}
+
+table.atable,
+.atable {
+	font-family: var(--atable-font-family);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	font-size: var(--table-font-size);
+	border-collapse: collapse;
+}
+
+th {
+	box-sizing: border-box;
+	background-color: var(--brand-color);
+	border-width: 1px;
+	border-style: solid;
+	border-color: var(--header-border-color);
+	border-radius: 0px;
+	color: var(--header-text-color);
+}
+</style>

package/src/components/ATableHeader.vue

@@ -0,0 +1,60 @@
+<template>
+	<thead v-if="columns.length">
+		<tr class="atable-header-row" tabindex="-1">
+			<th v-if="tableData.zeroColumn" id="header-index" />
+			<th v-for="(column, colKey) in columns" :key="colKey" tabindex="-1" :style="getHeaderCellStyle(column)">
+				<slot>{{ column.label || String.fromCharCode(colKey + 97).toUpperCase() }}</slot>
+			</th>
+		</tr>
+	</thead>
+</template>
+
+<script setup lang="ts">
+import { CSSProperties, inject } from 'vue'
+
+import { TableColumn, TableConfig } from 'types'
+import TableDataStore from '.'
+
+const props = defineProps<{
+	columns: TableColumn[]
+	config?: TableConfig
+	tableid?: string
+}>()
+
+const tableData = inject<TableDataStore>(props.tableid)
+
+const numberedRowWidth = tableData.numberedRowWidth.value
+const getHeaderCellStyle = (column: TableColumn): CSSProperties => ({
+	minWidth: column.width || '40ch',
+	textAlign: column.align || 'center',
+	width: tableData.config.fullWidth ? 'auto' : null,
+})
+</script>
+
+<style scoped>
+@import url('@stonecrop/themes/default/default.css');
+thead {
+	background-color: var(--gray-5);
+}
+
+#header-index {
+	width: v-bind(numberedRowWidth);
+	max-width: v-bind(numberedRowWidth);
+}
+
+th {
+	border-width: 0px;
+	border-style: solid;
+	border-radius: 0px;
+	padding-left: 0.5ch;
+	padding-right: 0.5ch;
+	padding-top: var(--atable-row-padding);
+	padding-bottom: var(--atable-row-padding);
+	color: var(--gray-60);
+	height: var(--atable-row-height);
+}
+
+th:focus {
+	outline: none;
+}
+</style>