efront 4.11.0 → 4.11.2

package/coms/zimoli/getGenerator.js

@@ -11,6 +11,7 @@ var cloneChildNodes = function (template) {
     }
     return cNodes;
 }
+
 /**
  * @param {Element} container
  * @param {Element|string} tagName;
@@ -22,6 +23,7 @@ var getGenerator = function (container, tagName = 'item') {
     container.$generatorScopes = scopes;
     if (container.$generator) return container.$generator;
     var template = document.createElement(container.tagName);
+    var tagTemplate = isElement(tagName);
     var templates = [];
     var hasAfter = false;
     for (let a of container.childNodes) {
@@ -42,8 +44,21 @@ var getGenerator = function (container, tagName = 'item') {
         var paddingCount = [].indexOf.call(container.childNodes, c);
         container.paddingCount = paddingCount;
     }
+    if (tagTemplate) {
+        if (!templates.length) {
+            templates = [tagName];
+            tagTemplate = false;
+        }
+    }
+
     appendChild(template, templates);
     render.struct(templates);
+    if (tagTemplate) {
+        render.struct(tagName);
+        var template0 = templates[0];
+        template0.$struct = render.mergeStruct(tagName.$struct, template0.$struct);
+        template0.$renderid = tagName.$renderid;
+    }
     if (templates.length) container.$template = template;
     /**
      * @param {number} index;
@@ -56,28 +71,24 @@ var getGenerator = function (container, tagName = 'item') {
             com = container.src[index];
         }
         if (com === undefined) return;
-        var needSetAttr = isElement(tagName);
         if (isNode(element));
         else if (!template.childNodes.length) {
-            element = needSetAttr ? tagName.cloneNode(true) : document.createElement(tagName);
-            needSetAttr = false;
+            element = document.createElement(tagName);
         }
         else {
             var childNodes = cloneChildNodes(template);
             element = childNodes[0];
             if (childNodes.length > 1) element.with = Array.prototype.slice.call(childNodes, 1);
         }
-        if (needSetAttr) {
-            for (var a of tagName.attributes) {
-                element.setAttribute(a.name, a.value);
-            }
-        }
         var scopes = container.$generatorScopes;
         var parsedSrc = container.$src;
+        var wraped = undefined;
+        if (com instanceof Item) {
+            wraped = com;
+            com = com.value;
+        }
         if (parsedSrc) {
-            var newScope = parsedSrc.createScope(com, index, index);
-            var newItem = render(element, newScope, scopes, false);
-            if (element.with) newItem.with = render(element.with, newScope, scopes, false);
+            var newScope = parsedSrc.createScope(com, index, index, wraped);
         } else {
             var newScope = container.src[index];
             if (!isObject(newScope)) newScope = {
@@ -97,9 +108,12 @@ var getGenerator = function (container, tagName = 'item') {
                     return this.$item;
                 }
             }
-            var newItem = render(element, newScope, scopes, false);
-            if (element.with) newItem.with = render(element.with, newScope, scopes, false);
+            if (wraped) newScope.$wraped = wraped;
         }
+        element.$scope = newScope;
+        element.$parentScopes = scopes;
+        var newItem = render(element, newScope, scopes, false);
+        if (element.with) newItem.with = render(element.with, newScope, scopes, false);
         return newItem;
     };
 };

package/coms/zimoli/menuList.js

@@ -123,7 +123,8 @@ function main() {
     var main = this;
     if (direction == 'y') page.ispop = true;
     var istoolbar = direction === 't';
-    function popMenu(item, target) {
+    function popMenu(target) {
+        var item = getMenu(target);
         if (page.actived) {
             clear();
             page.focus();
@@ -173,7 +174,7 @@ function main() {
         enterMenuEnabled = false;
         if (page.ispop) {
             page.setFocus(menu);
-            popMenu(menu.menu, menu);
+            popMenu(menu);
         }
     }, 60);
     on('pointerdown')(page, unblur);
@@ -181,34 +182,36 @@ function main() {
         document.activeElement.blur();
     };
     var activeMenu = function () {
-        if (this.menu.line) return;
+        const thismenu = getMenu(this);
+        if (thismenu.line) return;
         if (this.hasAttribute("disabled") || this.hasAttribute('line')) return;
-        var pop = active(this.menu.value, this);
+        var pop = active(thismenu.value, this);
         if (pop === false) return;
         var root = page.root || page;
         var istool = root.direction === 't' || root.selected
         if (root.ispop === 1) root.ispop = false;
         if (istool) {
-            var menu = this.menu;
+            var menu = thismenu;
             if (root.selected) root.selected.setActive(false);
             if (root !== page) {
                 var target = root.actived.target;
                 if (isObject(menu.value)) delete menu.value.children;
-                target.menu.extends(menu.value);
-                menu = target.menu;
+                var targetmenu = getMenu(target);
+                targetmenu.extends(menu.value);
+                menu = targetmenu;
             }
             else {
                 target = this;
             }
             menu.setActive(true);
-            root.selected = target.menu;
+            root.selected = getMenu(target);
             autoremove();
             return;
         }
         if (page.actived && page.actived.target === this) {
             if (mounted_menus.indexOf(page.actived) >= 0) while (mounted_menus.length && mounted_menus[mounted_menus.length - 1] !== page.actived) remove(mounted_menus.pop());
             if (!mounted_menus.length || page === mounted_menus[mounted_menus.length - 1]) {
-                popMenu(this.menu, this, false);
+                popMenu(this, false);
             }
             else {
                 remove(mounted_menus.pop());
@@ -218,7 +221,7 @@ function main() {
         else {
             while (mounted_menus.length && mounted_menus[mounted_menus.length - 1] !== page) remove(mounted_menus.pop());
             page.actived = null;
-            popMenu(this.menu, this, false);
+            popMenu(this, false);
             if (!page.actived) {
                 autoremove();
             }
@@ -226,7 +229,7 @@ function main() {
     };
     var pressMenu = function (event) {
         if (event.which === 3) {
-            popMenu(this.menu, this);
+            popMenu(this);
         }
         else {
             switchMenu.done = false;
@@ -241,7 +244,7 @@ function main() {
 
     var switchMenu = lazy(function (event) {
         if (onclick.preventClick) return;
-        popMenu(this.menu, this);
+        popMenu(this);
         switchMenu.done = true;
     }, 300);
     var hasIcon = function () {
@@ -255,11 +258,10 @@ function main() {
     };
     var $scope = {
         "menu-item"(e, s) {
-            if (e && s === e.$scope) s = itemName ? s[itemName] : s.menu;
+            if (e && s === e.$scope) s = itemName ? s[itemName] : s.$item.value;
             var a = button(
                 menuItem(e, s, this.hasIcon)
             );
-            a.menu = s;
             return a;
         },
         hasIcon: hasIcon(),
@@ -270,9 +272,9 @@ function main() {
     if (!page.$src) page.$src = render.parseRepeat("m in menus");
     var src = page.$src;
     var itemName = src.itemName;
-    var className = `{'has-children':${itemName}.children&&${itemName}.children.length,
-            'warn':${itemName}.warn,
-            actived:${itemName}.isActived()
+    var className = `{'has-children':$item.children&&$item.children.length,
+            warn:$item.warn,
+            actived:$item.isActived()
         }`;
     var notHidden = `!${itemName}.hidden`;
     var ItemTemplate = document.createElement('menu-item');
@@ -281,7 +283,6 @@ function main() {
     else ItemTemplate.setAttribute("on-mouseenter", `enterMenu(this)`);
     ItemTemplate.setAttribute("e-class", className);
     if (src.itemName) ItemTemplate.setAttribute("e-if", notHidden);
-    ItemTemplate.setAttribute("_menu", src.itemName);
     ItemTemplate.innerHTML = menuItem.template;
     var generator = getGenerator(page, ItemTemplate);
     page.$generatorScopes.push($scope);
@@ -299,11 +300,15 @@ function main() {
     page.$renders.unshift(function () {
         this.$scope.hasIcon = hasIcon();
     });
+    var getMenu = function (a) {
+        return a.$scope.$item;
+    }
     page.open = function (a) {
-        if (!a.menu || !a.menu.length) {
+        var amenu = getMenu(a);
+        if (!amenu || !amenu.length) {
             return;
         }
-        var m = popMenu(a.menu, a);
+        var m = popMenu(a);
         m.moveFocus("home");
     };
     page.active = function (a) {
@@ -314,8 +319,9 @@ function main() {
         if (page.selected) page.selected.setActive(false);
         var selected = null;
         for (var e of this.children) {
-            if (!e.menu) continue;
-            selected = e.menu.pathTo(event.value);
+            var emenu = getMenu(e);
+            if (!emenu) continue;
+            selected = emenu.pathTo(event.value);
             if (selected) break;
         }
         if (!selected) return;
@@ -326,7 +332,7 @@ function main() {
     });
     on("focused")(page, function () {
         var focused = page.focused;
-        if (page.ispop && !page.parent) popMenu(focused.menu, focused, false);
+        if (page.ispop && !page.parent) popMenu(focused, false);
     });
     page.openFocus = openFocus;
     page.closeFocus = closeFocus;

package/coms/zimoli/on.js

@@ -118,6 +118,14 @@ var keyCodeMap = {
     num: 144,
     numlock: 144,
     scrolllock: 145,
+    mute: 173,// 静音
+    volumedown: 174,// 音量减
+    quiet: 174,// 音量减
+    volumeup: 175,// 音量加
+    loud: 175,// 音量加
+    next: 176,// 下一首
+    prev: 177,// 上一首
+    pause: 179,// 暂停/播放
     semicolon: 186,
     ";": 186,
     ":": 186,

package/coms/zimoli/removeClass.js

@@ -6,12 +6,10 @@ function removeClass(target, classNames) {
         var c = arr[cx];
         cls[c] = true;
     }
-    if (isString(classNames)) {
-        var clsNames = classNames.trim().split(/\s+/);
-        for (var cx = 0, dx = clsNames.length; cx < dx; cx++) {
-            var c = clsNames[cx];
-            delete cls[c];
-        }
+    if (isString(classNames)) classNames = classNames.trim().split(/\s+/);
+    if (isArray(classNames)) for (var cx = 0, dx = classNames.length; cx < dx; cx++) {
+        var c = classNames[cx];
+        delete cls[c];
     }
     var newarr = [];
     for (var k in cls) {

package/coms/zimoli/render.js

@@ -111,6 +111,7 @@ var variableReg = /([^\:\,\+\=\-\!%\^\|\/\&\*\!\;\?\>\<~\{\}\s\[\]\(\)]|\?\s*\.(
 var variableOnlyReg = new RegExp(`^${variableReg.source}$`);
 var createGetter = function (target, search, isprop = true) {
     if (!search) return function () { };
+    if (/^\{/.test(search)) search = `(${search})`;
     search = renderExpress(search);
     if (isprop) return $$eval.bind(target, search, null);
     if (variableOnlyReg.test(search)) return $$eval.bind(target, search + "(event)", null);
@@ -154,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;
@@ -388,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;
@@ -461,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);
@@ -480,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);
@@ -557,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) {
@@ -761,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) {
@@ -794,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));
@@ -865,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;
@@ -880,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;
@@ -903,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;
         };
@@ -1033,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.0",
+    "version": "4.11.2",
     "description": "简化前端开发，优化web性能",
     "main": "public/efront.js",
     "directories": {