Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import type { Meta, StoryObj } from '@storybook/vue3';
import Drawer from './Drawer.vue';
const meta: Meta = {
title: 'Components/Drawer',
component: Drawer,
tags: ['autodocs'],
argTypes: {
theme: {
control: 'select',
options: [
'white',
'slate',
'blue',
'sky',
'teal',
'green',
'yellow',
'orange',
'pink',
'fuchsia',
'purple',
'indigo',
'rose',
'red',
'black',
],
},
visible: { control: 'boolean' },
width: { control: 'number' },
header: { control: 'text' },
default: { control: 'text' },
footer: { control: 'text' },
},
args: {
// primary: false,
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
// onClick: fn(),
},
} satisfies Meta<typeof Drawer>;
export default meta;
type Story = StoryObj<typeof meta>;
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/api/csf
* to learn how to use render functions.
*/
export const Primary: Story = {
args: {
visible: true,
},
};