incr: add transition and delays to popover

- use delay for quickview
- fix quickview height issue in autocomplete

src/components/Controls/AutoComplete.vue

@@ -62,14 +62,23 @@
           @mouseleave="showQuickView = false"
           @click="routeToLinkedDoc"
         >
-          <feather-icon name="chevron-right" class="w-4 h-4 text-gray-600" />
+          <Popover
+            :show-popup="showQuickView"
+            :entry-delay="300"
+            placement="bottom"
+          >
+            <template #target>
+              <feather-icon
+                name="chevron-right"
+                class="w-4 h-4 text-gray-600"
+              />
+            </template>
+            <template #content>
+              <QuickView :schema-name="linkSchemaName" :name="value" />
+            </template>
+          </Popover>
         </button>
       </div>
-      <Popover v-if="canLink" :show-popup="showQuickView" placement="bottom">
-        <template #content>
-          <QuickView :schema-name="linkSchemaName" :name="value" />
-        </template>
-      </Popover>
     </template>
   </Dropdown>
 </template>

src/components/Popover.vue

@@ -7,14 +7,25 @@
         :handleBlur="handleBlur"
       ></slot>
     </div>
-    <div
+    <Transition>
-      ref="popover"
+      <div
-      :class="popoverClass"
+        ref="popover"
-      class="bg-white rounded border shadow-lg popover-container relative z-10"
+        :class="popoverClass"
-      v-show="isOpen"
+        class="
-    >
+          bg-white
-      <slot name="content" :togglePopover="togglePopover"></slot>
+          rounded-md
-    </div>
+          border
+          shadow-xl
+          popover-container
+          relative
+          z-10
+        "
+        :style="{ 'transition-delay': `${isOpen ? entryDelay : exitDelay}ms` }"
+        v-show="isOpen"
+      >
+        <slot name="content" :togglePopover="togglePopover"></slot>
+      </div>
+    </Transition>
   </div>
 </template>
 
@@ -31,6 +42,8 @@ export default {
       default: null,
     },
     right: Boolean,
+    entryDelay: { type: Number, default: 0 },
+    exitDelay: { type: Number, default: 0 },
     placement: {
       type: String,
       default: 'bottom-start',
@@ -120,3 +133,14 @@ export default {
   },
 };
 </script>
+<style scoped>
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 150ms ease-out;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>

src/components/QuickView.vue

@@ -4,8 +4,13 @@
       class="p-2 flex justify-between"
       :class="values.length ? 'border-b' : ''"
     >
-      <p class="font-semibold text-base text-gray-900">{{ name }}</p>
+      <p
-      <p class="font-semibold text-sm text-gray-600">
+        class="font-semibold text-base text-gray-900"
+        v-if="schema?.naming !== 'random' && !schema?.isChild"
+      >
+        {{ name }}
+      </p>
+      <p class="font-semibold text-base text-gray-600">
         {{ schema?.label ?? '' }}
       </p>
     </div>