Vue: Add first-class args support

[shilman]

Issue: #11051

What I did

Worked with @backbone87 and @tmeasday to automatically inject args into the prop values, so you can do this:

export const Rounded = (args) => ({
  props: Object.keys(args),
  components: { MyButton },
  template: '<my-button :color="color" :rounded="rounded">A Button with rounded edges</my-button>',
});
Rounded.argTypes = {
  rounded: { defaultValue: true },
  color: { control: { type: 'color' }, defaultValue: '#f00' },
};

This needs documentation but I'm not sure where is the best place for it currently.

How to test

See vue-kitchen-sink

Feedback wanted, h/t @ndelangen for the idea of baking it into @storybook/vue

[shilman]

cc @tmeasday @graup @Aaron-Pool @pksunkara

[tmeasday]

Refresh by HMR OR changing story to be clear.

[graup]

If the story returns args, @storybook/vue will unpack the args into props with default values.

To me, that doesn't sound very intuitive. If we introduce "magic", it should be properly named, something like { defaultProps: args }. But is it really necessary? It would be better if we can let the user define data/props normally and just work with that.

[shilman]

@graup thanks for the feedback and point taken. check out the new version, updated in the description. much better i think!

[shilman]

Self-merging @backbone87 @tmeasday

[graup]

@shilman yeah this is better! 👍

[Martskin]

The controls are working on the Canvas tab great now but don't seem to be having any effect in the Docs addon tab.

https://next--storybookjs.netlify.app/vue-kitchen-sink/?path=/story/button--rounded

[shilman]

@Martskin thanks for letting me know. Will look into it tomorrow!

[Martskin]

@Martskin thanks for letting me know. Will look into it tomorrow!

Glad to help! Thanks for the response.

[Martskin]

The controls are working on the Canvas tab great now but don't seem to be having any effect in the Docs addon tab.

Release https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.26 fixed it for me! Thanks.