efront 3.11.2 → 3.12.1

package/coms/zimoli/menuItem.less

@@ -1,4 +1,20 @@
 i{
     display: inline-block;
     width: 1em;
+}
+&.line,
+&[line] {
+    box-shadow: none;
+    >.track{
+        display: none;
+    }
+    line-height: 0;
+    font-size: 0;
+    &:after {
+        content: "";
+        display: block;
+        border-bottom: 1px solid;
+        opacity: .36;
+        margin: 0 -20px;
+    }
 }

package/coms/zimoli/menuList.js

@@ -11,11 +11,11 @@ var clear = function () {
 var unfocus = function () {
     remove(mounted_menus);
     this.ispop = false;
-    this.setFocus();
+    this.setFocus(null);
 };
-var setFocus = function (focused = this.firstMenu) {
+var setFocus = function (focused) {
     var page = this;
-    if (page.ispop || page === document.activeElement) {
+    if (focused) {
         if (page.focused !== focused) {
             if (page.focused) removeClass(page.focused, 'focus');
             if (focused) addClass(focused, "focus");
@@ -106,12 +106,18 @@ function keyalt() {
     else {
         root_menu.tabIndex = 0;
         root_menu.focus();
+        root_menu.setFocus(this.firstMenu);
     }
-    root_menu.setFocus();
+}
+function keytab(event) {
+    if (root_menu !== document.activeElement) return;
+    var menu = mounted_menus[mounted_menus.length - 1] || root_menu;
+    event.preventDefault();
+    menu.moveFocus(event.shiftKey ? -1 : 1);
 }
 function keyesc() {
     if (root_menu === document.activeElement && !mounted_menus.length) {
-        if (!root_menu.ispop) root_menu.blur(), root_menu.setFocus();
+        if (!root_menu.ispop) root_menu.blur();
         else root_menu.ispop = false;
     }
 }
@@ -136,16 +142,16 @@ function keyspace() {
     }
 }
 function register() {
-    // on('keydown.alt')(window, e => e.preventDefault());
-    on('keydown.alt.')(window, keyalt);
-    on('keydown.esc')(window, keyesc);
-    on('keydown.left')(window, keyleft);
-    on('keydown.right')(window, keyright);
-    on('keydown.up')(window, keyup);
-    on('keydown.down')(window, keydown);
-    on('keydown.enter')(window, keyspace);
-    on('keydown.space')(window, keyspace);
     root_menu = this;
+    bind('keydown.tab')(root_menu, keytab);
+    bind('keydown.alt.')(root_menu, keyalt);
+    bind('keydown.esc')(root_menu, keyesc);
+    bind('keydown.left')(root_menu, keyleft);
+    bind('keydown.right')(root_menu, keyright);
+    bind('keydown.up')(root_menu, keyup);
+    bind('keydown.down')(root_menu, keydown);
+    bind('keydown.enter')(root_menu, keyspace);
+    bind('keydown.space')(root_menu, keyspace);
 }
 function main(page, items, active, direction = 'y') {
     if (!isNode(page)) {
@@ -162,6 +168,7 @@ function main(page, items, active, direction = 'y') {
         if (!item.children || !item.children.length) return;
         var clone = template.cloneNode();
         clone.$parentScopes = page.$parentScopes;
+        clone.$scope = page.$scope;
         clone.$src = src;
         clone.innerHTML = template.innerHTML;
         var menu = main(clone, item.children, active);
@@ -200,8 +207,8 @@ function main(page, items, active, direction = 'y') {
     var open = function () {
         cancel();
         var elem = this;
-        page.setFocus(elem);
         if (page.ispop) popTimer = setTimeout(function () {
+            page.setFocus(elem);
             popMenu(elem.menu, elem);
         }, 60);
     };
@@ -210,16 +217,18 @@ function main(page, items, active, direction = 'y') {
     }
     var fire = function () {
         cancel();
+        if (this.menu.line) return;
         var pop = active(this.menu, this);
         if (pop === false) return;
         var root = page.root || page;
         if (root.ispop === 1) root.ispop = false;
         if (page.actived && page.actived.target === this) {
+            while (mounted_menus.length && mounted_menus[mounted_menus.length - 1] !== page.actived) remove(mounted_menus.pop());
             if (!mounted_menus.length) {
                 popMenu(this.menu, this);
             }
             else {
-                unfocus.call(page);
+                remove(mounted_menus.pop());
             }
         }
         else {
@@ -244,13 +253,14 @@ function main(page, items, active, direction = 'y') {
             return false;
         };
         var $scope = {
-            "menu-item": function (e, s) {
-                var a = bindAccesskey(
+            "menu-item"(e, s) {
+                var a = button(
                     menuItem(e, s, this.hasIcon)
                 );
                 if (!page.firstMenu) {
                     page.firstMenu = a;
                 }
+                a.menu = s.menu;
                 return a;
             },
             menus: items,
@@ -261,31 +271,23 @@ function main(page, items, active, direction = 'y') {
         };
         if (page.$src) {
             var src = page.$src;
-            var parentScopes = page.$parentScopes;
             var itemName = src.itemName;
             var className = `{'has-children':${itemName}.children&&${itemName}.children.length,'warn':${itemName}.type==='danger'||${itemName}.type==='warn'||${itemName}.type==='red'}`;
             var notHidden = `!${itemName}.hidden`;
+            var generator = getGenerator(page, 'menu-item');
 
             list(page, function (index) {
                 var item = items[index];
                 if (!item) return;
-                var a = $scope["menu-item"](null, item);
-                var scope = {};
                 if (item instanceof Item) item = item.value;
-                if (src.itemName) scope[src.itemName] = item;
-                else scope.$item = item;
-                if (src.keyName) scope[src.keyName] = index;
-                else scope.$key = index;
-                if (src.indexName) scope[src.indexName] = index;
-                else scope.$index = index;
-                if (src.srcName) scope[src.srcName] = items;
+                var a = $scope["menu-item"](null, item);
                 if (src.itemName) a.setAttribute("e-if", notHidden);
+                a.setAttribute("e-class", className);
+                a = generator(index, item, a);
                 a.menu = item;
                 on("mouseleave")(a, cancel);
                 on("mouseenter")(a, open);
                 on("click")(a, fire);
-                a.setAttribute("e-class", className);
-                render(a, scope, parentScopes);
                 return a;
             });
             on("append")(page, function () {
@@ -303,7 +305,7 @@ function main(page, items, active, direction = 'y') {
         });
     }
     else {
-        var generator = getGenerator(page);
+        var generator = getGenerator(page, 'menu-item');
 
         list(page, function (index) {
             var elem = generator(index);

package/coms/zimoli/menuList.less

@@ -5,7 +5,6 @@
     background-color: #fff;
     box-shadow: 0 0 20px -6px rgba(0, 0, 0, .1);
     border: 1px solid #0003;
-    line-height: 28px;
     padding: 6px 0;
 
     >menu-item {
@@ -17,6 +16,10 @@
         color: inherit;
         box-shadow: none;
         text-align: inherit;
+        vertical-align: top;
+        line-height: 20px;
+        padding-top: 4px;
+        padding-bottom: 4px;
 
         &.warn {
             color: #c28;
@@ -27,7 +30,8 @@
         }
 
         &.has-children {
-            padding: 0 24px 0 16px;
+            padding-right: 24px;
+            padding-left: 16px;
 
             &:after {
                 content: ">";

package/coms/zimoli/model.js

@@ -91,15 +91,17 @@ var constructors = {
         }
         else if (t === 'a') {
             var { field, data } = _;
-            var pad = selectList(field.options, field.multi, true);
-            var e = document.createElement('select');
             var opt = null;
-            for (var o of field.options) {
+            for (var cx = 0, options = field.options, dx = options.length; cx < dx; cx++) {
+                var o = options[cx];
                 if (o.key === data[field.key]) {
                     opt = o;
+                    o.selected = true;
                     break;
                 }
             }
+            var pad = selectList(field.options, field.multi, true);
+            var e = document.createElement('select');
             e.innerHTML = `<option selected value="${opt ? opt.key : ''}">${opt ? opt.name : '请选择'}</option>`;
             e.value = opt ? opt.key : '';
             elem = select(e, pad);

package/coms/zimoli/on.js

@@ -20,8 +20,8 @@ var keyCodeMap = {
     space: 32,
     pageup: 33,
     pagedown: 34,
-    home: 35,
-    end: 36,
+    end: 35,
+    home: 36,
     left: 37,
     up: 38,
     right: 39,

package/coms/zimoli/render.js

@@ -529,14 +529,14 @@ var binders = {
 };
 var createEmiter = function (on) {
     return function (key, search) {
-        if (this.$src) {
-            var parsedSrc = this.$src;
+        var parsedSrc = this.$src;
+        var getter0 = createGetter(search, false), getter1;
+        if (parsedSrc) {
             var scopes = this.$parentScopes;
             search = search.slice();
             search[0] += `with(this.$parentScopes[${scopes.length}])`;
-            this.$parentScopes = scopes.concat(this.$scope);
+            getter1 = createGetter(search, false);
         }
-        var getter = createGetter(search, false);
         on(key)(this, function (e) {
             if (parsedSrc) {
                 var target = e.currentTarget || e.target;
@@ -556,12 +556,14 @@ var createEmiter = function (on) {
             var res;
             if (scope) {
                 var temp = this.$scope;
+                this.$parentScopes.push(temp);
                 this.$scope = scope;
-                res = getter.call(this, e);
+                res = getter1.call(this, e);
+                this.$parentScopes.pop();
                 this.$scope = temp;
             }
             else {
-                res = getter.call(this, e);
+                res = getter0.call(this, e);
             }
             if (res && isFunction(res.then)) res.then(digest, digest);
             digest();
@@ -581,7 +583,7 @@ function getFromScopes(key, scope, parentScopes) {
     }
     if (parentScopes) for (var cx = parentScopes.length - 1; cx >= 0; cx--) {
         var o = parentScopes[cx];
-        if (key in o) {
+        if (o && key in o) {
             return o[key];
         }
     }
@@ -614,13 +616,13 @@ function renderElement(element, scope = element.$scope, parentScopes = element.$
         return element;
     }
     var isFirstRender = !element.renderid;
-    element.renderid = 1;
-    var parentNode = element.parentNode;
-    if (parentNode) {
-        if (parentNode.renderid > 1 || parentNode.isMounted) element.renderid = 2;
-    }
 
     if (isFirstRender) {
+        element.renderid = 1;
+        var parentNode = element.parentNode;
+        if (parentNode) {
+            if (parentNode.renderid > 1 || parentNode.isMounted) element.renderid = 2;
+        }
         element.renders = element.renders ? [].concat(element.renders) : [];
         var { ons, copys, attrs, props, binds, context: withContext } = element.$struct;
         delete element.$struct;

package/coms/zimoli/select.js

@@ -94,6 +94,15 @@ function select(target, list, removeOnSelect, direction) {
         if (removeOnSelect === null) {
             onmousedown(list, preventDefault);
         }
+        on("keydown.up")(target, preventDefault);
+        on("keydown.down")(target, preventDefault);
+        on("keydown.enter")(target, preventDefault);
+        on("keydown.space")(target, preventDefault);
+        var pop = function () {
+            if (saved_list !== list) mousedown.call(this);
+        };
+        on("keydown.down")(target, pop);
+        on("keydown.enter")(target, pop);
         onremove(list, onlistremove);
     };
     if (isNode(list)) {
@@ -103,7 +112,23 @@ function select(target, list, removeOnSelect, direction) {
         };
         var setIcon = function () {
         };
-    } else {
+    }
+    else if (target.$src) {
+        var generator = getGenerator(target);
+        var initList2 = function (src) {
+            list = selectList(generator, src, target.multiple, target.editable);
+            if (!target.multiple) {
+                onclick(list, onlistclick);
+            }
+            bindEvent();
+        };
+        care(target, initList2);
+        var initList = function () {
+        };
+        var setIcon = function () {
+        };
+    }
+    else {
         var savedOptions;
         removeOnSelect = null;
         var lastSelected = [];

package/coms/zimoli/selectList.js

@@ -1,12 +1,17 @@
 var singleClick = function () {
     var node = this.parentNode;
     if (node.activeNode === this) return;
-    if (node.activeNode) node.activeNode.removeAttribute("selected");
+    if (node.activeNode) {
+        if (node.activeNode.origin) node.activeNode.origin.selected = false;
+        node.activeNode.removeAttribute("selected");
+    }
     this.setAttribute("selected", "");
+
     node.activeNode = this;
     if (node.value === this.value) return;
     node.value = this.value;
     node.name = this.name;
+    if (this.origin) this.origin.selected = true;
     dispatch(node, "change");
 };
 var multipleClick = function () {
@@ -20,13 +25,33 @@ var multipleClick = function () {
         values.splice(index, 1);
         this.removeAttribute("selected");
     }
+    if (this.origin) this.origin.selected = true;
     dispatch(node, "change");
 };
 
-function main(children, multiple, addable) {
-    var page = div();
+
+function main() {
+    var children, multiple, addable, generator, page;
+    for (let a of arguments) {
+        if (a instanceof Array) children = a;
+        switch (typeof a) {
+            case "function":
+                generator = a;
+                break;
+            case "boolean":
+                if (multiple === void 0) multiple = a;
+                else addable = a;
+            case "object":
+                if (isNode(a)) {
+                    page = a;
+                    if (!generator) generator = getGenerator(page);
+                }
+                else if (a.length) children = a;
+
+        }
+    }
+    if (!page) page = div();
     page.value = multiple ? [] : "";
-    var firstValue = false;
     var clicker = multiple ? multipleClick : singleClick;
     var itemMap = Object.create(null);
     function createItem(option) {
@@ -36,6 +61,7 @@ function main(children, multiple, addable) {
         item.setAttribute("item", '');
         item.innerHTML = option.innerHTML || option.name;
         item.name = option.name || option.innerHTML;
+        item.origin = option;
         var icon = option.getAttribute ? option.getAttribute("icon") : option.icon;
         if (icon) {
             if (!hasIcon) {
@@ -50,10 +76,10 @@ function main(children, multiple, addable) {
             if (multiple) {
                 item.setAttribute("selected", "");
                 page.value.push(option.value);
-            } else if (!firstValue) {
+            }
+            else {
                 item.setAttribute("selected", "");
                 page.activeNode = item;
-                firstValue = true;
                 page.value = option.value
             }
         }
@@ -61,18 +87,28 @@ function main(children, multiple, addable) {
             item.setAttribute('disabled', '');
         } else {
             onclick(item, clicker);
+            on("mouseenter")(item, mouseenter);
         }
         return item;
 
     }
+    var mouseenter = function () {
+        if (!mouse) return;
+        focus = this.index;
+        setFocus();
+    };
+
+
     var hasIcon = false, iconed = '';
     var page = list(page, function (i) {
         if (i < 0 || i >= children.length) return;
-        return createItem(children[i]);
+        return createItem(generator ? generator(i) : children[i]);
     });
-    on("append")(page, function () {
+    once("append")(page, function () {
+        var index = 0;
+        for (var cx = 0, dx = children.length; cx < dx; cx++)if (children[cx].selected) index = cx;
         page.clean();
-        page.go(0);
+        page.go(index);
         if (adder) {
             remove(adder);
             appendChild(page, adder);
@@ -129,6 +165,60 @@ function main(children, multiple, addable) {
         adder.setAttribute("adder", '');
     }
     page.icon = iconed;
+    var focus = 0, focused, mouse = false;
+    var setFocus = function () {
+        var e = page.getIndexedElement(focus);
+        if (e === focused) return;
+        if (focused) removeClass(focused, 'focus');
+        focused = e;
+        if (e) addClass(e, 'focus');
+        mouse = false;
+    };
+    var setMouse = function () {
+        mouse = true;
+    }
+    onmousemove(page, setMouse);
+    onmousewheel(page, setMouse);
+    var moveFocus = function (delta) {
+        focus += delta;
+        if (focus < 0) focus = 0;
+        if (focus >= children.length) focus = children.length - 1;
+        page.scrollIfNotCover(focus);
+        setFocus();
+    };
+    bind('keydown.up')(page, function () {
+        moveFocus(-1);
+    });
+    bind('keydown.down')(page, function () {
+        moveFocus(1);
+    });
+    bind('keydown.tab')(page, function (event) {
+        if (document.activeElement === page.target) event.preventDefault();
+        moveFocus(event.shiftKey ? -1 : 1);
+    });
+    bind("keydown.home")(page, function (e) {
+        moveFocus(-focus);
+    });
+    bind("keydown.end")(page, function (e) {
+        moveFocus(children.length - 1 - focus);
+    });
+    bind("keydown.pagedown")(page, function (e) {
+        page.scrollBy(page.clientHeight);
+        focus = page.index() | 0;
+        moveFocus(0);
+    })
+    bind("keydown.pageup")(page, function (e) {
+        page.scrollBy(-page.clientHeight);
+        focus = page.index() | 0;
+        moveFocus(0);
+    })
+    var enter = function (e) {
+        e.preventDefault();
+        var e = page.getIndexedElement(focus);
+        if (e) e.click();
+    };
+    bind('keydown.enter')(page, enter);
+    bind('keydown.space')(page, enter);
     on('mousedown')(page, e => e.preventDefault());
     return page;
 }

package/coms/zimoli/selectList.less

@@ -15,10 +15,10 @@
         padding: 0 16px;
 
         &[selected] {
-            color: #26f;
+            color: #29e;
         }
 
-        &:hover {
+        &.focus {
             background-color: #2ca2f9;
             color: #fff;
         }

package/coms/zimoli/selectList_test.html

@@ -2,9 +2,13 @@
     <option>选项一</option>
     <option>选项二</option>
     <option>选项三</option>
+    <option selected>简单选项</option>
 </select>
 <select>
-    <option>选项一</option>
-    <option>选项二</option>
-    <option>选项三</option>
+    <option -repeat="(o,i) in options600" -text="'选项'+o">选项</option>
+    <option selected>600个选项</option>
 </select>
+<select -src="(o,i) in options6000">
+    <option -text="'选项'+o">选项</option>
+    <option insert selected>60000个选项</option>
+</select>

package/coms/zimoli/selectList_test.js

@@ -1,8 +1,14 @@
 var page = div();
 page.innerHTML = selectList_test;
-render(page,{
-    select
-})
+render(page, {
+    select,
+    select2() {
+        var sel = document.createElement("select");
+        return sel;
+    },
+    options600: new Array(600).fill(0).map((_, a) => a),
+    options6000: new Array(60000).fill(0).map((_, a) => a)
+});
 function main() {
     return page;
 }

package/coms/zimoli/touchList_test.js

@@ -1,7 +1,7 @@
-var listY = list(function (data, index) {
+var listY = list(function (index) {
     var item = div();
     css(item, `width:100%;height:${Math.random() * 110 + 30}px;border:1px solid;`);
-    text(item, data);
+    text(item, index);
     return item;
 }, "Y");
 onappend(listY, function () {

package/coms/zimoli/tree.js

@@ -132,16 +132,18 @@ function tree() {
         }
         var tabs = new Array(com.tab + 1).join("<t></t>");
         if (isFunction(generator)) {
-            var elem = generator(index, com);
+            var elem = generator(index, com instanceof Item ? com.value : com);
             if (!elem) return;
-            span = document.createElement('div');
+            span = document.createElement('span');
             span.innerHTML = tabs;
-            span.appendChild(elem);
+            elem.insertBefore(span, elem.firstChild);
+            span = elem;
         } else {
-            span = div();
+            span = document.createElement("node");
             html(span, `${tabs}<c>${com.name}</c>${com.test ? "<i>_test</i>" : ""}<a class=count>${com.count}</a>`);
         }
         var _div = button(span);
+        _div.setAttribute("node", '');
         _div.index = index;
 
         if (!com.saved) {
@@ -222,7 +224,7 @@ function tree() {
         _div.refresh();
         onclick(_div, function () {
             var isClosed = com.isClosed();
-            if (!active(banner, com.value, com)) {
+            if (!active(banner, com.value, com, _div)) {
                 return;
             }
             if (isClosed === com.isClosed() && com.length) {

package/coms/zimoli/tree.less

@@ -3,13 +3,26 @@
     background: #222d32;
     color: #fff;
 
-    >div {
+    >[node] {
         display: block;
         text-align: left;
         height: auto;
         background-color: inherit;
         color: inherit;
         padding-right: 10px;
+        padding-top: 4px;
+        padding-bottom: 4px;
+        box-shadow: none;
+
+        &.line,
+        &[line] {
+            box-shadow: none;
+            line-height: 0;
+
+            >.track {
+                display: none;
+            }
+        }
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "efront",
-    "version": "3.11.2",
+    "version": "3.12.1",
     "description": "一个开发工具，开放源代码，自带组件库和编译环境，可以用来开发web组件，web应用或nodejs模块，或做为已有代码的加密工具，也可以做为静态页面服务器或跨域中转服务器使用",
     "main": "public/efront.js",
     "directories": {