feat(v-b-hover): new directive for reacting to hover changes #4771

tmorehouse · 2020-02-15T04:14:34Z

Describe the PR

New directive v-b-hover for reacting to changes in hover on an element

The directive accepts a callback as the value. When the element is hovered or unhovered, the callback is called with a single Boolean argument signifying if the element is hovered (true) or not (false).

PR checklist

What kind of change does this PR introduce? (check at least one)

Does this PR introduce a breaking change? (check one)

No
Yes (please describe)

The PR fulfills these requirements:

It's submitted to the dev branch, not the master branch
When resolving a specific issue, it's referenced in the PR's title (i.e. [...] (fixes #xxx[,#xxx]), where "xxx" is the issue number)
It should address only one issue or feature. If adding multiple features or fixing a bug and adding a new feature, break them into separate PRs if at all possible.
The title should follow the Conventional Commits naming convention (i.e. fix(alert): not alerting during SSR render, docs(badge): update pill examples, chore(docs): fix typo in README, etc). This is very important, as the CHANGELOG is generated from these messages.

If new features/enhancement/fixes are added or changed:

Includes documentation updates (including updating the component's package.json for slot and event changes)
Includes any needed TypeScript declaration file updates
New/updated tests are included and passing (if required)
Existing test suites are passing
CodeCov for patch has met target
The changes have not impacted the functionality of other components or directives
ARIA Accessibility has been taken into consideration (Does it affect screen reader users or keyboard only users? Clickable items should be in the tab index, etc.)

If adding a new feature, or changing the functionality of an existing feature, the PR's
description above includes:

A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

codecov · 2020-02-15T04:19:05Z

Codecov Report

Merging #4771 into dev will increase coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##              dev    #4771      +/-   ##
==========================================
+ Coverage   99.92%   99.92%   +<.01%     
==========================================
  Files         255      256       +1     
  Lines        5285     5292       +7     
  Branches     1405     1405              
==========================================
+ Hits         5281     5288       +7     
  Misses          3        3              
  Partials        1        1

Impacted Files	Coverage Δ
src/directives/index.js	`100% <ø> (ø)`	⬆️
src/index.js	`100% <ø> (ø)`	⬆️
src/directives/hover/hover.js	`100% <100%> (ø)`
src/directives/hover/index.js	`100% <100%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1e02769...bcf7e95. Read the comment docs.

…tstrap-vue into feat/v-b-hover

…` directive (#4772) * chore: delete hoverswap private util in favor of v-b-hover directive * Delete bv-hover-swap.spec.js

…tstrap-vue into feat/v-b-hover

jonalxh · 2021-03-05T18:36:53Z

Maybe it is necessary to receive a second parameter to know which element is being hovered, or there is a way to get it?
In my use case I want to toggle visibility of the content of the hovered card, but I have several cards:

<b-card v-b-hover="toggleCardContent(isHovered, element)">
    <p> lorem... </p>
</b-card>

toggleCardContent(evt, element) {
      const child = element.getElementByTagName("p")
     if (evt) {
         child.style.display = "block"
     } else {
          child.style.display = "none"
    }
}

How to achieve it?

naletups · 2021-07-19T21:08:05Z

Same problem here. Is there any convenient way?

For the time being, I just resorted back to @mouseover="omHover(0)" @mouseleave="onUnhover(0)" (replace the parameter with whatever you want)

feat(v-b-hover): new directive for reacting to hover changes

20cfdd5

tmorehouse added Status: WIP Type: Feature labels Feb 15, 2020

tmorehouse added 4 commits February 15, 2020 00:15

Create README.md

c66ad63

Create index.js

d3ba083

Create index.d.ts

4b65123

Create package.json

b0e9b03

tmorehouse added 14 commits February 15, 2020 00:20

Update index.d.ts

af802c2

Update index.js

99460c1

Update hover.js

f57df03

Update hover.js

faa1df5

Update README.md

50b2d88

Update package.json

d338588

Update hover.js

28539dc

Update hover.js

e23accb

Update hover.js

a557933

Update hover.js

c9bccc0

Create hover.spec.js

706b342

Update hover.spec.js

fec437f

Update hover.spec.js

aad4fa3

Update hover.spec.js

d9be513

tmorehouse removed the Status: WIP label Feb 15, 2020

Update README.md

dc86219

tmorehouse mentioned this pull request Feb 15, 2020

chore: delete hoverswap private util component in favor of v-b-hover directive #4772

Merged

20 tasks

tmorehouse marked this pull request as ready for review February 15, 2020 05:55

tmorehouse requested a review from jacobmllr95 February 15, 2020 05:55

tmorehouse added 3 commits February 15, 2020 02:03

Update README.md

7de55a0

Update index.js

e54b914

Update README.md

dd779cd

jacobmllr95 and others added 14 commits February 15, 2020 08:06

Merge branch 'feat/v-b-hover' of https://github.com/bootstrap-vue/boo…

66c7f36

…tstrap-vue into feat/v-b-hover

chore: delete hoverswap private util component in favor of `v-b-hover…

f0be2d1

…` directive (#4772) * chore: delete hoverswap private util in favor of v-b-hover directive * Delete bv-hover-swap.spec.js

Update hover.js

e6edbfa

Update hover.js

02e30aa

Update hover.spec.js

aa626a1

Update hover.js

05aac2c

Update hover.js

0fe7990

Update hover.js

51543c7

Update hover.js

cb50abd

Update hover.js

2c1b8f8

Update hover.js

a4c4001

Update hover.js

06f79bd

Merge branch 'feat/v-b-hover' of https://github.com/bootstrap-vue/boo…

aa205de

…tstrap-vue into feat/v-b-hover

Merge branch 'feat/v-b-hover' of https://github.com/bootstrap-vue/boo…

a1ff580

…tstrap-vue into feat/v-b-hover

jacobmllr95 approved these changes Feb 15, 2020

View reviewed changes

Update package.json

bcf7e95

tmorehouse added the PR: Minor Requires minor version bump label Feb 15, 2020

tmorehouse merged commit b7adc6d into dev Feb 15, 2020

tmorehouse deleted the feat/v-b-hover branch February 15, 2020 08:24

tmorehouse mentioned this pull request Feb 17, 2020

chore: release v2.5.0 #4773

Merged

This was referenced Mar 12, 2020

[Snyk] Upgrade bootstrap-vue from 2.4.2 to 2.5.0 tghelere/CL#17

Merged

[Snyk] Upgrade bootstrap-vue from 2.4.2 to 2.5.0 mariazevedo88/hash-generator-js#36

Merged

This was referenced Mar 27, 2020

[Snyk] Upgrade bootstrap-vue from 2.5.0 to 2.6.0 tghelere/CL#18

Merged

[Snyk] Upgrade bootstrap-vue from 2.5.0 to 2.6.0 mariazevedo88/hash-generator-js#39

Merged

snyk-bot mentioned this pull request Apr 7, 2020

[Snyk] Upgrade bootstrap-vue from 2.3.0 to 2.7.0 JuroOravec/powerjinja#1

Open

This was referenced Apr 15, 2020

[Snyk] Upgrade bootstrap-vue from 2.0.0-rc.24 to 2.8.0 mc-ireiser/coreui-free-vue-admin-template#1

Open

[Snyk] Upgrade bootstrap-vue from 2.0.0-rc.27 to 2.8.0 mc-ireiser/termodaq_app#4

Open

naletups mentioned this pull request Jul 19, 2021

v-b-hover with variable input #6706

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(v-b-hover): new directive for reacting to hover changes #4771

feat(v-b-hover): new directive for reacting to hover changes #4771

Uh oh!

tmorehouse commented Feb 15, 2020 •

edited

Loading

Uh oh!

codecov bot commented Feb 15, 2020 •

edited

Loading

Uh oh!

jonalxh commented Mar 5, 2021

Uh oh!

naletups commented Jul 19, 2021

Uh oh!

Uh oh!

Uh oh!

feat(v-b-hover): new directive for reacting to hover changes #4771

feat(v-b-hover): new directive for reacting to hover changes #4771

Uh oh!

Conversation

tmorehouse commented Feb 15, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe the PR

PR checklist

Uh oh!

codecov bot commented Feb 15, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

jonalxh commented Mar 5, 2021

Uh oh!

naletups commented Jul 19, 2021

Uh oh!

Uh oh!

tmorehouse commented Feb 15, 2020 •

edited

Loading

codecov bot commented Feb 15, 2020 •

edited

Loading