Merge pull request #25 from valgeirb/z-index-prop

Author: valgeirb

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-<img src="https://raw.githubusercontent.com/valgeirb/vue-popper/main/docs/public/popper.svg">
+<img src="https://raw.githubusercontent.com/valgeirb/vue-popper/main/docs/public/popper.svg" height="300px">
 </p>
 
 # vue3-popper
@@ -78,12 +78,13 @@ yarn add vue3-popper
 | `interactive`      | `true`   | If the Popper should be interactive, it will close when clicked/hovered if false                        |
 | `content`          | `null`   | If your content is just a simple string, you can pass it as a prop                                      |
 | `show`             | `null`   | Control the Popper **manually**, other events (click, hover) are ignored if this is set to `true/false` |
+| `zIndex`           | `9999`   | The z-index of the Popper                                                                               |
 
 ## Events
 
 | Name           | Description               |
 | -------------- | ------------------------- |
-| `open:popper`  | When the Popper is open   |
+| `open:popper`  | When the Popper is opened |
 | `close:popper` | When the Popper is hidden |
 
 ## Slots

docs/guide/api.md

@@ -17,6 +17,7 @@
 | `interactive`      | `true`   | If the Popper should be interactive, it will close when clicked/hovered if false                        |
 | `content`          | `null`   | If your content is just a simple string, you can pass it as a prop                                      |
 | `show`             | `null`   | Control the Popper **manually**, other events (click, hover) are ignored if this is set to `true/false` |
+| `zIndex`           | `9999`   | The z-index of the Popper                                                                               |
 
 ## Events
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-popper",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "author": {
     "name": "Valgeir Björnsson",
     "email": "[email protected]",

package.json

@@ -140,6 +140,13 @@
         type: [Number, String],
         default: 0,
       },
+      /**
+       * The z-index of the Popper.
+       */
+      zIndex: {
+        type: [Number, String],
+        default: 9999,
+      },
       /**
        * Display an arrow on the popper
        */
@@ -376,6 +383,7 @@
     border-style: var(--popper-theme-border-style);
     border-color: var(--popper-theme-border-color);
     box-shadow: var(--popper-theme-box-shadow);
+    z-index: v-bind(zIndex);
   }
 
   .popper:hover,