aboutsummaryrefslogtreecommitdiff
path: root/src/components/popover/popover.js
diff options
context:
space:
mode:
authorShpuld Shpuldson <shp@cock.li>2021-08-08 16:14:22 +0300
committerShpuld Shpuldson <shp@cock.li>2021-08-08 16:14:22 +0300
commitcc170aa3ecffa75004760fc6d02bd87373132f7d (patch)
tree7d187ff11219399318f7482e0bc032cb20d025b9 /src/components/popover/popover.js
parentc3fcbbd918ddef4e3f574a464fd10f4899bb2dce (diff)
parent425919a0d292b79869ebefd2a4d52ed4db45d319 (diff)
Update master with 2.4.0
Diffstat (limited to 'src/components/popover/popover.js')
-rw-r--r--src/components/popover/popover.js16
1 files changed, 13 insertions, 3 deletions
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index bfe39212..6ccf32f0 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -3,25 +3,32 @@ const Popover = {
props: {
// Action to trigger popover: either 'hover' or 'click'
trigger: String,
+
// Either 'top' or 'bottom'
placement: String,
+
// Takes object with properties 'x' and 'y', values of these can be
// 'container' for using offsetParent as boundaries for either axis
// or 'viewport'
boundTo: Object,
+
// Takes a selector to use as a replacement for the parent container
// for getting boundaries for x an y axis
boundToSelector: String,
+
// Takes a top/bottom/left/right object, how much space to leave
// between boundary and popover element
margin: Object,
+
// Takes a x/y object and tells how many pixels to offset from
// anchor point on either axis
offset: Object,
+
// Replaces the classes you may want for the popover container.
// Use 'popover-default' in addition to get the default popover
// styles with your custom class.
popoverClass: String,
+
// If true, subtract padding when calculating position for the popover,
// use it when popover offset looks to be different on top vs bottom.
removePadding: Boolean
@@ -47,8 +54,11 @@ const Popover = {
}
// Popover will be anchored around this element, trigger ref is the container, so
- // its children are what are inside the slot. Expect only one slot="trigger".
+ // its children are what are inside the slot. Expect only one v-slot:trigger.
const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el
+ // SVGs don't have offsetWidth/Height, use fallback
+ const anchorWidth = anchorEl.offsetWidth || anchorEl.clientWidth
+ const anchorHeight = anchorEl.offsetHeight || anchorEl.clientHeight
const screenBox = anchorEl.getBoundingClientRect()
// Screen position of the origin point for popover
const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top }
@@ -107,11 +117,11 @@ const Popover = {
const yOffset = (this.offset && this.offset.y) || 0
const translateY = usingTop
- ? -anchorEl.offsetHeight + vPadding - yOffset - content.offsetHeight
+ ? -anchorHeight + vPadding - yOffset - content.offsetHeight
: yOffset
const xOffset = (this.offset && this.offset.x) || 0
- const translateX = (anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset + xOffset
+ const translateX = anchorWidth * 0.5 - content.offsetWidth * 0.5 + horizOffset + xOffset
// Note, separate translateX and translateY avoids blurry text on chromium,
// single translate or translate3d resulted in blurry text.