Insert addClass prop to all vue-strap components

src/Dropdown.vue

@@ -51,14 +51,18 @@ export default {
     menuAlignRight: {
       type: Boolean,
       default: false
+    },
+    addClass: {
+      type: String,
+      default: ''
     }
   },
   computed: {
     btnType () {
       return `btn-${this.type}`;
     },
     classes () {
-      return [{disabled: this.disabledBool}, this.class, this.isLi ? 'dropdown' : 'btn-group']
+      return [{disabled: this.disabledBool}, this.class, this.isLi ? 'dropdown' : 'btn-group', this.addClass]
     },
     menuClasses() {
       return [{show: this.showBool}, {'dropdown-menu-right': this.menuAlignRight}];

src/Modal.vue

@@ -1,10 +1,11 @@
 <template>
   <div role="dialog"
-    v-bind:class="{
-    'modal':true,
-    'fade':effect === 'fade',
-    'zoom':effect === 'zoom'
-    }">
+    :class="[
+    {
+      'modal':true,
+      'fade':effect === 'fade',
+      'zoom':effect === 'zoom'
+    }, addClass]">
     <div v-bind:class="{'modal-dialog':true,'modal-lg':largeBool,'modal-sm':smallBool}" role="document"
       v-bind:style="{width: optionalWidth}">
       <div class="modal-content">
@@ -70,6 +71,10 @@ export default {
     },
     id: {
       type: String
+    },
+    addClass: {
+      type: String,
+      default: ''
     }
   },
   data() {

src/Navbar.vue

@@ -1,12 +1,13 @@
 <template>
-  <nav ref="navbar" :class="['navbar', 'navbar-expand-md', {
+  <nav ref="navbar" :class="['navbar', 'navbar-expand-md',
+  {
     'navbar-dark':(type === 'inverse'),
     'navbar-light':(type === 'default'),
     'bg-dark':(type === 'inverse'),
     'bg-light':(type === 'default'),
     'fixed-top':(placement === 'top'),
     'fixed-bottom':(placement === 'bottom')
-  }]">
+  }, addClass]">
     <div class="container-fluid">
       <div class="navbar-brand"><slot name="brand"></slot></div>
       <button v-if="!slots.collapse" class="navbar-toggler" type="button" aria-expanded="false" aria-label="Toggle navigation" @click="toggleCollapse">
@@ -38,6 +39,10 @@ export default {
     placement: {
       type: String,
       default: ''
+    },
+    addClass: {
+      type: String,
+      default: ''
     }
   },
   data () {

src/Panel.vue

@@ -1,5 +1,5 @@
 <template>
-    <span class="card-container" ref="cardContainer">
+    <span :class="['card-container', addClass]" ref="cardContainer">
         <div class="morph" v-show="localMinimized">
             <button :class="['morph-display-wrapper', 'btn', btnType, 'card-title']" @click="open()">
                 <template v-if="altContent">
@@ -135,6 +135,10 @@
       preload: {
         type: Boolean,
         default: false
+      },
+      addClass: {
+        type: String,
+        default: ''
       }
     },
     computed: {

src/Pic.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="image-wrapper">
+    <div :class="['image-wrapper', addClass]">
         <img ref="pic" @load.once="computeWidth" :src="src" :alt="alt" :width="computedWidth" class="img-fluid rounded">
         <div class="image-caption">
             <slot></slot>
@@ -25,6 +25,10 @@
       width: {
         type: String,
         default: ''
+      },
+      addClass: {
+        type: String,
+        default: ''
       }
     },
     computed: {

src/Popover.vue

@@ -1,5 +1,5 @@
 <template>
-  <span>
+  <span :class="[addClass]">
     <span ref="trigger" v-if="hasSlot" v-on:click="false"><slot></slot></span><!--
     -->
     <transition :name="effect">
@@ -28,6 +28,10 @@ export default {
     trigger: {
       type: String,
       default: 'hover'
+    },
+    addClass: {
+      type: String,
+      default: ''
     }
   },
   computed: {

src/Question.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="question-wrapper">
+    <div :class="['question-wrapper', addClass]">
         <div class="body-wrapper">
             <!-- Default slot is question body -->
             <slot></slot>
@@ -42,6 +42,10 @@
       hasInput: {
         type: Boolean,
         default: false
+      },
+      addClass: {
+        type: String,
+        default: ''
       }
     },
     computed: {

src/Tabset.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="[addClass]">
     <!-- Nav tabs -->
     <ul class="nav nav-tabs" :class="getNavStyleClass" role="tablist">
       <template v-for="t in headers">
@@ -33,6 +33,10 @@ export default {
     active: {
       type: Number,
       default: 0
+    },
+    addClass: {
+      type: String,
+      default: ''
     }
   },
   data () {

src/TipBox.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="alert container" :class="[boxStyle]" :style="customStyle">
+    <div class="alert container" :class="[boxStyle, addClass]" :style="customStyle">
         <div class="icon-wrapper" v-if="!isDefault">
             <span v-html="iconType"></span>
         </div>
@@ -36,6 +36,10 @@
       type: {
         type: String,
         default: 'none'
+      },
+      addClass: {
+        type: String,
+        default: ''
       }
     },
     computed: {

src/Tooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <span>
+  <span :class="[addClass]">
     <span ref="trigger" v-on:click="false"><slot></slot></span><!--
     -->
     <transition :name="effect">
@@ -33,6 +33,10 @@ export default {
     placement: {
       type: String,
       default: 'top'
+    },
+    addClass: {
+      type: String,
+      default: ''
     }
   },
   computed: {

src/trigger.vue

@@ -1,5 +1,5 @@
 <template>
-    <span ref="trigger"><slot></slot></span>
+    <span ref="trigger" :class="[addClass]"><slot></slot></span>
 </template>
 
 <script>
@@ -16,6 +16,10 @@
       },
       _triggerBy: {
         type: Object
+      },
+      addClass: {
+        type: String,
+        default: ''
       }
     },
     mounted () {