From 8cf047e276bca9b8df33e80c196662481b0f718d Mon Sep 17 00:00:00 2001
From: Nina <ninamrepetto@gmail.com>
Date: Tue, 14 Jan 2025 15:48:51 -0300
Subject: [PATCH 1/4] refactor(popover, hovercard): DLT-2245 separate hovercard
 from popover

---
 .../components/hovercard/hovercard.vue        | 66 ++++++++++++++--
 .../hovercard/hovercard_many.story.vue        |  2 -
 .../components/popover/popover.vue            | 75 ++-----------------
 3 files changed, 67 insertions(+), 76 deletions(-)

diff --git a/packages/dialtone-vue2/components/hovercard/hovercard.vue b/packages/dialtone-vue2/components/hovercard/hovercard.vue
index d91159cfa..3c8443312 100644
--- a/packages/dialtone-vue2/components/hovercard/hovercard.vue
+++ b/packages/dialtone-vue2/components/hovercard/hovercard.vue
@@ -1,9 +1,10 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <dt-popover
     :id="id"
+    :open="hovercardOpen"
     :placement="placement"
     :content-class="contentClass"
+    :dialog-class="dialogClass"
     :fallback-placements="fallbackPlacements"
     :padding="padding"
     :transition="transition ? 'fade' : null"
@@ -13,18 +14,23 @@
     :header-class="headerClass"
     :footer-class="footerClass"
     :append-to="appendTo"
-    :hovercard="true"
     data-qa="dt-hovercard"
-    :open="open"
     :enter-delay="enterDelay"
     :leave-delay="leaveDelay"
     @opened="(e) => ($emit('opened', e))"
+    @mouseenter-popover="onMouseEnter"
+    @mouseleave-popover="onMouseLeave"
   >
     <template #anchor="{ attrs }">
-      <slot
-        name="anchor"
-        v-bind="attrs"
-      />
+      <div
+        @mouseenter-popover="onMouseEnter"
+        @mouseleave-popover="onMouseLeave"
+      >
+        <slot
+          name="anchor"
+          v-bind="attrs"
+        />
+      </div>
     </template>
     <template #content>
       <slot name="content" />
@@ -206,5 +212,51 @@ export default {
      */
     'opened',
   ],
+
+  data () {
+    return {
+      hovercardOpen: this.open,
+      inTimer: null,
+      outTimer: null,
+    };
+  },
+
+  watch: {
+    open: {
+      handler: function (open) {
+        this.hovercardOpen = open;
+      },
+
+      immediate: true,
+    },
+  },
+
+  methods: {
+    setInTimer () {
+      this.inTimer = setTimeout(() => {
+        this.hovercardOpen = true;
+      }, this.enterDelay);
+    },
+
+    setOutTimer () {
+      this.outTimer = setTimeout(() => {
+        this.hovercardOpen = false;
+      }, this.leaveDelay);
+    },
+
+    onMouseEnter () {
+      if (this.open === null) {
+        clearTimeout(this.outTimer);
+        this.setInTimer();
+      }
+    },
+
+    onMouseLeave () {
+      if (this.open === null) {
+        clearTimeout(this.inTimer);
+        this.setOutTimer();
+      }
+    },
+  },
 };
 </script>
diff --git a/packages/dialtone-vue2/components/hovercard/hovercard_many.story.vue b/packages/dialtone-vue2/components/hovercard/hovercard_many.story.vue
index ac216e42f..4ef13b5bf 100644
--- a/packages/dialtone-vue2/components/hovercard/hovercard_many.story.vue
+++ b/packages/dialtone-vue2/components/hovercard/hovercard_many.story.vue
@@ -9,8 +9,6 @@
       :time="data.time"
       :is-active="true"
       :state="$attrs.state"
-      @hover="$attrs.onHover"
-      @focus="$attrs.onFocus"
     >
       <template #avatar>
         <dt-hovercard
