neo.mjs 5.18.0 → 6.0.1

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/resources/scss/mixins/_all.scss

@@ -1,31 +0,0 @@
-@function neo($key) {
-    @return map-get($neoMap, $key);
-}
-
-@function calcVar($name, $operator, $value) {
-    @if($useCssVars) {
-             @if ($operator == '+') {@return calc(#{v(#{$name})} + #{$value});}
-        @else if ($operator == '-') {@return calc(#{v(#{$name})} - #{$value});}
-        @else if ($operator == '*') {@return calc(#{v(#{$name})} * #{$value});}
-        @else if ($operator == '/') {@return calc(#{v(#{$name})} / #{$value});}
-    } @else {
-        $var: neo($name);
-
-             @if ($operator == '+') {@return calc(#{$var} + #{$value});}
-        @else if ($operator == '-') {@return calc(#{$var} - #{$value});}
-        @else if ($operator == '*') {@return calc(#{$var} * #{$value});}
-        @else if ($operator == '/') {@return calc(#{$var} / #{$value});}
-    }
-}
-
-@function v($name, $fallback: null) {
-    @if($useCssVars) {
-        @if($fallback) {
-            @return var(--#{$name}, #{$fallback});
-        } @else {
-            @return var(--#{$name});
-        }
-    } @else {
-        @return #{neo($name)};
-    }
-}

package/resources/scss/theme-dark/_all.scss

@@ -1,15 +0,0 @@
-@import "Global";
-
-@import "apps/all";
-@import "button/all";
-@import "calendar/all";
-@import "component/all";
-@import "dialog/all";
-@import "container/all";
-@import "examples/all";
-@import "form/all";
-@import "list/all";
-@import "menu/all";
-@import "tab/all";
-@import "table/all";
-@import "tree/all";

package/resources/scss/theme-dark/apps/_all.scss

@@ -1,3 +0,0 @@
-@import "covid/all";
-@import "docs/all";
-@import "website/all";

package/resources/scss/theme-dark/apps/covid/_all.scss

@@ -1,4 +0,0 @@
-@import "country/Gallery";
-@import "country/Helix";
-@import "country/LineChartComponent";
-@import "HeaderContainer";

package/resources/scss/theme-dark/apps/docs/_all.scss

@@ -1,6 +0,0 @@
-@import "classdetails/all";
-@import "ContentTabContainer";
-@import "ExamplesTreeList";
-@import "HeaderContainer";
-@import "MainContainer";
-@import "TutorialsTreeList";

package/resources/scss/theme-dark/apps/docs/classdetails/_all.scss

@@ -1,5 +0,0 @@
-@import "HeaderComponent";
-@import "HierarchyTreeList";
-@import "MainContainer";
-@import "MembersList";
-@import "TutorialComponent";

package/resources/scss/theme-dark/apps/website/_all.scss

@@ -1,4 +0,0 @@
-@import "blog/Container";
-@import "home/TabContainer";
-@import "HeaderContainer";
-@import "MainContainer";

package/resources/scss/theme-dark/button/_all.scss

@@ -1 +0,0 @@
-@import "Base";

package/resources/scss/theme-dark/calendar/_all.scss

@@ -1,8 +0,0 @@
-@import "view/calendars/EditContainer";
-@import "view/calendars/List";
-@import "view/month/Component";
-@import "view/week/Component";
-@import "view/EditEventContainer";
-@import "view/MainContainer";
-@import "view/SettingsContainer";
-@import "view/YearComponent";

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

@@ -1,5 +0,0 @@
-@import "BoxLabel";
-@import "Chip";
-@import "Circle";
-@import "DateSelector";
-@import "Splitter";

package/resources/scss/theme-dark/container/_all.scss

@@ -1,3 +0,0 @@
-@import "Base";
-@import "Panel";
-@import "Viewport";

package/resources/scss/theme-dark/dialog/_all.scss

@@ -1 +0,0 @@
-@import "Base";

package/resources/scss/theme-dark/examples/_all.scss

@@ -1,2 +0,0 @@
-@import "calendar/basic/MainContainer";
-@import "ConfigurationPanel";

package/resources/scss/theme-dark/form/_all.scss

@@ -1,9 +0,0 @@
-@import "field/trigger/all";
-@import "field/CheckBox";
-@import "field/Picker";
-@import "field/Range";
-@import "field/Search";
-@import "field/Select";
-@import "field/Text";
-
-@import "Fieldset";

package/resources/scss/theme-dark/form/field/trigger/_all.scss

@@ -1,3 +0,0 @@
-@import "Base";
-@import "Clear";
-@import "Time";

package/resources/scss/theme-dark/grid/_all.scss

@@ -1,3 +0,0 @@
-@import "header/all";
-@import "Container";
-@import "View";

package/resources/scss/theme-dark/grid/header/_all.scss

@@ -1,2 +0,0 @@
-@import "Button";
-@import "Toolbar";

package/resources/scss/theme-dark/list/_all.scss

@@ -1 +0,0 @@
-@import "Base";

package/resources/scss/theme-dark/menu/_all.scss

@@ -1,2 +0,0 @@
-@import "List";
-@import "Panel";

package/resources/scss/theme-dark/tab/_all.scss

@@ -1,3 +0,0 @@
-@import "Container";
-@import "header/Button";
-@import "Strip";

package/resources/scss/theme-dark/table/_all.scss

@@ -1,3 +0,0 @@
-@import "header/all";
-@import "Container";
-@import "View";

package/resources/scss/theme-dark/table/header/_all.scss

@@ -1,2 +0,0 @@
-@import "Button";
-@import "Toolbar";

package/resources/scss/theme-dark/tree/_all.scss

@@ -1 +0,0 @@
-@import "List";

package/resources/scss/theme-light/_all.scss

@@ -1,15 +0,0 @@
-@import "Global";
-
-@import "apps/all";
-@import "button/all";
-@import "calendar/all";
-@import "component/all";
-@import "container/all";
-@import "dialog/all";
-@import "examples/all";
-@import "form/all";
-@import "list/all";
-@import "menu/all";
-@import "tab/all";
-@import "table/all";
-@import "tree/all";

package/resources/scss/theme-light/apps/_all.scss

@@ -1,3 +0,0 @@
-@import "covid/all";
-@import "docs/all";
-@import "website/all";

package/resources/scss/theme-light/apps/covid/_all.scss

@@ -1,4 +0,0 @@
-@import "country/Gallery";
-@import "country/Helix";
-@import "country/LineChartComponent";
-@import "HeaderContainer";

package/resources/scss/theme-light/apps/docs/_all.scss

@@ -1,6 +0,0 @@
-@import "classdetails/all";
-@import "ContentTabContainer";
-@import "ExamplesTreeList";
-@import "HeaderContainer";
-@import "MainContainer";
-@import "TutorialsTreeList";

package/resources/scss/theme-light/apps/docs/classdetails/_all.scss

@@ -1,5 +0,0 @@
-@import "HeaderComponent";
-@import "HierarchyTreeList";
-@import "MainContainer";
-@import "MembersList";
-@import "TutorialComponent";

package/resources/scss/theme-light/apps/website/_all.scss

@@ -1,4 +0,0 @@
-@import "blog/Container";
-@import "home/TabContainer";
-@import "HeaderContainer";
-@import "MainContainer";

package/resources/scss/theme-light/button/_all.scss

@@ -1 +0,0 @@
-@import "Base";

package/resources/scss/theme-light/calendar/_all.scss

@@ -1,8 +0,0 @@
-@import "view/calendars/EditContainer";
-@import "view/calendars/List";
-@import "view/month/Component";
-@import "view/week/Component";
-@import "view/EditEventContainer";
-@import "view/MainContainer";
-@import "view/SettingsContainer";
-@import "view/YearComponent";

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

@@ -1,5 +0,0 @@
-@import "BoxLabel";
-@import "Chip";
-@import "Circle";
-@import "DateSelector";
-@import "Splitter";

package/resources/scss/theme-light/container/_all.scss

@@ -1,3 +0,0 @@
-@import "Base";
-@import "Panel";
-@import "Viewport";

package/resources/scss/theme-light/dialog/_all.scss

@@ -1 +0,0 @@
-@import "Base";

package/resources/scss/theme-light/examples/_all.scss

@@ -1,2 +0,0 @@
-@import "calendar/basic/MainContainer";
-@import "ConfigurationPanel";

package/resources/scss/theme-light/form/_all.scss

@@ -1,9 +0,0 @@
-@import "field/trigger/all";
-@import "field/CheckBox";
-@import "field/Picker";
-@import "field/Range";
-@import "field/Search";
-@import "field/Select";
-@import "field/Text";
-
-@import "Fieldset";

package/resources/scss/theme-light/form/field/trigger/_all.scss

@@ -1,3 +0,0 @@
-@import "Base";
-@import "Clear";
-@import "Time";

package/resources/scss/theme-light/grid/_all.scss

@@ -1,3 +0,0 @@
-@import "header/all";
-@import "Container";
-@import "View";

package/resources/scss/theme-light/grid/header/_all.scss

@@ -1,2 +0,0 @@
-@import "Button";
-@import "Toolbar";