neo.mjs 4.0.39 → 4.0.40

package/buildScripts/watchThemes.mjs

@@ -0,0 +1,85 @@
+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';
+
+const 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(neoPath, 'resources/scss');
+
+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(neoPath, '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 => {
+        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 len = filename.split('/').length,
+                src = `/scss/${filename}`,
+                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);
+        });
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.0.39",
+    "version": "4.0.40",
     "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.2",
+        "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

@@ -147,6 +147,12 @@ class Base extends CoreBase {
          * @member {Number|String|null} height_=null
          */
         height_: null,
+        /**
+         * Used for hide and show and defines if the component
+         * should use css visibility:'hidden' or vdom:removeDom
+         * @member {'visible', 'remove'} hiddenType='visible'
+         */
+        hiddenType: 'visible',
         /**
          * The top level innerHTML of the component
          * @member {String|null} html_=null
@@ -402,6 +408,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
@@ -1061,6 +1078,36 @@ class Base extends CoreBase {
         return this.vnode;
     }
 
+    /**
+     * Hide the component.
+     * hiddenType: 'visible' uses css visibility.
+     * hiddenType: 'remove' uses vdom removeDom.
+     * If hiddenType 'remove' you can pass a timeout for custom css class hiding.
+     * @param {Number} timeout
+     */
+    hide(timeout) {
+        let me       = this,
+            doRemove = me.hiddenType !== 'visible';
+
+        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;
+        }
+    }
+
     /**
      *
      */
@@ -1282,6 +1329,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 +1462,26 @@ class Base extends CoreBase {
         return this.set(values, true);
     }
 
+    /**
+     * Show the component.
+     * hiddenType: 'visible' uses css visibility.
+     * hiddenType: 'remove' uses vdom removeDom.
+     */
+    show() {
+        let me    = this,
+            doAdd = me.hiddenType !== 'visible';
+
+        if (doAdd) {
+            let vdom = me.vdom;
+            vdom.removeDom = false;
+            me.vdom = vdom;
+        } else {
+            let style = me.style;
+            style.visibility = 'visible';
+            me.style = style;
+        }
+    }
+
     /**
      * Placeholder method for util.VDom.syncVdomIds to allow overriding (disabling) it
      * @param {Neo.vdom.VNode} [vnode=this.vnode]
@@ -1473,7 +1551,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;