diff --git a/packages/dialtone-vue2/components/popover/popover.vue b/packages/dialtone-vue2/components/popover/popover.vue
index 88bdbd849..761d0e06f 100644
--- a/packages/dialtone-vue2/components/popover/popover.vue
+++ b/packages/dialtone-vue2/components/popover/popover.vue
@@ -26,8 +26,8 @@
         @keydown.up.prevent="onArrowKeyPress"
         @keydown.down.prevent="onArrowKeyPress"
         @keydown.escape.capture="closePopover"
-        @mouseenter="openHovercard"
-        @mouseleave="closeHovercard"
+        @mouseenter="onMouseEnter"
+        @mouseleave="onMouseLeave"
       >
         <!-- @slot Anchor element that activates the popover. Usually a button. -->
         <slot
@@ -58,8 +58,8 @@
         :tabindex="contentTabindex"
         appear
         v-on="popoverListeners"
-        @mouseenter="openHovercard"
-        @mouseleave="closeHovercard"
+        @mouseenter="onMouseEnter"
+        @mouseleave="onMouseLeave"
       >
         <popover-header-footer
           v-if="$slots.headerContent || showCloseButton"
@@ -138,7 +138,6 @@ import { createTippyPopover, getPopperOptions } from './tippy_utils';
 import PopoverHeaderFooter from './popover_header_footer.vue';
 import SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';
 import SrOnlyCloseButton from '@/common/sr_only_close_button.vue';
-import { TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';
 
 /**
  * A Popover displays a content overlay when its anchor element is activated.
@@ -504,33 +503,6 @@ export default {
             (appendTo instanceof HTMLElement);
       },
     },
-
-    /**
-     * Set this prop to true and popover component will support hovercard behaviour
-     * It will open on mouseenter and close on mouseleave with timer delay of 300ms
-     */
-    hovercard: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * The enter delay in milliseconds before the hovercard is shown.
-     * @type number
-     */
-    enterDelay: {
-      type: Number,
-      default: TOOLTIP_DELAY_MS,
-    },
-
-    /**
-     * The leave delay in milliseconds before the hovercard is hidden.
-     * @type number
-     */
-    leaveDelay: {
-      type: Number,
-      default: TOOLTIP_DELAY_MS,
-    },
   },
 
   emits: [
@@ -560,8 +532,6 @@ export default {
       isOpen: false,
       anchorEl: null,
       popoverContentEl: null,
-      inTimer: null,
-      outTimer: null,
     };
   },
 
@@ -735,7 +705,6 @@ export default {
     },
 
     defaultToggleOpen (e) {
-      if (this.hovercard) { return; }
       if (this.openOnContext) { return; }
 
       // Only use default toggle behaviour if the user has not set the open prop.
@@ -1012,41 +981,13 @@ export default {
       });
     },
 
-    //  ============================================================================
-    //  $ HOVERCARD
-    //  ----------------------------------------------------------------------------
-
-    setInTimer () {
-      this.inTimer = setTimeout(() => {
-        this.isOpen = true;
-      }, this.enterDelay);
+    onMouseEnter () {
+      this.$emit('mouseenter-popover');
     },
 
-    setOutTimer () {
-      this.outTimer = setTimeout(() => {
-        this.isOpen = false;
-      }, this.leaveDelay);
+    onMouseLeave () {
+      this.$emit('mouseleave-popover');
     },
-
-    openHovercard () {
-      if (!this.hovercard) return;
-      if (this.open === null || this.open === undefined) {
-        clearTimeout(this.outTimer);
-        this.setInTimer();
-      }
-    },
-
-    closeHovercard () {
-      if (!this.hovercard) return;
-      if (this.open === null || this.open === undefined) {
-        clearTimeout(this.inTimer);
-        this.setOutTimer();
-      }
-    },
-
-    //  ============================================================================
-    //  $ HOVERCARD
-    //  ----------------------------------------------------------------------------
   },
 };
 </script>

From 6c63ddbf7fb842c9b6287114d29ed7c6d8dc391f Mon Sep 17 00:00:00 2001
From: Nina <ninamrepetto@gmail.com>
Date: Tue, 14 Jan 2025 16:34:00 -0300
Subject: [PATCH 2/4] add vue 3

