@stonecrop/atable 0.2.5 → 0.2.6

package/package.json

@@ -1,8 +1,20 @@
 {
   "name": "@stonecrop/atable",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "license": "MIT",
   "type": "module",
+  "author": {
+    "name": "Tyler Matteson",
+    "email": "tyler@agritheory.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/agritheory/stonecrop",
+    "directory": "atable"
+  },
+  "bugs": {
+    "url": "https://github.com/agritheory/stonecrop/issues"
+  },
   "exports": {
     ".": {
       "import": "./dist/atable.js",
@@ -12,45 +24,48 @@
   },
   "main": "dist/atable.js",
   "module": "dist/atable.js",
+  "umd": "dist/atable.umd.cjs",
   "types": "src/index",
   "files": [
     "dist/*",
-    "src/**/*.vue"
+    "src/*"
   ],
   "dependencies": {
     "uuid": "^9.0.0",
-    "vue": "^3.2.47",
-    "@stonecrop/utilities": "0.2.5",
-    "@stonecrop/themes": "0.2.5"
+    "vue": "^3.4.23",
+    "@stonecrop/themes": "0.2.6",
+    "@stonecrop/utilities": "0.2.6"
   },
   "devDependencies": {
-    "@histoire/plugin-vue": "^0.16.1",
+    "@histoire/plugin-vue": "^0.17.17",
     "@types/uuid": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^5.59.5",
     "@typescript-eslint/parser": "^5.59.5",
-    "@vitejs/plugin-vue": "^4.2.1",
-    "@vitest/coverage-c8": "^0.31.0",
-    "@vitest/ui": "^0.31.0",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitest/coverage-v8": "^1.5.0",
+    "@vitest/ui": "^1.5.0",
     "@vue/test-utils": "^2.3.2",
     "cypress": "^12.11.0",
     "eslint": "^8.40.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-vue": "^9.11.1",
-    "histoire": "^0.16.1",
+    "histoire": "^0.17.17",
     "jsdom": "^22.0.0",
     "typescript": "^5.0.4",
-    "vite": "^4.3.5",
-    "vitest": "^0.31.0",
+    "vite": "^5.2.9",
+    "vitest": "^1.5.0",
     "vue-router": "^4",
-    "@stonecrop/aform": "0.2.5"
+    "@stonecrop/aform": "0.2.6"
   },
   "peerDependencies": {
-    "@stonecrop/aform": "0.2.5"
+    "@stonecrop/aform": "0.2.6"
+  },
+  "publishConfig": {
+    "access": "public"
   },
   "engines": {
     "node": ">=20.11.0"
   },
-  "umd": "dist/atable.umd.cjs",
   "scripts": {
     "build": "tsc -b && vite build",
     "dev": "vite",

package/src/components/ATable.vue

@@ -91,7 +91,7 @@ provide(tableData.id, tableData)
 
 watch(
 	() => tableData.rows,
-	(newValue, oldValue) => {
+	newValue => {
 		emit('update:modelValue', newValue)
 	},
 	{ deep: true }
@@ -139,11 +139,11 @@ const formatCell = (event?: KeyboardEvent, column?: TableColumn, cellData?: any)
 	}
 }
 
-const moveCursorToEnd = (target: HTMLElement) => {
-	target.focus()
-	document.execCommand('selectAll', false, null)
-	document.getSelection().collapseToEnd()
-}
+// 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)) {

package/src/components/index.ts

@@ -0,0 +1,118 @@
+import { v4 } from 'uuid'
+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 || v4()
+		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({}, { modified: 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,
+				modified: 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) {
+		if (this.table[`${colIndex}:${rowIndex}`] !== value) {
+			this.display[rowIndex].modified = true
+		}
+		this.table[`${colIndex}:${rowIndex}`] = value
+		const col = this.columns[colIndex]
+		this.rows[rowIndex][col.name] = value
+		return this.table[`${colIndex}:${rowIndex}`]
+	}
+
+	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
+		}
+	}
+}

package/src/histoire.setup.ts

@@ -0,0 +1,24 @@
+import { defineSetupVue3 } from '@histoire/plugin-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 { ADate, AForm, ANumericInput, ATextInput } from '@stonecrop/aform'
+
+export const setupVue3 = defineSetupVue3(({ app }) => {
+	// TODO: (typing) add typing for ADate
+	app.component('ACell', ACell)
+	app.component('ADate', ADate)
+	app.component('AExpansionRow', AExpansionRow)
+	app.component('AForm', AForm)
+	app.component('ANumericInput', ANumericInput)
+	app.component('ARow', ARow)
+	app.component('ATable', ATable)
+	app.component('ATableHeader', ATableHeader)
+	app.component('ATableModal', ATableModal)
+	app.component('ATextInput', ATextInput)
+})

package/src/index.ts

@@ -0,0 +1,20 @@
+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'
+
+function install(app: App /* options */) {
+	app.component('ACell', ACell)
+	app.component('AExpansionRow', AExpansionRow)
+	app.component('ARow', ARow)
+	app.component('ATable', ATable)
+	app.component('ATableHeader', ATableHeader)
+	app.component('ATableModal', ATableModal)
+}
+
+export { install, ACell, AExpansionRow, ARow, ATable, ATableHeader, ATableModal, TableDataStore }

package/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+	import { ComponentOptions } from 'vue'
+	const Component: ComponentOptions
+	export default Component
+}

package/src/themes/default.css

@@ -0,0 +1,59 @@
+:root {
+	/* THEME COLORS */
+
+	/* General Colors */
+	--primary-color: #0098c9; /* primary action color, default blue */
+	--primary-text-color: #ffffff; /* text color paired with primary color, default white */
+	--brand-color: #202a44; /* brand color, default navy */
+
+	/* Grays */
+	--gray-5: #f2f2f2;
+	--gray-10: #e6e6e6;
+	--gray-20: #cccccc;
+	--gray-50: #808080;
+	--gray-60: #666666;
+	--gray-80: #333333;
+
+	/* Table Colors */
+	--row-color-zebra-light: #eeeeee;
+	--row-color-zebra-dark: #dddddd;
+	--focus-cell-background: #ffffff;
+	--focus-cell-outline: #827553;
+	--cell-border-color: #ffffff;
+	--cell-text-color: #3a3c41;
+	--active-cell-background: #ffffff;
+	--active-cell-outline: #e6a92d;
+	--row-border-color: var(--gray-20);
+	--header-border-color: #ffffff;
+	--header-text-color: var(--gray-20);
+	--row-number-background-color: #ffffff;
+
+	/* Form Colors */
+	--input-border-color: var(--gray-20);
+	--input-label-color: var(--gray-80);
+	--input-active-border-color: var(--primary-color);
+	--input-active-label-color: var(--primary-color);
+	--required-border: #e63c28;
+
+	/* FONT */
+	--font-size: 11pt;
+	--font-family: Arimo, Arial, sans-serif;
+	--table-font-size: 11pt;
+	--atable-font-family: 'Arimo', sans-serif;
+
+	/* TABLE */
+	--atable-row-padding: 10px;
+}
+
+html,
+body {
+	font-family: var(--atable-font-family);
+}
+
+.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;
+}