basecoat-cli 0.3.9 → 0.3.10-beta.2

package/dist/assets/jinja/carousel.html.jinja

@@ -0,0 +1,111 @@
+{#
+  Renders a carousel component with navigation controls and optional indicators.
+
+  @param id {string} [optional] - Unique identifier for the carousel component. Auto-generated if not provided.
+  @param slides {array} - An array of objects representing carousel slides.
+    Each object should have:
+    - content {string}: HTML content for the slide.
+    - attrs {object} [optional]: Additional HTML attributes for the slide item.
+  @param loop {boolean} [optional] [default=false] - Enable continuous looping.
+  @param autoplay {number} [optional] [default=0] - Auto-advance delay in milliseconds (0 = disabled).
+  @param align {string} [optional] [default='start'] - Slide alignment ('start' or 'center').
+  @param orientation {string} [optional] [default='horizontal'] - Carousel orientation ('horizontal' or 'vertical').
+  @param show_controls {boolean} [optional] [default=true] - Show previous/next navigation buttons.
+  @param show_indicators {boolean} [optional] [default=true] - Show slide indicator dots.
+  @param main_attrs {object} [optional] - Additional HTML attributes for the main container.
+  @param viewport_attrs {object} [optional] - Additional HTML attributes for the viewport container.
+#}
+{% macro carousel(
+    id=None,
+    slides=[],
+    loop=false,
+    autoplay=0,
+    align='start',
+    orientation='horizontal',
+    show_controls=true,
+    show_indicators=true,
+    main_attrs={},
+    viewport_attrs={}
+  )
+%}
+{% set id = id or ("carousel-" + (range(100000, 999999) | random | string)) %}
+<div
+  class="carousel {{ main_attrs.class }}"
+  id="{{ id }}"
+  data-carousel-loop="{{ 'true' if loop else 'false' }}"
+  {% if autoplay > 0 %}data-carousel-autoplay="{{ autoplay }}"{% endif %}
+  data-orientation="{{ orientation }}"
+  role="region"
+  aria-roledescription="carousel"
+  aria-label="Carousel"
+  tabindex="0"
+  {% for key, value in main_attrs.items() %}
+    {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+  {% endfor %}
+>
+  <div
+    class="carousel-viewport {{ viewport_attrs.class }}"
+    {% for key, value in viewport_attrs.items() %}
+      {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
+    {% endfor %}
+  >
+    <div
+      class="carousel-slides"
+      data-orientation="{{ orientation }}"
+    >
+      {% for slide in slides %}
+        <div
+          class="carousel-item"
+          role="group"
+          aria-roledescription="slide"
+          aria-label="{{ loop.index }} of {{ slides | length }}"
+          {% if align == 'center' %}data-align="center"{% endif %}
+          {% if slide.attrs %}
+            {% for key, value in slide.attrs.items() %}
+              {{ key }}="{{ value }}"
+            {% endfor %}
+          {% endif %}
+        >
+          {{ slide.content | safe }}
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+
+  {% if show_controls %}
+    <div class="carousel-controls">
+      <button
+        type="button"
+        class="carousel-prev"
+        aria-label="Previous slide"
+      >
+        <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">
+          <path d="m15 18-6-6 6-6"/>
+        </svg>
+      </button>
+      <button
+        type="button"
+        class="carousel-next"
+        aria-label="Next slide"
+      >
+        <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">
+          <path d="m9 18 6-6-6-6"/>
+        </svg>
+      </button>
+    </div>
+  {% endif %}
+
+  {% if show_indicators %}
+    <div class="carousel-indicators" role="tablist" aria-label="Slides">
+      {% for slide in slides %}
+        <button
+          type="button"
+          role="tab"
+          aria-label="Slide {{ loop.index }}"
+          {% if loop.index == 1 %}aria-current="true"{% else %}aria-current="false"{% endif %}
+        ></button>
+      {% endfor %}
+    </div>
+  {% endif %}
+</div>
+{% endmacro %}

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

@@ -2,8 +2,10 @@
   Renders a select or combobox component.
 
   @param id {string} [optional] - Unique identifier for the select component.
-  @param selected {string} [optional] - The initially selected value.
+  @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.
@@ -17,6 +19,8 @@
   selected=None,
   name=None,
   items=[],
+  multiple=false,
+  placeholder=None,
   main_attrs={},
   trigger_attrs={},
   popover_attrs={},
@@ -27,8 +31,15 @@
 ) %}
 {% 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_option = namespace(item=None) %}
+{% set selected_options = namespace(items=[]) %}
 
 {% if items %}
   {% for item in items %}
@@ -37,33 +48,41 @@
         {% 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 %}
+        {% 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 selected and item.value == selected and not selected_option.item %}
-        {% set selected_option.item = item %}
+      {% if item.value in selectedArray %}
+        {% set selected_options.items = selected_options.items + [item] %}
       {% endif %}
     {% endif %}
   {% endfor %}
 {% endif %}
 
-{% set default_option = selected_option.item or first_option.item or None %}
+{% set default_option = (selected_options.items[0] if selected_options.items 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 (multiple and not selected_options.items) 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.items() %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
 >
   <button
     type="button"
-    class="btn-outline justify-between font-normal {{ trigger_attrs.class }}"
+    class="btn-outline {{ trigger_attrs.class }}"
     id="{{ id }}-trigger"
     aria-haspopup="listbox"
     aria-expanded="false"
@@ -72,7 +91,7 @@
       {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
     {% endfor %}
   >
-    <span class="truncate">{{ default_option.label }}</span>
+    <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 %}
@@ -110,12 +129,13 @@
       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, default_option.value, id ~ "-items" if id else "items") }}
