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

fix: use method to execute event functions

Browse Source
This commit is contained in:
fazulk 2023-02-02 14:36:49 -08:00
parent 9740c57a8a
commit cc93969b2c
1 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,9 +49,8 @@ const getRoot = (canvasElement: VueRenderer['canvasElement']): Instance => {
return instance;
};
export const render: ArgsStoryFn<VueRenderer> = (args, context) => {
const { id, component: Component, argTypes } = context;
const { id, component: Component, argTypes, initialArgs } = context;
const component = Component as VueRenderer['component'] & {
__docgenInfo?: { displayName: string };
props: Record<string, any>;
@ -82,15 +81,27 @@ export const render: ArgsStoryFn<VueRenderer> = (args, context) => {
.map((argType) => argType.name);
if (eventProps.length) {
eventsBinding = eventProps.map((name) => `@${name}="$props['${name}"']`).join(' ');
eventsBinding = `${eventsBinding} `;
eventsBinding = eventProps
.map((name) => `@${name}="useEventMethod('${name}', $event)"`)
.join(' ');
}
return {
props: Object.keys(argTypes),
components: { [componentName]: component },
template: `<${componentName} ${eventsBinding}v-bind="filterOutEventProps($props)" />`,
template: `<${componentName} ${eventsBinding} v-bind="filterOutEventProps($props)" />`,
data() {
return {
initialArgs,
};
},
methods: {
useEventMethod(eventKey: string, eventPayload: any) {
if (eventKey in this.$props && typeof this.$props[eventKey] === 'function')
this.$props[eventKey](eventPayload);
else if (eventKey in initialArgs && typeof initialArgs[eventKey] === 'function')
initialArgs[eventKey](eventPayload);
},
filterOutEventProps(props: object) {
return Object.fromEntries(
Object.entries(props).filter(([key]) => !eventProps.includes(key))