refactor: update popper to 2.0.0 version

Author: woothu

package-lock.json

@@ -70,9 +70,9 @@
     "@coreui/icons": "^1.0.0",
     "@coreui/icons-vue": "^1.1.2",
     "@coreui/utils": "^1.0.0",
+    "@popperjs/core": "^2.0.0",
     "lodash.clonedeep": "^4.5.0",
     "perfect-scrollbar": "^1.4.0",
-    "popper.js": "^1.16.0",
     "tooltip.js": "^1.3.3",
     "vue": "^2.6.11",
     "vue-clickaway2": "^2.3.1",

package.json

@@ -33,9 +33,8 @@
 
 <script>
 import CLink from '../link/CLink'
-import Popper from 'popper.js'
+import { createPopper } from '@popperjs/core'
 import { mixin as clickaway } from 'vue-clickaway2'
-import { deepObjectsMerge } from '@coreui/utils/src/index.js'
 
 export default {
   name: 'CDropdown',
@@ -60,10 +59,6 @@ export default {
       validator: val => ['', 'sm', 'lg'].includes(val)
     },
     split: Boolean,
-    offset: {
-      type: Number,
-      default: 0
-    },
     placement: {
       type: String,
       validator: position => {
@@ -76,11 +71,15 @@ export default {
       },
       default: 'bottom-start'
     },
+    offset: {
+      type: Array,
+      default: () => [0, 0]
+    },
     flip: {
       type: Boolean,
       default: true
     },
-    popperConfig: Object
+    customPopperOptions: Object
   },
   data () {
     return {
@@ -135,30 +134,40 @@ export default {
         return
       }
       this.$nextTick(() => {
-        this._popper = new Popper(
+        this._popper = createPopper(
           this.$el.firstElementChild, 
           this.$refs.menu, 
-          this.computedPopperConfig
+          this.customPopperOptions || this.defaultPopperOptions
         )
       })
       
     }
   },
   computed: {
-    generatedPopperConfig () {
+    defaultPopperOptions () {
       return {
         placement: this.placement,
-        modifiers: {
-          offset: { offset: this.offset },
-          flip: { enabled: this.flip }
-        }
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: this.offset
+            }
+          },
+          {
+            name: 'flip',
+            enabled: this.flip
+          },
+          {
+            name: 'preventOverflow',
+            options: {
+              padding: 10
+            },
+          },
+        ]
       }
     },
 
-    computedPopperConfig () {
-      return deepObjectsMerge(this.generatedPopperConfig, this.popperConfig || {})
-    },
-
     carretClass () {
       return this.placement.includes('top') ? 'dropup' : 
                this.placement.includes('right') ? 'dropright' :

src/components/dropdown/CDropdown.vue

@@ -6,7 +6,7 @@ const localVue = new createLocalVue()
 localVue.use(VueRouter)
 const router = new VueRouter()
 
-//needed for popper.js
+//needed for @popperjs/core
 global.document.createRange = () => ({
   setStart: () => {},
   setEnd: () => {},
@@ -34,7 +34,7 @@ const customWrapper = mount(Component, {
     color: 'success',
     size: 'lg',
     split: true,
-    offset: 20,
+    offset: [20, 0],
     placement: 'right-end',
     flip: false,
   },
@@ -50,9 +50,8 @@ const navWrapper = mount(Component, {
     inNav: true,
     caret: false,
     color: 'success',
-    offset: 20,
     placement: 'left',
-    flip: false
+    customPopperOptions: {}
   },
   slots: {
     default: 'CDropdown subcomponents',
@@ -119,13 +118,6 @@ describe(ComponentName, () => {
     toggle()
     expect(customWrapper.vm.visible).toBe(false)
   })
-  it('generates popper config properly', () => {
-    const modifiers = () => customWrapper.vm.computedPopperConfig.modifiers
-    expect(modifiers().offset.offset).toBe(20)
-    customWrapper.setProps({ popperConfig: {modifiers:{offset:{ offset:22 }}}})
-    expect(modifiers().offset.offset).toBe(22)
-    expect(modifiers().flip.enabled).toBe(false)
-  })
   it('opens then toggler is passed by slot', () => {
     const toggle = () => {
       jest.useFakeTimers()

src/components/dropdown/tests/CDropdown.spec.js

@@ -58,8 +58,10 @@ exports[`CDropdown renders custom wrapper correctly 1`] = `
    
   <div
     class="additional-menu-class dropdown-menu show"
-    style="position: absolute; transform: translate3d(NaNpx, NaNpx, 0); top: 0px; left: 0px; will-change: transform;"
-    x-placement="right-end"
+    data-popper-escaped=""
+    data-popper-placement="right-end"
+    data-popper-reference-hidden=""
+    style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 20px);"
   >
     CDropdown subcomponents
   </div>

src/components/dropdown/tests/__snapshots__/CDropdown.spec.js.snap

@@ -133,10 +133,10 @@ export declare class CDropdown extends Vue {
   color: string
   size: string
   split: boolean
-  offset: number
+  offset: [number, number]
   placement: string
   flip: boolean
-  popperConfig: object
+  customPopperOptions: object
 }
 
 export declare class CDropdownDivider extends Vue {