efront 4.17.0 → 4.18.3

package/coms/zimoli/back.xht

@@ -1,18 +1,25 @@
 <back onclick="history.back()">
+    <div class="track"></div>
     <i></i><span>${i18n`返回`}</span>
 </back>
+<!--
+ 中国共产党有多臭， 中国足球就有多臭。
+ 这是垄断的必然结果，权力的核心被拉拢腐蚀只是结果，而不是原因。
+ 只惩办被拉拢腐蚀的人员，而不从局势着眼，不修改制度，是本末倒置。
+ 一台制造腐败分子的机器长期运转的结果，就是生产更多的腐败分子。
+-->
 <style>
     i:before {
         content: "‹";
         font-size: 26px;
         font-family: Arial, Helvetica, sans-serif;
     }
-    
+
     i {
         font-style: normal;
         margin-top: -12px;
     }
-    
+
     span {
         text-transform: capitalize;
         font-size: 14px;
@@ -20,6 +27,18 @@
         margin-top: -10px;
     }
 
+    & {
+        left: 0;
+        top: 0;
+        height: 100%;
+        border-radius: inherit;
+        position: absolute;
+        width: 60px;
+        box-shadow: none;
+        background: transparent;
+        color: inherit;
+    }
+
     span,
     i {
         position: absolute;
@@ -31,5 +50,5 @@
     }
 </style>
 <script>
-    var back = button;
+    button(this);
 </script>

package/coms/zimoli/button.js

@@ -96,9 +96,9 @@ function button(texter, type) {
             if (!type) {
                 texter = texter.replace(/#\w*/, function (w) {
                     if (/^#([a-f\d]{3,4}){1,2}$/.test(w)) {
-                        type = color.parse(w);
+                        type = w;
                     }
-                    type = w.slice(1);
+                    else type = w.slice(1);
                     return '';
                 }).trim();
             }
@@ -139,6 +139,16 @@ function button(texter, type) {
             var size = isFinite(type) ? type + "px" : type;
             css(button, `height:${size};`);
         }
+        else if (color.isColor(type)) {
+            var c = color.format(type);
+            if (button.getAttribute('type') === 'anchor' || button.tagName === 'A') {
+                css(button, { color: c })
+            }
+            else {
+                var b = color.pair(c);
+                css(button, { background: c, color: b });
+            }
+        }
         else if (isString(type)) button.setAttribute("type", type);
     }
     return button;

package/coms/zimoli/confirm.js

@@ -94,10 +94,11 @@ function confirm() {
                 element.setAttribute("locked", '');
                 this.setAttribute("loading", "");
                 res.then((res) => {
-                    element.result = res;
-                    remove(element);
                     element.removeAttribute('locked');
                     this.removeAttribute('loading');
+                    if (res === false) return;
+                    element.result = res;
+                    remove(element);
                 }, () => {
                     this.removeAttribute('loading');
                     element.removeAttribute('locked');

package/coms/zimoli/confirm.less

@@ -10,7 +10,6 @@
 }
 
 &>.body {
-    border-bottom: 30px solid transparent;
-    padding-left: 20px;
+    padding: 10px 16px;
     background: inherit;
 }

package/coms/zimoli/field.html

@@ -1,4 +1,5 @@
-<template v-if='field?.name'>
+<template a-if="!checkNeeds(field.needs,data)"></template>
+<template v-else-if='field?.name'>
     <div class="head">
         <span ng-bind=field.name></span>
         <span class="required" ng-if="field.required">*</span>

package/coms/zimoli/field.js

@@ -100,6 +100,10 @@ function main(elem) {
             error: null,
             field: f,
             container,
+            checkNeeds(needs, data) {
+                var res = check(data, needs);
+                return res;
+            },
             readonly: !!this.readonly
         });
         elem.oldValue = data[f.key];

package/coms/zimoli/getCursorPosition.js

@@ -0,0 +1,21 @@
+var cursor = document.createElement("span");
+var getCursorPosition = function () {
+    var selection = document.getSelection();
+    var { anchorNode, anchorOffset, focusNode, focusOffset } = selection;
+    if (!focusNode) return;
+    var position;
+    if (focusNode.nodeType === 1) {
+        focusNode.insertBefore(cursor, focusNode.childNodes[focusOffset]);
+        position = getScreenPosition(cursor);
+    }
+    else if (focusNode.nodeType === 3) {
+        var nodeValue = focusNode.nodeValue;
+        focusNode.nodeValue = nodeValue.slice(0, focusOffset);
+        focusNode.parentNode.insertBefore(cursor, focusNode.nextSibling);
+        position = getScreenPosition(cursor);
+        cursor.parentNode.removeChild(cursor);
+        focusNode.nodeValue = nodeValue;
+    }
+    selection.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset)
+    return position;
+};

