neo.mjs 5.17.1 → 6.0.0

package/examples/component/statusbadge/MainContainer.mjs

@@ -1,9 +1,9 @@
-import CheckBox              from '../../../src/form/field/CheckBox.mjs';
+import CheckBox from '../../../src/form/field/CheckBox.mjs';
 import ConfigurationViewport from '../../ConfigurationViewport.mjs';
-import NumberField           from '../../../src/form/field/Number.mjs';
-import Radio                 from '../../../src/form/field/Radio.mjs';
-import StatusBadge           from '../../../src/component/StatusBadge.mjs';
-import TextField             from '../../../src/form/field/Text.mjs';
+import NumberField from '../../../src/form/field/Number.mjs';
+import Radio from '../../../src/form/field/Radio.mjs';
+import StatusBadge from '../../../src/component/StatusBadge.mjs';
+import TextField from '../../../src/form/field/Text.mjs';
 
 /**
  * @class Neo.examples.component.statusbadge.MainContainer
@@ -11,58 +11,173 @@ import TextField             from '../../../src/form/field/Text.mjs';
  */
 class MainContainer extends ConfigurationViewport {
     static config = {
-        className           : 'Neo.examples.component.statusbadge.MainContainer',
-        autoMount           : true,
+        className: 'Neo.examples.component.statusbadge.MainContainer',
+        autoMount: true,
         configItemLabelWidth: 110,
-        configItemWidth     : 230,
-        layout              : {ntype: 'hbox', align: 'stretch'}
+        configItemWidth: 230,
+        layout: { ntype: 'hbox', align: 'stretch' }
     }
 
     createConfigurationComponents() {
         let me = this;
 
         return [{
-            module   : CheckBox,
-            checked  : me.exampleComponent.closable,
+            module: CheckBox,
+            checked: me.exampleComponent.closable,
             labelText: 'closable',
-            listeners: {change: me.onConfigChange.bind(me, 'closable')}
-        }, {
-            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        : Radio,
-            checked       : me.exampleComponent.state === 'error',
+            listeners: { change: me.onConfigChange.bind(me, 'closable') }
+        }, {
+            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: 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
+        }, {
+            module: TextField,
+            labelText: 'label Alert',
+            listeners: { change: me.onConfigChange.bind(me, 'labelAlert') },
+            style: { marginTop: '20px' },
+            value: me.exampleComponent.labelAlert
+        }, {
+            module: TextField,
+            labelText: 'icon Alert',
+            listeners: { change: me.onConfigChange.bind(me, 'iconAlert') },
+            value: me.exampleComponent.iconAlert
+        }, {
+            module: TextField,
+            labelText: 'side-icon Alert',
+            listeners: { change: me.onConfigChange.bind(me, 'sideIconAlert') },
+            value: me.exampleComponent.sideIconAlert
+        }, {
+            module: TextField,
+            labelText: 'label Error',
+            listeners: { change: me.onConfigChange.bind(me, 'labelError') },
+            style: { marginTop: '10px' },
+            value: me.exampleComponent.labelError
+        }, {
+            module: TextField,
+            labelText: 'icon Error',
+            listeners: { change: me.onConfigChange.bind(me, 'iconError') },
+            value: me.exampleComponent.iconError
+        }, {
+            module: TextField,
+            labelText: 'side-icon Error',
+            listeners: { change: me.onConfigChange.bind(me, 'sideIconError') },
+            value: me.exampleComponent.sideIconError
+        },{
+            module: TextField,
+            labelText: 'label Info',
+            listeners: { change: me.onConfigChange.bind(me, 'labelInfo') },
+            style: { marginTop: '10px' },
+            value: me.exampleComponent.labelInfo
+        }, {
+            module: TextField,
+            labelText: 'icon Info',
+            listeners: { change: me.onConfigChange.bind(me, 'iconInfo') },
+            value: me.exampleComponent.iconInfo
+        }, {
+            module: TextField,
+            labelText: 'side-icon Info',
+            listeners: { change: me.onConfigChange.bind(me, 'sideIconInfo') },
+            value: me.exampleComponent.sideIconInfo 
+        }, {
+            module: TextField,
+            labelText: 'label Neutral',
+            listeners: { change: me.onConfigChange.bind(me, 'labelNeutral') },
+            style: { marginTop: '10px' },
+            value: me.exampleComponent.labelNeutral
+        }, {
+            module: TextField,
+            labelText: 'icon Neutral',
+            listeners: { change: me.onConfigChange.bind(me, 'iconNeutral') },
+            value: me.exampleComponent.iconNeutral
+        }, {
+            module: TextField,
+            labelText: 'side-icon Neutral',
+            listeners: { change: me.onConfigChange.bind(me, 'sideIconNeutral') },
+            value: me.exampleComponent.sideIconNeutral
+        }, {
+            module: TextField,
+            labelText: 'label Success',
+            listeners: { change: me.onConfigChange.bind(me, 'labelSuccess') },
+            style: { marginTop: '10px' },
+            value: me.exampleComponent.labelSuccess
+        }, {
+            module: TextField,
+            labelText: 'icon Success',
+            listeners: { change: me.onConfigChange.bind(me, 'iconSuccess') },
+            value: me.exampleComponent.iconSuccess
+        }, {
+            module: TextField,
+            labelText: 'side-icon Success',
+            listeners: { change: me.onConfigChange.bind(me, 'sideIconSuccess') },
+            value: me.exampleComponent.sideIconSuccess
+        }, {
+            module: CheckBox,
+            checked: me.exampleComponent.deactivateStateIcons,
+            labelText: 'deactivate State Icons',
+            style: { marginTop: '20px' },
+            listeners: { change: me.onConfigChange.bind(me, 'deactivateStateIcons') },
+        }, {
+            module: CheckBox,
+            checked: me.exampleComponent.deactivateSideIcons,
+            labelText: 'deactivate Side Icons',
+            listeners: { change: me.onConfigChange.bind(me, 'deactivateSideIcons') },
+        }, {
+            module: Radio,
+            checked: me.exampleComponent.state === 'alert',
             hideValueLabel: false,
-            labelText     : 'state',
-            listeners     : {change: me.onRadioChange.bind(me, 'state', 'error')},
-            name          : 'state',
-            style         : {marginTop: '10px'},
+            labelText: 'state',
+            listeners: { change: me.onRadioChange.bind(me, 'state', 'alert') },
+            name: 'state',
+            style: { marginTop: '20px' },
+            valueLabelText: 'alert'
+        }, {
+            module: Radio,
+            checked: me.exampleComponent.state === 'error',
+            hideValueLabel: false,
+            labelText: '',
+            listeners: { change: me.onRadioChange.bind(me, 'state', 'error') },
+            name: 'state',
             valueLabelText: 'error'
         }, {
-            module        : Radio,
-            checked       : me.exampleComponent.badgePosition === 'success',
+            module: Radio,
+            checked: me.exampleComponent.state === 'info',
             hideValueLabel: false,
-            labelText     : '',
-            listeners     : {change: me.onRadioChange.bind(me, 'state', 'success')},
-            name          : 'state',
-            valueLabelText: 'success'
+            labelText: '',
+            listeners: { change: me.onRadioChange.bind(me, 'state', 'info') },
+            name: 'state',
+            valueLabelText: 'info'
+        }, {
+            module: Radio,
+            checked: me.exampleComponent.state === 'neutral',
+            hideValueLabel: false,
+            labelText: '',
+            listeners: { change: me.onRadioChange.bind(me, 'state', 'neutral') },
+            name: 'state',
+            valueLabelText: 'neutral'
         }, {
-            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
+            module: Radio,
+            checked: me.exampleComponent.state === 'success',
+            hideValueLabel: false,
+            labelText: '',
+            listeners: { change: me.onRadioChange.bind(me, 'state', 'success') },
+            name: 'state',
+            valueLabelText: 'success'
         }]
     }
 
@@ -70,7 +185,7 @@ class MainContainer extends ConfigurationViewport {
         return Neo.create({
             module: StatusBadge,
             height: 30,
-            state : 'error'
+            state: 'info'
         })
     }
 }

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

