neo.mjs 5.18.0 → 6.0.1

package/examples/fieldWithPrefix/MainContainer.mjs

@@ -0,0 +1,151 @@
+import ConfigurationViewport from '../ConfigurationViewport.mjs';
+
+import PrefixPlugin from '../../src/plugin/PrefixField.mjs';
+import SelectField  from '../../src/form/field/Select.mjs';
+import TextField    from '../../src/form/field/Text.mjs';
+
+/**
+ * @class Neo.examples.fieldWithPrefix.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.fieldWithPrefix.MainContainer',
+        autoMount           : true,
+        configItemLabelWidth: 100,
+        configItemWidth     : 230,
+        layout              : {ntype: 'hbox', align: 'stretch'},
+        cls                 : ['examples-container-accordion']
+    }
+
+    onPluginConfigChange(config, opts) {
+        const textfield = this.exampleComponent.items[0],
+              plugin    = textfield.getPlugin({flag: 'prefix'});
+
+        if (config === 'accept') {
+            plugin.accept = opts.record.value;
+        } else {
+            plugin[config] = opts.value;
+            textfield.value = '';
+        }
+    }
+
+    createConfigurationComponents() {
+        let me        = this,
+            textfield = me.exampleComponent.items[0],
+            plugin    = textfield.plugins[0];
+
+        return [{
+            module   : TextField,
+            clearable: true,
+            labelText: 'pattern',
+            listeners: {change: me.onPluginConfigChange.bind(me, 'pattern')},
+            value    : plugin.pattern,
+            style    : {marginTop: '10px'}
+        }, {
+            module   : TextField,
+            clearable: true,
+            labelText: 'slots',
+            listeners: {change: me.onPluginConfigChange.bind(me, 'slots')},
+            value    : '_',
+            style    : {marginTop: '10px'}
+        }, {
+            module: SelectField,
+            store : {
+                model: {fields: [{name: 'id'}, {name: 'name'}, {name: 'value'}]},
+                data : [
+                    {id: '0', name: 'empty=/\\d/', value: null},
+                    {id: '1', name: '[0-9]', value: '[0-9]'},
+                    {id: '2', name: '[A-H]', value: '[A-H]'},
+                    {id: '3', name: '/\\w/', value: /\w/},
+                    {id: '4', name: '/\\d/', value: /\d/},
+                    {id: '5', name: '[0-9a-f]', value: '[0-9a-f]'}
+                ]
+            },
+
+            value       : '4',
+            displayField: 'name',
+            valueField  : 'value',
+
+            clearable: true,
+            labelText: 'accept',
+            listeners: {change: me.onPluginConfigChange.bind(me, 'accept')},
+            style    : {marginTop: '10px'}
+        }];
+    }
+
+    /**
+     * @returns {*}
+     */
+    createExampleComponent() {
+        return Neo.ntype({
+            ntype : 'container',
+            width : 350,
+            cls   : ['example-fieldWithPrefix'],
+            layout: {ntype: 'vbox', align: 'stretch'},
+            items : [{
+                module   : TextField,
+                labelText: 'Phone Number',
+                plugins  : [
+                    {
+                        module : PrefixPlugin,
+                        flag   : 'prefix',
+                        pattern: '+1 (___) ___-___-____',
+                        slots  : '_'
+                    }
+                ]
+            }, {
+                module   : TextField,
+                labelText: '[0-9] Date',
+                plugins  : [
+                    {
+                        module : PrefixPlugin,
+                        flag   : 'prefix',
+                        pattern: 'dd/mm/yyyy hh:mm',
+                        slots  : 'dmyh'
+                    }
+                ]
+            }, {
+                module   : TextField,
+                labelText: '[A-H] MAC Adress',
+                plugins  : [
+                    {
+                        module : PrefixPlugin,
+                        flag   : 'prefix',
+                        pattern: 'XX:XX:XX:XX:XX:XX',
+                        slots  : 'X',
+                        accept : '[A-H]'
+                    }
+                ]
+            }, {
+                module   : TextField,
+                labelText: '/\\w/ Alphanumeric',
+                plugins  : [
+                    {
+                        module : PrefixPlugin,
+                        flag   : 'prefix',
+                        pattern: '__-__-__-____',
+                        slots  : '_',
+                        accept : /\w/
+                    }
+                ]
+            }, {
+                module   : TextField,
+                labelText: '/\\d/ Credit Card',
+                plugins  : [
+                    {
+                        module : PrefixPlugin,
+                        flag   : 'prefix',
+                        pattern: '.... .... .... ....',
+                        slots  : '.',
+                        accept : /\d/
+                    }
+                ]
+            }]
+        })
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/fieldWithPrefix/app.mjs

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

package/examples/fieldWithPrefix/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>Field with Prefix</title>
+</head>
+<body>
+    <script src="../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/fieldWithPrefix/neo-config.json

@@ -0,0 +1,7 @@
+{
+    "appPath"    : "examples/fieldWithPrefix/app.mjs",
+    "basePath"   : "../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-dark", "neo-theme-light"]
+}

