bitwrench 2.0.18 → 2.0.19

package/dist/bitwrench-bccl.umd.js

@@ -1,4 +1,4 @@
-/*! bitwrench-bccl v2.0.18 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
+/*! bitwrench-bccl v2.0.19 | BSD-2-Clause | https://deftio.github.com/bitwrench/pages */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
   typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -179,7 +179,12 @@
         },
         o: {
           type: 'card',
-          state: props.state || {}
+          state: props.state || {},
+          slots: {
+            title: '.bw_card_title',
+            content: '.bw_card_body',
+            footer: '.bw_card_footer'
+          }
         }
       };
     }
@@ -190,7 +195,12 @@
       c: cardContent,
       o: {
         type: 'card',
-        state: props.state || {}
+        state: props.state || {},
+        slots: {
+          title: '.bw_card_title',
+          content: '.bw_card_body',
+          footer: '.bw_card_footer'
+        }
       }
     };
   }
@@ -508,6 +518,24 @@
       }
     });
 
+    // Shared tab switching logic
+    function switchTab(el, index) {
+      var allTabs = el.querySelectorAll('.bw_nav_link');
+      var allPanes = el.querySelectorAll('.bw_tab_pane');
+      if (index < 0 || index >= allTabs.length) return;
+      allTabs.forEach(function(t) {
+        t.classList.remove('active');
+        t.setAttribute('aria-selected', 'false');
+        t.setAttribute('tabindex', '-1');
+      });
+      allPanes.forEach(function(p) { p.classList.remove('active'); });
+      allTabs[index].classList.add('active');
+      allTabs[index].setAttribute('aria-selected', 'true');
+      allTabs[index].setAttribute('tabindex', '0');
+      allPanes[index].classList.add('active');
+      if (el._bw_state) el._bw_state.activeIndex = index;
+    }
+
     return {
       t: 'div',
       a: { class: 'bw_tabs' },
@@ -526,24 +554,8 @@
                 role: 'tab',
                 tabindex: index === actualActiveIndex ? '0' : '-1',
                 'aria-selected': index === actualActiveIndex ? 'true' : 'false',
-                'data-tab-index': index,
                 onclick: (e) => {
-                  const tabsContainer = e.target.closest('.bw_tabs');
-                  const allTabs = tabsContainer.querySelectorAll('.bw_nav_link');
-                  const allPanes = tabsContainer.querySelectorAll('.bw_tab_pane');
-
-                  allTabs.forEach(t => {
-                    t.classList.remove('active');
-                    t.setAttribute('aria-selected', 'false');
-                    t.setAttribute('tabindex', '-1');
-                  });
-                  allPanes.forEach(p => p.classList.remove('active'));
-
-                  e.target.classList.add('active');
-                  e.target.setAttribute('aria-selected', 'true');
-                  e.target.setAttribute('tabindex', '0');
-                  const targetIndex = parseInt(e.target.getAttribute('data-tab-index'));
-                  allPanes[targetIndex].classList.add('active');
+                  switchTab(e.target.closest('.bw_tabs'), index);
                 }
               },
               c: tab.label
@@ -566,6 +578,10 @@
       o: {
         type: 'tabs',
         state: { activeIndex: actualActiveIndex },
+        handle: {
+          setActiveTab: switchTab,
+          getActiveTab: function(el) { return (el._bw_state && el._bw_state.activeIndex) || 0; }
+        },
         mounted: function(el) {
           var tablist = el.querySelector('[role="tablist"]');
           if (!tablist) return;
@@ -651,7 +667,13 @@
           },
           c: '×'
         }
-      ].filter(Boolean)
+      ].filter(Boolean),
+      o: {
+        type: 'alert',
+        handle: {
+          dismiss: function(el) { if (el && el.parentNode) el.parentNode.removeChild(el); }
+        }
+      }
     };
   }
 
@@ -749,6 +771,24 @@
           'aria-valuemax': max
         },
         c: label || `${percentage}%`
+      },
+      o: {
+        type: 'progress',
+        handle: {
+          setValue: function(el, n) {
+            var bar = el.querySelector('.bw_progress_bar');
+            if (!bar) return;
+            var maxVal = parseInt(bar.getAttribute('aria-valuemax')) || 100;
+            var pct = Math.round((n / maxVal) * 100);
+            bar.style.width = pct + '%';
+            bar.setAttribute('aria-valuenow', n);
+            bar.textContent = pct + '%';
+          },
+          getValue: function(el) {
+            var bar = el.querySelector('.bw_progress_bar');
+            return bar ? parseInt(bar.getAttribute('aria-valuenow')) || 0 : 0;
+          }
+        }
       }
     };
   }
