vue-popperjs 3.0 - Upgrade to Popper.js v2.x

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 }),

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;
 }

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__;
 
-}));
+})));