wilday_ui 0.3.0 → 0.4.0

data/app/javascript/wilday_ui/controllers/dropdown_controller.js

@@ -0,0 +1,270 @@
+import { Controller } from "@hotwired/stimulus";
+
+export 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;
+
+    // Set up hover events if trigger is hover
+    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);
+      });
+    }
+
+    // Set up keyboard navigation
+    this.element.addEventListener("keydown", this.handleKeydown.bind(this));
+
+    // Close on click outside
+    document.addEventListener("click", this.handleClickOutside.bind(this));
+
+    // Set up parent dropdown items to handle submenus
+    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");
+
+    // Apply position and alignment
+    menuElement.dataset.position = this.positionValue || "bottom";
+    menuElement.dataset.align = this.alignValue || "start";
+
+    // Focus first menu item
+    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(); // Close the main dropdown
+    }
+  }
+
+  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;
+        }
+
+        // Determine the trigger (hover or click)
+        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(); // Prevent closing parent dropdown
+            this.toggleSubmenu(submenu, arrow);
+          });
+
+          // Close the submenu when clicking outside
+          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");
+
+    // Rotate arrow if present
+    if (arrow) {
+      arrow.classList.add("active");
+    }
+  }
+
+  hideSubmenu(submenu, arrow) {
+    submenu.classList.remove("show");
+    submenu.setAttribute("aria-expanded", "false");
+
+    // Reset arrow rotation if present
+    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");
+  }
+}

data/app/javascript/wilday_ui/controllers/index.js

@@ -1,5 +1,6 @@
 import { Application } from "@hotwired/stimulus";
 import ButtonController from "./button_controller";
+import DropdownController from "./dropdown_controller";
 
 // Initialize Stimulus
 const application = Application.start();
@@ -7,10 +8,10 @@ window.Stimulus = application;
 
 // Register the button controller
 application.register("button", ButtonController);
-
+application.register("dropdown", DropdownController);
 // Debug check to ensure Stimulus is loaded
-if (window.Stimulus) {
-  console.log("✅ Stimulus is loaded and initialized.");
-} else {
-  console.error("❌ Stimulus failed to load.");
-}
+// if (window.Stimulus) {
+//   console.log("✅ Stimulus is loaded and initialized.");
+// } else {
+//   console.error("❌ Stimulus failed to load.");
+// }

data/app/javascript/wilday_ui/index.js

@@ -1,4 +1,4 @@
 import "./controllers";
 import "./components/button";
 
-console.log("JavaScript loaded");
+// console.log("JavaScript loaded");

data/app/views/wilday_ui/_button.html.erb

@@ -4,7 +4,9 @@ html_options = {
   class: ["w-button", variant_class, size_class, radius_class, additional_classes, ("w-button-loading" if loading)].compact.join(" "),
   disabled: disabled || loading,
   "aria-busy": loading,
-  "aria-disabled": disabled || loading
+  "aria-disabled": disabled || loading,
+  "aria-expanded": dropdown ? "false" : nil,
+  "aria-haspopup": dropdown ? "true" : nil
 }
 
 # Only add Stimulus data attributes if they're in the passed options
@@ -16,21 +18,21 @@ end
 html_options.merge!(local_assigns[:html_options] || {})
 
 tag_type = href.present? ? :a : :button
-%>
 
-<%= content_tag tag_type, html_options do %>
-  <% if loading %>
-    <span class="w-button-spinner"></span>
-    <%= loading_text %>
-  <% else %>
-    <% if icon_position == :left && icon.present? %>
-      <i class="w-button-icon-left <%= icon %>"></i>
+# Conditionally render wrapper for dropdowns or advanced features
+if local_assigns[:wrapper_options].present?
+%>
+  <div <%= tag.attributes(wrapper_options) %>>
+    <%= content_tag tag_type, html_options do %>
+      <%= render partial: "wilday_ui/button/content", locals: local_assigns %>
     <% end %>
-    
-    <%= content %>
-    
-    <% if icon_position == :right && icon.present? %>
-      <i class="w-button-icon-right <%= icon %>"></i>
+
+    <% if dropdown && dropdown_items %>
+      <%= render partial: "wilday_ui/button/dropdown_menu", locals: { items: dropdown_items, dropdown: dropdown } %>
     <% end %>
+  </div>
+<% else %>
+  <%= content_tag tag_type, html_options do %>
+    <%= render partial: "wilday_ui/button/content", locals: local_assigns %>
   <% end %>
 <% end %>

data/app/views/wilday_ui/button/_content.html.erb

@@ -0,0 +1,22 @@
+<% if loading %>
+  <span class="w-button-spinner"></span>
+  <%= loading_text %>
+<% else %>
+  <% if icon_position == :left && icon.present? %>
+    <i class="w-button-icon-left <%= icon %>"></i>
+  <% end %>
+  
+  <%= content %>
+
+  <% if dropdown %>
+    <% if dropdown_icon.present? %>
+      <i class="w-button-dropdown-arrow <%= dropdown_icon %>"></i>
+    <% else %>
+      <span class="w-button-dropdown-arrow"></span>
+    <% end %>
+  <% end %>
+  
+  <% if icon_position == :right && icon.present? %>
+    <i class="w-button-icon-right <%= icon %>"></i>
+  <% end %>
+<% end %>

data/app/views/wilday_ui/button/_dropdown_menu.html.erb

@@ -0,0 +1,26 @@
+<% if items.present? %>
+  <div class="w-button-dropdown-menu" data-dropdown-target="menu" role="menu">
+    <% items.each do |item| %>
+      <% if item[:divider] %>
+        <div class="w-button-dropdown-divider" role="separator"></div>
+      <% elsif item[:children].present? %>
+        <div class="w-button-dropdown-item w-button-dropdown-parent" role="menuitem">
+          <%= item[:text] %>
+          <span class="w-button-dropdown-arrow"></span>
+          <%= render partial: "wilday_ui/button/dropdown_menu", 
+                     locals: { 
+                       items: item[:children],
+                       parent_id: item[:id]
+                     } %>
+        </div>
+      <% else %>
+        <%= link_to item[:text], 
+            item[:href], 
+            class: "w-button-dropdown-item",
+            role: "menuitem",
+            tabindex: "-1" 
+        %>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

data/lib/wilday_ui/version.rb

@@ -1,3 +1,3 @@
 module WildayUi
-  VERSION = "0.3.0"
+  VERSION = "0.4.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: wilday_ui
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.4.0
 platform: ruby
 authors:
 - davidwinalda
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-12-12 00:00:00.000000000 Z
+date: 2024-12-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -49,6 +49,7 @@ files:
 - app/helpers/wilday_ui/components/button_helper.rb
 - app/javascript/wilday_ui/components/button.js
 - app/javascript/wilday_ui/controllers/button_controller.js
+- app/javascript/wilday_ui/controllers/dropdown_controller.js
 - app/javascript/wilday_ui/controllers/index.js
 - app/javascript/wilday_ui/index.js
 - app/jobs/wilday_ui/application_job.rb
@@ -56,6 +57,8 @@ files:
 - app/models/wilday_ui/application_record.rb
 - app/views/layouts/wilday_ui/application.html.erb
 - app/views/wilday_ui/_button.html.erb
+- app/views/wilday_ui/button/_content.html.erb
+- app/views/wilday_ui/button/_dropdown_menu.html.erb
 - config/routes.rb
 - lib/tasks/wilday_ui_tasks.rake
 - lib/wilday_ui.rb