neo.mjs 5.9.3 → 5.10.1

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

@@ -0,0 +1,21 @@
+$neoMap: map-merge($neoMap, (
+        'process-arrow-color'     : #ffdb4a,
+        'process-background-color': #fff,
+        'process-icon-color'      : steelblue,
+        'process-icon-size'     : 2rem,
+        'process-shadow-color'  : rgba(0, 0, 0, .5),
+        'process-title-color'   : #363636,
+        'process-text-color'    : #444444
+));
+
+@if $useCssVars == true {
+  :root .neo-theme-dark {
+    --process-arrow-color     : #{neo(process-arrow-color)};
+    --process-background-color: #{neo(process-background-color)};
+    --process-icon-color      : #{neo(process-icon-color)};
+    --process-icon-size       : #{neo(process-icon-size)};
+    --process-shadow-color    : #{neo(process-shadow-color)};
+    --process-title-color     : #{neo(process-title-color)};
+    --process-text-color      : #{neo(process-text-color)};
+  }
+}

package/resources/scss/theme-dark/form/field/Picker.scss

@@ -5,7 +5,7 @@ $neoMap: map-merge($neoMap, (
 ));
 
 @if $useCssVars == true {
-    :root .neo-theme-light { // .neo-pickerfield
+    :root .neo-theme-dark { // .neo-pickerfield
         --pickerfield-container-background-color: #{neo(pickerfield-container-background-)};
         --pickerfield-container-border          : #{neo(pickerfield-container-border)};
         --pickerfield-container-box-shadow      : #{neo(pickerfield-container-box-shadow)};

package/resources/scss/theme-dark/form/field/Switch.scss

@@ -0,0 +1,17 @@
+$neoMap: map-merge($neoMap, (
+    'switchfield-checked': green,
+    'switchfield-background-color': darkgrey,
+    'switchfield-inactive-color': grey,
+    'switchfield-active-color': white,
+    'switchfield-thumb-color': white
+));
+
+@if $useCssVars == true {
+    :root .neo-theme-dark { // .neo-switchfield
+        --neo-switchfield-checked                   : #{neo(switchfield-checked)};
+        --neo-switchfield-background-color          : #{neo(switchfield-background-color)};
+        --neo-switchfield-inactive-color            : #{neo(switchfield-inactive-color)};
+        --neo-switchfield-active-color              : #{neo(switchfield-active-color)};
+        --neo-switchfield-thumb-color-active-color  : #{neo(switchfield-thumb-color-active-color)};
+    }
+}

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

@@ -0,0 +1,21 @@
+$neoMap: map-merge($neoMap, (
+        'process-arrow-color'     : #ffdb4a,
+        'process-background-color': #fff,
+        'process-icon-color'      : steelblue,
+        'process-icon-size'     : 2rem,
+        'process-shadow-color'  : rgba(0, 0, 0, .5),
+        'process-title-color'   : #363636,
+        'process-text-color'    : #444444
+));
+
+@if $useCssVars == true {
+  :root .neo-theme-light {
+    --process-arrow-color     : #{neo(process-arrow-color)};
+    --process-background-color: #{neo(process-background-color)};
+    --process-icon-color      : #{neo(process-icon-color)};
+    --process-icon-size       : #{neo(process-icon-size)};
+    --process-shadow-color    : #{neo(process-shadow-color)};
+    --process-title-color     : #{neo(process-title-color)};
+    --process-text-color      : #{neo(process-text-color)};
+  }
+}

package/resources/scss/theme-light/form/field/Switch.scss

@@ -0,0 +1,17 @@
+$neoMap: map-merge($neoMap, (
+    'switchfield-checked': green,
+    'switchfield-background-color': darkgrey,
+    'switchfield-inactive-color': grey,
+    'switchfield-active-color': white,
+    'switchfield-thumb-color': white
+));
+
+@if $useCssVars == true {
+    :root .neo-theme-light { // .neo-switchfield
+        --neo-switchfield-checked                   : #{neo(switchfield-checked)};
+        --neo-switchfield-background-color          : #{neo(switchfield-background-color)};
+        --neo-switchfield-inactive-color            : #{neo(switchfield-inactive-color)};
+        --neo-switchfield-active-color              : #{neo(switchfield-active-color)};
+        --neo-switchfield-thumb-color-active-color  : #{neo(switchfield-thumb-color-active-color)};
+    }
+}

package/src/DefaultConfig.mjs

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

package/src/component/Process.mjs

@@ -0,0 +1,180 @@
+import Base     from './Base.mjs';
+import NeoArray from '../util/Array.mjs';
+
+/**
+ * @class Neo.component.Process
+ * @extends Neo.component.Base
+ *
+ * @example
+ *     {
+ *         module: Process,
+ *         arrowColor: 'darkred',
+ *         items: [{
+ *             iconCls: 'fa fa-car',
+ *             header: '1. Wunschkennzeichen',
+ *             text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit...'
+ *         }, {
+ *             iconCls: 'fa fa-house',
+ *             header: '2. Termine',
+ *             text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit...'
+ *         }]
+ *     }
+ */
+class Process extends Base {
+    /**
+     * Each item gets an arrow and the content, which gets filled with an item.
+     * The slit allows to fade out the sidebar.
+     *
+     * @member {Object} itemLayout={cls: 'process-step', cn: [{cls: ['arrow', 'white']},{cls: ['slit']},{cls: ['arrow', 'yellow']},{cls: 'process-content', cn: [{cls: ['process-step-icon']},{tag: 'h2', cls: ['process-step-header']},{cls: ['process-step-text']}]}]}
+     */
+    itemLayout = {
+        cls: 'process-step', cn: [
+            {cls: ['arrow', 'white']},
+            {cls: ['slit']},
+            {cls: ['arrow', 'yellow']},
+            {
+                cls: 'process-content', cn: [
+                    {cls: ['process-step-icon']},
+                    {tag: 'h2', cls: ['process-step-header']},
+                    {cls: ['process-step-text']}
+                ]
+            }
+        ]
+    }
+
+    static config = {
+        /**
+         * @member {String} className='Neo.component.Process'
+         * @protected
+         */
+        className: 'Neo.component.Process',
+        /**
+         * @member {String} ntype='process'
+         * @protected
+         */
+        ntype: 'process',
+        /**
+         * @member {String[]} baseCls=['neo-process']
+         */
+        baseCls: ['neo-process'],
+
+        /**
+         * Set the color of the process arrow.
+         * Out of the box this is #ffdb4a
+         *
+         * @member {String|null} arrowColor=null
+         */
+        arrowColor_: null,
+        /**
+         * 'true' shows the items from left to right
+         * 'false' shows the items from top to bottom
+         * There is a minimum width of 700px to show items 'true'
+         *
+         * @member {Boolean} horizontal=true
+         */
+        horizontal_: true,
+        /**
+         * Set the color of the icons.
+         * Out of the box this is #ffdb4a
+         *
+         * @member {String|null} iconColor=null
+         */
+        iconColor_: null,
+
+        /**
+         * Each item will be transferred into the itemLayout
+         *
+         * @member {Object[]|Object} items=null
+         *
+         * @example
+         *     items: [{
+         *         iconCls: 'fa fa-car',
+         *         header: '1. First Step',
+         *         text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.'
+         *     }, {
+         *         iconCls: 'fa fa-house',
+         *         header: '2. Second Step',
+         *         text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.'
+         *     }]
+         */
+        items_: null,
+
+        /**
+         * vdom definition is used during item creation
+         * Do not remove
+         *
+         * @member {Object} vdom={cn:[]}
+         */
+        vdom: {cn: []}
+    }
+
+    /**
+     * Triggered after arrowColor config got changed
+     * @param {String} newValue
+     * @protected
+     */
+    afterSetArrowColor(newValue) {
+        let style = this.style;
+
+        style['--process-arrow-color'] = newValue;
+
+        this.style = style;
+    }
+
+    /**
+     * Triggered after horizontal config got changed
+     * @param {Boolean} isHorizontal
+     * @protected
+     */
+    afterSetHorizontal(isHorizontal) {
+        let cls = this.cls,
+            positionCls = isHorizontal ? 'neo-process-horizontal' : 'neo-process-vertical';
+
+        NeoArray.add(cls, positionCls);
+
+        this.cls = cls;
+    }
+
+    /**
+     * Triggered after iconColor config got changed
+     * @param {String} newValue
+     * @protected
+     */
+    afterSetIconColor(newValue) {
+        let style = this.style;
+
+        style['--process-icon-color'] = newValue;
+
+        this.style = style;
+    }
+
+    /**
+     * Triggered after items config got changed
+     * @param {Object[]} items
+     * @protected
+     */
+    afterSetItems(items) {
+        if (!(Neo.isArray(items) || Neo.isObject(items))) return;
+        if (!Neo.isArray(items)) {
+            items = [items];
+        }
+
+        let vdomRoot = this.vdom,
+            itemLayout = this.itemLayout;
+
+        items.forEach((newItem) => {
+            let curItem = Neo.clone(itemLayout, true),
+                content = curItem.cn[3];
+
+            content.cn[0].cls.push(newItem.iconCls);
+            content.cn[1].innerHTML = newItem.header;
+            content.cn[2].innerHTML = newItem.text;
+
+            NeoArray.add(vdomRoot.cn, curItem);
+        });
+    }
+}
+
+Neo.applyClassConfig(Process);
+
+export default Process;

package/src/container/Dialog.mjs

@@ -0,0 +1,221 @@
+import Base          from '../container/Panel.mjs';
+import NeoArray      from '../util/Array.mjs';
+import HeaderToolbar from '../dialog/header/Toolbar.mjs';
+
+/**
+ * Lightweight implementation using the dialog tag.
+ * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
+ * @class Neo.container.Dialog
+ * @extends Neo.container.Panel
+ */
+class Dialog extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.container.Dialog'
+         * @protected
+         */
+        className: 'Neo.container.Dialog',
+        /**
+         * @member {String} ntype='container-dialog'
+         * @protected
+         */
+        ntype: 'container-dialog',
+        /**
+        * @member {String[]} baseCls=['container-dialog']
+        * @protected
+        */
+        baseCls: ['neo-container-dialog', 'neo-panel', 'neo-container'],
+        /**
+         * @member {Object} headerConfig=null
+         */
+        headerConfig: null,
+        /**
+         * @member {Neo.toolbar.Base|null} headerToolbar=null
+         */
+        headerToolbar: null,
+        /**
+         * The CSS class to use for an icon, e.g. 'fa fa-home'
+         * @member {String|null} [iconCls_=null]
+         */
+        iconCls_: null,
+        /**
+         * @member {Object[]} items
+         */
+        items: [],
+        /**
+         * @member {String} title=null
+         */
+        title_: null,
+        /**
+         * @member {Object} _vdom={tag: 'dialog', cn: []}
+         */
+        _vdom:
+        {tag: 'dialog', cn: []}
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+        this.createHeader();
+    }
+
+    /**
+     * Triggered after the iconCls config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetIconCls(value, oldValue) {
+        console.log(value, oldValue)
+        
+        if (!this.headers) { return }
+        let iconNode = this.headers.down({flag: 'dialog-header-icon'});
+        let iconNodeCls = [...iconNode.cls];
+
+        NeoArray.remove(iconNodeCls, oldValue);
+        NeoArray.add(   iconNodeCls, value);
+
+        iconNode.cls = iconNodeCls;
+
+        iconNode.removeDom = !value || value === '';
+        this.update();
+    } 
+
+    /**
+     * Triggered after the title config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetTitle(value, oldValue) {
+        this.headerToolbar?.set({
+            title: value
+        });
+    }
+
+    /**
+     * Converts the iconCls array into a string on beforeGet
+     * @returns {String}
+     * @protected
+     */
+    beforeGetIconCls() {
+        let iconCls = this._iconCls;
+
+        if (Array.isArray(iconCls)) {
+            return iconCls.join(' ');
+        }
+
+        return iconCls;
+    }
+
+    /**
+     * Triggered before the iconCls config gets changed. Converts the string into an array if needed.
+     * @param {Array|String|null} value
+     * @param {Array|String|null} oldValue
+     * @returns {Array}
+     * @protected
+     */
+    beforeSetIconCls(value, oldValue) {
+        if (value && !Array.isArray(value)) {
+            value = value.split(' ').filter(Boolean);
+        }
+
+        return value;
+    }
+ 
+    /**
+     * close the dialog in main thread
+     */
+    close() {
+        let me = this;
+
+        Neo.main.addon.Dialog.close({
+            id: me.id,
+            appName: me.appName
+        });
+    }
+
+    /**
+     * @protected
+     */
+    createHeader() {
+        let me      = this,
+            cls     = ['neo-header-toolbar', 'neo-toolbar'],
+            headers = me.headers || [],
+            headerConfigCopy = {...me.headerConfig};
+        delete headerConfigCopy.items;
+
+        me.headerToolbar = Neo.create({
+            module   : HeaderToolbar,
+            actions: [{action: 'close', iconCls: 'fa-solid fa-xmark'}],
+            appName  : me.appName,
+            cls,
+            dock     : 'top',
+            flex     : 'none',
+            id       : me.getHeaderToolbarId(),
+            listeners: {headerAction: me.executeHeaderAction, scope: me},
+            items    : [{
+                cls: me.iconCls,
+                flag     : 'dialog-header-icon',
+            }, {
+                ntype    : 'label',
+                cls      : ['neo-panel-header-text', 'neo-label'],
+                flag     : 'title-label',
+                removeDom: !me.title,
+                text     : me.title
+            }, ...me.headerConfig.items],
+            
+            ...headerConfigCopy
+        });
+
+        headers.unshift(me.headerToolbar);
+
+        me.headers = headers;
+    }
+
+    /**
+     * {Object} data
+     */
+    executeHeaderAction(data) {
+        let me = this,
+
+        map = {
+            close   : me.close
+        };
+
+        map[data.action]?.call(me, data);
+
+        me.fire('headerAction', {
+            dialog: me,
+            ...data
+        })
+    }
+
+    /**
+     * Returns the id of the header toolbar
+     * @returns {String}
+     */
+    getHeaderToolbarId() {
+        return this.id + '-header-toolbar';
+    }
+
+    /**
+     * Shows the dialog (with / without Modal) in main thread
+     * @param {Boolean} modal
+     */
+    async show(modal = true) {
+        let me = this;
+        await Neo.timeout(20);
+
+        Neo.main.addon.Dialog[modal ? 'showModal': 'show']({
+            id: me.id,
+            appName: me.appName
+        });
+    }
+}
+
+Neo.applyClassConfig(Dialog);
+
+export default Dialog;

package/src/dialog/header/Toolbar.mjs

@@ -48,8 +48,8 @@ class Toolbar extends Base {
      */
     afterSetTitle(value, oldValue) {
         this.down({flag: 'title-label'})?.set({
-            removeDom: !value,
-            text     : value
+            hidden: !value,
+            text  : value
         })
     }
 
@@ -62,11 +62,11 @@ class Toolbar extends Base {
             items   = me.items || [];
 
         items.push({
-            ntype    : 'label',
-            cls      : ['neo-panel-header-text', 'neo-label'],
-            flag     : 'title-label',
-            removeDom: !me.title,
-            text     : me.title
+            ntype : 'label',
+            cls   : ['neo-panel-header-text', 'neo-label'],
+            flag  : 'title-label',
+            hidden: !me.title,
+            text  : me.title
         });
 
         if (me.actions) {

package/src/form/field/Select.mjs

@@ -193,17 +193,23 @@ class Select extends Picker {
         let me = this,
             filters;
 
-        if (value && me.useFilter) {
-            filters = value.filters || [];
+        if (value) {
+            if (me.useFilter) {
+                filters = value.filters || [];
+
+                filters.push({
+                    includeEmptyValues: true,
+                    operator          : me.filterOperator,
+                    property          : me.displayField,
+                    value             : value.get(me.value)?.[me.displayField] || me.value
+                });
 
-            filters.push({
-                includeEmptyValues: true,
-                operator          : me.filterOperator,
-                property          : me.displayField,
-                value             : value.get(me.value)?.[me.displayField] || me.value
-            });
+                value.filters = filters
+            }
 
-            value.filters = filters
+            if (me.list) {
+                me.list.store = value
+            }
         }
     }
 

package/src/form/field/Switch.mjs

@@ -0,0 +1,43 @@
+import CheckBox from './CheckBox.mjs';
+
+/**
+ * @class Neo.form.field.Switch
+ * @extends Neo.form.field.CheckBox
+ */
+class Switch extends CheckBox {
+    static config = {
+        /**
+         * @member {String} className='Neo.form.field.Switch'
+         * @protected
+         */
+        className: 'Neo.form.field.Switch',
+        /**
+         * @member {String} ntype='switchfield'
+         * @protected
+         */
+        ntype: 'switchfield',
+        /**
+         * @member {String[]} baseCls=['neo-checkboxfield']
+         */
+        baseCls: ['neo-switchfield'],
+        /**
+         * @member {Object} _vdom
+         */
+        _vdom:
+            {cn: [
+                {tag: 'label', cls: ['neo-checkbox-label'], cn: [
+                    {tag: 'span', cls: []},
+                    {tag: 'input', cls: ['neo-checkbox-input']},
+                    {tag: 'i', cls: ['neo-checkbox-icon'], removeDom: true},
+                    {tag: 'span', cls: ['neo-checkbox-value-label']}
+                ]},
+                {cls: ['neo-error-wrapper'], removeDom: true, cn: [
+                    {cls: ['neo-error']}
+                ]}
+            ]}
+    }
+}
+
+Neo.applyClassConfig(Switch);
+
+export default Switch;

package/src/main/addon/Dialog.mjs

@@ -0,0 +1,68 @@
+import Base      from '../../core/Base.mjs';
+import DomAccess from '../DomAccess.mjs'
+/**
+ * Addon for component.Dialog
+ * @class Neo.main.addon.Dialog
+ * @extends Neo.core.Base
+ * @singleton
+ */
+class Dialog extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.main.addon.Dialog'
+         * @protected
+         */
+        className: 'Neo.main.addon.Dialog',
+        /**
+         * Remote method access for other workers
+         * @member {Object} remote={app: [//...]}
+         * @protected
+         */
+        remote: {
+            app: [
+                'close',
+                'show',
+                'showModal'
+            ]
+        },
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @returns {Boolean}
+     */
+    close(data) {
+        DomAccess.getElement(data.id).close()
+        return true;
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @returns {Boolean}
+     */
+    show(data) {
+        DomAccess.getElement(data.id).show()
+        return true;
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @returns {Boolean}
+     */
+    showModal(data) {
+        DomAccess.getElement(data.id).showModal()
+        return true;
+    }
+}
+
+let instance = Neo.applyClassConfig(Dialog);
+
+export default instance;