@pokle/basecoat 0.3.10-beta2.pokle

package/src/nunjucks/dropdown-menu.njk

@@ -0,0 +1,124 @@
+{#
+  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 %}
+    {% 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 %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    {{ trigger | safe }}
+  </button>
+  <div
+    id="{{ id }}-popover"
+    data-popover
+    aria-hidden="true"
+    {% for key, value in popover_attrs %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    <div
+      role="menu"
+      id="{{ id }}-menu"
+      aria-labelledby="{{ id }}-trigger"
+      {% for key, value in menu_attrs %}
+        {{ 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 %}
+            {{ 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 %}
+              {% 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 %}
+              {{ key }}="{{ value }}"
+            {% endfor %}
+          {% endif %}
+        >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
+          {{ item.label | safe }}
+        </div>
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+{% endmacro %}

package/src/nunjucks/popover.njk

@@ -0,0 +1,48 @@
+{#
+  Renders a generic popover component, often used internally by other components like dropdowns or selects.
+
+  @param id {string} [optional] - Unique identifier for the popover component.
+  @param trigger {string} [optional] - HTML content for the element that triggers the popover.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
+  @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger element.
+  @param popover_attrs {object} [optional] - Additional HTML attributes for the popover content div.
+#}
+{% macro popover(
+  trigger,
+  id=None,
+  main_attrs={},
+  trigger_attrs={},
+  popover_attrs={}
+) %}
+{% set id = id or ("popover-" + (range(100000, 999999) | random | string)) %}
+
+<div
+  id="{{ id }}"
+  class="popover {{ main_attrs.class }}"
+  {% for key, value in main_attrs %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  <button
+    id="{{ id }}-trigger"
+    type="button"
+    aria-expanded="false"
+    aria-controls="{{ id }}-popover"
+    {% for key, value in trigger_attrs %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    {{ trigger | safe }}
+  </button>
+  <div
+    id="{{ id }}-popover"
+    data-popover
+    aria-hidden="true"
+    {% for key, value in popover_attrs %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  > 
+    {{ caller() if caller }}
+  </div>
+</div>
+{% endmacro %}

package/src/nunjucks/select.njk

@@ -0,0 +1,196 @@
+{#
+  Renders a select or combobox 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 options are selected (multiple mode only).
+  @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.
+  @param search_placeholder {string} [optional] [default="Search entries..."] - Placeholder text for the search input (combobox only).
+  @param is_combobox {boolean} [optional] [default=false] - Renders a combobox with search functionality if true.
+#}
+{% macro select(
+  id=None,
+  selected=None,
+  name=None,
+  items=None,
+  multiple=false,
+  placeholder=None,
+  main_attrs={},
+  trigger_attrs={},
+  popover_attrs={},
+  listbox_attrs={},
+  input_attrs={},
+  search_placeholder="Search entries...",
+  is_combobox=false
+) %}
+{% 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 = [] %}
+{% set selected_options = [] %}
+
+{% if items %}
+  {% for item in items %}
+    {% if item.type == "group" %}
+      {% for sub_item in item.items %}
+        {% if not first_option[0] %}
+          {% set first_option = (first_option.push(sub_item), first_option) %}
+        {% endif %}
+        {% if sub_item.value in selectedArray %}
+          {% set selected_options = (selected_options.push(sub_item), selected_options) %}
+        {% endif %}
+      {% endfor %}
+    {% else %}
+      {% if not first_option[0] %}
+        {% set first_option = (first_option.push(item), first_option) %}
+      {% endif %}
+      {% if item.value in selectedArray %}
+        {% set selected_options = (selected_options.push(item), selected_options) %}
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+
+{% set default_option = (selected_options[0] if selected_options[0] else (first_option[0] if first_option[0] else None)) %}
+{% set labels = [] %}
+{% if multiple and selected_options %}
+  {% for opt in selected_options %}
+    {% set labels = (labels.push(opt.label), labels) %}
+  {% endfor %}
+{% endif %}
+{% set default_label = (labels | join(', ') if (multiple and selected_options) else ((placeholder or '') if (multiple and not selected_options) else (default_option.label if default_option else ''))) %}
+
+<div
+  id="{{ id }}"
+  class="select {{ main_attrs.class }}"
+  {% if multiple and placeholder %}data-placeholder="{{ placeholder }}"{% endif %}
+  {% for key, value in main_attrs %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  <button
+    type="button"
+    class="btn-outline {{ trigger_attrs.class }}"
+    id="{{ id }}-trigger"
+    aria-haspopup="listbox"
+    aria-expanded="false"
+    aria-controls="{{ id }}-listbox"
+    {% for key, value in trigger_attrs %}
+      {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+    {% endfor %}
+  >
+    <span class="truncate">{{ default_label }}</span>
+    {% if is_combobox %}
+      <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-chevrons-up-down-icon lucide-chevrons-up-down text-muted-foreground opacity-50 shrink-0"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
+    {% else %}
+      <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>
+    {% endif %}
+  </button>
+  <div
+    id="{{ id }}-popover"
+    data-popover
+    aria-hidden="true"
+    {% for key, value in popover_attrs %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    {% if is_combobox %}
+    <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"
+        value=""
+        placeholder="{{ search_placeholder }}"
+        autocomplete="off"
+        autocorrect="off"
+        spellcheck="false"
+        aria-autocomplete="list"
+        role="combobox"
+        aria-expanded="false"
+        aria-controls="{{ id }}-listbox"
+        aria-labelledby="{{ id }}-trigger"
+      >
+    </header>
+    {% endif %}
+    <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 %}
+        {{ key }}="{{ value }}"
+      {% endfor %}
+    >
+      {% if items and items.length > 0 %}
+        {{ 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 multiple %}{{ selectedArray | dump }}{% else %}{{ (default_option.value if default_option) or '' }}{% endif %}"
+    {% for key, value in input_attrs %}
+      {% 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 %}
+            {{ 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 %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
+      >
+        {{ item.label | safe }}
+      </div>
+    {% endif %}
+  {% endfor %}
+{% endmacro %}

package/src/nunjucks/sidebar.njk

@@ -0,0 +1,144 @@
+{#
+  Renders a sidebar component.
+
+  @param id {string} [optional] - Unique identifier for the sidebar component.
+  @param label {string} [optional] - Label for the sidebar navigation.
+  @param open {boolean} [optional] - Whether the sidebar is open.
+  @param side {string} [optional] - Side of the sidebar to display.
+  @param header {string} [optional] - Header content for the sidebar.
+  @param footer {string} [optional] - Footer content for the sidebar.
+  @param items {array} [optional] - Array of menu items for the sidebar.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
+  @param header_attrs {object} [optional] - Additional HTML attributes for the header element.
+  @param content_attrs {object} [optional] - Additional HTML attributes for the content section.
+  @param footer_attrs {object} [optional] - Additional HTML attributes for the footer element.
+#}
+{% macro sidebar(
+  id=None,
+  label="Sidebar navigation",
+  open=true,
+  side=None,
+  header=None,
+  footer=None,
+  menu=None,
+  main_attrs={},
+  header_attrs={},
+  content_attrs={},
+  footer_attrs={}
+) %}
+<aside
+  {% if id %}id="{{ id }}"{% endif %}
+  class="sidebar {{ main_attrs.class }}"
+  data-side="{{ side if side else "left" }}"
+  aria-hidden="{{ "true" if not open else "false" }}"
+  {{ "inert" if not open }}
+  {% for key, value in main_attrs %}
+    {% if key != "class" %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  <nav
+    aria-label="{{ label }}"
+  >
+    {% if header %}
+    <header
+      {% for key, value in header_attrs %}
+        {{ key }}="{{ value }}"
+      {% endfor %}
+    >
+      {{ header | safe }}
+    </header>
+    {% endif %}
+
+    <section
+      {% for key, value in content_attrs %}
+        {{ key }}="{{ value }}"
+      {% endfor %}
+    >
+      {% if menu %}
+        {{ render_sidebar_content(menu, id ~ "-content" if id else "content") }}
+      {% else %}
+        {{ caller() if caller }}
+      {% endif %}
+    </section>
+
+    {% if footer %}
+    <footer
+      {% for key, value in footer_attrs %}
+        {{ key }}="{{ value }}"
+      {% endfor %}
+    >
+      {{ footer | safe }}
+    </footer>
+    {% endif %}
+  </nav>
+</aside>
+{% endmacro %}
+
+{#
+  Renders sidebar content recursively (groups, items, submenus, separators).
+
+  @param items {array} - The array of items to render.
+  @param parent_id_prefix {string} [optional] - Prefix for generating element IDs.
+#}
+{% macro render_sidebar_content(items, parent_id_prefix="content") %}
+  {% 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"
+        {% if item.label %}aria-labelledby="{{ group_label_id }}"{% endif %}
+        {% if item.attrs %}
+          {% for key, value in item.attrs %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
+      >
+        {% if item.label %}
+          <h3 id="{{ group_label_id }}">{{ item.label }}</h3>
+        {% endif %}
+        <ul>
+          {{ render_sidebar_content(item.items, item_id) if item.items }}
+        </ul>
+      </div>
+    {% elif item.type == "separator" %}
+      <hr role="separator"/>
+    {% elif item.type == "submenu" %}
+      <li>
+        <details
+          id="submenu-{{ item_id }}"
+          {{ "open" if item.open }}
+          {% if item.attrs %}
+            {% for key, value in item.attrs %}
+              {% if key != "open" %}{{ key }}="{{ value }}"{% endif %}
+            {% endfor %}
+          {% endif %}
+        >
+          <summary aria-controls="submenu-{{ item_id }}-content">
+            {% if item.icon %}{{ item.icon | safe }}{% endif %}
+            {{ item.label | safe }}
+          </summary>
+          <ul id="submenu-{{ item_id }}-content">
+            {{ render_sidebar_content(item.items, item_id) if item.items }}
+          </ul>
+        </details>
+      </li>
+    {% elif item.type == "item" or not item.type %}
+       <li>
+        <a
+          href="{{ item.url }}"
+          {{ 'aria-current="page"' if item.current }}
+          {% if item.attrs %}
+            {% for key, value in item.attrs %}
+              {% if key != "href" and key != "aria-current" %}{{ key }}="{{ value }}"{% endif %}
+            {% endfor %}
+          {% endif %}
+        >
+          {% if item.icon %}{{ item.icon | safe }}{% endif %}
+          <span>{{ item.label | safe }}</span>
+        </a>
+       </li>
+    {% endif %}
+  {% endfor %}
+{% endmacro %}

package/src/nunjucks/tabs.njk

@@ -0,0 +1,78 @@
+{#
+  Renders a tabs component.
+
+  @param id {string} - Unique identifier for the tabs component.
+  @param tabsets {array} - An array of objects, each representing a tab and its panel.
+    Each object should have:
+    - id {string}: Unique identifier prefix for the tab and panel.
+    - tab {string}: HTML content for the tab button.
+    - panel {string} [optional]: HTML content for the tab panel.
+    - tab_attrs {object} [optional]: Additional HTML attributes for the tab button.
+    - panel_attrs {object} [optional]: Additional HTML attributes for the tab panel div.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
+  @param tablist_attrs {object} [optional] - Additional HTML attributes for the tablist nav element.
+  @param default_tab_index {number} [optional] [default=1] - The 1-based index of the tab to be active initially.
+#}
+{% macro tabs(
+    id=None,
+    tabsets=[],
+    main_attrs={},
+    tablist_attrs={},
+    default_tab_index=1
+  )
+%}
+{% set id = id or ("tabs-" + (range(100000, 999999) | random | string)) %}
+<div
+  class="tabs {{ main_attrs.class }}"
+  id="{{ id }}"
+  {% for key, value in main_attrs %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  <nav
+    role="tablist"
+    aria-orientation="horizontal"
+    {% for key, value in tablist_attrs %}
+      {{ key }}="{{ value }}"
+    {% endfor %}
+  >
+    {% for tabset in tabsets %}
+      <button
+        type="button"
+        role="tab"
+        id="{{ id }}-tab-{{ loop.index }}"
+        aria-controls="{{ id }}-panel-{{ loop.index }}"
+        aria-selected="{{ 'true' if loop.index == default_tab_index else 'false' }}"
+        tabindex="0"
+        {% if tabset.tab_attrs %}
+          {% for key, value in tabset.tab_attrs %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
+      >
+        {{ tabset.tab | safe }}
+      </button>
+    {% endfor %}
+  </nav>
+
+  {% for tabset in tabsets %}
+    {% if tabset.panel %}
+      <div
+        role="tabpanel"
+        id="{{ id }}-panel-{{ loop.index }}"
+        aria-labelledby="{{ id }}-tab-{{ loop.index }}"
+        tabindex="-1"
+        aria-selected="{{ 'true' if loop.index == default_tab_index else 'false' }}"
+        {% if loop.index != default_tab_index %}hidden{% endif %}
+        {% if tabset.panel_attrs %}
+          {% for key, value in tabset.panel_attrs %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
+      >
+        {{ tabset.panel | safe }}
+      </div>
+    {% endif %}
+  {% endfor %}
+</div>
+{% endmacro %}