efront 3.21.6 → 3.22.4

package/coms/zimoli/table.js

@@ -12,16 +12,15 @@ var moveMargin = function (element, movePixels) {
         marginRight: movePixels ? -movePixels + "px" : ""
     });
 };
-
 var markRowTds = function (tr, deltas, colstart, colend) {
     var inc = 0;
     var collections = [];
-    [].map.call(tr.children, function (td) {
+    Array.prototype.forEach.call(tr.children, function (td) {
         while (deltas[inc] > 0) {
             deltas[inc++]--;
         }
-        var colspan = +td.getAttribute("colspan") || 1;
-        var rowspan = +td.getAttribute("rowspan") || 1;
+        var colspan = getColspan(td);
+        var rowspan = getRowspan(td);
         rowspan = rowspan > 1 ? rowspan - 1 : 0;
         colspan = colspan > 1 ? colspan - 1 : 0;
         for (var cx = inc, dx = colspan + inc; cx <= dx; cx++) {
@@ -40,39 +39,121 @@ var markRowTds = function (tr, deltas, colstart, colend) {
     });
     return collections;
 };
-var getRowsOfTdsByCol = function (table, start, end) {
-    var savedRowDeltas = [];
-    var savedCollections = [];
-    [].map.call(table.children, function (tr) {
-        if (trElementReg.test(tr.tagName)) {
-            var collections = markRowTds(tr, savedRowDeltas, start, end);
-            savedCollections.push(collections);
+var forEachRow = function (tbody, call) {
+    for (var tr of tbody.children) {
+        if (isTableRow(tr)) {
+            call(tr);
         }
         else {
-            var collections = getRowsOfTdsByCol(tr, start, end);
-            savedCollections.push.apply(savedCollections, collections);
+            for (var c of tr.children) if (isTableRow(c)) call(c);
         }
+    }
+}
+var getRowsOfTdsByCol = function (table, start, end) {
+    var savedCollections = [];
+    var thead = getThead(table);
+    var tbody = getTbody(table);
+    var savedRowDeltas;
+    if (thead) savedRowDeltas = [], forEachRow(thead, function (tr) {
+        var collections = markRowTds(tr, savedRowDeltas, start, end);
+        savedCollections.push(collections);
+    });
+    if (tbody) savedRowDeltas = [], forEachRow(tbody, function (tr) {
+        var collections = markRowTds(tr, savedRowDeltas, start, end);
+        savedCollections.push(collections);
     });
     return savedCollections;
 }
 var getTdsByCol = function (table, start, end) {
     return [].concat.apply([], getRowsOfTdsByCol(table, start, end));
 };
+var resizeT = function (t, w) {
+    if (!w) {
+        var w = 0;
+        for (var cx = 0, dx = t.children.length; cx < dx; cx++) {
+            w += t.children[cx].offsetWidth;
+        }
+    }
+    css(t, { width: w });
+}
+var getThead = function (table) {
+    for (var c of table.children) {
+        if (/^thead$/i.test(c.tagName) || c.hasAttribute('thead')) return c;
+    }
+};
+var getTbody = function (table) {
+    for (var c of table.children) {
+        if (/^tbody$/i.test(c.tagName) || c.hasAttribute("tbody")) return c;
+    }
+};
+var getTfoot = function (table) {
+    for (var c of table.children) {
+        if (/^tfoot$/i.test(c.tagName) || c.hasAttribute("tfoot")) return c;
+    }
+};
+var isTableRow = function (e) {
+    return trElementReg.test(e.tagName);
+};
+var getRowspan = function (e) {
+    return +e.getAttribute('rowspan') || 1;
+};
+var getColspan = function (e) {
+    return +e.getAttribute('colspan') || 1;
+}
+var resizeColumn = function (target, targetW) {
+    var deltaW = targetW - target.offsetWidth;
+    forEachRow(this, function (tr) {
+        resizeT(tr, tr.offsetWidth + deltaW);
+    });
+    for (var c of this.children) {
+        if (!isTableRow(c)) {
+            var tr = c.querySelector('tr');
+            if (!tr) continue;
+            c.style.width = tr.style.width;
+        }
+    }
+    var { colstart, colend } = target;
+    if (isEmpty(colstart) || isEmpty(colend)) return;
+    var ts = getRowsOfTdsByCol(this, colstart, colend);
+    for (var cs of ts) {
+        var c = cs[cs.length - 1];
+        var w = 0;
+        for (var c of cs) {
+            w += c.offsetWidth;
+        }
+        if (!cs.length) continue;
+        w = targetW - w;
+        while (w !== 0) {
+            var c = cs.pop();
+            var w0 = c.offsetWidth + w;
+            if (w0 < 0) {
+                w = -w0;
+                w0 = w;
+            }
+            else {
+                w = 0;
+            }
+            if (targetW !== w) css(c, { width: w0 });
+        }
+    }
+};
 var resizeTarget = function (event) {
     var { resizing } = this;
     if (!resizing) return;
     event.moveLocked = true;
     var { restX, target } = resizing;
-    var targetX = event.clientX - restX;
-    target.style.width = targetX + "px";
+    var targetW = event.clientX - restX;
+    if (targetW < 20) targetW = 20;
+    resizeColumn.call(this, target, targetW);
     resizing.clientX = event.clientX;
+    setFixedColumn.call(this);
 };
 var getFirstSingleColCell = function (table, col) {
     var tds = getTdsByCol(table, col, col);
     while (tds.length) {
         var td = tds.shift();
-        var colspan = td.getAttribute("colspan") || 1;
-        if (1 === +colspan) return td;
+        var colspan = getColspan(td);
+        if (1 === colspan) return td;
     }
 }
 var adaptTarget = function (event) {
@@ -122,7 +203,7 @@ function enrichField(f) {
     }
     else switch (f.type) {
         case "text":
-            width = 30;
+            width = 200;
             break;
         case "input":
             width = 200;
@@ -144,92 +225,214 @@ function enrichField(f) {
     }
     if (width > 600) width = 600;
     f.width = width + 60;
+    if (!f.key && f.options && isEmpty(f.fixed)) {
+        f.fixed = true;
+    }
 }
+var tbodyHeight = function (tbody) {
+    return { 'max-height': ((innerHeight - getScreenPosition(tbody).top - 8) / 36 | 0) * 36 }
+};
 
+var setFixed = function (children, scrolled, left, borderRight) {
+    var setBorderRight = function (fixedLeft) {
+        var end = fixedLeft[fixedLeft.length - 1];
+        if (end && end.style[left]) css(end, {
+            [borderRight]: '1px solid #0006'
+        });
+    };
+    var fixedElements = [];
+    var offset = 0;
+    var fixedWidth = 0;
+    for (var c of children) {
+        var pc = getScreenPosition(c);
+        var isfixed = c.hasAttribute('fixed');
+        if (fixedWidth + scrolled > offset && fixedWidth + pc.width < this.clientWidth / 3) {
+            if (isfixed) {
+                css(c, { [left]: scrolled - offset + fixedWidth, [borderRight]: '' });
+                fixedElements.push(c);
+                fixedWidth += pc.width;
+            }
+        }
+        else {
+            setBorderRight(fixedElements);
+            if (isfixed && c.style[left]) {
+                css(c, { [left]: '', [borderRight]: '' })
+                fixedElements.push(c);
+            }
+        }
+        offset += pc.width;
+    }
+    setBorderRight(fixedElements);
+    for (var f of fixedElements) {
+        var cols = getRowsOfTdsByCol(this, f.colstart, f.colend);
+        for (var c of cols) css(c[0], {
+            [left]: f.style[left],
+            [borderRight]: f.style[borderRight]
+        });
+    }
+
+};
+
+
+var setFixedColumn = function () {
+    var thead = getThead(this);
+    if (!thead) return;
+    if (!isTableRow(thead)) thead = thead.querySelector('tr');
+    var children = Array.prototype.slice.call(thead.children);
+    var lastChild = children[children.length - 1];
+    if (!lastChild) return;
+    var deltaW = thead.scrollWidth - lastChild.offsetWidth;
+    if (this.clientWidth > deltaW + 200) {
+        css(lastChild, { width: this.clientWidth - deltaW });
+        css(thead, { width: this.clientWidth });
+        resizeColumn.call(this, lastChild, this.clientWidth - deltaW);
+    }
+    setFixed.call(this, children, this.scrollLeft, 'left', 'borderRight');
+    setFixed.call(this, children.reverse(), this.scrollWidth - this.clientWidth - this.scrollLeft, 'right', 'borderLeft');
+    var tfoot = getTfoot(this);
+    if (tfoot) {
+        css(tfoot, { left: this.scrollLeft });
+    }
+};
+var setClass = function (tds, cls, old) {
+    tds.forEach(td => td[cls] = true);
+    old.forEach(td => { if (!td[cls]) removeClass(td, cls) });
+    tds.forEach(td => { addClass(td, cls); delete td[cls] });
+};
+var getTdsOfSameRow = function (td) {
+    var tds = [td];
+    var tmp = td;
+    var rowspan = getRowspan(td);
+    var { colstart, colend } = td;
+    while (tmp) {
+        tmp = tmp.previousElementSibling;
+        if (!tmp) break;
+        if (colstart - tmp.colend > 1) break;
+        if (getRowspan(tmp) > rowspan) break;
+        tds.push(tmp);
+        colstart = tmp.colstart;
+    };
+    tmp = td;
+    while (tmp) {
+        tmp = tmp.nextElementSibling;
+        if (!tmp) break;
+        if (tmp.colstart - colend > 1) break;
+        if (getRowspan(tmp) > rowspan) break;
+        tds.push(tmp);
+        colend = tmp.colend;
+    }
+    var tr = td.parentNode;
+    while (rowspan > 1) {
+        tr = tr.nextElementSibling;
+        if (!tr) break;
+        for (var c of tr.children) {
+            if (c.colstart >= colstart && c.colend <= colend) {
+                if (getRowspan(c) <= rowspan) {
+                    tds.push(c);
+                }
+            }
+        }
+        rowspan--;
+    }
+    return tds;
+};
 function table(elem) {
     var tableElement = isElement(elem) ? elem : document.createElement("table");
     var activeCols = [];
-    var adaptCursor = adaptTarget.bind(tableElement);
-    var off;
-    tableElement.init = function () {
-        off = on("mousemove")(window, adaptCursor);
-    };
-    tableElement.dispose = tableElement.destroy = function () {
-        off();
-    };
-    on("append")(tableElement, tableElement.init);
-    on("remove")(tableElement, tableElement.destroy);
-    if (isMounted(tableElement)) tableElement.init();
-
+    bind('mousemove')(tableElement, adaptTarget);
     moveupon(tableElement, {
         start(event) {
             if (this.resizing) event.preventDefault();
         },
         move: resizeTarget,
     });
+    var activeRows = [];
     onmousemove(tableElement, function (event) {
+        if (table.resizing) return;
+        var tbody = getTbody(table);
+        a: if (tbody) {
+            var tr = getTargetIn(tbody, event.target, false);
+            if (!tr) break a;
+            var td = getTargetIn(tr, event.target, false);
+            if (!td) break a;
+            var tds = getTdsOfSameRow(td);
+            setClass(tds, 'x-ing', activeRows);
+            activeRows = tds;
+            return;
+        }
         if (!thead) {
-            [thead] = table.getElementsByTagName("thead");
-            if (!thead) thead = table.querySelector('[thead]');
+            thead = getThead(table);
         }
         if (!getTargetIn(thead, event.target)) return;
-
         var tds = getTargetIn(cellMatchManager, event.target);
-        if (!isArray(tds)) tds = [];
-        tds.map(function (td) {
-            td.ying = true;
-        });
-        activeCols.map(function (td) {
-            if (!td.ying) removeClass(td, "y-ing");
-        });
-        activeCols = tds.map(function (td) {
-            addClass(td, "y-ing");
-            delete td.ying;
-            return td;
-        });
+        setClass(tds, 'y-ing', activeCols);
+        activeCols = tds;
     });
     onmouseleave(tableElement, function () {
-        activeCols.map(function (td) {
+        activeCols.forEach(function (td) {
             removeClass(td, "y-ing");
         });
+        activeRows.forEach(function (td) {
+            removeClass(td, 'x-ing');
+        });
     });
     var table = tableElement;
     var thead;
+    var markedRows = false;
     var cellMatchManager = function (element) {
-        if (!thead) {
-            [thead] = table.getElementsByTagName("thead");
-            if (!thead) thead = table.querySelector('[thead]');
-        }
-        if (table.resizing) return false;
+        if (!thead) thead = getThead(table);
         if (!getTargetIn(thead, element)) return false;
         if (!tdElementReg.test(element.tagName)) return false;
-        var savedRowDeltas = [];
-        [].map.call(thead.children, function (tr) {
-            markRowTds(tr, savedRowDeltas);
-        });
+        if (!markedRows) {
+            var savedRowDeltas = [];
+            Array.prototype.forEach.call(thead.children, function (tr) {
+                markRowTds(tr, savedRowDeltas);
+            });
+            markedRows = true;
+        }
         var { colstart, colend } = element;
         return getTdsByCol(table, colstart, colend);
     };
-    table.dragbox = function () {
-        return thead;
+
+    table.useIncrease = false;
+    var _vbox = function () {
+        table.$Left = function (x) {
+            if (isFinite(x)) this.scrollLeft = x;
+            setFixedColumn.call(this);
+            return this.scrollLeft;
+        };
+        vbox(table, 'x');
     };
-    var tbodyHeight = e => ({ 'max-height': ((innerHeight - getScreenPosition(table).top - 46) / 32 | 0) * 32 + 36 });
     care(table, function ([fields, data]) {
+        if (_vbox) _vbox(), _vbox = null;
         thead = null;
         fields.forEach(enrichField);
         remove(this.children);
         this.innerHTML = template;
-
+        markedRows = false;
+        this.style.display = 'block';
         render(this, {
             fields,
-            tbody() {
+            isEmpty,
+            tbody(e) {
                 var e = list.apply(null, arguments);
-                css(e, tbodyHeight());
+                css(e, tbodyHeight(e));
+                css(e, { width: this.adapter.offsetWidth, display: 'block' });
                 return e;
             },
+            thead(t) {
+                var tr = document.createElement('thead');
+                tr.renders = [function () {
+                    resizeT(this.firstChild)
+                }];
+                css(tr, { display: 'block' });
+                appendChild(tr, Array.prototype.slice.call(t.children));
+                return tr;
+            },
             tbodyHeight,
             data,
             adapter: null,
+            resizeT,
             model,
             sort(f) {
                 f.sign = f.sign > 0 ? -1 : 1;
@@ -245,6 +448,8 @@ function table(elem) {
                 css(target, { width: f.width });
             },
             a: button,
+            setFixedColumn,
+            pagination
         }, this.$parentScopes.concat(this.$scope));
     })
     autodragchildren(
@@ -257,6 +462,7 @@ function table(elem) {
                 var [f] = fields.splice(src - 1, 1);
                 fields.splice(dst - 1, 0, f);
             }
+            markedRows = false;
             var children = parentNode.children;
             var srcElement = children[src];
             var dstElement = children[rel];
@@ -290,5 +496,8 @@ function table(elem) {
             }
         }
     );
+    resizingList.set(table);
+    on("resize")(table, setFixedColumn);
+    on("scroll")(table, setFixedColumn);
     return table;
 }

package/coms/zimoli/table.less

@@ -7,12 +7,11 @@
 
             >th,
             >td {
-                box-shadow: 1px 0 0 0 #00000033, -1px 0 0 0 #00000033;
+                &:not(.y-ing) {
+                    box-shadow: 1px 0 0 0 #00000033, -1px 0 0 0 #00000033;
+                }
             }
 
-            &:insert {
-                background: #999;
-            }
         }
     }
 
@@ -32,12 +31,22 @@ table,
     vertical-align: top;
 }
 
-& {
-    outline: 1px solid #0006;
+
+tr {
+    position: relative;
+    white-space: nowrap;
+    width: 100%;
 }
 
+th,
+td {
+    white-space: normal;
+    height: 100%;
+    padding: 2px 10px;
+}
 
-.y-ing {
+.y-ing,
+.x-ing {
     &:before {
         content: "";
         position: absolute;
@@ -45,7 +54,7 @@ table,
         top: 0;
         bottom: 0;
         right: 0;
-        background-color: rgba(0, 0, 0, .06);
+        background-color: rgba(0, 60, 69, .06);
     }
 
     >* {
@@ -53,28 +62,70 @@ table,
     }
 }
 
-@cell-padding: 0 10px;
 
 & {
     // text-align: center;
+    outline: 1px solid #0006;
+    max-width: 100%;
     border-collapse: collapse;
     table-layout: fixed;
     white-space: nowrap;
+    height: auto;
+    border-radius: 3px;
+}
+
+[row-index] {
+    user-select: none;
+    width: 56px;
+    padding-right: 10px;
+    text-align: right;
+}
+
+>tbody {
+    [row-index] {
+        background: #fff;
+    }
+}
+
+[fixed] {
+    z-index: 2;
+    border-left: 1px solid transparent;
+    border-right: 1px solid transparent;
+}
+
+>tfoot {
+    width: 100%;
+    display: block;
+    position: relative;
+    color: #bbb;
+
+    >tr {
+        width: 100%;
+        display: block;
+
+        >td {
+            display: block;
+            width: 100%;
+        }
+    }
 
+    pagination {
+        width: 100%;
+    }
 }
 
 >thead {
     user-select: none;
     line-height: 36px;
+    min-width: 100%;
 
     >tr {
 
         >td,
         >th {
-            padding: @cell-padding;
             position: relative;
             color: #fff;
-            background-color: #999;
+            background-color: #395268;
         }
     }
 }
@@ -83,40 +134,36 @@ table,
     line-height: 32px;
     height: 100%;
     min-height: 30px;
-    border-top: 4px solid #6669;
-
-
-
     user-select: auto;
 
     >tr {
 
         >td,
         >th {
-            padding: @cell-padding;
             position: relative;
             overflow: hidden;
         }
 
         &:nth-of-type(odd) {
-            background-color: #eee;
-        }
 
-        &:nth-of-type(even) {
-            background-color: #fff;
+            >td,
+            >th {
+                background-color: #fff;
+            }
         }
 
-
-        &:hover {
+        &:nth-of-type(even) {
 
             >td,
-            >th {
-                background: #dddddd;
+            th {
+                background-color: #f8fbfd;
             }
         }
+
+
     }
 
-    >tr[insert] {
+    >tr[thead] {
         position: sticky;
         top: 0;
         z-index: 1;
@@ -131,18 +178,13 @@ table,
 }
 
 
-tr {
+[inline-block] {
 
     >th,
     >td {
-        background: inherit;
-
-        &[row-index] {
-            user-select: none;
-            // pointer-events: none;
-            background: #fff;
-            text-align: right;
-        }
+        white-space: nowrap;
+        overflow: hidden;
+        display: inline-block;
     }
 }
 

package/coms/zimoli/table_test.html

@@ -0,0 +1,32 @@
+<thead>
+    <tr>
+        <td colspan=2><span>1</span></td>
+        <td rowspan=2><span>th1</span></td>
+        <td>th3</td>
+        <td>th4</td>
+    </tr>
+    <tr>
+        <td>th3</td>
+        <td>th4</td>
+    </tr>
+</thead>
+<tbody>
+    <tr>
+        <td rowspan=2>td1</td>
+        <td>td2</td>
+        <td>td3</td>
+        <td>td4</td>
+    </tr>
+    <tr>
+        <td>td2</td>
+        <td>td3</td>
+        <td>td4</td>
+    </tr>
+    <tr>
+        <td rowspan=2>td1</td>
+        <td>td2</td>
+    </tr>
+    <tr>
+        <td>&nbsp;</td>
+    </tr>
+</tbody>

package/coms/zimoli/table_test.js

@@ -1,12 +1,5 @@
 function table_test() {
-    var data = new Array(100).fill(0).map(function () {
-        return {
-            name: random(random$name),
-            tel: random(random$phone)
-        };
-    });
     var datatable = table();
-    datatable.innerHTML = `<thead><tr><td colspan=2><span>1</span></td><td rowspan=2><span>th1</span></td><td>th3</td><td>th4</td></tr><tr><td>th3</td><td>th4</td></tr></thead><tbody><tr><td rowspan=2>td1</td><td>td2</td><td>td3</td><td>td4</td></tr><tr><td rowspan=2>td1</td><td>td2</td></tr></tbody>`;
-    console.log(datatable);
+    datatable.innerHTML = template;
     return datatable;
 }