@stonecrop/atable 0.4.21 → 0.4.23

package/dist/src/stores/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/stores/table.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAAiB,MAAM,KAAK,CAAA;AAEvD,OAAO,KAAK,EACX,WAAW,EACX,cAAc,EACd,WAAW,EACX,WAAW,EACX,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,MAAM,UAAU,CAAA;AAGjB;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,UAAU;IAC1C,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;IAC9B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;IACxB,KAAK,CAAC,EAAE,UAAU,CAAA;CAClB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA6L4B,UAAU;kBApHhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCA0F7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCAzErC,WAAW,KAAG,aAAa;6BAmB/B,MAAM,YAAY,MAAM;0BAqF3B,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;2BATd,MAAM;6BAKJ,MAAM;4BAzDP,MAAM,YAAY,MAAM,SAAS,GAAG;4BAYpC,MAAM,YAAY,MAAM,SAAS,MAAM;gCA6DnC,MAAM;4BA4DV,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAlBlB,UAAU;kBApHhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCA0F7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCAzErC,WAAW,KAAG,aAAa;6BAmB/B,MAAM,YAAY,MAAM;0BAqF3B,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;2BATd,MAAM;6BAKJ,MAAM;4BAzDP,MAAM,YAAY,MAAM,SAAS,GAAG;4BAYpC,MAAM,YAAY,MAAM,SAAS,MAAM;gCA6DnC,MAAM;4BA4DV,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAlBlB,UAAU;kBApHhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCA0F7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCAzErC,WAAW,KAAG,aAAa;6BAmB/B,MAAM,YAAY,MAAM;0BAqF3B,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;2BATd,MAAM;6BAKJ,MAAM;4BAzDP,MAAM,YAAY,MAAM,SAAS,GAAG;4BAYpC,MAAM,YAAY,MAAM,SAAS,MAAM;gCA6DnC,MAAM;4BA4DV,cAAc;mQAwD9C,CAAA"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/stores/table.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAAiB,MAAM,KAAK,CAAA;AAEvD,OAAO,KAAK,EACX,WAAW,EACX,cAAc,EACd,WAAW,EACX,WAAW,EACX,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,MAAM,UAAU,CAAA;AAGjB;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,UAAU;IAC1C,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;IAC9B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;IACxB,KAAK,CAAC,EAAE,UAAU,CAAA;CAClB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAiM4B,UAAU;kBAxHhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCA8F7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCAzErC,WAAW,KAAG,aAAa;6BAmB/B,MAAM,YAAY,MAAM;0BAqF3B,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;2BATd,MAAM;6BAKJ,MAAM;4BA7DP,MAAM,YAAY,MAAM,SAAS,GAAG;4BAgBpC,MAAM,YAAY,MAAM,SAAS,MAAM;gCA6DnC,MAAM;4BA4DV,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAlBlB,UAAU;kBAxHhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCA8F7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCAzErC,WAAW,KAAG,aAAa;6BAmB/B,MAAM,YAAY,MAAM;0BAqF3B,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;2BATd,MAAM;6BAKJ,MAAM;4BA7DP,MAAM,YAAY,MAAM,SAAS,GAAG;4BAgBpC,MAAM,YAAY,MAAM,SAAS,MAAM;gCA6DnC,MAAM;4BA4DV,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAlBlB,UAAU;kBAxHhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCA8F7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCAzErC,WAAW,KAAG,aAAa;6BAmB/B,MAAM,YAAY,MAAM;0BAqF3B,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;2BATd,MAAM;6BAKJ,MAAM;4BA7DP,MAAM,YAAY,MAAM,SAAS,GAAG;4BAgBpC,MAAM,YAAY,MAAM,SAAS,MAAM;gCA6DnC,MAAM;4BA4DV,cAAc;mQAwD9C,CAAA"}

package/dist/stores/table.js

@@ -76,7 +76,11 @@ export const createTableStore = (initData) => {
                 display.value[rowIndex].rowModified = true;
             }
             table.value[index] = value;
