@stonecrop/atable 0.3.0 → 0.3.2

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.
Files changed (14) hide show
  1. package/dist/assets/index.css +1 -1
  2. package/dist/atable.d.ts +28 -14
  3. package/dist/atable.js +655 -648
  4. package/dist/atable.js.map +1 -1
  5. package/dist/atable.umd.cjs +2 -2
  6. package/dist/atable.umd.cjs.map +1 -1
  7. package/dist/src/stores/table.d.ts +12 -12
  8. package/dist/src/stores/table.d.ts.map +1 -1
  9. package/dist/src/types/index.d.ts +16 -2
  10. package/dist/src/types/index.d.ts.map +1 -1
  11. package/package.json +5 -5
  12. package/src/components/ACell.vue +11 -6
  13. package/src/components/ATable.vue +7 -2
  14. package/src/types/index.ts +16 -2
package/dist/src/stores/table.d.ts CHANGED
@@ -27,9 +27,9 @@ export declare const createTableStore: (initData: {
27
27
  pinned?: boolean;
28
28
  cellComponent?: string;
29
29
  cellComponentProps?: Record<string, any>;
30
- modalComponent?: string | ((context?: CellContext) => string);
30
+ modalComponent?: string | ((context: CellContext) => string);
31
31
  modalComponentExtraProps?: Record<string, any>;
32
- format?: string | ((value: any, context?: CellContext) => string);
32
+ format?: string | ((value: any, context: CellContext) => string);
33
33
  mask?: (value: any) => any;
34
34
  }[], TableColumn[] | {
35
35
  name: string;
@@ -41,9 +41,9 @@ export declare const createTableStore: (initData: {
41
41
  pinned?: boolean;
42
42
  cellComponent?: string;
43
43
  cellComponentProps?: Record<string, any>;
44
- modalComponent?: string | ((context?: CellContext) => string);
44
+ modalComponent?: string | ((context: CellContext) => string);
45
45
  modalComponentExtraProps?: Record<string, any>;
46
- format?: string | ((value: any, context?: CellContext) => string);
46
+ format?: string | ((value: any, context: CellContext) => string);
47
47
  mask?: (value: any) => any;
48
48
  }[]>;
49
49
  rows: import("vue").Ref<{
@@ -129,9 +129,9 @@ export declare const createTableStore: (initData: {
129
129
  pinned?: boolean;
130
130
  cellComponent?: string;
131
131
  cellComponentProps?: Record<string, any>;
132
- modalComponent?: string | ((context?: CellContext) => string);
132
+ modalComponent?: string | ((context: CellContext) => string);
133
133
  modalComponentExtraProps?: Record<string, any>;
134
- format?: string | ((value: any, context?: CellContext) => string);
134
+ format?: string | ((value: any, context: CellContext) => string);
135
135
  mask?: (value: any) => any;
136
136
  }[], TableColumn[] | {
137
137
  name: string;
@@ -143,9 +143,9 @@ export declare const createTableStore: (initData: {
143
143
  pinned?: boolean;
144
144
  cellComponent?: string;
145
145
  cellComponentProps?: Record<string, any>;
146
- modalComponent?: string | ((context?: CellContext) => string);
146
+ modalComponent?: string | ((context: CellContext) => string);
147
147
  modalComponentExtraProps?: Record<string, any>;
148
- format?: string | ((value: any, context?: CellContext) => string);
148
+ format?: string | ((value: any, context: CellContext) => string);
149
149
  mask?: (value: any) => any;
150
150
  }[]>;
151
151
  rows: import("vue").Ref<{
@@ -231,9 +231,9 @@ export declare const createTableStore: (initData: {
231
231
  pinned?: boolean;
232
232
  cellComponent?: string;
233
233
  cellComponentProps?: Record<string, any>;
234
- modalComponent?: string | ((context?: CellContext) => string);
234
+ modalComponent?: string | ((context: CellContext) => string);
235
235
  modalComponentExtraProps?: Record<string, any>;
236
- format?: string | ((value: any, context?: CellContext) => string);
236
+ format?: string | ((value: any, context: CellContext) => string);
237
237
  mask?: (value: any) => any;
238
238
  }[], TableColumn[] | {
239
239
  name: string;
@@ -245,9 +245,9 @@ export declare const createTableStore: (initData: {
245
245
  pinned?: boolean;
246
246
  cellComponent?: string;
247
247
  cellComponentProps?: Record<string, any>;
248
- modalComponent?: string | ((context?: CellContext) => string);
248
+ modalComponent?: string | ((context: CellContext) => string);
249
249
  modalComponentExtraProps?: Record<string, any>;
250
- format?: string | ((value: any, context?: CellContext) => string);
250
+ format?: string | ((value: any, context: CellContext) => string);
251
251
  mask?: (value: any) => any;
252
252
  }[]>;
253
253
  rows: import("vue").Ref<{
package/dist/src/stores/table.d.ts.map CHANGED
@@ -1 +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,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAEzG;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,aAAc;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;;;;;;;;;;;2CAXiB,CAAA;;+CAKF,CAAC;;;;;;;;;;;;2CALC,CAAA;;+CAKF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAyJY,UAAU;kBA7EhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCAmD7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCA3CrC,WAAW,KAAG,aAAa;0BA0ElC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;6BAJZ,MAAM;4BAlBP,MAAM,YAAY,MAAM,SAAS,GAAG;gCAkChC,MAAM;;;;;;;;;;;;2CApHzB,CAAA;;+CAKF,CAAC;;;;;;;;;;;;2CALC,CAAA;;+CAKF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAyJY,UAAU;kBA7EhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCAmD7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCA3CrC,WAAW,KAAG,aAAa;0BA0ElC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;6BAJZ,MAAM;4BAlBP,MAAM,YAAY,MAAM,SAAS,GAAG;gCAkChC,MAAM;;;;;;;;;;;;2CApHzB,CAAA;;+CAKF,CAAC;;;;;;;;;;;;2CALC,CAAA;;+CAKF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAyJY,UAAU;kBA7EhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCAmD7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCA3CrC,WAAW,KAAG,aAAa;0BA0ElC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;6BAJZ,MAAM;4BAlBP,MAAM,YAAY,MAAM,SAAS,GAAG;gCAkChC,MAAM;gMAyF1C,CAAA"}
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,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAEzG;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,aAAc;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAmJ4B,UAAU;kBA7EhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCAmD7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCA3CrC,WAAW,KAAG,aAAa;0BA0ElC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;6BAJZ,MAAM;4BAlBP,MAAM,YAAY,MAAM,SAAS,GAAG;gCAkChC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0Cd,UAAU;kBA7EhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCAmD7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCA3CrC,WAAW,KAAG,aAAa;0BA0ElC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;6BAJZ,MAAM;4BAlBP,MAAM,YAAY,MAAM,SAAS,GAAG;gCAkChC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0Cd,UAAU;kBA7EhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCAmD7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCA3CrC,WAAW,KAAG,aAAa;0BA0ElC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;6BAJZ,MAAM;4BAlBP,MAAM,YAAY,MAAM,SAAS,GAAG;gCAkChC,MAAM;gMAyF1C,CAAA"}
package/dist/src/types/index.d.ts CHANGED
@@ -12,9 +12,23 @@ export type TableColumn = {
12
12
  pinned?: boolean;
13
13
  cellComponent?: string;
14
14
  cellComponentProps?: Record<string, any>;
15
- modalComponent?: string | ((context?: CellContext) => string);
15
+ /**
16
+ * The component to use for the modal. If a function is provided, it will be called with the cell context.
17
+ * The following properties are available on the cell context:
18
+ * - `row` - the row object
19
+ * - `column` - the column object
20
+ * - `table` - the table object
21
+ *
22
+ * The function should return the name of the component to use for the modal.
23
+ *
24
+ * Additionally, the following properties will be automatically passed to the modal component:
25
+ * - `colIndex` - the column index of the current cell
26
+ * - `rowIndex` - the row index of the current cell
27
+ * - `store` - the table data store
28
+ */
29
+ modalComponent?: string | ((context: CellContext) => string);
16
30
  modalComponentExtraProps?: Record<string, any>;
17
- format?: string | ((value: any, context?: CellContext) => string);
31
+ format?: string | ((value: any, context: CellContext) => string);
18
32
  mask?: (value: any) => any;
19
33
  };
20
34
  /**
package/dist/src/types/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,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;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB,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;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACzB,GAAG,EAAE,QAAQ,CAAA;IACb,MAAM,EAAE,WAAW,CAAA;IACnB,KAAK,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;CAC7B,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACzB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,gBAAgB,GAAG,MAAM,CAAA;IACvD,SAAS,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED;;;GAGG;AACH,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,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED;;;GAGG;AACH,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;;;GAGG;AACH,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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,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;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACxC;;;;;;;;;;;;;OAaG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,OAAO,EAAE,WAAW,KAAK,MAAM,CAAC,CAAA;IAC5D,wBAAwB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAE9C,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,WAAW,KAAK,MAAM,CAAC,CAAA;IAChE,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAA;CAC1B,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACzB,GAAG,EAAE,QAAQ,CAAA;IACb,MAAM,EAAE,WAAW,CAAA;IACnB,KAAK,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAA;CAC7B,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACzB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,gBAAgB,GAAG,MAAM,CAAA;IACvD,SAAS,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED;;;GAGG;AACH,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,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED;;;GAGG;AACH,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;;;GAGG;AACH,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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stonecrop/atable",
3
- "version": "0.3.0",
3
+ "version": "0.3.2",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "author": {
@@ -34,12 +34,12 @@
34
34
  "**/*.css"
35
35
  ],
36
36
  "dependencies": {
37
- "@vueuse/components": "^10.11.0",
38
- "@vueuse/core": "^11.1.0",
37
+ "@vueuse/components": "^12.0.0",
38
+ "@vueuse/core": "^12.0.0",
39
39
  "pinia": "^2.3.0",
40
40
  "vue": "^3.5.11",
41
- "@stonecrop/themes": "0.3.0",
42
- "@stonecrop/utilities": "0.3.0"
41
+ "@stonecrop/themes": "0.3.2",
42
+ "@stonecrop/utilities": "0.3.2"
43
43
  },
44
44
  "devDependencies": {
45
45
  "@microsoft/api-documenter": "^7.26.2",
package/src/components/ACell.vue CHANGED
@@ -14,8 +14,7 @@
14
14
  @input="updateCellData"
15
15
  @click="showModal"
16
16
  class="atable-cell"
17
- :class="pinned ? 'sticky-column' : ''"
18
- v-on-click-outside="store.closeModal">
17
+ :class="pinned ? 'sticky-column' : ''">
19
18
  <component
20
19
  v-if="column.cellComponent"
21
20
  :is="column.cellComponent"
@@ -28,9 +27,8 @@
28
27
 
29
28
  <script setup lang="ts">
30
29
  import { KeypressHandlers, defaultKeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
31
- import { vOnClickOutside } from '@vueuse/components'
32
30
  import { useElementBounding } from '@vueuse/core'
33
- import { computed, CSSProperties, ref, useTemplateRef } from 'vue'
31
+ import { computed, CSSProperties, ref, useTemplateRef, watch } from 'vue'
34
32
 
35
33
  import { createTableStore } from '../stores/table'
36
34
  import { isHtmlString } from '../utils'
@@ -55,7 +53,7 @@ const { bottom, left } = useElementBounding(cellRef)
55
53
 
56
54
  // keep a shallow copy of the original cell value for comparison
57
55
  const originalData = store.getCellData(colIndex, rowIndex)
58
- const displayValue = store.getCellDisplayValue(colIndex, rowIndex)
56
+ const displayValue = ref(store.getCellDisplayValue(colIndex, rowIndex))
59
57
  const currentData = ref('')
60
58
  const cellModified = ref(false)
61
59
 
@@ -65,9 +63,16 @@ const row = store.rows[rowIndex]
65
63
  const textAlign = column.align || 'center'
66
64
  const cellWidth = column.width || '40ch'
67
65
 
66
+ watch(
67
+ () => store.getCellData(colIndex, rowIndex),
68
+ cellData => {
69
+ displayValue.value = store.getFormattedValue(colIndex, rowIndex, cellData)
70
+ }
71
+ )
72
+
68
73
  const isHtmlValue = computed(() => {
69
74
  // TODO: check if display value is a native DOM element
70
- return typeof displayValue === 'string' ? isHtmlString(displayValue) : false
75
+ return typeof displayValue.value === 'string' ? isHtmlString(displayValue.value) : false
71
76
  })
72
77
 
73
78
  const cellStyle = computed((): CSSProperties => {
package/src/components/ATable.vue CHANGED
@@ -1,5 +1,9 @@
1
1
  <template>
2
- <table ref="table" class="atable" :style="{ width: store.config.fullWidth ? '100%' : 'auto' }">
2
+ <table
3
+ ref="table"
4
+ class="atable"
5
+ :style="{ width: store.config.fullWidth ? '100%' : 'auto' }"
6
+ v-on-click-outside="store.closeModal">
3
7
  <slot name="header" :data="store">
4
8
  <ATableHeader :columns="store.columns" :store="store" />
5
9
  </slot>
@@ -53,6 +57,7 @@
53
57
  </template>
54
58
 
55
59
  <script setup lang="ts">
60
+ import { vOnClickOutside } from '@vueuse/components'
56
61
  import { useMutationObserver } from '@vueuse/core'
57
62
  import { nextTick, watch, onMounted, useTemplateRef } from 'vue'
58
63
 
@@ -121,7 +126,7 @@ const assignStickyCellWidths = () => {
121
126
  const firstDataRow = table.rows[1]
122
127
  const headerCells = headerRow ? Array.from(headerRow.cells) : []
123
128
  for (const [index, headerCell] of headerCells.entries()) {
124
- const rowCell = firstDataRow.cells[index]
129
+ const rowCell = firstDataRow?.cells[index]
125
130
  if (rowCell) {
126
131
  headerCell.style.width = `${rowCell.offsetWidth}px`
127
132
  }
package/src/types/index.ts CHANGED
@@ -14,10 +14,24 @@ export type TableColumn = {
14
14
 
15
15
  cellComponent?: string
16
16
  cellComponentProps?: Record<string, any>
17
- modalComponent?: string | ((context?: CellContext) => string)
17
+ /**
18
+ * The component to use for the modal. If a function is provided, it will be called with the cell context.
19
+ * The following properties are available on the cell context:
20
+ * - `row` - the row object
21
+ * - `column` - the column object
22
+ * - `table` - the table object
23
+ *
24
+ * The function should return the name of the component to use for the modal.
25
+ *
26
+ * Additionally, the following properties will be automatically passed to the modal component:
27
+ * - `colIndex` - the column index of the current cell
28
+ * - `rowIndex` - the row index of the current cell
29
+ * - `store` - the table data store
30
+ */
31
+ modalComponent?: string | ((context: CellContext) => string)
18
32
  modalComponentExtraProps?: Record<string, any>
19
33
 
20
- format?: string | ((value: any, context?: CellContext) => string)
34
+ format?: string | ((value: any, context: CellContext) => string)
21
35
  mask?: (value: any) => any
22
36
  }
23
37