Merge branch 'master' into fix/1-node

CHANGELOG.md

@@ -1,3 +1,35 @@
+## [3.19.11](https://github.com/kevinchappell/formBuilder/compare/v3.19.10...v3.19.11) (2024-07-05)
+
+
+### Bug Fixes
+
+* catch control lookup error so that we can output the custom control specific error ([7aa72ce](https://github.com/kevinchappell/formBuilder/commit/7aa72ce1f7036858a6ab5cf2d10cae8f40ea7e28))
+* fix lookup of label for custom controls when constructing control panel and adding field ([f1b580b](https://github.com/kevinchappell/formBuilder/commit/f1b580bd9a1ac3446241bc85841f22982ae64cc1))
+* translate custom control label if required when setting up the translation map ([a5a7f80](https://github.com/kevinchappell/formBuilder/commit/a5a7f80b0fa6587698e4546a3b3900a636a29726))
+* use correct definition in custom control label and icon lookup ([04a66c2](https://github.com/kevinchappell/formBuilder/commit/04a66c21f18cd3c65e4ca599fb673e3fb20f9d5c))
+
+## [3.19.10](https://github.com/kevinchappell/formBuilder/compare/v3.19.9...v3.19.10) (2024-07-04)
+
+
+### Bug Fixes
+
+* add in check for .length to ensure we are within the stage-wrap ([d9695cc](https://github.com/kevinchappell/formBuilder/commit/d9695cc056b81a04dc79f2e59fd9cf8a2990dbfc))
+* make css selectors more specific when identifying form control wrap and input-controls ([44c94f6](https://github.com/kevinchappell/formBuilder/commit/44c94f60f4444f70ddbc3523c43bf2dd5364c8ef))
+
+## [3.19.9](https://github.com/kevinchappell/formBuilder/compare/v3.19.8...v3.19.9) (2024-07-04)
+
+
+### Bug Fixes
+
+* remove label's for attribute when we wrap the input with the label for kc-toggle ([69f33b7](https://github.com/kevinchappell/formBuilder/commit/69f33b732cbb164811feb3070941cce258d4e733))
+
+## [3.19.8](https://github.com/kevinchappell/formBuilder/compare/v3.19.7...v3.19.8) (2024-07-04)
+
+
+### Bug Fixes
+
+* ensure rows attribute is forced to a positive integer ([a9ac85d](https://github.com/kevinchappell/formBuilder/commit/a9ac85dc25d2d0c46075f398562abf6cf8d8adf9))
+
 ## [3.19.7](https://github.com/kevinchappell/formBuilder/compare/v3.19.6...v3.19.7) (2024-03-13)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "formBuilder",
-  "version": "3.19.7",
+  "version": "3.19.11",
   "main": "dist/form-builder.min.js",
   "homepage": "https://formbuilder.online/",
   "repository": {

src/js/control/select.js

@@ -93,6 +93,7 @@ export default class controlSelect extends control {
           const labelAttrs = { for: optionAttrs.id }
           let output = [input, this.markup('label', labelContents, labelAttrs)]
           if (toggle) {
+            delete labelAttrs.for
             labelAttrs.className = 'kc-toggle'
             labelContents.unshift(input, this.markup('span'))
             output = this.markup('label', labelContents, labelAttrs)

src/js/controls.js

@@ -66,8 +66,10 @@ export default class Controls {
       // first check if this is a custom control
       let custom = this.custom.lookup(type)
       let controlClass
+      let label
       if (custom) {
         controlClass = custom.class
+        label = this.custom.label(type)
       } else {
         custom = {}
 
@@ -76,9 +78,9 @@ export default class Controls {
         if (!controlClass || !controlClass.active(type)) {
           continue
         }
+        label = controlClass.label(type)
       }
       const icon = custom.icon || controlClass.icon(type)
-      let label = custom.label || controlClass.label(type)
       const iconClassName = !icon ? custom.iconClassName || `${css_prefix_text + type.replace(/-[\d]{4}$/, '')}` : ''
 
       // if the class has specified a custom icon, inject it into the label

src/js/customControls.js

@@ -75,24 +75,24 @@ export default class customControls {
       // if there is no template defined for this type, check if we already have this type/subtype registered
       if (!templates[type]) {
         // check that this type is already registered
-        const controlClass = control.getClass(type, field.subtype)
-        if (!controlClass) {
-          super.error(
+        try {
+          const controlClass = control.getClass(type, field.subtype)
+
+          // generate a random key & map the settings against it
+          lookup = field.datatype ? field.datatype : `${type}-${Math.floor(Math.random() * 9000 + 1000)}`
+
+          this.customRegister[lookup] = jQuery.extend(field, {
+            type: type,
+            class: controlClass,
+          })
+        } catch(e) {
+          control.error(
             'Error while registering custom field: ' +
             type +
             (field.subtype ? ':' + field.subtype : '') +
             '. Unable to find any existing defined control or template for rendering.',
           )
-          continue
         }
-
-        // generate a random key & map the settings against it
-        lookup = field.datatype ? field.datatype : `${type}-${Math.floor(Math.random() * 9000 + 1000)}`
-
-        this.customRegister[lookup] = jQuery.extend(field, {
-          type: type,
-          class: controlClass,
-        })
       } else {
         //Map the field definition into the templated control class
         const controlClass = this.templateControlRegister[type]
@@ -104,7 +104,7 @@ export default class customControls {
       }
 
       // map label & icon
-      this.def.i18n[locale][lookup] = field.label
+      this.def.i18n[locale][lookup] = Array.isArray(field.label) ? mi18n.get(...field.label) || field.label[0] : field.label
       this.def.icon[lookup] = field.icon
     }
   }
@@ -123,7 +123,7 @@ export default class customControls {
      * @param {Object|Number|String} [args] - string or key/val pairs for string lookups with variables
      * @return {String} the translated label
      */
-      const def = this.definition
+      const def = this.def
       let i18n = def.i18n || {}
       const locale = mi18n.locale
       i18n = i18n[locale] || i18n.default || i18n
@@ -158,7 +158,7 @@ export default class customControls {
   icon(type) {
     // @todo - support for `${css_prefix_text}${attr.name}` - is this for inputSets? Doesnt look like it but can't see anything else that sets attr.name?
     // https://formbuilder.online/docs/formBuilder/options/inputSets/
-    const def = this.definition
+    const def = this.def
     if (def && typeof def.icon === 'object') {
       return def.icon[type]
     }

src/js/form-builder.js

@@ -155,7 +155,7 @@ function FormBuilder(opts, element, $) {
         return false
       }
 
-      if ($(ui.item).closest('.stage-wrap') && $(ui.item).closest(rowWrapperClassSelector).length === 0) {
+      if ($(ui.item).closest('.stage-wrap').length && $(ui.item).closest(rowWrapperClassSelector).length === 0) {
         h.doCancel = true
         processControl(ui.item)
       } else {
@@ -248,7 +248,7 @@ function FormBuilder(opts, element, $) {
     $(element).replaceWith($editorWrap)
   }
 
-  $(d.controls).on('click', 'li', ({ target }) => {
+  $(d.controls).on('click', 'li.input-control, li.input-set-control', ({ target }) => {
     //Remove initial placeholder if simply clicking to add field into blank stage
     if (h.stageIsEmpty()) {
       $stage.find(tmpRowPlaceholderClassSelector).eq(0).remove()
@@ -292,7 +292,9 @@ function FormBuilder(opts, element, $) {
         // check for a custom type
         const custom = controls.custom.lookup(field.type)
         if (custom) {
+          const customType = field.type
           field = Object.assign({}, custom)
+          field.label = controls.custom.label(customType)
         } else {
           const controlClass = controls.getClass(field.type)
           field.label = controlClass.label(field.type)
@@ -1824,7 +1826,7 @@ function FormBuilder(opts, element, $) {
     }
   })
 
-  $stage.on('blur', 'input.fld-maxlength', e => {
+  $stage.on('blur', 'input.fld-maxlength, input.fld-rows', e => {
     e.target.value = forceNumber(e.target.value)
   })
 

src/js/helpers.js

@@ -68,7 +68,7 @@ export default class Helpers {
       if (ui.sender) {
         $(ui.sender).sortable('cancel')
       }
-      this.from.sortable('cancel')
+      this.from.closest('.frmb-control').sortable('cancel')
     }
     _this.save()
     _this.doCancel = false
@@ -90,10 +90,14 @@ export default class Helpers {
     //Find the index within the stage even if the placeholder is not a direct descendant
     _this.stopIndex = ui.placeholder.closest('ul.stage-wrap > *').index() - 1
 
+    //Cancel the sort if sortableControls is disabled and the drop target is the control panel
     if (!opts.sortableControls && ui.item.parent().hasClass('frmb-control')) {
       cancelArray.push(true)
     }
 
+    //Cancel the drop if an element that is not a li.input-control is dropped onto the stage (eg. an input-group container)
+    cancelArray.push(ui.item.is(':not(li.input-control,li.input-set-control)') && !ui.item.parent().hasClass('frmb-control') )
+
     if (opts.prepend) {
       cancelArray.push(_this.stopIndex === 0)
     }

src/sass/_stage.scss

@@ -656,7 +656,7 @@
         border: 1px solid $error;
       }
 
-      &.fld-maxlength {
+      &.fld-maxlength, &.fld-rows {
         width: 75px;
       }
 

tests/control/custom.test.js

@@ -404,4 +404,32 @@ describe('Test Custom Control', () => {
     expect(fbWrap.find('#starRating-1697591966052-0')[0].outerHTML).toBe('<span id="starRating-1697591966052-0"></span>')
 
   })
+
+  test('custom replacedField with invalid type throws Error', async () => {
+    const fbWrap = $('<div>')
+
+    const replaceFields = [{
+      type: 'nonExistent'
+    }]
+
+    let error
+    await fbWrap.formBuilder({replaceFields}).promise.catch(e => error = e)
+
+    expect(error).toBeInstanceOf(Error)
+    expect(error.message).toMatch(/Error while registering custom field:/)
+  })
+
+  test('custom replacedField with missing type throws Error', async () => {
+    const fbWrap = $('<div>')
+
+    const replaceFields = [{
+        value: 1
+    }]
+
+    let error
+    await fbWrap.formBuilder({replaceFields}).promise.catch(e => error = e)
+
+    expect(error).toBeInstanceOf(Error)
+    expect(error.message).toMatch(/Ignoring invalid custom field definition. Please specify a type property./)
+  })
 })

tests/translation.test.js

@@ -35,6 +35,38 @@ describe('FormBuilder stage names translated', () => {
     expect(fbWrap.find('.readonly-wrap label').text()).toBe(config.i18n.override['en-US'].readOnly)
   })
 
+  test('can change label of built-in control via replaceFields GH-1578', async () => {
+    const config = {
+      replaceFields: [{
+        label: ['myTranslateLabel'],
+        type: 'text'
+      }],
+      i18n: {
+        location: LANGUAGE_LOCATION,
+        override: {
+          'en-US': {
+            myTranslateLabel: 'Translated Field',
+          }
+        }
+      }
+    }
+
+    const fbWrap = $('<div>')
+    const fb = await $(fbWrap).formBuilder(config).promise
+
+    const overrideField = fbWrap.find('.cb-wrap .input-control[data-type*="text-"]')
+
+    expect(overrideField.find('span').text()).toBe(config.i18n.override['en-US'].myTranslateLabel)
+
+    //@TODO support adding custom fields via addField
+    //const field = {
+    //  type: overrideField.data('type'),
+    //  class: 'form-control'
+    //}
+    //fb.actions.addField(field)
+    //expect(fbWrap.find('.fld-label').val()).toBe(config.i18n.override['en-US'].myTranslateLabel)
+  })
+
   test('can set form to another language than default with config', async () => {
     const config = {
       i18n: {