|
|
|
@ -1,4 +1,8 @@
|
|
|
|
|
import { extend, map, each, isNull } from "../../2.base"; |
|
|
|
|
import { Providers } from "../../5.inject"; |
|
|
|
|
import { Plugin } from "../../6.plugin"; |
|
|
|
|
import { isSupportCss3, isIE, getIEVersion } from "../../platform/web"; |
|
|
|
|
import { HorizontalAlign, VerticalAlign } from "../../constant"; |
|
|
|
|
|
|
|
|
|
// 工程配置
|
|
|
|
|
// 注册布局
|
|
|
|
@ -10,7 +14,7 @@ let _isSupportFlex, _isSupportGrid;
|
|
|
|
|
|
|
|
|
|
function isSupportFlex() { |
|
|
|
|
if (!_isSupportFlex) { |
|
|
|
|
_isSupportFlex = !!(BI.isSupportCss3 && BI.isSupportCss3("flex")); |
|
|
|
|
_isSupportFlex = !!(isSupportCss3 && isSupportCss3("flex")); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return _isSupportFlex; |
|
|
|
@ -18,7 +22,7 @@ function isSupportFlex() {
|
|
|
|
|
|
|
|
|
|
function isSupportGrid() { |
|
|
|
|
if (!_isSupportGrid) { |
|
|
|
|
_isSupportGrid = !!(BI.isSupportCss3 && BI.isSupportCss3("grid")); |
|
|
|
|
_isSupportGrid = !!(isSupportCss3 && isSupportCss3("grid")); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return _isSupportGrid; |
|
|
|
@ -46,27 +50,27 @@ configWidget("bi.horizontal", ob => {
|
|
|
|
|
const supportFlex = isSupportFlex(); |
|
|
|
|
// // 在横向自适应场景下我们需要使用table的自适应撑出滚动条的特性(flex处理不了这种情况)
|
|
|
|
|
// // 主要出现在center_adapt或者horizontal_adapt的场景,或者主动设置horizontalAlign的场景
|
|
|
|
|
// if (ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch) {
|
|
|
|
|
// return BI.extend({}, ob, {type: "bi.table_adapt"});
|
|
|
|
|
// if (ob.horizontalAlign === HorizontalAlign.Center || ob.horizontalAlign === HorizontalAlign.Stretch) {
|
|
|
|
|
// return extend({}, ob, {type: "bi.table_adapt"});
|
|
|
|
|
// }
|
|
|
|
|
if (supportFlex) { |
|
|
|
|
return BI.extend({}, ob, { type: "bi.flex_horizontal" }); |
|
|
|
|
return extend({}, ob, { type: "bi.flex_horizontal" }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return BI.extend({ |
|
|
|
|
return extend({ |
|
|
|
|
scrollx: true, |
|
|
|
|
}, ob, { type: "bi.inline" }); |
|
|
|
|
}); |
|
|
|
|
configWidget("bi.vertical", ob => { |
|
|
|
|
if (ob.horizontalAlign === BI.HorizontalAlign.Left || ob.horizontalAlign === BI.HorizontalAlign.Right) { |
|
|
|
|
if (ob.horizontalAlign === HorizontalAlign.Left || ob.horizontalAlign === HorizontalAlign.Right) { |
|
|
|
|
if (isSupportFlex()) { |
|
|
|
|
return BI.extend({}, ob, { type: "bi.flex_vertical" }); |
|
|
|
|
return extend({}, ob, { type: "bi.flex_vertical" }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return BI.extend({}, ob, { |
|
|
|
|
horizontalAlign: BI.HorizontalAlign.Stretch, |
|
|
|
|
return extend({}, ob, { |
|
|
|
|
horizontalAlign: HorizontalAlign.Stretch, |
|
|
|
|
type: "bi.vertical", |
|
|
|
|
items: BI.map(ob.items, (i, item) => { |
|
|
|
|
items: map(ob.items, (i, item) => { |
|
|
|
|
return { |
|
|
|
|
type: "bi.inline", |
|
|
|
|
horizontalAlign: ob.horizontalAlign, |
|
|
|
@ -75,10 +79,10 @@ configWidget("bi.vertical", ob => {
|
|
|
|
|
}), |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
if (ob.verticalAlign === BI.VerticalAlign.Stretch) { |
|
|
|
|
if (ob.verticalAlign === VerticalAlign.Stretch) { |
|
|
|
|
if (isSupportFlex()) { |
|
|
|
|
return BI.extend({ |
|
|
|
|
horizontalAlign: BI.HorizontalAlign.Stretch, |
|
|
|
|
return extend({ |
|
|
|
|
horizontalAlign: HorizontalAlign.Stretch, |
|
|
|
|
}, ob, { type: "bi.flex_vertical" }); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
@ -94,10 +98,10 @@ configWidget("bi.inline", ob => {
|
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
let hasAuto = false, hasFill = false; |
|
|
|
|
BI.each(ob.items, (i, item) => { |
|
|
|
|
each(ob.items, (i, item) => { |
|
|
|
|
if (item.width === "fill") { |
|
|
|
|
hasFill = true; |
|
|
|
|
} else if (BI.isNull(item.width) || item.width === "" || item.width === "auto") { |
|
|
|
|
} else if (isNull(item.width) || item.width === "" || item.width === "auto") { |
|
|
|
|
hasAuto = true; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
@ -106,80 +110,80 @@ configWidget("bi.inline", ob => {
|
|
|
|
|
|
|
|
|
|
if (hasAutoAndFillColumnSize) { |
|
|
|
|
// 宽度是不是受限
|
|
|
|
|
if ((ob.scrollable !== true && ob.scrollx !== true) || ob.horizontalAlign === BI.HorizontalAlign.Stretch) { |
|
|
|
|
return BI.extend({ |
|
|
|
|
verticalAlign: BI.VerticalAlign.Top, |
|
|
|
|
if ((ob.scrollable !== true && ob.scrollx !== true) || ob.horizontalAlign === HorizontalAlign.Stretch) { |
|
|
|
|
return extend({ |
|
|
|
|
verticalAlign: VerticalAlign.Top, |
|
|
|
|
}, ob, { type: "bi.horizontal_float_fill" }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return BI.extend({ |
|
|
|
|
horizontalAlign: BI.HorizontalAlign.Stretch, |
|
|
|
|
return extend({ |
|
|
|
|
horizontalAlign: HorizontalAlign.Stretch, |
|
|
|
|
}, ob, { type: "bi.table_adapt" }); |
|
|
|
|
} |
|
|
|
|
if (BI.Providers.getProvider("bi.provider.system").getResponsiveMode()) { |
|
|
|
|
return BI.extend({}, ob, { type: "bi.responsive_inline" }); |
|
|
|
|
if (Providers.getProvider("bi.provider.system").getResponsiveMode()) { |
|
|
|
|
return extend({}, ob, { type: "bi.responsive_inline" }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ob; |
|
|
|
|
}); |
|
|
|
|
configWidget("bi.center_adapt", ob => { |
|
|
|
|
const supportFlex = isSupportFlex(); |
|
|
|
|
// var isAdapt = !ob.horizontalAlign || ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch;
|
|
|
|
|
// var isAdapt = !ob.horizontalAlign || ob.horizontalAlign === HorizontalAlign.Center || ob.horizontalAlign === HorizontalAlign.Stretch;
|
|
|
|
|
// if (!isAdapt || justOneItem) {
|
|
|
|
|
if (supportFlex) { |
|
|
|
|
return BI.extend({}, ob, { type: "bi.flex_center_adapt" }); |
|
|
|
|
return extend({}, ob, { type: "bi.flex_center_adapt" }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return BI.extend({}, ob, { type: "bi.inline_center_adapt" }); |
|
|
|
|
return extend({}, ob, { type: "bi.inline_center_adapt" }); |
|
|
|
|
// }
|
|
|
|
|
// return ob;
|
|
|
|
|
}); |
|
|
|
|
configWidget("bi.vertical_adapt", ob => { |
|
|
|
|
const supportFlex = isSupportFlex(); |
|
|
|
|
// var isAdapt = ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch;
|
|
|
|
|
// var isAdapt = ob.horizontalAlign === HorizontalAlign.Center || ob.horizontalAlign === HorizontalAlign.Stretch;
|
|
|
|
|
// if (!isAdapt || justOneItem) {
|
|
|
|
|
if (supportFlex) { |
|
|
|
|
return BI.extend({}, ob, { type: "bi.flex_vertical_center_adapt" }); |
|
|
|
|
return extend({}, ob, { type: "bi.flex_vertical_center_adapt" }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return BI.extend({}, ob, { type: "bi.inline_vertical_adapt" }); |
|
|
|
|
return extend({}, ob, { type: "bi.inline_vertical_adapt" }); |
|
|
|
|
// }
|
|
|
|
|
// return ob;
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
configWidget("bi.horizontal_adapt", ob => { |
|
|
|
|
const justOneItem = (ob.items && ob.items.length <= 1); |
|
|
|
|
const isAdapt = !ob.horizontalAlign || ob.horizontalAlign === BI.HorizontalAlign.Center || ob.horizontalAlign === BI.HorizontalAlign.Stretch; |
|
|
|
|
const verticalAlignTop = !ob.verticalAlign || ob.verticalAlign === BI.VerticalAlign.TOP; |
|
|
|
|
const isAdapt = !ob.horizontalAlign || ob.horizontalAlign === HorizontalAlign.Center || ob.horizontalAlign === HorizontalAlign.Stretch; |
|
|
|
|
const verticalAlignTop = !ob.verticalAlign || ob.verticalAlign === VerticalAlign.TOP; |
|
|
|
|
if (verticalAlignTop && justOneItem) { |
|
|
|
|
return BI.extend({}, ob, { type: "bi.horizontal_auto" }); |
|
|
|
|
return extend({}, ob, { type: "bi.horizontal_auto" }); |
|
|
|
|
} |
|
|
|
|
const supportFlex = isSupportFlex(); |
|
|
|
|
// 在横向自适应场景下我们需要使用table的自适应撑出滚动条的特性(flex处理不了这种情况)
|
|
|
|
|
// 主要出现在center_adapt或者horizontal_adapt的场景,或者主动设置horizontalAlign的场景
|
|
|
|
|
if (isAdapt) { |
|
|
|
|
return BI.extend({ |
|
|
|
|
horizontalAlign: BI.HorizontalAlign.Center, |
|
|
|
|
return extend({ |
|
|
|
|
horizontalAlign: HorizontalAlign.Center, |
|
|
|
|
}, ob, { type: "bi.table_adapt" }); |
|
|
|
|
} |
|
|
|
|
if (supportFlex) { |
|
|
|
|
return BI.extend({ |
|
|
|
|
horizontalAlign: BI.HorizontalAlign.Center, |
|
|
|
|
return extend({ |
|
|
|
|
horizontalAlign: HorizontalAlign.Center, |
|
|
|
|
scrollx: false, |
|
|
|
|
}, ob, { type: "bi.flex_horizontal" }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return BI.extend({ |
|
|
|
|
horizontalAlign: BI.HorizontalAlign.Center, |
|
|
|
|
return extend({ |
|
|
|
|
horizontalAlign: HorizontalAlign.Center, |
|
|
|
|
}, ob, { type: "bi.table_adapt" }); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
configWidget("bi.horizontal_float", ob => { |
|
|
|
|
if (isSupportFlex()) { |
|
|
|
|
return BI.extend({}, ob, { type: "bi.flex_horizontal_adapt" }); |
|
|
|
|
return extend({}, ob, { type: "bi.flex_horizontal_adapt" }); |
|
|
|
|
} |
|
|
|
|
if (ob.items && ob.items.length <= 1) { |
|
|
|
|
return BI.extend({}, ob, { type: "bi.inline_horizontal_adapt" }); |
|
|
|
|
return extend({}, ob, { type: "bi.inline_horizontal_adapt" }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ob; |
|
|
|
@ -187,35 +191,35 @@ configWidget("bi.horizontal_float", ob => {
|
|
|
|
|
|
|
|
|
|
configWidget("bi.horizontal_fill", ob => { |
|
|
|
|
if (isSupportFlex()) { |
|
|
|
|
return BI.extend({ |
|
|
|
|
horizontalAlign: BI.HorizontalAlign.Stretch, |
|
|
|
|
verticalAlign: BI.VerticalAlign.Stretch, |
|
|
|
|
return extend({ |
|
|
|
|
horizontalAlign: HorizontalAlign.Stretch, |
|
|
|
|
verticalAlign: VerticalAlign.Stretch, |
|
|
|
|
scrollx: false, |
|
|
|
|
}, ob, { type: "bi.flex_horizontal" }); |
|
|
|
|
} |
|
|
|
|
if ((ob.horizontalAlign && ob.horizontalAlign !== BI.HorizontalAlign.Stretch) || (ob.scrollable === true || ob.scrollx === true)) { |
|
|
|
|
if ((ob.horizontalAlign && ob.horizontalAlign !== HorizontalAlign.Stretch) || (ob.scrollable === true || ob.scrollx === true)) { |
|
|
|
|
// 宽度不受限,要用table布局
|
|
|
|
|
return BI.extend({ |
|
|
|
|
horizontalAlign: BI.HorizontalAlign.Stretch, |
|
|
|
|
verticalAlign: BI.VerticalAlign.Stretch, |
|
|
|
|
return extend({ |
|
|
|
|
horizontalAlign: HorizontalAlign.Stretch, |
|
|
|
|
verticalAlign: VerticalAlign.Stretch, |
|
|
|
|
}, ob, { type: "bi.table_adapt" }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return BI.extend({}, ob, { type: "bi.horizontal_float_fill" }); |
|
|
|
|
return extend({}, ob, { type: "bi.horizontal_float_fill" }); |
|
|
|
|
}); |
|
|
|
|
configWidget("bi.vertical_fill", ob => { |
|
|
|
|
if (isSupportFlex()) { |
|
|
|
|
return BI.extend({ |
|
|
|
|
horizontalAlign: BI.HorizontalAlign.Stretch, |
|
|
|
|
verticalAlign: BI.VerticalAlign.Stretch, |
|
|
|
|
return extend({ |
|
|
|
|
horizontalAlign: HorizontalAlign.Stretch, |
|
|
|
|
verticalAlign: VerticalAlign.Stretch, |
|
|
|
|
scrolly: false, |
|
|
|
|
}, ob, { type: "bi.flex_vertical" }); |
|
|
|
|
} |
|
|
|
|
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) { |
|
|
|
|
// 有滚动条,降级到table布局处理
|
|
|
|
|
return BI.extend({}, ob, { |
|
|
|
|
return extend({}, ob, { |
|
|
|
|
type: "bi.td", |
|
|
|
|
items: BI.map(ob.items, (i, item) => [item]), |
|
|
|
|
items: map(ob.items, (i, item) => [item]), |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
let hasAuto = false; |
|
|
|
@ -224,35 +228,35 @@ configWidget("bi.vertical_fill", ob => {
|
|
|
|
|
hasAuto = true; |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
BI.each(ob.items, (i, item) => { |
|
|
|
|
if (BI.isNull(item.height) || item.height === "") { |
|
|
|
|
each(ob.items, (i, item) => { |
|
|
|
|
if (isNull(item.height) || item.height === "") { |
|
|
|
|
hasAuto = true; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
if (hasAuto) { |
|
|
|
|
// 有自动高的时候
|
|
|
|
|
return BI.extend({}, ob, { type: "bi.vtape_auto" }); |
|
|
|
|
return extend({}, ob, { type: "bi.vtape_auto" }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return BI.extend({}, ob, { type: "bi.vtape" }); |
|
|
|
|
return extend({}, ob, { type: "bi.vtape" }); |
|
|
|
|
}); |
|
|
|
|
configWidget("bi.horizontal_sticky", ob => { |
|
|
|
|
if (!isSupportSticky) { |
|
|
|
|
return BI.extend({ scrollx: true }, ob, { type: "bi.horizontal_fill" }); |
|
|
|
|
return extend({ scrollx: true }, ob, { type: "bi.horizontal_fill" }); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
configWidget("bi.vertical_sticky", ob => { |
|
|
|
|
if (!isSupportSticky) { |
|
|
|
|
return BI.extend({ scrolly: true }, ob, { type: "bi.vertical_fill" }); |
|
|
|
|
return extend({ scrolly: true }, ob, { type: "bi.vertical_fill" }); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
configWidget("bi.left_right_vertical_adapt", ob => { |
|
|
|
|
if (isSupportFlex()) { |
|
|
|
|
// IE下其实也是可以使用flex布局的,只要排除掉出现滚动条的情况
|
|
|
|
|
// if (!BI.isIE() || (ob.scrollable !== true && ob.scrolly !== true)) {
|
|
|
|
|
return BI.extend({}, ob, { type: "bi.flex_left_right_vertical_adapt" }); |
|
|
|
|
// if (!isIE() || (ob.scrollable !== true && ob.scrolly !== true)) {
|
|
|
|
|
return extend({}, ob, { type: "bi.flex_left_right_vertical_adapt" }); |
|
|
|
|
// }
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -261,55 +265,55 @@ configWidget("bi.left_right_vertical_adapt", ob => {
|
|
|
|
|
configWidget("bi.flex_horizontal", ob => { |
|
|
|
|
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) { |
|
|
|
|
if (ob.hgap > 0 || ob.lgap > 0 || ob.rgap > 0) { |
|
|
|
|
if (BI.Providers.getProvider("bi.provider.system").getResponsiveMode()) { |
|
|
|
|
return BI.extend({}, ob, { type: "bi.responsive_flex_scrollable_horizontal" }); |
|
|
|
|
if (Providers.getProvider("bi.provider.system").getResponsiveMode()) { |
|
|
|
|
return extend({}, ob, { type: "bi.responsive_flex_scrollable_horizontal" }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return BI.extend({}, ob, { type: "bi.flex_scrollable_horizontal" }); |
|
|
|
|
return extend({}, ob, { type: "bi.flex_scrollable_horizontal" }); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
if (BI.Providers.getProvider("bi.provider.system").getResponsiveMode()) { |
|
|
|
|
return BI.extend({}, ob, { type: "bi.responsive_flex_horizontal" }); |
|
|
|
|
if (Providers.getProvider("bi.provider.system").getResponsiveMode()) { |
|
|
|
|
return extend({}, ob, { type: "bi.responsive_flex_horizontal" }); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
configWidget("bi.flex_vertical", ob => { |
|
|
|
|
if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) { |
|
|
|
|
if (ob.hgap > 0 || ob.lgap > 0 || ob.rgap > 0) { |
|
|
|
|
return BI.extend({}, ob, { type: "bi.flex_scrollable_vertical" }); |
|
|
|
|
return extend({}, ob, { type: "bi.flex_scrollable_vertical" }); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
configWidget("bi.table", ob => { |
|
|
|
|
if (!isSupportGrid()) { |
|
|
|
|
return BI.extend({}, ob, { type: "bi.td" }); |
|
|
|
|
return extend({}, ob, { type: "bi.td" }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ob; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
configWidget("bi.radio", ob => { |
|
|
|
|
if (BI.isIE() && BI.getIEVersion() <= 9) { |
|
|
|
|
return BI.extend({}, ob, { type: "bi.image_radio" }); |
|
|
|
|
if (isIE() && getIEVersion() <= 9) { |
|
|
|
|
return extend({}, ob, { type: "bi.image_radio" }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ob; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
configWidget("bi.checkbox", ob => { |
|
|
|
|
if (BI.isIE() && BI.getIEVersion() <= 9) { |
|
|
|
|
return BI.extend({}, ob, { type: "bi.image_checkbox" }); |
|
|
|
|
if (isIE() && getIEVersion() <= 9) { |
|
|
|
|
return extend({}, ob, { type: "bi.image_checkbox" }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ob; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
configWidget("bi.half_icon_button", ob => { |
|
|
|
|
if (BI.isIE() && BI.getIEVersion() < 9) { |
|
|
|
|
if (isIE() && getIEVersion() < 9) { |
|
|
|
|
return ob; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return BI.extend({}, ob, { type: "bi.half_button" }); |
|
|
|
|
return extend({}, ob, { type: "bi.half_button" }); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|