@stonecrop/atable 0.4.4 → 0.4.6
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/assets/index.css +1 -1
- package/dist/atable.d.ts +7 -0
- package/dist/atable.js +410 -445
- package/dist/atable.js.map +1 -1
- package/dist/atable.umd.cjs +2 -2
- package/dist/atable.umd.cjs.map +1 -1
- package/dist/src/stores/table.d.ts +6 -0
- package/dist/src/stores/table.d.ts.map +1 -1
- package/dist/src/types/index.d.ts +1 -0
- package/dist/src/types/index.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/components/ACell.vue +3 -1
- package/src/components/ARow.vue +0 -1
- package/src/components/ATable.vue +3 -3
- package/src/components/ATableModal.vue +19 -27
- package/src/stores/table.ts +1 -1
- package/src/types/index.ts +1 -0
|
@@ -74,6 +74,7 @@ export declare const createTableStore: (initData: {
|
|
|
74
74
|
}[]>;
|
|
75
75
|
modal: import("vue").Ref<{
|
|
76
76
|
bottom?: number | undefined;
|
|
77
|
+
cell?: (HTMLTableCellElement | null) | undefined;
|
|
77
78
|
colIndex?: number | undefined;
|
|
78
79
|
event?: string | undefined;
|
|
79
80
|
height?: number | undefined;
|
|
@@ -86,6 +87,7 @@ export declare const createTableStore: (initData: {
|
|
|
86
87
|
componentProps?: Record<string, any> | undefined;
|
|
87
88
|
}, TableModal | {
|
|
88
89
|
bottom?: number | undefined;
|
|
90
|
+
cell?: (HTMLTableCellElement | null) | undefined;
|
|
89
91
|
colIndex?: number | undefined;
|
|
90
92
|
event?: string | undefined;
|
|
91
93
|
height?: number | undefined;
|
|
@@ -180,6 +182,7 @@ export declare const createTableStore: (initData: {
|
|
|
180
182
|
}[]>;
|
|
181
183
|
modal: import("vue").Ref<{
|
|
182
184
|
bottom?: number | undefined;
|
|
185
|
+
cell?: (HTMLTableCellElement | null) | undefined;
|
|
183
186
|
colIndex?: number | undefined;
|
|
184
187
|
event?: string | undefined;
|
|
185
188
|
height?: number | undefined;
|
|
@@ -192,6 +195,7 @@ export declare const createTableStore: (initData: {
|
|
|
192
195
|
componentProps?: Record<string, any> | undefined;
|
|
193
196
|
}, TableModal | {
|
|
194
197
|
bottom?: number | undefined;
|
|
198
|
+
cell?: (HTMLTableCellElement | null) | undefined;
|
|
195
199
|
colIndex?: number | undefined;
|
|
196
200
|
event?: string | undefined;
|
|
197
201
|
height?: number | undefined;
|
|
@@ -286,6 +290,7 @@ export declare const createTableStore: (initData: {
|
|
|
286
290
|
}[]>;
|
|
287
291
|
modal: import("vue").Ref<{
|
|
288
292
|
bottom?: number | undefined;
|
|
293
|
+
cell?: (HTMLTableCellElement | null) | undefined;
|
|
289
294
|
colIndex?: number | undefined;
|
|
290
295
|
event?: string | undefined;
|
|
291
296
|
height?: number | undefined;
|
|
@@ -298,6 +303,7 @@ export declare const createTableStore: (initData: {
|
|
|
298
303
|
componentProps?: Record<string, any> | undefined;
|
|
299
304
|
}, TableModal | {
|
|
300
305
|
bottom?: number | undefined;
|
|
306
|
+
cell?: (HTMLTableCellElement | null) | undefined;
|
|
301
307
|
colIndex?: number | undefined;
|
|
302
308
|
event?: string | undefined;
|
|
303
309
|
height?: number | undefined;
|
|
@@ -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;AAGzG;;;;;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
|
|
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;AAGzG;;;;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA+J4B,UAAU;kBAtFhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCA4D7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCA3CrC,WAAW,KAAG,aAAa;0BA0ElC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;6BAJZ,MAAM;4BA3BP,MAAM,YAAY,MAAM,SAAS,GAAG;4BAYpC,MAAM,YAAY,MAAM,SAAS,MAAM;gCA+BnC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0Cd,UAAU;kBAtFhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCA4D7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCA3CrC,WAAW,KAAG,aAAa;0BA0ElC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;6BAJZ,MAAM;4BA3BP,MAAM,YAAY,MAAM,SAAS,GAAG;4BAYpC,MAAM,YAAY,MAAM,SAAS,MAAM;gCA+BnC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0Cd,UAAU;kBAtFhB,CAAC,kBAAkB,MAAM,YAAY,MAAM,KAAG,CAAC;oCA4D7B,MAAM,YAAY,MAAM;kCAK1B,MAAM,YAAY,MAAM,SAAS,GAAG;iCA3CrC,WAAW,KAAG,aAAa;0BA0ElC,MAAM,gBAAgB,MAAM;mCAhEnB,MAAM;6BAJZ,MAAM;4BA3BP,MAAM,YAAY,MAAM,SAAS,GAAG;4BAYpC,MAAM,YAAY,MAAM,SAAS,MAAM;gCA+BnC,MAAM;gNA2F1C,CAAA"}
|
|
@@ -88,6 +88,7 @@ export type TableRow = {
|
|
|
88
88
|
*/
|
|
89
89
|
export type TableModal = {
|
|
90
90
|
bottom?: ReturnType<typeof useElementBounding>['bottom'];
|
|
91
|
+
cell?: HTMLTableCellElement | null;
|
|
91
92
|
colIndex?: number;
|
|
92
93
|
event?: string;
|
|
93
94
|
height?: ReturnType<typeof useElementBounding>['height'];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stonecrop/atable",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": {
|
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
"@vueuse/core": "^12.0.0",
|
|
39
39
|
"pinia": "^2.3.0",
|
|
40
40
|
"vue": "^3.5.11",
|
|
41
|
-
"@stonecrop/
|
|
42
|
-
"@stonecrop/
|
|
41
|
+
"@stonecrop/utilities": "0.4.6",
|
|
42
|
+
"@stonecrop/themes": "0.4.6"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@microsoft/api-documenter": "^7.26.2",
|
package/src/components/ACell.vue
CHANGED
|
@@ -98,11 +98,12 @@ const showModal = () => {
|
|
|
98
98
|
state.modal.visible = true
|
|
99
99
|
state.modal.colIndex = colIndex
|
|
100
100
|
state.modal.rowIndex = rowIndex
|
|
101
|
-
// TODO: typing refs somehow resolves to unref'd value; probably a bug in
|
|
101
|
+
// TODO: typing refs somehow resolves to unref'd value; probably a bug in TS?
|
|
102
102
|
state.modal.left = left
|
|
103
103
|
state.modal.bottom = bottom
|
|
104
104
|
state.modal.width = width
|
|
105
105
|
state.modal.height = height
|
|
106
|
+
state.modal.cell = cellRef.value
|
|
106
107
|
|
|
107
108
|
if (typeof column.modalComponent === 'function') {
|
|
108
109
|
state.modal.component = column.modalComponent({ table: state.table, row, column })
|
|
@@ -201,6 +202,7 @@ const updateCellData = (payload: Event) => {
|
|
|
201
202
|
order: 1;
|
|
202
203
|
white-space: nowrap;
|
|
203
204
|
max-width: 40ch;
|
|
205
|
+
border-top: 1px solid var(--sc-row-border-color);
|
|
204
206
|
}
|
|
205
207
|
.atable-cell a {
|
|
206
208
|
color: var(--sc-cell-text-color);
|
package/src/components/ARow.vue
CHANGED
|
@@ -175,7 +175,7 @@ defineExpose({ store })
|
|
|
175
175
|
.sticky-index {
|
|
176
176
|
position: sticky;
|
|
177
177
|
left: 0px;
|
|
178
|
-
z-index:
|
|
178
|
+
z-index: 10;
|
|
179
179
|
order: 0;
|
|
180
180
|
}
|
|
181
181
|
|
|
@@ -185,7 +185,7 @@ td.sticky-column,
|
|
|
185
185
|
th.sticky-index,
|
|
186
186
|
td.sticky-index {
|
|
187
187
|
position: sticky;
|
|
188
|
-
z-index:
|
|
188
|
+
z-index: 10;
|
|
189
189
|
order: 0;
|
|
190
190
|
background: white;
|
|
191
191
|
}
|
|
@@ -193,7 +193,6 @@ td.sticky-index {
|
|
|
193
193
|
.sticky-column-edge,
|
|
194
194
|
.atable th.sticky-column-edge {
|
|
195
195
|
border-right: 1px solid var(--sc-row-border-color);
|
|
196
|
-
border-right-width: 1px;
|
|
197
196
|
}
|
|
198
197
|
</style>
|
|
199
198
|
|
|
@@ -209,6 +208,7 @@ td.sticky-index {
|
|
|
209
208
|
box-sizing: border-box;
|
|
210
209
|
table-layout: auto;
|
|
211
210
|
width: auto;
|
|
211
|
+
overflow: clip;
|
|
212
212
|
/* border-left:4px solid var(--sc-form-border); */
|
|
213
213
|
}
|
|
214
214
|
.atable th {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="amodal" ref="amodal" tabindex="-1" @click
|
|
2
|
+
<div class="amodal" ref="amodal" tabindex="-1" @click.stop @input.stop :style="amodalStyles">
|
|
3
3
|
<slot />
|
|
4
4
|
</div>
|
|
5
5
|
</template>
|
|
6
6
|
|
|
7
7
|
<script setup lang="ts">
|
|
8
|
-
import { useElementBounding
|
|
8
|
+
import { useElementBounding } from '@vueuse/core'
|
|
9
9
|
import { useTemplateRef, computed } from 'vue'
|
|
10
10
|
|
|
11
11
|
import { createTableStore } from '../stores/table'
|
|
@@ -13,49 +13,41 @@ import { createTableStore } from '../stores/table'
|
|
|
13
13
|
const { store } = defineProps<{ store: ReturnType<typeof createTableStore> }>()
|
|
14
14
|
|
|
15
15
|
const amodalRef = useTemplateRef('amodal')
|
|
16
|
-
const { width, height } = useElementBounding(amodalRef)
|
|
17
|
-
const { y: scrollY } = useWindowScroll()
|
|
16
|
+
const { width: modalWidth, height: modalHeight } = useElementBounding(amodalRef)
|
|
18
17
|
|
|
19
18
|
const amodalStyles = computed(() => {
|
|
20
19
|
if (!(store.modal.height && store.modal.width && store.modal.left && store.modal.bottom)) return
|
|
21
20
|
|
|
22
|
-
|
|
23
|
-
const
|
|
21
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
|
|
22
|
+
const table = store.modal.cell?.closest('table')!
|
|
23
|
+
const maxHeight = table.offsetHeight || 0
|
|
24
|
+
const maxWidth = table.offsetWidth || 0
|
|
24
25
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
)
|
|
32
|
-
const maxWidth = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth)
|
|
26
|
+
// Get the Y position of the cell clicked by getting the cumulative height of prior rows + the header (if present)
|
|
27
|
+
let modalY = store.modal.cell?.offsetTop || 0
|
|
28
|
+
const headerHeight = table.querySelector('thead')?.offsetHeight || 0
|
|
29
|
+
modalY += headerHeight
|
|
30
|
+
// if the modal will overflow the bottom of the table, remove modal and cell heights from the Y position
|
|
31
|
+
modalY = modalY + modalHeight.value < maxHeight ? modalY : modalY - (modalHeight.value + store.modal.height)
|
|
33
32
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
const modalX =
|
|
40
|
-
store.modal.left + width.value <= maxWidth ? store.modal.left : store.modal.left - (width.value - store.modal.width)
|
|
33
|
+
// Get the X position of the cell clicked by getting the cumulative width of prior cells within the row
|
|
34
|
+
let modalX = store.modal.cell?.offsetLeft || 0
|
|
35
|
+
// if the modal will overflow the right of the table, remove modal and cell widths from the X position
|
|
36
|
+
modalX = modalX + modalWidth.value <= maxWidth ? modalX : modalX - (modalWidth.value - store.modal.width)
|
|
41
37
|
|
|
42
38
|
return {
|
|
43
39
|
left: `${modalX}px`,
|
|
44
40
|
top: `${modalY}px`,
|
|
45
41
|
}
|
|
46
42
|
})
|
|
47
|
-
|
|
48
|
-
const handleInput = (event: Event) => {
|
|
49
|
-
event.stopPropagation()
|
|
50
|
-
}
|
|
51
43
|
</script>
|
|
52
44
|
|
|
53
45
|
<style>
|
|
54
46
|
@import url('@stonecrop/themes/default.css');
|
|
55
47
|
|
|
56
48
|
.amodal {
|
|
57
|
-
position:
|
|
49
|
+
position: absolute;
|
|
58
50
|
background-color: var(--sc-row-color-zebra-dark);
|
|
59
|
-
z-index:
|
|
51
|
+
z-index: 5;
|
|
60
52
|
}
|
|
61
53
|
</style>
|
package/src/stores/table.ts
CHANGED
|
@@ -75,7 +75,7 @@ export const createTableStore = (initData: {
|
|
|
75
75
|
const config = ref(initData.config || {})
|
|
76
76
|
const table = ref(initData.table || createTableObject())
|
|
77
77
|
const display = ref(createDisplayObject(initData.display))
|
|
78
|
-
const modal = ref(initData.modal || { visible: false })
|
|
78
|
+
const modal = ref<TableModal>(initData.modal || { visible: false })
|
|
79
79
|
const updates = ref<Record<string, string>>({})
|
|
80
80
|
|
|
81
81
|
// getters
|
package/src/types/index.ts
CHANGED
|
@@ -96,6 +96,7 @@ export type TableRow = {
|
|
|
96
96
|
*/
|
|
97
97
|
export type TableModal = {
|
|
98
98
|
bottom?: ReturnType<typeof useElementBounding>['bottom']
|
|
99
|
+
cell?: HTMLTableCellElement | null
|
|
99
100
|
colIndex?: number
|
|
100
101
|
event?: string
|
|
101
102
|
height?: ReturnType<typeof useElementBounding>['height']
|