Merge pull request #5 from vuelessjs/VL-170_Fix-storybook-url-parser_…

…Dmytro-Holdobin

VL-170_Fix-storybook-url-parser_Dmytro-Holdobin

src/.storybook/decorators/vue3SourceDecorator.js

@@ -143,11 +143,57 @@ function getArgsFromUrl() {
 
   if (!args) return {};
 
-  return args.split(";").reduce((acc, pair) => {
-    const [key, value] = pair.split(":");
+  return parseKeyValuePairs(args);
+}
+
+function parseKeyValuePairs(input) {
+  const result = {};
+
+  // Split key-value pairs and parse them
+  input.split(";").forEach((pair) => {
+    const [rawKey, rawValue] = pair.split(":");
+
+    if (!rawKey) return;
+
+    let value;
+
+    if (rawValue === "!null") {
+      value = null;
+    } else if (rawValue === "!undefined") {
+      value = undefined;
+    } else if (!isNaN(parseInt(rawValue))) {
+      value = Number(rawValue);
+    } else {
+      value = decodeURIComponent(rawValue.replace(/\+/g, " "));
+    }
+
+    setNestedValue(result, rawKey, value);
+  });
+
+  return result;
+}
+
+// Set nested values like objects or arrays
+function setNestedValue(obj, path, value) {
+  const arrayItems = path.match(/\w+|\[\d+\]/g) || [];
+  const keys = arrayItems.map((key) => (key.startsWith("[") ? Number(key.slice(1, -1)) : key));
+  const lastKeyIndex = keys.length - 1;
+
+  let current = obj;
 
-    acc[key] = decodeURIComponent(value);
+  for (let index = 0; index < keys.length; index++) {
+    const key = keys[index];
+
+    if (index === lastKeyIndex) {
+      current[key] = value;
+    }
 
-    return acc;
-  }, {});
+    if (index !== lastKeyIndex && !current[key]) {
+      current[key] = typeof keys[index + 1] === "number" ? [] : {};
+    }
+
+    if (index !== lastKeyIndex && current[key]) {
+      current = current[key];
+    }
+  }
 }