neo.mjs 8.40.0 → 8.41.1

package/apps/ServiceWorker.mjs

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

package/apps/covid/view/country/Table.mjs

@@ -42,6 +42,7 @@ class Table extends Container {
             minWidth : 40,
             text     : '#',
             renderer : Util.indexRenderer,
+            sortable : false,
             width    : 40
         }, {
             cellAlign           : 'left',

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-04-05",
+      "datePublished": "2025-04-08",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/home/FooterContainer.mjs

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.40.0'
+                html  : 'v8.41.1'
             }]
         }],
         /**

package/apps/sharedcovid/view/country/Table.mjs

@@ -42,6 +42,7 @@ class Table extends Container {
             minWidth : 40,
             text     : '#',
             renderer : Util.indexRenderer,
+            sortable : false,
             width    : 40
         }, {
             cellAlign           : 'left',

package/examples/ServiceWorker.mjs

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

package/examples/calendar/basic/MainContainerController.mjs

@@ -1,5 +1,4 @@
 import ComponentController from '../../../src/controller/Component.mjs';
-import NeoArray            from '../../../src/util/Array.mjs';
 
 /**
  * @class Neo.examples.calendar.basic.MainContainerController
@@ -22,7 +21,7 @@ class MainContainerController extends ComponentController {
             button        = data.component,
             component     = me.component,
             headerToolbar = me.getReference('headerToolbar'),
-            buttonText, cls, headerColor, iconCls, style, theme;
+            buttonText, headerColor, iconCls, style, theme;
 
         if (button.text === 'Theme Light') {
             buttonText  = 'Theme Dark';
@@ -36,16 +35,7 @@ class MainContainerController extends ComponentController {
             theme       = 'neo-theme-dark'
         }
 
-        cls = [...component.cls];
-
-        component.cls.forEach(item => {
-            if (item.includes('neo-theme')) {
-                NeoArray.remove(cls, item)
-            }
-        });
-
-        NeoArray.add(cls, theme);
-        component.cls = cls;
+        component.theme = theme;
 
         button.set({
             iconCls,

package/examples/table/covid/TableContainer.mjs

@@ -37,6 +37,7 @@ class TableContainer extends BaseTableContainer {
             minWidth : 40,
             text     : '#',
             renderer : Util.indexRenderer,
+            sortable : false,
             width    : 40
         }, {
             cellAlign           : 'left',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.40.0",
+    "version": "8.41.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -57,7 +57,7 @@
         "fs-extra": "^11.3.0",
         "highlightjs-line-numbers.js": "^2.9.0",
         "inquirer": "^12.5.2",
-        "marked": "^15.0.7",
+        "marked": "^15.0.8",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
@@ -65,7 +65,7 @@
         "sass": "^1.86.3",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
-        "webpack": "^5.98.0",
+        "webpack": "^5.99.3",
         "webpack-cli": "^6.0.1",
         "webpack-dev-server": "^5.2.1",
         "webpack-hook-plugin": "^1.0.7",

package/src/DefaultConfig.mjs

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

package/src/calendar/view/MainContainer.mjs

@@ -289,6 +289,26 @@ class MainContainer extends Container {
         }
     }
 
+    /**
+     * Triggered after the theme config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetTheme(value, oldValue) {
+        super.afterSetTheme(value, oldValue);
+
+        let me = this;
+
+        if (me._editCalendarContainer) {
+            me._editCalendarContainer.theme = value
+        }
+
+        if (me._editEventContainer) {
+            me._editEventContainer.theme = value
+        }
+    }
+
     /**
      * Triggered after the useSettingsContainer config got changed
      * @param {Boolean} value
@@ -330,6 +350,7 @@ class MainContainer extends Container {
                 appName      : me.appName,
                 owner        : me,
                 stateProvider: {parent: me.getStateProvider()},
+                theme        : me.theme,
                 width        : 250,
                 windowId     : me.windowId,
                 ...me.editCalendarContainerConfig
@@ -353,6 +374,7 @@ class MainContainer extends Container {
                 appName      : me.appName,
                 owner        : me,
                 stateProvider: {parent: me.getStateProvider()},
+                theme        : me.theme,
                 width        : 250,
                 windowId     : me.windowId,
                 ...me.editEventContainerConfig
@@ -448,7 +470,7 @@ class MainContainer extends Container {
             appName  : me.appName,
             flex     : 'none',
             height   : me.sideBarWidth,
-            listeners: {change: me.onDateSelectorChange, scope: me},
+            listeners: {dateChange: me.onDateSelectorChange, scope: me},
             parentId : me.id, // we need the parentId to access the model inside the ctor
             value    : null,
 
@@ -599,8 +621,8 @@ class MainContainer extends Container {
      * @param {String} data.oldValue
      * @param {String} data.value
      */
