diff --git a/demo/js/base/button/demo.button.js b/demo/js/base/button/demo.button.js index 981683e84..2514b949e 100644 --- a/demo/js/base/button/demo.button.js +++ b/demo/js/base/button/demo.button.js @@ -385,6 +385,11 @@ Demo.Button = BI.inherit(BI.Widget, { type: "bi.button", text: "小于最小宽度的按钮", width: 50, + }, { + type: "bi.button", + text: "一个文字超级超级长的 button, 他比按钮宽度还长。", + textWidth: 500, + width: 100, }]; return { diff --git a/demo/js/case/combo/demo.text_value_combo.js b/demo/js/case/combo/demo.text_value_combo.js index 15df83c54..4f8c4a92e 100644 --- a/demo/js/case/combo/demo.text_value_combo.js +++ b/demo/js/case/combo/demo.text_value_combo.js @@ -8,19 +8,21 @@ Demo.TextValueCombo = BI.inherit(BI.Widget, { render: function () { var combo1, combo2; - var items = [{ - text: "MVC-1", - iconCls: "date-font", - value: 1 - }, { - text: "MVC-2", - iconCls: "search-font", - value: 2 - }, { - text: "MVC-3", - iconCls: "pull-right-font", - value: 3 - }]; + var items = [ + { + text: "MVC-1", + iconCls: "date-font", + value: 1 + }, { + text: "MVC-2", + iconCls: "search-font", + value: 2 + }, { + text: "MVC-3", + iconCls: "pull-right-font", + value: 3 + } + ]; // 创建下拉框各种场景用例 return { @@ -195,6 +197,31 @@ Demo.TextValueCombo = BI.inherit(BI.Widget, { allowClear: true, defaultText: "请选择", chooseType: BI.Selection.Multi, + value: [1], + // allowSelectAll: false, + listeners: [ + { + eventName: BI.TextValueCombo.EVENT_CHANGE, + action: function () { + console.log(this.getValue()); + } + } + ] + } + ] + }), + this.createCombo("支持复选,不要全选功能", { + type: "bi.vertical", + items: [ + { + type: "bi.text_value_combo", + width: 300, + items: items, + allowClear: true, + defaultText: "请选择", + chooseType: BI.Selection.Multi, + value: [1], + allowSelectAll: false, listeners: [ { eventName: BI.TextValueCombo.EVENT_CHANGE, diff --git a/demo/js/west.js b/demo/js/west.js index d4cc9d59b..d2cd70109 100644 --- a/demo/js/west.js +++ b/demo/js/west.js @@ -9,6 +9,10 @@ Demo.West = BI.inherit(BI.Widget, { render: function () { var self = this; + + + var selectedId = BI.Router.$router.currentRoute.params?.componentId; + return { type: "bi.vtape", items: [{ @@ -60,7 +64,7 @@ Demo.West = BI.inherit(BI.Widget, { self.fireEvent(Demo.West.EVENT_VALUE_CHANGE, v); } }], - value: Demo.showIndex, + value: selectedId || Demo.showIndex, items: Demo.CONFIG, ref: function (ref) { self.tree = ref; @@ -70,4 +74,4 @@ Demo.West = BI.inherit(BI.Widget, { } }); Demo.West.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE"; -BI.shortcut("demo.west", Demo.West); \ No newline at end of file +BI.shortcut("demo.west", Demo.West); diff --git a/demo/js/widget/numbereditor/demo.number_editor.js b/demo/js/widget/numbereditor/demo.number_editor.js index 9a57706bd..bbd7181dd 100644 --- a/demo/js/widget/numbereditor/demo.number_editor.js +++ b/demo/js/widget/numbereditor/demo.number_editor.js @@ -14,7 +14,8 @@ Demo.FileManager = BI.inherit(BI.Widget, { }, height: 24, width: 150, - errorText: "hahah" + errorText: "hahah", + watermark: "每个人都是自己健康的第一责任人", }); editor1.on(BI.NumberEditor.EVENT_CHANGE, function () { if (BI.parseFloat(this.getValue()) < 1) { diff --git a/dist/font/iconfont.eot b/dist/font/iconfont.eot index 525a2255d..3a2dc8643 100644 Binary files a/dist/font/iconfont.eot and b/dist/font/iconfont.eot differ diff --git a/dist/font/iconfont.svg b/dist/font/iconfont.svg index 03bfcd64d..e45847d23 100644 --- a/dist/font/iconfont.svg +++ b/dist/font/iconfont.svg @@ -14,6 +14,30 @@ /> + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dist/font/iconfont.ttf b/dist/font/iconfont.ttf index e4c8c2ce8..11a6aec01 100644 Binary files a/dist/font/iconfont.ttf and b/dist/font/iconfont.ttf differ diff --git a/dist/font/iconfont.woff b/dist/font/iconfont.woff index 13c6cb98e..3a5514a21 100644 Binary files a/dist/font/iconfont.woff and b/dist/font/iconfont.woff differ diff --git a/dist/font/iconfont.woff2 b/dist/font/iconfont.woff2 index 2c3383f13..8eea86c81 100644 Binary files a/dist/font/iconfont.woff2 and b/dist/font/iconfont.woff2 differ diff --git a/package.json b/package.json index b54ae8401..0c0ff4c72 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fineui", - "version": "2.0.20221121190600", + "version": "2.0.20221218194544", "description": "fineui", "main": "dist/fineui_without_conflict.min.js", "types": "dist/lib/index.d.ts", diff --git a/src/base/combination/bubble.js b/src/base/combination/bubble.js index 1af43b79c..7b5f57736 100644 --- a/src/base/combination/bubble.js +++ b/src/base/combination/bubble.js @@ -106,7 +106,8 @@ _initPullDownAction: function () { var self = this, o = this.options; var evs = (this.options.trigger || "").split(","); - function st (e) { + + function st(e) { if (o.stopEvent) { e.stopEvent(); } @@ -268,7 +269,7 @@ BI.createWidget({ type: "bi.vertical", scrolly: false, - element: this.options.container || this, + element: BI.isFunction(this.options.container) ? this.options.container() : (this.options.container || this), items: [ { el: this.popupView } ], @@ -344,14 +345,16 @@ if (this.popper) { this.popper.destroy(); } - var modifiers = [{ - name: "offset", - options: { - offset: function () { - return [o.adjustXOffset, (o.showArrow ? 12 : 0) + (o.adjustYOffset + o.adjustLength)]; + var modifiers = [ + { + name: "offset", + options: { + offset: function () { + return [o.adjustXOffset, (o.showArrow ? 12 : 0) + (o.adjustYOffset + o.adjustLength)]; + }, }, - }, - }]; + } + ]; if (this.options.showArrow) { modifiers.push({ name: "arrow", diff --git a/src/base/combination/combo.js b/src/base/combination/combo.js index 7abbf77eb..75c45a4fe 100644 --- a/src/base/combination/combo.js +++ b/src/base/combination/combo.js @@ -38,8 +38,9 @@ adjustLength: 0, // 调整的距离 adjustXOffset: 0, adjustYOffset: 0, + supportCSSTransform: true, hideChecker: BI.emptyFn, - offsetStyle: "left", // left,right,center + offsetStyle: "", // "",center,middle el: {}, popup: {}, comboClass: "bi-combo-popup", @@ -161,7 +162,7 @@ this._assertPopupViewRender(); this.fireEvent(BI.Combo.EVENT_BEFORE_POPUPVIEW); // popupVisible是为了获取其宽高, 放到可视范围之外以防止在IE下闪一下 - this.popupView.css({ left: -999999999, top: -99999999 }); + this.popupView.css({ left: -99999, top: -99999 }); this.popupView.visible(); BI.each(needHideWhenAnotherComboOpen, function (i, combo) { if (i !== self.getName()) { @@ -195,69 +196,73 @@ this.popupView.visible(); var combo = (o.belowMouse && BI.isNotNull(e)) ? { element: { + 0: BI.extend({}, e.target, { + getBoundingClientRect: function () { + return { + left: e.pageX, + top: e.pageY, + width: 0, + height: 0, + }; + } + }), offset: function () { return { left: e.pageX, top: e.pageY, }; }, - bounds: function () { - // offset为其相对于父定位元素的偏移 - return { - x: e.offsetX, - y: e.offsetY, - width: 0, - height: 24, - }; - }, - outerWidth: function () { - return 0; - }, - outerHeight: function () { - return 24; - }, }, } : this.combo; + + var positionRelativeElement = BI.DOM.getPositionRelativeContainingBlock( + BI.isNull(o.container) + ? this.element[0] + : BI.isWidget(o.container) + ? o.container.element[0] + : BI.Widget._renderEngine.createElement(BI.isFunction(o.container) ? o.container() : o.container)[0] + ); + switch (o.direction) { case "bottom": case "bottom,right": - p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["bottom", "top", "right", "left"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["bottom", "top", "right", "left"], o.offsetStyle, positionRelativeElement); break; case "top": case "top,right": - p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["top", "bottom", "right", "left"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["top", "bottom", "right", "left"], o.offsetStyle, positionRelativeElement); break; case "left": case "left,bottom": - p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["left", "right", "bottom", "top"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["left", "right", "bottom", "top"], o.offsetStyle, positionRelativeElement); break; case "right": case "right,bottom": - p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "bottom", "top"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "bottom", "top"], o.offsetStyle, positionRelativeElement); break; case "top,left": - p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["top", "bottom", "left", "right"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["top", "bottom", "left", "right"], o.offsetStyle, positionRelativeElement); break; case "bottom,left": - p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["bottom", "top", "left", "right"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, o.adjustXOffset, (o.adjustYOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.isNeedAdjustHeight, ["bottom", "top", "left", "right"], o.offsetStyle, positionRelativeElement); break; case "left,top": - p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["left", "right", "top", "bottom"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["left", "right", "top", "bottom"], o.offsetStyle, positionRelativeElement); break; case "right,top": - p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "top", "bottom"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "top", "bottom"], o.offsetStyle, positionRelativeElement); break; case "right,innerRight": - p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "innerRight", "innerLeft", "bottom", "top"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "innerRight", "innerLeft", "bottom", "top"], o.offsetStyle, positionRelativeElement); break; case "right,innerLeft": - p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "innerLeft", "innerRight", "bottom", "top"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["right", "left", "innerLeft", "innerRight", "bottom", "top"], o.offsetStyle, positionRelativeElement); break; case "innerRight": - p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["innerRight", "innerLeft", "right", "left", "bottom", "top"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["innerRight", "innerLeft", "right", "left", "bottom", "top"], o.offsetStyle, positionRelativeElement); break; case "innerLeft": - p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["innerLeft", "innerRight", "left", "right", "bottom", "top"], o.offsetStyle); + p = BI.DOM.getComboPosition(combo, this.popupView, (o.adjustXOffset + o.adjustLength) + (o.showArrow ? this._const.TRIANGLE_LENGTH : 0), o.adjustYOffset, o.isNeedAdjustHeight, ["innerLeft", "innerRight", "left", "right", "bottom", "top"], o.offsetStyle, positionRelativeElement); break; case "top,custom": case "custom,top": @@ -287,9 +292,6 @@ break; } - if ("adaptHeight" in p) { - this.resetListHeight(p.adaptHeight); - } var width = this.combo.element.outerWidth(); var height = this.combo.element.outerHeight(); this.popupView.setDirection && this.popupView.setDirection(p.dir, { @@ -300,6 +302,24 @@ adjustYOffset: o.adjustYOffset, offset: this.combo.element.offset(), }); + + if (o.supportCSSTransform) { + + var positonedRect = positionRelativeElement.getBoundingClientRect(); + + var scaleX = positonedRect.width / positionRelativeElement.offsetWidth; + var scaleY = positonedRect.height / positionRelativeElement.offsetHeight; + + p.top && (p.top = Math.round(p.top / scaleY + positionRelativeElement.scrollTop)); + p.left && (p.left = Math.round(p.left / scaleX + positionRelativeElement.scrollLeft)); + + p.adaptHeight && (p.adaptHeight = Math.round(p.adaptHeight / scaleY)); + } + + if ("adaptHeight" in p) { + this.resetListHeight(p.adaptHeight); + } + if ("left" in p) { this.popupView.element.css({ left: p.left, diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js index a06f23191..bc1468450 100644 --- a/src/base/single/button/buttons/button.js +++ b/src/base/single/button/buttons/button.js @@ -81,7 +81,7 @@ }, hgap: o.hgap, vgap: o.vgap, - items: self.generateItems() + items: self.generateItems(), }); // 如果 options 对应的属性为 true 则给元素添加 class @@ -102,7 +102,7 @@ // 由于button默认情况下有个边框，所以要主动算行高 var lineHeight, textHeight = o.textHeight; - var hasBorder = false + var hasBorder = false; if (BI.isNumber(o.height)) { if (!isVertical(o.iconPosition)) { if (!(o.clear && o.block && o.light)) { @@ -121,12 +121,12 @@ var iconInvisible = !(o.loading || o.iconCls || o.icon || defaultRenderIcon); - var textWidth = o.textWidth; - if (BI.isNull(o.textWidth)) { - textWidth = (o.minWidth > 0 && o.width < o.minWidth) ? o.minWidth : o.width; - textWidth -= (o.hgap * 2 + o.iconGap) - textWidth -= iconInvisible || isVertical(o.iconPosition) ? 0 : this._const.iconWidth - } + var maxTextWidth = Math.max(o.minWidth, o.width); + maxTextWidth -= (o.hgap * 2 + o.iconGap); + // 减去图标水平占位宽度 + maxTextWidth -= iconInvisible || isVertical(o.iconPosition) ? 0 : this._const.iconWidth; + var textWidth = BI.isNull(o.textWidth) ? maxTextWidth : Math.min(o.textWidth, maxTextWidth); + this.text = BI.createWidget({ type: "bi.label", text: o.text, @@ -140,7 +140,7 @@ }); if (iconInvisible) { - return [this.text] + return [this.text]; } this._iconRendered = true; diff --git a/src/base/single/editor/editor.js b/src/base/single/editor/editor.js index ac9e779e9..c0a77c9f6 100644 --- a/src/base/single/editor/editor.js +++ b/src/base/single/editor/editor.js @@ -23,6 +23,7 @@ BI.Editor = BI.inherit(BI.Single, { allowBlank: false, watermark: "", errorText: "", + autoTrim: true, }); }, @@ -49,25 +50,29 @@ BI.Editor = BI.inherit(BI.Single, { margin: "0", }); - var items = [{ - el: { - type: "bi.absolute", - ref: function (_ref) { - self.contentWrapper = _ref; + var items = [ + { + el: { + type: "bi.absolute", + ref: function (_ref) { + self.contentWrapper = _ref; + }, + items: [ + { + el: this.editor, + left: 0, + right: 0, + top: 0, + bottom: 0, + } + ], }, - items: [{ - el: this.editor, - left: 0, - right: 0, - top: 0, - bottom: 0, - }], - }, - left: o.hgap + o.lgap, - right: o.hgap + o.rgap, - top: o.vgap + o.tgap, - bottom: o.vgap + o.bgap, - }]; + left: o.hgap + o.lgap, + right: o.hgap + o.rgap, + top: o.vgap + o.tgap, + bottom: o.vgap + o.bgap, + } + ]; BI.createWidget({ type: "bi.absolute", @@ -248,13 +253,15 @@ BI.Editor = BI.inherit(BI.Single, { BI.createWidget({ type: "bi.absolute", element: this.contentWrapper, - items: [{ - el: this.watermark, - left: 0, - right: 0, - top: 0, - bottom: 0, - }], + items: [ + { + el: this.watermark, + left: 0, + right: 0, + top: 0, + bottom: 0, + } + ], }); } this.watermark.setText(v); @@ -265,7 +272,7 @@ BI.Editor = BI.inherit(BI.Single, { var o = this.options; var errorText = o.errorText; if (BI.isFunction(errorText)) { - errorText = errorText(BI.trim(this.editor.getValue())); + errorText = errorText(o.autoTrim ? BI.trim(this.editor.getValue()) : this.editor.getValue()); } if (!this.disabledError && BI.isKey(errorText)) { BI.Bubbles[b ? "show" : "hide"](this.getName(), errorText, this, { @@ -330,10 +337,10 @@ BI.Editor = BI.inherit(BI.Single, { getValue: function () { if (!this.isValid()) { - return BI.trim(this.editor.getLastValidValue()); + return this.options.autoTrim ? BI.trim(this.editor.getLastValidValue()) : this.editor.getLastValidValue(); } - return BI.trim(this.editor.getValue()); + return this.options.autoTrim ? BI.trim(this.editor.getValue()) : this.editor.getValue(); }, isEditing: function () { diff --git a/src/case/colorchooser/colorpicker/button/button.colorshow.js b/src/case/colorchooser/colorpicker/button/button.colorshow.js index 740a5d0a7..c9b2da438 100644 --- a/src/case/colorchooser/colorpicker/button/button.colorshow.js +++ b/src/case/colorchooser/colorpicker/button/button.colorshow.js @@ -6,30 +6,32 @@ BI.ColorChooserShowButton = BI.inherit(BI.BasicButton, { props: { - baseCls: 'bi-color-chooser-show-button bi-border bi-list-item-effect', + baseCls: 'bi-color-chooser-show-button bi-border bi-list-item-effect bi-border-radius', }, render: function () { var self = this, o = this.options; return { type: 'bi.htape', - items: [{ - el: { - type: "bi.icon_label", - ref: function (_ref) { - self.icon = _ref; + items: [ + { + el: { + type: "bi.icon_label", + ref: function (_ref) { + self.icon = _ref; + }, + iconWidth: 16, + iconHeight: 16, }, - iconWidth: 16, - iconHeight: 16, - }, - hgap: 20, - width: 16, - }, { - type: 'bi.label', - textAlign: 'left', - text: o.text, - }] - } + hgap: 20, + width: 16, + }, { + type: 'bi.label', + textAlign: 'left', + text: o.text, + } + ] + }; }, doClick: function () { @@ -40,4 +42,4 @@ BI.ColorChooserShowButton = BI.inherit(BI.BasicButton, { }, }); BI.ColorChooserShowButton.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.color_picker_show_button", BI.ColorChooserShowButton); \ No newline at end of file +BI.shortcut("bi.color_picker_show_button", BI.ColorChooserShowButton); diff --git a/src/case/colorchooser/colorpicker/colorpicker.hex.js b/src/case/colorchooser/colorpicker/colorpicker.hex.js index 993607841..8154b9c23 100644 --- a/src/case/colorchooser/colorpicker/colorpicker.hex.js +++ b/src/case/colorchooser/colorpicker/colorpicker.hex.js @@ -11,118 +11,173 @@ BI.HexColorPicker = BI.inherit(BI.Widget, { }, _items: [ - [{ - value: "#808080" - }, { - value: "#ffffff" - }, { - value: "#ffebe5" - }, { - value: "#ffddba" - }, { - value: "#ffeebb" - }, { - value: "#d4e9bf" - }, { - value: "#c7e1e1" - }, { - value: "#bfe3f0" - }, { - value: "#ccd6eb" - }], - [{ - value: "#616161" - }, { - value: "#f2f2f2" - }, { - value: "#ffd6cc" - }, { - value: "#ffb87a" - }, { - value: "#ffdf91" - }, { - value: "#b7d2b6" - }, { - value: "#a3d2c9" - }, { - value: "#8ab6d6" - }, { - value: "#bcbce0" - }], - [{ - value: "#404040" - }, { - value: "#dedede" - }, { - value: "#ffab9b" - }, { - value: "#eb8a3a" - }, { - value: "#ffc947" - }, { - value: "#8aa964" - }, { - value: "#5eaaa0" - }, { - value: "#2978b5" - }, { - value: "#8f8faa" - }], - [{ - value: "#202020" - }, { - value: "#bfbfbf" - }, { - value: "#df7461" - }, { - value: "#cf7536" - }, { - value: "#e6b63b" - }, { - value: "#5b8a72" - }, { - value: "#3b9aa3" - }, { - value: "#336291" - }, { - value: "#58568f" - }], - [{ - value: "#000000" - }, { - value: "#a1a1a1" - }, { - value: "#b55140" - }, { - value: "#a6713c" - }, { - value: "#ad975f" - }, { - value: "#5f7d6e" - }, { - value: "#3b7480" - }, { - value: "#425d78" - }, { - value: "#62608a" - }] + [ + { + "value": "#999999" + }, + { + "value": "#FFFFFF" + }, + { + "value": "#FFE5E5" + }, + { + "value": "#FFF1E5" + }, + { + "value": "#FFF9E5" + }, + { + "value": "#E9F5E9" + }, + { + "value": "#EAEEFF" + }, + { + "value": "#EFEBF7" + }, + { + "value": "#FCE8EF" + } + ], + [ + { + "value": "#737373" + }, + { + "value": "#F2F2F2" + }, + { + "value": "#FFA6A6" + }, + { + "value": "#FFD0A6" + }, + { + "value": "#FFEDA6" + }, + { + "value": "#B3DCB2" + }, + { + "value": "#B9C6FF" + }, + { + "value": "#CABAE6" + }, + { + "value": "#F8B1C9" + } + ], + [ + { + "value": "#4C4C4C" + }, + { + "value": "#D9D9D9" + }, + { + "value": "#FF5959" + }, + { + "value": "#FFA759" + }, + { + "value": "#FFDD59" + }, + { + "value": "#7EBE70" + }, + { + "value": "#7B95FF" + }, + { + "value": "#9C7FD0" + }, + { + "value": "#F06D99" + } + ], + [ + { + "value": "#262626" + }, + { + "value": "#BFBFBF" + }, + { + "value": "#FF0000" + }, + { + "value": "#FF7800" + }, + { + "value": "#FFCB00" + }, + { + "value": "#259B23" + }, + { + "value": "#355CFF" + }, + { + "value": "#673AB7" + }, + { + "value": "#E91E63" + } + ], + [ + { + "value": "#000000" + }, + { + "value": "#A6A6A6" + }, + { + "value": "#A80000" + }, + { + "value": "#B65600" + }, + { + "value": "#CEB000" + }, + { + "value": "#0E550C" + }, + { + "value": "#09269C" + }, + { + "value": "#3A1A73" + }, + { + "value": "#B30072" + } + ] ], render: function () { var self = this, o = this.options; + return { type: "bi.button_group", items: this._digest(o.items || this._items), - layouts: [{ - type: "bi.grid", - }], + layouts: [ + { + type: "bi.grid", + } + ], value: o.value, - listeners: [{ - eventName: BI.ButtonGroup.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.HexColorPicker.EVENT_CHANGE, arguments); + listeners: [ + { + eventName: BI.ButtonGroup.EVENT_CHANGE, + action: function () { + self.fireEvent(BI.HexColorPicker.EVENT_CHANGE, arguments); + } } - }], + ], ref: function (_ref) { self.colors = _ref; } diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js index d2be8a8f9..22c66a250 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js @@ -21,7 +21,7 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { render: function () { var self = this, o = this.options, c = this.constants; this.storeValue = {}; - var RGB = BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], { + var RGB = BI.createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { type: "bi.label", cls: "color-picker-editor-label", height: 20 @@ -33,146 +33,162 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { var Ws = BI.map(BI.range(0, 3), function () { return { type: "bi.small_text_editor", - cls: "color-picker-editor-input", + cls: "color-picker-editor-input bi-border-radius", validationChecker: checker, errorText: BI.i18nText("BI-Color_Picker_Error_Text"), allowBlank: true, value: 255, width: c.RGB_WIDTH, height: 24, - listeners: [{ - eventName: BI.TextEditor.EVENT_CHANGE, - action: function () { - self._checkEditors(); - if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) { - self.colorShow.element.css("background-color", self.getValue()); - self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); + listeners: [ + { + eventName: BI.TextEditor.EVENT_CHANGE, + action: function () { + self._checkEditors(); + if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) { + self.colorShow.element.css("background-color", self.getValue()); + self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); + } } } - }] + ] }; }); return { type: "bi.absolute", - items: [{ - el: { - type: "bi.vertical", - tgap: 10, - items: [{ - type: 'bi.vertical_adapt', - columnSize: ["fill", 'fill'], - height: 24, - items: [{ - type: "bi.color_picker_show_button", - cls: "trans-color-icon", - height: 22, - title: BI.i18nText("BI-Transparent_Color"), - text: BI.i18nText("BI-Transparent_Color"), - listeners: [{ - eventName: BI.ColorChooserShowButton.EVENT_CHANGE, - action: function () { - self.setValue("transparent"); - self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); - } - }], - ref: function (_ref) { - self.transparent = _ref; - } - }, { - el: { - type: "bi.color_picker_show_button", - cls: "auto-color-icon", - height: 22, - title: BI.i18nText("BI-Basic_Auto"), - text: BI.i18nText("BI-Basic_Auto"), - listeners: [{ - eventName: BI.ColorChooserShowButton.EVENT_CHANGE, - action: function () { - self.setValue(""); - self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); - } - }], - ref: function (_ref) { - self.none = _ref; - } - }, - lgap: 10, - }] - }, { - el: { - type: "bi.vertical_adapt", - columnSize: [22, 10, 'fill', 12, c.RGB_WIDTH, 12, c.RGB_WIDTH, 12, c.RGB_WIDTH], - - rgap: 5, - items: [{ - el: { - type: "bi.layout", - cls: "color-picker-editor-display bi-card bi-border", - height: 22, - width: 22, - ref: function (_ref) { - self.colorShow = _ref; - } - }, - width: 18 - }, { - type: "bi.label", - text: "#", - width: 10 - }, { - type: "bi.small_text_editor", - ref: function (_ref) { - self.hexEditor = _ref; - }, - cls: "color-picker-editor-input", - validationChecker: this._hexChecker, - allowBlank: true, - errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"), - width: c.HEX_WIDTH, + items: [ + { + el: { + type: "bi.vertical", + tgap: 10, + items: [ + { + type: 'bi.vertical_adapt', + columnSize: ["fill", 'fill'], height: 24, - listeners: [{ - eventName: "EVENT_CHANGE", - action: function () { - self._checkHexEditor(); - if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) { - self.colorShow.element.css("background-color", self.getValue()); - self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); + items: [ + { + type: "bi.color_picker_show_button", + cls: "trans-color-icon", + height: 22, + title: BI.i18nText("BI-Transparent_Color"), + text: BI.i18nText("BI-Transparent_Color"), + listeners: [ + { + eventName: BI.ColorChooserShowButton.EVENT_CHANGE, + action: function () { + self.setValue("transparent"); + self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); + } + } + ], + ref: function (_ref) { + self.transparent = _ref; } - + }, { + el: { + type: "bi.color_picker_show_button", + cls: "auto-color-icon", + height: 22, + title: BI.i18nText("BI-Basic_Auto"), + text: BI.i18nText("BI-Basic_Auto"), + listeners: [ + { + eventName: BI.ColorChooserShowButton.EVENT_CHANGE, + action: function () { + self.setValue(""); + self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); + } + } + ], + ref: function (_ref) { + self.none = _ref; + } + }, + lgap: 10, } - }] - }, RGB[0], { - el: BI.extend(Ws[0], { - ref: function (_ref) { - self.R = _ref - } - }), - width: c.RGB_WIDTH - }, RGB[1], { - el: BI.extend(Ws[1], { - ref: function (_ref) { - self.G = _ref - } - }), - width: c.RGB_WIDTH - }, RGB[2], { - el: BI.extend(Ws[2], { - ref: function (_ref) { - self.B = _ref - } - }), - rgap: -5, - width: c.RGB_WIDTH - }] - } - }] - }, - left: 0, - right: 0, - top: 0, - bottom: 0 - }] + ] + }, { + el: { + type: "bi.vertical_adapt", + columnSize: [22, 10, 'fill', 12, c.RGB_WIDTH, 12, c.RGB_WIDTH, 12, c.RGB_WIDTH], + + rgap: 5, + items: [ + { + el: { + type: "bi.layout", + cls: "color-picker-editor-display bi-card bi-border", + height: 22, + width: 22, + ref: function (_ref) { + self.colorShow = _ref; + } + }, + width: 18 + }, { + type: "bi.label", + text: "#", + width: 10 + }, { + type: "bi.small_text_editor", + ref: function (_ref) { + self.hexEditor = _ref; + }, + cls: "color-picker-editor-input bi-border-radius", + validationChecker: this._hexChecker, + allowBlank: true, + errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"), + width: c.HEX_WIDTH, + height: 24, + listeners: [ + { + eventName: "EVENT_CHANGE", + action: function () { + self._checkHexEditor(); + if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) { + self.colorShow.element.css("background-color", self.getValue()); + self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); + } + + } + } + ] + }, RGB[0], { + el: BI.extend(Ws[0], { + ref: function (_ref) { + self.R = _ref; + } + }), + width: c.RGB_WIDTH + }, RGB[1], { + el: BI.extend(Ws[1], { + ref: function (_ref) { + self.G = _ref; + } + }), + width: c.RGB_WIDTH + }, RGB[2], { + el: BI.extend(Ws[2], { + ref: function (_ref) { + self.B = _ref; + } + }), + rgap: -5, + width: c.RGB_WIDTH + } + ] + } + } + ] + }, + left: 0, + right: 0, + top: 0, + bottom: 0 + } + ] }; }, @@ -181,13 +197,13 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { }, _checkEditors: function () { - if(BI.isEmptyString(this.R.getValue())) { + if (BI.isEmptyString(this.R.getValue())) { this.R.setValue(0); } - if(BI.isEmptyString(this.G.getValue())) { + if (BI.isEmptyString(this.G.getValue())) { this.G.setValue(0); } - if(BI.isEmptyString(this.B.getValue())) { + if (BI.isEmptyString(this.B.getValue())) { this.B.setValue(0); } this.storeValue = { @@ -223,7 +239,7 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { } else if (color === "transparent") { this.colorShow.element.css("background-color", "").removeClass("auto-color-square-normal-background").addClass("trans-color-background"); } else { - this.colorShow.element.css({"background-color": color}).removeClass("auto-color-square-normal-background").removeClass("trans-color-background"); + this.colorShow.element.css({ "background-color": color }).removeClass("auto-color-square-normal-background").removeClass("trans-color-background"); } }, diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js index 9e9c33e90..749806355 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js @@ -19,7 +19,7 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, { render: function () { var self = this, o = this.options, c = this.constants; - var RGB = BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], { + var RGB = BI.createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { type: "bi.label", cls: "color-picker-editor-label", height: 20 @@ -31,97 +31,105 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, { var Ws = BI.map(BI.range(0, 3), function () { return { type: "bi.small_text_editor", - cls: "color-picker-editor-input", + cls: "color-picker-editor-input bi-border-radius", validationChecker: checker, errorText: BI.i18nText("BI-Color_Picker_Error_Text"), allowBlank: true, value: 255, width: c.RGB_WIDTH, height: 24, - listeners: [{ - eventName: BI.TextEditor.EVENT_CHANGE, - action: function () { - self._checkEditors(); - if (self.R.isValid() && self.G.isValid() && self.B.isValid()) { - self.colorShow.element.css("background-color", self.getValue()); - self.fireEvent(BI.SimpleColorPickerEditor.EVENT_CHANGE); + listeners: [ + { + eventName: BI.TextEditor.EVENT_CHANGE, + action: function () { + self._checkEditors(); + if (self.R.isValid() && self.G.isValid() && self.B.isValid()) { + self.colorShow.element.css("background-color", self.getValue()); + self.fireEvent(BI.SimpleColorPickerEditor.EVENT_CHANGE); + } } } - }] - } + ] + }; }); return { type: "bi.vertical", tgap: 10, - items: [{ - el: { - type: "bi.vertical_adapt", - rgap: 5, - columnSize: [22, 10, 'fill', 12, c.RGB_WIDTH, 12, c.RGB_WIDTH, 12, c.RGB_WIDTH], - items: [{ - el: { - type: "bi.layout", - cls: "color-picker-editor-display bi-card bi-border", - height: 22, - width: 22, - ref: function (_ref) { - self.colorShow = _ref; - } - }, - width: 18, - }, { - type: "bi.label", - text: "#", - width: 10 - }, { - type: "bi.small_text_editor", - ref: function (_ref) { - self.hexEditor = _ref; - }, - cls: "color-picker-editor-input", - validationChecker: this._hexChecker, - allowBlank: true, - errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"), - width: c.HEX_WIDTH, - height: 24, - listeners: [{ - eventName: "EVENT_CHANGE", - action: function () { - self._checkHexEditor(); - if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) { - self.colorShow.element.css("background-color", self.getValue()); - self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); - } - } - }] - }, RGB[0], { - el: BI.extend(Ws[0], { - ref: function (_ref) { - self.R = _ref - } - }), - width: c.RGB_WIDTH - }, RGB[1], { - el: BI.extend(Ws[1], { - ref: function (_ref) { - self.G = _ref + items: [ + { + el: { + type: "bi.vertical_adapt", + rgap: 5, + columnSize: [22, 10, 'fill', 12, c.RGB_WIDTH, 12, c.RGB_WIDTH, 12, c.RGB_WIDTH], + items: [ + { + el: { + type: "bi.layout", + cls: "color-picker-editor-display bi-card bi-border", + height: 22, + width: 22, + ref: function (_ref) { + self.colorShow = _ref; + } + }, + width: 18, + }, { + type: "bi.label", + text: "#", + width: 10 + }, { + type: "bi.small_text_editor", + ref: function (_ref) { + self.hexEditor = _ref; + }, + cls: "color-picker-editor-input bi-border-radius", + validationChecker: this._hexChecker, + allowBlank: true, + errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"), + width: c.HEX_WIDTH, + height: 24, + listeners: [ + { + eventName: "EVENT_CHANGE", + action: function () { + self._checkHexEditor(); + if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) { + self.colorShow.element.css("background-color", self.getValue()); + self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE); + } + } + } + ] + }, RGB[0], { + el: BI.extend(Ws[0], { + ref: function (_ref) { + self.R = _ref; + } + }), + width: c.RGB_WIDTH + }, RGB[1], { + el: BI.extend(Ws[1], { + ref: function (_ref) { + self.G = _ref; + } + }), + width: c.RGB_WIDTH + }, RGB[2], { + el: BI.extend(Ws[2], { + ref: function (_ref) { + self.B = _ref; + } + }), + rgap: -5, + width: c.RGB_WIDTH } - }), - width: c.RGB_WIDTH - }, RGB[2], { - el: BI.extend(Ws[2], { - ref: function (_ref) { - self.B = _ref - } - }), - rgap: -5, - width: c.RGB_WIDTH - }] + ] + } } - }] + ] - } + }; }, _hexChecker: function (v) { @@ -129,13 +137,13 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, { }, _checkEditors: function () { - if(BI.isEmptyString(this.R.getValue())) { + if (BI.isEmptyString(this.R.getValue())) { this.R.setValue(0); } - if(BI.isEmptyString(this.G.getValue())) { + if (BI.isEmptyString(this.G.getValue())) { this.G.setValue(0); } - if(BI.isEmptyString(this.B.getValue())) { + if (BI.isEmptyString(this.B.getValue())) { this.B.setValue(0); } this.hexEditor.setValue(this.getValue().slice(this.constants.HEX_PREFIX_POSITION)); @@ -157,7 +165,7 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, { }, setValue: function (color) { - this.colorShow.element.css({"background-color": color}); + this.colorShow.element.css({ "background-color": color }); var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color)); this.R.setValue(BI.isNull(json.r) ? "" : json.r); this.G.setValue(BI.isNull(json.g) ? "" : json.g); @@ -174,4 +182,4 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, { } }); BI.SimpleHexColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.simple_hex_color_picker_editor", BI.SimpleHexColorPickerEditor); \ No newline at end of file +BI.shortcut("bi.simple_hex_color_picker_editor", BI.SimpleHexColorPickerEditor); diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.js b/src/case/colorchooser/colorpicker/editor.colorpicker.js index 9d0dbbca0..982d333c3 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.js +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.js @@ -29,7 +29,7 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, { height: 16, width: 16 }); - var RGB = BI.createWidgets(BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], { + var RGB = BI.createWidgets(BI.createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { type: "bi.label", cls: "color-picker-editor-label", width: 20, @@ -41,7 +41,7 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, { }; var Ws = BI.createWidgets([{}, {}, {}], { type: "bi.small_text_editor", - cls: "color-picker-editor-input", + cls: "color-picker-editor-input bi-border-radius", validationChecker: checker, errorText: BI.i18nText("BI-Color_Picker_Error_Text"), allowBlank: true, @@ -95,56 +95,60 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, { BI.createWidget({ type: "bi.absolute", element: this, - items: [{ - el: { - type: "bi.vertical_adapt", - items: [{ - el: this.colorShow, - width: 16 - }, { - el: RGB[0], - width: 20 - }, { - el: this.R, - width: c.RGB_WIDTH - }, { - el: RGB[1], - width: 20 - }, { - el: this.G, - width: c.RGB_WIDTH - }, { - el: RGB[2], - width: 20 - }, { - el: this.B, - width: c.RGB_WIDTH - }, { - el: this.transparent, - width: 16, - lgap: 5 - }, { - el: this.none, - width: 16, - lgap: 5 - }] - }, - left: 10, - right: 10, - top: 0, - bottom: 0 - }] + items: [ + { + el: { + type: "bi.vertical_adapt", + items: [ + { + el: this.colorShow, + width: 16 + }, { + el: RGB[0], + width: 20 + }, { + el: this.R, + width: c.RGB_WIDTH + }, { + el: RGB[1], + width: 20 + }, { + el: this.G, + width: c.RGB_WIDTH + }, { + el: RGB[2], + width: 20 + }, { + el: this.B, + width: c.RGB_WIDTH + }, { + el: this.transparent, + width: 16, + lgap: 5 + }, { + el: this.none, + width: 16, + lgap: 5 + } + ] + }, + left: 10, + right: 10, + top: 0, + bottom: 0 + } + ] }); }, _checkEditors: function () { - if(BI.isEmptyString(this.R.getValue())) { + if (BI.isEmptyString(this.R.getValue())) { this.R.setValue(0); } - if(BI.isEmptyString(this.G.getValue())) { + if (BI.isEmptyString(this.G.getValue())) { this.G.setValue(0); } - if(BI.isEmptyString(this.B.getValue())) { + if (BI.isEmptyString(this.B.getValue())) { this.B.setValue(0); } this.storeValue = { @@ -164,7 +168,7 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, { } else if (color === "transparent") { this.colorShow.element.css("background-color", "").removeClass("auto-color-normal-background").addClass("trans-color-background"); } else { - this.colorShow.element.css({"background-color": color}).removeClass("auto-color-normal-background").removeClass("trans-color-background"); + this.colorShow.element.css({ "background-color": color }).removeClass("auto-color-normal-background").removeClass("trans-color-background"); } }, @@ -223,4 +227,4 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, { } }); BI.ColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.color_picker_editor", BI.ColorPickerEditor); \ No newline at end of file +BI.shortcut("bi.color_picker_editor", BI.ColorPickerEditor); diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.simple.js b/src/case/colorchooser/colorpicker/editor.colorpicker.simple.js index 32943ecee..63b7576b4 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.simple.js +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.simple.js @@ -28,7 +28,7 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, { height: 16, width: 16 }); - var RGB = BI.createWidgets(BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], { + var RGB = BI.createWidgets(BI.createItems([{ text: "R" }, { text: "G" }, { text: "B" }], { type: "bi.label", cls: "color-picker-editor-label", width: 20, @@ -40,7 +40,7 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, { }; var Ws = BI.createWidgets([{}, {}, {}], { type: "bi.small_text_editor", - cls: "color-picker-editor-input", + cls: "color-picker-editor-input bi-border-radius", validationChecker: checker, errorText: BI.i18nText("BI-Color_Picker_Error_Text"), allowBlank: true, @@ -64,47 +64,49 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, { BI.createWidget({ type: "bi.vertical_adapt", element: this, - items: [{ - el: this.colorShow, - width: 16, - lgap: 20, - rgap: 15 - }, { - el: RGB[0], - width: 20 - }, { - el: this.R, - width: c.RGB_WIDTH - }, { - el: RGB[1], - width: 20 - }, { - el: this.G, - width: c.RGB_WIDTH - }, { - el: RGB[2], - width: 20 - }, { - el: this.B, - width: c.RGB_WIDTH - }] + items: [ + { + el: this.colorShow, + width: 16, + lgap: 20, + rgap: 15 + }, { + el: RGB[0], + width: 20 + }, { + el: this.R, + width: c.RGB_WIDTH + }, { + el: RGB[1], + width: 20 + }, { + el: this.G, + width: c.RGB_WIDTH + }, { + el: RGB[2], + width: 20 + }, { + el: this.B, + width: c.RGB_WIDTH + } + ] }); }, _checkEditors: function () { - if(BI.isEmptyString(this.R.getValue())) { + if (BI.isEmptyString(this.R.getValue())) { this.R.setValue(0); } - if(BI.isEmptyString(this.G.getValue())) { + if (BI.isEmptyString(this.G.getValue())) { this.G.setValue(0); } - if(BI.isEmptyString(this.B.getValue())) { + if (BI.isEmptyString(this.B.getValue())) { this.B.setValue(0); } }, setValue: function (color) { - this.colorShow.element.css({"background-color": color}); + this.colorShow.element.css({ "background-color": color }); var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color)); this.R.setValue(BI.isNull(json.r) ? "" : json.r); this.G.setValue(BI.isNull(json.g) ? "" : json.g); @@ -120,4 +122,4 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, { } }); BI.SimpleColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.simple_color_picker_editor", BI.SimpleColorPickerEditor); \ No newline at end of file +BI.shortcut("bi.simple_color_picker_editor", BI.SimpleColorPickerEditor); diff --git a/src/case/combo/bubblecombo/combo.bubble.js b/src/case/combo/bubblecombo/combo.bubble.js index 5f0a4c720..7f2448ac0 100644 --- a/src/case/combo/bubblecombo/combo.bubble.js +++ b/src/case/combo/bubblecombo/combo.bubble.js @@ -53,6 +53,7 @@ BI.BubbleCombo = BI.inherit(BI.Widget, { offsetStyle: o.offsetStyle, showArrow: true, comboClass: o.comboClass, + supportCSSTransform: o.supportCSSTransform, el: o.el, popup: () => BI.extend({ type: "bi.bubble_popup_view", diff --git a/src/case/combo/textvaluecombo/combo.textvalue.js b/src/case/combo/textvaluecombo/combo.textvalue.js index 1128f4ed8..02642da1a 100644 --- a/src/case/combo/textvaluecombo/combo.textvalue.js +++ b/src/case/combo/textvaluecombo/combo.textvalue.js @@ -16,7 +16,8 @@ BI.TextValueCombo = BI.inherit(BI.Widget, { el: {}, allowClear: false, status: "success", // success | warning | error, - title: null + title: null, + allowSelectAll: true, }); }, @@ -78,6 +79,7 @@ BI.TextValueCombo = BI.inherit(BI.Widget, { ref: ref => this.popup = ref, chooseType: o.chooseType, items: o.items, + allowSelectAll: o.allowSelectAll, listeners: [ { eventName: BI.TextValueComboPopup.EVENT_CHANGE, diff --git a/src/case/combo/textvaluecombo/popup.textvalue.js b/src/case/combo/textvaluecombo/popup.textvalue.js index 3f50089af..3411793a4 100644 --- a/src/case/combo/textvaluecombo/popup.textvalue.js +++ b/src/case/combo/textvaluecombo/popup.textvalue.js @@ -2,92 +2,132 @@ BI.TextValueComboPopup = BI.inherit(BI.Pane, { _defaultConfig: function () { return BI.extend(BI.TextValueComboPopup.superclass._defaultConfig.apply(this, arguments), { baseCls: "bi-text-icon-popup", - chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE + chooseType: BI.ButtonGroup.CHOOSE_TYPE_SINGLE, + allowSelectAll: true, }); }, - render () { + render() { var o = this.options, self = this; if (o.chooseType !== BI.ButtonGroup.CHOOSE_TYPE_MULTI) { return { type: "bi.vertical", vgap: 5, - items: [{ - type: "bi.button_group", - ref: (_ref) => { - this.popup = _ref; - }, - items: this._formatItems(o.items), - chooseType: o.chooseType, - layouts: [{ - type: "bi.vertical" - }], - value: o.value, - listeners: [{ - eventName: BI.Controller.EVENT_CHANGE, - action: function (type, val, obj) { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); - if (type === BI.Events.CLICK) { - self.fireEvent(BI.TextValueComboPopup.EVENT_CHANGE, val, obj); + items: [ + { + type: "bi.button_group", + ref: (_ref) => { + this.popup = _ref; + }, + items: this._formatItems(o.items), + chooseType: o.chooseType, + layouts: [ + { + type: "bi.vertical" } - } - }] - }] + ], + value: o.value, + listeners: [ + { + eventName: BI.Controller.EVENT_CHANGE, + action: function (type, val, obj) { + self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + if (type === BI.Events.CLICK) { + self.fireEvent(BI.TextValueComboPopup.EVENT_CHANGE, val, obj); + } + } + } + ] + } + ] }; } return { type: "bi.vertical", verticalAlign: BI.VerticalAlign.Stretch, - rowSize: ["fill", ""], - items: [{ - type: "bi.select_list", - logic: { - dynamic: true, - innerVgap: 5, - rowSize: ["", "fill"], - verticalAlign: BI.VerticalAlign.Stretch - }, - ref: (_ref) => { - this.popup = _ref; - }, - el: { + items: o.allowSelectAll ? [ + { + type: "bi.select_list", + logic: { + dynamic: true, + innerVgap: 5, + rowSize: ["", "fill"], + verticalAlign: BI.VerticalAlign.Stretch + }, + ref: (_ref) => { + this.popup = _ref; + }, el: { - chooseType: o.chooseType - } - }, - items: this._formatItems(o.items), - value: { - type: BI.ButtonGroup.CHOOSE_TYPE_MULTI, - value: o.value - }, - listeners: [{ - eventName: BI.SelectList.EVENT_CHANGE, - action: function (val) { - self.fireEvent(BI.TextValueComboPopup.EVENT_CHANGE, val); - } - }] - }, { - type: "bi.center", - cls: "list-view-toolbar bi-high-light bi-split-top", - height: 24, - items: BI.createItems([{ - type: "bi.text_button", - text: BI.i18nText("BI-Basic_Clears"), - handler: function () { - self.fireEvent(BI.TextValueComboPopup.EVENT_CLEAR); - } + el: { + chooseType: o.chooseType, + } + }, + items: this._formatItems(o.items), + value: { + type: BI.ButtonGroup.CHOOSE_TYPE_MULTI, + value: o.value + }, + height: "fill", + listeners: [ + { + eventName: BI.SelectList.EVENT_CHANGE, + action: function (val) { + self.fireEvent(BI.TextValueComboPopup.EVENT_CHANGE, val); + } + } + ] }, { - type: "bi.text_button", - text: BI.i18nText("BI-Basic_OK"), - handler: function () { - self.fireEvent(BI.TextValueComboPopup.EVENT_CONFIRM); - } - }], { - once: false, - shadow: true, - isShadowShowingOnSelected: true - }) - }] + type: "bi.center", + cls: "list-view-toolbar bi-high-light bi-split-top", + height: 24, + items: BI.createItems([ + { + type: "bi.text_button", + text: BI.i18nText("BI-Basic_Clears"), + handler: function () { + self.fireEvent(BI.TextValueComboPopup.EVENT_CLEAR); + } + }, { + type: "bi.text_button", + text: BI.i18nText("BI-Basic_OK"), + handler: function () { + self.fireEvent(BI.TextValueComboPopup.EVENT_CONFIRM); + } + } + ], { + once: false, + shadow: true, + isShadowShowingOnSelected: true + }) + } + ] : [ + { + type: "bi.list_pane", + logic: { + dynamic: true, + innerVgap: 5, + rowSize: ["", "fill"], + verticalAlign: BI.VerticalAlign.Stretch + }, + ref: (_ref) => { + this.popup = _ref; + }, + el: { + chooseType: o.chooseType, + }, + items: this._formatItems(o.items), + value: o.value, + height: "fill", + listeners: [ + { + eventName: BI.ListPane.EVENT_CHANGE, + action: function (val) { + self.fireEvent(BI.TextValueComboPopup.EVENT_CHANGE, val); + } + } + ] + } + ], }; }, @@ -117,6 +157,9 @@ BI.TextValueComboPopup = BI.inherit(BI.Pane, { return this.popup.getValue(); } var val = this.popup.getValue(); + if (!this.options.allowSelectAll) { + return val; + } if (val.type === BI.ButtonGroup.CHOOSE_TYPE_MULTI) { return val.value; } else { @@ -128,6 +171,10 @@ BI.TextValueComboPopup = BI.inherit(BI.Pane, { if (this.options.chooseType !== BI.ButtonGroup.CHOOSE_TYPE_MULTI) { return this.popup.setValue(v); } + if (!this.options.allowSelectAll) { + this.popup.setValue(v); + return; + } this.popup.setValue({ type: BI.ButtonGroup.CHOOSE_TYPE_MULTI, value: v diff --git a/src/case/editor/editor.clear.js b/src/case/editor/editor.clear.js index 6fd199a43..e18ab9599 100644 --- a/src/case/editor/editor.clear.js +++ b/src/case/editor/editor.clear.js @@ -31,7 +31,8 @@ BI.ClearEditor = BI.inherit(BI.Widget, { errorText: o.errorText, validationChecker: o.validationChecker, quitChecker: o.quitChecker, - value: o.value + value: o.value, + autoTrim: o.autoTrim, }); this.clear = BI.createWidget({ type: "bi.icon_button", @@ -54,7 +55,8 @@ BI.ClearEditor = BI.inherit(BI.Widget, { { el: this.clear, width: 24 - }] + } + ] }); this.editor.on(BI.Controller.EVENT_CHANGE, function () { self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); diff --git a/src/case/editor/editor.defaulttext.js b/src/case/editor/editor.defaulttext.js index 4cfaf59a5..fe88d27bb 100644 --- a/src/case/editor/editor.defaulttext.js +++ b/src/case/editor/editor.defaulttext.js @@ -45,6 +45,7 @@ BI.DefaultTextEditor = BI.inherit(BI.Widget, { watermark: o.watermark, errorText: o.errorText, invisible: true, + autoTrim: o.autoTrim, }); var showText = BI.isFunction(o.text) ? o.text() : o.text; diff --git a/src/case/editor/editor.shelter.js b/src/case/editor/editor.shelter.js index 31883614c..4cb8e4d75 100644 --- a/src/case/editor/editor.shelter.js +++ b/src/case/editor/editor.shelter.js @@ -46,7 +46,8 @@ BI.ShelterEditor = BI.inherit(BI.Widget, { quitChecker: o.quitChecker, allowBlank: o.allowBlank, watermark: o.watermark, - errorText: o.errorText + errorText: o.errorText, + autoTrim: o.autoTrim, }); this.text = BI.createWidget({ type: "bi.text_button", diff --git a/src/case/editor/editor.sign.js b/src/case/editor/editor.sign.js index 7a69a5005..0fb65fa0d 100644 --- a/src/case/editor/editor.sign.js +++ b/src/case/editor/editor.sign.js @@ -46,7 +46,8 @@ BI.SignEditor = BI.inherit(BI.Widget, { quitChecker: o.quitChecker, allowBlank: o.allowBlank, watermark: o.watermark, - errorText: o.errorText + errorText: o.errorText, + autoTrim: o.autoTrim, }); this.text = BI.createWidget({ type: "bi.text_button", diff --git a/src/case/editor/editor.state.js b/src/case/editor/editor.state.js index 8ed915716..9c3f340f9 100644 --- a/src/case/editor/editor.state.js +++ b/src/case/editor/editor.state.js @@ -45,7 +45,8 @@ BI.StateEditor = BI.inherit(BI.Widget, { quitChecker: o.quitChecker, allowBlank: o.allowBlank, watermark: o.watermark, - errorText: o.errorText + errorText: o.errorText, + autoTrim: o.autoTrim, }); this.text = BI.createWidget({ type: "bi.text_button", diff --git a/src/case/editor/editor.state.simple.js b/src/case/editor/editor.state.simple.js index 4d17ab30e..96be87aa1 100644 --- a/src/case/editor/editor.state.simple.js +++ b/src/case/editor/editor.state.simple.js @@ -45,7 +45,8 @@ BI.SimpleStateEditor = BI.inherit(BI.Widget, { quitChecker: o.quitChecker, allowBlank: o.allowBlank, watermark: o.watermark, - errorText: o.errorText + errorText: o.errorText, + autoTrim: o.autoTrim, }); this.text = BI.createWidget({ type: "bi.text_button", @@ -68,13 +69,15 @@ BI.SimpleStateEditor = BI.inherit(BI.Widget, { BI.createWidget({ type: "bi.absolute", element: this, - items: [{ - el: this.text, - left: 0, - right: 0, - top: 0, - bottom: 0 - }] + items: [ + { + el: this.text, + left: 0, + right: 0, + top: 0, + bottom: 0 + } + ] }); this.editor.on(BI.Controller.EVENT_CHANGE, function () { self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); diff --git a/src/case/linearsegment/linear.segment.js b/src/case/linearsegment/linear.segment.js index b0b00f95b..41d282263 100644 --- a/src/case/linearsegment/linear.segment.js +++ b/src/case/linearsegment/linear.segment.js @@ -47,6 +47,14 @@ BI.LinearSegment = BI.inherit(BI.Widget, { getValue: function () { return this.buttonGroup.getValue(); - } + }, + + populate: function (buttons) { + var o = this.options; + this.buttonGroup.populate([BI.createItems(buttons, { + type: "bi.linear_segment_button", + height: o.height + })]) + }, }); BI.shortcut("bi.linear_segment", BI.LinearSegment); diff --git a/src/case/segment/segment.js b/src/case/segment/segment.js index 3f323ffb6..2c1dda918 100644 --- a/src/case/segment/segment.js +++ b/src/case/segment/segment.js @@ -58,6 +58,15 @@ BI.Segment = BI.inherit(BI.Widget, { getValue: function () { return this.buttonGroup.getValue(); }, + + populate: function (buttons) { + var o = this.options; + this.buttonGroup.populate([BI.createItems(buttons, { + type: "bi.segment_button", + height: BI.toPix(o.height, 2), + whiteSpace: o.whiteSpace, + })]); + }, }); BI.Segment.EVENT_CHANGE = "EVENT_CHANGE"; BI.shortcut("bi.segment", BI.Segment); diff --git a/src/case/ztree/parttree.js b/src/case/ztree/parttree.js index 974196b33..8a347548a 100644 --- a/src/case/ztree/parttree.js +++ b/src/case/ztree/parttree.js @@ -37,6 +37,7 @@ BI.PartTree = BI.inherit(BI.AsyncTree, { var self = this, o = this.options; var parentValues = BI.deepClone(treeNode.parentValues || self._getParentValues(treeNode)); var name = this._getNodeValue(treeNode); + this.fireEvent(BI.PartTree.EVENT_CLICK_TREE_NODE); if (treeNode.checked === true) { this.options.paras.selectedValues = this._getUnionValue(); // this._buildTree(self.options.paras.selectedValues, BI.concat(parentValues, name)); @@ -80,7 +81,7 @@ BI.PartTree = BI.inherit(BI.AsyncTree, { var rootNoots = this.nodes.getNodes(); track(rootNoots); - function track (nodes) { + function track(nodes) { BI.each(nodes, function (i, node) { var checkState = node.getCheckStatus(); if (checkState.checked === false) { @@ -135,7 +136,7 @@ BI.PartTree = BI.inherit(BI.AsyncTree, { self.fireEvent(BI.Events.AFTERINIT); }; - function callback (nodes) { + function callback(nodes) { if (self._stop === true) { return; } @@ -171,7 +172,7 @@ BI.PartTree = BI.inherit(BI.AsyncTree, { track([], valueA, valueB); track([], valueB, valueA); - function track (parent, node, compare) { + function track(parent, node, compare) { BI.each(node, function (n, item) { if (BI.isNull(compare[n])) { self._addTreeNode(map, parent, n, item); @@ -197,4 +198,5 @@ BI.PartTree = BI.inherit(BI.AsyncTree, { } }); +BI.PartTree.EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE"; BI.shortcut("bi.part_tree", BI.PartTree); diff --git a/src/core/controller/controller.bubbles.js b/src/core/controller/controller.bubbles.js index fa5cefb5f..fc736a094 100644 --- a/src/core/controller/controller.bubbles.js +++ b/src/core/controller/controller.bubbles.js @@ -45,9 +45,11 @@ BI.BubblesController = BI.inherit(BI.Controller, { BI.createWidget({ type: "bi.default", element: container, - items: [{ - el: bubble - }] + items: [ + { + el: bubble + } + ] }); if (this.storePoppers[name]) { this.storePoppers[name].destroy(); @@ -65,6 +67,10 @@ BI.BubblesController = BI.inherit(BI.Controller, { options: { offset: [adjustXOffset, adjustYOffset] } + }, + { + name: "preventOverflow", + enabled: false } ] }); diff --git a/src/core/controller/controller.layer.js b/src/core/controller/controller.layer.js index 6887603f7..abc2d7f0e 100644 --- a/src/core/controller/controller.layer.js +++ b/src/core/controller/controller.layer.js @@ -63,41 +63,54 @@ BI.LayerController = BI.inherit(BI.Controller, { var layout = BI.createWidget({ type: "bi.absolute", invisible: true, - items: [{ - el: widget, - left: 0, - right: 0, - top: 0, - bottom: 0 - }] + items: [ + { + el: widget, + left: 0, + right: 0, + top: 0, + bottom: 0 + } + ] }, context); BI.createWidget({ type: "bi.absolute", element: op.container || this.options.render, - items: [{ - el: layout, - left: offset.left || 0, - right: offset.right || 0, - top: offset.top || 0, - bottom: offset.bottom || 0 - }] + items: [ + { + el: layout, + left: offset.left || 0, + right: offset.right || 0, + top: offset.top || 0, + bottom: offset.bottom || 0 + } + ] }); if (w) { layout.element.addClass("bi-popup-view"); - layout.element.css({ - left: w.offset().left + (offset.left || 0), - top: w.offset().top + (offset.top || 0), - width: offset.width || (w.outerWidth() - (offset.left || 0) - (offset.right || 0)) || "", - height: offset.height || (w.outerHeight() - (offset.top || 0) - (offset.bottom || 0)) || "" - }); - layout.element.on("__resize__", function () { - w.is(":visible") && - layout.element.css({ + + function getComputedPosition() { + + var css = { left: w.offset().left + (offset.left || 0), top: w.offset().top + (offset.top || 0), width: offset.width || (w.outerWidth() - (offset.left || 0) - (offset.right || 0)) || "", height: offset.height || (w.outerHeight() - (offset.top || 0) - (offset.bottom || 0)) || "" - }); + }; + + const { top, left, scaleY, scaleX } = BI.DOM.getPositionRelativeContainingBlockRect(layout.element[0]); + + css.top = (css.top - top) / scaleY; + css.left = (css.left - left) / scaleX; + + return css; + } + + + layout.element.css(getComputedPosition()); + layout.element.on("__resize__", function () { + w.is(":visible") && + layout.element.css(getComputedPosition()); }); } this.add(name, widget, layout); diff --git a/src/core/controller/popper.js b/src/core/controller/popper.js index a3708dbd5..2c6f613fd 100644 --- a/src/core/controller/popper.js +++ b/src/core/controller/popper.js @@ -1,1908 +1,2012 @@ /** - * @popperjs/core v2.9.2 - MIT License + * @popperjs/core v2.11.6 - MIT License */ (function (global, factory) { - factory(BI.Popper = {}); -}(this, (function (exports) { 'use strict'; - - function getBoundingClientRect(element) { - var rect = element.getBoundingClientRect(); - return { - width: rect.width, - height: rect.height, - top: rect.top, - right: rect.right, - bottom: rect.bottom, - left: rect.left, - x: rect.left, - y: rect.top - }; - } + factory(global.Popper = {}); +}(BI, (function (exports) { + 'use strict'; + + function getWindow(node) { + if (node == null) { + return window; + } - function getWindow(node) { - if (node == null) { - return window; + if (node.toString() !== '[object Window]') { + var ownerDocument = node.ownerDocument; + return ownerDocument ? ownerDocument.defaultView || window : window; + } + + return node; } - if (node.toString() !== '[object Window]') { - var ownerDocument = node.ownerDocument; - return ownerDocument ? ownerDocument.defaultView || window : window; + function isElement(node) { + var OwnElement = getWindow(node).Element; + return node instanceof OwnElement || node instanceof Element; } - return node; - } + function isHTMLElement(node) { + var OwnElement = getWindow(node).HTMLElement; + return node instanceof OwnElement || node instanceof HTMLElement; + } - function getWindowScroll(node) { - var win = getWindow(node); - var scrollLeft = win.pageXOffset; - var scrollTop = win.pageYOffset; - return { - scrollLeft: scrollLeft, - scrollTop: scrollTop - }; - } - - function isElement(node) { - var OwnElement = getWindow(node).Element; - return node instanceof OwnElement || node instanceof Element; - } - - function isHTMLElement(node) { - var OwnElement = getWindow(node).HTMLElement; - return node instanceof OwnElement || node instanceof HTMLElement; - } - - function isShadowRoot(node) { - // IE 11 has no ShadowRoot - if (typeof ShadowRoot === 'undefined') { - return false; + function isShadowRoot(node) { + // IE 11 has no ShadowRoot + if (typeof ShadowRoot === 'undefined') { + return false; + } + + var OwnElement = getWindow(node).ShadowRoot; + return node instanceof OwnElement || node instanceof ShadowRoot; } - var OwnElement = getWindow(node).ShadowRoot; - return node instanceof OwnElement || node instanceof ShadowRoot; - } + var max = Math.max; + var min = Math.min; + var round = Math.round; - function getHTMLElementScroll(element) { - return { - scrollLeft: element.scrollLeft, - scrollTop: element.scrollTop - }; - } + function getUAString() { + var uaData = navigator.userAgentData; - function getNodeScroll(node) { - if (node === getWindow(node) || !isHTMLElement(node)) { - return getWindowScroll(node); - } else { - return getHTMLElementScroll(node); - } - } - - function getNodeName(element) { - return element ? (element.nodeName || '').toLowerCase() : null; - } - - function getDocumentElement(element) { - // $FlowFixMe[incompatible-return]: assume body is always available - return ((isElement(element) ? element.ownerDocument : // $FlowFixMe[prop-missing] - element.document) || window.document).documentElement; - } - - function getWindowScrollBarX(element) { - // If has a CSS width greater than the viewport, then this will be - // incorrect for RTL. - // Popper 1 is broken in this case and never had a bug report so let's assume - // it's not an issue. I don't think anyone ever specifies width on - // anyway. - // Browsers where the left scrollbar doesn't cause an issue report `0` for - // this (e.g. Edge 2019, IE11, Safari) - return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft; - } - - function getComputedStyle(element) { - return getWindow(element).getComputedStyle(element); - } - - function isScrollParent(element) { - // Firefox wants us to check `-x` and `-y` variations as well - var _getComputedStyle = getComputedStyle(element), - overflow = _getComputedStyle.overflow, - overflowX = _getComputedStyle.overflowX, - overflowY = _getComputedStyle.overflowY; - - return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX); - } - - // Composite means it takes into account transforms as well as layout. - - function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) { - if (isFixed === void 0) { - isFixed = false; - } + if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) { + return uaData.brands.map(function (item) { + return item.brand + "/" + item.version; + }).join(' '); + } - var documentElement = getDocumentElement(offsetParent); - var rect = getBoundingClientRect(elementOrVirtualElement); - var isOffsetParentAnElement = isHTMLElement(offsetParent); - var scroll = { - scrollLeft: 0, - scrollTop: 0 - }; - var offsets = { - x: 0, - y: 0 - }; + return navigator.userAgent; + } - if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) { - if (getNodeName(offsetParent) !== 'body' || // https://github.com/popperjs/popper-core/issues/1078 - isScrollParent(documentElement)) { - scroll = getNodeScroll(offsetParent); - } - - if (isHTMLElement(offsetParent)) { - offsets = getBoundingClientRect(offsetParent); - offsets.x += offsetParent.clientLeft; - offsets.y += offsetParent.clientTop; - } else if (documentElement) { - offsets.x = getWindowScrollBarX(documentElement); - } + function isLayoutViewport() { + return !/^((?!chrome|android).)*safari/i.test(getUAString()); } - return { - x: rect.left + scroll.scrollLeft - offsets.x, - y: rect.top + scroll.scrollTop - offsets.y, - width: rect.width, - height: rect.height - }; - } + function getBoundingClientRect(element, includeScale, isFixedStrategy) { + if (includeScale === void 0) { + includeScale = false; + } - // means it doesn't take into account transforms. + if (isFixedStrategy === void 0) { + isFixedStrategy = false; + } - function getLayoutRect(element) { - var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed. - // Fixes https://github.com/popperjs/popper-core/issues/1223 + var clientRect = element.getBoundingClientRect(); + var scaleX = 1; + var scaleY = 1; - var width = element.offsetWidth; - var height = element.offsetHeight; + if (includeScale && isHTMLElement(element)) { + scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1; + scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1; + } - if (Math.abs(clientRect.width - width) <= 1) { - width = clientRect.width; + var _ref = isElement(element) ? getWindow(element) : window, + visualViewport = _ref.visualViewport; + + var addVisualOffsets = !isLayoutViewport() && isFixedStrategy; + var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX; + var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY; + var width = clientRect.width / scaleX; + var height = clientRect.height / scaleY; + return { + width: width, + height: height, + top: y, + right: x + width, + bottom: y + height, + left: x, + x: x, + y: y + }; } - if (Math.abs(clientRect.height - height) <= 1) { - height = clientRect.height; + function getWindowScroll(node) { + var win = getWindow(node); + var scrollLeft = win.pageXOffset; + var scrollTop = win.pageYOffset; + return { + scrollLeft: scrollLeft, + scrollTop: scrollTop + }; } - return { - x: element.offsetLeft, - y: element.offsetTop, - width: width, - height: height - }; - } + function getHTMLElementScroll(element) { + return { + scrollLeft: element.scrollLeft, + scrollTop: element.scrollTop + }; + } - function getParentNode(element) { - if (getNodeName(element) === 'html') { - return element; + function getNodeScroll(node) { + if (node === getWindow(node) || !isHTMLElement(node)) { + return getWindowScroll(node); + } else { + return getHTMLElementScroll(node); + } } - return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle - // $FlowFixMe[incompatible-return] - // $FlowFixMe[prop-missing] - element.assignedSlot || // step into the shadow DOM of the parent of a slotted node - element.parentNode || ( // DOM Element detected - isShadowRoot(element) ? element.host : null) || // ShadowRoot detected - // $FlowFixMe[incompatible-call]: HTMLElement is a Node - getDocumentElement(element) // fallback - - ); - } - - function getScrollParent(node) { - if (['html', 'body', '#document'].indexOf(getNodeName(node)) >= 0) { - // $FlowFixMe[incompatible-return]: assume body is always available - return node.ownerDocument.body; + function getNodeName(element) { + return element ? (element.nodeName || '').toLowerCase() : null; } - if (isHTMLElement(node) && isScrollParent(node)) { - return node; + function getDocumentElement(element) { + // $FlowFixMe[incompatible-return]: assume body is always available + return ((isElement(element) ? element.ownerDocument : // $FlowFixMe[prop-missing] + element.document) || window.document).documentElement; } - return getScrollParent(getParentNode(node)); - } + function getWindowScrollBarX(element) { + // If has a CSS width greater than the viewport, then this will be + // incorrect for RTL. + // Popper 1 is broken in this case and never had a bug report so let's assume + // it's not an issue. I don't think anyone ever specifies width on + // anyway. + // Browsers where the left scrollbar doesn't cause an issue report `0` for + // this (e.g. Edge 2019, IE11, Safari) + return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft; + } - /* - given a DOM element, return the list of all scroll parents, up the list of ancesors - until we get to the top window object. This list is what we attach scroll listeners - to, because if any of these parent elements scroll, we'll need to re-calculate the - reference element's position. - */ + function getComputedStyle(element) { + return getWindow(element).getComputedStyle(element); + } - function listScrollParents(element, list) { - var _element$ownerDocumen; + function isScrollParent(element) { + // Firefox wants us to check `-x` and `-y` variations as well + var _getComputedStyle = getComputedStyle(element), + overflow = _getComputedStyle.overflow, + overflowX = _getComputedStyle.overflowX, + overflowY = _getComputedStyle.overflowY; - if (list === void 0) { - list = []; + return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX); } - var scrollParent = getScrollParent(element); - var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body); - var win = getWindow(scrollParent); - var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent; - var updatedList = list.concat(target); - return isBody ? updatedList : // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here - updatedList.concat(listScrollParents(getParentNode(target))); - } - - function isTableElement(element) { - return ['table', 'td', 'th'].indexOf(getNodeName(element)) >= 0; - } - - function getTrueOffsetParent(element) { - if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837 - getComputedStyle(element).position === 'fixed') { - return null; + function isElementScaled(element) { + var rect = element.getBoundingClientRect(); + var scaleX = round(rect.width) / element.offsetWidth || 1; + var scaleY = round(rect.height) / element.offsetHeight || 1; + return scaleX !== 1 || scaleY !== 1; + } // Returns the composite rect of an element relative to its offsetParent. + // Composite means it takes into account transforms as well as layout. + + + function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) { + if (isFixed === void 0) { + isFixed = false; + } + + var isOffsetParentAnElement = isHTMLElement(offsetParent); + var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent); + var documentElement = getDocumentElement(offsetParent); + var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed); + var scroll = { + scrollLeft: 0, + scrollTop: 0 + }; + var offsets = { + x: 0, + y: 0 + }; + + if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) { + if (getNodeName(offsetParent) !== 'body' || // https://github.com/popperjs/popper-core/issues/1078 + isScrollParent(documentElement)) { + scroll = getNodeScroll(offsetParent); + } + + if (isHTMLElement(offsetParent)) { + offsets = getBoundingClientRect(offsetParent, true); + offsets.x += offsetParent.clientLeft; + offsets.y += offsetParent.clientTop; + } else if (documentElement) { + offsets.x = getWindowScrollBarX(documentElement); + } + } + + return { + x: rect.left + scroll.scrollLeft - offsets.x, + y: rect.top + scroll.scrollTop - offsets.y, + width: rect.width, + height: rect.height + }; } - return element.offsetParent; - } // `.offsetParent` reports `null` for fixed elements, while absolute elements - // return the containing block + // means it doesn't take into account transforms. + function getLayoutRect(element) { + var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed. + // Fixes https://github.com/popperjs/popper-core/issues/1223 - function getContainingBlock(element) { - var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1; - var isIE = navigator.userAgent.indexOf('Trident') !== -1; + var width = element.offsetWidth; + var height = element.offsetHeight; - if (isIE && isHTMLElement(element)) { - // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport - var elementCss = getComputedStyle(element); + if (Math.abs(clientRect.width - width) <= 1) { + width = clientRect.width; + } - if (elementCss.position === 'fixed') { - return null; - } + if (Math.abs(clientRect.height - height) <= 1) { + height = clientRect.height; + } + + return { + x: element.offsetLeft, + y: element.offsetTop, + width: width, + height: height + }; } - var currentNode = getParentNode(element); + function getParentNode(element) { + if (getNodeName(element) === 'html') { + return element; + } - while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) { - var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that - // create a containing block. - // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block + return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle + // $FlowFixMe[incompatible-return] + // $FlowFixMe[prop-missing] + element.assignedSlot || // step into the shadow DOM of the parent of a slotted node + element.parentNode || ( // DOM Element detected + isShadowRoot(element) ? element.host : null) || // ShadowRoot detected + // $FlowFixMe[incompatible-call]: HTMLElement is a Node + getDocumentElement(element) // fallback - if (css.transform !== 'none' || css.perspective !== 'none' || css.contain === 'paint' || ['transform', 'perspective'].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === 'filter' || isFirefox && css.filter && css.filter !== 'none') { - return currentNode; - } else { - currentNode = currentNode.parentNode; - } + ); } - return null; - } // Gets the closest ancestor positioned element. Handles some edge cases, - // such as table ancestors and cross browser bugs. + function getScrollParent(node) { + if (['html', 'body', '#document'].indexOf(getNodeName(node)) >= 0) { + // $FlowFixMe[incompatible-return]: assume body is always available + return node.ownerDocument.body; + } + if (isHTMLElement(node) && isScrollParent(node)) { + return node; + } + + return getScrollParent(getParentNode(node)); + } - function getOffsetParent(element) { - var window = getWindow(element); - var offsetParent = getTrueOffsetParent(element); + /* + given a DOM element, return the list of all scroll parents, up the list of ancesors + until we get to the top window object. This list is what we attach scroll listeners + to, because if any of these parent elements scroll, we'll need to re-calculate the + reference element's position. + */ - while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') { - offsetParent = getTrueOffsetParent(offsetParent); + function listScrollParents(element, list) { + var _element$ownerDocumen; + + if (list === void 0) { + list = []; + } + + var scrollParent = getScrollParent(element); + var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body); + var win = getWindow(scrollParent); + var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent; + var updatedList = list.concat(target); + return isBody ? updatedList : // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here + updatedList.concat(listScrollParents(getParentNode(target))); } - if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static')) { - return window; + function isTableElement(element) { + return ['table', 'td', 'th'].indexOf(getNodeName(element)) >= 0; } - return offsetParent || getContainingBlock(element) || window; - } - - var top = 'top'; - var bottom = 'bottom'; - var right = 'right'; - var left = 'left'; - var auto = 'auto'; - var basePlacements = [top, bottom, right, left]; - var start = 'start'; - var end = 'end'; - var clippingParents = 'clippingParents'; - var viewport = 'viewport'; - var popper = 'popper'; - var reference = 'reference'; - var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) { - return acc.concat([placement + "-" + start, placement + "-" + end]); - }, []); - var placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) { - return acc.concat([placement, placement + "-" + start, placement + "-" + end]); - }, []); // modifiers that need to read the DOM - - var beforeRead = 'beforeRead'; - var read = 'read'; - var afterRead = 'afterRead'; // pure-logic modifiers - - var beforeMain = 'beforeMain'; - var main = 'main'; - var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state) - - var beforeWrite = 'beforeWrite'; - var write = 'write'; - var afterWrite = 'afterWrite'; - var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite]; - - function order(modifiers) { - var map = new Map(); - var visited = new Set(); - var result = []; - modifiers.forEach(function (modifier) { - map.set(modifier.name, modifier); - }); // On visiting object, check for its dependencies and visit them recursively - - function sort(modifier) { - visited.add(modifier.name); - var requires = [].concat(modifier.requires || [], modifier.requiresIfExists || []); - requires.forEach(function (dep) { - if (!visited.has(dep)) { - var depModifier = map.get(dep); - - if (depModifier) { - sort(depModifier); - } + function getTrueOffsetParent(element) { + if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837 + getComputedStyle(element).position === 'fixed') { + return null; } - }); - result.push(modifier); - } - modifiers.forEach(function (modifier) { - if (!visited.has(modifier.name)) { - // check for visited object - sort(modifier); - } - }); - return result; - } - - function orderModifiers(modifiers) { - // order based on dependencies - var orderedModifiers = order(modifiers); // order based on phase - - return modifierPhases.reduce(function (acc, phase) { - return acc.concat(orderedModifiers.filter(function (modifier) { - return modifier.phase === phase; - })); - }, []); - } - - function debounce(fn) { - var pending; - return function () { - if (!pending) { - pending = new Promise(function (resolve) { - Promise.resolve().then(function () { - pending = undefined; - resolve(fn()); - }); - }); - } + return element.offsetParent; + } // `.offsetParent` reports `null` for fixed elements, while absolute elements + // return the containing block - return pending; - }; - } - function format(str) { - for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - args[_key - 1] = arguments[_key]; - } + function getContainingBlock(element) { + var isFirefox = /firefox/i.test(getUAString()); + var isIE = /Trident/i.test(getUAString()); - return [].concat(args).reduce(function (p, c) { - return p.replace(/%s/, c); - }, str); - } - - var INVALID_MODIFIER_ERROR = 'Popper: modifier "%s" provided an invalid %s property, expected %s but got %s'; - var MISSING_DEPENDENCY_ERROR = 'Popper: modifier "%s" requires "%s", but "%s" modifier is not available'; - var VALID_PROPERTIES = ['name', 'enabled', 'phase', 'fn', 'effect', 'requires', 'options']; - function validateModifiers(modifiers) { - modifiers.forEach(function (modifier) { - Object.keys(modifier).forEach(function (key) { - switch (key) { - case 'name': - if (typeof modifier.name !== 'string') { - console.error(format(INVALID_MODIFIER_ERROR, String(modifier.name), '"name"', '"string"', "\"" + String(modifier.name) + "\"")); + if (isIE && isHTMLElement(element)) { + // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport + var elementCss = getComputedStyle(element); + + if (elementCss.position === 'fixed') { + return null; } + } - break; + var currentNode = getParentNode(element); - case 'enabled': - if (typeof modifier.enabled !== 'boolean') { - console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"enabled"', '"boolean"', "\"" + String(modifier.enabled) + "\"")); - } + if (isShadowRoot(currentNode)) { + currentNode = currentNode.host; + } + + while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) { + var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that + // create a containing block. + // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block - case 'phase': - if (modifierPhases.indexOf(modifier.phase) < 0) { - console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"phase"', "either " + modifierPhases.join(', '), "\"" + String(modifier.phase) + "\"")); + if (css.transform !== 'none' || css.perspective !== 'none' || css.contain === 'paint' || ['transform', 'perspective'].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === 'filter' || isFirefox && css.filter && css.filter !== 'none') { + return currentNode; + } else { + currentNode = currentNode.parentNode; } + } - break; + return null; + } // Gets the closest ancestor positioned element. Handles some edge cases, + // such as table ancestors and cross browser bugs. - case 'fn': - if (typeof modifier.fn !== 'function') { - console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"fn"', '"function"', "\"" + String(modifier.fn) + "\"")); - } - break; + function getOffsetParent(element) { + var window = getWindow(element); + var offsetParent = getTrueOffsetParent(element); - case 'effect': - if (typeof modifier.effect !== 'function') { - console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"effect"', '"function"', "\"" + String(modifier.fn) + "\"")); - } + while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') { + offsetParent = getTrueOffsetParent(offsetParent); + } - break; + if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static')) { + return window; + } - case 'requires': - if (!Array.isArray(modifier.requires)) { - console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requires"', '"array"', "\"" + String(modifier.requires) + "\"")); - } + return offsetParent || getContainingBlock(element) || window; + } - break; + var top = 'top'; + var bottom = 'bottom'; + var right = 'right'; + var left = 'left'; + var auto = 'auto'; + var basePlacements = [top, bottom, right, left]; + var start = 'start'; + var end = 'end'; + var clippingParents = 'clippingParents'; + var viewport = 'viewport'; + var popper = 'popper'; + var reference = 'reference'; + var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) { + return acc.concat([placement + "-" + start, placement + "-" + end]); + }, []); + var placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) { + return acc.concat([placement, placement + "-" + start, placement + "-" + end]); + }, []); // modifiers that need to read the DOM + + var beforeRead = 'beforeRead'; + var read = 'read'; + var afterRead = 'afterRead'; // pure-logic modifiers + + var beforeMain = 'beforeMain'; + var main = 'main'; + var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state) + + var beforeWrite = 'beforeWrite'; + var write = 'write'; + var afterWrite = 'afterWrite'; + var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite]; + + function order(modifiers) { + var map = new Map(); + var visited = new Set(); + var result = []; + modifiers.forEach(function (modifier) { + map.set(modifier.name, modifier); + }); // On visiting object, check for its dependencies and visit them recursively + + function sort(modifier) { + visited.add(modifier.name); + var requires = [].concat(modifier.requires || [], modifier.requiresIfExists || []); + requires.forEach(function (dep) { + if (!visited.has(dep)) { + var depModifier = map.get(dep); + + if (depModifier) { + sort(depModifier); + } + } + }); + result.push(modifier); + } - case 'requiresIfExists': - if (!Array.isArray(modifier.requiresIfExists)) { - console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requiresIfExists"', '"array"', "\"" + String(modifier.requiresIfExists) + "\"")); + modifiers.forEach(function (modifier) { + if (!visited.has(modifier.name)) { + // check for visited object + sort(modifier); } + }); + return result; + } - break; + function orderModifiers(modifiers) { + // order based on dependencies + var orderedModifiers = order(modifiers); // order based on phase - case 'options': - case 'data': - break; + return modifierPhases.reduce(function (acc, phase) { + return acc.concat(orderedModifiers.filter(function (modifier) { + return modifier.phase === phase; + })); + }, []); + } - default: - console.error("PopperJS: an invalid property has been provided to the \"" + modifier.name + "\" modifier, valid properties are " + VALID_PROPERTIES.map(function (s) { - return "\"" + s + "\""; - }).join(', ') + "; but \"" + key + "\" was provided."); + function debounce(fn) { + var pending; + return function () { + if (!pending) { + pending = new Promise(function (resolve) { + Promise.resolve().then(function () { + pending = undefined; + resolve(fn()); + }); + }); + } + + return pending; + }; + } + + function format(str) { + for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; } - modifier.requires && modifier.requires.forEach(function (requirement) { - if (modifiers.find(function (mod) { - return mod.name === requirement; - }) == null) { - console.error(format(MISSING_DEPENDENCY_ERROR, String(modifier.name), requirement, requirement)); - } + return [].concat(args).reduce(function (p, c) { + return p.replace(/%s/, c); + }, str); + } + + var INVALID_MODIFIER_ERROR = 'Popper: modifier "%s" provided an invalid %s property, expected %s but got %s'; + var MISSING_DEPENDENCY_ERROR = 'Popper: modifier "%s" requires "%s", but "%s" modifier is not available'; + var VALID_PROPERTIES = ['name', 'enabled', 'phase', 'fn', 'effect', 'requires', 'options']; + + function validateModifiers(modifiers) { + modifiers.forEach(function (modifier) { + [].concat(Object.keys(modifier), VALID_PROPERTIES) // IE11-compatible replacement for `new Set(iterable)` + .filter(function (value, index, self) { + return self.indexOf(value) === index; + }).forEach(function (key) { + switch (key) { + case 'name': + if (typeof modifier.name !== 'string') { + console.error(format(INVALID_MODIFIER_ERROR, String(modifier.name), '"name"', '"string"', "\"" + String(modifier.name) + "\"")); + } + + break; + + case 'enabled': + if (typeof modifier.enabled !== 'boolean') { + console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"enabled"', '"boolean"', "\"" + String(modifier.enabled) + "\"")); + } + + break; + + case 'phase': + if (modifierPhases.indexOf(modifier.phase) < 0) { + console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"phase"', "either " + modifierPhases.join(', '), "\"" + String(modifier.phase) + "\"")); + } + + break; + + case 'fn': + if (typeof modifier.fn !== 'function') { + console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"fn"', '"function"', "\"" + String(modifier.fn) + "\"")); + } + + break; + + case 'effect': + if (modifier.effect != null && typeof modifier.effect !== 'function') { + console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"effect"', '"function"', "\"" + String(modifier.fn) + "\"")); + } + + break; + + case 'requires': + if (modifier.requires != null && !Array.isArray(modifier.requires)) { + console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requires"', '"array"', "\"" + String(modifier.requires) + "\"")); + } + + break; + + case 'requiresIfExists': + if (!Array.isArray(modifier.requiresIfExists)) { + console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requiresIfExists"', '"array"', "\"" + String(modifier.requiresIfExists) + "\"")); + } + + break; + + case 'options': + case 'data': + break; + + default: + console.error("PopperJS: an invalid property has been provided to the \"" + modifier.name + "\" modifier, valid properties are " + VALID_PROPERTIES.map(function (s) { + return "\"" + s + "\""; + }).join(', ') + "; but \"" + key + "\" was provided."); + } + + modifier.requires && modifier.requires.forEach(function (requirement) { + if (modifiers.find(function (mod) { + return mod.name === requirement; + }) == null) { + console.error(format(MISSING_DEPENDENCY_ERROR, String(modifier.name), requirement, requirement)); + } + }); + }); }); - }); - }); - } - - function uniqueBy(arr, fn) { - var identifiers = new Set(); - return arr.filter(function (item) { - var identifier = fn(item); - - if (!identifiers.has(identifier)) { - identifiers.add(identifier); - return true; - } - }); - } - - function getBasePlacement(placement) { - return placement.split('-')[0]; - } - - function mergeByName(modifiers) { - var merged = modifiers.reduce(function (merged, current) { - var existing = merged[current.name]; - merged[current.name] = existing ? Object.assign({}, existing, current, { - options: Object.assign({}, existing.options, current.options), - data: Object.assign({}, existing.data, current.data) - }) : current; - return merged; - }, {}); // IE11 does not support Object.values - - return Object.keys(merged).map(function (key) { - return merged[key]; - }); - } - - function getViewportRect(element) { - var win = getWindow(element); - var html = getDocumentElement(element); - var visualViewport = win.visualViewport; - var width = html.clientWidth; - var height = html.clientHeight; - var x = 0; - var y = 0; // NB: This isn't supported on iOS <= 12. If the keyboard is open, the popper - // can be obscured underneath it. - // Also, `html.clientHeight` adds the bottom bar height in Safari iOS, even - // if it isn't open, so if this isn't available, the popper will be detected - // to overflow the bottom of the screen too early. - - if (visualViewport) { - width = visualViewport.width; - height = visualViewport.height; // Uses Layout Viewport (like Chrome; Safari does not currently) - // In Chrome, it returns a value very close to 0 (+/-) but contains rounding - // errors due to floating point numbers, so we need to check precision. - // Safari returns a number <= 0, usually < -1 when pinch-zoomed - // Feature detection fails in mobile emulation mode in Chrome. - // Math.abs(win.innerWidth / visualViewport.scale - visualViewport.width) < - // 0.001 - // Fallback here: "Not Safari" userAgent - - if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) { - x = visualViewport.offsetLeft; - y = visualViewport.offsetTop; - } } - return { - width: width, - height: height, - x: x + getWindowScrollBarX(element), - y: y - }; - } + function uniqueBy(arr, fn) { + var identifiers = new Set(); + return arr.filter(function (item) { + var identifier = fn(item); - var max = Math.max; - var min = Math.min; - var round = Math.round; + if (!identifiers.has(identifier)) { + identifiers.add(identifier); + return true; + } + }); + } - // of the `` and `` rect bounds if horizontally scrollable + function getBasePlacement(placement) { + return placement.split('-')[0]; + } - function getDocumentRect(element) { - var _element$ownerDocumen; + function mergeByName(modifiers) { + var merged = modifiers.reduce(function (merged, current) { + var existing = merged[current.name]; + merged[current.name] = existing ? Object.assign({}, existing, current, { + options: Object.assign({}, existing.options, current.options), + data: Object.assign({}, existing.data, current.data) + }) : current; + return merged; + }, {}); // IE11 does not support Object.values + + return Object.keys(merged).map(function (key) { + return merged[key]; + }); + } - var html = getDocumentElement(element); - var winScroll = getWindowScroll(element); - var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body; - var width = max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0); - var height = max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0); - var x = -winScroll.scrollLeft + getWindowScrollBarX(element); - var y = -winScroll.scrollTop; + function getViewportRect(element, strategy) { + var win = getWindow(element); + var html = getDocumentElement(element); + var visualViewport = win.visualViewport; + var width = html.clientWidth; + var height = html.clientHeight; + var x = 0; + var y = 0; + + if (visualViewport) { + width = visualViewport.width; + height = visualViewport.height; + var layoutViewport = isLayoutViewport(); + + if (layoutViewport || !layoutViewport && strategy === 'fixed') { + x = visualViewport.offsetLeft; + y = visualViewport.offsetTop; + } + } - if (getComputedStyle(body || html).direction === 'rtl') { - x += max(html.clientWidth, body ? body.clientWidth : 0) - width; + return { + width: width, + height: height, + x: x + getWindowScrollBarX(element), + y: y + }; } - return { - width: width, - height: height, - x: x, - y: y - }; - } + // of the `` and `` rect bounds if horizontally scrollable - function contains(parent, child) { - var rootNode = child.getRootNode && child.getRootNode(); // First, attempt with faster native method + function getDocumentRect(element) { + var _element$ownerDocumen; - if (parent.contains(child)) { - return true; - } // then fallback to custom implementation with Shadow DOM support - else if (rootNode && isShadowRoot(rootNode)) { - var next = child; + var html = getDocumentElement(element); + var winScroll = getWindowScroll(element); + var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body; + var width = max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0); + var height = max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0); + var x = -winScroll.scrollLeft + getWindowScrollBarX(element); + var y = -winScroll.scrollTop; - do { - if (next && parent.isSameNode(next)) { - return true; - } // $FlowFixMe[prop-missing]: need a better way to handle this... - - - next = next.parentNode || next.host; - } while (next); - } // Give up, the result is false - - - return false; - } - - function rectToClientRect(rect) { - return Object.assign({}, rect, { - left: rect.x, - top: rect.y, - right: rect.x + rect.width, - bottom: rect.y + rect.height - }); - } - - function getInnerBoundingClientRect(element) { - var rect = getBoundingClientRect(element); - rect.top = rect.top + element.clientTop; - rect.left = rect.left + element.clientLeft; - rect.bottom = rect.top + element.clientHeight; - rect.right = rect.left + element.clientWidth; - rect.width = element.clientWidth; - rect.height = element.clientHeight; - rect.x = rect.left; - rect.y = rect.top; - return rect; - } - - function getClientRectFromMixedType(element, clippingParent) { - return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isHTMLElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element))); - } // A "clipping parent" is an overflowable container with the characteristic of - // clipping (or hiding) overflowing elements with a position different from - // `initial` - - - function getClippingParents(element) { - var clippingParents = listScrollParents(getParentNode(element)); - var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle(element).position) >= 0; - var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element; - - if (!isElement(clipperElement)) { - return []; - } // $FlowFixMe[incompatible-return]: https://github.com/facebook/flow/issues/1414 - - - return clippingParents.filter(function (clippingParent) { - return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body'; - }); - } // Gets the maximum area that the element is visible in due to any number of - // clipping parents - - - function getClippingRect(element, boundary, rootBoundary) { - var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary); - var clippingParents = [].concat(mainClippingParents, [rootBoundary]); - var firstClippingParent = clippingParents[0]; - var clippingRect = clippingParents.reduce(function (accRect, clippingParent) { - var rect = getClientRectFromMixedType(element, clippingParent); - accRect.top = max(rect.top, accRect.top); - accRect.right = min(rect.right, accRect.right); - accRect.bottom = min(rect.bottom, accRect.bottom); - accRect.left = max(rect.left, accRect.left); - return accRect; - }, getClientRectFromMixedType(element, firstClippingParent)); - clippingRect.width = clippingRect.right - clippingRect.left; - clippingRect.height = clippingRect.bottom - clippingRect.top; - clippingRect.x = clippingRect.left; - clippingRect.y = clippingRect.top; - return clippingRect; - } - - function getVariation(placement) { - return placement.split('-')[1]; - } - - function getMainAxisFromPlacement(placement) { - return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y'; - } - - function computeOffsets(_ref) { - var reference = _ref.reference, - element = _ref.element, - placement = _ref.placement; - var basePlacement = placement ? getBasePlacement(placement) : null; - var variation = placement ? getVariation(placement) : null; - var commonX = reference.x + reference.width / 2 - element.width / 2; - var commonY = reference.y + reference.height / 2 - element.height / 2; - var offsets; - - switch (basePlacement) { - case top: - offsets = { - x: commonX, - y: reference.y - element.height - }; - break; + if (getComputedStyle(body || html).direction === 'rtl') { + x += max(html.clientWidth, body ? body.clientWidth : 0) - width; + } - case bottom: - offsets = { - x: commonX, - y: reference.y + reference.height + return { + width: width, + height: height, + x: x, + y: y }; - break; + } - case right: - offsets = { - x: reference.x + reference.width, - y: commonY - }; - break; + function contains(parent, child) { + var rootNode = child.getRootNode && child.getRootNode(); // First, attempt with faster native method - case left: - offsets = { - x: reference.x - element.width, - y: commonY - }; - break; + if (parent.contains(child)) { + return true; + } // then fallback to custom implementation with Shadow DOM support + else if (rootNode && isShadowRoot(rootNode)) { + var next = child; - default: - offsets = { - x: reference.x, - y: reference.y - }; + do { + if (next && parent.isSameNode(next)) { + return true; + } // $FlowFixMe[prop-missing]: need a better way to handle this... + + + next = next.parentNode || next.host; + } while (next); + } // Give up, the result is false + + + return false; + } + + function rectToClientRect(rect) { + return Object.assign({}, rect, { + left: rect.x, + top: rect.y, + right: rect.x + rect.width, + bottom: rect.y + rect.height + }); } - var mainAxis = basePlacement ? getMainAxisFromPlacement(basePlacement) : null; + function getInnerBoundingClientRect(element, strategy) { + var rect = getBoundingClientRect(element, false, strategy === 'fixed'); + rect.top = rect.top + element.clientTop; + rect.left = rect.left + element.clientLeft; + rect.bottom = rect.top + element.clientHeight; + rect.right = rect.left + element.clientWidth; + rect.width = element.clientWidth; + rect.height = element.clientHeight; + rect.x = rect.left; + rect.y = rect.top; + return rect; + } + + function getClientRectFromMixedType(element, clippingParent, strategy) { + return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element))); + } // A "clipping parent" is an overflowable container with the characteristic of + // clipping (or hiding) overflowing elements with a position different from + // `initial` + - if (mainAxis != null) { - var len = mainAxis === 'y' ? 'height' : 'width'; + function getClippingParents(element) { + var clippingParents = listScrollParents(getParentNode(element)); + var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle(element).position) >= 0; + var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element; - switch (variation) { - case start: - offsets[mainAxis] = offsets[mainAxis] - (reference[len] / 2 - element[len] / 2); - break; + if (!isElement(clipperElement)) { + return []; + } // $FlowFixMe[incompatible-return]: https://github.com/facebook/flow/issues/1414 - case end: - offsets[mainAxis] = offsets[mainAxis] + (reference[len] / 2 - element[len] / 2); - break; - } + + return clippingParents.filter(function (clippingParent) { + return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body'; + }); + } // Gets the maximum area that the element is visible in due to any number of + // clipping parents + + + function getClippingRect(element, boundary, rootBoundary, strategy) { + var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary); + var clippingParents = [].concat(mainClippingParents, [rootBoundary]); + var firstClippingParent = clippingParents[0]; + var clippingRect = clippingParents.reduce(function (accRect, clippingParent) { + var rect = getClientRectFromMixedType(element, clippingParent, strategy); + accRect.top = max(rect.top, accRect.top); + accRect.right = min(rect.right, accRect.right); + accRect.bottom = min(rect.bottom, accRect.bottom); + accRect.left = max(rect.left, accRect.left); + return accRect; + }, getClientRectFromMixedType(element, firstClippingParent, strategy)); + clippingRect.width = clippingRect.right - clippingRect.left; + clippingRect.height = clippingRect.bottom - clippingRect.top; + clippingRect.x = clippingRect.left; + clippingRect.y = clippingRect.top; + return clippingRect; } - return offsets; - } + function getVariation(placement) { + return placement.split('-')[1]; + } - function getFreshSideObject() { - return { - top: 0, - right: 0, - bottom: 0, - left: 0 - }; - } - - function mergePaddingObject(paddingObject) { - return Object.assign({}, getFreshSideObject(), paddingObject); - } - - function expandToHashMap(value, keys) { - return keys.reduce(function (hashMap, key) { - hashMap[key] = value; - return hashMap; - }, {}); - } - - function detectOverflow(state, options) { - if (options === void 0) { - options = {}; + function getMainAxisFromPlacement(placement) { + return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y'; } - var _options = options, - _options$placement = _options.placement, - placement = _options$placement === void 0 ? state.placement : _options$placement, - _options$boundary = _options.boundary, - boundary = _options$boundary === void 0 ? clippingParents : _options$boundary, - _options$rootBoundary = _options.rootBoundary, - rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary, - _options$elementConte = _options.elementContext, - elementContext = _options$elementConte === void 0 ? popper : _options$elementConte, - _options$altBoundary = _options.altBoundary, - altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary, - _options$padding = _options.padding, - padding = _options$padding === void 0 ? 0 : _options$padding; - var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements)); - var altContext = elementContext === popper ? reference : popper; - var referenceElement = state.elements.reference; - var popperRect = state.rects.popper; - var element = state.elements[altBoundary ? altContext : elementContext]; - var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary); - var referenceClientRect = getBoundingClientRect(referenceElement); - var popperOffsets = computeOffsets({ - reference: referenceClientRect, - element: popperRect, - strategy: 'absolute', - placement: placement - }); - var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets)); - var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect - // 0 or negative = within the clipping rect - - var overflowOffsets = { - top: clippingClientRect.top - elementClientRect.top + paddingObject.top, - bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom, - left: clippingClientRect.left - elementClientRect.left + paddingObject.left, - right: elementClientRect.right - clippingClientRect.right + paddingObject.right - }; - var offsetData = state.modifiersData.offset; // Offsets can be applied only to the popper element - - if (elementContext === popper && offsetData) { - var offset = offsetData[placement]; - Object.keys(overflowOffsets).forEach(function (key) { - var multiply = [right, bottom].indexOf(key) >= 0 ? 1 : -1; - var axis = [top, bottom].indexOf(key) >= 0 ? 'y' : 'x'; - overflowOffsets[key] += offset[axis] * multiply; - }); + function computeOffsets(_ref) { + var reference = _ref.reference, + element = _ref.element, + placement = _ref.placement; + var basePlacement = placement ? getBasePlacement(placement) : null; + var variation = placement ? getVariation(placement) : null; + var commonX = reference.x + reference.width / 2 - element.width / 2; + var commonY = reference.y + reference.height / 2 - element.height / 2; + var offsets; + + switch (basePlacement) { + case top: + offsets = { + x: commonX, + y: reference.y - element.height + }; + break; + + case bottom: + offsets = { + x: commonX, + y: reference.y + reference.height + }; + break; + + case right: + offsets = { + x: reference.x + reference.width, + y: commonY + }; + break; + + case left: + offsets = { + x: reference.x - element.width, + y: commonY + }; + break; + + default: + offsets = { + x: reference.x, + y: reference.y + }; + } + + var mainAxis = basePlacement ? getMainAxisFromPlacement(basePlacement) : null; + + if (mainAxis != null) { + var len = mainAxis === 'y' ? 'height' : 'width'; + + switch (variation) { + case start: + offsets[mainAxis] = offsets[mainAxis] - (reference[len] / 2 - element[len] / 2); + break; + + case end: + offsets[mainAxis] = offsets[mainAxis] + (reference[len] / 2 - element[len] / 2); + break; + } + } + + return offsets; } - return overflowOffsets; - } + function getFreshSideObject() { + return { + top: 0, + right: 0, + bottom: 0, + left: 0 + }; + } - var INVALID_ELEMENT_ERROR = 'Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.'; - var INFINITE_LOOP_ERROR = 'Popper: An infinite loop in the modifiers cycle has been detected! The cycle has been interrupted to prevent a browser crash.'; - var DEFAULT_OPTIONS = { - placement: 'bottom', - modifiers: [], - strategy: 'absolute' - }; + function mergePaddingObject(paddingObject) { + return Object.assign({}, getFreshSideObject(), paddingObject); + } - function areValidElements() { - for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; + function expandToHashMap(value, keys) { + return keys.reduce(function (hashMap, key) { + hashMap[key] = value; + return hashMap; + }, {}); } - return !args.some(function (element) { - return !(element && typeof element.getBoundingClientRect === 'function'); - }); - } + function detectOverflow(state, options) { + if (options === void 0) { + options = {}; + } + + var _options = options, + _options$placement = _options.placement, + placement = _options$placement === void 0 ? state.placement : _options$placement, + _options$strategy = _options.strategy, + strategy = _options$strategy === void 0 ? state.strategy : _options$strategy, + _options$boundary = _options.boundary, + boundary = _options$boundary === void 0 ? clippingParents : _options$boundary, + _options$rootBoundary = _options.rootBoundary, + rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary, + _options$elementConte = _options.elementContext, + elementContext = _options$elementConte === void 0 ? popper : _options$elementConte, + _options$altBoundary = _options.altBoundary, + altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary, + _options$padding = _options.padding, + padding = _options$padding === void 0 ? 0 : _options$padding; + var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements)); + var altContext = elementContext === popper ? reference : popper; + var popperRect = state.rects.popper; + var element = state.elements[altBoundary ? altContext : elementContext]; + var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy); + var referenceClientRect = getBoundingClientRect(state.elements.reference); + var popperOffsets = computeOffsets({ + reference: referenceClientRect, + element: popperRect, + strategy: 'absolute', + placement: placement + }); + var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets)); + var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect + // 0 or negative = within the clipping rect + + var overflowOffsets = { + top: clippingClientRect.top - elementClientRect.top + paddingObject.top, + bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom, + left: clippingClientRect.left - elementClientRect.left + paddingObject.left, + right: elementClientRect.right - clippingClientRect.right + paddingObject.right + }; + var offsetData = state.modifiersData.offset; // Offsets can be applied only to the popper element + + if (elementContext === popper && offsetData) { + var offset = offsetData[placement]; + Object.keys(overflowOffsets).forEach(function (key) { + var multiply = [right, bottom].indexOf(key) >= 0 ? 1 : -1; + var axis = [top, bottom].indexOf(key) >= 0 ? 'y' : 'x'; + overflowOffsets[key] += offset[axis] * multiply; + }); + } - function popperGenerator(generatorOptions) { - if (generatorOptions === void 0) { - generatorOptions = {}; + return overflowOffsets; } - var _generatorOptions = generatorOptions, - _generatorOptions$def = _generatorOptions.defaultModifiers, - defaultModifiers = _generatorOptions$def === void 0 ? [] : _generatorOptions$def, - _generatorOptions$def2 = _generatorOptions.defaultOptions, - defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2; - return function createPopper(reference, popper, options) { - if (options === void 0) { - options = defaultOptions; - } - - var state = { + var INVALID_ELEMENT_ERROR = 'Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.'; + var INFINITE_LOOP_ERROR = 'Popper: An infinite loop in the modifiers cycle has been detected! The cycle has been interrupted to prevent a browser crash.'; + var DEFAULT_OPTIONS = { placement: 'bottom', - orderedModifiers: [], - options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions), - modifiersData: {}, - elements: { - reference: reference, - popper: popper - }, - attributes: {}, - styles: {} - }; - var effectCleanupFns = []; - var isDestroyed = false; - var instance = { - state: state, - setOptions: function setOptions(options) { - cleanupModifierEffects(); - state.options = Object.assign({}, defaultOptions, state.options, options); - state.scrollParents = { - reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [], - popper: listScrollParents(popper) - }; // Orders the modifiers based on their dependencies and `phase` - // properties - - var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers, state.options.modifiers))); // Strip out disabled modifiers - - state.orderedModifiers = orderedModifiers.filter(function (m) { - return m.enabled; - }); // Validate the provided modifiers so that the consumer will get warned - // if one of the modifiers is invalid for any reason - - { - var modifiers = uniqueBy([].concat(orderedModifiers, state.options.modifiers), function (_ref) { - var name = _ref.name; - return name; - }); - validateModifiers(modifiers); + modifiers: [], + strategy: 'absolute' + }; + + function areValidElements() { + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return !args.some(function (element) { + return !(element && typeof element.getBoundingClientRect === 'function'); + }); + } - if (getBasePlacement(state.options.placement) === auto) { - var flipModifier = state.orderedModifiers.find(function (_ref2) { - var name = _ref2.name; - return name === 'flip'; - }); + function popperGenerator(generatorOptions) { + if (generatorOptions === void 0) { + generatorOptions = {}; + } - if (!flipModifier) { - console.error(['Popper: "auto" placements require the "flip" modifier be', 'present and enabled to work.'].join(' ')); - } + var _generatorOptions = generatorOptions, + _generatorOptions$def = _generatorOptions.defaultModifiers, + defaultModifiers = _generatorOptions$def === void 0 ? [] : _generatorOptions$def, + _generatorOptions$def2 = _generatorOptions.defaultOptions, + defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2; + return function createPopper(reference, popper, options) { + if (options === void 0) { + options = defaultOptions; } - var _getComputedStyle = getComputedStyle(popper), - marginTop = _getComputedStyle.marginTop, - marginRight = _getComputedStyle.marginRight, - marginBottom = _getComputedStyle.marginBottom, - marginLeft = _getComputedStyle.marginLeft; // We no longer take into account `margins` on the popper, and it can - // cause bugs with positioning, so we'll warn the consumer + var state = { + placement: 'bottom', + orderedModifiers: [], + options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions), + modifiersData: {}, + elements: { + reference: reference, + popper: popper + }, + attributes: {}, + styles: {} + }; + var effectCleanupFns = []; + var isDestroyed = false; + var instance = { + state: state, + setOptions: function setOptions(setOptionsAction) { + var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction; + cleanupModifierEffects(); + state.options = Object.assign({}, defaultOptions, state.options, options); + state.scrollParents = { + reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [], + popper: listScrollParents(popper) + }; // Orders the modifiers based on their dependencies and `phase` + // properties + + var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers, state.options.modifiers))); // Strip out disabled modifiers + + state.orderedModifiers = orderedModifiers.filter(function (m) { + return m.enabled; + }); // Validate the provided modifiers so that the consumer will get warned + // if one of the modifiers is invalid for any reason + + { + var modifiers = uniqueBy([].concat(orderedModifiers, state.options.modifiers), function (_ref) { + var name = _ref.name; + return name; + }); + validateModifiers(modifiers); + + if (getBasePlacement(state.options.placement) === auto) { + var flipModifier = state.orderedModifiers.find(function (_ref2) { + var name = _ref2.name; + return name === 'flip'; + }); + + if (!flipModifier) { + console.error(['Popper: "auto" placements require the "flip" modifier be', 'present and enabled to work.'].join(' ')); + } + } + + var _getComputedStyle = getComputedStyle(popper), + marginTop = _getComputedStyle.marginTop, + marginRight = _getComputedStyle.marginRight, + marginBottom = _getComputedStyle.marginBottom, + marginLeft = _getComputedStyle.marginLeft; // We no longer take into account `margins` on the popper, and it can + // cause bugs with positioning, so we'll warn the consumer + + + if ([marginTop, marginRight, marginBottom, marginLeft].some(function (margin) { + return parseFloat(margin); + })) { + console.warn(['Popper: CSS "margin" styles cannot be used to apply padding', 'between the popper and its reference element or boundary.', 'To replicate margin, use the `offset` modifier, as well as', 'the `padding` option in the `preventOverflow` and `flip`', 'modifiers.'].join(' ')); + } + } + + runModifierEffects(); + return instance.update(); + }, + // Sync update – it will always be executed, even if not necessary. This + // is useful for low frequency updates where sync behavior simplifies the + // logic. + // For high frequency updates (e.g. `resize` and `scroll` events), always + // prefer the async Popper#update method + forceUpdate: function forceUpdate() { + if (isDestroyed) { + return; + } + + var _state$elements = state.elements, + reference = _state$elements.reference, + popper = _state$elements.popper; // Don't proceed if `reference` or `popper` are not valid elements + // anymore + + if (!areValidElements(reference, popper)) { + { + console.error(INVALID_ELEMENT_ERROR); + } + + return; + } // Store the reference and popper rects to be read by modifiers + + + state.rects = { + reference: getCompositeRect(reference, getOffsetParent(popper), state.options.strategy === 'fixed'), + popper: getLayoutRect(popper) + }; // Modifiers have the ability to reset the current update cycle. The + // most common use case for this is the `flip` modifier changing the + // placement, which then needs to re-run all the modifiers, because the + // logic was previously ran for the previous placement and is therefore + // stale/incorrect + + state.reset = false; + state.placement = state.options.placement; // On each update cycle, the `modifiersData` property for each modifier + // is filled with the initial data specified by the modifier. This means + // it doesn't persist and is fresh on each update. + // To ensure persistent data, use `${name}#persistent` + + state.orderedModifiers.forEach(function (modifier) { + return state.modifiersData[modifier.name] = Object.assign({}, modifier.data); + }); + var __debug_loops__ = 0; + + for (var index = 0; index < state.orderedModifiers.length; index++) { + { + __debug_loops__ += 1; + + if (__debug_loops__ > 100) { + console.error(INFINITE_LOOP_ERROR); + break; + } + } + + if (state.reset === true) { + state.reset = false; + index = -1; + continue; + } + + var _state$orderedModifie = state.orderedModifiers[index], + fn = _state$orderedModifie.fn, + _state$orderedModifie2 = _state$orderedModifie.options, + _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2, + name = _state$orderedModifie.name; + + if (typeof fn === 'function') { + state = fn({ + state: state, + options: _options, + name: name, + instance: instance + }) || state; + } + } + }, + // Async and optimistically optimized update – it will not be executed if + // not necessary (debounced to run at most once-per-tick) + update: debounce(function () { + return new Promise(function (resolve) { + instance.forceUpdate(); + resolve(state); + }); + }), + destroy: function destroy() { + cleanupModifierEffects(); + isDestroyed = true; + } + }; + + if (!areValidElements(reference, popper)) { + { + console.error(INVALID_ELEMENT_ERROR); + } + + return instance; + } + instance.setOptions(options).then(function (state) { + if (!isDestroyed && options.onFirstUpdate) { + options.onFirstUpdate(state); + } + }); // Modifiers have the ability to execute arbitrary code before the first + // update cycle runs. They will be executed in the same order as the update + // cycle. This is useful when a modifier adds some persistent data that + // other modifiers need to use, but the modifier is run after the dependent + // one. + + function runModifierEffects() { + state.orderedModifiers.forEach(function (_ref3) { + var name = _ref3.name, + _ref3$options = _ref3.options, + options = _ref3$options === void 0 ? {} : _ref3$options, + effect = _ref3.effect; + + if (typeof effect === 'function') { + var cleanupFn = effect({ + state: state, + name: name, + instance: instance, + options: options + }); + + var noopFn = function noopFn() { + }; + + effectCleanupFns.push(cleanupFn || noopFn); + } + }); + } - if ([marginTop, marginRight, marginBottom, marginLeft].some(function (margin) { - return parseFloat(margin); - })) { - console.warn(['Popper: CSS "margin" styles cannot be used to apply padding', 'between the popper and its reference element or boundary.', 'To replicate margin, use the `offset` modifier, as well as', 'the `padding` option in the `preventOverflow` and `flip`', 'modifiers.'].join(' ')); + function cleanupModifierEffects() { + effectCleanupFns.forEach(function (fn) { + return fn(); + }); + effectCleanupFns = []; } - } - runModifierEffects(); - return instance.update(); - }, - // Sync update – it will always be executed, even if not necessary. This - // is useful for low frequency updates where sync behavior simplifies the - // logic. - // For high frequency updates (e.g. `resize` and `scroll` events), always - // prefer the async Popper#update method - forceUpdate: function forceUpdate() { - if (isDestroyed) { - return; - } + return instance; + }; + } - var _state$elements = state.elements, - reference = _state$elements.reference, - popper = _state$elements.popper; // Don't proceed if `reference` or `popper` are not valid elements - // anymore + var passive = { + passive: true + }; - if (!areValidElements(reference, popper)) { - { - console.error(INVALID_ELEMENT_ERROR); - } + function effect$2(_ref) { + var state = _ref.state, + instance = _ref.instance, + options = _ref.options; + var _options$scroll = options.scroll, + scroll = _options$scroll === void 0 ? true : _options$scroll, + _options$resize = options.resize, + resize = _options$resize === void 0 ? true : _options$resize; + var window = getWindow(state.elements.popper); + var scrollParents = [].concat(state.scrollParents.reference, state.scrollParents.popper); + + if (scroll) { + scrollParents.forEach(function (scrollParent) { + scrollParent.addEventListener('scroll', instance.update, passive); + }); + } - return; - } // Store the reference and popper rects to be read by modifiers - - - state.rects = { - reference: getCompositeRect(reference, getOffsetParent(popper), state.options.strategy === 'fixed'), - popper: getLayoutRect(popper) - }; // Modifiers have the ability to reset the current update cycle. The - // most common use case for this is the `flip` modifier changing the - // placement, which then needs to re-run all the modifiers, because the - // logic was previously ran for the previous placement and is therefore - // stale/incorrect - - state.reset = false; - state.placement = state.options.placement; // On each update cycle, the `modifiersData` property for each modifier - // is filled with the initial data specified by the modifier. This means - // it doesn't persist and is fresh on each update. - // To ensure persistent data, use `${name}#persistent` - - state.orderedModifiers.forEach(function (modifier) { - return state.modifiersData[modifier.name] = Object.assign({}, modifier.data); - }); - var __debug_loops__ = 0; - - for (var index = 0; index < state.orderedModifiers.length; index++) { - { - __debug_loops__ += 1; + if (resize) { + window.addEventListener('resize', instance.update, passive); + } - if (__debug_loops__ > 100) { - console.error(INFINITE_LOOP_ERROR); - break; - } + return function () { + if (scroll) { + scrollParents.forEach(function (scrollParent) { + scrollParent.removeEventListener('scroll', instance.update, passive); + }); } - if (state.reset === true) { - state.reset = false; - index = -1; - continue; + if (resize) { + window.removeEventListener('resize', instance.update, passive); } + }; + } // eslint-disable-next-line import/no-unused-modules - var _state$orderedModifie = state.orderedModifiers[index], - fn = _state$orderedModifie.fn, - _state$orderedModifie2 = _state$orderedModifie.options, - _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2, - name = _state$orderedModifie.name; - if (typeof fn === 'function') { - state = fn({ - state: state, - options: _options, - name: name, - instance: instance - }) || state; - } - } + var eventListeners = { + name: 'eventListeners', + enabled: true, + phase: 'write', + fn: function fn() { }, - // Async and optimistically optimized update – it will not be executed if - // not necessary (debounced to run at most once-per-tick) - update: debounce(function () { - return new Promise(function (resolve) { - instance.forceUpdate(); - resolve(state); - }); - }), - destroy: function destroy() { - cleanupModifierEffects(); - isDestroyed = true; + effect: effect$2, + data: {} + }; + + function popperOffsets(_ref) { + var state = _ref.state, + name = _ref.name; + // Offsets are the actual position the popper needs to have to be + // properly positioned near its reference element + // This is the most basic placement, and will be adjusted by + // the modifiers in the next step + state.modifiersData[name] = computeOffsets({ + reference: state.rects.reference, + element: state.rects.popper, + strategy: 'absolute', + placement: state.placement + }); + } // eslint-disable-next-line import/no-unused-modules + + + var popperOffsets$1 = { + name: 'popperOffsets', + enabled: true, + phase: 'read', + fn: popperOffsets, + data: {} + }; + + var unsetSides = { + top: 'auto', + right: 'auto', + bottom: 'auto', + left: 'auto' + }; // Round the offsets to the nearest suitable subpixel based on the DPR. + // Zooming can change the DPR, but it seems to report a value that will + // cleanly divide the values into the appropriate subpixels. + + function roundOffsetsByDPR(_ref) { + var x = _ref.x, + y = _ref.y; + var win = window; + var dpr = win.devicePixelRatio || 1; + return { + x: round(x * dpr) / dpr || 0, + y: round(y * dpr) / dpr || 0 + }; + } + + function mapToStyles(_ref2) { + var _Object$assign2; + + var popper = _ref2.popper, + popperRect = _ref2.popperRect, + placement = _ref2.placement, + variation = _ref2.variation, + offsets = _ref2.offsets, + position = _ref2.position, + gpuAcceleration = _ref2.gpuAcceleration, + adaptive = _ref2.adaptive, + roundOffsets = _ref2.roundOffsets, + isFixed = _ref2.isFixed; + var _offsets$x = offsets.x, + x = _offsets$x === void 0 ? 0 : _offsets$x, + _offsets$y = offsets.y, + y = _offsets$y === void 0 ? 0 : _offsets$y; + + var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({ + x: x, + y: y + }) : { + x: x, + y: y + }; + + x = _ref3.x; + y = _ref3.y; + var hasX = offsets.hasOwnProperty('x'); + var hasY = offsets.hasOwnProperty('y'); + var sideX = left; + var sideY = top; + var win = window; + + if (adaptive) { + var offsetParent = getOffsetParent(popper); + var heightProp = 'clientHeight'; + var widthProp = 'clientWidth'; + + if (offsetParent === getWindow(popper)) { + offsetParent = getDocumentElement(popper); + + if (getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') { + heightProp = 'scrollHeight'; + widthProp = 'scrollWidth'; + } + } // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it + + + offsetParent = offsetParent; + + if (placement === top || (placement === left || placement === right) && variation === end) { + sideY = bottom; + var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing] + offsetParent[heightProp]; + y -= offsetY - popperRect.height; + y *= gpuAcceleration ? 1 : -1; + } + + if (placement === left || (placement === top || placement === bottom) && variation === end) { + sideX = right; + var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing] + offsetParent[widthProp]; + x -= offsetX - popperRect.width; + x *= gpuAcceleration ? 1 : -1; + } + } + + var commonStyles = Object.assign({ + position: position + }, adaptive && unsetSides); + + var _ref4 = roundOffsets === true ? roundOffsetsByDPR({ + x: x, + y: y + }) : { + x: x, + y: y + }; + + x = _ref4.x; + y = _ref4.y; + + if (gpuAcceleration) { + var _Object$assign; + + return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign)); } - }; - if (!areValidElements(reference, popper)) { + return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2)); + } + + function computeStyles(_ref5) { + var state = _ref5.state, + options = _ref5.options; + var _options$gpuAccelerat = options.gpuAcceleration, + gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat, + _options$adaptive = options.adaptive, + adaptive = _options$adaptive === void 0 ? true : _options$adaptive, + _options$roundOffsets = options.roundOffsets, + roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets; + { - console.error(INVALID_ELEMENT_ERROR); + var transitionProperty = getComputedStyle(state.elements.popper).transitionProperty || ''; + + if (adaptive && ['transform', 'top', 'right', 'bottom', 'left'].some(function (property) { + return transitionProperty.indexOf(property) >= 0; + })) { + console.warn(['Popper: Detected CSS transitions on at least one of the following', 'CSS properties: "transform", "top", "right", "bottom", "left".', '\n\n', 'Disable the "computeStyles" modifier\'s `adaptive` option to allow', 'for smooth transitions, or remove these properties from the CSS', 'transition declaration on the popper element if only transitioning', 'opacity or background-color for example.', '\n\n', 'We recommend using the popper element as a wrapper around an inner', 'element that can have any CSS property transitioned for animations.'].join(' ')); + } } - return instance; - } + var commonStyles = { + placement: getBasePlacement(state.placement), + variation: getVariation(state.placement), + popper: state.elements.popper, + popperRect: state.rects.popper, + gpuAcceleration: gpuAcceleration, + isFixed: state.options.strategy === 'fixed' + }; - instance.setOptions(options).then(function (state) { - if (!isDestroyed && options.onFirstUpdate) { - options.onFirstUpdate(state); + if (state.modifiersData.popperOffsets != null) { + state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, { + offsets: state.modifiersData.popperOffsets, + position: state.options.strategy, + adaptive: adaptive, + roundOffsets: roundOffsets + }))); } - }); // Modifiers have the ability to execute arbitrary code before the first - // update cycle runs. They will be executed in the same order as the update - // cycle. This is useful when a modifier adds some persistent data that - // other modifiers need to use, but the modifier is run after the dependent - // one. - - function runModifierEffects() { - state.orderedModifiers.forEach(function (_ref3) { - var name = _ref3.name, - _ref3$options = _ref3.options, - options = _ref3$options === void 0 ? {} : _ref3$options, - effect = _ref3.effect; - - if (typeof effect === 'function') { - var cleanupFn = effect({ - state: state, - name: name, - instance: instance, - options: options - }); - var noopFn = function noopFn() {}; + if (state.modifiersData.arrow != null) { + state.styles.arrow = Object.assign({}, state.styles.arrow, mapToStyles(Object.assign({}, commonStyles, { + offsets: state.modifiersData.arrow, + position: 'absolute', + adaptive: false, + roundOffsets: roundOffsets + }))); + } - effectCleanupFns.push(cleanupFn || noopFn); - } + state.attributes.popper = Object.assign({}, state.attributes.popper, { + 'data-popper-placement': state.placement }); - } + } // eslint-disable-next-line import/no-unused-modules - function cleanupModifierEffects() { - effectCleanupFns.forEach(function (fn) { - return fn(); - }); - effectCleanupFns = []; - } - return instance; + var computeStyles$1 = { + name: 'computeStyles', + enabled: true, + phase: 'beforeWrite', + fn: computeStyles, + data: {} }; - } - - var passive = { - passive: true - }; - - function effect$2(_ref) { - var state = _ref.state, - instance = _ref.instance, - options = _ref.options; - var _options$scroll = options.scroll, - scroll = _options$scroll === void 0 ? true : _options$scroll, - _options$resize = options.resize, - resize = _options$resize === void 0 ? true : _options$resize; - var window = getWindow(state.elements.popper); - var scrollParents = [].concat(state.scrollParents.reference, state.scrollParents.popper); - - if (scroll) { - scrollParents.forEach(function (scrollParent) { - scrollParent.addEventListener('scroll', instance.update, passive); - }); - } - if (resize) { - window.addEventListener('resize', instance.update, passive); - } + // and applies them to the HTMLElements such as popper and arrow + + function applyStyles(_ref) { + var state = _ref.state; + Object.keys(state.elements).forEach(function (name) { + var style = state.styles[name] || {}; + var attributes = state.attributes[name] || {}; + var element = state.elements[name]; // arrow is optional + virtual elements - return function () { - if (scroll) { - scrollParents.forEach(function (scrollParent) { - scrollParent.removeEventListener('scroll', instance.update, passive); + if (!isHTMLElement(element) || !getNodeName(element)) { + return; + } // Flow doesn't support to extend this property, but it's the most + // effective way to apply styles to an HTMLElement + // $FlowFixMe[cannot-write] + + + Object.assign(element.style, style); + Object.keys(attributes).forEach(function (name) { + var value = attributes[name]; + + if (value === false) { + element.removeAttribute(name); + } else { + element.setAttribute(name, value === true ? '' : value); + } + }); }); - } + } - if (resize) { - window.removeEventListener('resize', instance.update, passive); - } - }; - } // eslint-disable-next-line import/no-unused-modules - - - var eventListeners = { - name: 'eventListeners', - enabled: true, - phase: 'write', - fn: function fn() {}, - effect: effect$2, - data: {} - }; - - function popperOffsets(_ref) { - var state = _ref.state, - name = _ref.name; - // Offsets are the actual position the popper needs to have to be - // properly positioned near its reference element - // This is the most basic placement, and will be adjusted by - // the modifiers in the next step - state.modifiersData[name] = computeOffsets({ - reference: state.rects.reference, - element: state.rects.popper, - strategy: 'absolute', - placement: state.placement - }); - } // eslint-disable-next-line import/no-unused-modules - - - var popperOffsets$1 = { - name: 'popperOffsets', - enabled: true, - phase: 'read', - fn: popperOffsets, - data: {} - }; - - var unsetSides = { - top: 'auto', - right: 'auto', - bottom: 'auto', - left: 'auto' - }; // Round the offsets to the nearest suitable subpixel based on the DPR. - // Zooming can change the DPR, but it seems to report a value that will - // cleanly divide the values into the appropriate subpixels. - - function roundOffsetsByDPR(_ref) { - var x = _ref.x, - y = _ref.y; - var win = window; - var dpr = win.devicePixelRatio || 1; - return { - x: round(round(x * dpr) / dpr) || 0, - y: round(round(y * dpr) / dpr) || 0 - }; - } - - function mapToStyles(_ref2) { - var _Object$assign2; - - var popper = _ref2.popper, - popperRect = _ref2.popperRect, - placement = _ref2.placement, - offsets = _ref2.offsets, - position = _ref2.position, - gpuAcceleration = _ref2.gpuAcceleration, - adaptive = _ref2.adaptive, - roundOffsets = _ref2.roundOffsets; - - var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets, - _ref3$x = _ref3.x, - x = _ref3$x === void 0 ? 0 : _ref3$x, - _ref3$y = _ref3.y, - y = _ref3$y === void 0 ? 0 : _ref3$y; - - var hasX = offsets.hasOwnProperty('x'); - var hasY = offsets.hasOwnProperty('y'); - var sideX = left; - var sideY = top; - var win = window; - - if (adaptive) { - var offsetParent = getOffsetParent(popper); - var heightProp = 'clientHeight'; - var widthProp = 'clientWidth'; - - if (offsetParent === getWindow(popper)) { - offsetParent = getDocumentElement(popper); - - if (getComputedStyle(offsetParent).position !== 'static') { - heightProp = 'scrollHeight'; - widthProp = 'scrollWidth'; + function effect$1(_ref2) { + var state = _ref2.state; + var initialStyles = { + popper: { + position: state.options.strategy, + left: '0', + top: '0', + margin: '0' + }, + arrow: { + position: 'absolute' + }, + reference: {} + }; + Object.assign(state.elements.popper.style, initialStyles.popper); + state.styles = initialStyles; + + if (state.elements.arrow) { + Object.assign(state.elements.arrow.style, initialStyles.arrow); } - } // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it + return function () { + Object.keys(state.elements).forEach(function (name) { + var element = state.elements[name]; + var attributes = state.attributes[name] || {}; + var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them + + var style = styleProperties.reduce(function (style, property) { + style[property] = ''; + return style; + }, {}); // arrow is optional + virtual elements + + if (!isHTMLElement(element) || !getNodeName(element)) { + return; + } + + Object.assign(element.style, style); + Object.keys(attributes).forEach(function (attribute) { + element.removeAttribute(attribute); + }); + }); + }; + } // eslint-disable-next-line import/no-unused-modules - offsetParent = offsetParent; - if (placement === top) { - sideY = bottom; // $FlowFixMe[prop-missing] + var applyStyles$1 = { + name: 'applyStyles', + enabled: true, + phase: 'write', + fn: applyStyles, + effect: effect$1, + requires: ['computeStyles'] + }; - y -= offsetParent[heightProp] - popperRect.height; - y *= gpuAcceleration ? 1 : -1; - } + function distanceAndSkiddingToXY(placement, rects, offset) { + var basePlacement = getBasePlacement(placement); + var invertDistance = [left, top].indexOf(basePlacement) >= 0 ? -1 : 1; + + var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, { + placement: placement + })) : offset, + skidding = _ref[0], + distance = _ref[1]; + + skidding = skidding || 0; + distance = (distance || 0) * invertDistance; + return [left, right].indexOf(basePlacement) >= 0 ? { + x: distance, + y: skidding + } : { + x: skidding, + y: distance + }; + } - if (placement === left) { - sideX = right; // $FlowFixMe[prop-missing] + function offset(_ref2) { + var state = _ref2.state, + options = _ref2.options, + name = _ref2.name; + var _options$offset = options.offset, + offset = _options$offset === void 0 ? [0, 0] : _options$offset; + var data = placements.reduce(function (acc, placement) { + acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset); + return acc; + }, {}); + var _data$state$placement = data[state.placement], + x = _data$state$placement.x, + y = _data$state$placement.y; + + if (state.modifiersData.popperOffsets != null) { + state.modifiersData.popperOffsets.x += x; + state.modifiersData.popperOffsets.y += y; + } - x -= offsetParent[widthProp] - popperRect.width; - x *= gpuAcceleration ? 1 : -1; - } - } + state.modifiersData[name] = data; + } // eslint-disable-next-line import/no-unused-modules - var commonStyles = Object.assign({ - position: position - }, adaptive && unsetSides); - if (gpuAcceleration) { - var _Object$assign; + var offset$1 = { + name: 'offset', + enabled: true, + phase: 'main', + requires: ['popperOffsets'], + fn: offset + }; - return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) < 2 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign)); - } + var hash$1 = { + left: 'right', + right: 'left', + bottom: 'top', + top: 'bottom' + }; - return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2)); - } - - function computeStyles(_ref4) { - var state = _ref4.state, - options = _ref4.options; - var _options$gpuAccelerat = options.gpuAcceleration, - gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat, - _options$adaptive = options.adaptive, - adaptive = _options$adaptive === void 0 ? true : _options$adaptive, - _options$roundOffsets = options.roundOffsets, - roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets; - - { - var transitionProperty = getComputedStyle(state.elements.popper).transitionProperty || ''; - - if (adaptive && ['transform', 'top', 'right', 'bottom', 'left'].some(function (property) { - return transitionProperty.indexOf(property) >= 0; - })) { - console.warn(['Popper: Detected CSS transitions on at least one of the following', 'CSS properties: "transform", "top", "right", "bottom", "left".', '\n\n', 'Disable the "computeStyles" modifier\'s `adaptive` option to allow', 'for smooth transitions, or remove these properties from the CSS', 'transition declaration on the popper element if only transitioning', 'opacity or background-color for example.', '\n\n', 'We recommend using the popper element as a wrapper around an inner', 'element that can have any CSS property transitioned for animations.'].join(' ')); - } + function getOppositePlacement(placement) { + return placement.replace(/left|right|bottom|top/g, function (matched) { + return hash$1[matched]; + }); } - var commonStyles = { - placement: getBasePlacement(state.placement), - popper: state.elements.popper, - popperRect: state.rects.popper, - gpuAcceleration: gpuAcceleration + var hash = { + start: 'end', + end: 'start' }; - if (state.modifiersData.popperOffsets != null) { - state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, { - offsets: state.modifiersData.popperOffsets, - position: state.options.strategy, - adaptive: adaptive, - roundOffsets: roundOffsets - }))); + function getOppositeVariationPlacement(placement) { + return placement.replace(/start|end/g, function (matched) { + return hash[matched]; + }); } - if (state.modifiersData.arrow != null) { - state.styles.arrow = Object.assign({}, state.styles.arrow, mapToStyles(Object.assign({}, commonStyles, { - offsets: state.modifiersData.arrow, - position: 'absolute', - adaptive: false, - roundOffsets: roundOffsets - }))); + function computeAutoPlacement(state, options) { + if (options === void 0) { + options = {}; + } + + var _options = options, + placement = _options.placement, + boundary = _options.boundary, + rootBoundary = _options.rootBoundary, + padding = _options.padding, + flipVariations = _options.flipVariations, + _options$allowedAutoP = _options.allowedAutoPlacements, + allowedAutoPlacements = _options$allowedAutoP === void 0 ? placements : _options$allowedAutoP; + var variation = getVariation(placement); + var placements$1 = variation ? flipVariations ? variationPlacements : variationPlacements.filter(function (placement) { + return getVariation(placement) === variation; + }) : basePlacements; + var allowedPlacements = placements$1.filter(function (placement) { + return allowedAutoPlacements.indexOf(placement) >= 0; + }); + + if (allowedPlacements.length === 0) { + allowedPlacements = placements$1; + + { + console.error(['Popper: The `allowedAutoPlacements` option did not allow any', 'placements. Ensure the `placement` option matches the variation', 'of the allowed placements.', 'For example, "auto" cannot be used to allow "bottom-start".', 'Use "auto-start" instead.'].join(' ')); + } + } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions... + + + var overflows = allowedPlacements.reduce(function (acc, placement) { + acc[placement] = detectOverflow(state, { + placement: placement, + boundary: boundary, + rootBoundary: rootBoundary, + padding: padding + })[getBasePlacement(placement)]; + return acc; + }, {}); + return Object.keys(overflows).sort(function (a, b) { + return overflows[a] - overflows[b]; + }); } - state.attributes.popper = Object.assign({}, state.attributes.popper, { - 'data-popper-placement': state.placement - }); - } // eslint-disable-next-line import/no-unused-modules + function getExpandedFallbackPlacements(placement) { + if (getBasePlacement(placement) === auto) { + return []; + } + var oppositePlacement = getOppositePlacement(placement); + return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)]; + } - var computeStyles$1 = { - name: 'computeStyles', - enabled: true, - phase: 'beforeWrite', - fn: computeStyles, - data: {} - }; + function flip(_ref) { + var state = _ref.state, + options = _ref.options, + name = _ref.name; - // and applies them to the HTMLElements such as popper and arrow + if (state.modifiersData[name]._skip) { + return; + } - function applyStyles(_ref) { - var state = _ref.state; - Object.keys(state.elements).forEach(function (name) { - var style = state.styles[name] || {}; - var attributes = state.attributes[name] || {}; - var element = state.elements[name]; // arrow is optional + virtual elements + var _options$mainAxis = options.mainAxis, + checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, + _options$altAxis = options.altAxis, + checkAltAxis = _options$altAxis === void 0 ? true : _options$altAxis, + specifiedFallbackPlacements = options.fallbackPlacements, + padding = options.padding, + boundary = options.boundary, + rootBoundary = options.rootBoundary, + altBoundary = options.altBoundary, + _options$flipVariatio = options.flipVariations, + flipVariations = _options$flipVariatio === void 0 ? true : _options$flipVariatio, + allowedAutoPlacements = options.allowedAutoPlacements; + var preferredPlacement = state.options.placement; + var basePlacement = getBasePlacement(preferredPlacement); + var isBasePlacement = basePlacement === preferredPlacement; + var fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipVariations ? [getOppositePlacement(preferredPlacement)] : getExpandedFallbackPlacements(preferredPlacement)); + var placements = [preferredPlacement].concat(fallbackPlacements).reduce(function (acc, placement) { + return acc.concat(getBasePlacement(placement) === auto ? computeAutoPlacement(state, { + placement: placement, + boundary: boundary, + rootBoundary: rootBoundary, + padding: padding, + flipVariations: flipVariations, + allowedAutoPlacements: allowedAutoPlacements + }) : placement); + }, []); + var referenceRect = state.rects.reference; + var popperRect = state.rects.popper; + var checksMap = new Map(); + var makeFallbackChecks = true; + var firstFittingPlacement = placements[0]; + + for (var i = 0; i < placements.length; i++) { + var placement = placements[i]; + + var _basePlacement = getBasePlacement(placement); + + var isStartVariation = getVariation(placement) === start; + var isVertical = [top, bottom].indexOf(_basePlacement) >= 0; + var len = isVertical ? 'width' : 'height'; + var overflow = detectOverflow(state, { + placement: placement, + boundary: boundary, + rootBoundary: rootBoundary, + altBoundary: altBoundary, + padding: padding + }); + var mainVariationSide = isVertical ? isStartVariation ? right : left : isStartVariation ? bottom : top; - if (!isHTMLElement(element) || !getNodeName(element)) { - return; - } // Flow doesn't support to extend this property, but it's the most - // effective way to apply styles to an HTMLElement - // $FlowFixMe[cannot-write] + if (referenceRect[len] > popperRect[len]) { + mainVariationSide = getOppositePlacement(mainVariationSide); + } + var altVariationSide = getOppositePlacement(mainVariationSide); + var checks = []; - Object.assign(element.style, style); - Object.keys(attributes).forEach(function (name) { - var value = attributes[name]; + if (checkMainAxis) { + checks.push(overflow[_basePlacement] <= 0); + } - if (value === false) { - element.removeAttribute(name); - } else { - element.setAttribute(name, value === true ? '' : value); + if (checkAltAxis) { + checks.push(overflow[mainVariationSide] <= 0, overflow[altVariationSide] <= 0); + } + + if (checks.every(function (check) { + return check; + })) { + firstFittingPlacement = placement; + makeFallbackChecks = false; + break; + } + + checksMap.set(placement, checks); } - }); - }); - } - - function effect$1(_ref2) { - var state = _ref2.state; - var initialStyles = { - popper: { - position: state.options.strategy, - left: '0', - top: '0', - margin: '0' - }, - arrow: { - position: 'absolute' - }, - reference: {} - }; - Object.assign(state.elements.popper.style, initialStyles.popper); - state.styles = initialStyles; - if (state.elements.arrow) { - Object.assign(state.elements.arrow.style, initialStyles.arrow); - } + if (makeFallbackChecks) { + // `2` may be desired in some cases – research later + var numberOfChecks = flipVariations ? 3 : 1; + + var _loop = function _loop(_i) { + var fittingPlacement = placements.find(function (placement) { + var checks = checksMap.get(placement); - return function () { - Object.keys(state.elements).forEach(function (name) { - var element = state.elements[name]; - var attributes = state.attributes[name] || {}; - var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them + if (checks) { + return checks.slice(0, _i).every(function (check) { + return check; + }); + } + }); - var style = styleProperties.reduce(function (style, property) { - style[property] = ''; - return style; - }, {}); // arrow is optional + virtual elements + if (fittingPlacement) { + firstFittingPlacement = fittingPlacement; + return "break"; + } + }; - if (!isHTMLElement(element) || !getNodeName(element)) { - return; + for (var _i = numberOfChecks; _i > 0; _i--) { + var _ret = _loop(_i); + + if (_ret === "break") break; + } } - Object.assign(element.style, style); - Object.keys(attributes).forEach(function (attribute) { - element.removeAttribute(attribute); - }); - }); - }; - } // eslint-disable-next-line import/no-unused-modules - - - var applyStyles$1 = { - name: 'applyStyles', - enabled: true, - phase: 'write', - fn: applyStyles, - effect: effect$1, - requires: ['computeStyles'] - }; - - function distanceAndSkiddingToXY(placement, rects, offset) { - var basePlacement = getBasePlacement(placement); - var invertDistance = [left, top].indexOf(basePlacement) >= 0 ? -1 : 1; - - var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, { - placement: placement - })) : offset, - skidding = _ref[0], - distance = _ref[1]; - - skidding = skidding || 0; - distance = (distance || 0) * invertDistance; - return [left, right].indexOf(basePlacement) >= 0 ? { - x: distance, - y: skidding - } : { - x: skidding, - y: distance + if (state.placement !== firstFittingPlacement) { + state.modifiersData[name]._skip = true; + state.placement = firstFittingPlacement; + state.reset = true; + } + } // eslint-disable-next-line import/no-unused-modules + + + var flip$1 = { + name: 'flip', + enabled: true, + phase: 'main', + fn: flip, + requiresIfExists: ['offset'], + data: { + _skip: false + } }; - } - - function offset(_ref2) { - var state = _ref2.state, - options = _ref2.options, - name = _ref2.name; - var _options$offset = options.offset, - offset = _options$offset === void 0 ? [0, 0] : _options$offset; - var data = placements.reduce(function (acc, placement) { - acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset); - return acc; - }, {}); - var _data$state$placement = data[state.placement], - x = _data$state$placement.x, - y = _data$state$placement.y; - - if (state.modifiersData.popperOffsets != null) { - state.modifiersData.popperOffsets.x += x; - state.modifiersData.popperOffsets.y += y; + + function getAltAxis(axis) { + return axis === 'x' ? 'y' : 'x'; } - state.modifiersData[name] = data; - } // eslint-disable-next-line import/no-unused-modules - - - var offset$1 = { - name: 'offset', - enabled: true, - phase: 'main', - requires: ['popperOffsets'], - fn: offset - }; - - var hash$1 = { - left: 'right', - right: 'left', - bottom: 'top', - top: 'bottom' - }; - function getOppositePlacement(placement) { - return placement.replace(/left|right|bottom|top/g, function (matched) { - return hash$1[matched]; - }); - } - - var hash = { - start: 'end', - end: 'start' - }; - function getOppositeVariationPlacement(placement) { - return placement.replace(/start|end/g, function (matched) { - return hash[matched]; - }); - } - - function computeAutoPlacement(state, options) { - if (options === void 0) { - options = {}; + function within(min$1, value, max$1) { + return max(min$1, min(value, max$1)); } - var _options = options, - placement = _options.placement, - boundary = _options.boundary, - rootBoundary = _options.rootBoundary, - padding = _options.padding, - flipVariations = _options.flipVariations, - _options$allowedAutoP = _options.allowedAutoPlacements, - allowedAutoPlacements = _options$allowedAutoP === void 0 ? placements : _options$allowedAutoP; - var variation = getVariation(placement); - var placements$1 = variation ? flipVariations ? variationPlacements : variationPlacements.filter(function (placement) { - return getVariation(placement) === variation; - }) : basePlacements; - var allowedPlacements = placements$1.filter(function (placement) { - return allowedAutoPlacements.indexOf(placement) >= 0; - }); - - if (allowedPlacements.length === 0) { - allowedPlacements = placements$1; - - { - console.error(['Popper: The `allowedAutoPlacements` option did not allow any', 'placements. Ensure the `placement` option matches the variation', 'of the allowed placements.', 'For example, "auto" cannot be used to allow "bottom-start".', 'Use "auto-start" instead.'].join(' ')); - } - } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions... - - - var overflows = allowedPlacements.reduce(function (acc, placement) { - acc[placement] = detectOverflow(state, { - placement: placement, - boundary: boundary, - rootBoundary: rootBoundary, - padding: padding - })[getBasePlacement(placement)]; - return acc; - }, {}); - return Object.keys(overflows).sort(function (a, b) { - return overflows[a] - overflows[b]; - }); - } - - function getExpandedFallbackPlacements(placement) { - if (getBasePlacement(placement) === auto) { - return []; + function withinMaxClamp(min, value, max) { + var v = within(min, value, max); + return v > max ? max : v; } - var oppositePlacement = getOppositePlacement(placement); - return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)]; - } + function preventOverflow(_ref) { + var state = _ref.state, + options = _ref.options, + name = _ref.name; + var _options$mainAxis = options.mainAxis, + checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, + _options$altAxis = options.altAxis, + checkAltAxis = _options$altAxis === void 0 ? false : _options$altAxis, + boundary = options.boundary, + rootBoundary = options.rootBoundary, + altBoundary = options.altBoundary, + padding = options.padding, + _options$tether = options.tether, + tether = _options$tether === void 0 ? true : _options$tether, + _options$tetherOffset = options.tetherOffset, + tetherOffset = _options$tetherOffset === void 0 ? 0 : _options$tetherOffset; + var overflow = detectOverflow(state, { + boundary: boundary, + rootBoundary: rootBoundary, + padding: padding, + altBoundary: altBoundary + }); + var basePlacement = getBasePlacement(state.placement); + var variation = getVariation(state.placement); + var isBasePlacement = !variation; + var mainAxis = getMainAxisFromPlacement(basePlacement); + var altAxis = getAltAxis(mainAxis); + var popperOffsets = state.modifiersData.popperOffsets; + var referenceRect = state.rects.reference; + var popperRect = state.rects.popper; + var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, { + placement: state.placement + })) : tetherOffset; + var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? { + mainAxis: tetherOffsetValue, + altAxis: tetherOffsetValue + } : Object.assign({ + mainAxis: 0, + altAxis: 0 + }, tetherOffsetValue); + var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null; + var data = { + x: 0, + y: 0 + }; - function flip(_ref) { - var state = _ref.state, - options = _ref.options, - name = _ref.name; + if (!popperOffsets) { + return; + } - if (state.modifiersData[name]._skip) { - return; - } + if (checkMainAxis) { + var _offsetModifierState$; + + var mainSide = mainAxis === 'y' ? top : left; + var altSide = mainAxis === 'y' ? bottom : right; + var len = mainAxis === 'y' ? 'height' : 'width'; + var offset = popperOffsets[mainAxis]; + var min$1 = offset + overflow[mainSide]; + var max$1 = offset - overflow[altSide]; + var additive = tether ? -popperRect[len] / 2 : 0; + var minLen = variation === start ? referenceRect[len] : popperRect[len]; + var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go + // outside the reference bounds + + var arrowElement = state.elements.arrow; + var arrowRect = tether && arrowElement ? getLayoutRect(arrowElement) : { + width: 0, + height: 0 + }; + var arrowPaddingObject = state.modifiersData['arrow#persistent'] ? state.modifiersData['arrow#persistent'].padding : getFreshSideObject(); + var arrowPaddingMin = arrowPaddingObject[mainSide]; + var arrowPaddingMax = arrowPaddingObject[altSide]; // If the reference length is smaller than the arrow length, we don't want + // to include its full size in the calculation. If the reference is small + // and near the edge of a boundary, the popper can overflow even if the + // reference is not overflowing as well (e.g. virtual elements with no + // width or height) + + var arrowLen = within(0, referenceRect[len], arrowRect[len]); + var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis; + var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis; + var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow); + var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0; + var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0; + var tetherMin = offset + minOffset - offsetModifierValue - clientOffset; + var tetherMax = offset + maxOffset - offsetModifierValue; + var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1); + popperOffsets[mainAxis] = preventedOffset; + data[mainAxis] = preventedOffset - offset; + } - var _options$mainAxis = options.mainAxis, - checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, - _options$altAxis = options.altAxis, - checkAltAxis = _options$altAxis === void 0 ? true : _options$altAxis, - specifiedFallbackPlacements = options.fallbackPlacements, - padding = options.padding, - boundary = options.boundary, - rootBoundary = options.rootBoundary, - altBoundary = options.altBoundary, - _options$flipVariatio = options.flipVariations, - flipVariations = _options$flipVariatio === void 0 ? true : _options$flipVariatio, - allowedAutoPlacements = options.allowedAutoPlacements; - var preferredPlacement = state.options.placement; - var basePlacement = getBasePlacement(preferredPlacement); - var isBasePlacement = basePlacement === preferredPlacement; - var fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipVariations ? [getOppositePlacement(preferredPlacement)] : getExpandedFallbackPlacements(preferredPlacement)); - var placements = [preferredPlacement].concat(fallbackPlacements).reduce(function (acc, placement) { - return acc.concat(getBasePlacement(placement) === auto ? computeAutoPlacement(state, { - placement: placement, - boundary: boundary, - rootBoundary: rootBoundary, - padding: padding, - flipVariations: flipVariations, - allowedAutoPlacements: allowedAutoPlacements - }) : placement); - }, []); - var referenceRect = state.rects.reference; - var popperRect = state.rects.popper; - var checksMap = new Map(); - var makeFallbackChecks = true; - var firstFittingPlacement = placements[0]; - - for (var i = 0; i < placements.length; i++) { - var placement = placements[i]; - - var _basePlacement = getBasePlacement(placement); - - var isStartVariation = getVariation(placement) === start; - var isVertical = [top, bottom].indexOf(_basePlacement) >= 0; - var len = isVertical ? 'width' : 'height'; - var overflow = detectOverflow(state, { - placement: placement, - boundary: boundary, - rootBoundary: rootBoundary, - altBoundary: altBoundary, - padding: padding - }); - var mainVariationSide = isVertical ? isStartVariation ? right : left : isStartVariation ? bottom : top; - - if (referenceRect[len] > popperRect[len]) { - mainVariationSide = getOppositePlacement(mainVariationSide); - } - - var altVariationSide = getOppositePlacement(mainVariationSide); - var checks = []; - - if (checkMainAxis) { - checks.push(overflow[_basePlacement] <= 0); - } - - if (checkAltAxis) { - checks.push(overflow[mainVariationSide] <= 0, overflow[altVariationSide] <= 0); - } - - if (checks.every(function (check) { - return check; - })) { - firstFittingPlacement = placement; - makeFallbackChecks = false; - break; - } - - checksMap.set(placement, checks); - } + if (checkAltAxis) { + var _offsetModifierState$2; - if (makeFallbackChecks) { - // `2` may be desired in some cases – research later - var numberOfChecks = flipVariations ? 3 : 1; + var _mainSide = mainAxis === 'x' ? top : left; - var _loop = function _loop(_i) { - var fittingPlacement = placements.find(function (placement) { - var checks = checksMap.get(placement); + var _altSide = mainAxis === 'x' ? bottom : right; - if (checks) { - return checks.slice(0, _i).every(function (check) { - return check; - }); - } - }); + var _offset = popperOffsets[altAxis]; - if (fittingPlacement) { - firstFittingPlacement = fittingPlacement; - return "break"; - } - }; + var _len = altAxis === 'y' ? 'height' : 'width'; - for (var _i = numberOfChecks; _i > 0; _i--) { - var _ret = _loop(_i); + var _min = _offset + overflow[_mainSide]; - if (_ret === "break") break; - } - } + var _max = _offset - overflow[_altSide]; - if (state.placement !== firstFittingPlacement) { - state.modifiersData[name]._skip = true; - state.placement = firstFittingPlacement; - state.reset = true; - } - } // eslint-disable-next-line import/no-unused-modules + var isOriginSide = [top, left].indexOf(basePlacement) !== -1; + var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0; - var flip$1 = { - name: 'flip', - enabled: true, - phase: 'main', - fn: flip, - requiresIfExists: ['offset'], - data: { - _skip: false - } - }; - - function getAltAxis(axis) { - return axis === 'x' ? 'y' : 'x'; - } - - function within(min$1, value, max$1) { - return max(min$1, min(value, max$1)); - } - - function preventOverflow(_ref) { - var state = _ref.state, - options = _ref.options, - name = _ref.name; - var _options$mainAxis = options.mainAxis, - checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, - _options$altAxis = options.altAxis, - checkAltAxis = _options$altAxis === void 0 ? false : _options$altAxis, - boundary = options.boundary, - rootBoundary = options.rootBoundary, - altBoundary = options.altBoundary, - padding = options.padding, - _options$tether = options.tether, - tether = _options$tether === void 0 ? true : _options$tether, - _options$tetherOffset = options.tetherOffset, - tetherOffset = _options$tetherOffset === void 0 ? 0 : _options$tetherOffset; - var overflow = detectOverflow(state, { - boundary: boundary, - rootBoundary: rootBoundary, - padding: padding, - altBoundary: altBoundary - }); - var basePlacement = getBasePlacement(state.placement); - var variation = getVariation(state.placement); - var isBasePlacement = !variation; - var mainAxis = getMainAxisFromPlacement(basePlacement); - var altAxis = getAltAxis(mainAxis); - var popperOffsets = state.modifiersData.popperOffsets; - var referenceRect = state.rects.reference; - var popperRect = state.rects.popper; - var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, { - placement: state.placement - })) : tetherOffset; - var data = { - x: 0, - y: 0 + var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis; + + var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max; + + var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max); + + popperOffsets[altAxis] = _preventedOffset; + data[altAxis] = _preventedOffset - _offset; + } + + state.modifiersData[name] = data; + } // eslint-disable-next-line import/no-unused-modules + + + var preventOverflow$1 = { + name: 'preventOverflow', + enabled: true, + phase: 'main', + fn: preventOverflow, + requiresIfExists: ['offset'] }; - if (!popperOffsets) { - return; - } + var toPaddingObject = function toPaddingObject(padding, state) { + padding = typeof padding === 'function' ? padding(Object.assign({}, state.rects, { + placement: state.placement + })) : padding; + return mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements)); + }; - if (checkMainAxis || checkAltAxis) { - var mainSide = mainAxis === 'y' ? top : left; - var altSide = mainAxis === 'y' ? bottom : right; - var len = mainAxis === 'y' ? 'height' : 'width'; - var offset = popperOffsets[mainAxis]; - var min$1 = popperOffsets[mainAxis] + overflow[mainSide]; - var max$1 = popperOffsets[mainAxis] - overflow[altSide]; - var additive = tether ? -popperRect[len] / 2 : 0; - var minLen = variation === start ? referenceRect[len] : popperRect[len]; - var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go - // outside the reference bounds - - var arrowElement = state.elements.arrow; - var arrowRect = tether && arrowElement ? getLayoutRect(arrowElement) : { - width: 0, - height: 0 - }; - var arrowPaddingObject = state.modifiersData['arrow#persistent'] ? state.modifiersData['arrow#persistent'].padding : getFreshSideObject(); - var arrowPaddingMin = arrowPaddingObject[mainSide]; - var arrowPaddingMax = arrowPaddingObject[altSide]; // If the reference length is smaller than the arrow length, we don't want - // to include its full size in the calculation. If the reference is small - // and near the edge of a boundary, the popper can overflow even if the - // reference is not overflowing as well (e.g. virtual elements with no - // width or height) - - var arrowLen = within(0, referenceRect[len], arrowRect[len]); - var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - tetherOffsetValue : minLen - arrowLen - arrowPaddingMin - tetherOffsetValue; - var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + tetherOffsetValue : maxLen + arrowLen + arrowPaddingMax + tetherOffsetValue; - var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow); - var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0; - var offsetModifierValue = state.modifiersData.offset ? state.modifiersData.offset[state.placement][mainAxis] : 0; - var tetherMin = popperOffsets[mainAxis] + minOffset - offsetModifierValue - clientOffset; - var tetherMax = popperOffsets[mainAxis] + maxOffset - offsetModifierValue; - - if (checkMainAxis) { - var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1); - popperOffsets[mainAxis] = preventedOffset; - data[mainAxis] = preventedOffset - offset; - } - - if (checkAltAxis) { - var _mainSide = mainAxis === 'x' ? top : left; - - var _altSide = mainAxis === 'x' ? bottom : right; - - var _offset = popperOffsets[altAxis]; - - var _min = _offset + overflow[_mainSide]; - - var _max = _offset - overflow[_altSide]; - - var _preventedOffset = within(tether ? min(_min, tetherMin) : _min, _offset, tether ? max(_max, tetherMax) : _max); - - popperOffsets[altAxis] = _preventedOffset; - data[altAxis] = _preventedOffset - _offset; - } - } + function arrow(_ref) { + var _state$modifiersData$; - state.modifiersData[name] = data; - } // eslint-disable-next-line import/no-unused-modules - - - var preventOverflow$1 = { - name: 'preventOverflow', - enabled: true, - phase: 'main', - fn: preventOverflow, - requiresIfExists: ['offset'] - }; - - var toPaddingObject = function toPaddingObject(padding, state) { - padding = typeof padding === 'function' ? padding(Object.assign({}, state.rects, { - placement: state.placement - })) : padding; - return mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements)); - }; - - function arrow(_ref) { - var _state$modifiersData$; - - var state = _ref.state, - name = _ref.name, - options = _ref.options; - var arrowElement = state.elements.arrow; - var popperOffsets = state.modifiersData.popperOffsets; - var basePlacement = getBasePlacement(state.placement); - var axis = getMainAxisFromPlacement(basePlacement); - var isVertical = [left, right].indexOf(basePlacement) >= 0; - var len = isVertical ? 'height' : 'width'; - - if (!arrowElement || !popperOffsets) { - return; - } + var state = _ref.state, + name = _ref.name, + options = _ref.options; + var arrowElement = state.elements.arrow; + var popperOffsets = state.modifiersData.popperOffsets; + var basePlacement = getBasePlacement(state.placement); + var axis = getMainAxisFromPlacement(basePlacement); + var isVertical = [left, right].indexOf(basePlacement) >= 0; + var len = isVertical ? 'height' : 'width'; - var paddingObject = toPaddingObject(options.padding, state); - var arrowRect = getLayoutRect(arrowElement); - var minProp = axis === 'y' ? top : left; - var maxProp = axis === 'y' ? bottom : right; - var endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len]; - var startDiff = popperOffsets[axis] - state.rects.reference[axis]; - var arrowOffsetParent = getOffsetParent(arrowElement); - var clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0; - var centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the popper if the center point is - // outside of the popper bounds - - var min = paddingObject[minProp]; - var max = clientSize - arrowRect[len] - paddingObject[maxProp]; - var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference; - var offset = within(min, center, max); // Prevents breaking syntax highlighting... - - var axisProp = axis; - state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$); - } - - function effect(_ref2) { - var state = _ref2.state, - options = _ref2.options; - var _options$element = options.element, - arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element; - - if (arrowElement == null) { - return; - } // CSS selector - - - if (typeof arrowElement === 'string') { - arrowElement = state.elements.popper.querySelector(arrowElement); - - if (!arrowElement) { - return; - } - } + if (!arrowElement || !popperOffsets) { + return; + } - { - if (!isHTMLElement(arrowElement)) { - console.error(['Popper: "arrow" element must be an HTMLElement (not an SVGElement).', 'To use an SVG arrow, wrap it in an HTMLElement that will be used as', 'the arrow.'].join(' ')); - } + var paddingObject = toPaddingObject(options.padding, state); + var arrowRect = getLayoutRect(arrowElement); + var minProp = axis === 'y' ? top : left; + var maxProp = axis === 'y' ? bottom : right; + var endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len]; + var startDiff = popperOffsets[axis] - state.rects.reference[axis]; + var arrowOffsetParent = getOffsetParent(arrowElement); + var clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0; + var centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the popper if the center point is + // outside of the popper bounds + + var min = paddingObject[minProp]; + var max = clientSize - arrowRect[len] - paddingObject[maxProp]; + var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference; + var offset = within(min, center, max); // Prevents breaking syntax highlighting... + + var axisProp = axis; + state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$); } - if (!contains(state.elements.popper, arrowElement)) { - { - console.error(['Popper: "arrow" modifier\'s `element` must be a child of the popper', 'element.'].join(' ')); - } + function effect(_ref2) { + var state = _ref2.state, + options = _ref2.options; + var _options$element = options.element, + arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element; + + if (arrowElement == null) { + return; + } // CSS selector + + + if (typeof arrowElement === 'string') { + arrowElement = state.elements.popper.querySelector(arrowElement); + + if (!arrowElement) { + return; + } + } + + { + if (!isHTMLElement(arrowElement)) { + console.error(['Popper: "arrow" element must be an HTMLElement (not an SVGElement).', 'To use an SVG arrow, wrap it in an HTMLElement that will be used as', 'the arrow.'].join(' ')); + } + } + + if (!contains(state.elements.popper, arrowElement)) { + { + console.error(['Popper: "arrow" modifier\'s `element` must be a child of the popper', 'element.'].join(' ')); + } + + return; + } + + state.elements.arrow = arrowElement; + } // eslint-disable-next-line import/no-unused-modules + + + var arrow$1 = { + name: 'arrow', + enabled: true, + phase: 'main', + fn: arrow, + effect: effect, + requires: ['popperOffsets'], + requiresIfExists: ['preventOverflow'] + }; + + function getSideOffsets(overflow, rect, preventedOffsets) { + if (preventedOffsets === void 0) { + preventedOffsets = { + x: 0, + y: 0 + }; + } - return; + return { + top: overflow.top - rect.height - preventedOffsets.y, + right: overflow.right - rect.width + preventedOffsets.x, + bottom: overflow.bottom - rect.height + preventedOffsets.y, + left: overflow.left - rect.width - preventedOffsets.x + }; } - state.elements.arrow = arrowElement; - } // eslint-disable-next-line import/no-unused-modules - - - var arrow$1 = { - name: 'arrow', - enabled: true, - phase: 'main', - fn: arrow, - effect: effect, - requires: ['popperOffsets'], - requiresIfExists: ['preventOverflow'] - }; - - function getSideOffsets(overflow, rect, preventedOffsets) { - if (preventedOffsets === void 0) { - preventedOffsets = { - x: 0, - y: 0 - }; + function isAnySideFullyClipped(overflow) { + return [top, right, bottom, left].some(function (side) { + return overflow[side] >= 0; + }); } - return { - top: overflow.top - rect.height - preventedOffsets.y, - right: overflow.right - rect.width + preventedOffsets.x, - bottom: overflow.bottom - rect.height + preventedOffsets.y, - left: overflow.left - rect.width - preventedOffsets.x - }; - } - - function isAnySideFullyClipped(overflow) { - return [top, right, bottom, left].some(function (side) { - return overflow[side] >= 0; - }); - } - - function hide(_ref) { - var state = _ref.state, - name = _ref.name; - var referenceRect = state.rects.reference; - var popperRect = state.rects.popper; - var preventedOffsets = state.modifiersData.preventOverflow; - var referenceOverflow = detectOverflow(state, { - elementContext: 'reference' - }); - var popperAltOverflow = detectOverflow(state, { - altBoundary: true - }); - var referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect); - var popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets); - var isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets); - var hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets); - state.modifiersData[name] = { - referenceClippingOffsets: referenceClippingOffsets, - popperEscapeOffsets: popperEscapeOffsets, - isReferenceHidden: isReferenceHidden, - hasPopperEscaped: hasPopperEscaped + function hide(_ref) { + var state = _ref.state, + name = _ref.name; + var referenceRect = state.rects.reference; + var popperRect = state.rects.popper; + var preventedOffsets = state.modifiersData.preventOverflow; + var referenceOverflow = detectOverflow(state, { + elementContext: 'reference' + }); + var popperAltOverflow = detectOverflow(state, { + altBoundary: true + }); + var referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect); + var popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets); + var isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets); + var hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets); + state.modifiersData[name] = { + referenceClippingOffsets: referenceClippingOffsets, + popperEscapeOffsets: popperEscapeOffsets, + isReferenceHidden: isReferenceHidden, + hasPopperEscaped: hasPopperEscaped + }; + state.attributes.popper = Object.assign({}, state.attributes.popper, { + 'data-popper-reference-hidden': isReferenceHidden, + 'data-popper-escaped': hasPopperEscaped + }); + } // eslint-disable-next-line import/no-unused-modules + + + var hide$1 = { + name: 'hide', + enabled: true, + phase: 'main', + requiresIfExists: ['preventOverflow'], + fn: hide }; - state.attributes.popper = Object.assign({}, state.attributes.popper, { - 'data-popper-reference-hidden': isReferenceHidden, - 'data-popper-escaped': hasPopperEscaped - }); - } // eslint-disable-next-line import/no-unused-modules - - - var hide$1 = { - name: 'hide', - enabled: true, - phase: 'main', - requiresIfExists: ['preventOverflow'], - fn: hide - }; - - var defaultModifiers$1 = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1]; - var createPopper$1 = /*#__PURE__*/popperGenerator({ - defaultModifiers: defaultModifiers$1 - }); // eslint-disable-next-line import/no-unused-modules - - var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$1, flip$1, preventOverflow$1, arrow$1, hide$1]; - var createPopper = /*#__PURE__*/popperGenerator({ - defaultModifiers: defaultModifiers - }); // eslint-disable-next-line import/no-unused-modules - - exports.applyStyles = applyStyles$1; - exports.arrow = arrow$1; - exports.computeStyles = computeStyles$1; - exports.createPopper = createPopper; - exports.createPopperLite = createPopper$1; - exports.defaultModifiers = defaultModifiers; - exports.detectOverflow = detectOverflow; - exports.eventListeners = eventListeners; - exports.flip = flip$1; - exports.hide = hide$1; - exports.offset = offset$1; - exports.popperGenerator = popperGenerator; - exports.popperOffsets = popperOffsets$1; - exports.preventOverflow = preventOverflow$1; - - Object.defineProperty(exports, '__esModule', { value: true }); + + var defaultModifiers$1 = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1]; + var createPopper$1 = /*#__PURE__*/popperGenerator({ + defaultModifiers: defaultModifiers$1 + }); // eslint-disable-next-line import/no-unused-modules + + var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$1, flip$1, preventOverflow$1, arrow$1, hide$1]; + var createPopper = /*#__PURE__*/popperGenerator({ + defaultModifiers: defaultModifiers + }); // eslint-disable-next-line import/no-unused-modules + + exports.applyStyles = applyStyles$1; + exports.arrow = arrow$1; + exports.computeStyles = computeStyles$1; + exports.createPopper = createPopper; + exports.createPopperLite = createPopper$1; + exports.defaultModifiers = defaultModifiers; + exports.detectOverflow = detectOverflow; + exports.eventListeners = eventListeners; + exports.flip = flip$1; + exports.hide = hide$1; + exports.offset = offset$1; + exports.popperGenerator = popperGenerator; + exports.popperOffsets = popperOffsets$1; + exports.preventOverflow = preventOverflow$1; + + Object.defineProperty(exports, '__esModule', { value: true }); }))); diff --git a/src/core/platform/web/dom.js b/src/core/platform/web/dom.js index 05757959d..945aa359a 100644 --- a/src/core/platform/web/dom.js +++ b/src/core/platform/web/dom.js @@ -56,7 +56,7 @@ preloadImages: function (srcArray, onload) { var count = 0, images = []; - function complete () { + function complete() { count++; if (count >= srcArray.length) { onload(); @@ -151,9 +151,15 @@ BI.extend(BI.DOM, { - getLeftPosition: function (combo, popup, extraWidth) { + getLeftPosition: function (combo, popup, extraWidth, container) { + var el = combo.element; + var popupEl = popup.element; + var elRect = el[0].getBoundingClientRect(); + var popupElRect = popupEl[0].getBoundingClientRect(); + var containerRect = container ? container.getBoundingClientRect() : { left: 0 }; + return { - left: combo.element.offset().left - popup.element.outerWidth() - (extraWidth || 0) + left: elRect.left - containerRect.left - popupElRect.width - (extraWidth || 0) }; }, @@ -163,10 +169,13 @@ }; }, - getRightPosition: function (combo, popup, extraWidth) { + getRightPosition: function (combo, popup, extraWidth, container) { var el = combo.element; + var elRect = el[0].getBoundingClientRect(); + var containerRect = container ? container.getBoundingClientRect() : { left: 0 }; + return { - left: el.offset().left + el.outerWidth() + (extraWidth || 0) + left: elRect.left + elRect.width - containerRect.left + (extraWidth || 0) }; }, @@ -177,16 +186,25 @@ }; }, - getTopPosition: function (combo, popup, extraHeight) { + getTopPosition: function (combo, popup, extraHeight, container) { + var el = combo.element; + var popupEl = popup.element; + var elRect = el[0].getBoundingClientRect(); + var popupElRect = popupEl[0].getBoundingClientRect(); + var containerRect = container ? container.getBoundingClientRect() : { top: 0 }; + return { - top: combo.element.offset().top - popup.element.outerHeight() - (extraHeight || 0) + top: elRect.top - containerRect.top - popupElRect.height - (extraHeight || 0) }; }, - getBottomPosition: function (combo, popup, extraHeight) { + getBottomPosition: function (combo, popup, extraHeight, container) { var el = combo.element; + var elRect = el[0].getBoundingClientRect(); + var containerRect = container ? container.getBoundingClientRect() : { top: 0 }; + return { - top: el.offset().top + el.outerHeight() + (extraHeight || 0) + top: elRect.top - containerRect.top + elRect.height + (extraHeight || 0) }; }, @@ -201,9 +219,9 @@ }, isRightSpaceEnough: function (combo, popup, extraWidth) { - var viewBounds = popup.element.bounds(), - windowBounds = BI.Widget._renderEngine.createElement("body").bounds(); - return BI.DOM.getRightPosition(combo, popup, extraWidth).left + viewBounds.width <= windowBounds.width; + var viewBounds = popup.element[0].getBoundingClientRect(), + viewportBounds = document.documentElement.getBoundingClientRect(); + return BI.DOM.getRightPosition(combo, popup, extraWidth).left + viewBounds.width <= viewportBounds.width; }, isInnerRightSpaceEnough: function (combo, popup, extraWidth) { @@ -215,41 +233,47 @@ }, isBottomSpaceEnough: function (combo, popup, extraHeight) { - var viewBounds = popup.element.bounds(), - windowBounds = BI.Widget._renderEngine.createElement("body").bounds(); - return BI.DOM.getBottomPosition(combo, popup, extraHeight).top + viewBounds.height <= windowBounds.height; + var viewBounds = popup.element[0].getBoundingClientRect(), + viewportBounds = document.documentElement.getBoundingClientRect(); + return BI.DOM.getBottomPosition(combo, popup, extraHeight).top + viewBounds.height <= viewportBounds.height; }, isRightSpaceLarger: function (combo) { - var windowBounds = BI.Widget._renderEngine.createElement("body").bounds(); - return windowBounds.width - combo.element.offset().left - combo.element.bounds().width >= combo.element.offset().left; + var comboBounds = combo.element[0].getBoundingClientRect(), + viewportBounds = document.documentElement.getBoundingClientRect(); + return viewportBounds.width - comboBounds.right >= comboBounds.left; }, isBottomSpaceLarger: function (combo) { - var windowBounds = BI.Widget._renderEngine.createElement("body").bounds(); - return windowBounds.height - combo.element.offset().top - combo.element.bounds().height >= combo.element.offset().top; + var comboBounds = combo.element[0].getBoundingClientRect(), + viewportBounds = document.documentElement.getBoundingClientRect(); + return viewportBounds.height - comboBounds.bottom >= comboBounds.top; }, - _getLeftAlignPosition: function (combo, popup, extraWidth) { - var viewBounds = popup.element.bounds(), - windowBounds = BI.Widget._renderEngine.createElement("body").bounds(); - var left = combo.element.offset().left + extraWidth; - if (left + viewBounds.width > windowBounds.width) { - left = windowBounds.width - viewBounds.width; + _getLeftAlignPosition: function (combo, popup, extraWidth, container) { + var comboRect = combo.element[0].getBoundingClientRect(), + popupRect = popup.element[0].getBoundingClientRect(), + viewportRect = document.documentElement.getBoundingClientRect(), + containerRect = container ? container.getBoundingClientRect() : { left: 0 }; + var left = comboRect.left - containerRect.left + extraWidth; + + if (comboRect.left + popupRect.width > viewportRect.width) { + left = viewportRect.width - popupRect.width - containerRect.left; } return left; }, - getLeftAlignPosition: function (combo, popup, extraWidth) { - var left = this._getLeftAlignPosition(combo, popup, extraWidth); + getLeftAlignPosition: function (combo, popup, extraWidth, container) { + var left = this._getLeftAlignPosition(combo, popup, extraWidth, container); var dir = ""; // 如果放不下，优先使用RightAlign, 如果RightAlign也放不下, 再使用left=0 - if (left < 0) { + var containerRect = container ? container.getBoundingClientRect() : { left: 0 }; + if (left + containerRect.left < 0) { left = this._getRightAlignPosition(combo, popup, extraWidth); dir = "left"; } - if (left < 0) { - left = 0; + if (left + containerRect.left < 0) { + left = 0 - containerRect.left; } return { left: left, @@ -257,26 +281,28 @@ }; }, - getLeftAdaptPosition: function (combo, popup, extraWidth) { - if (BI.DOM.isLeftSpaceEnough(combo, popup, extraWidth)) { - return BI.DOM.getLeftPosition(combo, popup, extraWidth); + getLeftAdaptPosition: function (combo, popup, extraWidth, container) { + if (BI.DOM.isLeftSpaceEnough(combo, popup, extraWidth, container)) { + return BI.DOM.getLeftPosition(combo, popup, extraWidth, container); } return { left: 0 }; }, - _getRightAlignPosition: function (combo, popup, extraWidth) { - var comboBounds = combo.element.bounds(), viewBounds = popup.element.bounds(); - return combo.element.offset().left + comboBounds.width - viewBounds.width - extraWidth; + _getRightAlignPosition: function (combo, popup, extraWidth, container) { + var comboBounds = combo.element[0].getBoundingClientRect(), + viewBounds = popup.element[0].getBoundingClientRect(), + containerRect = container ? container.getBoundingClientRect() : { left: 0 }; + return comboBounds.left + comboBounds.width - viewBounds.width - extraWidth - containerRect.left; }, - getRightAlignPosition: function (combo, popup, extraWidth) { - var left = this._getRightAlignPosition(combo, popup, extraWidth); + getRightAlignPosition: function (combo, popup, extraWidth, container) { + var left = this._getRightAlignPosition(combo, popup, extraWidth, container); var dir = ""; // 如果放不下，优先使用LeftAlign, 如果LeftAlign也放不下, 再使用left=0 if (left < 0) { - left = this._getLeftAlignPosition(combo, popup, extraWidth); + left = this._getLeftAlignPosition(combo, popup, extraWidth, container); dir = "right"; } if (left < 0) { @@ -288,33 +314,34 @@ }; }, - getRightAdaptPosition: function (combo, popup, extraWidth) { - if (BI.DOM.isRightSpaceEnough(combo, popup, extraWidth)) { - return BI.DOM.getRightPosition(combo, popup, extraWidth); + getRightAdaptPosition: function (combo, popup, extraWidth, container) { + if (BI.DOM.isRightSpaceEnough(combo, popup, extraWidth, container)) { + return BI.DOM.getRightPosition(combo, popup, extraWidth, container); } return { - left: BI.Widget._renderEngine.createElement("body").bounds().width - popup.element.bounds().width + left: document.documentElement.getBoundingClientRect().width - popup.element[0].getBoundingClientRect().width - container.getBoundingClientRect().left }; }, - getTopAlignPosition: function (combo, popup, extraHeight, needAdaptHeight) { - var comboOffset = combo.element.offset(); - var comboBounds = combo.element.bounds(), popupBounds = popup.element.bounds(), - windowBounds = BI.Widget._renderEngine.createElement("body").bounds(); + getTopAlignPosition: function (combo, popup, extraHeight, needAdaptHeight, container) { + var comboBounds = combo.element[0].getBoundingClientRect(), + popupBounds = popup.element[0].getBoundingClientRect(), + viewportBounds = document.documentElement.getBoundingClientRect(), + containerBounds = container ? container.getBoundingClientRect() : { top: 0 }; var top, adaptHeight, dir; if (BI.DOM.isBottomSpaceEnough(combo, popup, -1 * comboBounds.height + extraHeight)) { - top = comboOffset.top + extraHeight; + top = comboBounds.top - containerBounds.top + extraHeight; } else if (needAdaptHeight) { - top = comboOffset.top + extraHeight; - adaptHeight = windowBounds.height - top; + top = comboBounds.top - containerBounds.top + extraHeight; + adaptHeight = viewportBounds.height - comboBounds.top; } else if (BI.DOM.isTopSpaceEnough(combo, popup, -1 * comboBounds.height + extraHeight)) { // 下方空间不足且不允许调整高度的情况下，优先使用上对齐 - top = comboOffset.top + comboBounds.height - popupBounds.height - extraHeight; + top = comboBounds.top + comboBounds.height - popupBounds.height - containerBounds.top - extraHeight; dir = "top"; } else { - top = windowBounds.height - popupBounds.height; + top = viewportBounds.height - popupBounds.height; if (top < extraHeight) { - adaptHeight = windowBounds.height - extraHeight; + adaptHeight = viewportBounds.height - extraHeight; } } if (top < extraHeight) { @@ -330,42 +357,45 @@ }; }, - getTopAdaptPosition: function (combo, popup, extraHeight, needAdaptHeight) { - var popupBounds = popup.element.bounds(), - windowBounds = BI.Widget._renderEngine.createElement("body").bounds(); + getTopAdaptPosition: function (combo, popup, extraHeight, needAdaptHeight, positionRelativeElement) { + var comboBounds = combo.element[0].getBoundingClientRect(), + popupBounds = popup.element[0].getBoundingClientRect(), + positionRelativeElementRect = positionRelativeElement.getBoundingClientRect(), + viewportBounds = document.documentElement.getBoundingClientRect(); if (BI.DOM.isTopSpaceEnough(combo, popup, extraHeight)) { return BI.DOM.getTopPosition(combo, popup, extraHeight); } if (needAdaptHeight) { return { - top: 0, - adaptHeight: combo.element.offset().top - extraHeight + top: 0 - positionRelativeElementRect.top, + adaptHeight: comboBounds.top - extraHeight }; } - if (popupBounds.height + extraHeight > windowBounds.height) { + if (popupBounds.height + extraHeight > viewportBounds.height) { return { - top: 0, - adaptHeight: windowBounds.height - extraHeight + top: 0 - positionRelativeElementRect.top, + adaptHeight: viewportBounds.height - extraHeight }; } return { - top: 0 + top: 0 - positionRelativeElementRect.top }; }, - getBottomAlignPosition: function (combo, popup, extraHeight, needAdaptHeight) { - var comboOffset = combo.element.offset(); - var comboBounds = combo.element.bounds(), popupBounds = popup.element.bounds(), - windowBounds = BI.Widget._renderEngine.createElement("body").bounds(); + getBottomAlignPosition: function (combo, popup, extraHeight, needAdaptHeight, container) { + var comboBounds = combo.element[0].getBoundingClientRect(), + popupBounds = popup.element[0].getBoundingClientRect(), + windowBounds = BI.Widget._renderEngine.createElement("body").bounds(), + containerBounds = container ? container.getBoundingClientRect() : { top: 0 }; var top, adaptHeight, dir; if (BI.DOM.isTopSpaceEnough(combo, popup, -1 * comboBounds.height + extraHeight)) { - top = comboOffset.top + comboBounds.height - popupBounds.height - extraHeight; + top = comboBounds.top + comboBounds.height - containerBounds.top - popupBounds.height; } else if (needAdaptHeight) { - top = 0; - adaptHeight = comboOffset.top + comboBounds.height - extraHeight; + top = 0 - containerBounds.top; + adaptHeight = comboBounds.top + comboBounds.height - extraHeight; } else if (BI.DOM.isBottomSpaceEnough(combo, popup, -1 * comboBounds.height + extraHeight)) { // 上方空间不足且不允许调整高度的情况下，优先使用下对齐 - top = comboOffset.top + extraHeight; + top = comboBounds.top - containerBounds.top + extraHeight; dir = "bottom"; } else { top = 0; @@ -373,7 +403,7 @@ adaptHeight = windowBounds.height - extraHeight; } } - if (top < 0) { + if (top + containerBounds.top < 0) { top = 0; } return adaptHeight ? { @@ -386,41 +416,43 @@ }; }, - getBottomAdaptPosition: function (combo, popup, extraHeight, needAdaptHeight) { - var comboOffset = combo.element.offset(); - var comboBounds = combo.element.bounds(), popupBounds = popup.element.bounds(), - windowBounds = BI.Widget._renderEngine.createElement("body").bounds(); + getBottomAdaptPosition: function (combo, popup, extraHeight, needAdaptHeight, positionRelativeElement) { + var comboBounds = combo.element[0].getBoundingClientRect(), + popupBounds = popup.element[0].getBoundingClientRect(), + viewportBounds = document.documentElement.getBoundingClientRect(), + positionRelativeElementRect = positionRelativeElement.getBoundingClientRect(); if (BI.DOM.isBottomSpaceEnough(combo, popup, extraHeight)) { - return BI.DOM.getBottomPosition(combo, popup, extraHeight); + return BI.DOM.getBottomPosition(combo, popup, extraHeight, positionRelativeElement); } if (needAdaptHeight) { return { - top: comboOffset.top + comboBounds.height + extraHeight, - adaptHeight: windowBounds.height - comboOffset.top - comboBounds.height - extraHeight + top: comboBounds.top + comboBounds.height + extraHeight - positionRelativeElementRect.top, + adaptHeight: viewportBounds.height - comboBounds.top - comboBounds.height - extraHeight }; } - if (popupBounds.height + extraHeight > windowBounds.height) { + if (popupBounds.height + extraHeight > viewportBounds.height) { return { - top: extraHeight, - adaptHeight: windowBounds.height - extraHeight + top: extraHeight - positionRelativeElementRect.top, + adaptHeight: viewportBounds.height - extraHeight }; } return { - top: windowBounds.height - popupBounds.height - extraHeight + top: viewportBounds.height - popupBounds.height - extraHeight - positionRelativeElementRect.top }; }, - getCenterAdaptPosition: function (combo, popup) { - var comboOffset = combo.element.offset(); - var comboBounds = combo.element.bounds(), popupBounds = popup.element.bounds(), - windowBounds = BI.Widget._renderEngine.createElement("body").bounds(); + getCenterAdaptPosition: function (combo, popup, positionRelativeElement) { + var comboRect = combo.element[0].getBoundingClientRect(), + popupRect = popup.element[0].getBoundingClientRect(), + positionRelativeElementRect = positionRelativeElement.getBoundingClientRect(), + viewportBounds = document.documentElement.getBoundingClientRect(); var left; - if (comboOffset.left + comboBounds.width / 2 + popupBounds.width / 2 > windowBounds.width) { - left = windowBounds.width - popupBounds.width; + if (comboRect.left + comboRect.width / 2 + popupRect.width / 2 > viewportBounds.width) { + left = viewportBounds.width - comboRect.width - positionRelativeElementRect.left; } else { - left = comboOffset.left + comboBounds.width / 2 - popupBounds.width / 2; + left = comboRect.left + (comboRect.width - popupRect.width) / 2 - positionRelativeElementRect.left; } - if (left < 0) { + if (left + positionRelativeElementRect.left < 0) { left = 0; } return { @@ -428,17 +460,19 @@ }; }, - getMiddleAdaptPosition: function (combo, popup) { - var comboOffset = combo.element.offset(); - var comboBounds = combo.element.bounds(), popupBounds = popup.element.bounds(), - windowBounds = BI.Widget._renderEngine.createElement("body").bounds(); + getMiddleAdaptPosition: function (combo, popup, positionRelativeElement) { + var comboRect = combo.element[0].getBoundingClientRect(), + popupRect = popup.element[0].getBoundingClientRect(), + positionRelativeElementRect = positionRelativeElement.getBoundingClientRect(), + viewportBounds = document.documentElement.getBoundingClientRect(); + var top; - if (comboOffset.top + comboBounds.height / 2 + popupBounds.height / 2 > windowBounds.height) { - top = windowBounds.height - popupBounds.height; + if (comboRect.top + comboRect.height / 2 + popupRect.height / 2 > viewportBounds.height) { + top = viewportBounds.height - popupRect.height - positionRelativeElementRect.top; } else { - top = comboOffset.top + comboBounds.height / 2 - popupBounds.height / 2; + top = comboRect.top + (comboRect.height - popupRect.height) / 2 - positionRelativeElementRect.top; } - if (top < 0) { + if (top + positionRelativeElementRect.top < 0) { top = 0; } return { @@ -446,7 +480,7 @@ }; }, - getComboPositionByDirections: function (combo, popup, extraWidth, extraHeight, needAdaptHeight, directions) { + getComboPositionByDirections: function (combo, popup, extraWidth, extraHeight, needAdaptHeight, directions, container) { extraWidth || (extraWidth = 0); extraHeight || (extraHeight = 0); var i, direct; @@ -483,11 +517,11 @@ if (!isNeedAdaptHeight) { var tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? 0 : extraHeight; if (BI.DOM.isLeftSpaceEnough(combo, popup, tW)) { - left = BI.DOM.getLeftPosition(combo, popup, tW).left; + left = BI.DOM.getLeftPosition(combo, popup, tW, container).left; if (topBottom[0] === "bottom") { - pos = BI.DOM.getTopAlignPosition(combo, popup, tH, needAdaptHeight); + pos = BI.DOM.getTopAlignPosition(combo, popup, tH, needAdaptHeight, container); } else { - pos = BI.DOM.getBottomAlignPosition(combo, popup, tH, needAdaptHeight); + pos = BI.DOM.getBottomAlignPosition(combo, popup, tH, needAdaptHeight, container); } pos.dir = "left," + pos.dir; if (tbFirst) { @@ -503,11 +537,11 @@ if (!isNeedAdaptHeight) { var tW = tbFirst ? extraHeight : extraWidth, tH = tbFirst ? extraWidth : extraHeight; if (BI.DOM.isRightSpaceEnough(combo, popup, tW)) { - left = BI.DOM.getRightPosition(combo, popup, tW).left; + left = BI.DOM.getRightPosition(combo, popup, tW, container).left; if (topBottom[0] === "bottom") { - pos = BI.DOM.getTopAlignPosition(combo, popup, tH, needAdaptHeight); + pos = BI.DOM.getTopAlignPosition(combo, popup, tH, needAdaptHeight, container); } else { - pos = BI.DOM.getBottomAlignPosition(combo, popup, tH, needAdaptHeight); + pos = BI.DOM.getBottomAlignPosition(combo, popup, tH, needAdaptHeight, container); } pos.dir = "right," + pos.dir; if (tbFirst) { @@ -522,11 +556,11 @@ case "top": var tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight; if (BI.DOM.isTopSpaceEnough(combo, popup, tH)) { - top = BI.DOM.getTopPosition(combo, popup, tH).top; + top = BI.DOM.getTopPosition(combo, popup, tH, container).top; if (leftRight[0] === "right") { - pos = BI.DOM.getLeftAlignPosition(combo, popup, tW, needAdaptHeight); + pos = BI.DOM.getLeftAlignPosition(combo, popup, tW, container); } else { - pos = BI.DOM.getRightAlignPosition(combo, popup, tW); + pos = BI.DOM.getRightAlignPosition(combo, popup, tW, container); } pos.dir = "top," + pos.dir; if (lrFirst) { @@ -543,11 +577,11 @@ case "bottom": var tW = lrFirst ? extraHeight : extraWidth, tH = lrFirst ? extraWidth : extraHeight; if (BI.DOM.isBottomSpaceEnough(combo, popup, tH)) { - top = BI.DOM.getBottomPosition(combo, popup, tH).top; + top = BI.DOM.getBottomPosition(combo, popup, tH, container).top; if (leftRight[0] === "right") { - pos = BI.DOM.getLeftAlignPosition(combo, popup, tW, needAdaptHeight); + pos = BI.DOM.getLeftAlignPosition(combo, popup, tW, container); } else { - pos = BI.DOM.getRightAlignPosition(combo, popup, tW); + pos = BI.DOM.getRightAlignPosition(combo, popup, tW, container); } pos.dir = "bottom," + pos.dir; if (lrFirst) { @@ -610,10 +644,10 @@ case "left": case "right": if (BI.DOM.isRightSpaceLarger(combo)) { - left = BI.DOM.getRightAdaptPosition(combo, popup, extraWidth).left; + left = BI.DOM.getRightAdaptPosition(combo, popup, extraWidth, container).left; firstDir = "right"; } else { - left = BI.DOM.getLeftAdaptPosition(combo, popup, extraWidth).left; + left = BI.DOM.getLeftAdaptPosition(combo, popup, extraWidth, container).left; firstDir = "left"; } if (topBottom[0] === "bottom") { @@ -628,19 +662,19 @@ return pos; default : if (BI.DOM.isBottomSpaceLarger(combo)) { - top = BI.DOM.getBottomAdaptPosition(combo, popup, extraHeight, needAdaptHeight).top; + top = BI.DOM.getBottomAdaptPosition(combo, popup, extraHeight, needAdaptHeight, container).top; firstDir = "bottom"; } else { - top = BI.DOM.getTopAdaptPosition(combo, popup, extraHeight, needAdaptHeight).top; + top = BI.DOM.getTopAdaptPosition(combo, popup, extraHeight, needAdaptHeight, container).top; firstDir = "top"; } if (leftRight[0] === "right") { - pos = BI.DOM.getLeftAlignPosition(combo, popup, extraWidth, needAdaptHeight); + pos = BI.DOM.getLeftAlignPosition(combo, popup, extraWidth, container); pos.top = top; pos.dir = firstDir + "," + pos.dir; return pos; } - pos = BI.DOM.getRightAlignPosition(combo, popup, extraWidth); + pos = BI.DOM.getRightAlignPosition(combo, popup, extraWidth, container); pos.top = top; pos.dir = firstDir + "," + pos.dir; return pos; @@ -648,37 +682,77 @@ }, - getComboPosition: function (combo, popup, extraWidth, extraHeight, needAdaptHeight, directions, offsetStyle) { + getComboPosition: function (combo, popup, extraWidth, extraHeight, needAdaptHeight, directions, offsetStyle, positionRelativeElement) { extraWidth || (extraWidth = 0); extraHeight || (extraHeight = 0); - var bodyHeight = BI.Widget._renderEngine.createElement("body").bounds().height - extraHeight; - var maxHeight = Math.min(popup.attr("maxHeight") || bodyHeight, bodyHeight); + var viewportBounds = document.documentElement.getBoundingClientRect(); + var maxHeight = Math.min(popup.attr("maxHeight") || viewportBounds.height, viewportBounds.height); popup.resetHeight && popup.resetHeight(maxHeight); - var position = BI.DOM.getComboPositionByDirections(combo, popup, extraWidth, extraHeight, needAdaptHeight, directions || ["bottom", "top", "right", "left"]); + var position = BI.DOM.getComboPositionByDirections(combo, popup, extraWidth, extraHeight, needAdaptHeight, directions || ["bottom", "top", "right", "left"], positionRelativeElement); switch (offsetStyle) { case "center": if (position.change) { - var p = BI.DOM.getMiddleAdaptPosition(combo, popup); + var p = BI.DOM.getMiddleAdaptPosition(combo, popup, positionRelativeElement); position.top = p.top; } else { - var p = BI.DOM.getCenterAdaptPosition(combo, popup); + var p = BI.DOM.getCenterAdaptPosition(combo, popup, positionRelativeElement); position.left = p.left; } break; case "middle": if (position.change) { - var p = BI.DOM.getCenterAdaptPosition(combo, popup); + var p = BI.DOM.getCenterAdaptPosition(combo, popup, positionRelativeElement); position.left = p.left; } else { - var p = BI.DOM.getMiddleAdaptPosition(combo, popup); + var p = BI.DOM.getMiddleAdaptPosition(combo, popup, positionRelativeElement); position.top = p.top; } break; } if (needAdaptHeight === true) { - popup.resetHeight && popup.resetHeight(Math.min(bodyHeight - position.top, maxHeight)); + popup.resetHeight && popup.resetHeight(Math.min(viewportBounds.height - position.top + (positionRelativeElement ? positionRelativeElement.getBoundingClientRect().top : 0), maxHeight)); } return position; - } + }, + + /** + * 获取position:fixed相对定位的元素 + */ + getPositionRelativeContainingBlock: function (element) { + if (['html', 'body', '#document'].indexOf((element.nodeName || '').toLowerCase()) >= 0) { + // $FlowFixMe[incompatible-return]: assume body is always available + return element.ownerDocument.body; + } + + function isExcept(node) { + var _computedStyle = getComputedStyle(node); + var transform = _computedStyle.transform; + var perspective = _computedStyle.perspective; + var filter = _computedStyle.filter; + var willChange = _computedStyle["will-change"]; + + return [transform, perspective, filter].some(value => value !== 'none') || (willChange === "transform"); + } + + if (isExcept(element)) { + return element; + } + + return BI.DOM.getPositionRelativeContainingBlock(element.parentNode); + }, + + /** + * 获取position:fixed相对定位的元素的clientRect + */ + getPositionRelativeContainingBlockRect: function (element) { + var positionRelativeElement = BI.DOM.getPositionRelativeContainingBlock(element); + var rect = positionRelativeElement.getBoundingClientRect(); + + return { + ...rect.toJSON(), + scaleX: rect.width / positionRelativeElement.offsetWidth, + scaleY: rect.height / positionRelativeElement.offsetHeight + }; + }, }); })(); diff --git a/src/core/platform/web/function.js b/src/core/platform/web/function.js index 1c74836e2..f05ef923d 100644 --- a/src/core/platform/web/function.js +++ b/src/core/platform/web/function.js @@ -137,5 +137,15 @@ BI._.extend(BI, { return version[1] * 1; } return 0; + }, + + getMinimumFontSize: function () { + // not work for firefox + const el = document.createElement('div'); + el.style.fontSize = "1px"; + document.body.appendChild(el); + const size = getComputedStyle(el).fontSize; + el.remove(); + return parseInt(size); } }); diff --git a/src/less/core/utils/motion/zoom.less b/src/less/core/utils/motion/zoom.less index 7e0e0ec44..edeab6df4 100644 --- a/src/less/core/utils/motion/zoom.less +++ b/src/less/core/utils/motion/zoom.less @@ -4,7 +4,7 @@ .make-motion(@className, @keyframeName, @duration); .@{className}-enter, .@{className}-appear { - transform: scale(0); // need this by yiminghe + //transform: scale(0); // need this by yiminghe, but dailer did not need this opacity: 0; animation-timing-function: @ease-out-circ; diff --git a/src/less/widget/multiselect/trigger/button.checkselected.less b/src/less/widget/multiselect/trigger/button.checkselected.less index 4a36315b0..ded0da5eb 100644 --- a/src/less/widget/multiselect/trigger/button.checkselected.less +++ b/src/less/widget/multiselect/trigger/button.checkselected.less @@ -2,7 +2,7 @@ .bi-multi-select-check-selected-button { z-index: 1; - .border-radius(50%); + .border-radius(99999px); &:active { color: @color-bi-text-highlight; diff --git a/src/less/widget/multitree/trigger/multi.tree.button.checkselected.less b/src/less/widget/multitree/trigger/multi.tree.button.checkselected.less index 5393d7b24..dd7fe2527 100644 --- a/src/less/widget/multitree/trigger/multi.tree.button.checkselected.less +++ b/src/less/widget/multitree/trigger/multi.tree.button.checkselected.less @@ -6,11 +6,11 @@ z-index: 1; } .trigger-check-text { - .border-radius(8px); - .border-radius(calc(var(--css-scale, 1) * 8px)); + .border-radius(99999px); z-index: 1; + &:active { background-color: @color-bi-background-multi-select-trigger-check-selected; } } -} \ No newline at end of file +} diff --git a/src/widget/downlist/combo.downlist.js b/src/widget/downlist/combo.downlist.js index 8b9aa4c0c..10c39bfbf 100644 --- a/src/widget/downlist/combo.downlist.js +++ b/src/widget/downlist/combo.downlist.js @@ -44,7 +44,8 @@ popup: {}, minWidth: 140, maxHeight: 1000, - destroyWhenHide: false + destroyWhenHide: false, + isDefaultInit: true, }); }, @@ -57,7 +58,7 @@ type: "bi.combo", trigger: o.trigger, isNeedAdjustWidth: false, - isDefaultInit: true, + isDefaultInit: o.isDefaultInit, container: o.container, adjustLength: o.adjustLength, direction: o.direction, diff --git a/src/widget/editor/editor.search.js b/src/widget/editor/editor.search.js index 29e4983eb..bd40ae5a9 100644 --- a/src/widget/editor/editor.search.js +++ b/src/widget/editor/editor.search.js @@ -27,7 +27,8 @@ BI.SearchEditor = BI.inherit(BI.Widget, { errorText: o.errorText, validationChecker: o.validationChecker, quitChecker: o.quitChecker, - value: o.value + value: o.value, + autoTrim: o.autoTrim, }); this.clear = BI.createWidget({ type: "bi.icon_button", diff --git a/src/widget/editor/editor.text.js b/src/widget/editor/editor.text.js index 19f51fd73..022b5f2ad 100644 --- a/src/widget/editor/editor.text.js +++ b/src/widget/editor/editor.text.js @@ -47,7 +47,8 @@ BI.TextEditor = BI.inherit(BI.Widget, { watermark: o.watermark, errorText: o.errorText, inputType: o.inputType, - autocomplete: o.autocomplete + autocomplete: o.autocomplete, + autoTrim: o.autoTrim, }); this.editor.on(BI.Controller.EVENT_CHANGE, function () { self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); diff --git a/src/widget/multiselect/check/multiselect.display.js b/src/widget/multiselect/check/multiselect.display.js index b5b4f76e8..30442583c 100644 --- a/src/widget/multiselect/check/multiselect.display.js +++ b/src/widget/multiselect/check/multiselect.display.js @@ -40,10 +40,12 @@ BI.DisplaySelectedList = BI.inherit(BI.Pane, { }, items: this._createItems(opts.items), chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, - layouts: [{ - type: "bi.vertical", - lgap: 10 - }] + layouts: [ + { + type: "bi.vertical", + lgap: 10 + } + ] }, itemsCreator: function (options, callback) { if (options.times === 1) { @@ -53,10 +55,7 @@ BI.DisplaySelectedList = BI.inherit(BI.Pane, { if (cacheItems.length > 0) { var renderedItems = cacheItems.slice(0, 100); cacheItems = cacheItems.slice(100); - self.hasNext = true; - if (cacheItems.length === 0) { - self.hasNext = false; - } + self.hasNext = cacheItems.length > 0; callback(self._createItems(renderedItems)); return; } @@ -65,8 +64,8 @@ BI.DisplaySelectedList = BI.inherit(BI.Pane, { self.hasNext = !!ob.hasNext; var firstItemsCount = 100 + ob.items.length % 100; if (ob.items.length > 100) { - cacheItems = ob.items.slice(100 + ob.items.length % 100); - self.hasNext = true; + cacheItems = ob.items.slice(firstItemsCount); + self.hasNext = (firstItemsCount === ob.items.length) ? false : true; } callback(self._createItems(ob.items.slice(0, firstItemsCount))); }); @@ -104,4 +103,4 @@ BI.DisplaySelectedList = BI.inherit(BI.Pane, { } }); -BI.shortcut("bi.display_selected_list", BI.DisplaySelectedList); \ No newline at end of file +BI.shortcut("bi.display_selected_list", BI.DisplaySelectedList); diff --git a/src/widget/multitree/multi.tree.combo.js b/src/widget/multitree/multi.tree.combo.js index bdf374f07..5fca0ca4f 100644 --- a/src/widget/multitree/multi.tree.combo.js +++ b/src/widget/multitree/multi.tree.combo.js @@ -42,7 +42,15 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, { }, searcher: { type: "bi.multi_tree_searcher", - itemsCreator: o.itemsCreator + itemsCreator: o.itemsCreator, + listeners: [ + { + eventName: BI.MultiTreeSearcher.EVENT_CLICK_TREE_NODE, + action: function () { + self._dataChange = true; + } + } + ], }, value: { value: o.value || {} } }); @@ -61,43 +69,45 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, { self.trigger.setAdapter(this); self.numberCounter.setAdapter(this); }, - listeners: [{ - eventName: BI.MultiTreePopup.EVENT_AFTERINIT, - action: function () { - self.numberCounter.adjustView(); - isInit = true; - if (want2showCounter === true) { - showCounter(); + listeners: [ + { + eventName: BI.MultiTreePopup.EVENT_AFTERINIT, + action: function () { + self.numberCounter.adjustView(); + isInit = true; + if (want2showCounter === true) { + showCounter(); + } + } + }, { + eventName: BI.MultiTreePopup.EVENT_CHANGE, + action: function () { + change = true; + var val = { + type: BI.Selection.Multi, + value: this.hasChecked() ? this.getValue() : {} + }; + self.trigger.getSearcher().setState(val); + self.numberCounter.setButtonChecked(val); + self.storeValue = { value: self.combo.getValue() }; + self.fireEvent(BI.MultiTreeCombo.EVENT_CLICK_ITEM, self.combo.getValue()); + self._dataChange = true; + } + }, { + eventName: BI.MultiTreePopup.EVENT_CLICK_CONFIRM, + action: function () { + self.combo.hideView(); + } + }, { + eventName: BI.MultiTreePopup.EVENT_CLICK_CLEAR, + action: function () { + clear = true; + self._dataChange = true; + self.setValue(); + self._defaultState(); } } - }, { - eventName: BI.MultiTreePopup.EVENT_CHANGE, - action: function () { - change = true; - var val = { - type: BI.Selection.Multi, - value: this.hasChecked() ? this.getValue() : {} - }; - self.trigger.getSearcher().setState(val); - self.numberCounter.setButtonChecked(val); - self.storeValue = { value: self.combo.getValue() }; - self.fireEvent(BI.MultiTreeCombo.EVENT_CLICK_ITEM, self.combo.getValue()); - self._dataChange = true; - } - }, { - eventName: BI.MultiTreePopup.EVENT_CLICK_CONFIRM, - action: function () { - self.combo.hideView(); - } - }, { - eventName: BI.MultiTreePopup.EVENT_CLICK_CLEAR, - action: function () { - clear = true; - self._dataChange = true; - self.setValue(); - self._defaultState(); - } - }], + ], itemsCreator: o.itemsCreator, onLoaded: function () { BI.nextTick(function () { @@ -293,26 +303,28 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, { BI.createWidget({ type: "bi.absolute", element: this, - items: [{ - el: this.combo, - left: 0, - right: 0, - top: 0, - bottom: 0 - }, { - el: triggerBtn, - right: 0, - top: 0, - bottom: 0 - }, { - el: { - type: "bi.vertical_adapt", - items: [this.numberCounter] - }, - right: o.height, - top: 0, - bottom: 0 - }] + items: [ + { + el: this.combo, + left: 0, + right: 0, + top: 0, + bottom: 0 + }, { + el: triggerBtn, + right: 0, + top: 0, + bottom: 0 + }, { + el: { + type: "bi.vertical_adapt", + items: [this.numberCounter] + }, + right: o.height, + top: 0, + bottom: 0 + } + ] }); }, diff --git a/src/widget/multitree/multi.tree.insert.combo.js b/src/widget/multitree/multi.tree.insert.combo.js index 6db34dc61..acacbb875 100644 --- a/src/widget/multitree/multi.tree.insert.combo.js +++ b/src/widget/multitree/multi.tree.insert.combo.js @@ -47,18 +47,25 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { itemsCreator: o.itemsCreator, popup: { type: "bi.multi_tree_search_insert_pane", - listeners: [{ - eventName: BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM, - action: function () { - self.storeValue.value[self.trigger.getSearcher().getKeyword()] = {}; - self._assertShowValue(); - // setValue以更新paras.value, 之后从search popup中拿到的就能有add的值了 - self.combo.setValue(self.storeValue); - self.numberCounter.setValue(self.storeValue); - self._stopEditing(); - self._dataChange = true; + listeners: [ + { + eventName: BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM, + action: function () { + self.storeValue.value[self.trigger.getSearcher().getKeyword()] = {}; + self._assertShowValue(); + // setValue以更新paras.value, 之后从search popup中拿到的就能有add的值了 + self.combo.setValue(self.storeValue); + self.numberCounter.setValue(self.storeValue); + self._stopEditing(); + self._dataChange = true; + } + }, { + eventName: BI.MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE, + action: function () { + self._dataChange = true; + } } - }] + ] } }, value: { value: o.value || {} } @@ -79,43 +86,45 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { self.trigger.setAdapter(this); self.numberCounter.setAdapter(this); }, - listeners: [{ - eventName: BI.MultiTreePopup.EVENT_AFTERINIT, - action: function () { - self.numberCounter.adjustView(); - isInit = true; - if (want2showCounter === true) { - showCounter(); + listeners: [ + { + eventName: BI.MultiTreePopup.EVENT_AFTERINIT, + action: function () { + self.numberCounter.adjustView(); + isInit = true; + if (want2showCounter === true) { + showCounter(); + } + } + }, { + eventName: BI.MultiTreePopup.EVENT_CHANGE, + action: function () { + change = true; + var val = { + type: BI.Selection.Multi, + value: this.hasChecked() ? this.getValue() : {} + }; + self.trigger.getSearcher().setState(val); + self.numberCounter.setButtonChecked(val); + self.storeValue = { value: self.combo.getValue() }; + self.fireEvent(BI.MultiTreeInsertCombo.EVENT_CLICK_ITEM, self.getValue()); + self._dataChange = true; + } + }, { + eventName: BI.MultiTreePopup.EVENT_CLICK_CONFIRM, + action: function () { + self.combo.hideView(); + } + }, { + eventName: BI.MultiTreePopup.EVENT_CLICK_CLEAR, + action: function () { + clear = true; + self._dataChange = true; + self.setValue(); + self._defaultState(); } } - }, { - eventName: BI.MultiTreePopup.EVENT_CHANGE, - action: function () { - change = true; - var val = { - type: BI.Selection.Multi, - value: this.hasChecked() ? this.getValue() : {} - }; - self.trigger.getSearcher().setState(val); - self.numberCounter.setButtonChecked(val); - self.storeValue = { value: self.combo.getValue() }; - self.fireEvent(BI.MultiTreeInsertCombo.EVENT_CLICK_ITEM, self.getValue()); - self._dataChange = true; - } - }, { - eventName: BI.MultiTreePopup.EVENT_CLICK_CONFIRM, - action: function () { - self.combo.hideView(); - } - }, { - eventName: BI.MultiTreePopup.EVENT_CLICK_CLEAR, - action: function () { - clear = true; - self._dataChange = true; - self.setValue(); - self._defaultState(); - } - }], + ], itemsCreator: o.itemsCreator, onLoaded: function () { BI.nextTick(function () { @@ -303,26 +312,28 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, { BI.createWidget({ type: "bi.absolute", element: this, - items: [{ - el: this.combo, - left: 0, - right: 0, - top: 0, - bottom: 0 - }, { - el: triggerBtn, - right: 0, - top: 0, - bottom: 0 - }, { - el: { - type: "bi.vertical_adapt", - items: [this.numberCounter] - }, - right: o.height, - top: 0, - height: o.height, - }] + items: [ + { + el: this.combo, + left: 0, + right: 0, + top: 0, + bottom: 0 + }, { + el: triggerBtn, + right: 0, + top: 0, + bottom: 0 + }, { + el: { + type: "bi.vertical_adapt", + items: [this.numberCounter] + }, + right: o.height, + top: 0, + height: o.height, + } + ] }); }, diff --git a/src/widget/multitree/trigger/multi.tree.search.insert.pane.js b/src/widget/multitree/trigger/multi.tree.search.insert.pane.js index cc5bff3c9..345d8dab2 100644 --- a/src/widget/multitree/trigger/multi.tree.search.insert.pane.js +++ b/src/widget/multitree/trigger/multi.tree.search.insert.pane.js @@ -25,55 +25,64 @@ BI.MultiTreeSearchInsertPane = BI.inherit(BI.Widget, { return { type: "bi.absolute", - items: [{ - el: { - type: "bi.text_button", - invisible: true, - ref: function (_ref) { - self.addTip = _ref; - }, - text: BI.i18nText("BI-Basic_Click_To_Add_Text", ""), - height: this.constants.height, - cls: "bi-high-light", - handler: function () { - self.fireEvent(BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM, opts.keywordGetter()); - } - }, - top: 5, - left: 0, - right: 0 - }, { - el: BI.extend({ - type: "bi.part_tree", - tipText: BI.i18nText("BI-No_Select"), - itemsCreator: function (op, callback) { - op.keyword = opts.keywordGetter(); - opts.itemsCreator(op, function (res) { - callback(res); - self.setKeyword(opts.keywordGetter(), res.items); - }); - }, - ref: function (_ref) { - self.partTree = _ref; - }, - value: opts.value, - listeners: [{ - eventName: BI.Controller.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + items: [ + { + el: { + type: "bi.text_button", + invisible: true, + ref: function (_ref) { + self.addTip = _ref; + }, + text: BI.i18nText("BI-Basic_Click_To_Add_Text", ""), + height: this.constants.height, + cls: "bi-high-light", + handler: function () { + self.fireEvent(BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM, opts.keywordGetter()); } - }, { - eventName: BI.TreeView.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.MultiTreeSearchInsertPane.EVENT_CHANGE); - } - }] - }, opts.el), - left: 0, - top: 0, - bottom: 0, - right: 0 - }] + }, + top: 5, + left: 0, + right: 0 + }, { + el: BI.extend({ + type: "bi.part_tree", + tipText: BI.i18nText("BI-No_Select"), + itemsCreator: function (op, callback) { + op.keyword = opts.keywordGetter(); + opts.itemsCreator(op, function (res) { + callback(res); + self.setKeyword(opts.keywordGetter(), res.items); + }); + }, + ref: function (_ref) { + self.partTree = _ref; + }, + value: opts.value, + listeners: [ + { + eventName: BI.Controller.EVENT_CHANGE, + action: function () { + self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + } + }, { + eventName: BI.TreeView.EVENT_CHANGE, + action: function () { + self.fireEvent(BI.MultiTreeSearchInsertPane.EVENT_CHANGE); + } + }, { + eventName: BI.PartTree.EVENT_CLICK_TREE_NODE, + action: function () { + self.fireEvent(BI.MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE); + } + } + ] + }, opts.el), + left: 0, + top: 0, + bottom: 0, + right: 0 + } + ] }; }, @@ -115,5 +124,6 @@ BI.MultiTreeSearchInsertPane.EVENT_CHANGE = "EVENT_CHANGE"; BI.MultiTreeSearchInsertPane.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; BI.MultiTreeSearchInsertPane.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM = "EVENT_ADD_ITEM"; +BI.MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE"; -BI.shortcut("bi.multi_tree_search_insert_pane", BI.MultiTreeSearchInsertPane); \ No newline at end of file +BI.shortcut("bi.multi_tree_search_insert_pane", BI.MultiTreeSearchInsertPane); diff --git a/src/widget/multitree/trigger/multi.tree.search.pane.js b/src/widget/multitree/trigger/multi.tree.search.pane.js index a18ab2a04..82c221d18 100644 --- a/src/widget/multitree/trigger/multi.tree.search.pane.js +++ b/src/widget/multitree/trigger/multi.tree.search.pane.js @@ -25,17 +25,24 @@ BI.MultiTreeSearchPane = BI.inherit(BI.Pane, { opts.itemsCreator(op, callback); }, value: opts.value, - listeners: [{ - eventName: BI.Controller.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + listeners: [ + { + eventName: BI.Controller.EVENT_CHANGE, + action: function () { + self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); + } + }, { + eventName: BI.TreeView.EVENT_CHANGE, + action: function () { + self.fireEvent(BI.MultiTreeSearchPane.EVENT_CHANGE); + } + }, { + eventName: BI.PartTree.EVENT_CLICK_TREE_NODE, + action: function () { + self.fireEvent(BI.MultiTreeSearchPane.EVENT_CLICK_TREE_NODE); + } } - }, { - eventName: BI.TreeView.EVENT_CHANGE, - action: function () { - self.fireEvent(BI.MultiTreeSearchPane.EVENT_CHANGE); - } - }], + ], ref: function (_ref) { self.partTree = _ref; } @@ -72,5 +79,6 @@ BI.MultiTreeSearchPane.EVENT_CHANGE = "EVENT_CHANGE"; BI.MultiTreeSearchPane.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM"; BI.MultiTreeSearchPane.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR"; +BI.MultiTreeSearchPane.EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE"; -BI.shortcut("bi.multi_tree_search_pane", BI.MultiTreeSearchPane); \ No newline at end of file +BI.shortcut("bi.multi_tree_search_pane", BI.MultiTreeSearchPane); diff --git a/src/widget/multitree/trigger/searcher.multi.tree.js b/src/widget/multitree/trigger/searcher.multi.tree.js index 8b9c4f004..1b2dc6983 100644 --- a/src/widget/multitree/trigger/searcher.multi.tree.js +++ b/src/widget/multitree/trigger/searcher.multi.tree.js @@ -33,17 +33,19 @@ BI.MultiTreeSearcher = BI.inherit(BI.Widget, { defaultText: o.defaultText, height: o.height }, - listeners: [{ - eventName: BI.MultiSelectEditor.EVENT_FOCUS, - action: function () { - self.fireEvent(BI.MultiSelectSearcher.EVENT_FOCUS); + listeners: [ + { + eventName: BI.MultiSelectEditor.EVENT_FOCUS, + action: function () { + self.fireEvent(BI.MultiSelectSearcher.EVENT_FOCUS); + } + }, { + eventName: BI.MultiSelectEditor.EVENT_BLUR, + action: function () { + self.fireEvent(BI.MultiSelectSearcher.EVENT_BLUR); + } } - }, { - eventName: BI.MultiSelectEditor.EVENT_BLUR, - action: function () { - self.fireEvent(BI.MultiSelectSearcher.EVENT_BLUR); - } - }] + ] }); this.searcher = BI.createWidget({ @@ -67,6 +69,14 @@ BI.MultiTreeSearcher = BI.inherit(BI.Widget, { op.keyword = self.editor.getValue(); o.itemsCreator(op, callback); }, + listeners: [ + { + eventName: BI.MultiTreeSearchPane.EVENT_CLICK_TREE_NODE, + action: function () { + self.fireEvent(BI.MultiTreeSearcher.EVENT_CLICK_TREE_NODE, arguments); + } + } + ], value: o.value }, o.popup), @@ -206,4 +216,5 @@ BI.MultiTreeSearcher.EVENT_CHANGE = "EVENT_CHANGE"; BI.MultiTreeSearcher.EVENT_START = "EVENT_START"; BI.MultiTreeSearcher.EVENT_STOP = "EVENT_STOP"; BI.MultiTreeSearcher.EVENT_PAUSE = "EVENT_PAUSE"; +BI.MultiTreeSearcher.EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE"; BI.shortcut("bi.multi_tree_searcher", BI.MultiTreeSearcher); diff --git a/src/widget/numbereditor/number.editor.js b/src/widget/numbereditor/number.editor.js index 383560bf8..2624c5dc4 100644 --- a/src/widget/numbereditor/number.editor.js +++ b/src/widget/numbereditor/number.editor.js @@ -18,7 +18,8 @@ BI.NumberEditor = BI.inherit(BI.Widget, { errorText: "", step: 1, min: BI.MIN, - max: BI.MAX + max: BI.MAX, + watermark: "", }); }, @@ -30,6 +31,7 @@ BI.NumberEditor = BI.inherit(BI.Widget, { height: BI.toPix(o.height, 2), simple: o.simple, allowBlank: o.allowBlank, + watermark: o.watermark, value: o.valueFormatter(o.value), validationChecker: function (v) { // 不设置validationChecker就自动检测 @@ -89,23 +91,27 @@ BI.NumberEditor = BI.inherit(BI.Widget, { type: "bi.htape", height: BI.toPix(o.height, 2), element: this, - items: [this.editor, { - el: { - type: "bi.grid", - columns: 1, - rows: 2, - items: [{ - column: 0, - row: 0, - el: this.topBtn - }, { - column: 0, - row: 1, - el: this.bottomBtn - }] - }, - width: 23 - }] + items: [ + this.editor, { + el: { + type: "bi.grid", + columns: 1, + rows: 2, + items: [ + { + column: 0, + row: 0, + el: this.topBtn + }, { + column: 0, + row: 1, + el: this.bottomBtn + } + ] + }, + width: 23 + } + ] }); }, @@ -117,13 +123,13 @@ BI.NumberEditor = BI.inherit(BI.Widget, { return this.editor.isEditing(); }, - _checkValueInRange: function(v) { + _checkValueInRange: function (v) { var o = this.options; return !!(BI.isNumeric(v) && BI.parseFloat(v) >= o.min && BI.parseFloat(v) <= o.max); }, - _checkAdjustDisabled: function(v) { - if(this.options.validationChecker === BI.emptyFn) { + _checkAdjustDisabled: function (v) { + if (this.options.validationChecker === BI.emptyFn) { this.bottomBtn.setEnable(BI.parseFloat(v) > this.options.min); this.topBtn.setEnable(BI.parseFloat(v) < this.options.max); } diff --git a/typescript/base/single/button/button.basic.ts b/typescript/base/single/button/button.basic.ts index 95ee1a3c3..24cfc2484 100644 --- a/typescript/base/single/button/button.basic.ts +++ b/typescript/base/single/button/button.basic.ts @@ -38,7 +38,7 @@ export declare class BasicButton extends Single { trigger?: string | null; handler?: Function; bubble?: Function | null | string; - text?: string; + text?: string | ((context: any) => string); el?: Obj; } & Single["props"]; diff --git a/typescript/case/combo/combo.textvalue.ts b/typescript/case/combo/combo.textvalue.ts index 0a50d2342..128ec03b6 100644 --- a/typescript/case/combo/combo.textvalue.ts +++ b/typescript/case/combo/combo.textvalue.ts @@ -5,5 +5,10 @@ export declare class TextValueCombo extends Widget { static EVENT_CHANGE: string; - populate(items: any): void; + clear(): void; + setText(text: string): void; + setValue(value: any): void; + setStatus(status: "success" | "warning" | "error"): void; + getValue(): any[]; + populate(items: any[]): void; } diff --git a/typescript/case/combo/popup.textvalue.ts b/typescript/case/combo/popup.textvalue.ts new file mode 100644 index 000000000..a3fe1b0d1 --- /dev/null +++ b/typescript/case/combo/popup.textvalue.ts @@ -0,0 +1,13 @@ +import { Pane } from "../../base/pane"; + +export declare class TextValueComboPopup extends Pane { + static xtype: string; + + static EVENT_CHANGE: string; + static EVENT_CLEAR: string; + static EVENT_CONFIRM: string; + + populate(items: any[]): void; + getValue(): any; + setValue(value: any): void; +} diff --git a/typescript/component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo.ts b/typescript/component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo.ts index 990ef0cd1..960fa6219 100644 --- a/typescript/component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo.ts +++ b/typescript/component/allvaluemultitextvaluecombo/allvalue.multitextvalue.combo.ts @@ -1,14 +1,4 @@ -import { Widget, _Widget } from "../../core/widget"; - -export interface _AllValueMultiTextValueCombo extends _Widget { - getValue(): T[]; - - populate(items: any): void; -} - -export interface _AllValueMultiTextValueComboStatic { - EVENT_CONFIRM: string; -} +import { Widget } from "../../core/widget"; export declare class AllValueMultiTextValueCombo extends Widget { static xtype: string; diff --git a/typescript/core/base.ts b/typescript/core/base.ts index 6182a0833..79dc317af 100644 --- a/typescript/core/base.ts +++ b/typescript/core/base.ts @@ -1,4 +1,4 @@ -import { _Widget } from "./widget"; +import { Widget } from "./widget"; export interface _base { assert: (v: any, is: Function) => Boolean; @@ -7,7 +7,7 @@ export interface _base { UUID: () => string; - isWidget: (widget: any) => widget is _Widget; + isWidget: (widget: any) => widget is Widget; createWidgets: (items: any, options: any, context: any) => any; @@ -38,7 +38,9 @@ export interface _base { size: (collection: any) => number; - each: (collection: T[] | object | string, callback?: ((index: number, value: T) => void) | object | string, thisArg?: any) => any; + each(collection: ArrayLike, iteratee?: (index: number, value: T) => void, thisArg?: any): ArrayLike; + each(collection: T, iteratee?: (index: K, value: T[K]) => void, thisArg?: any): T; + each(collection: T, iteratee?: any, thisArg?: any): T; map: (collection: T[] | object | string | null | undefined, callback?: ((index: number, value: T) => U) | object | string, thisArg?: any) => U[]; diff --git a/typescript/core/plugin.ts b/typescript/core/plugin.ts index 83c1176fb..afae32a91 100644 --- a/typescript/core/plugin.ts +++ b/typescript/core/plugin.ts @@ -1,7 +1,7 @@ -import { _Widget } from "./widget"; +import { Widget } from "./widget"; type configWidgetFn = (type: string, options: Obj) => void -type configObjectFn = (type: string, widget: _Widget) => void +type configObjectFn = (type: string, widget: Widget) => void export type _config = (widgetFunction: configWidgetFn | configWidgetFn[], objectFunction: configObjectFn | configObjectFn[]) => void diff --git a/typescript/core/widget.ts b/typescript/core/widget.ts index 4c1fc9d2f..3cd8f175e 100644 --- a/typescript/core/widget.ts +++ b/typescript/core/widget.ts @@ -1,401 +1,5 @@ import { OB, _OB } from "./ob"; -export interface _WidgetStatic { - - /** - * 注册渲染引擎 - * @param engine 引擎 - */ - registerRenderEngine(engine: RenderEngine): void; -} - -export interface _Widget extends _OB { - - /** - * 出现loading的锁 - */ - __asking: boolean; - - /** - * 同步锁 - */ - __async: boolean; - - /** - * widget类标识符 - */ - widgetName: string | null; - - /** - * 是否为根节点 - */ - _isRoot: boolean; - - /** - * 父节点 - */ - _parent: _Widget | null; - // TODO: 完成jquery文件夹后把这块改了 - /** - * 真实dom的类jQuery对象 - */ - element: { - width(): number; - height(): number; - width(width: number | string): _Widget["element"]; - height(height: number | string): _Widget["element"]; - [key: string]: any; - }; - - /** - * 子元素 - */ - _children: { - [key: string]: _Widget; - }; - - /** - * 是否已挂载 - */ - _isMounted: boolean; - - /** - * 手动设置enable - */ - _manualSetEnable: boolean; - - /** - * 手动设置valid - */ - _manualSetValid: boolean; - - /** - * 渲染引擎 - */ - _renderEngine: RenderEngine; - - _store(): void; - - // 生命周期函数 - /** - * 初始化前 - */ - beforeInit?(cb: Function): void; - - /** - * 创建前 - */ - beforeCreate?(): void; - - /** - * 创建 - */ - created?(): void; - - /** - * 渲染 - */ - render?(): any; - - /** - * 挂载前 - */ - beforeMount?(): void; - - /** - * 挂载 - */ - mounted?(): void; - - /** - * 更新前 - */ - shouldUpdate?(...args: any[]): void; - - /** - * 更新 - */ - update?(...args: any[]): void; - - /** - * 销毁前 - */ - beforeDestroy?(): void; - - /** - * 销毁 - */ - destroyed?(): void; - - /** - * 初始化render函数 - */ - _initRender: () => void; - - /** - * 内部主render函数 - */ - _render: () => void; - - /** - * 初始化根节点 - */ - _initRoot: () => void; - - /** - * 初始化元素宽度 - */ - _initElementWidth: () => void; - - /** - * 初始化元素高度 - */ - _initElementHeight: () => void; - - /** - * 初始化元素可见 - */ - _initVisual: () => void; - - /** - * 初始化元素可用不可用 - */ - _initEffects: () => void; - - /** - * 设置mounted锁 - */ - _initState: () => void; - - /** - * 生成真实dom - */ - _initElement: () => void; - - /** - * 设置父节点 - */ - _setParent: () => void; - - /** - * @param force 是否强制挂载子节点 - * @param deep 子节点是否也是按照当前force处理 - * @param lifeHook 生命周期钩子触不触发，默认触发 - * @param predicate 递归每个widget的回调 - */ - _mount(force?: boolean, deep?: boolean, lifeHook?: boolean, predicate?: Function): boolean; - - /** - * 挂载子节点 - */ - _mountChildren?(): void; - - /** - * 是否已挂载 - */ - isMounted(): boolean; - - /** - * 设置宽度 - */ - setWidth(w: number): void; - - /** - * 设置高度 - */ - setHeight(h: number): void; - - /** - * 设置可用 - */ - _setEnable(enable: boolean): void; - - /** - * 设置合法 - */ - _setValid(valid: boolean): void; - - /** - * 设置可见 - */ - _setVisible(visible: boolean): void; - - /** - * 设置是否可用 - */ - setEnable(enable: boolean): void; - - /** - * 设置是否可见 - */ - setVisible(visible: boolean): void; - - /** - * 设置是否合法 - */ - setValid(valid: boolean): void; - - /** - * 设置反馈效果 - * @param args arguments参数 - */ - doBehavior(...args: any[]): void; - - /** - * 获取宽度 - */ - getWidth(): number; - - /** - * 获取高度 - */ - getHeight(): number; - - /** - * 是否合法 - */ - isValid(): boolean; - - /** - * 新增子元素 - */ - addWidget(_name: any, _widget: _Widget): _Widget; - - /** - * 根据wigetname获取子元素实例 - */ - getWidgetByName(_name: string): _Widget | undefined; - - /** - * 移除子元素 - * @param nameOrWidget widgetName或widget实例 - */ - removeWidget(nameOrWidget: string | _Widget): void; - - /** - * 是否有某个子元素 - */ - hasWidget(name: string): boolean; - - /** - * 获取widgetName - */ - getName(): string; - - /** - * 设置tag - * @param tag html tag - */ - setTag(tag: string): void; - - /** - * 获取tag - */ - getTag(): string; - - /** - * 设置属性 - * @param key 键 - * @param value 值 - */ - attr(key: string | { [key: string]: any }, value?: any): any; - - /** - * 获取text - */ - getText(): string; - - /** - * 设置text - */ - setText(text: string): void; - - /** - * 获取值 - */ - getValue(): any; - - /** - * 设置值 - */ - setValue(...args: any[]): void; - - /** - * 获取是否enable - */ - isEnabled(): boolean; - - /** - * 是否可见 - */ - isVisible(): boolean; - - /** - * disable元素 - */ - disable(): void; - - /** - * enable元素 - */ - enable(): void; - - /** - * 是widget合法 - */ - valid(): void; - - /** - * 使元素不合法 - */ - invalid(): void; - - /** - * 使不可见 - */ - invisible(..._args: any[]): void; - - /** - * 可见 - */ - visible(..._args: any[]): void; - - /** - * 清除子元素 - */ - __d(): void; - - /** - * 取消挂载 - */ - _unMount(): void; - - /** - * hang元素 - */ - isolate(): void; - - /** - * 请除元素 - */ - empty(): void; - - /** - * 刷新控件 - */ - reset(): void; - - /** - * 内部destory方法 - */ - _destroy(): void; - - /** - * destory元素 - */ - destroy(): void; -} - interface RenderEngine { // TODO: 完成jquery文件夹后把这块改了 /** @@ -411,13 +15,17 @@ interface RenderEngine { } export declare class Widget extends OB { - // /** * 注册渲染引擎 * @param engine 引擎 */ static registerRenderEngine(engine: RenderEngine): void; + /** + * 渲染引擎 + */ + static _renderEngine: RenderEngine; + /** * 出现loading的锁 */ @@ -441,7 +49,7 @@ export declare class Widget extends OB { /** * 父节点 */ - _parent: _Widget | null; + _parent: Widget | null; // TODO: 完成jquery文件夹后把这块改了 /** * 真实dom的类jQuery对象 @@ -458,7 +66,7 @@ export declare class Widget extends OB { * 子元素 */ _children: { - [key: string]: _Widget; + [key: string]: Widget; }; /** @@ -476,11 +84,6 @@ export declare class Widget extends OB { */ _manualSetValid: boolean; - /** - * 渲染引擎 - */ - _renderEngine: RenderEngine; - _store(): void; // 生命周期函数 @@ -671,19 +274,19 @@ export declare class Widget extends OB { /** * 新增子元素 */ - addWidget(widget: _Widget): _Widget; - addWidget(_name: any, _widget: _Widget): _Widget; + addWidget(widget: Widget): Widget; + addWidget(_name: any, _widget: Widget): Widget; /** * 根据wigetname获取子元素实例 */ - getWidgetByName(_name: string): _Widget | undefined; + getWidgetByName(_name: string): Widget | undefined; /** * 移除子元素 * @param nameOrWidget widgetName或widget实例 */ - removeWidget(nameOrWidget: string | _Widget): void; + removeWidget(nameOrWidget: string | Widget): void; /** * 是否有某个子元素 diff --git a/typescript/index.ts b/typescript/index.ts index a1b9831c9..cf63c604d 100644 --- a/typescript/index.ts +++ b/typescript/index.ts @@ -20,6 +20,7 @@ import { IconChangeButton } from "./case/button/icon/icon.change"; import { MultiSelectItem } from "./case/button/item.multiselect"; import { BubbleCombo } from "./case/combo/bubblecombo/combo.bubble"; import { TextValueCombo } from "./case/combo/combo.textvalue"; +import { TextValueComboPopup } from "./case/combo/popup.textvalue"; import { SmallTextValueCombo } from "./case/combo/combo.textvaluesmall"; import { SearchTextValueCombo } from "./case/combo/searchtextvaluecombo/combo.searchtextvalue"; import { SignEditor } from "./case/editor/editor.sign"; @@ -226,6 +227,7 @@ export interface BI extends _func, _i18n, _base, _inject, _var, _web, _utils { ButtonGroup: typeof ButtonGroup; Combo: typeof Combo; TextValueCombo: typeof TextValueCombo; + TextValueComboPopup: typeof TextValueComboPopup; SmallTextValueCombo: typeof SmallTextValueCombo; BubbleCombo: typeof BubbleCombo; AllValueMultiTextValueCombo: typeof AllValueMultiTextValueCombo; @@ -464,6 +466,7 @@ export { MultiSelectBar, SelectList, TextValueCombo, + TextValueComboPopup, SmallTextValueCombo, Editor, IconLabel,