efront 4.21.4 → 4.22.1

package/coms/zimoli/render.js

@@ -35,7 +35,7 @@ var createTemplateNodes = function (text) {
         this.with = Array.apply(null, node.childNodes);
     }
     appendChild.after(this, this.with);
-    this.with = renderElement(this.with, this.$scope, this.$parentScopes, this.$renderid === 9);
+    this.with = render(this.with, this.$scope, this.$parentScopes, this.$renderid !== 9);
 };
 presets.template = function (t) {
     var comment = document.createComment('template');
@@ -52,7 +52,9 @@ presets.template = function (t) {
     }
     return comment;
 };
-if (!isProduction) window.renderElements = renderElements;
+// <!--
+window.renderElements = renderElements;
+// -->
 var renderidOffset = 10;
 var renderidClosed = 0;
 var addRenderElement = function () {
@@ -63,7 +65,7 @@ var addRenderElement = function () {
         if (element.$renderid < 10 && element.$renderid > 0) element.$renderid = ++renderidOffset;
         renderElements[element.$renderid] = element;
     }
-    rebuild(element);
+    buildFirst(element);
 };
 var removeRenderElement = function () {
     var element = this;
@@ -88,25 +90,53 @@ function refresh(root) {
             }
         }
     }
+    callDigest();
     if (rest.length) rest.forEach(a => removeRenderElement.call(a));
 }
-function rebuild(element) {
+function fireChanges(element, changes) {
+    var event = createEvent('changes');
+    event.changes = changes;
+    dispatch(event, element);
+}
+
+function buildFirst(element) {
+    rebuild(element, '$ready' in element);
+}
+var digests = [];
+function callDigest() {
+    var d = digests;
+    digests = [];
+    d.forEach(a => {
+        a.$digest();
+    });
+}
+function getWatchData(element) {
+    var { $watches } = element;
+    var props = {};
+    for (var key in $watches) {
+        var data = element[key];
+        props[key] = isObject(data) && !isFunction(data) && !isDate(data) && !isNode(data) ? extend(data instanceof Array ? [] : {}, data) : data;
+    }
+    return props;
+}
+function rebuild(element, isFirstRender) {
+    if (isFirstRender) delete element.$ready;
+    if (element.$digest) digests.push(element);
     if (!element.$needchanges) {
         element.$renders.forEach(a => a.call(element));
         return;
     }
-    var props = {};
-    Object.keys(element).forEach(function (key) {
-        var data = element[key];
-        props[key] = isObject(data) && !isFunction(data) && !isDate(data) && !isNode(data) ? extend(data instanceof Array ? [] : {}, data) : data;
-    });
+    var props = getWatchData(isFirstRender ? { $watches: element.$watches } : element);
     element.$renders.forEach(a => a.call(element));
-    var changes = getChanges(element, props);
-    if (changes) {
-        var event = createEvent('changes');
-        event.changes = changes;
-        dispatch(event, element);
+    var capture = null;
+    for (var k in props) {
+        var current = element[k];
+        var previous = props[k];
+        if (shallowEqual(current, previous)) continue;
+        if (!capture) capture = {};
+        capture[k] = { current, previous };
     }
+    if (capture) fireChanges(element, capture);
 }
 var variableReg = /([^\:\,\+\=\-\!%\^\|\/\&\*\!\;\?\>\<~\{\}\s\[\]\(\)]|\?\s*\.(?=[^\d])|\s*\.\s*)+/g;
 var variableOnlyReg = new RegExp(`^${variableReg.source}$`);
@@ -474,18 +504,42 @@ var createMapper = function (write, mapper) {
         });
     }
 }
