neo.mjs 4.0.39 → 4.0.42

package/buildScripts/watchThemes.mjs

@@ -0,0 +1,99 @@
+import autoprefixer from 'autoprefixer';
+import chalk        from 'chalk';
+import fs           from 'fs-extra';
+import path         from 'path';
+import postcss      from 'postcss';
+import sass         from 'sass';
+
+let cwd         = process.cwd(),
+    requireJson = path => JSON.parse(fs.readFileSync((path))),
+    packageJson = requireJson(path.resolve(cwd, 'package.json')),
+    neoPath     = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
+    mixinPath   = path.resolve(neoPath, 'resources/scss/mixins/_all.scss'),
+    scssPath    = path.resolve(cwd, 'resources/scss');
+
+if (path.sep === '\\') {
+    mixinPath = mixinPath.replace(/\\/g, '/');
+}
+
+fs.watch(scssPath, {
+    recursive: true
+}, (eventType, filename) => {
+    if (filename.endsWith('.scss')) {
+        switch(eventType) {
+            case 'change': {
+                buildFile(filename);
+            }
+        }
+    }
+});
+
+function buildFile(filename) {
+    console.log('start processing', filename);
+
+    let filePath  = path.join(scssPath, filename),
+        destPath  = path.join(cwd, 'dist/development/css', filename.replace('.scss', '.css')),
+        startDate = new Date(),
+        data, map;
+
+    data = [
+        `@use "sass:map";`,
+        `@use "sass:math";`,
+        `$neoMap: ();`,
+        `$useCssVars: true;`,
+        `@import "${mixinPath}";`
+    ].join('');
+
+    fs.readFile(filePath).then(content => {
+        try {
+            let result = sass.renderSync({
+                data          : data + content.toString(),
+                outFile       : destPath,
+                sourceMap     : true,
+                sourceMapEmbed: false
+            });
+
+            map = result.map?.toString();
+
+            if (map) {
+                // https://github.com/neomjs/neo/issues/1970
+                map = JSON.parse(map);
+
+                let filenameSlash = filename;
+
+                if (path.sep === '\\') {
+                    filenameSlash = filenameSlash.replace(/\\/g, '/');
+                }
+
+                let len = filenameSlash.split('/').length,
+                    src = `/scss/${filenameSlash}`,
+                    i   = 0;
+
+                for (; i < len; i++) {
+                    src = '../' + src;
+                }
+
+                map.sources = [src];
+            }
+
+            postcss([autoprefixer]).process(result.css, {
+                from: filePath,
+                to  : destPath,
+                map : {
+                    prev: map && JSON.stringify(map)
+                }
+            }).then(result => {
+                fs.writeFileSync(destPath, result.css, () => true);
+
+                if (result.map) {
+                    fs.writeFileSync(result.opts.to + '.map', result.map.toString());
+                }
+
+                const processTime = (Math.round((new Date - startDate) * 100) / 100000).toFixed(2);
+                console.log('Updated file:', (chalk.blue(`${processTime}s`)), destPath);
+            });
+        } catch(error) {
+            console.log('SCSS build failed for', chalk.red(filename));
+        }
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.0.39",
+    "version": "4.0.42",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -16,7 +16,8 @@
         "create-app": "node ./buildScripts/createApp.mjs",
         "generate-docs-json": "node ./buildScripts/docs/jsdocx.mjs",
         "server-start": "webpack serve -c ./buildScripts/webpack/webpack.server.config.mjs --open",
-        "test": "echo \"Error: no test specified\" && exit 1"
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "watch-themes": "node ./buildScripts/watchThemes.mjs"
     },
     "keywords": [
         "javascript",
@@ -41,7 +42,7 @@
         "chalk": "^5.0.1",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^9.3.0",
-        "cssnano": "^5.1.10",
+        "cssnano": "^5.1.11",
         "envinfo": "^7.8.1",
         "fs-extra": "^10.1.0",
         "highlightjs-line-numbers.js": "^2.8.0",
@@ -49,10 +50,10 @@
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
         "postcss": "^8.4.14",
-        "sass": "^1.52.0",
-        "webpack": "^5.72.1",
+        "sass": "^1.52.3",
+        "webpack": "^5.73.0",
         "webpack-cli": "^4.9.2",
-        "webpack-dev-server": "4.9.0",
+        "webpack-dev-server": "4.9.2",
         "webpack-hook-plugin": "^1.0.7",
         "webpack-node-externals": "^3.0.0"
     },

package/resources/scss/src/button/Base.scss

@@ -91,4 +91,4 @@
             margin: 0 0 6px 0;
         }
     }
