Merge branch 'master' of ssh://code.fineres.com:7999/~claire.tang/fineui

demo/js/base/button/demo.button.js

@@ -381,6 +381,10 @@ Demo.Button = BI.inherit(BI.Widget, {
             text: "文字偏左的按钮",
             textAlign: "left",
             width: 200,
+        }, {
+            type: "bi.button",
+            text: "小于最小宽度的按钮",
+            width: 50,
         }];
 
         return {

demo/js/widget/downlist/demo.downlist.js

@@ -1,3 +1,15 @@
+(function () {
+    var CustomIcon = BI.inherit(BI.Widget, {
+        render: function () {
+            return {
+                type: "bi.label",
+                text: "✨",
+            };
+        },
+    });
+    BI.shortcut("demo.downlist.icon", CustomIcon);
+}());
+
 Demo.Downlist = BI.inherit(BI.Widget, {
     props: {
         baseCls: "demo-downlist"
@@ -22,9 +34,9 @@ Demo.Downlist = BI.inherit(BI.Widget, {
 
     render: function () {
         var self = this;
-        // test
+
         return {
-            type: "bi.horizontal_adapt",
+            type: "bi.left",
             items: [{
                 type: "bi.down_list_combo",
                 ref: function (_ref) {
@@ -131,7 +143,51 @@ Demo.Downlist = BI.inherit(BI.Widget, {
                         // }]
                     }]
 
-                ]
+                ],
+            }, {
+                type: "bi.down_list_combo",
+                el: {
+                    type: "bi.button",
+                    ghost: true,
+                    iconPosition: "right",
+                    icon: "column-next-page-h-font",
+                    text: "自定义 trigger 和 icon 的级联下拉框",
+                },
+                listeners: [{
+                    eventName: "EVENT_CHANGE",
+                    action: function (v) {
+                        console.log("触发值", v);
+                    }
+                }, {
+                    eventName: "EVENT_SON_VALUE_CHANGE",
+                    action: function(v) {
+                        console.log("二级菜单触发值", v)
+                    }
+                }],
+                items: [
+                    [{
+                        el: {
+                            text: "选项一",
+                            value: 1,
+                            icon: {
+                                type: "demo.downlist.icon",
+                            },
+                        },
+                        children: [{
+                            text: "选项一",
+                            value: 11,
+                            icon: {
+                                type: "demo.downlist.icon",
+                            },
+                        }, {
+                            text: "选项二",
+                            value: 12,
+                        }],
+                    }, {
+                        text: "选项二",
+                        value: 2,
+                    }]
+                ],
             }, {
                 type: "bi.multi_layer_down_list_combo",
                 ref: function (_ref) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fineui",
-  "version": "2.0.20220829114601",
+  "version": "2.0.20220905163443",
   "description": "fineui",
   "main": "dist/fineui_without_conflict.min.js",
   "types": "dist/lib/index.d.ts",

src/base/single/button/buttons/button.js

@@ -107,8 +107,9 @@
                 });
             }
 
-            // 用于 whiteSpace
+            // 用户可能设置的 width 小于按钮的最小宽度
-            var textWidth = iconInvisible && o.width ? o.width - o.hgap * 2 : null;
+            var actualWidth = (o.minWidth > 0 && o.width < o.minWidth) ? o.minWidth : o.width;
+            var textWidth = iconInvisible && o.width ? actualWidth - o.hgap * 2 : null;
             if (BI.isNotNull(o.textWidth)) {
                 // textWidth 需要减去图标
                 textWidth = o.textWidth - (iconInvisible || isVertical(o.iconPosition) ? 0 : this._const.iconWidth);

src/base/single/editor/editor.textarea.js

@@ -111,7 +111,6 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
                         cls: "bi-water-mark textarea-watermark",
                         textAlign: "left",
                         whiteSpace: o.scrolly ? "normal" : "nowrap",
-                        title: o.watermark,
                         text: o.watermark,
                         invalid: o.invalid,
                         disabled: o.disabled,

src/base/single/input/radio/radio.js

@@ -9,10 +9,10 @@ BI.Radio = BI.inherit(BI.BasicButton, {
         baseCls: "bi-radio",
         selected: false,
         handler: BI.emptyFn,
-        width: 14,
+        width: 16,
-        height: 14,
+        height: 16,
-        iconWidth: 14,
+        iconWidth: 16,
-        iconHeight: 14,
+        iconHeight: 16,
     },
 
     render: function () {

src/base/single/tip/tip.tooltip.js

@@ -25,10 +25,12 @@ BI.Tooltip = BI.inherit(BI.Tip, {
     render: function () {
         var o = this.options;
         this.element.addClass("tooltip-" + o.level);
+
         function fn(e) {
             o.stopPropagation && e.stopPropagation();
             o.stopEvent && e.stopEvent();
         }
+
         this.element.bind({
             click: fn,
             mousedown: fn,
@@ -48,7 +50,7 @@ BI.Tooltip = BI.inherit(BI.Tip, {
                 innerVgap: this._const.vgap,
                 items: BI.map(texts, function (i, text) {
                     return {
-                        type: "bi.label",
+                        type: "bi.text",
                         textAlign: o.textAlign,
                         whiteSpace: "normal",
                         text: text,
@@ -58,7 +60,7 @@ BI.Tooltip = BI.inherit(BI.Tip, {
             });
         } else {
             this.text = BI.createWidget({
-                type: "bi.label",
+                type: "bi.text",
                 element: this,
                 textAlign: o.textAlign,
                 whiteSpace: "normal",

src/case/button/icon/iconhalf/icon.half.js

@@ -7,16 +7,30 @@ BI.HalfButton = BI.inherit(BI.BasicButton, {
     _defaultConfig: function () {
         var conf = BI.HalfIconButton.superclass._defaultConfig.apply(this, arguments);
         return BI.extend(conf, {
-            extraCls: "bi-half-button bi-high-light-border",
+            selected: false,
-            height: 14,
             width: 14,
-            selected: false
+            height: 14,
+            iconWidth: 14,
+            iconHeight: 14,
         });
     },
 
+    render: function () {
+        var o = this.options;
+        return {
+            type: "bi.center_adapt",
+            items: [{
+                type: "bi.default",
+                cls: "bi-half-button bi-high-light-border",
+                width: o.iconWidth,
+                height: o.iconHeight,
+            }],
+        };
+    },
+
     doClick: function () {
         BI.HalfButton.superclass.doClick.apply(this, arguments);
-        if(this.isValid()) {
+        if (this.isValid()) {
             this.fireEvent(BI.HalfButton.EVENT_CHANGE);
         }
     }

src/case/combo/textvaluecombo/combo.textvalue.js

@@ -14,7 +14,8 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {
             value: "",
             defaultText: "",
             allowClear: false,
-            status: "success", //  success | warning | error
+            status: "success", //  success | warning | error,
+            title: null,
         });
     },
 
@@ -35,15 +36,10 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {
 
         const o = this.options;
 
-        const trigger = {
+        const title = () => {
-            type: "bi.select_text_trigger",
+            if (BI.isFunction(o.title)) {
-            ref: ref => this.trigger = ref,
+                return o.title();
-            cls: "text-value-trigger",
+            }
-            items: o.items,
-            height: o.height,
-            text: o.text,
-            value: o.value,
-            title: () => {
             if (this.options.status === "error") {
                 return {
                     level: "warning",
@@ -53,7 +49,17 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {
             return {
                 level: "success",
             };
-            },
+        };
+
+        const trigger = {
+            type: "bi.select_text_trigger",
+            ref: ref => this.trigger = ref,
+            cls: "text-value-trigger",
+            items: o.items,
+            height: o.height,
+            text: o.text,
+            value: o.value,
+            title,
             allowClear: o.allowClear,
             defaultText: o.defaultText,
             listeners: [

src/core/4.widget.js

@@ -748,7 +748,16 @@
             this.purgeListeners();
         },
 
+        _assetMounted: function () {
+            if (!this.isVisible()) {
+                this._setVisible(true);
+                this._mount(false, false, false);
+                this._setVisible(false);
+            }
+        },
+
         _empty: function () {
+            this._assetMounted();
             BI.each(this._children, function (i, widget) {
                 widget && widget._unMount && widget._unMount();
             });
@@ -790,6 +799,7 @@
                 });
             });
             this._watchers && (this._watchers = []);
+            this._assetMounted();
             this.__d();
             this.element.empty();
             this.element.unbind();
@@ -799,6 +809,7 @@
         },
 
         _destroy: function () {
+            this._assetMounted();
             this.__destroy();
             this.element.destroy();
             this.purgeListeners();
@@ -806,6 +817,7 @@
 
         destroy: function () {
             var self = this, o = this.options;
+            this._assetMounted();
             this.__destroy();
             if (o.animation) {
                 this._innerSetVisible(false);

src/core/controller/controller.layer.js

@@ -15,7 +15,10 @@ BI.LayerController = BI.inherit(BI.Controller, {
         this.layerManager = {};
         this.layouts = {};
         this.zindex = BI.zIndex_layer;
-        BI.Resizers.add("layerController" + BI.uniqueId(), BI.bind(this._resize, this));
+    },
+
+    _initResizer: function () {
+        this.resizer = BI.Resizers.add("layerController" + BI.uniqueId(), BI.bind(this._resize, this));
     },
 
     _resize: function () {
@@ -38,6 +41,7 @@ BI.LayerController = BI.inherit(BI.Controller, {
     },
 
     create: function (name, from, op, context) {
+        BI.isNull(this.resizer) && this._initResizer();
         if (this.has(name)) {
             return this.get(name);
         }

src/core/controller/controller.resizer.js

@@ -5,18 +5,20 @@
  * @class
  */
 BI.ResizeController = BI.inherit(BI.Controller, {
+
     init: function () {
-        var self = this;
         this.resizerManger = {};
-        var fn = BI.debounce(function (ev) {
+    },
-            // if (BI.isWindow(ev.target)) {
+
+    _initResizeListener: function () {
+        var self = this;
+        this.resizeHandler = BI.debounce(function (ev) {
             self._resize(ev);
-            // }
         }, 30);
         if ("onorientationchange" in _global) {
-            _global.onorientationchange = fn;
+            _global.onorientationchange = this.resizeHandler;
         } else {
-            BI.Widget._renderEngine.createElement(_global).resize(fn);
+            BI.Widget._renderEngine.createElement(_global).resize(this.resizeHandler);
         }
     },
 
@@ -34,13 +36,14 @@ BI.ResizeController = BI.inherit(BI.Controller, {
             }
             if (BI.isFunction(resizer)) {
                 resizer(ev);
-                return;
             }
         });
     },
 
     add: function (name, resizer) {
         var self = this;
+        BI.isNull(this.resizeHandler) && this._initResizeListener();
+
         if (this.has(name)) {
             return this;
         }

src/core/utils/i18n.js

@@ -1,5 +1,8 @@
 !(function () {
     var i18nStore = {};
+
+    var i18nFormatters = {};
+
     BI._.extend(BI, {
         changeI18n: function (i18n) {
             if (i18n) {
@@ -9,6 +12,7 @@
         addI18n: function (i18n) {
             BI.extend(i18nStore, i18n);
         },
+
         i18nText: function (key) {
             var localeText = i18nStore[key] || (BI.i18n && BI.i18n[key]) || "";
             if (!localeText) {
@@ -16,10 +20,18 @@
             }
             var len = arguments.length;
             if (len > 1) {
-                if (localeText.indexOf("{R1}") > -1) {
+                if (localeText.indexOf("{R1") > -1) {
                     for (var i = 1; i < len; i++) {
-                        var key = "{R" + i + "}";
+                        var reg = new RegExp(`{R${i},(.*?)}`, "g");
-                        localeText = BI.replaceAll(localeText, key, arguments[i] + "");
+
+                        var result = reg.exec(localeText);
+
+                        if (result) {
+                            var formatName = result[1];
+                            localeText = BI.replaceAll(localeText, reg, i18nFormatters[formatName](key, arguments[i]));
+                        } else {
+                            localeText = BI.replaceAll(localeText, `{R${i}}`, arguments[i] + "");
+                        }
                     }
                 } else {
                     var args = Array.prototype.slice.call(arguments);
@@ -30,6 +42,10 @@
                 }
             }
             return localeText;
+        },
+
+        addI18nFormatter: function (formatName, fn) {
+            i18nFormatters[formatName] = fn;
         }
     });
 })();

src/less/base/single/button/item.singleselect.icontext.less

@@ -1,9 +0,0 @@
-@import "../../../index.less";
-
-.bi-single-select-icon-text-item{
-  &:active, &.active {
-    & .b-font:before {
-      color: @color-bi-text-active-single-select-icon-text-item;
-    }
-  }
-}

src/less/base/single/input/radio.less

@@ -18,13 +18,13 @@
       border-color:  @color-bi-border-hover-active-radio;
       background-color: @color-bi-background-active-radio;
       &:after {
-        width: 6px;
+        width: 8px;
-        height: 6px;
+        height: 8px;
         display: table;
         position: absolute;
         top: 50%;
         left: 50%;
-        .border-radius(3px);
+        .border-radius(4px);
         background-color: @color-bi-background-active-radio-content;
         .transform(translate(-50%, -50%));
         @transition: all .1s cubic-bezier(.71,-.46,.88,.6),opacity .1s;

src/less/base/tree/ztree.less

@@ -50,7 +50,7 @@
   &:before {
     border-left: 1px solid @border-color-dark-gray-line;
     height: 100%;
-    left: 15px;
+    left: 14px;
     margin-top: 0;
   }
 }

src/less/widget/multiselect/multiselect.combo.less

@@ -1,9 +1,12 @@
 @import "../../index.less";
+
 @val: transform .3s ease;
-.bi-multi-select-combo{
+
-  & .multi-select-trigger-icon-button{
+.bi-multi-select-combo, .bi-multi-select-combo-no-bar {
+  & .multi-select-trigger-icon-button {
     font-size: @font-size-16;
   }
+
   // 此combo的trigger_button是absolute上去的，与bi-combo在同一层级，独立写一下
   & .bi-combo.bi-combo-popup + .bi-trigger-icon-button {
     & .x-icon {
@@ -11,6 +14,7 @@
       .transition(@val);
     }
   }
+
   & .bi-combo + .bi-trigger-icon-button {
     & .x-icon {
       .rotate(0deg);

src/widget/downlist/item.downlist.js

@@ -33,17 +33,21 @@ BI.DownListItem = BI.inherit(BI.BasicButton, {
             keyword: o.keyword,
             height: o.height
         });
+
+
+        var icon = BI.isPlainObject(o.icon) ? o.icon : {
+            type: "bi.icon",
+            width: o.iconWidth,
+            height: o.iconHeight,
+        }
+
         this.icon = BI.createWidget({
             type: "bi.center_adapt",
             width: 36,
             height: o.height,
             items: [{
-                el: {
+                el: icon,
-                    type: "bi.icon",
+            }],
-                    width: o.iconWidth,
-                    height: o.iconHeight
-                }
-            }]
         });
 
         BI.createWidget(BI.extend({

src/widget/downlist/item.downlistgroup.js

@@ -8,11 +8,11 @@ BI.DownListGroupItem = BI.inherit(BI.BasicButton, {
             },
             // invalid: true,
             iconCls1: "dot-e-font",
+            icon: "",
             iconCls2: "pull-right-e-font"
         });
     },
-    _init: function () {
+    render: function () {
-        BI.DownListGroupItem.superclass._init.apply(this, arguments);
         var o = this.options;
         var self = this;
         this.text = BI.createWidget({
@@ -21,9 +21,17 @@ BI.DownListGroupItem = BI.inherit(BI.BasicButton, {
             textAlign: "left",
             text: o.text,
             value: o.value,
-            height: o.height
+            height: o.height,
         });
 
+        if (BI.isPlainObject(o.icon)) {
+            this.icon1 = BI.createWidget({
+                width: 36,
+                height: o.height,
+                type: "bi.center_adapt",
+                items: [o.icon],
+            });
+        } else {
             this.icon1 = BI.createWidget({
                 type: "bi.icon_button",
                 cls: o.iconCls1,
@@ -32,8 +40,9 @@ BI.DownListGroupItem = BI.inherit(BI.BasicButton, {
                 iconHeight: o.iconHeight,
                 iconWidth: 36,
                 disableSelected: true,
-            selected: this._digest(o.value)
+                selected: this._digest(o.value),
             });
+        }
 
         this.icon2 = BI.createWidget({
             type: "bi.icon_button",
@@ -42,27 +51,6 @@ BI.DownListGroupItem = BI.inherit(BI.BasicButton, {
             forceNotSelected: true
         });
 
-        var blank = BI.createWidget({
-            type: "bi.layout",
-            width: 24
-        });
-        BI.createWidget({
-            type: "bi.absolute",
-            element: this,
-            items: [{
-                el: this.icon2,
-                top: 0,
-                bottom: 0,
-                right: 0
-            }]
-        });
-
-        BI.createWidget(BI.extend({
-            element: this
-        }, BI.LogicFactory.createLogic("horizontal", BI.extend(o.logic, {
-            items: BI.LogicFactory.createLogicItemsByDirection("left", this.icon1, this.text, blank)
-        }))));
-
         this.element.hover(function () {
             if (self.isEnabled()) {
                 self.hover();
@@ -72,6 +60,12 @@ BI.DownListGroupItem = BI.inherit(BI.BasicButton, {
                 self.dishover();
             }
         });
+
+        return {
+            type: "bi.horizontal_fill",
+            columnSize: [36,  "fill", 24],
+            items: [this.icon1, this.text, this.icon2]
+        }
     },
 
     _getLevel: function () {
@@ -117,8 +111,8 @@ BI.DownListGroupItem = BI.inherit(BI.BasicButton, {
     },
 
     setValue: function (v) {
-        this.icon1.setSelected(this._digest(v));
+        this.icon1.setSelected && this.icon1.setSelected(this._digest(v));
-    }
+    },
 });
 BI.DownListGroupItem.EVENT_CHANGE = "EVENT_CHANGE";
 BI.shortcut("bi.down_list_group_item", BI.DownListGroupItem);

src/widget/multiselect/multiselect.combo.nobar.js

@@ -174,7 +174,7 @@ BI.MultiSelectNoBarCombo = BI.inherit(BI.Single, {
                 value: o.value
             },
             hideChecker: function (e) {
-                return self.numberCounter.element.find(e.target).length === 0;
+                return triggerBtn.element.find(e.target).length === 0 && self.numberCounter.element.find(e.target).length === 0;
             }
         });
 
@@ -199,6 +199,21 @@ BI.MultiSelectNoBarCombo = BI.inherit(BI.Single, {
             }
         });
 
+        var triggerBtn = BI.createWidget({
+            type: "bi.trigger_icon_button",
+            width: o.height,
+            height: o.height,
+            cls: "multi-select-trigger-icon-button"
+        });
+        triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () {
+            self.numberCounter.hideView();
+            if (self.combo.isViewVisible()) {
+                self.combo.hideView();
+            } else {
+                self.combo.showView();
+            }
+        });
+
         this.numberCounter = BI.createWidget({
             type: "bi.multi_select_check_selected_switcher",
             masker: {
@@ -252,6 +267,11 @@ BI.MultiSelectNoBarCombo = BI.inherit(BI.Single, {
                 right: 0,
                 top: 0,
                 bottom: 0
+            }, {
+                el: triggerBtn,
+                right: 0,
+                top: 0,
+                bottom: 0
             }, {
                 el: {
                     type: "bi.vertical_adapt",

src/widget/multiselect/multiselect.loader.js

@@ -45,6 +45,7 @@ BI.MultiSelectLoader = BI.inherit(BI.Widget, {
                 onLoaded: opts.onLoaded,
                 el: {
                     type: "bi.multi_select_inner_loader",
+                    isDefaultInit: false,
                 }
             }, opts.el),
             itemsCreator: function (op, callback) {

typescript/base/single/button/buttons/button.ts

@@ -10,10 +10,16 @@ export declare class Button extends BasicButton {
         minWidth?: number;
         readonly?: boolean;
         iconCls?: string;
-        level?: 'common' | 'success' | 'warning' |'ignore',
+        level?: 'common' | 'success' | 'warning' | 'error' | 'ignore',
         block?: boolean; // 是否块状显示，即不显示边框，没有最小宽度的限制
+        loading?: boolean, // 是否处于加载中
+        light?: boolean, // 是否使用浅色
+        plain?: boolean, // 是否是朴素按钮，和 clear 的区别是 plain 有悬浮效果
         clear?: boolean; // 是否去掉边框和背景
         ghost?: boolean; // 是否幽灵显示, 即正常状态无背景
+        iconGap?: number;
+        iconPosition?: string;
+        textWidth?: number;
     } & AbstractLabel['props'] & IconLabel['props'] & BasicButton['props'];
 
     text: Label;
@@ -26,4 +32,12 @@ export declare class Button extends BasicButton {
     doHighLight(...args: any[]): void;
 
     unHighLight(...args: any[]): void;
+
+    loading(): void;
+
+    loaded(): void;
+
+    setIcon(iconCls: string): void;
+
+    isLoading(): boolean;
 }