Merge pull request #18209 from storybookjs/fix/vue-default-render-fn

Vue: map args correctly in CSF3 implicit render function
storybookjs · May 16, 2022 · fb4f6dc · fb4f6dc
2 parents 9fc259c + 58f38f2
commit fb4f6dc
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 4 deletions.
diff --git a/app/vue/src/client/preview/config.ts b/app/vue/src/client/preview/config.ts
@@ -1,4 +1,4 @@
-export { renderToDOM } from './render';
+export { render, renderToDOM } from './render';
 export { decorateStory } from './decorateStory';
 
 export const parameters = { framework: 'vue' };
diff --git a/app/vue/src/client/preview/render.ts b/app/vue/src/client/preview/render.ts
@@ -22,7 +22,7 @@ const root = new Vue({
 });
 
 export const render: ArgsStoryFn<VueFramework> = (props, context) => {
-  const { id, component: Component } = context;
+  const { id, component: Component, argTypes } = context;
   const component = Component as VueFramework['component'] & {
     __docgenInfo?: { displayName: string };
     props: Record<string, any>;
@@ -49,7 +49,7 @@ export const render: ArgsStoryFn<VueFramework> = (props, context) => {
   }
 
   return {
-    props: component.props,
+    props: Object.keys(argTypes),
     components: { [componentName]: component },
     template: `<${componentName} v-bind="$props" />`,
   };

diff --git a/examples/vue-cli/src/button/Button.stories.ts b/examples/vue-cli/src/button/Button.stories.ts
@@ -19,3 +19,10 @@ export const ButtonWithProps: Story = (args, { argTypes }) => ({
 ButtonWithProps.args = {
   size: 'big',
 };
+
+export const WithDefaultRender = {
+  args: {
+    size: 'small',
+    label: 'Button with default render',
+  },
+};
diff --git a/examples/vue-cli/src/button/Button.vue b/examples/vue-cli/src/button/Button.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="button" :class="`size-${size}`">
     <!-- @slot Button content, e.g. label text -->
-    <slot></slot>
+    <slot>
+      {{label}}
+    </slot>
   </div>
 </template>
 
@@ -21,6 +23,11 @@ export default class Button extends Vue {
    * @values default,small,big
    */
   @Prop({ type: String, default: 'default' }) readonly size!: ButtonSize;
+  
+  /**
+   * Label of the button
+   */
+  @Prop({ type: String, default: '' }) readonly label!: string;
 }
 </script>