neo.mjs 10.0.0-beta.4 → 10.0.0-beta.5

package/src/button/Effect.mjs

@@ -0,0 +1,435 @@
+import Component from '../component/Base.mjs';
+import Effect    from '../core/Effect.mjs';
+import NeoArray  from '../util/Array.mjs';
+
+/**
+ * @class Neo.button.Effect
+ * @extends Neo.component.Base
+ */
+class EffectButton extends Component {
+    /**
+     * Valid values for badgePosition
+     * @member {String[]} badgePositions=['bottom-left','bottom-right','top-left','top-right']
+     * @protected
+     * @static
+     */
+    static badgePositions = ['bottom-left', 'bottom-right', 'top-left', 'top-right']
+    /**
+     * Valid values for iconPosition
+     * @member {String[]} iconPositions=['top','right','bottom','left']
+     * @protected
+     * @static
+     */
+    static iconPositions = ['top', 'right', 'bottom', 'left']
+
+    static config = {
+        /**
+         * @member {String} className='Neo.button.Effect'
+         * @protected
+         */
+        className: 'Neo.button.Effect',
+        /**
+         * @member {String} ntype='effect-button'
+         * @protected
+         */
+        ntype: 'effect-button',
+        /**
+         * @member {String} badgePosition_='top-right'
+         */
+        badgePosition_: 'top-right',
+        /**
+         * @member {String|null} badgeText_=null
+         */
+        badgeText_: null,
+        /**
+         * @member {String[]} baseCls=['neo-button']
+         */
+        baseCls: ['neo-button'],
+        /**
+         * @member {String[]} cls=[]
+         */
+        cls: [],
+        /**
+         * false calls Neo.Main.setRoute()
+         * @member {Boolean} editRoute=true
+         */
+        editRoute: true,
+        /**
+         * Shortcut for domListeners={click:handler}
+         * A string based value assumes that the handlerFn lives inside a controller.Component
+         * @member {Function|String|null} handler_=null
+         */
+        handler_: null,
+        /**
+         * The scope (this pointer) inside the handler function.
+         * Points to the button instance by default.
+         * You can use 'this' as a string for convenience reasons
+         * @member {Object|String|null} handlerScope=null
+         */
+        handlerScope: null,
+        /**
+         * The CSS class to use for an icon, e.g. 'fa fa-home'
+         * @member {String|null} [iconCls_=null]
+         */
+        iconCls_: null,
+        /**
+         * The color to use for an icon, e.g. '#ff0000' [optional]
+         * @member {String|null} iconColor_=null
+         */
+        iconColor_: null,
+        /**
+         * The position of the icon in case iconCls has a value.
+         * Valid values are: 'top', 'right', 'bottom', 'left'
+         * @member {String} iconPosition_='left'
+         */
+        iconPosition_: 'left',
+        /**
+         * An array representing the configuration of the menu items.
+         *
+         * Or a configuration object which adds custom configuration to the menu to be
+         * created and includes an `items` property to define the menu items.
+         * @member {Object|Object[]|null} menu_=null
+         */
+        menu_: null,
+        /**
+         * The pressed state of the Button
+         * @member {Boolean} pressed_=false
+         */
+        pressed_: false,
+        /**
+         * Change the browser hash value on click.
+         * Use route for internal navigation and url for external links. Do not use both on the same instance.
+         * Transforms the button tag into an a tag [optional]
+         * @member {String|null} route_=null
+         */
+        route_: null,
+        /**
+         * @member {String} tag='button'
+         */
+        tag: 'button',
+        /**
+         * Transforms the button tag into an a tag [optional]
+         * @member {String|null} url_=null
+         */
+        url_: null,
+        /**
+         * If url is set, applies the target attribute on the top level vdom node [optional]
+         * @member {String} urlTarget_='_blank'
+         */
+        urlTarget_: '_blank',
+        /**
+         * True adds an expanding circle on click
+         * @member {Boolean} useRippleEffect_=true
+         */
+        useRippleEffect_: true
+    }
+
+    /**
+     * Time in ms for the ripple effect when clicking on the button.
+     * Only active if useRippleEffect is set to true.
+     * @member {Number} rippleEffectDuration=400
+     */
+    rippleEffectDuration = 400
+    /**
+     * Internal flag to store the last setTimeout() id for ripple effect remove node callbacks
+     * @member {Number} #rippleTimeoutId=null
+     * @private
+     */
+    #rippleTimeoutId = null
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.addDomListeners({
+            click: me.onClick,
+            scope: me
+        });
+
+        me.createVdomEffect()
+    }
+
+    /**
+     * Final. Should not be overridden.
+     * This is the core reactive effect.
+     * @returns {Neo.core.Effect}
+     * @protected
+     */
+    createVdomEffect() {
+        return new Effect({fn: () => {
+            // The effect's only job is to get the config and trigger an update.
+            this._vdom = this.getVdomConfig();
+            this.update();
+        }});
+    }
+
+    /**
+     * Builds the array of child nodes (the 'cn' property).
+     * Subclasses can override this to add or remove children.
+     * @returns {Object[]}
+     * @protected
+     */
+    getVdomChildren() {
+        return [
+            // iconNode
+            {tag: 'span', cls: ['neo-button-glyph', ...this._iconCls || []], removeDom: !this.iconCls, style: {color: this.iconColor || null}},
+            // textNode
+            {tag: 'span', cls: ['neo-button-text'], id: `${this.id}__text`, removeDom: !this.text, text: this.text},
+            // badgeNode
+            {cls: ['neo-button-badge', 'neo-' + this.badgePosition], removeDom: !this.badgeText, text: this.badgeText},
+            // rippleWrapper
+            {cls: ['neo-button-ripple-wrapper'], removeDom: !this.useRippleEffect, cn: [{cls: ['neo-button-ripple']}]}
+        ];
+    }
+
+    /**
+     * Builds the array of CSS classes for the root element.
+     * @returns {String[]}
+     * @protected
+     */
+    getVdomCls() {
+        let vdomCls = [...this.baseCls, ...this.cls];
+
+        NeoArray.toggle(vdomCls, 'no-text', !this.text);
+        NeoArray.toggle(vdomCls, 'pressed', this.pressed);
+        vdomCls.push('icon-' + this.iconPosition);
+
+        return vdomCls;
+    }
+
+    /**
+     * Builds the top-level VDOM object.
+     * Subclasses can override this to add or modify root properties.
+     * @returns {Object}
+     * @protected
+     */
+    getVdomConfig() {
+        let me   = this,
+            link = !me.editRoute && me.route || me.url,
+            tag  = link ? 'a' : 'button';
+
+        return {
+            tag,
+            cls    : this.getVdomCls(),
+            href   : link ? (link.startsWith('#') ? link : '#' + link) : null,
+            id     : me.id,
+            style  : me.style,
+            target : me.url ? me.urlTarget : null,
+            type   : tag === 'button' ? 'button' : null,
+            cn     : this.getVdomChildren()
+        };
+    }
+
+    /**
+     * Triggered after the menu config got changed
+     * @param {Object|Object[]|null} value
+     * @param {Object|Object[]|null} oldValue
+     * @protected
+     */
+    afterSetMenu(value, oldValue) {
+        if (value) {
+            import('../menu/List.mjs').then(module => {
+                let me            = this,
+                    isArray       = Array.isArray(value),
+                    items         = isArray ? value : value.items,
+                    menuConfig    = isArray ? {} : value,
+                    stateProvider = me.getStateProvider(),
+                    {appName, theme, windowId} = me,
+
+                    config = Neo.merge({
+                        module         : module.default,
+                        align          : {edgeAlign: 't0-b0', target: me.id},
+                        appName,
+                        displayField   : 'text',
+                        floating       : true,
+                        hidden         : true,
+                        parentComponent: me,
+                        theme,
+                        windowId
+                    }, menuConfig);
+
+                if (items) {
+                    config.items = items
+                }
+
+                if (stateProvider) {
+                    config.stateProvider = {parent: stateProvider}
+                }
+
+                me.menuList = Neo.create(config)
+            })
+        }
+    }
+
+    /**
+     * Triggered after the theme config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetTheme(value, oldValue) {
+        super.afterSetTheme(value, oldValue);
+
+        let {menuList} = this;
+
+        if (menuList) {
+            menuList.theme = value
+        }
+    }
+
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        super.afterSetWindowId(value, oldValue);
+
+        let {menuList} = this;
+
+        if (menuList) {
+            menuList.windowId = value
+        }
+    }
+
+    /**
+     * Converts the iconCls array into a string on beforeGet
+     * @returns {String}
+     * @protected
+     */
+    beforeGetIconCls() {
+        let iconCls = this._iconCls;
+
+        if (Array.isArray(iconCls)) {
+            return iconCls.join(' ')
+        }
+
+        return iconCls
+    }
+
+    /**
+     * Triggered before the badgePosition config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @returns {String}
+     * @protected
+     */
+    beforeSetBadgePosition(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'badgePosition')
+    }
+
+    /**
+     * Triggered before the iconCls config gets changed. Converts the string into an array if needed.
+     * @param {Array|String|null} value
+     * @param {Array|String|null} oldValue
+     * @returns {Array}
+     * @protected
+     */
+    beforeSetIconCls(value, oldValue) {
+        if (value && !Array.isArray(value)) {
+            value = value.split(' ').filter(Boolean)
+        }
+
+        return value
+    }
+
+    /**
+     * Triggered before the iconPosition config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    beforeSetIconPosition(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'iconPosition')
+    }
+
+    /**
+     * @protected
+     */
+    changeRoute() {
+        this.editRoute && Neo.Main.editRoute(this.route)
+    }
+
+    /**
+     * @param args
+     */
+    destroy(...args) {
+        this.menuList?.destroy(true, false);
+        super.destroy(...args)
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onClick(data) {
+        let me = this;
+
+        me.bindCallback(me.handler, 'handler', me.handlerScope || me);
+        me.handler?.(data);
+
+        me.menu            && me.toggleMenu();
+        me.route           && me.changeRoute(); // only relevant for editRoute=true
+        me.useRippleEffect && me.showRipple(data)
+    }
+
+    /**
+     * @param {Object} data
+     */
+    async showRipple(data) {
+        let me                   = this,
+            buttonRect           = data.path[0].rect,
+            diameter             = Math.max(buttonRect.height, buttonRect.width),
+            radius               = diameter / 2,
+            rippleEffectDuration = me.rippleEffectDuration,
+            rippleWrapper        = me.getVdomRoot().cn[3],
+            rippleEl             = rippleWrapper.cn[0],
+            rippleTimeoutId;
+
+        rippleEl.style = Object.assign(rippleEl.style || {}, {
+            animation: 'none',
+            height   : `${diameter}px`,
+            left     : `${data.clientX - buttonRect.left - radius}px`,
+            top      : `${data.clientY - buttonRect.top  - radius}px`,
+            width    : `${diameter}px`
+        });
+
+        delete rippleWrapper.removeDom;
+        me.update();
+
+        await me.timeout(1);
+
+        rippleEl.style.animation = `ripple ${rippleEffectDuration}ms linear`;
+        me.update();
+
+        me.#rippleTimeoutId = rippleTimeoutId = setTimeout(() => {
+            // we do not want to break animations when clicking multiple times
+            if (me.#rippleTimeoutId === rippleTimeoutId) {
+                me.#rippleTimeoutId = null;
+
+                rippleWrapper.removeDom = true;
+                me.update()
+            }
+        }, rippleEffectDuration)
+    }
+
+    /**
+     *
+     */
+    async toggleMenu() {
+        let {menuList} = this,
+            hidden     = !menuList.hidden;
+
+        menuList.hidden = hidden;
+
+        if (!hidden) {
+            await this.timeout(50)
+        }
+    }
+}
+
+export default Neo.setupClass(EffectButton);

