neo.mjs 5.10.13 → 5.11.1

package/src/layout/Form.mjs

@@ -0,0 +1,140 @@
+import Base     from './Base.mjs';
+import NeoArray from '../util/Array.mjs';
+
+/**
+ * @class Neo.layout.Form
+ * @extends Neo.layout.Base
+ */
+class Form extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.layout.Form'
+         * @protected
+         */
+        className: 'Neo.layout.Form',
+        /**
+         * @member {String} ntype='layout-form'
+         * @protected
+         */
+        ntype: 'layout-form',
+        /**
+         * flex css allows gap. This adds it to the component style
+         * @member {String} gap_=null
+         */
+        gap_: null,
+        /**
+         * CSS className prefix
+         * @member {String} prefix='neo-form-'
+         */
+        prefix: 'neo-layout-form-'
+    }
+
+    /**
+     * Updates the Container style to add a gap to display:flex
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetGap(value, oldValue) {
+        if (!value && !oldValue) return;
+
+        let item  = Neo.getComponent(this.containerId),
+            style = item.wrapperStyle;
+
+        style.gap = value;
+        item.wrapperStyle = style;
+    }
+
+    /**
+     * Applies the flex value to an item of the container this layout is bound to
+     * @param {Neo.component.Base} item
+     * @param {Number} index
+     */
+    applyChildAttributes(child, index) {
+        if (!child.ignoreLayout) {
+            if (child.ntype === 'fieldset') {
+                child.wrapperCls = NeoArray.union(child.wrapperCls, 'neo-layout-form-subfieldset');
+            } else if (child.ntype === 'legend') {
+                child.wrapperCls = NeoArray.union(child.wrapperCls, 'neo-layout-form-legend');
+            } else {
+                child.wrapperCls = NeoArray.union(child.wrapperCls, 'neo-layout-form-item');
+            }
+        }
+    }
+
+    /**
+     * Applies CSS classes to the container this layout is bound to
+     */
+    applyRenderAttributes() {
+        let me         = this,
+            container  = Neo.getComponent(me.containerId),
+            wrapperCls = container?.wrapperCls || [];
+
+        if (!container) {
+            Neo.logError('layout.Form: applyRenderAttributes -> container not yet created', me.containerId);
+        }
+
+        NeoArray.add(wrapperCls, 'neo-layout-form');
+
+        container.wrapperCls = wrapperCls;
+    }
+
+    /**
+     * Removes all CSS rules from an container item this layout is bound to.
+     * Gets called when switching to a different layout.
+     * @param {Neo.component.Base} item
+     * @protected
+     */
+    removeChildAttributes(item) {
+        let style = item.wrapperStyle || {};
+
+        style.flex = item.flex || null;
+        item.wrapperStyle = style;
+    }
+
+    /**
+     * Removes all CSS rules from the container this layout is bound to.
+     * Gets called when switching to a different layout.
+     */
+    removeRenderAttributes() {
+        let me         = this,
+            container  = Neo.getComponent(me.containerId),
+            wrapperCls = container?.wrapperCls || [];
+
+        if (!container) {
+            Neo.logError('layout.Form: removeRenderAttributes -> container not yet created', me.containerId);
+        }
+
+        NeoArray.remove(wrapperCls, 'neo-layout-form');
+
+        container.wrapperCls = wrapperCls;
+    }
+
+    /**
+     * Updates the Container CSS wrapperCls
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @param {String} propertyName
+     * @protected
+     */
+    updateInputValue(value, oldValue, propertyName) {
+        let me         = this,
+            container  = Neo.getComponent(me.containerId),
+            prefix     = me.prefix,
+            wrapperCls = container?.wrapperCls;
+
+        if (container?.rendered) {
+            NeoArray.remove(wrapperCls, prefix + propertyName + '-' + oldValue);
+
+            if (value !== null) {
+                NeoArray.add(wrapperCls, prefix + propertyName + '-' + value);
+            }
+
+            container.wrapperCls = wrapperCls;
+        }
+    }
+}
+
+Neo.applyClassConfig(Form);
+
+export default Form;

package/src/list/Base.mjs

