Skip to content

Commit 46c02ff

Browse files
valgeirbvalgeirb
authored
Merge pull request #17 from valgeirb/optional-content-prop
2 parents 072652e + 9bc38ca commit 46c02ff

File tree

12 files changed

+117
-77
lines changed

12 files changed

+117
-77
lines changed

‎README.md‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,14 @@ yarn add vue3-popper
3232
### Vue environment
3333

3434
```html
35+
<!-- If your content is only a simple string, you can use the content prop: -->
36+
<template>
37+
<Popper content="This is the Popper content">
38+
<button>Trigger element</button>
39+
</Popper>
40+
</template>
41+
42+
<!-- If your content is more complex, you can use the content slot: -->
3543
<template>
3644
<Popper>
3745
<button>Trigger element</button>
@@ -55,19 +63,20 @@ yarn add vue3-popper
5563

5664
## Props
5765

58-
| Name | Default | Description |
59-
| ------------------ | -------- | ---------------------------------------------------------------------------------- |
60-
| `placement` | `bottom` | Preferred placement of the Popper |
61-
| `disableClickAway` | `false` | Disables automatically closing the Popper when the user clicks away from it |
62-
| `offsetSkid` | `0` | Offset in pixels along the trigger element |
63-
| `offsetDistance` | `12` | Offset in pixels away from the trigger element |
64-
| `hover` | `false` | Trigger the Popper on hover |
65-
| `arrow` | `false` | Display an arrow on the Popper |
66-
| `arrowPadding` | `0` | Stop arrow from reaching the edge of the Popper (in pixels) |
67-
| `disabled` | `false` | Disables the Popper. If it was already open, it will be closed. |
68-
| `openDelay` | `0` | Open the Popper after a delay (ms) |
69-
| `closeDelay` | `0` | Close the Popper after a delay (ms) |
70-
| `interactive` | `true` | If the Popper should be interactive, it will close when clicked/hovered when false |
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 |
7180

7281
## Events
7382

‎docs/components/PopperDeep.vue‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
<template>
22
<div class="popper-container">
3-
<Popper arrow>
3+
<Popper arrow content="This is the Popper content 🍿">
44
<Button>Demo</Button>
5-
<template #content>
6-
<div>This is the Popper content 🍿</div>
7-
</template>
85
</Popper>
96
</div>
107
</template>

‎docs/components/PopperDemo.vue‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,8 @@
33
<div class="text-center">
44
<span>Click the Demo button to show the Popper</span>
55
</div>
6-
<Popper class="popper-demo" arrow>
6+
<Popper class="popper-demo" arrow content="This is the Popper content 🍿">
77
<Button>Demo</Button>
8-
<template #content>
9-
<div>This is the Popper content 🍿</div>
10-
</template>
118
</Popper>
129
</div>
1310
</template>

‎docs/components/PopperDynamicTheme.vue‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,13 @@
66
<input type="radio" v-model="theme" id="dark" value="dark" />
77
<label for="dark">Dark theme</label>
88
</div>
9-
<Popper :class="theme" arrow disableClickAway>
9+
<Popper
10+
:class="theme"
11+
arrow
12+
disableClickAway
13+
content="This is the Popper content 🍿"
14+
>
1015
<Button>Demo</Button>
11-
<template #content>
12-
<div>This is the Popper content 🍿</div>
13-
</template>
1416
</Popper>
1517
</div>
1618
</template>

‎docs/components/PopperEvents.vue‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,9 @@
55
arrow
66
@open:popper="openAlert"
77
@close:popper="closeAlert"
8+
content="This is the Popper content 🍿"
89
>
910
<Button>Demo</Button>
10-
<template #content>
11-
<div>This is the Popper content 🍿</div>
12-
</template>
1311
</Popper>
1412
</div>
1513
</template>

‎docs/components/PopperStyled.vue‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
<template>
22
<div class="popper-container">
3-
<Popper class="popper-styled" arrow>
3+
<Popper class="popper-styled" arrow content="This is the Popper content 🍿">
44
<Button>Demo</Button>
5-
<template #content>
6-
<div>This is the Popper content 🍿</div>
7-
</template>
85
</Popper>
96
</div>
107
</template>

‎docs/guide/api.md‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,20 @@
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 when false |
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 |
1819

1920
## Events
2021

‎docs/guide/getting-started.md‎

Lines changed: 35 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,8 @@ Or use it on a case by case basis:
3838

3939
```html
4040
<template>
41-
<Popper>
41+
<Popper content="This is the Popper content 🍿">
4242
<button>Trigger element</button>
43-
<template #content>
44-
<div>This is the Popper content 🍿</div>
45-
</template>
4643
</Popper>
4744
</template>
4845

