vue-multiple-themes 4.2.0 → 5.0.0

package/dist/vue-multiple-themes.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const vueDemi = require("vue-demi");
 const vue = require("vue");
+const vueDemi = require("vue-demi");
 const STYLE_ID = "vmt-theme-styles";
 function toKebab(str) {
   return str.replace(/([A-Z])/g, (_, c) => `-${c.toLowerCase()}`);
@@ -79,8 +79,11 @@ function applyThemeToDom(name, previousName, options) {
     el.setAttribute(attribute, name);
   }
   if (strategy === "class" || strategy === "both") {
-    if (previousName) {
-      el.classList.remove(`${classPrefix}${previousName}`);
+    const toRemove = Array.from(el.classList).filter(
+      (cls) => cls.startsWith(classPrefix) && cls !== `${classPrefix}${name}`
+    );
+    for (const cls of toRemove) {
+      el.classList.remove(cls);
     }
     el.classList.add(`${classPrefix}${name}`);
   }
@@ -216,155 +219,103 @@ const _sfc_main$1 = vueDemi.defineComponent({
     );
   }
 });
-const _sfc_main = vueDemi.defineComponent({
-  name: "VueMultipleThemes",
-  components: { VmtIcon: _sfc_main$1 },
+const _hoisted_1 = ["aria-label", "title"];
+const _hoisted_2 = { class: "vmt-icon" };
+const _hoisted_3 = {
+  key: 0,
+  class: "vmt-label"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "VueMultipleThemes",
   props: {
-    /** All available theme definitions */
-    themes: {
-      type: Array,
-      default: () => [
-        {
-          name: "light",
-          label: "Light",
-          icon: "sun",
-          colors: {
-            primary: "#3b82f6",
-            secondary: "#8b5cf6",
-            accent: "#f59e0b",
-            background: "#ffffff",
-            surface: "#f8fafc",
-            surfaceElevated: "#f1f5f9",
-            text: "#111827",
-            textMuted: "#6b7280",
-            textInverse: "#ffffff",
-            border: "#e5e7eb",
-            ring: "#3b82f6",
-            success: "#10b981",
-            warning: "#f59e0b",
-            error: "#ef4444",
-            info: "#3b82f6"
-          }
-        },
-        {
-          name: "dark",
-          label: "Dark",
-          icon: "moon",
-          colors: {
-            primary: "#60a5fa",
-            secondary: "#a78bfa",
-            accent: "#fbbf24",
-            background: "#0f172a",
-            surface: "#1e293b",
-            surfaceElevated: "#334155",
-            text: "#f8fafc",
-            textMuted: "#94a3b8",
-            textInverse: "#0f172a",
-            border: "#334155",
-            ring: "#60a5fa",
-            success: "#34d399",
-            warning: "#fbbf24",
-            error: "#f87171",
-            info: "#60a5fa"
-          }
-        },
-        {
-          name: "sepia",
-          label: "Sepia",
-          icon: "coffee",
-          colors: {
-            primary: "#92400e",
-            secondary: "#78350f",
-            accent: "#d97706",
-            background: "#fdf6e3",
-            surface: "#f5e9c9",
-            surfaceElevated: "#ede0b5",
-            text: "#3c2415",
-            textMuted: "#78583d",
-            textInverse: "#fdf6e3",
-            border: "#d6b896",
-            ring: "#92400e",
-            success: "#166534",
-            warning: "#92400e",
-            error: "#991b1b",
-            info: "#1e40af"
-          }
+    themes: { default: () => [
+      {
+        name: "light",
+        label: "Light",
+        icon: "sun",
+        colors: {
+          primary: "#3b82f6",
+          secondary: "#8b5cf6",
+          accent: "#f59e0b",
+          background: "#ffffff",
+          surface: "#f8fafc",
+          surfaceElevated: "#f1f5f9",
+          text: "#111827",
+          textMuted: "#6b7280",
+          textInverse: "#ffffff",
+          border: "#e5e7eb",
+          ring: "#3b82f6",
+          success: "#10b981",
+          warning: "#f59e0b",
+          error: "#ef4444",
+          info: "#3b82f6"
         }
-      ]
-    },
-    /** Active theme on first render (default: first in `themes`) */
-    defaultTheme: {
-      type: String,
-      default: void 0
-    },
-    /** How to stamp the theme on the DOM */
-    strategy: {
-      type: String,
-      default: "attribute"
-    },
-    /** Attribute name (default: `data-theme`) */
-    attribute: {
-      type: String,
-      default: "data-theme"
-    },
-    /** Class prefix (default: `theme-`) */
-    classPrefix: {
-      type: String,
-      default: "theme-"
-    },
-    /** DOM element that receives the attribute / class */
-    target: {
-      type: String,
-      default: "html"
-    },
-    /** CSS variable prefix (default: `--vmt-`) */
-    cssVarPrefix: {
-      type: String,
-      default: "--vmt-"
-    },
-    /** Inject CSS variables automatically */
-    injectCssVars: {
-      type: Boolean,
-      default: true
-    },
-    /** Persist theme in storage */
-    storage: {
-      type: String,
-      default: "localStorage"
-    },
-    /** Storage key for persistence */
-    storageKey: {
-      type: String,
-      default: "vmt-theme"
-    },
-    /** Respect OS dark/light preference on first load */
-    respectSystemPreference: {
-      type: Boolean,
-      default: false
-    },
-    /** Show the built-in toggle button */
-    showToggle: {
-      type: Boolean,
-      default: true
-    },
-    /** Show the label next to the icon */
-    showLabel: {
-      type: Boolean,
-      default: false
-    },
-    /** Size (px) of the toggle icon */
-    iconSize: {
-      type: Number,
-      default: 20
-    },
-    /** Extra CSS classes on the root wrapper */
-    extraClass: {
-      type: String,
-      default: ""
-    }
+      },
+      {
+        name: "dark",
+        label: "Dark",
+        icon: "moon",
+        colors: {
+          primary: "#60a5fa",
+          secondary: "#a78bfa",
+          accent: "#fbbf24",
+          background: "#0f172a",
+          surface: "#1e293b",
+          surfaceElevated: "#334155",
+          text: "#f8fafc",
+          textMuted: "#94a3b8",
+          textInverse: "#0f172a",
+          border: "#334155",
+          ring: "#60a5fa",
+          success: "#34d399",
+          warning: "#fbbf24",
+          error: "#f87171",
+          info: "#60a5fa"
+        }
+      },
+      {
+        name: "sepia",
+        label: "Sepia",
+        icon: "coffee",
+        colors: {
+          primary: "#92400e",
+          secondary: "#78350f",
+          accent: "#d97706",
+          background: "#fdf6e3",
+          surface: "#f5e9c9",
+          surfaceElevated: "#ede0b5",
+          text: "#3c2415",
+          textMuted: "#78583d",
+          textInverse: "#fdf6e3",
+          border: "#d6b896",
+          ring: "#92400e",
+          success: "#166534",
+          warning: "#92400e",
+          error: "#991b1b",
+          info: "#1e40af"
+        }
+      }
+    ] },
+    defaultTheme: {},
+    strategy: { default: "attribute" },
+    attribute: { default: "data-theme" },
+    classPrefix: { default: "theme-" },
+    target: { default: "html" },
+    cssVarPrefix: { default: "--vmt-" },
+    injectCssVars: { type: Boolean, default: true },
+    storage: { default: "localStorage" },
+    storageKey: { default: "vmt-theme" },
+    respectSystemPreference: { type: Boolean, default: false },
+    showToggle: { type: Boolean, default: true },
+    showLabel: { type: Boolean, default: false },
+    iconSize: { default: 20 },
+    extraClass: { default: "" }
   },
   emits: ["change"],
-  setup(props, { emit }) {
+  setup(__props, { emit: __emit }) {
+    const _componentCounts = /* @__PURE__ */ new Map();
+    const props = __props;
+    const emit = __emit;
     function getInitial() {
       var _a;
       if (props.storage !== "none") {
@@ -387,17 +338,17 @@ const _sfc_main = vueDemi.defineComponent({
       }
       return ((_a = props.themes[0]) == null ? void 0 : _a.name) ?? "light";
     }
-    const currentName = vueDemi.ref(getInitial());
+    const currentName = vue.ref(getInitial());
     let previousName = null;
-    const currentTheme = vueDemi.computed(
+    const currentTheme = vue.computed(
       () => props.themes.find(
         (t) => t.name === currentName.value
       ) ?? props.themes[0]
     );
-    const isDark = vueDemi.computed(
+    const isDark = vue.computed(
       () => currentName.value.toLowerCase().includes("dark")
     );
-    const currentIconName = vueDemi.computed(
+    const currentIconName = vue.computed(
       () => currentTheme.value.icon ?? "palette"
     );
     function applyTheme(name) {
@@ -438,12 +389,16 @@ const _sfc_main = vueDemi.defineComponent({
     }
     function toggleTheme() {
       if (props.themes.length < 2) return;
-      const next = props.themes.find(
-        (t) => t.name !== currentName.value
-      );
-      if (next) currentName.value = next.name;
+      if (props.themes.length === 2) {
+        const other = props.themes.find(
+          (t) => t.name !== currentName.value
+        );
+        if (other) currentName.value = other.name;
+      } else {
+        nextTheme();
+      }
     }
-    vueDemi.onMounted(() => {
+    function ensureStylesAndApply() {
       if (props.injectCssVars) {
         const css = buildCssVars(props.themes, {
           strategy: props.strategy,
@@ -455,82 +410,74 @@ const _sfc_main = vueDemi.defineComponent({
         injectStyles(css);
       }
       applyTheme(currentName.value);
+    }
+    let appliedInSetup = false;
+    if (typeof document !== "undefined") {
+      ensureStylesAndApply();
+      appliedInSetup = true;
+    }
+    vue.onMounted(() => {
+      if (!appliedInSetup) {
+        ensureStylesAndApply();
+      }
     });
-    vueDemi.watch(currentName, (name) => {
+    vue.watch(currentName, (name) => {
       applyTheme(name);
     });
-    vueDemi.onBeforeUnmount(() => {
-      removeStyles();
+    const _key = props.storageKey;
+    _componentCounts.set(_key, (_componentCounts.get(_key) ?? 0) + 1);
+    vue.onBeforeUnmount(() => {
+      const count = (_componentCounts.get(_key) ?? 1) - 1;
+      _componentCounts.set(_key, count);
+      if (count <= 0) {
+        _componentCounts.delete(_key);
+        removeStyles();
+      }
     });
-    return {
-      currentName,
-      currentTheme,
-      isDark,
-      currentIconName,
-      setTheme,
-      nextTheme,
-      prevTheme,
-      toggleTheme
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(["vmt-root", [__props.extraClass, isDark.value ? "vmt-dark" : "vmt-light"]])
+      }, [
+        vue.renderSlot(_ctx.$slots, "default", {
+          current: currentTheme.value,
+          themes: __props.themes,
+          setTheme,
+          nextTheme,
+          prevTheme,
+          toggleTheme,
+          isDark: isDark.value
+        }, () => [
+          __props.showToggle ? (vue.openBlock(), vue.createElementBlock("button", {
+            key: 0,
+            class: "vmt-toggle",
+            "aria-label": "Current theme: " + currentTheme.value.label + ". Click to switch theme.",
+            title: currentTheme.value.label,
+            onClick: nextTheme
+          }, [
+            vue.createElementVNode("span", _hoisted_2, [
+              vue.renderSlot(_ctx.$slots, "icon", {
+                icon: currentIconName.value,
+                size: __props.iconSize,
+                theme: currentTheme.value
+              }, () => [
+                vue.createVNode(_sfc_main$1, {
+                  name: currentIconName.value,
+                  size: __props.iconSize
+                }, null, 8, ["name", "size"])
+              ])
+            ]),
+            __props.showLabel ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, vue.toDisplayString(currentTheme.value.label), 1)) : vue.createCommentVNode("", true)
+          ], 8, _hoisted_1)) : vue.createCommentVNode("", true)
+        ]),
+        vue.renderSlot(_ctx.$slots, "picker", {
+          current: currentTheme.value,
+          themes: __props.themes,
+          setTheme
+        })
+      ], 2);
     };
   }
 });
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const _hoisted_1 = ["aria-label", "title"];
-const _hoisted_2 = { class: "vmt-icon" };
-const _hoisted_3 = {
-  key: 0,
-  class: "vmt-label"
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_VmtIcon = vue.resolveComponent("VmtIcon");
-  return vue.openBlock(), vue.createElementBlock("div", {
-    class: vue.normalizeClass(["vmt-root", [_ctx.extraClass, _ctx.isDark ? "vmt-dark" : "vmt-light"]])
-  }, [
-    vue.renderSlot(_ctx.$slots, "default", {
-      current: _ctx.currentTheme,
-      themes: _ctx.themes,
-      setTheme: _ctx.setTheme,
-      nextTheme: _ctx.nextTheme,
-      prevTheme: _ctx.prevTheme,
-      toggleTheme: _ctx.toggleTheme,
-      isDark: _ctx.isDark
-    }, () => [
-      _ctx.showToggle ? (vue.openBlock(), vue.createElementBlock("button", {
-        key: 0,
-        class: "vmt-toggle",
-        "aria-label": "Current theme: " + _ctx.currentTheme.label + ". Click to switch theme.",
-        title: _ctx.currentTheme.label,
-        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.nextTheme && _ctx.nextTheme(...args))
-      }, [
-        vue.createElementVNode("span", _hoisted_2, [
-          vue.renderSlot(_ctx.$slots, "icon", {
-            icon: _ctx.currentIconName,
-            size: _ctx.iconSize,
-            theme: _ctx.currentTheme
-          }, () => [
-            vue.createVNode(_component_VmtIcon, {
-              name: _ctx.currentIconName,
-              size: _ctx.iconSize
-            }, null, 8, ["name", "size"])
-          ])
-        ]),
-        _ctx.showLabel ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, vue.toDisplayString(_ctx.currentTheme.label), 1)) : vue.createCommentVNode("", true)
-      ], 8, _hoisted_1)) : vue.createCommentVNode("", true)
-    ]),
-    vue.renderSlot(_ctx.$slots, "picker", {
-      current: _ctx.currentTheme,
-      themes: _ctx.themes,
-      setTheme: _ctx.setTheme
-    })
-  ], 2);
-}
-const VueMultipleThemes = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 const VueMultipleThemesPlugin = {
   install(app, options = { themes: [] }) {
     var _a, _b;
@@ -552,32 +499,32 @@ const VueMultipleThemesPlugin = {
       return;
     }
     let initialTheme = ((_a = themes[0]) == null ? void 0 : _a.name) ?? "light";
+    let fromStorage = false;
     if (storage !== "none") {
       const stored = readStorage(storageKey, storage);
       if (stored && themes.some((t) => t.name === stored)) {
         initialTheme = stored;
+        fromStorage = true;
       }
     }
-    if (respectSystemPreference && initialTheme === ((_b = themes[0]) == null ? void 0 : _b.name)) {
+    if (!fromStorage && respectSystemPreference) {
       const pref = getSystemPreference();
       const match = themes.find((t) => t.name === pref);
       if (match) initialTheme = match.name;
     }
-    if (defaultTheme && themes.some((t) => t.name === defaultTheme)) {
-      const stored = storage !== "none" ? readStorage(storageKey, storage) : null;
-      if (!stored) initialTheme = defaultTheme;
+    if (!fromStorage && initialTheme === (((_b = themes[0]) == null ? void 0 : _b.name) ?? "light") && defaultTheme && themes.some((t) => t.name === defaultTheme)) {
+      initialTheme = defaultTheme;
     }
     if (injectCssVars) {
       const css = buildCssVars(themes, { strategy, attribute, classPrefix, cssVarPrefix, target });
       injectStyles(css);
     }
-    applyThemeToDom(initialTheme, null, { strategy, attribute, classPrefix, target });
-    if (vueDemi.isVue2) {
-      app.component("VueMultipleThemes", VueMultipleThemes);
-    } else {
-      app.component("VueMultipleThemes", VueMultipleThemes);
+    if (storage !== "none") {
+      writeStorage(storageKey, initialTheme, storage);
     }
-    if (!vueDemi.isVue2 && typeof app.provide === "function") {
+    applyThemeToDom(initialTheme, null, { strategy, attribute, classPrefix, target });
+    app.component("VueMultipleThemes", _sfc_main);
+    if (typeof app.provide === "function") {
       app.provide("vmt:options", options);
     }
   }
@@ -626,13 +573,13 @@ function useTheme(options) {
   if (existing) {
     currentName = existing.current;
   } else {
-    currentName = vueDemi.ref(getInitialTheme());
+    currentName = vue.ref(getInitialTheme());
     singletons.set(singletonKey, { current: currentName, options });
   }
-  const theme = vueDemi.computed(
+  const theme = vue.computed(
     () => themes.find((t) => t.name === currentName.value) ?? themes[0]
   );
-  const isDark = vueDemi.computed(
+  const isDark = vue.computed(
     () => (currentName.value ?? "").toLowerCase().includes("dark")
   );
   let previousName = null;
@@ -667,21 +614,34 @@ function useTheme(options) {
   }
   function toggleTheme() {
     if (themes.length < 2) return;
-    const current = currentName.value;
-    const next = themes.find((t) => t.name !== current) ?? themes[1];
-    currentName.value = next.name;
+    if (themes.length === 2) {
+      const other = themes.find((t) => t.name !== currentName.value) ?? themes[1];
+      currentName.value = other.name;
+    } else {
+      nextTheme();
+    }
   }
-  vueDemi.onMounted(() => {
+  let appliedInSetup = false;
+  if (typeof document !== "undefined") {
     ensureStyles();
-    if (currentName.value) applyTheme(currentName.value);
+    const initialName = currentName.value;
+    if (initialName) applyTheme(initialName);
+    appliedInSetup = true;
+  }
+  vue.onMounted(() => {
+    if (!appliedInSetup) {
+      ensureStyles();
+      const mountedName = currentName.value;
+      if (mountedName) applyTheme(mountedName);
+    }
   });
-  vueDemi.watch(currentName, (name) => {
+  vue.watch(currentName, (name) => {
     if (name) applyTheme(name);
   });
   let instanceCount = ((_a = singletons.get(singletonKey)) == null ? void 0 : _a._count) ?? 0;
   instanceCount++;
   singletons.get(singletonKey)._count = instanceCount;
-  vueDemi.onBeforeUnmount(() => {
+  vue.onBeforeUnmount(() => {
     const entry = singletons.get(singletonKey);
     if (entry) {
       entry._count = (entry._count ?? 1) - 1;
@@ -1234,7 +1194,7 @@ const PRESET_THEMES = [
 exports.LUCIDE_ICONS = LUCIDE_ICONS;
 exports.PRESET_THEMES = PRESET_THEMES;
 exports.VmtIcon = _sfc_main$1;
-exports.VueMultipleThemes = VueMultipleThemes;
+exports.VueMultipleThemes = _sfc_main;
 exports.VueMultipleThemesPlugin = VueMultipleThemesPlugin;
 exports.analogous = analogous;
 exports.autoContrast = autoContrast;