+
+class Binder {
+    constructor(getter, write) {
+        this.gt = getter;
+        this.st = write;
+    }
+    call(elem) {
+        var value = this.gt.call(elem);
+        var oldv = elem.$value;
+        if (shallowEqual(oldv, value)) return;
+        elem.$value = value;
+        if (!isHandled(value)) value = '';
+        this.st.call(elem, value, oldv);
+    }
+}
+class Binder2 {
+    constructor(getter, write, oldValue) {
+        this.get = getter;
+        this.set = write;
+        this.value = oldValue;
+    }
+    call(elem) {
+        var value = this.get.call(elem);
+        var oldv = this.value;
+        if (shallowEqual(oldv, value)) return;
+        this.value = value;
+        if (!isHandled(value)) value = '';
+        this.set.call(elem, value, oldv);
+    }
+}
+
 var createBinder2 = function (write, read) {
     return function (search) {
         var getter = createGetter(this, search);
         var oldValue = isFunction(read) ? read(this) : undefined;
-        this.$renders.push(function () {
-            var value = getter(this);
-            if (shallowEqual(value, oldValue)) return;
-            var oldv = oldValue;
-            oldValue = value;
-            if (!isHandled(value)) value = '';
-            write(this, value, oldv);
-        });
+        this.$renders.push(new Binder2(getter, write, oldValue));
     };
 }
 
@@ -507,43 +561,98 @@ var src2 = function (search) {
         cast(this, origin);
     });
 }
