update buble to fix issue #217

Fix crlf issue blocking linux users

Fix: #200 Unknown language: "vue"

• Fix: revert security audit changes

• Chore: updated vue-docgen-api for vue-cli
• Chore: fixed some npm audit issues

• Fix: Added ignore in schema #191
• Docs: Lick → Click
• Feat: Updated react-styleguidist

• Feat: Updated [email protected]
• Feat: Updated [email protected]

Support jsx renderer

Example:

<script>
// Button.vue
/**
 * This is a Button
 * @version 1.0.5
 */
export default {
  name: 'btn',
  render() {
    return <button>Click me</button>
  }
}
</script>

Feature developed by @hellosean1025

External links in sections

Two new flags in the sections config:

• href — An URL to navigate to instead of navigating to the section content
• external — If set, the link will open in a new window

• Updated [email protected]
• Updated vue-docgen-api
• Feat pagePerSection
• Refactor rsg-components
• 1.8.0

• Updated: vue-docgen dependency
• Feat: vue-cli 3.x support (#137 by @elevatebart) #127
• Feat: Added test cases (by @elevatebart)
• Fix: IE support with navigation enabled (#83)

Vue-CLI 3.x support

If you’re using vue-cli 3.x you can skip the webpack configuration 👍

• Updated: vue-docgen-api
• Fix: Support ie11 #83

• Fix: Fixed #120

• Fix: Fix #116
• Updated: vue-docgen-api
• Feat: New configuration prop renderRootJsx
• Feat: New example with vuetify and vue-i18n
• Updated: Cookbok.md

How to add data dummy and third-party plugins to the style guide?

If you need to have default data for use in the examples of your components, you can import mixins to the style guide. Creating a .js file that exports the mixins or adding it directly to the styleguide.config.js file

Use mixins option to customize this behavior:

// mixin file
export default {
  data() {
    return {
      colorDemo: 'blue',
      sizeDemo: 'large'
    }
  }
  /* ... */
}

// example component

<Button size="colorDemo" color="sizeDemo">
  Lick Me
</Button>

If you need to load vue plugins from a third party. You can add it, creating a .js file that installs the plugins and then adds it into the styleguide.config.js file

Use require option:

// styleguide/global.requires.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import VeeValidate from 'vee-validate'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(VueI18n)
Vue.use(VeeValidate)
Vue.use(Vuetify)

// styleguide.config.js
module.exports = {
  require: [path.join(__dirname, 'styleguide/global.requires.js')]
}

If you need to change the root component of each preview example, you can change the root component of preview. Creating a .js file that exports the root component as jsx component and then adds it into the styleguide.config.js file

Use renderRootJsx option:

// config/styleguide.root.js
import VueI18n from 'vue-i18n'
import messages from './i18n'

const i18n = new VueI18n({
  locale: 'en',
  messages
})

export default previewComponent => {
  // https://vuejs.org/v2/guide/render-function.html
  return {
    i18n,
    render(createElement) {
      // v-app to support vuetify plugin
      return createElement(
        'v-app',
        {
          props: {
            id: 'v-app'
          }
        },
        [createElement(Object.assign(previewComponent))]
      )
    }
  }
}

// styleguide.config.js
module.exports = {
  renderRootJsx: path.join(__dirname, 'config/styleguide.root.js')
}

See an example of style guide with vuetify and vue-i18n.

Extends support

If you import extends, for it to be documented you need to add in the header the mixin tag @mixin, for example

// src/extends/Base.vue

<template>
  <div>
    <h4>{{ color }}</h4>
    <!--the appropriate input should go here-->
  </div>
</template>
<script>
/**
 * @mixin
 */
export default {
  props: {
    /**
    * The color for the button example
    */
    colorExtends: {
      type: String,
      default: '#333'
    },
  },
}
</script>

// src/components/Button/Button.vue
<template>
<!-- -->
</template>
<script>
import Base from '../../extends/Base.vue';

export default {
  name: 'Button',
  extends: Base,
  props: {
    /**
    * The size of the button
    * `small, normal, large`
    */
    size: {
      default: 'normal'
    },
    /**
    * Add custom click actions.
    **/
    onCustomClick: {
      default: () => () => null,
    },
  },
  /* ... */
}
</script>

• Fixed: #116

• Updated: Updated with [email protected]

Breaking changes from react-styleguidist

Node.js 6 is the lowest supported version**

Styleguidist doesn’t support Node.js 4 anymore.

New format of template option**

We’re now using mini-html-webpack-plugin and @vxna/mini-html-webpack-template instead of html-webpack-plugin.

This will make things like adding a favicon or fonts from Google Fonts much easier.

If you’re using a custom HTML template, you need to update your style guide config.

// < 1.6.0v
module.exports = {
  template: './styleguie/template.html'
};

// 1.7.0v
module.exports = {
  template: {
    // This is just an example, there are many more available options
    favicon: 'https://assets-cdn.github.com/favicon.ico'
  }
};

See more in the docs.

Changed Node.js API**

server method now returns an object containing a webpack Compiler instance and the Styleguidist server, see examples in the docs.

New features

Webpack 4 support (#101 by @hgascoigne and with react-styleguidist merge)

Navigation

Fixed errors (by @viljamis) and added the isolate for each component, so both components and sections, already is separate.
Example:
http://rafaelescala.com/vue-styleguide-navigation/#!/Getting%20Started
Source

module.exports = {
  navigation: true
};

“Fork me” ribbon**

One more step to make by react-styleguidist usable for documenting open source projects:

New config option to enable the ribbon, define the URL and change the label:

module.exports = {
  ribbon: {
    url: 'http://example.com/',
    text: 'Fork me on GitHub'
  }
};

And two new theme variables to change colors: color.ribbonBackground and color.ribbonText

Styles support inside component documented**

Added support for the <style scoped> tag in the single file component format (#93 by @mrjones2014)
Available since v1.6.x
Example:

```vue
  <template>
    <div class="wrapper">
      <Button id="dog-name-button" @click.native="pushButton">Push Me</Button>
      <hr />
      <p class="text-name">Next Dog Name: {{ dogName }}</p>
    </div>
  </template>

  <script>
    const dogNames = require('dog-names').all;

    // 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];
        }
      }
    }
  </script>

  <style scoped>
    .wrapper {
      background: blue;
    }
    .text-name {
      color: red;
    }
  </style>
```

Bugfixes

• Fixes navigation and isolated mode when there’s whitespace in the name of section (#106 by @viljamis)
• Fixes scrolling in Safari (and a few other browsers) when using navigation: true (#99 by @viljamis)
• components option should accept arrays.
• Do not convert URLs in Markdown to auto links
• Improved accessibility

• Fixed: Mixins aren't applied #80

• Fixed: Updated examples (#77)
• Updated: README (#76 by @philwolstenholme)
• Feat: Add support for single file component format (#79 by @mrjones2014)

You can create complex examples in two ways:

1. Create a new Vue instance

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

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

2. Single-file components with a language tag of vue

```vue
    <template>
    <div>
        <Button @click.native="pushButton">Push Me</Button>
        <hr />
        <p>Next Dog Name: {{ dogName }}</p>
    </div>
    </template>

    <script>
    const dogNames = require('dog-names').all;

    // You can also use 'exports.default = {}' style module exports.
    export default {
        name: 'ButtonExample',
        data() {
        return { numClicks: 0, dogName: dogNames[0] };
        },
        methods: {
        pushButton() {
            this.numClicks += 1;
            this.dogName = dogNames[this.numClicks];
        }
        }
    }
    </script>
```

https://github.com/vue-styleguidist/vue-styleguidist/blob/master/docs/Documenting.md#usage-examples-and-readme-files

• Fixed: Issue #64 PR #73

• Added: New feature, styleguide with navigation. #26

You can add this property in styleguide.config.js to added a navigation.
https://github.com/vue-styleguidist/vue-styleguidist/blob/master/docs/Configuration.md#navigation

Example
https://github.com/vue-styleguidist/vue-styleguidist/tree/master/examples/navigation

• Updated: Updated with [email protected]
• Updated: [email protected]
• Added: Sections example
• Fix: #71

React-styleguidist's updating

Allow ignore to be specified at section level

module.exports = {
  sections: [
    {
      name: 'UI Components',
      content: 'docs/ui.md',
      components: 'lib/components/*.js',
      ignore: '**/components/Button.js',
    }
  ]
}

Tweak CLI a bit

Bug fixes and small stuff with

• Clear console only on hot reload
• Use webpack.DefinePlugin as recommended by webpack docs
• Add buttonTextTransform variable to theme
• Improve the sidebar scroll UX for touch devices
• Update to new version of markdown-to-jsx which is significantly smaller
• Change code tab button caption from “Code” to “View Code”
• Allow overriding default webpack dev server options
• Reload dev server when assets change
• Pass NODE_ENV to webpack's definePlugin
• Fix navigation between list and isolated mode issues
• Correct whitespace around error messages with noeditor modifier
• Correct URL of the isolated mode of the first example
• Initialize logger before config validation (fixes previously hidden config warning)
• Disable clean-webpack-plugin debug info unless we are in verbose mode

• Updated: [email protected]
• PR: #58 #56 #50
• Fixed: #51