@stonecrop/atable 0.2.63 → 0.2.65

package/src/index.ts

@@ -1,13 +1,13 @@
 import { App } from 'vue'
 
-import ACell from '@/components/ACell.vue'
-import AExpansionRow from '@/components/AExpansionRow.vue'
-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 type { CellContext, TableColumn, TableConfig, TableDisplay, TableRow, TableModal } from '@/types'
+import ACell from './components/ACell.vue'
+import AExpansionRow from './components/AExpansionRow.vue'
+import ARow from './components/ARow.vue'
+import ATable from './components/ATable.vue'
+import ATableHeader from './components/ATableHeader.vue'
+import ATableModal from './components/ATableModal.vue'
+export { createTableStore } from './stores/table'
+export type { CellContext, TableColumn, TableConfig, TableDisplay, TableRow, TableModal } from './types'
 
 /**
  * Install all ATable components
@@ -23,4 +23,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 }

package/src/stores/table.ts

@@ -0,0 +1,214 @@
+import { defineStore } from 'pinia'
+import { type CSSProperties, computed, ref } from 'vue'
+
+import type { CellContext, TableColumn, TableConfig, TableDisplay, TableModal, TableRow } from '@/types'
+
+/**
+ * Create a table store
+ * @param initData - Initial data for the table store
+ * @returns table store instance
+ * @public
+ */
+export const createTableStore = (initData: {
+	columns: TableColumn[]
+	rows: TableRow[]
+	id?: string
+	config?: TableConfig
+	table?: { [key: string]: any }
+	display?: TableDisplay[]
+	modal?: TableModal
+}) => {
+	const id = initData.id || crypto.randomUUID()
+	const createStore = defineStore(`table-${id}`, () => {
+		// util functions
+		const createTableObject = () => {
+			const table = {}
+			for (const [colIndex, column] of columns.value.entries()) {
+				for (const [rowIndex, row] of rows.value.entries()) {
+					table[`${colIndex}:${rowIndex}`] = row[column.name]
+				}
+			}
+			return table
+		}
+
+		const createDisplayObject = (display?: TableDisplay[]) => {
+			const defaultDisplay: TableDisplay[] = [Object.assign({}, { rowModified: false })]
+
+			// TODO: (typing) what is the type of `display` here?
+			if (display) {
+				if ('0:0' in display) {
+					return display
+				}
+				// else if ('default' in display) {
+				// 	// TODO: (typing) what is the possible input here for 'default'?
+				// 	defaultDisplay = display.default
+				// }
+			}
+
+			// TODO: (typing) is this type correct for the parent set?
+			const parents = new Set<string | number>()
+			for (let rowIndex = rows.value.length - 1; rowIndex >= 0; rowIndex--) {
+				const row = rows.value[rowIndex]
+				if (row.parent) {
+					parents.add(row.parent)
+				}
+
+				defaultDisplay[rowIndex] = {
+					childrenOpen: false,
+					expanded: false,
+					indent: row.indent || null,
+					isParent: parents.has(rowIndex),
+					isRoot: row.parent === null || row.parent === undefined,
+					rowModified: false,
+					open: row.parent === null || row.parent === undefined,
+					parent: row.parent,
+				}
+			}
+
+			return defaultDisplay
+		}
+
+		// state
+		const columns = ref(initData.columns)
+		const rows = ref(initData.rows)
+		const config = ref(initData.config || {})
+		const table = ref(initData.table || createTableObject())
+		const display = ref(createDisplayObject(initData.display))
+		const modal = ref(initData.modal || { visible: false })
+
+		// getters
+		const hasPinnedColumns = computed(() => columns.value.some(col => col.pinned))
+
+		const numberedRowWidth = computed(() => {
+			const indent = Math.ceil(rows.value.length / 100 + 1)
+			return `${indent}ch`
+		})
+
+		const zeroColumn = computed(() => ['list', 'tree', 'list-expansion'].includes(config.value.view))
+
+		// actions
+		const getCellData = <T = any>(colIndex: number, rowIndex: number): T => table.value[`${colIndex}:${rowIndex}`]
+		const setCellData = (colIndex: number, rowIndex: number, value: any) => {
+			const index = `${colIndex}:${rowIndex}`
+			const col = columns.value[colIndex]
+
+			if (table.value[index] !== value) {
+				display.value[rowIndex].rowModified = true
+			}
+
+			table.value[index] = value
+			rows.value[rowIndex][col.name] = value
+		}
+
+		const getHeaderCellStyle = (column: TableColumn): CSSProperties => ({
+			minWidth: column.width || '40ch',
+			textAlign: column.align || 'center',
+			width: config.value.fullWidth ? 'auto' : null,
+		})
+
+		const isRowVisible = (rowIndex: number) => {
+			return config.value.view !== 'tree' || display.value[rowIndex].isRoot || display.value[rowIndex].open
+		}
+
+		const getRowExpandSymbol = (rowIndex: number) => {
+			if (config.value.view !== 'tree') {
+				return ''
+			}
+
+			if (display.value[rowIndex].isRoot || display.value[rowIndex].isParent) {
+				return display.value[rowIndex].childrenOpen ? '-' : '+'
+			}
+
+			return ''
+		}
+
+		const toggleRowExpand = (rowIndex: number) => {
+			if (config.value.view === 'tree') {
+				display.value[rowIndex].childrenOpen = !display.value[rowIndex].childrenOpen
+				for (let index = rows.value.length - 1; index >= 0; index--) {
+					if (display.value[index].parent === rowIndex) {
+						display.value[index].open = !display.value[index].open
+						if (display.value[index].childrenOpen) {
+							toggleRowExpand(index)
+						}
+					}
+				}
+			} else if (config.value.view === 'list-expansion') {
+				display.value[rowIndex].expanded = !display.value[rowIndex].expanded
+			}
+		}
+
+		const getCellDisplayValue = (colIndex: number, rowIndex: number) => {
+			const cellData = getCellData(colIndex, rowIndex)
+			return getFormattedValue(colIndex, rowIndex, cellData)
+		}
+
+		const getFormattedValue = (colIndex: number, rowIndex: number, value: any) => {
+			const column = columns.value[colIndex]
+			const row = rows.value[rowIndex]
+			const format = column.format
+
+			if (!format) {
+				return value
+			}
+
+			if (typeof format === 'function') {
+				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
+				const formatFn: (value: any, context?: CellContext) => string = Function(`"use strict";return (${format})`)()
+				return formatFn(value, { table: table.value, row, column })
+			}
+
+			return value
+		}
+
+		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 (modal.value.visible) modal.value.visible = false
+			} else if (!modal.value.parent?.contains(event.target)) {
+				if (modal.value.visible) modal.value.visible = false
+			}
+		}
+
+		const getIndent = (colIndex: number, indentLevel?: number) => {
+			if (indentLevel && colIndex === 0 && indentLevel > 0) {
+				return `${indentLevel}ch`
+			} else {
+				return 'inherit'
+			}
+		}
+
+		return {
+			// state
+			columns,
+			rows,
+			config,
+			table,
+			display,
+			modal,
+
+			// getters
+			hasPinnedColumns,
+			numberedRowWidth,
+			zeroColumn,
+
+			// actions
+			closeModal,
+			getCellData,
+			getCellDisplayValue,
+			getFormattedValue,
+			getHeaderCellStyle,
+			getIndent,
+			getRowExpandSymbol,
+			isRowVisible,
+			setCellData,
+			toggleRowExpand,
+		}
+	})
+
+	return createStore()
+}

