neo.mjs 10.0.0-beta.4 → 10.0.0-beta.6

package/examples/button/effect/MainContainer.mjs

@@ -0,0 +1,207 @@
+import CheckBox              from '../../../src/form/field/CheckBox.mjs';
+import ComboBox              from '../../../src/form/field/ComboBox.mjs';
+import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import EffectButton          from '../../../src/button/Effect.mjs';
+import NumberField           from '../../../src/form/field/Number.mjs';
+import Radio                 from '../../../src/form/field/Radio.mjs';
+import TextField             from '../../../src/form/field/Text.mjs';
+
+/**
+ * @class Neo.examples.button.effect.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.button.effect.MainContainer',
+        configItemLabelWidth: 160,
+        configItemWidth     : 280,
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }
+
+    createConfigurationComponents() {
+        let me = this;
+
+        return [{
+            module        : Radio,
+            checked       : me.exampleComponent.badgePosition === 'bottom-left',
+            hideValueLabel: false,
+            labelText     : 'badgePosition',
+            listeners     : {change: me.onRadioChange.bind(me, 'badgePosition', 'bottom-left')},
+            name          : 'badgePosition',
+            valueLabelText: 'bottom-left'
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.badgePosition === 'bottom-right',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'badgePosition', 'bottom-right')},
+            name          : 'badgePosition',
+            valueLabelText: 'bottom-right'
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.badgePosition === 'top-left',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'badgePosition', 'top-left')},
+            name          : 'badgePosition',
+            valueLabelText: 'top-left'
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.badgePosition === 'top-right',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'badgePosition', 'top-right')},
+            name          : 'badgePosition',
+            valueLabelText: 'top-right'
+        }, {
+            module    :  TextField,
+            labelText : 'badgeText',
+            listeners : {change: me.onConfigChange.bind(me, 'badgeText')},
+            style     : {marginTop: '10px'},
+            value     : me.exampleComponent.badgeText
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.disabled,
+            labelText: 'disabled',
+            listeners: {change: me.onConfigChange.bind(me, 'disabled')},
+            style    : {marginTop: '10px'}
+        }, {
+            module    :  NumberField,
+            clearable : true,
+            labelText : 'height',
+            listeners : {change: me.onConfigChange.bind(me, 'height')},
+            maxValue  : 300,
+            minValue  : 30,
+            stepSize  : 5,
+            style     : {marginTop: '10px'},
+            value     : me.exampleComponent.height
+        }, {
+            module    :  TextField, // todo: selectField with options
+            labelText : 'iconCls',
+            listeners : {change: me.onConfigChange.bind(me, 'iconCls')},
+            value     : me.exampleComponent.iconCls
+        }, {
+            module    :  TextField, // todo: colorPickerField
+            clearable : true,
+            labelText : 'iconColor',
+            listeners : {change: me.onConfigChange.bind(me, 'iconColor')},
+            value     : me.exampleComponent.iconColor
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.iconPosition === 'top',
+            hideValueLabel: false,
+            labelText     : 'iconPosition',
+            listeners     : {change: me.onRadioChange.bind(me, 'iconPosition', 'top')},
+            name          : 'iconPosition',
+            style         : {marginTop: '10px'},
+            valueLabelText: 'top'
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.iconPosition === 'right',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'iconPosition', 'right')},
+            name          : 'iconPosition',
+            valueLabelText: 'right'
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.iconPosition === 'bottom',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'iconPosition', 'bottom')},
+            name          : 'iconPosition',
+            valueLabelText: 'bottom'
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.iconPosition === 'left',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'iconPosition', 'left')},
+            name          : 'iconPosition',
+            valueLabelText: 'left'
+        }, {
+            module    :  NumberField,
+            clearable : true,
+            labelText : 'rippleEffectDuration',
+            listeners : {change: me.onConfigChange.bind(me, 'rippleEffectDuration')},
+            maxValue  : 5000,
+            minValue  : 100,
+            stepSize  : 100,
+            style     : {marginTop: '10px'},
+            value     : me.exampleComponent.rippleEffectDuration
+        }, {
+            module    :  TextField,
+            clearable : true,
+            labelText : 'text',
+            listeners : {change: me.onConfigChange.bind(me, 'text')},
+            style     : {marginTop: '10px'},
+            value     : me.exampleComponent.text
+        }, {
+            module    :  TextField,
+            clearable : true,
+            labelText : 'tooltip',
+            listeners : {change: me.onConfigChange.bind(me, 'tooltip')},
+            style     : {marginTop: '10px'},
+            value     : me.exampleComponent.tooltip
+        }, {
+            module        : ComboBox,
+            forceSelection: true,
+            labelText     : 'ui',
+            listeners     : {change: me.onConfigRecordChange.bind(me, 'ui')},
+            style         : {marginTop: '10px'},
+            value         : me.exampleComponent.ui,
+
+            store: {
+                data: [
+                    {id: 'primary',   name: 'primary'},
+                    {id: 'secondary', name: 'secondary'},
+                    {id: 'tertiary',  name: 'tertiary'}
+                ]
+            }
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.useRippleEffect,
+            labelText: 'useRippleEffect',
+            listeners: {change: me.onConfigChange.bind(me, 'useRippleEffect')},
+            style    : {marginTop: '10px'}
+        }, {
+            module    :  NumberField,
+            clearable : true,
+            labelText : 'width',
+            listeners : {change: me.onConfigChange.bind(me, 'width')},
+            maxValue  : 300,
+            minValue  : 100,
+            stepSize  : 5,
+            style     : {marginTop: '10px'},
+            value     : me.exampleComponent.width
+        }];
+    }
+
+    /**
+     * @returns {Neo.component.Base}
+     */
+    createExampleComponent() {
+        return Neo.create({
+            module   : EffectButton,
+            badgeText: 'Badge',
+            flex     : 'none',
+            handler  : data => console.log('button click =>', data.component.id),
+            height   : 50,
+            iconCls  : 'fa fa-home',
+            style    : {marginBottom: '1500px', marginTop: '500px'},
+            text     : 'Hello World',
+            ui       : 'primary',
+            width    : 150
+        })
+    }
+
+    /**
+     * @param {String} config
+     * @param {Object} opts
+     */
+    onConfigRecordChange(config, opts) {
+        this.exampleComponent[config] = opts.value['id']
+    }
+}
+
+export default Neo.setupClass(MainContainer);

