Merge branch 'master' of https://code.fineres.com/scm/visual/fineui

bi.lessconfig.json

@@ -10,10 +10,9 @@
   "@border-color-dark-line": "#2E3A4D",
   "@color-sliver-theme-dark": "#363E55",
   "@border-color-disabled": "#E7E8EB",
-
   "@color-bi-background-active-radio": "transparent",
   "@color-bi-background-active-radio-content": "#2C60DB",
-  "@color-bi-background-disabled-active-radio-content": "#D0D4DA",
+  "@color-bi-background-disabled-active-radio-content": "#FFFFFF",
   "@color-bi-background-disabled-active-radio-content-theme-dark": "#606479",
   "@color-bi-background-disabled-active-checkbox-content": "#FFFFFF",
   "@color-bi-background-disabled-active-checkbox-content-theme-dark": "#606479",

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

@@ -213,6 +213,35 @@ Demo.Button = BI.inherit(BI.Widget, {
                 },
                 height: 30
             }
+        }, {
+            el: {
+                type: "bi.button",
+                text: "图标在上面的按钮，而且可以自动撑开高度",
+                iconCls: "close-font",
+                iconGap: 24,
+                iconPosition: "top"
+            }
+        }, {
+            el: {
+                type: "bi.button",
+                text: "图标在下面的按钮",
+                iconCls: "close-font",
+                iconPosition: "bottom"
+            }
+        }, {
+            el: {
+                type: "bi.button",
+                text: "图标在左边的按钮",
+                iconCls: "close-font",
+                iconPosition: "left"
+            }
+        }, {
+            el: {
+                type: "bi.button",
+                text: "图标在右边的按钮",
+                iconCls: "close-font",
+                iconPosition: "right"
+            }
         }];
         // BI.each(items, function (i, item) {
         //     item.el.handler = function () {

package.json

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

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

@@ -1,4 +1,9 @@
-/**
+(function () {
+    function isVertical(position) {
+        return position === "top" || position === "bottom";
+    }
+
+    /**
      * 文字类型的按钮
      * @class BI.Button
      * @extends BI.BasicButton
@@ -6,21 +11,23 @@
      * @cfg {JSON} options 配置属性
      * @cfg {'common'/'success'/'warning'/'ignore'} [options.level='common'] 按钮类型，用不同颜色强调不同的场景
      */
