basecoat/docs/_includes/components/select.njk

{% macro select(
  id=None,
  selected=None,
  name=None,
  main_attrs={},
  trigger_attrs={},
  content_attrs={},
  listbox_attrs={},
  input_attrs={},
  search_placeholder="Search entries...",
  is_combobox=false,
  include_html=true,
  include_script=false,
  register_on=["alpine:init"]
) %}
{% if include_script %}
  {% include "components/select-script.njk" %}
{% endif %}

{% if include_html %}
<div
  class="popover {{ main_attrs.class }}"
  x-data="select('{{ name }}', '{{ selected or '' }}')"
  @click.away="open = false"
  {% if id %}id="{{ id }}"{% endif %}
  {% for key, value in main_attrs %}
    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
  {% endfor %}
>
  <button
    type="button"
    aria-haspopup="listbox"
    aria-expanded="false"
    x-bind="$trigger"
    {% if id %}
    id="{{ id }}-trigger"
    aria-controls="{{ id }}-content"
    {% endif %}
    class="btn-outline justify-between font-normal {{ trigger_attrs.class }}"
    {% for key, value in trigger_attrs %}
      {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
    {% endfor %}
  >
    <div x-html="selectedLabel" class="flex items-center gap-x-2"
    ></div>
    {% if is_combobox %}
      {% lucide "chevrons-up-down", class="text-muted-foreground opacity-50 shrink-0" %}
    {% else %}
      {% lucide "chevron-down", class="text-muted-foreground opacity-50 shrink-0" %}
    {% endif %}
  </button>
  <div
    data-popover
    aria-hidden="true"
    x-bind="$content"
    {% if id %}id="{{ id }}-content"{% endif %}
    {% for key, value in content_attrs %}
      {{ key }}="{{ value }}"
    {% endfor %}
  >
    {% if is_combobox %}
    <header>
      {% lucide "search" %}
      <input
        type="text"
        value=""
        placeholder="{{ search_placeholder }}"
        autocomplete="off"
        autocorrect="off"
        spellcheck="false"
        aria-autocomplete="list"
        role="combobox"
        aria-expanded="true"
        aria-controls="{{ id }}-content"
        aria-labelledby="{{ id }}-trigger"
        x-model="query"
        x-bind="$filter"
      >
    </header>
    {% endif %}
    <div
      role="listbox"
      aria-orientation="vertical"
      {% for key, value in listbox_attrs %}
        {{ key }}="{{ value }}"
      {% endfor %}
    >
      {% if caller %}{{ caller() }}{% endif %}
    </div>
  </div>
  {% if name is defined %}
    <input
      type="hidden"
      name="{{ name }}"
      x-model="selectedValue"
      {% for key, value in input_attrs %}
        {% if key != 'name' %}{{ key }}="{{ value }}"{% endif %}
      {% endfor %}
    >
  {% endif %}
</div>
{% endif %}
{% endmacro %}