efront 4.22.18 → 4.23.0

package/coms/zimoli/scrollbar.js

@@ -1,18 +1,25 @@
 var scrollbary = function () {
     var reshape = function (scrollHeight, offsetHeight) {
         var target = this.target;
+        var targetHeight = target.offsetHeight;
+        var targetTop = target.offsetTop;
+        var restHeight = scrollHeight - offsetHeight;
+        if (targetHeight === this.targetHeight && targetTop === this.targetTop && restHeight === this.restHeight) return;
         if (target) {
-            css(this, { height: target.offsetHeight });
+            if (targetHeight !== this.targetHeight || targetTop !== this.targetTop)
+                css(this, { height: targetHeight, top: targetTop });
         }
         var scrollbarHeight = this.offsetHeight;
         var ratio = offsetHeight / scrollHeight;
         var thumbHeight = scrollbarHeight * ratio;
-        if (thumbHeight < 14) thumbHeight = 14;
-        if (thumbHeight < 0) thumbHeight = 0;
-        this.restHeight = scrollHeight - offsetHeight;
-        css(this.thumb, {
+        if (thumbHeight < 36) thumbHeight = 36;
+        this.targetHeight = targetHeight;
+        this.targetTop = targetTop;
+        this.restHeight = restHeight;
+        if (thumbHeight !== this.thumb.height) css(this.thumb, {
             height: thumbHeight
         });
+        this.thumb.height = thumbHeight;
         if (thumbHeight >= this.clientHeight) {
             this.style.opacity = 0;
         } else {
@@ -21,19 +28,25 @@ var scrollbary = function () {
         }
     };
     var getTop = function () {
-        var availableHeight = this.offsetHeight - this.thumb.offsetHeight;
+        var availableHeight = this.clientHeight - this.thumb.offsetHeight | 0;
         if (!availableHeight) return 0;
-        return this.thumb.offsetTop / availableHeight * this.restHeight;
+        if (availableHeight < 1) {
+            availableHeight = 0;
+        }
+        var offsetTop = this.thumb.offsetTop;
+        if (offsetTop < 1) offsetTop = 0;
+        if (offsetTop > availableHeight - 1) offsetTop = availableHeight;
+        return offsetTop / availableHeight * this.restHeight;
     };
 
     var scrollTo = function (scrollTop) {
         var thumb = this.thumb;
-        var deltaHeight = this.offsetHeight - thumb.offsetHeight;
+        var deltaHeight = this.clientHeight - thumb.offsetHeight;
         if (deltaHeight > 0) {
             var ratio = scrollTop / this.restHeight;
             var targetTop = +(ratio * deltaHeight).toFixed(4);
-            if (targetTop > deltaHeight) targetTop = deltaHeight;
-            if (targetTop < 0) targetTop = 0;
+            if (targetTop > deltaHeight - 1) targetTop = deltaHeight;
+            if (targetTop < 1) targetTop = 0;
             targetTop += "px";
             if (thumb.style.top !== targetTop) thumb.style.top = targetTop;
         }
@@ -42,6 +55,7 @@ var scrollbary = function () {
     var moving = null;
 
     var mousemove = function (event) {
+        event.moveLocked = true;
         var deltaY = event.clientY - moving.y;
         if (!moving.ing) {
             if (Math.abs(deltaY) < MOVELOCK_DELTA) return;
@@ -65,13 +79,6 @@ var scrollbary = function () {
             css(thumb, { top: targetY });
             dispatch(target, "change");
         }
-        var tt = target.target;
-        if (tt) {
-            var { Height, height } = getTargetHeight(tt);
-            var top = targetY * (Height - height) / (target.clientHeight - thumb.offsetHeight);
-            setTargetTop(tt, top);
-        }
-
     };
 
     var mouseup = function () {
@@ -96,7 +103,7 @@ var scrollbary = function () {
                 var targetTop = scroller.$Top() + delta;
                 var target = scroller.target;
                 scroller.scrollTo(targetTop);
-                if (target) setTargetTop(target, targetTop);
+                if (target) scroller.setTTop(targetTop);
             }
             scrollingTimer = setTimeout(run, nextTickTime);
             delta = (delta + saved_delta) / 2;
@@ -132,46 +139,86 @@ var scrollbary = function () {
     }
 
 
-    var setTargetTop = function (target, top) {
+    var setTargetTop = function (top) {
+        var target = this.target;
         if (target.$Top instanceof Function) target.$Top(top);
         else target.scrollTop = top;
     };
-    var getTargetTop = function (target) {
+    var getTargetTop = function () {
+        var target = this.target;
         if (target.$Top instanceof Function) return target.$Top();
         return target.scrollTop;
     };
-
-    var getTargetHeight = function (target) {
-        var Height = target.scrollHeight, height = target.clientHeight;
-        if (target.Height instanceof Function) Height = target.Height();
-        if (target.height instanceof Function) height = target.height();
-        return { Height, height };
+    var getListTop = function () {
+        var target = this.target;
+        var f = target.getFirstVisibleElement(0);
+        if (!f) return;
+        return f.index;
+    }
+    var isList = function (target) {
+        return isObject(target) && isFunction(target.index) && isFunction(target.go) && isFunction(target.getFirstVisibleElement) && isFunction(target.getLastVisibleElement);
+    }
+    var getListHeight = function () {
+        var target = this.target;
+        var f = target.getFirstVisibleElement(0);
+        var l = target.getLastVisibleElement(0);
+        var height = 1;
+        if (f && l) {
+            height = 1 + l.index - f.index
+        }
+        return [target.src.length, height];
+    }
+    var getTargetHeight = function () {
+        var target = this.target;
+        var Height, height;
+        if (target.$Height instanceof Function) Height = target.$Height();
+        else Height = target.scrollHeight;
+        if (target.$height instanceof Function) height = target.$height();
+        else height = target.clientHeight;
+        return [Height, height];
+    };
+    var setListTop = function (top) {
+        this.target.go(top);
     };
 
     function scrollbar(elem) {
         var onscroll = function () {
-            var top = getTargetTop(this);
-            _scrollbar.scrollTo(top);
-            _scrollbar.autoshow();
+            if (moving) return;
+            var top = _scrollbar.getTTop();
+            if (Number.isFinite(top)) {
+                _scrollbar.scrollTo(top);
+                _scrollbar.autoshow();
+            }
         };
         var onchange = function () {
             var top = _scrollbar.$Top();
-            setTargetTop(this, top);
+            this.setTTop(top);
         };
         function bindTarget(_container, followResize = _container) {
             _container.with = _scrollbar;
             _scrollbar.target = _container;
-            onmounted(_container, _scrollbar.reshape);
+            if (isList(_container) && hasClass(_container, "list-y")) {
+                this.getTTop = getListTop;
+                this.setTTop = setListTop;
+                this.getTHeight = getListHeight;
+            }
+            else {
+                this.getTHeight = getTargetHeight;
+                this.getTTop = getTargetTop;
+                this.setTTop = setTargetTop;
+            }
             on("scroll")(_container, onscroll);
             on("change")(_scrollbar, onchange);
             if (followResize) resizingList.set(followResize, _scrollbar.reshape);
         }
         var _scrollbar = elem || document.createElement("scrollbar");
-        _scrollbar.reshape = lazy(function () {
-            var _container = _scrollbar.target;
-            var { Height, height } = getTargetHeight(_container);
+        _scrollbar.$digest = _scrollbar.reshape = function () {
+            if (!this.target) return;
+            var [Height, height] = this.getTHeight();
+            if (!isHandled(Height) || !isHandled(height)) return;
             reshape.call(_scrollbar, Height, height);
-        });
+        };
+
         _scrollbar.scrollTo = scrollTo;
         var _handler = document.createElement("scrollbar-thumb");
         _handler.className = "thumb";
@@ -201,7 +248,7 @@ var scrollbary = function () {
 var scrollbar_y = scrollbary();
 var scrollbar_x = arriswise(scrollbary, arguments)();
 var isBody = function (elem) {
-    return hasClass(elem, 'body') || elem.hasAttribute('body');
+    return elem ? hasClass(elem, 'body') || elem.hasAttribute('body') || /body$/i.test(elem.tagName) : false;
 }
 function main(elem) {
     var direction, bar, target;
@@ -210,18 +257,19 @@ function main(elem) {
         elem = null;
     }
     else if (isElement(elem)) {
-        direction = elem.tagName;
-        var $struct = elem.$struct;
-        if ($struct) {
-            if ($struct.props?.target);
-            else if (isBody(elem.previousElementSibling)) {
+        if (elem.hasAttribute('y') || hasClass(elem, 'y')) direction = "y";
+        else if (elem.hasAttribute('x') || hasClass(elem, 'x')) direction = "x";
+        else direction = elem.tagName;
+        target = elem.target;
+        if (!target) {
+            if (isBody(elem.previousElementSibling)) {
                 target = elem.previousElementSibling;
             }
             else if (isBody(elem.nextElementSibling)) {
                 target = elem.nextElementSibling;
             }
+            else if (!/^(\w*\-?)?scroll/i.test(direction)) target = elem, elem = null;
         }
-        else if (!/^(\w*\-?)?scroll/i.test(direction)) target = elem, elem = null;
     }
     else {
         elem = null;

package/coms/zimoli/scrollbar.less

@@ -1,19 +1,21 @@
 & {
     position: absolute;
-    width: 6px;
     border-radius: 7px;
-    height: 100px;
-    border-left: 3px solid transparent;
 
     &[x],
     &.x {
         left: 0;
+        height: 12px;
+        width: 100px;
         bottom: 0;
     }
 
     &[y],
     &.y {
+        border-left: 3px solid transparent;
         top: 0;
+        height: 100px;
+        width: 6px;
         right: 0;
     }
 

package/coms/zimoli/select.js

@@ -163,11 +163,11 @@ function select() {
         var optionsMap = {};
         var $key = 'key';
         var $name = 'name';
-        var template = target.$template;
+        var template = generator.$template;
         var isIndexedKey = false;
         var $item = '';
         if (template) a: {
-            var { attrs, binds } = template.childNodes[0].$struct;
+            var { attrs, binds } = $structed.get(template.childNodes[0]);
             if (!attrs.value && !binds.value) break a;
             $key = attrs.value || binds.value;
             if ($key === target.$src.indexName || $key === target.$src.keyName) isIndexedKey = true;
@@ -192,7 +192,7 @@ function select() {
             var s = optionsMap[v];
             var name = s ? s.name : '';
             if (s && template) {
-                name = this.$eval($name, this.$src.createScope(s, v, v));
+                name = $eval.call(this, $name, this.$src.createScope(s, v, v));
             }
             this.innerHTML = `<option selected value="${v}">${name || ''}</option>`;
             this.value = v;

package/coms/zimoli/selectList.js

@@ -210,7 +210,7 @@ function main() {
                         page.with = null;
                         children.splice(0, children.length);
                         if (optholder) children.push(optholder);
-                        children.push.apply(children, edit.$scope.options.map(o => ({ value: o.key || o.value, name: o.name || o.innerHTML })))
+                        children.push.apply(children, $scoped.get(edit).options.map(o => ({ value: o.key || o.value, name: o.name || o.innerHTML })))
                         cast(page.target, 'set-options', children);
                         page.clean();
                         remove(adder);

package/coms/zimoli/selectListEdit.js

@@ -2,7 +2,7 @@ function main(options) {
     var page = view();
     page.innerHTML = template;
     on("submit")(page, e => e.preventDefault());
-    render(page, {
+    var scope = {
         options, a: button, input, _search: '',
         add() {
             var a = this._search;
@@ -46,7 +46,8 @@ function main(options) {
             remove(page);
         },
         filtered: []
-    });
+    };
+    render(page, scope);
     drag.on(page.firstChild, page);
     on("append")(page, function () {
         setTimeout(function () {
@@ -59,8 +60,8 @@ function main(options) {
         }
     });
     page.onback = function () {
-        if (page.$scope.search) {
-            page.$scope.search = '';
+        if (scope.search) {
+            scope.search = '';
             return false;
         }
     };

package/coms/zimoli/table.html

@@ -1,4 +1,4 @@
-<thead @mounted="setFixedColumn.call(this.parentNode),setContextMenu(this)">
+<thead @mounted="setFixedColumn.call(this.parentNode),setContextMenu(this),updateStyles()">
     <tr inline-block #adapter thead @append="resizeT(this)">
         <td draggable="false" fixed row-index>
             <mask></mask>${i18n`序号`}
@@ -13,10 +13,10 @@
 </thead>
 <tbody -src="(d,i) in data" :style="tbodyHeight(this,hasFoot,adapter.offsetWidth)">
     <tr inline-block @click="rowClick(d,i,event)" once-mounted="resizeR(this)">
-        <td fixed row-index @append="this.style=adapter.firstChild.getAttribute('style')">
+        <td fixed row-index @append="this.style=thStyles[0]">
             <mask></mask><span -bind="i+1"></span>
         </td>
-        <td fixed:="f.fixed" -repeat="(f,i) in fields" once-append="this.style=adapter.children[i+1].getAttribute('style')">
+        <td fixed:="f.fixed" -repeat="(f,i) in fields" @append="this.style=thStyles[i+1]">
             <mask></mask>
             <model -if="!isEmpty(f.key)" :field=f :data=d readonly></model>
             <template -else>&nbsp;</template>
@@ -30,6 +30,7 @@
         </td>
     </tr>
 </tbody>
+<scrollbar y></scrollbar>
 <tfoot>
     <tr .fade -if="!data||!data.length" style="padding-bottom: 20px;">
         <td style="text-align: center;">
@@ -43,4 +44,5 @@
             ${i18n`共${"&nbsp;<span -bind=data.length></span>&nbsp;"}个`}
         </td>
     </tr>
-</tfoot>
+</tfoot>
+<scrollbar x :target="this.parentNode"></scrollbar>

package/coms/zimoli/table.js

@@ -108,10 +108,19 @@ var getTbody = function (table) {
 var isTfoot = function (c) {
     return /^tfoot$/i.test(c.tagName) || c.hasAttribute("tfoot");
 }
-var getTfoot = function (table) {
+var getTExtras = function (table) {
+    var tfoot, xb, yb;
     for (var c of table.children) {
-        if (isTfoot(c)) return c;
+        if (isTfoot(c)) {
+            tfoot = c;
+            continue;
+        }
+        if (hasClass(c, 'scrollbar')) {
+            if (c.hasAttribute('x') || hasClass(c, 'x')) xb = c;
+            else yb = c;
+        }
     }
+    return [tfoot, xb, yb];
 };
 var isTableRow = function (e) {
     return trElementReg.test(e.tagName);
@@ -170,7 +179,7 @@ var resizeTarget = function (event) {
     if (targetW < 20) targetW = 20;
     resizeColumn.call(this, target, targetW);
     resizing.clientX = event.clientX;
-    setFixedColumn.call(this);
+    setFixedColumn.call(this, target);
 };
 var getFirstSingleColCell = function (table, col) {
     var tds = getTdsByCol(table, col, col);
@@ -304,44 +313,55 @@ var setFixed = function (children, scrolled, left, borderRight) {
     }
 
 };
-
-
-var setFixedColumn = function (remark) {
-    var thead = getThead(this);
+var getTheadChildren = function (table) {
+    var thead = getThead(table);
     if (!thead) return;
-    remark = remark === true;
-    if (remark) remark = [], forEachRow(thead, function (tr) {
-        markRowTds(tr, remark);
-    });
     if (!isTableRow(thead)) thead = thead.querySelector('tr');
     if (!thead) return;
-    var children = Array.prototype.slice.call(thead.children);
-    var lastChild = children[children.length - 1];
-    var lastFieldChild = children[children.length - 2];
-    if (children.length <= 2) lastFieldChild = null;
-    if (!lastChild) return;
-    var cindex = children.length - 1;
-    if (lastFieldChild) css(lastChild, { width: 0 }), lastChild = lastFieldChild, cindex = children.length - 2;
-    var deltaW = thead.scrollWidth - lastChild.offsetWidth;
-    if (this.clientWidth > deltaW + lastChild.offsetWidth) {
-        css(lastChild, { width: this.clientWidth - deltaW });
-        css(thead, { width: this.clientWidth });
-        resizeColumn.call(this, lastChild, this.clientWidth - deltaW);
-        remark = true;
-    }
-    if (remark) {
-        var tbody = getTbody(this);
-        forEachRow(tbody, function (tr) {
-            css(tr.children[cindex], lastChild.style);
-        });
-        css(tbody, { width: thead.offsetWidth });
-    }
+    return Array.apply(null, thead.children);
+}
+var fixScroll = function (children) {
+    var scrollOnly = !children;
+    if (scrollOnly) children = getTheadChildren(this);
+    if (!children) return;
     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);
+    var [tfoot, xsb, ysb] = getTExtras(this);
     if (tfoot) {
         css(tfoot, { left: this.scrollLeft });
     }
+    if (xsb) {
+        if (!scrollOnly) xsb.reshape();
+        css(xsb, { left: this.scrollLeft });
+    }
+    if (ysb) {
+        css(ysb, { marginRight: -this.scrollLeft });
+    }
+};
+var setFixedColumn = function (remark) {
+    var children = getTheadChildren(this);
+    if (!children || children.length < 2) return;
+    var cindex = children.length - 1;
+    var lastChild = children[cindex];
+    if (!lastChild) return;
+    if (remark !== false) {
+        var scrollWidth = this.clientWidth + this.scrollLeft;
+        var restWidth = scrollWidth - lastChild.offsetLeft;
+        if (restWidth > 20 || restWidth > lastChild.offsetWidth) {
+            var lastStyle = { width: restWidth }
+            css(lastChild, lastStyle);
+            var thead = getThead(this);
+            css(thead, { width: scrollWidth });
+            resizeColumn.call(this, lastChild, restWidth);
+            var tbody = getTbody(this);
+            forEachRow(tbody, function (tr) {
+                css(tr.children[cindex], lastStyle);
+            });
+            css(tbody, { width: thead.offsetWidth });
+            remark = true;
+        }
+    }
+    fixScroll.call(this, children);
 };
 var setClass = function (tds, cls, old) {
     tds.forEach(td => td[cls] = true);
@@ -421,6 +441,13 @@ function table(elem) {
     var activeCols = [];
     bind('mousemove')(tableElement, adaptTarget);
     var updateSummaryFields = null;
+    var thStyles = [];
+    var updateStyles = function () {
+        thStyles.splice(0, thStyles.length);
+        thStyles.push.apply(thStyles, getTheadChildren(table).map(a => {
+            return a.getAttribute('style');
+        }));
+    }
     moveupon(tableElement, {
         start(event) {
             if (this.resizing) return event.preventDefault();
@@ -429,7 +456,7 @@ function table(elem) {
             var th = getTargetIn(thead, event.target, false);
             if (!th) return;
             if (th.tagName.toLowerCase() === 'tr') th = getTargetIn(th, event.target, false);
-            var field = th.$scope?.f;
+            var field = $scoped.get(th).f;
             if (!field || field.fixed || !isHandled(field.key)) return;
             swapping = lazySwap(th, function (value) {
                 field.summary = value;
@@ -440,6 +467,7 @@ function table(elem) {
         move: resizeTarget,
         end() {
             if (swapping) swapping.end(), swapping = null;
+            updateStyles();
         }
     });
     var activeRows = [];
@@ -496,15 +524,25 @@ function table(elem) {
     };
     watch(table, {
         showTotal(v) {
-            this.$scope.showTotal = v;
-            if (v) this.$scope.hasFoot = true;
+            var ts = $scoped.get(this);
+            ts.showTotal = v;
+            if (v) ts.hasFoot = true;
         }
     })
     table.useIncrease = false;
     var _vbox = function () {
         table.$Left = function (x) {
-            if (isFinite(x)) this.scrollLeft = x, setFixedColumn.call(this);
-            return this.scrollLeft;
+            if (isFinite(x)) {
+                var thd = getTbody(this);
+                if (thd.offsetLeft + thd.offsetWidth < x + this.clientWidth) {
+                    x = thd.offsetLeft + thd.offsetWidth - this.clientWidth;
+                }
+                this.scrollLeft = x, fixScroll.call(this);
+            }
+            else {
+                x = this.scrollLeft;
+            }
+            return x;
         };
         vbox(table, 'x');
     };
@@ -542,11 +580,13 @@ function table(elem) {
             fields: fields.filter(f => !f.hidden),
             isEmpty,
             hasFoot: true,
+            thStyles,
             setContextMenu,
             tbody0: null,
             rowClick(d, i, event) {
                 active(table, i, d, event.target);
             },
+            updateStyles,
             tbody() {
                 var e = list.apply(null, arguments);
                 css(e, tbodyHeight(e, this.hasFoot));
@@ -569,6 +609,7 @@ function table(elem) {
             resizeT,
             resizeR,
             model,
+            scrollbar,
             sort(f) {
                 this.data.sort(f);
             },
@@ -579,21 +620,21 @@ function table(elem) {
             setFixedColumn,
             pagination
         };
-        render(this, $scope, this.$parentScopes.concat(this.$scope));
+        render(this, $scope, tableScopes);
         await data;
         if (!data.is_errored) $scope.data = Table.from(fields, data);
         $scope.data.callback = function () {
             render.digest();
         };
     })
-
+    var tableScopes = render.getScopes(this);
     autodragchildren(
         table,
         cellMatchManager,
         function (src, dst, rel, append, parentNode) {
             if (table.src) {
                 if (src < 1 || dst < 1) return false;
-                var fields = parentNode.$scope.fields;
+                var fields = $scoped.get(parentNode).fields;
                 var [f] = fields.splice(src - 1, 1);
                 fields.splice(dst - 1, 0, f);
             }

package/coms/zimoli/table.less

@@ -262,4 +262,26 @@ tbody,
         color: #666;
         overflow: hidden;
     }
+}
+
+tfoot,
+[tfoot] {
+    pointer-events: none;
+    z-index: 1;
+}
+
+scrollbar[y] {
+    height: 100%;
+    width: 12px;
+}
+
+scrollbar[x] {
+    height: 30px;
+
+    >.thumb {
+        border-radius: 0 0 3px 3px;
+        background-color: #29c3;
+    }
+
+    width: 100%;
 }

package/coms/zimoli/vbox.less

@@ -38,7 +38,7 @@
 }
 
 >.x-insert {
-    display: block;
-    float: left;
+    display: inline-block;
     height: 100%;
+    vertical-align: top;
 }