@codbex/harmonia 0.6.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) {
@@ -7106,6 +7106,128 @@
     });
   }
 
+  // src/components/split.js
+  function split_default(Alpine) {
+    Alpine.directive("h-split", (el) => {
+      el.classList.add("group/split", "flex", "data-[orientation=horizontal]:flex-row", "data-[orientation=vertical]:flex-col");
+      el.setAttribute("tabindex", "-1");
+      el.setAttribute("data-slot", "split");
+    });
+    Alpine.directive("h-split-panel", (el) => {
+      el.setAttribute("tabindex", "-1");
+      el.setAttribute("data-slot", "split-panel");
+    });
+    Alpine.directive("h-split-gutter", (el, {}, { cleanup }) => {
+      el.classList.add(
+        "relative",
+        "shrink-0",
+        "touch-none",
+        "bg-border",
+        "outline-none",
+        "hover:bg-primary-hover",
+        "active:bg-primary-active",
+        "before:absolute",
+        "before:top-1/2",
+        "before:left-1/2",
+        "before:-translate-x-1/2",
+        "before:-translate-y-1/2",
+        "before:block",
+        "before:bg-transparent",
+        "hover:before:bg-primary-hover",
+        "group-data-[locked=true]/split:pointer-events-none",
+        "group-data-[orientation=horizontal]/split:cursor-col-resize",
+        "group-data-[orientation=vertical]/split:cursor-row-resize"
+      );
+      const borderClasses = [
+        "bg-border",
+        "outline-none",
+        "hover:bg-primary-hover",
+        "active:bg-primary-active",
+        "before:absolute",
+        "before:top-1/2",
+        "before:left-1/2",
+        "before:-translate-x-1/2",
+        "before:-translate-y-1/2",
+        "before:block",
+        "before:bg-transparent",
+        "hover:before:bg-primary-hover",
+        "group-data-[orientation=horizontal]/split:!w-px",
+        "group-data-[orientation=horizontal]/split:before:h-full",
+        "group-data-[orientation=horizontal]/split:before:w-[0.313rem]",
+        "group-data-[orientation=vertical]/split:!h-px",
+        "group-data-[orientation=vertical]/split:before:w-full",
+        "group-data-[orientation=vertical]/split:before:h-[0.313rem]"
+      ];
+      const handleClasses = [
+        "bg-transparent",
+        "outline-none",
+        "after:absolute",
+        "after:block",
+        "after:rounded-sm",
+        "after:bg-background",
+        "after:border-split-handle",
+        "after:border-2",
+        "after:shadow-xs",
+        "after:top-1/2",
+        "after:left-1/2",
+        "after:-translate-x-1/2",
+        "after:-translate-y-1/2",
+        "hover:after:border-primary-hover",
+        "active:after:border-primary-active",
+        "before:absolute",
+        "before:block",
+        "before:top-1/2",
+        "before:left-1/2",
+        "before:-translate-x-1/2",
+        "before:-translate-y-1/2",
+        "before:rounded-sm",
+        "before:from-transparent",
+        "before:from-15%",
+        "before:via-split-handle",
+        "before:to-85%",
+        "before:to-transparent",
+        "hover:before:bg-primary-hover",
+        "hover:before:via-transparent",
+        "active:before:bg-primary-active",
+        "active:before:via-transparent",
+        // Orientation classes
+        "group-data-[orientation=horizontal]/split:before:h-full",
+        "group-data-[orientation=horizontal]/split:before:w-0.5",
+        "group-data-[orientation=horizontal]/split:before:bg-gradient-to-b",
+        "group-data-[orientation=vertical]/split:before:h-0.5",
+        "group-data-[orientation=vertical]/split:before:w-full",
+        "group-data-[orientation=vertical]/split:before:bg-gradient-to-r",
+        // Size classes
+        "group-data-[orientation=horizontal]/split:!w-4",
+        "group-data-[orientation=horizontal]/split:after:w-2.5",
+        "group-data-[orientation=horizontal]/split:after:h-5",
+        "group-data-[orientation=vertical]/split:!h-4",
+        "group-data-[orientation=vertical]/split:after:w-5",
+        "group-data-[orientation=vertical]/split:after:h-2.5"
+      ];
+      el.setAttribute("data-slot", "split-gutter");
+      el.setAttribute("tabindex", "-1");
+      el.setAttribute("role", "separator");
+      function setVariant(variant = "handle") {
+        if (variant === "border") {
+          el.classList.remove(...handleClasses);
+          el.classList.add(...borderClasses);
+        } else {
+          el.classList.remove(...borderClasses);
+          el.classList.add(...handleClasses);
+        }
+      }
+      const observer = new MutationObserver(() => {
+        setVariant(el.parentElement.getAttribute("data-variant"));
+      });
+      observer.observe(el.parentElement, { attributes: true, attributeFilter: ["data-variant"] });
+      setVariant(el.parentElement.getAttribute("data-variant"));
+      cleanup(() => {
+        observer.disconnect();
+      });
+    });
+  }
+
   // src/components/switch.js
   function switch_default(Alpine) {
     Alpine.directive("h-switch", (el) => {
@@ -8387,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 = () => {
@@ -8411,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);
@@ -8433,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
@@ -8452,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 }) => {
@@ -8465,10 +8630,10 @@
   }
 
   // package.json
-  var version = "0.6.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);
@@ -8499,6 +8664,7 @@
     window.Alpine.plugin(sidebar_default);
     window.Alpine.plugin(skeleton_default);
     window.Alpine.plugin(spinner_default);
+    window.Alpine.plugin(split_default);
     window.Alpine.plugin(switch_default);
     window.Alpine.plugin(table_default);
     window.Alpine.plugin(tabs_default);
@@ -8510,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: