[HACKATHON 2024] fast connect

packages/dialtone-vue2/components/hovercard/hovercard.stories.js

@@ -50,6 +50,11 @@ export const argTypesData = {
   },
 
   // Props
+  open: {
+    control: {
+      type: 'boolean',
+    },
+  },
   fallbackPlacements: {
     description: `If the popover does not fit in the direction described by "placement",
     it will attempt to change its direction to the "fallbackPlacements".

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

@@ -16,6 +16,9 @@
     :hovercard="true"
     :timer="timer"
     data-qa="dt-hovercard"
+    :open="open"
+    :enter-delay="enterDelay"
+    :leave-delay="leaveDelay"
     @opened="(e) => ($emit('opened', e))"
   >
     <template #anchor="{ attrs }">
@@ -39,7 +42,7 @@
 
 <script>
 import { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/popover/index.js';
-import { TOOLTIP_DIRECTIONS } from '@/components/tooltip/index.js';
+import { TOOLTIP_DIRECTIONS, TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';
 import { getUniqueString } from '@/common/utils';
 import useTimer from './timer';
 
@@ -52,6 +55,17 @@ export default {
 
   props: {
   /**
+     * Controls whether the hovercard is shown. Leaving this null will have the popover trigger on click by default.
+     * If you set this value, the default trigger behavior will be disabled, and you can control it as you need.
+     * Supports .sync modifier
+     * @values null, true, false
+     */
+    open: {
+      type: Boolean,
+      default: null,
+    },
+
+    /**
    * Fade transition when the content display is toggled.
    * @type boolean
    * @values true, false
@@ -165,6 +179,24 @@ export default {
             (appendTo instanceof HTMLElement);
       },
     },
+
+    /**
+     * 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: [

packages/dialtone-vue2/components/hovercard/hovercard_default.story.vue

@@ -11,6 +11,7 @@
     :header-class="$attrs.headerClass"
     :footer-class="$attrs.footerClass"
     :append-to="$attrs.appendTo"
+    :open="$attrs.open"
     @opened="$attrs.onOpened"
   >
     <template #anchor="slotProps">

packages/dialtone-vue2/components/hovercard/hovercard_many.story.vue

@@ -9,12 +9,10 @@
       :time="data.time"
       :is-active="true"
       :state="$attrs.state"
-      @hover="$attrs.onHover"
-      @focus="$attrs.onFocus"
     >
       <template #avatar>
         <dt-hovercard
-          :id="$attrs.id"
+          :id="data.id"
           :placement="$attrs.placement"
           :content-class="$attrs.contentClass"
           :fallback-placements="$attrs.fallbackPlacements"
@@ -25,6 +23,8 @@
           :header-class="$attrs.headerClass"
           :footer-class="$attrs.footerClass"
           :append-to="$attrs.appendTo"
+          :enter-delay="$attrs.enterDelay"
+          :leave-delay="$attrs.leaveDelay"
           @opened="$attrs.onOpened"
         >
           <template #anchor="slotProps">
@@ -136,6 +136,7 @@
 </template>
 
 <script setup>
+import { getUniqueString } from '@/common/utils';
 import DtHovercard from './hovercard.vue';
 import DtRecipeFeedItemRow from '@/recipes/conversation_view/feed_item_row/feed_item_row.vue';
 import DtRecipeEmojiRow from '@/recipes/conversation_view/emoji_row/emoji_row.vue';
@@ -147,21 +148,32 @@ import DtButton from '../button/button.vue';
 import DtAvatar from '../avatar/avatar.vue';
 
 const cardData = [{
-  name: 'Jaqueline Nackos', src: avatar2, time: '4:54 PM', default: `<p class="d-fs-200 d-lh-400 d-wmx90ch">
+  name: 'Jaqueline Nackos',
+  src: avatar2,
+  time: '4:54 PM',
+  default: `<p class="d-fs-200 d-lh-400 d-wmx90ch">
   Elementum fames nullam elementum velit proin vitae aliquet.
   Platea nulla consectetur consequat sagittis nullam et ultricies nisl rhoncus
   aliquet elementum venenatis quisque.</p>`,
+  id: getUniqueString(),
 },
 {
-  name: 'Joseph Lumaban', src: avatar1, time: '5:05 PM', default: `<p class="d-fs-200 d-lh-400 d-wmx90ch">
+  name: 'Joseph Lumaban',
+  src: avatar1,
+  time: '5:05 PM',
+  default: `<p class="d-fs-200 d-lh-400 d-wmx90ch">
   Elementum fames nullam elementum velit proin vitae aliquet.
   Platea nulla consectetur consequat sagittis nullam et ultricies nisl rhoncus
   aliquet elementum venenatis quisque.</p>`,
+  id: getUniqueString(),
 },
 {
-  name: 'Purdie Afra', time: '5:16 PM', default: `<p class="d-fs-200 d-lh-400 d-wmx90ch">
+  name: 'Purdie Afra',
+  time: '5:16 PM',
+  default: `<p class="d-fs-200 d-lh-400 d-wmx90ch">
   Elementum fames nullam elementum velit proin vitae aliquet.
   Platea nulla consectetur consequat sagittis nullam et ultricies nisl rhoncus
   aliquet elementum venenatis quisque.</p>`,
+  id: getUniqueString(),
 }];
 </script>

