Vue Styleguidist basic

Best Button

import Button from 'my-library/dist/components/Button/Button.vue'

The only true button.

Prop name	Description	Values	Default	Origin
`color`	The color for the button. string	-	`#333`
`inMixin`	This prop comes from the loginMixin mixin boolean	-	`true`	M: loggerMixin
`propArrayDefault`	A test for default function Array array	-	`[1, 2, 3]`
`propComplexDefault`	A test for default function more complex array	-	Function
`propObjectDefault`	A test for default function Object object	-	`{}`
`shape`	The shape of my heart PropTypes.shape({ color: PropTypes.string, fontSize: PropTypes.number })	-	-
`size`	The size of the button VueTypes.string.def('normal')	`small`, `normal`, `large`	-

Slot	Description
`default`	content of the button

Basic button:

<BestButton>Push Me</BestButton>

<BestButton>Push Me</BestButton>

Big pink button and small blue button:

<BestButton size="large" color="deeppink">
  Click Me
</BestButton>
<br />
<BestButton size="small" color="blue">
  Second button
</BestButton>

<BestButton size="large" color="deeppink">
  Click Me
</BestButton>
<br />
<BestButton size="small" color="blue">
  Second button
</BestButton>

And you can use any Markdown here.

Fenced code blocks with vue, html, js, jsx or javascript languages are rendered as a interactive playgrounds:

<BestButton>Push Me</BestButton>

<BestButton>Push Me</BestButton>

You can also use the Single File Component Format

Next Dog Name: Bella

<template>
    <div class="wrapper">
        <BestButton @click.native="pushButton">Push Me</BestButton>
        <hr />
        <p class="text-name">Next Dog Name: {{ dogName }}</p>
        <button @click="testTypescript('Medor')">Set <b>medor</b> tag name</button>
    </div>
</template>
<script lang="ts">
import { all as dogNames } from 'dog-names'

// You can also use 'exports.default = {}' style module exports.
export default {
  data() {
    return { 
      numClicks: 0, 
      dogName: dogNames[0] }
  },
  methods: {
    pushButton() {
      this.numClicks += 1
      this.dogName = dogNames[this.numClicks]
    },
    testTypescript(param: string) {
      this.dogName = param
    }
  }
}
</script>
<style scoped>
.wrapper {
  padding: 10px;
}
.text-name {
  color: red;
}
</style>

<template>
    <div class="wrapper">
        <BestButton @click.native="pushButton">Push Me</BestButton>
        <hr />
        <p class="text-name">Next Dog Name: {{ dogName }}</p>
        <button @click="testTypescript('Medor')">Set <b>medor</b> tag name</button>
    </div>
</template>
<script lang="ts">
import { all as dogNames } from 'dog-names'

// You can also use 'exports.default = {}' style module exports.
export default {
  data() {
    return { 
      numClicks: 0, 
      dogName: dogNames[0] }
  },
  methods: {
    pushButton() {
      this.numClicks += 1
      this.dogName = dogNames[this.numClicks]
    },
    testTypescript(param: string) {
      this.dogName = param
    }
  }
}
</script>
<style scoped>
.wrapper {
  padding: 10px;
}
.text-name {
  color: red;
}
</style>

another example with the new Vue({}) format

Count: 42

const getCountArray = require('~/store/models/data').default
const countArray = getCountArray()

// You can also use 'exports.default = {}' style module exports.
new Vue({
  data() {
    return { numClicks: 0 }
  },
  computed: {
    count() {
      return countArray[this.numClicks] || this.numClicks
    }
  },
  template: `
    <div>
      <BestButton @click.native="numClicks++">Push Me</BestButton>
      <hr />
      <p class="text-name">Count: {{ count }}</p>
    </div>
  `
})

const getCountArray = require('~/store/models/data').default
const countArray = getCountArray()

