Skip to content

Commit a80d74c

Browse files
valgeirbvalgeirb
committed
Add the locked prop to disable flipping
1 parent 0777171 commit a80d74c

File tree

4 files changed

+49
-33
lines changed

4 files changed

+49
-33
lines changed

‎README.md‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -63,22 +63,23 @@ yarn add vue3-popper
6363

6464
## Props
6565

66-
| Name | Default | Description |
67-
| ------------------ | -------- | ------------------------------------------------------------------------------------------------------- |
68-
| `placement` | `bottom` | Preferred placement of the Popper |
69-
| `disableClickAway` | `false` | Disables automatically closing the Popper when the user clicks away from it |
70-
| `offsetSkid` | `0` | Offset in pixels along the trigger element |
71-
| `offsetDistance` | `12` | Offset in pixels away from the trigger element |
72-
| `hover` | `false` | Trigger the Popper on hover |
73-
| `arrow` | `false` | Display an arrow on the Popper |
74-
| `arrowPadding` | `0` | Stop arrow from reaching the edge of the Popper (in pixels) |
75-
| `disabled` | `false` | Disables the Popper. If it was already open, it will be closed. |
76-
| `openDelay` | `0` | Open the Popper after a delay (ms) |
77-
| `closeDelay` | `0` | Close the Popper after a delay (ms) |
78-
| `interactive` | `true` | If the Popper should be interactive, it will close when clicked/hovered if false |
79-
| `content` | `null` | If your content is just a simple string, you can pass it as a prop |
80-
| `show` | `null` | Control the Popper **manually**, other events (click, hover) are ignored if this is set to `true/false` |
81-
| `zIndex` | `9999` | The z-index of the Popper |
66+
| Name | Default | Description |
67+
| ------------------ | -------- | ----------------------------------------------------------------------------------------------------------- |
68+
| `placement` | `bottom` | Preferred placement of the Popper |
69+
| `disableClickAway` | `false` | Disables automatically closing the Popper when the user clicks away from it |
70+
| `offsetSkid` | `0` | Offset in pixels along the trigger element |
71+
| `offsetDistance` | `12` | Offset in pixels away from the trigger element |
72+
| `hover` | `false` | Trigger the Popper on hover |
73+
| `arrow` | `false` | Display an arrow on the Popper |
74+
| `arrowPadding` | `0` | Stop arrow from reaching the edge of the Popper (in pixels) |
75+
| `disabled` | `false` | Disables the Popper. If it was already open, it will be closed. |
76+
| `openDelay` | `0` | Open the Popper after a delay (ms) |
77+
| `closeDelay` | `0` | Close the Popper after a delay (ms) |
78+
| `interactive` | `true` | If the Popper should be interactive, it will close when clicked/hovered if false |
79+
| `content` | `null` | If your content is just a simple string, you can pass it as a prop |
80+
| `show` | `null` | Control the Popper **manually**, other events (click, hover) are ignored if this is set to `true/false` |
81+
| `zIndex` | `9999` | The z-index of the Popper |
82+
| `locked` | `false` | Lock the Popper into place, it will not flip dynamically when it runs out of space if this is set to `true` |
8283

8384
## Events
8485

‎docs/guide/api.md‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,23 @@
22

33
## Props
44

5-
| Name | Default | Description |
6-
| ------------------ | -------- | ------------------------------------------------------------------------------------------------------- |
7-
| `placement` | `bottom` | Preferred placement of the Popper |
8-
| `disableClickAway` | `false` | Disables automatically closing the Popper when the user clicks away from it |
9-
| `offsetSkid` | `0` | Offset in pixels along the trigger element |
10-
| `offsetDistance` | `12` | Offset in pixels away from the trigger element |
11-
| `hover` | `false` | Trigger the Popper on hover |
12-
| `arrow` | `false` | Display an arrow on the Popper |
13-
| `arrowPadding` | `0` | Stop arrow from reaching the edge of the Popper (in pixels) |
14-
| `disabled` | `false` | Disables the Popper. If it was already open, it will be closed. |
15-
| `openDelay` | `0` | Open the Popper after a delay (ms) |
16-
| `closeDelay` | `0` | Close the Popper after a delay (ms) |
17-
| `interactive` | `true` | If the Popper should be interactive, it will close when clicked/hovered if false |
18-
| `content` | `null` | If your content is just a simple string, you can pass it as a prop |
19-
| `show` | `null` | Control the Popper **manually**, other events (click, hover) are ignored if this is set to `true/false` |
20-
| `zIndex` | `9999` | The z-index of the Popper |
5+
| Name | Default | Description |
6+
| ------------------ | -------- | ----------------------------------------------------------------------------------------------------------- |
7+
| `placement` | `bottom` | Preferred placement of the Popper |
8+
| `disableClickAway` | `false` | Disables automatically closing the Popper when the user clicks away from it |
9+
| `offsetSkid` | `0` | Offset in pixels along the trigger element |
10+
| `offsetDistance` | `12` | Offset in pixels away from the trigger element |
11+
| `hover` | `false` | Trigger the Popper on hover |
12+
| `arrow` | `false` | Display an arrow on the Popper |
13+
| `arrowPadding` | `0` | Stop arrow from reaching the edge of the Popper (in pixels) |
14+
| `disabled` | `false` | Disables the Popper. If it was already open, it will be closed. |
15+
| `openDelay` | `0` | Open the Popper after a delay (ms) |
16+
| `closeDelay` | `0` | Close the Popper after a delay (ms) |
17+
| `interactive` | `true` | If the Popper should be interactive, it will close when clicked/hovered if false |
18+
| `content` | `null` | If your content is just a simple string, you can pass it as a prop |
19+
| `show` | `null` | Control the Popper **manually**, other events (click, hover) are ignored if this is set to `true/false` |
20+
| `zIndex` | `9999` | The z-index of the Popper |
21+
| `locked` | `false` | Lock the Popper into place, it will not flip dynamically when it runs out of space if this is set to `true` |
2122

2223
## Events
2324

‎src/component/Popper.vue‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,13 @@
168168
type: Boolean,
169169
default: true,
170170
},
171+
/**
172+
* Lock the Popper into place, it will not flip dynamically when it runs out of space if true
173+
*/
174+
locked: {
175+
type: Boolean,
176+
default: false,
177+
},
171178
/**
172179
* If the content is just a simple string, it can be passed in as a prop
173180
*/
@@ -196,16 +203,18 @@
196203
disableClickAway,
197204
disabled,
198205
interactive,
199-
show,
206+
locked,
200207
offsetDistance,
201208
offsetSkid,
202209
openDelay,
203210
placement,
211+
show,
204212
} = toRefs(props);
205213
206214
const { isOpen, open, close } = usePopper({
207215
arrowPadding,
208216
emit,
217+
locked,
209218
offsetDistance,
210219
offsetSkid,
211220
placement,

‎src/composables/usePopper.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const toInt = x => parseInt(x, 10);
1010
export default function usePopper({
1111
arrowPadding,
1212
emit,
13+
locked,
1314
offsetDistance,
1415
offsetSkid,
1516
placement,
@@ -53,6 +54,10 @@ export default function usePopper({
5354
modifiers: [
5455
preventOverflow,
5556
flip,
57+
{
58+
name: "flip",
59+
enabled: !locked.value,
60+
},
5661
arrow,
5762
{
5863
name: "arrow",

0 commit comments

Comments
 (0)