@codbex/harmonia 0.7.0 → 0.8.0

package/dist/harmonia.esm.js

@@ -18894,7 +18894,7 @@ var getButtonSize = (size3, inGroup = false) => {
   }
 };
 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");
@@ -18911,7 +18911,7 @@ function button_default(Alpine) {
       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;
     }
@@ -20456,7 +20456,7 @@ var computePosition2 = (reference, floating, options) => {
 // src/components/calendar.js
 var import_lucide2 = __toESM(require_lucide(), 1);
 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");
@@ -20500,7 +20500,7 @@ function calendar_default(Alpine) {
     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()) {
@@ -20517,7 +20517,7 @@ function calendar_default(Alpine) {
       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) {
@@ -24940,7 +24940,7 @@ function tooltip_default(Alpine) {
 }
 
 // package.json
-var version = "0.7.0";
+var version = "0.8.0";
 
 // src/utils/breakpoint-listener.js
 function getBreakpointListener(handler2, breakpoint = 768) {
@@ -24962,11 +24962,19 @@ function getBreakpointListener(handler2, breakpoint = 768) {
 // 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 = () => {
@@ -24986,15 +24994,19 @@ var setColorScheme = (mode) => {
     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);
@@ -25008,6 +25020,17 @@ var getColorScheme = () => {
   }
   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/focus.js
@@ -25022,6 +25045,26 @@ function focus_default(Alpine) {
   });
 }
 
+// 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/module.js
 var registerComponents = (registerPlugin) => {
   registerPlugin(accordion_default);
@@ -25059,6 +25102,7 @@ var registerComponents = (registerPlugin) => {
   registerPlugin(table_default);
   registerPlugin(tabs_default);
   registerPlugin(tag_default);
+  registerPlugin(template_default);
   registerPlugin(text_default);
   registerPlugin(textarea_default);
   registerPlugin(tile_default);
@@ -25103,16 +25147,19 @@ export {
   table_default as Table,
   tabs_default as Tabs,
   tag_default as Tag,
+  template_default as Template,
   text_default as Text,
   textarea_default as Textarea,
   tile_default as Tile,
   timepicker_default as TimePicker,
   toolbar_default as Toolbar,
   tooltip_default as Tooltip,
+  addColorSchemeListener,
   module_default as default,
   getBreakpointListener,
   getColorScheme,
   registerComponents,
+  removeColorSchemeListener,
   setColorScheme,
   version
 };