feat: Add popoverOpenClass prop + default value (#156)

* feat: Add popoverOpenClass prop + default value

* chore: fix tabs

* refactor: change prop name


Co-authored-by: Guillaume Chau <alphadelta.fg@gmail.com>

README.md

@@ -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).
 
@@ -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,

docs-src/PageHome.vue

@@ -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>
 

src/components/Popover.vue

@@ -160,6 +160,11 @@ export default {
       type: String,
       default: null,
     },
+
+    openClass: {
+      type: [String, Array],
+      default: () => directive.options.popover.defaultOpenClass,
+    },
   },
 
   data () {
@@ -172,7 +177,7 @@ export default {
   computed: {
     cssClass () {
       return {
-        'open': this.isOpen,
+        [this.openClass]: this.isOpen,
       }
     },
 

src/directives/v-tooltip.js

@@ -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,