Merge pull request #19860 from gitstart/vue/add-v-on-render

Vue: Update events binding in Vue render
storybookjs · Jan 18, 2023 · c754d63 · c754d63
2 parents 952b7a6 + d32ba1a
commit c754d63
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/code/lib/store/template/stories/hooks.stories.ts b/code/lib/store/template/stories/hooks.stories.ts
@@ -24,9 +24,6 @@ export const UseState = {
   ],
   play: async ({ canvasElement }: PlayFunctionContext<any>) => {
     const button = await within(canvasElement).findByText('Clicked 0 times');
-    // FIXME: onClick does not properly register in vue2
-    // https://github.com/storybookjs/storybook/issues/19318
-    if (globalThis.storybookRenderer === 'vue') return;
 
     await userEvent.click(button);
     await within(canvasElement).findByText('Clicked 1 times');

diff --git a/code/renderers/vue/src/render.ts b/code/renderers/vue/src/render.ts
@@ -75,10 +75,27 @@ export const render: ArgsStoryFn<VueRenderer> = (args, context) => {
     componentName = component.__docgenInfo?.displayName;
   }
 
+  let eventsBinding = '';
+  const eventProps = Object.values(argTypes)
+    .filter((argType) => argType?.table?.category === 'events')
+    .map((argType) => argType.name);
+
+  if (eventProps.length) {
+    eventsBinding = eventProps.map((name) => `@${name}="$props.${name}"`).join(' ');
+    eventsBinding = `${eventsBinding} `;
+  }
+
   return {
     props: Object.keys(argTypes),
     components: { [componentName]: component },
-    template: `<${componentName} v-bind="$props" />`,
+    template: `<${componentName} ${eventsBinding}v-bind="filterOutEventProps($props)" />`,
+    methods: {
+      filterOutEventProps(props: object) {
+        return Object.fromEntries(
+          Object.entries(props).filter(([key]) => !eventProps.includes(key))
+        );
+      },
+    },
   };
 };