efront 3.22.2 → 3.22.3

package/coms/zimoli/table.js

@@ -16,7 +16,7 @@ var moveMargin = function (element, movePixels) {
 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++]--;
         }
@@ -40,32 +40,95 @@ 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 forEachTableRow = function (table, call) {
+    for (var tr of table.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 savedRowDeltas = [];
+    var savedCollections = [];
+    forEachTableRow(table, 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 isTableRow = function (e) {
+    return trElementReg.test(e.tagName);
+};
+var resizeColumn = function (target, targetW) {
+    var deltaW = targetW - target.offsetWidth;
+    forEachTableRow(this, function (tr) {
+        resizeT(tr, tr.offsetWidth + deltaW);
+    });
+    for (var c of this.children) {
+        if (!isTableRow(c)) {
+            var tr = c.querySelector('tr');
+            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;
+        }
+        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);
@@ -122,7 +185,7 @@ function enrichField(f) {
     }
     else switch (f.type) {
         case "text":
-            width = 30;
+            width = 200;
             break;
         case "input":
             width = 200;
@@ -144,7 +207,71 @@ 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 - 16) / 32 | 0) * 32 }
+};
+
+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');
+};
 
 function table(elem) {
     var tableElement = isElement(elem) ? elem : document.createElement("table");
@@ -169,11 +296,10 @@ function table(elem) {
     });
     onmousemove(tableElement, function (event) {
         if (!thead) {
-            [thead] = table.getElementsByTagName("thead");
-            if (!thead) thead = table.querySelector('[thead]');
+            thead = getThead(table);
         }
         if (!getTargetIn(thead, event.target)) return;
-
+        if (table.resizing) return;
         var tds = getTargetIn(cellMatchManager, event.target);
         if (!isArray(tds)) tds = [];
         tds.map(function (td) {
@@ -195,41 +321,67 @@ function table(elem) {
     });
     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 (!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 = [];
+            [].map.call(thead.children, function (tr) {
+                markRowTds(tr, savedRowDeltas);
+            });
+            markedRows = true;
+        }
         var { colstart, colend } = element;
         return getTdsByCol(table, colstart, colend);
     };
+
     table.dragbox = function () {
         return thead;
     };
-    var tbodyHeight = e => ({ 'max-height': ((innerHeight - getScreenPosition(table).top - 46) / 32 | 0) * 32 + 36 });
+    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');
+    };
     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 +397,7 @@ function table(elem) {
                 css(target, { width: f.width });
             },
             a: button,
+            setFixedColumn,
         }, this.$parentScopes.concat(this.$scope));
     })
     autodragchildren(
@@ -257,6 +410,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 +444,8 @@ function table(elem) {
             }
         }
     );
+    resizingList.set(table);
+    on("resize")(table, setFixedColumn);
+    on("scroll")(table, setFixedColumn);
     return table;
 }

package/coms/zimoli/table.less

@@ -32,10 +32,20 @@ table,
     vertical-align: top;
 }
 
-& {
-    outline: 1px solid #0006;
+
+tr {
+    position: relative;
+    white-space: nowrap;
+    width: 100%;
 }
 
+th,
+td {
+    white-space: normal;
+    height: 100%;
+    border: 1px solid transparent;
+    padding: 1px 10px;
+}
 
 .y-ing {
     &:before {
@@ -45,7 +55,7 @@ table,
         top: 0;
         bottom: 0;
         right: 0;
-        background-color: rgba(0, 0, 0, .06);
+        background-color: rgba(0, 30, 69, .06);
     }
 
     >* {
@@ -53,28 +63,47 @@ 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;
 }
 
 >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,27 +112,30 @@ 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;
+
+            >td,
+            >th {
+                background-color: #fff;
+            }
         }
 
         &:nth-of-type(even) {
-            background-color: #fff;
+
+            >td,
+            th {
+                background-color: #f2f4f6;
+            }
         }
 
 
@@ -111,7 +143,7 @@ table,
 
             >td,
             >th {
-                background: #dddddd;
+                background: #e9edf2;
             }
         }
     }
@@ -131,18 +163,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/vbox.js

@@ -6,17 +6,21 @@ function ybox(generator) {
     } else {
         _box = createElement(div);
     }
