@vueless/storybook 0.0.60 → 0.0.62

package/.storybook/decorators/vue3SourceDecorator.js

@@ -1,12 +1,30 @@
 import { addons, useArgs, makeDecorator } from "@storybook/preview-api";
 import { h, onMounted, watch } from "vue";
 
+const params = new URLSearchParams(window.location.search);
+let previousStoryId = null;
+
+function getArgsFromUrl(storyId) {
+  const isInIframe = params.toString().includes("globals=");
+  const isSameComponent = parseInt(previousStoryId) === parseInt(storyId);
+
+  if (isInIframe || isSameComponent || previousStoryId === null) {
+    return parseKeyValuePairs(params.get("args"));
+  }
+
+  params.delete("args");
+
+  return {};
+}
+
 export const vue3SourceDecorator = makeDecorator({
   name: "vue3SourceDecorator",
   wrapper: (storyFn, context) => {
     const story = storyFn(context);
-    const urlArgs = getArgsFromUrl();
     const [, updateArgs] = useArgs();
+    const urlArgs = getArgsFromUrl(context.id);
+
+    previousStoryId = context.id;
 
     // this returns a new component that computes the source code when mounted
     // and emits an events that is handled by addons-docs
@@ -137,16 +155,8 @@ function kebabCase(str) {
     .join("");
 }
 
-function getArgsFromUrl() {
-  const params = new URLSearchParams(window.location.search);
-  const args = params.get("args");
-
-  if (!args) return {};
-
-  return parseKeyValuePairs(args);
-}
-
 function parseKeyValuePairs(input) {
+  input = input || "";
   const result = {};
 
   // Split key-value pairs and parse them

package/.storybook/index.css

@@ -168,6 +168,11 @@ body {
   @apply bg-white;
 }
 
+.vl-dark .sb-bar,
+.vl-dark .docs-story {
+  @apply bg-gray-900;
+}
+
 .sb-bar {
   @apply border-0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueless/storybook",
-  "version": "0.0.60",
+  "version": "0.0.62",
   "description": "Simplifies Storybook configuration for Vueless UI library.",
   "homepage": "https://vueless.com",
   "author": "Johnny Grid",