---
 .../components/hovercard/hovercard.vue        | 90 ++++++++++++++-----
 .../hovercard/hovercard_many.story.vue        |  2 -
 .../components/popover/popover.vue            | 75 ++--------------
 3 files changed, 74 insertions(+), 93 deletions(-)

diff --git a/packages/dialtone-vue3/components/hovercard/hovercard.vue b/packages/dialtone-vue3/components/hovercard/hovercard.vue
index 41781ec5a..1cb528ff9 100644
--- a/packages/dialtone-vue3/components/hovercard/hovercard.vue
+++ b/packages/dialtone-vue3/components/hovercard/hovercard.vue
@@ -2,8 +2,10 @@
 <template>
   <dt-popover
     :id="id"
+    :open="hovercardOpen"
     :placement="placement"
     :content-class="contentClass"
+    :dialog-class="dialogClass"
     :fallback-placements="fallbackPlacements"
     :padding="padding"
     :transition="transition ? 'fade' : null"
@@ -13,19 +15,24 @@
     :header-class="headerClass"
     :footer-class="footerClass"
     :append-to="appendTo"
-    :hovercard="true"
     data-qa="dt-hovercard"
-    :open="open"
     :enter-delay="enterDelay"
     :leave-delay="leaveDelay"
     @opened="(e) => ($emit('opened', e))"
+    @mouseenter-popover="onMouseEnter"
+    @mouseleave-popover="onMouseLeave"
   >
     <template #anchor="{ attrs }">
-      <!-- @slot Anchor element that activates the hovercard. Usually a button. -->
-      <slot
-        name="anchor"
-        v-bind="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>
     </template>
     <template #content>
       <!-- @slot Slot for the content that is displayed in the hovercard. -->
@@ -44,11 +51,12 @@
 </template>
 
 <script setup>