package/examples/form/field/fileupload/MainContainer.mjs

@@ -105,7 +105,7 @@ class MainContainer extends ConfigurationViewport {
                     id       : 2,
                     fileName : 'test.pdf',
                     size     : 10664885,
-                    status   : 'UN_DOWNLOADABLE'
+                    status   : 'AVAILABLE'
                 },
                 uploadUrl         : 'http://127.0.0.1:3000/file-upload-test',
                 documentStatusUrl : 'http://127.0.0.1:3000/document-status-not-downloadable?documentId={documentId}',

package/examples/form/field/fileupload/server.mjs

@@ -24,7 +24,7 @@ app.get('/document-status', async(req, res) => {
     res.send('{"status":"SCANNING"}');
 });
 
-app.get('/document-delete', async(req, res) => {
+app.delete('/document-delete', async(req, res) => {
     res.set('Content-Type', 'application/json');
     res.send('');
 });
@@ -41,7 +41,7 @@ app.get('/document-status-downloadable', async(req, res) => {
 
 app.get('/document-status-not-downloadable', async(req, res) => {
     res.set('Content-Type', 'application/json');
-    res.send('{"status":"UN_DOWNLOADABLE","fileName":"testfile.pdf","size":9653413}');
+    res.send('{"status":"AVAILABLE","fileName":"testfile.pdf","size":9653413}');
 });
 
 app.get('/document-status-non-existent', async(req, res) => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.18.0",
+    "version": "6.0.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -56,7 +56,7 @@
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.28",
-        "sass": "^1.66.0",
+        "sass": "^1.66.1",
         "showdown": "^2.1.0",
         "webpack": "^5.88.2",
         "webpack-cli": "^5.1.4",

package/resources/scss/src/Global.scss

@@ -10,12 +10,12 @@ html, .neo-body-viewport {
 }
 
 .neo-body {
-    background-color: v(neo-background-color);
-    color           : v(neo-color);
-    font-family     : v(neo-font-family);
+    background-color: var(--neo-background-color);
+    color           : var(--neo-color);
+    font-family     : var(--neo-font-family);
     margin          : 0;
 
-    -webkit-font-smoothing: v(neo-font-smoothing);
+    -webkit-font-smoothing: var(--neo-font-smoothing);
 }
 
 .neo-body, .neo-body * {
@@ -23,7 +23,7 @@ html, .neo-body-viewport {
  }
 
 .neo-disabled {
-    opacity       : v(neo-disabled-opacity);
+    opacity       : var(--neo-disabled-opacity);
     pointer-events: none;
 }
 
@@ -32,10 +32,10 @@ html, .neo-body-viewport {
 }
 
 .neo-link-color {
-    color: v(neo-color);
+    color: var(--neo-color);
 
     a {
-        color: v(neo-color);
+        color: var(--neo-color);
     }
 }
 

package/resources/scss/src/apps/covid/HeaderContainer.scss

@@ -35,62 +35,62 @@
             }
 
             &.active {
-                background-color: v(covid-header-active-background-color);
+                background-color: var(--covid-header-active-background-color);
                 border-left     : 5px solid rgb(100, 181, 246);
 
                 &:after {
-                    background-color: v(covid-header-active-background-color);
+                    background-color: var(--covid-header-active-background-color);
                 }
 
                 &:before {
-                    border-bottom: 5px solid v(covid-header-active-background-color);
-                    border-right : 5px solid v(covid-header-active-background-color);
-                    border-color : v(covid-header-active-background-color) transparent transparent v(covid-header-active-background-color);
+                    border-bottom: 5px solid var(--covid-header-active-background-color);
+                    border-right : 5px solid var(--covid-header-active-background-color);
+                    border-color : var(--covid-header-active-background-color) transparent transparent var(--covid-header-active-background-color);
                 }
             }
 
             &.cases {
-                background-color: v(covid-header-cases-background-color);
+                background-color: var(--covid-header-cases-background-color);
                 border-left     : 5px solid rgb(187, 187, 187);
 
                 &:after {
-                    background-color: v(covid-header-cases-background-color);
+                    background-color: var(--covid-header-cases-background-color);
                 }
 
                 &:before {
-                    border-bottom: 5px solid v(covid-header-cases-background-color);
-                    border-right : 5px solid v(covid-header-cases-background-color);
-                    border-color : v(covid-header-cases-background-color) transparent transparent v(covid-header-cases-background-color);
+                    border-bottom: 5px solid var(--covid-header-cases-background-color);
+                    border-right : 5px solid var(--covid-header-cases-background-color);
+                    border-color : var(--covid-header-cases-background-color) transparent transparent var(--covid-header-cases-background-color);
                 }
             }
 
             &.deaths {
-                background-color: v(covid-header-deaths-background-color);
+                background-color: var(--covid-header-deaths-background-color);
                 border-left     : 5px solid rgb(251, 103, 103);
 
                 &:after {
-                    background-color: v(covid-header-deaths-background-color);
+                    background-color: var(--covid-header-deaths-background-color);
                 }
 
                 &:before {
-                    border-bottom: 5px solid v(covid-header-deaths-background-color);
-                    border-right : 5px solid v(covid-header-deaths-background-color);
-                    border-color : v(covid-header-deaths-background-color) transparent transparent v(covid-header-deaths-background-color);
+                    border-bottom: 5px solid var(--covid-header-deaths-background-color);
+                    border-right : 5px solid var(--covid-header-deaths-background-color);
+                    border-color : var(--covid-header-deaths-background-color) transparent transparent var(--covid-header-deaths-background-color);
                 }
             }
 
             &.recovered {
-                background-color: v(covid-header-recovered-background-color);
+                background-color: var(--covid-header-recovered-background-color);
                 border-left     : 5px solid rgb(40, 218, 111);
 
                 &:after {
-                    background-color: v(covid-header-recovered-background-color);
+                    background-color: var(--covid-header-recovered-background-color);
                 }
 
                 &:before {
-                    border-bottom: 5px solid v(covid-header-recovered-background-color);
-                    border-right : 5px solid v(covid-header-recovered-background-color);
-                    border-color : v(covid-header-recovered-background-color) transparent transparent v(covid-header-recovered-background-color);
+                    border-bottom: 5px solid var(--covid-header-recovered-background-color);
+                    border-right : 5px solid var(--covid-header-recovered-background-color);
+                    border-color : var(--covid-header-recovered-background-color) transparent transparent var(--covid-header-recovered-background-color);
                 }
             }
         }
@@ -100,20 +100,20 @@
             margin   : 5px 0;
 
             &.active {
-                color: v(covid-header-active-color);
+                color: var(--covid-header-active-color);
             }
 
             &.cases {
-                color: v(covid-header-cases-color);
+                color: var(--covid-header-cases-color);
             }
 
             &.deaths {
-                color: v(covid-header-deaths-color);
+                color: var(--covid-header-deaths-color);
             }
 
             &.recovered {
-                color: v(covid-header-recovered-color);
+                color: var(--covid-header-recovered-color);
             }
         }
     }
-}
+}

