| '--b-position': activePosition?.value ?? 0, | ||
| '--b-inverse-position': (activeModalCount?.value ?? 1) - 1 - (activePosition?.value ?? 0), | ||
| '--b-count': activeModalCount?.value ?? 0, | ||
| })) | ||
| const computedZIndexBackdrop = computed<CSSProperties>(() => ({ | ||
| 'z-index': computedZIndexNumber.value - 1, | ||
| '--b-position': activePosition?.value ?? 0, | ||
| '--b-inverse-position': (activeModalCount?.value ?? 1) - 1 - (activePosition?.value ?? 0), | ||
| '--b-count': activeModalCount?.value ?? 0, |
There was a problem hiding this comment.
[nitpick] Consider extracting CSS custom property names (e.g. --b-position, --b-inverse-position, --b-count) into constants to avoid typos and keep CSS/JS in sync.
| '--b-position': activePosition?.value ?? 0, | |
| '--b-inverse-position': (activeModalCount?.value ?? 1) - 1 - (activePosition?.value ?? 0), | |
| '--b-count': activeModalCount?.value ?? 0, | |
| })) | |
| const computedZIndexBackdrop = computed<CSSProperties>(() => ({ | |
| 'z-index': computedZIndexNumber.value - 1, | |
| '--b-position': activePosition?.value ?? 0, | |
| '--b-inverse-position': (activeModalCount?.value ?? 1) - 1 - (activePosition?.value ?? 0), | |
| '--b-count': activeModalCount?.value ?? 0, | |
| [CSS_VAR_POSITION]: activePosition?.value ?? 0, | |
| [CSS_VAR_INVERSE_POSITION]: (activeModalCount?.value ?? 1) - 1 - (activePosition?.value ?? 0), | |
| [CSS_VAR_COUNT]: activeModalCount?.value ?? 0, | |
| })) | |
| const computedZIndexBackdrop = computed<CSSProperties>(() => ({ | |
| 'z-index': computedZIndexNumber.value - 1, | |
| [CSS_VAR_POSITION]: activePosition?.value ?? 0, | |
| [CSS_VAR_INVERSE_POSITION]: (activeModalCount?.value ?? 1) - 1 - (activePosition?.value ?? 0), | |
| [CSS_VAR_COUNT]: activeModalCount?.value ?? 0, |
Copilot uses AI. Check for mistakes.
| const defaultModalDialogZIndex = 1056 | ||
| const defaultModalDialogZIndex = ref(getModalZIndex(element.value ?? document.body)) | ||
|
|
||
| onMounted(() => { |
There was a problem hiding this comment.
[nitpick] The watcher on renderRef triggers a recalculation of the z-index on every render. Consider limiting the watch to CSS variable changes or debouncing to avoid unnecessary getComputedStyle calls.
Copilot uses AI. Check for mistakes.
There was a problem hiding this comment.
Actionable comments posted: 1
apps/docs/src/docs/components/modal.md (3)
177-181: Fix typo and suggest showcasing the newontopclassThe button label reads “Open Fouth Modal” but should be “Open Fourth Modal” to avoid confusion.
Additionally, since this PR introduces anontopCSS class for BModal, consider adding a small example here to demonstrate how to use<BModal ontop …>to keep a modal above the rest.
200-203: Fix typo in the HTML snippetThe live-code snippet still says “Open Fouth Modal”. Please correct it to “Open Fourth Modal” so the example matches the intended label.
274-290: Scope the injected styles to this page/componentThe
<style>block at the bottom will apply globally to all.modalselectors. To prevent unintended styling elsewhere in the docs, addscoped(or an equivalent selector) to limit its effect.Example:
- <style> + <style scoped>
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
apps/docs/src/docs/components/modal.md (3 hunks)packages/bootstrap-vue-next/src/utils/dom.ts (1 hunks)apps/docs/src/docs/components/modal.md (1)
271-271: State is wired up correctlyThe new
const nestedModal4 = ref(false)properly adds reactive state for the fourth modal. This aligns with the updated HTML examples and will correctly drive visibility.
* upstream/main: chore: remove blur from boverlay in cases where its not allowed by br… (bootstrap-vue-next#2712) feat(BTableLite): add `table-colgroup` slot (bootstrap-vue-next#2680) perf: use getter functions over computed in some cases feat(BModal): use css var for zindex, add helper vars and ontop class (bootstrap-vue-next#2556) feat(BFormTags): added feedbackAriaLive prop (bootstrap-vue-next#2696) fix(scss) moved all scss styles out of components (bootstrap-vue-next#2671) fix(BModal): ensure clicking inside and releasing outside does not close modal (bootstrap-vue-next#2703) (bootstrap-vue-next#2704) fix(BToast): race condition if using setInterval to update countdown doc data feat(BPopover): add titleClass and bodyClass, remove unneeded customClass prop since class is inherited to the same place feat(BToast): add noProgress prop, make progress show as default if modelValue is number. fix(useToastController): if using the deprecated show method the countdown didn't start.