npm - neo.mjs - Versions diffs - 5.10.4 → 5.10.6 - Mend

neo.mjs 5.10.4 → 5.10.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/apps/ServiceWorker.mjs +2 -2
package/examples/ServiceWorker.mjs +2 -2
package/examples/component/progress/MainContainer.mjs +71 -0
package/examples/component/progress/app.mjs +6 -0
package/examples/component/progress/index.html +11 -0
package/examples/component/progress/neo-config.json +6 -0
package/package.json +7 -7
package/resources/scss/src/component/Progress.scss +3 -0
package/resources/scss/src/container/Dialog.scss +11 -1
package/resources/scss/theme-dark/component/Progress.scss +9 -0
package/resources/scss/theme-light/component/Progress.scss +9 -0
package/src/DefaultConfig.mjs +2 -2
package/src/component/Progress.mjs +113 -0
package/src/container/Dialog.mjs +37 -54
package/src/form/field/TextArea.mjs +3 -2
package/src/main/DomEvents.mjs +2 -1
package/src/util/String.mjs +56 -0

package/apps/ServiceWorker.mjs CHANGED Viewed

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

package/examples/ServiceWorker.mjs CHANGED Viewed

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

package/examples/component/progress/MainContainer.mjs ADDED Viewed

@@ -0,0 +1,71 @@
+import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import NumberField           from '../../../src/form/field/Number.mjs';
+import Progress              from '../../../src/component/Progress.mjs';
+import TextField             from '../../../src/form/field/Text.mjs';
+/**
+ * @class Neo.examples.component.progress.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.component.progress.MainContainer',
+        autoMount           : true,
+        configItemLabelWidth: 110,
+        configItemWidth     : 230,
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }
+    createConfigurationComponents() {
+        let me = this;
+        return [{
+            module    :  NumberField,
+            clearable : true,
+            labelText : 'height',
+            listeners : {change: me.onConfigChange.bind(me, 'height')},
+            maxValue  : 100,
+            minValue  : 20,
+            stepSize  : 2,
+            style     : {marginTop: '10px'},
+            value     : me.exampleComponent.height
+        }, {
+            module    :  TextField,
+            clearable : true,
+            labelText : 'labelText',
+            listeners : {change: me.onConfigChange.bind(me, 'labelText')},
+            style     : {marginTop: '10px'},
+            value     : me.exampleComponent.labelText
+        }, {
+            module    :  NumberField,
+            clearable : true,
+            labelText : 'width',
+            listeners : {change: me.onConfigChange.bind(me, 'width')},
+            maxValue  : 300,
+            minValue  : 100,
+            stepSize  : 5,
+            value     : me.exampleComponent.width
+        }, {
+            module    :  NumberField,
+            clearable : true,
+            labelText : 'value',
+            listeners : {change: me.onConfigChange.bind(me, 'value')},
+            maxValue  : 100,
+            minValue  : 0,
+            value     : me.exampleComponent.value
+        }];
+    }
+    createExampleComponent() {
+        return Neo.create({
+            module   : Progress,
+            height   : 30,
+            labelText: 'Hello World',
+            value    : 40
+        });
+    }
+}
+Neo.applyClassConfig(MainContainer);
+export default MainContainer;

package/examples/component/progress/app.mjs ADDED Viewed

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

package/examples/component/progress/index.html ADDED Viewed

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

package/examples/component/progress/neo-config.json ADDED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.10.4",
+    "version": "5.10.6",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -52,14 +52,14 @@
         "envinfo": "^7.8.1",
         "fs-extra": "^11.1.1",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.2.6",
+        "inquirer": "^9.2.7",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.5",
-        "postcss": "^8.4.23",
-        "sass": "^1.62.1",
-        "webpack": "^5.84.1",
-        "webpack-cli": "^5.1.1",
-        "webpack-dev-server": "4.15.0",
+        "postcss": "^8.4.24",
+        "sass": "1.62.1",
+        "webpack": "^5.86.0",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "4.15.1",
         "webpack-hook-plugin": "^1.0.7",
         "webpack-node-externals": "^3.0.0"
     },

package/resources/scss/src/component/Progress.scss ADDED Viewed

@@ -0,0 +1,3 @@
+.neo-progress {
+    color: v(progress-label-color);
+}

package/resources/scss/src/container/Dialog.scss CHANGED Viewed

@@ -6,7 +6,17 @@
         display: none;
     }
-    > div {
+    .neo-header-toolbar {
+        padding: 1em;
+        align-items: baseline;
+        .neo-dialog-header-icon {
+            font-size: 16px;
+            margin-right: .25em;
+        }
+    }
+    .neo-dialog-content {
         padding: 1em;
     }
 }

package/resources/scss/theme-dark/component/Progress.scss ADDED Viewed

@@ -0,0 +1,9 @@
+$neoMap: map-merge($neoMap, (
+    'progress-label-color': #fff
+));
+@if $useCssVars == true {
+    :root .neo-theme-dark {
+        --progress-label-color: #{neo(progress-label-color)};
+    }
+}

package/resources/scss/theme-light/component/Progress.scss ADDED Viewed

@@ -0,0 +1,9 @@
+$neoMap: map-merge($neoMap, (
+    'progress-label-color': #000
+));
+@if $useCssVars == true {
+    :root .neo-theme-light {
+        --progress-label-color: #{neo(progress-label-color)};
+    }
+}

package/src/DefaultConfig.mjs CHANGED Viewed

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

package/src/component/Progress.mjs ADDED Viewed

@@ -0,0 +1,113 @@
+import Base from '../component/Base.mjs';
+/**
+ * @class Neo.component.Progress
+ * @extends Neo.component.Base
+ */
+class Progress extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.component.Progress'
+         * @protected
+         */
+        className: 'Neo.component.Progress',
+        /**
+         * @member {String} ntype='progress'
+         * @protected
+         */
+        ntype: 'progress',
+        /**
+         * @member {String[]} baseCls=['neo-progress-label']
+         * @protected
+         */
+        baseCls: ['neo-progress'],
+        /**
+         * @member {String|null} labelText_=null
+         */
+        labelText_: null,
+        /**
+         * @member {Number} max_=100
+         */
+        max_: 100,
+        /**
+         * @member {Number|null} value_=null
+         */
+        value_: null,
+        /**
+         * @member {Object} _vdom
+         */
+        _vdom:
+        {tag: 'div', cls: ['neo-progress'], cn: [
+            {tag: 'label'},
+            {tag: 'progress'}
+        ]}
+    }
+    /**
+     * Triggered after the id config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetId(value, oldValue) {
+        super.afterSetId(value, oldValue);
+        this.vdom.cn[0].for = value;
+        this.update()
+    }
+    /**
+     * Triggered after the labelText config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetLabelText(value, oldValue) {
+        this.vdom.cn[0].html = value;
+        this.update()
+    }
+    /**
+     * Triggered after the max config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetMax(value, oldValue) {
+        this.vdom.cn[1].max = value;
+        this.update()
+    }
+    /**
+     * Triggered after the value config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetValue(value, oldValue) {
+        this.vdom.cn[1].value = value;
+        this.update()
+    }
+    /**
+     * Specify a different vdom root if needed to apply the top level style attributes on a different level.
+     * Make sure to use getVnodeRoot() as well, to keep the vdom & vnode trees in sync.
+     * @returns {Object} The new vdom root
+     */
+    getVdomRoot() {
+        return this.vdom.cn[1]
+    }
+    /**
+     * Specify a different vnode root if needed to apply the top level style attributes on a different level.
+     * Make sure to use getVdomRoot() as well, to keep the vdom & vnode trees in sync.
+     * @returns {Object} The new vnode root
+     */
+    getVnodeRoot() {
+        return this.vnode.childNodes[1]
+    }
+}
+Neo.applyClassConfig(Progress);
+export default Progress;

