neo.mjs 5.10.13 → 5.11.1

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.10.13'
+         * @member {String} version='5.11.1'
          */
-        version: '5.10.13'
+        version: '5.11.1'
     }
 
     /**

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.10.13'
+         * @member {String} version='5.11.1'
          */
-        version: '5.10.13'
+        version: '5.11.1'
     }
 
     /**

package/examples/component/dateSelector/MainContainer.mjs

@@ -1,5 +1,6 @@
 import CheckBox              from '../../../src/form/field/CheckBox.mjs';
 import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import DateField             from '../../../src/form/field/Date.mjs';
 import DateSelector          from '../../../src/component/DateSelector.mjs';
 import Radio                 from '../../../src/form/field/Radio.mjs';
 import NumberField           from '../../../src/form/field/Number.mjs';
@@ -14,11 +15,12 @@ class MainContainer extends ConfigurationViewport {
     }
 
     createConfigurationComponents() {
-        let me = this;
+        let me               = this,
+            exampleComponent = me.exampleComponent;
 
         return [{
             module        : Radio,
-            checked       : me.exampleComponent.currentDate.getMonth() === 0,
+            checked       : exampleComponent.currentDate.getMonth() === 0,
             hideValueLabel: false,
             labelText     : 'currentDate (month)',
             listeners     : {change: me.onMonthRadioChange.bind(me, 0)},
@@ -26,7 +28,7 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: 'Jan'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.currentDate.getMonth() === 1,
+            checked       : exampleComponent.currentDate.getMonth() === 1,
             hideValueLabel: false,
             labelText     : '',
             listeners     : {change: me.onMonthRadioChange.bind(me, 1)},
@@ -34,7 +36,7 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: 'Feb'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.currentDate.getMonth() === 2,
+            checked       : exampleComponent.currentDate.getMonth() === 2,
             hideValueLabel: false,
             labelText     : '',
             listeners     : {change: me.onMonthRadioChange.bind(me, 2)},
@@ -42,7 +44,7 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: 'Mar'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.currentDate.getMonth() === 3,
+            checked       : exampleComponent.currentDate.getMonth() === 3,
             hideValueLabel: false,
             labelText     : '',
             listeners     : {change: me.onMonthRadioChange.bind(me, 3)},
@@ -50,7 +52,7 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: 'Apr'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.currentDate.getFullYear() === 2021,
+            checked       : exampleComponent.currentDate.getFullYear() === 2021,
             hideValueLabel: false,
             labelText     : 'currentDate (year)',
             listeners     : {change: me.onYearRadioChange.bind(me, 2021)},
@@ -59,7 +61,7 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: '2021'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.currentDate.getFullYear() === 2020,
+            checked       : exampleComponent.currentDate.getFullYear() === 2020,
             hideValueLabel: false,
             labelText     : '',
             listeners     : {change: me.onYearRadioChange.bind(me, 2020)},
@@ -67,7 +69,7 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: '2020'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.currentDate.getFullYear() === 2019,
+            checked       : exampleComponent.currentDate.getFullYear() === 2019,
             hideValueLabel: false,
             labelText     : '',
             listeners     : {change: me.onYearRadioChange.bind(me, 2019)},
@@ -75,7 +77,7 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: '2019'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.currentDate.getFullYear() === 2018,
+            checked       : exampleComponent.currentDate.getFullYear() === 2018,
             hideValueLabel: false,
             labelText     : '',
             listeners     : {change: me.onYearRadioChange.bind(me, 2018)},
@@ -83,7 +85,7 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: '2018'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.dayNameFormat === 'narrow',
+            checked       : exampleComponent.dayNameFormat === 'narrow',
             hideValueLabel: false,
             labelText     : 'dayNameFormat',
             listeners     : {change: me.onRadioChange.bind(me, 'dayNameFormat', 'narrow')},
@@ -92,7 +94,7 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: 'narrow'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.dayNameFormat === 'short',
+            checked       : exampleComponent.dayNameFormat === 'short',
             hideValueLabel: false,
             labelText     : '',
             listeners     : {change: me.onRadioChange.bind(me, 'dayNameFormat', 'short')},
@@ -100,14 +102,14 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: 'short'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.dayNameFormat === 'long',
+            checked       : exampleComponent.dayNameFormat === 'long',
             hideValueLabel: false,
             labelText     : '',
             listeners     : {change: me.onRadioChange.bind(me, 'dayNameFormat', 'long')},
             name          : 'dayNameFormat',
             valueLabelText: 'long'
         }, {
-            module    :  NumberField,
+            module    : NumberField,
             clearable : true,
             labelText : 'height',
             listeners : {change: me.onConfigChange.bind(me, 'height')},
@@ -115,28 +117,40 @@ class MainContainer extends ConfigurationViewport {
             minValue  : 230,
             stepSize  : 10,
             style     : {marginTop: '10px'},
-            value     : me.exampleComponent.height
+            value     : exampleComponent.height
+        }, {
+            module          : DateField,
+            labelText       : 'maxValue',
+            listeners       : {change: me.onConfigChange.bind(me, 'maxValue')},
+            matchPickerWidth: false,
+            value           : exampleComponent.maxValue
+        }, {
+            module          : DateField,
+            labelText       : 'minValue',
+            listeners       : {change: me.onConfigChange.bind(me, 'minValue')},
+            matchPickerWidth: false,
+            value           : exampleComponent.minValue
         }, {
             module   : CheckBox,
-            checked  : me.exampleComponent.showCellBorders,
+            checked  : exampleComponent.showCellBorders,
             labelText: 'showCellBorders',
             listeners: {change: me.onConfigChange.bind(me, 'showCellBorders')},
             style    : {marginTop: '10px'}
         }, {
             module   : CheckBox,
-            checked  : me.exampleComponent.showDisabledDays,
+            checked  : exampleComponent.showDisabledDays,
             labelText: 'showDisabledDays',
             listeners: {change: me.onConfigChange.bind(me, 'showDisabledDays')},
             style    : {marginTop: '10px'}
         }, {
             module   : CheckBox,
-            checked  : me.exampleComponent.useAnimations,
+            checked  : exampleComponent.useAnimations,
             labelText: 'useAnimations',
             listeners: {change: me.onConfigChange.bind(me, 'useAnimations')},
             style    : {marginTop: '10px'}
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.weekStartDay === 6,
+            checked       : exampleComponent.weekStartDay === 6,
             hideValueLabel: false,
             labelText     : 'weekStartDay',
             listeners     : {change: me.onRadioChange.bind(me, 'weekStartDay', 6)},
@@ -145,7 +159,7 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: '6 (Saturday)'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.weekStartDay === 0,
+            checked       : exampleComponent.weekStartDay === 0,
             hideValueLabel: false,
             labelText     : '',
             listeners     : {change: me.onRadioChange.bind(me, 'weekStartDay', 0)},
@@ -153,7 +167,7 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: '0 (Sunday)'
         }, {
             module        : Radio,
-            checked       : me.exampleComponent.weekStartDay === 1,
+            checked       : exampleComponent.weekStartDay === 1,
             hideValueLabel: false,
             labelText     : '',
             listeners     : {change: me.onRadioChange.bind(me, 'weekStartDay', 1)},
@@ -168,7 +182,7 @@ class MainContainer extends ConfigurationViewport {
             minValue  : 240,
             stepSize  : 10,
             style     : {marginTop: '10px'},
-            value     : me.exampleComponent.width
+            value     : exampleComponent.width
         }];
     }
 
@@ -176,7 +190,7 @@ class MainContainer extends ConfigurationViewport {
         return Neo.create(DateSelector, {
             height: 300,
             width : 300
-        });
+        })
     }
 
     onMonthRadioChange(value, opts) {

package/examples/component/timer/MainContainer.mjs

@@ -0,0 +1,71 @@
+import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import Timer               from '../../../src/component/Timer.mjs';
+import Container             from '../../../src/container/Base.mjs';
+import TextField              from "../../../src/form/field/Text.mjs";
+import ColorField             from "../../../src/form/field/Color.mjs"
+
+/**
+ * @class Neo.examples.component.timer.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.component.timer.MainContainer',
+    }
+
+    createConfigurationComponents() {
+        let me = this;
+
+        return [{
+            module   : TextField,
+            labelText: 'dimensions',
+            value    : '8rem',
+            listeners: {change: me.onConfigChange.bind(me, 'dimensions')}
+        }, {
+            module   : ColorField,
+            clearable : false,
+            labelText: 'colorStart',
+            value: '#8a9b0f',
+            listeners: {change: me.onConfigChange.bind(me, 'colorStart')}
+        }, {
+            module   : ColorField,
+            clearable : false,
+            labelText: 'colorEnd',
+            value: '#940a3d',
+            listeners: {change: me.onConfigChange.bind(me, 'colorEnd')}
+        }];
+    }
+
+    createExampleComponent() {
+        return Neo.create({
+            module: Container,
+            style: {
+                overflow: 'auto',
+                maxHeight: '100%'
+            },
+            items : [{
+                html: '<h1>Configurable</h1>',
+                style: {textAlign: 'center'}
+            }, {
+                module    : Timer,
+                duration  : '20s',
+                flag      : 'timer-component',
+                dimensions: '8rem',
+            }]
+        });
+    }
+
+    /**
+     * @param {String} config
+     * @param {Object} opts
+     */
+    onConfigChange(config, opts) {
+        const timer = this.down({flag: 'timer-component'});
+
+        timer[config] = opts.value;
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/component/timer/MainContainerController.mjs

@@ -0,0 +1,95 @@
+import ComponentController from '../../../src/controller/Component.mjs';
+import Toast               from '../../../src/component/Toast.mjs';
+
+/**
+ * @class Neo.examples.component.toast.MainContainerController
+ * @extends Neo.controller.Component
+ */
+class MainContainerController extends ComponentController {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.component.toast.MainContainerController'
+         * @protected
+         */
+        className: 'Neo.examples.component.toast.MainContainerController'
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+        Neo.main.addon.HighlightJS.switchTheme('dark');
+    }
+
+    /**
+     * Whenever any field changes we update the output
+     * @param {Object} data
+     * @returns {Promise<void>}
+     */
+    async onChange(data) {
+        let me      = this,
+            form    = me.getReference('form'),
+            output  = me.getReference('output'),
+            button  = me.getReference('creation-button'),
+            oVdom   = output.vdom.cn[0].cn[0],
+            isValid = await form.isValid(),
+            values;
+
+        if (Neo.isBoolean(data.value)) {
+            me.getReference('closable').value = data.value;
+        }
+
+        values = await form.getValues();
+
+        values.appName = me.component.appName;
+        button.disabled = !isValid;
+
+        if (isValid) {
+            oVdom.cn = output.itemTpl(values);
+
+            output.update();
+
+            await Neo.timeout(20)
+            me.syntaxHighlight();
+        }
+    }
+
+    /**
+     * Cleanup the values and show the toast
+     */
+    async createToast() {
+        let me     = this,
+            form   = me.getReference('form'),
+            values = await form.getValues(),
+            clear  = ['position', 'slideDirection', 'ui', 'minHeight', 'maxWidth', 'closable', 'timeout'];
+
+        // use the defaults from toast if not set
+        clear.forEach(item => {
+            if (values[item] === null) {
+                delete values[item];
+            }
+        })
+
+        values.appName = me.component.appName;
+        Neo.toast(values);
+    }
+
+    /**
+     * 3rd party tool to highlight the code
+     */
+    syntaxHighlight() {
+        let me     = this,
+            output = me.getReference('output'),
+            oVdom  = output.vdom;
+
+        Neo.main.addon.HighlightJS.syntaxHighlight({
+            appName: me.component.appName,
+            vnodeId: oVdom.cn[0].id
+        });
+    }
+}
+
+Neo.applyClassConfig(MainContainerController);
+
+export default MainContainerController;

