neo.mjs 5.10.12 → 5.11.0

package/src/component/DateSelector.mjs

@@ -75,6 +75,14 @@ class DateSelector extends Component {
          * @member {String} locale_=Neo.config.locale
          */
         locale_: Neo.config.locale,
+        /**
+         * @member {String|null} maxValue_=null
+         */
+        maxValue_: null,
+        /**
+         * @member {String|null} minValue_=null
+         */
+        minValue_: null,
         /**
          * Used for wheel events. min value = 1.
          * A higher value means lesser sensitivity for wheel events
@@ -241,6 +249,26 @@ class DateSelector extends Component {
         }
     }
 
+    /**
+     * Triggered after the maxValue config got changed
+     * @param {Text} value
+     * @param {Text} oldValue
+     * @protected
+     */
+    afterSetMaxValue(value, oldValue) {
+        oldValue !== undefined && this.recreateDayViewContent()
+    }
+
+    /**
+     * Triggered after the minValue config got changed
+     * @param {Text} value
+     * @param {Text} oldValue
+     * @protected
+     */
+    afterSetMinValue(value, oldValue) {
+        oldValue !== undefined && this.recreateDayViewContent()
+    }
+
     /**
      * Triggered after the showCellBorders config got changed
      * @param {Boolean} value
@@ -262,7 +290,7 @@ class DateSelector extends Component {
      * @protected
      */
     afterSetShowDisabledDays(value, oldValue) {
-        oldValue !== undefined && this.recreateDayViewContent();
+        oldValue !== undefined && this.recreateDayViewContent()
     }
 
     /**
@@ -566,6 +594,8 @@ class DateSelector extends Component {
             currentMonth    = currentDate.getMonth(),
             currentYear     = currentDate.getFullYear(),
             date            = me.currentDate, // cloned
+            maxDate         = me.maxValue && new Date(`${me.maxValue}T00:00:00.000Z`),
+            minDate         = me.minValue && new Date(`${me.minValue}T00:00:00.000Z`),
             valueDate       = new Date(`${me.value}T00:00:00.000Z`),
             valueMonth      = valueDate.getMonth(),
             valueYear       = valueDate.getFullYear(),
@@ -612,23 +642,27 @@ class DateSelector extends Component {
                     config.cls.push('neo-weekend');
                 }
 
+                if (maxDate && date > maxDate || minDate && date < minDate) {
+                    NeoArray.add(config.cls, 'neo-disabled')
+                }
+
                 if (today.year === currentYear && today.month === currentMonth && today.day === day) {
-                    config.cn[0].cls.push('neo-today');
+                    config.cn[0].cls.push('neo-today')
                 }
 
                 if (valueYear === currentYear && valueMonth === currentMonth && day === currentDay) {
                     config.cls.push('neo-selected');
-                    me.selectionModel.items = [cellId]; // silent update
+                    me.selectionModel.items = [cellId] // silent update
                 }
 
                 row.cn.push(config);
 
                 date.setDate(date.getDate() + 1);
 
-                day++;
+                day++
             }
 
-            centerEl.cn.push(row);
+            centerEl.cn.push(row)
         }
 
         !silent && me.update()
@@ -638,7 +672,7 @@ class DateSelector extends Component {
      *
      */
     focusCurrentItem() {
-        this.focus(this.selectionModel.items[0]);
+        this.focus(this.selectionModel.items[0])
     }
 
     /**
@@ -752,7 +786,7 @@ class DateSelector extends Component {
      */
     onConstructed() {
         super.onConstructed();
-        this.selectionModel?.register(this);
+        this.selectionModel?.register(this)
     }
 
     /**
@@ -777,7 +811,7 @@ class DateSelector extends Component {
         monthIncrement !== 0 && me.updateHeaderMonth(monthIncrement, yearIncrement, true);
         yearIncrement  !== 0 && me.updateHeaderYear(yearIncrement, true);
 
-        me.triggerVdomUpdate(silent);
+        me.triggerVdomUpdate(silent)
     }
 
     /**
@@ -793,10 +827,10 @@ class DateSelector extends Component {
         me.createDayViewContent(true);
 
         if (syncIds) {
-            me.syncVdomIds();
+            me.syncVdomIds()
         }
 
-        me.triggerVdomUpdate(silent);
+        me.triggerVdomUpdate(silent)
     }
 
     /**

package/src/component/Timer.mjs

@@ -0,0 +1,328 @@
+import Component from './Base.mjs';
+import NeoArray  from '../util/Array.mjs';
+
+/**
+ * @class Neo.component.Timer
+ * @extends Neo.component.Base
+ */
+class Timer extends Component {
+    static config = {
+        /**
+         * @member {String} className='Neo.component.Timer'
+         * @protected
+         */
+        className: 'Neo.component.Timer',
+        /**
+         * @member {String} ntype='timer'
+         * @protected
+         */
+        ntype: 'timer',
+        /**
+         * CSS selectors to apply to the root level node of this component
+         * @member {String[]} baseCls=['timer']
+         */
+        baseCls: ['neo-timer'],
+        /**
+         * End color of the circle. If not set, it uses the css default
+         * @member {Number|String} colorEnd_=null
+         */
+        colorEnd_: null,
+        /**
+         * Start color of the circle. If not set, it uses the css default
+         * @member {Number|String} colorStart_=null
+         */
+        colorStart_: null,
+        /**
+         * Start time. This might be '5m', '30s' or milliseconds as number
+         * @member {Number|String} duration_='5m'
+         */
+        duration_: '10m',
+        /**
+         * Defines height and min-width. This can be a number in px or a string.
+         * @member {Number|String} dimensions_='6rem'
+         */
+        dimensions_: '8em',
+        /**
+         * Helper to keep running smooth at minimum cost
+         * @member {Object}      timer={}
+         * @member {Number|null} timer.currentSecond =null // run only once per second
+         * @member {Number|null} timer.intervalId    =null // setInterval id
+         * @member {Boolean}     timer.running       =false// keeps track if timer/entry is up
+         * @member {Number|null} timer.startTime     =null // calc the current progress
+         */
+        timer: {
+            currentSecond: null,
+            intervalId   : null,
+            running      : false,
+            startTime    : null
+        },
+        /**
+         * 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'}
+                                            ]}
+                                    ]}
+                            ]}
+                    ]}
+            ]
+        }
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        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'}
+        ]);
+    }
+
+    /**
+     * Triggered after the dimensions config got changed
+     * @param {Number|String} value
+     * @param {Number|String} oldValue
+     * @protected
+     */
+    afterSetDimensions(value, oldValue) {
+        if (typeof value === 'number') {
+            value = value + 'px';
+        }
+        this.updateProperties({dimensions: value});
+    }
+
+    /**
+     * Triggered after the colorStart config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetColorStart(value, oldValue) {
+        if (!value) return;
+        this.updateProperties({colorStart: value});
+    }
+
+    /**
+     * Triggered after the colorEnd config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetColorEnd(value, oldValue) {
+        if (!value) return;
+        this.updateProperties({colorEnd: value});
+    }
+
+    /**
+     * Triggered before the duration config got changed
+     * @param {Number|String} value
+     * @param {Number|String} oldValue
+     * @protected
+     */
+    beforeSetDuration(value, oldValue) {
+        const me = this;
+
+        me.updateInputField(value)
+
+        if (typeof value === 'string') {
+            const durationType = value.at(-1);
+
+            if (durationType === 'm') {
+                value = value.split('m')[0] * 60 * 1000;
+            } else if (durationType === 's') {
+                value = value.split('s')[0] * 1000;
+            }
+        }
+
+        me.updateProperties({full: value});
+
+        return value;
+    }
+
+    /**
+     * Check if Enter was pressed
+     * @param {Object} data
+     */
+    onFieldKeyDown(data) {
+        const me = this;
+
+        if (data.key === 'Enter') {
+            me.duration = me.timer.entry;
+            me.onTimerClick();
+        }
+    }
+
+    /**
+     * Click on Play or Timer
+     */
+    onTimerClick() {
+        const me = this;
+
+        // If the timer is running, stop and clear it
+        if (me.timer.intervalId) {
+            me.toggleTimer(false);
+            me.resetTimer();
+        } else {
+            // prepare
+            me.timer.startTime = new Date().getTime();
+
+            me.timer.intervalId = setInterval(function () {
+                const startTime = me.timer.startTime,
+                      curTime   = new Date().getTime(),
+                      totalTime = me.duration,
+                      endTime   = startTime + totalTime;
+
+                if (curTime > endTime) {
+                    me.toggleTimer(false);
+                    me.resetTimer();
+                } else {
+                    const milliseconds = endTime - curTime,
+                          secondsLeft  = Math.floor(milliseconds / 1000);
+                    let secondsNow = secondsLeft % 60,
+                        minutesNow = Math.floor(secondsLeft / 60)
+
+                    // Ensure this does not run 10 times a second
+                    if (secondsNow !== me.timer.currentSecond) {
+                        me.timer.currentSecond = secondsNow;
+
+                        secondsNow = secondsNow.toString().padStart(2, '0');
+                        minutesNow = minutesNow.toString().padStart(2, '0');
+
+                        me.updateTimer(`${minutesNow}:${secondsNow}`);
+                        me.updateProperties({current: milliseconds});
+                        me.toggleTimer(true);
+                    }
+                }
+            }, 100);
+        }
+    }
+
+    /**
+     * On change event of the textfield
+     * @param {Object} data
+     */
+    onTimerInput(data) {
+        const me = this;
+
+        if (data.value) {
+            me.timer.entry = data.value
+        } else {
+            me.duration = me.timer.entry;
+        }
+    }
+
+    /**
+     * Reset the properties, timer and remove Interval
+     */
+    resetTimer() {
+        const me = this;
+
+        me.updateProperties({current: ''});
+        me.updateTimer('00:00');
+
+        clearInterval(me.timer.intervalId);
+        delete me.timer.intervalId;
+    }
+
+    /**
+     * Flip over the timer face
+     * @param {Boolean} doShow
+     */
+    toggleTimer(doShow) {
+        if(this.running === doShow) return;
+
+        let me       = this,
+            turnFn   = doShow ? 'add' : 'remove',
+            vdom     = me.vdom,
+            flipCard = vdom.cn[0].cn[1];
+
+        me.running = doShow;
+
+        flipCard.cls = flipCard.cls || [];
+
+        NeoArray[turnFn](flipCard.cls, 'turn');
+        me.vdom = vdom;
+    }
+
+    /**
+     * Write to the input field
+     * @param {String} value
+     */
+    updateInputField(value) {
+        let me         = this,
+            vdom       = me.vdom,
+            inputField = vdom.cn[0].cn[1].cn[0].cn[0].cn[0];
+
+        inputField.value = value;
+    }
+
+    /**
+     * Update the timer, typically once per second
+     * @param {String} value
+     */
+    updateTimer(value) {
+        let me    = this,
+            vdom  = me.vdom,
+            timer = vdom.cn[0].cn[1].cn[0].cn[1].cn[0];
+
+        timer.innerHTML = value;
+        me.vdom = vdom;
+    }
+
+    /**
+     * Update the css properties
+     * - current amount of seconds left
+     * - full amount of time
+     * - size of the timer
+     * @param {Object} properties
+     */
+    updateProperties(properties) {
+        // Neo.setCssVariable({key: '--neo-timer-full', value: '\'200\''});
+        let me    = this,
+            style = me.style;
+
+        if (properties.current !== undefined) {
+            style['--neo-timer-current'] = `${properties.current}!important`;
+        }
+        if (properties.full !== undefined) {
+            style['--neo-timer-full'] = `${properties.full}!important`;
+        }
+        if (properties.colorEnd !== undefined) {
+            style['--timer-color-end'] = `${properties.colorEnd}!important`;
+        }
+        if (properties.colorStart !== undefined) {
+            style['--timer-color-start'] = `${properties.colorStart}!important`;
+        }
+        if (properties.dimensions !== undefined) {
+            style['--timer-dimension'] = `${properties.dimensions}!important`;
+        }
+
+        me.style = style;
+    }
+}
+
+Neo.applyClassConfig(Timer);
+
+export default Timer;

package/src/form/field/Date.mjs

@@ -42,6 +42,14 @@ class DateField extends Picker {
          * @member {String} inputType='date'
          */
         inputType: 'date',
+        /**
+         * @member {String|null} maxValue_=null
+         */
+        maxValue_: null,
+        /**
+         * @member {String|null} minValue_=null
+         */
+        minValue_: null,
         /**
          * @member {Number} pickerHeight=225
          */
@@ -79,6 +87,8 @@ class DateField extends Picker {
 
         me.dateSelector = Neo.create(DateSelector, {
             dayNameFormat: 'short',
+            maxValue     : me.maxValue,
+            minValue     : me.minValue,
             value        : me.value || DateUtil.convertToyyyymmdd(new Date()),
             ...me.dateSelectorConfig
         });
@@ -93,6 +103,38 @@ class DateField extends Picker {
         });
     }
 
+    /**
+     * Triggered after the maxValue config got changed
+     * @param {Text} value
+     * @param {Text} oldValue
+     * @protected
+     */
+    afterSetMaxValue(value, oldValue) {
+        let me = this;
+
+        me.changeInputElKey('max', value);
+
+        if (me.dateSelector) {
+            me.dateSelector.maxValue = value
+        }
+    }
+
+    /**
+     * Triggered after the minValue config got changed
+     * @param {Text} value
+     * @param {Text} oldValue
+     * @protected
+     */
+    afterSetMinValue(value, oldValue) {
+        let me = this;
+
+        me.changeInputElKey('max', value);
+
+        if (me.dateSelector) {
+            me.dateSelector.minValue = value
+        }
+    }
+
     /**
      * Triggered after the value config got changed
      * @param {String} value

package/src/form/field/Text.mjs

@@ -115,9 +115,9 @@ class Text extends Base {
          * If false, the inputPattern will only get validated via JavaScript, but not getting applied on DOM level.
          * The regex support for input based patterns is not fully there yet, so feel free to disable this feature
          * if needed (E.g. form.field.Phone).
-         * @member {Boolean} inputPatternDOM=true
+         * @member {Boolean} inputPatternDOM_=true
          */
-        inputPatternDOM: true,
+        inputPatternDOM_: true,
         /**
          * @member {String} inputType_='text'
          */

package/src/layout/Flexbox.mjs

@@ -56,6 +56,11 @@ class Flexbox extends Base {
          * @member {String|null} direction_=null
          */
         direction_: null,
+        /**
+         * flex css allows gap. This adds it to the component style
+         * @member {String} gap_=null
+         */
+        gap_: null,
         /**
          * Valid values: 'center', 'end', 'start', null
          * @member {String|null} pack_=null
@@ -93,6 +98,22 @@ class Flexbox extends Base {
         oldValue && this.updateInputValue(value, oldValue, 'direction');
     }
 
+    /**
+     * 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;
+    }
+
     /**
      * Updates the Container CSS cls after "pack" gets changed
      * @param {String|null} value

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;