+import { ref, watch } from 'vue';
 import { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/popover/index.js';
 import { TOOLTIP_DIRECTIONS, TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';
 import { getUniqueString } from '@/common/utils';
 
-defineProps({
+const props = defineProps({
   /**
      * Fade transition when the content display is toggled.
      * @type boolean
@@ -173,24 +181,24 @@ defineProps({
       return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||
             (appendTo instanceof HTMLElement);
     },
+  },
 
-    /**
-     * The enter delay in milliseconds before the hovercard is shown.
-     * @type number
-     */
-    enterDelay: {
-      type: Number,
-      default: TOOLTIP_DELAY_MS,
-    },
+  /**
+   * The enter delay in milliseconds before the hovercard is shown.
+   * @type number
+   */
+  enterDelay: {
+    type: Number,
+    default: TOOLTIP_DELAY_MS,
+  },
 
-    /**
-     * The leave delay in milliseconds before the hovercard is hidden.
-     * @type number
-     */
-    leaveDelay: {
-      type: Number,
-      default: TOOLTIP_DELAY_MS,
-    },
+  /**
+   * The leave delay in milliseconds before the hovercard is hidden.
+   * @type number
+   */
+  leaveDelay: {
+    type: Number,
+    default: TOOLTIP_DELAY_MS,
   },
 });
 
@@ -203,4 +211,38 @@ defineEmits([
    */
   'opened',
 ]);
+
+const hovercardOpen = ref(props.open);
+const inTimer = ref(null);
+const outTimer = ref(null);
+
+watch(() => props.open, (open) => {
+  hovercardOpen.value = open;
+}, { immediate: true });
+
+function setInTimer () {
+  inTimer.value = setTimeout(() => {
+    hovercardOpen.value = true;
+  }, props.enterDelay);
+}
+
+function setOutTimer () {
+  outTimer.value = setTimeout(() => {
+    hovercardOpen.value = false;
+  }, props.leaveDelay);
+}
+
+function onMouseEnter () {
+  if (props.open === null) {
+    clearTimeout(outTimer.value);
+    setInTimer();
+  }
+}
+
+function onMouseLeave () {
+  if (props.open === null) {
+    clearTimeout(inTimer.value);
+    setOutTimer();
+  }
+}
 </script>
diff --git a/packages/dialtone-vue3/components/hovercard/hovercard_many.story.vue b/packages/dialtone-vue3/components/hovercard/hovercard_many.story.vue
index ac216e42f..4ef13b5bf 100644
--- a/packages/dialtone-vue3/components/hovercard/hovercard_many.story.vue
+++ b/packages/dialtone-vue3/components/hovercard/hovercard_many.story.vue
@@ -9,8 +9,6 @@
       :time="data.time"
       :is-active="true"
       :state="$attrs.state"
-      @hover="$attrs.onHover"
-      @focus="$attrs.onFocus"
     >
       <template #avatar>
         <dt-hovercard
diff --git a/packages/dialtone-vue3/components/popover/popover.vue b/packages/dialtone-vue3/components/popover/popover.vue
index fcc08c37b..6da5701a7 100644
--- a/packages/dialtone-vue3/components/popover/popover.vue
+++ b/packages/dialtone-vue3/components/popover/popover.vue
@@ -30,8 +30,8 @@
         @keydown.escape.capture="closePopover"
         @keydown.enter="$emit('keydown', $event)"
         @keydown.space="$emit('keydown', $event)"
-        @mouseenter="openHovercard"
-        @mouseleave="closeHovercard"
+        @mouseenter="onMouseEnter"
+        @mouseleave="onMouseLeave"
       >
         <!-- @slot Anchor element that activates the popover. Usually a button. -->
         <slot
@@ -63,8 +63,8 @@
         :css="$attrs.css"
         :tabindex="contentTabindex"
         v-on="popoverListeners"
-        @mouseenter="openHovercard"
-        @mouseleave="closeHovercard"
+        @mouseenter="onMouseEnter"
+        @mouseleave="onMouseLeave"
       >
         <popover-header-footer
           v-if="hasSlotContent($slots.headerContent) || showCloseButton"
@@ -142,7 +142,6 @@ import { createTippyPopover, getPopperOptions } from './tippy_utils';
 import PopoverHeaderFooter from './popover_header_footer.vue';
 import SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';
 import SrOnlyCloseButton from '@/common/sr_only_close_button.vue';
-import { TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';
 
 /**
  * A Popover displays a content overlay when its anchor element is activated.
@@ -515,33 +514,6 @@ export default {
             (appendTo instanceof HTMLElement);
       },
     },
-
-    /**
-     * Set this prop to true and popover component will support hovercard behaviour
-     * It will open on mouseenter and close on mouseleave with timer delay of 300ms
-     */
-    hovercard: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * The enter delay in milliseconds before the hovercard is shown.
-     * @type number
-     */
-    enterDelay: {
-      type: Number,
-      default: TOOLTIP_DELAY_MS,
-    },
-
-    /**
-     * The leave delay in milliseconds before the hovercard is hidden.
-     * @type number
-     */
-    leaveDelay: {
-      type: Number,
-      default: TOOLTIP_DELAY_MS,
-    },
   },
 
   emits: [
@@ -579,8 +551,6 @@ export default {
       anchorEl: null,
       popoverContentEl: null,
       hasSlotContent,
-      inTimer: null,
-      outTimer: null,
     };
   },
 
@@ -762,7 +732,6 @@ export default {
     },
 
     defaultToggleOpen (e) {
-      if (this.hovercard) { return; }
       if (this.openOnContext) { return; }
 
       // Only use default toggle behaviour if the user has not set the open prop.
@@ -1048,41 +1017,13 @@ export default {
       });
     },
 
-    //  ============================================================================
-    //  $ HOVERCARD
-    //  ----------------------------------------------------------------------------
-
-    setInTimer () {
-      this.inTimer = setTimeout(() => {
-        this.isOpen = true;
-      }, this.enterDelay);
-    },
-
-    setOutTimer () {
-      this.outTimer = setTimeout(() => {
-        this.isOpen = false;
-      }, this.leaveDelay);
-    },
-
-    openHovercard () {
-      if (!this.hovercard) return;
-      if (this.open === null || this.open === undefined) {
-        clearTimeout(this.outTimer);
-        this.setInTimer();
-      }
+    onMouseEnter () {
+      this.$emit('mouseenter-popover');
     },
 
-    closeHovercard () {
-      if (!this.hovercard) return;
-      if (this.open === null || this.open === undefined) {
-        clearTimeout(this.inTimer);
-        this.setOutTimer();
-      }
+    onMouseLeave () {
+      this.$emit('mouseleave-popover');
     },
-
-    //  ============================================================================
-    //  $ HOVERCARD
-    //  ----------------------------------------------------------------------------
   },
 };
 </script>

From 53d4938279dd4abdd689dab290c59b2572bb0da1 Mon Sep 17 00:00:00 2001
From: Nina <ninamrepetto@gmail.com>
Date: Fri, 17 Jan 2025 15:52:13 -0300
Subject: [PATCH 3/4] update event names, add docs

---
 .../components/hovercard/hovercard.vue        | 17 ++++----
 .../components/popover/popover.vue            | 40 ++++++++++++++++++-
 2 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/packages/dialtone-vue3/components/hovercard/hovercard.vue b/packages/dialtone-vue3/components/hovercard/hovercard.vue
index 1cb528ff9..cff4ab9b3 100644
--- a/packages/dialtone-vue3/components/hovercard/hovercard.vue
+++ b/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. -->
diff --git a/packages/dialtone-vue3/components/popover/popover.vue b/packages/dialtone-vue3/components/popover/popover.vue
index 6da5701a7..7b886d546 100644
--- a/packages/dialtone-vue3/components/popover/popover.vue
+++ b/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>

From d6ae060733523c078e184cdc243427f3bf50e4a0 Mon Sep 17 00:00:00 2001
From: Nina <ninamrepetto@gmail.com>
Date: Fri, 17 Jan 2025 15:54:34 -0300
Subject: [PATCH 4/4] update event vue 2

---
 .../components/hovercard/hovercard.vue        | 15 +++----
 .../components/popover/popover.vue            | 40 ++++++++++++++++++-
 2 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/packages/dialtone-vue2/components/hovercard/hovercard.vue b/packages/dialtone-vue2/components/hovercard/hovercard.vue
index 3c8443312..5fb9ff353 100644
--- a/packages/dialtone-vue2/components/hovercard/hovercard.vue
+++ b/packages/dialtone-vue2/components/hovercard/hovercard.vue
@@ -20,17 +20,14 @@
     @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
-          name="anchor"
-          v-bind="attrs"
-        />
-      </div>
+      <slot
+        name="anchor"
+        v-bind="attrs"
+      />
     </template>
     <template #content>
       <slot name="content" />
diff --git a/packages/dialtone-vue2/components/popover/popover.vue b/packages/dialtone-vue2/components/popover/popover.vue
index 761d0e06f..7af4d12d9 100644
--- a/packages/dialtone-vue2/components/popover/popover.vue
+++ b/packages/dialtone-vue2/components/popover/popover.vue
@@ -58,8 +58,8 @@
         :tabindex="contentTabindex"
         appear
         v-on="popoverListeners"
-        @mouseenter="onMouseEnter"
-        @mouseleave="onMouseLeave"
+        @mouseenter="onMouseEnterAnchor"
+        @mouseleave="onMouseLeaveAnchor"
       >
         <popover-header-footer
           v-if="$slots.headerContent || showCloseButton"
@@ -521,6 +521,34 @@ export default {
      * @type {Boolean | Array}
      */
     'update:open',
+
+    /**
+     * 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 () {
@@ -988,6 +1016,14 @@ export default {
     onMouseLeave () {
       this.$emit('mouseleave-popover');
     },
+
+    onMouseEnterAnchor () {
+      this.$emit('mouseenter-popover-anchor');
+    },
+
+    onMouseLeaveAnchor () {
+      this.$emit('mouseleave-popover-anchor');
+    },
   },
 };
 </script>