neo.mjs 10.0.0-beta.5 → 10.0.0

package/src/form/field/TextArea.mjs

@@ -39,6 +39,7 @@ class TextArea extends Text {
         /**
          * True shows a clear trigger in case the field has a non-empty value.
          * @member {Boolean} clearable=false
+         * @reactive
          */
         clearable: false,
         /**
@@ -46,10 +47,12 @@ class TextArea extends Text {
          * If it is specified, it must be a positive integer.
          * If it is not specified, the default value is 20.
          * @member {Number|null} cols_=null
+         * @reactive
          */
         cols_: null,
         /**
          * @member {String} inputTag_='textarea'
+         * @reactive
          */
         inputTag_: 'textarea',
         /**
@@ -57,16 +60,19 @@ class TextArea extends Text {
          * See: inputTag_
          * @member {String|null} inputType=null
          * @protected
+         * @reactive
          */
         inputType: null,
         /**
          * Use false to disable the browsers default resizing feature
          * @member {Boolean} resizable_=false
+         * @reactive
          */
         resizable_: false,
         /**
          * An integer > 0 or null
          * @member {Number|null} rows_=3
+         * @reactive
          */
         rows_: 3,
         /**
@@ -74,6 +80,7 @@ class TextArea extends Text {
          * If this attribute is not specified, soft is its default value.
          * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
          * @member {String|null} wrap_=null
+         * @reactive
          */
         wrap_: null
     }

package/src/form/field/Time.mjs

