refactor(popover, hovercard): DLT-2245 separate hovercard from popover

dialpad · Jan 14, 2025 · 6289190 · 6289190
1 parent 2bbcc28
commit 6289190
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 76 deletions.
diff --git 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
+          v-bind="attrs"
+          name="anchor"
+        />
+      </div>
     </template>
     <template #content>
       <slot name="content" />
@@ -206,5 +212,53 @@ export default {
      */
     'opened',
   ],
+
+  data () {
+    return {
+      hovercardOpen: this.open,
+      inTimer: null,
+      outTimer: null,
+    };
+  },
+
+  watch: {
+    open: {
+      handler: function (open) {
+        if (open !== null) {
+          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 || this.open === undefined) {
+        clearTimeout(this.outTimer);
+        this.setInTimer();
+      }
+    },
+
+    onMouseLeave () {
+      if (this.open === null || this.open === undefined) {
+        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
@@ -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
@@ -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>