bitwrench 2.0.10 → 2.0.12

package/src/bitwrench.js

@@ -426,6 +426,26 @@ bw.escapeHTML = function(str) {
   return str.replace(/[&<>"'/]/g, (char) => escapeMap[char]);
 };
 
+/**
+ * Mark a string as raw HTML so it will not be escaped by bw.html() or bw.createDOM().
+ *
+ * By default, bitwrench escapes all text content to prevent XSS. Use bw.raw()
+ * when you need to embed pre-sanitized HTML, entities, or inline markup.
+ *
+ * @param {string} str - HTML string to mark as raw
+ * @returns {Object} Marked object recognized by bw.html() and bw.createDOM()
+ * @category DOM Generation
+ * @see bw.escapeHTML
+ * @see bw.html
+ * @example
+ * bw.raw('Hello &mdash; World')
+ * // Used in TACO content:
+ * { t: 'p', c: bw.raw('Price: <strong>$9.99</strong>') }
+ */
+bw.raw = function(str) {
+  return { __bw_raw: true, v: String(str) };
+};
+
 /**
  * Normalize CSS class names by converting underscores to hyphens for bw-prefixed classes.
  *
@@ -477,6 +497,11 @@ bw.html = function(taco, options = {}) {
     return taco.map(t => bw.html(t, options)).join('');
   }
   
+  // Handle bw.raw() marked content
+  if (taco && taco.__bw_raw) {
+    return taco.v;
+  }
+
   // Handle primitives and non-TACO objects
   if (typeof taco !== 'object' || !taco.t) {
     return options.raw ? String(taco) : bw.escapeHTML(String(taco));
@@ -577,12 +602,21 @@ bw.createDOM = function(taco, options = {}) {
   
   // Handle null/undefined
   if (taco == null) return document.createTextNode('');
-  
+
+  // Handle bw.raw() marked content — inject as HTML
+  if (taco && taco.__bw_raw) {
+    var frag = document.createDocumentFragment();
+    var tmp = document.createElement('span');
+    tmp.innerHTML = taco.v;
+    while (tmp.firstChild) frag.appendChild(tmp.firstChild);
+    return frag;
+  }
+
   // Handle text nodes
   if (typeof taco !== 'object' || !taco.t) {
     return document.createTextNode(String(taco));
   }
-  
+
   const { t: tag, a: attrs = {}, c: content, o: opts = {} } = taco;
   
   // Create element
@@ -647,6 +681,9 @@ bw.createDOM = function(taco, options = {}) {
           }
         }
       });
+    } else if (typeof content === 'object' && content.__bw_raw) {
+      // Raw HTML content — inject via innerHTML
+      el.innerHTML = content.v;
     } else if (typeof content === 'object' && content.t) {
       var childEl = bw.createDOM(content, options);
       el.appendChild(childEl);
@@ -1145,6 +1182,16 @@ bw.patch = function(id, content, attr) {
   if (attr) {
     // Patch an attribute
     el.setAttribute(attr, String(content));
+  } else if (Array.isArray(content)) {
+    // Patch with array of children (strings and/or TACOs)
+    el.innerHTML = '';
+    content.forEach(function(item) {
+      if (typeof item === 'string' || typeof item === 'number') {
+        el.appendChild(document.createTextNode(String(item)));
+      } else if (item && item.t) {
+        el.appendChild(bw.createDOM(item));
+      }
+    });
   } else if (typeof content === 'object' && content !== null && content.t) {
     // Patch with a TACO — replace children
     el.innerHTML = '';
@@ -2341,6 +2388,7 @@ bw.getURLParam = function(key, defaultValue) {
  * @see bw.makeTable
  */
 bw.htmlTable = function(data, opts = {}) {
+  console.warn('bw.htmlTable() is deprecated. Use bw.makeTableFromArray() for TACO output or bw.makeTable() for object-array data.');
   if (bw.typeOf(data) !== "array" || data.length < 1) return "";
   
   const dopts = {
@@ -2440,6 +2488,7 @@ bw._attrsToStr = function(attrs) {
  * @see bw.makeTabs
  */
 bw.htmlTabs = function(tabData, opts = {}) {
+  console.warn('bw.htmlTabs() is deprecated. Use bw.makeTabs() instead.');
   if (bw.typeOf(tabData) !== "array" || tabData.length < 1) return "";
   
   const dopts = {
@@ -2486,6 +2535,7 @@ bw.htmlTabs = function(tabData, opts = {}) {
  * @category Legacy (v1)
  */
 bw.selectTabContent = function(tabElement) {
+  console.warn('bw.selectTabContent() is deprecated. Use bw.makeTabs() instead.');
   if (!bw._isBrowser || !tabElement) return;
   
   const container = tabElement.closest(".bw-tab-container");
@@ -3014,12 +3064,21 @@ bw.makeTable = function(config) {
   const {
     data = [],
     columns,
-    className = "table",
+    className = '',
+    striped = false,
+    hover = false,
     sortable = true,
     onSort,
     sortColumn,
     sortDirection = 'asc'
   } = config;
+
+  // Build class list: always include bw-table, add striped/hover, append user className
+  let cls = 'bw-table';
+  if (striped) cls += ' bw-table-striped';
+  if (hover) cls += ' bw-table-hover';
+  if (className) cls += ' ' + className;
+  cls = cls.trim();
   
   // Auto-detect columns if not provided
   const cols = columns || (data.length > 0 
@@ -3107,11 +3166,176 @@ bw.makeTable = function(config) {
   
   return {
     t: 'table',
-    a: { class: className },
+    a: { class: cls },
     c: [thead, tbody]
   };
 };
 
+/**
+ * Create a table from a 2D array.
+ *
+ * Converts a 2D array into the object-array format that `bw.makeTable()`
+ * expects, then delegates. By default, the first row is used as column
+ * headers. All standard `makeTable` props (striped, hover, sortable,
+ * columns, onSort, etc.) are passed through.
+ *
+ * @param {Object} config - Configuration object
+ * @param {Array<Array>} config.data - 2D array of values
+ * @param {boolean} [config.headerRow=true] - Treat first row as column headers
+ * @param {boolean} [config.striped=false] - Striped rows
+ * @param {boolean} [config.hover=false] - Hover highlight
+ * @param {boolean} [config.sortable=true] - Enable sort
+ * @param {Array<Object>} [config.columns] - Override auto-generated column defs
+ * @param {string} [config.className=''] - Additional CSS classes
+ * @param {Function} [config.onSort] - Sort callback
+ * @param {string} [config.sortColumn] - Currently sorted column key
+ * @param {string} [config.sortDirection='asc'] - Sort direction
+ * @returns {Object} TACO object for table
+ * @category Component Builders
+ * @see bw.makeTable
+ * @example
+ * bw.makeTableFromArray({
+ *   data: [
+ *     ['Name', 'Role', 'Status'],
+ *     ['Alice', 'Engineer', 'Active'],
+ *     ['Bob', 'Designer', 'Away']
+ *   ],
+ *   striped: true,
+ *   hover: true
+ * });
+ */
+bw.makeTableFromArray = function(config) {
+  const { data = [], headerRow = true, columns, ...rest } = config;
+
+  if (!Array.isArray(data) || data.length === 0) {
+    return bw.makeTable({ data: [], columns: columns || [], ...rest });
+  }
+
+  // Determine headers
+  let headers;
+  let rows;
+  if (headerRow && data.length > 0) {
+    headers = data[0].map(function(h) { return String(h); });
+    rows = data.slice(1);
+  } else {
+    // Generate col0, col1, ... headers
+    const width = data[0].length;
+    headers = [];
+    for (let i = 0; i < width; i++) {
+      headers.push('col' + i);
+    }
+    rows = data;
+  }
+
+  // Convert rows to object arrays
+  const objData = rows.map(function(row) {
+    const obj = {};
+    headers.forEach(function(key, i) {
+      obj[key] = row[i] !== undefined ? row[i] : '';
+    });
+    return obj;
+  });
+
+  // Auto-generate column defs if not provided
+  const cols = columns || headers.map(function(key) {
+    return { key: key, label: key };
+  });
+
+  return bw.makeTable({ data: objData, columns: cols, ...rest });
+};
+
+/**
+ * Create a vertical bar chart from data.
+ *
+ * Renders a pure-CSS bar chart using flexbox and percentage heights.
+ * No canvas, SVG, or external charting library required.
+ *
+ * @param {Object} config - Chart configuration
+ * @param {Array<Object>} config.data - Array of data objects
+ * @param {string} [config.labelKey='label'] - Key for bar labels
+ * @param {string} [config.valueKey='value'] - Key for bar values
+ * @param {string} [config.title] - Chart title
+ * @param {string} [config.color='#006666'] - Bar color (hex or CSS color)
+ * @param {string} [config.height='200px'] - Height of the chart area
+ * @param {Function} [config.formatValue] - Value label formatter: (value) => string
+ * @param {boolean} [config.showValues=true] - Show value labels above bars
+ * @param {boolean} [config.showLabels=true] - Show labels below bars
+ * @param {string} [config.className=''] - Additional CSS classes
+ * @returns {Object} TACO object
+ * @category Component Builders
+ * @example
+ * bw.makeBarChart({
+ *   data: [
+ *     { label: 'Jan', value: 12400 },
+ *     { label: 'Feb', value: 15800 },
+ *     { label: 'Mar', value: 9200 }
+ *   ],
+ *   title: 'Monthly Revenue',
+ *   color: '#0077b6',
+ *   formatValue: (v) => '$' + (v / 1000).toFixed(1) + 'k'
+ * });
+ */
+bw.makeBarChart = function(config) {
+  const {
+    data = [],
+    labelKey = 'label',
+    valueKey = 'value',
+    title,
+    color = '#006666',
+    height = '200px',
+    formatValue,
+    showValues = true,
+    showLabels = true,
+    className = ''
+  } = config;
+
+  if (!Array.isArray(data) || data.length === 0) {
+    return { t: 'div', a: { class: ('bw-bar-chart-container ' + className).trim() }, c: '' };
+  }
+
+  const values = data.map(function(d) { return Number(d[valueKey]) || 0; });
+  const maxVal = Math.max.apply(null, values);
+
+  const bars = data.map(function(d, i) {
+    const val = values[i];
+    const pct = maxVal > 0 ? (val / maxVal * 100) : 0;
+    const formatted = formatValue ? formatValue(val) : String(val);
+
+    const children = [];
+    if (showValues) {
+      children.push({ t: 'div', a: { class: 'bw-bar-value' }, c: formatted });
+    }
+    children.push({
+      t: 'div',
+      a: {
+        class: 'bw-bar',
+        style: 'height:' + pct + '%;background:' + color + ';'
+      }
+    });
+    if (showLabels) {
+      children.push({ t: 'div', a: { class: 'bw-bar-label' }, c: String(d[labelKey] || '') });
+    }
+
+    return { t: 'div', a: { class: 'bw-bar-group' }, c: children };
+  });
+
+  const chartChildren = [];
+  if (title) {
+    chartChildren.push({ t: 'h3', a: { class: 'bw-bar-chart-title' }, c: title });
+  }
+  chartChildren.push({
+    t: 'div',
+    a: { class: 'bw-bar-chart', style: 'height:' + height + ';' },
+    c: bars
+  });
+
+  return {
+    t: 'div',
+    a: { class: ('bw-bar-chart-container ' + className).trim() },
+    c: chartChildren
+  };
+};
+
 /**
  * Create a responsive data table with title and optional wrapper
  *
@@ -3122,7 +3346,9 @@ bw.makeTable = function(config) {
  * @param {string} [config.title] - Table title heading
  * @param {Array<Object>} config.data - Array of row objects
  * @param {Array<Object>} [config.columns] - Column definitions
- * @param {string} [config.className="table table-striped table-hover"] - Table CSS class
+ * @param {string} [config.className=''] - Additional CSS classes for the table
+ * @param {boolean} [config.striped=true] - Add striped row styling
+ * @param {boolean} [config.hover=true] - Add hover row highlighting
  * @param {boolean} [config.responsive=true] - Wrap table in responsive overflow div
  * @returns {Object} TACO object for table with wrapper
  * @example
@@ -3137,7 +3363,9 @@ bw.makeDataTable = function(config) {
     title,
     data,
     columns,
-    className = "table table-striped table-hover",
+    className = '',
+    striped = true,
+    hover = true,
     responsive = true,
     ...tableConfig
   } = config;
@@ -3146,6 +3374,8 @@ bw.makeDataTable = function(config) {
     data,
     columns,
     className,
+    striped,
+    hover,
     ...tableConfig
   });
   

package/src/generate-css.js

@@ -3,7 +3,7 @@
  * Creates class-based CSS to prevent collisions with other frameworks
  */
 
-import { getAllStyles } from './bitwrench-styles.js';
+import { getAllStyles, getStructuralStyles } from './bitwrench-styles.js';
 import fs from 'fs';
 import path from 'path';
 
@@ -92,8 +92,25 @@ function processRules(rules, indent = '') {
   return css;
 }
 
-// Generate the CSS
-const styles = getAllStyles();
+// Deep-merge themed + structural: structural properties override themed
+// per-property within the same selector (not overwriting entire selectors)
+function deepMergeStyles(base, overrides) {
+  const merged = Object.assign({}, base);
+  for (const [selector, rules] of Object.entries(overrides)) {
+    if (merged[selector] && typeof merged[selector] === 'object' && typeof rules === 'object') {
+      merged[selector] = Object.assign({}, merged[selector], rules);
+    } else {
+      merged[selector] = rules;
+    }
+  }
+  return merged;
+}
+
+// Generate the CSS — merge themed styles + structural styles
+const themed = getAllStyles();
+const structural = getStructuralStyles();
+// Structural properties take precedence; themed properties preserved where structural doesn't override
+const styles = deepMergeStyles(themed, structural);
 const css = stylesToCSS(styles);
 
 // Add additional bitwrench-specific styles

package/src/version.js

@@ -3,14 +3,14 @@
  * DO NOT EDIT DIRECTLY - Use npm run generate-version
  */
 
-export const VERSION = '2.0.10';
+export const VERSION = '2.0.12';
 export const VERSION_INFO = {
-  version: '2.0.10',
+  version: '2.0.12',
   name: 'bitwrench',
   description: 'A library for javascript UI functions.',
   license: 'BSD-2-Clause',
-  homepage: 'http://deftio.com/bitwrench',
+  homepage: 'https://deftio.github.com/bitwrench/pages',
   repository: 'git+https://github.com/deftio/bitwrench.git',
   author: 'manu a. chatterjee <deftio@deftio.com> (https://deftio.com/)',
-  buildDate: '2026-03-07T03:14:16.606Z'
+  buildDate: '2026-03-07T22:31:35.755Z'
 };