-    _box.height = function () {
+    var _tmp = isFunction(generator) && generator(_box);
+    if (isNode(_tmp)) _box = _tmp;
+    var _box_height = _box.$height || _box.height;
+    var _box_Height = _box.$Height || _box.Height;
+    var _box_Top = _box.$Top || _box.Top;
+    if (!isFunction(_box_height)) _box_height = function () {
         return _box.clientHeight;
     };
-    isFunction(generator) && generator(_box);
     // totalHeight
-    _box.Height = _box.Height || function () {
+    if (!isFunction(_box_Height)) _box_Height = function () {
         return _box.scrollHeight;
     };
     // currentTop
     var _scrolledTop = _box.scrollTop;
-    _box.Top = _box.Top || function (top) {
+    if (!isFunction(_box_Top)) _box_Top = function (top) {
         if (isNumber(top)) {
             if (_box.scrollTop !== top) {
                 _box.scrollTop = top;
@@ -25,17 +29,20 @@ function ybox(generator) {
         }
         return _box.scrollTop;
     };
-    _box.scrollY = function (deltay, useIncrease = true) {
-        var _Top = _box.Top();
+    if (_box.$Height !== _box_Height) _box.$Height = _box_Height;
+    if (_box.$height !== _box_height) _box.$height = _box_height;
+    if (_box.$Top !== _box_Top) _box.$Top = _box_Top;
+    _box.$scrollY = function (deltay, useIncrease = _box.useIncrease !== false) {
+        var _Top = _box.$Top();
         var top = _Top + deltay;
-        var height = _box.height();
-        var scrollHeight = _box.Height();
+        var height = _box.$height();
+        var scrollHeight = _box.$Height();
         var r = true;
         if (top < 0) {
             if (useIncrease && _Top <= 0) {
                 r = increase(top);
             }
-            _box.Top(0);
+            _box.$Top(0);
         } else if (top + height >= scrollHeight) {
             if (top + height - scrollHeight > increase_height) {
                 top = increase_height + scrollHeight - height;
@@ -43,9 +50,9 @@ function ybox(generator) {
             if (useIncrease && top + height >= scrollHeight) {
                 r = increase(top + height - scrollHeight);
             }
-            _box.Top(top);
+            _box.$Top(top);
         } else {
-            r = top !== _box.Top(top);
+            r = top !== _box.$Top(top);
             increase(deltay, true);
         }
         return r;
@@ -57,14 +64,14 @@ function ybox(generator) {
     var _decrease = function (increaser) {
         var height = parseInt(increaser.height);
         if (height > 1) {
-            var scrollTop = _box.Top();
+            var scrollTop = _box.$Top();
             if (scrollTop > 0 && increaser_t === increaser) {
                 var deltaY = scrollTop > height ? height : scrollTop;
                 height -= deltaY;
-                _box.Top(scrollTop - deltaY);
+                _box.$Top(scrollTop - deltaY);
             }
-            var tH = _box.Height();
-            var bH = _box.height();
+            var tH = _box.$Height();
+            var bH = _box.$height();
             if (scrollTop + bH < tH && increaser_b === increaser) {
                 var deltaY = tH - bH - scrollTop > height ? height : tH - bH - scrollTop;
                 height -= deltaY;
@@ -81,7 +88,7 @@ function ybox(generator) {
         remove(increaser);
         return 0;
     };
-    var stop = _box.stopY;
+    var stop = _box.$stopY || _box.stopY;
     var stop2 = lazy(function () {
         scrollY.smooth(stop);
     }, 40);
@@ -128,6 +135,7 @@ function ybox(generator) {
     } else {
         var wheelTime = 0;
         onmousewheel(_box, function (event) {
+            event.preventDefault();
             if (event.timeStamp - wheelTime > 40 && Math.abs(event.deltaY) < 12) {
                 wheelTime = event.timeStamp;
                 return;
@@ -151,7 +159,7 @@ function ybox(generator) {
                 scrollY.reset();
             },
             move(scrolled) {
-                var y = -this.Top();
+                var y = -_box.$Top();
                 if (scrolled) {
                     var { deltay } = scrolled;
                     scrollY.call(this, -deltay);

package/coms/zimoli/vscroll.js

@@ -1,22 +1,22 @@
 var scroll = function () {
     var scrollY = function (deltay, useIncrease) {
         deltay = scrollOutside.call(this, deltay);
-        if (isFunction(this.scrollY)) return this.scrollY(deltay, useIncrease);
+        if (isFunction(this.$scrollY)) return this.$scrollY(deltay, useIncrease);
         var scrollTop = this.scrollTop;
         this.scrollTop += deltay;
         if (this.scrollTop === scrollTop) return false;
     };
 
     var Height = function () {
-        if (isFunction(this.Height)) return this.Height();
+        if (isFunction(this.$Height)) return this.$Height();
         return this.scrollHeight;
     };
     var Top = function () {
-        if (isFunction(this.Top)) return this.Top();
+        if (isFunction(this.$Top)) return this.$Top();
         return this.scrollTop;
     };
     var height = function () {
-        if (isFunction(this.height)) return this.height();
+        if (isFunction(this.height)) return this.$height();
         return this.clientHeight;
     };
     var { max, min } = Math;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "efront",
-    "version": "3.22.2",
+    "version": "3.22.3",
     "description": "一个开发工具，开放源代码，自带组件库和编译环境，可以用来开发web组件，web应用或nodejs模块，或做为已有代码的加密工具，也可以做为静态页面服务器或跨域中转服务器使用",
     "main": "public/efront.js",
     "directories": {