neo.mjs 10.0.0-beta.5 → 10.0.0

package/src/calendar/view/DayComponent.mjs

@@ -18,11 +18,13 @@ class DayComponent extends WeekComponent {
         /**
          * Amount of hidden columns on both sides each inside this view.
          * @member {Number} columnsBuffer=1
+         * @reactive
          */
         columnsBuffer: 1,
         /**
          * Amount of visible columns inside this view.
          * @member {Number} columnsVisible=1
+         * @reactive
          */
         columnsVisible: 1
     }

package/src/calendar/view/EditEventContainer.mjs

@@ -26,7 +26,7 @@ class EditEventContainer extends FormContainer {
          */
         bind: {
             endTime             : data => data.endTime,
-            intlFormat_time     : data => data.intlFormat_time,
+            intlFormat_time     : data => data.timeFormatter,
             minimumEventDuration: data => data.minimumEventDuration,
             startTime           : data => data.startTime
         },
@@ -38,6 +38,7 @@ class EditEventContainer extends FormContainer {
          * Only full hours are valid for now
          * format: 'hh:mm'
          * @member {String} endTime_='24:00'
+         * @reactive
          */
         endTime_: '24:00',
         /**
@@ -56,12 +57,14 @@ class EditEventContainer extends FormContainer {
         owner: null,
         /**
          * @member {Neo.calendar.model.Event|null} record_=null
+         * @reactive
          */
         record_: null,
         /**
          * Only full hours are valid for now
          * format: 'hh:mm'
          * @member {String} startTime_='00:00'
+         * @reactive
          */
         startTime_: '00:00',
         /**

package/src/calendar/view/MainContainer.mjs

@@ -36,6 +36,7 @@ class MainContainer extends Container {
          * The currently active view. Must be a value included inside the views config.
          * valid values: 'day', 'week', 'month', 'year'
          * @member {String} activeView_='week'
+         * @reactive
          */
         activeView_: 'week',
         /**
@@ -45,6 +46,7 @@ class MainContainer extends Container {
         /**
          * Scale the calendar with using s different base font-size
          * @member {Number|null} baseFontSize_=null
+         * @reactive
          */
         baseFontSize_: null,
         /**
@@ -53,10 +55,12 @@ class MainContainer extends Container {
         calendarsContainer: null,
         /**
          * @member {Object|null} calendarStoreConfig_=null
+         * @reactive
          */
         calendarStoreConfig_: null,
         /**
          * @member {Object|null} colorStoreConfig_=null
+         * @reactive
          */
         colorStoreConfig_: null,
         /**
@@ -78,6 +82,7 @@ class MainContainer extends Container {
         /**
          * Read only
          * @member {Neo.calendar.view.calendars.EditContainer|null} editCalendarContainer_=null
+         * @reactive
          */
         editCalendarContainer_: null,
         /**
@@ -87,6 +92,7 @@ class MainContainer extends Container {
         /**
          * Read only
          * @member {Neo.calendar.view.EditEventContainer|null} editEventContainer_=null
+         * @reactive
          */
         editEventContainer_: null,
         /**
@@ -95,11 +101,13 @@ class MainContainer extends Container {
         editEventContainerConfig: null,
         /**
          * @member {Object|null} eventStoreConfig_=null
+         * @reactive
          */
         eventStoreConfig_: null,
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch'}
          * @protected
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'stretch'},
         /**
@@ -125,10 +133,12 @@ class MainContainer extends Container {
         settingsContainerWidth: 310,
         /**
          * @member {Boolean} settingsExpanded_=false
+         * @reactive
          */
         settingsExpanded_: false,
         /**
          * @member {Boolean} sideBarExpanded_=true
+         * @reactive
          */
         sideBarExpanded_: true,
         /**
@@ -137,15 +147,18 @@ class MainContainer extends Container {
         sideBarWidth: 220,
         /**
          * @member {Neo.calendar.view.MainContainerStateProvider} stateProvider=MainContainerStateProvider
+         * @reactive
          */
         stateProvider: MainContainerStateProvider,
         /**
          * @member {Boolean} useSettingsContainer_=true
+         * @reactive
          */
         useSettingsContainer_: true,
         /**
          * Any combination and order of 'day', 'week', 'month', 'year'
          * @member {String[]} views_=['day','week','month','year']
+         * @reactive
          */
         views_: ['day', 'week', 'month', 'year'],
         /**

package/src/calendar/view/MainContainerStateProvider.mjs

@@ -63,11 +63,6 @@ class MainContainerStateProvider extends StateProvider {
                  */
                 enableResizingAcrossOppositeEdge: true
             },
