neo.mjs 8.10.1 → 8.12.0

package/src/table/header/Button.mjs

@@ -110,43 +110,6 @@ class Button extends BaseButton {
         ]}
     }
 
-    /**
-     * @param {Object} config
-     */
-    construct(config) {
-        super.construct(config);
-
-        let me = this;
-
-        me.draggable && me.addDomListeners({
-            dragend  : me.onDragEnd,
-            dragenter: me.onDragEnter,
-            dragleave: me.onDragLeave,
-            dragover : me.onDragOver,
-            dragstart: me.onDragStart,
-            drop     : me.onDrop,
-            scope    : me
-        })
-    }
-
-    /**
-     * Triggered after the draggable config got changed
-     * @param {Boolean} value
-     * @param {Boolean} oldValue
-     * @protected
-     */
-    afterSetDraggable(value, oldValue) {
-        let me = this;
-
-        if (value === true) {
-            me.getVdomRoot().draggable = true
-        } else {
-            delete me.getVdomRoot().draggable
-        }
-
-        me.update()
-    }
-
     /**
      * Triggered after the isSorted config got changed
      * @param {String|null} value
@@ -292,125 +255,6 @@ class Button extends BaseButton {
         return data.value
     }
 
-    /**
-     *
-     */
-    destroy(...args) {
-        this.filterField?.destroy();
-
-        super.destroy(...args)
-    }
-
-    /**
-     * Specify a different vdom root if needed to apply the top level style attributes on a different level.
-     * Make sure to use getVnodeRoot() as well, to keep the vdom & vnode trees in sync.
-     * @returns {Object} The new vdom root
-     */
-    getVdomRoot() {
-        return this.vdom.cn[0]
-    }
-
-    /**
-     * Specify a different vnode root if needed to apply the top level style attributes on a different level.
-     * Make sure to use getVdomRoot() as well, to keep the vdom & vnode trees in sync.
-     * @returns {Object} The new vnode root
-     */
-    getVnodeRoot() {
-        return this.vnode.childNodes[0]
-    }
-
-    /**
-     * @protected
-     */
-    onButtonClick() {
-        let me = this,
-            map;
-
-        if (me.defaultSortDirection === 'DESC') {
-            map = {
-                ASC : null,
-                DESC: 'ASC',
-                null: 'DESC'
-            }
-        } else {
-            map = {
-                ASC : 'DESC',
-                DESC: null,
-                null: 'ASC'
-            }
-        }
-
-        me.isSorted = map[me.isSorted + '']
-    }
-
-    /**
-     * @protected
-     */
-    onDragEnd() {
-        let me      = this,
-            {style} = me;
-
-        delete style.opacity;
-        me.style = style
-    }
-
-    /**
-     * @protected
-     */
-    onDragEnter() {
-        let me    = this,
-            {cls} = me;
-
-        NeoArray.add(cls, 'neo-drag-over');
-        me.cls = cls
-    }
-
-    /**
-     * @protected
-     */
-    onDragLeave() {
-        let me    = this,
-            {cls} = me;
-
-        NeoArray.remove(cls, 'neo-drag-over');
-        me.cls = cls
-    }
-
-    /**
-     * @param {Object} event
-     */
-    onDragOver(event) {
-        //console.log('onDragOver', event);
-    }
-
-    /**
-     * @protected
-     */
-    onDragStart() {
-        let me      = this,
-            {style} = me;
-
-        style.opacity = 0.4;
-        me.style = style
-    }
-
-    /**
-     * @param {Object} data
-     */
-    onDrop(data) {
-        let me             = this,
-            headerToolbar  = me.parent,
-            {style}        = me,
-            tableContainer = headerToolbar.parent;
-
-        me.onDragLeave();
-        headerToolbar.switchItems(me.id, data.srcId);
-        tableContainer.createViewData(tableContainer.store.data);
-
-        style.opacity = 1;
-        me.style = style
-    }
-
     /**
      * @param {Object} data
      */
