neo.mjs 6.15.5 → 6.15.6

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

package/src/form/field/CheckBox.mjs

@@ -201,7 +201,7 @@ class CheckBox extends Base {
         me.update();
 
         if (oldValue !== undefined) {
-            me.fireChangeEvent(me.getValue(), me.getOldValue())
+            me.fireChangeEvent(me.getSubmitValue(), me.getOldSubmitValue())
         }
     }
 
@@ -498,20 +498,28 @@ class CheckBox extends Base {
     }
 
     /**
-     * Counterpart to getValue(), returning the uncheckedValue if checked
+     * Counterpart to getSubmitValue(), returning the uncheckedValue if checked
      * @returns {String|null}
      */
-    getOldValue() {
+    getOldSubmitValue() {
         let me = this;
 
         return me.checked ? me.uncheckedValue : me.value
     }
 
+    /**
+     * @deprecated in v7.x
+     * @returns {String|null}
+     */
+    getOldValue() {
+        return this.getOldSubmitValue()
+    }
+
     /**
      * Returns this.value if checked, otherwise this.uncheckedValue
      * @returns {String|null}
      */
-    getValue() {
+    getSubmitValue() {
         let me = this;
 
         return me.checked ? me.value : me.uncheckedValue
@@ -554,7 +562,7 @@ class CheckBox extends Base {
 
         me.checked = checked;
 
-        me.fireUserChangeEvent(me.getValue(), me.getOldValue())
+        me.fireUserChangeEvent(me.getSubmitValue(), me.getOldSubmitValue())
     }
 
     /**

package/src/form/field/ComboBox.mjs

@@ -254,12 +254,12 @@ class ComboBox extends Picker {
         // Promote an array of items to be a Store
         if (Array.isArray(value)) {
             value = {
-                data : value.map((v, i) => {
+                data: value.map((v, i) => {
                     // Simplest case is just picking string values.
                     if (typeof v === 'string') {
                         v = {
-                            [valueField]  : v,
-                            [displayField]: v
+                            [displayField]: v,
+                            [valueField]  : v
                         }
                     }
 
@@ -273,8 +273,8 @@ class ComboBox extends Picker {
         if (Neo.typeOf(value) === 'Object' && !value.model && !value.module && !value.ntype) {
             value.model = {
                 fields: [
-                    {name: valueField,   type: 'String'},
-                    {name: displayField, type: 'String'}
+                    {name: displayField, type: 'String'},
+                    {name: valueField,   type: 'String'}
                 ]
             }
         }
@@ -483,7 +483,7 @@ class ComboBox extends Picker {
     /**
      * @returns {Number|String}
      */
-    getValue() {
+    getSubmitValue() {
         let me = this;
 
         return me.value?.[me.valueField] || me.emptyValue
@@ -510,6 +510,11 @@ class ComboBox extends Picker {
     onFocusLeave(data) {
         let me = this;
 
+        /*
+         * If we are leaving the field, using forceSelection=true and the field does not have a selected record,
+         * we do want to pick the closest match => the focussed record (honoring filters).
+         * If no record is found, we will clear the field instead.
+         */
         if (me.forceSelection && !me.value) {
             me.programmaticValueChange = true;
             me.value                   = me.store.get(me.activeRecordId);
@@ -533,13 +538,13 @@ class ComboBox extends Picker {
         }
     }
 
-    // TODO:
-    // When we are using a `Collection` as our `valueCollection`, and that `Collection` is the
-    // `items` of the List's `selectionModel`, then this will be `onValueCollectionChange`,
-    // a `mutate` listener on our own `valueCollection` which backs our `value` field which
-    // will be implemented by a getter which accesses `valueCollection`.
-    // This will become important for implementing multiSelect
     /**
+     * todo:
+     * When we are using a `Collection` as our `valueCollection`, and that `Collection` is the
+     * `items` of the List's `selectionModel`, then this will be `onValueCollectionChange`,
+     * a `mutate` listener on our own `valueCollection` which backs our `value` field which
+     * will be implemented by a getter which accesses `valueCollection`.
+     * This will become important for implementing multiSelect
      * @param {Object} selectionChangeEvent
      * @param {Object[]} selectionChangeEvent.selection
      * @protected
@@ -584,12 +589,12 @@ class ComboBox extends Picker {
      * @protected
      */
     onListItemNavigate(record) {
-        let {activeItem, activeIndex} = record;
+        let {activeIndex} = record;
 
         if (activeIndex >= 0) {
             const
-                me        = this,
-                { store } = me;
+                me      = this,
+                {store} = me;
 
             me.activeRecord   = store.getAt(activeIndex);
             me.activeRecordId = me.activeRecord[store.keyProperty || model.keyProperty];

package/src/form/field/Date.mjs

@@ -85,7 +85,7 @@ class DateField extends Picker {
      */
     invalidInput = false
     /**
-     * Setting the value to true will return a Date object when calling getValue()
+     * Setting the value to true will return a Date object when calling getSubmitValue()
      * @member {Boolean} submitDateObject=false
      */
     submitDateObject = false
@@ -183,7 +183,7 @@ class DateField extends Picker {
     /**
      * @returns {Date|String|null}
      */
-    getValue() {
+    getSubmitValue() {
         let value = this.value;
 
         if(this.submitDateObject && value) {

package/src/form/field/Text.mjs

@@ -1003,14 +1003,16 @@ class Text extends Base {
             value = [value]
         }
 
-        let me = this;
+        let me                  = this,
+            {appName, windowId} = me;
 
         value.forEach((item, index) => {
             if (item.isClass) {
                 value[index] = Neo.create(item, {
-                    appName: me.appName,
-                    id     : me.getTriggerId(item.prototype.type),
-                    field  : me
+                    appName,
+                    id   : me.getTriggerId(item.prototype.type),
+                    field: me,
+                    windowId
                 })
             } else if (!(item instanceof BaseTrigger)) {
                 if (!item.module && !item.ntype) {
@@ -1024,8 +1026,9 @@ class Text extends Base {
 
                 value[index] = Neo[item.className ? 'create' : 'ntype']({
                     ...item,
-                    appName: me.appName,
-                    field  : me
+                    appName,
+                    field: me,
+                    windowId
                 })
             }
         });
@@ -1145,6 +1148,15 @@ class Text extends Base {
         return `${this.id}__label`
     }
 
+    /**
+     * @returns {*}
+     */
+    getSubmitValue() {
+        let superSubmitValue = super.getSubmitValue();
+
+        return this.xssProtected ? StringUtil.escapeHtml(superSubmitValue) : superSubmitValue
+    }
+
     /**
      * @param {String} type
      * @returns {Neo.form.field.trigger.Base|null}
@@ -1192,17 +1204,6 @@ class Text extends Base {
         return this.id + '-trigger-' + type
     }
 
-    /**
-     * @returns {*}
-    */
-    getValue() {
-        if (this.xssProtected) {
-            return StringUtil.escapeHtml(super.getValue())
-        } else {
-            return super.getValue()
-        }
-    }
-
     /**
      * @returns {Boolean}
      */