+        {{ render_select_items(items, selectedArray, id ~ "-items" if id else "items") }}
       {% else %}
         {{ caller() if caller }}
       {% endif %}
@@ -124,7 +144,7 @@
   <input
     type="hidden"
     name="{{ name or id ~ '-value' }}"
-    value="{{ (default_option.value if default_option) or '' }}"
+    value="{% if 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 %}
@@ -138,7 +158,7 @@
   @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, selected, parent_id_prefix="items") %}
+{% 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" %}
@@ -153,7 +173,7 @@
         {% endif %}
       >
         <div role="heading" id="{{ group_label_id }}">{{ item.label }}</div>
-        {{ render_select_items(item['items'], selected, item_id) if item['items'] }}
+        {{ render_select_items(item['items'], selectedArray, item_id) if item['items'] }}
       </div>
     {% elif item.type == "separator" %}
       <hr role="separator" />
@@ -161,8 +181,8 @@
       <div
         id="{{ item_id }}"
         role="option"
-        data-value="{{ item.value }}"
-        {% if selected == item.value %}aria-selected="true"{% endif %}
+        {% 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 }}"

package/dist/assets/js/all.js

@@ -508,31 +508,37 @@
     const trigger = selectComponent.querySelector(':scope > button');
     const selectedLabel = trigger.querySelector(':scope > span');
     const popover = selectComponent.querySelector(':scope > [data-popover]');
-    const listbox = popover.querySelector('[role="listbox"]');
+    const listbox = popover ? popover.querySelector('[role="listbox"]') : null;
     const input = selectComponent.querySelector(':scope > input[type="hidden"]');
     const filter = selectComponent.querySelector('header input[type="text"]');
+
     if (!trigger || !popover || !listbox || !input) {
       const missing = [];
       if (!trigger) missing.push('trigger');
       if (!popover) missing.push('popover');
       if (!listbox) missing.push('listbox');
-      if (!input)   missing.push('input');
+      if (!input) missing.push('input');
       console.error(`Select component initialisation failed. Missing element(s): ${missing.join(', ')}`, selectComponent);
       return;
     }
-    
+
     const allOptions = Array.from(listbox.querySelectorAll('[role="option"]'));
     const options = allOptions.filter(opt => opt.getAttribute('aria-disabled') !== 'true');
     let visibleOptions = [...options];
     let activeIndex = -1;