packages/dialtone-vue2/components/hovercard/timer.js

@@ -3,57 +3,34 @@ import { TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';
 export default (function () {
   const current = { value: null };
   let timerLeave, timerEnter;
-  let start = null;
-  let prevCard = null;
 
   // Handles the timer for when the event that opens the hovercard
   // is triggered.
   // If no hovercard is active, it sets a delay of TOOLTIP_DELAY_MS.
   // If there was an active hovercard, the delay depends on the time it takes
   // to move from one anchor to the other.
-  function enter (id) {
-    if (prevCard) {
-      const time = Date.now() - start + 100;
-      if (timerLeave) clearTimeout(timerLeave);
-      if (prevCard !== id) {
-        timerLeave = setTimeout(
-          () => {
-            if (current.value !== null) {
-              start = Date.now();
-            }
-            current.value = null;
-          },
-          time,
-        );
-        if (timerEnter) clearTimeout(timerEnter);
-        timerEnter = setTimeout(
-          () => {
-            current.value = id;
-            prevCard = id;
-          },
-          time,
-        );
-      }
-    } else {
-      timerEnter = setTimeout(() => {
-        current.value = id;
-        prevCard = id;
-      }, TOOLTIP_DELAY_MS);
-    }
+  function enter (id, enterDelay = TOOLTIP_DELAY_MS) {
+    console.log('nina start to enter', id);
+    if (timerLeave) clearTimeout(timerLeave);
+    timerEnter = setTimeout(() => {
+      console.log('nina enter', id);
+      current.value = id;
+    }, enterDelay);
+    // }
   }
 
   // Handles the timer for when the event that closes the hovercard
   // is triggered.
-  function leave () {
+  function leave (leaveDelay = TOOLTIP_DELAY_MS) {
+    console.log('nina start to leave', current.value);
     if (timerEnter) {
       clearTimeout(timerEnter);
       timerEnter = null;
     }
-    start = Date.now();
     timerLeave = setTimeout(() => {
+      console.log('nina leave', current.value);
       current.value = null;
-      prevCard = null;
-    }, TOOLTIP_DELAY_MS);
+    }, leaveDelay);
   }
 
   let instance = null;

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

@@ -527,6 +527,24 @@ export default {
         return timer === null || (timer.enter && timer.leave && Object.keys(timer).includes('current'));
       },
     },
+
+    /**
+     * 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: [
@@ -1040,7 +1058,7 @@ export default {
 
     onEnterAnchor () {
       if (!this.hovercard) return;
-      if (this.timer) this.timer.enter(this.id);
+      if (this.timer) this.timerEnter();
       else {
         clearTimeout(this.outTimer);
         this.setInTimer();
@@ -1049,7 +1067,7 @@ export default {
 
     onLeaveAnchor () {
       if (!this.hovercard) return;
-      if (this.timer) this.timer.leave();
+      if (this.timer) this.timerLeave();
       else {
         clearTimeout(this.inTimer);
         this.setOutTimer();
@@ -1058,16 +1076,24 @@ export default {
 
     onEnterContent () {
       if (!this.hovercard) return;
-      if (this.timer) this.timer.enter(this.id);
+      if (this.timer) this.timerEnter();
       else clearTimeout(this.outTimer);
     },
 
     onLeaveContent () {
       if (!this.hovercard) return;
-      if (this.timer) this.timer.leave();
+      if (this.timer) this.timerLeave();
       else this.setOutTimer();
     },
 
+    timerEnter () {
+      this.timer.enter(this.id, this.enterDelay);
+    },
+
+    timerLeave () {
+      this.timer.leave(this.leaveDelay);
+    },
+
     //  ============================================================================
     //  $ HOVERCARD
     //  ----------------------------------------------------------------------------

packages/dialtone-vue2/recipes/conversation_view/feed_item_row/feed_item_row.vue

@@ -52,9 +52,12 @@
         data-qa="dt-feed-item-row--header"
         class="dt-feed-item-row__header"
       >
-        <p class="dt-feed-item-row__header__name">
-          {{ displayName }}
-        </p>
+        <!-- @slot Slot for display name -->
+        <slot name="displayName">
+          <p class="dt-feed-item-row__header__name">
+            {{ displayName }}
+          </p>
+        </slot>
         <time
           class="dt-feed-item-row__header__time"
         >