@storybook/vue3 7.3.2 → 7.4.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunk-UXHY756F.mjs +6 -0
- package/dist/config.d.ts +2 -2
- package/dist/config.js +2 -2
- package/dist/config.mjs +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -1
- package/dist/index.mjs +3 -3
- package/dist/{render-32b7dd3f.d.ts → render-ddbe18a8.d.ts} +2 -6
- package/package.json +8 -7
- package/dist/chunk-35B2DQBU.mjs +0 -6
- package/src/typings.d.ts +0 -1
- package/template/components/Button.vue +0 -52
- package/template/components/Form.vue +0 -41
- package/template/components/Html.vue +0 -18
- package/template/components/Pre.vue +0 -34
- package/template/components/button.css +0 -30
- package/template/stories/vue3-mdx.stories.mdx +0 -46
- package/template/stories_vue3-vite-default-ts/BaseLayout.vue +0 -18
- package/template/stories_vue3-vite-default-ts/CustomRenderFunctionalComponent.stories.ts +0 -32
- package/template/stories_vue3-vite-default-ts/CustomRenderOptionsArgsFromData.stories.ts +0 -45
- package/template/stories_vue3-vite-default-ts/GlobalSetup.stories.ts +0 -55
- package/template/stories_vue3-vite-default-ts/GlobalSetup.vue +0 -6
- package/template/stories_vue3-vite-default-ts/GlobalUsage.stories.ts +0 -29
- package/template/stories_vue3-vite-default-ts/GlobalUsage.vue +0 -3
- package/template/stories_vue3-vite-default-ts/MySlotComponent.vue +0 -12
- package/template/stories_vue3-vite-default-ts/OverrideArgs.vue +0 -40
- package/template/stories_vue3-vite-default-ts/ReactiveArgs.stories.ts +0 -137
- package/template/stories_vue3-vite-default-ts/ReactiveArgs.vue +0 -40
- package/template/stories_vue3-vite-default-ts/ReactiveDecorators.stories.ts +0 -88
- package/template/stories_vue3-vite-default-ts/ReactiveSlots.stories.ts +0 -127
- package/template/stories_vue3-vite-default-ts/Reactivity.vue +0 -44
- package/template/stories_vue3-vite-default-ts/ScopedSlots.stories.ts +0 -81
- package/template/stories_vue3-vite-default-ts/SourceDecorator.stories.ts +0 -46
- package/template/stories_vue3-vite-default-ts/decorators.stories.ts +0 -84
- package/template/stories_vue3-vite-default-ts/preview.ts +0 -12
@@ -1,84 +0,0 @@
|
|
1
|
-
import type { DecoratorFunction } from '@storybook/csf';
|
2
|
-
import { global as globalThis } from '@storybook/global';
|
3
|
-
import type { Meta, StoryObj, VueRenderer } from '@storybook/vue3';
|
4
|
-
import { h } from 'vue';
|
5
|
-
|
6
|
-
const { Button, Pre } = (globalThis as any).Components;
|
7
|
-
|
8
|
-
const meta = {
|
9
|
-
component: Button,
|
10
|
-
} satisfies Meta<typeof Button>;
|
11
|
-
|
12
|
-
export default meta;
|
13
|
-
|
14
|
-
type Story = StoryObj<typeof meta>;
|
15
|
-
|
16
|
-
const ComponentTemplateWrapper = () => ({
|
17
|
-
components: {
|
18
|
-
Pre,
|
19
|
-
},
|
20
|
-
template: `
|
21
|
-
<Pre text="decorator" />
|
22
|
-
<story v-bind="$attrs"/>
|
23
|
-
`,
|
24
|
-
});
|
25
|
-
|
26
|
-
const SimpleTemplateWrapper = () => ({
|
27
|
-
template: `
|
28
|
-
<div style="border: 5px solid red;">
|
29
|
-
<story/>
|
30
|
-
</div>
|
31
|
-
`,
|
32
|
-
});
|
33
|
-
|
34
|
-
const VueWrapperWrapper: DecoratorFunction<VueRenderer> = (storyFn, context) => {
|
35
|
-
// Call the `storyFn` to receive a component that Vue can render
|
36
|
-
const story = storyFn();
|
37
|
-
// Vue 3 "Functional" component as decorator
|
38
|
-
return () => {
|
39
|
-
return h('div', { style: 'border: 5px solid blue' }, h(story, context.args));
|
40
|
-
};
|
41
|
-
};
|
42
|
-
|
43
|
-
const DynamicWrapperWrapper: DecoratorFunction<VueRenderer> = (storyFn, { args }) => ({
|
44
|
-
template: `<div :style="{ borderWidth: level, borderColor: 'green', borderStyle: 'solid' }"><story /></div>`,
|
45
|
-
computed: { level: () => `${args.level}px` },
|
46
|
-
});
|
47
|
-
|
48
|
-
export const ComponentTemplate: Story = {
|
49
|
-
args: { label: 'With component' },
|
50
|
-
decorators: [ComponentTemplateWrapper],
|
51
|
-
};
|
52
|
-
|
53
|
-
export const SimpleTemplate: Story = {
|
54
|
-
args: { label: 'With border' },
|
55
|
-
decorators: [SimpleTemplateWrapper],
|
56
|
-
};
|
57
|
-
|
58
|
-
export const VueWrapper: Story = {
|
59
|
-
args: { label: 'With Vue wrapper' },
|
60
|
-
decorators: [VueWrapperWrapper],
|
61
|
-
};
|
62
|
-
|
63
|
-
export const DynamicWrapper: Story = {
|
64
|
-
args: { label: 'With dynamic wrapper', primary: true },
|
65
|
-
argTypes: {
|
66
|
-
// Number type is detected, but we still want to constrain the range from 1-6
|
67
|
-
level: { control: { type: 'range', min: 1, max: 6 } },
|
68
|
-
},
|
69
|
-
decorators: [DynamicWrapperWrapper],
|
70
|
-
};
|
71
|
-
|
72
|
-
export const MultipleWrappers = {
|
73
|
-
args: { label: 'With multiple wrappers' },
|
74
|
-
argTypes: {
|
75
|
-
// Number type is detected, but we still want to constrain the range from 1-6
|
76
|
-
level: { control: { type: 'range', min: 1, max: 6 } },
|
77
|
-
},
|
78
|
-
decorators: [
|
79
|
-
ComponentTemplateWrapper,
|
80
|
-
SimpleTemplateWrapper,
|
81
|
-
VueWrapperWrapper,
|
82
|
-
DynamicWrapperWrapper,
|
83
|
-
],
|
84
|
-
};
|