package/resources/scss/src/apps/covid/country/Gallery.scss

@@ -1,6 +1,6 @@
 .neo-gallery.covid-country-gallery {
-    background-color: v(covid-gallery-background-color);
-    border-color    : v(covid-gallery-border-color);
+    background-color: var(--covid-gallery-background-color);
+    border-color    : var(--covid-gallery-border-color);
     color           : #000;
     text-align      : left;
 
@@ -23,7 +23,7 @@
     }
 
     .neo-item-wrapper {
-        background-color   : v(covid-gallery-item-wrapper-background-color);
+        background-color   : var(--covid-gallery-item-wrapper-background-color);
         border-radius      : 10px;
         pointer-events     : none;
         transition-duration: .55s;
@@ -33,9 +33,9 @@
     .neo-country-gallery-item {
         background-color       : #fff;
         border-bottom          : 0;
-        border-color           : v(covid-gallery-item-border-color);
-        border-left-width      : v(covid-gallery-item-border-sides-width);
-        border-right-width     : v(covid-gallery-item-border-sides-width);
+        border-color           : var(--covid-gallery-item-border-color);
+        border-left-width      : var(--covid-gallery-item-border-sides-width);
+        border-right-width     : var(--covid-gallery-item-border-sides-width);
         border-style           : solid;
         border-top-left-radius : 10px;
         border-top-right-radius: 10px;

package/resources/scss/src/apps/covid/country/Helix.scss

@@ -1,6 +1,6 @@
 .neo-helix.covid-country-helix {
-    background-color: v(covid-helix-background-color);
-    border-color    : v(covid-helix-border-color);
+    background-color: var(--covid-helix-background-color);
+    border-color    : var(--covid-helix-border-color);
     color           : #000;
     text-align      : left;
 
@@ -37,19 +37,19 @@
     }
 
     .neo-helix-item {
-        background-color: v(covid-helix-item-wrapper-background-color);
+        background-color: var(--covid-helix-item-wrapper-background-color);
 
         &.neo-selected {
-            box-shadow: v(covid-helix-item-box-shadow-selected);
+            box-shadow: var(--covid-helix-item-box-shadow-selected);
         }
     }
 
     .neo-country-helix-item {
         background-color       : #fff;
         border-bottom          : 0;
-        border-color           : v(covid-helix-item-border-color);
-        border-left-width      : v(covid-helix-item-border-sides-width);
-        border-right-width     : v(covid-helix-item-border-sides-width);
+        border-color           : var(--covid-helix-item-border-color);
+        border-left-width      : var(--covid-helix-item-border-sides-width);
+        border-right-width     : var(--covid-helix-item-border-sides-width);
         border-style           : solid;
         border-top-left-radius : 10px;
         border-top-right-radius: 10px;
@@ -70,4 +70,4 @@
         height       : 280px;
         width        : 340px;
     }
-}
+}

