add vue 3

Author: ninamarina

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>

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

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>