Added size prop to button

Author: romanslonov

docs/components/button.md

@@ -63,11 +63,24 @@
 <v-button disabled appearance="default">Default</v-button>
 ```
 
+<div class="p-3 border rounded-2 my-3">
+  <v-button size="0" appearance="default">Default</v-button>
+  <v-button size="1" appearance="default">Default</v-button>
+  <v-button size="2" appearance="default">Default</v-button>
+  <v-button size="3" appearance="default">Default</v-button>
+  <v-button size="4" appearance="default">Default</v-button>
+</div>
+
+``` html
+<v-button disabled appearance="default">Default</v-button>
+```
+
 ## Props
 Name       | Type     | Description | Default
 ---------- | -------- | ----------- | -----
 type       | String   | Button type, 'button' or 'submit' | button
 appearance | String   | There are 6 options: ['default', 'primary', 'alternative', 'subtle', 'success', 'danger'] | <code>default</code>
+size       | String   | Button size, ['1', '2', '3', '4'] | '3'
 disabled   | Boolean  | Whether button disabled or not | false
 loading    | Boolean  | Whether button in loading state or not | false
 icon-first | Boolean  | Set to `true` if you want to render icon before text | false

package-lock.json

@@ -18,7 +18,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "devDependencies": {
-    "@modulist/css": "0.0.10",
+    "@modulist/css": "0.0.15",
     "@vue/cli-plugin-babel": "^3.5.0",
     "@vue/cli-plugin-eslint": "^3.5.0",
     "@vue/cli-plugin-unit-jest": "^3.5.0",

package.json

@@ -22,6 +22,13 @@ export default {
         return ['default', 'primary', 'alternative', 'subtle', 'success', 'danger'].indexOf(appearance) > -1;
       },
     },
+    size: {
+      type: String,
+      default: '3',
+      validator(appearance) {
+        return ['0', '1', '2', '3', '4'].indexOf(appearance) > -1;
+      },
+    },
     loading: {
       type: Boolean,
       default: false,
@@ -39,6 +46,7 @@ export default {
     classes() {
       return [
         `button--${this.appearance}`,
+        `button--size-${this.size}`,
         { 'button--loading': this.loading },
         { 'button--icon-first': this.iconFirst },
       ];