fix(docz-example-vue): rework examples and remove imports

examples/vue/src/components/Alert.mdx

@@ -9,22 +9,21 @@ import Alert from './Alert.vue'
 # Alert
 
 ## Properties
-
-<PropsTable of={Alert} />
+<PropsTable of={<VueWrapper component={Alert}>Some message</VueWrapper>} />
 
 ## Basic usage
 
 <Playground>
-  <Alert>Some message</Alert>
+  <VueWrapper component={Alert}>Some message</VueWrapper>
 </Playground>
 
 ## Using different kinds
 
 <Playground>
-  <Alert kind="info">Some message</Alert>
-  <Alert kind="positive">Some message</Alert>
-  <Alert kind="negative">Some message</Alert>
-  <Alert kind="warning">Some message</Alert>
+  <VueWrapper component={Alert} kind="info">Some message</VueWrapper>
+  <VueWrapper component={Alert} kind="positive">Some message</VueWrapper>
+  <VueWrapper component={Alert} kind="negative">Some message</VueWrapper>
+  <VueWrapper component={Alert} kind="warning">Some message</VueWrapper>
 </Playground>
 
 ## Use with children as a function
@@ -34,7 +33,7 @@ import Alert from './Alert.vue'
     const message = 'Hello world'
 
     return (
-      <Alert>{message}</Alert>
+      <VueWrapper component={Alert}>{message}</VueWrapper>
     )
   }}
 </Playground>

examples/vue/src/components/Alert.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="alert">
+  <div class="alert" :class="[ typeClass ]">
     <slot></slot>
-    {{ kind }}
   </div>
 </template>
 
@@ -11,14 +10,35 @@
     props: {
       kind: {
         type: String,
+        required: false,
         default: 'info'
       }
     },
+    computed: {
+      typeClass() {
+        return `alert--${ this.kind }`;
+      },
+    }
   }
 </script>
 
 <style scoped>
   .alert {
-    background-color: grey;
+    padding: 15px 20px;
+    background: white;
+    border-radius: 3px;
+    color: white;
+  }
+  .alert--info {
+    background: #5352ED;
+  }
+  .alert--positive {
+    background: #2ED573;
+  }
+  .alert--negative {
+    background: #FF4757;
+  }
+  .alert--warning {
+    background: #FFA502;
   }
 </style>

examples/vue/src/components/Button.mdx

@@ -0,0 +1,57 @@
+---
+name: Button
+menu: Components
+---
+
+import { Playground, PropsTable } from 'docz'
+import Button from './Button.vue'
+
+# Button
+
+Buttons make common actions more obvious and help users more easily perform them. Buttons use labels and sometimes icons to communicate the action that will occur when the user touches them.
+
+### Best practices
+
+- Group buttons logically into sets based on usage and importance.
+- Ensure that button actions are clear and consistent.
+- The main action of a group set can be a primary button.
+- Select a single button variation and do not mix them.
+
+## Properties
+
+<PropsTable of={<VueWrapper component={Button}></VueWrapper>} />
+
+## Basic usage
+
+<Playground>
+  <VueWrapper component={Button}>Click me</VueWrapper>
+</Playground>
+
+## With different sizes
+
+<Playground>
+  <VueWrapper component={Button} scale="small">Click me</VueWrapper>
+  <VueWrapper component={Button} scale="normal">Click me</VueWrapper>
+  <VueWrapper component={Button} scale="big">Click me</VueWrapper>
+</Playground>
+
+## With different colors
+
+<Playground>
+  <VueWrapper component={Button} kind="primary">Click me</VueWrapper>
+  <VueWrapper component={Button} kind="secondary">Click me</VueWrapper>
+  <VueWrapper component={Button} kind="cancel">Click me</VueWrapper>
+  <VueWrapper component={Button} kind="dark">Click me</VueWrapper>
+  <VueWrapper component={Button} kind="gray">Click me</VueWrapper>
+</Playground>
+
+## Outlined
+
+<Playground>
+  <VueWrapper component={Button} kind="primary" outline>Click me</VueWrapper>
+  <VueWrapper component={Button} kind="secondary" outline>Click me</VueWrapper>
+  <VueWrapper component={Button} kind="cancel" outline>Click me</VueWrapper>
+  <VueWrapper component={Button} kind="dark" outline>Click me</VueWrapper>
+  <VueWrapper component={Button} kind="gray" outline>Click me</VueWrapper>
+</Playground>
+

examples/vue/src/components/Button.vue

@@ -0,0 +1,85 @@
+<template>
+  <button
+    @mouseover="mouseOver"
+    @mouseout="mouseOver"
+    class="button"
+    :class="[ sizeClass ]"
+    :style ="[ buttonStyle ]">
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+  const TYPE_STYLE_MAP = {
+    'primary': '#1FB6FF',
+    'secondary': '#5352ED',
+    'cancel': '#FF4949',
+    'dark': '#273444',
+    'gray': '#8492A6'
+  }
+
+  export default {
+    name: 'Button',
+    data() {
+      return {
+        active: false
+      }
+    },
+    props: {
+      kind: {
+        type: String,
+        required: false,
+        default: 'primary'
+      },
+      scale: {
+        type: String,
+        required: false,
+        default: 'normal'
+      },
+      outline: Boolean,
+    },
+    methods: {
+      mouseOver() {
+        this.active = !this.active;
+      }
+    },
+    computed: {
+      sizeClass() {
+        return `button--${ this.scale }`;
+      },
+      buttonStyle() {
+        const boxShadowColor = this.outline && !this.active ? TYPE_STYLE_MAP[this.kind] : 'transparent'
+        const backgroundColor = this.outline && !this.active ? 'transparent' : TYPE_STYLE_MAP[this.kind]
+
+        return {
+          background: `${backgroundColor}`,
+          boxShadow: `inset 0 0 0 ${!this.active ? '1px' : '1000px'} ${boxShadowColor}`,
+          color: `${this.outline && !this.active ? TYPE_STYLE_MAP[this.kind] : 'white'}`
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .button {
+    cursor: pointer;
+    margin: 3px 5px;
+    border: none;
+    border-radius: 3px;
+    transition: all .3s;
+  }
+  /* Scale */
+  .button--small {
+    padding: 5px 10px;
+    font-size: 14px;
+  }
+  .button--normal {
+    padding: 10px 20px;
+    font-size: 16px;
+  }
+  .button--big {
+    padding: 20px 30px;
+    font-size: 18px;
+  }
+</style>