wilday_ui 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 78618574e21394855f6b130e921801a2b585a1a3de42354671553848b1966be7
-  data.tar.gz: a03ad56c6df4d69759228f04bf071efd706a4d1d4a489e85d8089b8b7e4c43ac
+  metadata.gz: 02c0fb2e9d7f76dd88e920fa1f552022a53e09cf41f5934a184c750752bcc1f1
+  data.tar.gz: be810e3532a63743bbc6c44def8d285d7359f2b43d3e818a08b26f29f4c12c8a
 SHA512:
-  metadata.gz: bd86f7d58e9d7fa9e3e722fb3d35b23ba32109f0d3367e237113f43dd57b54e332cee515bd287c75dce266f5fb18a96e9288940cc0feaca7618daa78e790ac6b
-  data.tar.gz: ef40542999d1303c5faf0760c83768d1c4c4adab111245ffee47a48221b2b0a5923b05047b2d12b4c0281ca3b24b1497b156a5528d2fe4b64bbd8a8e298c1b6a
+  metadata.gz: 6dc1bb71dfbb0626d11f5fb25de9d8fecd3f213953c3016a960d7bd7da8fd0705b9906e181b0d282efdfc7679bc04d1eabe7bd08f9fb9c79756df0f0919d0723
+  data.tar.gz: 2664658acf19f2ca4e1ec55f982b3f49b27117c780b663de19d7de94a073e4c6e847f09e0fc0b741d7ab3fc6ec1912d34560a0d7f70ce20e9b83c921a7630f5f

data/app/assets/builds/wilday_ui/index.js

@@ -2491,15 +2491,224 @@ var ButtonController = class extends Controller {
   }
 };
 
