neo.mjs 6.0.0 → 6.0.2

package/apps/ServiceWorker.mjs

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

package/apps/covid/view/MainContainerController.mjs

@@ -390,31 +390,18 @@ class MainContainerController extends ComponentController {
         logo.vdom.src = logoPath + (theme === 'neo-theme-dark' ? 'covid_logo_dark.jpg' : 'covid_logo_light.jpg');
         logo.update();
 
+        cls = [...component.cls];
 
-        if (Neo.config.useCssVars) {
-            cls = [...component.cls];
-
-            component.cls.forEach(item => {
-                if (item.includes('neo-theme')) {
-                    NeoArray.remove(cls, item);
-                }
-            });
+        component.cls.forEach(item => {
+            if (item.includes('neo-theme')) {
+                NeoArray.remove(cls, item);
+            }
+        });
 
-            NeoArray.add(cls, theme);
-            component.cls = cls;
+        NeoArray.add(cls, theme);
+        component.cls = cls;
 
-            button.set({
-                iconCls,
-                text: buttonText
-            });
-        } else {
-            Neo.main.addon.Stylesheet.swapStyleSheet({
-                href: href,
-                id  : 'neo-theme'
-            }).then(data => {
-                button.text = buttonText;
-            });
-        }
+        button.set({iconCls, text: buttonText});
 
         if (mapView) {
             mapView.mapboxStyle = mapViewStyle;

package/apps/sharedcovid/view/MainContainerController.mjs

@@ -580,42 +580,23 @@ class MainContainerController extends ComponentController {
         logo.vdom.src = logoPath + (theme === 'neo-theme-dark' ? 'covid_logo_dark.jpg' : 'covid_logo_light.jpg');
         logo.update();
 
+        [component.appName, ...me.connectedApps].forEach(appName => {
+            component = me.getMainView(appName);
 
-        if (Neo.config.useCssVars) {
-            [component.appName, ...me.connectedApps].forEach(appName => {
-                component = me.getMainView(appName);
+            cls = [...component.cls];
 
-                cls = [...component.cls];
-
-                component.cls.forEach(item => {
-                    if (item.includes('neo-theme')) {
-                        NeoArray.remove(cls, item);
-                    }
-                });
-
-                NeoArray.add(cls, theme);
-                component.cls = cls;
-            });
-
-            button.set({
-                iconCls,
-                text: buttonText
-            });
-        } else {
-            [component.appName, ...me.connectedApps].forEach(appName => {
-                Neo.main.addon.Stylesheet.swapStyleSheet({
-                    appName,
-                    href,
-                    id: 'neo-theme'
-                });
+            component.cls.forEach(item => {
+                if (item.includes('neo-theme')) {
+                    NeoArray.remove(cls, item)
+                }
             });
-        }
 
-        button.set({
-            iconCls,
-            text: buttonText
+            NeoArray.add(cls, theme);
+            component.cls = cls;
         });
 
+        button.set({iconCls, text: buttonText});
+
         if (mapView) {
             mapView.mapboxStyle = mapViewStyle;
         } else {

package/docs/app/view/MainContainerController.mjs

@@ -192,20 +192,18 @@ class MainContainerController extends Component {
             theme      = 'neo-theme-dark';
         }
 
-        if (Neo.config.useCssVars) {
-            cls = [...view.cls];
+        cls = [...view.cls];
 
-            view.cls.forEach((item, index) => {
-                if (item.includes('neo-theme')) {
-                    NeoArray.remove(cls, item);
-                }
-            });
+        view.cls.forEach(item => {
+            if (item.includes('neo-theme')) {
+                NeoArray.remove(cls, item)
+            }
+        });
 
-            NeoArray.add(cls, theme);
-            view.cls = cls;
+        NeoArray.add(cls, theme);
+        view.cls = cls;
 
-            button.text = buttonText;
-        }
+        button.text = buttonText
     }
 
     /**

package/examples/ServiceWorker.mjs

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

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

@@ -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": "6.0.0",
+    "version": "6.0.2",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/examples/fieldWithPrefix/MainContainer.scss

@@ -0,0 +1,25 @@
+.example-fieldWithPrefix {
+  .neo-prefixfield {
+    .neo-input-wrapper {
+      position: relative;
+      overflow: visible;
+
+      &::before {
+        position: absolute;
+        content: "";
+        width: 8px;
+        height: 8px;
+        background-color: indianred;
+        border-radius: 50%;
+        top: 2px;
+        left: -12px;
+      }
+    }
+
+    &.neo-focus {
+      .neo-input-wrapper::before {
+        background-color: darkseagreen;
+      }
+    }
+  }
+}

package/resources/scss/src/form/field/FileUpload.scss

@@ -15,7 +15,7 @@
     position      : relative;
     display       : flex;
     align-items   : center;
-    padding       : 0.5rem;
+    padding       : 0.4rem;
     gap           : 0.5rem;
     border        : 1px solid var(--fileuploadfield-border-color);
     border-radius : 2px;
@@ -73,6 +73,19 @@
         }
     }
 
+    .neo-file-upload-label {
+        position         : absolute;
+        top              : 0;
+        left             : 0;
+        right            : 0;
+        bottom           : 0;
+        display          : flex;
+        align-items      : center;
+        justify-content  : center;
+        background-color : var(--fileuploadfield-background-color);
+        cursor           : pointer;
+    }
+
     .neo-file-upload-filename {
         font-weight   : bold;
     }
@@ -82,11 +95,12 @@
         overflow      : hidden;
         text-overflow : ellipsis;
         color         : inherit; // For when it becomes a link
+        flex          : 0 0 1.2rem;
     }
 
-    // The file input is only visible in the ready state
+    // The file input and label is only visible in the ready state
     &:not(.neo-file-upload-state-ready) {
-        input[type="file"] {
+        input[type="file"],label {
             display : none;
         }
     }
@@ -217,9 +231,9 @@
 }
 
 .neo-file-upload-state-ready {
-    // Only the input field is visible when in ready state
+    // Only the input field and its label is visible when in ready state
     // It takes up the whole component, and is the only interactive item
-    :not(input[type="file"]) {
+    :not(input[type="file"],label) {
         display : none;
     }
     input::file-selector-button {
@@ -232,7 +246,6 @@
         bottom           : 0;
         background-color : var(--fileuploadfield-background-color);
         color            : var(--fileuploadfield-color);
-        cursor           : pointer;
     }
 }
 
@@ -240,10 +253,10 @@
     flex        : 1 1 0%;
     display     : flex;
     flex-flow   : column nowrap;
-    line-height : 1;
     gap         : 0.2rem;
     overflow    : hidden;
-    align-items : flex-start;}
+    align-items : flex-start;
+}
 
 .neo-file-upload-error-message {
     display            : none;

package/resources/scss/src/plugin/PrefixField.scss

@@ -0,0 +1,5 @@
+.neo-prefixfield {
+  input.neo-prefixfield-input {
+    font-family: 'Andalé Mono', Lucida, Monaco, Courier Menlo, 'Courier New', Courier, monospace;
+  }
+}

package/src/DefaultConfig.mjs

@@ -153,7 +153,6 @@ const DefaultConfig = {
     renderCountDeltas: false,
     /**
      * Add themes you want to use here. The first theme will get applied.
-     * If config.useCssVars === true, other theme variables will get included as well
      * @default ['neo-theme-light', 'neo-theme-dark']
      * @memberOf! module:Neo
      * @name config.themes
@@ -168,14 +167,6 @@ const DefaultConfig = {
      * @type Boolean
      */
     unitTestMode: false,
-    /**
-     * Flag if CSS variable based stylesheets are in use (important for switching themes)
-     * @default true
-     * @memberOf! module:Neo
-     * @name config.useCssVars
-     * @type Boolean
-     */
-    useCssVars: true,
     /**
      * Experimental flag if an offscreen canvas worker should get created.
      * @default false
@@ -245,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.0.0'
+     * @default '6.0.2'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.0.0'
+    version: '6.0.2'
 };
 
 Object.assign(DefaultConfig, {

package/src/Main.mjs

@@ -50,6 +50,7 @@ class Main extends core.Base {
                 'editRoute',
                 'getByPath',
                 'getWindowData',
+                'importAddon',
                 'redirectTo',
                 'setNeoConfig',
                 'setRoute',
@@ -192,9 +193,25 @@ class Main extends core.Base {
         };
     }
 
-    // todo: https://developer.mozilla.org/en-US/docs/Web/Events/resize
-    globalResizeListener(event) {
-        console.log('globalResizeListener', event);
+    /**
+     * Import main thread addons at run-time from within the app worker
+     * @param {Object} data
+     * @param {String} data.name
+     * @returns {Boolean}
+     */
+    async importAddon(data) {
+        let name = data.name,
+            module;
+
+        if (name.startsWith('WS/')) {
+            module = await import(`../../../src/main/addon/${name.substring(3)}.mjs`)
+        } else {
+            module = await import(`./main/addon/${name}.mjs`)
+        }
+
+        this.addon[module.default.constructor.name] = module.default;
+
+        return true
     }
 
     /**
@@ -209,9 +226,6 @@ class Main extends core.Base {
 
         DomAccess.onDomContentLoaded();
 
-        // not in use right now
-        // window.addEventListener('resize', me.globalResizeListener.bind(me));
-
         // we need different publicPath values for the main thread inside the webpack based dist envs,
         // depending on the hierarchy level of the app entry point
         if (config.environment !== 'development') {
@@ -229,7 +243,7 @@ class Main extends core.Base {
 
         mainThreadAddons.forEach(addon => {
             if (addon.startsWith('WS/')) {
-                imports.push(import(`../../../src/main/addon/${addon.substr(3)}.mjs`));
+                imports.push(import(`../../../src/main/addon/${addon.substring(3)}.mjs`));
             } else {
                 imports.push(import(`./main/addon/${addon}.mjs`));
             }
@@ -245,7 +259,7 @@ class Main extends core.Base {
 
         WorkerManager.onWorkerConstructed({
             origin: 'main'
-        });
+        })
     }
 
     /**
@@ -258,7 +272,7 @@ class Main extends core.Base {
             action : 'reply',
             replyId: data.id,
             success: true
-        });
+        })
     }
 
     /**

package/src/component/Splitter.mjs

@@ -170,7 +170,6 @@ class Splitter extends Component {
                 newSize = data.clientX - data.offsetX - size - parentRect.left;
 
                 if (resizeNext) {
-                    console.log(parentRect);
                     newSize = parentRect.width - newSize -  2 * size
                 } else {
                     newSize += size

package/src/draggable/tab/header/toolbar/SortZone.mjs

@@ -31,7 +31,7 @@ class SortZone extends BaseSortZone {
      * @param {Number} toIndex
      */
     moveTo(fromIndex, toIndex) {
-        this.owner.up().moveTo(fromIndex, toIndex);
+        this.owner.up().moveTo(fromIndex, toIndex)
     }
 
     /**
@@ -47,7 +47,7 @@ class SortZone extends BaseSortZone {
 
             NeoArray.remove(cls, 'neo-no-animation');
             owner.cls = cls;
-        }, 300);
+        }, 300)
     }
 
     /**
@@ -61,7 +61,7 @@ class SortZone extends BaseSortZone {
         NeoArray.add(cls, 'neo-no-animation');
         owner.cls = cls;
 
-        super.onDragStart(data);
+        super.onDragStart(data)
     }
 }
 

package/src/form/field/FileUpload.mjs

@@ -122,6 +122,10 @@ class FileUpload extends Base {
                     tag  : 'input',
                     type : 'file'
                 },
+                {
+                    cls  : 'neo-file-upload-label',
+                    tag  : 'label'
+                },
                 {
                     cls : 'neo-file-upload-error-message'
                 }
@@ -149,7 +153,7 @@ class FileUpload extends Base {
             UPLOADING        : 'scanning',
 
             MALWARE_DETECTED : 'scan-failed',
-            UN_DOWNLOADABLE  : 'not-downloadable',
+            AVAILABLE        : 'not-downloadable',
             DOWNLOADABLE     : 'downloadable',
             DELETED          : 'deleted'
         },
@@ -311,6 +315,7 @@ class FileUpload extends Base {
         error_ : null,
 
         // UI strings which can be overridden for other languages
+        chooseFile           : 'Choose file',
         documentText         : 'Document',
         pleaseUseTheseTypes  : 'Please use these file types',
         fileSizeMoreThan     : 'File size exceeds',
@@ -319,6 +324,7 @@ class FileUpload extends Base {
         documentStatusError  : 'Document status service error',
         uploadFailed         : 'Upload failed',
         scanning             : 'Scanning',
+        uploading            : 'Uploading...',
         malwareFoundInFile   : 'Malware found in file',
         pleaseCheck          : 'Please check the file and try again',
         successfullyUploaded : 'Successfully uploaded',
@@ -339,6 +345,18 @@ class FileUpload extends Base {
         ]);
     }
 
+    afterSetId(value, oldValue) {
+        const
+            labelEl   = this.vdom.cn[4],
+            inputElId = `${this.id}-input`;
+
+        this.getInputEl().id =  labelEl.for = inputElId;
+        labelEl.html = this.chooseFile;
+
+        // silent vdom update, the super call will trigger the engine
+        super.afterSetId?.(value, oldValue);
+    }
+    
     /**
      * @returns {Object}
      */
@@ -428,7 +446,7 @@ class FileUpload extends Base {
 
         /**
          * This event fires before every HTTP request is sent to the server via any of the configured URLs.
-         * 
+         *
          * @event beforeRequest
          * @param {Object} event The event
          * @param {Object} event.headers An object containing the configured {@link #property-headers}
@@ -452,7 +470,7 @@ class FileUpload extends Base {
 
         (vdom.style || (vdom.style = {}))['--upload-progress'] = `${progress}turn`;
 
-        vdom.cn[1].cn[1].innerHTML = `Uploading... (${Math.round(progress * 100)}%)`;
+        vdom.cn[1].cn[1].innerHTML = `${this.uploading}... (${Math.round(progress * 100)}%)`;
 
         this.uploadSize = loaded;
         this.update();
@@ -740,13 +758,13 @@ class FileUpload extends Base {
 
     afterSetError(text) {
         if (text) {
-            this.vdom.cn[4].cn = [{
+            this.vdom.cn[5].cn = [{
                 vtype : 'text',
                 html  : text
             }];
         }
         else {
-            this.vdom.cn[4].cn = [];
+            this.vdom.cn[5].cn = [];
         }
 
         this.validate();

package/src/form/field/Text.mjs

@@ -665,7 +665,7 @@ class Text extends Base {
 
         me.silentVdomUpdate = true;
 
-        !me.clean && me.validate(false);
+        me.validate(false);
         me.changeInputElKey('required', value ? value : null);
         me.labelText = me.labelText; // apply the optional text if needed
 

package/src/main/DomEvents.mjs

@@ -118,8 +118,8 @@ class DomEvents extends Base {
 
         let me = this;
 
-        document.addEventListener('selectionchange',  me.onSelectionChange .bind(me));
         document.addEventListener('DOMContentLoaded', me.onDomContentLoaded.bind(me));
+        document.addEventListener('selectionchange',  me.onSelectionChange .bind(me));
         window  .addEventListener('hashchange',       me.onHashChange      .bind(me));
 
         if (Neo.config.useSharedWorkers) {
@@ -332,6 +332,11 @@ class DomEvents extends Base {
         return path
     }
 
+    /**
+     * @param {Object[]} path
+     * @param {HTMLElement} target
+     * @returns {Object[]}
+     */
     getSelectionPath(path, target) {
         if (target.parentNode && target.id.split('__').length > 1) {
             path = this.getSelectionPath(path, target.parentNode);
@@ -343,7 +348,7 @@ class DomEvents extends Base {
     }
 
     /**
-     * @param {Object} node
+     * @param {HTMLElement} node
      * @returns {Object}
      */
     getTargetData(node) {

package/src/main/addon/Stylesheet.mjs

@@ -72,7 +72,7 @@ class Stylesheet extends Base {
     addGlobalCss() {
         let config   = Neo.config,
             themes   = config.themes,
-            folders  = config.useCssVars ? ['src', ...themes] : [themes[0]],
+            folders  = ['src', ...themes],
             env      = config.environment,
             path      = env.startsWith('dist/') ? '' : config.appPath.includes('docs') ? `../dist/${env}/` : `../../dist/${env}/`,
             rootPath = config.basePath.substr(6);
@@ -87,7 +87,7 @@ class Stylesheet extends Base {
             this.createStyleSheet(
                 null,
                 null,
-                `${rootPath}${path}css${config.useCssVars ? '' : '-no-vars'}/${folder}/Global.css`
+                `${rootPath}${path}css/${folder}/Global.css`
             );
         });
     }
@@ -112,19 +112,14 @@ class Stylesheet extends Base {
         className = className.split('.').join('/');
 
         data.folders.forEach(folder => {
-            if (
-                folder === 'src' && config.useCssVars || folder.includes('theme-') && (
-                     config.useCssVars && config.themes.includes(`neo-${folder}`) ||
-                    !config.useCssVars && config.themes[0] === `neo-${folder}`
-                )
-            ) {
+            if (folder === 'src' || folder.includes('theme-') && config.themes.includes(`neo-${folder}`)) {
                 this.createStyleSheet(
                     null,
                     null,
-                    `${rootPath}${path}css${config.useCssVars ? '' : '-no-vars'}/${folder}/${className}.css`
-                );
+                    `${rootPath}${path}css/${folder}/${className}.css`
+                )
             }
-        });
+        })
     }
 
     /**

package/src/manager/DomEvent.mjs

@@ -31,6 +31,7 @@ const globalDomEvents = [
     'mouseleave',
     'mouseup',
     'scroll',
+    'selectionchange',
     'wheel'
 ];
 

package/src/plugin/PrefixField.mjs

@@ -0,0 +1,304 @@
+import Base from './Base.mjs';
+
+/**
+ * @class Neo.plugin.PrefixField
+ * @extends Neo.plugin.Base
+ *
+ * @example
+ *
+ *     {
+ *         module   : TextField,
+ *         labelText: 'Credit Card',
+ *         plugins  : [{
+ *             module : PrefixPlugin, // import PrefixPlugin from '../../src/plugin/PrefixField.mjs';
+ *             flag   : 'prefix',     // textField.getPlugins({flag: 'prefix'})
+ *             pattern: 'dd/mm/yyyy',
+ *             slots  : 'dmy',        // characters allowed to replace
+ *             accept : /\d/          // either '[A-Z]' or regex or undefined
+ *         }]
+ *     }
+ */
+class PrefixField extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.plugin.PrefixField'
+         * @protected
+         */
+        className: 'Neo.plugin.PrefixField',
+        /**
+         * @member {String} ntype='plugin-prefixfield'
+         * @protected
+         */
+        ntype: 'plugin-prefixfield',
+
+        /**
+         * Custom cls added to the inputEl
+         * @member {String} inputCls='neo-prefixfield-input'
+         */
+        inputCls: 'neo-prefixfield-input',
+        /**
+         * Custom cls added to the inputEl
+         * @member {String} inputCls='neo-prefixfield-input'
+         */
+        labelCls: 'neo-prefixfield-label',
+        /**
+         * Custom cls to add to the owner component
+         * @member {String} ownerCls='neo-prefixfield'
+         */
+        ownerCls: 'neo-prefixfield',
+
+        /**
+         * regex to calculate if entered value is acceptable
+         * Preset to numbers only
+         *
+         * @member {regex|null} accept
+         */
+        accept_: null,
+        /**
+         * @member {String} pattern=null
+         */
+        pattern_: null,
+        /**
+         * Only add a String. A Set will be automatically created
+         * @member {String|Set|null} slots=null
+         */
+        slots_: null
+    }
+
+    /**
+     * First accepted place to enter a value
+     * @member {Number} first
+     * @protected
+     */
+    first = null;
+    /**
+     * Array of numbers, which shows the previous entry point
+     * @member {Array[]} prev
+     * @protected
+     */
+    prev = null;
+    /**
+     * Position of the cursor inside input element
+     * @member {Object} selection
+     * @protected
+     */
+    selection = null;
+
+    /**
+     * State if selection should be updated
+     * @member {Boolean} ignoreSelection
+     * @protected
+     */
+    ignoreSelection = false;
+    /**
+     * State if last entry was the back button
+     * @member {Boolean} back
+     * @protected
+     */
+    back = false;
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        let me = this;
+
+        super.construct(config);
+
+        me.addListeners();
+        me.addCss();
+    }
+
+    /**
+     * Add a custom cls to the owner component
+     */
+    addCss() {
+        const me      = this,
+              owner   = me.owner,
+              inputEl = owner.getInputEl(),
+              labelEl = owner.getLabelEl();
+
+        owner    .addCls(me.ownerCls);
+        inputEl.cls.push(me.inputCls);
+        labelEl.cls.push(me.labelCls);
+    }
+
+    /**
+     * Add listeners
+     * @protected
+     */
+    addListeners() {
+        const me = this;
+        let listenerId;
+
+        me.owner.addDomListeners([
+            {keydown        : me.onFieldKeyDown        , scope: me},
+            {focusin        : me.onFieldFocus          , scope: me},
+            {focusout       : me.onFieldBlur           , scope: me},
+            {selectionchange: me.onFieldSelectionChange, scope: me}
+        ]);
+
+        listenerId = me.owner.on('mounted', (test) => {
+            Neo.currentWorker.insertThemeFiles(me.owner.appName, me.__proto__);
+
+            me.owner.un('mounted', listenerId);
+            listenerId = null;
+        });
+    }
+
+
+    /**
+     * After setting accept format output
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetAccept(value, oldValue) {
+        if (this.owner.value) this.format();
+    }
+
+    /**
+     * After setting pattern recalc other values and set placeholder
+     * @param {Set} value
+     * @param {Set} oldValue
+     * @protected
+     */
+    afterSetPattern(value, oldValue) {
+        this.owner.placeholderText = value;
+        this.recalcFirstAndPref();
+    }
+
+    /**
+     * After setting slots recalc other values
+     * @param {Set} value
+     * @param {Set} oldValue
+     * @protected
+     */
+    afterSetSlots(value, oldValue) {
+        this.recalcFirstAndPref();
+    }
+
+    /**
+     * Before the new value for slots will be set we create a Set from the string
+     * @param {String} value
+     * @return {Set}
+     * @protected
+     */
+    beforeSetSlots(value) {
+        return new Set(value || "_");
+    }
+
+    /**
+     * Remove unwanted entries and limit length
+     * @param {String} input
+     * @returns {any[]}
+     * @protected
+     */
+    clean(input) {
+        const me     = this,
+              accept = new RegExp(this.accept || "\\d", "g");
+
+        input = input.match(accept) || [];
+        input = Array.from(me.pattern, c =>
+            input[0] === c || me.slots.has(c) ? input.shift() || c : c
+        );
+
+        return input.slice(0, me.pattern.length);
+    }
+
+    /**
+     * Calculate position and output correct String to Field
+     * @protected
+     */
+    format() {
+        const me        = this,
+              el        = me.owner,
+              selection = me.selection,
+              prev      = me.prev,
+              clean     = me.clean.bind(me);
+        let value = el.value || '';
+
+        const [i, j] = [selection.start, selection.end].map(i => {
+            i = me.clean(value.slice(0, i)).findIndex(c => me.slots.has(c));
+            return i < 0 ? prev[prev.length - 1] : me.back ? prev[i - 1] || me.first : i;
+        });
+
+        el.value = clean(value).join``;
+        this.ignoreSelection = true;
+
+        Neo.main.DomAccess.selectNode({id: el.getInputElId(), start: i, end: j});
+        this.ignoreSelection = false;
+
+        this.back = false;
+    }
+
+    /**
+     * Event
+     * @param {Object} data
+     * @returns {false|string}
+     * @protected
+     */
+    onFieldBlur(data) {
+        const pattern = this.pattern,
+              el      = this.owner;
+
+        return el.value === pattern && (el.value = "");
+    }
+
+    /**
+     * Event
+     * @param {Object} data
+     * @protected
+     */
+    onFieldFocus(data) {
+        this.format();
+    }
+
+    /**
+     * Event
+     * @param {Object} data
+     * @protected
+     */
+    onFieldKeyDown(data) {
+        this.back = (data.key === "Backspace");
+    }
+
+    /**
+     * Event
+     * @param {Object} data
+     * @protected
+     */
+    onFieldSelectionChange(data) {
+        let sel  = this.selection,
+            dSel = data.selection;
+
+        // Do not run, if ignore state or same start and end data
+        if (this.ignoreSelection || (dSel.start === sel.start && dSel.end === sel.end)) {
+            return;
+        }
+
+        this.selection = dSel;
+        this.format();
+    }
+
+    /**
+     * Calc values for first and prev
+     * @protected
+     */
+    recalcFirstAndPref() {
+        const me      = this,
+              pattern = me.pattern,
+              slots   = me.slots;
+
+        me.prev = (j => Array.from(pattern, (c, i) => slots.has(c) ? j = i + 1 : j))(0);
+        me.first = [...pattern].findIndex(c => slots.has(c));
+
+        me.selection = {start: me.first, end: me.first};
+
+        if (me.owner.value) me.format();
+    }
+}
+
+Neo.applyClassConfig(PrefixField);
+
+export default PrefixField;

package/src/tab/header/Toolbar.mjs

@@ -43,8 +43,8 @@ class Toolbar extends BaseToolbar {
                     boundaryContainerId: me.id,
                     owner              : me,
                     ...me.sortZoneConfig
-                });
-            });
+                })
+            })
         }
     }
 
