@stonecrop/atable 0.3.1 → 0.3.3

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 (15) hide show
  1. package/dist/assets/index.css +1 -1
  2. package/dist/atable.d.ts +42 -21
  3. package/dist/atable.js +200 -187
  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 +24 -18
  8. package/dist/src/stores/table.d.ts.map +1 -1
  9. package/dist/src/types/index.d.ts +18 -3
  10. package/dist/src/types/index.d.ts.map +1 -1
  11. package/package.json +3 -3
  12. package/src/components/ACell.vue +15 -7
  13. package/src/components/ATable.vue +2 -5
  14. package/src/components/ATableModal.vue +34 -11
  15. package/src/types/index.ts +18 -3
package/dist/assets/index.css CHANGED
@@ -1 +1 @@
1
- @import"https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap";.atable-cell{border-radius:0;box-sizing:border-box;margin:0;outline:none;box-shadow:none;color:var(--sc-cell-text-color);padding-left:.5ch!important;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);border-spacing:0px;border-collapse:collapse;overflow:hidden;text-overflow:ellipsis;order:1;white-space:nowrap;max-width:40ch}.atable-cell a{color:var(--sc-cell-text-color);text-decoration:none}.atable-cell:focus,.atable-cell:focus-within{background-color:var(--sc-focus-cell-background);outline-width:var(--sc-atable-cell-border-width);outline-style:solid;outline-offset:calc(var(--sc-atable-cell-border-width) * -1);outline-color:var(--sc-focus-cell-outline);box-shadow:none;overflow:hidden;text-wrap:nowrap;box-sizing:border-box}.row-index{color:var(--sc-header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch;display:flex;align-items:center;justify-content:center}.expandable-row{border-top:1px solid var(--sc-row-border-color);height:var(--sc-atable-row-height);display:flex}.expandable-row>td:first-child{border-left:4px solid var(--sc-row-border-color)}.expanded-row{display:flex;border-left:2px solid var(--sc-row-border-color)}.expandable-row:last-child{border-bottom:1px solid var(--sc-row-border-color)}.expanded-row-content{border-top:1px solid var(--sc-row-border-color);padding:1.5rem}.table-row{border-top:1px solid var(--sc-row-border-color);display:flex;background-color:#fff}.table-row>td:first-child{border-left:4px solid var(--sc-row-border-color)}.list-index{color:var(--sc-header-text-color);font-weight:700;padding-left:var(--sc-atable-row-padding);padding-right:.5em;text-align:left;-webkit-user-select:none;user-select:none;width:7ch;text-overflow:ellipsis;overflow:hidden;box-sizing:border-box;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding)}.tree-index{color:var(--sc-header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch;box-sizing:border-box;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding)}.atable-header-row{display:flex}.atable-header-row th{padding-left:.5ch!important;font-weight:700;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);box-sizing:border-box;color:var(--sc-header-text-color)}#header-index{padding-left:var(--sc-atable-row-padding);box-sizing:border-box}.tree-index{padding-right:0}th{order:1}.list-expansion-index{width:2ch;margin-left:5px}:root{--sc-primary-color: #0098c9;--sc-primary-text-color: #ffffff;--sc-brand-color: #202a44;--sc-gray-5: #f2f2f2;--sc-gray-10: #e6e6e6;--sc-gray-20: #cccccc;--sc-gray-50: #808080;--sc-gray-60: #666666;--sc-gray-80: #333333;--sc-brand-danger: #e63c28;--sc-brand-success: #155724;--sc-brand-warning: #b99d3e;--sc-active-cell-background: #ffffff;--sc-active-cell-outline: #e6a92d;--sc-cell-border-color: #ffffff;--sc-cell-text-color: #3a3c41;--sc-focus-cell-background: #ffffff;--sc-focus-cell-outline: #000000;--sc-header-border-color: #ffffff;--sc-header-text-color: var(--sc-gray-20);--sc-row-border-color: var(--sc-gray-20);--sc-row-color-zebra-dark: #dddddd;--sc-row-color-zebra-light: #eeeeee;--sc-row-number-background-color: #ffffff;--sc-input-active-border-color: #000000;--sc-input-active-label-color: #000000;--sc-input-border-color: var(--sc-gray-20);--sc-input-label-color: var(--sc-gray-60);--sc-required-border: #e63c28;--sc-cell-changed-color: #d8edff;--sc-form-border: var(--sc-gray-20);--sc-form-background: #ffffff;--sc-input-field-background: #ffffff;--sc-input-field-disabled-background: var(--sc-gray-5);--sc-font-size: 10px;--sc-font-family: Arimo, Arial, sans-serif;--sc-table-font-size: 16px;--sc-atable-font-family: "Arimo", sans-serif;--sc-atable-row-padding: .125rem;--sc-atable-row-height: 1.5em;--sc-atable-cell-border-width: 2px;--sc-btn-border: #cccccc;--sc-btn-color: white;--sc-btn-hover: #f2f2f2;--sc-btn-label-color: black}.amodal{position:fixed;background-color:var(--sc-row-color-zebra-dark);z-index:100}.sticky-index{position:sticky;left:0;z-index:1;order:0}.sticky-column,th.sticky-column,td.sticky-column,th.sticky-index,td.sticky-index{position:sticky;z-index:1;order:0;background:#fff}.sticky-column-edge,.atable th.sticky-column-edge{border-right:1px solid var(--sc-row-border-color);border-right-width:1px}[data-v-a7848db7]:root{--sc-primary-color: #0098c9;--sc-primary-text-color: #ffffff;--sc-brand-color: #202a44;--sc-gray-5: #f2f2f2;--sc-gray-10: #e6e6e6;--sc-gray-20: #cccccc;--sc-gray-50: #808080;--sc-gray-60: #666666;--sc-gray-80: #333333;--sc-brand-danger: #e63c28;--sc-brand-success: #155724;--sc-brand-warning: #b99d3e;--sc-active-cell-background: #ffffff;--sc-active-cell-outline: #e6a92d;--sc-cell-border-color: #ffffff;--sc-cell-text-color: #3a3c41;--sc-focus-cell-background: #ffffff;--sc-focus-cell-outline: #000000;--sc-header-border-color: #ffffff;--sc-header-text-color: var(--sc-gray-20);--sc-row-border-color: var(--sc-gray-20);--sc-row-color-zebra-dark: #dddddd;--sc-row-color-zebra-light: #eeeeee;--sc-row-number-background-color: #ffffff;--sc-input-active-border-color: #000000;--sc-input-active-label-color: #000000;--sc-input-border-color: var(--sc-gray-20);--sc-input-label-color: var(--sc-gray-60);--sc-required-border: #e63c28;--sc-cell-changed-color: #d8edff;--sc-form-border: var(--sc-gray-20);--sc-form-background: #ffffff;--sc-input-field-background: #ffffff;--sc-input-field-disabled-background: var(--sc-gray-5);--sc-font-size: 10px;--sc-font-family: Arimo, Arial, sans-serif;--sc-table-font-size: 16px;--sc-atable-font-family: "Arimo", sans-serif;--sc-atable-row-padding: .125rem;--sc-atable-row-height: 1.5em;--sc-atable-cell-border-width: 2px;--sc-btn-border: #cccccc;--sc-btn-color: white;--sc-btn-hover: #f2f2f2;--sc-btn-label-color: black}.atable[data-v-a7848db7]{font-family:var(--sc-atable-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size);border-collapse:collapse;box-sizing:border-box;table-layout:auto;width:auto}.atable th[data-v-a7848db7]{border-width:0px;border-style:solid;border-radius:0;padding-left:.5ch;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);color:var(--sc-gray-60);height:var(--sc-atable-row-height);font-weight:300;letter-spacing:.05rem;order:1;box-sizing:border-box}.atable th[data-v-a7848db7]:focus{outline:none}
1
+ @import"https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap";.atable-cell{border-radius:0;box-sizing:border-box;margin:0;outline:none;box-shadow:none;color:var(--sc-cell-text-color);padding-left:.5ch!important;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);border-spacing:0px;border-collapse:collapse;overflow:hidden;text-overflow:ellipsis;order:1;white-space:nowrap;max-width:40ch}.atable-cell a{color:var(--sc-cell-text-color);text-decoration:none}.atable-cell:focus,.atable-cell:focus-within{background-color:var(--sc-focus-cell-background);outline-width:var(--sc-atable-cell-border-width);outline-style:solid;outline-offset:calc(var(--sc-atable-cell-border-width) * -1);outline-color:var(--sc-focus-cell-outline);box-shadow:none;overflow:hidden;text-wrap:nowrap;box-sizing:border-box}.row-index{color:var(--sc-header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch;display:flex;align-items:center;justify-content:center}.expandable-row{border-top:1px solid var(--sc-row-border-color);height:var(--sc-atable-row-height);display:flex}.expandable-row>td:first-child{border-left:4px solid var(--sc-row-border-color)}.expanded-row{display:flex;border-left:2px solid var(--sc-row-border-color)}.expandable-row:last-child{border-bottom:1px solid var(--sc-row-border-color)}.expanded-row-content{border-top:1px solid var(--sc-row-border-color);padding:1.5rem}.table-row{border-top:1px solid var(--sc-row-border-color);display:flex;background-color:#fff}.table-row>td:first-child{border-left:4px solid var(--sc-row-border-color)}.list-index{color:var(--sc-header-text-color);font-weight:700;padding-left:var(--sc-atable-row-padding);padding-right:.5em;text-align:left;-webkit-user-select:none;user-select:none;width:7ch;text-overflow:ellipsis;overflow:hidden;box-sizing:border-box;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding)}.tree-index{color:var(--sc-header-text-color);font-weight:700;text-align:center;-webkit-user-select:none;user-select:none;width:2ch;box-sizing:border-box;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding)}.atable-header-row{display:flex}.atable-header-row th{padding-left:.5ch!important;font-weight:700;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);box-sizing:border-box;color:var(--sc-header-text-color)}#header-index{padding-left:var(--sc-atable-row-padding);box-sizing:border-box}.tree-index{padding-right:0}th{order:1}.list-expansion-index{width:2ch;margin-left:5px}:root{--sc-primary-color: #0098c9;--sc-primary-text-color: #ffffff;--sc-brand-color: #202a44;--sc-gray-5: #f2f2f2;--sc-gray-10: #e6e6e6;--sc-gray-20: #cccccc;--sc-gray-50: #808080;--sc-gray-60: #666666;--sc-gray-80: #333333;--sc-brand-danger: #e63c28;--sc-brand-success: #155724;--sc-brand-warning: #b99d3e;--sc-active-cell-background: #ffffff;--sc-active-cell-outline: #e6a92d;--sc-cell-border-color: #ffffff;--sc-cell-text-color: #3a3c41;--sc-focus-cell-background: #ffffff;--sc-focus-cell-outline: #000000;--sc-header-border-color: #ffffff;--sc-header-text-color: var(--sc-gray-20);--sc-row-border-color: var(--sc-gray-20);--sc-row-color-zebra-dark: #dddddd;--sc-row-color-zebra-light: #eeeeee;--sc-row-number-background-color: #ffffff;--sc-input-active-border-color: #000000;--sc-input-active-label-color: #000000;--sc-input-border-color: var(--sc-gray-20);--sc-input-label-color: var(--sc-gray-60);--sc-required-border: #e63c28;--sc-cell-changed-color: #d8edff;--sc-form-border: var(--sc-gray-20);--sc-form-background: #ffffff;--sc-input-field-background: #ffffff;--sc-input-field-disabled-background: var(--sc-gray-5);--sc-font-size: 10px;--sc-font-family: Arimo, Arial, sans-serif;--sc-table-font-size: 16px;--sc-atable-font-family: "Arimo", sans-serif;--sc-atable-row-padding: .125rem;--sc-atable-row-height: 1.5em;--sc-atable-cell-border-width: 2px;--sc-btn-border: #cccccc;--sc-btn-color: white;--sc-btn-hover: #f2f2f2;--sc-btn-label-color: black}.amodal{position:absolute;background-color:var(--sc-row-color-zebra-dark);z-index:100}.sticky-index{position:sticky;left:0;z-index:1;order:0}.sticky-column,th.sticky-column,td.sticky-column,th.sticky-index,td.sticky-index{position:sticky;z-index:1;order:0;background:#fff}.sticky-column-edge,.atable th.sticky-column-edge{border-right:1px solid var(--sc-row-border-color);border-right-width:1px}[data-v-7a1c014a]:root{--sc-primary-color: #0098c9;--sc-primary-text-color: #ffffff;--sc-brand-color: #202a44;--sc-gray-5: #f2f2f2;--sc-gray-10: #e6e6e6;--sc-gray-20: #cccccc;--sc-gray-50: #808080;--sc-gray-60: #666666;--sc-gray-80: #333333;--sc-brand-danger: #e63c28;--sc-brand-success: #155724;--sc-brand-warning: #b99d3e;--sc-active-cell-background: #ffffff;--sc-active-cell-outline: #e6a92d;--sc-cell-border-color: #ffffff;--sc-cell-text-color: #3a3c41;--sc-focus-cell-background: #ffffff;--sc-focus-cell-outline: #000000;--sc-header-border-color: #ffffff;--sc-header-text-color: var(--sc-gray-20);--sc-row-border-color: var(--sc-gray-20);--sc-row-color-zebra-dark: #dddddd;--sc-row-color-zebra-light: #eeeeee;--sc-row-number-background-color: #ffffff;--sc-input-active-border-color: #000000;--sc-input-active-label-color: #000000;--sc-input-border-color: var(--sc-gray-20);--sc-input-label-color: var(--sc-gray-60);--sc-required-border: #e63c28;--sc-cell-changed-color: #d8edff;--sc-form-border: var(--sc-gray-20);--sc-form-background: #ffffff;--sc-input-field-background: #ffffff;--sc-input-field-disabled-background: var(--sc-gray-5);--sc-font-size: 10px;--sc-font-family: Arimo, Arial, sans-serif;--sc-table-font-size: 16px;--sc-atable-font-family: "Arimo", sans-serif;--sc-atable-row-padding: .125rem;--sc-atable-row-height: 1.5em;--sc-atable-cell-border-width: 2px;--sc-btn-border: #cccccc;--sc-btn-color: white;--sc-btn-hover: #f2f2f2;--sc-btn-label-color: black}.atable[data-v-7a1c014a]{position:relative;font-family:var(--sc-atable-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--sc-table-font-size);border-collapse:collapse;box-sizing:border-box;table-layout:auto;width:auto}.atable th[data-v-7a1c014a]{border-width:0px;border-style:solid;border-radius:0;padding-left:.5ch;padding-right:.5ch;padding-top:var(--sc-atable-row-padding);padding-bottom:var(--sc-atable-row-padding);color:var(--sc-gray-60);height:var(--sc-atable-row-height);font-weight:300;letter-spacing:.05rem;order:1;box-sizing:border-box}.atable th[data-v-7a1c014a]:focus{outline:none}
package/dist/atable.d.ts CHANGED
@@ -61,9 +61,9 @@ width?: string;
61
61
  pinned?: boolean;
62
62
  cellComponent?: string;
63
63
  cellComponentProps?: Record<string, any>;
64
- modalComponent?: string | ((context?: CellContext) => string);
64
+ modalComponent?: string | ((context: CellContext) => string);
65
65
  modalComponentExtraProps?: Record<string, any>;
66
- format?: string | ((value: any, context?: CellContext) => string);
66
+ format?: string | ((value: any, context: CellContext) => string);
67
67
  mask?: (value: any) => any;
68
68
  }[], TableColumn[] | {
69
69
  name: string;
@@ -75,9 +75,9 @@ width?: string;
75
75
  pinned?: boolean;
76
76
  cellComponent?: string;
77
77
  cellComponentProps?: Record<string, any>;
78
- modalComponent?: string | ((context?: CellContext) => string);
78
+ modalComponent?: string | ((context: CellContext) => string);
79
79
  modalComponentExtraProps?: Record<string, any>;
80
- format?: string | ((value: any, context?: CellContext) => string);
80
+ format?: string | ((value: any, context: CellContext) => string);
81
81
  mask?: (value: any) => any;
82
82
  }[]>;
83
83
  rows: Ref< {
@@ -119,23 +119,25 @@ rowModified?: boolean;
119
119
  modal: Ref< {
120
120
  colIndex?: number;
121
121
  event?: string;
122
+ height?: number;
122
123
  left?: number;
123
124
  parent?: HTMLElement;
124
125
  rowIndex?: number;
125
126
  top?: number;
126
127
  visible?: boolean;
127
- width?: string;
128
+ width?: number;
128
129
  component?: string;
129
130
  componentProps?: Record<string, any>;
130
131
  }, TableModal | {
131
132
  colIndex?: number;
132
133
  event?: string;
134
+ height?: number;
133
135
  left?: number;
134
136
  parent?: HTMLElement;
135
137
  rowIndex?: number;
136
138
  top?: number;
137
139
  visible?: boolean;
138
- width?: string;
140
+ width?: number;
139
141
  component?: string;
140
142
  componentProps?: Record<string, any>;
141
143
  }>;
@@ -163,9 +165,9 @@ width?: string;
163
165
  pinned?: boolean;
164
166
  cellComponent?: string;
165
167
  cellComponentProps?: Record<string, any>;
166
- modalComponent?: string | ((context?: CellContext) => string);
168
+ modalComponent?: string | ((context: CellContext) => string);
167
169
  modalComponentExtraProps?: Record<string, any>;
168
- format?: string | ((value: any, context?: CellContext) => string);
170
+ format?: string | ((value: any, context: CellContext) => string);
169
171
  mask?: (value: any) => any;
170
172
  }[], TableColumn[] | {
171
173
  name: string;
@@ -177,9 +179,9 @@ width?: string;
177
179
  pinned?: boolean;
178
180
  cellComponent?: string;
179
181
  cellComponentProps?: Record<string, any>;
180
- modalComponent?: string | ((context?: CellContext) => string);
182
+ modalComponent?: string | ((context: CellContext) => string);
181
183
  modalComponentExtraProps?: Record<string, any>;
182
- format?: string | ((value: any, context?: CellContext) => string);
184
+ format?: string | ((value: any, context: CellContext) => string);
183
185
  mask?: (value: any) => any;
184
186
  }[]>;
185
187
  rows: Ref< {
@@ -221,23 +223,25 @@ rowModified?: boolean;
221
223
  modal: Ref< {
222
224
  colIndex?: number;
223
225
  event?: string;
226
+ height?: number;
224
227
  left?: number;
225
228
  parent?: HTMLElement;
226
229
  rowIndex?: number;
227
230
  top?: number;
228
231
  visible?: boolean;
229
- width?: string;
232
+ width?: number;
230
233
  component?: string;
231
234
  componentProps?: Record<string, any>;
232
235
  }, TableModal | {
233
236
  colIndex?: number;
234
237
  event?: string;
238
+ height?: number;
235
239
  left?: number;
236
240
  parent?: HTMLElement;
237
241
  rowIndex?: number;
238
242
  top?: number;
239
243
  visible?: boolean;
240
- width?: string;
244
+ width?: number;
241
245
  component?: string;
242
246
  componentProps?: Record<string, any>;
243
247
  }>;
@@ -265,9 +269,9 @@ width?: string;
265
269
  pinned?: boolean;
266
270
  cellComponent?: string;
267
271
  cellComponentProps?: Record<string, any>;
268
- modalComponent?: string | ((context?: CellContext) => string);
272
+ modalComponent?: string | ((context: CellContext) => string);
269
273
  modalComponentExtraProps?: Record<string, any>;
270
- format?: string | ((value: any, context?: CellContext) => string);
274
+ format?: string | ((value: any, context: CellContext) => string);
271
275
  mask?: (value: any) => any;
272
276
  }[], TableColumn[] | {
273
277
  name: string;
@@ -279,9 +283,9 @@ width?: string;
279
283
  pinned?: boolean;
280
284
  cellComponent?: string;
281
285
  cellComponentProps?: Record<string, any>;
282
- modalComponent?: string | ((context?: CellContext) => string);
286
+ modalComponent?: string | ((context: CellContext) => string);
283
287
  modalComponentExtraProps?: Record<string, any>;
284
- format?: string | ((value: any, context?: CellContext) => string);
288
+ format?: string | ((value: any, context: CellContext) => string);
285
289
  mask?: (value: any) => any;
286
290
  }[]>;
287
291
  rows: Ref< {
@@ -323,23 +327,25 @@ rowModified?: boolean;
323
327
  modal: Ref< {
324
328
  colIndex?: number;
325
329
  event?: string;
330
+ height?: number;
326
331
  left?: number;
327
332
  parent?: HTMLElement;
328
333
  rowIndex?: number;
329
334
  top?: number;
330
335
  visible?: boolean;
331
- width?: string;
336
+ width?: number;
332
337
  component?: string;
333
338
  componentProps?: Record<string, any>;
334
339
  }, TableModal | {
335
340
  colIndex?: number;
336
341
  event?: string;
342
+ height?: number;
337
343
  left?: number;
338
344
  parent?: HTMLElement;
339
345
  rowIndex?: number;
340
346
  top?: number;
341
347
  visible?: boolean;
342
- width?: string;
348
+ width?: number;
343
349
  component?: string;
344
350
  componentProps?: Record<string, any>;
345
351
  }>;
@@ -379,9 +385,23 @@ export declare type TableColumn = {
379
385
  pinned?: boolean;
380
386
  cellComponent?: string;
381
387
  cellComponentProps?: Record<string, any>;
382
- modalComponent?: string | ((context?: CellContext) => string);
388
+ /**
389
+ * The component to use for the modal. If a function is provided, it will be called with the cell context.
390
+ * The following properties are available on the cell context:
391
+ * - `row` - the row object
392
+ * - `column` - the column object
393
+ * - `table` - the table object
394
+ *
395
+ * The function should return the name of the component to use for the modal.
396
+ *
397
+ * Additionally, the following properties will be automatically passed to the modal component:
398
+ * - `colIndex` - the column index of the current cell
399
+ * - `rowIndex` - the row index of the current cell
400
+ * - `store` - the table data store
401
+ */
402
+ modalComponent?: string | ((context: CellContext) => string);
383
403
  modalComponentExtraProps?: Record<string, any>;
384
- format?: string | ((value: any, context?: CellContext) => string);
404
+ format?: string | ((value: any, context: CellContext) => string);
385
405
  mask?: (value: any) => any;
386
406
  };
387
407
 
@@ -423,12 +443,13 @@ export declare type TableDisplay = {
423
443
  export declare type TableModal = {
424
444
  colIndex?: number;
425
445
  event?: string;
446
+ height?: number;
426
447
  left?: number;
427
448
  parent?: HTMLElement;
428
449
  rowIndex?: number;
429
450
  top?: number;
430
451
  visible?: boolean;
431
- width?: string;
452
+ width?: number;
432
453
  component?: string;
433
454
  componentProps?: Record<string, any>;
434
455
  };