@websy/websy-designs 1.8.1 → 1.9.0

package/dist/websy-designs.debug.js

@@ -238,7 +238,7 @@ class ButtonGroup {
         let activeClass = ''
         if (this.options.activeItem !== -1) {
           activeClass = i === this.options.activeItem ? 'active' : 'inactive'
-        }
+        }        
         return `
           <${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}>
         `
@@ -1474,24 +1474,47 @@ class WebsyDropdown {
           <div id='${this.elementId}_mask' class='websy-dropdown-mask'></div>
           <div id='${this.elementId}_content' class='websy-dropdown-content'>
       `
-      if (this.options.customActions.length > 0) {
+      if (this.options.customActions.length > 0 || this.options.customButtons.length > 0) {
         html += `
           <div class='websy-dropdown-action-container'>
+        `
+        if (this.options.customActions.length > 0) {
+          html += `
             ${this.options.actionsTitle || ''}
             <button class='websy-dropdown-action-button'>
               ${this.options.actionsIcon}
             </button>
-            <ul id='${this.elementId}_actionContainer'>
-        `
-        this.options.customActions.forEach((a, i) => {
+          `
+        }
+        if (this.options.customButtons.length > 0) {
           html += `
-            <li class='websy-dropdown-custom-action' data-index='${i}'>${a.label}</li>
+            <div class='websy-dropdown-additional-buttons'>
           `
-        })
-        html += `
-            </ul>
-          </div>
-        `
+          this.options.customButtons.forEach((b, i) => {
+            html += `
+              <button class='websy-dropdown-custom-button' data-index='${i}'>
+                ${b.label}
+              </button>
+            `
+          })
+          html += `
+            </div>
+          `
+        }
+        if (this.options.customActions.length > 0) {
+          html += `            
+              <ul id='${this.elementId}_actionContainer'>
+          `
+          this.options.customActions.forEach((a, i) => {
+            html += `
+              <li class='websy-dropdown-custom-action' data-index='${i}'>${a.label}</li>
+            `
+          })
+          html += `
+              </ul>
+            </div>
+          `
+        }
       }
       if (this.options.disableSearch !== true) {
         html += `
@@ -1511,7 +1534,9 @@ class WebsyDropdown {
       `
       el.innerHTML = html
       const scrollEl = document.getElementById(`${this.elementId}_itemsContainer`)
-      scrollEl.addEventListener('scroll', this.handleScroll.bind(this))
+      if (scrollEl) {
+        scrollEl.addEventListener('scroll', this.handleScroll.bind(this))
+      }      
       this.render()
     }
     else {
@@ -1559,7 +1584,20 @@ class WebsyDropdown {
       this.options.onClearSelected()
     }
   }
