efront 3.21.1 → 3.21.4

package/coms/frame/payment.js

@@ -0,0 +1,48 @@
+var paytype = data.getInstance("paytype");
+function main(paytypes, price, subject = '网站扫码支付') {
+    var page = view();
+    page.innerHTML = payment;
+    renderWithDefaults(page, {
+        get paytype() {
+            return paytype.value;
+        },
+        set paytype(value) {
+            data.patchInstance("paytype", { value }, true);
+        },
+
+        get waycost() {
+            var pay = this.paytypes[this.paytype - 1];
+            if (!pay) return 0;
+            var cost = pay.cost;
+            if (isFunction(cost)) cost = cost.call(pay, price);
+            return BigNumber.fix(cost, 2);
+        },
+        get paysite() {
+            var pay = this.paytypes[this.paytype - 1];
+            if (!pay) return 'about:blank';
+            var url = pay.url;
+            if (isFunction(url)) url = url.call(pay, this.finalpay, subject);
+            else if (url) url += encode62.timeencode(this.finalpay + "," + subject);
+            return url;
+        },
+        get finalpay() {
+            return BigNumber.fix(BigNumber.add(this.price, this.waycost), 2);
+        },
+        paytypes,
+        price,
+        closeView() {
+            remove(page);
+        },
+    });
+    drag.on(page.firstChild, page);
+    resize.on(page);
+    data.bindInstance("paytype", function (type) {
+        console.log(type)
+    });
+    var frame = page.querySelector("iframe");
+    bind("message")(frame, function (e) {
+        var id = e.data;
+        cast(page, 'payment', id);
+    });
+    return page;
+}

package/coms/frame/payment.less

@@ -0,0 +1,35 @@
+& {
+    border: 1px solid #000;
+    position: absolute;
+}
+
+label {
+    display: inline-block;
+    padding: 0 16px 0 0;
+}
+
+>.head {
+    -webkit-app-region: no-drag;
+}
+
+.body {
+    item {
+        display: block;
+        padding: 0 16px;
+    }
+
+    iframe {
+        width: 256px;
+        height: 256px;
+        overflow: hidden;
+        border: none;
+        display: block;
+        margin: 20px auto;
+    }
+
+    money {
+        display: block;
+        text-align: center;
+        color: red;
+    }
+}

package/coms/zimoli/data.js

@@ -606,7 +606,7 @@ var privates = {
             }
             return data;
         });
-        p.loading = loading;
+        p.loading = promise.loading;
         return p;
     },
 

package/coms/zimoli/input.js