-            /**
-             * Read only, it will automatically get created inside onDataPropertyChange()
-             * @member {Intl.DateTimeFormat|null} data.intlFormat_time=null
-             */
-            intlFormat_time: null,
             /**
              * @member {String} data.locale=Neo.config.locale
              */
@@ -101,6 +96,20 @@ class MainContainerStateProvider extends StateProvider {
              * @member {Number} data.weekStartDay=0
              */
             weekStartDay: 0
+        },
+        /**
+         * Defines computed properties based on other data properties.
+         * @member {Object} formulas
+         */
+        formulas: {
+            /**
+             * Creates the Intl.DateTimeFormat instance based on the current locale and timeFormat.
+             * This formula will automatically re-run whenever `data.locale` or `data.timeFormat` changes.
+             * The result is exposed as the 'timeFormatter' property in the state.
+             * @param {Object} data The hierarchical data proxy
+             * @returns {Intl.DateTimeFormat}
+             */
+            timeFormatter: data => (data.locale && data.timeFormat) ? new Intl.DateTimeFormat(data.locale, data.timeFormat) : null
         }
     }
 
@@ -141,29 +150,6 @@ class MainContainerStateProvider extends StateProvider {
                 module: EventsStore,
                 ...component.eventStoreConfig
             }
-        };
-    }
-
-    /**
-     * @param {String} key
-     * @param {*} value
-     * @param {*} oldValue
-     */
-    onDataPropertyChange(key, value, oldValue) {
-        super.onDataPropertyChange(key, value, oldValue);
-
-        let {data} = this;
-
-        switch (key) {
-            case 'locale': {
-                data.intlFormat_time = new Intl.DateTimeFormat(value, data.timeFormat);
-                break
-            }
-
-            case 'timeFormat': {
-                data.intlFormat_time = new Intl.DateTimeFormat(data.locale, value);
-                break
-            }
         }
     }
 }

package/src/calendar/view/SettingsContainer.mjs

@@ -24,6 +24,7 @@ class SettingsContainer extends Container {
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch'}
          * @protected
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'stretch'},
         /**

package/src/calendar/view/YearComponent.mjs

@@ -46,35 +46,42 @@ class YearComponent extends Component {
         /**
          * Bound to the state provider.
          * @member {Neo.calendar.store.Calendars|null} calendarStore_=null
+         * @reactive
          */
         calendarStore_: null,
         /**
          * Will get passed from the MainContainer
          * @member {Date|null} currentDate_=null
          * @protected
+         * @reactive
          */
         currentDate_: null,
         /**
          * The format of the column headers.
          * Valid values are: narrow, short & long
          * @member {String} dayNameFormat_='narrow'
+         * @reactive
          */
         dayNameFormat_: 'narrow',
         /**
          * @member {Number} eventIndicatorHigh_=3
+         * @reactive
          */
         eventIndicatorHigh_: 3,
         /**
          * @member {Number} eventIndicatorLow_=1
+         * @reactive
          */
         eventIndicatorLow_: 1,
         /**
          * @member {Number} eventIndicatorMedium_=2
+         * @reactive
          */
         eventIndicatorMedium_: 2,
         /**
          * Bound to the state provider.
          * @member {Neo.calendar.store.Events|null} eventStore_=null
+         * @reactive
          */
         eventStore_: null,
         /**
@@ -91,17 +98,20 @@ class YearComponent extends Component {
          * Internal flag to prevent changing the date while change animations are still running
          * @member {Boolean} isUpdating_=false
          * @protected
+         * @reactive
          */
         isUpdating_: false,
         /**
          * Bound to the state provider.
          * @member {String} locale_=Neo.config.locale
+         * @reactive
          */
         locale_: Neo.config.locale,
         /**
          * The format of the month header names.
          * Valid values are: narrow, short & long
          * @member {String} monthNameFormat_='long'
+         * @reactive
          */
         monthNameFormat_: 'long',
         /**
@@ -123,26 +133,31 @@ class YearComponent extends Component {
         /**
          * True to show borders for the calendar month cells
          * @member {Boolean} showCellBorders_=false
+         * @reactive
          */
         showCellBorders_: false,
         /**
          * True to show the days of the previous or next month (not selectable)
          * @member {Boolean} showDisabledDays_=true
+         * @reactive
          */
         showDisabledDays_: true,
         /**
          * Bound to the state provider.
          * @member {Boolean} showWeekends_=true
+         * @reactive
          */
         showWeekends_: true,
         /**
          * True to show the week number as the first column of each month
          * @member {Boolean} showWeekNumbers_=true
+         * @reactive
          */
         showWeekNumbers_: true,
         /**
          * True to show 6 weeks for each month, so that all months have the same height
          * @member {Boolean} sixWeeksPerMonth_=false
+         * @reactive
          */
         sixWeeksPerMonth_: false,
         /**
@@ -168,6 +183,7 @@ class YearComponent extends Component {
          * 0-6 => Sun-Sat
          * Bound to the state provider.
          * @member {Number} weekStartDay_=0
+         * @reactive
          */
         weekStartDay_: 0
     }

