@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.
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
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":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAElD;;;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,MAAM,CAAC,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC,QAAQ,CAAC,CAAA;IACxD,IAAI,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC,QAAQ,CAAC,CAAA;IACxD,IAAI,CAAC,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;IACpD,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC,OAAO,CAAC,CAAA;IAEtD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACpC,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;CAC1C,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stonecrop/atable",
3
- "version": "0.4.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/themes": "0.4.4",
42
- "@stonecrop/utilities": "0.4.4"
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",
@@ -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 API Extractor?
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);
@@ -70,7 +70,6 @@ if (addNavigation) {
70
70
  @import url('@stonecrop/themes/default.css');
71
71
 
72
72
  .atable-row {
73
- border-top: 1px solid var(--sc-row-border-color);
74
73
  display: flex;
75
74
  background-color: white;
76
75
  }
@@ -175,7 +175,7 @@ defineExpose({ store })
175
175
  .sticky-index {
176
176
  position: sticky;
177
177
  left: 0px;
178
- z-index: 1;
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: 1;
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="handleInput" @input="handleInput" :style="amodalStyles">
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, useWindowScroll } from '@vueuse/core'
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
- const body = document.body
23
- const html = document.documentElement
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
- const maxHeight = Math.max(
26
- body.scrollHeight,
27
- body.offsetHeight,
28
- html.clientHeight,
29
- html.scrollHeight,
30
- html.offsetHeight
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
- const modalY =
35
- store.modal.bottom + height.value + scrollY.value <= maxHeight
36
- ? store.modal.bottom
37
- : store.modal.bottom - height.value - store.modal.height
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: fixed;
49
+ position: absolute;
58
50
  background-color: var(--sc-row-color-zebra-dark);
59
- z-index: 1000;
51
+ z-index: 5;
60
52
  }
61
53
  </style>
@@ -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
@@ -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']