basecoat-cli 0.2.0-beta.1 → 0.2.1

package/dist/assets/jinja/dialog.html.jinja

@@ -8,103 +8,87 @@
   @param footer {string} [optional] - HTML content for the dialog footer.
   @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 content_attrs {object} [optional] - Additional HTML attributes for the dialog content article.
-  @param content_header_attrs {object} [optional] - Additional HTML attributes for the dialog header.
-  @param content_body_attrs {object} [optional] - Additional HTML attributes for the dialog body section.
-  @param content_footer_attrs {object} [optional] - Additional HTML attributes for the dialog footer.
-  @param open {boolean} [optional] [default=False] - Whether the dialog should be open initially.
-  @param close_button {boolean} [optional] [default=True] - Whether to include a close button.
-  @param close_on_overlay_click {boolean} [optional] [default=True] - Whether clicking the overlay closes the dialog.
+  @param dialog_attrs {object} [optional] - Additional HTML attributes for the dialog content article.
+  @param header_attrs {object} [optional] - Additional HTML attributes for the dialog header.
+  @param body_attrs {object} [optional] - Additional HTML attributes for the dialog body section.
+  @param footer_attrs {object} [optional] - Additional HTML attributes for the dialog footer.
+  @param open {boolean} [optional] [default=false] - Whether the dialog should be open initially.
+  @param close_button {boolean} [optional] [default=true] - Whether to include a close button.
+  @param close_on_overlay_click {boolean} [optional] [default=true] - Whether clicking the overlay closes the dialog.
 #}
 {% macro dialog(
-  id,
+  id=None,
   trigger=None,
   title=None,
   description=None,
   footer=None,
-  main_attrs={},
+  dialog_attrs={},
   trigger_attrs={},
-  content_attrs={},
-  content_header_attrs={},
-  content_body_attrs={},
-  content_footer_attrs={},
-  open=False,
-  close_button=True,
-  close_on_overlay_click=True
+  header_attrs={},
+  body_attrs={},
+  footer_attrs={},
+  open=false,
+  close_button=true,
+  close_on_overlay_click=true
 ) %}
-<div
+{% set id = id or ("dialog-" + (range(100000, 999999) | random | string)) %}
+{% if trigger %}
+<button
+  type="button"
+  onclick="document.getElementById('{{ id }}').showModal()"
+  {% for key, value in trigger_attrs.items() %}
+    {{ key }}="{{ value }}"
+  {% endfor %}
+>
+  {{ trigger }} 
+</button>
+{% endif %}
+<dialog
   id="{{ id }}"
-  x-data="dialog({{ 'true' if open else 'false' }}, {{ 'true' if close_on_overlay_click else 'false' }})"
-  x-bind="$main"
   class="dialog"
-  {% for key, value in main_attrs.items() %}
+  aria-labelledby="{{ id }}-title"
+  {% if description %}aria-describedby="{{ id }}-description"{% endif %}
+  {% if close_on_overlay_click %}onclick="this.close()"{% endif %}
+  {% for key, value in dialog_attrs.items() %}
     {{ key }}="{{ value }}"
   {% endfor %}
 >
