Browse Source

Merge pull request #81933 in DEC/fineui from master to feature/x

* commit '49669e51978f60923088edeea78d0414b5fcbe4f':
  auto upgrade version to 2.0.20220623154535
  DESIGN-4237 feat: 复选树支持添加自定义图标
  REPORT-74080 fix: 修复自定义图标无法居中,调整了撑开的公式
  KERNEL-11626 refactor组件宽高自适应的一些布局调整
  KERNEL-11626 refactor组件宽高自适应的一些布局调整
es6
superman 2 years ago
parent
commit
cf7db9eed2
  1. 11
      demo/js/base/button/demo.button.js
  2. 73
      demo/js/base/tree/demo.sync_tree.js
  3. 2
      package.json
  4. 24
      src/base/single/button/buttons/button.js
  5. 4
      src/case/ztree/0.treeview.js
  6. 14
      src/case/ztree/1.asynctree.js
  7. 1173
      src/case/ztree/jquery.ztree.core-3.5.js
  8. 12
      src/less/base/tree/ztree.less
  9. 12
      src/widget/editor/editor.text.js

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

@ -256,6 +256,17 @@ Demo.Button = BI.inherit(BI.Widget, {
iconGap: 24, iconGap: 24,
iconPosition: "top" iconPosition: "top"
} }
},{
el: {
type: "bi.button",
text: "自动撑开高度",
iconCls: "close-font",
textHeight: 32,
iconGap: 24,
vgap: 16,
hgap: 100,
iconPosition: "top"
}
}, { }, {
el: { el: {
type: "bi.button", type: "bi.button",

73
demo/js/base/tree/demo.sync_tree.js

@ -4,7 +4,10 @@ Demo.Func = BI.inherit(BI.Widget, {
}, },
mounted: function () { mounted: function () {
this.syncTree.stroke({ this.syncTree1.stroke({
keyword: "1"
});
this.syncTree2.stroke({
keyword: "1" keyword: "1"
}); });
}, },
@ -13,38 +16,90 @@ Demo.Func = BI.inherit(BI.Widget, {
var self = this; var self = this;
return { return {
type: "bi.vtape", type: "bi.vtape",
items: [{ rowSize: [0.5, 0.5],
items: [
{
type: "bi.vtape",
items: [
{
type: "bi.label", type: "bi.label",
height: 50, height: 50,
text: "可以异步获取数据的树" text: "可以异步获取数据的树"
}, { }, {
type: "bi.async_tree", type: "bi.async_tree",
ref: function (_ref) { ref: function (_ref) {
self.syncTree = _ref; self.syncTree1 = _ref;
},
paras: {
selectedValues: { "1": {}, "2": { "1": {} } }
},
itemsCreator: function (op, callback) {
callback({
items: [{
id: (op.id || "") + "1",
pId: op.id,
text: (op.id || "") + "1",
isParent: true,
iconCls: "close-h-font"
}, {
id: (op.id || "") + "2",
pId: op.id,
text: (op.id || "") + "2",
iconCls: "search-font"
}, {
id: (op.id || "") + "3",
pId: op.id,
text: (op.id || "") + "3",
iconCls: "date-font"
}],
hasNext: BI.isNull(op.id)
});
}
},
]
},
{
type: "bi.vtape",
items: [
{
type: "bi.label",
height: 50,
text: "showIcon属性搭配节点iconCls,可以显示图标"
}, {
type: "bi.async_tree",
ref: function (_ref) {
self.syncTree2 = _ref;
}, },
paras: { paras: {
selectedValues: {"1": {}, "2": {"1": {}}} selectedValues: { "1": {}, "2": { "1": {} } }
}, },
showIcon: true,
itemsCreator: function (op, callback) { itemsCreator: function (op, callback) {
callback({ callback({
items: [{ items: [{
id: (op.id || "") + "1", id: (op.id || "") + "1",
pId: op.id, pId: op.id,
text: 1, text: (op.id || "") + "1",
isParent: true isParent: true,
iconCls: "close-h-font"
}, { }, {
id: (op.id || "") + "2", id: (op.id || "") + "2",
pId: op.id, pId: op.id,
text: 2 text: (op.id || "") + "2",
iconCls: "search-font"
}, { }, {
id: (op.id || "") + "3", id: (op.id || "") + "3",
pId: op.id, pId: op.id,
text: 3 text: (op.id || "") + "3",
iconCls: "date-font"
}], }],
hasNext: BI.isNull(op.id) hasNext: BI.isNull(op.id)
}); });
} }
}] },
]
}
]
}; };
} }

2
package.json

@ -1,6 +1,6 @@
{ {
"name": "fineui", "name": "fineui",
"version": "2.0.20220622110506", "version": "2.0.20220623154535",
"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",

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

@ -14,20 +14,29 @@
BI.Button = BI.inherit(BI.BasicButton, { BI.Button = BI.inherit(BI.BasicButton, {
_const: { _const: {
iconWidth: 16 iconWidth: 18
}, },
_defaultConfig: function (props) { _defaultConfig: function (props) {
var conf = BI.Button.superclass._defaultConfig.apply(this, arguments); var conf = BI.Button.superclass._defaultConfig.apply(this, arguments);
var adaptiveHeight = 0;
if (isVertical(props.iconPosition)) {
// 图标高度和文字高度默认相等
adaptiveHeight += (props.textHeight || 16) * 2;
adaptiveHeight += props.iconGap || 4;
var tGap = props.tgap || props.vgap || 2;
var bGap = props.bgap || props.vgap || 2;
adaptiveHeight += (tGap + bGap);
}
return BI.extend(conf, { return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""), baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""),
attributes: { attributes: {
tabIndex: 1 tabIndex: 1
}, },
minWidth: (props.block === true || props.clear === true) ? 0 : 80, minWidth: (props.block === true || props.clear === true) ? 0 : 80,
// 44 = 垂直间距 6 + 边框 2 + 图标 16 + 图标和文字间隔 8 + 文字 12 height: isVertical(props.iconPosition) ? adaptiveHeight : 24,
height: isVertical(props.iconPosition) ? 44 + ((props.iconGap || 8) - 8) : 24,
shadow: props.clear !== true, shadow: props.clear !== true,
isShadowShowingOnSelected: true, isShadowShowingOnSelected: true,
readonly: true, readonly: true,
@ -49,7 +58,7 @@
bgap: 0, bgap: 0,
lgap: 0, lgap: 0,
rgap: 0, rgap: 0,
iconGap: 8, iconGap: 4,
iconPosition: "left" iconPosition: "left"
}); });
}, },
@ -81,7 +90,10 @@
cls: o.iconCls, cls: o.iconCls,
width: this._const.iconWidth, width: this._const.iconWidth,
height: lineHeight, height: lineHeight,
lineHeight: lineHeight lineHeight: lineHeight,
// 不设置,自定义按钮无法居中
iconWidth: o.iconWidth,
iconHeight: o.iconHeight
}); });
this.text = BI.createWidget({ this.text = BI.createWidget({
type: "bi.label", type: "bi.label",
@ -197,7 +209,7 @@
setIcon: function (cls) { setIcon: function (cls) {
var o = this.options; var o = this.options;
if(this.icon && o.iconCls !== cls) { if (this.icon && o.iconCls !== cls) {
this.icon.element.removeClass(o.iconCls).addClass(cls); this.icon.element.removeClass(o.iconCls).addClass(cls);
o.iconCls = cls; o.iconCls = cls;
} }

4
src/case/ztree/0.treeview.js

@ -95,7 +95,7 @@ BI.TreeView = BI.inherit(BI.Pane, {
expandSpeed: "", expandSpeed: "",
nameIsHTML: true, // 节点可以用html标签代替 nameIsHTML: true, // 节点可以用html标签代替
dblClickExpand: false, dblClickExpand: false,
showLine: o.showLine showLine: o.showLine,
}, },
callback: { callback: {
beforeExpand: beforeExpand, beforeExpand: beforeExpand,
@ -360,7 +360,7 @@ BI.TreeView = BI.inherit(BI.Pane, {
tagName: "span", tagName: "span",
whiteSpace: "nowrap", whiteSpace: "nowrap",
root: true, root: true,
keyword: o.paras.keyword keyword: o.paras.keyword,
}, newNode, { }, newNode, {
type: "bi.text", type: "bi.text",
text: BI.replaceAll(newNode.text, "\n", " ") text: BI.replaceAll(newNode.text, "\n", " ")

14
src/case/ztree/1.asynctree.js

@ -6,7 +6,10 @@
*/ */
BI.AsyncTree = BI.inherit(BI.TreeView, { BI.AsyncTree = BI.inherit(BI.TreeView, {
_defaultConfig: function () { _defaultConfig: function () {
return BI.extend(BI.AsyncTree.superclass._defaultConfig.apply(this, arguments), {}); return BI.extend(BI.AsyncTree.superclass._defaultConfig.apply(this, arguments), {
showIcon: false,
showLine: true,
});
}, },
_init: function () { _init: function () {
BI.AsyncTree.superclass._init.apply(this, arguments); BI.AsyncTree.superclass._init.apply(this, arguments);
@ -42,11 +45,14 @@ BI.AsyncTree = BI.inherit(BI.TreeView, {
} }
}, },
view: { view: {
showIcon: false, showIcon: o.showIcon,
expandSpeed: "", expandSpeed: "",
nameIsHTML: true, nameIsHTML: true,
dblClickExpand: false, dblClickExpand: false,
showLine: o.showLine showLine: o.showLine,
nodeClasses: function (treeId, treeNode) {
return { add: [treeNode.iconCls || ""] };
}
}, },
callback: { callback: {
beforeCheck: beforeCheck, beforeCheck: beforeCheck,
@ -54,7 +60,7 @@ BI.AsyncTree = BI.inherit(BI.TreeView, {
beforeExpand: beforeExpand, beforeExpand: beforeExpand,
onExpand: onExpand, onExpand: onExpand,
onCollapse: onCollapse, onCollapse: onCollapse,
onClick: onClick onClick: onClick,
} }
}; };

1173
src/case/ztree/jquery.ztree.core-3.5.js

File diff suppressed because it is too large Load Diff

12
src/less/base/tree/ztree.less

@ -35,6 +35,7 @@
// 使用1倍图太模糊,这边就使用css自己画了,calc属性支持IE9, IE8反正会走hack, 不影响 // 使用1倍图太模糊,这边就使用css自己画了,calc属性支持IE9, IE8反正会走hack, 不影响
.ztree li ul.line { .ztree li ul.line {
position: relative; position: relative;
&:before { &:before {
position: absolute; position: absolute;
content: ''; content: '';
@ -60,6 +61,7 @@
border-left: 1px dashed @border-color-dark-gray-line; border-left: 1px dashed @border-color-dark-gray-line;
} }
} }
.ztree.solid li ul.line { .ztree.solid li ul.line {
&:before { &:before {
border-left: 1px solid @border-color-dark-gray-line-theme-dark; border-left: 1px solid @border-color-dark-gray-line-theme-dark;
@ -68,7 +70,7 @@
} }
.ztree li a { .ztree li a {
padding: 1px 3px 0 0; padding: 0 3px 0 0;
margin: 0; margin: 0;
cursor: pointer; cursor: pointer;
height: 23px; height: 23px;
@ -76,11 +78,13 @@
text-decoration: none; text-decoration: none;
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
.tree-node-text { .tree-node-text {
&:not(.disabled) { &:not(.disabled) {
&:hover { &:hover {
.background-color(@color-bi-background-highlight, 10%); .background-color(@color-bi-background-highlight, 10%);
} }
&:active { &:active {
color: @color-bi-text-highlight; color: @color-bi-text-highlight;
.background-color(@color-bi-background-highlight, 15%); .background-color(@color-bi-background-highlight, 15%);
@ -147,8 +151,6 @@
.ztree li span.button { .ztree li span.button {
line-height: 0; line-height: 0;
margin: 0; margin: 0;
width: 16px;
height: 16px;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
border: 0 none; border: 0 none;
@ -163,18 +165,22 @@
&.bi-checkbox { &.bi-checkbox {
border: 1px solid @color-bi-border-dark-line; border: 1px solid @color-bi-border-dark-line;
box-sizing: border-box; box-sizing: border-box;
&.active { &.active {
background-color: @color-bi-background-highlight; background-color: @color-bi-background-highlight;
border-color: @color-bi-border-highlight; border-color: @color-bi-border-highlight;
} }
&.disabled { &.disabled {
border: 1px solid @color-bi-border-disabled; border: 1px solid @color-bi-border-disabled;
background-color: @color-bi-background-disabled; background-color: @color-bi-background-disabled;
&.active { &.active {
border-color: @color-bi-border-disabled; border-color: @color-bi-border-disabled;
} }
} }
} }
&.bi-half-button { &.bi-half-button {
border: 1px solid @color-bi-border-highlight; border: 1px solid @color-bi-border-highlight;
box-sizing: border-box; box-sizing: border-box;

12
src/widget/editor/editor.text.js

@ -28,15 +28,15 @@ BI.TextEditor = BI.inherit(BI.Widget, {
var self = this, o = this.options; var self = this, o = this.options;
var border = o.simple ? 1 : 2; var border = o.simple ? 1 : 2;
if (BI.isNumber(o.height)) { if (BI.isNumber(o.height)) {
this.element.css({height: o.height - border}); this.element.css({ height: o.height - border });
} }
if (BI.isNumber(o.width)) { if (BI.isNumber(o.width)) {
this.element.css({width: o.width - border}); this.element.css({ width: o.width - border });
} }
this.editor = BI.createWidget({ this.editor = BI.createWidget({
type: "bi.editor", type: "bi.editor",
element: this,
simple: o.simple, simple: o.simple,
height: o.height - border,
hgap: o.hgap, hgap: o.hgap,
vgap: o.vgap, vgap: o.vgap,
lgap: o.lgap, lgap: o.lgap,
@ -116,12 +116,6 @@ BI.TextEditor = BI.inherit(BI.Widget, {
this.editor.on(BI.Editor.EVENT_EMPTY, function () { this.editor.on(BI.Editor.EVENT_EMPTY, function () {
self.fireEvent(BI.TextEditor.EVENT_EMPTY); self.fireEvent(BI.TextEditor.EVENT_EMPTY);
}); });
BI.createWidget({
type: "bi.vertical",
scrolly: false,
element: this,
items: [this.editor]
});
}, },
setWaterMark: function (v) { setWaterMark: function (v) {

Loading…
Cancel
Save