@@ -61,10 +61,10 @@ class Toolbar extends BaseToolbar {
             me.items.forEach(item => {
                 // silent updates
                 item._useActiveTabIndicator = value;
-                item.updateUseActiveTabIndicator(true);
+                item.updateUseActiveTabIndicator(true)
             });
 
-            me.update();
+            me.update()
         }
     }
 
@@ -78,7 +78,7 @@ class Toolbar extends BaseToolbar {
         defaults.useActiveTabIndicator = me.useActiveTabIndicator;
         me.itemDefaults = defaults;
 
-        super.createItems();
+        super.createItems()
     }
 
     /**
@@ -116,7 +116,7 @@ class Toolbar extends BaseToolbar {
                 break;
         }
 
-        return layoutConfig;
+        return layoutConfig
     }
 
     /**
@@ -131,10 +131,10 @@ class Toolbar extends BaseToolbar {
         if (fromIndex !== toIndex) {
             this.items.forEach((item, index) => {
                 item.index = index;
-            });
+            })
         }
 
-        return returnValue;
+        return returnValue
     }
 }
 

package/src/worker/App.mjs

@@ -313,7 +313,7 @@ class App extends Base {
         super.onRegisterNeoConfig(msg);
 
         let config = Neo.config,
-            url    = `resources/theme-map${config.useCssVars ? '' : '-no-vars'}.json`;
+            url    = 'resources/theme-map.json';
 
         if (config.environment === 'development') {
             url = `../../${url}`

package/docs/index_no_css_vars.html

@@ -1,17 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta charset="UTF-8">
-    <title>Neo Docs NoCssVars</title>
-</head>
-<body>
-    <script type="module">
-        fetch('./neo-config-no-css-vars.json').then(response => response.json()).then(data => {
-            self.Neo = {config: {}};
-            Object.assign(Neo.config, data);
-            import(data.mainPath);
-        });
-    </script>
-</body>
-</html>

package/docs/neo-config-no-css-vars.json

@@ -1,8 +0,0 @@
-{
-    "appPath"         : "docs/app.mjs",
-    "basePath"        : "../",
-    "environment"     : "development",
-    "mainPath"        : "../src/Main.mjs",
-    "mainThreadAddons": ["DragDrop", "HighlightJS", "Stylesheet"],
-    "useCssVars"      : false
-}