-    onDateSelectorChange(data) {
-        data.oldValue !== undefined && this.setState('currentDate', new Date(`${data.value}T00:00:00.000Z`))
+    onDateSelectorChange({value}) {
+        this.setState('currentDate', value)
     }
 
     /**

package/src/calendar/view/week/EventDragZone.mjs

@@ -225,7 +225,7 @@ class EventDragZone extends DragZone {
             endDate   = me.newEndDate;
             startDate = me.newStartDate || record.startDate
         } else {
-            startDate = new Date(VDomUtil.find(owner.vdom, me.proxyParentId).vdom.flag + 'T00:00:00.000Z');
+            startDate = new Date(VDomUtil.find(owner.vdom, me.proxyParentId).vdom.flag + 'T12:00:00.000Z');
             startDate.setHours(me.axisStartTime);
             startDate.setMinutes(me.currentInterval * me.intervalSize);
 

package/src/calendar/view/week/plugin/DragDrop.mjs

@@ -188,7 +188,7 @@ class DragDrop extends Base {
                 intervalHeight  = columnRect.height / intervals,
                 position        = Math.min(columnRect.height, data.clientY - columnRect.top),
                 currentInterval = Math.floor(position / intervalHeight),
-                startDate       = new Date(VDomUtil.find(owner.vdom, data.path[0].id).vdom.flag + 'T00:00:00.000Z'),
+                startDate       = new Date(VDomUtil.find(owner.vdom, data.path[0].id).vdom.flag + 'T12:00:00.000Z'),
                 dragElement, endDate, eventDragZone, eventId, record;
 
             me.isDragging = true;

package/src/component/Base.mjs

@@ -1582,11 +1582,11 @@ class Component extends Base {
             me.isVdomUpdating = false;
             reject?.()
         }).then(data => {
-            me.isVdomUpdating = false;
-
-            // checking if the component got destroyed before the update cycle is done
+            // Checking if the component got destroyed before the update cycle is done
             if (me.id) {
-                me.vnode = data.vnode;
+                // It is crucial to delegate the vnode tree before resolving the cycle
+                me.vnode          = data.vnode;
+                me.isVdomUpdating = false;
 
                 deltas = data.deltas;
 

package/src/component/DateSelector.mjs

@@ -199,6 +199,14 @@ class DateSelector extends Component {
             me.updateHeaderYear(0, true);
             me.recreateDayViewContent(false, false)
         }
+
+        if (oldValue !== undefined) {
+            me.fire('dateChange', {
+                component: me,
+                oldValue,
+                value
+            })
+        }
     }
 
     /**
@@ -221,7 +229,7 @@ class DateSelector extends Component {
         if (value === false) {
             let me = this;
 
-            if (me.cachedUpdate && me.cachedUpdate !== new Date(`${me.value}T00:00:00.000Z`)) {
+            if (me.cachedUpdate && me.cachedUpdate !== new Date(`${me.value}T12:00:00.000Z`)) {
                 me.afterSetValue(me.value, DateUtil.convertToyyyymmdd(me.cachedUpdate))
             }
 
@@ -347,7 +355,7 @@ class DateSelector extends Component {
 
         if (value) {
             if (!me.isUpdating) {
-                me.currentDate = new Date(`${value}T00:00:00.000Z`);
+                me.currentDate = new Date(`${value}T12:00:00.000Z`);
 
                 me.fire('change', {
                     component: me,
@@ -608,9 +616,9 @@ class DateSelector extends Component {
             currentMonth    = currentDate.getMonth(),
             currentYear     = currentDate.getFullYear(),
             date            = me.currentDate, // cloned
-            maxDate         = me.maxValue && new Date(`${me.maxValue}T00:00:00.000Z`),
-            minDate         = me.minValue && new Date(`${me.minValue}T00:00:00.000Z`),
-            valueDate       = new Date(`${me.value}T00:00:00.000Z`),
+            maxDate         = me.maxValue && new Date(`${me.maxValue}T12:00:00.000Z`),
+            minDate         = me.minValue && new Date(`${me.minValue}T12:00:00.000Z`),
+            valueDate       = new Date(`${me.value}T12:00:00.000Z`),
             valueMonth      = valueDate.getMonth(),
             valueYear       = valueDate.getFullYear(),
             daysInMonth     = DateUtil.getDaysInMonth(currentDate),

package/src/container/Base.mjs

@@ -303,7 +303,7 @@ class Container extends Component {
     createItem(item, index) {
         let me       = this,
             config   = {appName: me.appName, parentId: me.id, parentIndex: index, windowId: me.windowId},
-            defaults = {...me.itemDefaults},
+            defaults = {theme: me.theme, ...me.itemDefaults},
             lazyLoadItem, module;
 
         if (defaults) {

package/src/date/DayViewComponent.mjs

@@ -132,9 +132,9 @@ class DayViewComponent extends Base {
             currentMonth    = currentDate.getMonth(),
             currentYear     = currentDate.getFullYear(),
             date            = me.currentDate, // cloned
-            maxDate         = me.maxValue && new Date(`${me.maxValue}T00:00:00.000Z`),
-            minDate         = me.minValue && new Date(`${me.minValue}T00:00:00.000Z`),
-            valueDate       = new Date(`${me.value}T00:00:00.000Z`),
+            maxDate         = me.maxValue && new Date(`${me.maxValue}T12:00:00.000Z`),
+            minDate         = me.minValue && new Date(`${me.minValue}T12:00:00.000Z`),
+            valueDate       = new Date(`${me.value}T12:00:00.000Z`),
             valueMonth      = valueDate.getMonth(),
             valueYear       = valueDate.getFullYear(),
             daysInMonth     = DateUtil.getDaysInMonth(currentDate),

package/src/date/SelectorContainer.mjs

@@ -233,7 +233,7 @@ class SelectorContainer extends Container {
 
         if (value) {
             if (!me.isUpdating) {
-                me.currentDate = new Date(`${value}T00:00:00.000Z`);
+                me.currentDate = new Date(`${value}T12:00:00.000Z`);
 
                 me.fire('change', {
                     component: me,

package/src/draggable/toolbar/SortZone.mjs

@@ -256,7 +256,7 @@ class SortZone extends DragZone {
                 indexMap               : indexMap,
                 ownerStyle             : {height: ownerStyle.height, width: ownerStyle.width},
                 reversedLayoutDirection: layout.direction === 'column-reverse' || layout.direction === 'row-reverse',
-                sortDirection          : layout.direction.includes('row') ? 'horizontal' : 'vertical',
+                sortDirection          : layout.direction?.includes('column') ? 'vertical' : 'horizontal',
                 startIndex             : index
             });
 

package/src/form/Container.mjs

@@ -409,7 +409,7 @@ class Container extends BaseContainer {
         fields.forEach(field => {
             validField = field.validate?.(false);
 
-            if (!validField) {
+            if (validField === false) {
                 isValid = false
             }
         });

package/src/form/field/Base.mjs

@@ -34,7 +34,7 @@ class Field extends Component {
          */
         formGroup_: null,
         /**
-         * @member {String|null} keys={}
+         * @member {Object|null} keys={}
          */
         keys: {},
         /**

package/src/form/field/Date.mjs

@@ -194,7 +194,7 @@ class DateField extends Picker {
         let value = this.value;
 
         if(this.submitDateObject && value) {
-            return new Date(`${value}T00:00:00.000Z`);
+            return new Date(`${value}T12:00:00.000Z`);
         } else if(this.isoDate && value) {
             return new Date(value).toISOString();
         }

package/src/grid/column/Component.mjs

@@ -83,6 +83,7 @@ class Component extends Column {
         }
 
         componentConfig = me.applyRecordConfigs(componentConfig, record);
+        componentConfig = {...componentConfig};
 
         if (component) {
             delete componentConfig.className;

package/src/grid/header/Toolbar.mjs

@@ -155,6 +155,12 @@ class Toolbar extends BaseToolbar {
 
         me.itemDefaults.showHeaderFilter = me.showHeaderFilters;
 
+        me.items.forEach(item => {
+            if (!Object.hasOwn(item, 'sortable')) {
+                item.sortable = me.sortable
+            }
+        });
+
         super.createItems();
 
         let {items} = me,
@@ -170,7 +176,6 @@ class Toolbar extends BaseToolbar {
             if (item.minWidth) {style.minWidth = item.minWidth + 'px'}
             if (item.width)    {style.width    = item.width    + 'px'}
 
-            item.sortable = me.sortable;
             item.wrapperStyle = style
         });
 

package/src/table/header/Toolbar.mjs

@@ -128,6 +128,12 @@ class Toolbar extends BaseToolbar {
 
         me.itemDefaults.showHeaderFilter = me.showHeaderFilters;
 
+        me.items.forEach(item => {
+            if (!Object.hasOwn(item, 'sortable')) {
+                item.sortable = me.sortable
+            }
+        });
+
         super.createItems();
 
         let dockLeftWidth  = 0,
@@ -156,7 +162,6 @@ class Toolbar extends BaseToolbar {
                 item.vdom.cls = [] // remove the button cls from the th tag
             }
 
-            item.sortable = me.sortable;
             item.wrapperStyle = style;
 
             // inverse loop direction

package/src/calendar/README.md

@@ -1,2 +0,0 @@
-# Development in progress
-Currently, scheduled for the v4.x release