@@ -1758,6 +1798,26 @@
           class: `bw_pagination ${size ? 'bw_pagination_' + size : ''} ${className}`.trim()
         },
         c: items
+      },
+      o: {
+        type: 'pagination',
+        state: { currentPage: currentPage, pages: pages },
+        handle: {
+          setPage: function(el, n) {
+            if (n < 1 || n > pages) return;
+            var allItems = el.querySelectorAll('.bw_page_item');
+            for (var i = 0; i < allItems.length; i++) {
+              allItems[i].classList.remove('bw_active');
+            }
+            // +1 offset: first item is prev arrow
+            if (allItems[n]) allItems[n].classList.add('bw_active');
+            if (el._bw_state) el._bw_state.currentPage = n;
+            if (onPageChange) onPageChange(n);
+          },
+          getPage: function(el) {
+            return (el._bw_state && el._bw_state.currentPage) || 1;
+          }
+        }
       }
     };
   }
@@ -1906,7 +1966,6 @@
                   class: `bw_accordion_button ${item.open ? '' : 'bw_collapsed'}`.trim(),
                   type: 'button',
                   'aria-expanded': item.open ? 'true' : 'false',
-                  'data-accordion-index': index,
                   onclick: function(e) {
                     var btn = e.target.closest('.bw_accordion_button');
                     var accordionEl = btn.closest('.bw_accordion');
@@ -1981,7 +2040,43 @@
       }),
       o: {
         type: 'accordion',
-        state: { multiOpen: multiOpen }
+        state: { multiOpen: multiOpen },
+        handle: {
+          toggle: function(el, index) {
+            var items = el.querySelectorAll('.bw_accordion_item');
+            if (index < 0 || index >= items.length) return;
+            var btn = items[index].querySelector('.bw_accordion_button');
+            if (btn) btn.click();
+          },
+          openAll: function(el) {
+            var items = el.querySelectorAll('.bw_accordion_item');
+            for (var i = 0; i < items.length; i++) {
+              var collapse = items[i].querySelector('.bw_accordion_collapse');
+              var btn = items[i].querySelector('.bw_accordion_button');
+              if (!collapse.classList.contains('bw_collapse_show')) {
+                collapse.classList.add('bw_collapse_show');
+                collapse.style.maxHeight = 'none';
+                btn.classList.remove('bw_collapsed');
+                btn.setAttribute('aria-expanded', 'true');
+              }
+            }
+          },
+          closeAll: function(el) {
+            var items = el.querySelectorAll('.bw_accordion_item');
+            for (var i = 0; i < items.length; i++) {
+              var collapse = items[i].querySelector('.bw_accordion_collapse');
+              var btn = items[i].querySelector('.bw_accordion_button');
+              if (collapse.classList.contains('bw_collapse_show')) {
+                collapse.style.maxHeight = collapse.scrollHeight + 'px';
+                collapse.offsetHeight;
+                collapse.style.maxHeight = '0px';
+                collapse.classList.remove('bw_collapse_show');
+                btn.classList.add('bw_collapsed');
+                btn.setAttribute('aria-expanded', 'false');
+              }
+            }
+          }
+        }
       }
     };
   }