package/src/collection/Base.mjs

@@ -454,13 +454,17 @@ class Collection extends Base {
             filters = me._filters || [],
             sorters = me._sorters || [];
 
+        // Ensure the keyProperty does not get lost.
+        config.keyProperty = me.keyProperty;
+
         delete config.id;
         delete config.filters;
         delete config.items;
         delete config.sorters;
 
         if (me._items.length > 0) {
-            config.items = [...me._items]
+            config.items  = [...me._items];
+            config.count = config.items.length;
         }
 
         config.filters = [];
@@ -694,7 +698,8 @@ class Collection extends Base {
 
                 me.allItems = Neo.create(Collection, {
                     ...Neo.clone(config, true, true),
-                    id          : me.id + '-all',
+                    id         : me.id + '-all',
+                    items      : [...me._items], // Initialize with a shallow copy of current items
                     keyProperty: me.keyProperty,
                     sourceId   : me.id
                 })

package/src/component/Base.mjs

@@ -54,11 +54,15 @@ class Component extends Base {
         /**
          * The default alignment specification to position this Component relative to some other
          * Component, or Element or Rectangle. Only applies in case floating = true.
-         * @member {Object|String} align_={edgeAlign:'t-b',constrainTo:'document.body'}
+         * @member {Object|String} align_={[isDescriptor]: true, merge: 'deep', value: {edgeAlign: 't-b',constrainTo: 'document.body'}}
          */
         align_: {
-            edgeAlign  : 't-b',
-            constrainTo: 'document.body'
+            [isDescriptor]: true,
+            merge         : 'deep',
+            value: {
+                edgeAlign  : 't-b',
+                constrainTo: 'document.body'
+            }
         },
         /**
          * The name of the App this component belongs to
@@ -327,9 +331,13 @@ class Component extends Base {
         stateProvider_: null,
         /**
          * Style attributes added to this vdom root. see: getVdomRoot()
-         * @member {Object} style_=null
+         * @member {Object} style={[isDescriptor]: true, merge: 'shallow', value: null}
          */
-        style_: null,
+        style_: {
+            [isDescriptor]: true,
+            merge         : 'shallow',
+            value         : null
+        },
         /**
          * You can pass a used theme directly to any component,
          * to style specific component trees differently from your main view.
@@ -376,13 +384,15 @@ class Component extends Base {
         updateDepth_: 1,
         /**
          * The component vnode tree. Available after the component got rendered.
-         * @member {Object} vnode_=null
+         * @member {Object} vnode_=={[isDescriptor]: true, value: null, isEqual: (a, b) => a === b,}
          * @protected
          */
         vnode_: {
             [isDescriptor]: true,
+            clone         : 'none',
+            cloneOnGet    : 'none',
+            isEqual       : (a, b) => a === b, // vnode trees can be huge, and will get compared by the vdom worker.
             value         : null,
-            isEqual       : (a, b) => a === b // vnode trees can be huge, and will get compared by the vdom worker.
         },
         /**
          * Shortcut for style.width, defaults to px
@@ -400,9 +410,13 @@ class Component extends Base {
         wrapperCls_: null,
         /**
          * Top level style attributes. Useful in case getVdomRoot() does not point to the top level DOM node.
-         * @member {Object|null} wrapperStyle_=null
+         * @member {Object|null} wrapperStyle_={[isDescriptor]: true, merge: 'shallow', value: null}
          */
-        wrapperStyle_: null,
+        wrapperStyle_: {
+            [isDescriptor]: true,
+            merge         : 'shallow',
+            value         : null
+        },
         /**
          * The vdom markup for this component.
          * @member {Object} _vdom={}
@@ -593,7 +607,12 @@ class Component extends Base {
     afterSetConfig(key, value, oldValue) {
         let me = this;
 
-        if (currentWorker.isUsingStateProviders && me[twoWayBindingSymbol] && oldValue !== undefined) {
+        if (Neo.isUsingStateProviders && me[twoWayBindingSymbol]) {
+            // When a component config is updated by its state provider, this flag is set to the config's key.
+            // This prevents circular updates in two-way data bindings by skipping the push back to the state provider.
+            if (me._skipTwoWayPush === key) {
+                return;
+            }
             let binding = me.bind?.[key];
 
             if (binding?.twoWay) {
@@ -939,6 +958,16 @@ class Component extends Base {
         }
     }
 
+    /**
+     * Triggered after the stateProvider config got changed
+     * @param {Neo.state.Provider} value
+     * @param {Object|Neo.state.Provider|null} oldValue
+     * @protected
+     */
+    afterSetStateProvider(value, oldValue) {
+        value?.createBindings(this)
+    }
+
     /**
      * Triggered after the style config got changed
      * @param {Object} value
@@ -1232,8 +1261,7 @@ class Component extends Base {
             }
         }
 
-        // merge the incoming alignment specification into the configured default
-        return Neo.merge({}, value, me.constructor.config.align)
+        return value
     }
 
     /**
@@ -1793,7 +1821,7 @@ class Component extends Base {
      * @returns {Neo.state.Provider|null}
      */
     getStateProvider(ntype) {
-        if (!currentWorker.isUsingStateProviders) {
+        if (!Neo.isUsingStateProviders) {
             return null
         }
 
@@ -1930,16 +1958,11 @@ class Component extends Base {
     }
 
     /**
-     * We are using this method as a ctor hook here to add the initial state.Provider & controller.Component parsing
-     * @param {Object} config
-     * @param {Boolean} [preventOriginalConfig] True prevents the instance from getting an originalConfig property
+     * @param args
      */
-    initConfig(config, preventOriginalConfig) {
-        super.initConfig(config, preventOriginalConfig);
-
-        let me = this;
-
-        me.getStateProvider()?.parseConfig(me)
+    initConfig(...args) {
+        super.initConfig(...args);
+        this.getStateProvider()?.createBindings(this)
     }
 
     /**
@@ -2025,28 +2048,15 @@ class Component extends Base {
      * @returns {Object} config
      */
     mergeConfig(...args) {
-        let me     = this,
-            config = super.mergeConfig(...args),
-
-            // it should be possible to set custom configs for the vdom on instance level,
-            // however there will be already added attributes (e.g. id), so a merge seems to be the best strategy.
-            vdom = {...me._vdom || {}, ...config.vdom || {}};
-
-        // avoid any interference on prototype level
-        // does not clone existing Neo instances
-        me._vdom = Neo.clone(vdom, true, true);
-
-        if (config.style) {
-            // If we are passed an object, merge it with the class's own style
-            me.style = Neo.typeOf(config.style) === 'Object' ? {...config.style, ...me.constructor.config.style} : config.style
-        }
+        let config = super.mergeConfig(...args),
+            vdom   = config.vdom || config._vdom || {};
 
-        me.wrapperStyle = Neo.clone(config.wrapperStyle, false);
+        // It should be possible to modify root level vdom attributes on instance level.
+        // Note that vdom is not a real config, but implemented via get() & set().
+        this._vdom = Neo.clone({...vdom, ...this._vdom || {}}, true);
 
-        delete config.style;
         delete config._vdom;
         delete config.vdom;
-        delete config.wrapperStyle;
 
         return config
     }
@@ -2131,8 +2141,12 @@ class Component extends Base {
      *
      */
     onConstructed() {
-        super.onConstructed();
-        this.keys?.register(this)
+        super.onConstructed()
+
+        let me = this;
+
+        me.keys?.register(me);
+        me.getStateProvider()?.createBindings(me)
     }
 
     /**
@@ -2305,10 +2319,12 @@ class Component extends Base {
      * @param {Boolean} [mount] Mount the DOM after the vnode got created
      */
     async render(mount) {
-        let me              = this,
-            autoMount       = mount || me.autoMount,
-            {app}           = me,
-            {useVdomWorker} = Neo.config;
+        let me                            = this,
+            autoMount                     = mount || me.autoMount,
+            {app}                         = me,
+            {unitTestMode, useVdomWorker} = Neo.config;
+
+        if (unitTestMode) return;
 
         // Verify that the critical rendering path => CSS files for the new tree is in place
         if (autoMount && currentWorker.countLoadingThemeFiles !== 0) {
@@ -2622,6 +2638,11 @@ class Component extends Base {
      * @protected
      */
     updateVdom(resolve, reject) {
+        if (Neo.config.unitTestMode) {
+            reject?.();
+            return
+        }
+
         let me                              = this,
             {app, mounted, parentId, vnode} = me;