package/examples/component/timer/app.mjs

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

package/examples/component/timer/index.html

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

package/examples/component/timer/neo-config.json

@@ -0,0 +1,7 @@
+{
+    "appPath"         : "examples/component/timer/app.mjs",
+    "basePath"        : "../../../",
+    "environment"     : "development",
+    "mainPath"        : "./Main.mjs",
+    "mainThreadAddons": ["Stylesheet", "ScrollSync"]
+}

package/examples/component/video/MainContainer.mjs

@@ -0,0 +1,46 @@
+import Viewport  from '../../../src/container/Viewport.mjs';
+import Video     from '../../../src/component/Video.mjs';
+import Panel     from '../../../src/container/Panel.mjs';
+import MainContainerController from "./MainContainerController.mjs";
+
+/**
+ * @class Neo.examples.component.timer.MainContainer
+ * @extends Neo.examples.Viewport
+ */
+class MainContainer extends Viewport {
+    static config = {
+        className: 'Neo.examples.component.timer.MainContainer',
+
+        controller: MainContainerController,
+
+        items : [{
+            ntype: 'panel',
+            headers: [{
+                dock: 'top',
+                items: [{
+                    ntype: 'component',
+                    html : '<h1>Video Demo</h1>',
+                    flex : 'none',
+                    style: {textAlign: 'center'}
+                }, {
+                    ntype: 'component', flex: 1
+                }, {
+                    reference: 'theme-button',
+                    iconCls  : 'fa fa-sun',
+                    handler  : 'onToggleTheme',
+                    style    : {height: '100%',padding: '0 40px',borderWidth: 0,borderLeftWidth: '1px',borderRadius: 0}
+                }]
+            }],
+            items: [{
+                module   : Video,
+                url      : 'https://video-ssl.itunes.apple.com/itunes-assets/Video125/v4/a0/57/54/a0575426-dd8e-2d25-bdf3-139702870b50/mzvf_786190431362224858.640x464.h264lc.U.p.m4v',
+                flag     : 'video-component',
+                minHeight: 400,
+            }]
+        }]
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/component/video/MainContainerController.mjs

@@ -0,0 +1,37 @@
+import ComponentController from '../../../src/controller/Component.mjs';
+import Toast               from '../../../src/component/Toast.mjs';
+
+/**
+ * @class Neo.examples.component.toast.MainContainerController
+ * @extends Neo.controller.Component
+ */
+class MainContainerController extends ComponentController {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.component.toast.MainContainerController'
+         * @protected
+         */
+        className: 'Neo.examples.component.toast.MainContainerController'
+    }
+
+    theme = 'light';
+
+    /**
+     * @param {Object} config
+     */
+    onToggleTheme(config) {
+        const add = (this.theme === 'light') ? 'dark' : 'light',
+              remove = add === 'light' ? 'dark' : 'light',
+              themeButton = this.getReference('theme-button'),
+              buttonIcon = add === 'light' ? 'sun' : 'moon';
+
+        this.theme = add;
+
+        Neo.main.DomAccess.setBodyCls({remove: ['neo-theme-' + remove] , add: ['neo-theme-' + add]});
+        themeButton.iconCls = 'fa fa-' + buttonIcon;
+    }
+}
+
+Neo.applyClassConfig(MainContainerController);
+
+export default MainContainerController;

package/examples/component/video/app.mjs

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

package/examples/component/video/index.html

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

package/examples/component/video/neo-config.json

@@ -0,0 +1,7 @@
+{
+    "appPath"         : "examples/component/video/app.mjs",
+    "basePath"        : "../../../",
+    "environment"     : "development",
+    "mainPath"        : "./Main.mjs",
+    "mainThreadAddons": ["Stylesheet", "ScrollSync"]
+}

package/examples/layout/form/MainContainer.mjs

@@ -0,0 +1,131 @@
+import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import Form                  from '../../../src/form/Container.mjs';
+import Fieldset              from '../../../src/form/Fieldset.mjs';
+import TextField             from '../../../src/form/field/Text.mjs';
+import FormLayout            from '../../../src/layout/Form.mjs';
+
+/**
+ * @class Neo.examples.layout.form.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.layout.form.MainContainer',
+        autoMount           : true,
+        configItemLabelWidth: 160,
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }
+
+    createConfigurationComponents() {
+        let me = this;
+
+        return [{
+            ntype: 'component',
+            html : 'On the left you see' +
+                '<ul>Form > layout-form' +
+                '<li>textfield' +
+                '<li>textfield' +
+                '<li>Fieldset inside the form with another > layout-form' +
+                '<ul>' +
+                '<li>textfield' +
+                '<li>textfield' +
+                '</ul></ul>'
+        }, {
+            module   : TextField,
+            clearable: true,
+            labelText: 'gap (row column)',
+            listeners: {
+                change: {
+                    fn   : function (data) {
+                        const comp = this.exampleComponent;
+
+                        comp.layout.gap = data.value;
+                        comp.down('fieldset').layout.gap = data.value;
+                    },
+                    scope: this
+                }
+            },
+            value    : '0 .5rem'
+        }, {
+            module   : TextField,
+            clearable: true,
+            labelText: 'Textfield 01 Label',
+            listeners: {change: me.updateLabelFromTextField.bind(me, 1)},
+            value    : 'This is a wide label inside Form'
+        }, {
+            module   : TextField,
+            clearable: true,
+            labelText: 'Textfield 02 Label',
+            listeners: {change: me.updateLabelFromTextField.bind(me, 2)},
+            value    : 'Small label'
+        }, {
+            module   : TextField,
+            clearable: true,
+            labelText: 'Textfield 03 Label',
+            listeners: {change: me.updateLabelFromTextField.bind(me, 3)},
+            value    : 'I am inside a fieldset'
+        }, {
+            module   : TextField,
+            clearable: true,
+            labelText: 'Textfield 04 Label',
+            listeners: {change: me.updateLabelFromTextField.bind(me, 4)},
+            value    : 'Fieldset with layout-form'
+        }]
+    }
+
+    createExampleComponent() {
+        return Neo.create(Form, {
+            layout      : {
+                ntype: 'layout-form',
+                gap  : '0 .5rem'
+            },
+            itemDefaults: {
+                ntype    : 'textfield',
+                clearable: true,
+                value    : 'Layout Demo'
+            },
+            items       : [{
+                labelText: 'This is a wide Label inside Form',
+                name     : 1
+            }, {
+                labelText: 'Small Label',
+                name     : 2
+            }, {
+                module      : Fieldset,
+                title       : 'Fieldset with Layout',
+                layout      : {
+                    ntype: 'layout-form',
+                    gap  : '0 .5rem'
+                },
+                itemDefaults: {
+                    ntype    : 'textfield',
+                    clearable: true,
+                    value    : 'Layout Demo'
+                },
+                items       : [{
+                    labelText: 'I am inside a fieldset',
+                    name     : 3
+                }, {
+                    labelText: 'Fieldset with layout-form',
+                    name     : 4
+                }]
+            }]
+        })
+    }
+
+    /**
+     * Update the textfield labelText, based on index
+     * @param {Number} index
+     * @param {Object} data
+     */
+    updateLabelFromTextField(index, data) {
+        const comp      = this.exampleComponent,
+              textfield = comp.down({ntype: 'textfield', name: index});
+
+        textfield.labelText = data.value;
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/layout/form/app.mjs

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