Added align prop to badge

Author: romanslonov

docs/components/badge.md

@@ -20,8 +20,24 @@ Badges, our small count and labeling component.
 <v-badge type="danger" text="Default" />
 ```
 
+<div class="p-3 border rounded-2 my-3">
+  <h1 class="mb-3">Header <v-badge text="badge" type="primary" align="top" class="mr-2" /></h1>
+  <h1 class="mb-3">Header <v-badge text="badge" type="primary" class="mr-2" /></h1>
+  <h1>Header <v-badge text="badge" type="primary" align="bottom" class="mr-2" /></h1>
+</div>
+
+```html
+<v-badge text="Default" />
+<v-badge type="primary" text="Default" />
+<v-badge type="alternative" text="Default" />
+<v-badge type="success" text="Default" />
+<v-badge type="warning" text="Default" />
+<v-badge type="danger" text="Default" />
+```
+
 ## Props
 Name       | Type     | Description | Default | Required
 ---------- | -------- | ----------- | ------- | --------
 type       | String   | Button type one of ['default', 'alternative', 'primary', 'warning', 'success', 'danger'] | 'default' | false
+text       | String   | Badge's alignment | 'middle' | false
 text       | [String, Number]   | Badge's text | None | true

src/components/Badge/main.vue

@@ -9,8 +9,15 @@ export default {
     type: {
       type: String,
       default: 'default',
-      validator(appearance) {
-        return ['default', 'primary', 'alternative', 'warning', 'success', 'danger'].indexOf(appearance) > -1;
+      validator(type) {
+        return ['default', 'primary', 'alternative', 'warning', 'success', 'danger'].indexOf(type) > -1;
+      },
+    },
+    align: {
+      type: String,
+      default: 'middle',
+      validator(align) {
+        return ['top', 'middle', 'bottom'].indexOf(align) > -1;
       },
     },
     text: {
@@ -22,6 +29,7 @@ export default {
     classes() {
       return [
         `badge--${this.type}`,
+        `badge--align-${this.align}`,
       ];
     },
   },