implement detectOverflow for boundaries-selector

RobinCK · Mar 18, 2020 · b8c47b1 · b8c47b1
1 parent 0d45dc6
commit b8c47b1
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 15 deletions.
diff --git a/dist/vue-popper.js b/dist/vue-popper.js
@@ -1,8 +1,10 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@popperjs/core')) :
-  typeof define === 'function' && define.amd ? define(['@popperjs/core'], factory) :
-  (global = global || self, global.VuePopper = factory(global.core));
-}(this, (function (core) { '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';
+
+  detectOverflow = detectOverflow && Object.prototype.hasOwnProperty.call(detectOverflow, 'default') ? detectOverflow['default'] : detectOverflow;
 
   //
 
@@ -221,12 +223,13 @@
           }
 
           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;
+              });
             }
           }
 

diff --git a/dist/vue-popper.min.js b/dist/vue-popper.min.js
diff --git a/src/component/popper.js.vue b/src/component/popper.js.vue
@@ -55,6 +55,7 @@
 
 <script>
   import { createPopper } from '@popperjs/core';
+  import detectOverflow from '@popperjs/core/lib/utils/detectOverflow.js';
 
   function on(element, event, handler) {
     if (element && event && handler) {
@@ -281,12 +282,12 @@
           }
 
           if (this.boundariesSelector) {
-            const boundariesElement = document.querySelector(this.boundariesSelector);
+            const 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
+              });
             }
           }