+    const isMultiple = listbox.getAttribute('aria-multiselectable') === 'true';
+    const selectedOptions = isMultiple ? new Set() : null;
+    const placeholder = isMultiple ? (selectComponent.dataset.placeholder || '') : null;
+
+    const getValue = (opt) => opt.dataset.value ?? opt.textContent.trim();
 
     const setActiveOption = (index) => {
       if (activeIndex > -1 && options[activeIndex]) {
         options[activeIndex].classList.remove('active');
       }
-      
+
       activeIndex = index;
-      
+
       if (activeIndex > -1) {
         const activeOption = options[activeIndex];
         activeOption.classList.add('active');
@@ -551,68 +557,118 @@
       return parseFloat(style.transitionDuration) > 0 || parseFloat(style.transitionDelay) > 0;
     };
 
-    const updateValue = (option, triggerEvent = true) => {
-      if (option) {
+    const updateValue = (optionOrOptions, triggerEvent = true) => {
+      let value;
+
+      if (isMultiple) {
+        const opts = Array.isArray(optionOrOptions) ? optionOrOptions : [];
+        selectedOptions.clear();
+        opts.forEach(opt => selectedOptions.add(opt));
+
+        // Get selected options in DOM order
+        const selected = options.filter(opt => selectedOptions.has(opt));
+        if (selected.length === 0) {
+          selectedLabel.textContent = placeholder;
+          selectedLabel.classList.add('text-muted-foreground');
+        } else {
+          selectedLabel.textContent = selected.map(opt => opt.dataset.label || opt.textContent.trim()).join(', ');
+          selectedLabel.classList.remove('text-muted-foreground');
+        }
+
+        value = selected.map(getValue);
+        input.value = JSON.stringify(value);
+      } else {
+        const option = optionOrOptions;
+        if (!option) return;
         selectedLabel.innerHTML = option.innerHTML;
-        input.value = option.dataset.value;
-        listbox.querySelector('[role="option"][aria-selected="true"]')?.removeAttribute('aria-selected');
-        option.setAttribute('aria-selected', 'true');
-        
-        if (triggerEvent) {
-          const event = new CustomEvent('change', {
-            detail: { value: option.dataset.value },
-            bubbles: true
-          });
-          selectComponent.dispatchEvent(event);
+        value = getValue(option);
+        input.value = value;
+      }
+
+      options.forEach(opt => {
+        const isSelected = isMultiple ? selectedOptions.has(opt) : opt === optionOrOptions;
+        if (isSelected) {
+          opt.setAttribute('aria-selected', 'true');
+        } else {
+          opt.removeAttribute('aria-selected');
         }
+      });
+
+      if (triggerEvent) {
+        selectComponent.dispatchEvent(new CustomEvent('change', {
+          detail: { value },
+          bubbles: true
+        }));
       }
     };
 
     const closePopover = (focusOnTrigger = true) => {
       if (popover.getAttribute('aria-hidden') === 'true') return;
-      
+
       if (filter) {
         const resetFilter = () => {
           filter.value = '';
           visibleOptions = [...options];
           allOptions.forEach(opt => opt.setAttribute('aria-hidden', 'false'));
         };
-        
+
         if (hasTransition()) {
           popover.addEventListener('transitionend', resetFilter, { once: true });
         } else {
           resetFilter();
         }
       }
-      
+
       if (focusOnTrigger) trigger.focus();
       popover.setAttribute('aria-hidden', 'true');
       trigger.setAttribute('aria-expanded', 'false');
       setActiveOption(-1);
-    }
+    };
 
-    const selectOption = (option) => {
-      if (!option) return;
-      
-      const oldValue = input.value;
-      const newValue = option.dataset.value;
+    const toggleMultipleValue = (option) => {
+      if (selectedOptions.has(option)) {
+        selectedOptions.delete(option);
+      } else {
+        selectedOptions.add(option);
+      }
+      updateValue(options.filter(opt => selectedOptions.has(opt)));
+    };
 
-      if (newValue != null && newValue !== oldValue) {
-        updateValue(option);
+    const select = (value) => {
+      if (isMultiple) {
+        const option = options.find(opt => getValue(opt) === value && !selectedOptions.has(opt));
+        if (!option) return;
+        selectedOptions.add(option);
+        updateValue(options.filter(opt => selectedOptions.has(opt)));
+      } else {
+        const option = options.find(opt => getValue(opt) === value);
+        if (!option) return;
+        if (input.value !== value) {
+          updateValue(option);
+        }
+        closePopover();
       }
-      
-      closePopover();
     };
 
-    const selectByValue = (value) => {
-      const option = options.find(opt => opt.dataset.value === value);
-      selectOption(option);
+    const deselect = (value) => {
+      if (!isMultiple) return;
+      const option = options.find(opt => getValue(opt) === value && selectedOptions.has(opt));
+      if (!option) return;
+      selectedOptions.delete(option);
+      updateValue(options.filter(opt => selectedOptions.has(opt)));
+    };
+
+    const toggle = (value) => {
+      if (!isMultiple) return;
+      const option = options.find(opt => getValue(opt) === value);
+      if (!option) return;
+      toggleMultipleValue(option);
     };
 
     if (filter) {
       const filterOptions = () => {
         const searchTerm = filter.value.trim().toLowerCase();
-        
+
         setActiveOption(-1);
 
         visibleOptions = [];
@@ -638,17 +694,37 @@
           }
         });
       };
-  
+
       filter.addEventListener('input', filterOptions);
     }
 
-    let initialOption = options.find(opt => opt.dataset.value === input.value);
-    
-    if (!initialOption) {
-      initialOption = options.find(opt => opt.dataset.value !== undefined) ?? options[0];
-    }
+    // Initialization
+    if (isMultiple) {
+      const ariaSelected = options.filter(opt => opt.getAttribute('aria-selected') === 'true');
+      try {
+        const parsed = JSON.parse(input.value || '[]');
+        const validValues = new Set(options.map(getValue));
+        const initialValues = Array.isArray(parsed) ? parsed.filter(v => validValues.has(v)) : [];
+
+        const initialOptions = [];
+        if (initialValues.length > 0) {
+          // Match values to options in order, allowing duplicates
+          initialValues.forEach(val => {
+            const opt = options.find(o => getValue(o) === val && !initialOptions.includes(o));
+            if (opt) initialOptions.push(opt);
+          });
+        } else {
+          initialOptions.push(...ariaSelected);
+        }
 
-    updateValue(initialOption, false);
+        updateValue(initialOptions, false);
+      } catch (e) {
+        updateValue(ariaSelected, false);
+      }
+    } else {
+      const initialOption = options.find(opt => getValue(opt) === input.value) || options[0];
+      if (initialOption) updateValue(initialOption, false);
+    }
 
     const handleKeyNavigation = (event) => {
       const isPopoverOpen = popover.getAttribute('aria-hidden') === 'false';
@@ -664,17 +740,25 @@
         }
         return;
       }
-      
+
       event.preventDefault();
 
       if (event.key === 'Escape') {
         closePopover();
         return;
       }
-      
+
       if (event.key === 'Enter') {
         if (activeIndex > -1) {
-          selectOption(options[activeIndex]);
+          const option = options[activeIndex];
+          if (isMultiple) {
+            toggleMultipleValue(option);
+          } else {
+            if (input.value !== getValue(option)) {
+              updateValue(option);
+            }
+            closePopover();
+          }
         }
         return;
       }
@@ -740,7 +824,7 @@
       document.dispatchEvent(new CustomEvent('basecoat:popover', {
         detail: { source: selectComponent }
       }));
-      
+
       if (filter) {
         if (hasTransition()) {
           popover.addEventListener('transitionend', () => {
@@ -753,7 +837,7 @@
 
       popover.setAttribute('aria-hidden', 'false');
       trigger.setAttribute('aria-expanded', 'true');
-      
+
       const selectedOption = listbox.querySelector('[role="option"][aria-selected="true"]');
       if (selectedOption) {
         setActiveOption(options.indexOf(selectedOption));
@@ -772,8 +856,24 @@
 
     listbox.addEventListener('click', (event) => {
       const clickedOption = event.target.closest('[role="option"]');
-      if (clickedOption) {
-        selectOption(clickedOption);
+      if (!clickedOption) return;
+
+      const option = options.find(opt => opt === clickedOption);
+      if (!option) return;
+
+      if (isMultiple) {
+        toggleMultipleValue(option);
+        setActiveOption(options.indexOf(option));
+        if (filter) {
+          filter.focus();
+        } else {
+          trigger.focus();
+        }
+      } else {
+        if (input.value !== getValue(option)) {
+          updateValue(option);
+        }
+        closePopover();
       }
     });
 
@@ -790,8 +890,43 @@
     });
 
     popover.setAttribute('aria-hidden', 'true');
-    
-    selectComponent.selectByValue = selectByValue;
+
+    // Public API
+    Object.defineProperty(selectComponent, 'value', {
+      get: () => {
+        if (isMultiple) {
+          return options.filter(opt => selectedOptions.has(opt)).map(getValue);
+        } else {
+          return input.value;
+        }
+      },
+      set: (val) => {
+        if (isMultiple) {
+          const values = Array.isArray(val) ? val : (val != null ? [val] : []);
+          const opts = [];
+          values.forEach(v => {
+            const opt = options.find(o => getValue(o) === v && !opts.includes(o));
+            if (opt) opts.push(opt);
+          });
+          updateValue(opts);
+        } else {
+          const option = options.find(opt => getValue(opt) === val);
+          if (option) {
+            updateValue(option);
+            closePopover();
+          }
+        }
+      }
+    });
+
+    selectComponent.select = select;
+    selectComponent.selectByValue = select; // Backward compatibility alias
+    if (isMultiple) {
+      selectComponent.deselect = deselect;
+      selectComponent.toggle = toggle;
+      selectComponent.selectAll = () => updateValue(options);
+      selectComponent.selectNone = () => updateValue([]);
+    }
     selectComponent.dataset.selectInitialized = true;
     selectComponent.dispatchEvent(new CustomEvent('basecoat:initialized'));
   };