neo.mjs 5.10.13 → 5.11.0

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.0'
          */
-        version: '5.10.13'
+        version: '5.11.0'
     }
 
     /**

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.0'
          */
-        version: '5.10.13'
+        version: '5.11.0'
     }
 
     /**

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';
@@ -107,14 +108,26 @@ class MainContainer extends ConfigurationViewport {
             name          : 'dayNameFormat',
             valueLabelText: 'long'
         }, {
-            module    :  NumberField,
+            module          : DateField,
+            labelText       : 'maxValue',
+            listeners       : {change: me.onConfigChange.bind(me, 'maxValue')},
+            matchPickerWidth: false,
+            style           : {marginTop: '10px'},
+            value           : me.exampleComponent.maxValue
+        }, {
+            module          : DateField,
+            labelText       : 'minValue',
+            listeners       : {change: me.onConfigChange.bind(me, 'minValue')},
+            matchPickerWidth: false,
+            value           : me.exampleComponent.minValue
+        }, {
+            module    : NumberField,
             clearable : true,
             labelText : 'height',
             listeners : {change: me.onConfigChange.bind(me, 'height')},
             maxValue  : 800,
             minValue  : 230,
             stepSize  : 10,
-            style     : {marginTop: '10px'},
             value     : me.exampleComponent.height
         }, {
             module   : CheckBox,
@@ -176,7 +189,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/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'
+});

package/examples/layout/form/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 Form Layout</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/layout/form/neo-config.json

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

package/examples/table/container/MainContainer.mjs

@@ -2,6 +2,7 @@ import CellColumnModel       from '../../../src/selection/table/CellColumnModel.
 import CellColumnRowModel    from '../../../src/selection/table/CellColumnRowModel.mjs';
 import CellModel             from '../../../src/selection/table/CellModel.mjs';
 import CellRowModel          from '../../../src/selection/table/CellRowModel.mjs';
+import Checkbox              from '../../../src/form/field/CheckBox.mjs';
 import ConfigurationViewport from '../../ConfigurationViewport.mjs';
 import ColumnModel           from '../../../src/selection/table/ColumnModel.mjs';
 import MainStore             from './MainStore.mjs';
@@ -75,6 +76,11 @@ class MainContainer extends ConfigurationViewport {
             checked       : me.exampleComponent.selectionModel.ntype === 'selection-table-cellcolumnrowmodel',
             listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnRowModel)},
             valueLabelText: 'Cell & Column & Row'
+        }, {
+            module   : Checkbox,
+            labelText: 'sortable',
+            listeners: {change: me.onConfigChange.bind(me, 'sortable')},
+            value    : me.exampleComponent.sortable
         }];
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.10.13",
+    "version": "5.11.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -45,7 +45,7 @@
         "@material/mwc-button": "^0.27.0",
         "@material/mwc-textfield": "^0.27.0",
         "autoprefixer": "^10.4.14",
-        "chalk": "^5.2.0",
+        "chalk": "^5.3.0",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^11.0.0",
         "cssnano": "^6.0.1",
@@ -55,7 +55,7 @@
         "inquirer": "^9.2.7",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.5",
-        "postcss": "^8.4.24",
+        "postcss": "^8.4.25",
         "sass": "^1.63.6",
         "webpack": "^5.88.1",
         "webpack-cli": "^5.1.4",

package/resources/scss/src/component/Timer.scss

@@ -0,0 +1,115 @@
+//@property --neo-timer-current {
+//  syntax: '<number>';
+//  initial-value: 1000;
+//  inherits: true
+//}
+
+.neo-timer {
+    --neo-timer-current: '';
+    --neo-timer-full: '';
+
+    margin: 1rem auto;
+
+    .countdown {
+        display: grid;
+        width: v(timer-dimension);
+        height: v(timer-dimension);
+        container-type: size;
+    }
+
+    @keyframes t {
+        to {
+            --neo-timer-current: 0
+        }
+    }
+
+    svg {
+        grid-column: 1;
+        grid-row: 1
+    }
+
+    [r] {
+        fill: none;
+        stroke: silver;
+
+        + [r] {
+            --k: calc(var(--neo-timer-current) / var(--neo-timer-full));
+            transform: rotate(-90deg);
+            stroke-linecap: round;
+            stroke: color-mix(in hsl shorter hue, v(timer-color-start) calc(var(--k) * 300%), v(timer-color-end));
+            stroke-dasharray: var(--k) 1
+        }
+    }
+}
+
+.flip-card {
+    grid-column: 1;
+    grid-row: 1;
+
+    margin: 7cqh;
+    border-radius: 100%;
+    overflow: hidden;
+
+    background-color: transparent;
+    perspective: 1000px; /* Remove this if you don't want the 3D effect */
+
+    /* This container is needed to position the front and back side */
+    .flip-card-inner {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        transition: transform 0.8s;
+        transform-style: preserve-3d;
+
+        /* Position the front and back side */
+        .flip-card-front, .flip-card-back {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            -webkit-backface-visibility: hidden; /* Safari */
+            backface-visibility: hidden;
+        }
+
+        /* Style the front side (fallback if image is missing) */
+        .flip-card-front {
+            & > input {
+                background-color: v(container-background-color);
+                color: v(container-color);
+                margin-top: 25%;
+                height:41%;
+                width: 100%;
+                font: calc(v(timer-dimension) * 0.25)/2 ubuntu mono, consolas, monaco, monospace;
+                text-align: center;
+                border-width: 0 !important;
+
+                &:focus {
+                    outline: none;
+                }
+            }
+
+            & > button {
+                border: 0 none;
+                background-color: v(timer-button-color);
+                height: 35%;
+                width: 100%;
+                font-size: 15cqh;
+            }
+        }
+
+        /* Style the back side */
+        .flip-card-back {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font: calc(v(timer-dimension)*.25)/ 2 ubuntu mono, consolas, monaco, monospace;
+            // initial transformation
+            transform: rotateY(180deg);
+        }
+    }
+
+    /* Do an horizontal flip when you move the mouse over the flip box container */
+    &.turn .flip-card-inner {
+        transform: rotateY(180deg);
+    }
+}

