web-mojo/dist/chunks/ContextMenu-CuTbtePk.js

WEB-MOJO - A lightweight JavaScript framework for building data-driven web applications

import { V as View } from "./WebApp-B2r2EDj7.js";
class ContextMenu extends View {
  constructor(options = {}) {
    super({
      tagName: "div",
      className: "context-menu-view dropdown",
      ...options
    });
    this.config = options.contextMenu || options.config || {};
    this.context = options.context || {};
  }
  /**
   * Build the dropdown menu HTML from the configuration.
   */
  async renderTemplate() {
    const menuItems = this.config.items || [];
    if (menuItems.length === 0) {
      return "";
    }
    const triggerIcon = this.config.icon || "bi-three-dots-horizontal";
    const buttonClass = this.config.buttonClass || "btn btn-link text-secondary ps-3 pe-0 pt-0 pb-1";
    const dropdownId = `context-menu-${this.id}`;
    const menuItemsHtml = menuItems.map((item) => this.buildMenuItemHTML(item)).join("");
    return `
            <button class="${buttonClass}" type="button" id="${dropdownId}" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="${triggerIcon}"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="${dropdownId}">
                ${menuItemsHtml}
            </ul>
        `;
  }
  /**
   * Build the HTML for a single menu item.
   * @param {object} item - The menu item configuration.
   * @returns {string} The HTML string for the list item.
   */
  buildMenuItemHTML(item) {
    if (item.type === "divider" || item.separator) {
      return '<li><hr class="dropdown-divider"></li>';
    }
    const icon = item.icon ? `<i class="${item.icon} me-2"></i>` : "";
    const label = item.label || "";
    const itemClass = `dropdown-item ${item.danger ? "text-danger" : ""} ${item.disabled ? "disabled" : ""}`;
    const action = item.action || "";
    if (item.href) {
      return `<li><a class="${itemClass}" href="${item.href}" target="${item.target || "_self"}">${icon}${label}</a></li>`;
    }
    return `<li><a class="${itemClass}" href="#" data-action="menu-item-click" data-item-action="${action}">${icon}${label}</a></li>`;
  }
  /**
   * Handle clicks on menu items.
   * @param {Event} event - The click event.
   * @param {HTMLElement} element - The clicked anchor element.
   */
  async onActionMenuItemClick(event, element) {
    event.preventDefault();
    const action = element.getAttribute("data-item-action");
    if (!action) return;
    const menuItem = this.config.items.find((item) => item.action === action);
    if (!menuItem || menuItem.disabled) return;
    if (typeof menuItem.handler === "function") {
      menuItem.handler(this.context, event, element);
    } else {
      this.parent.events.dispatch(action, event, element);
    }
    this.closeDropdown();
  }
  closeDropdown() {
    const dropdownTrigger = this.element.querySelector('[data-bs-toggle="dropdown"]');
    if (dropdownTrigger) {
      const dropdownInstance = window.bootstrap?.Dropdown.getInstance(dropdownTrigger);
      dropdownInstance?.hide();
    }
  }
}
export {
  ContextMenu as C
};
//# sourceMappingURL=ContextMenu-CuTbtePk.js.map