@vueless/storybook 0.0.32 → 0.0.34
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.
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { addons, makeDecorator } from "@storybook/preview-api";
|
|
1
|
+
import { addons, useArgs, makeDecorator } from "@storybook/preview-api";
|
|
2
2
|
import { h, onMounted, watch } from "vue";
|
|
3
3
|
|
|
4
4
|
export const vue3SourceDecorator = makeDecorator({
|
|
5
5
|
name: "vue3SourceDecorator",
|
|
6
6
|
wrapper: (storyFn, context) => {
|
|
7
7
|
const story = storyFn(context);
|
|
8
|
+
const [, updateArgs] = useArgs();
|
|
8
9
|
|
|
9
10
|
// this returns a new component that computes the source code when mounted
|
|
10
11
|
// and emits an events that is handled by addons-docs
|
|
@@ -12,15 +13,17 @@ export const vue3SourceDecorator = makeDecorator({
|
|
|
12
13
|
return {
|
|
13
14
|
components: { story },
|
|
14
15
|
setup() {
|
|
15
|
-
onMounted(() => {
|
|
16
|
-
setSourceCode();
|
|
16
|
+
onMounted(async () => {
|
|
17
|
+
await setSourceCode();
|
|
17
18
|
});
|
|
18
19
|
|
|
19
|
-
watch(context.args, () => {
|
|
20
|
-
|
|
20
|
+
watch(context.args, async () => {
|
|
21
|
+
// it allows changing args dynamically
|
|
22
|
+
updateArgs({ ...context.args });
|
|
23
|
+
await setSourceCode();
|
|
21
24
|
});
|
|
22
25
|
|
|
23
|
-
function setSourceCode() {
|
|
26
|
+
async function setSourceCode() {
|
|
24
27
|
try {
|
|
25
28
|
const src = context.originalStoryFn(context.args).template;
|
|
26
29
|
const code = templateSourceCode(src, context.args, context.argTypes);
|
|
@@ -44,7 +47,7 @@ export const vue3SourceDecorator = makeDecorator({
|
|
|
44
47
|
});
|
|
45
48
|
};
|
|
46
49
|
|
|
47
|
-
emitFormattedTemplate();
|
|
50
|
+
await emitFormattedTemplate();
|
|
48
51
|
} catch (e) {
|
|
49
52
|
// eslint-disable-next-line no-console
|
|
50
53
|
console.warn("Failed to render code", e);
|
|
@@ -58,9 +61,12 @@ export const vue3SourceDecorator = makeDecorator({
|
|
|
58
61
|
});
|
|
59
62
|
|
|
60
63
|
function templateSourceCode(templateSource, args, argTypes) {
|
|
64
|
+
const MODEL_VALUE_KEY = "modelValue";
|
|
61
65
|
const componentArgs = {};
|
|
62
66
|
|
|
63
67
|
for (const [key, val] of Object.entries(argTypes)) {
|
|
68
|
+
if (key === MODEL_VALUE_KEY) continue;
|
|
69
|
+
|
|
64
70
|
const value = args[key];
|
|
65
71
|
|
|
66
72
|
if (
|
|
@@ -75,7 +81,7 @@ function templateSourceCode(templateSource, args, argTypes) {
|
|
|
75
81
|
|
|
76
82
|
const slotTemplateCode =
|
|
77
83
|
// eslint-disable-next-line vue/max-len
|
|
78
|
-
|
|
84
|
+
`<template v-for="(slot, index) of slots" :key="index" v-slot:[slot]><template v-if="args[slot + 'Slot']">{{ args[slot + 'Slot'] }}</template></template>`;
|
|
79
85
|
const templateDefaultRegEx = /<template #default>([\s\S]*?)<\/template>/g;
|
|
80
86
|
|
|
81
87
|
return templateSource
|
|
@@ -83,6 +89,10 @@ function templateSourceCode(templateSource, args, argTypes) {
|
|
|
83
89
|
.trim()
|
|
84
90
|
.replace(slotTemplateCode, "")
|
|
85
91
|
.replace(templateDefaultRegEx, "$1")
|
|
92
|
+
.replace(
|
|
93
|
+
'v-model="args.modelValue"',
|
|
94
|
+
args[MODEL_VALUE_KEY] ? `v-model="${args[MODEL_VALUE_KEY]}"` : "",
|
|
95
|
+
)
|
|
86
96
|
.replace(
|
|
87
97
|
'v-bind="args"',
|
|
88
98
|
Object.keys(componentArgs)
|