@vueless/storybook 1.5.3 → 1.5.5-beta.0
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/.storybook-js/preview-head.html +96 -0
- package/.storybook-ts/preview-head.html +96 -0
- package/package.json +2 -2
- package/theme/manager.css +16 -0
- package/theme/preview.css +25 -2
|
@@ -14,4 +14,100 @@ affecting rendered component(s) below Canvas and Docs tabs.
|
|
|
14
14
|
body {
|
|
15
15
|
font-family: Roboto, sans-serif;
|
|
16
16
|
}
|
|
17
|
+
|
|
18
|
+
.sbdocs-content :is(h1, h2, h3, h4, h5, h6)[id] {
|
|
19
|
+
scroll-margin-top: 8px;
|
|
20
|
+
}
|
|
17
21
|
</style>
|
|
22
|
+
|
|
23
|
+
<script>
|
|
24
|
+
(function docsAnchorScroll() {
|
|
25
|
+
var ANCHOR_PREFIX = "anchor--";
|
|
26
|
+
var OBSERVE_MS = 20000;
|
|
27
|
+
var cancelled = false;
|
|
28
|
+
var observer = null;
|
|
29
|
+
var timeoutId = null;
|
|
30
|
+
var rafId = null;
|
|
31
|
+
|
|
32
|
+
function cleanup() {
|
|
33
|
+
cancelled = true;
|
|
34
|
+
if (observer) {
|
|
35
|
+
observer.disconnect();
|
|
36
|
+
observer = null;
|
|
37
|
+
}
|
|
38
|
+
if (timeoutId !== null) {
|
|
39
|
+
clearTimeout(timeoutId);
|
|
40
|
+
timeoutId = null;
|
|
41
|
+
}
|
|
42
|
+
if (rafId !== null) {
|
|
43
|
+
cancelAnimationFrame(rafId);
|
|
44
|
+
rafId = null;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
function targetIdFromHash() {
|
|
49
|
+
var h = window.location.hash;
|
|
50
|
+
if (!h || h.length < 2) {
|
|
51
|
+
return null;
|
|
52
|
+
}
|
|
53
|
+
var id = decodeURIComponent(h.slice(1));
|
|
54
|
+
if (id.indexOf(ANCHOR_PREFIX) !== 0) {
|
|
55
|
+
return null;
|
|
56
|
+
}
|
|
57
|
+
return id;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
function tryScroll(targetId) {
|
|
61
|
+
var el = document.getElementById(targetId);
|
|
62
|
+
if (!el) {
|
|
63
|
+
return false;
|
|
64
|
+
}
|
|
65
|
+
el.scrollIntoView({ block: "start", inline: "nearest", behavior: "auto" });
|
|
66
|
+
return true;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
function scheduleScrollToHash() {
|
|
70
|
+
cleanup();
|
|
71
|
+
cancelled = false;
|
|
72
|
+
|
|
73
|
+
var targetId = targetIdFromHash();
|
|
74
|
+
if (!targetId) {
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
if (tryScroll(targetId)) {
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
observer = new MutationObserver(function () {
|
|
83
|
+
if (!cancelled && tryScroll(targetId)) {
|
|
84
|
+
cleanup();
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
observer.observe(document.documentElement, { childList: true, subtree: true });
|
|
88
|
+
|
|
89
|
+
timeoutId = window.setTimeout(function () {
|
|
90
|
+
cleanup();
|
|
91
|
+
}, OBSERVE_MS);
|
|
92
|
+
|
|
93
|
+
function poll() {
|
|
94
|
+
if (cancelled) {
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
97
|
+
if (tryScroll(targetId)) {
|
|
98
|
+
cleanup();
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
rafId = window.requestAnimationFrame(poll);
|
|
102
|
+
}
|
|
103
|
+
rafId = window.requestAnimationFrame(poll);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
window.addEventListener("hashchange", scheduleScrollToHash);
|
|
107
|
+
if (document.readyState === "loading") {
|
|
108
|
+
document.addEventListener("DOMContentLoaded", scheduleScrollToHash);
|
|
109
|
+
} else {
|
|
110
|
+
scheduleScrollToHash();
|
|
111
|
+
}
|
|
112
|
+
})();
|
|
113
|
+
</script>
|
|
@@ -14,4 +14,100 @@ affecting rendered component(s) below Canvas and Docs tabs.
|
|
|
14
14
|
body {
|
|
15
15
|
font-family: Roboto, sans-serif;
|
|
16
16
|
}
|
|
17
|
+
|
|
18
|
+
.sbdocs-content :is(h1, h2, h3, h4, h5, h6)[id] {
|
|
19
|
+
scroll-margin-top: 8px;
|
|
20
|
+
}
|
|
17
21
|
</style>
|
|
22
|
+
|
|
23
|
+
<script>
|
|
24
|
+
(function docsAnchorScroll() {
|
|
25
|
+
var ANCHOR_PREFIX = "anchor--";
|
|
26
|
+
var OBSERVE_MS = 20000;
|
|
27
|
+
var cancelled = false;
|
|
28
|
+
var observer = null;
|
|
29
|
+
var timeoutId = null;
|
|
30
|
+
var rafId = null;
|
|
31
|
+
|
|
32
|
+
function cleanup() {
|
|
33
|
+
cancelled = true;
|
|
34
|
+
if (observer) {
|
|
35
|
+
observer.disconnect();
|
|
36
|
+
observer = null;
|
|
37
|
+
}
|
|
38
|
+
if (timeoutId !== null) {
|
|
39
|
+
clearTimeout(timeoutId);
|
|
40
|
+
timeoutId = null;
|
|
41
|
+
}
|
|
42
|
+
if (rafId !== null) {
|
|
43
|
+
cancelAnimationFrame(rafId);
|
|
44
|
+
rafId = null;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
function targetIdFromHash() {
|
|
49
|
+
var h = window.location.hash;
|
|
50
|
+
if (!h || h.length < 2) {
|
|
51
|
+
return null;
|
|
52
|
+
}
|
|
53
|
+
var id = decodeURIComponent(h.slice(1));
|
|
54
|
+
if (id.indexOf(ANCHOR_PREFIX) !== 0) {
|
|
55
|
+
return null;
|
|
56
|
+
}
|
|
57
|
+
return id;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
function tryScroll(targetId) {
|
|
61
|
+
var el = document.getElementById(targetId);
|
|
62
|
+
if (!el) {
|
|
63
|
+
return false;
|
|
64
|
+
}
|
|
65
|
+
el.scrollIntoView({ block: "start", inline: "nearest", behavior: "auto" });
|
|
66
|
+
return true;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
function scheduleScrollToHash() {
|
|
70
|
+
cleanup();
|
|
71
|
+
cancelled = false;
|
|
72
|
+
|
|
73
|
+
var targetId = targetIdFromHash();
|
|
74
|
+
if (!targetId) {
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
if (tryScroll(targetId)) {
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
observer = new MutationObserver(function () {
|
|
83
|
+
if (!cancelled && tryScroll(targetId)) {
|
|
84
|
+
cleanup();
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
observer.observe(document.documentElement, { childList: true, subtree: true });
|
|
88
|
+
|
|
89
|
+
timeoutId = window.setTimeout(function () {
|
|
90
|
+
cleanup();
|
|
91
|
+
}, OBSERVE_MS);
|
|
92
|
+
|
|
93
|
+
function poll() {
|
|
94
|
+
if (cancelled) {
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
97
|
+
if (tryScroll(targetId)) {
|
|
98
|
+
cleanup();
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
rafId = window.requestAnimationFrame(poll);
|
|
102
|
+
}
|
|
103
|
+
rafId = window.requestAnimationFrame(poll);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
window.addEventListener("hashchange", scheduleScrollToHash);
|
|
107
|
+
if (document.readyState === "loading") {
|
|
108
|
+
document.addEventListener("DOMContentLoaded", scheduleScrollToHash);
|
|
109
|
+
} else {
|
|
110
|
+
scheduleScrollToHash();
|
|
111
|
+
}
|
|
112
|
+
})();
|
|
113
|
+
</script>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vueless/storybook",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.5-beta.0",
|
|
4
4
|
"description": "Simplifies Storybook configuration for Vueless UI library.",
|
|
5
5
|
"author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
|
|
6
6
|
"homepage": "https://vueless.com",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"@storybook/addon-links": "^10.3.6",
|
|
28
28
|
"@storybook/addon-themes": "^10.3.6",
|
|
29
29
|
"@storybook/vue3-vite": "^10.3.6",
|
|
30
|
-
"@vueless/storybook-dark-mode": "^10.0.
|
|
30
|
+
"@vueless/storybook-dark-mode": "^10.0.8",
|
|
31
31
|
"chokidar": "^5.0.0",
|
|
32
32
|
"esbuild": "^0.28.0",
|
|
33
33
|
"globby": "^16.2.0",
|
package/theme/manager.css
CHANGED
|
@@ -99,6 +99,18 @@ button[data-testid="context-menu"] {
|
|
|
99
99
|
border-radius: var(--rounded-lg) !important;
|
|
100
100
|
}
|
|
101
101
|
|
|
102
|
+
.search-field:has(input:focus) {
|
|
103
|
+
outline: none;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.dark .search-field button:hover {
|
|
107
|
+
color: var(--neutral-400);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.dark [data-testid="sb-preview-toolbar"] button:hover {
|
|
111
|
+
color: var(--neutral-400);
|
|
112
|
+
}
|
|
113
|
+
|
|
102
114
|
.sidebar-item,
|
|
103
115
|
.search-result-item {
|
|
104
116
|
text-transform: capitalize;
|
|
@@ -157,6 +169,10 @@ button[data-testid="context-menu"] {
|
|
|
157
169
|
border-radius: var(--rounded-lg);
|
|
158
170
|
}
|
|
159
171
|
|
|
172
|
+
.dark .sidebar-header button:hover {
|
|
173
|
+
color: var(--neutral-400);
|
|
174
|
+
}
|
|
175
|
+
|
|
160
176
|
.dark #storybook-checklist-widget {
|
|
161
177
|
background: var(--neutral-950);
|
|
162
178
|
}
|
package/theme/preview.css
CHANGED
|
@@ -275,6 +275,25 @@ html.vl-dark #storybook-root {
|
|
|
275
275
|
text-decoration: underline dashed var(--primary-600);
|
|
276
276
|
}
|
|
277
277
|
|
|
278
|
+
.sbdocs .sbdocs-content .sb-anchor > :is(h1, h2, h3, h4) {
|
|
279
|
+
display: flex;
|
|
280
|
+
flex-wrap: wrap;
|
|
281
|
+
align-items: center;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.sbdocs .sbdocs-content .sb-anchor > :is(h1, h2, h3, h4) > a[href^="#"] {
|
|
285
|
+
float: none !important;
|
|
286
|
+
display: inline-flex !important;
|
|
287
|
+
align-items: center !important;
|
|
288
|
+
flex-shrink: 0;
|
|
289
|
+
line-height: 1 !important;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.sbdocs .sbdocs-content .sb-anchor > :is(h1, h2, h3, h4) > a[href^="#"] svg {
|
|
293
|
+
position: static !important;
|
|
294
|
+
top: auto !important;
|
|
295
|
+
}
|
|
296
|
+
|
|
278
297
|
.sb-bar,
|
|
279
298
|
.docs-story {
|
|
280
299
|
background-color: var(--white);
|
|
@@ -316,6 +335,10 @@ html.vl-dark #storybook-root {
|
|
|
316
335
|
color: var(--neutral-400);
|
|
317
336
|
}
|
|
318
337
|
|
|
338
|
+
.vl-dark .docblock-code-toggle + * {
|
|
339
|
+
color: var(--neutral-400) !important;
|
|
340
|
+
}
|
|
341
|
+
|
|
319
342
|
.vl-light .docblock-code-toggle {
|
|
320
343
|
border: 1px solid var(--neutral-300) !important;
|
|
321
344
|
}
|
|
@@ -328,8 +351,8 @@ html.vl-dark #storybook-root {
|
|
|
328
351
|
.docblock-source > div > button,
|
|
329
352
|
.docs-story > div > button,
|
|
330
353
|
.docs-story + div > div > button {
|
|
331
|
-
margin: 0
|
|
332
|
-
border-radius: var(--rounded-
|
|
354
|
+
margin: 0 !important;
|
|
355
|
+
border-radius: var(--rounded-md) !important;
|
|
333
356
|
box-shadow: none !important;
|
|
334
357
|
}
|
|
335
358
|
|