neo.mjs 6.18.2 → 6.19.0

package/test/siesta/tests/vdom/table/Container.mjs

@@ -0,0 +1,133 @@
+import Neo        from '../../../../../src/Neo.mjs';
+import * as core  from '../../../../../src/core/_export.mjs';
+import VdomHelper from '../../../../../src/vdom/Helper.mjs';
+
+let deltas, output, vdom, vnode;
+
+StartTest(t => {
+    t.it('Remove all Table Rows', t => {
+        vdom =
+        {id: 'neo-table-container-1', cn: [
+            {tag: 'tbody', id: 'neo-table-view-1', cn: [
+                {tag: 'tr', id: 'neo-table-row-1'},
+                {tag: 'tr', id: 'neo-table-row-2'},
+                {tag: 'tr', id: 'neo-table-row-3'},
+                {tag: 'tr', id: 'neo-table-row-4'},
+                {tag: 'tr', id: 'neo-table-row-5'}
+            ]}
+        ]};
+
+        vnode = VdomHelper.create(vdom);
+
+        vdom =
+        {id: 'neo-table-container-1', cn: [
+            {tag: 'tbody', id: 'neo-table-view-1', cn: []}
+        ]};
+
+        output = VdomHelper.update({vdom, vnode}); deltas = output.deltas; vnode = output.vnode;
+
+        t.is(deltas.length, 1, 'Count deltas equals 1');
+
+        t.isDeeplyStrict(deltas, [
+            {action: 'removeAll', parentId: 'neo-table-view-1'}
+        ], 'Deltas got created successfully');
+
+        t.diag('Revert operation');
+
+        vdom =
+        {id: 'neo-table-container-1', cn: [
+            {tag: 'tbody', id: 'neo-table-view-1', cn: [
+                {tag: 'tr', id: 'neo-table-row-1'},
+                {tag: 'tr', id: 'neo-table-row-2'},
+                {tag: 'tr', id: 'neo-table-row-3'},
+                {tag: 'tr', id: 'neo-table-row-4'},
+                {tag: 'tr', id: 'neo-table-row-5'}
+            ]}
+        ]};
+
+        output = VdomHelper.update({vdom, vnode}); deltas = output.deltas; vnode = output.vnode;
+
+        t.is(deltas.length, 5, 'Count deltas equals 5');
+
+        t.isDeeplyStrict(deltas, [
+            {action: 'insertNode', index: 0, parentId: 'neo-table-view-1', outerHTML: '<tr id="neo-table-row-1"></tr>'},
+            {action: 'insertNode', index: 1, parentId: 'neo-table-view-1', outerHTML: '<tr id="neo-table-row-2"></tr>'},
+            {action: 'insertNode', index: 2, parentId: 'neo-table-view-1', outerHTML: '<tr id="neo-table-row-3"></tr>'},
+            {action: 'insertNode', index: 3, parentId: 'neo-table-view-1', outerHTML: '<tr id="neo-table-row-4"></tr>'},
+            {action: 'insertNode', index: 4, parentId: 'neo-table-view-1', outerHTML: '<tr id="neo-table-row-5"></tr>'}
+        ], 'Deltas got created successfully');
+    });
+
+    t.it('Remove all Table Rows & move 2 into a different Table', t => {
+        vdom =
+        {id: 'neo-wrapper-1', cn: [
+            {id: 'neo-table-container-1', cn: [
+                {tag: 'tbody', id: 'neo-table-view-1', cn: [
+                    {tag: 'tr', id: 'neo-table-row-1'},
+                    {tag: 'tr', id: 'neo-table-row-2'},
+                    {tag: 'tr', id: 'neo-table-row-3'},
+                    {tag: 'tr', id: 'neo-table-row-4'},
+                    {tag: 'tr', id: 'neo-table-row-5'}
+                ]}
+            ]},
+            {id: 'neo-table-container-2', cn: [
+                {tag: 'tbody', id: 'neo-table-view-2', cn: []}
+            ]}
+        ]};
+
+        vnode = VdomHelper.create(vdom);
+
+        vdom =
+        {id: 'neo-wrapper-1', cn: [
+            {id: 'neo-table-container-1', cn: [
+                {tag: 'tbody', id: 'neo-table-view-1', cn: []}
+            ]},
+            {id: 'neo-table-container-2', cn: [
+                {tag: 'tbody', id: 'neo-table-view-2', cn: [
+                    {tag: 'tr', id: 'neo-table-row-2'},
+                    {tag: 'tr', id: 'neo-table-row-4'}
+                ]}
+            ]}
+        ]};
+
+        output = VdomHelper.update({vdom, vnode}); deltas = output.deltas; vnode = output.vnode;
+
+        t.is(deltas.length, 3, 'Count deltas equals 3');
+
+        t.isDeeplyStrict(deltas, [
+            {action: 'moveNode', id: 'neo-table-row-2', index: 0, parentId: 'neo-table-view-2'},
+            {action: 'moveNode', id: 'neo-table-row-4', index: 1, parentId: 'neo-table-view-2'},
+            {action: 'removeAll', parentId: 'neo-table-view-1'}
+        ], 'Deltas got created successfully');
+
+        t.diag('Revert operation');
+
+        vdom =
+        {id: 'neo-wrapper-1', cn: [
+            {id: 'neo-table-container-1', cn: [
+                {tag: 'tbody', id: 'neo-table-view-1', cn: [
+                    {tag: 'tr', id: 'neo-table-row-1'},
+                    {tag: 'tr', id: 'neo-table-row-2'},
+                    {tag: 'tr', id: 'neo-table-row-3'},
+                    {tag: 'tr', id: 'neo-table-row-4'},
+                    {tag: 'tr', id: 'neo-table-row-5'}
+                ]}
+            ]},
+            {id: 'neo-table-container-2', cn: [
+                {tag: 'tbody', id: 'neo-table-view-2', cn: []}
+            ]}
+        ]};
+
+        output = VdomHelper.update({vdom, vnode}); deltas = output.deltas; vnode = output.vnode;
+
+        t.is(deltas.length, 5, 'Count deltas equals 5');
+
+        t.isDeeplyStrict(deltas, [
+            {action: 'insertNode',                        index: 0, parentId: 'neo-table-view-1', outerHTML: '<tr id="neo-table-row-1"></tr>'},
+            {action: 'moveNode',   id: 'neo-table-row-2', index: 1, parentId: 'neo-table-view-1'},
+            {action: 'insertNode',                        index: 2, parentId: 'neo-table-view-1', outerHTML: '<tr id="neo-table-row-3"></tr>'},
+            {action: 'moveNode',   id: 'neo-table-row-4', index: 3, parentId: 'neo-table-view-1'},
+            {action: 'insertNode',                        index: 4, parentId: 'neo-table-view-1', outerHTML: '<tr id="neo-table-row-5"></tr>'}
+        ], 'Deltas got created successfully');
+    });
+});

