neo.mjs 6.3.0 → 6.3.1

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.3.0",
+    "version": "6.3.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/src/DefaultConfig.mjs

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

package/src/form/Container.mjs

@@ -123,8 +123,8 @@ class Container extends BaseContainer {
 
         await this.loadModules();
 
-        ComponentManager.getChildComponents(this).forEach(item => {
-            item instanceof BaseField && fields.push(item)
+        ComponentManager.getChildComponents(this).forEach(field => {
+            field instanceof BaseField && fields.push(field)
         });
 
         return fields
@@ -137,31 +137,31 @@ class Container extends BaseContainer {
         let fields = await this.getFields(),
             Radio  = Neo.form.field.Radio,
             values = {},
-            itemName, key, ns, nsArray, value;
+            fieldName, key, ns, nsArray, value;
 
-        fields.forEach(item => {
-            value = item.getValue();
+        fields.forEach(field => {
+            value = field.getValue();
 
-            if (item.name) {
-                itemName = item.name;
+            if (field.name) {
+                fieldName = field.name;
 
-                if (item.formGroup) {
-                    itemName = item.formGroup + '.' + itemName;
+                if (field.formGroup) {
+                    fieldName = field.formGroup + '.' + fieldName;
                 }
 
-                nsArray = itemName.split('.');
+                nsArray = fieldName.split('.');
                 key     = nsArray.pop();
                 ns      = Neo.nsWithArrays(nsArray, true, values);
             } else {
-                key = item.id;
+                key = field.id;
                 ns  = values
             }
 
             // Ensuring that Radios will not return arrays
-            if (Radio && item instanceof Radio) {
+            if (Radio && field instanceof Radio) {
                 // Only overwrite an existing value with a checked value
                 if (Object.hasOwn(ns, key)) {
-                    if (value !== item.uncheckedValue) {
+                    if (value !== field.uncheckedValue) {
                         ns[key] = value
                     }
                 } else {
@@ -174,13 +174,13 @@ class Container extends BaseContainer {
              * (multiple fields using the same name)
              */
             else if (Object.hasOwn(ns, key) && value !== undefined) {
-                if (ns[key] === item.uncheckedValue) {
+                if (ns[key] === field.uncheckedValue) {
                     ns[key] = []
                 } else if (!Array.isArray(ns[key])) {
                     ns[key] = [ns[key]]
                 }
 
-                value !== item.uncheckedValue && ns[key].unshift(value)
+                value !== field.uncheckedValue && ns[key].unshift(value)
             } else if (value !== undefined) {
                 ns[key] = value
             }
@@ -235,11 +235,11 @@ class Container extends BaseContainer {
             fields = await me.getFields(),
             path, value;
 
-        fields.forEach(item => {
-            path  = me.getFieldPath(item);
+        fields.forEach(field => {
+            path  = me.getFieldPath(field);
             value = Neo.nsWithArrays(path, false, values);
 
-            item.reset(path ? value : null)
+            field.reset(path ? value : null)
         })
     }
 
@@ -253,38 +253,38 @@ class Container extends BaseContainer {
             fields = await me.getFields(),
             fieldConfigs, isCheckBox, isRadio, path, value;
 
-        fields.forEach(item => {
-            path         = me.getFieldPath(item);
+        fields.forEach(field => {
+            path         = me.getFieldPath(field);
             fieldConfigs = Neo.nsWithArrays(path, false, configs);
 
             if (fieldConfigs) {
                 if (suspendEvents) {
-                    item.suspendEvents = true
+                    field.suspendEvents = true
                 }
 
-                isCheckBox = Neo.form.field?.CheckBox && item instanceof Neo.form.field.CheckBox;
+                isCheckBox = Neo.form.field?.CheckBox && field instanceof Neo.form.field.CheckBox;
+                isRadio    = Neo.form.field?.Radio && field instanceof Neo.form.field.Radio;
                 value      = fieldConfigs.value;
 
-                if (isCheckBox) {
+                if (isRadio) {
+                    fieldConfigs.checked = field.value === value;
+                    delete fieldConfigs.value
+                } else if (isCheckBox) {
                     if (Neo.typeOf(value) === 'Array') {
-                        if (value.includes(item.value)) {
+                        if (value.includes(field.value)) {
                             fieldConfigs.checked = true
                         }
                     } else {
-                        fieldConfigs.checked = item.value === value
+                        fieldConfigs.checked = field.value === value
                     }
-                } else if (value !== undefined) {
-                    isRadio = Neo.form.field?.Radio && item instanceof Neo.form.field.Radio;
 
-                    if (isRadio) {
-                        fieldConfigs.checked = item.value === value
-                    }
+                    delete fieldConfigs.value
                 }
 
-                item.set(fieldConfigs)
+                field.set(fieldConfigs)
 
                 if (suspendEvents) {
-                    delete item.suspendEvents
+                    delete field.suspendEvents
                 }
             }
         })
@@ -311,8 +311,8 @@ class Container extends BaseContainer {
             fields  = await this.getFields(),
             validField;
 
-        fields.forEach(item => {
-            validField = item.validate?.(false);
+        fields.forEach(field => {
+            validField = field.validate?.(false);
 
             if (!validField) {
                 isValid = false

package/src/main/addon/PrefixField.mjs

@@ -0,0 +1,149 @@
+import Base from '../../core/Base.mjs';
+
+/**
+ * Helper class to include Google's Material Web Components into your neo.mjs app
+ * https://www.amcharts.com/docs/v4/
+ * @class Neo.main.addon.PrefixField
+ * @extends Neo.core.Base
+ * @singleton
+ */
+class PrefixField extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.main.addon.PrefixField'
+         * @protected
+         */
+        className: 'Neo.main.addon.PrefixField',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true,
+        /**
+         * Remote method access for other workers
+         * @member {Object} remote
+         * @protected
+         */
+        remote: {
+            app: [
+                'initialize',
+                'destroy',
+                'updateAccept',
+                'updatePattern',
+                'updateSlots',
+            ]
+        },
+
+        /**
+         * 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
+    }
+
+    destroy() {
+
+    }
+
+    elIds = new Map();
+
+    prev;
+
+    back = false;
+
+    /**
+     *
+     * @param {Object} data
+     * @param {String} data.elId
+     * @param {String} data.pattern
+     * @param {String} data.slots
+     * @param {String} data.accept
+     */
+    initialize(data) {
+        const me = this;
+
+        me.elId     = data.elId;
+
+        const el      = me.el = document.getElementById(data.elId),
+              pattern = me.pattern = data.pattern,
+              slots = me.slots = new Set(data.slots || "_");
+
+        me.accept = data.accept;
+        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.addListeners();
+        me.addCss();
+    }
+
+    addCss() {
+        this.el.classList.add('tiny-prefix-field-input');
+    }
+
+    addListeners() {
+        const me       = this,
+              el       = me.el,
+              formatFn = me.format.bind(me);
+
+        el.addEventListener("keypress", me.onKeyDown.bind(me));
+        el.addEventListener("input", formatFn);
+        el.addEventListener("focusin", formatFn);
+        el.addEventListener("focusout", me.onBlur.bind(me));
+    }
+
+    onBlur() {
+        const pattern = this.pattern,
+              el      = this.el;
+
+        return el.value === pattern && (el.value = "");
+    }
+
+    onKeyDown(event) {
+        this.back = (event.key === "Backspace");
+    }
+
+    clean(input) {
+        const el      = this.el,
+              accept  = new RegExp(this.accept || "\\d", "g"),
+              pattern = this.pattern,
+              slots   = this.slots;
+
+        input = input.match(accept) || [];
+
+        return Array.from(pattern, c =>
+            input[0] === c || slots.has(c) ? input.shift() || c : c
+        );
+    }
+
+    format() {
+        const me    = this,
+              el    = this.el,
+              prev  = this.prev,
+              clean = this.clean.bind(this);
+        console.log(el.selectionStart, el.selectionEnd);
+        const [i, j] = [el.selectionStart, el.selectionEnd].map(i => {
+            i = clean(el.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(el.value).join``;
+        el.setSelectionRange(i, j);
+
+        this.back = false;
+    }
+}
+
+let instance = Neo.applyClassConfig(PrefixField);
+
+export default instance;

package/src/plugin/Popover.mjs

@@ -0,0 +1,194 @@
+import Base      from './Base.mjs';
+import Container from '../container/Base.mjs'
+import NeoArray  from "../util/Array.mjs";
+
+/**
+ * Popover usable as tooltip
+ * @class Neo.plugin.Popover
+ * @extends Neo.plugin.Base
+ *
+ * @example
+ *
+ *     module : Button,
+ *     width  : 200,
+ *     text   : 'Click Me',
+ *     plugins: [{
+ *         module: PopoverPlugin,
+ *         align : 'bc-tc',
+ *         items : [{
+ *             ntype  : 'panel',
+ *             headers: [{
+ *                 dock: 'top',
+ *                 html: 'HEADER'
+ *             }],
+ *             items  : [{
+ *                 html: 'This is a comment about the button'
+ *             }]
+ *         }]
+ *     }]
+ */
+class Popover extends Base {
+    /**
+     * Valid values for align
+     * @member {String[]} alignValues=['bc-tc','tc-bc','tl-tr','tr-tl','cl-cr','cr-cl',null]
+     * @protected
+     * @static
+     *
+     * todo add more
+     */
+    static alignValues = ['bc-tc', 'tc-bc', 'tl-tr', 'tr-tl', 'cl-cr', 'cr-cl', null]
+
+    static config = {
+        /**
+         * @member {String} className='Neo.plugin.Popover'
+         * @protected
+         */
+        className: 'Neo.plugin.Popover',
+        /**
+         * @member {String} ntype='popover'
+         * @protected
+         */
+        ntype: 'plugin-popover',
+
+
+        /**
+         * Define popover to popovertarget alignment
+         * Defaults to bottom center of popover is aligned to top center of owner
+         * @type {string} align='bc-tc'
+         */
+        align_: 'bc-tc',
+        /**
+         * Custom cls to add to the owner component
+         * @member {String} ownerCls='neo-prefixfield'
+         */
+        popovertargetCls: 'neo-popover-target',
+        /**
+         * Custom cls to add to the owner component
+         * @member {String} ownerCls='neo-prefixfield'
+         */
+        popoverBaseCls: 'neo-popover',
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        let me = this;
+
+        super.construct(config);
+
+        me.popoverId = Neo.getId('popover');
+
+        // prepare owner
+        me.preparePopoverTarget();
+        me.addPopover();
+
+        me.addListeners();
+    }
+
+    /**
+     * Add listeners
+     * @protected
+     */
+    addListeners() {
+        const me = this;
+
+        me.owner.addDomListeners([
+            {mouseover: me.onTargetMouseOver, scope: me},
+            {mouseout: me.onTargetMouseOut, scope: me}
+        ]);
+    }
+
+    /**
+     * Create the popover and add it to the parent component of the owner
+     * @protected
+     */
+    addPopover() {
+        const me      = this,
+              owner   = me.owner,
+              parent  = Neo.get(me.owner.parentId),
+              popover = {
+                  module: Container,
+                  id    : me.popoverId,
+
+                  baseCls: [me.popoverBaseCls],
+                  cls    : [me.align],
+
+                  layout: 'base',
+                  items : me.items || [],
+
+                  vdom: {
+                      // Possible Values are auto, manual.
+                      popover: 'auto',
+                      anchor : owner.id
+                  }
+              };
+
+        parent.add(popover);
+    }
+
+    /**
+     * Checks if the new value for "align" is valid
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     * @returns {String|null} value
+     */
+    beforeSetAlign(value, oldValue) {
+        return this.testInputValue(value, oldValue, 'alignValues', 'align');
+    }
+
+    /**
+     * @event mouseout
+     * @param {Object} data
+     * @protected
+     */
+    onTargetMouseOut(data) {
+        Neo.main.addon.Popover.hide({id: data.component.id});
+    }
+
+    /**
+     * @event mouseover
+     * @param {Object} data
+     * @protected
+     */
+    onTargetMouseOver(data) {
+        Neo.main.addon.Popover.show({id: data.component.id});
+    }
+
+    /**
+     * @protected
+     */
+    preparePopoverTarget() {
+        const me         = this,
+              target     = me.owner,
+              targetVdom = target.vdom;
+
+        target.addCls(me.popovertargetCls);
+        targetVdom.popovertarget = me.popoverId;
+    }
+
+    /**
+     * Checks if the new value for propertyName is valid
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @param {String} validValuesName
+     * @param {String} propertyName
+     * @protected
+     * @returns {String|null} value
+     */
+    testInputValue(value, oldValue, validValuesName, propertyName) {
+        const validValues = this.getStaticConfig(validValuesName);
+
+        if (!NeoArray.hasItem(validValues, value)) {
+            Neo.logError(this.id + ' -> layout: supported values for "' + propertyName + '" are', validValues);
+            return oldValue;
+        }
+
+        return value;
+    }
+}
+
+Neo.applyClassConfig(Popover);
+
+export default Popover;