[feature] Changed 'interactive' implementation to css pseudo-classes

dev/serve.vue

@@ -41,5 +41,6 @@
     --popper-theme-border-radius: 6px;
     --popper-theme-padding: 32px;
     --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
+    --popper-theme-interactive-size: -12px;
   }
 </style>

docs/components/PopperDemo.vue

@@ -48,5 +48,6 @@
     --popper-theme-border-radius: 6px;
     --popper-theme-padding: 32px;
     --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
+    --popper-theme-interactive-size: -12px;
   }
 </style>

docs/components/PopperDynamicTheme.vue

@@ -69,5 +69,6 @@
     --popper-theme-border-radius: 6px;
     --popper-theme-padding: 32px;
     --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
+    --popper-theme-interactive-size: -12px;
   }
 </style>

docs/components/PopperEvents.vue

@@ -52,5 +52,6 @@
     --popper-theme-border-radius: 6px;
     --popper-theme-padding: 32px;
     --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
+    --popper-theme-interactive-size: -12px;
   }
 </style>

docs/components/PopperManual.vue

@@ -54,5 +54,6 @@
     --popper-theme-border-radius: 6px;
     --popper-theme-padding: 32px;
     --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
+    --popper-theme-interactive-size: -12px;
   }
 </style>

docs/components/PopperScopedSlots.vue

@@ -41,5 +41,6 @@
     --popper-theme-border-radius: 6px;
     --popper-theme-padding: 32px;
     --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
+    --popper-theme-interactive-size: -12px;
   }
 </style>

docs/components/PopperStyled.vue

@@ -37,5 +37,6 @@
     --popper-theme-border-radius: 6px;
     --popper-theme-padding: 32px;
     --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
+    --popper-theme-interactive-size: -12px;
   }
 </style>

docs/guide/api.md

@@ -57,3 +57,4 @@ The `content` slot gives you access to useful variables and functions.
 | `--popper-theme-border-radius`          | 6px                                 |
 | `--popper-theme-padding`                | 16px                                |
 | `--popper-theme-box-shadow`             | 0 6px 30px -6px rgba(0, 0, 0, 0.25) |
+| `--popper-theme-interactive-size`       | -12px                               |

docs/guide/getting-started.md

@@ -107,6 +107,7 @@ If your content is more complex, you can use the `#content` slot:
 | `--popper-theme-border-radius`          | 6px                                 |
 | `--popper-theme-padding`                | 16px                                |
 | `--popper-theme-box-shadow`             | 0 6px 30px -6px rgba(0, 0, 0, 0.25) |
+| `--popper-theme-interactive-size`       | -12px                               |
 
 You can overwrite them any way you like, for example in a Vue component:
 
@@ -173,6 +174,7 @@ Using the CSS variables you could even add multiple themes to your popover.
   --popper-theme-border-radius: 6px;
   --popper-theme-padding: 32px;
   --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
+  --popper-theme-interactive-size: -12px;
 }
 
 .light {
@@ -185,6 +187,7 @@ Using the CSS variables you could even add multiple themes to your popover.
   --popper-theme-border-radius: 6px;
   --popper-theme-padding: 32px;
   --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
+  --popper-theme-interactive-size: -12px;
 }
 ```
 

src/component/Popper.vue

@@ -1,11 +1,13 @@
 <template>
   <div
-    class="inline-block"
-    :style="interactiveStyle"
     @mouseleave="hover && closePopper()"
     ref="popperContainerNode"
   >
     <div
+      class="popper-reference"
+      :class="{
+        'popper-reference--interactive': interactive,
+      }"
       ref="triggerNode"
       @mouseover="hover && openPopper()"
       @click="togglePopper"
@@ -227,12 +229,6 @@
   const enableClickAway = computed(
     () => !disableClickAway.value && !manualMode.value,
   );
-  // Add an invisible border to keep the Popper open when hovering from the trigger into it
-  const interactiveStyle = computed(() =>
-    interactive.value
-      ? `border: ${offsetDistance.value}px solid transparent; margin: -${offsetDistance.value}px;`
-      : null,
-  );
 
   const openPopper = async () => {
     if (invalid.value || manualMode.value) {
@@ -303,9 +299,20 @@
 </script>
 
 <style scoped>
-  .inline-block {
-    display: inline-block;
+  .popper-reference--interactive {
+    position: relative;
+  }
+
+  .popper-reference--interactive::before {
+    content: '';
+    position: absolute;
+    top: var(--popper-theme-interactive-size);
+    right: var(--popper-theme-interactive-size);
+    left: var(--popper-theme-interactive-size);
+    bottom: var(--popper-theme-interactive-size);
+    display: block;
   }
+
   .popper {
     transition: background 250ms ease-in-out;
     background: var(--popper-theme-background-color);
@@ -324,10 +331,6 @@
     background: var(--popper-theme-background-color-hover);
   }
 
-  .inline-block {
-    display: inline-block;
-  }
-
   .fade-enter-active,
   .fade-leave-active {
     transition: opacity 0.2s ease;