efront 3.22.3 → 3.22.6

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/random_test.js

@@ -20,7 +20,7 @@ function random_test() {
     var id = 0;
     var run = function () {
         if (id >= args.length) return;
-        alert(toString(random.apply(null, args[id])));
+        console.log(toString(random.apply(null, args[id])));
         id++;
         setTimeout(run, 200);
     }

package/coms/zimoli/refilm_test.html

@@ -7,22 +7,24 @@
     <textarea _value="refilm_encode(steps[index])">
 
     </textarea>
-    <table class="form">
-        <thead>
-            <tr>
-                <td ng-repeat="(f,i) in refilms">
-                    <span ng-bind="f.name"></span>
-                </td>
-            </tr>
-        </thead>
-        <tbody>
-            <tr ng-repeat="s in steps[index]">
-                <td ng-repeat="r in refilms">
-                    <span bg-bind="String(s[r.key]||'')"></span>
-                </td>
-            </tr>
-        </tbody>
-    </table>
+    <div class="form">
+        <table>
+            <thead>
+                <tr>
+                    <td ng-repeat="(f,i) in refilms">
+                        <span ng-bind="f.name"></span>
+                    </td>
+                </tr>
+            </thead>
+            <tbody>
+                <tr ng-repeat="s in steps[index]">
+                    <td ng-repeat="r in refilms">
+                        <span bg-bind="String(s[r.key]||'')"></span>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
     <form class="form">
         <field ng-src="[f,data]" ng-repeat="(f,i) in steps[index]"></field>
     </form>

package/coms/zimoli/refilm_test.less

@@ -28,17 +28,24 @@
     }
 
     >textarea,
-    >table {
+    >.form {
         width: 400px;
     }
 
     >textarea,
     >form,
-    >table {
+    >.form {
         overflow: auto;
         height: calc(~"100% - 220px");
         vertical-align: top;
         display: inline-block;
+        table{
+            width: auto;
+        }
+        td{
+            white-space: nowrap;
+            overflow: hidden;
+        }
         font-size: 16px;
         font-family: 仿宋;
     }

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/slider.js

@@ -210,7 +210,7 @@ function slider(autoplay, circle = true) {
         var deltax = event.clientX - saved_x;
         var deltay = event.clientY - saved_y;
         if (!direction) {
-            if (abs(deltax) < MOVELOCK_DELTA && abs(deltay) < MOVELOCK_DELTA) return;
+            if (!onclick.preventClick) return;
             if (abs(deltay) - abs(deltax) > 0) { //垂直方向
                 direction = -1;
             } else { //水平方向

package/coms/zimoli/table.html

@@ -21,4 +21,12 @@
             </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,7 +12,6 @@ var moveMargin = function (element, movePixels) {
         marginRight: movePixels ? -movePixels + "px" : ""
     });
 };
-
 var markRowTds = function (tr, deltas, colstart, colend) {
     var inc = 0;
     var collections = [];
@@ -20,8 +19,8 @@ var markRowTds = function (tr, deltas, colstart, colend) {
         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,8 +39,8 @@ var markRowTds = function (tr, deltas, colstart, colend) {
     });
     return collections;
 };
-var forEachTableRow = function (table, call) {
-    for (var tr of table.children) {
+var forEachRow = function (tbody, call) {
+    for (var tr of tbody.children) {
         if (isTableRow(tr)) {
             call(tr);
         }
@@ -51,12 +50,18 @@ var forEachTableRow = function (table, call) {
     }
 }
 var getRowsOfTdsByCol = function (table, start, end) {
-    var savedRowDeltas = [];
     var savedCollections = [];
-    forEachTableRow(table, function (tr) {
+    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) {
@@ -81,17 +86,29 @@ var getTbody = function (table) {
         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;
-    forEachTableRow(this, function (tr) {
+    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;
         }
     }
@@ -104,6 +121,7 @@ var resizeColumn = function (target, targetW) {
         for (var c of cs) {
             w += c.offsetWidth;
         }
+        if (!cs.length) continue;
         w = targetW - w;
         while (w !== 0) {
             var c = cs.pop();
@@ -134,8 +152,8 @@ 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) {
@@ -212,7 +230,7 @@ function enrichField(f) {
     }
 }
 var tbodyHeight = function (tbody) {
-    return { 'max-height': ((innerHeight - getScreenPosition(tbody).top - 16) / 32 | 0) * 32 }
+    return { 'max-height': ((innerHeight - getScreenPosition(tbody).top - 8) / 36 | 0) * 36 }
 };
 
 var setFixed = function (children, scrolled, left, borderRight) {
@@ -271,67 +289,103 @@ var setFixedColumn = function () {
     }
     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 = 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) {
-            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 (!thead) thead = getThead(table);
         if (!getTargetIn(thead, element)) return false;
         if (!tdElementReg.test(element.tagName)) return false;
         if (!markedRows) {
             var savedRowDeltas = [];
-            [].map.call(thead.children, function (tr) {
+            Array.prototype.forEach.call(thead.children, function (tr) {
                 markRowTds(tr, savedRowDeltas);
             });
             markedRows = true;
@@ -340,9 +394,6 @@ function table(elem) {
         return getTdsByCol(table, colstart, colend);
     };
 
-    table.dragbox = function () {
-        return thead;
-    };
     table.useIncrease = false;
     var _vbox = function () {
         table.$Left = function (x) {
@@ -398,6 +449,7 @@ function table(elem) {
             },
             a: button,
             setFixedColumn,
+            pagination
         }, this.$parentScopes.concat(this.$scope));
     })
     autodragchildren(

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;
-            }
         }
     }
 
@@ -43,11 +42,11 @@ th,
 td {
     white-space: normal;
     height: 100%;
-    border: 1px solid transparent;
-    padding: 1px 10px;
+    padding: 2px 10px;
 }
 
-.y-ing {
+.y-ing,
+.x-ing {
     &:before {
         content: "";
         position: absolute;
@@ -55,7 +54,7 @@ td {
         top: 0;
         bottom: 0;
         right: 0;
-        background-color: rgba(0, 30, 69, .06);
+        background-color: rgba(0, 60, 69, .06);
     }
 
     >* {
@@ -90,6 +89,29 @@ td {
 
 [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 {
@@ -134,21 +156,14 @@ td {
 
             >td,
             th {
-                background-color: #f2f4f6;
+                background-color: #f8fbfd;
             }
         }
 
 
-        &:hover {
-
-            >td,
-            >th {
-                background: #e9edf2;
-            }
-        }
     }
 
-    >tr[insert] {
+    >tr[thead] {
         position: sticky;
         top: 0;
         z-index: 1;

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

package/package.json

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