storybook/docs/snippets/vue/component-story-custom-args-complex.ts.mdx
2023-05-25 21:04:33 +01:00

53 lines
1.4 KiB
Plaintext

```ts
// YourComponent.stories.ts
import type { Meta, StoryObj } from '@storybook/vue3';
import YourComponent from './YourComponent.vue';
const meta: Meta<typeof YourComponent> = {
component: YourComponent,
//👇 Creates specific argTypes with options
argTypes: {
propertyA: {
options: ['Item One', 'Item Two', 'Item Three'],
control: { type: 'select' }, // automatically inferred when 'options' is defined
},
propertyB: {
options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
},
},
};
const someFunction = (valuePropertyA, valuePropertyB) => {
// Do some logic here
};
export default meta;
type Story = StoryObj<typeof YourComponent>;
export const ExampleStory: Story = {
render: ({ args }) => {
const { propertyA, propertyB } = args;
//👇 Assigns the function result to a variable
const functionResult = someFunction(propertyA, propertyB);
return {
components: { YourComponent },
setup() {
return {
...args,
//👇 Replaces arg variable with the override (without the need of mutation)
someProperty: functionResult,
};
},
template:
'<YourComponent :propertyA="propertyA" :propertyB="propertyB" :someProperty="someProperty"/>',
};
},
args: {
propertyA: 'Item One',
propertyB: 'Another Item One',
},
};
```