neo.mjs 5.3.9 → 5.3.11

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.3.9'
+         * @member {String} version='5.3.11'
          */
-        version: '5.3.9'
+        version: '5.3.11'
     }
 
     /**

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.3.9'
+         * @member {String} version='5.3.11'
          */
-        version: '5.3.9'
+        version: '5.3.11'
     }
 
     /**

package/package.json

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

package/resources/scss/src/component/DateSelector.scss

@@ -104,8 +104,7 @@
                     opacity         : v(dateselector-cell-opacity-disabled);
                 }
 
-                &.neo-disabled,
-                &.neo-selected {
+                &.neo-disabled {
                     cursor        : default;
                     pointer-events: none;
                 }

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

@@ -27,6 +27,12 @@
         }
     }
 
+    &.neo-invalid {
+        .neo-textfield-input {
+            border-color: v(textfield-border-color-invalid);
+        }
+    }
+
     &:has(.neo-textfield-error) {
         .neo-label-wrapper {
             height: calc(100% - 1.5em);

package/src/DefaultConfig.mjs

@@ -237,12 +237,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '5.3.9'
+     * @default '5.3.11'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.3.9'
+    version: '5.3.11'
 };
 
 Object.assign(DefaultConfig, {

package/src/Neo.mjs

@@ -660,7 +660,7 @@ function autoGenerateGetSet(proto, key) {
  * @param {Boolean} create
  * @param {Object} current
  * @param {Object} prev
- * @returns {Object}
+ * @returns {Object|undefined}
  */
 function createArrayNs(create, current, prev) {
     let arrDetails = parseArrayFromString(current),
@@ -674,6 +674,10 @@ function createArrayNs(create, current, prev) {
         arrRoot = prev[arrDetails[0]];
     }
 
+    if (!arrRoot) {
+        return;
+    }
+
     for (; i < len; i++) {
         arrItem = parseInt(arrDetails[i]);
 

package/src/component/DateSelector.mjs

@@ -694,7 +694,12 @@ class DateSelector extends Component {
             date   = me.currentDate; // cloned
 
         date.setDate(parseInt(cellEl.vdom.cn[0].html));
-        me.value = DateUtil.convertToyyyymmdd(date);
+        date = DateUtil.convertToyyyymmdd(date);
+
+        // We want to always trigger a change event.
+        // Reason: A form.field.Date can have a null value and we want to select the current date.
+        me._value = date;
+        me.afterSetValue(date, null);
     }
 
     /**
@@ -751,6 +756,13 @@ class DateSelector extends Component {
         this.selectionModel?.register(this);
     }
 
+    /**
+     * @param {String[]} items
+     */
+    onSelect(items) {
+        this.value = items[0].split('__')[1]
+    }
+
     /**
      * Recreates the current centerEl, month & year el
      * @param {Number} monthIncrement
@@ -916,8 +928,6 @@ class DateSelector extends Component {
      */
     updateHeaderMonthTransitionCallback(opts) {
         let {data, headerCenterEl, increment, yearIncrement} = opts,
-            me             = this,
-            vdom           = me.vdom,
             slideDirection = yearIncrement > 0 ? 'bottom' : yearIncrement < 0 ? 'top' : increment < 0 ? 'top' : 'bottom',
             y;
 
@@ -935,8 +945,6 @@ class DateSelector extends Component {
      */
     updateHeaderMonthWrapperCallback(opts) {
         let {headerCenterEl, increment, yearIncrement} = opts,
-            me             = this,
-            vdom           = me.vdom,
             slideDirection = yearIncrement > 0 ? 'bottom' : yearIncrement < 0 ? 'top' : increment < 0 ? 'top' : 'bottom';
 
         headerCenterEl.cn[0] = headerCenterEl.cn[0].cn[0].cn[slideDirection === 'top' ? 1 : 0];
@@ -948,12 +956,11 @@ class DateSelector extends Component {
      */
     updateHeaderYear(increment, silent=false) {
         let me     = this,
-            vdom   = me.vdom,
             yearEl = me.getHeaderYearEl();
 
         yearEl.html = me.currentDate.getFullYear();
 
-        me[silent ? '_vdom' : 'vdom'] = vdom;
+        !silent && me.update()
     }
 }
 

package/src/form/field/Text.mjs

@@ -1042,6 +1042,8 @@ class Text extends Base {
      * @returns {Boolean}
      */
     isValid() {
+        this.validate(true); // silent
+
         return this.error?.length > 0 ? false : super.isValid();
     }
 
@@ -1249,9 +1251,9 @@ class Text extends Base {
             isValid = !value || value === '';
 
             NeoArray[!isValid ? 'add' : 'remove'](cls, 'neo-invalid');
-            me.cls = cls; // todo: silent update
+            me[silent ? '_cls' : 'cls'] = cls;
 
-            errorNode = VDomUtil.findVdomChild(this.vdom, {cls: 'neo-textfield-error'}).vdom;
+            errorNode = VDomUtil.findVdomChild(me.vdom, {cls: 'neo-textfield-error'}).vdom;
 
             if (!isValid) {
                 errorNode.html = me.error;

package/src/selection/DateSelectorModel.mjs

@@ -137,16 +137,16 @@ class DateSelectorModel extends Model {
     register(component) {
         super.register(component);
 
-        let me   = this,
-            id   = me.id,
-            view = me.view;
+        let me    = this,
+            scope = {scope: me.id},
+            view  = me.view;
 
         if (view.keys) {
             view.keys._keys.push(
-                {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope: id},
-                {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope: id},
-                {fn: 'onKeyDownRight' ,key: 'Right' ,scope: id},
-                {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope: id}
+                {fn: 'onKeyDownDown'  ,key: 'Down'  ,...scope},
+                {fn: 'onKeyDownLeft'  ,key: 'Left'  ,...scope},
+                {fn: 'onKeyDownRight' ,key: 'Right' ,...scope},
+                {fn: 'onKeyDownUp'    ,key: 'Up'    ,...scope}
             );
         }
     }
@@ -155,16 +155,16 @@ class DateSelectorModel extends Model {
      *
      */
     unregister() {
-        let me   = this,
-            id   = me.id,
-            view = me.view;
+        let me    = this,
+            scope = {scope: me.id},
+            view  = me.view;
 
         if (view.keys) {
             view.keys.removeKeys([
-                {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope: id},
-                {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope: id},
-                {fn: 'onKeyDownRight' ,key: 'Right' ,scope: id},
-                {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope: id}
+                {fn: 'onKeyDownDown'  ,key: 'Down'  ,...scope},
+                {fn: 'onKeyDownLeft'  ,key: 'Left'  ,...scope},
+                {fn: 'onKeyDownRight' ,key: 'Right' ,...scope},
+                {fn: 'onKeyDownUp'    ,key: 'Up'    ,...scope}
             ]);
         }