package/resources/scss/src/apps/covid/country/LineChartComponent.scss

@@ -1,3 +1,3 @@
 .covid-line-chart {
-    background-color: v(covid-line-chart-background-color);
-}
+    background-color: var(--covid-line-chart-background-color);
+}

package/resources/scss/src/apps/docs/ContentTabContainer.scss

@@ -2,7 +2,7 @@
     overflow: hidden;
 
     .docs-tab-header-toolbar {
-        background-color: v(docs-content-tabcontainer-tab-header-toolbar-background-color);
+        background-color: var(--docs-content-tabcontainer-tab-header-toolbar-background-color);
 
         .neo-button-glyph {
             pointer-events: all;
@@ -10,7 +10,7 @@
             width         : 16px;
 
             &:hover {
-                color : v(docs-content-tabcontainer-tab-header-toolbar-glyph-color-hover);
+                color : var(--docs-content-tabcontainer-tab-header-toolbar-glyph-color-hover);
                 cursor: pointer;
 
                 &::before {
@@ -23,4 +23,4 @@
     .neo-docs-tab-content-container {
         border: 0;
     }
-}
+}

package/resources/scss/src/apps/docs/HeaderContainer.scss

@@ -1,13 +1,13 @@
 .neo-docs-header-container {
-    background-color: v(docs-header-container-background-color);
-    background-image: v(docs-header-container-background-image);
+    background-color: var(--docs-header-container-background-color);
+    background-image: var(--docs-header-container-background-image);
 
     .neo-logo-text {
-        background-clip : v(docs-header-container-logo-text-background-clip);
-        color           : v(docs-header-container-logo-text-color);
-        font-size       : v(docs-header-container-logo-text-font-size);
-        font-weight     : v(docs-header-container-logo-text-font-weight);
-        padding         : v(docs-header-container-logo-padding);
-        text-shadow     : v(docs-header-container-logo-text-shadow);
+        background-clip : var(--docs-header-container-logo-text-background-clip);
+        color           : var(--docs-header-container-logo-text-color);
+        font-size       : var(--docs-header-container-logo-text-font-size);
+        font-weight     : var(--docs-header-container-logo-text-font-weight);
+        padding         : var(--docs-header-container-logo-padding);
+        text-shadow     : var(--docs-header-container-logo-text-shadow);
     }
 }

package/resources/scss/src/apps/docs/MainContainer.scss

@@ -1,6 +1,6 @@
 .neo-docs-maincontainer {
     .neo-docs-navigation-tab-container {
-        background-color: v(docs-navigation-tab-container-background-color);
+        background-color: var(--docs-navigation-tab-container-background-color);
 
         .neo-tab-content-container {
             border-right: none;

package/resources/scss/src/apps/docs/classdetails/HeaderComponent.scss

@@ -4,7 +4,7 @@
 }
 
 .neo-docs-classdetails-headercomponent {
-    background-color: v(docs-classdetails-headercomponent-background-color);
+    background-color: var(--docs-classdetails-headercomponent-background-color);
     overflow-y      : auto;
     padding         : 15px;
 

package/resources/scss/src/apps/docs/classdetails/MembersList.scss

@@ -1,5 +1,5 @@
 .docs-classhierarchy-memberslist {
-    background-color: v(docs-classhierarchy-memberslist-background-color);
+    background-color: var(--docs-classhierarchy-memberslist-background-color);
     overflow        : auto;
 
     .docs-param-table {
@@ -12,16 +12,16 @@
         width          : 100%;
 
         thead {
-            background-color: v(docs-param-table-thead-background-color);
-            background-image: v(docs-param-table-thead-background-image);
+            background-color: var(--docs-param-table-thead-background-color);
+            background-image: var(--docs-param-table-thead-background-image);
         }
 
         thead tr {
-            background-clip: v(docs-param-table-tr-background-clip);
+            background-clip: var(--docs-param-table-tr-background-clip);
             border-bottom  : 1px solid #282b2b;
-            color          : v(docs-param-table-tr-color);
+            color          : var(--docs-param-table-tr-color);
             font-weight    : 800;
-            text-shadow    : v(docs-param-table-tr-text-shadow);
+            text-shadow    : var(--docs-param-table-tr-text-shadow);
         }
 
         td, th {
@@ -37,9 +37,9 @@
     }
 
     .neo-docs-memberlist-group-header {
-        background-color: v(docs-memberlist-group-header-background-color);
+        background-color: var(--docs-memberlist-group-header-background-color);
         box-shadow      : 0 5px 10px rgba(0,0,0,.4);
-        color           : v(docs-memberlist-group-header-color);
+        color           : var(--docs-memberlist-group-header-color);
         margin          : 5px;
         padding         : 10px;
         position        : sticky;
@@ -47,8 +47,8 @@
     }
 
     .neo-list-item {
-        background-color: v(docs-param-table-list-item-background-color);
-        background-image: v(docs-param-table-list-item-background-image);
+        background-color: var(--docs-param-table-list-item-background-color);
+        background-image: var(--docs-param-table-list-item-background-image);
         font-size       : 14px;
         margin          : 5px;
         padding         : 10px;
@@ -58,23 +58,23 @@
         }
 
         .neo-list-item-header {
-            background-clip: v(docs-param-table-list-item-header-background-clip);
+            background-clip: var(--docs-param-table-list-item-header-background-clip);
             color          : rgba(0,0,0,0.6);
             font-size      : 20px;
             font-weight    : 800;
-            text-shadow    : v(docs-param-table-list-item-header-text-shadow);
+            text-shadow    : var(--docs-param-table-list-item-header-text-shadow);
 
             .neo-highlight-search {
-                color: v(docs-param-table-list-item-highlight-search-color);
+                color: var(--docs-param-table-list-item-highlight-search-color);
             }
         }
 
         .neo-docs-view-source-link {
-            color          : v(docs-param-table-source-link-color);
+            color          : var(--docs-param-table-source-link-color);
             text-decoration: none;
 
             &:hover {
-                color: v(docs-param-table-source-link-color-hover);
+                color: var(--docs-param-table-source-link-color-hover);
             }
         }
 
@@ -82,4 +82,4 @@
             margin-bottom: 10px;
         }
     }
-}
+}

package/resources/scss/src/apps/docs/classdetails/TutorialComponent.scss

@@ -3,9 +3,9 @@
     padding: 10px;
 
     .neo-header-text-container {
-        background-color: v(docs-classdetails-tutorialcomponent-background-color);
+        background-color: var(--docs-classdetails-tutorialcomponent-background-color);
         box-shadow      : 0 5px 10px rgba(0,0,0,.4);
-        color           : v(docs-classdetails-tutorialcomponent-color);
+        color           : var(--docs-classdetails-tutorialcomponent-color);
         padding-left    : 10px;
         position        : sticky;
         top             : -10px;
@@ -31,4 +31,4 @@
     hr {
         border-style: groove;
     }
-}
+}