neo.mjs 6.15.4 → 6.15.6

package/src/date/DayViewComponent.mjs

@@ -0,0 +1,251 @@
+import Base     from '../component/Base.mjs';
+import DateUtil from '../util/Date.mjs';
+import NeoArray from '../util/Array.mjs';
+
+const todayDate = new Date();
+
+const today = {
+    day  : todayDate.getDate(),
+    month: todayDate.getMonth(),
+    year : todayDate.getFullYear()
+};
+
+/**
+ * @class Neo.date.DayViewComponent
+ * @extends Neo.component.Base
+ */
+class DayViewComponent extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.date.DayViewComponent'
+         * @protected
+         */
+        className: 'Neo.date.DayViewComponent',
+        /**
+         * @member {String} className='day-view-component'
+         * @protected
+         */
+        ntype: 'day-view-component',
+        /**
+         * @member {String[]} baseCls=['neo-day-view']
+         * @protected
+         */
+        baseCls: ['neo-day-view'],
+        /**
+         * @member {Object} bind
+         */
+        bind: {
+            intlFormatDay: data => data.intlFormatDay,
+            weekStartDay : data => data.weekStartDay
+        },
+        /**
+         * @member {Date|null} currentDate_=null
+         * @protected
+         */
+        currentDate_: null,
+        /**
+         * @member {Intl.DateTimeFormat|null} intlFormatDay=null
+         * @protected
+         */
+        intlFormatDay: null,
+        /**
+         * 0-6 => Sun-Sat
+         * @member {Number} weekStartDay_=0
+         */
+        weekStartDay_: 0,
+        /**
+         * @member {Object} _vdom
+         */
+        _vdom:
+        {cn: []}
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+        this.createContent(true)
+    }
+
+    /**
+     * Triggered after the currentDate config got changed
+     * @param {Date} value
+     * @param {Date} oldValue
+     * @protected
+     */
+    afterSetCurrentDate(value, oldValue) {
+        this.isConstructed && this.recreateContent(false)
+    }
+
+    /**
+     * Triggered after the weekStartDay config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetWeekStartDay(value, oldValue) {
+        this.isConstructed && this.recreateContent(false)
+    }
+
+    /**
+     * @returns {Object}
+     */
+    createDayNamesRow() {
+        let me   = this,
+            date = DateUtil.clone(me.currentDate),
+            i    = 0,
+            len  = 7,
+            row  = {cls: ['neo-row', 'neo-header-row'], cn: []},
+            config, day;
+
+        date.setDate(me.currentDate.getDate() - me.currentDate.getDay() + me.weekStartDay);
+
+        for (; i < len; i++) {
+            config =
+            {cls: ['neo-cell'], cn: [
+                {cls : ['neo-cell-content'], html: me.intlFormatDay.format(date)}
+            ]};
+
+            day = date.getDay();
+
+            if (!me.showWeekends && (day === 0 || day === 6)) {
+                config.removeDom = true
+            }
+
+            row.cn.push(config);
+
+            date.setDate(date.getDate() + 1)
+        }
+
+        return row
+    }
+
+    /**
+     * @param {Boolean} silent=false true to update the vdom silently
+     * @param {Object} [containerEl]
+     */
+    createContent(silent=false, containerEl) {
+        let me              = this,
+            currentDate     = me.currentDate,
+            currentDay      = currentDate.getDate(),
+            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(),
+            daysInMonth     = DateUtil.getDaysInMonth(currentDate),
+            firstDayInMonth = DateUtil.getFirstDayOfMonth(currentDate),
+            firstDayOffset  = firstDayInMonth - me.weekStartDay,
+            centerEl        = containerEl || me.vdom,
+            columns         = 7,
+            i               = 0,
+            cellId, config, dateDay, day, hasContent, j, row, rows;
+
+        firstDayOffset = firstDayOffset < 0 ? firstDayOffset + 7 : firstDayOffset;
+        rows           = (daysInMonth + firstDayOffset) / 7 > 5 ? 6 : 5;
+        day            = 1 - firstDayOffset;
+
+        date.setDate(day);
+
+        centerEl.cn.push(me.createDayNamesRow());
+
+        for (; i < rows; i++) {
+            row = {cls: ['neo-row'], cn: []};
+
+            for (j=0; j < columns; j++) {
+                hasContent = day > 0 && day <= daysInMonth;
+                cellId     = me.getCellId(currentYear, currentMonth + 1, day);
+
+                dateDay = date.getDay();
+
+                config ={
+                    id      : cellId,
+                    cls     : hasContent ? ['neo-cell'] : ['neo-cell', 'neo-disabled'],
+                    tabIndex: hasContent ? -1 : null,
+                    cn: [{
+                        cls : ['neo-cell-content'],
+                        html: hasContent ? day : me.showDisabledDays ? date.getDate() : ''
+                    }]
+                };
+
+                if (dateDay === 0 || dateDay === 6) {
+                    if (!me.showWeekends) {
+                        config.removeDom = true
+                    }
+
+                    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')
+                }
+
+                if (valueYear === currentYear && valueMonth === currentMonth && day === currentDay) {
+                    config.cls.push('neo-selected');
+                    me.selectionModel.items = [cellId] // silent update
+                }
+
+                row.cn.push(config);
+
+                date.setDate(date.getDate() + 1);
+
+                day++
+            }
+
+            centerEl.cn.push(row)
+        }
+
+        !silent && me.update()
+    }
+
+    /**
+     * @param {Number|String} year
+     * @param {Number|String} month
+     * @param {Number|String} day
+     * @returns {String} id
+     */
+    getCellId(year, month, day) {
+        day = day.toString();
+
+        if (day.length < 2) {
+            day = '0' + day
+        }
+
+        month = month.toString();
+
+        if (month.length < 2) {
+            month = '0' + month
+        }
+
+        return this.id + '__' + year + '-' + month + '-' + day
+    }
+
+    /**
+     * Recreates the current month view
+     * @param {Boolean} [syncIds=true]
+     * @protected
+     */
+    recreateContent(syncIds=true) {
+        let me = this;
+
+        me.vdom.cn = [];
+        me.createContent(true);
+
+        // using force => we do want to keep the same ids
+        syncIds && me.syncVdomIds(me.vnode, me.vdom, true);
+
+        me.update()
+    }
+}
+
+Neo.setupClass(DayViewComponent);
+
+export default DayViewComponent;

