")
- .css({
- position: "absolute",
- zIndex: zIndex_tip - 1,
- top: 0,
- left: 0,
- right: 0,
- bottom: 0,
- })
- .appendTo("body");
-
- function close() {
- messageShows[messageShows.length - 1].destroy();
- messageShows.pop();
- if (messageShows.length === 0) {
- $mask.remove();
- $mask = null;
+export const Msg = {
+ alert(title, message, callback, config) {
+ _show(false, title, message, callback, config);
+ },
+ confirm(title, message, callback, config) {
+ _show(true, title, message, callback, config);
+ },
+ toast(message, options, context) {
+ isString(options) && (options = { level: options });
+ options = options || {};
+ context = context || Widget._renderEngine.createElement("body");
+ const level = options.level || "common";
+ const autoClose = isNull(options.autoClose) ? true : options.autoClose;
+ const callback = isFunction(options.callback) ? options.callback : emptyFn;
+ const toast = createWidget({
+ type: "bi.toast",
+ cls: "bi-message-animate bi-message-leave",
+ level,
+ autoClose,
+ closable: options.closable,
+ text: message,
+ listeners: [
+ {
+ eventName: Toast.EVENT_DESTORY,
+ action() {
+ remove(toastStack, toast.element);
+ let _height = SIZE_CONSANTS.TOAST_TOP;
+ each(toastStack, (i, element) => {
+ element.css({ top: _height });
+ _height += element.outerHeight() + 10;
+ });
+ callback();
+ },
+ }
+ ],
+ });
+ let height = SIZE_CONSANTS.TOAST_TOP;
+ each(toastStack, (i, element) => {
+ height += element.outerHeight() + 10;
+ });
+ createWidget({
+ type: "bi.absolute",
+ element: context,
+ items: [
+ {
+ el: toast,
+ left: "50%",
+ top: height,
}
- }
+ ],
+ });
+ toastStack.push(toast.element);
+ toast.element.css({ "margin-left": (-1 * toast.element.outerWidth()) / 2 });
+ toast.element.removeClass("bi-message-leave").addClass("bi-message-enter");
+
+ autoClose &&
+ delay(() => {
+ toast.element.removeClass("bi-message-enter").addClass("bi-message-leave");
+ toast.destroy?.();
+ }, 5000);
+
+ return function() {
+ toast.element.removeClass("bi-message-enter").addClass("bi-message-leave");
+ toast.destroy?.();
+ };
+ },
+};
+
+function _show(hasCancel, title, message, callback, config = {}) {
+ config = {
+ buttonHeight: 28,
+ cancelText: i18nText("BI-Basic_Cancel"),
+ sureText: i18nText("BI-Basic_OK"),
+ level: AlertLevel.WARNING,
+ ...config,
+ }
+ isNull($mask) &&
+ ($mask = Widget._renderEngine
+ .createElement("
")
+ .css({
+ position: "absolute",
+ zIndex: zIndex_tip - 2,
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ opacity: 0.5,
+ })
+ .appendTo("body"));
+ $pop = Widget._renderEngine
+ .createElement("
")
+ .css({
+ position: "absolute",
+ zIndex: zIndex_tip - 1,
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ })
+ .appendTo("body");
- const controlItems = [];
- if (hasCancel === true) {
- controlItems.push({
- el: {
- type: "bi.button",
- height: config.buttonHeight,
- text: i18nText("BI-Basic_Cancel"),
- light: true,
- handler() {
+ function close() {
+ messageShows[messageShows.length - 1].destroy();
+ messageShows.pop();
+ if (messageShows.length === 0) {
+ $mask.remove();
+ $mask = null;
+ }
+ }
+
+ const controlItems = [];
+ if (hasCancel === true) {
+ controlItems.push({
+ el: {
+ type: Button.xtype,
+ height: config.buttonHeight,
+ text: config.cancelText,
+ light: true,
+ handler() {
+ close();
+ if (isFunction(callback)) {
+ callback.apply(null, [false]);
+ }
+ },
+ },
+ });
+ }
+ controlItems.push({
+ el: {
+ type: Button.xtype,
+ height: config.buttonHeight,
+ text: config.sureText,
+ handler() {
+ close();
+ if (isFunction(callback)) {
+ callback.apply(null, [true]);
+ }
+ },
+ },
+ });
+ const conf = {
+ element: $pop,
+ type: CenterAdaptLayout.xtype,
+ items: [
+ {
+ type: VerticalLayout.xtype,
+ cls: "bi-card bi-border-radius",
+ width: 450,
+ hgap: 32,
+ attributes: {
+ tabIndex: 1,
+ },
+ mounted() {
+ this.element.keyup(e => {
+ if (e.keyCode === KeyCode.ENTER) {
close();
if (isFunction(callback)) {
- callback.apply(null, [false]);
+ callback.apply(null, [true]);
+ }
+ } else if (e.keyCode === KeyCode.ESCAPE) {
+ close();
+ if (hasCancel === true) {
+ if (isFunction(callback)) {
+ callback.apply(null, [false]);
+ }
}
- },
- },
- });
- }
- controlItems.push({
- el: {
- type: "bi.button",
- height: config.buttonHeight,
- text: i18nText("BI-Basic_OK"),
- handler() {
- close();
- if (isFunction(callback)) {
- callback.apply(null, [true]);
}
- },
+ });
+ try {
+ this.element.focus();
+ } catch (e) {
+ }
},
- });
- const conf = {
- element: $pop,
- type: "bi.center_adapt",
items: [
{
- type: "bi.border",
- attributes: {
- tabIndex: 1,
- },
- mounted() {
- this.element.keyup(e => {
- if (e.keyCode === KeyCode.ENTER) {
- close();
- if (isFunction(callback)) {
- callback.apply(null, [true]);
- }
- } else if (e.keyCode === KeyCode.ESCAPE) {
- close();
- if (hasCancel === true) {
- if (isFunction(callback)) {
- callback.apply(null, [false]);
- }
- }
- }
- });
- try {
- this.element.focus();
- } catch (e) {
- }
- },
- cls: "bi-card",
- items: {
- north: {
- el: {
- type: "bi.border",
- cls: "bi-message-title bi-background",
- items: {
- center: {
- el: {
- type: "bi.label",
- cls: "bi-font-bold",
- text: title || i18nText("BI-Basic_Prompt"),
- textAlign: "left",
- hgap: 20,
- height: 40,
- },
- },
- east: {
- el: {
- type: "bi.icon_button",
- cls: "bi-message-close close-font",
- // height: 50,
- handler() {
- close();
- if (isFunction(callback)) {
- callback.apply(null, [false]);
- }
- },
- },
- width: 56,
- },
- },
+ el: {
+ type: HTapeLayout.xtype,
+ height: 24,
+ items: [
+ {
+ type: IconLabel.xtype,
+ cls: `${getIconCls(config.level)} icon-size-20`,
+ width: 24,
+ height: 24,
},
- height: 40,
- },
- center: {
- el: isPlainObject(message)
- ? message
- : {
- type: "bi.label",
- vgap: 10,
- hgap: 20,
- whiteSpace: "normal",
- text: message,
+ {
+ el: {
+ type: Label.xtype,
+ css: {"font-size": 16},
+ cls: 'bi-font-bold', // 16px
+ textAlign: 'left',
+ text: title || i18nText('BI-Basic_Prompt'),
+ lgap: 16,
},
- },
- south: {
- el: {
- type: "bi.absolute",
- items: [
- {
- el: {
- type: "bi.right_vertical_adapt",
- lgap: 10,
- items: controlItems,
- },
- top: 0,
- left: 20,
- right: 20,
- bottom: 0,
- }
- ],
+ width: 'fill',
},
- height: 44,
+ ],
+ },
+ tgap: 32,
+ },
+ {
+ el: isPlainObject(message)
+ ? message
+ : {
+ type: Label.xtype,
+ css: { "font-size": 14 },
+ cls: 'alert-content',
+ textAlign: 'left',
+ text: message,
+ whiteSpace: 'normal',
},
+ height: 'fill',
+ tgap: 12,
+ lgap: 40,
+ },
+ {
+ el: config.footer && isFunction(config.footer) ? config.footer(close) : {
+ type: RightVerticalAdaptLayout.xtype,
+ lgap: 12,
+ items: controlItems,
},
- width: 450,
- height: 200,
- }
+ tgap: 32,
+ bgap: 24,
+ },
],
- };
-
- messageShows[messageShows.length] = createWidget(conf);
- },
+ },
+ ],
};
-})();
+
+ messageShows[messageShows.length] = createWidget(conf);
+}
diff --git a/packages/fineui/src/base/layer/layer.popover.js b/packages/fineui/src/base/layer/layer.popover.js
index ea6db3662..d7649c389 100644
--- a/packages/fineui/src/base/layer/layer.popover.js
+++ b/packages/fineui/src/base/layer/layer.popover.js
@@ -47,7 +47,7 @@ export class Popover extends Widget {
body: null,
footer: null,
footerHeight: 44,
- footerButtonHeight: 24,
+ footerButtonHeight: 28,
closable: true, // BI-40839 是否显示右上角的关闭按钮
bodyHgap: SIZE_CONSANTS.H_GAP_SIZE,
bodyTgap: SIZE_CONSANTS.V_GAP_SIZE,
@@ -64,30 +64,7 @@ export class Popover extends Widget {
// var self = this;
const { header, headerHeight, closable, logic, footer, footerHeight, body, bodyTgap, bodyHgap } = this.options;
const c = this._constant;
- this.startX = 0;
- this.startY = 0;
const size = this._calculateSize();
- const bodyDom = getOuterBody();
- this.tracker = new MouseMoveTracker(
- (deltaX, deltaY) => {
- const W = Widget._renderEngine.createElement(bodyDom).width();
- const H = Widget._renderEngine.createElement(bodyDom).height();
- this.startX += deltaX;
- this.startY += deltaY;
- this.element.css({
- left: `${clamp(this.startX, 0, W - this.element.width())}px`,
- top: `${clamp(this.startY, 0, H - this.element.height())}px`,
- });
- // BI-12134 没有什么特别好的方法
- Resizers._resize({
- target: this.element[0],
- });
- },
- () => {
- this.tracker.releaseMouseMoves();
- },
- _global
- );
const items = [
{
el: {
@@ -219,7 +196,30 @@ export class Popover extends Widget {
// mounted之后绑定事件
mounted() {
- this.dragger.element.mousedown(e => {
+ this.startX = 0;
+ this.startY = 0;
+ const bodyDom = getOuterBody();
+ this.tracker = new MouseMoveTracker(
+ (deltaX, deltaY) => {
+ const W = Widget._renderEngine.createElement(bodyDom).width();
+ const H = Widget._renderEngine.createElement(bodyDom).height();
+ this.startX += deltaX;
+ this.startY += deltaY;
+ this.element.css({
+ left: `${clamp(this.startX, 0, W - this.element.width())}px`,
+ top: `${clamp(this.startY, 0, H - this.element.height())}px`,
+ });
+ // BI-12134 没有什么特别好的方法
+ Resizers._resize({
+ target: this.element[0],
+ });
+ },
+ () => {
+ this.tracker.releaseMouseMoves();
+ },
+ _global
+ );
+ this.dragger?.element.mousedown(e => {
if (this.options.draggable !== false) {
this.startX = this.element[0].offsetLeft;
this.startY = this.element[0].offsetTop;
diff --git a/packages/fineui/src/case/button/switch.js b/packages/fineui/src/case/button/switch.js
index 68a5c556a..6cc3b7912 100644
--- a/packages/fineui/src/case/button/switch.js
+++ b/packages/fineui/src/case/button/switch.js
@@ -1,15 +1,13 @@
import { AbsoluteLayout, shortcut, i18nText } from "@/core";
import { TextButton, Label, BasicButton } from "@/base";
+const CIRCLE_SIZE = 12;
+
@shortcut()
export class Switch extends BasicButton {
static xtype = "bi.switch";
static EVENT_CHANGE = "EVENT_CHANGE";
- constants = {
- CIRCLE_SIZE: 12,
- };
-
props = {
extraCls: "bi-switch",
attributes: {
@@ -18,12 +16,12 @@ export class Switch extends BasicButton {
height: 20,
width: 44,
showTip: false,
+ textGap: 8,
};
render() {
- const o = this.options,
- c = this.constants;
- const tgap = (o.height - c.CIRCLE_SIZE) / 2;
+ const { selected, width, height, textGap, showTip } = this.options;
+ const tgap = (height - CIRCLE_SIZE) / 2;
return {
type: AbsoluteLayout.xtype,
@@ -39,15 +37,15 @@ export class Switch extends BasicButton {
width: 12,
height: 12,
top: tgap,
- left: o.selected ? 28 : 4,
+ left: selected ? width - height + tgap : tgap,
},
{
type: Label.xtype,
text: i18nText("BI-Basic_Simple_Open"),
cls: "content-tip",
- left: 8,
+ left: textGap,
top: tgap - 2,
- invisible: !(o.showTip && o.selected),
+ invisible: !(showTip && selected),
ref: _ref => {
this.openTip = _ref;
},
@@ -56,9 +54,9 @@ export class Switch extends BasicButton {
type: Label.xtype,
text: i18nText("BI-Basic_Simple_Close"),
cls: "content-tip",
- right: 8,
+ right: textGap,
top: tgap - 2,
- invisible: !(o.showTip && !o.selected),
+ invisible: !(showTip && !selected),
ref: _ref => {
this.closeTip = _ref;
},
@@ -78,7 +76,9 @@ export class Switch extends BasicButton {
setSelected(v) {
super.setSelected(...arguments);
- this.layout.attr("items")[0].left = v ? 28 : 4;
+ const { width, height } = this.options;
+ const tgap = (height - CIRCLE_SIZE) / 2;
+ this.layout.attr("items")[0].left = v ? width - height + tgap : tgap;
this.layout.resize();
this.options.showTip && this.openTip.setVisible(v);
this.options.showTip && this.closeTip.setVisible(!v);
diff --git a/packages/fineui/src/component/form/form.field.js b/packages/fineui/src/component/form/form.field.js
index 8cc80eae6..3260edc62 100644
--- a/packages/fineui/src/component/form/form.field.js
+++ b/packages/fineui/src/component/form/form.field.js
@@ -69,7 +69,7 @@ export class FormField extends Widget {
return {
type: VerticalAdaptLayout.xtype,
- columnSize: ["auto", "fill"],
+ columnSize: isKey(o.label) ? ["auto", "fill"] : ["fill"],
verticalAlign: VerticalAlign.Stretch,
items: isKey(o.label)
? [
diff --git a/packages/fineui/src/less/lib/colors.less b/packages/fineui/src/less/lib/colors.less
index fd429ac08..810745b94 100644
--- a/packages/fineui/src/less/lib/colors.less
+++ b/packages/fineui/src/less/lib/colors.less
@@ -132,3 +132,5 @@
@color-bi-border-warning: @border-color-warning;
//边框提亮
@color-bi-border-highlight: @border-color-highlight;
+
+@color-bi-alert-warning: @color-bi-orange;
diff --git a/packages/fineui/src/less/lib/constant.less b/packages/fineui/src/less/lib/constant.less
index fa69a4783..eb03e23e8 100644
--- a/packages/fineui/src/less/lib/constant.less
+++ b/packages/fineui/src/less/lib/constant.less
@@ -248,3 +248,5 @@
//box-shadow效果
@box-shadow-toast: 0 6px 20px -2px rgba(9, 30, 64, 0.16);
+
+@color-bi-orange: #f0ac3c;
diff --git a/packages/fineui/src/less/lib/font.less b/packages/fineui/src/less/lib/font.less
index f37ec8615..d8eccc6f7 100644
--- a/packages/fineui/src/less/lib/font.less
+++ b/packages/fineui/src/less/lib/font.less
@@ -58,3 +58,8 @@
@font-key: "e1d0";
@font-add: "e1c7";
+
+@font-alert-warning: 'e755';
+@font-alert-success: 'e6de';
+@font-alert-info: 'e74b';
+@font-alert-error: 'e757';
diff --git a/packages/fineui/src/less/resource/font.less b/packages/fineui/src/less/resource/font.less
index d65940802..93330a958 100644
--- a/packages/fineui/src/less/resource/font.less
+++ b/packages/fineui/src/less/resource/font.less
@@ -118,3 +118,8 @@
.font(text-align-left-font, @font-align-left);
.font(text-align-center-font, @font-align-center);
.font(text-align-right-font, @font-align-right);
+
+.font(alert-success-font, @font-alert-success, @color-sea-green-100);
+.font(alert-warning-font, @font-alert-warning, @color-bi-alert-warning);
+.font(alert-error-font, @font-alert-error, @color-red-100);
+.font(alert-info-font, @font-alert-info, @color-bi-text-highlight);
diff --git a/packages/fineui/src/widget/multiselect/multiselect.loader.js b/packages/fineui/src/widget/multiselect/multiselect.loader.js
index ab234b3f9..b7b397627 100644
--- a/packages/fineui/src/widget/multiselect/multiselect.loader.js
+++ b/packages/fineui/src/widget/multiselect/multiselect.loader.js
@@ -107,7 +107,10 @@ export class MultiSelectLoader extends Widget {
}
firstItems = self._createItems(json);
}
- callback(firstItems.concat(self._createItems(ob.items)), ob.keyword || "");
+ const context = {
+ tipText: ob.tipText,
+ };
+ callback(firstItems.concat(self._createItems(ob.items)), ob.keyword || "", context);
if (op.times === 1 && self.storeValue) {
isKey(startValue) &&
(self.storeValue.type === Selection.All
diff --git a/packages/fineui/src/widget/multiselect/multiselect.loader.nobar.js b/packages/fineui/src/widget/multiselect/multiselect.loader.nobar.js
index 825a7f6ac..802c3b3ba 100644
--- a/packages/fineui/src/widget/multiselect/multiselect.loader.nobar.js
+++ b/packages/fineui/src/widget/multiselect/multiselect.loader.nobar.js
@@ -115,7 +115,10 @@ export class MultiSelectNoBarLoader extends Widget {
}
firstItems = self._createItems(json);
}
- callback(firstItems.concat(self._createItems(ob.items)), ob.keyword || "");
+ const context = {
+ tipText: ob.tipText,
+ };
+ callback(firstItems.concat(self._createItems(ob.items)), ob.keyword || "", context);
if (op.times === 1 && self.storeValue) {
isKey(startValue) &&
(self.storeValue.type === Selection.All
diff --git a/packages/fineui/src/widget/searchmultitextvaluecombo/multitextvalue.loader.search.js b/packages/fineui/src/widget/searchmultitextvaluecombo/multitextvalue.loader.search.js
index 965208bac..abdcc7398 100644
--- a/packages/fineui/src/widget/searchmultitextvaluecombo/multitextvalue.loader.search.js
+++ b/packages/fineui/src/widget/searchmultitextvaluecombo/multitextvalue.loader.search.js
@@ -120,8 +120,10 @@ export class SearchMultiSelectLoader extends Widget {
}
firstItems = this._createItems(json);
}
-
- callback(firstItems.concat(this._createItems(ob.items)), ob.keyword || "");
+ const context = {
+ tipText: ob.tipText,
+ };
+ callback(firstItems.concat(this._createItems(ob.items)), ob.keyword || "", context);
if (op.times === 1 && this.storeValue) {
isKey(startValue) &&
(this.storeValue.type === Selection.All
diff --git a/packages/fineui/typescript/base/foundation/message.ts b/packages/fineui/typescript/base/foundation/message.ts
index 2094d7fea..68a0c53c7 100644
--- a/packages/fineui/typescript/base/foundation/message.ts
+++ b/packages/fineui/typescript/base/foundation/message.ts
@@ -8,13 +8,23 @@ type toastOptions = {
export declare namespace Msg {
function alert(title: string, message?: string | {
[key: string]: any
- }, callback?: (result?: boolean) => void): void
+ }, callback?: (result?: boolean) => void, config?: {
+ buttonHeight?: number,
+ sureText?: string,
+ cancelText?: string,
+ level?: 'success' | 'warning' | 'error' | 'info',
+ footer?: (onClose: Function) => Obj;
+ }): void
function confirm(title: string, message?: string | {
[key: string]: any
- }, callback?: (result: boolean) => void): void
-
- function prompt(title: string, message?: string, value?: any, callback?: (result: string) => void, minWidth?: number): void
+ }, callback?: (result: boolean) => void, config?: {
+ buttonHeight?: number,
+ sureText?: string,
+ cancelText?: string,
+ level?: 'success' | 'warning' | 'error' | 'info',
+ footer?: (onClose: Function) => Obj;
+ }): void
function toast(message: string | Obj, options?: toastOptions | string, context?: HTMLElement): Function
}
diff --git a/packages/fineui/typescript/case/button/switch.ts b/packages/fineui/typescript/case/button/switch.ts
index dc4489892..2b08b4b98 100644
--- a/packages/fineui/typescript/case/button/switch.ts
+++ b/packages/fineui/typescript/case/button/switch.ts
@@ -1,6 +1,11 @@
import { BasicButton } from "../../base/single/button/button.basic";
export declare class Switch extends BasicButton {
+
+ props: {
+ textGap: number;
+ } & BasicButton['props']
+
static xtype: string;
static EVENT_CHANGE: string;
}