efront 4.21.3 → 4.22.0

package/coms/zimoli/model.js

@@ -2,40 +2,7 @@
 /**
  * 支持任意类型的数据的编辑展示及过滤
  */
-var rebuildOptions = function () {
-    var elem = this;
-    var { $scope } = elem;
-    if (!$scope) return;
-    var { data, field } = $scope;
-    if (!data || !field) return;
-    var { options_from, options } = field;
-    var new_options = seek(data, options_from);
-    if (new_options !== options) {
-        field.options = new_options;
-        delete field.optionsMap;
-        render.refresh();
-    }
-};
-var copyOptionData = function () {
-    var { $scope } = this;
-    if (!$scope) return;
-    var { data, field } = $scope;
-    if (!data || !field) return;
-    var { option_to, options } = field;
-    if (!options) return;
-    var value = data[field.key];
-    var option = isObject(value) ? value : value in options ? options[value] : value;
-    extend(data, seek(option, option_to));
-};
-var renderModel = function (field, data) {
-    var ipt = this;
-    ipt.setAttribute("ng-model", "data[field.key]");
-    ipt.setAttribute("placeholder_", "field.holder");
-    render(ipt, {
-        field,
-        data
-    });
-};
+
 var unmark = function (select) {
     select.isediter = false;
     select.isreader = false;
@@ -135,9 +102,7 @@ var constructors = {
     color() {
         return colorpicker();
     },
-    title() {
-    },
-    name() { },
+
     image({ field }) {
         var img = image();
         var { options } = field;
@@ -160,52 +125,37 @@ var constructors = {
         cast(elem, field);
         return elem;
     },
-    select(_, t) {
-        if (!t) {
-            var elem = select();
-            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({
-                    name: i18n`选择${field.name}`,
-                    key: ''
-                })
-            }
-            render(_.children, { field, data, isEmpty });
-            elem.innerHTML = `<option -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 opt = null;
-            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);
+    select(_) {
+        var { field, data } = _;
+        var t = field.ref;
+        var elem = document.createElement('select');
+        elem.multiple = field.multi;
+        elem.editable = field.editable || t === 'a';
+        var o = field.options?.[0];
+        if (field.holder) _.innerHTML = `<span -if="isEmpty(data[field.key])" class="placeholder">${field.holder}</span>`;
+        if (!isEmpty(o?.key)) {
+            if (!field.required) field.options.unshift({
+                name: field.holder || i18n`选择${field.name}`,
+                key: ''
+            })
         }
+        render(_.children, { field, data, isEmpty });
+        elem.setAttribute('a-src', 'o in field.options')
+        elem.innerHTML = `<option disabled:=o.disabled -text="o.name" :value="o.key"></option>`;
+        render(elem, { select, data, field });
         return elem;
     },
-    "repeat"(_, field_type) {
+    "repeat"(_) {
         var elem = input();
         elem.$renders = [function () {
             var { field, data } = this.$scope;
             var { status } = this;
+            var field_type = field.ref;
             var valid = this.value === data[field_type];
             if (!this.dirty) {
                 status = 'clean';
             } else if (isEmpty(this.value)) {
-                if (field.is_required) {
+                if (field.required) {
                     status = 'required';
                 } else {
                     status = 'empty';
@@ -230,11 +180,13 @@ constructors.int
     = constructors.number;
 constructors.gen = constructors.generator;
 var readonly_types = {
-    "date"({ field }, data) {
+    "date"() {
+        var { field, data } = this;
         var string = data[field.key];
         return filterTime(string, "y年M月d日");
     },
-    "url"({ field }, data) {
+    "url"() {
+        var { field, data } = this;
         var href = data[field.key];
         if (href) {
             var e = anchor2(field.holder || href, href);
@@ -242,34 +194,34 @@ var readonly_types = {
             return e;
         }
     },
-    "datetime"(elem) {
-        var { data, field } = elem;
-        elem.innerHTML = filterTime(data[field.key], "y年M月d日 h:mm");
+    "datetime"() {
+        var { field, data } = this;
+        return filterTime(data[field.key], "y年M月d日 h:mm");
     },
-    "timestamp"(elem) {
-        var { data, field } = elem;
-        elem.innerHTML = filterTime(data[field.key]);
+    "timestamp"() {
+        var { field, data } = this;
+        return filterTime(data[field.key]);
     },
-    "size"({ field }, data) {
+    "size"() {
+        var { field, data } = this;
         var f = data[field.key];
         return size(f);
     },
-    html(a, data) {
-        var t = document.createElement("span");
-        t.innerHTML = seek(data, a.field.key);
-        return t;
+    html() {
+        var { field, data } = this;
+        return seek(data, field.key);
     },
-    text(e) {
-        var { data, field } = e;
-        e.innerHTML = data[field.key] ?? '';
+    text() {
+        var { field, data } = this;
+        return data[field.key] ?? '';
     },
-    swap(e, data) {
-        var { field } = e;
+    swap() {
+        var { field, data } = this;
         var v = data[field.key];
         if (field.options) {
             if (!field.optionsMap) field.optionsMap = createOptionsMap(field.options);
             var o = field.optionsMap[v];
-            try { e.setAttribute(field.key, v); } catch { }
+            try { this.setAttribute(field.key, v); } catch { }
             if (isObject(o)) return `<s></s>` + o.name;
             if (isHandled(o)) return o;
         }
@@ -277,8 +229,83 @@ var readonly_types = {
         return v;
     },
 };
+var setContent = function (value) {
+    if (this === value) return;
+    if (isNode(value) && this !== value || isArray(value)) {
+        remove(this.childNodes);
+        appendChild(this, value);
+    }
+    else if (isHandled(value)) {
+        this.innerHTML = value;
+    }
+};
+var Binder = render.Binder, Model = render.Model;
+Object.keys(readonly_types).forEach(k => {
+    var getter = readonly_types[k];
+    readonly_types[k] = new Binder(getter, setContent);
+});
+var get = new Binder(function () {
+    var { field, data } = this;
+    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;
+}, setContent);
+
+var ipt = function (element) {
+    var { field } = element;
+    var ipt = document.createElement('input');
+    ipt.setAttribute('type', field.type);
+    input(ipt);
+    return ipt;
+};
+
+function getScopeValue() {
+    return this.data[this.field.key];
+}
+function setScopeValue(v) {
+    this.data[this.field.key] = v;
+}
+function setBinder(elem, binder) {
+    if (binder === elem.$binder) return;
+    removeFromList(elem.$renders, elem.$binder);
+    remove(elem.childNodes);
+    if (binder instanceof Binder) {
+        binder.call(elem);
+        elem.$renders.push(binder);
+    }
+    else {
+        var ipt = binder(elem);
+        binder = null;
+        if (isHandled(ipt) && ipt !== elem) {
+            if (isNode(ipt)) {
+                var model = new Model(getScopeValue, setScopeValue, ipt);
+                model.hook(elem, ipt);
+                appendChild(elem, ipt);
+            }
+            else {
+                elem.innerHTML = ipt;
+            }
+        }
+    }
+    elem.$binder = binder;
+}
 readonly_types.anchor = readonly_types.url;
 readonly_types.do = readonly_types.act = readonly_types.action = constructors.generator;
+constructors.title = constructors.name = readonly_types.text;
 readonly_types.gen = readonly_types.generator = readonly_types.text;
 var createOptionsMap = function (options) {
     if (!isObject(options[0])) return options;
@@ -308,117 +335,45 @@ var markEditer = function (editers) {
         editers[k].isediter = true;
     }
 };
-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;
-                }
-                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;
-                    }
-                });
-            }
+var run = function ({ changes }) {
+    var function_type = "function";
+    var elem = this;
+    var { data, field } = elem;
+    if (!data || !field) 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("?");
+        field.ref = field_ref;
+    }
+    var type = elem.getAttribute('type');
+    if (type !== field_type) {
+        elem.setAttribute("type", field_type);
+    }
+    if (isString(field_type)) field_type = field_type.replace(/\:[\d+\.]+$/, '');
+    var create = null;
+    if (elem.readonly || field.readonly) {
+        if (field_type === "function") {
+            create = field_editor;
         } 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);
-                }
-            }
+            create = findReaderForElement(field_type, elem) || readonly_types[field_type];
+            if (!create) create = get;
         }
-    };
-    if (data.loading_promise || field.loading_promise) {
-        Promise.all([
-            data.loading_promise,
-            field.loading_promise
-        ]).then(run);
     } else {
-        run();
+        create = field_type === "function" ? field_editor : findEditerForElement(field_type, elem) || constructors[field_type];
+        if (!create && field.key) create = ipt;
     }
+    setBinder(elem, create);
 };
+
 function main(elem) {
-    on("changes")(elem, function ({ changes }) {
-        if (changes.data || changes.field || changes.readonly) {
-            build.call(this);
-        }
-    });
+    on('changes')(elem, run);
     return elem;
 }
 markEditer(constructors);

package/coms/zimoli/model.less

@@ -6,13 +6,6 @@
 &[type=select] {
     position: relative;
 
-    >.select:hover,
-    >.select:active {
-        &+.placeholder {
-            color: #fff9;
-        }
-    }
-
     .placeholder {
         color: #0009;
         padding-left: 6px;
@@ -24,9 +17,12 @@
         z-index: 1;
         pointer-events: none;
         display: block;
+        border: none;
+        outline: none;
+        background: none;
     }
 
-    .select[empty] {
+    .placeholder+.select[empty] {
         color: transparent;
     }
 

package/coms/zimoli/on.js

@@ -250,7 +250,7 @@ function checkKeyNeed(eventtypes, e) {
 }
 var pendingid = 0;
 function pending(h, event) {
-    if (h instanceof Function) {
+    if (h.call instanceof Function) {
         h.pending = true;
         var res = h.call(this, event);
         if (res && isFunction(res.then) && this.setAttribute) {
@@ -306,7 +306,8 @@ var broadcast = function (k, hk, event) {
         // firefox 中键
         Object.defineProperty(event, 'which', { value: 2 });
     }
-    for (var [eventtypes, handler, context] of handlers) {
+    for (var hand of handlers) {
+        var [eventtypes, handler, context] = hand;
         if (eventtypes.self && event.target !== element) continue;
         if (!checkKeyNeed(eventtypes, event)) continue;
         if (eventtypes.stop) event.stopPropagation();
@@ -320,7 +321,7 @@ var broadcast = function (k, hk, event) {
         } else {
             pending.call(context, handler, event);
         }
-        if (eventtypes.once) remove.call(element, k, hk, eventtypes, handler);
+        if (eventtypes.once) remove.call(element, k, hk, hand);
     }
 };
 
@@ -341,8 +342,8 @@ var append = function (k, hk, listener2, firstmost) {
     var [eventtypes, handler, context] = listener2;
     var element = this;
     var handlers = element[hk];
-    for (var [e, h, c] of handlers) {
-        if (h === handler && shallowEqual(eventtypes, e, 2) && c === context) return;
+    for (var [e, h, c, d] of handlers) {
+        if (h === handler && c === context && shallowEqual(eventtypes, e, 2)) return d.dulp = true, d;
     }
     if (k === changes_key) {
         if (!element.$needchanges) element.$needchanges = 0;
@@ -350,6 +351,7 @@ var append = function (k, hk, listener2, firstmost) {
     }
     if (firstmost) handlers.unshift(listener2);
     else handlers.push(listener2);
+    return listener2[3] = remove.bind(element, k, hk, listener2);
 };
 
 var on = document.efronton = function (k) {
@@ -373,8 +375,7 @@ var on = document.efronton = function (k) {
             else target[on_event_path] = h;
         }
         var listener = [eventtypes, handler, context];
-        append.call(target, k, hk, listener, firstmost);
-        return remove.bind(target, k, hk, listener);
+        return append.call(target, k, hk, listener, firstmost);
     };
 
     else {
@@ -419,8 +420,7 @@ var on = document.efronton = function (k) {
 
             }
             var listener = [eventtypes, handler, context];
-            append.call(target, k, handler_path, listener, firstmost);
-            return remove.bind(target, k, handler_path, listener);
+            return append.call(target, k, handler_path, listener, firstmost);
         }, addhandler = function (context, handler, firstmost) {
             return _addhandler(context, context, handler, firstmost);
         };
@@ -556,9 +556,11 @@ var invoke = function (event, type, pointerType) {
 var autofire = function (key) {
     var h = on(key);
     handlersMap["on" + key] = function (target, handle) {
-        var on = h(target, handle);
-        if (isMounted(target)) handle.call(target);
-        return on;
+        var off = h(target, handle);
+        if (!off.dulp && isMounted(target)) {
+            handle.call(target);
+        }
+        return off;
     };
 };
 autofire('mounted');

package/coms/zimoli/padding.less

@@ -1,6 +1,7 @@
 & {
     box-sizing: border-box;
     display: inline-block;
+    vertical-align: top;
     position: relative;
     border: 6px solid transparent;
 }

package/coms/zimoli/progbar.xht

@@ -2,23 +2,24 @@
     & {
         display: inline-block;
         min-width: 60px;
-        height: 12px;
+        height: 14px;
         color: #3ae;
-        border: 2px double;
+        border: 3px double;
         background: #f2f2f2;
         position: relative;
-        border-radius: 2px;
+        border-radius: 4px;
     }
-
+    
     &[danger] {
         color: #c24;
     }
-
+    
     >div {
         position: relative;
-        border: 4px solid;
-        border-left: none;
-        border-right: none;
+        border-top: 7px solid;
+        border-bottom: 1px solid;
+        border-left: 2px solid;
+        border-right: 2px solid;
         height: 100%;
     }
 </style>

package/coms/zimoli/prompt.less

@@ -34,9 +34,6 @@ textarea,
     min-height: 80px;
 }
 
-& {
-    min-height: 130px;
-}
 
 input {
     width: 100%;