Fix show/hide events and emits #1821
Conversation
|
|
|
@xvaara merge conflict detected 🤖 |
2a34de6 to
34b769a
Compare
5874926 to
f6db490
Compare
|
This PR is stale because it has been open for 45 days with no activity. It will not be auto-closed |
|
I think this PR needs an addition for I would expect this to work similar to the
As a solution idea, the However this would require hiding and showing the So maybe a simple In |
f6db490 to
35243af
Compare
commit: |
|
@VividLemon this is mostly a test that everything works.. I'll cleanup this, and try to put the logic in a composable. |
|
demo for this pr: https://stackblitz.com/edit/github-rzxbjv-jghknk?file=src%2FApp.vue |
| @@ -79,7 +79,7 @@ export default { | |||
| description: | |||
| 'Specify the number of pixels to shift the menu by. See above for details.', | |||
| }, | |||
| skipWrapper: { | |||
| noWrapper: { | |||
There was a problem hiding this comment.
Why have we changed hide or skip to no
There was a problem hiding this comment.
Imho. they should be consistent. Hide isn't really hiding it, skip is a weird word I added to props at some point... All of them should be just noFoo, since it's clear that you are removing/blocking something.
I'm not gonna die on this hill, so if you're against these changes I'll roll them back.
|
I don't see an obvious way to address this, but the generated HTML is considerably more verbose, even when Taking the following vue template fragment, the generated code (before expansion) goes from 111 characters to 609 characters: <span id="tip-test">Testing a tooltip
<BTooltip target="tip-test" triggers="hover click blur" title="This is a test" lazy />
</span>The code before looked like this: <span id="tip-test">Testing a tooltip <span id="___BVN__ID__v-7__popover____placeholder"></span><!----></span>Now it looks like this: <span id="tip-test">Testing a tooltip <span data-v-e55cd8ec=""
id="___BVN__ID__v-7__popover____placeholder"></span><!--teleport start-->
<div data-v-e55cd8ec="" id="___BVN__ID__v-7__popover___" triggers="hover click blur"
class="tooltip b-tooltip fade bs-tooltip-top" role="tooltip" tabindex="-1"
style="position: absolute; left: 0px; top: 0px; display: none; transform: translate(68.48px, 69.12px); will-change: transform;">
<div data-v-e55cd8ec="" class="tooltip-arrow" data-popper-arrow="" style="position: absolute;"></div><!---->
</div><!--teleport end-->
</span>For completeness: span id="tip-test">Testing a tooltip <span id="___BVN__ID__v-7__popover____placeholder"></span>
<div id="___BVN__ID__v-7__popover___" triggers="hover click blur" lazy=""
class="tooltip b-tooltip show fade bs-tooltip-top" role="tooltip" tabindex="-1"
style="position: absolute; left: 0px; top: 0px; transform: translate(23.04px, 40.32px); will-change: transform;">
<div class="tooltip-arrow" data-popper-arrow="" style="position: absolute; left: 39.1px;"></div>
<div class="overflow-auto" style="max-height: 69.28px; max-width: 1619.84px;">
<div class="position-sticky top-0 tooltip-inner">This is a test</div><!---->
</div>
</div>
</span>After, expanded: <span id="tip-test">Testing a tooltip <span data-v-e55cd8ec=""
id="___BVN__ID__v-7__popover____placeholder"></span><!--teleport start-->
<div data-v-e55cd8ec="" id="___BVN__ID__v-7__popover___" triggers="hover click blur"
class="tooltip b-tooltip fade bs-tooltip-top" role="tooltip" tabindex="-1"
style="position: absolute; left: 0px; top: 0px; transform: translate(68.48px, 69.12px); will-change: transform; display: none;">
<div data-v-e55cd8ec="" class="tooltip-arrow" data-popper-arrow="" style="position: absolute;"></div>
<div data-v-e55cd8ec="" class="overflow-auto" style="max-height: 69.28px; max-width: 1619.84px;">
<div data-v-e55cd8ec="" class="position-sticky top-0 tooltip-inner">This is a test</div><!---->
</div>
</div><!--teleport end-->
</span> |
ca774d4 to
b11a36e
Compare
|
Waiting on this for #2346 release. Lmk when it's done |
|
It was ready, that's why I asked for the review. |
2285086 to
e386700
Compare
* upstream/main: (49 commits) fix: rename ref to avoid Vue warnings (Fix bootstrap-vue-next#2337) (bootstrap-vue-next#2353) Fix show/hide events and emits (bootstrap-vue-next#1821) add some classes and ids for components (bootstrap-vue-next#2344) feat: add __usedComponents __usedDirectives property to the BootstrapVueNextResolver function (bootstrap-vue-next#2351) doc(BNavbar): Parity pass (bootstrap-vue-next#2347) docs: fix lint error (bootstrap-vue-next#2349) fix(BNavbarToggle): toggle default slot doesnt have a scoped argument 'expanded' fixes bootstrap-vue-next#2348 feat!: remove html props -- use equivalent slots fixes bootstrap-vue-next#1930 (bootstrap-vue-next#2311) chore: release main (bootstrap-vue-next#2343) fix(BDropdown): fix infinite loop on keyboard navigation (bootstrap-vue-next#2342) chore: release main (bootstrap-vue-next#2336) feat(BPagination): add keyboard shortcuts fixes bootstrap-vue-next#2153 doc(BNav): Parity pass (bootstrap-vue-next#2332) chore: release main (bootstrap-vue-next#2327) fix(BTable): dynamic slots not rendering fixes bootstrap-vue-next#2328 (bootstrap-vue-next#2329) feat(BTable): make it possible to style custom footers (bootstrap-vue-next#2314) chore: release main (bootstrap-vue-next#2323) fix(BFormGroup): fix layout problem when label-for is not used (bootstrap-vue-next#2321) chore: release main (bootstrap-vue-next#2320) feat(BPagination): add small screen support (bootstrap-vue-next#2308) ...
|
🎉 |
fixes #1819
BEGIN_COMMIT_OVERRIDE
fix!: change all props starting skip or hide to start with no
feat(show/hide)!: make components that show/hide use a composable useShowHide
fix(show/hide): emit shown/hidden after transition
fix(show/hide): prevented emit events restore modelValue
feat(show/hide)!: add props lazy and unmount-lazy
fix(show/hide)!: many animation fixes
feat(show/hide): rename toggle prop to show, it opens the component with animation
feat(show/hide): add prop backdrop-first to animate backdrop first
feat(show/hide)!: add prop initial-animation to animate on initial render if modelValue is true, otherwise display the component without animation
feat(show/hide): add prop visible to show without animation
feat(BPopover): add hideMargin prop to add margin to the hide boundary
fix(BPopover): correctly calculate size on some edge cases
fix(BDropdown): correctly calculate size on some edge cases
fix(BPopover)!: change slot prop showState to visible
fix(BPopover): fire hide event only once
fix(BPopover): better hide functionality, called only once
fix(BPopover): Correct color arrow when arrow on top
fix(BPopover)!: remove prop persistent, use lazy instead
fix(BDropdown): focus returned to dropdown when escape key hit
BREAKING CHANGE: many changes to show/hide components (BCollapse,BDropdown,BModal,BOffcanvas,BPopover,BTooltip,BToast) and rename props starting with skip or hide to start with no
END_COMMIT_OVERRIDE
What kind of change does this PR introduce? (check at least one)
fix(...)feat(...)fix(...)docs(...)The PR fulfills these requirements:
CHANGELOGis generated from these messages, and determines the next version type. Pull requests that do not follow conventional commits or do not have an override will be denied