-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* changed amodal to calculate the cell position based on cell and row sizes. Amodal position changed from fixed to absolute * amodal row height calculation gets the height of rows instead of assuming they are all the same height * fix: use offsets to determine relative heights/widths * moved border-top styling from arow to acell --------- Co-authored-by: Rohan Bansal <[email protected]>
- Loading branch information
Showing
11 changed files
with
136 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,61 +1,53 @@ | ||
| <template> | ||
| <div class="amodal" ref="amodal" tabindex="-1" @click="handleInput" @input="handleInput" :style="amodalStyles"> | ||
| <div class="amodal" ref="amodal" tabindex="-1" @click.stop @input.stop :style="amodalStyles"> | ||
| <slot /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { useElementBounding, useWindowScroll } from '@vueuse/core' | ||
| import { useElementBounding } from '@vueuse/core' | ||
| import { useTemplateRef, computed } from 'vue' | ||
| import { createTableStore } from '../stores/table' | ||
| const { store } = defineProps<{ store: ReturnType<typeof createTableStore> }>() | ||
| const amodalRef = useTemplateRef('amodal') | ||
| const { width, height } = useElementBounding(amodalRef) | ||
| const { y: scrollY } = useWindowScroll() | ||
| const { width: modalWidth, height: modalHeight } = useElementBounding(amodalRef) | ||
| const amodalStyles = computed(() => { | ||
| if (!(store.modal.height && store.modal.width && store.modal.left && store.modal.bottom)) return | ||
| const body = document.body | ||
| const html = document.documentElement | ||
| // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain | ||
| const table = store.modal.cell?.closest('table')! | ||
| const maxHeight = table.offsetHeight || 0 | ||
| const maxWidth = table.offsetWidth || 0 | ||
| const maxHeight = Math.max( | ||
| body.scrollHeight, | ||
| body.offsetHeight, | ||
| html.clientHeight, | ||
| html.scrollHeight, | ||
| html.offsetHeight | ||
| ) | ||
| const maxWidth = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth) | ||
| // Get the Y position of the cell clicked by getting the cumulative height of prior rows + the header (if present) | ||
| let modalY = store.modal.cell?.offsetTop || 0 | ||
| const headerHeight = table.querySelector('thead')?.offsetHeight || 0 | ||
| modalY += headerHeight | ||
| // if the modal will overflow the bottom of the table, remove modal and cell heights from the Y position | ||
| modalY = modalY + modalHeight.value < maxHeight ? modalY : modalY - (modalHeight.value + store.modal.height) | ||
| const modalY = | ||
| store.modal.bottom + height.value + scrollY.value <= maxHeight | ||
| ? store.modal.bottom | ||
| : store.modal.bottom - height.value - store.modal.height | ||
| const modalX = | ||
| store.modal.left + width.value <= maxWidth ? store.modal.left : store.modal.left - (width.value - store.modal.width) | ||
| // Get the X position of the cell clicked by getting the cumulative width of prior cells within the row | ||
| let modalX = store.modal.cell?.offsetLeft || 0 | ||
| // if the modal will overflow the right of the table, remove modal and cell widths from the X position | ||
| modalX = modalX + modalWidth.value <= maxWidth ? modalX : modalX - (modalWidth.value - store.modal.width) | ||
| return { | ||
| left: `${modalX}px`, | ||
| top: `${modalY}px`, | ||
| } | ||
| }) | ||
| const handleInput = (event: Event) => { | ||
| event.stopPropagation() | ||
| } | ||
| </script> | ||
|
|
||
| <style> | ||
| @import url('@stonecrop/themes/default.css'); | ||
| .amodal { | ||
| position: fixed; | ||
| position: absolute; | ||
| background-color: var(--sc-row-color-zebra-dark); | ||
| z-index: 1000; | ||
| z-index: 5; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 10 additions & 0 deletions
10
common/changes/@stonecrop/atable/fix-atable-modal-z-sorting_2025-01-28-21-19.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| { | ||
| "changes": [ | ||
| { | ||
| "packageName": "@stonecrop/atable", | ||
| "comment": "amodal uses cell and row sizes to calculate position", | ||
| "type": "patch" | ||
| } | ||
| ], | ||
| "packageName": "@stonecrop/atable" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.