input-group and input-group-addon support (#266)

lib/components/index.js

@@ -2,6 +2,8 @@ import bAlert from './alert.vue';
 import bBreadcrumb from './breadcrumb.vue';
 import bButton from './button.vue';
 import bButtonGroup from './button-group.vue';
+import bInputGroup from './input-group.vue';
+import bInputGroupAddon from './input-group-addon.vue';
 import bCard from './card.vue';
 import bCardGroup from './card-group.vue';
 import bCarousel from './carousel.vue';
@@ -45,6 +47,8 @@ export {
     bButton,
     bButton as bBtn,
     bButtonGroup,
+    bInputGroup,
+    bInputGroupAddon,
     bCard,
     bCardGroup,
     bDropdown,

lib/components/input-group-addon.vue

@@ -0,0 +1,22 @@
+
+<template>
+    <span class="input-group-addon" :id="thisId">
+        <slot></slot>
+    </span>
+</template>
+
+<script>
+    export default {
+        computed: {
+            thisId() {
+                return this.id || ('b_input_group_addon_' + this._uid);
+            }
+        },
+        props: {
+            id: {
+                type: String,
+                default: null
+            }
+        }
+    };
+</script>

lib/components/input-group.vue

@@ -0,0 +1,46 @@
+<template>
+    <div :class="classObject">
+        <slot name="left">
+            <b-input-group-addon v-if="left" v-html="left"></b-input-group-addon>
+        </slot>
+        <slot></slot>
+        <slot name="right">
+            <b-input-group-addon v-if="right" v-html="right"></b-input-group-addon>
+        </slot>
+    </div>
+</template>
+
+<script>
+    import bInputGroupAddon from './input-group-addon.vue';
+
+    export default {
+        components: {bInputGroupAddon},
+        computed: {
+            classObject() {
+                return [
+                    'input-group',
+                    this.size ? ('input-group-' + this.size) : '',
+                    this.state ? ('has-' + this.state) : ''
+                ];
+            }
+        },
+        props: {
+            size: {
+                type: String,
+                default: null
+            },
+            state: {
+                type: String,
+                default: null
+            },
+            left: {
+                type: String,
+                default: null
+            },
+            right: {
+                type: String,
+                default: null
+            }
+        }
+    };
+</script>