basecoat/src/jinja/dropdown-menu.html.jinja

{#
  Renders a dropdown menu component.

  @param id {string} [optional] - Unique identifier for the dropdown component.
  @param trigger {string} [optional] - HTML content for the button that triggers the dropdown.
  @param items {array} [optional] - Array of menu items for the dropdown.
  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
  @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
  @param popover_attrs {object} [optional] - Additional HTML attributes for the dropdown content div.
#}
{% macro dropdown_menu(
  trigger,
  id=None,
  items=None,
  main_attrs={},
  trigger_attrs={},
  popover_attrs={},
  menu_attrs={}
) %}
{% set id = id or ("dropdown-menu-" + (range(100000, 999999) | random | string)) %}

<div
  id="{{ id }}"
  class="dropdown-menu {{ main_attrs.class }}"
  {% for key, value in main_attrs.items() %}
    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
  {% endfor %}
>
  <button
    type="button"
    id="{{ id }}-trigger"
    aria-haspopup="menu"
    aria-controls="{{ id }}-menu"
    aria-expanded="false"
    {% for key, value in trigger_attrs.items() %}
      {{ key }}="{{ value }}"
    {% endfor %}
  >
    {{ trigger | safe }}
  </button>
  <div
    id="{{ id }}-popover"
    data-popover
    aria-hidden="true"
    {% for key, value in popover_attrs.items() %}
      {{ key }}="{{ value }}"
    {% endfor %}
  >
    <div
      role="menu"
      id="{{ id }}-menu"
      aria-labelledby="{{ id }}-trigger"
      {% for key, value in menu_attrs.items() %}
        {{ key }}="{{ value }}"
      {% endfor %}
    >
      {% if items %}
        {{ render_dropdown_items(items, id ~ "-items" if id else "items") }}
      {% else %}
        {{ caller() if caller }}
      {% endif %}
    </div>
  </div>
</div>
{% endmacro %}

{#
  Renders dropdown menu items recursively.

  @param items {array} - The array of items to render.
  @param parent_id_prefix {string} [optional] - Prefix for generating element IDs.
#}
{% macro render_dropdown_items(items, parent_id_prefix="items") %}
  {% for item in items %}
    {% set item_id = parent_id_prefix ~ "-" ~ loop.index %}

    {% if item.type == "group" %}
      {% set group_label_id = item.id if item.id else "group-label-" + item_id %}
      <div
        role="group"
        aria-labelledby="{{ group_label_id }}"
        {% if item.attrs %}
          {% for key, value in item.attrs.items() %}
            {{ key }}="{{ value }}"
          {% endfor %}
        {% endif %}
      >
        <div role="heading" id="{{ group_label_id }}">{{ item.label }}</div>
        {{ render_dropdown_items(item['items'], item_id) if item['items'] }}
      </div>
    {% elif item.type == "separator" %}
      <hr role="separator" />
    {% elif item.type == "item" or not item.type %}
      {% if item.url %}
        <a
          id="{{ item_id }}"
          role="menuitem"
          href="{{ item.url }}"
          {% if item.attrs %}
            {% for key, value in item.attrs.items() %}
              {% if key != "url" %} {{ key }}="{{ value }}" {% endif %}
            {% endfor %}
          {% endif %}
        >
          {% if item.icon %}{{ item.icon | safe }}{% endif %}
          {{ item.label | safe }}
        </a>
      {% else %}
        <div
          id="{{ item_id }}"
          role="menuitem"
          {% if item.attrs %}
            {% for key, value in item.attrs.items() %}
              {{ key }}="{{ value }}"
            {% endfor %}
          {% endif %}
        >
          {% if item.icon %}{{ item.icon | safe }}{% endif %}
          {{ item.label | safe }}
        </div>
      {% endif %}
    {% endif %}
  {% endfor %}
{% endmacro %}