efront 2.46.0 → 2.47.0

package/coms/zimoli/model.js

@@ -37,6 +37,17 @@ var renderModel = function (field, data) {
 var constructors = {
     input,
     raw: input,
+    swap(e) {
+        var { field } = e;
+        e = swap(e);
+        if (field.options) {
+            e.getValue = function () {
+                return field.options[+this.checked].value;
+            };
+        }
+        return e;
+    },
+    switch: swap,
     row: textarea,
     password,
     text: textarea,
@@ -72,9 +83,26 @@ var constructors = {
         cast(elem, field);
         return elem;
     },
-    select() {
-        var elem = select();
-        elem.innerHTML = `<option ng-repeat="(o,i) in field.options" ng-bind="o.name||o" _value="o.key!==undefined?o.key:o"></option>`;
+    select(_, t) {
+        if (!t) {
+            var elem = select();
+            elem.innerHTML = `<option ng-repeat="(o,i) in field.options" ng-bind="o.name||o" _value="o.key!==undefined?o.key:o"></option>`;
+        }
+        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) {
+                if (o.key === data[field.key]) {
+                    opt = o;
+                    break;
+                }
+            }
+            e.innerHTML = `<option selected value="${opt ? opt.key : ''}">${opt ? opt.name : '请选择'}</option>`;
+            e.value = opt ? opt.key : '';
+            elem = select(e, pad);
+        }
         return elem;
     },
     "repeat"(_, field_type) {
@@ -117,8 +145,18 @@ var readonly_types = {
     "size"({ field }, data) {
         var f = data[field.key];
         return size(f);
-    }
+    },
+    swap(e, data) {
+        var { field } = e;
+        var v = data[field.key];
+        if (field.options) {
+            var o = field.options[v];
+            if (o) return o.name;
+        }
+        return v;
+    },
 };
+readonly_types.select = readonly_types.swap;
 function main(elem) {
     var build = function () {
         var { data, readonly, field } = elem;
@@ -142,7 +180,7 @@ function main(elem) {
                 elem.setAttribute("type", field_type);
             }
             remove(elem.children);
-            if (readonly) {
+            if (readonly || field.readonly) {
                 if (field_type === "function") {
                     field_editor(elem);
                 } else {
@@ -205,7 +243,6 @@ function main(elem) {
         }
     };
     on("changes")(elem, function ({ changes }) {
-
         if (changes.data || changes.field || changes.readonly) {
             build();
         }

package/coms/zimoli/popup.js

@@ -4,8 +4,10 @@
 onkeydown(document, function (e) {
     if (e.which === 27 && rootElements.length) {
         var r = rootElements.pop();
-        r.blur();
-        remove(r);
+        if (r) {
+            r.blur();
+            remove(r);
+        }
     }
 });
 var animationStyle = "opacity:0;transform:scale(1.2);transition:.1s opacity ease-out,.2s transform ease-out;";
@@ -162,24 +164,27 @@ var popup_with_mask = function (element, mask = createMask(element)) {
     return element;
 };
 var isypop = function (target) {
+    if (!target) return false;
     var { offsetParent, nextSibling, previousSibling } = target;
     if (
-        nextSibling
+        nextSibling && nextSibling.tagName === target.tagName
         && (
             nextSibling.offsetLeft - target.offsetLeft >= target.offsetWidth / 2
             || target.offsetLeft - nextSibling.offsetLeft >= nextSibling.offsetWidth / 2
         )
-        || previousSibling
+        || previousSibling && previousSibling.tagName === target.tagName
         && (
             previousSibling.offsetLeft - target.offsetLeft >= target.offsetWidth / 2
             || target.offsetLeft - previousSibling.offsetLeft >= previousSibling.offsetWidth / 2
         )
     ) return true;
-    if (offsetParent && target.offsetTop / target.offsetHeight < .2 && offsetParent.offsetWidth / target.offsetWidth > 1.5) return true;
+    var padding = parseFloat(getComputedStyle(offsetParent).paddingTop) + parseFloat(getComputedStyle(offsetParent).paddingBottom);
+    if (offsetParent && target.offsetTop / target.offsetHeight < .2 && (offsetParent.clientWidth - padding) / target.offsetWidth > 1.5) return true;
 
 };
 var isxpop = arriswise(isypop, arguments);
 var popup_as_extra = function (element, target, style) {
+    element.target = target;
     if (style) {
         if (/^[vy]/i.test(style)) {
             popup_as_yextra(element, target, style);
@@ -195,9 +200,9 @@ var popup_as_extra = function (element, target, style) {
         popup_as_yextra(element, target, style);
     } else if (isxpop(target)) {
         popup_as_xextra(element, target, style);
-    } else if (isypop(target.parentNode)) {
+    } else if (isypop(target.offsetParent)) {
         popup_as_yextra(element, target, style);
-    } else if (isxpop(target.parentNode)) {
+    } else if (isxpop(target.offsetParent)) {
         popup_as_xextra(element, target, style);
     } else {
         if (/inline|cell/i.test(getComputedStyle(target).display)) {
@@ -266,10 +271,10 @@ var _as_yextra = function (global, innerWidth, innerHeight, element, target, poi
         }
 
         css(element, `min-width:auto;`);
-        var aimedWidth = element.offsetWidth;
+        var aimedWidth = getScreenPosition(element).width;
         //如果宽度不足其附着元素的宽度
-        if (aimedWidth < target.offsetWidth) {
-            aimedWidth = target.offsetWidth;
+        if (aimedWidth < position.width) {
+            aimedWidth = position.width;
         }
 
         //如果宽度超出可视区，调整宽度

package/coms/zimoli/prompt.js

@@ -0,0 +1,40 @@
+function prompt(msg = "请输入", check) {
+    var ipt = input();
+    var oked, ohed;
+    var oks = [], ohs = [];
+    var fire = function () {
+        if (!oked && !ohed) return;
+        if (oked) oks.forEach(o => o(ipt.value));
+        if (ohed) ohs.forEach(o => o(ipt.value));
+        oks.splice(0, oks.length);
+        ohs.splice(0, ohs.length);
+    };
+    var c = confirm(msg, ipt, ["确认", "取消"], function (_) {
+        if (oked || ohed) return;
+        if (_ === "确认") {
+            if (check && check(ipt.value) === false) return false;
+            oked = true;
+        } else {
+            ohed = true;
+        }
+        fire();
+    });
+    on('append')(ipt, function () {
+        setTimeout(function () {
+            ipt.focus();
+        });
+    })
+    on("mousedown")(c, e => e.target !== ipt && e.preventDefault() | ipt.focus());
+    on("keydown.enter")(c, function () {
+        if (check && check(ipt.value) === false) return;
+        oked = true;
+        remove(c);
+        fire();
+    });
+    c.then = function (ok, oh) {
+        oks.push(ok);
+        ohs.push(oh);
+        fire();
+    };
+    return c;
+}

package/coms/zimoli/render.js

@@ -51,7 +51,7 @@ function rebuild(element) {
         dispatch(event, element);
     }
 }
-var variableReg = /([^\:\,\+\=\-\!%\^\|\/\&\*\!\;\?\>\<~\{\}\s]|\?\s*\.(?=[^\d])|\s*\.\s*)+/g;
+var variableReg = /([^\:\,\+\=\-\!%\^\|\/\&\*\!\;\?\>\<~\{\}\s\[\]\(\)]|\?\s*\.(?=[^\d])|\s*\.\s*)+/g;
 var createGetter = function (search, isprop = true) {
     var [withContext, searchContext] = search;
     if (!searchContext) return function () { };
@@ -62,12 +62,12 @@ var createGetter = function (search, isprop = true) {
             context.split(/\?\s*\.(?=[^\d])/).forEach(function (search) {
                 if (dist) {
                     if (/[\=]/.test(dist)) dist = `(${dist})`;
-                    dist = `${dist}!==void 0&&${dist}!==null?${dist}.${search}:null`
+                    dist = `${dist}!==void 0&&${dist}!==null?${dist}.${search}:''`
                 } else {
                     dist = search;
                 }
             });
-            return context.length > 1 ? `(${dist})` : context;
+            return dist.length > 1 ? `(${dist})` : context;
         });
     }
     if (isprop) {
@@ -90,7 +90,7 @@ var initialComment = function (renders, type, expression) {
 var parseRepeat = function (expression) {
     var reg =
         // /////////////////////////////////////////// i //       r       /////////////////////////  o  ///// a ///////////////////// t /////
-        /^(?:let\b|var\b|const\b)?\s*(?:[\(\{\[]\s*)?(.+?)((?:\s*,\s*.+?)*)?(?:\s*[\)\}\]]\s*|\s+)(in|of)\s+(.+?)(\s+?:track\s*by\s+(.+?))?$/i;
+        /^(?:let\b|var\b|const\b)?\s*(?:[\(\{\[]\s*)?(.+?)((?:\s*,\s*.+?)*)?(?:\s*[\)\}\]]\s*|\s+)(in|of)\s+(.+?)(?:\s+track\s*by\s+(.+?))?$/i;
     var res = reg.exec(expression);
     if (!res) return res;
     var [_, i, k, r, s, t] = res;
@@ -125,7 +125,7 @@ var createRepeat = function (search, id = 0) {
     var [context, expression] = search;
     var res = parseRepeat(expression);
     if (!res) throw new Error(`不能识别循环表达式: ${expression} `);
-    var { keyName, itemName, indexName, srcName } = res;
+    var { keyName, itemName, indexName, srcName, trackBy } = res;
     // 懒渲染
     var getter = createGetter([context, srcName]).bind(this);
     var element = this, clonedElements = [], savedValue, savedOrigin;
@@ -151,17 +151,26 @@ var createRepeat = function (search, id = 0) {
         var clonedElements1 = Object.create(null);
         var cloned = keys.map(function (key, cx) {
             var k = isArrayResult ? cx : key;
-            var c = changes[k];
-            if (clonedElements[k]) if (!c || !isObject(c.previous) && !isObject(c.current)) return clonedElements1[k] = clonedElements[k];
-            var clone = element.cloneNode();
-            clone.innerHTML = element.innerHTML;
-            clone.renderid = id;
-            clone.$parentScopes = $parentScopes;
             var $scope = {
                 [keyName || '$key']: k,
                 [itemName || '$item']: result[k],
                 [indexName || '$index']: cx
             };
+            if (trackBy) {
+                k = seek($scope, trackBy);
+                if (clonedElements[k]) {
+                    clonedElements[k].$scope = $scope;
+                    return clonedElements1[k] = clonedElements[k];
+                }
+            }
+            else {
+                var c = changes[k];
+                if (clonedElements[k]) if (!c || !isObject(c.previous) && !isObject(c.current)) return clonedElements1[k] = clonedElements[k];
+            }
+            var clone = element.cloneNode();
+            clone.innerHTML = element.innerHTML;
+            clone.renderid = id;
+            clone.$parentScopes = $parentScopes;
             clone.$scope = $scope;
             clone.$parentScopes = $parentScopes;
             clone.$struct = $struct;
@@ -556,7 +565,8 @@ function getFromScopes(key, scope, parentScopes) {
     if (key in scope) {
         return scope[key];
     }
-    if (parentScopes) for (var o of parentScopes) {
+    if (parentScopes) for (var cx = parentScopes.length - 1; cx >= 0; cx--) {
+        var o = parentScopes[cx];
         if (key in o) {
             return o[key];
         }
@@ -723,7 +733,7 @@ function renderStructure(element, scope, parentScopes = []) {
             }
             if (!element.renderid) element.renderid = -1;
             else element.renderid = -2;
-            // element.removeAttribute(name);
+            continue;
         }
         if (element.$struct) continue;
         var key = name.replace(/^(ng|v|.*?)\-|^[\:\_\.]|^v\-bind\:/i, "").toLowerCase();

package/coms/zimoli/rootElements.js

@@ -25,6 +25,7 @@ rootElements.pop = function (elem) {
     if (cx < 0) {
         cx = rootElements.length - 1;
     }
+    if (isFunction(rootElements[cx].onback) && rootElements[cx].onback() === false) return;
     return rootElements.splice(cx, 1)[0];
 };
 rootElements.mount = function (elem) {

package/coms/zimoli/search.js

@@ -0,0 +1,15 @@
+function search(seartext, options) {
+    if (options instanceof Array) {
+        var hasFullmatch = false;
+        var a = options.map(o => {
+            if (o.name === seartext) hasFullmatch = true;
+            var [power, m] = mark.power(o.name, seartext);
+            return { power, name: m, value: o.value };
+        }).filter(a => a.power > 0);
+        a.sort(function (a, b) {
+            return b.power - a.power;
+        });
+        a.hasFullmatch = hasFullmatch;
+        return a;
+    }
+}

package/coms/zimoli/select.js

@@ -2,21 +2,22 @@ var saved_list;
 var _remove = function () {
     var removing_list = saved_list;
     if (removing_list) {
-        var target = this;
-        setTimeout(function () {
+        setTimeout(function run() {
             if (removing_list !== saved_list) return remove(removing_list);
             var { activeElement } = document;
-            if (!getTargetIn(removing_list, activeElement)) {
+            a: if (!getTargetIn(removing_list, activeElement)) {
+                var extras = [].concat(removing_list.with);
+                for (var e of extras) {
+                    if (getTargetIn(e, activeElement)) break a;
+                }
                 remove(removing_list);
                 if (removing_list === saved_list) saved_list = null;
-            } else {
-                once('blur')(activeElement, function () {
-                    setTimeout(function () {
-                        if (document.activeElement === target) return;
-                        _remove();
-                    });
-                });
+                return;
             }
+            once('blur')(activeElement, function () {
+                if (!isMounted(this)) return removing_list.target.focus();
+                run();
+            });
         });
     }
 };
@@ -48,10 +49,23 @@ function select(target, list, removeOnSelect, direction) {
     onblur(target, removeByBlur);
     if (/select/i.test(target.tagName)) {
         onmousedown(target, preventDefault);
+        care(target, 'add-option', function (a) {
+            var o = document.createElement('option');
+            o.value = a.value || a;
+            o.innerHTML = a.name || a;
+            this.appendChild(o);
+        });
+        care(target, 'set-options', function (options) {
+            this.innerHTML = options.map(o => `<option value="${o.value}">${o.name}</option>`).join("");
+        });
+        on('focus')(target, preventDefault);
     }
     var onlistchange = function () {
         if (target.multiple) {
         } else {
+            if (!savedOptions) {
+                target.innerHTML = `<option selected value="${this.value}">${this.name || this.value}</option>`
+            }
             target.value = this.value;
             dispatch(target, "change");
         }
@@ -114,9 +128,9 @@ function select(target, list, removeOnSelect, direction) {
             var allOptions = [].concat.apply([], target.querySelectorAll("option"));
             if (deepEqual.shallow(allOptions, savedOptions)) return;
             savedOptions = allOptions;
-            list = selectList(allOptions, target.multiple);
+            list = selectList(allOptions, target.multiple, target.editable);
             if (!target.multiple) {
-                onclick(list, _remove);
+                onclick(list, onlistclick);
             }
             bindEvent();
         };

package/coms/zimoli/selectList.js

@@ -6,6 +6,7 @@ var singleClick = function () {
     node.activeNode = this;
     if (node.value === this.value) return;
     node.value = this.value;
+    node.name = this.name;
     dispatch(node, "change");
 };
 var multipleClick = function () {
@@ -21,21 +22,27 @@ var multipleClick = function () {
     }
     dispatch(node, "change");
 };
-function main(children, multiple) {
+
+function main(children, multiple, addable) {
     var list = div();
     list.value = multiple ? [] : "";
     var firstValue = false;
     var clicker = multiple ? multipleClick : singleClick;
-    var hasIcon = false, iconed = '';
-    appendChild(list, [].map.call(children, function (option) {
-        var item = div();
-        item.innerHTML = option.innerHTML;
-        var icon = option.getAttribute("icon");
+    var itemMap = Object.create(null);
+    function createItem(option) {
+        var key = option.key || option.value;
+        if (key in itemMap) return itemMap[key];
+        var item = itemMap[option.value] = document.createElement('div');
+
+        item.setAttribute("item", '');
+        item.innerHTML = option.innerHTML || option.name;
+        item.name = option.name || option.innerHTML;
+        var icon = option.getAttribute ? option.getAttribute("icon") : option.icon;
         if (icon) {
             hasIcon = true;
             css(item, { backgroundImage: `url('${icon}')` });
         }
-        item.value = option.value;
+        item.value = key;
         if (option.selected) {
             iconed = icon;
             if (multiple) {
@@ -54,10 +61,63 @@ function main(children, multiple) {
             onclick(item, clicker);
         }
         return item;
-    }));
+
+    }
+    var hasIcon = false, iconed = '';
+    appendChild(list, [].map.call(children, createItem));
+    if (addable) {
+        var adder = document.createElement("div");;
+        adder.innerHTML = "<a>添加</a><a>管理</a>";
+        button(adder.firstChild);
+        button(adder.children[1]);
+        on("click")(adder, async function (event) {
+            event.preventDefault();
+            var target = getTargetIn(this, event.target, false);
+            switch (target) {
+                case this.children[0]:
+                    var a = prompt("请输入", a => {
+                        if (a in itemMap) {
+                            alert(`选项 ${a} 已存在！`);
+                            return false;
+                        }
+                    });
+                    list.with = a;
+                    on('remove')(a, function () {
+                        list.with = null;
+                    });
+                    a = await a;
+                    if (a in itemMap) return false;
+                    cast(list.target, "add-option", a);
+                    children.push({ name: a, key: a });
+                    list.insertBefore(createItem({
+                        name: a,
+                        value: a,
+                    }), adder);
+                    break;
+                case this.children[1]:
+                    var options = [].slice.call(list.children, 0, list.children.length - 1);
+                    var edit = selectListEdit(options.slice(0));
+
+                    list.with = edit;
+                    on("remove")(edit, function () {
+                        list.with = null;
+                        remove([].slice.call(list.children, 0, list.children.length - 1));
+                        children.splice(0, children.length);
+                        children.push.apply(children, edit.$scope.options.map(o => ({ key: o.key || o.value, name: o.name || o.innerHTML })))
+                        appendChild.before(adder, edit.$scope.options.map(createItem));
+                        cast(list.target, 'set-options', edit.$scope.options);
+                    });
+                    popup(edit, [.5, .5]);
+                    break;
+            }
+        })
+        adder.setAttribute("adder", '');
+        list.appendChild(adder)
+    }
     if (hasIcon) {
         list.setAttribute('iconed', '');
     }
     list.icon = iconed;
+    on('mousedown')(list, e => e.preventDefault());
     return list;
 }

package/coms/zimoli/selectList.less

@@ -2,9 +2,11 @@
     max-width: 100%;
     background-color: #fff;
     line-height: 30px;
-    box-shadow: 0 0 20px -6px rgba(0, 0, 0, .3);
+    box-shadow: 0 0 20px -6px rgba(0, 0, 0, .1);
+    box-sizing: border-box;
+    border: 1px solid #0003;
 
-    >div {
+    >[item] {
         cursor: default;
         padding: 0 16px;
 
@@ -49,4 +51,15 @@
         background-position-y: 50%;
         background-position-x: 8px;
     }
+}
+
+>[adder] {
+    padding: 0 16px;
+    text-align: right;
+
+    a {
+        cursor: pointer;
+        vertical-align: top;
+        margin-left: 10px;
+    }
 }

package/coms/zimoli/selectListEdit.html

@@ -0,0 +1,15 @@
+<div head>管理选项</div>
+<div body>
+    <div>
+        <input placeholder="搜索或添加" v-model="search" @keydown.enter="add()" /><a @click="add()"
+            -if="search&&!filtered.hasFullmatch">添加</a>
+    </div>
+    <div class="item" -repeat="o in (search?filtered:options)">
+        <span -html=o.name></span>
+        <a type="danger" @click="del(o)">删除</a>
+    </div>
+</div>
+<div foot>
+    <btn @click="save()">确定</btn>
+    <btn type="white" @click="remove()">取消</btn>
+</div>

package/coms/zimoli/selectListEdit.js

@@ -0,0 +1,68 @@
+function main(options) {
+    var page = view();
+    page.innerHTML = template;
+    on("submit")(page, e => e.preventDefault());
+    render(page, {
+        options, a: button, input, _search: '',
+        add() {
+            var a = this._search;
+            a = a.trim();
+            if (!a) return;
+            if (this.filtered.hasFullmatch) return;
+            options.push({ name: a, value: a });
+            this.research();
+        },
+        del(o) {
+            for (var cx = 0, dx = options.length; cx < dx; cx++) {
+                if (options[cx].value === o.value) {
+                    var i = cx;
+                    break;
+                }
+            }
+            if (i >= 0) options.splice(i, 1);
+            console.log(i)
+            this.research();
+        },
+        get search() {
+            return this._search;
+        },
+        research() {
+            var v = this._search;
+            if (v) {
+                this.filtered = search(v, options);
+            }
+        },
+        set search(v) {
+            this._search = v;
+            if (v) {
+                this.research();
+            }
+        },
+        btn: button,
+        remove() {
+            remove(page);
+        },
+        save() {
+            remove(page);
+        },
+        filtered: []
+    });
+    drag.on(page.firstChild, page);
+    on("append")(page, function () {
+        setTimeout(function () {
+            page.querySelector("input").focus();
+        });
+    });
+    on("mousedown")(page, e => {
+        if (e.target !== page.querySelector("input")) {
+            e.preventDefault();
+        }
+    });
+    page.onback = function () {
+        if (page.$scope.search) {
+            page.$scope.search = '';
+            return false;
+        }
+    };
+    return page;
+}

package/coms/zimoli/selectListEdit.less

@@ -0,0 +1,21 @@
+& {
+    position: absolute;
+    user-select: none;
+}
+
+[body]>div {
+    padding: 6px 10px;
+    background: #fff;
+
+    >* {
+        line-height: 28px;
+        vertical-align: top;
+        margin-right: 20px;
+    }
+
+    &.item {
+        &:nth-of-type(n+2) {
+            border-top: 1px solid #0003;
+        }
+    }
+}

package/coms/zimoli/swap.less

@@ -30,7 +30,7 @@
     -o-appearance: none;
     appearance: none;
     &:before {
-        background-color: #26f;
+        background-color: #28c;
         transition: all .1s ease-out;
         left: 50%;
         top: 50%;

package/coms/zimoli/table.html

@@ -1,15 +1,17 @@
 <thead>
     <tr>
-        <td -repeat="f in fields"><i -if="f.icon" -class="f.icon"></i></span><span -if="f.name" -html="f.name"></span>
+        <td -repeat="f in fields track by f.id" :style="{width:f.width}"><i -if="f.icon"
+                -class="f.icon"></i></span><span -if="f.name" -html="f.name"></span>
         </td>
     </tr>
 </thead>
 <tbody -src="d in data">
     <tr>
         <td -repeat="f in fields">
-            <span -if="f.key" -text="d[f.key]"></span>
-            <a on-click="o.do(d)" -if="f.options" -repeat="o in f.options">
-                <span -text=o.name></span>
+            <model -if="f.key" :field=f :data=d readonly ></model>
+            <a on-click="o.do(d)" -if="!f.key&&f.options" _type="o.type instanceof Function?o.type(d):o.type"
+                -repeat="o in f.options">
+                <span -text="o.name instanceof Function?o.name(d):o.name"></span>
             </a>
         </td>
     </tr>