package/resources/scss/src/layout/Form.scss

@@ -0,0 +1,27 @@
+.neo-layout-form {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  column-gap: 1rem;
+
+  & > .neo-layout-form-item {
+    grid-column: 1 / 3;
+
+    display: grid;
+    grid-template-columns: subgrid;
+
+    .neo-textfield-label {
+      grid-column: 1 / 2;
+      width: auto !important;
+    }
+
+    .neo-input-wrapper {
+      grid-column: 2 / 3;
+    }
+  }
+
+  // In case we have a fieldset inside the form
+  & > .neo-layout-form-subfieldset,
+  .legend {
+    grid-column: 1 / 3;
+  }
+}

package/resources/scss/theme-dark/component/Timer.scss

@@ -0,0 +1,14 @@
+$neoMap: map-merge($neoMap, (
+        'timer-color-start': #8a9b0f,
+        'timer-color-end': #940a3d,
+        'timer-dimension': '6rem'
+));
+
+@if $useCssVars == true {
+    :root .neo-theme-dark { // .neo-timer
+        --timer-color-start  : #{neo(timer-color-start)};
+        --timer-color-end    : #{neo(timer-color-end)};
+        --timer-dimension    : #{neo(timer-dimension)};
+        --timer-button-color : #{neo(container-color)};
+    }
+}

package/resources/scss/theme-light/component/Timer.scss

@@ -0,0 +1,15 @@
+$neoMap: map-merge($neoMap, (
+    'timer-color-start': #8a9b0f,
+    'timer-color-end': #940a3d,
+    'timer-dimension': '6rem',
+    'timer-button-color': #cde8e7
+));
+
+@if $useCssVars == true {
+    :root .neo-theme-light { // .neo-timer
+        --timer-color-start  : #{neo(timer-color-start)};
+        --timer-color-end    : #{neo(timer-color-end)};
+        --timer-dimension    : #{neo(timer-dimension)};
+        --timer-button-color : #{neo(timer-button-color)};
+    }
+}

package/src/DefaultConfig.mjs

@@ -236,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '5.10.13'
+     * @default '5.11.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.10.13'
+    version: '5.11.0'
 };
 
 Object.assign(DefaultConfig, {