efront 3.22.4 → 3.22.7

package/coms/zimoli/selectList.js

@@ -2,7 +2,7 @@ var singleClick = function () {
     var node = this.parentNode;
     if (node.activeNode === this) return;
     if (node.activeNode) {
-        if (node.activeNode.origin) node.activeNode.origin.selected = false;
+        if (isObject(node.activeNode.origin)) node.activeNode.origin.selected = false;
         node.activeNode.removeAttribute("selected");
     }
     this.setAttribute("selected", "");
@@ -11,8 +11,9 @@ var singleClick = function () {
     if (node.value === this.value) return;
     node.value = this.value;
     node.name = this.name;
-    if (this.origin) this.origin.selected = true;
+    if (isObject(this.origin)) this.origin.selected = true;
     dispatch(node, "change");
+    if (getTargetIn(node, document.activeElement)) document.activeElement.blur();
 };
 var multipleClick = function () {
     var node = this.parentNode;
@@ -25,10 +26,15 @@ var multipleClick = function () {
         values.splice(index, 1);
         this.removeAttribute("selected");
     }
-    if (this.origin) this.origin.selected = true;
+    if (isObject(this.origin)) this.origin.selected = true;
     dispatch(node, "change");
 };
 
+var searchinput = function () {
+    var ipt = document.createElement("input");
+    ipt.placeholder = '搜索';
+    return ipt;
+};
 
 function main() {
     var children, multiple, addable, generator, page;
@@ -101,9 +107,46 @@ function main() {
 
 
     var hasIcon = false, iconed = '';
+
+    if (children.length > 6) {
+        var ipt = searchinput()
+        page.insertBefore(ipt, page.firstChild);
+        var searchtext = function () {
+            if (this.value) children = searchResult;
+            else children = searchResult.source;
+            if (isMounted(this)) searchResult.search(this.value);
+        };
+        var searchResult = search(ipt.value, children, a => {
+            return isObject(a) ? getName(a) : String(a);
+        });
+        searchResult.callback = function () {
+            if (!searchResult.complete) {
+                page.setAttribute('searching', '');
+            }
+            else {
+                if (searchResult.searchText && !searchResult.length) {
+                    page.setAttribute('empty', '');
+                }
+                else {
+                    page.removeAttribute('empty');
+                }
+                page.removeAttribute('searching');
+            }
+            itemMap = Object.create(null);
+            page.clean();
+            page.go(0);
+        }
+        on('remove')(ipt, function () {
+            searchResult.abort();
+        });
+        on('input')(ipt, searchtext);
+        on('keyup')(ipt, searchtext);
+        on('change')(ipt, searchtext);
+
+    }
     var page = list(page, function (i) {
         if (i < 0 || i >= children.length) return;
-        return createItem(generator ? generator(i) : children[i]);
+        return createItem(generator ? generator(i, children[i]) : children[i]);
     });
     once("mounted")(page, function () {
         var index = 0;
@@ -220,6 +263,6 @@ function main() {
     };
     bind('keydown.enter')(page, enter);
     bind('keydown.space')(page, enter);
-    on('mousedown')(page, e => e.preventDefault());
+    on('mousedown')(page, e => !/^input$/i.test(e.target.tagName) && e.preventDefault());
     return page;
 }

package/coms/zimoli/selectList.less

@@ -78,4 +78,50 @@
         vertical-align: top;
         margin-left: 10px;
     }
+}
+
+&>input {
+    height: 28px;
+    line-height: 28px;
+    padding: 0 16px;
+    border: none;
+    appearance: none;
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+    display: block;
+    position: sticky;
+    top: 0;
+    border-bottom: 1px solid #0006;
+
+    &:focus {
+        outline-offset: -1px;
+        outline: 1px solid #2ca2f9;
+    }
+}
+
+&[searching] {
+    &::before {
+        content: "正在搜索..";
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        display: block;
+        font-size: 12px;
+        text-align: right;
+        pointer-events: none;
+        padding: 0 16px;
+    }
+}
+
+&[empty] {
+    background-color: #fff;
+}
+
+b {
+    border: 1px solid #29e;
+    background-color: #29e2;
+    font-weight: 400;
+    border-radius: 2px;
 }

package/coms/zimoli/selectList_test.html

@@ -10,5 +10,5 @@
 </select>
 <select -src="(o,i) in options6000">
     <option value="" insert selected>60000个选项</option>
-    <option -text="'选项'+o">选项</option>
+    <option -html="'选项'+o">选项</option>
 </select>

package/coms/zimoli/slider.js

@@ -210,7 +210,7 @@ function slider(autoplay, circle = true) {
         var deltax = event.clientX - saved_x;
         var deltay = event.clientY - saved_y;
         if (!direction) {
-            if (abs(deltax) < MOVELOCK_DELTA && abs(deltay) < MOVELOCK_DELTA) return;
+            if (!onclick.preventClick) return;
             if (abs(deltay) - abs(deltax) > 0) { //垂直方向
                 direction = -1;
             } else { //水平方向

package/coms/zimoli/test_scroll.js

@@ -7,50 +7,36 @@ function createTouchEvent(eventtype, extra = {}) {
 }
 
 
-function _test_scroll(banner) {
-    var clientY = 10;
-    var touchstartEvent = createTouchEvent("touchstart", { clientY });
+function _test_scroll() {
+    var banner = this;
+    var clientY = 2;
+    var touchstartEvent = createTouchEvent("touchstart", { clientY, clientX: 0 });
     var deltaY = 100;
+    onclick.preventClick = true;
     dispatch(banner, touchstartEvent);
     var interval_handle = setInterval(function () {
-        clientY -= deltaY;
-        var touchmoveEvent = createTouchEvent("touchmove", { clientY });
-        dispatch(banner, touchmoveEvent);
+        clientY += deltaY;
+        var touchmoveEvent = createTouchEvent("touchmove", { clientY, clientX: 0 });
+        dispatch(window, touchmoveEvent);
     }, 10);
 
     setTimeout(function () {
-        deltaY = -10
-    }, 300);
+        deltaY = -2
+    }, 200);
     setTimeout(function () {
-        deltaY = 100
+        deltaY = 5
     }, 400);
-    setTimeout(function () {
-        deltaY = -10
-    }, 420);
-    setTimeout(function () {
-        deltaY = -50
-    }, 450);
-    setTimeout(function () {
-        deltaY = 50
-    }, 470);
-    setTimeout(function () {
-        deltaY = -100050
-    }, 480);
-    setTimeout(function () {
-        deltaY = +100050
-    }, 490);
     setTimeout(function () {
         clearInterval(interval_handle);
+    }, 510);
+    setTimeout(function () {
         var touchendEvent = createTouchEvent("touchend");
+        touchendEvent.touches.pop();
         dispatch(banner, touchendEvent);
-    }, 510);
+    }, 560);
 }
 
-function main(banner){
-    if(banner.isMounted){
-        _test_scroll(banner);
-    }else{
-        on("append")(banner,_test_scroll);
-    }
+function main(banner) {
+    oncemount(banner, _test_scroll);
 
 }

package/coms/zimoli/vbox_test.js

@@ -2,7 +2,7 @@ function vbox_test() {
     var vbox1 = vbox();
     var vbox2 = vbox();
     vbox2.innerHTML = '<span></span>';
-    test_scroll(vbox2);
     appendChild(vbox1, vbox2);
+    test_scroll(vbox2);
     return vbox1;
 }

package/package.json

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