neo.mjs 10.0.0-beta.5 → 10.0.0

package/src/form/field/CheckBox.mjs

@@ -32,15 +32,18 @@ class CheckBox extends Field {
         baseCls: ['neo-checkboxfield'],
         /**
          * @member {Boolean} checked_=false
+         * @reactive
          */
         checked_: false,
         /**
          * @member {String|null} error_=null
+         * @reactive
          */
         error_: null,
         /**
          * Useful for fields inside a css grid where errors should live outside the layout
          * @member {Boolean} errorPositionAbsolute_=false
+         * @reactive
          */
         errorPositionAbsolute_: false,
         /**
@@ -53,10 +56,12 @@ class CheckBox extends Field {
         errorTextRequired: 'Required',
         /**
          * @member {Boolean} groupRequired_=false
+         * @reactive
          */
         groupRequired_: false,
         /**
          * @member {Boolean} hideLabel_=false
+         * @reactive
          */
         hideLabel_: false,
         /**
@@ -69,6 +74,7 @@ class CheckBox extends Field {
         iconClsChecked: ['fas', 'fa-check'],
         /**
          * @member {String} inputType_='checkbox'
+         * @reactive
          */
         inputType_: 'checkbox',
         /**
@@ -77,45 +83,54 @@ class CheckBox extends Field {
         labelBaseCls: ['neo-checkbox-label'],
         /**
          * @member {String[]} labelCls_=[]
+         * @reactive
          */
         labelCls_: [],
         /**
          * Edge-case config in case we want to render leading content with their own selectors like:
          * <span class="my-label-id-cls">E10</span> · Firstname
          * @member {String|null} labelId_=null
+         * @reactive
          */
         labelId_: null,
         /**
          * CSS rules for labelId
          * @member {String[]} labelIdCls_=[]
+         * @reactive
          */
         labelIdCls_: [],
         /**
          * Separator between labelId & labelText
          * @member {String} labelIdSeparator_=' · '
+         * @reactive
          */
         labelIdSeparator_: ' · ',
         /**
          * Valid values: 'left', 'top'
          * @member {String} labelPosition_='left'
+         * @reactive
          */
         labelPosition_: 'left',
         /**
          * @member {String} labelText_='LabelText'
+         * @reactive
          */
         labelText_: 'LabelText',
         /**
          * defaults to px
          * @member {Number|String} labelWidth_=150
+         * @reactive
          */
         labelWidth_: 150,
         /**
          * @member {Boolean} required_=false
+         * @reactive
          */
         required_: false,
         /**
          * Use case: Set this config to false for all but one item with the same name.
          * @member {Boolean} showErrorTexts_=true
+         * @reactive
          */
         showErrorTexts_: true,
         /**
@@ -129,14 +144,17 @@ class CheckBox extends Field {
          * Intended to get combined with form.Container: getFormState().
          * See apps/form as an example.
          * @member {Boolean} useAlertState_=false
+         * @reactive
          */
         useAlertState_: false,
         /**
          * @member {Boolean|Number|String|null} value=true
+         * @reactive
          */
         value: true,
         /**
          * @member {String|null} valueLabelText_=null
+         * @reactive
          */
         valueLabelText_: null,
         /**

package/src/form/field/Chip.mjs

@@ -18,6 +18,7 @@ class Chip extends ComboBox {
         ntype: 'chipfield',
         /**
          * @member {Object|null} listConfig={useCheckBoxes: true}
+         * @reactive
          */
         listConfig: {
             useCheckBoxes: true

package/src/form/field/ComboBox.mjs

@@ -53,6 +53,7 @@ class ComboBox extends Picker {
         filterDelay : 50,
         /**
          * @member {String} filterOperator_='like'
+         * @reactive
          */
         filterOperator_: 'like',
         /**
@@ -81,6 +82,7 @@ class ComboBox extends Picker {
         list: null,
         /**
          * @member {Object|null} listConfig_=null
+         * @reactive
          */
         listConfig_: null,
         /**
@@ -90,10 +92,12 @@ class ComboBox extends Picker {
         pickerHeight: null,
         /**
          * @member {String|null} role='combobox'
+         * @reactive
          */
         role: 'combobox',
         /**
          * @member {Neo.data.Store|null} store_=null
+         * @reactive
          */
         store_: null,
         /**
@@ -101,16 +105,19 @@ class ComboBox extends Picker {
          * match the filter string inside the input field.
          * Valid values: all, filtered
          * @member {String} triggerAction_='all'
+         * @reactive
          */
         triggerAction_: 'all',
         /**
          * Display the first matching result while typing
          * @member {Boolean} typeAhead_=true
+         * @reactive
          */
         typeAhead_: true,
         /**
          * Set this config to false, in case typing into the input field should not filter list items
          * @member {Boolean} useFilter_=true
+         * @reactive
          */
         useFilter_: true,
         /**
@@ -122,6 +129,7 @@ class ComboBox extends Picker {
         /**
          * Default width to prevent rendering issues.
          * @member {Number} width=150
+         * @reactive
          */
         width: 150
     }

package/src/form/field/Country.mjs

@@ -19,6 +19,7 @@ class Country extends ComboBox {
         /**
          * You can either pass a field instance or a field reference
          * @member {Neo.form.field.Base|String|null} zipCodeField_=null
+         * @reactive
          */
         zipCodeField_: null
     }

package/src/form/field/Currency.mjs

@@ -18,10 +18,12 @@ class Currency extends Number {
         ntype: 'currencyfield',
         /**
          * @member {Number} maxValue=1000000
+         * @reactive
          */
         maxValue: 1000000,
         /**
          * @member {Number} stepSize=0.01
+         * @reactive
          */
         stepSize: 0.01
     }

package/src/form/field/Date.mjs

@@ -48,14 +48,17 @@ class DateField extends Picker {
         hidePickerOnSelect: false,
         /**
          * @member {String} inputType='date'
+         * @reactive
          */
         inputType: 'date',
         /**
          * @member {String|null} maxValue_=null
+         * @reactive
          */
         maxValue_: null,
         /**
          * @member {String|null} minValue_=null
+         * @reactive
          */
         minValue_: null,
         /**
@@ -73,6 +76,7 @@ class DateField extends Picker {
         /**
          * @member {Object|Object[]} triggers=[{module: DateTrigger}]
          * @protected
+         * @reactive
          */
         triggers: [{
             module: DateTrigger

package/src/form/field/Display.mjs

@@ -24,6 +24,7 @@ class Display extends Text {
         /**
          * @member {Boolean} clearable=false
          * @protected
+         * @reactive
          */
         clearable: false
     }

package/src/form/field/Email.mjs

@@ -30,6 +30,7 @@ class Email extends Text {
         errorTextValidEmail: 'Not a valid email address',
         /**
          * @member {String} inputType='email'
+         * @reactive
          */
         inputType: 'email'
     }

package/src/form/field/FileUpload.mjs

@@ -102,6 +102,7 @@ class FileUpload extends Field {
         baseCls: ['neo-file-upload-field'],
         /**
          * @member {String[]} cls=['neo-field-empty']
+         * @reactive
          */
         cls: ['neo-field-empty'],
         /**
@@ -148,6 +149,7 @@ class FileUpload extends Field {
 
         /**
          * @member {String|null} document_=null
+         * @reactive
          */
         document_: null,
 
@@ -211,6 +213,7 @@ class FileUpload extends Field {
          * by the {@link #member-documentIdParameter}. It defaults to `'documentId'`.
          *
          * @member {String|null} downloadUrl_=null
+         * @reactive
          */
         downloadUrl_: null,
 
@@ -240,6 +243,7 @@ class FileUpload extends Field {
          * ```
          *
          * @member {String|null} documentStatusUrl_=null
+         * @reactive
          */
         documentStatusUrl_: null,
 
@@ -273,6 +277,7 @@ class FileUpload extends Field {
          * If this service yields an HTTP 200 status, the deletion is taken to have been successful.
          *
          * @member {String|null} documentDeleteUrl_=null
+         * @reactive
          */
         documentDeleteUrl_: null,
 
@@ -286,6 +291,7 @@ class FileUpload extends Field {
 
         /**
          * @member {String} state_=ready
+         * @reactive
          */
         state_: 'ready',
 
@@ -302,6 +308,7 @@ class FileUpload extends Field {
         /**
          * The error text to show below the widget
          * @member {String|null} error_=null
+         * @reactive
          */
         error_ : null,
 

package/src/form/field/Hidden.mjs

@@ -18,6 +18,7 @@ class Hidden extends Field {
         ntype: 'hiddenfield',
         /**
          * @member {Boolean} hidden=true
+         * @reactive
          */
         hidden: true
     }

package/src/form/field/Number.mjs

@@ -35,6 +35,7 @@ class Number extends Text {
         /**
          * Prevent users from typing specific characters.
          * @member {String[]|null} disabledChars=['e','E']
+         * @reactive
          */
         disabledChars: ['e', 'E'],
         /**
@@ -58,23 +59,28 @@ class Number extends Text {
         /**
          * false only allows changing the field using the spin buttons
          * @member {Boolean} inputEditable_=true
+         * @reactive
          */
         inputEditable_: true,
         /**
          * Value for the inputType_ textfield config
          * @member {String} inputType='number'
+         * @reactive
          */
         inputType: 'number',
         /**
          * @member {Number} maxValue_=100
+         * @reactive
          */
         maxValue_: 100,
         /**
          * @member {Number} minValue_=0
+         * @reactive
          */
         minValue_: 0,
         /**
          * @member {Number} stepSize_=1
+         * @reactive
          */
         stepSize_: 1,
         /**
@@ -84,6 +90,7 @@ class Number extends Text {
         triggerPosition_: 'right',
         /**
          * @member {Boolean} useSpinButtons_=true
+         * @reactive
          */
         useSpinButtons_: true
     }

package/src/form/field/Password.mjs

@@ -19,6 +19,7 @@ class Password extends Text {
         /**
          * Value for the inputType_ textfield config
          * @member {String} inputType='password'
+         * @reactive
          */
         inputType: 'password'
     }

package/src/form/field/Phone.mjs

@@ -24,15 +24,18 @@ class Phone extends Text {
         errorTextInputPattern: data => `Not a valid phone number`,
         /**
          * @member {RegExp|null} inputPattern=/^\+?\(?[0-9]+\)?([\-\s\.]?[/0-9]+)*$/
+         * @reactive
          */
         inputPattern: /^\+?\(?[0-9]+\)?([\-\s\.]?[/0-9]+)*$/,
         /**
          * @member {Boolean} inputPatternDOM=false
+         * @reactive
          */
         inputPatternDOM: false,
         /**
          * Value for the inputType_ textfield config
          * @member {String} inputType='tel'
+         * @reactive
          */
         inputType: 'tel'
     }

package/src/form/field/Picker.mjs

@@ -58,6 +58,7 @@ class Picker extends Text {
         /**
          * @member {Boolean} pickerIsMounted_=false
          * @protected
+         * @reactive
          */
         pickerIsMounted_: false,
         /**
@@ -79,6 +80,7 @@ class Picker extends Text {
         /**
          * @member {Object|Object[]} triggers=[]
          * @protected
+         * @reactive
          */
         triggers: [{
             module: PickerTrigger

package/src/form/field/Radio.mjs

@@ -27,6 +27,7 @@ class Radio extends CheckBox {
         iconCls: ['far', 'fa-circle'],
         /**
          * @member {String} inputType='radio'
+         * @reactive
          */
         inputType: 'radio'
     }

package/src/form/field/Range.mjs

@@ -31,11 +31,13 @@ class Range extends Number {
         /**
          * True shows a clear trigger in case the field has a non empty value.
          * @member {Boolean} clearable=false
+         * @reactive
          */
         clearable: false,
         /**
          * Value for the inputType_ textfield config
          * @member {String} inputType='range'
+         * @reactive
          */
         inputType: 'range',
         /**
@@ -45,6 +47,7 @@ class Range extends Number {
         showResultInLabel: false,
         /**
          * @member {Array} tickmarks_=[]
+         * @reactive
          */
         tickmarks_: [],
         /**

package/src/form/field/Search.mjs

@@ -23,11 +23,13 @@ class Search extends Text {
         /**
          * Value for the hideLabel_ textfield config
          * @member {Boolean} hideLabel=true
+         * @reactive
          */
         hideLabel: true,
         /**
          * Value for the placeholderText_ textfield config
          * @member {String} placeholderText='Search'
+         * @reactive
          */
         placeholderText: 'Search'
     }

package/src/form/field/Text.mjs

@@ -46,6 +46,7 @@ class Text extends Field {
         autoCapitalize_: 'off',
         /**
          * @member {Boolean} autoComplete_=false
+         * @reactive
          */
         autoComplete_: false,
         /**
@@ -62,18 +63,21 @@ class Text extends Field {
         /**
          * True shows a clear trigger in case the field has a non-empty value.
          * @member {Boolean} clearable_=true
+         * @reactive
          */
         clearable_: true,
         /**
          * True will reset the field to its initial value config.
          * Recommended for fields with required: true
          * @member {Boolean} clearToOriginalValue_=false
+         * @reactive
          */
         clearToOriginalValue_: false,
         /**
          * Prevent users from typing specific characters.
          * E.g. disabling +-e for NumberFields
          * @member {String[]|null} disabledChars_=null
+         * @reactive
          */
         disabledChars_: null,
         /**
@@ -83,6 +87,7 @@ class Text extends Field {
          * For example picker fields such as `Date` and `Select` may still have their
          * values changed by selecting from the picker using keyboard or pointer.
          * @member {Boolean} editable_=true
+         * @reactive
          */
         editable_: true,
         /**
@@ -92,11 +97,13 @@ class Text extends Field {
         emptyValue: null,
         /**
          * @member {String|null} error_=null
+         * @reactive
          */
         error_: null,
         /**
          * Useful for fields inside a css grid where errors should live outside the layout
          * @member {Boolean} errorPositionAbsolute_=false
+         * @reactive
          */
         errorPositionAbsolute_: false,
         /**
@@ -120,10 +127,12 @@ class Text extends Field {
         errorTextRequired: 'Required',
         /**
          * @member {Boolean} hideLabel_=false
+         * @reactive
          */
         hideLabel_: false,
         /**
          * @member {RegExp|null} inputPattern_=null
+         * @reactive
          */
         inputPattern_: null,
         /**
@@ -131,14 +140,17 @@ class Text extends Field {
          * The regex support for input based patterns is not fully there yet, so feel free to disable this feature
          * if needed (E.g. form.field.Phone).
          * @member {Boolean} inputPatternDOM_=true
+         * @reactive
          */
         inputPatternDOM_: true,
         /**
          * @member {String} inputType_='text'
+         * @reactive
          */
         inputType_: 'text',
         /**
          * @member {String|null} inputValue_=null
+         * @reactive
          */
         inputValue_: null,
         /**
@@ -147,54 +159,65 @@ class Text extends Field {
         labelBaseCls: ['neo-textfield-label'],
         /**
          * @member {String[]} labelCls_=[]
+         * @reactive
          */
         labelCls_: [],
         /**
          * Edge-case config in case we want to render leading content with their own selectors like:
          * <span class="my-label-id-cls">E10</span> • Firstname
          * @member {String|null} labelId_=null
+         * @reactive
          */
         labelId_: null,
         /**
          * CSS rules for labelId
          * @member {String[]} labelIdCls_=[]
+         * @reactive
          */
         labelIdCls_: [],
         /**
          * Separator between labelId & labelText
          * @member {String} labelIdSeparator_=' · '
+         * @reactive
          */
         labelIdSeparator_: ' · ',
         /**
          * @member {String} labelOptionalText_=' (Optional)'
+         * @reactive
          */
         labelOptionalText_: ' (Optional)',
         /**
          * Valid values: 'bottom', 'inline', 'left', 'right', 'top'
          * @member {String} labelPosition_='left'
+         * @reactive
          */
         labelPosition_: 'left',
         /**
          * @member {String} labelText_='LabelText'
+         * @reactive
          */
         labelText_: 'LabelText',
         /**
          * defaults to px
          * @member {Number|String} labelWidth_=150
+         * @reactive
          */
         labelWidth_: 150,
         /**
          * The maximum amount of chars which you can enter into this field
          * @member {Number|null} maxLength_=null
+         * @reactive
          */
         maxLength_: null,
         /**
          * The minimum amount of chars which you can enter into this field
          * @member {Number|null} minLength_=null
+         * @reactive
          */
         minLength_: null,
         /**
          * @member {String|null} placeholderText_=null
+         * @reactive
          */
         placeholderText_: null,
         /**
@@ -203,19 +226,23 @@ class Text extends Field {
          * The input field will be read-only and other ways of changing the field's value
          * (such as by operating pickers) will be disabled.
          * @member {Boolean} readOnly_=false
+         * @reactive
          */
         readOnly_: false,
         /**
          * @member {Boolean} required_=false
+         * @reactive
          */
         required_: false,
         /**
          * @member {Boolean} showOptionalText_=false
+         * @reactive
          */
         showOptionalText_: false,
         /**
          * null => Follow the element's default behavior for spell checking
          * @member {Boolean|null} spellCheck_=false
+         * @reactive
          */
         spellCheck_: false,
         /**
@@ -224,14 +251,17 @@ class Text extends Field {
         subLabelBaseCls: ['neo-textfield-sublabel'],
         /**
          * @member {String[]} subLabelCls_=[]
+         * @reactive
          */
         subLabelCls_: [],
         /**
          * @member {String} subLabelText_=null
+         * @reactive
          */
         subLabelText_: null,
         /**
          * @member {Object|Object[]|null} triggers_=null
+         * @reactive
          */
         triggers_: null,
         /**
@@ -239,6 +269,7 @@ class Text extends Field {
          * Intended to get combined with form.Container: getFormState().
          * See apps/form as an example.
          * @member {Boolean} useAlertState_=false
+         * @reactive
          */
         useAlertState_: false,
         /**
@@ -249,6 +280,7 @@ class Text extends Field {
         /**
          * get value can be xssProtected and values are escaped
          * @member {Boolean} xssProtected_=false
+         * @reactive
          */
         xssProtected_: false,
         /**
@@ -1359,13 +1391,19 @@ class Text extends Field {
     onInputValueChange(data) {
         let me         = this,
             oldValue   = me.value,
-            inputValue = data.value,
-            vnode      = VNodeUtil.find(me.vnode, {nodeName: 'input'});
+            inputValue = data.value;
 
-        if (vnode) {
-            // Update the current state (modified DOM by the user) to enable the delta-updates logic.
+        // Find the VNode for the real input element within the component's vnode tree.
+        const {vnode: inputVNode} = VNodeUtil.find(me.vnode, {nodeName: 'input'}) || {};
+
+        if (inputVNode) {
+            // This is the critical synchronization step. The user's input has changed the
+            // real DOM on the Main Thread. We must manually update our "last known state"
+            // (this.vnode) to match this reality *before* the next diffing cycle runs.
+            // This prevents the framework from sending a redundant delta update that could
+            // overwrite the user's input or cause cursor jumps.
             // Required e.g. for validation -> revert a wrong user input
-            vnode.vnode.attributes.value = inputValue
+            inputVNode.attributes.value = inputValue
         }
 
         if (Neo.isString(inputValue)) {