@vueless/storybook 1.2.8-beta.0 → 1.2.8-beta.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.
Files changed (5) hide show
  1. package/.storybook-js/manager-head.html +0 -40
  2. package/.storybook-js/manager.js +28 -0
  3. package/.storybook-ts/manager-head.html +7 -37
  4. package/.storybook-ts/manager.ts +28 -0
  5. package/package.json +1 -1
package/.storybook-js/manager-head.html CHANGED
@@ -74,43 +74,3 @@ Custom dark mode related vueless loader.
74
74
  }
75
75
  }
76
76
  </style>
77
-
78
- <script>
79
- /* This trick prevents showing users the default storybook theme. */
80
- (() => {
81
- window.onload = function() {
82
- setTimeout(() => {
83
- document.getElementById("root").style.visibility = 'visible';
84
- document.getElementById("sb-vueless-loader").style.display = 'none';
85
- }, 1500);
86
- };
87
- })();
88
- </script>
89
-
90
- <!-- Change favicon related to the users color mode -->
91
- <script>
92
- (() => {
93
- const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
94
-
95
- prefersDark.addEventListener('change', updateFavicon);
96
- updateFavicon();
97
-
98
- function updateFavicon() {
99
- const icon = prefersDark.matches
100
- ? '/favicons/favicon-dark.svg'
101
- : '/favicons/favicon-light.svg';
102
-
103
- setFavicon(icon);
104
- }
105
-
106
- function setFavicon(path) {
107
- let link = document.querySelector("link[rel='icon']");
108
-
109
- link.rel = 'icon';
110
- link.type = 'image/svg+xml';
111
- link.href = path;
112
-
113
- document.head.appendChild(link);
114
- }
115
- })();
116
- </script>
package/.storybook-js/manager.js CHANGED
@@ -32,3 +32,31 @@ function setSystemTheme(colorMode) {
32
32
  function getSystemColorMode(isDarkMode) {
33
33
  return isDarkMode ? DARK_MODE_KEY : LIGHT_MODE_KEY;
34
34
  }
35
+
36
+ /* Change the Storybook manager favicon when system color mode changed. */
37
+ prefersColorSchemeDark.addEventListener("change", setFavicon);
38
+
39
+ setFavicon();
40
+
41
+ function setFavicon() {
42
+ const link = document.createElement("link");
43
+
44
+ link.rel = "icon";
45
+ link.type = "image/svg+xml";
46
+ link.href = prefersColorSchemeDark.matches
47
+ ? "/favicons/favicon-dark.svg"
48
+ : "/favicons/favicon-light.svg";
49
+
50
+ document.head.appendChild(link);
51
+ }
52
+
53
+ /* This trick prevents showing users the default storybook theme. */
54
+ window.onload = () => {
55
+ setTimeout(() => {
56
+ const rootElement = document.getElementById("root");
57
+ const vuelessLoader = document.getElementById("sb-vueless-loader");
58
+
59
+ if (rootElement) rootElement.style.visibility = "visible";
60
+ if (vuelessLoader) vuelessLoader.style.display = "none";
61
+ }, 1500);
62
+ };
package/.storybook-ts/manager-head.html CHANGED
@@ -4,7 +4,7 @@ Overrides content of storybook layout HTML page.
4
4
  <link rel="shortcut icon" href="./favicons/favicon.ico">
5
5
 
6
6
  <!--
7
- Custom dark mode related vueless loader.
7
+ Custom color mode vueless loader.
8
8
  -->
9
9
  <div id="sb-vueless-loader">
10
10
  <img
@@ -75,42 +75,12 @@ Custom dark mode related vueless loader.
75
75
  }
76
76
  </style>
77
77
 
78
+ <!-- Google tag (gtag.js) -->
79
+ <script async src="https://www.googletagmanager.com/gtag/js?id=G-TSYW2RPPXC"></script>
78
80
  <script>
79
- /* This trick prevents showing users the default storybook theme. */
80
- (() => {
81
- window.onload = function() {
82
- setTimeout(() => {
83
- document.getElementById("root").style.visibility = 'visible';
84
- document.getElementById("sb-vueless-loader").style.display = 'none';
85
- }, 1500);
86
- };
87
- })();
88
- </script>
89
-
90
- <!-- Change favicon related to the users color mode -->
91
- <script>
92
- (() => {
93
- const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
94
-
95
- prefersDark.addEventListener('change', updateFavicon);
96
- updateFavicon();
97
-
98
- function updateFavicon() {
99
- const icon = prefersDark.matches
100
- ? '/favicons/favicon-dark.svg'
101
- : '/favicons/favicon-light.svg';
81
+ window.dataLayer = window.dataLayer || [];
82
+ function gtag(){dataLayer.push(arguments);}
83
+ gtag('js', new Date());
102
84
 
103
- setFavicon(icon);
104
- }
105
-
106
- function setFavicon(path) {
107
- let link = document.querySelector("link[rel='icon']");
108
-
109
- link.rel = 'icon';
110
- link.type = 'image/svg+xml';
111
- link.href = path;
112
-
113
- document.head.appendChild(link);
114
- }
115
- })();
85
+ gtag('config', 'G-TSYW2RPPXC');
116
86
  </script>
package/.storybook-ts/manager.ts CHANGED
@@ -32,3 +32,31 @@ function setSystemTheme(colorMode: string) {
32
32
  function getSystemColorMode(isDarkMode: boolean) {
33
33
  return isDarkMode ? DARK_MODE_KEY : LIGHT_MODE_KEY;
34
34
  }
35
+
36
+ /* Change the Storybook manager favicon when system color mode changed. */
37
+ prefersColorSchemeDark.addEventListener("change", setFavicon);
38
+
39
+ setFavicon();
40
+
41
+ function setFavicon() {
42
+ const link = document.createElement("link");
43
+
44
+ link.rel = "icon";
45
+ link.type = "image/svg+xml";
46
+ link.href = prefersColorSchemeDark.matches
47
+ ? "/favicons/favicon-dark.svg"
48
+ : "/favicons/favicon-light.svg";
49
+
50
+ document.head.appendChild(link);
51
+ }
52
+
53
+ /* This trick prevents showing users the default storybook theme. */
54
+ window.onload = () => {
55
+ setTimeout(() => {
56
+ const rootElement = document.getElementById("root");
57
+ const vuelessLoader = document.getElementById("sb-vueless-loader");
58
+
59
+ if (rootElement) rootElement.style.visibility = "visible";
60
+ if (vuelessLoader) vuelessLoader.style.display = "none";
61
+ }, 1500);
62
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vueless/storybook",
3
- "version": "1.2.8-beta.0",
3
+ "version": "1.2.8-beta.1",
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",