vrembem 4.0.0-next.15 → 4.0.0-next.16

package/dev/index.umd.cjs

@@ -195,7 +195,12 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   function getPrefix() {
     return getComputedStyle(document.body).getPropertyValue("--vb-prefix").trim();
   }
-  function cssVar(property, el = document.body) {
+  function cssVar(property, options) {
+    const settings = {
+      fallback: null,
+      element: document.body,
+      ...options
+    };
     if (property.slice(0, 2) !== "--") {
       const prefixValue = getPrefix();
       if (prefixValue) {
@@ -203,11 +208,15 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       }
       property = `--${property}`;
     }
-    const cssValue = getComputedStyle(el).getPropertyValue(property).trim();
+    const cssValue = getComputedStyle(settings.element).getPropertyValue(property).trim();
     if (cssValue) {
       return cssValue;
     } else {
-      throw new Error(`CSS variable "${property}" was not found!`);
+      if (settings.fallback) {
+        return settings.fallback;
+      } else {
+        throw new Error(`CSS variable "${property}" was not found!`);
+      }
     }
   }
   function getConfig$1(el, dataConfig) {
@@ -251,10 +260,77 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     }
     return returnRef;
   }
+  function themeStore(options) {
+    const settings = {
+      prefix: cssVar("prefix-themes", { fallback: "vb-theme-" }),
+      themes: ["root", "light", "dark"],
+      storeKey: "VB:Profile"
+    };
+    for (const [key] of Object.entries(settings)) {
+      if (options && options[key]) {
+        settings[key] = options[key];
+      }
+    }
+    const callbacks = {
+      onInit() {
+      },
+      onChange() {
+      }
+    };
+    for (const [key] of Object.entries(callbacks)) {
+      if (options && options[key]) {
+        callbacks[key] = options[key];
+      }
+    }
+    const profile = localStore(settings.storeKey);
+    const api = {
+      // Store our settings in the API.
+      settings,
+      // Actions.
+      add(value) {
+        settings.themes.push(value);
+      },
+      remove(value) {
+        const index2 = settings.themes.indexOf(value);
+        ~index2 && settings.themes.splice(index2, 1);
+      },
+      callback(name) {
+        callbacks[name].call(this);
+      },
+      // Getters.
+      get class() {
+        return `${settings.prefix}${this.theme}`;
+      },
+      get classes() {
+        return settings.themes.map((theme) => `${settings.prefix}${theme}`);
+      },
+      get themes() {
+        return settings.themes;
+      },
+      // Setup the theme get and set methods.
+      get theme() {
+        return profile.get("theme") || "root";
+      },
+      set theme(value) {
+        if (settings.themes.includes(value)) {
+          if (this.theme != value) {
+            profile.set("theme", value);
+            document.documentElement.classList.remove(...this.classes);
+            document.documentElement.classList.add(`${settings.prefix}${value}`);
+            this.callback("onChange");
+          }
+        } else {
+          console.error(`Not a valid theme value: "${value}"`);
+        }
+      }
+    };
+    api.callback("onInit");
+    return api;
+  }
   function transition(el, from, to, duration = "transition-duration") {
     return new Promise((resolve) => {
       if (typeof duration === "string") {
-        const cssValue = cssVar(duration, el);
+        const cssValue = cssVar(duration, { element: el });
         const ms = cssValue.includes("ms") ? true : false;
         duration = parseFloat(cssValue) * (ms ? 1 : 1e3);
       }
@@ -307,6 +383,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     getPrefix,
     localStore,
     teleport,
+    themeStore,
     transition,
     updateGlobalState
   }, Symbol.toStringTag, { value: "Module" }));