basecoat/src/jinja/select.html.jinja

{#
  Renders a select component.

  @param id {string} [optional] - Unique identifier for the select component.
  @param selected {string|array} [optional] - The initially selected value(s).
  @param name {string} [optional] - The name attribute for the hidden input storing the selected value.
  @param multiple {boolean} [optional] [default=false] - Enables multiple selection mode.
  @param placeholder {string} [optional] - Placeholder text shown when no option is selected.
  @param close_on_select {boolean} [optional] [default=false] - Closes the popover when selecting an option in multiple mode.
  @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 popover content div.
  @param listbox_attrs {object} [optional] - Additional HTML attributes for the listbox div.
  @param input_attrs {object} [optional] - Additional HTML attributes for the hidden input.
#}
{% macro select(
  id=None,
  selected=None,
  name=None,
  items=[],
  multiple=false,
  placeholder=None,
  close_on_select=false,
  format="value",
  main_attrs={},
  trigger_attrs={},
  popover_attrs={},
  listbox_attrs={},
  input_attrs={}
) %}
{% set id = id or ("select-" + (range(100000, 999999) | random | string)) %}

{% if selected is defined and selected is iterable and selected is not string %}
  {% set selectedArray = selected %}
{% elif selected is defined %}
  {% set selectedArray = [selected] %}
{% else %}
  {% set selectedArray = [] %}
{% endif %}
{% set first_option = namespace(item=None) %}
{% set selected_options = namespace(items=[]) %}

{% if items %}
  {% for item in items %}
    {% if item.type == "group" %}
      {% for sub_item in item['items'] %}
        {% if not first_option.item %}
          {% set first_option.item = sub_item %}
        {% endif %}
        {% if sub_item.value in selectedArray %}
          {% set selected_options.items = selected_options.items + [sub_item] %}
        {% endif %}
      {% endfor %}
    {% else %}
      {% if not first_option.item %}
        {% set first_option.item = item %}
      {% endif %}
      {% if item.value in selectedArray %}
        {% set selected_options.items = selected_options.items + [item] %}
      {% endif %}
    {% endif %}
  {% endfor %}
{% endif %}

{% set default_option = (selected_options.items[0] if selected_options.items else (none if placeholder else first_option.item)) %}
{% set labels = [] %}
{% if multiple and selected_options.items %}
  {% for opt in selected_options.items %}
    {% set labels = labels + [opt.label] %}
  {% endfor %}
{% endif %}
{% set default_label = (', '.join(labels) if (multiple and selected_options.items) else ((placeholder or '') if (placeholder and not selected_options.items) else (default_option.label if default_option else ''))) %}
{% set selected_payload = namespace(items=[]) %}
{% if multiple and selected_options.items %}
  {% for opt in selected_options.items %}
    {% set selected_payload.items = selected_payload.items + [{'value': opt.value, 'label': opt.label}] %}
  {% endfor %}
{% elif default_option %}
  {% set selected_payload.items = [{'value': default_option.value, 'label': default_option.label}] %}
{% endif %}

<div
  id="{{ id }}"
  class="select {{ main_attrs.class }}"
  {% if format == "object" %}data-format="object"{% endif %}
  {% if placeholder %}data-placeholder="{{ placeholder }}"{% endif %}
  {% if multiple and close_on_select %}data-close-on-select="true"{% endif %}
  {% for key, value in main_attrs.items() %}
    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
  {% endfor %}
>
  <button
    type="button"
    class="{{ trigger_attrs.class }}"
    id="{{ id }}-trigger"
    aria-haspopup="listbox"
    aria-expanded="false"
    aria-controls="{{ id }}-listbox"
    {% for key, value in trigger_attrs.items() %}
      {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
    {% endfor %}
  >
    <span class="truncate">{{ default_label }}</span>
      <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-chevron-down-icon lucide-chevron-down text-muted-foreground opacity-50 shrink-0"><path d="m6 9 6 6 6-6"/></svg>
  </button>
  <div
    id="{{ id }}-popover"
    data-popover
    aria-hidden="true"
    {% for key, value in popover_attrs.items() %}
      {{ key }}="{{ value }}"
    {% endfor %}
  >
    <div
      role="listbox"
      id="{{ id }}-listbox"
      aria-orientation="vertical"
      aria-labelledby="{{ id }}-trigger"
      {% if multiple %}aria-multiselectable="true"{% endif %}
      {% for key, value in listbox_attrs.items() %}
        {{ key }}="{{ value }}"
      {% endfor %}
    >
      {% if items %}
        {{ render_select_items(items, selectedArray, id ~ "-items" if id else "items") }}
      {% else %}
        {{ caller() if caller }}
      {% endif %}
    </div>
  </div>
  <input
    type="hidden"
    name="{{ name or id ~ '-value' }}"
    value="{% if format == 'object' %}{{ (selected_payload.items if multiple else (selected_payload.items[0] if selected_payload.items else none)) | tojson }}{% elif multiple %}{{ selectedArray | tojson }}{% else %}{{ (default_option.value if default_option) or '' }}{% endif %}"
    {% for key, value in input_attrs.items() %}
      {% if key != 'name' and key != 'value' %}{{ key }}="{{ value }}"{% endif %}
    {% endfor %}
  >
</div>
{% endmacro %}

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

  @param items {array} - The array of items to render.
  @param parent_id_prefix {string} [optional] - The prefix for the item id.
#}
{% macro render_select_items(items, selectedArray, 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_select_items(item['items'], selectedArray, item_id) if item['items'] }}
      </div>
    {% elif item.type == "separator" %}
      <hr role="separator" />
    {% elif item.type == "item" or not item.type %}
      <div
        id="{{ item_id }}"
        role="option"
        {% if item.value is defined and item.value is not none %}data-value="{{ item.value }}"{% endif %}
        {% if item.value in selectedArray %}aria-selected="true"{% endif %}
        {% if item.attrs %}
          {% for key, value in item.attrs.items() %}
            {{ key }}="{{ value }}"
          {% endfor %}
        {% endif %}
      >
        {{ item.label | safe }}
      </div>
    {% endif %}
  {% endfor %}
{% endmacro %}