efront 3.21.5 → 3.22.3

package/coms/zimoli/menuList.js

@@ -14,6 +14,7 @@ var unfocus = function () {
     this.setFocus(null);
 };
 var setFocus = function (focused) {
+    console.log(focused)
     if (focused && focused.hasAttribute("disabled")) return;
     var page = this;
     if (focused) {
@@ -178,6 +179,7 @@ function main(page, items, active, direction = 'y') {
         }
         if (emptyFocus !== false) page.setFocus(target);
         if (!item.length) return;
+        console.log('popupmenu')
         page.setFocus(target);
         var clone = template.cloneNode();
         clone.$parentScopes = page.$parentScopes;
@@ -199,6 +201,7 @@ function main(page, items, active, direction = 'y') {
         once("remove")(menu, function () {
             removeFromList(mounted_menus, this);
         });
+        menu.go(0);
     }
     on("blur")(page, unfocus);
     var template = page.tempalte || document.createElement("ylist");
@@ -215,7 +218,7 @@ function main(page, items, active, direction = 'y') {
         time = +time;
         if (byMousedown && !time) return;
         if (time) byMousedown = false;
-
+        
         if (page.ispop || time) popTimer = setTimeout(function () {
             if (time) byMousedown = elem;
             page.setFocus(elem);
@@ -312,10 +315,7 @@ function main(page, items, active, direction = 'y') {
         }`;
             var notHidden = `!${itemName}.hidden`;
             var generator = getGenerator(page, 'menu-item');
-            var fire0 = function () {
-                fire.apply(this, arguments);
-                dispatch(window, 'render');
-            };
+            page.$generatorScopes.push($scope);
             list(page, function (index) {
                 var item = items[index];
                 if (!item) return;
@@ -323,18 +323,15 @@ function main(page, items, active, direction = 'y') {
                 var a = $scope["menu-item"](null, item);
                 if (src.itemName) a.setAttribute("e-if", notHidden);
                 a.setAttribute("e-class", className);
+                a.setAttribute("on-mouseleave", "cancel.call(this)");
+                a.setAttribute("on-mouseenter", "popMenu.call(this)");
+                a.setAttribute("on-pointermove", "popMenu.call(this)");
+                a.setAttribute("on-click", "open.call(this)");
+                a.setAttribute("_menu", src.itemName);
+                if (istoolbar) a.setAttribute("on-pointerdown", "popMenu1");
                 a = generator(index, item, a);
-                a.menu = item;
-                on("mouseleave")(a, cancel);
-                on("mouseenter")(a, open);
-                on("pointermove")(a, open);
-                if (istoolbar) on("pointerdown")(a, open1);
-                on("click")(a, fire0);
                 return a;
             });
-            on("append")(page, function () {
-                this.go(0);
-            })
         }
         else {
             page.innerHTML = menuList;
@@ -349,7 +346,6 @@ function main(page, items, active, direction = 'y') {
     }
     else {
         var generator = getGenerator(page, 'menu-item');
-
         list(page, function (index) {
             var elem = generator(index);
             if (!elem) return;
@@ -362,7 +358,7 @@ function main(page, items, active, direction = 'y') {
             on("mouseenter")(elem, open);
             on("pointermove")(elem, cancel);
             if (istoolbar) on("pointerdown")(elem, open1);
-            on("click")(elem, fire0);
+            on("click")(elem, fire);
             return elem;
         }, direction);
     }

package/coms/zimoli/on.js

@@ -231,6 +231,18 @@ var broadcast = function (k, hk, event) {
     var element = this;
     var handlers = element[hk];
     if (handlers.length > 1) handlers = handlers.slice();
+    if (event.which === 1 && event.buttons === 0) {
+        // firefox 无按键
+        Object.defineProperty(event, 'which', { value: 0 });
+    }
+    if (event.which === 1 && event.buttons === 2) {
+        // firefox 右键
+        Object.defineProperty(event, 'which', { value: 3 });
+    }
+    if (event.which === 1 && event.buttons === 4) {
+        // firefox 中键
+        Object.defineProperty(event, 'which', { value: 2 });
+    }
     for (var [eventtypes, handler, context] of handlers) {
         if (eventtypes.self && event.target !== element) continue;
         if (!checkKeyNeed(eventtypes, event)) continue;

package/coms/zimoli/once.js

@@ -1,15 +1,17 @@
 "use strict";
 var oncetree = {};
+function emit(ontype, target, handler, firstmost) {
+    var off = ontype.call(this, target, function (event) {
+        off();
+        return handler.call(this, event);
+    }, firstmost);
+    return off;
+}
 function _once(key) {
     if (oncetree[key]) return oncetree[key];
-    return oncetree[key] = function (target, handler, firstmost) {
-        var off = on(key).call(this, target, function (event) {
-            off();
-            return handler.call(this, event);
-        }, firstmost);
-        return off;
-    };
+    return oncetree[key] = emit.bind(null, on(key));
 }
+once.emit = emit;
 function once(key, target, handler, firstmost) {
     if (isFunction(handler) && isNode(target)) return _once(key).call(this, target, handler, firstmost);
     return _once(key);

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/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,14 +1,20 @@
-<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>

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