// You can also use 'exports.default = {}' style module exports.
new Vue({
  data() {
    return { numClicks: 0 }
  },
  computed: {
    count() {
      return countArray[this.numClicks] || this.numClicks
    }
  },
  template: `
    <div>
      <BestButton @click.native="numClicks++">Push Me</BestButton>
      <hr />
      <p class="text-name">Count: {{ count }}</p>
    </div>
  `
})

This is an examples doc file Button

You can add a custom classes to an example wrapper (```js { "className": "checks" }):

<Button>I’m transparent!</Button>

<Button>I’m transparent!</Button>

Or disable an editor by passing a noeditor modifier (```js noeditor):

To render an example as highlighted source code add a static modifier: (```js static):

import Vue from 'vue'

Fenced blocks with other languages are rendered as highlighted code:

<h1>Hello world</h1>

Conclusion

Let's build a button.

CounterButton

import CounterButton from 'my-library/dist/components/CounterButton/CounterButton.vue'

Button that counts how many times it was pressed and exposes a @public method to reset itself.

Prop name	Description	Default
`menuItems`	array	`[]`

Method name	Description	Parameters
`set()`	Sets the counter to a particular value. Returns: string — Test Throwsthrows this when needed ThrowsInvalidArgument — when the newValue is null Version1.0.5	`newValue`: Number — New value for the counter `target`: Object — target of the counter

Event name	Description	Properties
`after`	After increment event	`<anonymous1>`: number `<anonymous2>`: undefined

<div>
  <CounterButton ref="count"/>
  <Button size="small" @click="() => {$refs.count.set(0)}">
    Reset
  </Button>
</div>

<div>
  <CounterButton ref="count"/>
  <Button size="small" @click="() => {$refs.count.set(0)}">
    Reset
  </Button>
</div>

import DropDown from 'my-library/dist/components/DropDown/DropDown.vue'

RequiresMyOption

Slot	Description
`default`	where the options will be listed

A drop down is composed of mutiple components.

The dropdown itself and its sub-components.

Use the @requires doclet to list the subparts of a component.

<DropDown>
  <MyOption val="1">option 1</MyOption>
  <MyOption val="2">option 2</MyOption>
</DropDown>

<DropDown>
  <MyOption val="1">option 1</MyOption>
  <MyOption val="2">option 2</MyOption>
</DropDown>

MyOptionDropDown

import MyOption from 'my-library/dist/components/DropDown/MyOption.vue'

Prop name	Description	Default
`val`	value associated with the option string - required	-

Slot	Description
`default`	text displayed in the option

FilterWithSlot

import filters from 'my-library/dist/components/filters/Index.vue'

Slot	Description
`default`	-

Default Example Usage

<FilterWithSlot>Default Example Usage</FilterWithSlot>

<FilterWithSlot>Default Example Usage</FilterWithSlot>

FunctionalButton

import FunctionalButton from 'my-library/dist/components/Functional/FunctionalButton.vue'

Prop name	Description	Default
`id`	name attribute of the button string	-

Slot	Description
`default`	name of the button

Or in a readme file

<FunctionalButton>Push Me</FunctionalButton>

<FunctionalButton>Push Me</FunctionalButton>

Document your functional templates in docs blocks

<FunctionalButton id="test">
    In the docs block
</FunctionalButton>

<FunctionalButton id="test">
    In the docs block
</FunctionalButton>

Input

import Input from 'my-library/dist/components/Input/Input.vue'

Prop name	Description	Default
`regExp`	Using for: String.prototype.replace(regexp, replacement) RegExp	`null`
`replacement`	Using for: String.prototype.replace(regexp, replacement) string	`''`
`v-model`	number\|string	`null`

Event name	Description	Properties
`input`	Input event	`called`: number — test called `isPacked`: boolean — Indicates whether the snowball is tightly packed.
`change`	Change event	`<anonymous>`: undefined
`fire`	Fire event	`<anonymous>`: string

Basic Input

  const setting = {
    regExp: /^[0\D]*|\D*/g, // Match any character that doesn't belong to the positive integer
    replacement: '',
    val: '223'
  }
  const executeFire = function(event){
    alert(event)
  }

  <Input
      v-model="setting.val"
      class="your-class-name"
      :regExp="setting.regExp"
      :replacement="setting.replacement"
      @fire="executeFire"
    ></Input>

  const setting = {
    regExp: /^[0\D]*|\D*/g, // Match any character that doesn't belong to the positive integer
    replacement: '',
    val: '223'
  }
  const executeFire = function(event){
    alert(event)
  }

  <Input
      v-model="setting.val"
      class="your-class-name"
      :regExp="setting.regExp"
      :replacement="setting.replacement"
      @fire="executeFire"
    ></Input>

import Modal from 'my-library/dist/components/Modal/Modal.vue'

Modal example modal-component.

AuthorVue

Prop name	Description	Default
`showModal`	Show modal boolean	`false`

Event name	Description
`close`

Slot	Description
`head`	Use this slot header
`body`	Use this slot body

You can modify the code through the playground

let isOpen = false;
const merge = require("lodash/merge").default

<button @click.prevent="isOpen = true">Open</button>
<Modal :showModal="isOpen" @close="isOpen = false">
  <h1 slot="head">Hallo!</h1>
  <div slot="body">
    <button  @click.prevent="isOpen = false">Close</button>
  </div>
</Modal>

let isOpen = false;
const merge = require("lodash/merge").default

<button @click.prevent="isOpen = true">Open</button>
<Modal :showModal="isOpen" @close="isOpen = false">
  <h1 slot="head">Hallo!</h1>
  <div slot="body">
    <button  @click.prevent="isOpen = false">Close</button>
  </div>
</Modal>

The variables are reactive:

let count = 1;

<button @click.prevent="count++">{{ count }}</button>

let count = 1;

<button @click.prevent="count++">{{ count }}</button>

You can also develop more complex examples, instantiating Vue

const timeCountdown = 5;

new Vue({
  data(){
    return {
      showModal: false,
      countdown: timeCountdown,
    }
  },
  watch:{
      showModal(value) {
        if (value) {
          this.cycle = setInterval(()=>{
            this.countdown--;
            if (this.countdown === 0) {
              this.showModal = false;
              this.countdown = timeCountdown;
              clearInterval(this.cycle);
            }
          },1000);
        }else{
          clearInterval(this.cycle);
        }
      },
  },
  methods: {
    closeModal() {
      this.showModal = false;
      clearInterval(this.cycle);
    }
  },
  template: `
    <div>
      <button @click.prevent="showModal = true">Open Modal</button>
      <Modal :showModal="showModal" @close="closeModal">
        <h1 slot="head">Title</h1>
        <div slot="body">
          Countdown to close mode {{ countdown }}
        </div>
      </Modal>
    </div>
  `
})

const timeCountdown = 5;

new Vue({
  data(){
    return {
      showModal: false,
      countdown: timeCountdown,
    }
  },
  watch:{
      showModal(value) {
        if (value) {
          this.cycle = setInterval(()=>{
            this.countdown--;
            if (this.countdown === 0) {
              this.showModal = false;
              this.countdown = timeCountdown;
              clearInterval(this.cycle);
            }
          },1000);
        }else{
          clearInterval(this.cycle);
        }
      },
  },
  methods: {
    closeModal() {
      this.showModal = false;
      clearInterval(this.cycle);
    }
  },
  template: `
    <div>
      <button @click.prevent="showModal = true">Open Modal</button>
      <Modal :showModal="showModal" @close="closeModal">
        <h1 slot="head">Title</h1>
        <div slot="body">
          Countdown to close mode {{ countdown }}
        </div>
      </Modal>
    </div>
  `
})

ModalHeader

import ModalHeader from 'my-library/dist/components/Modal/ModalHeader.vue'

Event name	Description
`close`

Slot	Description
`default`	-

Placeholder

import Placeholder from 'my-library/dist/components/Placeholder/Placeholder.vue'

Button that counts how many times it was pressed and exposes a @public method to reset itself.

Prop name	Description	Values	Default
`height`	number	-	`150`
`type`	type of image used as a placeholder string	`animal`, `bacon`, `beard`, `cat`, `city`, `food`, `nature`, `people`	`animal`
`width`	number	-	`150`

<Placeholder type="beard"/>

<Placeholder type="beard"/>

Another example with custom blocks inside *.vue files.

<Placeholder type="animal"/>

<Placeholder type="animal"/>

PushButton

import PushButton from 'my-library/dist/components/PushButton/PushButton.vue'

An example-less button.

Prop name	Description	Values	Default
`color`	string	-	`#333`
`size`	string	`small`, `normal`, `large`	`normal`

Slot	Description
`default`	-

<PushButton>Default Example Usage</PushButton>

<PushButton>Default Example Usage</PushButton>

Radio

import Radio from 'my-library/dist/components/Radio/Radio.vue'

Prop name	Description	Default
`options`	array	`[]`

Import it from the Readme.md file

You can have the example in remote files too.

```[import](./_radioExample.vue)
this text is going to be ignored
```

hello world

<template>
	<Radio
		:options="[
			{ text: 'hello', value: 1 },
			{ text: 'world', value: 2 }
		]"
	/>