-BI.Button = BI.inherit(BI.BasicButton, {
+    BI.Button = BI.inherit(BI.BasicButton, {
 
         _const: {
-        iconWidth: 18
+            iconWidth: 16
         },
 
         _defaultConfig: function (props) {
             var conf = BI.Button.superclass._defaultConfig.apply(this, arguments);
+
             return BI.extend(conf, {
                 baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""),
                 attributes: {
                     tabIndex: 1
                 },
                 minWidth: (props.block === true || props.clear === true) ? 0 : 80,
-            height: 24,
+                // 44 = 垂直间距 6 + 边框 2 + 图标 16 + 图标和文字间隔 8 + 文字 12
+                height: isVertical(props.iconPosition) ? 44 + ((props.iconGap || 8) - 8) : 24,
                 shadow: props.clear !== true,
                 isShadowShowingOnSelected: true,
                 readonly: true,
@@ -29,6 +36,7 @@ BI.Button = BI.inherit(BI.BasicButton, {
                 block: false, // 是否块状显示，即不显示边框，没有最小宽度的限制
                 clear: false, // 是否去掉边框和背景
                 ghost: false, // 是否幽灵显示, 即正常状态无背景
+                loading: false, // 是否处于加载中
                 textAlign: "center",
                 whiteSpace: "nowrap",
                 textWidth: null,
@@ -38,21 +46,27 @@ BI.Button = BI.inherit(BI.BasicButton, {
                 tgap: 0,
                 bgap: 0,
                 lgap: 0,
-            rgap: 0
+                rgap: 0,
+                iconGap: 8,
+                iconPosition: "left"
             });
         },
 
         render: function () {
-        var o = this.options, self = this;
+            var o = this.options;
 
             // 由于button默认情况下有个边框，所以要主动算行高
             var lineHeight, textHeight = o.textHeight;
             if (BI.isNumber(o.height)) {
+                if (!isVertical(o.iconPosition)) {
                     if (o.clear || o.block) {
                         lineHeight = o.height;
                     } else {
                         lineHeight = o.height - 2;
                     }
+                } else {
+                    lineHeight = textHeight;
+                }
             }
             if (!textHeight) {
                 if (o.whiteSpace === "nowrap") {
@@ -65,9 +79,7 @@ BI.Button = BI.inherit(BI.BasicButton, {
                     cls: o.iconCls,
                     width: this._const.iconWidth,
                     height: lineHeight,
-                lineHeight: lineHeight,
-                iconWidth: o.iconWidth,
-                iconHeight: o.iconHeight
+                    lineHeight: lineHeight
                 });
                 this.text = BI.createWidget({
                     type: "bi.label",
@@ -77,15 +89,30 @@ BI.Button = BI.inherit(BI.BasicButton, {
                     height: lineHeight,
                     value: o.value
                 });
+                var layoutType = "bi.horizontal";
+                var gapContainer = {
+                    lgap: o.iconPosition === "left" && o.text ? o.iconGap : 0,
+                    rgap: o.iconPosition === "right" ? o.iconGap : 0,
+                    tgap: o.iconPosition === "top" ? o.iconGap : 0,
+                    bgap: o.iconPosition === "bottom" ? o.iconGap : 0
+                };
+                var items = [this.icon, BI.extend({el: this.text}, gapContainer)];
+                if (isVertical(o.iconPosition)) {
+                    layoutType = "bi.vertical";
+                }
+                if (o.iconPosition === "right" || o.iconPosition === "bottom") {
+                    items = [BI.extend({el: this.text}, gapContainer), this.icon];
+                }
                 BI.createWidget({
                     type: "bi.center_adapt",
                     element: this,
                     hgap: o.hgap,
                     vgap: o.vgap,
                     items: [{
-                    type: "bi.horizontal",
-                    columnSize: ["", "fill"],
-                    items: [this.icon, this.text]
+                        type: layoutType,
+                        horizontalAlign: "center",
+                        verticalAlign: "middle",
+                        items: items
                     }]
                 });
             } else {
@@ -116,6 +143,9 @@ BI.Button = BI.inherit(BI.BasicButton, {
             if (o.ghost === true) {
                 this.element.addClass("ghost");
             }
+            if (o.loading === true) {
+                this.element.addClass("loading");
+            }
             if (o.minWidth > 0) {
                 this.element.css({"min-width": o.minWidth / BI.pixRatio + BI.pixUnit});
             }
@@ -137,6 +167,14 @@ BI.Button = BI.inherit(BI.BasicButton, {
             }
         },
 
+        setLoading: function (loading) {
+            if(loading) {
+              this.element.addClass("loading");
+            } else {
+              this.element.removeClass("loading");
+            }
+        },
+
         setText: function (text) {
             BI.Button.superclass.setText.apply(this, arguments);
             this.text.setText(text);
@@ -164,6 +202,7 @@ BI.Button = BI.inherit(BI.BasicButton, {
         unHighLight: function () {
             this.text.unHighLight.apply(this.text, arguments);
         }
-});
-BI.shortcut("bi.button", BI.Button);
-BI.Button.EVENT_CHANGE = "EVENT_CHANGE";
+    });
+    BI.shortcut("bi.button", BI.Button);
+    BI.Button.EVENT_CHANGE = "EVENT_CHANGE";
+}());

src/base/single/editor/editor.multifile.js

@@ -31,7 +31,8 @@ BI.MultifileEditor = BI.inherit(BI.Widget, {
             accept: o.accept,
             maxSize: o.maxSize,
             maxLength: o.maxLength,
-            title: o.title
+            title: o.title,
+            errorText: o.errorText,
         });
         this.file.on(BI.File.EVENT_CHANGE, function () {
             self.fireEvent(BI.MultifileEditor.EVENT_CHANGE, arguments);

src/base/single/input/file.js

@@ -445,8 +445,9 @@
                 url: "",
                 multiple: true,
                 accept: "", //  .png,.pdf,image/jpg,image/*  等
-                maxSize: -1, // 1024 * 1024
-                maxLength: -1 // 无限制, 与multiple配合使用
+                maxSize: -1, // 1024 * 1024 单位b
+                maxLength: -1, // 无限制, 与multiple配合使用
+                errorText: BI.emptyFn,
             });
         },
 
@@ -472,12 +473,10 @@
             // handlers
 
             _wrap.onloadstart = function (rpe, xhr) {
-                // BI.Msg.toast("loadstart");
                 self.fireEvent(BI.File.EVENT_UPLOADSTART, arguments);
             };
 
             _wrap.onprogress = function (rpe, xhr) {
-                // BI.Msg.toast("onprogress");
                 // percent for each bar
 
                 // fileSize is -1 only if browser does not support file info access
@@ -561,21 +560,26 @@
                         var validateFileType = fileTypeValidate(value, wrap.fileType);
                         if (!validateFileType) {
                             // 文件类型不支持
-                            BI.Msg.toast(BI.i18nText("BI-Upload_File_Type_Error"), { level: "error" });
+                            BI.Msg.toast(o.errorText({
+                                errorType: 0,
+                                file: item
+                            }) || BI.i18nText("BI-Upload_File_Type_Error", wrap.fileType), { level: "error" });
                             self.fireEvent(BI.File.EVENT_ERROR, {
                                 errorType: 0,
                                 file: item
                             });
                         } else if (wrap.maxSize !== -1 && size && wrap.maxSize < size) {
                             // 文件大小不支持
-                            BI.Msg.toast(BI.i18nText("BI-Upload_File_Size_Error"), { level: "error" });
+                            BI.Msg.toast(o.errorText({
+                                errorType: 1,
+                                file: item
+                            }) || BI.i18nText("BI-Upload_File_Size_Error", Math.ceil(wrap.maxSize / 1024 / 1024)), { level: "error" });
                             self.fireEvent(BI.File.EVENT_ERROR, {
                                 errorType: 1,
                                 file: item
                             });
                         } else {
                             wrap.files.unshift(item);
-                            // BI.Msg.toast(value);
                         }
                     }
                 }

src/base/single/tip/tip.toast.js

@@ -20,7 +20,8 @@ BI.Toast = BI.inherit(BI.Tip, {
             text: "",
             level: "success", // success或warning
             autoClose: true,
-            closable: null
+            closable: null,
+            vgap: 7,
         });
     },
 
@@ -56,6 +57,9 @@ BI.Toast = BI.inherit(BI.Tip, {
             case "warning":
                 cls = "toast-warning-font";
                 break;
+            case "loading":
+                cls = "toast-loading-font anim-rotate";
+                break;
             case "normal":
             default:
                 cls = "toast-message-font";
@@ -99,7 +103,7 @@ BI.Toast = BI.inherit(BI.Tip, {
             horizontalAlign: BI.HorizontalAlign.Stretch,
             element: this,
             items: items,
-            vgap: 12,
+            vgap: o.vgap,
             columnSize: columnSize
         });
     },

src/case/combo/bubblecombo/popup.bubble.js

@@ -48,8 +48,8 @@ BI.BubblePopupBarView = BI.inherit(BI.BubblePopupView, {
             if (BI.isWidget(buttonOpt)) {
                 items.push({
                     el: buttonOpt,
-                    lgap: i === 0 ? 20 : 15,
-                    rgap: i === o.buttons.length - 1 ? 20 : 0
+                    lgap: i === 0 ? 15 : 10,
+                    rgap: i === o.buttons.length - 1 ? 15 : 0
                 });
             } else {
                 items.push({
@@ -60,14 +60,14 @@ BI.BubblePopupBarView = BI.inherit(BI.BubblePopupView, {
                             self.fireEvent(BI.BubblePopupBarView.EVENT_CLICK_TOOLBAR_BUTTON, v);
                         }
                     }, buttonOpt),
-                    lgap: i === 0 ? 20 : 15,
-                    rgap: i === o.buttons.length - 1 ? 20 : 0
+                    lgap: i === 0 ? 15 : 10,
+                    rgap: i === o.buttons.length - 1 ? 15 : 0
                 });
             }
         });
         return BI.createWidget({
             type: "bi.right_vertical_adapt",
-            height: 54,
+            height: 44,
             items: items
         });
     },
@@ -90,7 +90,7 @@ BI.BubblePopupBarView = BI.inherit(BI.BubblePopupView, {
             }]
         });
 
-        button.element.css("min-height", o.minHeight - 54);
+        button.element.css("min-height", o.minHeight - 44);
 
         return button;
     }

src/less/base/single/tip/tip.toast.less

@@ -1,22 +1,27 @@
 @import "../../../index.less";
 
-.bi-toast{
+.bi-toast {
   color: @color-bi-color-toast-text;
   line-height: @font-size-16;
   .border-radius(2px);
-  &.toast-success{
+
+  &.toast-success {
     background: @color-bi-background-toast-success;
   }
-  &.toast-warning{
+
+  &.toast-warning {
     background: @color-bi-background-toast-warning;
   }
-  &.toast-error{
+
+  &.toast-error {
     background: @color-bi-background-toast-error;
   }
-  &.toast-normal, &.toast-common{
+
+  &.toast-normal, &.toast-common, &.toast-loading {
     background: @color-bi-background-toast-normal;
   }
-  & .toast-icon{
+
+  & .toast-icon {
     font-size: @font-size-16;
   }
 }

src/less/lib/font.less

@@ -51,6 +51,7 @@
 @font-tip-success: "e1db";
 @font-tip-warning: "e1d7";
 @font-tip-message: "e1d9";
+@font-tip-loading: "e7cd";
 
 @font-key: "e1d0";
 

src/less/resource/font.less

@@ -86,6 +86,7 @@
 .font(toast-success-font, @font-tip-success, @color-bi-color-toast-success);
 .font(toast-warning-font, @font-tip-warning, @color-bi-color-toast-warning);
 .font(toast-message-font, @font-tip-message, @color-bi-color-toast-normal);
+.font(toast-loading-font, @font-tip-loading, @color-bi-color-toast-normal);
 
 //数值区间
 .font(less-font, @font-less);

typescript/base/foundation/message.ts

@@ -1,6 +1,13 @@
+type toastOptions = {
+    level: "success" | "warning" | "error" | "normal" | "loading"
+    autoClose?: boolean
+    callback?: Function
+    closable?: boolean
+}
+
 export type _msg = {
-  alert: (title: string, message?: string | {[key: string]: any}, callback?: (result?: boolean)=>void) => void
-  confirm: (title: string, message?: string | {[key: string]: any}, callback?: (result: boolean)=>void) => void
+    alert: (title: string, message?: string | { [key: string]: any }, callback?: (result?: boolean) => void) => void
+    confirm: (title: string, message?: string | { [key: string]: any }, callback?: (result: boolean) => void) => void
     prompt: (title: string, message?: string, value?: any, callback?: (result: string) => void, minWidth?: number) => void
-  toast: (message: string, options?: object | string, context?: HTMLElement) => void
+    toast: (message: string | Obj, options?: toastOptions | string, context?: HTMLElement) => void
 }