@@ -30,6 +30,7 @@ class Time extends Picker {
         collection: null,
         /**
          * @member {String} inputType='time'
+         * @reactive
          */
         inputType: 'time',
         /**
@@ -51,10 +52,12 @@ class Time extends Picker {
         listConfig: null,
         /**
          * @member {String} maxValue_='16:00'
+         * @reactive
          */
         maxValue_: '16:00',
         /**
          * @member {String} minValue_='08:00'
+         * @reactive
          */
         minValue_: '08:00',
         /**
@@ -65,11 +68,13 @@ class Time extends Picker {
         /**
          * Value in seconds, defaults to 5min
          * @member {Number} stepSize_=60*5
+         * @reactive
          */
         stepSize_: 60 * 5, // 5min
         /**
          * @member {Object|Object[]} triggers=[{module: TimeTrigger}]
          * @protected
+         * @reactive
          */
         triggers: [{
             module: TimeTrigger
@@ -77,6 +82,7 @@ class Time extends Picker {
         /**
          * @member {Intl.DateTimeFormat|null} valueFormat_=null
          * @protected
+         * @reactive
          */
         valueFormat_: null
     }

package/src/form/field/Url.mjs

@@ -24,15 +24,18 @@ class Url extends Text {
         errorTextInputPattern: data => 'Not a valid URL',
         /**
          * @member {RegExp|null} inputPattern=/^(https?:\/\/)?(([a-zA-Z0-9_-]+\.)*([a-zA-Z0-9_-]+\.[a-zA-Z]{2,}))(\/([a-zA-Z0-9._-]+)\/?)*$/
+         * @reactive
          */
         inputPattern: /^(https?:\/\/)?(([a-zA-Z0-9_-]+\.)*([a-zA-Z0-9_-]+\.[a-zA-Z]{2,}))(\/([a-zA-Z0-9._-]+)\/?)*$/,
         /**
          * @member {Boolean} inputPatternDOM=false
+         * @reactive
          */
         inputPatternDOM: false,
         /**
          * Value for the inputType_ textfield config
          * @member {String} inputType='url'
+         * @reactive
          */
         inputType: 'url'
     }

package/src/form/field/ZipCode.mjs

@@ -31,11 +31,13 @@ class ZipCode extends Text {
         ntype: 'zipcodefield',
         /**
          * @member {String} countryCode_=null
+         * @reactive
          */
         countryCode_: null,
         /**
          * You can either pass a field instance or a field reference
          * @member {Neo.form.field.Base|String|null} countryField_=null
+         * @reactive
          */
         countryField_: null,
         /**

package/src/form/field/trigger/Base.mjs

@@ -28,6 +28,7 @@ class Base extends Component {
         ntype: 'trigger',
         /**
          * @member {String} align_='end'
+         * @reactive
          */
         align: 'end',
         /**
@@ -40,6 +41,7 @@ class Base extends Component {
         field_: null,
         /**
          * @member {String|null} iconCls_=null
+         * @reactive
          */
         iconCls_: null,
         /**
@@ -64,6 +66,7 @@ class Base extends Component {
         type: 'base',
         /**
          * @member {Number} weight_=10
+         * @reactive
          */
         weight_: 10
     }

package/src/form/field/trigger/Clear.mjs

@@ -24,6 +24,7 @@ class Clear extends Base {
         baseCls: ['neo-field-trigger', 'neo-trigger-clear'],
         /**
          * @member {String|null} iconCls='fa fa-times'
+         * @reactive
          */
         iconCls: 'fa fa-times',
         /**
@@ -34,6 +35,7 @@ class Clear extends Base {
         type: 'clear',
         /**
          * @member {Number} weight_=20
+         * @reactive
          */
         weight: 20
     }

package/src/form/field/trigger/CopyToClipboard.mjs

@@ -24,6 +24,7 @@ class CopyToClipboard extends Base {
         baseCls: ['neo-field-trigger', 'neo-trigger-clipboard'],
         /**
          * @member {String|null} iconCls='fa fa-clipboard'
+         * @reactive
          */
         iconCls: 'fa fa-clipboard',
         /**
@@ -38,6 +39,7 @@ class CopyToClipboard extends Base {
         type: 'copyToClipboard',
         /**
          * @member {Number} weight_=21
+         * @reactive
          */
         weight: 21
     }

package/src/form/field/trigger/Date.mjs

@@ -19,6 +19,7 @@ class DateTrigger extends Picker {
         ntype: 'trigger-date',
         /**
          * @member {String|null} iconCls='fa fa-calendar-alt'
+         * @reactive
          */
         iconCls: 'fa fa-calendar-alt'
     }

package/src/form/field/trigger/Picker.mjs

@@ -19,6 +19,7 @@ class Picker extends Base {
         ntype: 'trigger-picker',
         /**
          * @member {String|null} iconCls='fa fa-caret-down'
+         * @reactive
          */
         iconCls: 'fa fa-caret-down',
         /**

package/src/form/field/trigger/Search.mjs

@@ -18,6 +18,7 @@ class Search extends Picker {
         ntype: 'trigger-search',
         /**
          * @member {String|null} iconCls='fas fa-magnifying-glass'
+         * @reactive
          */
         iconCls: 'fas fa-magnifying-glass'
     }

package/src/form/field/trigger/SpinDown.mjs

@@ -19,10 +19,12 @@ class SpinDown extends Base {
         ntype: 'trigger-spindown',
         /**
          * @member {String} align_='start'
+         * @reactive
          */
         align: 'start',
         /**
          * @member {String|null} iconCls='fa fa-chevron-left'
+         * @reactive
          */
         iconCls: 'fa fa-chevron-left',
         /**

package/src/form/field/trigger/SpinUp.mjs

@@ -19,6 +19,7 @@ class SpinUp extends Base {
         ntype: 'trigger-spinup',
         /**
          * @member {String|null} iconCls='fa fa-chevron-right'
+         * @reactive
          */
         iconCls: 'fa fa-chevron-right',
         /**

package/src/form/field/trigger/Time.mjs

@@ -33,6 +33,7 @@ class Time extends Picker {
         clockConfig: null,
         /**
          * @member {String|null} iconCls=null
+         * @reactive
          */
         iconCls: null,
         /**
@@ -43,6 +44,7 @@ class Time extends Picker {
         /**
          * Format: hh:mm
          * @member {String|null} value_=null
+         * @reactive
          */
         value_: null
     }

package/src/functional/_export.mjs

@@ -0,0 +1,6 @@
+import Component       from './component/Base.mjs';
+import defineComponent from './defineComponent.mjs';
+import useConfig       from './useConfig.mjs';
+import useEvent        from './useEvent.mjs';
+
+export {Component, defineComponent, useConfig, useEvent};

package/src/functional/button/Base.mjs

@@ -0,0 +1,384 @@
+import FunctionalBase from '../../functional/component/Base.mjs';
+import NeoArray       from '../../util/Array.mjs';
+
+/**
+ * @class Neo.functional.button.Base
+ * @extends Neo.functional.component.Base
+ */
+class Button extends FunctionalBase {
+    /**
+     * 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.functional.button.Base'
+         * @protected
+         */
+        className: 'Neo.functional.button.Base',
+        /**
+         * @member {String} ntype='functional-button'
+         * @protected
+         */
+        ntype: 'functional-button',
+        /**
+         * @member {String} badgePosition_='top-right'
+         * @reactive
+         */
+        badgePosition_: 'top-right',
+        /**
+         * @member {String|null} badgeText_=null
+         * @reactive
+         */
+        badgeText_: null,
+        /**
+         * @member {String[]} baseCls=['neo-button']
+         */
+        baseCls: ['neo-button'],
+        /**
+         * false calls Neo.Main.setRoute()
+         * @member {Boolean} editRoute=true
+         */
+        editRoute: true,
+        /**
+         * @member {Function|String|null} handler_=null
+         * @reactive
+         */
+        handler_: null,
+        /**
+         * @member {Object|String|null} handlerScope=null
+         */
+        handlerScope: null,
+        /**
+         * @member {String[]|null} [iconCls_=null]
+         * @reactive
+         */
+        iconCls_: null,
+        /**
+         * @member {String|null} iconColor_=null
+         * @reactive
+         */
+        iconColor_: null,
+        /**
+         * @member {String} iconPosition_='left'
+         * @reactive
+         */
+        iconPosition_: 'left',
+        /**
+         * @member {Object|Object[]|null} menu_=null
+         * @reactive
+         */
+        menu_: null,
+        /**
+         * @member {Boolean} pressed_=false
+         * @reactive
+         */
+        pressed_: false,
+        /**
+         * Internal state for managing the ripple effect animations.
+         * Each object in the array requires a unique `id`.
+         * @member {Array} ripples_=[]
+         * @protected
+         * @reactive
+         */
+        ripples_: [],
+        /**
+         * @member {String|null} route_=null
+         * @reactive
+         */
+        route_: null,
+        /**
+         * @member {String} tag='button'
+         * @reactive
+         */
+        tag: 'button',
+        /**
+         * @member {String|null} text_=null
+         * @reactive
+         */
+        text_: null,
+        /**
+         * @member {String|null} url_=null
+         * @reactive
+         */
+        url_: null,
+        /**
+         * @member {String} urlTarget_='_blank'
+         * @reactive
+         */
+        urlTarget_: '_blank',
+        /**
+         * @member {Boolean} useRippleEffect_=true
+         * @reactive
+         */
+        useRippleEffect_: true
+    }
+
+    /**
+     * @member {Number} rippleEffectDuration=400
+     */
+    rippleEffectDuration = 400
+    /**
+     * @member {Number|null} rippleCleanupTimeout=null
+     * @protected
+     */
+    rippleCleanupTimeout = null
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.addDomListeners({
+            click: me.onClick,
+            scope: me
+        })
+    }
+
+    /**
+     * The single source of truth for the button's VDOM.
+     * This method is automatically re-run when any of its dependent configs change.
+     * @param {Object} config The component's config object (this instance).
+     * @param {Object} data The hierarchical data from state.Provider.
+     * @returns {Object}
+     */
+    createVdom(config, data) {
+        const me = this,
+              {
+                  badgePosition, badgeText, cls, editRoute, iconCls, iconColor, iconPosition,
+                  pressed, ripples, route, style, tag, text, url, urlTarget, useRippleEffect
+              }  = config;
+
+        const vdomCls = [...me.baseCls, ...cls || []];
+        NeoArray.toggle(vdomCls, 'no-text', !text);
+        NeoArray.toggle(vdomCls, 'pressed', pressed);
+        vdomCls.push('icon-' + iconPosition);
+
+        const link     = !editRoute && route || url;
+        const finalTag = link ? 'a' : tag;
+
+        return {
+            tag   : finalTag,
+            cls   : vdomCls,
+            style,
+            href  : link ? (link.startsWith('#') ? link : '#' + link) : null,
+            target: url ? urlTarget : null,
+            type  : finalTag === 'button' ? 'button' : null,
+            cn    : [
+                // iconNode
+                {
+                    tag      : 'span',
+                    cls      : ['neo-button-glyph', ...iconCls || []],
+                    removeDom: !iconCls,
+                    style    : {color: iconColor || null}
+                },
+                // textNode
+                {
+                    tag      : 'span',
+                    cls      : ['neo-button-text'],
+                    removeDom: !text,
+                    text
+                },
+                // badgeNode
+                {
+                    tag      : 'span',
+                    cls      : ['neo-button-badge', 'neo-' + badgePosition],
+                    removeDom: !badgeText,
+                    text     : badgeText
+                },
+                // rippleWrapper
+                {
+                    cls      : ['neo-button-ripple-wrapper'],
+                    removeDom: !(useRippleEffect && ripples.length > 0),
+                    cn       : ripples.map(ripple => ({
+                        cls  : ['neo-button-ripple'],
+                        id   : ripple.id,
+                        style: {
+                            animation: `ripple ${me.rippleEffectDuration}ms linear`,
+                            height   : `${ripple.diameter}px`,
+                            left     : `${ripple.left}px`,
+                            top      : `${ripple.top}px`,
+                            width    : `${ripple.diameter}px`
+                        }
+                    }))
+                }
+            ]
+        }
+    }
+
+    /**
+     * @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();
+
+        if (me.useRippleEffect) {
+            const buttonRect = data.path[0].rect;
+            const diameter   = Math.max(buttonRect.height, buttonRect.width);
+            const radius     = diameter / 2;
+            const rippleId   = Neo.getId('ripple');
+
+            // Add a new ripple to the state
+            me.ripples = [...me.ripples, {
+                id  : rippleId,
+                diameter,
+                left: data.clientX - buttonRect.left - radius,
+                top : data.clientY - buttonRect.top - radius
+            }];
+
+            // Clear any previously scheduled cleanup to ensure only the last
+            // click's timer will execute the cleanup.
+            clearTimeout(me.rippleCleanupTimeout);
+
+            // Schedule the cleanup for the entire ripples array.
+            me.rippleCleanupTimeout = me.timeout(me.rippleEffectDuration).then(() => {
+                me.ripples = [];
+            });
+        }
+    }
+
+    /**
+     * Triggered after the menu config got changed
+     * @param {Object|Object[]|null} value
+     * @param {Object|Object[]|null} oldValue
+     * @protected
+     */
+    afterSetMenu(value, oldValue) {
+        const me = this;
+
+        if (value) {
+            // Ensure menuList is destroyed before creating a new one
+            me.menuList?.destroy(true, false);
+            me.menuList = null;
+
+            import('../../menu/List.mjs').then(module => {
+                const 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)
+            })
+        } else if (me.menuList) {
+            me.menuList.destroy(true, false);
+            me.menuList = null;
+        }
+    }
+
+    /**
+     * Triggered before the badgePosition config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @returns {String}
+     * @protected
+     */
+    beforeSetBadgePosition(value, oldValue) {
+        // Using `this.constructor.badgePositions` is superior to `Button.badgePositions` for future class extensions
+        return this.beforeSetEnumValue(value, oldValue, 'badgePosition', this.constructor.badgePositions)
+    }
+
+    /**
+     * 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|null}
+     * @protected
+     */
+    beforeSetIconCls(value, oldValue) {
+        if (value && !Array.isArray(value)) {
+            return value.split(' ').filter(Boolean)
+        }
+
+        return value || null
+    }
+
+    /**
+     * Triggered before the iconPosition config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    beforeSetIconPosition(value, oldValue) {
+        // Using `this.constructor.iconPositions` is superior to `Button.iconPositions` for future class extensions
+        return this.beforeSetEnumValue(value, oldValue, 'iconPosition', this.constructor.iconPositions)
+    }
+
+    /**
+     * @protected
+     */
+    changeRoute() {
+        const me = this;
+        me.editRoute && Neo.Main.editRoute(me.route)
+    }
+
+    /**
+     * @param args
+     */
+    destroy(...args) {
+        const me = this;
+
+        clearTimeout(me.rippleCleanupTimeout);
+        me.menuList?.destroy(true, false);
+        super.destroy(...args)
+    }
+
+    /**
+     *
+     */
+    async toggleMenu() {
+        const me       = this;
+        let {menuList} = me,
+            hidden     = !menuList?.hidden;
+
+        if (menuList) {
+            menuList.hidden = hidden;
+
+            if (!hidden) {
+                await me.timeout(50)
+            }
+        }
+    }
+}
+
+export default Neo.setupClass(Button);