neo.mjs 4.3.16 → 4.3.18

package/examples/list/circle/neo-config.json

@@ -1,7 +1,6 @@
 {
-    "appPath"         : "examples/list/circle/app.mjs",
-    "basePath"        : "../../../",
-    "environment"     : "development",
-    "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["Stylesheet"]
+    "appPath"    : "examples/list/circle/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.3.16",
+    "version": "4.3.18",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -50,7 +50,7 @@
         "commander": "^9.4.1",
         "cssnano": "^5.1.14",
         "envinfo": "^7.8.1",
-        "fs-extra": "^10.1.0",
+        "fs-extra": "^11.1.0",
         "highlightjs-line-numbers.js": "^2.8.0",
         "inquirer": "^9.1.4",
         "neo-jsdoc": "^1.0.1",
@@ -58,7 +58,7 @@
         "postcss": "^8.4.19",
         "sass": "^1.56.1",
         "webpack": "^5.75.0",
-        "webpack-cli": "^5.0.0",
+        "webpack-cli": "^5.0.1",
         "webpack-dev-server": "4.11.1",
         "webpack-hook-plugin": "^1.0.7",
         "webpack-node-externals": "^3.0.0"

package/src/component/Circle.mjs

@@ -5,6 +5,8 @@ import Component       from './Base.mjs';
 import NeoArray        from '../util/Array.mjs';
 import VDomUtil        from '../util/VDom.mjs';
 
+let DragZone;
+
 /**
  * @class Neo.component.Circle
  * @extends Neo.component.Base
@@ -39,6 +41,10 @@ class Circle extends Component {
          * @member {Boolean} collapsed=true
          */
         collapsed: true,
+        /**
+         * @member {Boolean} draggable_=true
+         */
+        draggable_: true,
         /**
          * Additional used keys for the selection model
          * @member {Object} keys={}
@@ -179,6 +185,31 @@ class Circle extends Component {
         me.update();
     }
 
+    /**
+     * Triggered after the draggable config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetDraggable(value, oldValue) {
+        let me           = this,
+            domListeners = [];
+
+        value && import('../draggable/DragZone.mjs').then(module => {
+            DragZone = module.default;
+
+            if (!me.dragListenersAdded) {
+                domListeners.push(
+                    {'drag:end'  : me.onDragEnd,   scope: me, delegate: 'neo-circle-item'},
+                    {'drag:start': me.onDragStart, scope: me, delegate: 'neo-circle-item'}
+                );
+
+                me.addDomListeners(domListeners);
+                me.dragListenersAdded = true;
+            }
+        });
+    }
+
     /**
      * Triggered after the innerRadius config got changed
      * @param {Number} value
@@ -244,10 +275,7 @@ class Circle extends Component {
         let me = this;
 
         if (oldValue && me.rendered) {
-            if (!me.collapsed) {
-                me.updateOuterCircle(true);
-            }
-
+            !me.collapsed && me.updateOuterCircle(true);
             me.updateItemPositions();
         }
     }
@@ -365,7 +393,7 @@ class Circle extends Component {
     }
 
     /**
-     * @param data
+     * @param {Object} data
      */
     collapseItem(data) {
         let me    = this,
@@ -383,7 +411,7 @@ class Circle extends Component {
     }
 
     /**
-     * @param {Boolean} [silent=false]
+     * @param {Boolean} silent=false
      */
     createBacksideItems(silent=false) {
         let me         = this,
@@ -411,22 +439,25 @@ class Circle extends Component {
     }
 
     /**
-     * @param {Number} [startIndex=0]
-     * @param {Boolean} [silent=false]
+     * @param {Number} startIndex=0
+     * @param {Boolean} silent=false
      */
     createItems(startIndex=0, silent=false) {
         let me            = this,
             frontEl       = me.getFrontEl(),
+            itemCls       = ['neo-circle-item'],
             itemPositions = me.calculateItemPositions(),
             itemSize      = me.itemSize,
             countItems    = Math.min(me.store.getCount(), me.maxItems),
             i             = startIndex,
             vdom          = me.vdom;
 
+        me.draggable && itemCls.push('neo-draggable');
+
         for (; i < countItems; i++) {
             frontEl.cn.push({
                 id      : me.getItemId(i),
-                cls     : ['neo-circle-item'],
+                cls     : itemCls,
                 tabIndex: -1,
                 style: {
                     height: itemSize              + 'px',
@@ -606,6 +637,44 @@ class Circle extends Component {
         this.flipCircle();
     }
 
+    /**
+     * @param data
+     */
+    onDragEnd(data) {
+        console.log('onDragEnd', data);
+    }
+
+    /**
+     * @param data
+     */
+    onDragStart(data) {
+        console.log('onDragStart', data);
+
+        let me           = this,
+            wrapperStyle = me.wrapperStyle || {};
+
+        me.isDragging = true;
+
+        if (!me.dragZone) {
+            me.dragZone = Neo.create({
+                module         : DragZone,
+                appName        : me.appName,
+                bodyCursorStyle: 'move !important',
+                dragElement    : me.vdom,
+                dragProxyConfig: {vdom: me.getProxyVdom()},
+                owner          : me,
+                useProxyWrapper: false,
+                ...me.dragZoneConfig
+            });
+        }
+
+        me.dragZone.dragStart(data);
+
+        wrapperStyle.opacity = 0.7;
+
+        me.wrapperStyle = wrapperStyle;
+    }
+
     /**
      * @param {Object} data
      */
@@ -664,7 +733,7 @@ class Circle extends Component {
     }
 
     /**
-     * @param {Boolean} [silent=false]
+     * @param {Boolean} silent=false
      */
     updateInnerCircle(silent=false) {
         let me           = this,
@@ -684,7 +753,7 @@ class Circle extends Component {
     }
 
     /**
-     * @param {Boolean} [silent=false]
+     * @param {Boolean} silent=false
      */
     updateItemAngle(silent=false) {
         let me      = this,
@@ -702,8 +771,8 @@ class Circle extends Component {
 
     /**
      * @param {Number} value
-     * @param {Boolean} [silent=false]
-     * @param {Number} [startIndex=0]
+     * @param {Boolean} silent=false
+     * @param {Number} startIndex=0
      */
     updateItemOpacity(value, silent=false, startIndex=0) {
         let me      = this,
@@ -720,7 +789,7 @@ class Circle extends Component {
     }
 
     /**
-     * @param {Boolean} [silent=false]
+     * @param {Boolean} silent=false
      */
     updateItemPositions(silent=false) {
         let me            = this,
@@ -749,7 +818,7 @@ class Circle extends Component {
     }
 
     /**
-     * @param {Boolean} [silent=false]
+     * @param {Boolean} silent=false
      */
     updateOuterCircle(silent=false) {
         let me           = this,
@@ -782,7 +851,7 @@ class Circle extends Component {
     }
 
     /**
-     * @param {Boolean} [silent=false]
+     * @param {Boolean} silent=false
      */
     updateTitle(silent=false) {
         let me          = this,

package/src/container/Base.mjs

@@ -487,6 +487,23 @@ class Base extends Component {
         }
     }
 
+    /**
+     * Clears the item array
+     * @param {Boolean} [destroyItem=true]
+     * @param {Boolean} [silent=false]
+     */
+    removeAll(destroyItem = true, silent = false) {
+        let me = this;
+
+        me.items = [];
+
+        me.getVdomItemsRoot().cn = [];
+
+        if(!silent || destroyItem){
+            me.update();
+        }
+    }
+
     /**
      * Removes a container item at a given index
      * @param {Number} index

package/src/draggable/DragZone.mjs

@@ -77,7 +77,7 @@ class DragZone extends Base {
          */
         dragProxy: null,
         /**
-         * @member {Object|null} dragProxyConfig=null
+         * @member {Object|null} dragProxyConfig_=null
          */
         dragProxyConfig_: null,
         /**

package/src/form/Container.mjs

@@ -151,11 +151,14 @@ class Container extends BaseContainer {
     /**
      * Updates the invalid state for all fields, which have updateValidationIndicators() implemented.
      * This can be useful for create entity forms which show up "clean", when pressing a submit button.
+     * @returns {Boolean}
      */
     validate() {
         this.getFields().forEach(item => {
             item.validate?.(false);
         });
+
+        return this.isValid();
     }
 }
 

package/src/grid/Container.mjs

@@ -184,19 +184,26 @@ class Container extends BaseContainer {
     createColumns(columns) {
         let me             = this,
             columnDefaults = me.columnDefaults,
-            sorters        = me.store?.sorters;
+            sorters        = me.store?.sorters,
+            renderer;
 
         if (!columns || !columns.length) {
             Neo.logError('Attempting to create a grid.Container without defined columns', me.id);
         }
 
         columns.forEach(column => {
+            renderer = column.renderer;
+
             columnDefaults && Neo.assignDefaults(column, columnDefaults);
 
             if (column.dock && !column.width) {
                 Neo.logError('Attempting to create a docked column without a defined width', column, me.id);
             }
 
+            if (renderer && Neo.isString(renderer) && me[renderer]) {
+                column.renderer = me[renderer];
+            }
+
             if (sorters?.[0]) {
                 if (column.field === sorters[0].property) {
                     column.isSorted = sorters[0].direction;

package/src/list/Circle.mjs

@@ -25,7 +25,7 @@ class Circle extends Component {
          * @member {Object} itemDefaults
          */
         itemDefaults: {
-            module : CircleComponent
+            module: CircleComponent
         },
         /**
          * Defaults to px

package/src/main/addon/DragDrop.mjs

@@ -181,16 +181,17 @@ class DragDrop extends Base {
      * @returns {Object}
      */
     getEventData(event) {
-        const path = event.path || event.composedPath();
+        let path   = event.path || event.composedPath(),
+            detail = event.detail,
 
-        const e = {
+        e = {
             ...DomEvents.getEventData(event.detail.originalEvent),
-            clientX: event.detail.clientX,
-            clientY: event.detail.clientY
+            clientX: detail.clientX,
+            clientY: detail.clientY
         };
 
-        if (event.detail.eventPath) {
-            e.targetPath = event.detail.eventPath.map(e => DomEvents.getTargetData(e));
+        if (detail.eventPath) {
+            e.targetPath = detail.eventPath.map(e => DomEvents.getTargetData(e));
         } else {
             e.targetPath = e.path;
         }

package/src/table/Container.mjs

@@ -286,19 +286,26 @@ class Container extends BaseContainer {
     createColumns(columns) {
         let me             = this,
             columnDefaults = me.columnDefaults,
-            sorters        = me.store?.sorters;
+            sorters        = me.store?.sorters,
+            renderer;
 
         if (!columns || !columns.length) {
             Neo.logError('Attempting to create a table.Container without defined columns', me.id);
         }
 
         columns.forEach(column => {
+            renderer = column.renderer;
+
             columnDefaults && Neo.assignDefaults(column, columnDefaults);
 
             if (column.dock && !column.width) {
                 Neo.logError('Attempting to create a docked column without a defined width', column, me.id);
             }
 
+            if (renderer && Neo.isString(renderer) && me[renderer]) {
+                column.renderer = me[renderer];
+            }
+
             if (sorters?.[0]) {
                 if (column.dataField === sorters[0].property) {
                     column.isSorted = sorters[0].direction;