diff --git a/build/rollup.config.js b/build/rollup.config.js
index 9f747e8..dc434de 100644
--- a/build/rollup.config.js
+++ b/build/rollup.config.js
@@ -11,6 +11,9 @@ export default {
file: isProduction ? 'dist/vue-popper.min.js' : 'dist/vue-popper.js',
format: 'umd',
name: 'VuePopper',
+ globals: {
+ '@popperjs/core': 'Popper',
+ },
},
plugins: [
postcss({ extract: true }),
diff --git a/dist/vue-popper.css b/dist/vue-popper.css
index 22de4f4..b706c0a 100644
--- a/dist/vue-popper.css
+++ b/dist/vue-popper.css
@@ -1,69 +1,34 @@
.popper {
- width: auto;
- background-color: #fafafa;
- color: #212121;
- text-align: center;
- padding: 2px;
- display: inline-block;
- border-radius: 3px;
+ background: #333;
+ color: white;
+ font-weight: bold;
+ padding: 4px 8px;
+ font-size: 13px;
+ border-radius: 4px;
+}
+.popper__arrow,
+.popper__arrow::before {
position: absolute;
- font-size: 14px;
- font-weight: normal;
- border: 1px #ebebeb solid;
- z-index: 200000;
- -moz-box-shadow: rgb(58, 58, 58) 0 0 6px 0;
- -webkit-box-shadow: rgb(58, 58, 58) 0 0 6px 0;
- box-shadow: rgb(58, 58, 58) 0 0 6px 0;
+ left: 0;
+ width: 8px;
+ height: 8px;
+ z-index: -1;
}
-.popper .popper__arrow {
- width: 0;
- height: 0;
- border-style: solid;
- position: absolute;
- margin: 5px;
-}
-.popper[x-placement^="top"] {
- margin-bottom: 5px;
-}
-.popper[x-placement^="top"] .popper__arrow {
- border-width: 5px 5px 0 5px;
- border-color: #fafafa transparent transparent transparent;
- bottom: -5px;
- left: calc(50% - 5px);
- margin-top: 0;
- margin-bottom: 0;
-}
-.popper[x-placement^="bottom"] {
- margin-top: 5px;
-}
-.popper[x-placement^="bottom"] .popper__arrow {
- border-width: 0 5px 5px 5px;
- border-color: transparent transparent #fafafa transparent;
- top: -5px;
- left: calc(50% - 5px);
- margin-top: 0;
- margin-bottom: 0;
+.popper__arrow::before {
+ content: '';
+ transform: rotate(45deg);
+ background: #333;
}
-.popper[x-placement^="right"] {
- margin-left: 5px;
+.popper[data-popper-placement^='top'] .popper__arrow {
+ bottom: -4px;
}
-.popper[x-placement^="right"] .popper__arrow {
- border-width: 5px 5px 5px 0;
- border-color: transparent #fafafa transparent transparent;
- left: -5px;
- top: calc(50% - 5px);
- margin-left: 0;
- margin-right: 0;
+.popper[data-popper-placement^='bottom'] .popper__arrow {
+ top: -4px;
}
-.popper[x-placement^="left"] {
- margin-right: 5px;
+.popper[data-popper-placement^='right'] .popper__arrow {
+ left: -4px;
}
-.popper[x-placement^="left"] .popper__arrow {
- border-width: 5px 0 5px 5px;
- border-color: transparent transparent transparent #fafafa;
- right: -5px;
- top: calc(50% - 5px);
- margin-left: 0;
- margin-right: 0;
+.popper[data-popper-placement^='left'] .popper__arrow {
+ right: -4px;
}
diff --git a/dist/vue-popper.js b/dist/vue-popper.js
index e7da2e0..7620859 100644
--- a/dist/vue-popper.js
+++ b/dist/vue-popper.js
@@ -1,10 +1,10 @@
(function (global, factory) {
- typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('popper.js')) :
- typeof define === 'function' && define.amd ? define(['popper.js'], factory) :
- (global = global || self, global.VuePopper = factory(global.Popper));
-}(this, function (Popper) { 'use strict';
+ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@popperjs/core'), require('@popperjs/core/lib/utils/detectOverflow.js')) :
+ typeof define === 'function' && define.amd ? define(['@popperjs/core', '@popperjs/core/lib/utils/detectOverflow.js'], factory) :
+ (global = global || self, global.VuePopper = factory(global.Popper, global.detectOverflow));
+}(this, (function (core, detectOverflow) { 'use strict';
- Popper = Popper && Popper.hasOwnProperty('default') ? Popper['default'] : Popper;
+ detectOverflow = detectOverflow && Object.prototype.hasOwnProperty.call(detectOverflow, 'default') ? detectOverflow['default'] : detectOverflow;
//
@@ -97,27 +97,21 @@
currentPlacement: '',
popperOptions: {
placement: 'bottom',
- computeStyle: {
- gpuAcceleration: false
- }
+ modifiers: [{
+ name: 'offset',
+ options: {
+ offset: [0, 8]
+ }
+ }]
}
};
},
watch: {
showPopper: function showPopper(value) {
if (value) {
- this.$emit('show', this);
-
- if (this.popperJS) {
- this.popperJS.enableEventListeners();
- }
-
this.updatePopper();
+ this.$emit('show', this);
} else {
- if (this.popperJS) {
- this.popperJS.disableEventListeners();
- }
-
this.$emit('hide', this);
}
},
@@ -205,7 +199,7 @@
document.body.removeChild(this.popper.parentElement);
}
},
- createPopper: function createPopper() {
+ doCreatePopper: function doCreatePopper() {
var _this = this;
this.$nextTick(function () {
@@ -223,22 +217,23 @@
}
if (_this.boundariesSelector) {
- var boundariesElement = document.querySelector(_this.boundariesSelector);
+ var customBoundary = document.querySelector(_this.boundariesSelector);
- if (boundariesElement) {
- _this.popperOptions.modifiers = Object.assign({}, _this.popperOptions.modifiers);
- _this.popperOptions.modifiers.preventOverflow = Object.assign({}, _this.popperOptions.modifiers.preventOverflow);
- _this.popperOptions.modifiers.preventOverflow.boundariesElement = boundariesElement;
+ if (customBoundary) {
+ detectOverflow(state, {
+ boundary: customBoundary // 'clippingParents' by default
+
+ });
}
}
- _this.popperOptions.onCreate = function () {
+ _this.popperOptions.onFirstUpdate = function () {
_this.$emit('created', _this);
_this.$nextTick(_this.updatePopper);
};
- _this.popperJS = new Popper(_this.referenceElm, _this.popper, _this.popperOptions);
+ _this.popperJS = core.createPopper(_this.referenceElm, _this.popper, _this.popperOptions);
});
},
destroyPopper: function destroyPopper() {
@@ -260,12 +255,12 @@
this.appendedArrow = true;
var arrow = document.createElement('div');
- arrow.setAttribute('x-arrow', '');
+ arrow.setAttribute('data-popper-arrow', '');
arrow.className = 'popper__arrow';
element.appendChild(arrow);
},
updatePopper: function updatePopper() {
- this.popperJS ? this.popperJS.scheduleUpdate() : this.createPopper();
+ this.popperJS ? this.popperJS.update() : this.doCreatePopper();
},
onMouseOver: function onMouseOver() {
var _this2 = this;
@@ -309,21 +304,21 @@
}
};
- function normalizeComponent(compiledTemplate, injectStyle, defaultExport, scopeId, isFunctionalTemplate, moduleIdentifier
+ function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
/* server only */
- , isShadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
- if (typeof isShadowMode === 'function') {
+ , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+ if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
- createInjector = isShadowMode;
- isShadowMode = false;
- } // Vue.extend constructor export interop
+ createInjector = shadowMode;
+ shadowMode = false;
+ } // Vue.extend constructor export interop.
- const options = typeof defaultExport === 'function' ? defaultExport.options : defaultExport; // render functions
+ const options = typeof script === 'function' ? script.options : script; // render functions
- if (compiledTemplate && compiledTemplate.render) {
- options.render = compiledTemplate.render;
- options.staticRenderFns = compiledTemplate.staticRenderFns;
+ if (template && template.render) {
+ options.render = template.render;
+ options.staticRenderFns = template.staticRenderFns;
options._compiled = true; // functional template
if (isFunctionalTemplate) {
@@ -352,8 +347,8 @@
} // inject component styles
- if (injectStyle) {
- injectStyle.call(this, createInjectorSSR(context));
+ if (style) {
+ style.call(this, createInjectorSSR(context));
} // register component module identifier for async chunk inference
@@ -365,11 +360,11 @@
options._ssrRegister = hook;
- } else if (injectStyle) {
- hook = isShadowMode ? function () {
- injectStyle.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
+ } else if (style) {
+ hook = shadowMode ? function (context) {
+ style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
} : function (context) {
- injectStyle.call(this, createInjector(context));
+ style.call(this, createInjector(context));
};
}
@@ -389,13 +384,11 @@
}
}
- return defaultExport;
+ return script;
}
/* script */
const __vue_script__ = script;
- // For security concerns, we use only base name in production mode. See https://github.com/vuejs/rollup-plugin-vue/issues/258
- script.__file = "/Users/user/projects/vue-popper/src/component/popper.js.vue";
/* template */
var __vue_render__ = function() {
var _vm = this;
@@ -456,19 +449,23 @@
/* style inject SSR */
+ /* style inject shadow dom */
+
- var VuePopper = normalizeComponent(
+ const __vue_component__ = normalizeComponent(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
+ false,
+ undefined,
undefined,
undefined
);
- return VuePopper;
+ return __vue_component__;
-}));
+})));
diff --git a/dist/vue-popper.min.css b/dist/vue-popper.min.css
index 163f41e..c26efb7 100644
--- a/dist/vue-popper.min.css
+++ b/dist/vue-popper.min.css
@@ -1 +1 @@
-.popper{width:auto;background-color:#fafafa;color:#212121;text-align:center;padding:2px;display:inline-block;border-radius:3px;position:absolute;font-size:14px;font-weight:400;border:1px #ebebeb solid;z-index:200000;-moz-box-shadow:#3a3a3a 0 0 6px 0;-webkit-box-shadow:#3a3a3a 0 0 6px 0;box-shadow:#3a3a3a 0 0 6px 0}.popper .popper__arrow{width:0;height:0;border-style:solid;position:absolute;margin:5px}.popper[x-placement^=top]{margin-bottom:5px}.popper[x-placement^=top] .popper__arrow{border-width:5px 5px 0 5px;border-color:#fafafa transparent transparent transparent;bottom:-5px;left:calc(50% - 5px);margin-top:0;margin-bottom:0}.popper[x-placement^=bottom]{margin-top:5px}.popper[x-placement^=bottom] .popper__arrow{border-width:0 5px 5px 5px;border-color:transparent transparent #fafafa transparent;top:-5px;left:calc(50% - 5px);margin-top:0;margin-bottom:0}.popper[x-placement^=right]{margin-left:5px}.popper[x-placement^=right] .popper__arrow{border-width:5px 5px 5px 0;border-color:transparent #fafafa transparent transparent;left:-5px;top:calc(50% - 5px);margin-left:0;margin-right:0}.popper[x-placement^=left]{margin-right:5px}.popper[x-placement^=left] .popper__arrow{border-width:5px 0 5px 5px;border-color:transparent transparent transparent #fafafa;right:-5px;top:calc(50% - 5px);margin-left:0;margin-right:0}
\ No newline at end of file
+.popper{background:#333;color:#fff;font-weight:700;padding:4px 8px;font-size:13px;border-radius:4px}.popper__arrow,.popper__arrow::before{position:absolute;left:0;width:8px;height:8px;z-index:-1}.popper__arrow::before{content:'';transform:rotate(45deg);background:#333}.popper[data-popper-placement^=top] .popper__arrow{bottom:-4px}.popper[data-popper-placement^=bottom] .popper__arrow{top:-4px}.popper[data-popper-placement^=right] .popper__arrow{left:-4px}.popper[data-popper-placement^=left] .popper__arrow{right:-4px}
\ No newline at end of file
diff --git a/dist/vue-popper.min.js b/dist/vue-popper.min.js
index 00b1d12..6872307 100644
--- a/dist/vue-popper.min.js
+++ b/dist/vue-popper.min.js
@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("popper.js")):"function"==typeof define&&define.amd?define(["popper.js"],t):(e=e||self).VuePopper=t(e.Popper)}(this,function(e){"use strict";function t(e,t,o){e&&t&&o&&(document.addEventListener?e.addEventListener(t,o,!1):e.attachEvent("on"+t,o))}function o(e,t,o){e&&t&&(document.removeEventListener?e.removeEventListener(t,o,!1):e.detachEvent("on"+t,o))}e=e&&e.hasOwnProperty("default")?e.default:e;var n={props:{tagName:{type:String,default:"span"},trigger:{type:String,default:"hover",validator:function(e){return["clickToOpen","click","clickToToggle","hover","focus"].indexOf(e)>-1}},delayOnMouseOver:{type:Number,default:10},delayOnMouseOut:{type:Number,default:10},disabled:{type:Boolean,default:!1},content:String,enterActiveClass:String,leaveActiveClass:String,boundariesSelector:String,reference:{},forceShow:{type:Boolean,default:!1},dataValue:{default:null},appendToBody:{type:Boolean,default:!1},visibleArrow:{type:Boolean,default:!0},transition:{type:String,default:""},stopPropagation:{type:Boolean,default:!1},preventDefault:{type:Boolean,default:!1},options:{type:Object,default:function(){return{}}},rootClass:{type:String,default:""}},data:function(){return{referenceElm:null,popperJS:null,showPopper:!1,currentPlacement:"",popperOptions:{placement:"bottom",computeStyle:{gpuAcceleration:!1}}}},watch:{showPopper:function(e){e?(this.$emit("show",this),this.popperJS&&this.popperJS.enableEventListeners(),this.updatePopper()):(this.popperJS&&this.popperJS.disableEventListeners(),this.$emit("hide",this))},forceShow:{handler:function(e){this[e?"doShow":"doClose"]()},immediate:!0},disabled:function(e){e&&(this.showPopper=!1)}},created:function(){this.appendedArrow=!1,this.appendedToBody=!1,this.popperOptions=Object.assign(this.popperOptions,this.options)},mounted:function(){switch(this.referenceElm=this.reference||this.$slots.reference[0].elm,this.popper=this.$slots.default[0].elm,this.trigger){case"clickToOpen":t(this.referenceElm,"click",this.doShow),t(document,"click",this.handleDocumentClick);break;case"click":case"clickToToggle":t(this.referenceElm,"click",this.doToggle),t(document,"click",this.handleDocumentClick);break;case"hover":t(this.referenceElm,"mouseover",this.onMouseOver),t(this.popper,"mouseover",this.onMouseOver),t(this.referenceElm,"mouseout",this.onMouseOut),t(this.popper,"mouseout",this.onMouseOut);break;case"focus":t(this.referenceElm,"focus",this.onMouseOver),t(this.popper,"focus",this.onMouseOver),t(this.referenceElm,"blur",this.onMouseOut),t(this.popper,"blur",this.onMouseOut)}},methods:{doToggle:function(e){this.stopPropagation&&e.stopPropagation(),this.preventDefault&&e.preventDefault(),this.forceShow||(this.showPopper=!this.showPopper)},doShow:function(){this.showPopper=!0},doClose:function(){this.showPopper=!1},doDestroy:function(){this.showPopper||(this.popperJS&&(this.popperJS.destroy(),this.popperJS=null),this.appendedToBody&&(this.appendedToBody=!1,document.body.removeChild(this.popper.parentElement)))},createPopper:function(){var t=this;this.$nextTick(function(){if(t.visibleArrow&&t.appendArrow(t.popper),t.appendToBody&&!t.appendedToBody&&(t.appendedToBody=!0,document.body.appendChild(t.popper.parentElement)),t.popperJS&&t.popperJS.destroy&&t.popperJS.destroy(),t.boundariesSelector){var o=document.querySelector(t.boundariesSelector);o&&(t.popperOptions.modifiers=Object.assign({},t.popperOptions.modifiers),t.popperOptions.modifiers.preventOverflow=Object.assign({},t.popperOptions.modifiers.preventOverflow),t.popperOptions.modifiers.preventOverflow.boundariesElement=o)}t.popperOptions.onCreate=function(){t.$emit("created",t),t.$nextTick(t.updatePopper)},t.popperJS=new e(t.referenceElm,t.popper,t.popperOptions)})},destroyPopper:function(){o(this.referenceElm,"click",this.doToggle),o(this.referenceElm,"mouseup",this.doClose),o(this.referenceElm,"mousedown",this.doShow),o(this.referenceElm,"focus",this.doShow),o(this.referenceElm,"blur",this.doClose),o(this.referenceElm,"mouseout",this.onMouseOut),o(this.referenceElm,"mouseover",this.onMouseOver),o(document,"click",this.handleDocumentClick),this.showPopper=!1,this.doDestroy()},appendArrow:function(e){if(!this.appendedArrow){this.appendedArrow=!0;var t=document.createElement("div");t.setAttribute("x-arrow",""),t.className="popper__arrow",e.appendChild(t)}},updatePopper:function(){this.popperJS?this.popperJS.scheduleUpdate():this.createPopper()},onMouseOver:function(){var e=this;clearTimeout(this._timer),this._timer=setTimeout(function(){e.showPopper=!0},this.delayOnMouseOver)},onMouseOut:function(){var e=this;clearTimeout(this._timer),this._timer=setTimeout(function(){e.showPopper=!1},this.delayOnMouseOut)},handleDocumentClick:function(e){this.$el&&this.referenceElm&&!this.elementContains(this.$el,e.target)&&!this.elementContains(this.referenceElm,e.target)&&this.popper&&!this.elementContains(this.popper,e.target)&&(this.$emit("documentClick",this),this.forceShow||(this.showPopper=!1))},elementContains:function(e,t){return"function"==typeof e.contains&&e.contains(t)}},destroyed:function(){this.destroyPopper()}};const r=n;n.__file="popper.js.vue";return function(e,t,o,n,r,s,i,p,c,a){"function"==typeof i&&(c=p,p=i,i=!1);const d="function"==typeof o?o.options:o;let l;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,r&&(d.functional=!0)),n&&(d._scopeId=n),s?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,c(e)),e&&e._registeredComponents&&e._registeredComponents.add(s)},d._ssrRegister=l):t&&(l=i?function(){t.call(this,a(this.$root.$options.shadowRoot))}:function(e){t.call(this,p(e))}),l)if(d.functional){const e=d.render;d.render=function(t,o){return l.call(o),e(t,o)}}else{const e=d.beforeCreate;d.beforeCreate=e?[].concat(e,l):[l]}return o}({render:function(){var e=this,t=e.$createElement,o=e._self._c||t;return o(e.tagName,{tag:"component"},[o("transition",{attrs:{name:e.transition,"enter-active-class":e.enterActiveClass,"leave-active-class":e.leaveActiveClass},on:{"after-leave":e.doDestroy}},[o("span",{directives:[{name:"show",rawName:"v-show",value:!e.disabled&&e.showPopper,expression:"!disabled && showPopper"}],ref:"popper",class:e.rootClass},[e._t("default",[e._v(e._s(e.content))])],2)]),e._v(" "),e._t("reference")],2)},staticRenderFns:[]},void 0,r,void 0,!1,void 0,void 0,void 0)});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("@popperjs/core"),require("@popperjs/core/lib/utils/detectOverflow.js")):"function"==typeof define&&define.amd?define(["@popperjs/core","@popperjs/core/lib/utils/detectOverflow.js"],t):(e=e||self).VuePopper=t(e.Popper,e.detectOverflow)}(this,(function(e,t){"use strict";function o(e,t,o){e&&t&&o&&(document.addEventListener?e.addEventListener(t,o,!1):e.attachEvent("on"+t,o))}function n(e,t,o){e&&t&&(document.removeEventListener?e.removeEventListener(t,o,!1):e.detachEvent("on"+t,o))}t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;return function(e,t,o,n,r,s,i,p,c,a){"boolean"!=typeof i&&(c=p,p=i,i=!1);const d="function"==typeof o?o.options:o;let l;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,r&&(d.functional=!0)),n&&(d._scopeId=n),s?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,c(e)),e&&e._registeredComponents&&e._registeredComponents.add(s)},d._ssrRegister=l):t&&(l=i?function(e){t.call(this,a(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,p(e))}),l)if(d.functional){const e=d.render;d.render=function(t,o){return l.call(o),e(t,o)}}else{const e=d.beforeCreate;d.beforeCreate=e?[].concat(e,l):[l]}return o}({render:function(){var e=this,t=e.$createElement,o=e._self._c||t;return o(e.tagName,{tag:"component"},[o("transition",{attrs:{name:e.transition,"enter-active-class":e.enterActiveClass,"leave-active-class":e.leaveActiveClass},on:{"after-leave":e.doDestroy}},[o("span",{directives:[{name:"show",rawName:"v-show",value:!e.disabled&&e.showPopper,expression:"!disabled && showPopper"}],ref:"popper",class:e.rootClass},[e._t("default",[e._v(e._s(e.content))])],2)]),e._v(" "),e._t("reference")],2)},staticRenderFns:[]},void 0,{props:{tagName:{type:String,default:"span"},trigger:{type:String,default:"hover",validator:function(e){return["clickToOpen","click","clickToToggle","hover","focus"].indexOf(e)>-1}},delayOnMouseOver:{type:Number,default:10},delayOnMouseOut:{type:Number,default:10},disabled:{type:Boolean,default:!1},content:String,enterActiveClass:String,leaveActiveClass:String,boundariesSelector:String,reference:{},forceShow:{type:Boolean,default:!1},dataValue:{default:null},appendToBody:{type:Boolean,default:!1},visibleArrow:{type:Boolean,default:!0},transition:{type:String,default:""},stopPropagation:{type:Boolean,default:!1},preventDefault:{type:Boolean,default:!1},options:{type:Object,default:function(){return{}}},rootClass:{type:String,default:""}},data:function(){return{referenceElm:null,popperJS:null,showPopper:!1,currentPlacement:"",popperOptions:{placement:"bottom",modifiers:[{name:"offset",options:{offset:[0,8]}}]}}},watch:{showPopper:function(e){e?(this.updatePopper(),this.$emit("show",this)):this.$emit("hide",this)},forceShow:{handler:function(e){this[e?"doShow":"doClose"]()},immediate:!0},disabled:function(e){e&&(this.showPopper=!1)}},created:function(){this.appendedArrow=!1,this.appendedToBody=!1,this.popperOptions=Object.assign(this.popperOptions,this.options)},mounted:function(){switch(this.referenceElm=this.reference||this.$slots.reference[0].elm,this.popper=this.$slots.default[0].elm,this.trigger){case"clickToOpen":o(this.referenceElm,"click",this.doShow),o(document,"click",this.handleDocumentClick);break;case"click":case"clickToToggle":o(this.referenceElm,"click",this.doToggle),o(document,"click",this.handleDocumentClick);break;case"hover":o(this.referenceElm,"mouseover",this.onMouseOver),o(this.popper,"mouseover",this.onMouseOver),o(this.referenceElm,"mouseout",this.onMouseOut),o(this.popper,"mouseout",this.onMouseOut);break;case"focus":o(this.referenceElm,"focus",this.onMouseOver),o(this.popper,"focus",this.onMouseOver),o(this.referenceElm,"blur",this.onMouseOut),o(this.popper,"blur",this.onMouseOut)}},methods:{doToggle:function(e){this.stopPropagation&&e.stopPropagation(),this.preventDefault&&e.preventDefault(),this.forceShow||(this.showPopper=!this.showPopper)},doShow:function(){this.showPopper=!0},doClose:function(){this.showPopper=!1},doDestroy:function(){this.showPopper||(this.popperJS&&(this.popperJS.destroy(),this.popperJS=null),this.appendedToBody&&(this.appendedToBody=!1,document.body.removeChild(this.popper.parentElement)))},doCreatePopper:function(){var o=this;this.$nextTick((function(){if(o.visibleArrow&&o.appendArrow(o.popper),o.appendToBody&&!o.appendedToBody&&(o.appendedToBody=!0,document.body.appendChild(o.popper.parentElement)),o.popperJS&&o.popperJS.destroy&&o.popperJS.destroy(),o.boundariesSelector){var n=document.querySelector(o.boundariesSelector);n&&t(state,{boundary:n})}o.popperOptions.onFirstUpdate=function(){o.$emit("created",o),o.$nextTick(o.updatePopper)},o.popperJS=e.createPopper(o.referenceElm,o.popper,o.popperOptions)}))},destroyPopper:function(){n(this.referenceElm,"click",this.doToggle),n(this.referenceElm,"mouseup",this.doClose),n(this.referenceElm,"mousedown",this.doShow),n(this.referenceElm,"focus",this.doShow),n(this.referenceElm,"blur",this.doClose),n(this.referenceElm,"mouseout",this.onMouseOut),n(this.referenceElm,"mouseover",this.onMouseOver),n(document,"click",this.handleDocumentClick),this.showPopper=!1,this.doDestroy()},appendArrow:function(e){if(!this.appendedArrow){this.appendedArrow=!0;var t=document.createElement("div");t.setAttribute("data-popper-arrow",""),t.className="popper__arrow",e.appendChild(t)}},updatePopper:function(){this.popperJS?this.popperJS.update():this.doCreatePopper()},onMouseOver:function(){var e=this;clearTimeout(this._timer),this._timer=setTimeout((function(){e.showPopper=!0}),this.delayOnMouseOver)},onMouseOut:function(){var e=this;clearTimeout(this._timer),this._timer=setTimeout((function(){e.showPopper=!1}),this.delayOnMouseOut)},handleDocumentClick:function(e){this.$el&&this.referenceElm&&!this.elementContains(this.$el,e.target)&&!this.elementContains(this.referenceElm,e.target)&&this.popper&&!this.elementContains(this.popper,e.target)&&(this.$emit("documentClick",this),this.forceShow||(this.showPopper=!1))},elementContains:function(e,t){return"function"==typeof e.contains&&e.contains(t)}},destroyed:function(){this.destroyPopper()}},void 0,!1,void 0,!1,void 0,void 0,void 0)}));
diff --git a/package.json b/package.json
index f9f278d..c4d941c 100644
--- a/package.json
+++ b/package.json
@@ -46,8 +46,8 @@
]
},
"dependencies": {
- "opencollective-postinstall": "^2.0.2",
- "popper.js": "^1.15.0"
+ "@popperjs/core": "^2.1.1",
+ "opencollective-postinstall": "^2.0.2"
},
"devDependencies": {
"@babel/core": "^7.4.5",
diff --git a/src/component/popper.js.vue b/src/component/popper.js.vue
index 3caa930..b66c975 100644
--- a/src/component/popper.js.vue
+++ b/src/component/popper.js.vue
@@ -1,80 +1,41 @@
@@ -93,7 +54,8 @@