neo.mjs 10.0.0-beta.5 → 10.0.0

package/src/component/Canvas.mjs

@@ -24,6 +24,7 @@ class Canvas extends Component {
          * Only applicable if offscreen === true.
          * true once the ownership of the canvas node got transferred to worker.Canvas.
          * @member {Boolean} offscreenRegistered_=false
+         * @reactive
          */
         offscreenRegistered_: false,
         /**

package/src/component/Chip.mjs

@@ -24,21 +24,25 @@ class Chip extends Component {
         /**
          * True shows a close button on the right side
          * @member {Boolean} closable_=true
+         * @reactive
          */
         closable_: true,
         /**
          * Convenience shortcut for style.display
          * @member {String} display_='inline-flex'
+         * @reactive
          */
         display_: 'inline-flex',
         /**
          * The CSS class to use for an icon, e.g. 'fa fa-home'
          * @member {String|null} [iconCls_=null]
+         * @reactive
          */
         iconCls_: null,
         /**
          * The text displayed on the button [optional]
          * @member {String|null} text=null
+         * @reactive
          */
         text: null,
         /**

package/src/component/Circle.mjs

@@ -43,15 +43,18 @@ class Circle extends Component {
         collapsed: true,
         /**
          * @member {Boolean} draggable_=true
+         * @reactive
          */
         draggable_: true,
         /**
          * Additional used keys for the selection model
          * @member {Object} keys={}
+         * @reactive
          */
         keys: {},
         /**
          * @member {Number} innerRadius_=100
+         * @reactive
          */
         innerRadius_: 100,
         /**
@@ -65,48 +68,59 @@ class Circle extends Component {
         itemImagePath: null,
         /**
          * @member {Number} itemSize_=60
+         * @reactive
          */
         itemSize_: 60,
         /**
          * @member {Number} maxItems_=12
+         * @reactive
          */
         maxItems_: 12,
         /**
          * The amount in px which the outerRadius is bigger than the innerRadius
          * @member {Number} outerRadiusDelta_=10
+         * @reactive
          */
         outerRadiusDelta_: 10,
         /**
          * @member {Number} rotateX_=0
+         * @reactive
          */
         rotateX_: 0,
         /**
          * @member {Number} rotateY_=0
+         * @reactive
          */
         rotateY_: 0,
         /**
          * @member {Number} rotateZ_=0
+         * @reactive
          */
         rotateZ_: 0,
         /**
          * @member {Number} rotationIndex_=0
+         * @reactive
          */
         rotationIndex_: 0,
         /**
          * @member {Neo.selection.Model|null} selectionModel_=null
+         * @reactive
          */
         selectionModel_: null,
         /**
          * @member {Neo.collection.Base|null} store_=null
+         * @reactive
          */
         store_: null,
         /**
          * @member {String} title_='Circle 1'
+         * @reactive
          */
         title_: 'Circle 1',
         /**
          * The url for the store to load the data
          * @member {String} url_='../resources/examples/data/circles/group1.json'
+         * @reactive
          */
         url_: '../../resources/examples/data/circles/group1.json',
         /**

package/src/component/Clock.mjs

@@ -25,21 +25,25 @@ class Clock extends Component {
         /**
          * Value in px
          * @member {Number} fontSize_=20
+         * @reactive
          */
         fontSize_: 20,
         /**
          * Show a small disc on the center of the clock (above the pointers)
          * @member {Boolean} showDisc_=true
+         * @reactive
          */
         showDisc_: true,
         /**
          * Value in px
          * @member {Number|null} size_=500
+         * @reactive
          */
         size_: 500,
         /**
          * Format: hh:mm
          * @member {String} time_='10:20'
+         * @reactive
          */
         time_: '00:00',
         /**

package/src/component/DateSelector.mjs

@@ -43,6 +43,7 @@ class DateSelector extends Component {
          * Date object created on the value config
          * @member {Date|null} currentDate_=null
          * @protected
+         * @reactive
          */
         currentDate_: null,
         /**
@@ -53,6 +54,7 @@ class DateSelector extends Component {
          * The format of the column headers.
          * Valid values are: narrow, short & long
          * @member {String} dayNameFormat_='short'
+         * @reactive
          */
         dayNameFormat_: 'short',
         /**
@@ -64,6 +66,7 @@ class DateSelector extends Component {
          * Internal flag to prevent changing the date while change animations are still running
          * @member {Boolean} isUpdating_=false
          * @protected
+         * @reactive
          */
         isUpdating_: false,
         /**
@@ -73,14 +76,17 @@ class DateSelector extends Component {
         keys: {},
         /**
          * @member {String} locale_=Neo.config.locale
+         * @reactive
          */
         locale_: Neo.config.locale,
         /**
          * @member {String|null} maxValue_=null
+         * @reactive
          */
         maxValue_: null,
         /**
          * @member {String|null} minValue_=null
+         * @reactive
          */
         minValue_: null,
         /**
@@ -98,20 +104,24 @@ class DateSelector extends Component {
         /**
          * Either pass a selection.Model module, an instance or a config object
          * @member {Object|Neo.selection.Model} selectionModel_=null
+         * @reactive
          */
         selectionModel_: null,
         /**
          * True to show inner cell & header cell borders
          * @member {Boolean} showCellBorders_=true
+         * @reactive
          */
         showCellBorders_: false,
         /**
          * True to show the days of the previous or next month (not selectable)
          * @member {Boolean} showDisabledDays_=true
+         * @reactive
          */
         showDisabledDays_: true,
         /**
          * @member {Boolean} showWeekends_=true
+         * @reactive
          */
         showWeekends_: true,
         /**
@@ -121,11 +131,13 @@ class DateSelector extends Component {
         useAnimations: true,
         /**
          * @member {String} value_=DateUtil.convertToyyyymmdd(new Date())
+         * @reactive
          */
         value_: DateUtil.convertToyyyymmdd(todayDate),
         /**
          * 0-6 => Sun-Sat
          * @member {Number} weekStartDay_=0
+         * @reactive
          */
         weekStartDay_: 0,
         /**

package/src/component/Gallery.mjs

@@ -25,11 +25,13 @@ class Gallery extends Component {
         /**
          * The amount of visible rows inside the gallery
          * @member {Number} amountRows_=3
+         * @reactive
          */
         amountRows_: 3,
         /**
          * The background color of the gallery container
          * @member {String} backgroundColor_='#000000'
+         * @reactive
          */
         backgroundColor_: '#000000',
         /**
@@ -53,6 +55,7 @@ class Gallery extends Component {
         itemHeight: 160,
         /**
          * @member {Object} itemTpl_
+         * @reactive
          */
         itemTpl_:
         {cls: ['neo-gallery-item', 'image-wrap', 'view', 'neo-transition-1000'], tabIndex: '-1', cn: [
@@ -78,6 +81,7 @@ class Gallery extends Component {
         /**
          * The max amount of store items to show
          * @member {Number} maxItems_=300
+         * @reactive
          */
         maxItems_: 300,
         /**
@@ -93,6 +97,7 @@ class Gallery extends Component {
         /**
          * Specifies whether the mouse wheel should change the translateZ value for zooming
          * @member {Boolean} mouseWheelEnabled_=true
+         * @reactive
          */
         mouseWheelEnabled_: true,
         /**
@@ -112,6 +117,7 @@ class Gallery extends Component {
         /**
          * Set this one to true to order the items by row instead of by column
          * @member {Boolean} orderByRow_=false
+         * @reactive
          */
         orderByRow_: false,
         /**
@@ -122,6 +128,7 @@ class Gallery extends Component {
         /**
          * Uses the selection.GalleryModel by default
          * @member {Neo.selection.GalleryModel|null} selectionModel_=null
+         * @reactive
          */
         selectionModel_: null,
         /**
@@ -132,6 +139,7 @@ class Gallery extends Component {
         /**
          * The store instance or class containing the data for the gallery items
          * @member {Neo.data.Store|null} store_=null
+         * @reactive
          */
         store_: null,
         /**
@@ -143,16 +151,19 @@ class Gallery extends Component {
         /**
          * The translateX value of the view origin
          * @member {Number} translateX_=0
+         * @reactive
          */
         translateX_: 0,
         /**
          * The translateX value of the view origin
          * @member {Number} translateY_=0
+         * @reactive
          */
         translateY_: 0,
         /**
          * The translateX value of the view origin
          * @member {Number} translateZ_=0
+         * @reactive
          */
         translateZ_: 0,
         /**

package/src/component/Helix.mjs

@@ -27,11 +27,13 @@ class Helix extends Component {
         /**
          * The background color of the helix container
          * @member {String} backgroundColor_='#000000'
+         * @reactive
          */
         backgroundColor_: '#000000',
         /**
          * The background image of the helix container
          * @member {String} backgroundImage_=''
+         * @reactive
          */
         backgroundImage_: '',
         /**
@@ -47,21 +49,25 @@ class Helix extends Component {
         /**
          * The vertical delta between each helix item (increasing this value will create a spiral)
          * @member {Number} deltaY_=1.5
+         * @reactive
          */
         deltaY_: 1.5,
         /**
          * Multiselections will reduce the opacity and set this flag to true
          * @member {Boolean} dimmed_=false
+         * @reactive
          */
         dimmed_: false,
         /**
          * Multiselections will reduce the opacity and set this flag to true
          * @member {Number} dimmedMaxOpacity_=0.3
+         * @reactive
          */
         dimmedMaxOpacity_: 0.3,
         /**
          * Multiselections will reduce the opacity and set this flag to true
          * @member {Number} dimmedMinOpacity_=0.2
+         * @reactive
          */
         dimmedMinOpacity_: 0.2,
         /**
@@ -72,11 +78,13 @@ class Helix extends Component {
         /**
          * Flip images by 180° for a not mirrored inner view
          * @member {Boolean} flipped_=false
+         * @reactive
          */
         flipped_: false,
         /**
          * True to rotate the helix when using keynav, so that the selected items stays in front
          * @member {Boolean} followSelection_=false
+         * @reactive
          */
         followSelection_: false,
         /**
@@ -89,15 +97,18 @@ class Helix extends Component {
          * The path to the images folder
          * Will get set inside afterSetWindowId() to avoid issues inside the webpack builds
          * @member {String|null} imageSource_=Neo.config.resourcesPath + 'examples/'
+         * @reactive
          */
         imageSource_: null,
         /**
          * Amount of items per row (circle) -> 360° / 10 = 36
          * @member {Number} itemAngle_=8
+         * @reactive
          */
         itemAngle_: 8,
         /**
          * @member {Object} itemTpl_
+         * @reactive
          */
         itemTpl_:
         {cls: ['surface', 'neo-helix-item'], style: {}, tabIndex: '-1', cn: [
@@ -125,16 +136,19 @@ class Helix extends Component {
         /**
          * The max amount of store items to show
          * @member {Number} maxItems_=300
+         * @reactive
          */
         maxItems_: 300,
         /**
          * The max opacity for items inside the foreground
          * @member {Number} maxOpacity_=0.8
+         * @reactive
          */
         maxOpacity_: 0.8,
         /**
          * The max opacity for items inside the background
          * @member {Number} minOpacity_=0.3
+         * @reactive
          */
         minOpacity_: 0.3,
         /**
@@ -150,6 +164,7 @@ class Helix extends Component {
         /**
          * Specifies whether the mouse wheel should change the translateZ value for zooming
          * @member {Boolean} mouseWheelEnabled_=true
+         * @reactive
          */
         mouseWheelEnabled_: true,
         /**
@@ -169,16 +184,19 @@ class Helix extends Component {
         /**
          * The perspective of the Helix view in px
          * @member {Number} perspective_=800
+         * @reactive
          */
         perspective_: 800,
         /**
          * The radius of the Helix in px
          * @member {Number} radius_=1500
+         * @reactive
          */
         radius_: 1500,
         /**
          * The rotationAngle of the Helix in degrees
          * @member {Number} rotationAngle_=780
+         * @reactive
          */
         rotationAngle_: 780,
         /**
@@ -200,11 +218,13 @@ class Helix extends Component {
         /**
          * uses the selection.HelixModel by default
          * @member {Neo.selection.HelixModel|null} selectionModel_=null
+         * @reactive
          */
         selectionModel_: null,
         /**
          * The store instance or class containing the data for the gallery items
          * @member {Neo.data.Store|null} store_=null
+         * @reactive
          */
         store_: null, // todo: use a store once collections are integrated
         /**
@@ -216,21 +236,25 @@ class Helix extends Component {
         /**
          * The translateX gets included into each helix item
          * @member {Number} translateX_=400
+         * @reactive
          */
         translateX_: 400,
         /**
          * The translateX value gets included into each helix item
          * @member {Number} translateY_=-350
+         * @reactive
          */
         translateY_: -350,
         /**
          * The translateX value gets included into each helix item
          * @member {Number} translateZ_=-5000
+         * @reactive
          */
         translateZ_: -5000,
         /**
          * The url for the store to load the data
          * @member {String} url_='../resources/examples/data/ai_contacts.json'
+         * @reactive
          */
         url_: '../../resources/examples/data/ai_contacts.json',
         /**

package/src/component/Label.mjs

@@ -24,6 +24,7 @@ class Label extends Component {
         /**
          * @member {String} tag='label'
          * @protected
+         * @reactive
          */
         tag: 'label'
     }

package/src/component/Legend.mjs

@@ -24,14 +24,17 @@ class Legend extends Component {
         baseCls: ['neo-legend'],
         /**
          * @member {String} iconCls_='far fa-check'
+         * @reactive
          */
         iconCls_: 'far fa-check',
         /**
          * @member {String} text=''
+         * @reactive
          */
         text: '',
         /**
          * @member {Boolean} useIcon_=true
+         * @reactive
          */
         useIcon_: true,
         /**

package/src/component/MagicMoveText.mjs

@@ -20,10 +20,12 @@ class MagicMoveText extends Component {
         ntype: 'magic-move-text',
         /**
          * @member {Boolean} autoCycle_=true
+         * @reactive
          */
         autoCycle_: true,
         /**
          * @member {Number} autoCycleInterval_=2000
+         * @reactive
          */
         autoCycleInterval_: 2000,
         /**
@@ -49,11 +51,13 @@ class MagicMoveText extends Component {
         cycleTexts: null,
         /**
          * @member {String} fontFamily_='Helvetica Neue'
+         * @reactive
          */
         fontFamily_: 'Helvetica Neue',
         /**
          * Time in ms for the fadeIn, fadeOut and move character OPs
          * @member {Number} transitionTime_=500
+         * @reactive
          */
         transitionTime_: 500,
         /**

package/src/component/Progress.mjs

@@ -23,14 +23,17 @@ class Progress extends Base {
         baseCls: ['neo-progress'],
         /**
          * @member {String|null} labelText_=null
+         * @reactive
          */
         labelText_: null,
         /**
          * @member {Number} max_=100
+         * @reactive
          */
         max_: 100,
         /**
          * @member {Number|null} value_=null
+         * @reactive
          */
         value_: null,
         /**

package/src/component/Splitter.mjs

@@ -41,6 +41,7 @@ class Splitter extends Component {
         /**
          * Either 'horizontal' or 'vertical'
          * @member {String} direction_='vertical'
+         * @reactive
          */
         direction_: 'vertical',
         /**
@@ -56,12 +57,14 @@ class Splitter extends Component {
          * Choose which sibling to resize
          * Valid values: 'next' or 'previous'
          * @member {String} resizeTarget_='next'
+         * @reactive
          */
         resizeTarget_: 'next',
         /**
          * Either height or with, depending on the direction.
          * Defaults to px
          * @member {Number} size_=10
+         * @reactive
          */
         size_: 10
     }

package/src/component/StatusBadge.mjs

@@ -70,22 +70,27 @@ class StatusBadge extends Base {
         iconSuccess_: 'fa fa-check',
         /**
          * @member {String} labelAlert_='Alert'
+         * @reactive
          */
         labelAlert_: 'Alert',
         /**
          * @member {String} labelError_='Error'
+         * @reactive
          */
         labelError_: 'Error',
         /**
          * @member {String} labelInfo_='Info'
+         * @reactive
          */
         labelInfo_: 'Info',
         /**
          * @member {String} labelNeutral_='Neutral'
+         * @reactive
          */
         labelNeutral_: 'Neutral',
         /**
          * @member {String} labelSuccess_='Success'
+         * @reactive
          */
         labelSuccess_: 'Success',
         /**
@@ -110,6 +115,7 @@ class StatusBadge extends Base {
         sideIconSuccess_: 'fa fa-registered',
         /**
          * @member {String} state_='neutral'
+         * @reactive
          */
         state_: 'neutral',
         /**

package/src/component/Timer.mjs

@@ -25,21 +25,25 @@ class Timer extends Component {
         /**
          * End color of the circle. If not set, it uses the css default
          * @member {Number|String} colorEnd_=null
+         * @reactive
          */
         colorEnd_: null,
         /**
          * Start color of the circle. If not set, it uses the css default
          * @member {Number|String} colorStart_=null
+         * @reactive
          */
         colorStart_: null,
         /**
          * Start time. This might be '5m', '30s' or milliseconds as number
          * @member {Number|String} duration_='5m'
+         * @reactive
          */
         duration_: '10m',
         /**
          * Defines height and min-width. This can be a number in px or a string.
          * @member {Number|String} dimensions_='6rem'
+         * @reactive
          */
         dimensions_: '8em',
         /**

package/src/component/Toast.mjs

@@ -70,16 +70,19 @@ class Toast extends Component {
         /**
          * Limits the width of the Toast
          * @member {Number} maxWidth=250
+         * @reactive
          */
         maxWidth: 250,
         /**
          * Sets the minimum height of the Toast
          * @member {Number} minHeight=50
+         * @reactive
          */
         minHeight: 50,
         /**
          * Your message. You can also pass in an iconCls
          * @member {String|null} msg_=null
+         * @reactive
          */
         msg_: null,
         /**
@@ -92,15 +95,18 @@ class Toast extends Component {
          * Describes which direction from which side the toasts slides-in
          * This creates a cls `neo-toast-slide-${direction}-in`
          * @member {'down'|'up'|'left'|'right'} slideDirection_='right'
+         * @reactive
          */
         slideDirection_: 'right',
         /**
          * Adds a title to the toast
          * @member {Number} title_=null
+         * @reactive
          */
         title_: null,
         /**
          * @member {String|null} title=null
+         * @reactive
          */
         vdom:
         {cn: [

package/src/component/Video.mjs

@@ -40,6 +40,7 @@ class Video extends BaseComponent {
         /**
          * Current state of the video
          * @member {Boolean} playing_=false
+         * @reactive
          */
         playing_: false,
         /**