@websy/websy-designs 1.4.3 → 1.4.5

package/dist/websy-designs-es6.debug.js

@@ -158,7 +158,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)
@@ -171,7 +173,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
@@ -187,7 +189,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) {
@@ -210,7 +219,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('')
     }
@@ -1606,7 +1615,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')    
@@ -3686,6 +3697,26 @@ class WebsyRouter {
       this.navigate(`${inputPath}?${path}`, 'main', null, noHistory)
     }
   }
+  removeAllUrlParams (reloadView = false, noHistory = true) {
+    // const output = {
+    //   path: '',
+    //   items: {}
+    // }
+    // this.currentParams = output
+    let inputPath = this.currentView
+    if (this.options.urlPrefix) {
+      inputPath = `/${this.options.urlPrefix}/${inputPath}`
+    }    
+    if (reloadView === true) {
+      this.navigate(`${inputPath}`, 'main', null, noHistory)
+    }
+    else {
+      this.currentParams = {
+        path: '',
+        items: {}
+      }
+    }
+  }
   buildUrlPath (params) {
     let path = []
     for (let key in params) {
@@ -3706,6 +3737,9 @@ class WebsyRouter {
         if (!this.groups[g]) {
           this.addGroup(g)
         }
+        if (els[i].classList.contains(this.options.activeClass)) {
+          this.groups[g].activeView = v
+        }
         if (this.groups[g].views.indexOf(v) === -1) {
           this.groups[g].views.push(v)
         }
@@ -3749,9 +3783,9 @@ class WebsyRouter {
         if (this.groups[g].activeView) {
           views.push({view: this.groups[g].activeView, group: g})
         }
-        else {
-          views.push({view: this.groups[g].views[0], group: g})
-        }        
+        // else {
+        //   views.push({view: this.groups[g].views[0], group: g})
+        // }        
       }
     }
     return views
@@ -3924,12 +3958,12 @@ class WebsyRouter {
       <article id='${elementId}_content' class='websy-content-article'></article>
       <div id='${elementId}_loading' class='websy-loading-container'><div class='websy-ripple'><div></div><div></div></div></div>
     `
-    if (options.help && options.help !== '') {
+    if (options && options.help && options.help !== '') {
       html += `
         <Help not yet supported>
       `
     }
-    if (options.tooltip && options.tooltip.value && options.tooltip.value !== '') {
+    if (options && options.tooltip && options.tooltip.value && options.tooltip.value !== '') {
       html += `
           <div class="websy-info ${this.options.tooltip.classes.join(' ') || ''}" data-info="${this.options.tooltip.value}">
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512"><title>ionicons-v5-e</title><path d="M256,56C145.72,56,56,145.72,56,256s89.72,200,200,200,200-89.72,200-200S366.28,56,256,56Zm0,82a26,26,0,1,1-26,26A26,26,0,0,1,256,138Zm48,226H216a16,16,0,0,1,0-32h28V244H228a16,16,0,0,1,0-32h32a16,16,0,0,1,16,16V332h28a16,16,0,0,1,0,32Z"/></svg>
@@ -4035,7 +4069,7 @@ class WebsyRouter {
       this.addGroup(group)
     }
     if (toggle === true && this.groups[group].activeView !== '') {
-      newPath = ''
+      newPath = inputPath === this.groups[group].activeView ? '' : inputPath
     }        
     this.previousView = this.currentView    
     this.previousPath = this.currentPath    
@@ -5677,12 +5711,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;`
         }        
@@ -5727,6 +5765,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>`
@@ -6035,14 +6092,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`)

package/dist/websy-designs-es6.js

@@ -206,7 +206,9 @@ var ButtonGroup = /*#__PURE__*/function () {
     var DEFAULTS = {
       style: 'button',
       subscribers: {},
-      activeItem: 0
+      activeItem: -1,
+      tag: 'div',
+      allowNone: false
     };
     this.options = _extends({}, DEFAULTS, options);
     var el = document.getElementById(this.elementId);
@@ -224,7 +226,7 @@ var ButtonGroup = /*#__PURE__*/function () {
         var 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);
           }
 
@@ -243,6 +245,13 @@ var ButtonGroup = /*#__PURE__*/function () {
           });
           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');
         }
       }
     }
@@ -277,7 +286,7 @@ var ButtonGroup = /*#__PURE__*/function () {
             activeClass = i === _this.options.activeItem ? 'active' : 'inactive';
           }
 
-          return "\n          <div ".concat((t.attributes || []).join(' '), " data-id=\"").concat(t.id || t.label, "\" data-index=\"").concat(i, "\" class=\"websy-button-group-item ").concat((t.classes || []).join(' '), " ").concat(_this.options.style, "-style ").concat(activeClass, "\">").concat(t.label, "</div>\n        ");
+          return "\n          <".concat(_this.options.tag, " ").concat((t.attributes || []).join(' '), " data-id=\"").concat(t.id || t.label, "\" data-index=\"").concat(i, "\" class=\"websy-button-group-item ").concat((t.classes || []).join(' '), " ").concat(_this.options.style, "-style ").concat(activeClass, "\">").concat(t.label, "</").concat(_this.options.tag, ">\n        ");
         }).join('');
       }
     }
@@ -1739,7 +1748,10 @@ var WebsyDropdown = /*#__PURE__*/function () {
         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');
@@ -3982,6 +3994,31 @@ var WebsyRouter = /*#__PURE__*/function () {
         this.navigate("".concat(inputPath, "?").concat(path), 'main', null, noHistory);
       }
     }
+  }, {
+    key: "removeAllUrlParams",
+    value: function removeAllUrlParams() {
+      var reloadView = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var noHistory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      // const output = {
+      //   path: '',
+      //   items: {}
+      // }
+      // this.currentParams = output
+      var inputPath = this.currentView;
+
+      if (this.options.urlPrefix) {
+        inputPath = "/".concat(this.options.urlPrefix, "/").concat(inputPath);
+      }
+
+      if (reloadView === true) {
+        this.navigate("".concat(inputPath), 'main', null, noHistory);
+      } else {
+        this.currentParams = {
+          path: '',
+          items: {}
+        };
+      }
+    }
   }, {
     key: "buildUrlPath",
     value: function buildUrlPath(params) {
@@ -4013,6 +4050,10 @@ var WebsyRouter = /*#__PURE__*/function () {
             this.addGroup(g);
           }
 
+          if (els[i].classList.contains(this.options.activeClass)) {
+            this.groups[g].activeView = v;
+          }
+
           if (this.groups[g].views.indexOf(v) === -1) {
             this.groups[g].views.push(v);
           }
@@ -4072,12 +4113,10 @@ var WebsyRouter = /*#__PURE__*/function () {
               view: this.groups[g].activeView,
               group: g
             });
-          } else {
-            views.push({
-              view: this.groups[g].views[0],
-              group: g
-            });
-          }
+          } // else {
+          //   views.push({view: this.groups[g].views[0], group: g})
+          // }        
+
         }
       }
 
@@ -4286,11 +4325,11 @@ var WebsyRouter = /*#__PURE__*/function () {
 
       var html = "\n      <article id='".concat(elementId, "_content' class='websy-content-article'></article>\n      <div id='").concat(elementId, "_loading' class='websy-loading-container'><div class='websy-ripple'><div></div><div></div></div></div>\n    ");
 
-      if (options.help && options.help !== '') {
+      if (options && options.help && options.help !== '') {
         html += "\n        <Help not yet supported>\n      ";
       }
 
-      if (options.tooltip && options.tooltip.value && options.tooltip.value !== '') {
+      if (options && options.tooltip && options.tooltip.value && options.tooltip.value !== '') {
         html += "\n          <div class=\"websy-info ".concat(this.options.tooltip.classes.join(' ') || '', "\" data-info=\"").concat(this.options.tooltip.value, "\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"><title>ionicons-v5-e</title><path d=\"M256,56C145.72,56,56,145.72,56,256s89.72,200,200,200,200-89.72,200-200S366.28,56,256,56Zm0,82a26,26,0,1,1-26,26A26,26,0,0,1,256,138Zm48,226H216a16,16,0,0,1,0-32h28V244H228a16,16,0,0,1,0-32h32a16,16,0,0,1,16,16V332h28a16,16,0,0,1,0,32Z\"/></svg>\n          </div>   \n        ");
       }
 
@@ -4417,7 +4456,7 @@ var WebsyRouter = /*#__PURE__*/function () {
       }
 
       if (toggle === true && this.groups[group].activeView !== '') {
-        newPath = '';
+        newPath = inputPath === this.groups[group].activeView ? '' : inputPath;
       }
 
       this.previousView = this.currentView;
@@ -6174,14 +6213,19 @@ var WebsyTable3 = /*#__PURE__*/function () {
             return; // need to revisit this logic
           }
 
-          var style = "width: ".concat(sizingColumns[sizeIndex].width || sizingColumns[sizeIndex].actualWidth, "px!important; ");
-          var divStyle = style;
+          var style = '';
+          var divStyle = '';
+
+          if (useWidths === true && (+cell.colspan === 1 || !cell.colspan)) {
+            style = "width: ".concat(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: ".concat(sizingColumns[sizeIndex].width || sizingColumns[sizeIndex].actualWidth, "px!important;");
             divStyle += "max-width: ".concat(sizingColumns[sizeIndex].width || sizingColumns[sizeIndex].actualWidth, "px!important;");
           }
@@ -6216,6 +6260,18 @@ var WebsyTable3 = /*#__PURE__*/function () {
             bodyHtml += "<i \n            data-row-index='".concat(rowIndex, "'\n            data-col-index='").concat(cell.level || cellIndex, "'\n            class='websy-table-cell-collapse'\n          >").concat(WebsyDesigns.Icons.MinusFilled, "</i>");
           }
 
+          if (sizingColumns[sizeIndex].showAsLink === true && cell.value.trim() !== '') {
+            cell.value = "\n            <a href='".concat(cell.value, "' target='").concat(sizingColumns[sizeIndex].openInNewTab === true ? '_blank' : '_self', "'>").concat(cell.displayText || sizingColumns[sizeIndex].linkText || cell.value, "</a>\n          ");
+          }
+
+          if (sizingColumns[sizeIndex].showAsRouterLink === true && cell.value.trim() !== '') {
+            cell.value = "\n            <a data-view='".concat((cell.link || cell.value).replace(/'/g, '\''), "' class='websy-trigger'>").concat(cell.value, "</a>\n          ");
+          }
+
+          if (sizingColumns[sizeIndex].showAsImage === true) {
+            cell.value = "\n            <img               \n              style=\"width: ".concat(sizingColumns[sizeIndex].imgWidth ? sizingColumns[sizeIndex].imgWidth : 'auto', "; height: ").concat(sizingColumns[sizeIndex].imgHeight ? sizingColumns[sizeIndex].imgHeight : 'auto', ";\" \n              src='").concat(cell.value, "'\n              ").concat(sizingColumns[sizeIndex].errorImage ? 'onerror="this.src=\'' + sizingColumns[sizeIndex].errorImage + '\'"' : '', "\n            />\n          ");
+          }
+
           bodyHtml += "\n          ".concat(cell.value, "\n        </div></td>");
         });
         bodyHtml += "</tr>";
@@ -6573,12 +6629,14 @@ var WebsyTable3 = /*#__PURE__*/function () {
   }, {
     key: "handleScrollWheel",
     value: function handleScrollWheel(event) {
-      event.preventDefault(); // console.log('scrollwheel', event)
+      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)));
+        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)));
+        }
       }
     }
   }, {