</template>

<template>
	<Radio
		:options="[
			{ text: 'hello', value: 1 },
			{ text: 'world', value: 2 }
		]"
	/>
</template>

or import it from the docs block

Example can be their own file. Use the following syntax.

```[import](./_radioExample.vue)
this text is going to be ignored
```

hello world

<template>
	<Radio
		:options="[
			{ text: 'hello', value: 1 },
			{ text: 'world', value: 2 }
		]"
	/>
</template>

<template>
	<Radio
		:options="[
			{ text: 'hello', value: 1 },
			{ text: 'world', value: 2 }
		]"
	/>
</template>

They can be imported from anywhere from your source. To keep your code tidy and the navigation easy, keep then in the same directory as your component.

```[import](./examples/_example.js)
If you do this, vscode will not recognize the import as a link.
Prefer examples in the same folder as your comoponent.
```

Medor Bobby Murphy

import Vue from 'vue'
import { three } from '../../RandomButton/dog-names'

new Vue({
	data() {
		let i = 0
		return {
			opt: three.map(a => ({ text: a, value: i++ }))
		}
	},
	template: '<Radio :options="opt" />'
})

import Vue from 'vue'
import { three } from '../../RandomButton/dog-names'

new Vue({
	data() {
		let i = 0
		return {
			opt: three.map(a => ({ text: a, value: i++ }))
		}
	},
	template: '<Radio :options="opt" />'
})

