efront 4.11.1 → 4.11.2

package/coms/zimoli/render.js

@@ -155,11 +155,11 @@ class Repeater {
         this.trackBy = trackBy;
         this.srcName = srcName;
     }
-    createScope(item, k, i) {
+    createScope(item, k, i, wraped) {
         var scope = {
             $key: k,
-            $item: item,
-            $index: i
+            $item: wraped || item,
+            $index: i,
         };
         if (this.keyName !== "$key") {
             scope[this.keyName] = k;
@@ -389,6 +389,13 @@ var parseIfWithRepeat = function (ifExpression, repeatExpression) {
     };
 };
 
+var mountElementIds = function (element) {
+    var scope = element.$scope;
+    for (var id of element.$struct.ids) {
+        if (scope[id] && scope[id] !== element) throw new Error(i18n`同一个id不能使用两次:` + id);
+        scope[id] = element;
+    }
+}
 var renderStructure = function (element) {
     var $struct = element.$struct;
     if ($struct.if) var { name: ifkey, key, value: ifexp } = $struct.if;
@@ -462,6 +469,37 @@ var createBinder = function (binder) {
 
     }
 }
+var createMapper = function (write, mapper) {
+    return function (search) {
+        var getter = isArray(search) ? search.map(s => createGetter(this, s)) : createGetter(this, search);
+        var oldValue = mapper();
+        this.$renders.push(function () {
+            var value = mapper(isArray(getter) ? getter.map(g => g(this)) : getter(this));
+            var changes = getChanges(value, oldValue);
+            if (!changes) return;
+            oldValue = value;
+            var targetValue = Object.create(null);
+            for (var k in changes) {
+                targetValue[k] = !isHandled(value[k]) ? "" : value[k];
+            }
+            write(this, targetValue);
+        });
+    }
+}
+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);
+        });
+    };
+}
 
 var src2 = function (search) {
     var getter = createGetter(this, search);
@@ -481,28 +519,41 @@ var src2 = function (search) {
         cast(this, origin);
     });
 }