@@ -2071,6 +2166,14 @@
       },
       o: {
         type: 'modal',
+        handle: {
+          open: function(el) {
+            el.classList.add('bw_modal_show');
+            el.style.display = 'flex';
+            document.body.style.overflow = 'hidden';
+          },
+          close: function(el) { closeModal(el); }
+        },
         mounted: function(el) {
           // Click backdrop to close
           el.addEventListener('click', function(e) {
@@ -2129,9 +2232,8 @@
     return {
       t: 'div',
       a: {
-        class: `bw_toast ${variantClass(variant)} ${className}`.trim(),
-        role: 'alert',
-        'data-position': position
+        class: `bw_toast ${variantClass(variant)} bw_toast_${position.replace(/-/g, '_')} ${className}`.trim(),
+        role: 'alert'
       },
       c: [
         (title) && {
@@ -2165,6 +2267,12 @@
       ].filter(Boolean),
       o: {
         type: 'toast',
+        handle: {
+          dismiss: function(el) {
+            el.classList.add('bw_toast_hiding');
+            setTimeout(function() { if (el.parentNode) el.parentNode.removeChild(el); }, 300);
+          }
+        },
         mounted: function(el) {
           // Trigger show animation
           requestAnimationFrame(function() {
@@ -2522,7 +2630,7 @@
       var total = carouselEl.querySelectorAll('.bw_carousel_slide').length;
       if (index < 0) index = total - 1;
       if (index >= total) index = 0;
-      carouselEl.setAttribute('data-carousel-index', index);
+      carouselEl._bw_carouselIndex = index;
       var track = carouselEl.querySelector('.bw_carousel_track');
       track.style.transform = 'translateX(-' + (index * 100) + '%)';
       // Update indicators
@@ -2579,7 +2687,7 @@
           'aria-label': 'Previous slide',
           onclick: function(e) {
             var carousel = e.target.closest('.bw_carousel');
-            var idx = parseInt(carousel.getAttribute('data-carousel-index') || '0');
+            var idx = carousel._bw_carouselIndex || 0;
             goToSlide(carousel, idx - 1);
           }
         },
@@ -2593,7 +2701,7 @@
           'aria-label': 'Next slide',
           onclick: function(e) {
             var carousel = e.target.closest('.bw_carousel');
-            var idx = parseInt(carousel.getAttribute('data-carousel-index') || '0');
+            var idx = carousel._bw_carouselIndex || 0;
             goToSlide(carousel, idx + 1);
           }
         },
@@ -2613,11 +2721,9 @@
               class: 'bw_carousel_indicator' + (i === startIndex ? ' active' : ''),
               type: 'button',
               'aria-label': 'Go to slide ' + (i + 1),
-              'data-slide-index': i,
               onclick: function(e) {
                 var carousel = e.target.closest('.bw_carousel');
-                var idx = parseInt(e.target.getAttribute('data-slide-index'));
-                goToSlide(carousel, idx);
+                goToSlide(carousel, i);
               }
             }
           };
@@ -2631,17 +2737,37 @@
         class: ('bw_carousel ' + className).trim(),
         style: 'height: ' + height,
         tabindex: '0',
-        'aria-roledescription': 'carousel',
-        'data-carousel-index': startIndex
+        'aria-roledescription': 'carousel'
       },
       c: children,
       o: {
         type: 'carousel',
         state: { activeIndex: startIndex, autoPlay: autoPlay, interval: interval },
+        handle: {
+          goToSlide: function(el, index) { goToSlide(el, index); },
+          next: function(el) { goToSlide(el, (el._bw_carouselIndex || 0) + 1); },
+          prev: function(el) { goToSlide(el, (el._bw_carouselIndex || 0) - 1); },
+          getActiveIndex: function(el) { return el._bw_carouselIndex || 0; },
+          pause: function(el) {
+            if (el._bw_carouselInterval) {
+              clearInterval(el._bw_carouselInterval);
+              el._bw_carouselInterval = null;
+            }
+          },
+          play: function(el) {
+            if (!el._bw_carouselInterval && el._bw_state) {
+              var ms = el._bw_state.interval || 5000;
+              el._bw_carouselInterval = setInterval(function() {
+                goToSlide(el, (el._bw_carouselIndex || 0) + 1);
+              }, ms);
+            }
+          }
+        },
         mounted: function(el) {
+          el._bw_carouselIndex = startIndex;
           // Keyboard navigation
           el.addEventListener('keydown', function(e) {
-            var idx = parseInt(el.getAttribute('data-carousel-index') || '0');
+            var idx = el._bw_carouselIndex || 0;
             if (e.key === 'ArrowLeft') {
               e.preventDefault();
               goToSlide(el, idx - 1);
@@ -2653,7 +2779,7 @@
           // Auto-play
           if (autoPlay) {
             var intervalId = setInterval(function() {
-              var idx = parseInt(el.getAttribute('data-carousel-index') || '0');
+              var idx = el._bw_carouselIndex || 0;
               goToSlide(el, idx + 1);
             }, interval);
             el._bw_carouselInterval = intervalId;
@@ -2663,7 +2789,7 @@
             });
             el.addEventListener('mouseleave', function() {
               el._bw_carouselInterval = setInterval(function() {
-                var idx = parseInt(el.getAttribute('data-carousel-index') || '0');
+                var idx = el._bw_carouselIndex || 0;
                 goToSlide(el, idx + 1);
               }, interval);
             });
@@ -2779,7 +2905,13 @@
       t: 'div',
       a: { class: classes, style: style },
       c: children,
-      o: { type: 'stat-card' }
+      o: {
+        type: 'stat-card',
+        slots: {
+          value: '.bw_stat_value',
+          label: '.bw_stat_label'
+        }
+      }
     };
   }
 
@@ -3458,7 +3590,7 @@
     function makeChipEl(text) {
       return {
         t: 'span',
-        a: { class: 'bw_chip', 'data-chip-value': text },
+        a: { class: 'bw_chip' },
         c: [
           text,
           {
@@ -3469,9 +3601,8 @@
               'aria-label': 'Remove ' + text,
               onclick: function(e) {
                 var chip = e.target.closest('.bw_chip');
-                var val = chip.getAttribute('data-chip-value');
                 chip.parentNode.removeChild(chip);
-                if (onRemove) onRemove(val);
+                if (onRemove) onRemove(text);
               }
             },
             c: '\u00D7'
@@ -3499,7 +3630,7 @@
                 // Insert chip before the input
                 var chipEl = document.createElement('span');
                 chipEl.className = 'bw_chip';
-                chipEl.setAttribute('data-chip-value', val);
+                chipEl._bw_chipValue = val;
                 chipEl.innerHTML = '';
                 chipEl.textContent = val;
                 var removeBtn = document.createElement('button');
@@ -3522,7 +3653,7 @@
                 var chipEls = wrapper.querySelectorAll('.bw_chip');
                 if (chipEls.length) {
                   var last = chipEls[chipEls.length - 1];
-                  var removedVal = last.getAttribute('data-chip-value');
+                  var removedVal = last._bw_chipValue || last.firstChild.textContent;
                   last.parentNode.removeChild(last);
                   if (onRemove) onRemove(removedVal);
                 }
@@ -3531,7 +3662,50 @@
           }
         }
       ],
-      o: { type: 'chip-input' }
+      o: {
+        type: 'chip-input',
+        handle: {
+          addChip: function(el, text) {
+            if (!text) return;
+            var input = el.querySelector('.bw_chip_field');
+            var chipEl = document.createElement('span');
+            chipEl.className = 'bw_chip';
+            chipEl._bw_chipValue = text;
+            chipEl.textContent = text;
+            var removeBtn = document.createElement('button');
+            removeBtn.type = 'button';
+            removeBtn.className = 'bw_chip_remove';
+            removeBtn.setAttribute('aria-label', 'Remove ' + text);
+            removeBtn.textContent = '\u00D7';
+            removeBtn.onclick = function() { chipEl.parentNode.removeChild(chipEl); };
+            chipEl.appendChild(removeBtn);
+            el.insertBefore(chipEl, input);
+          },
+          removeChip: function(el, text) {
+            var chips = el.querySelectorAll('.bw_chip');
+            for (var i = 0; i < chips.length; i++) {
+              if ((chips[i]._bw_chipValue || chips[i].firstChild.textContent) === text) {
+                chips[i].parentNode.removeChild(chips[i]);
+                return;
+              }
+            }
+          },
+          getChips: function(el) {
+            var chips = el.querySelectorAll('.bw_chip');
+            var values = [];
+            for (var i = 0; i < chips.length; i++) {
+              values.push(chips[i]._bw_chipValue || chips[i].firstChild.textContent);
+            }
+            return values;
+          },
+          clear: function(el) {
+            var chips = el.querySelectorAll('.bw_chip');
+            for (var i = chips.length - 1; i >= 0; i--) {
+              chips[i].parentNode.removeChild(chips[i]);
+            }
+          }
+        }
+      }
     };
   }
 
@@ -3725,15 +3899,14 @@
     // Variant class helper
     bw.variantClass = variantClass;
 
-    // Create functions that return handles
-    if (typeof bw.renderComponent === 'function') {
+    // Create functions that return DOM elements
+    if (typeof bw.createDOM === 'function') {
       Object.entries(components).forEach(function(entry) {
         var name = entry[0], fn = entry[1];
         if (name.indexOf('make') === 0) {
           var createName = 'create' + name.substring(4);
           bw[createName] = function(props) {
-            var taco = fn(props);
-            return bw.renderComponent(taco);
+            return bw.createDOM(fn(props));
           };
         }
       });