Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 8df70d0

Browse filesBrowse files
woothuwoothu
committed
refactor: update popper to 2.0.0 version
1 parent a68b5ce commit 8df70d0
Copy full SHA for 8df70d0

File tree

Expand file treeCollapse file tree

6 files changed

+42
-34
lines changed
Filter options
Expand file treeCollapse file tree

6 files changed

+42
-34
lines changed

‎package-lock.json

Copy file name to clipboardExpand all lines: package-lock.json
+5Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Copy file name to clipboardExpand all lines: package.json
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,9 @@
7070
"@coreui/icons": "^1.0.0",
7171
"@coreui/icons-vue": "^1.1.2",
7272
"@coreui/utils": "^1.0.0",
73+
"@popperjs/core": "^2.0.0",
7374
"lodash.clonedeep": "^4.5.0",
7475
"perfect-scrollbar": "^1.4.0",
75-
"popper.js": "^1.16.0",
7676
"tooltip.js": "^1.3.3",
7777
"vue": "^2.6.11",
7878
"vue-clickaway2": "^2.3.1",

‎src/components/dropdown/CDropdown.vue

Copy file name to clipboardExpand all lines: src/components/dropdown/CDropdown.vue
+27-18Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,8 @@
3333

3434
<script>
3535
import CLink from '../link/CLink'
36-
import Popper from 'popper.js'
36+
import { createPopper } from '@popperjs/core'
3737
import { mixin as clickaway } from 'vue-clickaway2'
38-
import { deepObjectsMerge } from '@coreui/utils/src/index.js'
3938
4039
export default {
4140
name: 'CDropdown',
@@ -60,10 +59,6 @@ export default {
6059
validator: val => ['', 'sm', 'lg'].includes(val)
6160
},
6261
split: Boolean,
63-
offset: {
64-
type: Number,
65-
default: 0
66-
},
6762
placement: {
6863
type: String,
6964
validator: position => {
@@ -76,11 +71,15 @@ export default {
7671
},
7772
default: 'bottom-start'
7873
},
74+
offset: {
75+
type: Array,
76+
default: () => [0, 0]
77+
},
7978
flip: {
8079
type: Boolean,
8180
default: true
8281
},
83-
popperConfig: Object
82+
customPopperOptions: Object
8483
},
8584
data () {
8685
return {
@@ -135,30 +134,40 @@ export default {
135134
return
136135
}
137136
this.$nextTick(() => {
138-
this._popper = new Popper(
137+
this._popper = createPopper(
139138
this.$el.firstElementChild,
140139
this.$refs.menu,
141-
this.computedPopperConfig
140+
this.customPopperOptions || this.defaultPopperOptions
142141
)
143142
})
144143
145144
}
146145
},
147146
computed: {
148-
generatedPopperConfig () {
147+
defaultPopperOptions () {
149148
return {
150149
placement: this.placement,
151-
modifiers: {
152-
offset: { offset: this.offset },
153-
flip: { enabled: this.flip }
154-
}
150+
modifiers: [
151+
{
152+
name: 'offset',
153+
options: {
154+
offset: this.offset
155+
}
156+
},
157+
{
158+
name: 'flip',
159+
enabled: this.flip
160+
},
161+
{
162+
name: 'preventOverflow',
163+
options: {
164+
padding: 10
165+
},
166+
},
167+
]
155168
}
156169
},
157170
158-
computedPopperConfig () {
159-
return deepObjectsMerge(this.generatedPopperConfig, this.popperConfig || {})
160-
},
161-
162171
carretClass () {
163172
return this.placement.includes('top') ? 'dropup' :
164173
this.placement.includes('right') ? 'dropright' :

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

Copy file name to clipboardExpand all lines: src/components/dropdown/tests/CDropdown.spec.js
+3-11Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const localVue = new createLocalVue()
66
localVue.use(VueRouter)
77
const router = new VueRouter()
88

9-
//needed for popper.js
9+
//needed for @popperjs/core
1010
global.document.createRange = () => ({
1111
setStart: () => {},
1212
setEnd: () => {},
@@ -34,7 +34,7 @@ const customWrapper = mount(Component, {
3434
color: 'success',
3535
size: 'lg',
3636
split: true,
37-
offset: 20,
37+
offset: [20, 0],
3838
placement: 'right-end',
3939
flip: false,
4040
},
@@ -50,9 +50,8 @@ const navWrapper = mount(Component, {
5050
inNav: true,
5151
caret: false,
5252
color: 'success',
53-
offset: 20,
5453
placement: 'left',
55-
flip: false
54+
customPopperOptions: {}
5655
},
5756
slots: {
5857
default: 'CDropdown subcomponents',
@@ -119,13 +118,6 @@ describe(ComponentName, () => {
119118
toggle()
120119
expect(customWrapper.vm.visible).toBe(false)
121120
})
122-
it('generates popper config properly', () => {
123-
const modifiers = () => customWrapper.vm.computedPopperConfig.modifiers
124-
expect(modifiers().offset.offset).toBe(20)
125-
customWrapper.setProps({ popperConfig: {modifiers:{offset:{ offset:22 }}}})
126-
expect(modifiers().offset.offset).toBe(22)
127-
expect(modifiers().flip.enabled).toBe(false)
128-
})
129121
it('opens then toggler is passed by slot', () => {
130122
const toggle = () => {
131123
jest.useFakeTimers()

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

Copy file name to clipboardExpand all lines: src/components/dropdown/tests/__snapshots__/CDropdown.spec.js.snap
+4-2Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,10 @@ exports[`CDropdown renders custom wrapper correctly 1`] = `
5858
5959
<div
6060
class="additional-menu-class dropdown-menu show"
61-
style="position: absolute; transform: translate3d(NaNpx, NaNpx, 0); top: 0px; left: 0px; will-change: transform;"
62-
x-placement="right-end"
61+
data-popper-escaped=""
62+
data-popper-placement="right-end"
63+
data-popper-reference-hidden=""
64+
style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 20px);"
6365
>
6466
CDropdown subcomponents
6567
</div>

‎src/components/index.d.ts

Copy file name to clipboardExpand all lines: src/components/index.d.ts
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,10 +133,10 @@ export declare class CDropdown extends Vue {
133133
color: string
134134
size: string
135135
split: boolean
136-
offset: number
136+
offset: [number, number]
137137
placement: string
138138
flip: boolean
139-
popperConfig: object
139+
customPopperOptions: object
140140
}
141141

142142
export declare class CDropdownDivider extends Vue {

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.