package/src/types/index.ts

@@ -1,5 +1,7 @@
-import TableDataStore from '@/components'
-
+/**
+ * Table column definition.
+ * @public
+ */
 export type TableColumn = {
 	name: string
 
@@ -19,12 +21,20 @@ export type TableColumn = {
 	mask?: (value: any) => any
 }
 
+/**
+ * Table cell context definition.
+ * @public
+ */
 export type CellContext = {
 	row: TableRow
 	column: TableColumn
-	table: TableDataStore['table']
+	table: { [key: string]: any }
 }
 
+/**
+ * Table configuration definition.
+ * @public
+ */
 export type TableConfig = {
 	/**
 	 * The type of view to display the table in. Possible values:
@@ -37,6 +47,10 @@ export type TableConfig = {
 	fullWidth?: boolean
 }
 
+/**
+ * Table display definition.
+ * @public
+ */
 export type TableDisplay = {
 	childrenOpen?: boolean
 	expanded?: boolean
@@ -48,12 +62,20 @@ export type TableDisplay = {
 	rowModified?: boolean
 }
 
+/**
+ * Table row definition.
+ * @public
+ */
 export type TableRow = {
 	[key: string]: any
 	indent?: number
 	parent?: number
 }
 
+/**
+ * Table modal definition.
+ * @public
+ */
 export type TableModal = {
 	colIndex?: number
 	event?: string

package/dist/components/index.js

@@ -1,97 +0,0 @@
-import { computed, reactive } from 'vue';
-export default class TableDataStore {
-    id;
-    rows;
-    columns;
-    config;
-    table;
-    display;
-    modal;
-    constructor(id, columns, rows, config, table, display) {
-        this.id = id || crypto.randomUUID();
-        this.rows = rows;
-        this.columns = reactive(columns);
-        this.config = reactive(config);
-        this.table = table || reactive(this.createTableObject());
-        this.display = this.createDisplayObject(display);
-        this.modal = reactive({ visible: false });
-    }
-    createTableObject() {
-        const table = {};
-        for (const [colIndex, column] of this.columns.entries()) {
-            for (const [rowIndex, row] of this.rows.entries()) {
-                table[`${colIndex}:${rowIndex}`] = row[column.name];
-            }
-        }
-        return table;
-    }
-    createDisplayObject(display) {
-        const defaultDisplay = [Object.assign({}, { rowModified: false })];
-        // TODO: (typing) what is the type of `display` here?
-        if (display) {
-            if ('0:0' in display) {
-                return display;
-            }
-            // else if ('default' in display) {
-            // 	// TODO: (typing) what is the possible input here for 'default'?
-            // 	defaultDisplay = display.default
-            // }
-        }
-        // TODO: (typing) is this type correct for the parent set?
-        const parents = new Set();
-        for (let rowIndex = this.rows.length - 1; rowIndex >= 0; rowIndex--) {
-            const row = this.rows[rowIndex];
-            if (row.parent) {
-                parents.add(row.parent);
-            }
-            defaultDisplay[rowIndex] = {
-                childrenOpen: false,
-                expanded: false,
-                indent: row.indent || null,
-                isParent: parents.has(rowIndex),
-                isRoot: row.parent === null || row.parent === undefined,
-                rowModified: false,
-                open: row.parent === null || row.parent === undefined,
-                parent: row.parent,
-            };
-        }
-        return reactive(defaultDisplay);
-    }
-    get zeroColumn() {
-        return ['list', 'tree', 'list-expansion'].includes(this.config.view);
-    }
-    get numberedRowWidth() {
-        return computed(() => {
-            return String(Math.ceil(this.rows.length / 100) + 1) + 'ch';
-        });
-    }
-    cellData(colIndex, rowIndex) {
-        return this.table[`${colIndex}:${rowIndex}`];
-    }
-    setCellData(rowIndex, colIndex, value) {
-        const index = `${colIndex}:${rowIndex}`;
-        const col = this.columns[colIndex];
-        if (this.table[index] !== value) {
-            this.display[rowIndex].rowModified = true;
-        }
-        this.table[index] = value;
-        this.rows[rowIndex][col.name] = value;
-        return this.table[index];
-    }
-    toggleRowExpand(rowIndex) {
-        if (this.config.view === 'tree') {
-            this.display[rowIndex].childrenOpen = !this.display[rowIndex].childrenOpen;
-            for (let index = this.rows.length - 1; index >= 0; index--) {
-                if (this.display[index].parent === rowIndex) {
-                    this.display[index].open = !this.display[index].open;
-                    if (this.display[index].childrenOpen) {
-                        this.toggleRowExpand(index);
-                    }
-                }
-            }
-        }
-        else if (this.config.view === 'list-expansion') {
-            this.display[rowIndex].expanded = !this.display[rowIndex].expanded;
-        }
-    }
-}

package/dist/src/components/index.d.ts

@@ -1,23 +0,0 @@
-import type { TableDisplay, TableRow, TableColumn, TableConfig, TableModal } from '@/types';
-export default class TableDataStore {
-    id: string;
-    rows: TableRow[];
-    columns: TableColumn[];
-    config: TableConfig;
-    table: {
-        [key: string]: any;
-    };
-    display: TableDisplay[];
-    modal: TableModal;
-    constructor(id?: string, columns?: TableColumn[], rows?: TableRow[], config?: TableConfig, table?: {
-        [key: string]: any;
-    }, display?: TableDisplay[]);
-    createTableObject(): {};
-    createDisplayObject(display?: TableDisplay[]): (TableDisplay[] & Record<"0:0", unknown>) | import("vue").Reactive<TableDisplay[]>;
-    get zeroColumn(): boolean;
-    get numberedRowWidth(): import("vue").ComputedRef<string>;
-    cellData<T>(colIndex: number, rowIndex: number): T;
-    setCellData(rowIndex: number, colIndex: number, value: any): any;
-    toggleRowExpand(rowIndex: number): void;
-}
-//# sourceMappingURL=index.d.ts.map

package/dist/src/components/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAE3F,MAAM,CAAC,OAAO,OAAO,cAAc;IAClC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,MAAM,EAAE,WAAW,CAAA;IACnB,KAAK,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;IAC7B,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,KAAK,EAAE,UAAU,CAAA;gBAGhB,EAAE,CAAC,EAAE,MAAM,EACX,OAAO,CAAC,EAAE,WAAW,EAAE,EACvB,IAAI,CAAC,EAAE,QAAQ,EAAE,EACjB,MAAM,CAAC,EAAE,WAAW,EACpB,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAC9B,OAAO,CAAC,EAAE,YAAY,EAAE;IAWzB,iBAAiB;IAUjB,mBAAmB,CAAC,OAAO,CAAC,EAAE,YAAY,EAAE;IAqC5C,IAAI,UAAU,YAEb;IAED,IAAI,gBAAgB,sCAInB;IAED,QAAQ,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;IAIlD,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG;IAa1D,eAAe,CAAC,QAAQ,EAAE,MAAM;CAehC"}

package/src/components/index.ts

@@ -1,120 +0,0 @@
-import { computed, reactive } from 'vue'
-
-import type { TableDisplay, TableRow, TableColumn, TableConfig, TableModal } from '@/types'
-
-export default class TableDataStore {
-	id: string
-	rows: TableRow[]
-	columns: TableColumn[]
-	config: TableConfig
-	table: { [key: string]: any }
-	display: TableDisplay[]
-	modal: TableModal
-
-	constructor(
-		id?: string,
-		columns?: TableColumn[],
-		rows?: TableRow[],
-		config?: TableConfig,
-		table?: { [key: string]: any },
-		display?: TableDisplay[]
-	) {
-		this.id = id || crypto.randomUUID()
-		this.rows = rows
-		this.columns = reactive(columns)
-		this.config = reactive(config)
-		this.table = table || reactive(this.createTableObject())
-		this.display = this.createDisplayObject(display)
-		this.modal = reactive({ visible: false })
-	}
-
-	createTableObject() {
-		const table = {}
-		for (const [colIndex, column] of this.columns.entries()) {
-			for (const [rowIndex, row] of this.rows.entries()) {
-				table[`${colIndex}:${rowIndex}`] = row[column.name]
-			}
-		}
-		return table
-	}
-
-	createDisplayObject(display?: TableDisplay[]) {
-		const defaultDisplay: TableDisplay[] = [Object.assign({}, { rowModified: false })]
-
-		// TODO: (typing) what is the type of `display` here?
-		if (display) {
-			if ('0:0' in display) {
-				return display
-			}
-			// else if ('default' in display) {
-			// 	// TODO: (typing) what is the possible input here for 'default'?
-			// 	defaultDisplay = display.default
-			// }
-		}
-
-		// TODO: (typing) is this type correct for the parent set?
-		const parents = new Set<string | number>()
-		for (let rowIndex = this.rows.length - 1; rowIndex >= 0; rowIndex--) {
-			const row = this.rows[rowIndex]
-			if (row.parent) {
-				parents.add(row.parent)
-			}
-
-			defaultDisplay[rowIndex] = {
-				childrenOpen: false,
-				expanded: false,
-				indent: row.indent || null,
-				isParent: parents.has(rowIndex),
-				isRoot: row.parent === null || row.parent === undefined,
-				rowModified: false,
-				open: row.parent === null || row.parent === undefined,
-				parent: row.parent,
-			}
-		}
-
-		return reactive(defaultDisplay)
-	}
-
-	get zeroColumn() {
-		return ['list', 'tree', 'list-expansion'].includes(this.config.view)
-	}
-
-	get numberedRowWidth() {
-		return computed(() => {
-			return String(Math.ceil(this.rows.length / 100) + 1) + 'ch'
-		})
-	}
-
-	cellData<T>(colIndex: number, rowIndex: number): T {
-		return this.table[`${colIndex}:${rowIndex}`]
-	}
-
-	setCellData(rowIndex: number, colIndex: number, value: any) {
-		const index = `${colIndex}:${rowIndex}`
-		const col = this.columns[colIndex]
-
-		if (this.table[index] !== value) {
-			this.display[rowIndex].rowModified = true
-		}
-
-		this.table[index] = value
-		this.rows[rowIndex][col.name] = value
-		return this.table[index]
-	}
-
-	toggleRowExpand(rowIndex: number) {
-		if (this.config.view === 'tree') {
-			this.display[rowIndex].childrenOpen = !this.display[rowIndex].childrenOpen
-			for (let index = this.rows.length - 1; index >= 0; index--) {
-				if (this.display[index].parent === rowIndex) {
-					this.display[index].open = !this.display[index].open
-					if (this.display[index].childrenOpen) {
-						this.toggleRowExpand(index)
-					}
-				}
-			}
-		} else if (this.config.view === 'list-expansion') {
-			this.display[rowIndex].expanded = !this.display[rowIndex].expanded
-		}
-	}
-}