@websy/websy-designs 1.10.7 → 1.11.0

package/dist/server/helpers/v1/noAuthHelper.js

@@ -0,0 +1,21 @@
+const bCrypt = require('bcrypt-nodejs')
+const md5 = require('md5')
+
+class AuthHelper {
+  constructor (dbHelper, options) {
+    this.dbHelper = dbHelper    
+    const DEFAULTS = {
+      loginType: 'email'
+    }
+    this.options = Object.assign({}, DEFAULTS, options)
+    // console.log(this.options)
+  }  
+  isLoggedIn (req, res, next) {
+    next()      
+  }
+  checkPermissions (req, res, next) {    
+    next()  
+  }
+}
+
+module.exports = AuthHelper

package/dist/server/helpers/v1/pgHelper.js

@@ -221,6 +221,9 @@ class PGHelper {
     let updates = []
     for (let key in data) {
       if (this.updateIgnores.indexOf(key) === -1) {
+        if (typeof data[key] === 'string') {
+          data[key] = data[key].replace(/''/gm, `'`).replace(/'/gm, `''`).replace(/\\\\/gm, '\\')
+        }
         updates.push(`${key} = ${(data[key] === null ? data[key] : `'${data[key]}'`)}`)
       }      
     }
@@ -269,9 +272,21 @@ class PGHelper {
       }
       else {    
         delete row[(this.options.entityConfig[entity] && this.options.entityConfig[entity].idColumn) || 'id']    
+        let sqlValues = Object.values(row).map(d => {
+          if (d === null) {
+            return d
+          }
+          else {
+            if (typeof d === 'string') { 
+              d = d.replace(/'/g, `''`)
+            }
+            return `'${d}'`
+            // (d === null ? `${d}` : `'${d.replace(/'/)}'`)
+          }
+        }).join(',')
         sql += `
           INSERT INTO ${entity} (${Object.keys(row).join(',')})
-          VALUES (${Object.values(row).map(d => (d === null ? `${d}` : `'${d}'`)).join(',')})
+          VALUES (${sqlValues})
           RETURNING ${(this.options.entityConfig[entity] && this.options.entityConfig[entity].idColumn) || 'id'};
         `
       }

package/dist/server/websy-designs-server.js

@@ -24,10 +24,12 @@ module.exports = function (options) {
     process.env.wdRoot = __dirname
     let version = options.version || 'v1'
     process.env.WD_VERSION = version
-    app.use(bodyParser.json({limit: '5mb'}))
-    app.use(bodyParser.urlencoded({limit: '5mb', extended: true}))
-    app.use(bodyParser.raw({limit: '5mb'}))
+    console.log('max body size is', options.maxBodySize)
+    app.use(bodyParser.json({limit: options.maxBodySize || '5mb'}))
+    app.use(bodyParser.urlencoded({limit: options.maxBodySize || '5mb', extended: true}))
+    app.use(bodyParser.raw({limit: options.maxBodySize || '5mb'}))
     const AuthHelper = require(`./helpers/${version}/authHelper`)
+    const NoAuthHelper = require(`./helpers/${version}/noAuthHelper`)
     const allowCrossDomain = (req, res, next) => {
       // console.log(req.url);
       // const allowedOrigins = ['https://www.google.com', 'http://localhost:4000', 'https://localhost:4000', 'http://ec2-3-92-185-52.compute-1.amazonaws.com', 'https://ec2-3-92-185-52.compute-1.amazonaws.com']
@@ -128,6 +130,9 @@ module.exports = function (options) {
           }    
           app.use('/auth', require(`./routes/${version}/auth`)(dbHelper, options.dbEngine, app, options.strategy))
         }
+        else {
+          app.authHelper = new NoAuthHelper()
+        }
         const protectedRoutes = function (req, res, next) {
           let secureRoutes = true
           if (process.env.SECURE_ROUTES) {

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

@@ -1909,6 +1909,7 @@ class WebsyDropdown {
     const headerPos = WebsyUtils.getElementPos(headerEl)    
     const contentPos = WebsyUtils.getElementPos(contentEl)    
     if (this.options.style === 'plain' && headerPos.width > 0 && headerPos.height > 0) {
+      contentEl.style.left = 'unset'
       contentEl.style.right = `calc(100vw - ${headerPos.right}px)`
       contentEl.style.width = `${Math.max(this.options.minWidth, headerEl.clientWidth)}px`
       if (headerPos.bottom + contentPos.height > window.innerHeight) {
@@ -1921,6 +1922,7 @@ class WebsyDropdown {
     }
     else if (this.options.style === 'plain' && headerPos.width === 0 && headerPos.height === 0) {
       const targetPos = WebsyUtils.getElementPos(event.target)
+      contentEl.style.left = 'unset'
       contentEl.style.right = `calc(100vw - ${targetPos.right}px)`  
       contentEl.style.width = `${Math.max(this.options.minWidth, targetPos.width)}px`
     }
@@ -2486,7 +2488,7 @@ class WebsyForm {
         if (f.component) {
           componentsToProcess.push(f)
           html += `
-            ${i > 0 ? '-->' : ''}<div id='${this.elementId}_${f.field}_inputContainer' style='${f.style || ''}' class='websy-input-container ${f.classes ? f.classes.join(' ') : ''}'>
+            ${i > 0 ? '-->' : ''}<div id='${this.elementId}_${f.field}_inputContainer' style='${f.style || ''}' class='websy-input-container ${f.classes ? f.classes.join(' ') : ''} ${f.component === 'MediaUpload' ? 'media-upload' : ''}'>
               ${f.label ? `<label for="${f.field}">${f.label}</label>` : ''}${f.required === true ? '<span class="websy-form-required-value">*</span>' : ''}
               <div id='${this.elementId}_input_${f.field}_component' class='form-component'></div>
               <span id='${this.elementId}_${f.field}_error' class='websy-form-validation-error'></span>
@@ -2506,7 +2508,7 @@ class WebsyForm {
                 name="${f.field}" 
                 ${(f.attributes || []).join(' ')}
                 class="websy-input websy-textarea"
-              ></textarea>
+              >${f.value || ''}</textarea>
               <span id='${this.elementId}_${f.field}_error' class='websy-form-validation-error'></span>
             </div><!--
           ` 
@@ -2525,7 +2527,7 @@ class WebsyForm {
                 ${(f.attributes || []).join(' ')}
                 name="${f.field}" 
                 placeholder="${f.placeholder || ''}"
-                value="${f.value || ''}"
+                value="${f.type === 'date' ? '' : f.value || ''}"
                 valueAsDate="${f.type === 'date' ? f.value : ''}"
                 oninvalidx="this.setCustomValidity('${f.invalidMessage || 'Please fill in this field.'}')"
               />
@@ -2573,6 +2575,9 @@ class WebsyForm {
           if (this.fieldMap[field].type === 'checkbox') {
             el.checked = value
           }
+          if (this.fieldMap[field].type === 'date') {
+            el.valueAsDate = value
+          }
         }
         else {
           console.error(`Input for ${field} does not exist in form.`)    
@@ -2717,10 +2722,12 @@ class MultiForm {
   constructor (elementId, options) {
     this.elementId = elementId    
     const DEFAULTS = {
-      addButton: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 512 512"><line x1="256" y1="112" x2="256" y2="400" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="400" y1="256" x2="112" y2="256" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>`,      
-      deleteButton: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 512 512"><line x1="368" y1="368" x2="144" y2="144" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="368" y1="144" x2="144" y2="368" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>`,
+      addIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 512 512"><line x1="256" y1="112" x2="256" y2="400" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="400" y1="256" x2="112" y2="256" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>`,      
+      deleteIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 512 512"><line x1="368" y1="368" x2="144" y2="144" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="368" y1="144" x2="144" y2="368" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>`,
       allowAdd: true,
-      allowDelete: true
+      allowDelete: true,
+      addLabel: '',
+      deleteLabel: ''
     }
     this.options = Object.assign({}, DEFAULTS, options)
     this.formData = []
@@ -2729,7 +2736,12 @@ class MultiForm {
     const el = document.getElementById(elementId)
     if (el) {
       el.addEventListener('click', this.handleClick.bind(this))
-      el.innerHTML = `<div id='${elementId}_container' class='websy-multi-form-container'></div>`
+      el.innerHTML = `
+        <div id='${elementId}_container' class='websy-multi-form-container'></div>
+        <button id='${this.elementId}_addButton' class='websy-multi-form-add'>
+          ${this.options.addIcon}${this.options.addLabel}
+        </button>   
+      `
     }    
     this.render()
   }
@@ -2738,24 +2750,28 @@ class MultiForm {
     this.render()
   }
   addEntry () {
-    const el = document.getElementById(`${this.elementId}_container`)
-    let newId = WebsyDesigns.Utils.createIdentity()
-    const newFormEl = document.createElement('div')
-    newFormEl.id = `${this.elementId}_${newId}_formContainer`
-    newFormEl.classList.add('websy-multi-form-form-container')
-    newFormEl.innerHTML = `
-      <div id='${this.elementId}_${newId}_form' class='websy-multi-form-form'>
-      </div>
-      <button id='${this.elementId}_${newId}_deleteButton' data-formid='${newId}' class='hidden websy-multi-form-delete'>
-        ${this.options.deleteButton}
-      </button>          
-      <button id='${this.elementId}_${newId}_addButton' data-formid='${newId}' class='websy-multi-form-add'>
-        ${this.options.addButton}
-      </button>   
-    `
-    el.appendChild(newFormEl)
-    let formOptions = Object.assign({}, this.options, { fields: [...this.options.fields.map(f => Object.assign({}, f))] })
-    this.forms.push(new WebsyDesigns.Form(`${this.elementId}_${newId}_form`, formOptions))
+    const addEl = document.getElementById(`${this.elementId}_addButton`)
+    if (typeof this.options.maxRows === 'undefined' || this.forms.length < this.options.maxRows) {      
+      const el = document.getElementById(`${this.elementId}_container`)
+      let newId = WebsyDesigns.Utils.createIdentity()
+      const newFormEl = document.createElement('div')
+      newFormEl.id = `${this.elementId}_${newId}_formContainer`
+      newFormEl.classList.add('websy-multi-form-form-container')
+      let html = `
+        <div id='${this.elementId}_${newId}_form' class='websy-multi-form-form'>
+        </div>
+        <button id='${this.elementId}_${newId}_deleteButton' data-formid='${newId}' class='websy-multi-form-delete'>
+          ${this.options.deleteIcon}${this.options.deleteLabel}
+        </button>
+      `                   
+      newFormEl.innerHTML = html
+      el.appendChild(newFormEl)
+      let formOptions = Object.assign({}, this.options, { fields: [...this.options.fields.map(f => Object.assign({}, f))] })
+      this.forms.push(new WebsyDesigns.Form(`${this.elementId}_${newId}_form`, formOptions))  
+      if (addEl) {
+        addEl.style.display = this.forms.length < this.options.maxRows ? 'flex' : 'none'
+      }           
+    }
   }
   clear () {
     this.formData = []
@@ -2767,12 +2783,7 @@ class MultiForm {
     }
   }
   get data () {
-    const d = this.forms.map(f => (f.data))
-    console.log('forms data', d)
-    if (this.options.allowAdd !== false) {      
-      // we don't return the last form
-      d.pop()
-    }
+    const d = this.forms.map(f => (f.data))    
     return d
   }
   set data (d) {
@@ -2784,16 +2795,6 @@ class MultiForm {
   }
   handleClick (event) {
     if (event.target.classList.contains('websy-multi-form-add')) {
-      let id = event.target.getAttribute('data-formid')
-      // hide add button and show delete button
-      const addButtonEl = document.getElementById(`${this.elementId}_${id}_addButton`)
-      if (addButtonEl) {
-        addButtonEl.classList.add('hidden')
-      }
-      const deleteButtonEl = document.getElementById(`${this.elementId}_${id}_deleteButton`)
-      if (deleteButtonEl) {
-        deleteButtonEl.classList.remove('hidden')
-      }
       // add new form
       if (this.options.allowAdd === true) {
         this.addEntry()
@@ -2818,6 +2819,10 @@ class MultiForm {
       if (el) {
         el.remove()
       }
+      const addEl = document.getElementById(`${this.elementId}_addButton`)
+      if (addEl) {
+        addEl.style.display = (typeof this.options.maxRows === 'undefined' || this.forms.length < this.options.maxRows) ? 'flex' : 'none'
+      }
       // delete form element based on id
     }
   }
@@ -2837,7 +2842,7 @@ class MultiForm {
         if (this.options.allowDelete === true) {          
           html += `
             <button id='${this.elementId}_${d.formId}_deleteButton' data-formid='${d.formId}' data-rowid='${d.id}' class='websy-multi-form-delete'>
-              ${this.options.deleteButton}
+              ${this.options.deleteIcon}${this.options.deleteLabel}
             </button>
           `
         }
@@ -2846,20 +2851,6 @@ class MultiForm {
         `
       })
       let id = WebsyDesigns.Utils.createIdentity()
-      if (this.options.allowAdd === true) {
-        html += `
-          <div id='${this.elementId}_${id}_formContainer' class='websy-multi-form-form-container'>
-            <div id='${this.elementId}_${id}_form' class='websy-multi-form-form'>
-            </div>
-            <button id='${this.elementId}_${id}_deleteButton' data-formid='${id}' class='hidden websy-multi-form-delete'>
-              ${this.options.deleteButton}
-            </button>          
-            <button id='${this.elementId}_${id}_addButton' data-formid='${id}' class='websy-multi-form-add'>
-              ${this.options.addButton}
-            </button>                    
-          </div>
-        `
-      }
       el.innerHTML = html
       this.forms = new Array(this.formData.length)
       this.formData.forEach((d, i) => {
@@ -2868,11 +2859,15 @@ class MultiForm {
         formObject.data = d
         this.forms[i] = formObject
       })
-      if (this.options.allowAdd === true) {
-        let formOptions = Object.assign({}, this.options, { fields: [...this.options.fields.map(f => Object.assign({}, f))] })
-        let formObject = new WebsyDesigns.Form(`${this.elementId}_${id}_form`, formOptions)
-        this.forms.push(formObject)
-      }
+      const addEl = document.getElementById(`${this.elementId}_addButton`)
+      if (addEl) {
+        if (this.options.allowAdd === true) {      
+          addEl.style.display = (typeof this.options.maxRows === 'undefined' || this.forms.length < this.options.maxRows) ? 'flex' : 'none'
+        }
+        else {
+          addEl.style.display = 'none'
+        }  
+      }      
     }
   }
   validateForm () {

package/dist/websy-designs-es6.js

@@ -1882,6 +1882,7 @@ var WebsyDropdown = /*#__PURE__*/function () {
       var headerPos = WebsyUtils.getElementPos(headerEl);
       var contentPos = WebsyUtils.getElementPos(contentEl);
       if (this.options.style === 'plain' && headerPos.width > 0 && headerPos.height > 0) {
+        contentEl.style.left = 'unset';
         contentEl.style.right = "calc(100vw - ".concat(headerPos.right, "px)");
         contentEl.style.width = "".concat(Math.max(this.options.minWidth, headerEl.clientWidth), "px");
         if (headerPos.bottom + contentPos.height > window.innerHeight) {
@@ -1892,6 +1893,7 @@ var WebsyDropdown = /*#__PURE__*/function () {
         }
       } else if (this.options.style === 'plain' && headerPos.width === 0 && headerPos.height === 0) {
         var targetPos = WebsyUtils.getElementPos(event.target);
+        contentEl.style.left = 'unset';
         contentEl.style.right = "calc(100vw - ".concat(targetPos.right, "px)");
         contentEl.style.width = "".concat(Math.max(this.options.minWidth, targetPos.width), "px");
       }
@@ -2516,11 +2518,11 @@ var WebsyForm = /*#__PURE__*/function () {
           f.owningElement = _this18.elementId;
           if (f.component) {
             componentsToProcess.push(f);
-            html += "\n            ".concat(i > 0 ? '-->' : '', "<div id='").concat(_this18.elementId, "_").concat(f.field, "_inputContainer' style='").concat(f.style || '', "' class='websy-input-container ").concat(f.classes ? f.classes.join(' ') : '', "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '').concat(f.required === true ? '<span class="websy-form-required-value">*</span>' : '', "\n              <div id='").concat(_this18.elementId, "_input_").concat(f.field, "_component' class='form-component'></div>\n              <span id='").concat(_this18.elementId, "_").concat(f.field, "_error' class='websy-form-validation-error'></span>\n            </div><!--\n          ");
+            html += "\n            ".concat(i > 0 ? '-->' : '', "<div id='").concat(_this18.elementId, "_").concat(f.field, "_inputContainer' style='").concat(f.style || '', "' class='websy-input-container ").concat(f.classes ? f.classes.join(' ') : '', " ").concat(f.component === 'MediaUpload' ? 'media-upload' : '', "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '').concat(f.required === true ? '<span class="websy-form-required-value">*</span>' : '', "\n              <div id='").concat(_this18.elementId, "_input_").concat(f.field, "_component' class='form-component'></div>\n              <span id='").concat(_this18.elementId, "_").concat(f.field, "_error' class='websy-form-validation-error'></span>\n            </div><!--\n          ");
           } else if (f.type === 'longtext') {
-            html += "\n            ".concat(i > 0 ? '-->' : '', "<div id='").concat(_this18.elementId, "_").concat(f.field, "_inputContainer' style='").concat(f.style || '', "' class='websy-input-container ").concat(f.classes ? f.classes.join(' ') : '', "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '').concat(f.required === true ? '<span class="websy-form-required-value">*</span>' : '', "\n              <textarea\n                id=\"").concat(_this18.elementId, "_input_").concat(f.field, "\"\n                ").concat(f.required === true ? 'required' : '', " \n                placeholder=\"").concat(f.placeholder || '', "\"\n                data-user-type=\"").concat(f.type, "\"\n                data-index=\"").concat(i, "\"\n                name=\"").concat(f.field, "\" \n                ").concat((f.attributes || []).join(' '), "\n                class=\"websy-input websy-textarea\"\n              ></textarea>\n              <span id='").concat(_this18.elementId, "_").concat(f.field, "_error' class='websy-form-validation-error'></span>\n            </div><!--\n          ");
+            html += "\n            ".concat(i > 0 ? '-->' : '', "<div id='").concat(_this18.elementId, "_").concat(f.field, "_inputContainer' style='").concat(f.style || '', "' class='websy-input-container ").concat(f.classes ? f.classes.join(' ') : '', "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '').concat(f.required === true ? '<span class="websy-form-required-value">*</span>' : '', "\n              <textarea\n                id=\"").concat(_this18.elementId, "_input_").concat(f.field, "\"\n                ").concat(f.required === true ? 'required' : '', " \n                placeholder=\"").concat(f.placeholder || '', "\"\n                data-user-type=\"").concat(f.type, "\"\n                data-index=\"").concat(i, "\"\n                name=\"").concat(f.field, "\" \n                ").concat((f.attributes || []).join(' '), "\n                class=\"websy-input websy-textarea\"\n              >").concat(f.value || '', "</textarea>\n              <span id='").concat(_this18.elementId, "_").concat(f.field, "_error' class='websy-form-validation-error'></span>\n            </div><!--\n          ");
           } else {
-            html += "\n            ".concat(i > 0 ? '-->' : '', "<div id='").concat(_this18.elementId, "_").concat(f.field, "_inputContainer' style='").concat(f.style || '', "' class='websy-input-container ").concat(f.classes ? f.classes.join(' ') : '', "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '').concat(f.required === true ? '<span class="websy-form-required-value">*</span>' : '', "\n              <input \n                id=\"").concat(_this18.elementId, "_input_").concat(f.field, "\"\n                ").concat(f.required === true ? 'required' : '', " \n                type=\"").concat((f.type === 'expiry' ? 'text' : f.type === 'cvv' ? 'number' : f.type) || 'text', "\" \n                data-user-type=\"").concat(f.type, "\"\n                data-index=\"").concat(i, "\"\n                class=\"websy-input\" \n                ").concat((f.attributes || []).join(' '), "\n                name=\"").concat(f.field, "\" \n                placeholder=\"").concat(f.placeholder || '', "\"\n                value=\"").concat(f.value || '', "\"\n                valueAsDate=\"").concat(f.type === 'date' ? f.value : '', "\"\n                oninvalidx=\"this.setCustomValidity('").concat(f.invalidMessage || 'Please fill in this field.', "')\"\n              />\n              <span id='").concat(_this18.elementId, "_").concat(f.field, "_error' class='websy-form-validation-error'></span>\n            </div><!--\n          ");
+            html += "\n            ".concat(i > 0 ? '-->' : '', "<div id='").concat(_this18.elementId, "_").concat(f.field, "_inputContainer' style='").concat(f.style || '', "' class='websy-input-container ").concat(f.classes ? f.classes.join(' ') : '', "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '').concat(f.required === true ? '<span class="websy-form-required-value">*</span>' : '', "\n              <input \n                id=\"").concat(_this18.elementId, "_input_").concat(f.field, "\"\n                ").concat(f.required === true ? 'required' : '', " \n                type=\"").concat((f.type === 'expiry' ? 'text' : f.type === 'cvv' ? 'number' : f.type) || 'text', "\" \n                data-user-type=\"").concat(f.type, "\"\n                data-index=\"").concat(i, "\"\n                class=\"websy-input\" \n                ").concat((f.attributes || []).join(' '), "\n                name=\"").concat(f.field, "\" \n                placeholder=\"").concat(f.placeholder || '', "\"\n                value=\"").concat(f.type === 'date' ? '' : f.value || '', "\"\n                valueAsDate=\"").concat(f.type === 'date' ? f.value : '', "\"\n                oninvalidx=\"this.setCustomValidity('").concat(f.invalidMessage || 'Please fill in this field.', "')\"\n              />\n              <span id='").concat(_this18.elementId, "_").concat(f.field, "_error' class='websy-form-validation-error'></span>\n            </div><!--\n          ");
           }
         });
         if (this.options.useRecaptcha === true) {
@@ -2553,6 +2555,9 @@ var WebsyForm = /*#__PURE__*/function () {
             if (this.fieldMap[field].type === 'checkbox') {
               el.checked = value;
             }
+            if (this.fieldMap[field].type === 'date') {
+              el.valueAsDate = value;
+            }
           } else {
             console.error("Input for ".concat(field, " does not exist in form."));
           }
@@ -2702,10 +2707,12 @@ var MultiForm = /*#__PURE__*/function () {
     _classCallCheck(this, MultiForm);
     this.elementId = elementId;
     var DEFAULTS = {
-      addButton: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 512 512\"><line x1=\"256\" y1=\"112\" x2=\"256\" y2=\"400\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"400\" y1=\"256\" x2=\"112\" y2=\"256\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>",
-      deleteButton: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 512 512\"><line x1=\"368\" y1=\"368\" x2=\"144\" y2=\"144\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"368\" y1=\"144\" x2=\"144\" y2=\"368\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>",
+      addIcon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 512 512\"><line x1=\"256\" y1=\"112\" x2=\"256\" y2=\"400\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"400\" y1=\"256\" x2=\"112\" y2=\"256\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>",
+      deleteIcon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 512 512\"><line x1=\"368\" y1=\"368\" x2=\"144\" y2=\"144\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"368\" y1=\"144\" x2=\"144\" y2=\"368\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>",
       allowAdd: true,
-      allowDelete: true
+      allowDelete: true,
+      addLabel: '',
+      deleteLabel: ''
     };
     this.options = _extends({}, DEFAULTS, options);
     this.formData = [];
@@ -2714,7 +2721,7 @@ var MultiForm = /*#__PURE__*/function () {
     var el = document.getElementById(elementId);
     if (el) {
       el.addEventListener('click', this.handleClick.bind(this));
-      el.innerHTML = "<div id='".concat(elementId, "_container' class='websy-multi-form-container'></div>");
+      el.innerHTML = "\n        <div id='".concat(elementId, "_container' class='websy-multi-form-container'></div>\n        <button id='").concat(this.elementId, "_addButton' class='websy-multi-form-add'>\n          ").concat(this.options.addIcon).concat(this.options.addLabel, "\n        </button>   \n      ");
     }
     this.render();
   }
@@ -2727,19 +2734,26 @@ var MultiForm = /*#__PURE__*/function () {
   }, {
     key: "addEntry",
     value: function addEntry() {
-      var el = document.getElementById("".concat(this.elementId, "_container"));
-      var newId = WebsyDesigns.Utils.createIdentity();
-      var newFormEl = document.createElement('div');
-      newFormEl.id = "".concat(this.elementId, "_").concat(newId, "_formContainer");
-      newFormEl.classList.add('websy-multi-form-form-container');
-      newFormEl.innerHTML = "\n      <div id='".concat(this.elementId, "_").concat(newId, "_form' class='websy-multi-form-form'>\n      </div>\n      <button id='").concat(this.elementId, "_").concat(newId, "_deleteButton' data-formid='").concat(newId, "' class='hidden websy-multi-form-delete'>\n        ").concat(this.options.deleteButton, "\n      </button>          \n      <button id='").concat(this.elementId, "_").concat(newId, "_addButton' data-formid='").concat(newId, "' class='websy-multi-form-add'>\n        ").concat(this.options.addButton, "\n      </button>   \n    ");
-      el.appendChild(newFormEl);
-      var formOptions = _extends({}, this.options, {
-        fields: _toConsumableArray(this.options.fields.map(function (f) {
-          return _extends({}, f);
-        }))
-      });
-      this.forms.push(new WebsyDesigns.Form("".concat(this.elementId, "_").concat(newId, "_form"), formOptions));
+      var addEl = document.getElementById("".concat(this.elementId, "_addButton"));
+      if (typeof this.options.maxRows === 'undefined' || this.forms.length < this.options.maxRows) {
+        var el = document.getElementById("".concat(this.elementId, "_container"));
+        var newId = WebsyDesigns.Utils.createIdentity();
+        var newFormEl = document.createElement('div');
+        newFormEl.id = "".concat(this.elementId, "_").concat(newId, "_formContainer");
+        newFormEl.classList.add('websy-multi-form-form-container');
+        var html = "\n        <div id='".concat(this.elementId, "_").concat(newId, "_form' class='websy-multi-form-form'>\n        </div>\n        <button id='").concat(this.elementId, "_").concat(newId, "_deleteButton' data-formid='").concat(newId, "' class='websy-multi-form-delete'>\n          ").concat(this.options.deleteIcon).concat(this.options.deleteLabel, "\n        </button>\n      ");
+        newFormEl.innerHTML = html;
+        el.appendChild(newFormEl);
+        var formOptions = _extends({}, this.options, {
+          fields: _toConsumableArray(this.options.fields.map(function (f) {
+            return _extends({}, f);
+          }))
+        });
+        this.forms.push(new WebsyDesigns.Form("".concat(this.elementId, "_").concat(newId, "_form"), formOptions));
+        if (addEl) {
+          addEl.style.display = this.forms.length < this.options.maxRows ? 'flex' : 'none';
+        }
+      }
     }
   }, {
     key: "clear",
@@ -2758,11 +2772,6 @@ var MultiForm = /*#__PURE__*/function () {
       var d = this.forms.map(function (f) {
         return f.data;
       });
-      console.log('forms data', d);
-      if (this.options.allowAdd !== false) {
-        // we don't return the last form
-        d.pop();
-      }
       return d;
     },
     set: function set(d) {
@@ -2781,16 +2790,6 @@ var MultiForm = /*#__PURE__*/function () {
     key: "handleClick",
     value: function handleClick(event) {
       if (event.target.classList.contains('websy-multi-form-add')) {
-        var id = event.target.getAttribute('data-formid');
-        // hide add button and show delete button
-        var addButtonEl = document.getElementById("".concat(this.elementId, "_").concat(id, "_addButton"));
-        if (addButtonEl) {
-          addButtonEl.classList.add('hidden');
-        }
-        var deleteButtonEl = document.getElementById("".concat(this.elementId, "_").concat(id, "_deleteButton"));
-        if (deleteButtonEl) {
-          deleteButtonEl.classList.remove('hidden');
-        }
         // add new form
         if (this.options.allowAdd === true) {
           this.addEntry();
@@ -2798,12 +2797,12 @@ var MultiForm = /*#__PURE__*/function () {
       }
       if (event.target.classList.contains('websy-multi-form-delete')) {
         // delete form based on index
-        var _id = event.target.getAttribute('data-formid');
+        var id = event.target.getAttribute('data-formid');
         var rowId = event.target.getAttribute('data-rowid');
         this.recordsToDelete.push(rowId);
         var indexToDelete = -1;
         for (var i = 0; i < this.forms.length; i++) {
-          if (this.forms[i].elementId === "".concat(this.elementId, "_").concat(_id, "_form")) {
+          if (this.forms[i].elementId === "".concat(this.elementId, "_").concat(id, "_form")) {
             indexToDelete = i;
             break;
           }
@@ -2811,10 +2810,14 @@ var MultiForm = /*#__PURE__*/function () {
         if (indexToDelete !== -1) {
           this.forms.splice(indexToDelete, 1);
         }
-        var el = document.getElementById("".concat(this.elementId, "_").concat(_id, "_formContainer"));
+        var el = document.getElementById("".concat(this.elementId, "_").concat(id, "_formContainer"));
         if (el) {
           el.remove();
         }
+        var addEl = document.getElementById("".concat(this.elementId, "_addButton"));
+        if (addEl) {
+          addEl.style.display = typeof this.options.maxRows === 'undefined' || this.forms.length < this.options.maxRows ? 'flex' : 'none';
+        }
         // delete form element based on id
       }
     }
@@ -2831,14 +2834,11 @@ var MultiForm = /*#__PURE__*/function () {
           d.formId = WebsyDesigns.Utils.createIdentity();
           html += "\n          <div id='".concat(_this21.elementId, "_").concat(d.formId, "_formContainer' class='websy-multi-form-form-container'>\n            <div id='").concat(_this21.elementId, "_").concat(d.formId, "_form' class='websy-multi-form-form'>\n            </div>\n        ");
           if (_this21.options.allowDelete === true) {
-            html += "\n            <button id='".concat(_this21.elementId, "_").concat(d.formId, "_deleteButton' data-formid='").concat(d.formId, "' data-rowid='").concat(d.id, "' class='websy-multi-form-delete'>\n              ").concat(_this21.options.deleteButton, "\n            </button>\n          ");
+            html += "\n            <button id='".concat(_this21.elementId, "_").concat(d.formId, "_deleteButton' data-formid='").concat(d.formId, "' data-rowid='").concat(d.id, "' class='websy-multi-form-delete'>\n              ").concat(_this21.options.deleteIcon).concat(_this21.options.deleteLabel, "\n            </button>\n          ");
           }
           html += "\n          </div>\n        ";
         });
         var id = WebsyDesigns.Utils.createIdentity();
-        if (this.options.allowAdd === true) {
-          html += "\n          <div id='".concat(this.elementId, "_").concat(id, "_formContainer' class='websy-multi-form-form-container'>\n            <div id='").concat(this.elementId, "_").concat(id, "_form' class='websy-multi-form-form'>\n            </div>\n            <button id='").concat(this.elementId, "_").concat(id, "_deleteButton' data-formid='").concat(id, "' class='hidden websy-multi-form-delete'>\n              ").concat(this.options.deleteButton, "\n            </button>          \n            <button id='").concat(this.elementId, "_").concat(id, "_addButton' data-formid='").concat(id, "' class='websy-multi-form-add'>\n              ").concat(this.options.addButton, "\n            </button>                    \n          </div>\n        ");
-        }
         el.innerHTML = html;
         this.forms = new Array(this.formData.length);
         this.formData.forEach(function (d, i) {
@@ -2851,14 +2851,13 @@ var MultiForm = /*#__PURE__*/function () {
           formObject.data = d;
           _this21.forms[i] = formObject;
         });
-        if (this.options.allowAdd === true) {
-          var formOptions = _extends({}, this.options, {
-            fields: _toConsumableArray(this.options.fields.map(function (f) {
-              return _extends({}, f);
-            }))
-          });
-          var formObject = new WebsyDesigns.Form("".concat(this.elementId, "_").concat(id, "_form"), formOptions);
-          this.forms.push(formObject);
+        var addEl = document.getElementById("".concat(this.elementId, "_addButton"));
+        if (addEl) {
+          if (this.options.allowAdd === true) {
+            addEl.style.display = typeof this.options.maxRows === 'undefined' || this.forms.length < this.options.maxRows ? 'flex' : 'none';
+          } else {
+            addEl.style.display = 'none';
+          }
         }
       }
     }