-  {% if trigger %}
-  <button
-    type="button"
-    aria-expanded="false"
-    aria-controls="{{ id }}-dialog"
-    x-bind="$trigger"
-    {% for key, value in trigger_attrs.items() %}
-      {{ key }}="{{ value }}"
-    {% endfor %}
-  >
-    {{ trigger }} 
-  </button>
-  {% endif %}
-  <div
-    role="dialog"
-    id="{{ id }}-dialog"
-    tabindex="-1"
-    aria-modal="true"
-    aria-labelledby="{{ id }}-title"
-    inert
-    x-bind="$content"
-  >
-    <article
-      {% for key, value in content_attrs.items() %}
-        {{ key }}="{{ value }}"
-      {% endfor %}
-    >
-      {% if title or description %}
-        <header
-          {% for key, value in content_header_attrs.items() %}
-            {{ key }}="{{ value }}"
-          {% endfor %}
-        >
-          <h2 id="{{ id }}-title">{{ title | safe }}</h2>
-          {% if description %}<p>{{ description | safe }}</p>{% endif %}
-        </header>
-      {% endif %}
-      {% if caller %}
-        <section
-          {% for key, value in content_body_attrs.items() %}
-            {{ key }}="{{ value }}"
-          {% endfor %}
-        >
-          {{ caller() }}
-        </section>
-      {% endif %}
-      {% if footer %}
-        <footer
-          {% for key, value in content_footer_attrs.items() %}
-            {{ key }}="{{ value }}"
-          {% endfor %}
-        >
-          {{ footer | safe }}
-        </footer>
-      {% endif %}
-      {% if close_button %}
-        <button
-          @click="hide()"
-          aria-label="Close dialog"
-        >
+  <article {% if close_on_overlay_click %}onclick="event.stopPropagation()"{% endif %}>
+    {% if title or description %}
+      <header
+        {% for key, value in header_attrs %}
+          {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+        <h2 id="{{ id }}-title">{{ title | safe }}</h2>
+        {% if description %}<p id="{{ id }}-description">{{ description | safe }}</p>{% endif %}
+      </header>
+    {% endif %}
+    {% if caller %}
+      <section
+        {% for key, value in body_attrs.items() %}
+          {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+        {{ caller() }}
+      </section>
+    {% endif %}
+    {% if footer %}
+      <footer
+        {% for key, value in footer_attrs.items() %}
+          {{ key }}="{{ value }}"
+        {% endfor %}
+      >
+        {{ footer | safe }}
+      </footer>
+    {% endif %}
+    {% if close_button %}
+      <form method="dialog">
+        <button aria-label="Close dialog">
           <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-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
-        </button>
-      {% endif %}
-    </article>
-  </div>
-</div>
+      </button>
+      </form>
+    {% endif %}
+  </article>
+</dialog>
 {% endmacro %}

package/dist/assets/jinja/dropdown-menu.html.jinja

@@ -3,61 +3,62 @@
 
   @param id {string} [optional] - Unique identifier for the dropdown component.
   @param trigger {string} [optional] - HTML content for the button that triggers the dropdown.
-  @param menu {array} [optional] - Array of menu items for 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 content_attrs {object} [optional] - Additional HTML attributes for the dropdown content div.
+  @param popover_attrs {object} [optional] - Additional HTML attributes for the dropdown content div.
 #}
 {% macro dropdown_menu(
+  trigger,
   id=None,
-  trigger=None,
-  menu=None,
+  items=None,
   main_attrs={},
   trigger_attrs={},
-  content_attrs={}
+  popover_attrs={},
+  menu_attrs={}
 ) %}
+{% set id = id or ("dropdown-menu-" + (range(100000, 999999) | random | string)) %}
+
 <div
-  class="popover {{ main_attrs.class }}"
-  x-data="dropdownMenu"
-  @click.away="open = false"
-  {% if id %}id="{{ id }}"{% endif %}
+  class="dropdown-menu {{ main_attrs.class }}"
   {% for key, value in main_attrs.items() %}
-    {% if key != "class" %}{{ key }}="{{ value }}"{% endif %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
 >
-  {% if trigger %}
   <button
     type="button"
-    aria-haspopup="menu"
-    aria-expanded="false"
-    x-bind="$trigger"
-    {% if id %}
     id="{{ id }}-trigger"
+    aria-haspopup="menu"
     aria-controls="{{ id }}-menu"
-    {% endif %}
+    aria-expanded="false"
     {% for key, value in trigger_attrs.items() %}
       {{ key }}="{{ value }}"
     {% endfor %}
   >
     {{ trigger | safe }}
   </button>
-  {% endif %}
   <div
+    id="{{ id }}"
     data-popover
     aria-hidden="true"
-    x-bind="$content"
-    {% if id %}id="{{ id }}-menu"{% endif %}
-    {% for key, value in content_attrs.items() %}
+    {% for key, value in popover_attrs.items() %}
       {{ key }}="{{ value }}"
     {% endfor %}
   >
-    <nav role="menu">
-      {% if menu %}
-        {{ render_dropdown_items(menu, id ~ "-items" if id else "items") }}
+    <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 %}
-    </nav>
+    </div>
   </div>
 </div>
 {% endmacro %}
@@ -69,7 +70,7 @@
   @param parent_id_prefix {string} [optional] - Prefix for generating element IDs.
 #}
 {% macro render_dropdown_items(items, parent_id_prefix="items") %}
-  {% for item in items.items() %}
+  {% for item in items %}
     {% set item_id = parent_id_prefix ~ "-" ~ loop.index %}
 
     {% if item.type == "group" %}
@@ -77,11 +78,13 @@
       <div
         role="group"
         aria-labelledby="{{ group_label_id }}"
-        {% for key, value in item.attrs.items() %}
-          {{ key }}="{{ value }}"
-        {% endfor %}
+        {% if item.attrs %}
+          {% for key, value in item.attrs.items() %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
       >
-        <div role="heading" id="{{ group_label_id }}">{{ item.label }}</div>
+        <div role="presentation" id="{{ group_label_id }}">{{ item.label }}</div>
         {{ render_dropdown_items(item.items, item_id) if item.items }}
       </div>
     {% elif item.type == "separator" %}
@@ -89,24 +92,29 @@
     {% elif item.type == "item" or not item.type %}
       {% if item.url %}
         <a
+          id="{{ item_id }}"
           role="menuitem"
           href="{{ item.url }}"
-          {% for key, value in item.attrs.items() %}
-            {% if key != "url" %} {{ key }}="{{ value }}" {% endif %}
-          {% endfor %}
+          {% if item.attrs %}
+            {% for key, value in item.attrs.items() %}
+              {% if key != "url" %} {{ key }}="{{ value }}" {% endif %}
+            {% endfor %}
+          {% endif %}
         >
           {{ item.label | safe }}
         </a>
       {% else %}
-        <button
+        <div
+          id="{{ item_id }}"
           role="menuitem"
-          type="button"
-          {% for key, value in item.attrs.items() %}
-             {{ key }}="{{ value }}"
-          {% endfor %}
+          {% if item.attrs %}
+            {% for key, value in item.attrs.items() %}
+              {{ key }}="{{ value }}"
+            {% endfor %}
+          {% endif %}
         >
           {{ item.label | safe }}
-        </button>
+        </div>
       {% endif %}
     {% endif %}
   {% endfor %}

package/dist/assets/jinja/popover.html.jinja

@@ -5,51 +5,43 @@
   @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 content_attrs {object} [optional] - Additional HTML attributes for the popover content div.
+  @param popover_attrs {object} [optional] - Additional HTML attributes for the popover content div.
 #}
 {% macro popover(
+  trigger,
   id=None,
-  trigger=None,
   main_attrs={},
   trigger_attrs={},
-  content_attrs={}
+  popover_attrs={}
 ) %}
+{% set id = id or ("popover-" + (range(100000, 999999) | random | string)) %}
+
 <div
   class="popover {{ main_attrs.class }}"
-  x-data="popover"
-  @click.away="open = false"
-  {% if id %}id="{{ id }}"{% endif %}
   {% for key, value in main_attrs.items() %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
 >
-  {% if trigger %}
   <button
+    id="{{ id }}-trigger"
     type="button"
-    aria-haspopup="menu"
     aria-expanded="false"
-    x-bind="$trigger"
-    {% if id %}
-    id="{{ id }}-trigger"
-    aria-controls="{{ id }}-menu"
-    {% endif %}
+    aria-controls="{{ id }}"
     {% for key, value in trigger_attrs.items() %}
       {{ key }}="{{ value }}"
     {% endfor %}
   >
     {{ trigger | safe }}
   </button>
-  {% endif %}
   <div
+    id="{{ id }}"
     data-popover
     aria-hidden="true"
-    x-bind="$content"
-    {% if id %}id="{{ id }}-menu"{% endif %}
-    {% for key, value in content_attrs.items() %}
+    {% for key, value in popover_attrs.items() %}
       {{ key }}="{{ value }}"
     {% endfor %}
-  >
+  > 
     {{ caller() if caller }}
   </div>
 </div>
-{% endmacro %}
+{% endmacro %}

package/dist/assets/jinja/select.html.jinja

@@ -4,14 +4,13 @@
   @param id {string} [optional] - Unique identifier for the select component.
   @param selected {string} [optional] - The initially selected value.
   @param name {string} [optional] - The name attribute for the hidden input storing the selected value.
-  @param items {array} [optional] - An array of items (objects with type, label, value, attrs, and items) to render.
   @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 content_attrs {object} [optional] - Additional HTML attributes for the popover content div.
+  @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.
+  @param is_combobox {boolean} [optional] [default=false] - Renders a combobox with search functionality if true.
 #}
 {% macro select(
   id=None,
@@ -20,37 +19,57 @@
   items=None,
   main_attrs={},
   trigger_attrs={},
-  content_attrs={},
+  popover_attrs={},
   listbox_attrs={},
   input_attrs={},
   search_placeholder="Search entries...",
-  is_combobox=False
+  is_combobox=false
 ) %}
+{% set id = id or ("select-" + (range(100000, 999999) | random | string)) %}
+
+{% set first_option = namespace(item=None) %}
+{% set selected_option = namespace(item=None) %}
+
+{% 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 selected and sub_item.value == selected and not selected_option.item %}
+        {% set selected_option.item = sub_item %}
+      {% endif %}
+    {% endfor %}
+  {% else %}
+    {% if not first_option.item %}
+      {% set first_option.item = item %}
+    {% endif %}
+    {% if selected and item.value == selected and not selected_option.item %}
+      {% set selected_option.item = item %}
+    {% endif %}
+  {% endif %}
+{% endfor %}
+
+{% set default_option = selected_option.item or first_option.item or None %}
+
 <div
-  class="popover {{ main_attrs.class }}"
-  x-data="select('{{ name }}', '{{ selected or '' }}')"
-  @click.away="open = false"
-  {% if id %}id="{{ id }}"{% endif %}
+  class="select {{ main_attrs.class }}"
   {% for key, value in main_attrs.items() %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
 >
   <button
     type="button"
+    class="btn-outline justify-between font-normal {{ trigger_attrs.class }}"
+    id="{{ id }}-trigger"
     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 }}"
+    aria-controls="{{ id }}-listbox"
     {% for key, value in trigger_attrs.items() %}
       {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
     {% endfor %}
   >
-    <div x-html="selectedLabel" class="flex items-center gap-x-2"
-    ></div>
+    <span class="truncate">{{ default_option.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 %}
@@ -58,11 +77,10 @@
     {% endif %}
   </button>
   <div
+    id="{{ id }}"
     data-popover
     aria-hidden="true"
-    x-bind="$content"
-    {% if id %}id="{{ id }}-content"{% endif %}
-    {% for key, value in content_attrs.items() %}
+    {% for key, value in popover_attrs.items() %}
       {{ key }}="{{ value }}"
     {% endfor %}
   >
@@ -78,38 +96,36 @@
         spellcheck="false"
         aria-autocomplete="list"
         role="combobox"
-        aria-expanded="true"
-        aria-controls="{{ id }}-content"
+        aria-expanded="false"
+        aria-controls="{{ id }}-listbox"
         aria-labelledby="{{ id }}-trigger"
-        x-model="query"
-        x-bind="$filter"
       >
     </header>
     {% endif %}
     <div
       role="listbox"
+      id="{{ id }}-listbox"
       aria-orientation="vertical"
+      aria-labelledby="{{ id }}-trigger"
       {% for key, value in listbox_attrs.items() %}
         {{ key }}="{{ value }}"
       {% endfor %}
     >
       {% if items %}
-        {{ render_select_items(items, id ~ "-items" if id else "items") }}
+        {{ render_select_items(items, default_option.value, id ~ "-items" if id else "items") }}
       {% else %}
         {{ caller() if caller }}
       {% endif %}
     </div>
   </div>
-  {% if name is defined %}
-    <input
-      type="hidden"
-      name="{{ name }}"
-      x-model="selectedValue"
-      {% for key, value in input_attrs.items() %}
-        {% if key != 'name' %}{{ key }}="{{ value }}"{% endif %}
-      {% endfor %}
-    >
-  {% endif %}
+  <input
+    type="hidden"
+    name="{{ name or id ~ '-value' }}"
+    value="{{ (default_option.value if default_option) or '' }}"
+    {% for key, value in input_attrs.items() %}
+      {% if key != 'name' and key != 'value' %}{{ key }}="{{ value }}"{% endif %}
+    {% endfor %}
+  >
 </div>
 {% endmacro %}
 
@@ -119,31 +135,36 @@
   @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, parent_id_prefix="items") %}
-  {% for item in items.items() %}
+{% macro render_select_items(items, selected, 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 }}"
-        {% for key, value in item.attrs.items() %}
-          {{ key }}="{{ value }}"
-        {% endfor %}
+        {% 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, item_id) if item.items }}
+        <div role="presentation" id="{{ group_label_id }}">{{ item.label }}</div>
+        {{ render_select_items(item.items, selected, 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"
         data-value="{{ item.value }}"
-        {% for key, value in item.attrs.items() %}
-           {{ key }}="{{ value }}"
-        {% endfor %}
+        {% if selected == item.value %}aria-selected="true"{% endif %}
+        {% if item.attrs %}
+          {% for key, value in item.attrs.items() %}
+            {{ key }}="{{ value }}"
+          {% endfor %}
+        {% endif %}
       >
         {{ item.label | safe }}
       </div>