-}
+}

package/resources/scss/src/component/Carousel.scss

@@ -0,0 +1,70 @@
+/**
+ * CAROUSEL TRANSFORM
+ */
+.neo-carousel {
+  /**
+   * VARS
+   */
+  --neo-carousel-translate-x: 0;
+  --neo-carousel-translate-y: 0;
+  --neo-carousel-transition-timing: cubic-bezier(.4,0,.2,1);
+  --neo-carousel-duration: .7s;
+
+  .neo-carousel-inner {
+    position: relative;
+    overflow: hidden;
+
+    .neo-carousel-item {
+      transition-timing-function: var(--neo-carousel-transition-timing);
+      transition-duration: var(--neo-carousel-duration);
+      transition-property: all;
+      z-index: 10;
+      inset: 0;
+      position: absolute;
+      transform: translate(var(--neo-carousel-translate-x), var(--neo-carousel-translate-y));
+    }
+  }
+}
+
+.neo-carousel--translate-x-full{
+  --neo-carousel-translate-x: -100%;
+  transform: translate(var(--neo-carousel-translate-x),var(--neo-carousel-translate-y));
+}
+.neo-carousel-translate-x-0{
+  --neo-carousel-translate-x: 0;
+  transform: translate(var(--neo-carousel-translate-x),var(--neo-carousel-translate-y));
+}
+.neo-carousel-translate-x-full{
+  --neo-carousel-translate-x: 100%;
+  transform: translate(var(--neo-carousel-translate-x),var(--neo-carousel-translate-y));
+}
+
+/**
+ * BASE STYLING
+ */
+.neo-carousel {
+  padding: 15px;
+  height: 14rem;
+  background: var(--container-background-color);
+
+  .neo-carousel-btn-bar {
+    text-align: end;
+
+    .neo-carousel-btn {
+      padding: 15px;
+      font-size: 18px;
+    }
+  }
+  .neo-carousel-inner {
+    border-radius: 5px;
+    height: 9rem;
+    overflow: hidden;
+    background-color: var(--button-active-color);
+    color: var(--button-background-color);
+
+    .neo-carousel-item {
+      height: 9rem;
+      padding: 15px;
+    }
+  }
+}

package/src/component/Base.mjs

