├── .gitignore
├── styleguide.gif
├── src
    ├── index.js
    └── components
    │   ├── sizeMixin.js
    │   └── AppButton.vue
├── README.md
├── package.json
└── styleguide.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | build
3 | dist


--------------------------------------------------------------------------------
/styleguide.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexjoverm/vue-styleguidist-example/HEAD/styleguide.gif


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | import AppButton from "./components/AppButton";
3 | 
4 | new Vue({
5 |   el: "#app",
6 |   render: h => h(AppButton)
7 | });
8 | 


--------------------------------------------------------------------------------
/src/components/sizeMixin.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @mixin
 3 |  */
 4 | module.exports = {
 5 |   props: {
 6 |     /**
 7 |      * Set size of the element
 8 |      */
 9 |     size: {
10 |       type: String,
11 |       default: "14px"
12 |     }
13 |   }
14 | };
15 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue Styleguidist Example
 2 | 
 3 | ![Example styleguidist gif](styleguide.gif)
 4 | 
 5 | This repo shows how to use [vue-styleguidist](https://github.com/vue-styleguidist/vue-styleguidist/) with a minimal setup by using just [Poi](poi.js.org).
 6 | 
 7 | ## Getting started
 8 | 
 9 | Clone and install deps:
10 | 
11 | ```bash
12 | git clone https://github.com/alexjoverm/vue-styleguidist-example
13 | cd vue-styleguidist-example
14 | npm install
15 | ```
16 | 
17 | Run styleguidist by running:
18 | 
19 | ```bash
20 | npm run styleguide
21 | ```
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-styleguide",
 3 |   "version": "1.0.0",
 4 |   "description": "Starter for rapid project development in Vue.js",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "poi src/index.js",
 8 |     "build": "poi build src/index.js",
 9 |     "styleguide": "vue-styleguidist server",
10 |     "styleguide:build": "vue-styleguidist build"
11 |   },
12 |   "author": "",
13 |   "license": "MIT",
14 |   "devDependencies": {
15 |     "node-sass": "^4.7.2",
16 |     "poi": "^9.6.1",
17 |     "sass-loader": "^6.0.6",
18 |     "vue-loader": "^13.7.0",
19 |     "vue-styleguidist": "^1.4.5"
20 |   }
21 | }


--------------------------------------------------------------------------------
/styleguide.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   webpackConfig: {
 3 |     module: {
 4 |       rules: [
 5 |         // Vue loader
 6 |         {
 7 |           test: /\.vue$/,
 8 |           exclude: /node_modules/,
 9 |           loader: "vue-loader"
10 |         }
11 |         // Babel loader, will use your project’s .babelrc
12 |         // {
13 |         //   test: /\.js?$/,
14 |         //   exclude: /node_modules/,
15 |         //   loader: "babel-loader"
16 |         // },
17 |         // {
18 |         //   test: /\.css$/,
19 |         //   loader: "style-loader!css-loader"
20 |         // }
21 |       ]
22 |     }
23 |   }
24 | };
25 | 


--------------------------------------------------------------------------------
/src/components/AppButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button :style="styles" @click="handleClick">
 3 |     <!-- @slot Use this slot to place the button content -->
 4 |     <slot></slot>
 5 |   </button>
 6 | </template>
 7 | 
 8 | <script>
 9 | import sizeMixin from "./sizeMixin";
10 | 
11 | export default {
12 |   name: "app-button",
13 |   mixins: [sizeMixin],
14 |   props: {
15 |     /**
16 |      * Sets the button font color
17 |      */
18 |     color: {
19 |       type: String,
20 |       default: "black"
21 |     },
22 |     /** Sets background color of the button
23 |      * @since 1.2.0
24 |      */
25 |     background: {
26 |       type: String,
27 |       default: "white"
28 |     },
29 |     /** @deprecated Use color instead */
30 |     oldColor: String
31 |   },
32 |   computed: {
33 |     styles() {
34 |       return {
35 |         "font-size": this.size,
36 |         color: this.color,
37 |         background: this.background
38 |       };
39 |     }
40 |   },
41 |   methods: {
42 |     /** Triggered when button is clicked
43 |      * @event click
44 |      * @type {Event}
45 |      */
46 | 
47 |     /** Event for Alligator's example
48 |      * @event gator
49 |      * @type {Event}
50 |      */
51 |     handleClick(e) {
52 |       this.$emit("click", e);
53 |       this.$emit("gator", e);
54 |     }
55 |   }
56 | };
57 | </script>
58 | 
59 | <docs>
60 | This button is amazing, use it responsibly.
61 | 
62 | ## Examples
63 | 
64 | Orange button:
65 | 
66 | ```jsx
67 | <app-button color="orange">Push Me</app-button>
68 | ```
69 | 
70 | Ugly button with pink font and blue background:
71 | 
72 | ```jsx
73 | <app-button color="pink" background="blue">
74 |   Ugly button
75 | </app-button>
76 | ```
77 | 
78 | Button containing custom tags:
79 | 
80 | ```jsx
81 | <app-button>
82 |   Text with <b>bold</b>
83 | </app-button>
84 | ```
85 | </docs>
86 | 


--------------------------------------------------------------------------------