@@ -5,12 +5,15 @@ var number = function (event) {
     var { value, type } = ipt;
     if (keyCode === 13 || keyCode === 18 || keyCode === 37 || keyCode === 38 || keyCode === 39 || keyCode === 40 || keyCode === 8 || keyCode === 46 || keyCode === 9) {
     }
-    else if (keyCode >= 49 && keyCode <= 57 || keyCode >= 96 && keyCode <= 105) {
+    else if (keyCode >= 48 && keyCode <= 57 || keyCode >= 96 && keyCode <= 105) {
         if (this.value) {
             if (this.fixed && this.value.replace(/^[^\.]+/, '').length > this.fixed ||
                 this.limit && this.value.length >= this.limit && !/\./.test(this.value)) {
                 event.preventDefault();
             }
+            if(/^[+-]?0$/.test(this.value)){
+                event.preventDefault();
+            }
         }
     }
     else if (keyCode === 110 || keyCode === 190) {

package/coms/zimoli/model.js

@@ -57,9 +57,10 @@ var constructors = {
     password,
     text: textarea,
     number(e) {
-        e.innerHTML = `<input type="${e.field.type}" ng-model="data[field.key]" />`;
-        render(e.children, e.$scope, e.$parentScopes);
-        return e;
+        var ipt = document.createElement('input');
+        ipt.setAttribute('type', e.field.type);
+        input(ipt);
+        return ipt;
     },
     date() {
         var elem = document.createElement("input");
@@ -208,7 +209,7 @@ function main(elem) {
                 elem.setAttribute("type", field_type);
             }
             remove(elem.children);
-            field_type = field_type.replace(/\:[\d+\.]+$/, '');
+            if (isString(field_type)) field_type = field_type.replace(/\:[\d+\.]+$/, '');
             if (readonly || field.readonly) {
                 if (field_type === "function") {
                     field_editor(elem);

package/coms/zimoli/render.js

@@ -867,9 +867,9 @@ function render(element, scope, parentScopes, lazy = true) {
 var digest = lazy(refresh, -{});
 render.digest = render.apply = render.refresh = digest;
 render.parseRepeat = parseRepeat;
-var eventsBinders = "fullscreenchange,load,change,click,paste,resize,keydown,keypress,keyup,input,drop".split(",").map(k => on(k));
+var eventsBinders = "fullscreenchange,resize,load,change,click,paste,resize,keydown,keypress,keyup,input,drop".split(",").map(k => on(k));
 var userChanged = false;
-eventsBinders.splice(0, 2).forEach(on => on(window, digest));
+eventsBinders.splice(0, 3).forEach(on => on(window, digest));
 var changeListener = function () {
     if (userChanged) {
         userChanged = false;

package/coms/zimoli/select.js

@@ -112,6 +112,7 @@ function select(target, list, removeOnSelect, direction) {
     if (isNode(list)) {
         var initList = function () {
             bindEvent();
+            list.value = target.value;
             initList = function () { };
         };
         var setIcon = function () {
@@ -123,8 +124,10 @@ function select(target, list, removeOnSelect, direction) {
         var initList2 = function (src) {
             src.forEach(s => {
                 optionsMap[s.key] = s;
+                s.selected = s.key === target.value;
             });
             list = selectList(generator, src, !!target.multiple, !!target.editable);
+            list.value = target.value;
             if (!target.multiple) {
                 onclick(list, onlistclick);
             }
@@ -137,6 +140,8 @@ function select(target, list, removeOnSelect, direction) {
             var s = optionsMap[v];
             this.innerHTML = `<option selected value="${v}">${s ? s.name : ''}</option>`;
             this.value = v;
+            if (s) s.selected = true;
+            if (list) list.value = v;
         };
         care(target, initList2);
         var initList = function () {

package/coms/zimoli/selectList.js

@@ -74,17 +74,15 @@ function main() {
             css(item, { backgroundImage: `url('${icon}')` });
         }
         item.value = key;
-        if (option.selected) {
+        if (item.value === page.value) {
             iconed = icon;
-            if (multiple) {
-                item.setAttribute("selected", "");
-                page.value.push(key);
-            }
-            else {
-                item.setAttribute("selected", "");
-                page.activeNode = item;
-                page.value = key
-            }
+            item.setAttribute("selected", "");
+            page.activeNode = item;
+            page.value = key
+        }
+        else if (multiple && option.selected) {
+            item.setAttribute("selected", "");
+            page.value.push(key);
         }
         if (option.disabled) {
             item.setAttribute('disabled', '');
@@ -107,7 +105,7 @@ function main() {
         if (i < 0 || i >= children.length) return;
         return createItem(generator ? generator(i) : children[i]);
     });
-    once("append")(page, function () {
+    once("mounted")(page, function () {
         var index = 0;
         for (var cx = 0, dx = children.length; cx < dx; cx++)if (children[cx].selected) index = cx;
         page.clean();

package/coms/zimoli/zimoli.js

@@ -168,7 +168,7 @@ function go(pagepath, args, history_name, oldpagepath) {
             fullfill_is_dispatched = 0;
         }
         addGlobal(_page, history_name, isDestroy);
-        page_object.prepares.forEach(function (url) {
+        page_object.prepares.splice(0, page_object.prepares.length).forEach(function (url) {
             if (isNumber(url)) {
                 url = _history[url < 1 ? _history.length + url - 1 : url];
             }

package/docs/compare.md

@@ -1,45 +1,56 @@
 # efront 对比angular/react/vue
 
 * efront 是一个开发环境，不是一个依赖库，同时efront提供了浏览器模式的组件库 `zimoli` ，该组件库以离散功能的方式提供，允许使用但不强制使用任何一项。
-* 这里只摆事实，不做评价。类似vue官方“贬低他人抬高自己”的行为不为efront所齿。
+* 这里只摆事实，不做评价。类似某e官方“贬低他人抬高自己”的行为不为efront所齿。
 * 后文web部分的对比，使用efront环境下的`zimoli`组件库作为参考
 
 ## 表面参数对比
 
-| 对比项\框架 | angular  | react    | vue   | efront/(zimoli) |
-|--|--|--|--|--|
-Hello World 目标代码 | >30kb | >30kb | ≈30kb;| ≈1kb;
-开发环境启动时间 | >2s | >2s | >2s| ≈0s;
-开发语言             | ts/html/less/sass/scss | jsx/css/js/ts/html | vue/html/css/js | js/html/less/ts
-导出组件依赖项|angular|react|vue|无
-官方路由 | angular-router, 使用前需要注册路径 | react-router, 使用前需要注册路径 | vue-router, 使用前需要注册路径| zimoli，使用前无需注册路径
-跨域实现 | 配置浏览器或服务器 | 配置浏览器或服务器| 配置浏览器或服务器 | 开发环境内置
-代码加载方案 | 一次加载/或访问时加载 | 一次加载/或访问时加载 | 一次加载/或访问时加载 | 依赖加载/自动预加载/动态路径访问时加载
-跳转传参 | 略 | 略 | 略 | `go`(pagepath, params)
-异步对象传参 | 略 | 略 | 略 | `cast`(target, data) 
 `care`(target, handle)
+| 对比项\框架          | efront/(zimoli)                                                        | angular                            | react                            | vue                            |
+| -------------------- | ---------------------------------------------------------------------- | ---------------------------------- | -------------------------------- | ------------------------------ |
+| Hello World 目标代码 | ≈1kb;                                                                  | >30kb                           | >30kb                         | ≈30kb;                         |
+| 开发环境启动时间     | ≈0s;                                                                   | >2s                             | >2s                           | >2s                            |
+| 开发语言             | js/html/less/ts                                                        | ts/html/less/sass/scss             | jsx/css/js/ts/html               | html/css/js                    |
+| 导出组件依赖项       | 无                                                                     | angular                            | react                            | vue                            |
+| 官方路由             | zimoli，使用前无需注册路径                                             | angular-router, 使用前需要注册路径 | react-router, 使用前需要注册路径 | vue-router, 使用前需要注册路径 |
+| 跨域实现             | 开发环境内置                                                           | 配置浏览器或服务器                 | 配置浏览器或服务器               | 配置浏览器或服务器             |
+| 代码加载方案         | 依赖加载/自动预加载/手动预加载`preapre('/page/path');` / 动态路径访问时加载 | 一次加载/或访问时加载              | 一次加载/或访问时加载            | 一次加载/或访问时加载          |
+| 跳转传参             | `go`(pagepath, params)                                            | 略                                 | 略                               | 略                             |
+| 异步对象传参         | `cast`(target, data) 
 `care`(target, handle)     | 略                                 | 略                               | 略                             |
 
 ## 架构对比
 
-### 1.  angular 1~9
+### 1. efront/zimoli
+
+efront环境下，用户在隔离的环境中直接操作或创建dom元素，zimoli/render负责元素之间的组装和绑定。
+
+### 2.  angular 1~9
 
 angular1将视图和逻辑隔离，js可通过更新scope上的数据以达到更新视图的目的，用户在视图上的输入可通过绑定关系自动同步到scope，后angular2+将scope抽象为typescript的class的实例，其实际用途不变。angular自身的逻辑维护的是数据与视图的绑定关系。
 
-### 2.  react
+### 3.  react
 
 react 通过虚拟dom与视图保持同步，每次渲染前，通过用户逻辑重构虚拟dom，react则维护虚拟dom与视图的同步。
 
-### 3.  vue
+### 4.  vue
 
 vue使用Object.defineProperty进行数据绑定，与angular通过事件绑定的机制有所区别，但也是将视图与逻辑隔离，维护数据与视图的绑定关系。
 
-### 4. efront/zimoli
-
-efront环境下，用户在隔离的环境中直接操作或创建dom元素，zimoli/render负责元素之间的组装和绑定。
 
 ## 语法对比
 
 ### 1. 条件结构
 
+```xml
+<!-- efront/(zimoli) 使用 render(element,scope)功能 -->
+<component1 ng-if="expression"> </component1>
+<!-- 或者 -->
+<component1 v-if="expression"> </component1>
+<!-- 或者任意前缀 -->
+<component1 x-if="expression"> </component1>
+<!-- 下文中以ng-开头的efront说明都可以修改前缀 -->
+```
+
 ```xml
 <!-- angular 1.x -->
 <component1 ng-if="expression" ></component1>
@@ -59,18 +70,16 @@ render(){
 <component1 v-if="expression"></component1>
 ```
 
+### 2. 循环结构
+
 ```xml
 <!-- efront/(zimoli) 使用 render(element,scope)功能 -->
-<component1 ng-if="expression"> </component1>
-<!-- 或者 -->
-<component1 v-if="expression"> </component1>
-<!-- 或者任意前缀 -->
-<component1 x-if="expression"> </component1>
-<!-- 下文中以ng-开头的efront说明都可以修改前缀 -->
+<component1 ng-repeat="(item,index) in expression"></component1>
+<component1 v-for="(item,index) in expression"></component1>
+<component1 ng-repeat="item in expression"></component1>
+<component1 v-for="item in expression"></component1>
 ```
 
-### 2. 循环结构
-
 ```xml
 <!-- angular 1.x -->
 <component1 ng-repeat="(item,index) in expression" ></component1>
@@ -96,16 +105,22 @@ render(){
 <component1 v-for="item in expression"></component1>
 ```
 
+### 3. 数据绑定
+
 ```xml
 <!-- efront/(zimoli) 使用 render(element,scope)功能 -->
-<component1 ng-repeat="(item,index) in expression"></component1>
-<component1 v-for="(item,index) in expression"></component1>
-<component1 ng-repeat="item in expression"></component1>
-<component1 v-for="item in expression"></component1>
+<component1 ng-bind="expression"></component1>
+<!--  efront/(zimoli) 使用 render(element,scope)功能 设置 js对象属性 element[key]=value -->
+<image _src="expression" />
+<image .src="expression" />
+<image :src="expression" />
+<!--  efront/(zimoli) 使用 render(element,scope)功能 设置 元素属性 element.setAttribute(key,value) -->
+<image src_="expression" />
+<image src.="expression" />
+<image src:="expression" />
+<image src@="expression" />
 ```
 
-### 3. 数据绑定
-
 ```xml
 <!-- angular 1.x -->
 <component1 ng-bind="expression" ></component1>
@@ -132,21 +147,16 @@ render(){
 <image :src="expression" />
 ```
 
+### 4. 双向/逆向/事件绑定
+
 ```xml
 <!-- efront/(zimoli) 使用 render(element,scope)功能 -->
-<component1 ng-bind="expression"></component1>
-<!--  efront/(zimoli) 使用 render(element,scope)功能 设置 js对象属性 element[key]=value -->
-<image _src="expression" />
-<image .src="expression" />
-<image :src="expression" />
-<!--  efront/(zimoli) 使用 render(element,scope)功能 设置 元素属性 element.setAttribute(key,value) -->
-<image src_="expression" />
-<image src.="expression" />
-<image src:="expression" />
-<image src@="expression" />
+<component1 ng-model="expression"></component1>
+<component1 ng-click="expression"></component1>
+<component1 @click="expression"></component1>
+<component1 v-on:click="expression"></component1>
 ```
 
-### 4. 双向/逆向/事件绑定
 
 ```xml
 <!-- angular 1.x -->
@@ -171,16 +181,40 @@ render(){
 <component1 @click="expression" ></component1>
 ```
 
-```xml
-<!-- efront/(zimoli) 使用 render(element,scope)功能 -->
-<component1 ng-model="expression"></component1>
-<component1 ng-click="expression"></component1>
-<component1 @click="expression"></component1>
-<component1 v-on:click="expression"></component1>
-```
-
 ### 5. 定义web组件
 
+```javascript
+// efront/(zimoli) 使用 render(element,scope)功能
+
+var htmlFileData={toString(){
+    // 如果有同名的html文件，将自动生成类似的代码
+    // 渲染前的一次性绑定可以在这里进行
+    return `<btn></btn>文件内容${i18n.key1}`;
+}};
+var i18n={key1:value1};
+
+function main(elem){
+    // 构造方法
+    // 可以使用已挂载或未挂载的元素
+    // 可以使用传入的元素或者创建一个新的元素；
+    elem = elem || document.createElement("div");
+    elem.innerHTML = htmlFileData;
+    onappend(elem,function(event){
+        // 挂载之后触发，必要时可以绑定
+    });
+    onremove(elem,function(event){
+        // 移除之前触发，必要时可以绑定
+    });
+    var scope = {
+        // html内使用的内容要在这里出现
+        btn: button, // 内部组件可以在渲染前重命名，以简化html中的tagName，方便在局部语境中编写和阅读
+    };
+    render(elem,scope);// 如果不使用，导出原生组件
+    // 如果存在同名的less文件，编译时自动绑定
+    return elem // 如果不传出，原有的元素不会被替换
+}
+```
+
 ```typescript
 //  angular 1.x
  var app=angular.module("modulename");
@@ -286,34 +320,3 @@ class ComponentName extends Component {
 <style></style>
 ```
 
-```javascript
-// efront/(zimoli) 使用 render(element,scope)功能
-
-var htmlFileData={toString(){
-    // 如果有同名的html文件，将自动生成类似的代码
-    // 渲染前的一次性绑定可以在这里进行
-    return `<btn></btn>文件内容${i18n.key1}`;
-}};
-var i18n={key1:value1};
-
-function main(elem){
-    // 构造方法
-    // 可以使用已挂载或未挂载的元素
-    // 可以使用传入的元素或者创建一个新的元素；
-    elem = elem || document.createElement("div");
-    elem.innerHTML = htmlFileData;
-    onappend(elem,function(event){
-        // 挂载之后触发，必要时可以绑定
-    });
-    onremove(elem,function(event){
-        // 移除之前触发，必要时可以绑定
-    });
-    var scope = {
-        // html内使用的内容要在这里出现
-        btn: button, // 内部组件可以在渲染前重命名，以简化html中的tagName，方便在局部语境中编写和阅读
-    };
-    render(elem,scope);// 如果不使用，导出原生组件
-    // 如果存在同名的less文件，编译时自动绑定
-    return elem // 如果不传出，原有的元素不会被替换
-}
-```

package/package.json

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