@@ -37,6 +37,12 @@ class Base extends Component {
          * @member {String[]} baseCls=['neo-list']
          */
         baseCls: ['neo-list'],
+        /**
+         * An optional record field to make items non-clickable and visually greyed out.
+         * The field expects the Boolean type.
+         * @member {String} disabledField='disabled'
+         */
+        disabledField: 'disabled',
         /**
          * @member {Boolean} disableSelection_=false
          */
@@ -373,10 +379,14 @@ class Base extends Component {
 
         if (!me.disableSelection && selectionModel) {
             if (selectionModel.isSelected(itemId)) {
-                cls.push(selectionModel.selectedCls);
+                cls.push(selectionModel.selectedCls)
             }
         }
 
+        if (record[me.disabledField]) {
+            cls.push('neo-disabled')
+        }
+
         item = {
             tag     : isHeader ? 'dt' : me.itemTagName,
             cls,

package/src/selection/ListModel.mjs

@@ -83,9 +83,11 @@ class ListModel extends Model {
         if (item) {
             recordId = view.getItemRecordId(item);
             index    = store.indexOf(recordId) + step;
+            record   = store.getAt(index);
 
-            while (store.getAt(index)?.isHeader === true) {
+            while (record?.[view.disabledField] === true || record?.isHeader === true) {
                 index += step;
+                record = store.getAt(index)
             }
 
             if (index < 0) {

package/src/table/Container.mjs

@@ -77,6 +77,10 @@ class Container extends BaseContainer {
          * @member {Boolean} showHeaderFilters_=false
          */
         showHeaderFilters_: false,
+        /**
+         * @member {Boolean} sortable_=true
+         */
+        sortable_: true,
         /**
          * @member {Neo.data.Store} store_=null
          */
@@ -125,6 +129,7 @@ class Container extends BaseContainer {
             module           : header.Toolbar,
             id               : me.headerToolbarId,
             showHeaderFilters: me.showHeaderFilters,
+            sortable         : me.sortable,
             ...me.headerToolbarConfig
         }, {
             module         : View,
@@ -162,6 +167,18 @@ class Container extends BaseContainer {
         }
     }
 
+    /**
+     * Triggered after the sortable config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetSortable(value, oldValue) {
+        if (oldValue !== undefined) {
+            Neo.getComponent(this.headerToolbarId).sortable = value;
+        }
+    }
+
     /**
      * Triggered after the useCustomScrollbars config got changed
      * @param {Boolean} value

package/src/table/header/Button.mjs

@@ -85,6 +85,10 @@ class Button extends BaseButton {
          * @member {Boolean} showHeaderFilter_=false
          */
         showHeaderFilter_: false,
+        /**
+         * @member {Boolean} sortable_=true
+         */
+        sortable_: true,
         /**
          * @member {Object} _vdom
          */
@@ -107,24 +111,19 @@ class Button extends BaseButton {
     construct(config) {
         super.construct(config);
 
-        let me        = this,
-            listeners = {
-                click: me.onButtonClick,
-                scope: me
-            };
-
+        let me        = this;
+        
         if (me.draggable) {
-            Object.assign(listeners, {
+            me.addDomListeners({
                 dragend  : me.onDragEnd,
                 dragenter: me.onDragEnter,
                 dragleave: me.onDragLeave,
                 dragover : me.onDragOver,
                 dragstart: me.onDragStart,
                 drop     : me.onDrop,
+                scope    : me
             });
         }
-
-        me.addDomListeners(listeners);
     }
 
     /**
@@ -227,6 +226,34 @@ class Button extends BaseButton {
         me.update();
     }
 
+    /**
+     * Triggered after the sortable config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+     afterSetSortable(value, oldValue) {
+        let me = this,
+            cls = me.cls;
+
+        if (value === true) {
+            NeoArray.remove(cls, 'neo-sort-hidden');
+            me.addDomListeners({
+                click: me.onButtonClick,
+                scope: me
+            });
+        } else {
+            NeoArray.add(cls, 'neo-sort-hidden');
+            me.removeDomListeners({
+                click: me.onButtonClick,
+                scope: me
+            });
+        }
+
+        me.cls = cls;
+        me.update();
+    }
+
     /**
      * Triggered before the align config gets changed
      * @param {String} value

package/src/table/header/Toolbar.mjs

@@ -34,6 +34,10 @@ class Toolbar extends BaseToolbar {
          * @member {Boolean} showHeaderFilters_=false
          */
         showHeaderFilters_: false,
+        /**
+         * @member {Boolean} sortable=true
+         */
+        sortable: true,
         /**
          * @member {Object} _vdom={tag:'thead',cn:[{tag:'tr',cn:[]}]}
          */
@@ -63,6 +67,26 @@ class Toolbar extends BaseToolbar {
         }
     }
 
+    /**
+     * Triggered after the sortable config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+     afterSetSortable(value, oldValue) {
+        if (oldValue !== undefined) {
+            let me = this;
+
+            me.items.forEach(item => {
+                item.setSilent({
+                    sortable: value
+                });
+            });
+
+            me.update();
+        }
+    }
+
     /**
      *
      */
@@ -98,7 +122,8 @@ class Toolbar extends BaseToolbar {
             } else {
                 item.vdom.cls = []; // remove the button cls from the th tag
             }
-
+            
+            item.sortable = me.sortable;
             item.wrapperStyle = style;
 
             // inverse loop direction