@@ -9,11 +9,11 @@ app.use(cors());
 app.post('/file-upload-test', async (req, res) => {
 
     await new Promise(resolve => setTimeout(resolve, 3000));
-
+  
     res.set('Content-Type', 'application/json');
     res.send('{"success":true,"documentId":"1"}');
   })
-
+  
 app.post('/file-upload-test-fail', async (req, res) => {
     res.set('Content-Type', 'application/json');
     res.send('{"success":false,"message":"Something went wrong"}');
@@ -21,27 +21,37 @@ app.post('/file-upload-test-fail', async (req, res) => {
 
 app.get('/document-status', async(req, res) => {
     res.set('Content-Type', 'application/json');
-    res.send('{"status":"scanning"}');
+    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('');
 });
 
 app.get('/document-status-fail', async(req, res) => {
     res.set('Content-Type', 'application/json');
-    res.send('{"status":"scan-failed"}');
+    res.send('{"status":"MALWARE_DETECTED"}');
 });
 
 app.get('/document-status-downloadable', async(req, res) => {
     res.set('Content-Type', 'application/json');
-    res.send('{"status":"downloadable"}');
+    res.send('{"status":"DOWNLOADABLE","fileName":"testfile.pdf","size":9653413}');
 });
 
 app.get('/document-status-not-downloadable', async(req, res) => {
     res.set('Content-Type', 'application/json');
-    res.send('{"status":"not-downloadable"}');
+    res.send('{"status":"UN_DOWNLOADABLE","fileName":"testfile.pdf","size":9653413}');
+});
+
+app.get('/document-status-non-existent', async(req, res) => {
+    res.set('Content-Type', 'application/json');
+    res.send('{"status":"DELETED","fileName":"testfile.pdf","size":9653413}');
+});
+
+app.get('/document-status-fails', async(req, res) => {
+    res.status(500);
+    res.send('');
 });
 
 app.listen(port, () => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.17.1",
+    "version": "6.0.0",
     "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;