package/src/container/Dialog.mjs CHANGED Viewed

@@ -21,9 +21,17 @@ class Dialog extends Base {
          */
         ntype: 'container-dialog',
         /**
-        * @member {String[]} baseCls=['container-dialog']
-        * @protected
-        */
+         * @member {Boolean} autoMount=true
+         */
+        autoMount: true,
+        /**
+         * @member {Boolean} autoRender=true
+         */
+        autoRender: true,
+        /**
+         * @member {String[]} baseCls=['neo-container-dialog', 'neo-panel', 'neo-container']
+         * @protected
+         */
         baseCls: ['neo-container-dialog', 'neo-panel', 'neo-container'],
         /**
          * @member {Object} headerConfig=null
@@ -34,10 +42,16 @@ class Dialog extends Base {
          */
         headerToolbar: null,
         /**
-         * The CSS class to use for an icon, e.g. 'fa fa-home'
-         * @member {String|null} [iconCls_=null]
+         * The CSS class to use for an icon, e.g. ['fa', 'fa-home']
+         * @member {String[]} [iconCls_=null]
          */
         iconCls_: null,
+        /**
+         * @member {Object} itemDefaults
+         */
+        itemDefaults: {
+            baseCls: ['neo-dialog-content']
+        },
         /**
          * @member {Object[]} items
          */
@@ -68,11 +82,9 @@ class Dialog extends Base {
      * @protected
      */
     afterSetIconCls(value, oldValue) {
-        console.log(value, oldValue)
         if (!this.headers) { return }
-        let iconNode = this.headers.down({flag: 'dialog-header-icon'});
-        let iconNodeCls = [...iconNode.cls];
+        let iconNode    = this.headers.down({flag: 'dialog-header-icon'}),
+            iconNodeCls = [...iconNode.cls];
         NeoArray.remove(iconNodeCls, oldValue);
         NeoArray.add(   iconNodeCls, value);
@@ -90,41 +102,11 @@ class Dialog extends Base {
      * @protected
      */
     afterSetTitle(value, oldValue) {
-        this.headerToolbar?.set({
-            title: value
+        this.headerToolbar?.down({flag: 'panel-header-title'}).set({
+            text: value
         });
     }
-    /**
-     * Converts the iconCls array into a string on beforeGet
-     * @returns {String}
-     * @protected
-     */
-    beforeGetIconCls() {
-        let iconCls = this._iconCls;
-        if (Array.isArray(iconCls)) {
-            return iconCls.join(' ');
-        }
-        return iconCls;
-    }
-    /**
-     * Triggered before the iconCls config gets changed. Converts the string into an array if needed.
-     * @param {Array|String|null} value
-     * @param {Array|String|null} oldValue
-     * @returns {Array}
-     * @protected
-     */
-    beforeSetIconCls(value, oldValue) {
-        if (value && !Array.isArray(value)) {
-            value = value.split(' ').filter(Boolean);
-        }
-        return value;
-    }
     /**
      * close the dialog in main thread
      */
@@ -141,15 +123,15 @@ class Dialog extends Base {
      * @protected
      */
     createHeader() {
-        let me      = this,
-            cls     = ['neo-header-toolbar', 'neo-toolbar'],
-            headers = me.headers || [],
+        let me               = this,
+            cls              = ['neo-header-toolbar', 'neo-toolbar'],
+            headers          = me.headers || [],
             headerConfigCopy = {...me.headerConfig};
         delete headerConfigCopy.items;
         me.headerToolbar = Neo.create({
             module   : HeaderToolbar,
-            actions: [{action: 'close', iconCls: 'fa-solid fa-xmark'}],
+            actions  : [{action: 'close', iconCls: 'fa-solid fa-xmark'}],
             appName  : me.appName,
             cls,
             dock     : 'top',
@@ -157,15 +139,16 @@ class Dialog extends Base {
             id       : me.getHeaderToolbarId(),
             listeners: {headerAction: me.executeHeaderAction, scope: me},
             items    : [{
-                cls: me.iconCls,
-                flag     : 'dialog-header-icon',
+                ntype: '',
+                cls  : ['neo-dialog-header-icon', ...me.iconCls],
+                flag : 'dialog-header-icon',
             }, {
-                ntype    : 'label',
-                cls      : ['neo-panel-header-text', 'neo-label'],
-                flag     : 'title-label',
-                removeDom: !me.title,
-                text     : me.title
-            }, ...me.headerConfig.items],
+                ntype : 'label',
+                cls   : ['neo-panel-header-text', 'neo-label'],
+                flag  : 'panel-header-title',
+                hidden: !me.title,
+                text  : me.title
+            }, ...me.headerConfig.items || []],
             ...headerConfigCopy
         });
@@ -182,7 +165,7 @@ class Dialog extends Base {
         let me = this,
         map = {
-            close   : me.close
+            close: me.close
         };
         map[data.action]?.call(me, data);

package/src/form/field/TextArea.mjs CHANGED Viewed

@@ -1,4 +1,5 @@
-import Text from './Text.mjs';
+import StringUtil from '../../util/String.mjs';
+import Text       from './Text.mjs';
 /**
  *
@@ -121,7 +122,7 @@ class TextArea extends Text {
         let inputEl = this.getInputEl();
         if (inputEl) {
-            inputEl.html = value;
+            inputEl.html = StringUtil.escapeHtml(value);
         }
         super.afterSetValue(value, oldValue);

package/src/main/DomEvents.mjs CHANGED Viewed

@@ -1,5 +1,6 @@
 import Base           from '../core/Base.mjs';
 import Observable     from '../core/Observable.mjs';
+import StringUtil     from '../util/String.mjs';
 import TouchDomEvents from './mixin/TouchDomEvents.mjs';
 const globalDomEvents = [
@@ -415,7 +416,7 @@ class DomEvents extends Base {
         data = {
             ...this.getEventData(event),
             valid: target.checkValidity(),
-            value: target.value
+            value: (target.tagName === 'INPUT') ? StringUtil.escapeHtml(target.value) : target.value
         };
         // input and change events can pass a FileList for input type file

package/src/util/String.mjs ADDED Viewed

@@ -0,0 +1,56 @@
+import Base from '../core/Base.mjs';
+/**
+ * @class Neo.util.StringUtil
+ * @extends Neo.core.Base
+ */
+class StringUtil extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.util.StringUtil'
+         * @protected
+         */
+        className: 'Neo.util.StringUtil'
+    }
+     static escapedChars = {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        '\'': '&#039;'
+     }
+    /**
+     * Escape HTML special characters
+     * @param {String} value
+     */
+    static escapeHtml(value) {
+        if (Neo.typeOf(value) !== 'String') {
+            return value;
+        }
+        return value.replace(/[&<>"']/g, (char) => this.escapedChars[char] || char);
+    }
+    /**
+     * Unescape HTML special characters
+     * @param {String} value
+     */
+    static unescapeHtml(value) {
+        if (Neo.typeOf(value) !== 'String') {
+            return value;
+        }
+        return value.replace(/(&amp;)|(&lt;)|(&gt;)|(&quot;)|(&#039;)/g, (entity) => this.getKeyByValue(entity) || entity);
+    }
+    static getKeyByValue(value) {
+        return Object.keys(this.escapedChars).find(key => this.escapedChars[key] === value);
+      }
+}
+Neo.applyClassConfig(StringUtil);
+export default StringUtil;