feat(popover/tooltip): Allow append-to property of PopUp Mixins to pass ref. (close #347)

Author: wxsms

src/mixins/popup.mixin.js

@@ -36,7 +36,7 @@ export default {
       default: true
     },
     appendTo: {
-      type: String,
+      type: null,
       default: 'body'
     },
     transition: {
@@ -241,7 +241,14 @@ export default {
             // add to dom
             if (!popUpAppendedContainer) {
               popup.className = `${this.name} ${this.placement} ${this.customClass ? this.customClass : ''} fade`
-              let container = document.querySelector(this.appendTo)
+              let container
+              if (isString(this.appendTo)) { // is selector
+                container = document.querySelector(this.appendTo)
+              } else if (isElement(this.appendTo)) { // is element
+                container = this.appendTo
+              } else if (isElement(this.appendTo.$el)) { // is component
+                container = this.appendTo.$el
+              }
               container.appendChild(popup)
               this.resetPosition()
             }

src/utils/dom.utils.js

@@ -218,19 +218,26 @@ export function isAvailableAtPosition (trigger, popup, placement) {
   return top && right && bottom && left
 }
 
-export function setTooltipPosition (tooltip, trigger, placement, auto, appendToSelector, viewport) {
+export function setTooltipPosition (tooltip, trigger, placement, auto, appendTo, viewport) {
   if (!isElement(tooltip) || !isElement(trigger)) {
     return
   }
   const isPopover = tooltip && tooltip.className && tooltip.className.indexOf('popover') >= 0
   let containerScrollTop
   let containerScrollLeft
-  if (!isExist(appendToSelector) || appendToSelector === 'body') {
+  if (!isExist(appendTo) || appendTo === 'body') {
     const doc = document.documentElement
     containerScrollLeft = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0)
     containerScrollTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
   } else {
-    const container = document.querySelector(appendToSelector)
+    let container
+    if (isString(appendTo)) { // is selector
+      container = document.querySelector(appendTo)
+    } else if (isElement(appendTo)) { // is element
+      container = appendTo
+    } else if (isElement(appendTo.$el)) { // is component
+      container = appendTo.$el
+    }
     containerScrollLeft = container.scrollLeft
     containerScrollTop = container.scrollTop
   }

test/specs/Popover.spec.js

@@ -48,6 +48,50 @@ describe('Popover', () => {
     expect(document.querySelectorAll('.popover').length).to.equal(1)
   })
 
+  it('should be able to use custom string append-to', async () => {
+    vm = createVm(`<div id="test">
+<popover append-to="#test" v-model="show" title="123">
+<button data-role="trigger"></button>
+</popover>
+</div>`, {
+      show: true
+    })
+    await sleep(300)
+    expect(document.querySelectorAll('#test .popover').length).to.equal(1)
+  })
+
+  it('should be able to use custom element append-to', async () => {
+    vm = createVm(`<div id="test" ref="el">
+<popover v-if="appendTo" :append-to="appendTo" v-model="show" title="123">
+<button data-role="trigger"></button>
+</popover>
+</div>`, {
+      show: true,
+      appendTo: null
+    })
+    await vm.$nextTick()
+    vm.appendTo = vm.$refs.el
+    await vm.$nextTick()
+    await sleep(300)
+    expect(document.querySelectorAll('#test .popover').length).to.equal(1)
+  })
+
+  it('should be able to use custom component append-to', async () => {
+    vm = createVm(`<div id="test" ref="el">
+<popover v-if="appendTo" :append-to="appendTo" v-model="show" title="123">
+<button data-role="trigger"></button>
+</popover>
+</div>`, {
+      show: true,
+      appendTo: null
+    })
+    await vm.$nextTick()
+    vm.appendTo = vm
+    await vm.$nextTick()
+    await sleep(300)
+    expect(document.querySelectorAll('#test .popover').length).to.equal(1)
+  })
+
   it('should be able to use popover directive', async () => {
     vm = createVm(`<btn v-popover="msg"></btn>`, {
       msg: { title: 'title', content: 'content' }