package/apps/portal/view/home/parts/HelloWorld.mjs

@@ -1,83 +0,0 @@
-import BaseContainer        from './BaseContainer.mjs';
-import LivePreviewContainer from '../preview/PageCodeContainer.mjs';
-
-/**
- * @class Portal.view.home.parts.HelloWorld
- * @extends Portal.view.home.parts.BaseContainer
- */
-class HelloWorld extends BaseContainer {
-    static config = {
-        /**
-         * @member {String} className='Portal.view.home.parts.HelloWorld'
-         * @protected
-         */
-        className: 'Portal.view.home.parts.HelloWorld',
-
-        cls: ['page', 'hello-world'],
-        /**
-         * @member {Object} layout=null
-         */
-//        layout: null,
-
-        responsiveConfig: {
-            oldPhone: {maxWidth: 320},
-            phone   : {maxWidth: 480},
-            tablet  : {maxWidth: 770},
-            medium  : {maxWidth: 840},
-            large   : {minWidth: 841}
-        },
-
-        responsive: {
-            medium: {layout: {ntype: 'vbox', align: 'stretch', pack: 'center'}},
-            large : {layout: {ntype: 'hbox', align: 'stretch', pack: 'center'}}
-        },
-        /**
-         * @member {Object[]} items
-         */
-        items: [{
-            ntype : 'container',
-            flex  : '1',
-            style : {padding: '2rem'},
-            layout: {ntype: 'vbox', align: 'center', pack: 'center'},
-            items : [{
-                cls : 'neo-h1',
-                flex: 'none',
-                html: 'Hello World',
-                vdom: {tag: 'h1'}
-            }, {
-                cls : 'neo-h2',
-                flex: 'none',
-                html: 'Your first code snippet',
-                vdom: {tag: 'h2'}
-            }, {
-                cls : 'neo-content',
-                flex: 'none',
-                html: 'If you understand these lines, you are ready to start with Neo.mjs',
-                vdom: {tag: 'p'}
-            }]
-        }, {
-            module: LivePreviewContainer,
-            flex  : 0.8,
-            value : [
-                "import Container from '../../../../src/container/Base.mjs';",
-                "",
-                "class MainView extends Container {",
-                "    static config = {",
-                "        className: 'Portal.view.MainView',",
-                "        layout   : {ntype:'vbox', align:'stretch'},",
-                "        items    : [{",
-                "            module: Container,",
-                "            html  : 'Hello World'",
-                "        }]",
-                "    }",
-                "}",
-                "",
-                "Neo.setupClass(MainView);"
-            ].join('\n')
-        }]
-    }
-}
-
-Neo.setupClass(HelloWorld);
-
-export default HelloWorld;