-
+var gtValue = function () { return this.value };
+var stValue = function (v) { this.value = v };
+var gtChecked = function () { return this.checked };
+var stChecked = function (v) { this.checked = v };
+var gtHtml = function () { return this.innerHTML };
+var stHtml = function (v) { this.innerHTML = v };
+class Model {
+    constructor(getScope, setScope, target) {
+        this.gs = getScope;
+        this.ss = setScope;
+        var getValue = target.getValue;
+        var setValue = target.setValue;
+        if (getValue && setValue);
+        else if (("value" in target || target.getValue instanceof Function) && target.setValue instanceof Function) {
+            if (!getValue) getValue = gtValue;
+            if (!setValue) setValue = stValue;
+        } else if (/^input$/i.test(target.tagName) && /^checkbox$/i.test(target.type) || /^checkbox$/i.test(target.tagName)) {
+            if (!getValue) getValue = gtChecked;
+            if (!setValue) setValue = stChecked;
+        } else if (/^(select|input|textarea)$/i.test(target.tagName) || "value" in target) {
+            if (!getValue) getValue = gtValue;
+            if (!setValue) setValue = stValue;
+        } else {
+            if (!getValue) getValue = gtHtml;
+            if (!setValue) setValue = stHtml;
+        }
+        this.gv = getValue;
+        this.sv = setValue;
+        this.target = target;
+    }
+    call(elem) {
+        var value = this.gv.call(elem);
+        if (value === this.value) {
+            return;
+        }
+        this.ss.call(this.target, value);
+        this.value = value;
+        this.bd.value = this.gs.call(this.target, value);
+        userChanged = true;
+    }
+    hook(elem, emit) {
+        var binder = new Binder2(this.gs, this.target !== elem ? this.sv.bind(this.target) : this.sv);
+        elem.$renders.push(binder);
+        binder.call(elem);
+        this.bd = binder;
+        if (emit) {
+            eventsBinders.forEach(on => on(this.target, this, true));
+            this.value = this.gv.call(elem);
+            this.target = elem;
+        }
+        return binder;
+    }
+}
+var createSetter = function (elem, search) {
+    return $$eval.bind(elem, search + "=arguments[2]", getScopeList(elem), elem);
+};
 var directives = {
-    text: createBinder2(function (elem, value) {
+    text: createBinder2(function (value) {
         if (isNode(value) || isArray(value)) {
-            if (value !== elem.firstChild) {
-                remove(elem.childNodes);
-                appendChild(elem, value);
+            if (value !== this.firstChild) {
+                remove(this.childNodes);
+                appendChild(this, value);
             }
         }
         else {
-            elem.innerText = value;
+            this.innerText = value;
         }
     }),
-    html: createBinder2(function (elem, value) {
+    html: createBinder2(function (value) {
         if (isNode(value) || isArray(value)) {
-            if (value !== elem.firstChild) {
-                remove(elem.childNodes);
-                appendChild(elem, value);
+            if (value !== this.firstChild) {
+                remove(this.childNodes);
+                appendChild(this, value);
             }
         }
         else {
-            elem.innerHTML = value;
+            this.innerHTML = value;
         }
     }),
-    hide: createBinder2(function (elem, value) {
+    hide: createBinder2(function (value) {
         var display = value ? 'none' : '';
-        var style = elem.style;
+        var style = this.style;
         if (style.display !== display) style.display = display;
-    }, function (elem) {
-        return elem.style.display === 'none';
+    }, function () {
+        return this.style?.display === 'none';
     }),
-    show: createBinder2(function (elem, value) {
+    show: createBinder2(function (value) {
         var display = value ? '' : 'none';
-        var style = elem.style;
+        var style = this.style;
         if (style.display !== display) style.display = display;
-    }, function (elem) {
-        return elem.style.display !== 'none';
+    }, function () {
+        return this.style?.display !== 'none';
     }),
     style: createMapper(css, css.styleToMap),
     class: createMapper(addClass, addClass.classToMap),
@@ -553,54 +662,9 @@ var directives = {
     },
     model(search, target, change) {
         var getter = createGetter(this, search);
-        var oldValue;
-        var getstr = target.getValue instanceof Function ? "this.getValue()" : "";
-        var setter = target.setValue instanceof Function ? function () {
-            var value = getter(this);
-            if (value === undefined) value = "";
-            if (deepEqual(oldValue, value)) return;
-            oldValue = value;
-            this.setValue(value);
-        } : null;
-        var setter2 = function (key) {
-            var value = getter(this);
-            if (value === undefined) value = "";
-            if (deepEqual(oldValue, value)) return;
-            oldValue = value;
-            this[key] = value;
-        };
-        if (("value" in target || target.getValue instanceof Function) && target.setValue instanceof Function) {
-            this.$renders.push(setter);
-            var change = getstr || "this.value";
-        } else if (/^input$/i.test(target.tagName) && /^checkbox$/i.test(target.type) || /^checkbox$/i.test(target.tagName)) {
-            this.$renders.push(setter || setter2.bind(target, 'checked'));
-            var change = getstr || "this.checked";
-        } else if (/^(select|input|textarea)$/i.test(target.tagName) || "value" in target) {
-            this.$renders.push(setter || setter2.bind(target, 'value'));
-            var change = getstr || "this.value";
-        } else {
-            this.$renders.push(setter || function () {
-                var value = getter(this);
-                if (value === undefined) value = "";
-                if (deepEqual(oldValue, value)) return;
-                oldValue = value;
-                if (html(this) !== value) html(this, value);
-            });
-            var change = getstr || "'value' in this?this.value:this.innerHTML";
-        }
-        if (change === false) return;
-        setter2 = null;
-        var changeme = $$eval.bind(this, search + "=" + change, getScopeList(this));
-        var onchange = function () {
-            changeme(this);
-            var value = getter(this);
-            if (value === oldValue) {
-                return;
-            }
-            oldValue = value;
-            userChanged = true;
-        };
-        eventsBinders.forEach(on => on(target, onchange, true));
+        var setter = createSetter(this, search);
+        var model = new Model(getter, setter, target);
+        model.hook(this, change !== false ? target : null);
     },
     value(search, target) {
         directives.model.call(this, search, target, false);
@@ -622,7 +686,7 @@ var binders = {
             if (this[attr] !== value) {
                 this[attr] = this[attr.replace(/\-[a-z]/g, a => a.toUpperCase())] = value;
             }
-        }
+        };
         this.$renders.push(hook);
         return hook;
     },
@@ -737,14 +801,11 @@ function renderProp(elem, props) {
 
 function renderBinds(element, binds, init) {
     var bind = binders._;
-    var hs = [];
     for (var k in binds) {
-        if (k === 'src') continue;
         if (directives.hasOwnProperty(k)) continue;
         var h = bind.call(element, k, binds[k]);
-        hs.push(h);
+        h.call(element);
     }
-    return hs;
 }
 
 function renderRest(element, struct, replacer = element) {
@@ -756,14 +817,25 @@ function renderRest(element, struct, replacer = element) {
     }
     element.$renders = [];
     var { attrs, binds } = struct;
-    for (var k in binds) if (k !== 'src' && k in directives) {
-        directives[k].call(element, binds[k], replacer);
+    var bindWatch = !!element.$needchanges;
+    for (var k in binds) {
+        if (k in directives) {
+            if (k !== 'src') directives[k].call(element, binds[k], replacer);
+        }
+        else {
+            if (element !== replacer) replacer[k] = element[k];
+            if (bindWatch) {
+                var watches = element.$watches;
+                if (!watches) watches = element.$watches = {};
+                if (!watches[k]) watches[k] = true;
+            }
+        }
     }
     for (var k in struct.attrs) {
         binders[""].call(element, k, attrs[k]);
     }
-    if (binds.src) directives.src.call(element, binds.src);
     if (renders && renders.length) element.$renders.push.apply(element.$renders, renders);
+    if (binds.src) directives.src.call(element, binds.src);
     if (!isElement(replacer)) replacer = element;
     struct.ons.forEach(([on, key, value]) => on.call(element, replacer, key, value));
 }
@@ -850,23 +922,16 @@ function renderElement(element, scope = element.$scope, parentScopes = element.$
     if (!replacer || element === replacer) {
         if (element.children && element.children.length) renderElement(element.children, scope, parentScopes, once);
     }
-    if (!isFirstRender) return element;
-    renderRest(element, $struct, replacer);
-    if (isNode(replacer) && replacer !== element) {
-        if (!replacer.$renders) replacer.$renders = [];
-        replacer.$renders.push.apply(replacer.$renders, element.$renders);
-        element = replacer;
-    }
-    if (element.$renders.length) {
-        if (element.$renderid !== 9) {
-            on("append")(element, addRenderElement);
-            onremove(element, removeRenderElement);
-            if (isMounted(element));
-            else if (element.$renderid > 1) addRenderElement.call(element);
-            else if (eagermount) rebuild(element);
+    if (isFirstRender) {
+        renderRest(element, $struct, replacer);
+        if (isNode(replacer) && replacer !== element) {
+            if (!replacer.$renders) replacer.$renders = [];
+            replacer.$renders.push.apply(replacer.$renders, element.$renders);
+            element = replacer;
         }
-        else {
-            rebuild(element);
+        if (element.$digest || element.$renders.length) {
+            element.$ready = true;
+            renderlock.push(element);
         }
     }
     return element;
@@ -1104,24 +1169,42 @@ function createStructure(element, useExists) {
     element.$eval = $eval;
     return element.$struct = new Struct(ons, types, copys, binds, attr1, props, ids, once);
 }
-var eagermount = false, renderlock = false;
+function renderUnlock() {
+    var locked = renderlock.reverse();
+    renderlock = null;
+    locked.forEach(element => {
+        if (element.$renderid !== 9) {
+            on("append")(element, addRenderElement);
+            onremove(element, removeRenderElement);
+            if (isMounted(element));
+            else if (element.$renderid > 1) addRenderElement.call(element);
+            else if (eagermount) buildFirst(element);
+        }
+        else {
+            buildFirst(element);
+        }
+    });
+    eagermount = false;
+}
+function renderLock() {
+    if (!renderlock) {
+        renderlock = [];
+        return true;
+    }
+    return false;
+}
+var eagermount = false, renderlock = null;
 function render(element, scope, parentScopes, lazy = true) {
+    var haslock = renderLock();
     var if_top_length = if_top.length;
-    var haslock = false;
     if (isFinite(scope) && arguments.length === 2) lazy = scope, scope = undefined;
     else if (isFinite(parentScopes) && arguments.length === 3) lazy = parentScopes, parentScopes = undefined;
     var renderonce = lazy === 0;
-    if (!renderlock) {
-        haslock = true;
-        renderlock = true;
-        eagermount = !+lazy;
-    }
+    if (haslock) eagermount = !+lazy;
     var e = renderElement(element, scope, parentScopes, renderonce);
-    if (haslock) {
-        renderlock = false;
-        eagermount = false;
-    }
+    if (haslock) renderUnlock(element);
     if (if_top_length < if_top.length) initIf(if_top.splice(if_top_length, if_top.length - if_top_length));
+    if (haslock) callDigest();
     return e;
 }
 var digest = lazy(refresh, -{});
@@ -1153,4 +1236,6 @@ render.register = function (key, name) {
 };
 render.getFromScopes = getFromScopes;
 render.struct = createStructure;
-render.mergeStruct = mergeStruct;
+render.mergeStruct = mergeStruct;
+render.Binder = Binder;
+render.Model = Model;

package/coms/zimoli/select.js

@@ -165,16 +165,19 @@ function select() {
         var $name = 'name';
         var template = target.$template;
         var isIndexedKey = false;
-        if (template) {
+        var $item = '';
+        if (template) a: {
             var { attrs, binds } = template.childNodes[0].$struct;
-            if (attrs.value) $key = attrs.value;
+            if (!attrs.value && !binds.value) break a;
+            $key = attrs.value || binds.value;
             if ($key === target.$src.indexName || $key === target.$src.keyName) isIndexedKey = true;
             $name = binds.bind || binds.html || binds.text || $name;
+            $item = target.$src.itemName;
         }
         var initList2 = function (src) {
             if (isIndexedKey) optionsMap = src;
             else src.forEach(s => {
-                optionsMap[seek(s, $key)] = s;
+                optionsMap[seek($item ? { [$item]: s } : s, $key)] = s;
                 if (isObject(s)) s.selected = s.key === target.value;
             });
             list = selectList(generator, src, !!target.multiple, !!target.editable);
@@ -263,9 +266,11 @@ function select() {
         }
     };
     if (!target.$renders) {
-        target.$renders = [setEmpty, setFocus];
+        target.$renders = [];
     }
     target.$renders.push(setIcon);
+    if (!isNode(list)) target.$renders.push(setEmpty, setFocus);
+
     onclick(target, mousedown);
     return target;
 }

package/coms/zimoli/select.less

@@ -1,7 +1,3 @@
-& {
-    background: #fff;
-}
-
 select& {
     border: 1px solid #00000033;
     -webkit-appearance: none;
@@ -23,13 +19,11 @@ select& {
     }
 
     &:hover {
-        color: #fff;
-        background-color: #2ca2f9;
+        border-color: #2ca2f9;
     }
 
     &:active {
-        color: #fff;
-        background-color: #1c82c9;
+        border-color: #1c82c9;
     }
 
     &[iconed] {
@@ -46,10 +40,5 @@ model>& {
 }
 
 &[empty] {
-    color: #0009;
-
-    &:hover,
-    &:active {
-        color: #fff9;
-    }
+    color: #0008;
 }

package/coms/zimoli/selectList.js

@@ -79,6 +79,7 @@ function main() {
         var key = isEmpty(option.key) ? option.value : option.key;
         if (key in itemMap) return itemMap[key];
         var item = itemMap[key] = document.createElement('div');
+        if (isEmpty(key)) item.setAttribute('empty', '');
         item.setAttribute("item", '');
         item.innerHTML = option.innerHTML || option.name;
         item.name = option.name || option.innerHTML;
@@ -216,7 +217,10 @@ function main() {
                         page.go(0);
                         appendChild(page, adder);
                     });
-                    popup(edit, [.5, .5]);
+                    on("remove")(edit, function () {
+                        page.with = null;
+                    });
+                    popup(edit, [.5, .5], true);
                     break;
             }
         });

package/coms/zimoli/selectList.less

@@ -33,6 +33,9 @@
             background-color: transparent;
         }
     }
+    >[empty]{
+        opacity: .6;
+    }
 }
 
 &[iconed] {

package/coms/zimoli/table.html

@@ -1,22 +1,22 @@
 <thead @mounted="setFixedColumn.call(this.parentNode),setContextMenu(this)">
-    <tr inline-block #adapter thead @mounted="resizeT(this)">
+    <tr inline-block #adapter thead @append="resizeT(this)">
         <td draggable="false" fixed row-index>
             <mask></mask>${i18n`序号`}
         </td>
-        <td fixed:="f.fixed" -repeat="f in fields track by f.id" :style="{width:f.width}" @dblclick="sort(f)"
-            swapped_="f.summary">
+        <td fixed:="f.fixed" -repeat="f in fields track by f.id" once-append="this.style.width=f.width_p"
+            @dblclick="sort(f)" swapped_="f.summary">
             <mask></mask><i -if="f.icon" -class="f.icon"></i><span -if="f.name" -html="f.name"
                 type@="typeof f.type==='string'?f.type:''"></span><template -else>&nbsp;</template>
         </td>
         <td style="min-width: 0;" draggable="false">&nbsp;</td>
     </tr>
 </thead>
-<tbody -src="(d,i) in data" :style="tbodyHeight(this,hasFoot)">
-    <tr inline-block :style="{width:adapter.style.width}" @click="rowClick(d,i,event)" @mounted="resizeR(this)">
-        <td fixed row-index :style="adapter.firstChild.getAttribute('style')">
+<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')">
             <mask></mask><span -bind="i+1"></span>
         </td>
-        <td fixed:="f.fixed" -repeat="(f,i) in fields" :style="adapter.children[i+1].getAttribute('style')">
+        <td fixed:="f.fixed" -repeat="(f,i) in fields" once-append="this.style=adapter.children[i+1].getAttribute('style')">
             <mask></mask>
             <model -if="!isEmpty(f.key)" :field=f :data=d readonly></model>
             <template -else>&nbsp;</template>

package/coms/zimoli/table.js

@@ -219,7 +219,10 @@ var trElementReg = /^tr$/i;
 var id = 0;
 function enrichField(f) {
     if (!f.id) f.id = ++id;
-    if (f.width) return;
+    if (f.width) {
+        f.width_p = fromPixel(f.width);
+        return;
+    }
     var width;
     if (f.size) {
         width = f.size;
@@ -250,13 +253,17 @@ function enrichField(f) {
     }
     if (width > 600) width = 600;
     f.width = parseFloat(width) + 60;
+    f.width_p = fromPixel(f.width);
     if (!f.key && f.options && isEmpty(f.fixed)) {
         f.fixed = true;
     }
 }
-var tbodyHeight = function (tbody, hasFoot) {
+var tbodyHeight = function (tbody, hasFoot, width) {
     var rowHeight = calcPixel(36);
-    return { 'max-height': ((innerHeight - (!!hasFoot ? rowHeight : 6) - getScreenPosition(tbody).top - 10) / rowHeight | 0) * rowHeight }
+    return {
+        'max-height': ((innerHeight - (!!hasFoot ? rowHeight : 6) - getScreenPosition(tbody).top - 10) / rowHeight | 0) * rowHeight,
+        width
+    }
 };
 
 var setFixed = function (children, scrolled, left, borderRight) {
@@ -336,7 +343,6 @@ var setFixedColumn = function (remark) {
         css(tfoot, { left: this.scrollLeft });
     }
 };
-var setLazyFixedColumn = lazy(setFixedColumn, 0);
 var setClass = function (tds, cls, old) {
     tds.forEach(td => td[cls] = true);
     old.forEach(td => { if (!td[cls]) removeClass(td, cls) });
@@ -402,7 +408,6 @@ function setContextMenu(thead) {
                 if (td.offsetWidth > width) css(td, { width });
             }
         });
-        setLazyFixedColumn.call(thead.parentNode, true)
     };
     var menuItems = fields.map((f, i) => ({ name: f.name || "&nbsp", index: i, width: f.width, key: f.key, checked: !f.hidden, do: _do }));
     var scope = this;
@@ -544,7 +549,7 @@ function table(elem) {
             tbody() {
                 var e = list.apply(null, arguments);
                 css(e, tbodyHeight(e, this.hasFoot));
-                css(e, { width: this.adapter.offsetWidth, display: 'block' });
+                css(e, { width: this.adapter.style.width, display: 'block' });
                 this.tbody0 = e;
                 return e;
             },
@@ -574,13 +579,13 @@ function table(elem) {
             pagination
         };
         render(this, $scope, this.$parentScopes.concat(this.$scope));
-        if (isMounted(table)) setFixedColumn.call(table);
         await data;
         if (!data.is_errored) $scope.data = Table.from(fields, data);
         $scope.data.callback = function () {
             render.digest();
         };
     })
+
     autodragchildren(
         table,
         cellMatchManager,
@@ -630,10 +635,8 @@ function table(elem) {
             }
             markThead();
             markedRows = true;
-            setLazyFixedColumn.call(table);
         }
     );
     resizingList.set(table, setFixedColumn);
-    on("scroll")(table, setFixedColumn);
     return table;
 }