@green-code-studio/objects-list 0.1.7 → 1.0.0

package/src/paginationButtons.js

@@ -1,3 +1,5 @@
+import {create} from "fast-creator";
+
 export class PaginationButtons extends HTMLElement {
     constructor() {
         super();
@@ -8,15 +10,18 @@ export class PaginationButtons extends HTMLElement {
 
     render() {
         let pagination = this.getPagination();
-        this.children.removeAll();
+        while(this.firstChild){
+            this.removeChild(this.firstChild)
+        }
         for (let pageNumber of pagination) {
             if (pageNumber == null) {
-                this.addChild('span', {text: '...'});
+                this.append(create('span', {text: '...'}));
             } else {
-                let pageButton = this.addChild('button', {
+                let pageButton = create('button', {
                     text: pageNumber + 1,
                     className: pageNumber == this.currentPage ? 'active' : ''
                 });
+                this.append(pageButton);
                 pageButton.onclick = () => {
                     if (this.onpageclick) {
                         this.onpageclick(pageNumber);
@@ -68,4 +73,4 @@ export class PaginationButtons extends HTMLElement {
     }
 }
 
-customElements.define('pagination-buttons', PaginationButtons);
+customElements.define('pagination-buttons', PaginationButtons);

package/src/style/objectsList.scss

@@ -0,0 +1,214 @@
+
+data-view {
+    border: 1px solid var(--second);
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 200px);
+    user-select: none;
+
+
+    table-view {
+        display: block;
+        flex-grow: 1;
+        overflow: auto;
+        --rowHeight: 41px;
+
+        .bodyContainer {
+
+        }
+
+        .head {
+            position: sticky;
+            top: 0;
+            z-index: 1;
+            height: 19px;
+            background: var(--second);
+
+            .column {
+                background: var(--second);
+                color: var(--textSecondColor);
+                cursor: default;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                font-weight: 700;
+                position: absolute;
+                padding: 0 10px;
+                box-sizing: border-box;
+                height: 19px;
+
+                &.ableToSort {
+                    //@extend .icon;
+                    //@extend .icon-down;
+
+                    &::before {
+                        transform: scaleY(0);
+                        transition: all 300ms ease-out;
+                        position: absolute;
+                        right: 0;
+                    }
+
+                    &[data-order="asc"] {
+                        &::before {
+                            transform: scaleY(1);
+                        }
+                    }
+
+                    &[data-order="desc"] {
+                        &::before {
+                            transform: scaleY(-1);
+                        }
+                    }
+
+                    .tableCopy {
+                        display: none;
+                    }
+
+                    cursor: pointer;
+                }
+
+
+            }
+        }
+
+        .body {
+            position: relative;
+
+            .tr {
+                display: flex;
+                position: absolute;
+                transition: top 300ms ease, background 100ms;
+                table-layout: fixed;
+                flex-direction: row;
+                animation: data-view-appear 200ms;
+
+                @keyframes data-view-appear {
+                    0% {
+                        opacity: 0;
+                    }
+                    100% {
+                        opacity: 1
+                    }
+                }
+
+
+                &.selectedMain, &:focus {
+                    outline: 2px black dashed;
+                    outline-offset: -2px;
+                }
+
+                .td {
+                    padding: 5px 10px;
+                    margin: 0;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: block;
+                    flex: 0 0 auto;
+                    box-sizing: border-box;
+                    height: var(--rowHeight);
+
+                    button, .button {
+                        font-size: 16px;
+                        margin-left: 2px;
+                    }
+                }
+            }
+        }
+
+
+    }
+
+    list-view {
+        display: block;
+        flex-grow: 1;
+        overflow: auto;
+
+        .body {
+            position: relative;
+
+            .tr {
+                display: grid;
+                position: absolute;
+                transition: top 300ms ease, background 100ms;
+                animation: data-view-appear 200ms;
+                grid-template-columns: max-content 1fr max-content;
+                width: 100%;
+                padding: 10px 0;
+
+
+                &.selectedMain, &:focus {
+                    outline: 2px black dashed;
+                    outline-offset: -2px;
+                }
+
+                button, .button {
+                    font-size: 16px;
+                    margin-left: 2px;
+                }
+
+                .icon {
+                    grid-column: 1;
+                    grid-row: 1/4;
+                    font-size: 40px;
+                    line-height: 63px;
+                }
+
+                .keyValue {
+                    grid-column: 2/4;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    line-height: 21px;
+
+
+                    &:nth-child(2), &:nth-child(3) {
+                        grid-column: 2;
+                    }
+                }
+
+                .actions {
+                    grid-column: 3;
+                    grid-row: 1/3;
+                }
+            }
+        }
+    }
+
+    .foot {
+        border-top: 1px solid var(--second);
+        display: flex;
+        justify-content: space-between;
+
+        @media (max-width: 600px) {
+            form {
+                input {
+                    width: 40px;
+
+                    &:focus {
+                        width: 200px;
+                        margin-left: -160px;
+                    }
+                }
+            }
+        }
+    }
+
+    &.infiniteScrollEnabled {
+        table-view, list-view {
+            .body {
+                height: var(--height);
+            }
+        }
+
+        pagination-buttons {
+            display: none;
+        }
+    }
+}
+
+pagination-buttons {
+    button.active {
+        background: var(--main);
+    }
+}

package/src/tableView.js

@@ -28,10 +28,11 @@ export class TableView extends AbstractView {
     refreshHeader() {
         while (this.head.firstChild) this.head.firstChild.remove();
 
-        this.head.addChild('.column.icon')
+        this.head.append(create('.column.icon'))
         for (let column of this.objectsList.visibleColumns) {
-            let node = this.head.addChild('.column')
-            node.addChild('span.name', {text: column.name});
+            let node = create('.column')
+            this.head.append(node);
+            node.append(create('span.name', {text: column.name}));
             if (column.sortName) {
                 node.classList.add('ableToSort');
                 node.dataset.sortName = column.sortName
@@ -49,7 +50,7 @@ export class TableView extends AbstractView {
                 }
             }
         }
-        this.head.addChild('.column.actions')
+        this.head.append(create('.column.actions'))
     }
 
     loadData(data, start, limit, infiniteScrollEnabled) {
@@ -65,7 +66,7 @@ export class TableView extends AbstractView {
     generateRow(data) {
         let tr = this.body.querySelector(`.tr[data-row="${data.id}"]`);
         if (!tr) {
-            tr = document.create('.tr');
+            tr = create('.tr');
             tr.draggable = true;
         }
         tr.classList.toggle('selected', this.objectsList.selected.has(data.id))
@@ -75,23 +76,27 @@ export class TableView extends AbstractView {
 
     fillRowContent(tr, data) {
         tr.lastData = data;
-        tr.children.removeAll();
-        tr.addChild('.td.icon', {className: this.objectsList.icon});
+        while(tr.firstChild){
+            tr.removeChild(tr.firstChild)
+        }
+        tr.append(create('.td.icon', {className: this.objectsList.icon}));
         for (let column of this.objectsList.visibleColumns) {
-            let td = tr.addChild('.td');
+            let td = create('.td');
+            tr.append(td);
             if (this.multiEdit && column.dataName) {
                 tr.dataset.id = data.id;
-                td.addChild('input', {
+                td.append(create('input', {
                     data: {name: column.dataName},
                     value: data[column.dataName],
                     onclick: e => e.stopPropagation(),
                     onchange: () => this.multiEditChanged(tr)
-                });
+                }));
             } else {
                 td.append(column.content?.call(column, data) || data[column.dataName] || '');
             }
         }
-        let actionsTd = tr.addChild('.td.actions');
+        let actionsTd = create('.td.actions');
+        tr.append(actionsTd);
         let actions = this.objectsList.generateActions([data], 'row');
         if (this.multiEdit && data.__isMultirowEdited) {
             actions = [
@@ -105,9 +110,10 @@ export class TableView extends AbstractView {
             ]
         }
         for (let action of actions) {
-            let actionButton = actionsTd.addChild(action.href ? 'a.button' : 'button', {
+            let actionButton = create(action.href ? 'a.button' : 'button', {
                 title: action.name
             });
+            actionsTd.append(create(actionButton));
             actionButton.classList.add('action-' + (action.action ?? 'view'));
 
             if (action.href) {
@@ -117,7 +123,7 @@ export class TableView extends AbstractView {
                 actionButton.onclick = action.command;
             }
             if (action.icon) {
-                actionButton.addChild('span', {classList: [action.icon]});
+                actionButton.append(create('span', {classList: [action.icon]}));
             } else {
                 actionButton.textContent = action.name;
             }
@@ -164,10 +170,10 @@ export class TableView extends AbstractView {
                 return x.lastElementChild.getBoundingClientRect().right - x.getBoundingClientRect().left + parseFloat(getComputedStyle(x).paddingRight);
             else
                 return 0;
-        }).max());
+        }).reduce((a, b) => Math.max(a, b), 0));
         needed.push({base: actionWidth, grow: 0});
-        let availableToGrow = this.clientWidth - needed.sum(x => x.base);
-        let sumGrow = needed.sum(x => x.grow);
+        let availableToGrow = this.clientWidth - needed.map(x => x.base).reduce((a, b) => a + b, 0);
+        let sumGrow = needed.map(x => x.grow).reduce((a, b) => a + b, 0);
         if (availableToGrow > 0 && sumGrow > 0) {
             return needed.map(x => x.base + x.grow / sumGrow * availableToGrow);
         } else {

package/webpack.config.demo.js

@@ -27,7 +27,15 @@ export default {
             {
                 test: /\.mpts$/,
                 use: ["mpts-loader"]
-            }
+            },{
+                test: /\.scss$/,
+                use: [
+                    "style-loader", // creates style nodes from JS strings
+                    "css-loader", // translates CSS into CommonJS
+                    "sass-loader" // compiles Sass to CSS, using Node Sass by default
+                ]
+
+            },
         ]
     }
 }

package/webpack.config.js

@@ -6,7 +6,8 @@ import {fileURLToPath} from 'url';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 export default {
     entry: {
-        index: './src/index.js'
+        index: './src/index.js',
+        style: './src/style/objectsList.scss',
     },
     output: {
         path: path.resolve(__dirname, './dist'),
@@ -23,6 +24,13 @@ export default {
             {
                 test: /\.mpts$/,
                 use: ["mpts-loader"]
+            },{
+                test: /\.scss$/,
+                use: [
+                    "css-loader", // translates CSS into CommonJS
+                    "sass-loader" // compiles Sass to CSS, using Node Sass by default
+                ]
+
             }
         ]
     },

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/objects-list.iml" filepath="$PROJECT_DIR$/.idea/objects-list.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/objects-list.iml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/php.xml

@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="MessDetectorOptionsConfiguration">
-    <option name="transferred" value="true" />
-  </component>
-  <component name="PHPCSFixerOptionsConfiguration">
-    <option name="transferred" value="true" />
-  </component>
-  <component name="PHPCodeSnifferOptionsConfiguration">
-    <option name="highlightLevel" value="WARNING" />
-    <option name="transferred" value="true" />
-  </component>
-  <component name="PhpStanOptionsConfiguration">
-    <option name="transferred" value="true" />
-  </component>
-  <component name="PsalmOptionsConfiguration">
-    <option name="transferred" value="true" />
-  </component>
-</project>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>