@@ -460,6 +304,10 @@ class Button extends BaseButton {
                 value = new Date(value)
             }
 
+            if (Neo.isRecord(value)) {
+                value = value[me.filterField.displayField]
+            }
+
             if (!filter) {
                 filters = store.filters;
 
@@ -477,6 +325,57 @@ class Button extends BaseButton {
         }
     }
 
+    /**
+     *
+     */
+    destroy(...args) {
+        this.filterField?.destroy();
+
+        super.destroy(...args)
+    }
+
+    /**
+     * Specify a different vdom root if needed to apply the top level style attributes on a different level.
+     * Make sure to use getVnodeRoot() as well, to keep the vdom & vnode trees in sync.
+     * @returns {Object} The new vdom root
+     */
+    getVdomRoot() {
+        return this.vdom.cn[0]
+    }
+
+    /**
+     * Specify a different vnode root if needed to apply the top level style attributes on a different level.
+     * Make sure to use getVdomRoot() as well, to keep the vdom & vnode trees in sync.
+     * @returns {Object} The new vnode root
+     */
+    getVnodeRoot() {
+        return this.vnode.childNodes[0]
+    }
+
+    /**
+     * @protected
+     */
+    onButtonClick() {
+        let me = this,
+            map;
+
+        if (me.defaultSortDirection === 'DESC') {
+            map = {
+                ASC : null,
+                DESC: 'ASC',
+                null: 'DESC'
+            }
+        } else {
+            map = {
+                ASC : 'DESC',
+                DESC: null,
+                null: 'ASC'
+            }
+        }
+
+        me.isSorted = map[me.isSorted + '']
+    }
+
     /**
      * @protected
      */

package/src/table/header/Toolbar.mjs

@@ -17,9 +17,13 @@ class Toolbar extends BaseToolbar {
          */
         ntype: 'table-header-toolbar',
         /**
-         * @member {String[]} baseCls=['table-header-toolbar']
+         * @member {String[]} baseCls=['neo-table-header-toolbar']
          */
-        baseCls: ['table-header-toolbar'],
+        baseCls: ['neo-table-header-toolbar'],
+        /**
+         * @member {Boolean} draggable_=true
+         */
+        draggable_: true,
         /**
          * @member {String} layout='base'
          */
@@ -35,6 +39,8 @@ class Toolbar extends BaseToolbar {
          */
         showHeaderFilters_: false,
         /**
+         * Convenience shortcut to pass sortable to all toolbar items.
+         * If set to true, header clicks will sort the matching column (ASC, DESC, null)
          * @member {Boolean} sortable=true
          */
         sortable: true,
@@ -47,6 +53,31 @@ class Toolbar extends BaseToolbar {
         ]}
     }
 
+    /**
+     * Triggered after the draggable config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetDraggable(value, oldValue) {
+        let me = this;
+
+        if (value && !me.sortZone) {
+            import('../../draggable/table/header/toolbar/SortZone.mjs').then(module => {
+                let {appName, id, windowId} = me;
+
+                me.sortZone = Neo.create({
+                    module             : module.default,
+                    appName,
+                    boundaryContainerId: id,
+                    owner              : me,
+                    windowId,
+                    ...me.sortZoneConfig
+                })
+            })
+        }
+    }
+
     /**
      * Triggered after the showHeaderFilters config got changed
      * @param {Boolean} value
@@ -84,6 +115,7 @@ class Toolbar extends BaseToolbar {
                 })
             });
 
+            me.updateDepth = 2;
             me.update()
         }
     }

package/src/util/Rectangle.mjs

@@ -309,7 +309,7 @@ export default class Rectangle extends DOMRect {
 
     /**
      * Returns a clone of this Rectangle expanded according to the edges array.
-     * @param {Number}Number[]} edges
+     * @param {Number[]} edges
      * @returns {Rectangle}
      */
     expand(edges) {