Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add popoverOpenClass prop + default value #156

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 5 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -400,7 +400,8 @@ By default, the popover will have the `tooltip` and `popover` classes, so you ca
- `popoverInnerClass` - Class of the inner content element.
- `autoHide` - Hide the popover if clicked outside.
- `handleResize` - Automatically update the popover position if its size changes.
- `open-group` - If set, will close all the open popovers that have a different `open-group` value or unset.
- `openGroup` - If set, will close all the open popovers that have a different `open-group` value or unset.
- `openClass` - Class put on the popover when it's open.

You can change the default values in the [Global options](#global-options).

Expand Down Expand Up @@ -526,7 +527,9 @@ The default global options are:
// Inner content class
defaultInnerClass: 'tooltip-inner popover-inner',
// Arrow class
defaultArrowClass: 'tooltip-arrow popover-arrow',
defaultArrowClass: 'tooltip-arrow popover-arrow',
// Class added when popover is open
defaultOpenClass: 'open',
defaultDelay: 0,
defaultTrigger: 'click',
defaultOffset: 0,
Expand Down
1 change: 1 addition & 0 deletions docs-src/PageHome.vue
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,7 @@
:placement="placement"
:auto-hide="isAutoHiding"
:disabled="!isEnabled"
open-class="is-open"
>
<button class="tooltip-target b3 popover-btn">Click me</button>

Expand Down
7 changes: 6 additions & 1 deletion src/components/Popover.vue
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,11 @@ export default {
type: String,
default: null,
},

openClass: {
type: [String, Array],
default: () => directive.options.popover.defaultOpenClass,
},
},

data () {
Expand All @@ -172,7 +177,7 @@ export default {
computed: {
cssClass () {
return {
'open': this.isOpen,
[this.openClass]: this.isOpen,
}
},

Expand Down
2 changes: 2 additions & 0 deletions src/directives/v-tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,8 @@ export const defaultOptions = {
defaultInnerClass: 'tooltip-inner popover-inner',
// Arrow class
defaultArrowClass: 'tooltip-arrow popover-arrow',
// Class added when popover is open
defaultOpenClass: 'open',
defaultDelay: 0,
defaultTrigger: 'click',
defaultOffset: 0,
Expand Down