diff --git a/aform/CHANGELOG.json b/aform/CHANGELOG.json index e3af13a4..72510182 100644 --- a/aform/CHANGELOG.json +++ b/aform/CHANGELOG.json @@ -1,6 +1,30 @@ { "name": "@stonecrop/aform", "entries": [ + { + "version": "0.2.64", + "tag": "@stonecrop/aform_v0.2.64", + "date": "Wed, 11 Dec 2024 07:45:13 GMT", + "comments": { + "minor": [ + { + "comment": "update dependencies" + } + ] + } + }, + { + "version": "0.2.63", + "tag": "@stonecrop/aform_v0.2.63", + "date": "Mon, 09 Dec 2024 18:06:22 GMT", + "comments": {} + }, + { + "version": "0.2.62", + "tag": "@stonecrop/aform_v0.2.62", + "date": "Thu, 05 Dec 2024 14:20:47 GMT", + "comments": {} + }, { "version": "0.2.61", "tag": "@stonecrop/aform_v0.2.61", diff --git a/aform/CHANGELOG.md b/aform/CHANGELOG.md index b66f0e54..b7d360ab 100644 --- a/aform/CHANGELOG.md +++ b/aform/CHANGELOG.md @@ -1,6 +1,23 @@ # Change Log - @stonecrop/aform -This log was last generated on Tue, 03 Dec 2024 06:50:08 GMT and should not be manually modified. +This log was last generated on Wed, 11 Dec 2024 07:45:13 GMT and should not be manually modified. + +## 0.2.64 +Wed, 11 Dec 2024 07:45:13 GMT + +### Minor changes + +- update dependencies + +## 0.2.63 +Mon, 09 Dec 2024 18:06:22 GMT + +_Version update only_ + +## 0.2.62 +Thu, 05 Dec 2024 14:20:47 GMT + +_Version update only_ ## 0.2.61 Tue, 03 Dec 2024 06:50:08 GMT diff --git a/aform/package.json b/aform/package.json index 852be10e..94e40d56 100644 --- a/aform/package.json +++ b/aform/package.json @@ -1,6 +1,6 @@ { "name": "@stonecrop/aform", - "version": "0.2.61", + "version": "0.2.64", "license": "MIT", "type": "module", "author": { @@ -45,7 +45,7 @@ "@stonecrop/themes": "workspace:*", "@stonecrop/utilities": "workspace:*", "@vueuse/core": "^11.1.0", - "vue": "^3.5.6" + "vue": "^3.5.11" }, "devDependencies": { "@microsoft/api-documenter": "^7.25.3", diff --git a/atable/CHANGELOG.json b/atable/CHANGELOG.json index 24f3d6f5..ad10c832 100644 --- a/atable/CHANGELOG.json +++ b/atable/CHANGELOG.json @@ -1,6 +1,36 @@ { "name": "@stonecrop/atable", "entries": [ + { + "version": "0.2.64", + "tag": "@stonecrop/atable_v0.2.64", + "date": "Wed, 11 Dec 2024 07:45:13 GMT", + "comments": { + "minor": [ + { + "comment": "use pinia to track table state" + } + ] + } + }, + { + "version": "0.2.63", + "tag": "@stonecrop/atable_v0.2.63", + "date": "Mon, 09 Dec 2024 18:06:22 GMT", + "comments": {} + }, + { + "version": "0.2.62", + "tag": "@stonecrop/atable_v0.2.62", + "date": "Thu, 05 Dec 2024 14:20:47 GMT", + "comments": { + "patch": [ + { + "comment": "expose table data on initialization" + } + ] + } + }, { "version": "0.2.61", "tag": "@stonecrop/atable_v0.2.61", diff --git a/atable/CHANGELOG.md b/atable/CHANGELOG.md index 2382ce0b..6c02981b 100644 --- a/atable/CHANGELOG.md +++ b/atable/CHANGELOG.md @@ -1,6 +1,25 @@ # Change Log - @stonecrop/atable -This log was last generated on Tue, 03 Dec 2024 06:50:08 GMT and should not be manually modified. +This log was last generated on Wed, 11 Dec 2024 07:45:13 GMT and should not be manually modified. + +## 0.2.64 +Wed, 11 Dec 2024 07:45:13 GMT + +### Minor changes + +- use pinia to track table state + +## 0.2.63 +Mon, 09 Dec 2024 18:06:22 GMT + +_Version update only_ + +## 0.2.62 +Thu, 05 Dec 2024 14:20:47 GMT + +### Patches + +- expose table data on initialization ## 0.2.61 Tue, 03 Dec 2024 06:50:08 GMT diff --git a/atable/package.json b/atable/package.json index 9a1751a1..2c70d0cc 100644 --- a/atable/package.json +++ b/atable/package.json @@ -1,6 +1,6 @@ { "name": "@stonecrop/atable", - "version": "0.2.61", + "version": "0.2.64", "license": "MIT", "type": "module", "author": { @@ -49,7 +49,8 @@ "@stonecrop/utilities": "workspace:*", "@vueuse/components": "^10.11.0", "@vueuse/core": "^11.1.0", - "vue": "^3.5.6" + "pinia": "^2.3.0", + "vue": "^3.5.11" }, "devDependencies": { "@microsoft/api-documenter": "^7.25.3", diff --git a/atable/src/components/ACell.vue b/atable/src/components/ACell.vue index c2cc2e77..304855b6 100644 --- a/atable/src/components/ACell.vue +++ b/atable/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"> 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 addNavigation?: boolean | KeypressHandlers tabIndex?: number pinned?: boolean }>() -const tableData = inject(tableid) const cellRef = useTemplateRef('cell') const { bottom, left } = useElementBounding(cellRef) // keep a shallow copy of the original cell value for comparison -const originalData = tableData.cellData(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(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' - } -}