Browse Source

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

es6
zsmj 2 years ago
parent
commit
98f86e6709
  1. 31
      demo/js/base/button/demo.button.js
  2. 2
      package.json
  3. 347
      src/base/single/button/buttons/button.js
  4. 5
      src/base/single/tip/tip.toast.js
  5. 12
      src/case/combo/bubblecombo/popup.bubble.js

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

@ -213,6 +213,35 @@ Demo.Button = BI.inherit(BI.Widget, {
}, },
height: 30 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) { // BI.each(items, function (i, item) {
// item.el.handler = function () { // item.el.handler = function () {
@ -228,4 +257,4 @@ Demo.Button = BI.inherit(BI.Widget, {
}; };
} }
}); });
BI.shortcut("demo.button", Demo.Button); BI.shortcut("demo.button", Demo.Button);

2
package.json

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

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

@ -1,169 +1,208 @@
/** (function () {
* 文字类型的按钮 function isVertical(position) {
* @class BI.Button return position === "top" || position === "bottom";
* @extends BI.BasicButton }
*
* @cfg {JSON} options 配置属性 /**
* @cfg {'common'/'success'/'warning'/'ignore'} [options.level='common'] 按钮类型用不同颜色强调不同的场景 * 文字类型的按钮
*/ * @class BI.Button
BI.Button = BI.inherit(BI.BasicButton, { * @extends BI.BasicButton
*
* @cfg {JSON} options 配置属性
* @cfg {'common'/'success'/'warning'/'ignore'} [options.level='common'] 按钮类型用不同颜色强调不同的场景
*/
BI.Button = BI.inherit(BI.BasicButton, {
_const: { _const: {
iconWidth: 18 iconWidth: 16
}, },
_defaultConfig: function (props) { _defaultConfig: function (props) {
var conf = BI.Button.superclass._defaultConfig.apply(this, arguments); var conf = BI.Button.superclass._defaultConfig.apply(this, arguments);
return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""), return BI.extend(conf, {
attributes: { baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""),
tabIndex: 1 attributes: {
}, tabIndex: 1
minWidth: (props.block === true || props.clear === true) ? 0 : 80, },
height: 24, minWidth: (props.block === true || props.clear === true) ? 0 : 80,
shadow: props.clear !== true, // 44 = 垂直间距 6 + 边框 2 + 图标 16 + 图标和文字间隔 8 + 文字 12
isShadowShowingOnSelected: true, height: isVertical(props.iconPosition) ? 44 + ((props.iconGap || 8) - 8) : 24,
readonly: true, shadow: props.clear !== true,
iconCls: "", isShadowShowingOnSelected: true,
level: "common", readonly: true,
block: false, // 是否块状显示,即不显示边框,没有最小宽度的限制 iconCls: "",
clear: false, // 是否去掉边框和背景 level: "common",
ghost: false, // 是否幽灵显示, 即正常状态无背景 block: false, // 是否块状显示,即不显示边框,没有最小宽度的限制
textAlign: "center", clear: false, // 是否去掉边框和背景
whiteSpace: "nowrap", ghost: false, // 是否幽灵显示, 即正常状态无背景
textWidth: null, loading: false, // 是否处于加载中
textHeight: null, textAlign: "center",
hgap: props.clear ? 0 : 10, whiteSpace: "nowrap",
vgap: 0, textWidth: null,
tgap: 0, textHeight: null,
bgap: 0, hgap: props.clear ? 0 : 10,
lgap: 0, vgap: 0,
rgap: 0 tgap: 0,
}); bgap: 0,
}, lgap: 0,
rgap: 0,
iconGap: 8,
iconPosition: "left"
});
},
render: function () { render: function () {
var o = this.options, self = this; var o = this.options;
// 由于button默认情况下有个边框,所以要主动算行高 // 由于button默认情况下有个边框,所以要主动算行高
var lineHeight, textHeight = o.textHeight; var lineHeight, textHeight = o.textHeight;
if (BI.isNumber(o.height)) { if (BI.isNumber(o.height)) {
if (o.clear || o.block) { if (!isVertical(o.iconPosition)) {
lineHeight = o.height; if (o.clear || o.block) {
lineHeight = o.height;
} else {
lineHeight = o.height - 2;
}
} else {
lineHeight = textHeight;
}
}
if (!textHeight) {
if (o.whiteSpace === "nowrap") {
textHeight = lineHeight;
}
}
if (BI.isKey(o.iconCls)) {
this.icon = BI.createWidget({
type: "bi.icon_label",
cls: o.iconCls,
width: this._const.iconWidth,
height: lineHeight,
lineHeight: lineHeight
});
this.text = BI.createWidget({
type: "bi.label",
text: o.text,
textWidth: BI.isNotNull(o.textWidth) ? o.textWidth - this._const.iconWidth : null,
textHeight: textHeight,
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: layoutType,
horizontalAlign: "center",
verticalAlign: "middle",
items: items
}]
});
} else { } else {
lineHeight = o.height - 2; this.text = BI.createWidget({
type: "bi.label",
height: o.height,
textAlign: o.textAlign,
whiteSpace: o.whiteSpace,
textWidth: o.textWidth,
textHeight: textHeight,
hgap: o.hgap,
vgap: o.vgap,
tgap: o.tgap,
bgap: o.bgap,
lgap: o.lgap,
rgap: o.rgap,
element: this,
text: o.text,
value: o.value
});
} }
} if (o.block === true) {
if (!textHeight) { this.element.addClass("block");
if (o.whiteSpace === "nowrap") {
textHeight = lineHeight;
} }
} if (o.clear === true) {
if (BI.isKey(o.iconCls)) { this.element.addClass("clear");
this.icon = BI.createWidget({ }
type: "bi.icon_label", if (o.ghost === true) {
cls: o.iconCls, this.element.addClass("ghost");
width: this._const.iconWidth, }
height: lineHeight, if (o.loading === true) {
lineHeight: lineHeight, this.element.addClass("loading");
iconWidth: o.iconWidth, }
iconHeight: o.iconHeight if (o.minWidth > 0) {
}); this.element.css({"min-width": o.minWidth / BI.pixRatio + BI.pixUnit});
this.text = BI.createWidget({ }
type: "bi.label", },
text: o.text,
textWidth: BI.isNotNull(o.textWidth) ? o.textWidth - this._const.iconWidth : null,
textHeight: textHeight,
height: lineHeight,
value: o.value
});
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]
}]
});
} else {
this.text = BI.createWidget({
type: "bi.label",
height: o.height,
textAlign: o.textAlign,
whiteSpace: o.whiteSpace,
textWidth: o.textWidth,
textHeight: textHeight,
hgap: o.hgap,
vgap: o.vgap,
tgap: o.tgap,
bgap: o.bgap,
lgap: o.lgap,
rgap: o.rgap,
element: this,
text: o.text,
value: o.value
});
}
if (o.block === true) {
this.element.addClass("block");
}
if (o.clear === true) {
this.element.addClass("clear");
}
if (o.ghost === true) {
this.element.addClass("ghost");
}
if (o.minWidth > 0) {
this.element.css({"min-width": o.minWidth / BI.pixRatio + BI.pixUnit});
}
},
doClick: function () { doClick: function () {
BI.Button.superclass.doClick.apply(this, arguments); BI.Button.superclass.doClick.apply(this, arguments);
if (this.isValid()) { if (this.isValid()) {
this.fireEvent(BI.Button.EVENT_CHANGE, this); this.fireEvent(BI.Button.EVENT_CHANGE, this);
} }
}, },
_setEnable: function (enable) { _setEnable: function (enable) {
BI.Button.superclass._setEnable.apply(this, arguments); BI.Button.superclass._setEnable.apply(this, arguments);
if (enable === true) { if (enable === true) {
this.element.attr("tabIndex", 1); this.element.attr("tabIndex", 1);
} else if (enable === false) { } else if (enable === false) {
this.element.removeAttr("tabIndex"); this.element.removeAttr("tabIndex");
} }
}, },
setText: function (text) { setLoading: function (loading) {
BI.Button.superclass.setText.apply(this, arguments); if(loading) {
this.text.setText(text); this.element.addClass("loading");
}, } else {
this.element.removeClass("loading");
}
},
setValue: function (text) { setText: function (text) {
BI.Button.superclass.setValue.apply(this, arguments); BI.Button.superclass.setText.apply(this, arguments);
if (!this.isReadOnly()) { this.text.setText(text);
this.text.setValue(text); },
}
},
doRedMark: function () { setValue: function (text) {
this.text.doRedMark.apply(this.text, arguments); BI.Button.superclass.setValue.apply(this, arguments);
}, if (!this.isReadOnly()) {
this.text.setValue(text);
}
},
unRedMark: function () { doRedMark: function () {
this.text.unRedMark.apply(this.text, arguments); this.text.doRedMark.apply(this.text, arguments);
}, },
doHighLight: function () { unRedMark: function () {
this.text.doHighLight.apply(this.text, arguments); this.text.unRedMark.apply(this.text, arguments);
}, },
unHighLight: function () { doHighLight: function () {
this.text.unHighLight.apply(this.text, arguments); this.text.doHighLight.apply(this.text, arguments);
} },
});
BI.shortcut("bi.button", BI.Button); unHighLight: function () {
BI.Button.EVENT_CHANGE = "EVENT_CHANGE"; this.text.unHighLight.apply(this.text, arguments);
}
});
BI.shortcut("bi.button", BI.Button);
BI.Button.EVENT_CHANGE = "EVENT_CHANGE";
}());

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

@ -20,7 +20,8 @@ BI.Toast = BI.inherit(BI.Tip, {
text: "", text: "",
level: "success", // success或warning level: "success", // success或warning
autoClose: true, autoClose: true,
closable: null closable: null,
vgap: 7,
}); });
}, },
@ -102,7 +103,7 @@ BI.Toast = BI.inherit(BI.Tip, {
horizontalAlign: BI.HorizontalAlign.Stretch, horizontalAlign: BI.HorizontalAlign.Stretch,
element: this, element: this,
items: items, items: items,
vgap: 12, vgap: o.vgap,
columnSize: columnSize columnSize: columnSize
}); });
}, },

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

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

Loading…
Cancel
Save