@@ -17,6 +17,13 @@ import VNodeUtil        from '../util/VNode.mjs';
  */
 class Base extends CoreBase {
     static getStaticConfig() {return {
+        /**
+         * Valid values for hideMode
+         * @member {String[]} hideModes=['removeDom','visibility']
+         * @protected
+         * @static
+         */
+        hideModes: ['removeDom', 'visibility'],
         /**
          * True automatically applies the core/Observable.mjs mixin
          * @member {Boolean} observable=true
@@ -147,6 +154,18 @@ class Base extends CoreBase {
          * @member {Number|String|null} height_=null
          */
         height_: null,
+        /**
+         * Initial setting to hide or show the component and
+         * you can use either hide()/show() or change this config directly to change the hidden state
+         * @member {Boolean} hidden_=false
+         */
+        hidden_: false,
+        /**
+         * Used for hide and show and defines if the component
+         * should use css visibility:'hidden' or vdom:removeDom
+         * @member {String} hideMode_='visibility'
+         */
+        hideMode_: 'visibility',
         /**
          * The top level innerHTML of the component
          * @member {String|null} html_=null
@@ -402,6 +421,17 @@ class Base extends CoreBase {
         }
     }
 
+    /**
+     * Add a new cls to the vdomRoot
+     * @param {String} value
+     */
+    addCls(value) {
+        let cls = this.cls;
+
+        NeoArray.add(cls, value);
+        this.cls = cls;
+    }
+
     /**
      * Either a string like 'color: red; background-color: blue;'
      * or an object containing style attributes
@@ -520,6 +550,18 @@ class Base extends CoreBase {
         this.changeVdomRootKey('height', value);
     }
 
+    /**
+     * Triggered after the hidden config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetHidden(value, oldValue) {
+        if (!(!value && oldValue === undefined)) {
+            this[value ? 'hide' : 'show']();
+        }
+    }
+
     /**
      * Triggered after the html config got changed
      * @param {String|null} value
@@ -725,6 +767,16 @@ class Base extends CoreBase {
         return value || [];
     }
 
+    /**
+     * Triggered before the hideMode config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+     beforeSetHideMode(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'hideMode');
+    }
+
     /**
      * Triggered before the keys config gets changed.
      * Creates a KeyNavigation instance if needed.
@@ -1061,6 +1113,38 @@ class Base extends CoreBase {
         return this.vnode;
     }
 
+    /**
+     * Hide the component.
+     * hideMode: 'removeDom'  uses vdom removeDom.
+     * hideMode: 'visibility' uses css visibility.
+     * If hideMode === 'removeDom' you can pass a timeout for custom css class hiding.
+     * @param {Number} timeout
+     */
+    hide(timeout) {
+        let me       = this,
+            doRemove = me.hideMode !== 'visibility';
+
+        if (doRemove) {
+            let removeFn = function() {
+                let vdom = me.vdom;
+                vdom.removeDom = true;
+                me.vdom = vdom;
+            }
+
+            if (timeout) {
+                setTimeout(removeFn, timeout);
+            } else {
+                removeFn();
+            }
+        } else {
+            let style = me.style;
+            style.visibility = 'hidden';
+            me.style = style;
+        }
+
+        this._hidden = true;
+    }
+
     /**
      *
      */
@@ -1282,6 +1366,17 @@ class Base extends CoreBase {
         });
     }
 
+    /**
+     * Remove a cls from the vdomRoot
+     * @param {String} value
+     */
+    removeCls(value) {
+        let cls = this.cls;
+
+        NeoArray.remove(cls, value);
+        this.cls = cls;
+    }
+
     /**
      * @param {Array|Object} value
      */
@@ -1404,6 +1499,28 @@ class Base extends CoreBase {
         return this.set(values, true);
     }
 
+    /**
+     * Show the component.
+     * hideMode: 'removeDom'  uses vdom removeDom.
+     * hideMode: 'visibility' uses css visibility.
+     */
+    show() {
+        let me    = this,
+            doAdd = me.hideMode !== 'visibility';
+
+        if (doAdd) {
+            let vdom = me.vdom;
+            vdom.removeDom = false;
+            me.vdom = vdom;
+        } else {
+            let style = me.style;
+            style.visibility = 'visible';
+            me.style = style;
+        }
+
+        this._hidden = false;
+    }
+
     /**
      * Placeholder method for util.VDom.syncVdomIds to allow overriding (disabling) it
      * @param {Neo.vdom.VNode} [vnode=this.vnode]
@@ -1473,7 +1590,17 @@ class Base extends CoreBase {
             let end = performance.now();
             console.log('syncVnodeTree', me.id, end - start);
         }
+    }
+
+    /**
+     * Toggle a cls inside the vdomRoot of the component
+     * @param {String} value
+     */
+    toggleCls(value) {
+        let cls = this.cls;
 
+        NeoArray.toggle(cls, value);
+        this.cls = cls;
     }
 
     /**

package/src/component/Carousel.mjs

@@ -0,0 +1,266 @@
+import ClassSystemUtil from '../util/ClassSystem.mjs';
+import Component       from './Base.mjs';
+import Store           from '../data/Store.mjs';
+
+/**
+ * @class Neo.component.Carousel
+ * @extends Neo.component.Base
+ */
+class Carousel extends Component {
+    /**
+     * Defines the currently visible item in the middle
+     * This gets updated everytime a button is clicked to reflect the current order
+     * @member {Number} itemIndex=1
+     */
+    itemIndex = 1
+    /**
+     * Defines the order of the item in the carousel
+     * This gets updated everytime a button is clicked to reflect the current order
+     * @member {String[]} positionArray
+     */
+    positionArray = ['neo-carousel--translate-x-full', 'neo-carousel-translate-x-0', 'neo-carousel-translate-x-full']
+
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.component.Carousel'
+         * @protected
+         */
+        className: 'Neo.component.Carousel',
+        /**
+         * @member {String} ntype='carousel'
+         * @protected
+         */
+        ntype: 'carousel',
+        /**
+         * @member {String[]} cls=['neo-carousel']
+         */
+        cls : ['neo-carousel'],
+        /**
+         * Custom cls added to each item
+         * This is only a single string
+         *
+         * @member {String|null} itemCls=null
+         */
+        itemCls: null,
+        /**
+         * Template for each item
+         * The format is the same as for literals,
+         * but it is a string instead of surrounding "`"
+         * @member {String|null} tpl=null
+         * @example
+         *     record = {foo: ... , bar: ...}
+         *     "[{cls: 'css-foo-class', html: '${foo}'}, {html: '${baa}'}]"
+         */
+        itemTpl_: null,
+        /**
+         * Store to be used.
+         *
+         * @member {Neo.data.Store|null} store=null
+         */
+        store_: null,
+        /**
+         * @member {Object} _vdom
+         */
+        _vdom:
+        {cn: [
+            {cls: ['neo-carousel'], cn: [
+                {cls: ['neo-carousel-btn-bar'], cn: [
+                    {tag: 'a', 'data-carouselaction': 'back',    cls: ['neo-carousel-btn', 'fa', 'fa-chevron-left']},
+                    {tag: 'a', 'data-carouselaction': 'forward', cls: ['neo-carousel-btn', 'fa', 'fa-chevron-right']}
+                ]},
+                {cls: ['neo-carousel-inner'], cn: []}
+            ]}
+        ]}
+    }}
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me           = this,
+            domListeners = me.domListeners;
+
+        domListeners.push({
+            click: {
+                fn      : me.onCarouselBtnClick,
+                delegate: '.neo-carousel-btn',
+                scope   : me
+            }
+        });
+
+        me.domListeners = domListeners;
+    }
+
+    /**
+     * Triggered after the store config got changed
+     * @param {Neo.data.Store|Object|null} value
+     * @param {Neo.data.Store|null} oldValue
+     * @protected
+     */
+    afterSetStore(value, oldValue) {
+        let me = this;
+
+        value?.on({
+            load : 'onStoreLoad',
+            scope: me
+        });
+
+        value?.getCount() > 0 && me.onStoreLoad();
+    }
+
+    /**
+     * Ensure the itemTpl is setup correctly to match a valid JSON
+     * @param {String} value
+     * @returns {String}
+     * @protected
+     */
+    beforeSetItemTpl(value) {
+        let itemTpl = value.replaceAll('\'', '"');
+
+        itemTpl = itemTpl.replace(/(\w+:)|(\w+ :)/g, function(matchedStr) {
+            return `"${matchedStr.substring(0, matchedStr.length - 1)}":`;
+        });
+
+        return itemTpl;
+    }
+
+    /**
+     * Triggered before the store config gets changed.
+     * @param {Neo.data.Store|Object|null} value
+     * @param {Neo.data.Store|null} oldValue
+     * @returns {Neo.data.Store}
+     * @protected
+     */
+    beforeSetStore(value, oldValue) {
+        oldValue?.destroy();
+        return ClassSystemUtil.beforeSetInstance(value, Store);
+    }
+
+    /**
+     * Create the initial three items and add them to the vdom
+     */
+    createBaseItems() {
+        let me       = this,
+            vdom     = me._vdom,
+            itemRoot = me.#getItemRoot(),
+            items    = [],
+            i        = 0;
+
+        for (i; i < 3; i++) {
+            items.push(me.createItem(i, i));
+        }
+
+        itemRoot.cn = items;
+        me.vdom = vdom;
+    }
+
+    /**
+     * Everytime we rotate we create items
+     * @param {Number} recordIndex   - index inside store
+     * @param {Number} positionIndex - based on positionArray
+     * @returns {Object}
+     */
+    createItem(recordIndex, positionIndex) {
+        let me            = this,
+            itemCls       = me.itemCls,
+            positionArray = me.positionArray,
+            store         = me.store,
+            data          = store.getAt(recordIndex),
+            itemTpl       = me.#formatTpl(me.itemTpl, data),
+
+        newItem = {
+            cls: [positionArray[positionIndex], 'neo-carousel-item'],
+            cn : itemTpl,
+            recordIndex
+        };
+
+        itemCls && newItem.cls.push(itemCls);
+
+        return newItem;
+    }
+
+    /**
+     * Rotate the three items and fill in a new record
+     * @param {Object} event
+     * @param {Object} event.target - clicked button
+     */
+    onCarouselBtnClick(event) {
+        let me            = this,
+            action        = event.target.data.carouselaction,
+            store         = me.store,
+            countItems    = store.getCount(),
+            vdom          = me.vdom,
+            index         = me.itemIndex,
+            positionArray = me.positionArray,
+            root          = me.#getItemRoot(),
+            newRecordIndex, positionCls, recordIndex, vdomCls;
+
+        if (action === 'forward') {
+            vdomCls        = 'neo-carousel-translate-x-full';
+            index          = index + 2
+            newRecordIndex = index % countItems;
+
+            me.itemIndex = newRecordIndex - 1;
+            positionArray = me.#arrayRotate(positionArray, -1);
+        } else {
+            vdomCls        = 'neo-carousel--translate-x-full';
+            index          = index - 2;
+            newRecordIndex = index < 0 ? (countItems + index) : index;
+
+            me.itemIndex = newRecordIndex + 1;
+            positionArray = me.#arrayRotate(positionArray, 1);
+        }
+
+        me.positionArray = positionArray;
+
+        root.cn = root.cn.map(function(cn, mappingIndex) {
+            positionCls = positionArray[mappingIndex];
+            recordIndex = cn.recordIndex;
+
+            cn.cls.shift();
+            cn.cls.unshift(positionCls);
+
+            // Update new Record
+            if (positionCls === vdomCls) {
+                recordIndex = newRecordIndex;
+                cn          = me.createItem(recordIndex, mappingIndex);
+            }
+
+            return cn;
+        })
+
+        me.vdom = vdom;
+    }
+
+    /**
+     * As soon as the store is loaded we want to
+     * - create the three items
+     * - fill the first three records
+     */
+    onStoreLoad() {
+        this.createBaseItems();
+    }
+
+    /**
+     * HELPERS
+     */
+    #getItemRoot() {
+        return this.vdom.cn[0].cn[1];
+    }
+
+    #arrayRotate(arr, n) {
+        return n ? [...arr.slice(n, arr.length), ...arr.slice(0, n)] : arr;
+    }
+
+    #formatTpl(tpl, record) {
+        let resultStr = tpl.replace(/\$\{[^\}]+\}/g, (m) => record[m.slice(2, -1).trim()]);
+
+        return JSON.parse(resultStr);
+    }
+}
+
+Neo.applyClassConfig(Carousel);
+
+export default Carousel;

package/src/form/field/trigger/Base.mjs

@@ -40,10 +40,6 @@ class Base extends Component {
          * @member {Neo.form.field.Base|null} field=null
          */
         field: null,
-        /**
-         * @member {Boolean} hidden_=false
-         */
-        hidden_: false,
         /**
          * @member {String|null} iconCls_=null
          */