blue-web 1.17.3 → 1.17.4

package/dist/js/actions.bundle.js

@@ -1 +1 @@
-(()=>{"use strict";window.blueWeb=window.blueWeb||{},window.blueWeb.actions={init:function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0;function s(){for(const e of t.children)e.style.display="none";for(const e of i.children)e.style.display="",e.classList.add("BLUE-actions-collapse-visible");let s=0;for(const n of t.children){if(n.style.display="",i.children[s].style.display="none",i.children[s].classList.remove("BLUE-actions-collapse-visible"),e.scrollWidth>e.clientWidth){n.style.display="none",i.children[s].style.display="",i.children[s].classList.add("BLUE-actions-collapse-visible");break}s++}}t||(t=e.querySelector(".BLUE-actions-menu")),i||(i=e.querySelector(".BLUE-actions-collapse-menu")),s();const n=()=>{requestAnimationFrame(s)},o=new ResizeObserver(n);o.observe(e);const l=new MutationObserver(n);l.observe(e,{attributes:!1,childList:!0,subtree:!0});const c=t=>{if(!e)return;const i=e.querySelectorAll("details[open]");!i||i.length<=0||i.forEach((e=>{e.contains(t.target)||e.removeAttribute("open")}))};return document.addEventListener("click",c),{updateActions:s,resizeObserver:o,mutationObserver:l,destroy(){o.disconnect(),l.disconnect(),document.removeEventListener("click",c)}}}}})();
+(()=>{"use strict";window.blueWeb=window.blueWeb||{},window.blueWeb.actions={init:function(e){let s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0;const t=e.parentElement||e;function n(){for(const e of s.children)e.style.display="none";for(const e of i.children)e.style.display="",e.classList.add("BLUE-actions-collapse-visible");let e=0;for(const n of s.children){if(n.style.display="",i.children[e].style.display="none",i.children[e].classList.remove("BLUE-actions-collapse-visible"),t.scrollWidth>t.clientWidth){n.style.display="none",i.children[e].style.display="",i.children[e].classList.add("BLUE-actions-collapse-visible");break}e++}}s||(s=e.querySelector(".BLUE-actions-menu")),i||(i=e.querySelector(".BLUE-actions-collapse-menu")),n();const l=()=>{requestAnimationFrame(n)},o=new ResizeObserver(l);o.observe(t);const c=new MutationObserver(l);return c.observe(t,{attributes:!1,childList:!0,subtree:!0}),{updateActions:n,resizeObserver:o,mutationObserver:c,destroy(){o.disconnect(),c.disconnect()}}}}})();

package/dist/js/actions.js