package/coms/zimoli/model.js

@@ -166,6 +166,7 @@ var constructors = {
             var { field, data } = _;
             elem.value = data[field.key];
             var o = field.options?.[0];
+            elem.editable = field.editable;
             if (field.holder) _.innerHTML = `<span -if="isEmpty(data[field.key])" class="placeholder">${field.holder}</span>`;
             if (!isEmpty(o?.key)) {
                 field.options.unshift({
@@ -307,114 +308,115 @@ var markEditer = function (editers) {
         editers[k].isediter = true;
     }
 };
-function main(elem) {
-    var build = function () {
-        var { data, readonly, field } = elem;
+var build = function () {
+    var elem = this;
+    var { data, readonly, field } = elem;
 
-        if (!field || !data) return;
-        var run = function () {
-            var function_type = "function";
-            if (data !== elem.data || field !== elem.field || readonly !== elem.readonly) return;
-            var field_type = field.type || field.editor, field_editor = field.editor || field.type;
-            if (field_editor instanceof Function && field_type === field_editor) {
-                field_type = function_type;
-            }
-            if (!(field_editor instanceof Function)) {
-                field_editor = null;
-            }
-            if (/\?/.test(field_type)) {
-                var [field_type, field_ref] = field_type.split("?");
-            }
-            var type = elem.getAttribute('type');
-            if (type !== field_type) {
-                elem.setAttribute("type", field_type);
-            }
-            remove(elem.children);
-            if (isString(field_type)) field_type = field_type.replace(/\:[\d+\.]+$/, '');
-            if (readonly || field.readonly) {
-                if (field_type === "function") {
-                    field_editor(elem);
-                } else {
-                    var create = findReaderForElement(field_type, elem) || readonly_types[field_type];
-                    if (create) {
-                        var e = create(elem, data, field_ref);
-                        if (isNode(e)) {
-                            if (e !== elem) appendChild(elem, e);
-                        }
-                        else if (!isEmpty(e)) {
-                            elem.innerHTML = e;
-                        }
-                        return;
+    if (!field || !data) return;
+    var run = function () {
+        var function_type = "function";
+        if (data !== elem.data || field !== elem.field || readonly !== elem.readonly) return;
+        var field_type = field.type || field.editor, field_editor = field.editor || field.type;
+        if (field_editor instanceof Function && field_type === field_editor) {
+            field_type = function_type;
+        }
+        if (!(field_editor instanceof Function)) {
+            field_editor = null;
+        }
+        if (/\?/.test(field_type)) {
+            var [field_type, field_ref] = field_type.split("?");
+        }
+        var type = elem.getAttribute('type');
+        if (type !== field_type) {
+            elem.setAttribute("type", field_type);
+        }
+        remove(elem.children);
+        if (isString(field_type)) field_type = field_type.replace(/\:[\d+\.]+$/, '');
+        if (readonly || field.readonly) {
+            if (field_type === "function") {
+                field_editor(elem);
+            } else {
+                var create = findReaderForElement(field_type, elem) || readonly_types[field_type];
+                if (create) {
+                    var e = create(elem, data, field_ref);
+                    if (isNode(e)) {
+                        if (e !== elem) appendChild(elem, e);
                     }
-                    elem.innerHTML = '<span ng-bind=get()></span>';
-                    render(elem, {
-                        get() {
-                            if (isEmpty(field.key)) return;
-                            var value = seek(data, field.key);
-                            if (field.options) {
-                                if (!field.optionsMap) {
-                                    var map = Object.create(null);
-                                    for (var o of field.options) {
-                                        var v = getValue(o);
-                                        map[v] = o;
-                                    }
-                                    field.optionsMap = map;
-                                }
-                                var map = field.optionsMap;
-                                if (value in map) {
-                                    value = getName(map[value]);
+                    else if (!isEmpty(e)) {
+                        elem.innerHTML = e;
+                    }
+                    return;
+                }
+                elem.innerHTML = '<span ng-bind=get()></span>';
+                render(elem, {
+                    get() {
+                        if (isEmpty(field.key)) return;
+                        var value = seek(data, field.key);
+                        if (field.options) {
+                            if (!field.optionsMap) {
+                                var map = Object.create(null);
+                                for (var o of field.options) {
+                                    var v = getValue(o);
+                                    map[v] = o;
                                 }
+                                field.optionsMap = map;
+                            }
+                            var map = field.optionsMap;
+                            if (value in map) {
+                                value = getName(map[value]);
                             }
-                            return value;
                         }
+                        return value;
+                    }
+                });
+            }
+        } else {
+            var create = field_type === "function" ? field_editor : findEditerForElement(field_type, elem) || constructors[field_type];
+            var ipt = create ? create(elem, field_ref) : field.key ? input(function () {
+                var input = document.createElement('input');
+                input.setAttribute('type', field.type);
+                return input;
+            }()) : null;
+            if (ipt) {
+                if (ipt !== elem) appendChild.insert(elem, ipt);
+                if (!ipt.$scope) {
+                    renderModel.call(ipt, field, data);
+                    var saved_sataus;
+                    ipt.$renders.push(function () {
+                        var { valid, status } = this;
+                        if (elem.valid !== valid) elem.valid = valid;
+                        if (saved_sataus === status) return;
+                        saved_sataus = status;
+                        elem.setAttribute('status', saved_sataus);
+                    });
+                } else {
+                    on("change")(ipt, function () {
+                        data[field.key] = getValue.call(this);
                     });
+                    setValue.call(ipt, data[field.key]);
                 }
-            } else {
-                var create = field_type === "function" ? field_editor : findEditerForElement(field_type, elem) || constructors[field_type];
-                var ipt = create ? create(elem, field_ref) : field.key ? input(function () {
-                    var input = document.createElement('input');
-                    input.setAttribute('type', field.type);
-                    return input;
-                }()) : null;
-                if (ipt) {
-                    if (ipt !== elem) appendChild.insert(elem, ipt);
-                    if (!ipt.$scope) {
-                        renderModel.call(ipt, field, data);
-                        var saved_sataus;
-                        ipt.$renders.push(function () {
-                            var { valid, status } = this;
-                            if (elem.valid !== valid) elem.valid = valid;
-                            if (saved_sataus === status) return;
-                            saved_sataus = status;
-                            elem.setAttribute('status', saved_sataus);
-                        });
-                    } else {
-                        on("change")(ipt, function () {
-                            data[field.key] = getValue.call(this);
-                        });
-                        setValue.call(ipt, data[field.key]);
-                    }
-                    if ("option_to" in field) {
-                        on("change")(ipt, copyOptionData);
-                    }
-                    if ("options_from" in field) {
-                        ipt.$renders.push(rebuildOptions);
-                    }
+                if ("option_to" in field) {
+                    on("change")(ipt, copyOptionData);
+                }
+                if ("options_from" in field) {
+                    ipt.$renders.push(rebuildOptions);
                 }
             }
-        };
-        if (data.loading_promise || field.loading_promise) {
-            Promise.all([
-                data.loading_promise,
-                field.loading_promise
-            ]).then(run);
-        } else {
-            run();
         }
     };
+    if (data.loading_promise || field.loading_promise) {
+        Promise.all([
+            data.loading_promise,
+            field.loading_promise
+        ]).then(run);
+    } else {
+        run();
+    }
+};
+function main(elem) {
     on("changes")(elem, function ({ changes }) {
         if (changes.data || changes.field || changes.readonly) {
-            build();
+            build.call(this);
         }
     });
     return elem;

package/coms/zimoli/on.js

@@ -167,6 +167,7 @@ class EventNeed {
     stop = false;
     capture = false;
     self = false;
+    singly = false;
     prevent = false;
     passive = false;
     keyNeed = [];
@@ -250,15 +251,21 @@ function checkKeyNeed(eventtypes, e) {
 var pendingid = 0;
 function pending(h, event) {
     if (h instanceof Function) {
+        h.pending = true;
         var res = h.call(this, event);
         if (res && isFunction(res.then) && this.setAttribute) {
-            var id = ++pendingid & 0x1fffffffffffff;
+            var id = ++pendingid;
+            pendingid &= 0x7fffffff;
             this.setAttribute('pending', id);
             var removePending = () => {
+                if (h.pending) setTimeout(function () {
+                    h.pending = false;
+                }, 120)
                 if (+this.getAttribute('pending') === id) this.removeAttribute('pending');
             };
             res.then(removePending, removePending);
         }
+        else h.pending = false
         return res;
     }
     return h;
@@ -305,6 +312,7 @@ var broadcast = function (k, hk, event) {
         if (eventtypes.stop) event.stopPropagation();
         if (eventtypes.passive && !preventPassive) event.preventDefault = function () { };
         if (eventtypes.prevent) event.preventDefault();
+        if (eventtypes.singly && handler.pending) continue;
         if (handler instanceof Array) {
             for (var h of handler) {
                 h.call(context, event);

package/coms/zimoli/progbar.xht

@@ -0,0 +1,59 @@
+<style>
+    & {
+        display: inline-block;
+        min-width: 60px;
+        height: 12px;
+        color: #3ae;
+        border: 2px double;
+        background: #f2f2f2;
+        position: relative;
+        border-radius: 2px;
+    }
+
+    &[danger] {
+        color: #c24;
+    }
+
+    >div {
+        position: relative;
+        border: 4px solid;
+        border-left: none;
+        border-right: none;
+        height: 100%;
+    }
+</style>
+<div>
+    <div -style="{width:value}"></div>
+</div>
+<script>
+    var { total, current } = this;
+    var calc = function () {
+        var v = (current / total * 10000 + .5) | 0;
+        if (v < 0) v = 0;
+        if (v > 10000) v = 10000;
+        return v / 100 + "%";
+    };
+    var value = calc();
+    Object.defineProperties(this, {
+        total: {
+            set(v) {
+                if (total === v) return;
+                total = v;
+                value = calc();
+            },
+            get() {
+                return total;
+            }
+        },
+        current: {
+            set(v) {
+                if (current === v) return;
+                current = v;
+                value = calc();
+            },
+            get() {
+                return current;
+            }
+        }
+    })
+</script>

package/coms/zimoli/prompt.js

@@ -1,41 +1,81 @@
+var settip = function (tip, res) {
+    if (isEmpty(res)) valid = true;
+    else if (typeof res === 'boolean') valid = res;
+    else if (isNode(res)) remove(tip.childNodes), appendChild(tip, res);
+    else html(tip, res), valid = false;
+    if (valid) html(tip, '');
+    return valid;
+}
 var validate = function (text, checker, tip) {
     var valid;
     if (checker instanceof RegExp) {
         valid = checker.test(text);
     }
     if (isFunction(checker)) {
-        var res = checker(text);
-        if (isEmpty(res)) valid = true;
-        else if (typeof res === 'boolean') valid = res;
-        else if (isNode(res)) remove(tip.childNodes), appendChild(tip, res);
-        else html(tip, res), valid = false;
+        valid = checker(text);
     }
-    if (valid) html(tip, '');
+    valid = settip(tip, valid);
     return valid;
 };
 function prompt() {
-    var msg = "请输入", check, ipt;
+    var msg = i18n`请输入`, check, ipt;
+    var opts = [];
+    var submit = null;
+    var wrap = false;
     for (var arg of arguments) {
         if (isNode(arg)) ipt = arg;
         else if (typeof arg === 'string') msg = arg;
+        else if (isArray(arg)) opts = arg;
         else if (isFunction(arg) || arg instanceof RegExp) check = arg;
+        else if (isObject(arg)) {
+            if (isFunction(arg.test)) check = arg;
+            if (isFunction(arg.submit)) submit = arg;
+            if (isString(arg.msg || arg.title)) msg = arg.msg || arg.title;
+            if (arg.multiple || arg.wrap) wrap = true;
+        }
+    }
+    if (!ipt) {
+        if (wrap) {
+            ipt = document.createElement('div');
+            ipt.setAttribute('textarea', '');
+            ipt.contentEditable = true;
+        }
+        else ipt = input();
+    }
+    else {
+        ipt.setAttribute('textarea', '');
     }
-    var ipt = input();
     var tip = document.createElement("tip");
-    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 buttons = [button("确认"), button("取消", 'white')];
-    if (isFunction(check)) {
+    var buttons = [isNode(opts[0]) ? opts[0] : button(opts[0] || i18n`确认`), isNode(opts[1]) ? opts[1] : button(opts[1] || i18n`取消`, 'white')];
+    var getValue = () => isFunction(ipt.getValue) ? ipt.getValue() : ipt.value;
+    if (isFunction(check) || wrap) {
         var setDisable = function (event) {
-            if (oked || ohed) return;
-            var valid = validate(ipt.value, check, tip);
+            var bd = c.body;
+            if (wrap && bd) {
+                if (p) move.setPosition(c, p);
+                var cp = getCursorPosition();
+                var bp = getScreenPosition(bd);
+                var s = getComputedStyle(ipt);
+                var pl = parseFloat(s.paddingLeft) * 2 + ipt.clientLeft + ipt.offsetLeft;
+                var pr = parseFloat(s.borderRightWidth) + parseFloat(s.paddingRight) * 2 + (bd.scrollWidth - ipt.offsetLeft - ipt.offsetWidth);
+                var pt = parseFloat(s.paddingTop) * 2 + ipt.clientTop + ipt.offsetTop;
+                var pb = parseFloat(s.borderBottomWidth) + parseFloat(s.paddingBottom) * 2 + (bd.scrollHeight - ipt.offsetTop - ipt.offsetHeight);
+
+                if (cp.left < bp.left + pl) {
+                    bd.scrollLeft -= bp.left + pl - cp.left;
+                }
+                if (cp.right > bp.right - pr) {
+                    bd.scrollLeft += cp.right + pr - bp.right;
+                }
+                if (cp.top < bp.top + pt) {
+                    bd.scrollTop -= bp.top + pt - cp.top;
+                }
+                if (cp.bottom > bp.bottom - pb) {
+                    bd.scrollTop += cp.bottom + pb - cp.bottom;
+                }
+            }
+            if (!check) return;
+            var valid = validate(getValue(), check, tip);
             if (event) attr(body, "error", !valid);
             attr(buttons[0], 'disabled', !valid);
         };
@@ -45,17 +85,17 @@ function prompt() {
         on('paste')(ipt, setDisable);
         on('input')(ipt, setDisable);
     }
-    var body = div();
+    var body = document.createElement("div");
     appendChild(body, [ipt, tip]);
-    var c = confirm(msg, body, buttons, function (_) {
-        if (oked || ohed) return;
+    var c = confirm(msg, body, buttons, async function (_) {
         if (_ === buttons[0]) {
-            if (check && !validate(ipt.value, check, tip)) return false;
-            oked = true;
-        } else {
-            ohed = true;
+            var value = getValue();
+            if (check && !validate(value, check, tip)) return false;
+            if (submit) {
+                var res = await submit.submit(value);
+                if (!settip(tip, res)) return false;
+            }
         }
-        fire();
     });
     on('mounted')(ipt, function () {
         if (setDisable) setDisable();
@@ -64,15 +104,21 @@ function prompt() {
         });
     })
     on("mousedown")(c, e => e.target !== ipt && e.preventDefault() | ipt.focus());
-    on("keydown.enter")(c, function (event) {
+    on(wrap ? "keydown.ctrl.enter" : "keydown.enter")(c, function (event) {
         if (event.defaultPrevented) return;
         event.preventDefault();
         buttons[0].click();
     });
-    c.then = function (ok, oh) {
-        oks.push(ok);
-        ohs.push(oh);
-        fire();
-    };
+    var p = null;
+    if (wrap) {
+        oncemount(c, function () {
+            requestAnimationFrame(function () {
+                p = move.getPosition(c);
+            });
+            once('dragend')(c, function () {
+                p = move.getPosition(c);
+            })
+        })
+    }
     return c;
 }

package/coms/zimoli/prompt.less

@@ -12,12 +12,32 @@ tip {
     }
 }
 
-textarea {
+[body],
+.body {
+    >div {
+        height: 100%;
+    }
+}
+
+textarea,
+[textarea] {
     width: 100%;
-    height: 100%;
     resize: none;
 }
 
+>[body],
+>.body {
+    max-height: 360px;
+}
+
+[textarea] {
+    min-height: 80px;
+}
+
+& {
+    min-height: 130px;
+}
+
 input {
     width: 100%;
-}
+}