package/apps/portal/view/home/preview/PageCodeContainer.mjs

@@ -1,55 +0,0 @@
-import Container   from '../../../../../src/container/Base.mjs';
-import LivePreview from '../../learn/LivePreview.mjs';
-
-/**
- * @class Portal.view.home.preview.PageCodeContainer
- * @extends Neo.container.Base
- */
-class PageCodeContainer extends Container {
-    static config = {
-        /**
-         * @member {String} className='Portal.view.home.preview.PageCodeContainer'
-         * @protected
-         */
-        className: 'Portal.view.home.preview.PageCodeContainer',
-        /**
-         * @member {String} ntype='page-code-container'
-         * @protected
-         */
-        ntype: 'page-code-container',
-        /**
-         * @member {String[]} cls=['page-code-container']
-         * @protected
-         */
-        cls: ['page-code-container'],
-        /**
-         * @member {Object} layout={ntype:'vbox',align:'stretch',pack:'center'}
-         */
-        layout: {ntype: 'vbox', align: 'stretch', pack: 'center'},
-        /**
-         * @member {Object[]} items
-         */
-        items : [{
-            module: LivePreview,
-            cls   : ['live-preview']
-        }],
-        /**
-         * @member {String|null} value_=null
-         */
-        value_: null,
-    }
-
-    /**
-     * Triggered after the size config got changed
-     * @param {String|null} value
-     * @param {String|null} oldValue
-     * @protected
-     */
-    afterSetValue(value, oldValue) {
-        this.items[0].value = value
-    }
-}
-
-Neo.setupClass(PageCodeContainer);
-
-export default PageCodeContainer;

package/resources/scss/src/apps/portal/home/preview/PageCodeContainer.scss

@@ -1,115 +0,0 @@
-.page-code-container {
-  position: relative;
-  padding: 20px;
-
-  &::before {
-    position:absolute;
-    inset: 0;
-    opacity: .4;
-    content: "";
-    background: {
-      image   : url("../../../../../../../../resources/images/logo/neo_logo_secondary.svg");
-      size: auto 90%;
-      repeat: no-repeat;
-      position: center;
-    }
-  }
-
-  .live-preview {
-    opacity: 0.9;
-
-    .live-preview-container {
-      & > .neo-tab-header-toolbar {
-        background: var(--sem-color-surface-primary-background);
-        border-radius: 15px 15px 0 0;
-        padding-right: 10px;
-        padding-left: 14px;
-
-        .neo-button-text {
-          color: slategrey!important;
-        }
-
-        .pressed {
-          border-bottom-right-radius: 0;
-          border-bottom-left-radius: 0;
-
-          .neo-button-text {
-            color: darkslategrey !important;
-          }
-
-          .neo-tab-button-indicator {
-            background-color: darkslategrey;
-          }
-        }
-
-      }
-
-      & > .neo-tab-content-container {
-        .monaco-editor {
-          .margin, .sticky-widget-line-numbers, .active-line-number {
-            background: #263238;
-            color: #cdd3de;
-          }
-
-          .monaco-editor-background, .sticky-widget-lines-scrollable {
-            background: #1B2225;
-            color: #cdd3de;
-
-            // keys
-            .mtk1 {
-              color: #CDFF8E;
-            }
-
-            // class, extends, static
-            .mtk6 {
-              color: #8EDCF5;
-            }
-
-            // numbers
-            .mtk7 {
-              color: #D6FF00
-            }
-
-            // Comment
-            .mtk8 {
-              color: #98A8B5;
-            }
-
-            // strings
-            .mtk20 {
-              color: #D6FF00
-            }
-
-            // Classname: MainView, Container
-            .mtk22 {
-                color: #cccccc;
-            }
-
-            /**
-             * Cursor
-             *  not used
-             *  - .monaco-mouse-cursor-text
-             *  - .cursors-layer
-             *  - .cursor-line-style
-             */
-            .cursor,
-            .cursor-solid {
-              background-color: #ffffff;
-            }
-
-            // not in use
-            .important {
-              color: #FFA9A9;
-              font-style: italic;
-            }
-
-            // not in use
-            .id {
-              color: #F3A5F7;
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/resources/scss/theme-neo-light/apps/portal/learn/ContentTreeList.scss

@@ -1,23 +0,0 @@
-:root .neo-theme-neo-light { // .covid-header-container
-    .topics-tree {
-        &.neo-tree-list {
-            .neo-list-container {
-                .neo-list-item {
-                    .neo-list-item-content:before {
-                        content: unset !important;
-                    }
-
-                    &.neo-list-folder {
-                        .neo-list-item-content:before {
-                            content: unset !important;
-                        }
-
-                        &.neo-folder-open .neo-list-item-content:before {
-                            content: unset !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}