@@ -66,14 +63,30 @@ Add browser example
6663

6764
## Usage
6865

69-
You can add Popper to any of your elements or components. Just wrap them with `Popper` and use the `#content` slot for your popover:
66+
You can add Popper to any of your elements or components. Just wrap them with `Popper` and use the `content` prop or slot for your popover.
67+
68+
### Using the content `prop`
69+
70+
If your content is only a simple string, you can use the `content` prop:
71+
72+
```vue
73+
<template>
74+
<Popper content="This is the Popper content">
75+
<button>Trigger element</button>
76+
</Popper>
77+
</template>
78+
```
79+
80+
### Using the content `slot`
81+
82+
If your content is more complex, you can use the `#content` slot:
7083

7184
```vue
7285
<template>
7386
<Popper>
74-
<button>Trigger!</button>
87+
<button>Trigger element</button>
7588
<template #content>
76-
<div>This is the content</div>
89+
<div>This is the Popper content</div>
7790
</template>
7891
</Popper>
7992
</template>
@@ -83,7 +96,7 @@ You can add Popper to any of your elements or components. Just wrap them with `P
8396

8497
`Popper` only comes with some barebones styling by default, but it also uses a list of predefined CSS variables. You can overwrite these variables to suit your needs.
8598

86-
#### CSS variables
99+
### CSS variables
87100

88101
| CSS variable | Example value |
89102
| --------------------------------------- | ----------------------------------- |
@@ -101,11 +114,8 @@ You can overwrite them any way you like, for example in a Vue component:
101114

102115
```vue
103116
<template>
104-
<Popper>
117+
<Popper content="This is the Popper content 🍿">
105118
<Button>Demo</Button>
106-
<template #content>
107-
<div>This is the Popper content 🍿</div>
108-
</template>
109119
</Popper>
110120
</template>
111121
@@ -182,11 +192,13 @@ Using the CSS variables you could even add multiple themes to your popover.
182192

183193
```vue
184194
<template>
185-
<Popper :class="theme" arrow disableClickAway>
195+
<Popper
196+
:class="theme"
197+
arrow
198+
disableClickAway
199+
content="This is the Popper content 🍿"
200+
>
186201
<Button>Demo</Button>
187-
<template #content>
188-
<div>This is the Popper content 🍿</div>
189-
</template>
190202
</Popper>
191203
</template>
192204
```
@@ -199,11 +211,8 @@ That's fine, you can always just apply your own styles, just make sure it's `sco
199211

200212
```vue
201213
<template>
202-
<Popper arrow>
214+
<Popper arrow content="This is the Popper content 🍿">
203215
<Button>Demo</Button>
204-
<template #content>
205-
<div>This is the Popper content 🍿</div>
206-
</template>
207216
</Popper>
208217
</template>
209218
@@ -287,11 +296,13 @@ Sometimes you need to add some side-effects when closing/opening Poppers. You ca
287296

288297
```vue
289298
<template>
290-
<Popper arrow @open:popper="openAlert" @close:popper="closeAlert">
299+
<Popper
300+
arrow
301+
@open:popper="openAlert"
302+
@close:popper="closeAlert"
303+
content="This is the Popper content 🍿"
304+
>
291305
<Button>Demo</Button>
292-
<template #content>
293-
<div>This is the Popper content 🍿</div>
294-
</template>
295306
</Popper>
296307
</template>
297308

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue3-popper",
3-
"version": "0.6.0",
3+
"version": "1.0.0",
44
"author": {
55
"name": "Valgeir Björnsson",
66
"email": "[email protected]",

0 commit comments

Comments
 (0)