GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 16:11:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Vue: Update events binding in Vue render
This commit is contained in:
Norbert de Langen 2023-01-18 09:00:58 +01:00 committed by GitHub
commit c754d638f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
code/lib/store/template/stories/hooks.stories.ts
View File

@ -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');

19
code/renderers/vue/src/render.ts
View File

@ -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))
);
},
},
};
};