neo.mjs 6.17.1 → 6.18.0

package/src/component/Process.mjs

@@ -21,27 +21,6 @@ import NeoArray from '../util/Array.mjs';
  *     }
  */
 class Process extends Base {
-    /**
-     * Each item gets an arrow and the content, which gets filled with an item.
-     * The slit allows to fade out the sidebar.
-     *
-     * @member {Object} itemLayout={cls: 'process-step', cn: [{cls: ['arrow', 'white']},{cls: ['slit']},{cls: ['arrow', 'yellow']},{cls: 'process-content', cn: [{cls: ['process-step-icon']},{tag: 'h2', cls: ['process-step-header']},{cls: ['process-step-text']}]}]}
-     */
-    itemLayout = {
-        cls: 'process-step', cn: [
-            {cls: ['arrow', 'white']},
-            {cls: ['slit']},
-            {cls: ['arrow', 'yellow']},
-            {
-                cls: 'process-content', cn: [
-                    {cls: ['process-step-icon']},
-                    {tag: 'h2', cls: ['process-step-header']},
-                    {cls: ['process-step-text']}
-                ]
-            }
-        ]
-    }
-
     static config = {
         /**
          * @member {String} className='Neo.component.Process'
@@ -108,18 +87,39 @@ class Process extends Base {
         vdom: {cn: []}
     }
 
+    /**
+     * Each item gets an arrow and the content, which gets filled with an item.
+     * The slit allows to fade out the sidebar.
+     *
+     * @member {Object} itemLayout={cls: 'process-step', cn: [{cls: ['arrow', 'white']},{cls: ['slit']},{cls: ['arrow', 'yellow']},{cls: 'process-content', cn: [{cls: ['process-step-icon']},{tag: 'h2', cls: ['process-step-header']},{cls: ['process-step-text']}]}]}
+     */
+    itemLayout = {
+        cls: 'process-step', cn: [
+            {cls: ['arrow', 'white']},
+            {cls: ['slit']},
+            {cls: ['arrow', 'yellow']},
+            {
+                cls: 'process-content', cn: [
+                    {cls: ['process-step-icon']},
+                    {tag: 'h2', cls: ['process-step-header']},
+                    {cls: ['process-step-text']}
+                ]
+            }
+        ]
+    }
+
     /**
      * Triggered after arrowColor config got changed
      * @param {String} newValue
      * @protected
      */
     afterSetArrowColor(newValue) {
-        if (newValue === null) return;
-
-        let style = this.style;
+        if (newValue !== null) {
+            let style = this.style;
 
-        style['--process-arrow-color'] = newValue + '!important';
-        this.style = style;
+            style['--process-arrow-color'] = newValue + '!important';
+            this.style = style
+        }
     }
 
     /**
@@ -128,14 +128,14 @@ class Process extends Base {
      * @protected
      */
     afterSetHorizontal(isHorizontal) {
-        let cls         = this.cls,
+        let {cls}       = this,
             positionCls = isHorizontal ? 'neo-process-horizontal' : 'neo-process-vertical',
             removeCls   = !isHorizontal ? 'neo-process-horizontal' : 'neo-process-vertical';
 
         NeoArray.add(cls, positionCls);
         NeoArray.remove(cls, removeCls);
 
-        this.cls = cls;
+        this.cls = cls
     }
 
     /**
@@ -144,12 +144,13 @@ class Process extends Base {
      * @protected
      */
     afterSetIconColor(newValue) {
-        if (newValue === null) return;
-        let style = this.style;
+        if (newValue !== null) {
+            let {style} = this;
 
-        style['--process-icon-color'] = newValue + '!important';
+            style['--process-icon-color'] = newValue + '!important';
 
-        this.style = style;
+            this.style = style
+        }
     }
 
     /**
@@ -164,18 +165,19 @@ class Process extends Base {
         }
 
         let vdomRoot   = this.vdom,
-            itemLayout = this.itemLayout;
+            itemLayout = this.itemLayout,
+            curItem, content;
 
         items.forEach((newItem) => {
-            let curItem = Neo.clone(itemLayout, true),
-                content = curItem.cn[3];
+            curItem = Neo.clone(itemLayout, true),
+            content = curItem.cn[3];
 
             content.cn[0].cls.push(newItem.iconCls);
             content.cn[1].innerHTML = newItem.title;
             content.cn[2].innerHTML = newItem.text;
 
-            NeoArray.add(vdomRoot.cn, curItem);
-        });
+            NeoArray.add(vdomRoot.cn, curItem)
+        })
     }
 }
 

package/src/component/Splitter.mjs

@@ -87,10 +87,10 @@ class Splitter extends Component {
      * @protected
      */
     afterSetDirection(value, oldValue) {
-        let me     = this,
-            cls    = me.cls,
-            height = value === 'vertical' ? null : me.size,
-            width  = value !== 'vertical' ? null : me.size;
+        let me          = this,
+            {cls, size} = me,
+            height      = value === 'vertical' ? null : size,
+            width       = value !== 'vertical' ? null : size;
 
         NeoArray.add(cls, `neo-${value}`);
 
@@ -143,12 +143,10 @@ class Splitter extends Component {
      * @param {Object} data
      */
     onDragEnd(data) {
-        let me         = this,
-            style      = me.style || {},
-            parent     = me.parent,
-            parentId   = me.parentId,
-            resizeNext = me.resizeTarget === 'next',
-            size       = me.size,
+        let me                       = this,
+            style                    = me.style || {},
+            {parent, parentId, size} = me,
+            resizeNext               = me.resizeTarget === 'next',
             index, newSize, sibling;
 
         parent.disabled = false;
@@ -189,7 +187,7 @@ class Splitter extends Component {
 
                 newSize = Math.min(Math.max(newSize, 0), parentRect.height - size);
 
-                style.height = `${newSize}px`;
+                style.height = `${newSize}px`
             }
 
             sibling.style = style

package/src/component/StatusBadge.mjs

@@ -283,9 +283,8 @@ class StatusBadge extends Base {
      * @protected
      */
     afterSetState(value, oldValue) {
-
         let me        = this,
-            cls       = me.cls,
+            {cls}     = me,
             isEmpty   = !value || value === '',
             vdomRoot  = me.getVdomRoot(),
             labelNode = vdomRoot.cn[1];
@@ -333,7 +332,7 @@ class StatusBadge extends Base {
             labelNode.innerHTML = showLabel;
 
             me.updateStateIconNode(showStateIcon);
-            me.updateSideIconNode(showSideIcon);
+            me.updateSideIconNode(showSideIcon)
         }
 
         me.update()

package/src/component/Timer.mjs

@@ -60,27 +60,26 @@ class Timer extends Component {
          * The vdom markup for this component.
          * @member {Object} vdom={}
          */
-        vdom: {
-            cn: [
-                {cls: 'countdown', cn : [
-                        {tag: 'svg', cls: 'clock', viewBox: "-50 -50 100 100", strokeWidth: "10", cn: [
-                                {tag: 'circle', r: 45},
-                                {tag: 'circle', r: 45,pathLength: 1}
-                            ]},
-                        {cls: ['flip-card'], cn : [
-                                {cls: 'flip-card-inner enter-mask', cn : [
-                                        {cls: 'flip-card-front', cn : [
-                                                {tag: 'input', cls: 'enter-time'},
-                                                {tag: 'button',cls: 'fa fa-play'}
-                                            ]},
-                                        {cls: 'flip-card-back', cn : [
-                                                {cls : 'runner', html: '00:00'}
-                                            ]}
-                                    ]}
-                            ]}
+        vdom:
+        {cn: [
+            {cls: 'countdown', cn: [
+                {tag: 'svg', cls: 'clock', viewBox: '-50 -50 100 100', strokeWidth: '10', cn: [
+                    {tag: 'circle', r: 45},
+                    {tag: 'circle', r: 45, pathLength: 1}
+                ]},
+                {cls: ['flip-card'], cn : [
+                    {cls: 'flip-card-inner enter-mask', cn : [
+                        {cls: 'flip-card-front', cn : [
+                            {tag: 'input', cls: 'enter-time'},
+                            {tag: 'button',cls: 'fa fa-play'}
+                        ]},
+                        {cls: 'flip-card-back', cn : [
+                            {cls: 'runner', html: '00:00'}
+                        ]}
                     ]}
-            ]
-        }
+                ]}
+            ]}
+        ]}
     }
 
     /**
@@ -92,12 +91,12 @@ class Timer extends Component {
         let me = this;
 
         me.addDomListeners([
-            {click: me.onTimerClick, delegate: 'flip-card-back'},
-            {click: me.onTimerClick, delegate: 'fa fa-play'},
-            {input: me.onTimerInput, delegate: 'enter-time'},
-            {focusout: me.onTimerInput, delegate: 'enter-time'},
-            {keydown: me.onFieldKeyDown, delegate: 'enter-time'}
-        ]);
+            {click   : me.onTimerClick,   delegate: 'flip-card-back'},
+            {click   : me.onTimerClick,   delegate: 'fa fa-play'},
+            {input   : me.onTimerInput,   delegate: 'enter-time'},
+            {focusout: me.onTimerInput,   delegate: 'enter-time'},
+            {keydown : me.onFieldKeyDown, delegate: 'enter-time'}
+        ])
     }
 
     /**
@@ -108,9 +107,10 @@ class Timer extends Component {
      */
     afterSetDimensions(value, oldValue) {
         if (typeof value === 'number') {
-            value = value + 'px';
+            value = value + 'px'
         }
-        this.updateProperties({dimensions: value});
+
+        this.updateProperties({dimensions: value})
     }
 
     /**
@@ -120,8 +120,7 @@ class Timer extends Component {
      * @protected
      */
     afterSetColorStart(value, oldValue) {
-        if (!value) return;
-        this.updateProperties({colorStart: value});
+        value && this.updateProperties({colorStart: value})
     }
 
     /**
@@ -131,34 +130,35 @@ class Timer extends Component {
      * @protected
      */
     afterSetColorEnd(value, oldValue) {
-        if (!value) return;
-        this.updateProperties({colorEnd: value});
+        value && this.updateProperties({colorEnd: value})
     }
 
     /**
      * Triggered before the duration config got changed
      * @param {Number|String} value
      * @param {Number|String} oldValue
+     * @returns {Number}
      * @protected
      */
     beforeSetDuration(value, oldValue) {
-        const me = this;
+        let me = this,
+            durationType;
 
         me.updateInputField(value)
 
-        if (typeof value === 'string') {
-            const durationType = value.at(-1);
+        if (Neo.isString(value)) {
+            durationType = value.at(-1);
 
             if (durationType === 'm') {
-                value = value.split('m')[0] * 60 * 1000;
+                value = value.split('m')[0] * 60 * 1000
             } else if (durationType === 's') {
-                value = value.split('s')[0] * 1000;
+                value = value.split('s')[0] * 1000
             }
         }
 
         me.updateProperties({full: value});
 
-        return value;
+        return value
     }
 
     /**
@@ -166,11 +166,11 @@ class Timer extends Component {
      * @param {Object} data
      */
     onFieldKeyDown(data) {
-        const me = this;
+        let me = this;
 
         if (data.key === 'Enter') {
             me.duration = me.timer.entry;
-            me.onTimerClick();
+            me.onTimerClick()
         }
     }
 
@@ -178,12 +178,12 @@ class Timer extends Component {
      * Click on Play or Timer
      */
     onTimerClick() {
-        const me = this;
+        let me = this;
 
         // If the timer is running, stop and clear it
         if (me.timer.intervalId) {
             me.toggleTimer(false);
-            me.resetTimer();
+            me.resetTimer()
         } else {
             // prepare
             me.timer.startTime = new Date().getTime();
@@ -196,7 +196,7 @@ class Timer extends Component {
 
                 if (curTime > endTime) {
                     me.toggleTimer(false);
-                    me.resetTimer();
+                    me.resetTimer()
                 } else {
                     const milliseconds = endTime - curTime,
                           secondsLeft  = Math.floor(milliseconds / 1000);
@@ -212,10 +212,10 @@ class Timer extends Component {
 
                         me.updateTimer(`${minutesNow}:${secondsNow}`);
                         me.updateProperties({current: milliseconds});
-                        me.toggleTimer(true);
+                        me.toggleTimer(true)
                     }
                 }
-            }, 100);
+            }, 100)
         }
     }
 
@@ -224,12 +224,12 @@ class Timer extends Component {
      * @param {Object} data
      */
     onTimerInput(data) {
-        const me = this;
+        let me = this;
 
         if (data.value) {
             me.timer.entry = data.value
         } else {
-            me.duration = me.timer.entry;
+            me.duration = me.timer.entry
         }
     }
 
@@ -237,13 +237,13 @@ class Timer extends Component {
      * Reset the properties, timer and remove Interval
      */
     resetTimer() {
-        const me = this;
+        let me = this;
 
         me.updateProperties({current: ''});
         me.updateTimer('00:00');
 
         clearInterval(me.timer.intervalId);
-        delete me.timer.intervalId;
+        delete me.timer.intervalId
     }
 
     /**
@@ -254,16 +254,14 @@ class Timer extends Component {
         if(this.running === doShow) return;
 
         let me       = this,
-            turnFn   = doShow ? 'add' : 'remove',
-            vdom     = me.vdom,
-            flipCard = vdom.cn[0].cn[1];
+            flipCard = me.vdom.cn[0].cn[1];
 
         me.running = doShow;
 
         flipCard.cls = flipCard.cls || [];
 
-        NeoArray[turnFn](flipCard.cls, 'turn');
-        me.vdom = vdom;
+        NeoArray[doShow ? 'add' : 'remove'](flipCard.cls, 'turn');
+        me.update()
     }
 
     /**
@@ -272,8 +270,7 @@ class Timer extends Component {
      */
     updateInputField(value) {
         let me         = this,
-            vdom       = me.vdom,
-            inputField = vdom.cn[0].cn[1].cn[0].cn[0].cn[0];
+            inputField = me.vdom.cn[0].cn[1].cn[0].cn[0].cn[0];
 
         inputField.value = value;
     }
@@ -284,11 +281,10 @@ class Timer extends Component {
      */
     updateTimer(value) {
         let me    = this,
-            vdom  = me.vdom,
-            timer = vdom.cn[0].cn[1].cn[0].cn[1].cn[0];
+            timer = me.vdom.cn[0].cn[1].cn[0].cn[1].cn[0];
 
         timer.innerHTML = value;
-        me.vdom = vdom;
+        me.update()
     }
 
     /**
@@ -299,27 +295,25 @@ class Timer extends Component {
      * @param {Object} properties
      */
     updateProperties(properties) {
-        // Neo.setCssVariable({key: '--neo-timer-full', value: '\'200\''});
-        let me    = this,
-            style = me.style;
+        let {style} = this;
 
         if (properties.current !== undefined) {
-            style['--neo-timer-current'] = `${properties.current}!important`;
+            style['--neo-timer-current'] = `${properties.current}!important`
         }
         if (properties.full !== undefined) {
-            style['--neo-timer-full'] = `${properties.full}!important`;
+            style['--neo-timer-full'] = `${properties.full}!important`
         }
         if (properties.colorEnd !== undefined) {
-            style['--timer-color-end'] = `${properties.colorEnd}!important`;
+            style['--timer-color-end'] = `${properties.colorEnd}!important`
         }
         if (properties.colorStart !== undefined) {
-            style['--timer-color-start'] = `${properties.colorStart}!important`;
+            style['--timer-color-start'] = `${properties.colorStart}!important`
         }
         if (properties.dimensions !== undefined) {
-            style['--timer-dimension'] = `${properties.dimensions}!important`;
+            style['--timer-dimension'] = `${properties.dimensions}!important`
         }
 
-        me.style = style;
+        this.style = style
     }
 }
 

package/src/component/Toast.mjs

@@ -139,7 +139,7 @@ class Toast extends Base {
             {click: {fn: me.destroy, delegate: '.neo-toast-close', scope: me}}
         ]);
 
-        ToastManager.register(me);
+        ToastManager.register(me)
     }
 
     /**
@@ -149,7 +149,7 @@ class Toast extends Base {
     afterSetClosable(value, oldValue) {
         let vdom = this.getVdomInner().cn[2];
 
-        vdom.removeDom = !value;
+        vdom.removeDom = !value
     }
 
     /**
@@ -158,10 +158,10 @@ class Toast extends Base {
      */
     afterSetIconCls(value, oldValue) {
         let vdom  = this.getVdomInner().cn[0],
-            cls   = vdom.cls;
+            {cls} = vdom;
 
         vdom.removeDom = Neo.isEmpty(value);
-        NeoArray[value ? 'add' : 'remove'](cls, value);
+        NeoArray[value ? 'add' : 'remove'](cls, value)
     }
 
     /**
@@ -174,7 +174,7 @@ class Toast extends Base {
     afterSetMsg(value, oldValue) {
         let vdom = this.getTextRootVdom().cn[1];
 
-        vdom.innerHTML = value;
+        vdom.innerHTML = value
     }
 
     /**
@@ -207,7 +207,7 @@ class Toast extends Base {
 
         if (!me.closable && value) {
             setTimeout(() => {
-                this.destroy(true);
+                this.destroy(true)
             }, me.timeout)
         }
     }
@@ -221,7 +221,7 @@ class Toast extends Base {
 
         vdom.removeDom = Neo.isEmpty(value);
         vdom.innerHTML = value;
-        NeoArray[value ? 'add' : 'remove'](vdom.cls, 'neo-toast-has-title');
+        NeoArray[value ? 'add' : 'remove'](vdom.cls, 'neo-toast-has-title')
     }
 
     /**
@@ -231,7 +231,7 @@ class Toast extends Base {
      * @protected
      */
     beforeSetPosition(value, oldValue) {
-        return this.beforeSetEnumValue(value, oldValue, 'position');
+        return this.beforeSetEnumValue(value, oldValue, 'position')
     }
 
     /**
@@ -241,7 +241,7 @@ class Toast extends Base {
      * @protected
      */
     beforeSetSlideDirection(value, oldValue) {
-        return this.beforeSetEnumValue(value, oldValue, 'slideDirection');
+        return this.beforeSetEnumValue(value, oldValue, 'slideDirection')
     }
 
     /**
@@ -267,7 +267,7 @@ class Toast extends Base {
      * @returns {Object} vdom
      */
     getTextRootVdom() {
-        return this.getVdomInner().cn[1];
+        return this.getVdomInner().cn[1]
     }
 
     /**
@@ -275,7 +275,7 @@ class Toast extends Base {
      * @returns {Object} vdom
      */
     getVdomInner() {
-        return this.vdom.cn[0];
+        return this.vdom.cn[0]
     }
 }
 

package/src/component/Video.mjs

@@ -99,14 +99,14 @@ class Video extends BaseComponent {
      * @param {Boolean} oldValue
      */
     afterSetPlaying(value, oldValue) {
-        let vdom  = this.vdom,
-            media = VDomUtil.getFlags(vdom, 'media')[0],
-            ghost = VDomUtil.getFlags(vdom, 'ghost')[0];
+        let {vdom} = this,
+            media  = VDomUtil.getFlags(vdom, 'media')[0],
+            ghost  = VDomUtil.getFlags(vdom, 'ghost')[0];
 
         ghost.removeDom = value;
         media.removeDom = !value;
 
-        this.vdom = vdom
+        this.update()
     }
 
     /**
@@ -121,9 +121,8 @@ class Video extends BaseComponent {
             return
         }
 
-        const me = this;
-        let vdom  = me.vdom,
-            media = vdom.cn[1];
+        let me    = this,
+            media = me.vdom.cn[1];
 
         media.cn = [{
             tag : 'source',
@@ -131,7 +130,7 @@ class Video extends BaseComponent {
             type: me.type
         }];
 
-        me.vdom = vdom
+        me.update()
     }
 
     /**