@codbex/harmonia 0.7.0 → 0.8.0

package/dist/harmonia.js

@@ -606,7 +606,7 @@
     }
   };
   function button_default(Alpine) {
-    Alpine.directive("h-button", (el, { modifiers }, { cleanup }) => {
+    Alpine.directive("h-button", (el, { original, modifiers }, { cleanup }) => {
       setButtonClasses(el);
       if (!el.hasAttribute("data-slot")) {
         el.setAttribute("data-slot", "button");
@@ -623,7 +623,7 @@
         el.classList.remove(...getButtonSize(lastSize, inGroup));
         el.classList.add(...getButtonSize(size3, inGroup));
         if (size3.startsWith("icon") && !el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
-          console.error('h-button: Icon-only buttons must have an "aria-label" or "aria-labelledby" attribute', el);
+          console.error(`${original}: Icon-only buttons must have an "aria-label" or "aria-labelledby" attribute`, el);
         }
         lastSize = size3;
       }
@@ -2167,7 +2167,7 @@
 
   // src/components/calendar.js
   function calendar_default(Alpine) {
-    Alpine.directive("h-calendar", (el, { expression }, { effect, evaluateLater, cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-calendar", (el, { original, expression }, { effect, evaluateLater, cleanup, Alpine: Alpine2 }) => {
       const datepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_datepicker"));
       el.classList.add("border", "rounded-control", "gap-2", "p-2");
       el.setAttribute("tabindex", "-1");
@@ -2211,7 +2211,7 @@
       const onInputChange = () => {
         const newValue = new Date(datepicker._h_datepicker.input.value);
         if (isNaN(newValue)) {
-          console.error(`h-calendar: input value is not a valid date - ${datepicker._h_datepicker.input.value}`);
+          console.error(`${original}: input value is not a valid date - ${datepicker._h_datepicker.input.value}`);
           datepicker._h_datepicker.input.setCustomValidity("Input value is not a valid date.");
           return;
         } else if (selected.getTime() !== newValue.getTime()) {
@@ -2228,7 +2228,7 @@
         if (el.hasOwnProperty("_x_model") && el._x_model.get()) {
           selected = new Date(el._x_model.get());
           if (isNaN(selected)) {
-            console.error(`h-calendar: input value is not a valid date - ${el._x_model.get()}`);
+            console.error(`${original}: input value is not a valid date - ${el._x_model.get()}`);
             if (datepicker) datepicker._h_datepicker.input.setCustomValidity("Input value is not a valid date.");
             else el.setAttribute("data-invalid", "true");
           } else if (datepicker) {
@@ -8509,11 +8509,19 @@
   // src/utils/theme.js
   var colorSchemeKey = "codbex.harmonia.colorMode";
   var savedScheme = localStorage.getItem(colorSchemeKey);
+  var callbacks = [];
+  var onColorSchemeChange = (scheme) => {
+    for (let i = 0; i < callbacks.length; i++) {
+      callbacks[i](scheme);
+    }
+  };
   var colorSchemeChange = (event) => {
     if (event.matches) {
       document.documentElement.classList.add("dark");
+      onColorSchemeChange("dark");
     } else {
       document.documentElement.classList.remove("dark");
+      onColorSchemeChange("light");
     }
   };
   var initColorScheme = () => {
@@ -8533,15 +8541,19 @@
       document.documentElement.classList.add("dark");
       localStorage.setItem(colorSchemeKey, "dark");
       window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", colorSchemeChange);
+      onColorSchemeChange("dark");
     } else if (mode === "light") {
       document.documentElement.classList.remove("dark");
       localStorage.setItem(colorSchemeKey, "light");
       window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", colorSchemeChange);
+      onColorSchemeChange("light");
     } else {
       if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
         document.documentElement.classList.add("dark");
+        onColorSchemeChange("dark");
       } else {
         document.documentElement.classList.remove("dark");
+        onColorSchemeChange("light");
       }
       localStorage.setItem(colorSchemeKey, "auto");
       window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", colorSchemeChange);
@@ -8555,6 +8567,17 @@
     }
     return "light";
   };
+  var addColorSchemeListener = (callback) => {
+    callbacks.push(callback);
+  };
+  var removeColorSchemeListener = (callback) => {
+    for (let i = 0; i < callbacks.length; i++) {
+      if (callbacks[i] === callback) {
+        callbacks.splice(i, 1);
+        return;
+      }
+    }
+  };
   initColorScheme();
 
   // src/utils/breakpoint-listener.js
@@ -8574,6 +8597,26 @@
     };
   }
 
+  // src/utils/template.js
+  function template_default(Alpine) {
+    Alpine.directive("h-template", (el, { original, expression }, { evaluate: evaluate2, Alpine: Alpine2, cleanup }) => {
+      if (el.hasAttribute(Alpine2.prefixed("data"))) {
+        const template = evaluate2(expression);
+        const clone = template.content.cloneNode(true).firstElementChild;
+        Alpine2.addScopeToNode(clone, Alpine2.closestDataStack(el)[0], el.parentElement);
+        Alpine2.mutateDom(() => {
+          el.before(clone);
+          Alpine2.initTree(clone);
+        });
+        cleanup(() => {
+          clone.remove();
+        });
+      } else {
+        console.error(`${original}: ${Alpine2.prefixed("data")} directive is missing`);
+      }
+    });
+  }
+
   // src/utils/focus.js
   function focus_default(Alpine) {
     Alpine.directive("h-focus", (el, { expression }, { effect, evaluateLater }) => {
@@ -8587,10 +8630,10 @@
   }
 
   // package.json
-  var version = "0.7.0";
+  var version = "0.8.0";
 
   // src/index.js
-  window.Harmonia = { getBreakpointListener, getColorScheme, setColorScheme, version };
+  window.Harmonia = { getBreakpointListener, addColorSchemeListener, getColorScheme, removeColorSchemeListener, setColorScheme, version };
   document.addEventListener("alpine:init", () => {
     window.Alpine.plugin(accordion_default);
     window.Alpine.plugin(alert_default);
@@ -8633,6 +8676,7 @@
     window.Alpine.plugin(toolbar_default);
     window.Alpine.plugin(tooltip_default);
     window.Alpine.plugin(focus_default);
+    window.Alpine.plugin(template_default);
   });
 })();
 /*! Bundled license information: