neo.mjs 10.0.0-beta.5 → 10.0.0

package/src/menu/List.mjs

@@ -41,6 +41,7 @@ class List extends BaseList {
         /**
          * Optionally pass menu.Store data directly
          * @member {Object[]|null} items_=null
+         * @reactive
          */
         items_: null,
         /**
@@ -48,6 +49,7 @@ class List extends BaseList {
          * Sub-menus will bubble focus changes to the top level.
          * @member {Boolean} menuFocus_=false
          * @protected
+         * @reactive
          */
         menuFocus_: false,
         /**
@@ -72,11 +74,13 @@ class List extends BaseList {
         /**
          * Value for the list.Base selectionModel_ config
          * @member {Neo.selection.menu.ListModel} selectionModel=ListModel
+         * @reactive
          */
         selectionModel: ListModel,
         /**
          * Value for the list.Base store_ config
          * @member {Neo.menu.Store} store=Store
+         * @reactive
          */
         store: Store,
         /**
@@ -94,6 +98,7 @@ class List extends BaseList {
         /**
          * We are applying a z-index style which is 1 number higher to each sub-menu
          * @member {Number} zIndex_=100
+         * @reactive
          */
         zIndex_: 100,
         /**
@@ -106,6 +111,7 @@ class List extends BaseList {
     /**
      * If the menu is floating, it will anchor itself to the parentRect
      * @member {Neo.component.Base|null} parentComponent=null
+     * @reactive
      */
     parentComponent = null
 

package/src/menu/Model.mjs

@@ -13,6 +13,7 @@ class Model extends BaseModel {
         className: 'Neo.menu.Model',
         /**
          * @member {String} keyProperty='id'
+         * @reactive
          */
         keyProperty: 'id',
         /**

package/src/menu/Panel.mjs

@@ -25,6 +25,7 @@ class Panel extends BasePanel {
         /**
          * @member {Neo.menu.List} list_=List
          * @protected
+         * @reactive
          */
         list_: List,
         /**
@@ -35,12 +36,14 @@ class Panel extends BasePanel {
         /**
          * Optionally pass menu.Store data directly
          * @member {Object[]|null} listItems_=null
+         * @reactive
          */
         listItems_: null,
         /**
          * The distance in px between a menu and a child menu
          * See: https://github.com/neomjs/neo/issues/2569
          * @member {Number} subMenuGap_=0
+         * @reactive
          */
         subMenuGap_: 0
     }

package/src/menu/Store.mjs

@@ -14,6 +14,7 @@ class Store extends BaseStore {
         className: 'Neo.menu.Store',
         /**
          * @member {Neo.menu.Model} model=Model
+         * @reactive
          */
         model: Model
     }

package/src/mixin/DomEvents.mjs

@@ -0,0 +1,130 @@
+import Base            from '../core/Base.mjs';
+import DomEventManager from '../manager/DomEvent.mjs';
+
+/**
+ * A mixin providing DOM event handling capabilities to components.
+ * This mixin is consumed by both Neo.component.Base and Neo.functional.component.Base
+ * to enable consistent management of DOM event listeners across different component types.
+ * @class Neo.mixin.DomEvents
+ * @extends Neo.core.Base
+ */
+class DomEvents extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.mixin.DomEvents'
+         * @protected
+         */
+        className: 'Neo.mixin.DomEvents',
+        /**
+         * An array of domListener configs
+         * @member {Object[]|null} domListeners_=null
+         * @example
+         * afterSetStayOnHover(value, oldValue) {
+         *     if (value) {
+         *         let me = this;
+         *
+         *         me.addDomListeners(
+         *             {mouseenter: me.onMouseEnter, scope: me},
+         *             {mouseleave: me.onMouseLeave, scope: me}
+         *         )
+         *    }
+         *}
+         * @reactive
+         */
+        domListeners_: null
+    }
+
+    /**
+     * Convenience shortcut to add additional dom listeners
+     * @param {Object|Object[]} value
+     */
+    addDomListeners(value) {
+        if (!Array.isArray(value)) {
+            value = [value]
+        }
+
+        let domListeners = this.domListeners;
+
+        domListeners.push(...value);
+
+        this.domListeners = domListeners
+    }
+
+    /**
+     * Registers the domListeners inside the Neo.manager.DomEvent
+     * @param {Object[]} value
+     * @param {Object[]} oldValue
+     * @protected
+     */
+    afterSetDomListeners(value, oldValue) {
+        let me = this;
+
+        if (value?.[0] || oldValue?.[0]) {
+            DomEventManager.updateDomListeners(me, value, oldValue)
+        }
+    }
+
+    /**
+     * Triggered before the domListeners config gets changed.
+     * @param {Object|Object[]} value
+     * @param {Object[]} oldValue
+     * @returns {Object[]}
+     * @protected
+     */
+    beforeSetDomListeners(value, oldValue) {
+        if (Neo.isObject(value)) {
+            value = [value]
+        }
+
+        return value || []
+    }
+
+    /**
+     * Initializes DOM event listeners.
+     */
+    initDomEvents() {
+        let me = this;
+        if (me.domListeners?.length > 0) {
+            // todo: the main thread reply of mount arrives after pushing the task into the queue which does not ensure the dom is mounted
+            me.timeout(150).then(() => {
+                DomEventManager.mountDomListeners(me)
+            })
+        }
+    }
+
+    /**
+     * Destroys DOM event listeners.
+     */
+    removeDomEvents() {
+        this.domListeners = []
+    }
+
+    /**
+     * @param {Array|Object} value
+     */
+    removeDomListeners(value) {
+        if (!Array.isArray(value)) {
+            value = [value];
+        }
+
+        let me             = this,
+            {domListeners} = me,
+            i, len;
+
+        value.forEach(item => {
+            i = 0;
+            len = domListeners.length;
+
+            for (; i < len; i++) {
+                if (Neo.isEqual(item, domListeners[i])) {
+                    domListeners.splice(i, 1);
+                    break
+                }
+            }
+        });
+
+        me.domListeners = domListeners
+    }
+}
+
+export default Neo.setupClass(DomEvents);