@stonecrop/atable 0.2.37 → 0.2.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/atable.d.ts +2 -2
- package/dist/atable.js +213 -217
- package/dist/atable.js.map +1 -1
- package/dist/atable.umd.cjs +1 -1
- package/dist/atable.umd.cjs.map +1 -1
- package/dist/src/index.d.ts +1 -1
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/types/index.d.ts +4 -4
- package/dist/src/types/index.d.ts.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +3 -3
- package/src/components/ACell.vue +36 -29
- package/src/index.ts +1 -1
- package/src/types/index.ts +4 -4
package/dist/src/index.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ import ATable from '@/components/ATable.vue';
|
|
|
6
6
|
import ATableHeader from '@/components/ATableHeader.vue';
|
|
7
7
|
import ATableModal from '@/components/ATableModal.vue';
|
|
8
8
|
import TableDataStore from './components';
|
|
9
|
-
export type {
|
|
9
|
+
export type { CellContext, TableColumn, TableConfig, TableDisplay, TableRow, TableModal } from '@/types';
|
|
10
10
|
/**
|
|
11
11
|
* Install all ATable components
|
|
12
12
|
* @param app - Vue app instance
|
package/dist/src/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,KAAK,MAAM,wBAAwB,CAAA;AAC1C,OAAO,aAAa,MAAM,gCAAgC,CAAA;AAC1D,OAAO,IAAI,MAAM,uBAAuB,CAAA;AACxC,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,cAAc,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,KAAK,MAAM,wBAAwB,CAAA;AAC1C,OAAO,aAAa,MAAM,gCAAgC,CAAA;AAC1D,OAAO,IAAI,MAAM,uBAAuB,CAAA;AACxC,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,cAAc,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAExG;;;;GAIG;AACH,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,QAOxB;AAED,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA"}
|
|
@@ -8,12 +8,12 @@ export type TableColumn = {
|
|
|
8
8
|
width?: string;
|
|
9
9
|
cellComponent?: string;
|
|
10
10
|
cellComponentProps?: Record<string, any>;
|
|
11
|
-
modalComponent?: string;
|
|
12
|
-
|
|
13
|
-
format?: string | ((value: any, context?:
|
|
11
|
+
modalComponent?: string | ((context?: CellContext) => string);
|
|
12
|
+
modalComponentExtraProps?: Record<string, any>;
|
|
13
|
+
format?: string | ((value: any, context?: CellContext) => string);
|
|
14
14
|
mask?: (value: any) => any;
|
|
15
15
|
};
|
|
16
|
-
export type
|
|
16
|
+
export type CellContext = {
|
|
17
17
|
row: TableRow;
|
|
18
18
|
column: TableColumn;
|
|
19
19
|
table: TableDataStore['table'];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,cAAc,CAAA;AAEzC,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE,MAAM,CAAA;IAEZ,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACxC,cAAc,CAAC,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,cAAc,CAAA;AAEzC,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE,MAAM,CAAA;IAEZ,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACxC,cAAc,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,CAAC,EAAE,WAAW,KAAK,MAAM,CAAC,CAAA;IAC7D,wBAAwB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAE9C,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,WAAW,KAAK,MAAM,CAAC,CAAA;IACjE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACzB,GAAG,EAAE,QAAQ,CAAA;IACb,MAAM,EAAE,WAAW,CAAA;IACnB,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;CAC9B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,gBAAgB,CAAA;IACzC,SAAS,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,UAAU,GAAG;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACpC,CAAA"}
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap";.list-index{color:var(--header-text-color);font-weight:700;padding-left:var(--atable-row-padding);padding-right:1em;text-align:center;-webkit-user-select:none;user-select:none;width:var(--
|
|
1
|
+
@import"https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap";.list-index{color:var(--header-text-color);font-weight:700;padding-left:var(--atable-row-padding);padding-right:1em;text-align:center;-webkit-user-select:none;user-select:none;width:var(--2887d772);max-width:var(--2887d772)}.atable #header-index{width:var(--2887d772);max-width:var(--2887d772)}.list-index{color:var(--header-text-color);font-weight:700;padding-left:var(--atable-row-padding);padding-right:1em;text-align:center;-webkit-user-select:none;user-select:none;width:var(--d266282a);max-width:var(--d266282a)}.atable #header-index{width:var(--d266282a);max-width:var(--d266282a)}.list-index{color:var(--header-text-color);font-weight:700;padding-left:var(--atable-row-padding);padding-right:1em;text-align:center;-webkit-user-select:none;user-select:none;width:var(--aa18a430);max-width:var(--aa18a430)}.atable #header-index{width:var(--aa18a430);max-width:var(--aa18a430)}.list-index{color:var(--header-text-color);font-weight:700;padding-left:var(--atable-row-padding);padding-right:1em;text-align:center;-webkit-user-select:none;user-select:none;width:var(--0fa106da);max-width:var(--0fa106da)}.atable #header-index{width:var(--0fa106da);max-width:var(--0fa106da)}.list-index{color:var(--header-text-color);font-weight:700;padding-left:var(--atable-row-padding);padding-right:1em;text-align:center;-webkit-user-select:none;user-select:none;width:var(--59561aac);max-width:var(--59561aac)}.atable #header-index{width:var(--59561aac);max-width:var(--59561aac)}:root{--primary-color: #0098c9;--primary-text-color: #ffffff;--brand-color: #202a44;--gray-5: #f2f2f2;--gray-10: #e6e6e6;--gray-20: #cccccc;--gray-50: #808080;--gray-60: #666666;--gray-80: #333333;--brand-danger: #e63c28;--brand-success: #155724;--row-color-zebra-light: #eeeeee;--row-color-zebra-dark: #dddddd;--focus-cell-background: #ffffff;--focus-cell-outline: #000000;--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;--input-border-color: var(--gray-20);--input-label-color: var(--gray-60);--input-active-border-color: #000000;--input-active-label-color: #000000;--required-border: #e63c28;--font-size: 10px;--font-family: Arimo, Arial, sans-serif;--table-font-size: 16px;--atable-font-family: "Arimo", sans-serif;--atable-row-padding: 0px;--atable-row-height: 1.5em;--btn-color: white;--btn-border: #cccccc;--btn-hover: #f2f2f2;--btn-label-color: black}.aform{display:flex;flex-wrap:wrap;gap:1rem;padding:1rem;border:1px solid var(--gray-5);border-left:4px solid var(--gray-5);margin-bottom:1rem;max-width:100%}@media screen and (max-width: 400px){.aform{flex-direction:column}}.aform__form-element{border:1px solid transparent;padding:0;margin:0;position:relative;box-sizing:border-box;flex-grow:1;min-width:100px}.aform__input-field{outline:1px solid transparent;border:1px solid var(--input-border-color);font-size:1rem;padding:.5rem .25rem .25rem .5rem;margin:0;border-radius:0;box-sizing:border-box;width:100%;position:relative;color:var(--cell-text-color)}.aform__field-label{color:var(--input-label-color);display:inline-block;position:absolute;padding:0 .25rem;margin:0rem;z-index:2;font-size:.7rem;font-weight:300;letter-spacing:.05rem;width:auto;box-sizing:border-box;background:#fff;margin:0;border:1px solid var(--input-border-color);grid-row:1;top:0;left:10px;border:none;transform:translateY(-50%)}p.error{display:block;display:inline-block;display:none;padding:0rem 0rem 0rem .5rem;margin:.5rem 0 .25rem 0rem;border:1px solid transparent;width:100%;width:auto;color:var(--brand-danger);font-size:.8rem;position:absolute;right:0;top:0;background:#fff;padding:.25rem;transform:translate(-1rem,-50%);margin:0}.aform__input-field:focus{border:1px solid var(--input-active-border-color)}.aform__input-field:focus+.aform__field-label{color:var(--input-active-label-color)}.aform__checkbox{cursor:pointer;width:auto;margin-top:0;display:block}.aform__checkbox:checked{accent-color:var(--primary-color);border:1px solid black}.aform__checkbox-container{width:100%;display:inline-block;text-align:left}.aform__checkbox-container input{width:auto}.aform__checkbox-container:hover+.aform__field-label{color:var(--input-active-label-color)}.aform-primary-action{font-size:100%;text-align:center;min-height:2em;padding:.25rem 1rem;border:1px solid var(--primary-color);color:var(--primary-text-color);background-color:var(--primary-color);outline:2px solid var(--primary-text-color);transition:outline-offset .2s ease;font-size:var(--font-size);margin:.5ch}.aform-primary-action:hover,.aform-primary-action:active{outline:2px solid var(--primary-text-color);outline-offset:-4px;transition:outline-offset .2s ease}tr:focus{background-color:#add8e6;outline:auto}.aform__form-btn{padding:.5rem 2rem;width:auto;border:1px solid var(--input-border-color);color:var(--input-label-color);cursor:pointer;background-color:#fff}.aform__form-btn:disabled{background-color:var(--gray-5)}.aform__file-attach{padding:1rem;display:flex;flex-wrap:wrap;gap:1rem;flex-direction:row;justify-content:center;align-items:center;border:1px dashed var(--input-border-color);width:100%}@media screen and (max-width: 400px){.aform__file-attach>.aform__form-btn{width:100%}}.aform__file-attach-feedback{color:var(--input-label-color);width:100%;padding:.5rem;text-align:center;align-self:center}.aform__file-attach-feedback>li{list-style:none;font-style:italic}.aform__file-attach-feedback>p{margin-top:0}.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}.row-index{color:var(--header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch}.expandable-row{border-top:1px solid var(--row-border-color);height:var(--atable-row-height);border-left:4px solid var(--row-border-color)}.expanded-row{border-bottom:1px solid var(--row-border-color);border-top:1px solid var(--row-border-color)}.expanded-row-content{border-bottom:1px solid var(--row-border-color);border-top:1px solid var(--row-border-color);padding:1.5rem}.atable__cell{border-radius:0;box-sizing:border-box;margin:0;outline:none;box-shadow:none;color:var(--cell-text-color);text-overflow:ellipsis;overflow:hidden;padding-left:.5ch!important;padding-right:.5ch;padding-top:var(--atable-row-padding);padding-bottom:var(--atable-row-padding);border-spacing:0px;border-collapse:collapse}.atable__cell:focus,.atable__cell:focus-within{background-color:var(--focus-cell-background);outline-width:2px;outline-style:solid;outline-color:var(--focus-cell-outline);box-shadow:none;min-height:1.15em;max-height:1.15em;overflow:hidden}.table-row{border-top:1px solid var(--row-border-color);height:var(--atable-row-height)}.list-index{color:var(--header-text-color);font-weight:700;padding-left:var(--atable-row-padding);padding-right:1em;text-align:center;-webkit-user-select:none;user-select:none;width:var(--2c1c9089);max-width:var(--2c1c9089)}.tree-index{color:var(--header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch}.atable #header-index{width:var(--2c1c9089);max-width:var(--2c1c9089)}.atable th{border-width:0px;border-style:solid;border-radius:0;padding-left:.5ch;padding-right:.5ch;padding-top:var(--atable-row-padding);padding-bottom:var(--atable-row-padding);color:var(--gray-60);height:var(--atable-row-height);font-weight:300;letter-spacing:.05rem}.atable th:focus{outline:none}.amodal{z-index:100;position:absolute;background-color:var(--row-color-zebra-dark)}.login-container{width:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-family)}.account-container{width:100%;margin-left:auto;margin-top:.5rem;margin-right:auto;display:flex;flex-direction:column;justify-content:center}.account-header{display:flex;flex-direction:column;text-align:center;margin-top:.5rem}#account-title{font-size:1.5rem;line-height:2rem;font-weight:600;letter-spacing:-.025em;margin:0}#account-subtitle{font-size:.875rem;line-height:1.25rem;margin:1rem}.login-form-container{display:grid;gap:.5rem}.login-form-element{display:grid;margin:.5rem 0;position:relative}.login-field{padding:.5rem .25rem .25rem .5rem;outline:1px solid transparent;border:1px solid var(--input-border-color);border-radius:.25rem}.login-field:focus{border:1px solid black}.btn{background-color:var(--btn-color);color:var(--btn-label-color);border:1px solid var(--btn-border);margin:.5rem 0;padding:.25rem;position:relative;cursor:pointer}.btn:hover{background-color:var(--btn-hover)}.btn:disabled{background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));color:light-dark(rgb(84,84,84),rgb(170,170,170))}.disabled{opacity:.5}.loading-icon{animation:spin 1s linear infinite forwards;display:inline-block;margin-right:.2rem;line-height:0;font-size:1rem;position:relative;top:.2rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stonecrop/atable",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.39",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": {
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"@vueuse/core": "^11.1.0",
|
|
36
36
|
"uuid": "^10.0.0",
|
|
37
37
|
"vue": "^3.5.6",
|
|
38
|
-
"@stonecrop/
|
|
39
|
-
"@stonecrop/
|
|
38
|
+
"@stonecrop/utilities": "0.2.39",
|
|
39
|
+
"@stonecrop/themes": "0.2.39"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@microsoft/api-documenter": "^7.25.3",
|
package/src/components/ACell.vue
CHANGED
|
@@ -30,7 +30,7 @@ import { KeypressHandlers, defaultKeypressHandlers, useKeyboardNav } from '@ston
|
|
|
30
30
|
import { computed, CSSProperties, inject, ref, useTemplateRef } from 'vue'
|
|
31
31
|
|
|
32
32
|
import TableDataStore from '.'
|
|
33
|
-
import type {
|
|
33
|
+
import type { CellContext } from '@/types'
|
|
34
34
|
|
|
35
35
|
const {
|
|
36
36
|
colIndex,
|
|
@@ -51,36 +51,37 @@ const cellRef = useTemplateRef<HTMLTableCellElement>('cell')
|
|
|
51
51
|
const currentData = ref('')
|
|
52
52
|
const cellModified = ref(false)
|
|
53
53
|
|
|
54
|
+
const table = tableData.table
|
|
55
|
+
const column = tableData.columns[colIndex]
|
|
56
|
+
const row = tableData.rows[rowIndex]
|
|
57
|
+
|
|
54
58
|
const displayValue = computed(() => {
|
|
55
|
-
const
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
} else {
|
|
70
|
-
return data
|
|
71
|
-
}
|
|
72
|
-
} else {
|
|
73
|
-
return data
|
|
59
|
+
const cellData = tableData.cellData<any>(colIndex, rowIndex)
|
|
60
|
+
const format = column.format
|
|
61
|
+
|
|
62
|
+
if (!format) {
|
|
63
|
+
return cellData
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
if (typeof format === 'function') {
|
|
67
|
+
return format(cellData, { table, row, column })
|
|
68
|
+
} else if (typeof format === 'string') {
|
|
69
|
+
// parse format function from string
|
|
70
|
+
// eslint-disable-next-line @typescript-eslint/no-implied-eval
|
|
71
|
+
const formatFn: (value: any, context?: CellContext) => string = Function(`"use strict";return (${format})`)()
|
|
72
|
+
return formatFn(cellData, { table, row, column })
|
|
74
73
|
}
|
|
74
|
+
|
|
75
|
+
return cellData
|
|
75
76
|
})
|
|
76
77
|
|
|
77
78
|
const handleInput = () => {
|
|
78
|
-
if (
|
|
79
|
+
if (column.mask) {
|
|
79
80
|
// TODO: add masking to cell values
|
|
80
|
-
//
|
|
81
|
+
// column.mask(event)
|
|
81
82
|
}
|
|
82
83
|
|
|
83
|
-
if (
|
|
84
|
+
if (column.modalComponent) {
|
|
84
85
|
const domRect = cellRef.value.getBoundingClientRect()
|
|
85
86
|
tableData.modal.visible = true
|
|
86
87
|
tableData.modal.colIndex = colIndex
|
|
@@ -89,8 +90,14 @@ const handleInput = () => {
|
|
|
89
90
|
tableData.modal.top = domRect.top + domRect.height
|
|
90
91
|
tableData.modal.left = domRect.left
|
|
91
92
|
tableData.modal.width = cellWidth.value
|
|
92
|
-
|
|
93
|
-
|
|
93
|
+
|
|
94
|
+
if (typeof column.modalComponent === 'function') {
|
|
95
|
+
tableData.modal.component = column.modalComponent({ table, row, column })
|
|
96
|
+
} else {
|
|
97
|
+
tableData.modal.component = column.modalComponent
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
tableData.modal.componentProps = column.modalComponentExtraProps
|
|
94
101
|
}
|
|
95
102
|
}
|
|
96
103
|
|
|
@@ -124,7 +131,7 @@ if (addNavigation) {
|
|
|
124
131
|
// const updateData = (event: Event) => {
|
|
125
132
|
// if (event) {
|
|
126
133
|
// // custom components need to handle their own updateData, this is the default
|
|
127
|
-
// if (!
|
|
134
|
+
// if (!column.component) {
|
|
128
135
|
// tableData.setCellData(rowIndex, colIndex, cell.value.innerHTML)
|
|
129
136
|
// }
|
|
130
137
|
// cellModified.value = true
|
|
@@ -132,11 +139,11 @@ if (addNavigation) {
|
|
|
132
139
|
// }
|
|
133
140
|
|
|
134
141
|
const textAlign = computed(() => {
|
|
135
|
-
return
|
|
142
|
+
return column.align || 'center'
|
|
136
143
|
})
|
|
137
144
|
|
|
138
145
|
const cellWidth = computed(() => {
|
|
139
|
-
return
|
|
146
|
+
return column.width || '40ch'
|
|
140
147
|
})
|
|
141
148
|
|
|
142
149
|
const onFocus = () => {
|
|
@@ -151,7 +158,7 @@ const onChange = () => {
|
|
|
151
158
|
currentData.value = cellRef.value.textContent
|
|
152
159
|
cellRef.value.dispatchEvent(new Event('change'))
|
|
153
160
|
cellModified.value = true // set display instead
|
|
154
|
-
if (!
|
|
161
|
+
if (!column.format) {
|
|
155
162
|
// TODO: need to setup reverse format function
|
|
156
163
|
tableData.setCellData(rowIndex, colIndex, currentData.value)
|
|
157
164
|
}
|
package/src/index.ts
CHANGED
|
@@ -7,7 +7,7 @@ import ATable from '@/components/ATable.vue'
|
|
|
7
7
|
import ATableHeader from '@/components/ATableHeader.vue'
|
|
8
8
|
import ATableModal from '@/components/ATableModal.vue'
|
|
9
9
|
import TableDataStore from './components'
|
|
10
|
-
export type {
|
|
10
|
+
export type { CellContext, TableColumn, TableConfig, TableDisplay, TableRow, TableModal } from '@/types'
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
13
|
* Install all ATable components
|
package/src/types/index.ts
CHANGED
|
@@ -11,14 +11,14 @@ export type TableColumn = {
|
|
|
11
11
|
|
|
12
12
|
cellComponent?: string
|
|
13
13
|
cellComponentProps?: Record<string, any>
|
|
14
|
-
modalComponent?: string
|
|
15
|
-
|
|
14
|
+
modalComponent?: string | ((context?: CellContext) => string)
|
|
15
|
+
modalComponentExtraProps?: Record<string, any>
|
|
16
16
|
|
|
17
|
-
format?: string | ((value: any, context?:
|
|
17
|
+
format?: string | ((value: any, context?: CellContext) => string)
|
|
18
18
|
mask?: (value: any) => any
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
export type
|
|
21
|
+
export type CellContext = {
|
|
22
22
|
row: TableRow
|
|
23
23
|
column: TableColumn
|
|
24
24
|
table: TableDataStore['table']
|