package/src/calendar/view/calendars/ColorsList.mjs

@@ -28,11 +28,13 @@ class ColorsList extends List {
         selectOnFocus: true,
         /**
          * @member {Boolean} useWrapperNode=false
+         * @reactive
          */
         useWrapperNode: false,
         /**
          * The list gets used as a form field, so we are adjusting the selection based on this config
          * @member {String} value_=null
+         * @reactive
          */
         value_: null,
         /**

package/src/calendar/view/calendars/Container.mjs

@@ -24,6 +24,7 @@ class Container extends BaseContainer {
         },
         /**
          * @member {Neo.calendar.store.Calendars|null} calendarStore_=null
+         * @reactive
          */
         calendarStore: null,
         /**
@@ -44,6 +45,7 @@ class Container extends BaseContainer {
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch'}
          * @protected
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'stretch'},
         /**

package/src/calendar/view/calendars/EditContainer.mjs

@@ -36,6 +36,7 @@ class EditContainer extends FormContainer {
         owner: null,
         /**
          * @member {Neo.calendar.model.Calendar|null} record_=null
+         * @reactive
          */
         record_: null,
         /**

package/src/calendar/view/month/Component.mjs

@@ -41,28 +41,33 @@ class Component extends BaseComponent {
         /**
          * Bound to the state provider
          * @member {Neo.calendar.store.Calendars|null} calendarStore_=null
+         * @reactive
          */
         calendarStore_: null,
         /**
          * Will get passed from the MainContainer
          * @member {Date|null} currentDate_=null
          * @protected
+         * @reactive
          */
         currentDate_: null,
         /**
          * The format of the column headers.
          * Valid values are: narrow, short & long
          * @member {String} dayNameFormat_='short'
+         * @reactive
          */
         dayNameFormat_: 'short',
         /**
          * Bound to the state provider
          * @member {String|null} eventBorder_=null
+         * @reactive
          */
         eventBorder_: null,
         /**
          * Bound to the state provider.
          * @member {Neo.calendar.store.Events|null} eventStore_=null
+         * @reactive
          */
         eventStore_: null,
         /**
@@ -95,12 +100,14 @@ class Component extends BaseComponent {
         /**
          * Bound to the state provider.
          * @member {String} locale_=Neo.config.locale
+         * @reactive
          */
         locale_: Neo.config.locale,
         /**
          * The format of the month header names.
          * Valid values are: narrow, short & long
          * @member {String} monthNameFormat_='long'
+         * @reactive
          */
         monthNameFormat_: 'short',
         /**
@@ -122,15 +129,18 @@ class Component extends BaseComponent {
         /**
          * Bound to the state provider.
          * @member {Boolean} showWeekends_=true
+         * @reactive
          */
         showWeekends_: true,
         /**
          * @member {Object} timeFormat_={hour:'2-digit',minute:'2-digit'}
+         * @reactive
          */
         timeFormat_: {hour: '2-digit', minute: '2-digit'},
         /**
          * True to use box shadows for the months while scrolling
          * @member {Boolean} useScrollBoxShadows_=true
+         * @reactive
          */
         useScrollBoxShadows_: true,
         /**
@@ -150,6 +160,7 @@ class Component extends BaseComponent {
          * 0-6 => Sun-Sat
          * Bound to the state provider.
          * @member {Number} weekStartDay_=0
+         * @reactive
          */
         weekStartDay_: 0
     }

package/src/calendar/view/settings/GeneralContainer.mjs

@@ -18,6 +18,7 @@ class GeneralContainer extends Container {
         className: 'Neo.calendar.view.settings.GeneralContainer',
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch'}
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'stretch'}
     }

package/src/calendar/view/settings/MonthContainer.mjs

@@ -15,6 +15,7 @@ class MonthContainer extends Container {
         className: 'Neo.calendar.view.settings.MonthContainer',
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch'}
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'stretch'}
     }

package/src/calendar/view/settings/WeekContainer.mjs

@@ -24,6 +24,7 @@ class WeekContainer extends Container {
         },
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch'}
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'stretch'}
     }