@@ -1,6 +1,7 @@
 export function init(actionsElement) {
   let menu = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
   let collapseMenu = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+  const targetElement = actionsElement.parentElement || actionsElement;
   if (!menu) menu = actionsElement.querySelector(".BLUE-actions-menu");
   if (!collapseMenu) collapseMenu = actionsElement.querySelector(".BLUE-actions-collapse-menu");
   function updateActions() {
@@ -20,7 +21,7 @@ export function init(actionsElement) {
       item.style.display = "";
       collapseMenu.children[i].style.display = "none";
       collapseMenu.children[i].classList.remove("BLUE-actions-collapse-visible");
-      if (actionsElement.scrollWidth > actionsElement.clientWidth) {
+      if (targetElement.scrollWidth > targetElement.clientWidth) {
         ;
         item.style.display = "none";
         collapseMenu.children[i].style.display = "";
@@ -35,24 +36,13 @@ export function init(actionsElement) {
     requestAnimationFrame(updateActions);
   };
   const resizeObserver = new ResizeObserver(callback);
-  resizeObserver.observe(actionsElement);
+  resizeObserver.observe(targetElement);
   const mutationObserver = new MutationObserver(callback);
-  mutationObserver.observe(actionsElement, {
+  mutationObserver.observe(targetElement, {
     attributes: false,
     childList: true,
     subtree: true
   });
-  const outsideClickHandler = event => {
-    if (!actionsElement) return;
-    const openDetails = actionsElement.querySelectorAll("details[open]");
-    if (!openDetails || openDetails.length <= 0) return;
-    openDetails.forEach(details => {
-      if (!details.contains(event.target)) {
-        details.removeAttribute("open");
-      }
-    });
-  };
-  document.addEventListener("click", outsideClickHandler);
   return {
     updateActions,
     resizeObserver,
@@ -60,7 +50,6 @@ export function init(actionsElement) {
     destroy() {
       resizeObserver.disconnect();
       mutationObserver.disconnect();
-      document.removeEventListener("click", outsideClickHandler);
     }
   };
 }

package/dist/merged.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue Web v1.17.3 (https://bruegmann.github.io/blue-web)
+ * Blue Web v1.17.4 (https://bruegmann.github.io/blue-web)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
 */
 
@@ -12063,11 +12063,34 @@ dialog.blue-modal:has(.offcanvas-start) {
     height: 100dvh;
     position: relative;
     display: grid;
-    grid-template-columns: 0 var(--toggler-size) calc(var(--side-width) - var(--toggler-size)) auto;
+
     grid-template-rows: var(--toggler-size) auto;
+    grid-template-areas: "header" "main";
+
+    color: var(--blue-sidebar-color);
+    background-color: var(--blue-sidebar-bg);
+
+    &:has(> .blue-layout-toggle) {
+        grid-template-columns: 0 0 var(--toggler-size) calc(var(--side-width) - var(--toggler-size)) 1fr;
+        grid-template-rows: var(--toggler-size) auto;
+        grid-template-areas:
+            "state .    toggle header header"
+            ".     side main   main   main";
+    }
+}
+
+@media (width >= 64rem) {
+    .blue-layout {
+        &:has(> .blue-layout-state-expand:checked) {
+            grid-template-areas:
+                "state .    toggle header header"
+                ".     side side   side   main";
+        }
+    }
 }
 
 .blue-layout-state {
+    grid-area: state;
     position: absolute;
     --size: 0;
     height: var(--size);
@@ -12077,7 +12100,7 @@ dialog.blue-modal:has(.offcanvas-start) {
 }
 
 .blue-layout-toggle {
-    grid-column-start: 2;
+    grid-area: toggle;
     color: var(--blue-sidebar-color);
     background-color: var(--blue-sidebar-bg);
 }
@@ -12102,11 +12125,17 @@ dialog.blue-modal:has(.offcanvas-start) {
 }
 
 .blue-layout-header {
-    grid-column-start: 3;
-    grid-column-end: 5;
+    grid-area: header;
+
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    z-index: var(--blue-layout-header-z-index, 4);
+    --blue-menu-item-dropdown-bg: var(--blue-sidebar-bg);
 }
 
 .blue-layout-side {
+    grid-area: side;
     overflow: auto;
 }
 
@@ -12128,23 +12157,23 @@ dialog.blue-modal:has(.offcanvas-start) {
     }
 }
 
-@media (width >= 64rem) {
-    .blue-layout-state-expand:checked ~ .blue-layout-side {
-        grid-column-start: 2;
-        grid-column-end: 4;
-    }
-}
-
 .blue-layout-main {
     overflow: auto;
-    grid-column-start: 2;
-    grid-column-end: 5;
+    grid-area: main;
+    // grid-column-start: 2;
 }
 
-@media (width >= 64rem) {
-    .blue-layout-state-expand:checked ~ .blue-layout-main {
-        grid-column-start: 4;
-    }
+.blue-layout-body {
+    --spacing: 0.25rem;
+    width: calc(100% - var(--spacing) * 2);
+    height: calc(100% - var(--spacing));
+    margin-left: auto;
+    margin-right: auto;
+    overflow: auto;
+    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity, 1));
+    box-shadow: var(--bs-box-shadow-sm);
+    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
+    border-radius: var(--bs-border-radius-lg);
 }
 
 .blue-layout-overlay {
@@ -12231,6 +12260,8 @@ dialog.blue-modal:has(.offcanvas-start) {
 .BLUE-actions {
     display: flex;
     white-space: nowrap;
+    // overflow-x: auto;
+    // overflow-y: visible;
 }
 
 .BLUE-actions-menu {
@@ -12254,6 +12285,16 @@ dialog.blue-modal:has(.offcanvas-start) {
     display: var(--display);
 }
 
+// Compatibility with MenuItems having dropdowns
+.BLUE-actions-menu > .blue-menu-item-wrapper:has(> .blue-menu-item-dropdown) {
+    display: block;
+    position: relative;
+}
+
+.BLUE-actions-menu > .blue-menu-item-wrapper > .blue-menu-item-dropdown {
+    position: absolute;
+}
+
 .blue-anchor {
     anchor-name: var(--blue-anchor-name, --anchor-1);
 }