-  close () {
+  close () {  
+    this.hide()     
+    const searchEl = document.getElementById(`${this.elementId}_search`)
+    if (searchEl) {
+      if (searchEl.value.length > 0 && this.options.onCancelSearch) {            
+        this.options.onCancelSearch('')
+        searchEl.value = ''
+      }      
+    }
+    if (this.options.onClose) {
+      this.options.onClose(this.elementId)
+    }
+  }
+  hide () {
     const maskEl = document.getElementById(`${this.elementId}_mask`)
     const contentEl = document.getElementById(`${this.elementId}_content`)
     const scrollEl = document.getElementById(`${this.elementId}_itemsContainer`)
@@ -1580,17 +1618,7 @@ class WebsyDropdown {
     if (contentEl) {
       contentEl.classList.remove('active')
       contentEl.classList.remove('on-top')    
-    }    
-    const searchEl = document.getElementById(`${this.elementId}_search`)
-    if (searchEl) {
-      if (searchEl.value.length > 0 && this.options.onCancelSearch) {            
-        this.options.onCancelSearch('')
-        searchEl.value = ''
-      }      
-    }
-    if (this.options.onClose) {
-      this.options.onClose(this.elementId)
-    }
+    } 
   }
   handleClick (event) {
     if (this.options.disabled === true) {
@@ -1619,6 +1647,12 @@ class WebsyDropdown {
         this.options.customActions[actionIndex].fn()
       }
     }
+    else if (event.target.classList.contains('websy-dropdown-custom-button')) {
+      const actionIndex = +event.target.getAttribute('data-index')
+      if (this.options.customButtons[actionIndex] && this.options.customButtons[actionIndex].fn) {
+        this.options.customButtons[actionIndex].fn()
+      }
+    }
     else if (event.target.classList.contains('websy-dropdown-action-button')) {
       const el = document.getElementById(`${this.elementId}_actionContainer`)
       if (el) {
@@ -2194,7 +2228,7 @@ class WebsyDragDrop {
 class WebsyForm {
   constructor (elementId, options) {
     const defaults = {
-      submit: { text: 'Save', classes: '' },
+      submit: { text: 'Save', classes: [] },
       useRecaptcha: false,
       clearAfterSave: false,
       fields: [],
@@ -2265,6 +2299,10 @@ class WebsyForm {
       }
     })
   }
+  clear () {
+    const formEl = document.getElementById(`${this.elementId}Form`)    
+    formEl.reset()
+  }
   get data () {
     const formEl = document.getElementById(`${this.elementId}Form`)    
     const data = {}
@@ -2946,7 +2984,7 @@ class WebsyLogin {
         useRecaptcha: this.options.useRecaptcha || ENVIRONMENT.useRecaptcha || false,
         submit: {
           text: this.options.buttonText || 'Log in',
-          classes: (this.options.buttonClasses || []).join(' ') || ''
+          classes: this.options.buttonClasses || []
         },        
         fields: [          
           {
@@ -4311,7 +4349,9 @@ class WebsyRouter {
     if (typeof params === 'undefined') {
       return
     }
-    this.previousParams = Object.assign({}, this.currentParams)
+    if (reloadView === false) {
+      this.previousParams = Object.assign({}, this.currentParams)      
+    }
     const output = {
       path: '',
       items: {}
@@ -4326,7 +4366,9 @@ class WebsyRouter {
       path = this.buildUrlPath(output.items)
     }
     output.path = path
-    this.currentParams = output
+    if (reloadView === false) {
+      this.currentParams = output      
+    }
     let inputPath = this.currentView
     if (this.options.urlPrefix) {
       inputPath = `/${this.options.urlPrefix}/${inputPath}`
@@ -6443,7 +6485,8 @@ class WebsyTable3 {
       allowPivoting: false,
       searchIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512"><title>ionicons-v5-f</title><path d="M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/><line x1="338.29" y1="338.29" x2="448" y2="448" style="fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/></svg>`,
       plusIcon: WebsyDesigns.Icons.PlusFilled,
-      minusIcon: WebsyDesigns.Icons.MinusFilled      
+      minusIcon: WebsyDesigns.Icons.MinusFilled,
+      disableInternalLoader: false  
     }
     this.options = Object.assign({}, DEFAULTS, options)
     this.isTouchDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)
@@ -6607,7 +6650,7 @@ class WebsyTable3 {
         bodyHtml += `<td 
           class='websy-table-cell ${sizeIndex < this.pinnedColumns ? 'pinned' : 'unpinned'} ${(cell.classes || []).join(' ')} ${(sizingColumns[sizeIndex].classes || []).join(' ')}'
           style='${style}'
-          data-info='${cell.value}'
+          data-info='${cell.value.replace(/'/g, '`')}'
           colspan='${cell.colspan || 1}'
           rowspan='${cell.rowspan || 1}'
           data-row-index='${rowIndex}'
@@ -6829,6 +6872,9 @@ class WebsyTable3 {
             columnsForSizing[colIndex].actualWidth = 0
           }
           columnsForSizing[colIndex].actualWidth = Math.min(Math.max(columnsForSizing[colIndex].actualWidth, colSize.width), maxWidth)          
+          // if (columnsForSizing[colIndex].width) {
+          //   columnsForSizing[colIndex].actualWidth = columnsForSizing[colIndex].width
+          // }
           columnsForSizing[colIndex].cellHeight = colSize.height   
           if (colIndex >= this.pinnedColumns) {
             firstNonPinnedColumnWidth = columnsForSizing[colIndex].actualWidth
@@ -7470,7 +7516,9 @@ class WebsyTable3 {
     }
   }
   showLoading (options) {
-    this.loadingDialog.show(options)
+    if (this.options.disableInternalLoader !== true) {      
+      this.loadingDialog.show(options)
+    }
   }
 }