update event names, add docs

Author: ninamarina

packages/dialtone-vue3/components/hovercard/hovercard.vue

@@ -21,18 +21,15 @@
     @opened="(e) => ($emit('opened', e))"
     @mouseenter-popover="onMouseEnter"
     @mouseleave-popover="onMouseLeave"
+    @mouseenter-popover-anchor="onMouseEnter"
+    @mouseleave-popover-anchor="onMouseLeave"
   >
     <template #anchor="{ attrs }">
-      <div
-        @mouseenter-popover="onMouseEnter"
-        @mouseleave-popover="onMouseLeave"
-      >
-        <!-- @slot Anchor element that activates the hovercard. Usually a button. -->
-        <slot
-          name="anchor"
-          v-bind="attrs"
-        />
-      </div>
+      <!-- @slot Anchor element that activates the hovercard. Usually a button. -->
+      <slot
+        name="anchor"
+        v-bind="attrs"
+      />
     </template>
     <template #content>
       <!-- @slot Slot for the content that is displayed in the hovercard. -->

packages/dialtone-vue3/components/popover/popover.vue

@@ -63,8 +63,8 @@
         :css="$attrs.css"
         :tabindex="contentTabindex"
         v-on="popoverListeners"
-        @mouseenter="onMouseEnter"
-        @mouseleave="onMouseLeave"
+        @mouseenter="onMouseEnterAnchor"
+        @mouseleave="onMouseLeaveAnchor"
       >
         <popover-header-footer
           v-if="hasSlotContent($slots.headerContent) || showCloseButton"
@@ -538,6 +538,34 @@ export default {
      * @type {Boolean | Array}
      */
     'opened',
+
+    /**
+     * Emitted when the mouse enters the popover
+     *
+     * @event mouseenter-popover
+     */
+    'mouseenter-popover',
+
+    /**
+     * Emitted when the mouse leaves the popover
+     *
+     * @event mouseleave-popover
+     */
+    'mouseleave-popover',
+
+    /**
+     * Emitted when the mouse enters the popover anchor
+     *
+     * @event mouseenter-popover-anchor
+     */
+    'mouseenter-popover-anchor',
+
+    /**
+     * Emitted when the mouse leaves the popover anchor
+     *
+     * @event mouseleave-popover-anchor
+     */
+    'mouseleave-popover-anchor',
   ],
 
   data () {
@@ -1024,6 +1052,14 @@ export default {
     onMouseLeave () {
       this.$emit('mouseleave-popover');
     },
+
+    onMouseEnterAnchor () {
+      this.$emit('mouseenter-popover-anchor');
+    },
+
+    onMouseLeaveAnchor () {
+      this.$emit('mouseleave-popover-anchor');
+    },
   },
 };
 </script>