-            rows.value[rowIndex][col.name] = value;
+            // Create a new row object to ensure reactivity
+            rows.value[rowIndex] = {
+                ...rows.value[rowIndex],
+                [col.name]: value,
+            };
         };
         const setCellText = (colIndex, rowIndex, value) => {
             const index = `${colIndex}:${rowIndex}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/atable",
-  "version": "0.4.21",
+  "version": "0.4.23",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -38,8 +38,8 @@
     "@vueuse/core": "^13.4.0",
     "pinia": "^3.0.3",
     "vue": "^3.5.17",
-    "@stonecrop/themes": "0.4.21",
-    "@stonecrop/utilities": "0.4.21"
+    "@stonecrop/themes": "0.4.23",
+    "@stonecrop/utilities": "0.4.23"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.26.29",

package/src/components/ACell.vue

@@ -10,7 +10,7 @@
 		:style="cellStyle"
 		@focus="onFocus"
 		@paste="updateCellData"
-		@input="updateCellData"
+		@input="debouncedUpdateCellData"
 		@click="showModal"
 		class="atable-cell"
 		:class="cellClasses">
@@ -26,7 +26,7 @@
 
 <script setup lang="ts">
 import { KeypressHandlers, defaultKeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
-import { useElementBounding } from '@vueuse/core'
+import { useDebounceFn, useElementBounding } from '@vueuse/core'
 import { computed, type CSSProperties, ref, useTemplateRef } from 'vue'
 
 import { createTableStore } from '../stores/table'
@@ -39,6 +39,7 @@ const {
 	addNavigation = true,
 	tabIndex = 0,
 	pinned = false,
+	debounce = 300,
 } = defineProps<{
 	colIndex: number
 	rowIndex: number
@@ -46,6 +47,7 @@ const {
 	addNavigation?: boolean | KeypressHandlers
 	tabIndex?: number
 	pinned?: boolean
+	debounce?: number
 }>()
 
 const cellRef = useTemplateRef<HTMLTableCellElement>('cell')
@@ -176,6 +178,8 @@ const updateCellData = (payload: Event) => {
 	}
 }
 
+const debouncedUpdateCellData = useDebounceFn(updateCellData, debounce)
+
 defineExpose({
 	currentData,
 })

package/src/components/ATable.vue

@@ -68,7 +68,7 @@
 <script setup lang="ts">
 import { vOnClickOutside } from '@vueuse/components'
 import { useMutationObserver } from '@vueuse/core'
-import { nextTick, watch, onMounted, useTemplateRef, computed } from 'vue'
+import { nextTick, onMounted, useTemplateRef, computed, watch } from 'vue'
 
 import ARow from './ARow.vue'
 import ATableHeader from './ATableHeader.vue'
@@ -76,28 +76,27 @@ import ATableModal from './ATableModal.vue'
 import { createTableStore } from '../stores/table'
 import type { GanttDragEvent, TableColumn, TableConfig, TableRow } from '../types'
 
+const modelValue = defineModel<TableRow[]>({ required: true })
+
 const {
 	id,
-	modelValue,
 	columns,
 	rows = [],
 	config = new Object(),
 } = defineProps<{
 	id?: string
-	modelValue: TableRow[]
 	columns: TableColumn[]
 	rows?: TableRow[]
 	config?: TableConfig
 }>()
 
 const emit = defineEmits<{
-	'update:modelValue': [value: TableRow[]]
 	cellUpdate: [{ colIndex: number; rowIndex: number; newValue: any; oldValue: any }]
 	'gantt:drag': [event: GanttDragEvent]
 }>()
 
 const tableRef = useTemplateRef<HTMLTableElement>('table')
-const rowsValue = modelValue ? modelValue : rows
+const rowsValue = modelValue.value.length > 0 ? modelValue.value : rows
 const store = createTableStore({ columns, rows: rowsValue, id, config })
 
 store.$onAction(({ name, store, args, after }) => {
@@ -105,6 +104,8 @@ store.$onAction(({ name, store, args, after }) => {
 		const [colIndex, rowIndex, newValue] = args
 		const oldValue = store.getCellData(colIndex, rowIndex)
 		after(() => {
+			// Update modelValue to trigger update:modelValue event
+			modelValue.value = [...store.rows]
 			emit('cellUpdate', { colIndex, rowIndex, newValue, oldValue })
 		})
 	} else if (name === 'updateGanttBar') {
@@ -124,10 +125,14 @@ store.$onAction(({ name, store, args, after }) => {
 	}
 })
 
+// Watch for external changes to modelValue and sync to store
 watch(
-	() => store.rows,
-	newValue => {
-		emit('update:modelValue', newValue)
+	() => modelValue.value,
+	newRows => {
+		// Only update if the rows have actually changed (avoid infinite loops)
+		if (JSON.stringify(newRows) !== JSON.stringify(store.rows)) {
+			store.rows = [...newRows]
+		}
 	},
 	{ deep: true }
 )

package/src/stores/table.ts

@@ -109,7 +109,11 @@ export const createTableStore = (initData: {
 			}
 
 			table.value[index] = value
-			rows.value[rowIndex][col.name] = value
+			// Create a new row object to ensure reactivity
+			rows.value[rowIndex] = {
+				...rows.value[rowIndex],
+				[col.name]: value,
+			}
 		}
 
 		const setCellText = (colIndex: number, rowIndex: number, value: string) => {