package/src/calendar/view/settings/YearContainer.mjs

@@ -16,6 +16,7 @@ class YearContainer extends Container {
         className: 'Neo.calendar.view.settings.YearContainer',
         /**
          * @member {Object} layout={ntype:'vbox',align:'stretch'}
+         * @reactive
          */
         layout: {ntype: 'vbox', align: 'stretch'}
     }

package/src/calendar/view/week/Component.mjs

@@ -45,7 +45,7 @@ class Component extends BaseComponent {
             endTime             : data => data.endTime,
             eventBorder         : data => data.events.border,
             eventStore          : 'stores.events',
-            intlFormat_time     : data => data.intlFormat_time,
+            intlFormat_time     : data => data.timeFormatter,
             locale              : data => data.locale,
             minimumEventDuration: data => data.minimumEventDuration,
             showWeekends        : data => data.showWeekends,
@@ -55,39 +55,46 @@ class Component extends BaseComponent {
         /**
          * Bound to the state provider
          * @member {Neo.calendar.store.Calendars|null} calendarStore_=null
+         * @reactive
          */
         calendarStore_: null,
         /**
          * Amount of hidden columns on both sides each inside this view.
          * @member {Number} columnsBuffer_=7
+         * @reactive
          */
         columnsBuffer_: 7,
         /**
          * Amount of visible columns inside this view.
          * @member {Number} columnsVisible_=7
+         * @reactive
          */
         columnsVisible_: 7,
         /**
          * Bound to the state provider.
          * @member {Date|null} currentDate_=null
          * @protected
+         * @reactive
          */
         currentDate_: null,
         /**
          * The format of the column headers.
          * Valid values are: narrow, short & long
          * @member {String} dayNameFormat_='short'
+         * @reactive
          */
         dayNameFormat_: 'short',
         /**
          * Bound to the state provider.
          * @member {Boolean} enableDrag_=true
          * @protected
+         * @reactive
          */
         enableDrag_: true,
         /**
          * Bound to the state provider
          * @member {String|null} eventBorder_=null
+         * @reactive
          */
         eventBorder_: null,
         /**
@@ -97,6 +104,7 @@ class Component extends BaseComponent {
         /**
          * Bound to the state provider
          * @member {Neo.calendar.store.Events|null} eventStore_=null
+         * @reactive
          */
         eventStore_: null,
         /**
@@ -120,6 +128,7 @@ class Component extends BaseComponent {
          * Bound to the state provider.
          * @member {Intl.DateTimeFormat|null} intlFormat_time_=null
          * @protected
+         * @reactive
          */
         intlFormat_time_: null,
         /**
@@ -130,6 +139,7 @@ class Component extends BaseComponent {
         /**
          * Bound to the state provider.
          * @member {String} locale_=Neo.config.locale
+         * @reactive
          */
         locale_: Neo.config.locale,
         /**
@@ -161,11 +171,13 @@ class Component extends BaseComponent {
         pluginEventResizableConfig: null,
         /**
          * @member {Boolean} showEventEndTime_=false
+         * @reactive
          */
         showEventEndTime_: false,
         /**
          * Bound to the state provider.
          * @member {Boolean} showWeekends_=true
+         * @reactive
          */
         showWeekends_: true,
         /**
@@ -181,6 +193,7 @@ class Component extends BaseComponent {
          * Valid values are start & end.
          * start => left, end => right in LTR mode.
          * @member {String} timeAxisPosition_='start'
+         * @reactive
          */
         timeAxisPosition_: 'start',
         /**
@@ -208,6 +221,7 @@ class Component extends BaseComponent {
          * 0-6 => Sun-Sat
          * Bound to the state provider.
          * @member {Number} weekStartDay_=0
+         * @reactive
          */
         weekStartDay_: 0
     }

package/src/calendar/view/week/TimeAxisComponent.mjs

@@ -34,22 +34,26 @@ class TimeAxisComponent extends Component {
          * Only full hours are valid for now
          * format: 'hh:mm'
          * @member {String} endTime_='24:00'
+         * @reactive
          */
         endTime_: '24:00',
         /**
          * The time interval in minutes to display as rows.
          * Valid values: 15, 30, 60
          * @member {Number} interval_=30
+         * @reactive
          */
         interval_: 30,
         /**
          * @member {Number} rowHeight_=20
+         * @reactive
          */
         rowHeight_: 20,
         /**
          * Only full hours are valid for now
          * format: 'hh:mm'
          * @member {String} startTime_='00:00'
+         * @reactive
          */
         startTime_: '00:00',
         /**