+
 var directives = {
-    bind: createBinder(text),
-    html: createBinder(html),
-    hide: createBinder(function (elem, value) {
-        if (arguments.length === 1) return elem.style.display === 'none';
-        elem.style.display = value ? 'none' : '';
+    text: createBinder2(function (elem, value) {
+        elem.innerText = value;
     }),
-    show: createBinder(function (elem, value) {
-        if (arguments.length === 1) return elem.style.display !== 'none';
-        elem.style.display = value ? '' : 'none';
-    }),
-    style: createBinder(function (elem, value, oldValue) {
-        if (isString(value)) value = parseKV(value, ';', ':');
-        if (isString(oldValue)) oldValue = parseKV(oldValue, ";", ":");
-        var changed = getChanges(value, oldValue);
-        var targetValue = Object.create(null);
-        for (var k in changed) {
-            targetValue[k] = isEmpty(value[k]) ? "" : value[k];
+    bind: createBinder2(function (elem, value) {
+        if (isNode(value) || isArray(value)) {
+            if (value !== elem.firstChild) {
+                remove(elem.childNodes);
+                appendChild(elem, value);
+            }
+        }
+        else {
+            elem.innerText = value;
         }
-        value = targetValue;
-        css(elem, value);
     }),
+    html: createBinder2(function (elem, value) {
+        elem.innerHTML = value;
+    }),
+    hide: createBinder2(function (elem, value) {
+        var display = value ? 'none' : '';
+        var style = elem.style;
+        if (style.display !== display) style.display = display;
+    }, function (elem) {
+        return elem.style.display === 'none';
+    }),
+    show: createBinder2(function (elem, value) {
+        var display = value ? '' : 'none';
+        var style = elem.style;
+        if (style.display !== display) style.display = display;
+    }, function (elem) {
+        return elem.style.display === 'none';
+    }),
+    style: createMapper(css, css.styleToMap),
+    class: createMapper(addClass, addClass.classToMap),
     src(src) {
         var parsedSrc = this.$src;
         return src2.call(this, parsedSrc && /[\{\[\s]/.test(src) ? parsedSrc.srcName : src);
@@ -558,43 +609,7 @@ var directives = {
         eventsBinders.forEach(on => on(target, onchange, true));
     },
 
-    "class"(search) {
-        var getter = createGetter(this, search);
-        var generatedClassNames = {};
-        var oldValue;
-        this.$renders.push(function () {
-            var className = getter(this);
-            if (deepEqual(oldValue, className)) return;
-            oldValue = className;
-            var originalClassNames = [];
-            this.className.split(/\s+/).map(function (k) {
-                if (k && !hasOwnProperty.call(generatedClassNames, k) && !hasOwnProperty.call(originalClassNames, k)) {
-                    if (!/^\d+$/.test(k)) originalClassNames.push(originalClassNames[k] = k);
-                }
-            });
-            var deltaClassNames = [];
-            if (isString(className)) {
-                className.split(/\s+/).map(function (k) {
-                    if (!hasOwnProperty.call(originalClassNames, k)) {
-                        if (!/^\d+$/.test(k)) deltaClassNames.push(deltaClassNames[k] = k);
-                    }
-                });
-            } else if (isObject(className)) {
-                for (var k in className) {
-                    if (!hasOwnProperty.call(originalClassNames, k) && className[k]) {
-                        if (!/^\d+$/.test(k)) deltaClassNames.push(deltaClassNames[k] = k);
-                    }
-                }
-            }
-            var destClassName = originalClassNames.concat(deltaClassNames).join(" ");
-            generatedClassNames = deltaClassNames;
-            if (this.className !== destClassName) {
-                this.className = destClassName;
-            }
-        });
-    },
 };
-directives.text = directives.bind;
 // property binder
 var binders = {
     _(attr, search) {
@@ -762,15 +777,12 @@ function renderElement(element, scope = element.$scope, parentScopes = element.$
         if (isEmpty(s.once)) s.once = once;
         element.$eval = $eval;
     }
+    mountElementIds(element);
     if (element.$renderid <= -1) element = renderStructure(element);
     if (!element) return;
     if (!element || element.$renderid < 0 || element.nodeType !== 1) {
         return element;
     }
-    for (var id of element.$struct.ids) {
-        if (scope[id] && scope[id] !== element) throw new Error(i18n`同一个id不能使用两次:` + id);
-        scope[id] = element;
-    }
     var isFirstRender = !element.$renderid;
 
     if (isFirstRender) {
@@ -795,6 +807,7 @@ function renderElement(element, scope = element.$scope, parentScopes = element.$
                 if (!replacer.$parentScopes) replacer.$parentScopes = parentScopes;
                 if (isElement(replacer) && !replacer.$renderid) {
                     createStructure(replacer);
+                    replacer.$struct = mergeStruct(element.$struct, replacer.$struct);
                     if (replacer.children && replacer.children.length) renderElement(replacer.children, replacer.$scope, replacer.$parentScopes, once);
                     renderRest(replacer, replacer.$struct);
                     replacer.$struct.ons.forEach(([on, key, value]) => on.call(replacer, replacer, key, value));
@@ -866,6 +879,44 @@ function $eval(search, scope, event) {
     return $$eval.call(this, search, scope, this, event);
 }
 
+var merge = function (dst, src) {
+    if (!isHandled(src)) return dst;
+    if (!isHandled(dst)) return src;
+    if (isArray(dst)) {
+        return dst.concat(src);
+    }
+    if (isObject(dst)) return Object.assign(dst, src);
+    return src;
+};
+var pushb = function (dist, b) {
+    if (isArray(b)) dist.push(...b);
+    else if (isHandled(b)) dist.push(b);
+};
+var mergeStruct = function (struct1, struct2) {
+    if (!isObject(struct1)) return struct2;
+    if (!isObject(struct2)) return struct1;
+    for (var k in struct2) if (k !== 'binds') {
+        struct1[k] = merge(struct1[k], struct2[k]);
+    }
+    var binds1 = struct1.binds;
+    var binds2 = struct2.binds;
+    for (var k in binds2) {
+        if (/^(class|style)$/.test(k)) {
+            var dist = [];
+            pushb(dist, binds1[k]);
+            pushb(dist, binds2[k]);
+            if (dist.length) {
+                if (dist.length === 1) dist = dist[0];
+                binds1[k] = dist;
+            }
+        }
+        else {
+            binds1[k] = binds2[k];
+        }
+    }
+    return struct1;
+}
+
 class Struct {
     constructor(ons, types, copys, binds, attrs, props, ids, once) {
         this.ons = ons;
@@ -881,6 +932,12 @@ class Struct {
 }
 
 
+var pushid = function (ids, name) {
+    ids.push(name);
+    var name1 = name.replace(/\-([a-z])/ig, (_, a) => a.toUpperCase());
+    if (name1 !== name) ids.push(name1);
+};
+
 function createStructure(element) {
     if (isArrayLike(element)) return Array.prototype.map.call(element, createStructure);
     if (element.$struct) return element.$struct;
@@ -904,11 +961,11 @@ function createStructure(element) {
         var { name, value } = attr;
         if (/^\$/.test(name)) continue;
         if (name === 'elementid' || name === 'renderid' || name === 'id') {
-            ids.push(value);
+            pushid(ids, value);
             continue;
         }
         if (/^#/.test(name)) {
-            ids.push(name.slice(1), name.slice(1).replace(/\-([a-z])/ig, (_, a) => a.toUpperCase()));
+            pushid(ids, name.slice(1));
             element.removeAttribute(name);
             continue;
         };
@@ -1034,4 +1091,5 @@ render.register = function (key, name) {
     }
 };
 render.getFromScopes = getFromScopes;
-render.struct = createStructure;
+render.struct = createStructure;
+render.mergeStruct = mergeStruct;

package/coms/zimoli/table.js

@@ -307,6 +307,7 @@ var setFixedColumn = function (remark) {
         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];
@@ -573,6 +574,7 @@ function table(elem) {
             pagination
         };
         render(this, $scope, this.$parentScopes.concat(this.$scope));
+        if (isMounted(table)) setFixedColumn.call(table);
         $scope.data = Table.from(fields, await data);
         $scope.data.callback = function () {
             render.digest();

package/coms/zimoli/vbox.js

@@ -148,8 +148,9 @@ function ybox(generator) {
                 wheelTime = event.timeStamp;
                 return;
             }
-            var deltay = -event.deltaY;
             if (event.moveLocked) return;
+            var deltay = -event.deltaY;
+            if (!deltay && _box.bindX) deltay = -event.deltaX;
             event.moveLocked = true;
             var box;
             if (deltay > 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "efront",
-    "version": "4.11.1",
+    "version": "4.11.2",
     "description": "简化前端开发，优化web性能",
     "main": "public/efront.js",
     "directories": {