quasar-ui-danx 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",

package/src/components/PanelsDrawer/PanelsDrawerPanels.vue

@@ -18,7 +18,7 @@ import { RenderVnode } from '../Utility';
 defineProps({
   activePanel: {
     type: String,
-    required: true
+    default: null
   },
   panels: {
     type: Array,

package/src/components/Utility/Popovers/InteractiveTooltip.vue

@@ -1,11 +1,12 @@
 <template>
   <QTooltip
+      class="interactive-tooltip"
       ref="tooltipBox"
       v-model="show"
       no-parent-event
-      class="!pointer-events-auto"
       @mouseenter="onEnterTooltip"
       @mouseleave="onLeaveTooltip"
+      :transition-duration="200"
   >
     <slot>{{ tooltip }}</slot>
   </QTooltip>
@@ -18,6 +19,7 @@ const show = ref(false);
 const tooltipBox = ref(null);
 const isHovering = ref(false);
 const isHoveringParent = ref(false);
+let timeout = null;
 onMounted(() => {
   tooltipBox.value.$el.parentNode.addEventListener('mouseover', onEnterParent);
   tooltipBox.value.$el.parentNode.addEventListener('mouseleave', onLeaveParent);
@@ -25,25 +27,40 @@ onMounted(() => {
 function onEnterParent() {
   show.value = true;
   isHoveringParent.value = true;
+  if (timeout) clearTimeout(timeout);
 }
 function onLeaveParent() {
   isHoveringParent.value = false;
-  if (!show.value) return;
-
-  setTimeout(() => {
-    if (isHovering.value || isHoveringParent.value) {
-      onLeaveParent();
-    } else {
-      show.value = false;
-    }
-  }, 200);
+  if (show.value) delayClose();
 }
 function onEnterTooltip() {
   isHovering.value = true;
   show.value = true;
+  if (timeout) clearTimeout(timeout);
 }
 function onLeaveTooltip() {
   isHovering.value = false;
-  show.value = false;
+  if (show.value) delayClose();
+}
+function delayClose() {
+  if (timeout) clearTimeout(timeout);
+  timeout = setTimeout(() => {
+    if (isHovering.value || isHoveringParent.value) {
+      delayClose();
+    } else {
+      show.value = false;
+    }
+  }, 200);
 }
+
 </script>
+<style lang="scss">
+body .q-tooltip {
+  &.interactive-tooltip {
+    pointer-events: auto !important;
+    background: white;
+    color: inherit;
+    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);
+  }
+}
+</style>