diff --git a/atable/src/components/ACell.vue b/atable/src/components/ACell.vue index 0c612a8e..bfb984ad 100644 --- a/atable/src/components/ACell.vue +++ b/atable/src/components/ACell.vue @@ -10,7 +10,6 @@ :style="cellStyle" @focus="onFocus" @paste="updateCellData" - @blur="updateCellData" @input="updateCellData" @click="showModal" class="atable-cell" @@ -28,7 +27,7 @@ diff --git a/atable/src/components/ATable.vue b/atable/src/components/ATable.vue index 9bbb1d67..e58db298 100644 --- a/atable/src/components/ATable.vue +++ b/atable/src/components/ATable.vue @@ -25,7 +25,8 @@ textAlign: col?.align || 'center', minWidth: col?.width || '40ch', width: store.config.fullWidth ? 'auto' : null, - }" /> + }" + @cellInput="emitInput" /> @@ -87,11 +88,14 @@ const tableRef = useTemplateRef('table') const rowsValue = modelValue ? modelValue : rows const store = createTableStore({ columns, rows: rowsValue, id, config }) -store.$onAction(({ name, store, args }) => { +store.$onAction(({ name, store, args, after }) => { if (name === 'setCellData') { const [colIndex, rowIndex, newCellValue] = args const prevCellValue = store.getCellData(colIndex, rowIndex) - emit('cellUpdate', [colIndex, rowIndex, newCellValue, prevCellValue]) + + after(() => { + emit('cellUpdate', colIndex, rowIndex, newCellValue, prevCellValue) + }) } }) @@ -114,6 +118,10 @@ onMounted(() => { } }) +const emitInput = (colIndex: number, rowIndex: number, newCellValue: any, prevCellValue: any) => { + emit('cellUpdate', colIndex, rowIndex, newCellValue, prevCellValue) +} + const assignStickyCellWidths = () => { const table = tableRef.value @@ -148,54 +156,6 @@ const assignStickyCellWidths = () => { } } -// const formatCell = (event?: KeyboardEvent, column?: TableColumn, cellData?: any) => { -// let colIndex: number -// const target = event?.target as HTMLTableCellElement -// if (event) { -// colIndex = target.cellIndex -// } else if (column && cellData) { -// colIndex = store.columns.indexOf(column) -// } - -// if (!column && 'format' in store.columns[colIndex]) { -// // TODO: (utils) create helper to extract format from string -// const format = store.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() -// } - window.addEventListener('keydown', (event: KeyboardEvent) => { if (event.key === 'Escape') { if (store.modal.visible) { diff --git a/atable/src/index.ts b/atable/src/index.ts index 65016a88..eb92709f 100644 --- a/atable/src/index.ts +++ b/atable/src/index.ts @@ -7,7 +7,15 @@ 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' +export type { + CellContext, + TableColumn, + TableConfig, + TableDisplay, + TableModal, + TableModalProps, + TableRow, +} from './types' /** * Install all ATable components diff --git a/atable/src/stores/table.ts b/atable/src/stores/table.ts index 1c1bb69a..bc416165 100644 --- a/atable/src/stores/table.ts +++ b/atable/src/stores/table.ts @@ -75,6 +75,7 @@ export const createTableStore = (initData: { const table = ref(initData.table || createTableObject()) const display = ref(createDisplayObject(initData.display)) const modal = ref(initData.modal || { visible: false }) + const updates = ref>({}) // getters const hasPinnedColumns = computed(() => columns.value.some(col => col.pinned)) @@ -100,6 +101,15 @@ export const createTableStore = (initData: { rows.value[rowIndex][col.name] = value } + const setCellText = (colIndex: number, rowIndex: number, value: string) => { + const index = `${colIndex}:${rowIndex}` + + if (table.value[index] !== value) { + display.value[rowIndex].rowModified = true + updates.value[index] = value + } + } + const getHeaderCellStyle = (column: TableColumn): CSSProperties => ({ minWidth: column.width || '40ch', textAlign: column.align || 'center', @@ -185,11 +195,12 @@ export const createTableStore = (initData: { return { // state columns, - rows, config, - table, display, modal, + rows, + table, + updates, // getters hasPinnedColumns, @@ -206,6 +217,7 @@ export const createTableStore = (initData: { getRowExpandSymbol, isRowVisible, setCellData, + setCellText, toggleRowExpand, } }) diff --git a/atable/src/types/index.ts b/atable/src/types/index.ts index e5c79111..2427c1a2 100644 --- a/atable/src/types/index.ts +++ b/atable/src/types/index.ts @@ -1,3 +1,5 @@ +import { createTableStore } from '../stores/table' + /** * Table column definition. * @public @@ -104,3 +106,14 @@ export type TableModal = { component?: string componentProps?: Record } + +/** + * Table modal props definition. + * @public + */ +export type TableModalProps = { + [key: string]: any + colIndex: number + rowIndex: number + store: ReturnType +} diff --git a/common/changes/@stonecrop/atable/fix-cell-update-with-format_2024-12-18-09-48.json b/common/changes/@stonecrop/atable/fix-cell-update-with-format_2024-12-18-09-48.json new file mode 100644 index 00000000..510aba00 --- /dev/null +++ b/common/changes/@stonecrop/atable/fix-cell-update-with-format_2024-12-18-09-48.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@stonecrop/atable", + "comment": "emit cell update in columns with format", + "type": "patch" + } + ], + "packageName": "@stonecrop/atable" +} \ No newline at end of file diff --git a/common/reviews/api/atable.api.md b/common/reviews/api/atable.api.md index 342e1572..c45b61cd 100644 --- a/common/reviews/api/atable.api.md +++ b/common/reviews/api/atable.api.md @@ -78,15 +78,6 @@ modalComponentExtraProps?: Record; format?: string | ((value: any, context: CellContext) => string); mask?: (value: any) => any; }[]>; -rows: Ref< { -[x: string]: any; -indent?: number; -parent?: number; -}[], TableRow[] | { -[x: string]: any; -indent?: number; -parent?: number; -}[]>; config: Ref< { view?: "uncounted" | "list" | "list-expansion" | "tree"; fullWidth?: boolean; @@ -94,7 +85,6 @@ fullWidth?: boolean; view?: "uncounted" | "list" | "list-expansion" | "tree"; fullWidth?: boolean; }>; -table: Ref< {}, {}>; display: Ref< { childrenOpen?: boolean; expanded?: boolean; @@ -139,6 +129,17 @@ width?: number; component?: string; componentProps?: Record; }>; +rows: Ref< { +[x: string]: any; +indent?: number; +parent?: number; +}[], TableRow[] | { +[x: string]: any; +indent?: number; +parent?: number; +}[]>; +table: Ref< {}, {}>; +updates: Ref, Record>; hasPinnedColumns: ComputedRef; numberedRowWidth: ComputedRef; zeroColumn: ComputedRef; @@ -151,8 +152,9 @@ getIndent: (colIndex: number, indentLevel?: number) => string; getRowExpandSymbol: (rowIndex: number) => "" | "-" | "+"; isRowVisible: (rowIndex: number) => boolean; setCellData: (colIndex: number, rowIndex: number, value: any) => void; +setCellText: (colIndex: number, rowIndex: number, value: string) => void; toggleRowExpand: (rowIndex: number) => void; -}, "columns" | "rows" | "config" | "table" | "display" | "modal">, Pick<{ +}, "columns" | "config" | "display" | "modal" | "rows" | "table" | "updates">, Pick<{ columns: Ref< { name: string; align?: CanvasTextAlign; @@ -182,15 +184,6 @@ modalComponentExtraProps?: Record; format?: string | ((value: any, context: CellContext) => string); mask?: (value: any) => any; }[]>; -rows: Ref< { -[x: string]: any; -indent?: number; -parent?: number; -}[], TableRow[] | { -[x: string]: any; -indent?: number; -parent?: number; -}[]>; config: Ref< { view?: "uncounted" | "list" | "list-expansion" | "tree"; fullWidth?: boolean; @@ -198,7 +191,6 @@ fullWidth?: boolean; view?: "uncounted" | "list" | "list-expansion" | "tree"; fullWidth?: boolean; }>; -table: Ref< {}, {}>; display: Ref< { childrenOpen?: boolean; expanded?: boolean; @@ -243,6 +235,17 @@ width?: number; component?: string; componentProps?: Record; }>; +rows: Ref< { +[x: string]: any; +indent?: number; +parent?: number; +}[], TableRow[] | { +[x: string]: any; +indent?: number; +parent?: number; +}[]>; +table: Ref< {}, {}>; +updates: Ref, Record>; hasPinnedColumns: ComputedRef; numberedRowWidth: ComputedRef; zeroColumn: ComputedRef; @@ -255,6 +258,7 @@ getIndent: (colIndex: number, indentLevel?: number) => string; getRowExpandSymbol: (rowIndex: number) => "" | "-" | "+"; isRowVisible: (rowIndex: number) => boolean; setCellData: (colIndex: number, rowIndex: number, value: any) => void; +setCellText: (colIndex: number, rowIndex: number, value: string) => void; toggleRowExpand: (rowIndex: number) => void; }, "hasPinnedColumns" | "numberedRowWidth" | "zeroColumn">, Pick<{ columns: Ref< { @@ -286,15 +290,6 @@ modalComponentExtraProps?: Record; format?: string | ((value: any, context: CellContext) => string); mask?: (value: any) => any; }[]>; -rows: Ref< { -[x: string]: any; -indent?: number; -parent?: number; -}[], TableRow[] | { -[x: string]: any; -indent?: number; -parent?: number; -}[]>; config: Ref< { view?: "uncounted" | "list" | "list-expansion" | "tree"; fullWidth?: boolean; @@ -302,7 +297,6 @@ fullWidth?: boolean; view?: "uncounted" | "list" | "list-expansion" | "tree"; fullWidth?: boolean; }>; -table: Ref< {}, {}>; display: Ref< { childrenOpen?: boolean; expanded?: boolean; @@ -347,6 +341,17 @@ width?: number; component?: string; componentProps?: Record; }>; +rows: Ref< { +[x: string]: any; +indent?: number; +parent?: number; +}[], TableRow[] | { +[x: string]: any; +indent?: number; +parent?: number; +}[]>; +table: Ref< {}, {}>; +updates: Ref, Record>; hasPinnedColumns: ComputedRef; numberedRowWidth: ComputedRef; zeroColumn: ComputedRef; @@ -359,8 +364,9 @@ getIndent: (colIndex: number, indentLevel?: number) => string; getRowExpandSymbol: (rowIndex: number) => "" | "-" | "+"; isRowVisible: (rowIndex: number) => boolean; setCellData: (colIndex: number, rowIndex: number, value: any) => void; +setCellText: (colIndex: number, rowIndex: number, value: string) => void; toggleRowExpand: (rowIndex: number) => void; -}, "closeModal" | "getCellData" | "getCellDisplayValue" | "getFormattedValue" | "getHeaderCellStyle" | "getIndent" | "getRowExpandSymbol" | "isRowVisible" | "setCellData" | "toggleRowExpand">>; +}, "closeModal" | "getCellData" | "getCellDisplayValue" | "getFormattedValue" | "getHeaderCellStyle" | "getIndent" | "getRowExpandSymbol" | "isRowVisible" | "setCellData" | "setCellText" | "toggleRowExpand">>; // @public export function install(app: App): void; @@ -415,6 +421,14 @@ export type TableModal = { componentProps?: Record; }; +// @public +export type TableModalProps = { + [key: string]: any; + colIndex: number; + rowIndex: number; + store: ReturnType; +}; + // @public export type TableRow = { [key: string]: any; diff --git a/docs/atable/atable.createtablestore.md b/docs/atable/atable.createtablestore.md index 79e1012e..9fa37f7e 100644 --- a/docs/atable/atable.createtablestore.md +++ b/docs/atable/atable.createtablestore.md @@ -49,15 +49,6 @@ createTableStore: (initData: { format?: string | ((value: any, context: CellContext) => string); mask?: (value: any) => any; }[]>; - rows: import("vue").Ref<{ - [x: string]: any; - indent?: number; - parent?: number; - }[], TableRow[] | { - [x: string]: any; - indent?: number; - parent?: number; - }[]>; config: import("vue").Ref<{ view?: "uncounted" | "list" | "list-expansion" | "tree"; fullWidth?: boolean; @@ -65,7 +56,6 @@ createTableStore: (initData: { view?: "uncounted" | "list" | "list-expansion" | "tree"; fullWidth?: boolean; }>; - table: import("vue").Ref<{}, {}>; display: import("vue").Ref<{ childrenOpen?: boolean; expanded?: boolean; @@ -110,6 +100,17 @@ createTableStore: (initData: { component?: string; componentProps?: Record; }>; + rows: import("vue").Ref<{ + [x: string]: any; + indent?: number; + parent?: number; + }[], TableRow[] | { + [x: string]: any; + indent?: number; + parent?: number; + }[]>; + table: import("vue").Ref<{}, {}>; + updates: import("vue").Ref, Record>; hasPinnedColumns: import("vue").ComputedRef; numberedRowWidth: import("vue").ComputedRef; zeroColumn: import("vue").ComputedRef; @@ -122,8 +123,9 @@ createTableStore: (initData: { getRowExpandSymbol: (rowIndex: number) => "" | "-" | "+"; isRowVisible: (rowIndex: number) => boolean; setCellData: (colIndex: number, rowIndex: number, value: any) => void; + setCellText: (colIndex: number, rowIndex: number, value: string) => void; toggleRowExpand: (rowIndex: number) => void; -}, "columns" | "rows" | "config" | "table" | "display" | "modal">, Pick<{ +}, "columns" | "config" | "display" | "modal" | "rows" | "table" | "updates">, Pick<{ columns: import("vue").Ref<{ name: string; align?: CanvasTextAlign; @@ -153,15 +155,6 @@ createTableStore: (initData: { format?: string | ((value: any, context: CellContext) => string); mask?: (value: any) => any; }[]>; - rows: import("vue").Ref<{ - [x: string]: any; - indent?: number; - parent?: number; - }[], TableRow[] | { - [x: string]: any; - indent?: number; - parent?: number; - }[]>; config: import("vue").Ref<{ view?: "uncounted" | "list" | "list-expansion" | "tree"; fullWidth?: boolean; @@ -169,7 +162,6 @@ createTableStore: (initData: { view?: "uncounted" | "list" | "list-expansion" | "tree"; fullWidth?: boolean; }>; - table: import("vue").Ref<{}, {}>; display: import("vue").Ref<{ childrenOpen?: boolean; expanded?: boolean; @@ -214,6 +206,17 @@ createTableStore: (initData: { component?: string; componentProps?: Record; }>; + rows: import("vue").Ref<{ + [x: string]: any; + indent?: number; + parent?: number; + }[], TableRow[] | { + [x: string]: any; + indent?: number; + parent?: number; + }[]>; + table: import("vue").Ref<{}, {}>; + updates: import("vue").Ref, Record>; hasPinnedColumns: import("vue").ComputedRef; numberedRowWidth: import("vue").ComputedRef; zeroColumn: import("vue").ComputedRef; @@ -226,6 +229,7 @@ createTableStore: (initData: { getRowExpandSymbol: (rowIndex: number) => "" | "-" | "+"; isRowVisible: (rowIndex: number) => boolean; setCellData: (colIndex: number, rowIndex: number, value: any) => void; + setCellText: (colIndex: number, rowIndex: number, value: string) => void; toggleRowExpand: (rowIndex: number) => void; }, "hasPinnedColumns" | "numberedRowWidth" | "zeroColumn">, Pick<{ columns: import("vue").Ref<{ @@ -257,15 +261,6 @@ createTableStore: (initData: { format?: string | ((value: any, context: CellContext) => string); mask?: (value: any) => any; }[]>; - rows: import("vue").Ref<{ - [x: string]: any; - indent?: number; - parent?: number; - }[], TableRow[] | { - [x: string]: any; - indent?: number; - parent?: number; - }[]>; config: import("vue").Ref<{ view?: "uncounted" | "list" | "list-expansion" | "tree"; fullWidth?: boolean; @@ -273,7 +268,6 @@ createTableStore: (initData: { view?: "uncounted" | "list" | "list-expansion" | "tree"; fullWidth?: boolean; }>; - table: import("vue").Ref<{}, {}>; display: import("vue").Ref<{ childrenOpen?: boolean; expanded?: boolean; @@ -318,6 +312,17 @@ createTableStore: (initData: { component?: string; componentProps?: Record; }>; + rows: import("vue").Ref<{ + [x: string]: any; + indent?: number; + parent?: number; + }[], TableRow[] | { + [x: string]: any; + indent?: number; + parent?: number; + }[]>; + table: import("vue").Ref<{}, {}>; + updates: import("vue").Ref, Record>; hasPinnedColumns: import("vue").ComputedRef; numberedRowWidth: import("vue").ComputedRef; zeroColumn: import("vue").ComputedRef; @@ -330,8 +335,9 @@ createTableStore: (initData: { getRowExpandSymbol: (rowIndex: number) => "" | "-" | "+"; isRowVisible: (rowIndex: number) => boolean; setCellData: (colIndex: number, rowIndex: number, value: any) => void; + setCellText: (colIndex: number, rowIndex: number, value: string) => void; toggleRowExpand: (rowIndex: number) => void; -}, "closeModal" | "getCellData" | "getCellDisplayValue" | "getFormattedValue" | "getHeaderCellStyle" | "getIndent" | "getRowExpandSymbol" | "isRowVisible" | "setCellData" | "toggleRowExpand">> +}, "closeModal" | "getCellData" | "getCellDisplayValue" | "getFormattedValue" | "getHeaderCellStyle" | "getIndent" | "getRowExpandSymbol" | "isRowVisible" | "setCellData" | "setCellText" | "toggleRowExpand">> ``` ## Parameters @@ -371,8 +377,7 @@ Initial data for the table store **Returns:** -import("pinia").Store<\`table-${string}\`, Pick<{ columns: import("vue").Ref<{ name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\], [TableColumn](./atable.tablecolumn.md)\[\] \| { name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\]>; rows: import("vue").Ref<{ \[x: string\]: any; indent?: number; parent?: number; }\[\], [TableRow](./atable.tablerow.md)\[\] \| { \[x: string\]: any; indent?: number; parent?: number; }\[\]>; config: import("vue").Ref<{ view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }, [TableConfig](./atable.tableconfig.md) \| { view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }>; table: import("vue").Ref<{}, {}>; display: import("vue").Ref<{ childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\], [TableDisplay](./atable.tabledisplay.md)\[\] \| { childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\]>; modal: import("vue").Ref<{ colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record<string, any>; }, [TableModal](./atable.tablemodal.md) \| { colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record<string, any>; }>; hasPinnedColumns: import("vue").ComputedRef<boolean>; numberedRowWidth: import("vue").ComputedRef<string>; zeroColumn: import("vue").ComputedRef<boolean>; closeModal: (event: MouseEvent) => void; getCellData: <T = any>(colIndex: number, rowIndex: number) => T; getCellDisplayValue: (colIndex: number, rowIndex: number) => any; getFormattedValue: (colIndex: number, rowIndex: number, value: any) => any; getHeaderCellStyle: (column: [TableColumn](./atable.tablecolumn.md)) => CSSProperties; getIndent: (colIndex: number, indentLevel?: number) => string; getRowExpandSymbol: (rowIndex: number) => "" \| "-" \| "+"; isRowVisible: (rowIndex: number) => boolean; setCellData: (colIndex: number, rowIndex: number, value: any) => void; toggleRowExpand: (rowIndex: number) => void; }, "columns" \| "rows" \| "config" \| "table" \| "display" \| "modal">, Pick<{ columns: import("vue").Ref<{ name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\], [TableColumn](./atable.tablecolumn.md)\[\] \| { name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\]>; rows: import("vue").Ref<{ \[x: string\]: any; indent?: number; parent?: number; }\[\], [TableRow](./atable.tablerow.md)\[\] \| { \[x: string\]: any; indent?: number; parent?: number; }\[\]>; config: import("vue").Ref<{ view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }, [TableConfig](./atable.tableconfig.md) \| { view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }>; table: import("vue").Ref<{}, {}>; display: import("vue").Ref<{ childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\], [TableDisplay](./atable.tabledisplay.md)\[\] \| { childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\]>; modal: import("vue").Ref<{ colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record<string, any>; }, [TableModal](./atable.tablemodal.md) \| { colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record<string, any>; }>; hasPinnedColumns: import("vue").ComputedRef<boolean>; numberedRowWidth: import("vue").ComputedRef<string>; zeroColumn: import("vue").ComputedRef<boolean>; closeModal: (event: MouseEvent) => void; getCellData: <T = any>(colIndex: number, rowIndex: number) => T; getCellDisplayValue: (colIndex: number, rowIndex: number) => any; getFormattedValue: (colIndex: number, rowIndex: number, value: any) => any; getHeaderCellStyle: (column: [TableColumn](./atable.tablecolumn.md)) => CSSProperties; getIndent: (colIndex: number, indentLevel?: number) => string; getRowExpandSymbol: (rowIndex: number) => "" \| "-" \| "+"; isRowVisible: (rowIndex: number) => boolean; setCellData: (colIndex: number, rowIndex: number, value: any) => void; toggleRowExpand: (rowIndex: number) => void; }, "hasPinnedColumns" \| "numberedRowWidth" \| "zeroColumn">, Pick<{ columns: import("vue").Ref<{ name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\], [TableColumn](./atable.tablecolumn.md)\[\] \| { name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\]>; rows: import("vue").Ref<{ \[x: string\]: any; indent?: number; parent?: number; }\[\], [TableRow](./atable.tablerow.md)\[\] \| { \[x: string\]: any; indent?: number; parent?: number; }\[\]>; config: import("vue").Ref<{ view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }, [TableConfig](./atable.tableconfig.md) \| { view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }>; table: import("vue").Ref<{}, {}>; display: import("vue").Ref<{ childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\], [TableDisplay](./atable.tabledisplay.md)\[\] \| { childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\]>; modal: import("vue").Ref<{ colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record<string, any>; }, [TableModal](./atable.tablemodal.md) \| { colIndex?: number; event?: string; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: string; component?: string; componentProps?: Record<string, any>; }>; hasPinnedColumns: import("vue").ComputedRef<boolean>; numberedRowWidth: import("vue").ComputedRef<string>; zeroColumn: import("vue").ComputedRef<boolean>; closeModal: (event: MouseEvent) => void; getCellData: <T = any>(colIndex: number, rowIndex: number) => T; getCellDisplayValue: (colIndex: number, rowIndex: number) => any; getFormattedValue: (colIndex: number, rowIndex: number, value: any) => any; getHeaderCellStyle: (column: [TableColumn](./atable.tablecolumn.md)) => CSSProperties; getIndent: (colIndex: number, indentLevel?: number) => string; getRowExpandSymbol: (rowIndex: number) => "" \| "-" \| "+"; isRowVisible: (rowIndex: number) => boolean; setCellData: (colIndex: number, rowIndex: number, value: any) => void; toggleRowExpand: (rowIndex: number) => void; }, "closeModal" \| "getCellData" \| "getCellDisplayValue" \| "getFormattedValue" \| "getHeaderCellStyle" \| "getIndent" \| "getRowExpandSymbol" \| "isRowVisible" \| "setCellData" \| "toggleRowExpand">> - +import("pinia").Store<\`table-${string}\`, Pick<{ columns: import("vue").Ref<{ name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\], [TableColumn](./atable.tablecolumn.md)\[\] \| { name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\]>; config: import("vue").Ref<{ view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }, [TableConfig](./atable.tableconfig.md) \| { view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }>; display: import("vue").Ref<{ childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\], [TableDisplay](./atable.tabledisplay.md)\[\] \| { childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\]>; modal: import("vue").Ref<{ colIndex?: number; event?: string; height?: number; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: number; component?: string; componentProps?: Record<string, any>; }, [TableModal](./atable.tablemodal.md) \| { colIndex?: number; event?: string; height?: number; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: number; component?: string; componentProps?: Record<string, any>; }>; rows: import("vue").Ref<{ \[x: string\]: any; indent?: number; parent?: number; }\[\], [TableRow](./atable.tablerow.md)\[\] \| { \[x: string\]: any; indent?: number; parent?: number; }\[\]>; table: import("vue").Ref<{}, {}>; updates: import("vue").Ref<Record<string, string>, Record<string, string>>; hasPinnedColumns: import("vue").ComputedRef<boolean>; numberedRowWidth: import("vue").ComputedRef<string>; zeroColumn: import("vue").ComputedRef<boolean>; closeModal: (event: MouseEvent) => void; getCellData: <T = any>(colIndex: number, rowIndex: number) => T; getCellDisplayValue: (colIndex: number, rowIndex: number) => any; getFormattedValue: (colIndex: number, rowIndex: number, value: any) => any; getHeaderCellStyle: (column: [TableColumn](./atable.tablecolumn.md)) => CSSProperties; getIndent: (colIndex: number, indentLevel?: number) => string; getRowExpandSymbol: (rowIndex: number) => "" \| "-" \| "+"; isRowVisible: (rowIndex: number) => boolean; setCellData: (colIndex: number, rowIndex: number, value: any) => void; setCellText: (colIndex: number, rowIndex: number, value: string) => void; toggleRowExpand: (rowIndex: number) => void; }, "columns" \| "config" \| "display" \| "modal" \| "rows" \| "table" \| "updates">, Pick<{ columns: import("vue").Ref<{ name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\], [TableColumn](./atable.tablecolumn.md)\[\] \| { name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\]>; config: import("vue").Ref<{ view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }, [TableConfig](./atable.tableconfig.md) \| { view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }>; display: import("vue").Ref<{ childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\], [TableDisplay](./atable.tabledisplay.md)\[\] \| { childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\]>; modal: import("vue").Ref<{ colIndex?: number; event?: string; height?: number; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: number; component?: string; componentProps?: Record<string, any>; }, [TableModal](./atable.tablemodal.md) \| { colIndex?: number; event?: string; height?: number; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: number; component?: string; componentProps?: Record<string, any>; }>; rows: import("vue").Ref<{ \[x: string\]: any; indent?: number; parent?: number; }\[\], [TableRow](./atable.tablerow.md)\[\] \| { \[x: string\]: any; indent?: number; parent?: number; }\[\]>; table: import("vue").Ref<{}, {}>; updates: import("vue").Ref<Record<string, string>, Record<string, string>>; hasPinnedColumns: import("vue").ComputedRef<boolean>; numberedRowWidth: import("vue").ComputedRef<string>; zeroColumn: import("vue").ComputedRef<boolean>; closeModal: (event: MouseEvent) => void; getCellData: <T = any>(colIndex: number, rowIndex: number) => T; getCellDisplayValue: (colIndex: number, rowIndex: number) => any; getFormattedValue: (colIndex: number, rowIndex: number, value: any) => any; getHeaderCellStyle: (column: [TableColumn](./atable.tablecolumn.md)) => CSSProperties; getIndent: (colIndex: number, indentLevel?: number) => string; getRowExpandSymbol: (rowIndex: number) => "" \| "-" \| "+"; isRowVisible: (rowIndex: number) => boolean; setCellData: (colIndex: number, rowIndex: number, value: any) => void; setCellText: (colIndex: number, rowIndex: number, value: string) => void; toggleRowExpand: (rowIndex: number) => void; }, "hasPinnedColumns" \| "numberedRowWidth" \| "zeroColumn">, Pick<{ columns: import("vue").Ref<{ name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\], [TableColumn](./atable.tablecolumn.md)\[\] \| { name: string; align?: CanvasTextAlign; edit?: boolean; label?: string; type?: string; width?: string; pinned?: boolean; cellComponent?: string; cellComponentProps?: Record<string, any>; modalComponent?: string \| ((context: [CellContext](./atable.cellcontext.md)) => string); modalComponentExtraProps?: Record<string, any>; format?: string \| ((value: any, context: [CellContext](./atable.cellcontext.md)) => string); mask?: (value: any) => any; }\[\]>; config: import("vue").Ref<{ view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }, [TableConfig](./atable.tableconfig.md) \| { view?: "uncounted" \| "list" \| "list-expansion" \| "tree"; fullWidth?: boolean; }>; display: import("vue").Ref<{ childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\], [TableDisplay](./atable.tabledisplay.md)\[\] \| { childrenOpen?: boolean; expanded?: boolean; indent?: number; isParent?: boolean; isRoot?: boolean; open?: boolean; parent?: number; rowModified?: boolean; }\[\]>; modal: import("vue").Ref<{ colIndex?: number; event?: string; height?: number; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: number; component?: string; componentProps?: Record<string, any>; }, [TableModal](./atable.tablemodal.md) \| { colIndex?: number; event?: string; height?: number; left?: number; parent?: HTMLElement; rowIndex?: number; top?: number; visible?: boolean; width?: number; component?: string; componentProps?: Record<string, any>; }>; rows: import("vue").Ref<{ \[x: string\]: any; indent?: number; parent?: number; }\[\], [TableRow](./atable.tablerow.md)\[\] \| { \[x: string\]: any; indent?: number; parent?: number; }\[\]>; table: import("vue").Ref<{}, {}>; updates: import("vue").Ref<Record<string, string>, Record<string, string>>; hasPinnedColumns: import("vue").ComputedRef<boolean>; numberedRowWidth: import("vue").ComputedRef<string>; zeroColumn: import("vue").ComputedRef<boolean>; closeModal: (event: MouseEvent) => void; getCellData: <T = any>(colIndex: number, rowIndex: number) => T; getCellDisplayValue: (colIndex: number, rowIndex: number) => any; getFormattedValue: (colIndex: number, rowIndex: number, value: any) => any; getHeaderCellStyle: (column: [TableColumn](./atable.tablecolumn.md)) => CSSProperties; getIndent: (colIndex: number, indentLevel?: number) => string; getRowExpandSymbol: (rowIndex: number) => "" \| "-" \| "+"; isRowVisible: (rowIndex: number) => boolean; setCellData: (colIndex: number, rowIndex: number, value: any) => void; setCellText: (colIndex: number, rowIndex: number, value: string) => void; toggleRowExpand: (rowIndex: number) => void; }, "closeModal" \| "getCellData" \| "getCellDisplayValue" \| "getFormattedValue" \| "getHeaderCellStyle" \| "getIndent" \| "getRowExpandSymbol" \| "isRowVisible" \| "setCellData" \| "setCellText" \| "toggleRowExpand">> table store instance diff --git a/docs/atable/atable.md b/docs/atable/atable.md index cfc92c39..be9c52dc 100644 --- a/docs/atable/atable.md +++ b/docs/atable/atable.md @@ -108,6 +108,17 @@ Table display definition. Table modal definition. + + + +[TableModalProps](./atable.tablemodalprops.md) + + + + +Table modal props definition. + + diff --git a/docs/atable/atable.tablemodalprops.md b/docs/atable/atable.tablemodalprops.md new file mode 100644 index 00000000..76f0bb71 --- /dev/null +++ b/docs/atable/atable.tablemodalprops.md @@ -0,0 +1,18 @@ + + +[Home](./index.md) > [@stonecrop/atable](./atable.md) > [TableModalProps](./atable.tablemodalprops.md) + +## TableModalProps type + +Table modal props definition. + +**Signature:** + +```typescript +export type TableModalProps = { + [key: string]: any; + colIndex: number; + rowIndex: number; + store: ReturnType; +}; +``` diff --git a/examples/atable/components/DateInput.vue b/examples/atable/components/DateInput.vue index 4f20a414..3abacc68 100644 --- a/examples/atable/components/DateInput.vue +++ b/examples/atable/components/DateInput.vue @@ -3,18 +3,25 @@