efront 3.22.2 → 3.22.5

package/coms/zimoli/pagination.js

@@ -1,5 +1,5 @@
 function main(element) {
-    var page = element || div();
+    var page = element || document.createElement('pagination');
     page.innerHTML = pagination;
     render(page, {
         xlist: list,
@@ -7,26 +7,10 @@ function main(element) {
         fromPixel,
         pages: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
         next() {
-            var index = this.pglist.index();
-            index += 10;
-            if (this.pages.length < index + 10) {
-                index = this.pages.length - 10;
-            }
-            if (index < 0) {
-                index = 0;
-            }
-            this.pglist.go(index);
+            this.pglist.scrollBy(this.pglist.clientWidth);
         },
         prev() {
-            var index = this.pglist.index();
-            index -= 10;
-            if (this.pages.length < index + 10) {
-                index = this.pages.length - 10;
-            }
-            if (index < 0) {
-                index = 0;
-            }
-            this.pglist.go(index);
+            this.pglist.scrollBy(-this.pglist.clientWidth);
         },
         start() {
             this.pglist.go(0);
@@ -39,10 +23,11 @@ function main(element) {
             this.pglist.go(index);
         }
     });
-
-    page.querySelector("xlist").go(0);
-    once("append")(page, function () {
-        console.log(page);
-    })
+    var pglist = page.querySelector('xlist');
+    onmounted(page, function () {
+        console.log(pglist)
+        pglist.XScrollBoxId = 1;
+        pglist.go(0);
+    });
     return page;
 }

package/coms/zimoli/pagination.less

@@ -1,26 +1,41 @@
+*{
+    box-sizing: border-box;
+}
 & {
     white-space: nowrap;
+    display: block;
+    min-width: 240px;
+    width: 100%;
+    position: relative;
+}
+
+>xlist {
     display: inline-block;
+    text-overflow: clip;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    vertical-align: top;
+    border-left: 72px solid transparent;
+    border-right: 72px solid transparent;
+    margin: 0 -72px 0 -72px;
 
-    >xlist {
-        width: auto;
-        display: inline-block;
-        text-overflow: clip;
-        min-width: 40px;
-        text-align: center;
-        max-width: 400px;
-        position: relative;
-        overflow: hidden;
-        vertical-align: top;
+    .button {
+        border-radius: 0;
     }
+}
 
-    btn {
-        width: 40px;
-        height: 40px;
-        line-height: 40px;
-        vertical-align: top;
-        display: inline-block;
-        background-color: inherit;
-        color: inherit;
-    }
+btn.button {
+    box-shadow: none;
+    padding: 0 10px;
+    min-width: 36px;
+    height: 28px;
+    line-height: 28px;
+    color: #999;
+    margin: 0;
+    vertical-align: top;
+    display: inline-block;
+    background-color: inherit;
+    color: inherit;
+    z-index: 1;
 }

package/coms/zimoli/render.js

@@ -564,7 +564,17 @@ var createEmiter = function (on) {
             search[0] += `with(this.$parentScopes[${scopes.length}])`;
             getter1 = createGetter(search, false);
         }
-        on(key)(this, function (e) {
+        var onkey;
+        if (key === 'mounted' || key === 'mount') {
+            onkey = on === once ? oncemount : onmounted;
+        }
+        else if (key === 'wheel' || key === 'mousewheel') {
+            onkey = on === once ? once.emit.bind(null, onmousewheel) : onmousewheel;
+        }
+        else {
+            onkey = on(key);
+        }
+        onkey(this, function (e) {
             digest();
             if (parsedSrc) {
                 var target = e.currentTarget || e.target;

package/coms/zimoli/resize.js

@@ -160,8 +160,10 @@ resize.on = function (elem, dragHandle) {
         if (!~resizingElements.indexOf(elem)) {
             resizingElements.push(elem);
         }
-        bind('render')(elem, resizeh);
+        resizeh.call(elem);
     });
+    bind('render')(elem, resizeh);
+    bind('resize')(elem, resizeh);
     on('remove')(elem, function () {
         var index = resizingElements.indexOf(this);
         if (~index) resizingElements.splice(index, 1);

package/coms/zimoli/scrollbar.js

@@ -86,7 +86,7 @@ var scrollbary = function () {
         var run = function () {
             var thumbPosition = getScreenPosition(scroller.thumb);
             if (delta > 0 && thumbPosition.bottom - delta / 6 < scrollTimerTarget || delta < 0 && thumbPosition.top - delta / 6 > scrollTimerTarget) {
-                var targetTop = scroller.Top() + delta;
+                var targetTop = scroller.$Top() + delta;
                 var target = scroller.target;
                 scroller.scrollTo(targetTop);
                 if (target) setTargetTop(target, targetTop);
@@ -126,11 +126,11 @@ var scrollbary = function () {
 
 
     var setTargetTop = function (target, top) {
-        if (target.Top instanceof Function) target.Top(top);
+        if (target.$Top instanceof Function) target.$Top(top);
         else target.scrollTop = top;
     };
     var getTargetTop = function (target) {
-        if (target.Top instanceof Function) return target.Top();
+        if (target.$Top instanceof Function) return target.$Top();
         return target.scrollTop;
     };
 
@@ -152,7 +152,7 @@ var scrollbary = function () {
             _scrollbar.autoshow();
         });
         on("change")(_scrollbar, function () {
-            var top = _scrollbar.Top();
+            var top = _scrollbar.$Top();
             setTargetTop(_container, top);
         });
         if (followResize) on("resize")(followResize, _scrollbar.reshape);
@@ -167,7 +167,7 @@ var scrollbary = function () {
         _scrollbar.scrollTo = scrollTo;
         var _handler = document.createElement("scrollbar-thumb");
         _handler.className = "thumb";
-        _scrollbar.Top = getTop;
+        _scrollbar.$Top = getTop;
         _scrollbar.autohide = lazy(function () {
             this.thumb.style.opacity = 0;
         }, 600);

package/coms/zimoli/table.html

@@ -1,18 +1,32 @@
-<tbody -src="(d,i) in data" :style="tbodyHeight()">
-    <tr thead #adapter insert>
-        <td row-index>序号</td>
-        <td -repeat="f in fields track by f.id" :style="{width:f.width}" @dblclick="sort(f)"><i -if="f.icon"
-                -class="f.icon"></i></span><span -if="f.name" -html="f.name"></span>
+<thead @mounted="setFixedColumn.call(this.parentNode)">
+    <tr inline-block #adapter thead @mounted="resizeT(this)">
+        <td fixed row-index>序号</td>
+        <td fixed:="f.fixed" -repeat="f in fields track by f.id" :style="{width:f.width}" @dblclick="sort(f)"><i
+                -if="f.icon" -class="f.icon"></i><span -if="f.name" -html="f.name"></span><template
+                -else>&nbsp;</template>
         </td>
     </tr>
-    <tr>
-        <td row-index -bind="i+1"></td>
-        <td -repeat="f in fields">
-            <model -if="f.key" :field=f :data=d readonly></model>
+</thead>
+<tbody -src="(d,i) in data" :style="tbodyHeight(this)">
+    <tr inline-block @mounted="this.style.width=adapter.style.width">
+        <td fixed row-index -bind="i+1" @mounted="this.style=adapter.firstChild.getAttribute('style')">
+        </td>
+        <td fixed:="f.fixed" -repeat="(f,i) in fields"
+            @mounted="this.style=adapter.children[i+1].getAttribute('style')">
+            <model -if="f.key&&!isEmpty(d[f.key])" :field=f :data=d readonly></model>
+            <template -else>&nbsp;</template>
             <a on-click="o.do(d)" -if="!f.key&&f.options&&(!o.when||o.when(d))"
                 _type="o.type instanceof Function?o.type(d):o.type" -repeat="o in f.options">
                 <span -text="o.name instanceof Function?o.name(d):o.name"></span>
             </a>
         </td>
     </tr>
-</tbody>
+</tbody>
+<tfoot>
+    <tr -if="!data||!data.length" style="padding-bottom: 20px;">
+        <td style="text-align: center;">
+            <template -if="data.is_loading">加载中</template>
+            <template -else>无数据</template>
+        </td>
+    </tr>
+</tfoot>

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;
 }