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

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.core, 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,27 @@
         currentPlacement: '',
         popperOptions: {
           placement: 'bottom',
-          computeStyle: {
-            gpuAcceleration: false
-          }
+          modifiers: [{
+            name: 'offset',
+            options: {
+              offset: [0, 8]
+            }
+          }, {
+            name: 'computeStyles',
+            options: {
+              gpuAcceleration: false // true by default
+
+            }
+          }]
         }
       };
     },
     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 +205,7 @@
           document.body.removeChild(this.popper.parentElement);
         }
       },
-      createPopper: function createPopper() {
+      doCreatePopper: function doCreatePopper() {
         var _this = this;
 
         this.$nextTick(function () {
@@ -223,22 +223,23 @@
           }
 
           if (_this.boundariesSelector) {
-            var boundariesElement = document.querySelector(_this.boundariesSelector);
+            var customBoundary = document.querySelector(_this.boundariesSelector);
+
+            if (customBoundary) {
+              detectOverflow(state, {
+                boundary: customBoundary // 'clippingParents' by default
 
-            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;
+              });
             }
           }
 
-          _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 +261,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;
@@ -395,7 +396,7 @@
   /* 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";
+  script.__file = "/home/curtis/code/github.com/RobinCK/vue-popper/src/component/popper.js.vue";
   /* template */
   var __vue_render__ = function() {
     var _vm = this;
@@ -471,4 +472,4 @@
 
   return VuePopper;
 
-}));
+})));