RandomButton

import RandomButton from 'my-library/dist/components/RandomButton/RandomButton.vue'

An example-less button.

DeprecatedUse the only true button component instead

Prop name	Description	Default
`variants`	List of possible labels. array - required	-

You can require external files in your examples:

import {all as names} from 'dog-names';
import {three as localNames} from './dog-names';

<RandomButton :variants="names" />
<RandomButton :variants="localNames" />

import {all as names} from 'dog-names';
import {three as localNames} from './dog-names';

<RandomButton :variants="names" />
<RandomButton :variants="localNames" />

Another example initializing Vue

const names = require('dog-names').all;

new Vue({
  data(){
    return {
      list: names
    }
  },
  template: `
    <div>
      <RandomButton :variants="list" />
    </div>
  `
})

const names = require('dog-names').all;

new Vue({
  data(){
    return {
      list: names
    }
  },
  template: `
    <div>
      <RandomButton :variants="list" />
    </div>
  `
})

ScopedSlot

import ScopedSlot from 'my-library/dist/components/ScopedSlot/ScopedSlot.vue'

Slot	Description	Bindings
`test`	Menu Item footer	`icon`: object — icon of the menu item `text`: string — text of the menu item

First item

Second item

Third item

<ScopedSlot>Default Example Usage</ScopedSlot>

<ScopedSlot>Default Example Usage</ScopedSlot>