package/examples/button/effect/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.button.effect'
+});

package/examples/button/effect/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo EffectButton</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/button/effect/neo-config.json

@@ -0,0 +1,6 @@
+{
+    "appPath"    : "examples/button/effect/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
+}

package/examples/calendar/weekview/MainContainer.mjs

@@ -16,6 +16,7 @@ class MainContainer extends Viewport {
         /**
          * Value for the container.Base layout_ config
          * @member {Object} layout={ntype: 'fit'}
+         * @reactive
          */
         layout: {ntype: 'fit'},
         /**
@@ -25,6 +26,7 @@ class MainContainer extends Viewport {
          * 1. Extend Neo.calendar.view.week.Component and add the configs and view model there.
          * 2. Just drop them into a parent view.
          * @member {Neo.calendar.view.MainContainerStateProvider} stateProvider=MainContainerStateProvider
+         * @reactive
          */
         stateProvider: {
             module: MainContainerStateProvider,
@@ -36,6 +38,7 @@ class MainContainer extends Viewport {
          * Config options for Neo.calendar.store.Calendars.
          * The calendar view model relies on it.
          * @member {Object} calendarStoreConfig_
+         * @reactive
          */
         calendarStoreConfig_: {
             autoLoad: true,
@@ -45,6 +48,7 @@ class MainContainer extends Viewport {
          * Config options for Neo.calendar.store.Events.
          * The calendar view model relies on it.
          * @member {Object} eventStoreConfig_
+         * @reactive
          */
         eventStoreConfig_: {
             autoLoad: true,

package/examples/component/coronaGallery/CountryGallery.mjs

@@ -22,6 +22,7 @@ class CountryGallery extends Gallery {
         className: 'Neo.examples.component.coronaGallery.CountryGallery',
         /**
          * @member {String[]} cls=['neo-country-gallery']
+         * @reactive
          */
         cls: ['neo-country-gallery'],
         /**
@@ -46,6 +47,7 @@ class CountryGallery extends Gallery {
         selectOnMount: false,
         /**
          * @member {Neo.data.Store} store=CountryStore
+         * @reactive
          */
         store: CountryStore
     }

package/examples/component/coronaGallery/CountryStore.mjs

@@ -18,6 +18,7 @@ class CountryStore extends Store {
         keyProperty: 'country',
         /**
          * @member {Neo.data.Model} model=CountryModel
+         * @reactive
          */
         model: CountryModel
     }

package/examples/component/coronaGallery/Viewport.mjs

@@ -21,6 +21,7 @@ class Viewport extends BaseViewport {
         baseCls: ['neo-gallery-viewport', 'neo-viewport'],
         /**
          * @member {Neo.controller.Component} controller=ViewportController
+         * @reactive
          */
         controller: ViewportController,
         /**
@@ -33,10 +34,12 @@ class Viewport extends BaseViewport {
         galleryConfig: null,
         /**
          * @member {Object|null} layout={ntype: 'hbox', align: 'stretch'}
+         * @reactive
          */
         layout: {ntype: 'hbox', align: 'stretch'},
         /**
          * @member {Boolean} showGitHubStarButton_=true
+         * @reactive
          */
         showGitHubStarButton_: true,
         /**

package/examples/component/coronaGallery/ViewportController.mjs

@@ -14,6 +14,7 @@ class ViewportController extends Controller {
         /**
          * @member {Neo.component.Gallery|null} gallery_=null
          * @protected
+         * @reactive
          */
         gallery_: null
     }

package/examples/component/coronaHelix/CountryHelix.mjs

@@ -27,10 +27,12 @@ class CountryHelix extends Helix {
         /**
          * The vertical delta between each helix item (increasing this value will create a spiral)
          * @member {Number} deltaY=1.2
+         * @reactive
          */
         deltaY: 1.2,
         /**
          * @member {Object} itemTpl_
+         * @reactive
          */
         itemTpl:
         {cls: ['surface', 'neo-helix-item'], style: {}, tabIndex: '-1', cn: [
@@ -74,11 +76,13 @@ class CountryHelix extends Helix {
         /**
          * The radius of the Helix in px
          * @member {Number} radius=2500
+         * @reactive
          */
         radius: 2500,
         /**
          * The rotationAngle of the Helix in degrees
          * @member {Number} rotationAngle=720
+         * @reactive
          */
         rotationAngle: 720,
         /**
@@ -88,16 +92,19 @@ class CountryHelix extends Helix {
         showCloneInfo: false,
         /**
          * @member {Neo.data.Store} store=CountryStore
+         * @reactive
          */
         store: CountryStore,
         /**
          * The translateX value gets included into each helix item
          * @member {Number} translateY=500
+         * @reactive
          */
         translateY: 500,
         /**
          * The translateX value gets included into each helix item
          * @member {Number} translateZ_=-2300
+         * @reactive
          */
         translateZ: -2300
     }

package/examples/component/coronaHelix/MainContainer.mjs

@@ -29,6 +29,7 @@ class MainContainer extends Viewport {
         helixConfig: null,
         /**
          * @member {Object|null} layout={ntype: 'hbox',align:'stretch'}
+         * @reactive
          */
         layout: {ntype: 'hbox', align: 'stretch'},
         /**

package/examples/component/gallery/ImageStore.mjs

@@ -18,6 +18,7 @@ class ImageStore extends Store {
         autoLoad: true,
         /**
          * @member {Neo.data.Model} model=ImageModel
+         * @reactive
          */
         model: ImageModel,
         /**

package/examples/component/helix/ImageStore.mjs

@@ -18,6 +18,7 @@ class ImageStore extends Store {
         autoLoad: true,
         /**
          * @member {Neo.data.Model} model=ImageModel
+         * @reactive
          */
         model: ImageModel,
         /**

package/examples/component/helix/Viewport.mjs

@@ -28,6 +28,7 @@ class Viewport extends BaseViewport {
         className: 'Neo.examples.component.helix.Viewport',
         /**
          * @member {Neo.controller.Component} controller=ViewportController
+         * @reactive
          */
         controller: ViewportController,
         /**
@@ -40,10 +41,12 @@ class Viewport extends BaseViewport {
         helixConfig: null,
         /**
          * @member {Object|null} layout={ntype: 'hbox',align:'stretch'}
+         * @reactive
          */
         layout: {ntype: 'hbox', align: 'stretch'},
         /**
          * @member {Boolean} showGitHubStarButton_=true
+         * @reactive
          */
         showGitHubStarButton_: true,
         /**

package/examples/component/helix/ViewportController.mjs

@@ -14,6 +14,7 @@ class ViewportController extends Controller {
         /**
          * @member {Neo.component.Helix|null} helix_=null
          * @protected
+         * @reactive
          */
         helix_: null
     }

package/examples/component/multiWindowCoronaGallery/childapp/Viewport.mjs

@@ -13,6 +13,7 @@ class Viewport extends BaseViewport {
         className: 'Neo.examples.component.multiWindowCoronaGallery.childapp.Viewport',
         /**
          * @member {Object} layout={ntype:'fit'}
+         * @reactive
          */
         layout: {ntype: 'fit'}
     }

package/examples/component/multiWindowHelix/childapp/Viewport.mjs

@@ -13,6 +13,7 @@ class Viewport extends BaseViewport {
         className: 'Neo.examples.component.multiWindowHelix.childapp.Viewport',
         /**
          * @member {Object} layout={ntype:'fit'}
+         * @reactive
          */
         layout: {ntype: 'fit'}
     }

package/examples/component/wrapper/googleMaps/MapComponent.mjs

@@ -15,6 +15,7 @@ class MapComponent extends GoogleMapsComponent {
         /**
          * Center the map initially to Island
          * @member {Object} center={lat: 64.963051,lng: -19.020835}
+         * @reactive
          */
         center: {
             lat: 64.963051,
@@ -53,6 +54,7 @@ class MapComponent extends GoogleMapsComponent {
         /**
          * Ensure only Island is visible
          * @member {Number} zoom=6
+         * @reactive
          */
         zoom: 6
     }

package/examples/core/config/MainContainer.mjs

@@ -14,10 +14,12 @@ class MainContainer extends Viewport {
         className: 'Neo.examples.core.config.MainContainer',
         /**
          * @member {Number|null} a_=null
+         * @reactive
          */
         a_: null,
         /**
          * @member {Number|null} b_=null
+         * @reactive
          */
         b_: null,
         /**

package/examples/dialog/DemoDialog.mjs

@@ -16,6 +16,7 @@ class DemoDialog extends Dialog {
         /**
          * Custom config to dynamically enable / disable the animateTargetId
          * @member {Boolean} animated_=true
+         * @reactive
          */
         animated_: true,
         /**
@@ -33,6 +34,7 @@ class DemoDialog extends Dialog {
         index: 1,
         /**
          * @member {Boolean} modal=true
+         * @reactive
          */
         modal: true,
         /**

package/examples/dialog/MainContainer.mjs

@@ -19,6 +19,7 @@ class MainContainer extends Viewport {
         /**
          * We are not using a container layout here
          * @member {String} layout='base'
+         * @reactive
          */
         layout: 'base',
         /**

package/examples/form/field/color/MainStore.mjs

@@ -25,6 +25,7 @@ class MainStore extends Store {
         ],
         /**
          * @member {Neo.data.Model} model=MainModel
+         * @reactive
          */
         model: MainModel
     }

package/examples/functional/defineComponent/Component.mjs

@@ -0,0 +1,18 @@
+import {defineComponent, useConfig, useEvent} from '../../../src/functional/_export.mjs';
+
+export default defineComponent({
+    config: {
+        className: 'Neo.examples.functional.defineComponent.Component',
+        greeting_: 'Hello'
+    },
+    createVdom(config) {
+        const [name, setName] = useConfig('World');
+
+        useEvent('click', () => setName(prev => prev === 'Neo' ? 'World' : 'Neo'));
+
+        return {
+        //  tag : 'div', // div is the default value
+            text: `${config.greeting}, ${name}!`
+        }
+    }
+});

package/examples/functional/defineComponent/MainContainer.mjs

@@ -0,0 +1,41 @@
+import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import MyFunctionalComponent from './Component.mjs';
+import TextField             from '../../../src/form/field/Text.mjs';
+
+/**
+ * @class Neo.examples.functional.defineComponent.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.functional.defineComponent.MainContainer',
+        configItemLabelWidth: 160,
+        configItemWidth     : 280,
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }
+
+    createConfigurationComponents() {
+        let me = this;
+
+        return [{
+            module    : TextField,
+            clearable : true,
+            labelText : 'greeting',
+            listeners : {change: me.onConfigChange.bind(me, 'greeting')},
+            style     : {marginTop: '10px'},
+            value     : me.exampleComponent.greeting
+        }]
+    }
+
+    /**
+     * @returns {Neo.functional.Component}
+     */
+    createExampleComponent() {
+        return {
+            module  : MyFunctionalComponent,
+            greeting: 'Hi'
+        }
+    }
+}
+
+export default Neo.setupClass(MainContainer);

package/examples/functional/defineComponent/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.functional.defineComponent'
+});

package/examples/functional/defineComponent/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo Functional Component</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/functional/defineComponent/neo-config.json

@@ -0,0 +1,6 @@
+{
+    "appPath"    : "examples/functional/defineComponent/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
+}

package/examples/functional/hostComponent/Component.mjs

@@ -0,0 +1,32 @@
+import {defineComponent, useConfig} from '../../../src/functional/_export.mjs';
+import Button                       from '../../../src/button/Base.mjs';
+
+export default defineComponent({
+    config: {
+        className: 'Neo.examples.functional.hostComponent.Component'
+    },
+    createVdom() {
+        const [count, setCount] = useConfig(0);
+
+        const style = {
+            display       : 'flex',
+            flexDirection : 'column',
+            alignItems    : 'center',
+            justifyContent: 'center',
+            fontSize      : '20px'
+        };
+
+        return {style, cn: [
+            {
+                tag : 'p',
+                text: `Button clicked ${count} times`
+            }, {
+                module : Button,
+                id     : 'myButtonModule',
+                theme  : 'neo-theme-neo-light',
+                text   : 'Click Me (Neo Button)',
+                handler: () => setCount(prev => prev + 1)
+            }
+        ]}
+    }
+});