@websy/websy-designs 1.4.2 → 1.4.4

package/dist/websy-designs.debug.js

@@ -162,7 +162,9 @@ class ButtonGroup {
     const DEFAULTS = {
       style: 'button',
       subscribers: {},
-      activeItem: 0    
+      activeItem: -1,
+      tag: 'div',
+      allowNone: false
     }
     this.options = Object.assign({}, DEFAULTS, options)
     const el = document.getElementById(this.elementId)
@@ -175,7 +177,7 @@ class ButtonGroup {
     if (event.target.classList.contains('websy-button-group-item')) {
       const index = +event.target.getAttribute('data-index')
       if (this.options.activeItem !== index) {
-        if (this.options.onDeactivate) {
+        if (this.options.onDeactivate && this.options.activeItem !== -1) {
           this.options.onDeactivate(this.options.items[this.options.activeItem], this.options.activeItem)
         }
         this.options.activeItem = index
@@ -191,7 +193,14 @@ class ButtonGroup {
         })        
         event.target.classList.remove('inactive')
         event.target.classList.add('active')        
-      } 
+      }
+      else if (this.options.activeItem === index && this.options.allowNone === true) { 
+        if (this.options.onDeactivate) {
+          this.options.onDeactivate(this.options.items[this.options.activeItem], this.options.activeItem)
+        }
+        this.options.activeItem = -1
+        event.target.classList.remove('active')
+      }
     }    
   }
   on (event, fn) {
@@ -214,7 +223,7 @@ class ButtonGroup {
           activeClass = i === this.options.activeItem ? 'active' : 'inactive'
         }
         return `
-          <div ${(t.attributes || []).join(' ')} data-id="${t.id || t.label}" data-index="${i}" class="websy-button-group-item ${(t.classes || []).join(' ')} ${this.options.style}-style ${activeClass}">${t.label}</div>
+          <${this.options.tag} ${(t.attributes || []).join(' ')} data-id="${t.id || t.label}" data-index="${i}" class="websy-button-group-item ${(t.classes || []).join(' ')} ${this.options.style}-style ${activeClass}">${t.label}</${this.options.tag}>
         `
       }).join('')
     }
@@ -1526,7 +1535,9 @@ class WebsyDropdown {
     if (el) {
       el.style.zIndex = ''
     }
-    scrollEl.scrollTop = 0
+    if (scrollEl) {
+      scrollEl.scrollTo(0, 0)
+    }    
     maskEl.classList.remove('active')
     contentEl.classList.remove('active')
     contentEl.classList.remove('on-top')    
@@ -4479,7 +4490,12 @@ class WebsySearch {
     if (event.target.classList.contains('clear')) {
       const inputEl = document.getElementById(`${this.elementId}_search`)
       inputEl.value = ''
-      this.options.onSearch('')
+      // if (this.options.onSearch) {
+      //   this.options.onSearch('')
+      // }      
+      if (this.options.onClear) {
+        this.options.onClear()
+      }      
     }
   }
   handleKeyDown (event) {
@@ -4511,7 +4527,9 @@ class WebsySearch {
       }      
       else {
         if (this.options.onSearch && (event.key === 'Delete' || event.key === 'Backspace')) {
-          this.options.onSearch('')
+          if (this.options.onClear) {
+            this.options.onClear()
+          }
         }
       }
     }
@@ -6068,12 +6086,16 @@ class WebsyTable3 {
         if (typeof sizingColumns[sizeIndex] === 'undefined') {
           return // need to revisit this logic
         }
-        let style = `width: ${sizingColumns[sizeIndex].width || sizingColumns[sizeIndex].actualWidth}px!important; `        
-        let divStyle = style
+        let style = ''
+        let divStyle = ''
+        if (useWidths === true && (+cell.colspan === 1 || !cell.colspan)) {
+          style = `width: ${sizingColumns[sizeIndex].width || sizingColumns[sizeIndex].actualWidth}px!important; `        
+          divStyle = style
+        }
         if (cell.style) {
           style += cell.style
         }
-        if (useWidths === true) {
+        if (useWidths === true && (+cell.colspan === 1 || !cell.colspan)) {
           style += `max-width: ${sizingColumns[sizeIndex].width || sizingColumns[sizeIndex].actualWidth}px!important;`
           divStyle += `max-width: ${sizingColumns[sizeIndex].width || sizingColumns[sizeIndex].actualWidth}px!important;`
         }        
@@ -6118,6 +6140,25 @@ class WebsyTable3 {
             class='websy-table-cell-collapse'
           >${WebsyDesigns.Icons.MinusFilled}</i>`
         }
+        if (sizingColumns[sizeIndex].showAsLink === true && cell.value.trim() !== '') {
+          cell.value = `
+            <a href='${cell.value}' target='${sizingColumns[sizeIndex].openInNewTab === true ? '_blank' : '_self'}'>${cell.displayText || sizingColumns[sizeIndex].linkText || cell.value}</a>
+          `
+        }
+        if (sizingColumns[sizeIndex].showAsRouterLink === true && cell.value.trim() !== '') {
+          cell.value = `
+            <a data-view='${(cell.link || cell.value).replace(/'/g, '\'')}' class='websy-trigger'>${cell.value}</a>
+          `
+        }
+        if (sizingColumns[sizeIndex].showAsImage === true) {
+          cell.value = `
+            <img               
+              style="width: ${sizingColumns[sizeIndex].imgWidth ? sizingColumns[sizeIndex].imgWidth : 'auto'}; height: ${sizingColumns[sizeIndex].imgHeight ? sizingColumns[sizeIndex].imgHeight : 'auto'};" 
+              src='${cell.value}'
+              ${sizingColumns[sizeIndex].errorImage ? 'onerror="this.src=\'' + sizingColumns[sizeIndex].errorImage + '\'"' : ''}
+            />
+          `
+        }
         bodyHtml += `
           ${cell.value}
         </div></td>`
@@ -6344,9 +6385,11 @@ class WebsyTable3 {
       }
       else if (data) {
         let longest = ''
-        for (let i = 0; i < Math.min(data.length, 1000); i++) {          
-          if (longest.length < data[i][colIndex].value.length) {
-            longest = data[i][colIndex].value
+        for (let i = 0; i < Math.min(data.length, 1000); i++) { 
+          if (data[i].length === this.options.columns[this.options.columns.length - 1].length) {
+            if (longest.length < data[i][colIndex].value.length) {
+              longest = data[i][colIndex].value
+            }
           }
         }
         output.push({value: longest})
@@ -6424,14 +6467,16 @@ class WebsyTable3 {
     this.mouseXStart = null
   }
   handleScrollWheel (event) {
-    event.preventDefault()
-    // console.log('scrollwheel', event)
-    if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
-      this.scrollX(Math.max(-5, Math.min(5, event.deltaX)))
-    }
-    else {
-      this.scrollY(Math.max(-5, Math.min(5, event.deltaY)))
-    }
+    if (this.options.virtualScroll === true) {
+      event.preventDefault()
+      // console.log('scrollwheel', event)
+      if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
+        this.scrollX(Math.max(-5, Math.min(5, event.deltaX)))
+      }
+      else {
+        this.scrollY(Math.max(-5, Math.min(5, event.deltaY)))
+      }
+    }    
   }
   hideError () {
     const el = document.getElementById(`${this.elementId}_tableContainer`)