Any plan to support visualization of different component state?

[MrJoeXu]

I really dig the more systematic, process oriented approach offered by VueDS. Compared to Storybook, I think VueDS is more opinionated and designer friendly.

One thing that might be a deal-breaker for me is the ability the visualize different state of components (clicked/closed/hovering etc) and have a ActionLogger. Storybook provide this feature and make it more like a UI components playground. Is this something you guys are considering in the future? And how do you position VueDS itself comparing to Storybook or Patternplate?

[arielsalminen]

@MrJoeXu Vue Design System uses a customized version of Vue Styleguidist for the Style Guide part which already supports something similar.

You can for example define multiple examples for any component in markdown format in the component’s <docs> section. A simplified example from Styleguidist’s docs:

See the documentation for Vue Styleguidist: https://github.com/vue-styleguidist/vue-styleguidist

Here’s also React Styleguidist’s explanation on the differences between Storybook and it: https://react-styleguidist.js.org/docs/cookbook.html#whats-the-difference-between-styleguidist-and-storybook

I hope this helps.

[arielsalminen]

@MrJoeXu I will try to provide an example of this in 2.0.0 release that I’m working on.

[arielsalminen]

Example is already in https://github.com/viljamis/vue-design-system/pull/56

[MrJoeXu]

Sweet! This is really helpful!

[arielsalminen]

Released in Vue Design System 2.0.0. For a live example see the demo docs: https://vueds.com/example/#!/Elements?id=forminput