basecoat/src/jinja/command.html.jinja

{#
  Renders a standalone command menu component with search and keyboard navigation.

  @param id {string} [optional] - Unique identifier for the command component.
  @param items {array} [optional] - Array of items to render (alternative to using caller).
  @param placeholder {string} [optional] [default="Type a command or search..."] - Placeholder text for the search input.
  @param empty_text {string} [optional] [default="No results found."] - Text displayed when no results match the search.
  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
  @param input_attrs {object} [optional] - Additional HTML attributes for the search input.
  @param menu_attrs {object} [optional] - Additional HTML attributes for the menu div.
#}
{% macro command(
  id=None,
  items=None,
  placeholder="Type a command or search...",
  empty_text="No results found.",
  main_attrs={},
  input_attrs={},
  menu_attrs={}
) %}
{% set id = id or ("command-" ~ range(100000, 999999) | random | string) %}
<div
  id="{{ id }}"
  class="command {{ main_attrs.class }}"
  aria-label="Command menu"
  {% for key, value in main_attrs.items() %}
    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
  {% endfor %}
>
  <header>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
    <input
      type="text"
      id="{{ id }}-input"
      placeholder="{{ placeholder }}"
      autocomplete="off"
      autocorrect="off"
      spellcheck="false"
      aria-autocomplete="list"
      role="combobox"
      aria-expanded="true"
      aria-controls="{{ id }}-menu"
      {% for key, value in input_attrs.items() %}
        {{ key }}="{{ value }}"
      {% endfor %}
    >
  </header>
  <div
    role="menu"
    id="{{ id }}-menu"
    aria-orientation="vertical"
    data-empty="{{ empty_text }}"
    class="scrollbar-thin {{ menu_attrs.class }}"
    {% for key, value in menu_attrs.items() %}
      {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
    {% endfor %}
  >
    {% if items and items|length > 0 %}
      {{ render_command_items(items, id ~ "-items" if id else "items") }}
    {% else %}
      {{ caller() if caller }}
    {% endif %}
  </div>
</div>
{% endmacro %}

{#
  Renders a command dialog (modal command palette).

  @param id {string} [optional] - Unique identifier for the command dialog.
  @param items {array} [optional] - Array of items to render (alternative to using caller).
  @param placeholder {string} [optional] [default="Type a command or search..."] - Placeholder text for the search input.
  @param empty_text {string} [optional] [default="No results found."] - Text displayed when no results match the search.
  @param dialog_attrs {object} [optional] - Additional HTML attributes for the dialog element.
  @param input_attrs {object} [optional] - Additional HTML attributes for the search input.
  @param menu_attrs {object} [optional] - Additional HTML attributes for the menu div.
  @param open {boolean} [optional] [default=False] - Whether the command dialog should be open initially.
#}
{% macro command_dialog(
  id=None,
  items=None,
  placeholder="Type a command or search...",
  empty_text="No results found.",
  dialog_attrs={},
  input_attrs={},
  menu_attrs={},
  open=False
) %}
{% set id = id or ("command-dialog-" ~ range(100000, 999999) | random | string) %}
<dialog
  id="{{ id }}"
  class="command-dialog {{ dialog_attrs.class }}"
  aria-label="Command menu"
  {% if open %}open{% endif %}
  onclick="if (event.target === this) this.close()"
  {% for key, value in dialog_attrs.items() %}
    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
  {% endfor %}
>
  <div class="command">
    <header>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
      <input
        type="text"
        id="{{ id }}-input"
        placeholder="{{ placeholder }}"
        autocomplete="off"
        autocorrect="off"
        spellcheck="false"
        aria-autocomplete="list"
        role="combobox"
        aria-expanded="true"
        aria-controls="{{ id }}-menu"
        {% for key, value in input_attrs.items() %}
          {{ key }}="{{ value }}"
        {% endfor %}
      >
    </header>
    <div
      role="menu"
      id="{{ id }}-menu"
      aria-orientation="vertical"
      data-empty="{{ empty_text }}"
      class="scrollbar-thin {{ menu_attrs.class }}"
      {% for key, value in menu_attrs.items() %}
        {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
      {% endfor %}
    >
      {% if items and items|length > 0 %}
        {{ render_command_items(items, id ~ "-items" if id else "items") }}
      {% else %}
        {{ caller() if caller }}
      {% endif %}
    </div>
  </div>
</dialog>
{% endmacro %}

{# 
  Renders a list of items for the command component.

  @param items {array} - Array of items to render. Each item can be:
    - { type: "item", label: "Text or HTML", icon: "HTML", url: "href", keywords: "search terms", disabled: true, attrs: {} }
    - { type: "group", label: "Group Title", items: [...] }
    - { type: "separator" }
    Note: Use attrs to add data-label for alternative search text if needed. If url is provided, renders as <a role="menuitem"> instead of <div role="menuitem">. Label supports HTML (marked as safe).
  @param parent_id_prefix {string} [optional] - The prefix for the item id.
#}
{% macro render_command_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 %}
      >
        <span role="heading" id="{{ group_label_id }}">{{ item.label | safe }}</span>
        {{ render_command_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 }}"
          href="{{ item.url }}"
          role="menuitem"
          {% if item.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
          {% if item.disabled %}aria-disabled="true"{% endif %}
          {% if item.attrs %}
            {% for key, value in item.attrs.items() %}
              {% if key != "href" %}{{ 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.keywords %}data-keywords="{{ item.keywords }}"{% endif %}
          {% if item.disabled %}aria-disabled="true"{% endif %}
          {% 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 %}