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 @@