+// app/javascript/wilday_ui/controllers/dropdown_controller.js
+var dropdown_controller_default = class extends Controller {
+  static targets = ["button", "menu", "submenu"];
+  static values = {
+    trigger: { type: String, default: "click" },
+    position: { type: String, default: "bottom" },
+    align: { type: String, default: "start" }
+  };
+  connect() {
+    const position = this.element.dataset.dropdownPositionValue;
+    const align = this.element.dataset.dropdownAlignValue;
+    if (position) this.positionValue = position;
+    if (align) this.alignValue = align;
+    if (this.triggerValue === "hover") {
+      this.element.addEventListener("mouseenter", () => {
+        console.log("Mouse enter - showing menu");
+        this.handleHover(true);
+      });
+      this.element.addEventListener("mouseleave", () => {
+        console.log("Mouse leave - hiding menu");
+        this.handleHover(false);
+      });
+    }
+    this.element.addEventListener("keydown", this.handleKeydown.bind(this));
+    document.addEventListener("click", this.handleClickOutside.bind(this));
+    this.setupSubmenus();
+  }
+  disconnect() {
+    document.removeEventListener("click", this.handleClickOutside.bind(this));
+  }
+  handleHover(show) {
+    if (show) {
+      this.menuTarget.classList.add("show");
+      this.buttonTarget.classList.add("active");
+      this.buttonTarget.setAttribute("aria-expanded", "true");
+    } else {
+      this.menuTarget.classList.remove("show");
+      this.buttonTarget.classList.remove("active");
+      this.buttonTarget.setAttribute("aria-expanded", "false");
+    }
+  }
+  toggle(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (this.isOpen) {
+      this.menuTarget.classList.remove("show");
+    } else {
+      this.menuTarget.classList.add("show");
+    }
+  }
+  show() {
+    const menuElement = this.element.querySelector(".w-button-dropdown-menu");
+    const buttonElement = this.element.querySelector(
+      "[data-dropdown-target='button']"
+    );
+    this.updatePosition();
+    menuElement.classList.add("show");
+    buttonElement.classList.add("active");
+    buttonElement.setAttribute("aria-expanded", "true");
+    menuElement.dataset.position = this.positionValue || "bottom";
+    menuElement.dataset.align = this.alignValue || "start";
+    const firstItem = menuElement.querySelector(".w-button-dropdown-item");
+    if (firstItem) firstItem.focus();
+  }
+  hide() {
+    const menuElement = this.element.querySelector(".w-button-dropdown-menu");
+    const buttonElement = this.element.querySelector(
+      "[data-dropdown-target='button']"
+    );
+    menuElement.classList.remove("show");
+    buttonElement.classList.remove("active");
+    buttonElement.setAttribute("aria-expanded", "false");
+  }
+  handleClickOutside(event) {
+    if (!this.element.contains(event.target)) {
+      console.log("Click outside detected. Closing all dropdowns.");
+      this.closeAllSubmenus();
+      this.hide();
+    }
+  }
+  handleKeydown(event) {
+    if (!this.isOpen && event.key === "Enter") {
+      this.show();
+      return;
+    }
+    if (this.isOpen) {
+      switch (event.key) {
+        case "Escape":
+          this.hide();
+          this.buttonTarget.focus();
+          break;
+        case "ArrowDown":
+          event.preventDefault();
+          this.focusNextItem();
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          this.focusPreviousItem();
+          break;
+        case "ArrowRight":
+          this.openSubmenu(event.target);
+          break;
+        case "ArrowLeft":
+          this.closeSubmenu(event.target);
+          break;
+        case "Tab":
+          this.hide();
+          break;
+      }
+    }
+  }
+  setupSubmenus() {
+    this.element.querySelectorAll(".w-button-dropdown-parent").forEach((parent) => {
+      const submenu = parent.querySelector(".w-button-dropdown-menu");
+      const arrow = parent.querySelector(".w-button-dropdown-arrow");
+      if (!submenu) {
+        return;
+      }
+      const trigger = parent.closest(".w-button-wrapper")?.dataset.dropdownTriggerValue || "click";
+      if (trigger === "hover") {
+        parent.addEventListener("mouseenter", () => {
+          this.showSubmenu(submenu, arrow);
+        });
+        parent.addEventListener("mouseleave", () => {
+          this.hideSubmenu(submenu, arrow);
+        });
+      } else if (trigger === "click") {
+        parent.addEventListener("click", (event) => {
+          event.stopPropagation();
+          this.toggleSubmenu(submenu, arrow);
+        });
+        document.addEventListener("click", (event) => {
+          if (!parent.contains(event.target)) {
+            this.hideSubmenu(submenu, arrow);
+          }
+        });
+      }
+    });
+  }
+  toggleSubmenu(submenu, arrow) {
+    if (submenu.classList.contains("show")) {
+      this.hideSubmenu(submenu, arrow);
+    } else {
+      this.showSubmenu(submenu, arrow);
+    }
+  }
+  showSubmenu(submenu, arrow) {
+    submenu.classList.add("show");
+    submenu.setAttribute("aria-expanded", "true");
+    if (arrow) {
+      arrow.classList.add("active");
+    }
+  }
+  hideSubmenu(submenu, arrow) {
+    submenu.classList.remove("show");
+    submenu.setAttribute("aria-expanded", "false");
+    if (arrow) {
+      arrow.classList.remove("active");
+    }
+  }
+  isParentOpen(parent) {
+    const parentMenu = parent.closest(".w-button-dropdown-menu");
+    return parentMenu && parentMenu.classList.contains("show");
+  }
+  closeAllSubmenus() {
+    this.element.querySelectorAll(".w-button-dropdown-menu.show").forEach((menu) => {
+      menu.classList.remove("show");
+      menu.setAttribute("aria-expanded", "false");
+    });
+  }
+  openSubmenu(parentItem) {
+    const submenu = parentItem.querySelector(".w-button-dropdown-menu");
+    if (submenu) {
+      this.showSubmenu(submenu);
+      submenu.querySelector(".w-button-dropdown-item").focus();
+    }
+  }
+  closeSubmenu(parentItem) {
+    const submenu = parentItem.closest(".w-button-dropdown-menu");
+    if (submenu) {
+      this.hideSubmenu(submenu);
+      parentItem.closest(".w-button-dropdown-parent").focus();
+    }
+  }
+  focusNextItem() {
+    const items = this.getMenuItems();
+    const currentIndex = items.indexOf(document.activeElement);
+    const nextIndex = currentIndex + 1 < items.length ? currentIndex + 1 : 0;
+    items[nextIndex].focus();
+  }
+  focusPreviousItem() {
+    const items = this.getMenuItems();
+    const currentIndex = items.indexOf(document.activeElement);
+    const previousIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+    items[previousIndex].focus();
+  }
+  getMenuItems() {
+    return Array.from(
+      this.menuTarget.querySelectorAll(".w-button-dropdown-item")
+    );
+  }
+  updatePosition() {
+    const menuElement = this.element.querySelector(".w-button-dropdown-menu");
+    const position = this.hasPositionValue ? this.positionValue : "bottom";
+    const align = this.hasAlignValue ? this.alignValue : "start";
+    menuElement.setAttribute("data-position", position);
+    menuElement.setAttribute("data-align", align);
+  }
+  get isOpen() {
+    return this.menuTarget.classList.contains("show");
+  }
+};
+
 // app/javascript/wilday_ui/controllers/index.js
 var application = Application.start();
 window.Stimulus = application;
 application.register("button", ButtonController);
-if (window.Stimulus) {
-  console.log("\u2705 Stimulus is loaded and initialized.");
-} else {
-  console.error("\u274C Stimulus failed to load.");
-}
+application.register("dropdown", dropdown_controller_default);
 
 // app/javascript/wilday_ui/components/button.js
 document.addEventListener("DOMContentLoaded", () => {
@@ -2513,7 +2722,4 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   });
 });
-
-// app/javascript/wilday_ui/index.js
-console.log("JavaScript loaded");
 //# sourceMappingURL=index.js.map