neo.mjs 4.3.34 → 4.4.1

package/examples/list/base/MainContainer.mjs

@@ -21,10 +21,20 @@ class MainContainer extends ConfigurationViewport {
         let me = this;
 
         return [{
+            module   : NumberField,
+            clearable: true,
+            labelText: 'activeIndex',
+            listeners: {change: me.onConfigChange.bind(me, 'activeIndex')},
+            maxValue : 5,
+            minValue : 0,
+            stepSize : 1,
+            value    : me.exampleComponent.activeIndex
+        }, {
             module   : CheckBox,
             checked  : me.exampleComponent.disableSelection,
             labelText: 'disableSelection',
-            listeners: {change: me.onConfigChange.bind(me, 'disableSelection')}
+            listeners: {change: me.onConfigChange.bind(me, 'disableSelection')},
+            style    : {marginTop: '10px'}
         }, {
             module   : CheckBox,
             checked  : me.exampleComponent.draggable,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.3.34",
+    "version": "4.4.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/form/field/Text.scss

@@ -9,6 +9,7 @@
     &.neo-focus {
         .neo-input-wrapper {
             border-color: v(textfield-border-color-active) !important;
+            outline     : v(textfield-outline-active);
         }
     }
 
@@ -176,7 +177,7 @@
     .neo-input-wrapper {
         align-items     : stretch;
         background-color: v(textfield-input-background-color);
-        border          : 1px solid v(textfield-border-color);
+        border          : v(textfield-border-width) solid v(textfield-border-color);
         border-radius   : v(textfield-border-radius);
         display         : flex;
         flex            : 1 1 100px;

package/resources/scss/theme-dark/form/field/Text.scss

@@ -3,12 +3,14 @@ $neoMap: map-merge($neoMap, (
     'textfield-border-color-active'      : #5d83a7,
     'textfield-border-color-invalid'     : brown,
     'textfield-border-radius'            : 0,
+    'textfield-border-width'             : 1px,
     'textfield-input-background-color'   : #2b2b2b,
     'textfield-input-color'              : #ccc,
     'textfield-input-placeholder-color'  : #ccc,
     'textfield-input-placeholder-opacity': 0.6,
     'textfield-label-color'              : #bbb,
-    'textfield-label-top-margin'         : 0 0 3px
+    'textfield-label-top-margin'         : 0 0 3px,
+    'textfield-outline-active'           : none
 ));
 
 @if $useCssVars == true {
@@ -17,11 +19,13 @@ $neoMap: map-merge($neoMap, (
         --textfield-border-color-active      : #{neo(textfield-border-color-active)};
         --textfield-border-color-invalid     : #{neo(textfield-border-color-invalid)};
         --textfield-border-radius            : #{neo(textfield-border-radius)};
+        --textfield-border-width             : #{neo(textfield-border-width)};
         --textfield-input-background-color   : #{neo(textfield-input-background-color)};
         --textfield-input-color              : #{neo(textfield-input-color)};
         --textfield-input-placeholder-color  : #{neo(textfield-input-placeholder-color)};
         --textfield-input-placeholder-opacity: #{neo(textfield-input-placeholder-opacity)};
         --textfield-label-color              : #{neo(textfield-label-color)};
         --textfield-label-top-margin         : #{neo(textfield-label-top-margin)};
+        --textfield-outline-active           : #{neo(textfield-outline-active)};
     }
 }

package/resources/scss/theme-light/form/field/Text.scss

@@ -3,12 +3,14 @@ $neoMap: map-merge($neoMap, (
     'textfield-border-color-active'      : #1c60a0,
     'textfield-border-color-invalid'     : brown,
     'textfield-border-radius'            : 3px,
+    'textfield-border-width'             : 1px,
     'textfield-input-background-color'   : #fff,
     'textfield-input-color'              : #000,
     'textfield-input-placeholder-color'  : #333,
     'textfield-input-placeholder-opacity': 0.6,
     'textfield-label-color'              : #666,
-    'textfield-label-top-margin'         : 0 0 3px
+    'textfield-label-top-margin'         : 0 0 3px,
+    'textfield-outline-active'           : none
 ));
 
 @if $useCssVars == true {
@@ -17,11 +19,13 @@ $neoMap: map-merge($neoMap, (
         --textfield-border-color-active      : #{neo(textfield-border-color-active)};
         --textfield-border-color-invalid     : #{neo(textfield-border-color-invalid)};
         --textfield-border-radius            : #{neo(textfield-border-radius)};
+        --textfield-border-width             : #{neo(textfield-border-width)};
         --textfield-input-background-color   : #{neo(textfield-input-background-color)};
         --textfield-input-color              : #{neo(textfield-input-color)};
         --textfield-input-placeholder-color  : #{neo(textfield-input-placeholder-color)};
         --textfield-input-placeholder-opacity: #{neo(textfield-input-placeholder-opacity)};
         --textfield-label-color              : #{neo(textfield-label-color)};
         --textfield-label-top-margin         : #{neo(textfield-label-top-margin)};
+        --textfield-outline-active           : #{neo(textfield-outline-active)};
     }
 }

package/src/layout/Base.mjs

@@ -60,6 +60,39 @@ class Base extends CoreBase {
      */
     applyRenderAttributes() {}
 
+    /**
+     *
+     */
+    destroy() {
+        let me = this;
+
+        me.bind && Neo.getComponent(me.containerId).getModel()?.removeBindings(me.id);
+
+        super.destroy();
+    }
+
+    /**
+     * Returns the container model or its closest parent model
+     * @param {String} [ntype]
+     * @returns {Neo.model.Component|null}
+     */
+    getModel(ntype) {
+        return Neo.getComponent(this.containerId).getModel();
+    }
+
+    /**
+     * Applies all class configs to this instance
+     * @param {Object} config
+     * @param {Boolean} [preventOriginalConfig] True prevents the instance from getting an originalConfig property
+     */
+    initConfig(config, preventOriginalConfig) {
+        super.initConfig(config, preventOriginalConfig);
+
+        let me = this;
+
+        me.bind && Neo.getComponent(me.containerId).getModel()?.parseConfig(me);
+    }
+
     /**
      * Placeholder method
      * @param {Neo.component.Base} item

package/src/list/Base.mjs

@@ -20,6 +20,10 @@ class Base extends Component {
          * @protected
          */
         ntype: 'list',
+        /**
+         * @member {Number|null} activeIndex_=null
+         */
+        activeIndex_: null,
         /**
          * @member {Boolean} animate_=false
          */
@@ -136,6 +140,22 @@ class Base extends Component {
         });
     }
 
+    /**
+     * Triggered after the activeIndex config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetActiveIndex(value, oldValue) {
+        let selectionModel = this.selectionModel;
+
+        if (Neo.isNumber(value)) {
+            selectionModel?.selectAt(value);
+        } else if (Neo.isNumber(oldValue)) {
+            selectionModel.deselectAll();
+        }
+    }
+
     /**
      * Triggered after the animate config got changed
      * @param {Boolean} value