package/src/date/SelectorContainer.mjs

@@ -0,0 +1,352 @@
+import ClassSystemUtil        from '../util/ClassSystem.mjs';
+import Container              from '../container/Base.mjs';
+import DateSelectorModel      from '../selection/DateSelectorModel.mjs';
+import DayViewComponent       from './DayViewComponent.mjs';
+import DateUtil               from '../util/Date.mjs';
+import NeoArray               from '../util/Array.mjs';
+import SelectorContainerModel from './SelectorContainerModel.mjs';
+import Toolbar                from '../toolbar/Base.mjs';
+
+const todayDate = new Date();
+
+/**
+ * @class Neo.date.SelectorContainer
+ * @extends Neo.container.Base
+ */
+class SelectorContainer extends Container {
+    static config = {
+        /**
+         * @member {String} className='Neo.date.SelectorContainer'
+         * @protected
+         */
+        className: 'Neo.date.SelectorContainer',
+        /**
+         * @member {String} ntype='date-selector'
+         * @protected
+         */
+        ntype: 'date-selector',
+        /**
+         * @member {String[]} baseCls=['neo-dateselector','neo-container']
+         */
+        baseCls: ['neo-dateselector', 'neo-container'],
+        /**
+         * @member {Object} bind
+         */
+        bind: {
+            intlFormatDay: {twoWay: true, value: data => data.intlFormatDay},
+            weekStartDay : {twoWay: true, value: data => data.weekStartDay}
+        },
+        /**
+         * Date object created on the value config
+         * @member {Date|null} currentDate_=null
+         * @protected
+         */
+        currentDate_: null,
+        /**
+         * @member {String} dateFormat='Y-m-d'
+         */
+        dateFormat: 'Y-m-d',
+        /**
+         * The format of the column headers.
+         * Valid values are: narrow, short & long
+         * @member {String} dayNameFormat_='short'
+         */
+        dayNameFormat_: 'short',
+        /**
+         * @member {Intl.DateTimeFormat|null} intlFormatDay_=null
+         * @protected
+         */
+        intlFormatDay_: null,
+        /**
+         * Internal flag to prevent changing the date while change animations are still running
+         * @member {Boolean} isUpdating_=false
+         * @protected
+         */
+        isUpdating_: false,
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: Toolbar,
+            cls   : ['neo-header-toolbar'],
+            flex  : 'none',
+
+            itemDefaults: {
+                ntype: 'button',
+                ui   : 'tertiary' // todo: should be ghost
+            },
+
+            items : [{
+                handler: 'up.onPrevButtonClick',
+                iconCls: 'fas fa-circle-chevron-left'
+            }, {
+                flex: 1,
+                text: '2024'
+            }, {
+                handler: 'up.onNextButtonClick',
+                iconCls: 'fas fa-circle-chevron-right'
+            }]
+        }, {
+            module: Container,
+            layout: 'card',
+            items : [{
+                module   : DayViewComponent,
+                reference: 'day-view'
+            }]
+        }],
+        /**
+         * Additional used keys for the selection model
+         * @member {Object} keys
+         */
+        keys: {},
+        /**
+         * @member {String} locale_=Neo.config.locale
+         */
+        locale_: Neo.config.locale,
+        /**
+         * @member {String|null} maxValue_=null
+         */
+        maxValue_: null,
+        /**
+         * @member {String|null} minValue_=null
+         */
+        minValue_: null,
+        /**
+         * @member {Neo.model.Component} model=SelectorContainerModel
+         */
+        model: SelectorContainerModel,
+        /**
+         * Used for wheel events. min value = 1.
+         * A higher value means lesser sensitivity for wheel events
+         * => you need to scroll "more" to trigger a month / year change
+         * @member {Number} mouseWheelDelta=1
+         */
+        mouseWheelDelta: 1,
+        /**
+         * True to scroll new years in from the top
+         * @member {Boolean} scrollNewYearFromTop=false
+         */
+        scrollNewYearFromTop: false,
+        /**
+         * Either pass a selection.Model module, an instance or a config object
+         * @member {Object|Neo.selection.Model} selectionModel_=null
+         */
+        selectionModel_: null,
+        /**
+         * True to show inner cell & header cell borders
+         * @member {Boolean} showCellBorders_=true
+         */
+        showCellBorders_: false,
+        /**
+         * True to show the days of the previous or next month (not selectable)
+         * @member {Boolean} showDisabledDays_=true
+         */
+        showDisabledDays_: true,
+        /**
+         * @member {Boolean} showWeekends_=true
+         */
+        showWeekends_: true,
+        /**
+         * True to use sliding animations
+         * @member {Boolean} useAnimations=true
+         */
+        useAnimations: true,
+        /**
+         * @member {String} value_=DateUtil.convertToyyyymmdd(new Date())
+         */
+        value_: DateUtil.convertToyyyymmdd(todayDate),
+        /**
+         * 0-6 => Sun-Sat
+         * @member {Number} weekStartDay_=0
+         */
+        weekStartDay_: 0
+    }
+
+    /**
+     * Stores the last date change which got triggered while a month / year transition was running
+     * @member {Date|null} cachedUpdate=null
+     * @protected
+     */
+    cachedUpdate = null
+
+    /**
+     * Convenience shortcut
+     * @returns {Object|Neo.component.Base|null}
+     */
+    get dayView() {
+        return this.getItem('day-view')
+    }
+
+    /**
+     * Triggered after the currentDate config got changed
+     * @param {Date} value
+     * @param {Date} oldValue
+     * @protected
+     */
+    afterSetCurrentDate(value, oldValue) {
+        let me = this;
+
+        if (me.mounted) {
+            // todo
+        } else if (value) {
+            // me.updateHeaderMonth(0, 0, true);
+            // me.updateHeaderYear(0, true);
+            me.dayView.currentDate = value
+        }
+    }
+
+    /**
+     * Triggered after the dayNameFormat config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetDayNameFormat(value, oldValue) {
+        this.updateHeaderDays(value, oldValue)
+    }
+
+    /**
+     * Triggered after the showCellBorders config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetShowCellBorders(value, oldValue) {
+        let me  = this,
+            cls = me.cls;
+
+        NeoArray.toggle(cls, 'neo-hide-inner-borders', !value);
+        me.cls = cls
+    }
+
+    /**
+     * Triggered after the value config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetValue(value, oldValue) {
+        let me = this;
+
+        if (value) {
+            if (!me.isUpdating) {
+                me.currentDate = new Date(`${value}T00:00:00.000Z`);
+
+                me.fire('change', {
+                    component: me,
+                    oldValue,
+                    value
+                })
+            } else {
+                me.cacheUpdate()
+            }
+        }
+    }
+
+    /**
+     * Triggered before the dayNameFormat config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    beforeSetDayNameFormat(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'dayNameFormat', DateUtil.prototype.dayNameFormats)
+    }
+
+    /**
+     * Triggered before the selectionModel config gets changed.
+     * @param {Neo.selection.Model} value
+     * @param {Neo.selection.Model} oldValue
+     * @protected
+     */
+    beforeSetSelectionModel(value, oldValue) {
+        oldValue && oldValue.destroy();
+
+        return ClassSystemUtil.beforeSetInstance(value, DateSelectorModel)
+    }
+
+    /**
+     * Triggered before the weekStartDay config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    beforeSetWeekStartDay(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'weekStartDay', DateUtil.prototype.weekStartDays)
+    }
+
+    /**
+     * Stores the last date change which could not get applied while a transition was running
+     * @param {Date} [date=this.currentDate]
+     * @protected
+     */
+    cacheUpdate(date=this.currentDate) {
+        this.cachedUpdate = date
+    }
+
+    /**
+     * @param {Number} increment
+     */
+    changeMonth(increment) {
+        let date = this.currentDate; // cloned
+        date.setMonth(date.getMonth() + increment);
+        this.value = DateUtil.convertToyyyymmdd(date)
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onNextButtonClick(data) {
+        this.changeMonth(1)
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onPrevButtonClick(data) {
+        this.changeMonth(-1)
+    }
+
+    /**
+     * @param {String} value
+     * @param {String} oldValue
+     * @param {Boolean} [silent=false]
+     */
+    updateHeaderDays(value, oldValue, silent=false) {
+        let me = this;
+
+        let foo = me.intlFormatDay; // todo
+        me.intlFormatDay = new Intl.DateTimeFormat(me.locale, {weekday: value});
+
+        if (oldValue !== undefined) {
+            let centerEl = me.dayView.vdom.cn[0],
+                date     = me.currentDate, // cloned
+                i        = 0,
+                day, node;
+
+            date.setDate(me.currentDate.getDate() - me.currentDate.getDay() + me.weekStartDay);
+
+            for (; i < 7; i++) {
+                node = centerEl.cn[i];
+
+                node.cn[0].html = me.intlFormatDay.format(date);
+
+                day = date.getDay();
+
+                if (!me.showWeekends && (day === 0 || day === 6)) {
+                    node.removeDom = true
+                } else {
+                    delete node.removeDom
+                }
+
+                date.setDate(date.getDate() + 1)
+            }
+
+            !silent && me.update()
+        }
+    }
+}
+
+Neo.setupClass(SelectorContainer);
+
+export default SelectorContainer;

package/src/date/SelectorContainerModel.mjs

@@ -0,0 +1,33 @@
+import Component from '../model/Component.mjs';
+
+/**
+ * @class Neo.date.SelectorContainerModel
+ * @extends Neo.model.Component
+ */
+class SelectorContainerModel extends Component {
+    static config = {
+        /**
+         * @member {String} className='Neo.date.SelectorContainerModel'
+         * @protected
+         */
+        className: 'Neo.date.SelectorContainerModel',
+        /**
+         * @member {Object} data
+         */
+        data: {
+            /**
+             * @member {Intl.DateTimeFormat|null} data.intlFormatDay=null
+             */
+            intlFormatDay: null,
+            /**
+             * 0-6 => Sun-Sat
+             * @member {Number} data.weekStartDay=0
+             */
+            weekStartDay: 0
+        }
+    }
+}
+
+Neo.setupClass(SelectorContainerModel);
+
+export default SelectorContainerModel;

package/src/form/Container.mjs

@@ -198,14 +198,14 @@ class Container extends BaseContainer {
     /**
      * @returns {Promise<Object>}
      */
-    async getValues() {
+    async getSubmitValues() {
         let fields = await this.getFields(),
             Radio  = Neo.form.field.Radio,
             values = {},
             fieldName, key, ns, nsArray, value;
 
         fields.forEach(field => {
-            value = field.getValue();
+            value = field.getSubmitValue();
 
             if (field.name) {
                 fieldName = field.name;
@@ -254,6 +254,14 @@ class Container extends BaseContainer {
         return values
     }
 
+    /**
+     * @deprecated in v7.x
+     * @returns {Promise<Object>}
+     */
+    async getValues() {
+        return this.getSubmitValues()
+    }
+
     /**
      * Returns true in case no form field isValid() call returns false
      * @returns {Promise<Boolean>}

package/src/form/field/Base.mjs

@@ -305,10 +305,18 @@ class Base extends Component {
     /**
      * @returns {*}
      */
-    getValue() {
+    getSubmitValue() {
         return this.value
     }
 
+    /**
+     * @deprecated in v7.x
+     * @returns {*}
+     */
+    getValue() {
+        return this.getSubmitValue()
+    }
+
     /**
      * @returns {Boolean}
      */
@@ -337,7 +345,7 @@ class Base extends Component {
 
         let me            = this,
             FormContainer = Neo.form?.Container,
-            opts          = {...data, component: me, value: me.getValue()};
+            opts          = {...data, component: me, value: me.getSubmitValue()};
 
         if (me.isTouchedEvent === 'focusLeave') {
             me.isTouched = true