quasar-ui-danx 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.1.0",
+  "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

@@ -0,0 +1,66 @@
+<template>
+  <QTooltip
+      class="interactive-tooltip"
+      ref="tooltipBox"
+      v-model="show"
+      no-parent-event
+      @mouseenter="onEnterTooltip"
+      @mouseleave="onLeaveTooltip"
+      :transition-duration="200"
+  >
+    <slot>{{ tooltip }}</slot>
+  </QTooltip>
+</template>
+<script setup>
+import { onMounted, ref } from 'vue';
+
+defineProps({ tooltip: { type: String, default: '' } });
+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);
+});
+function onEnterParent() {
+  show.value = true;
+  isHoveringParent.value = true;
+  if (timeout) clearTimeout(timeout);
+}
+function onLeaveParent() {
+  isHoveringParent.value = false;
+  if (show.value) delayClose();
+}
+function onEnterTooltip() {
+  isHovering.value = true;
+  show.value = true;
+  if (timeout) clearTimeout(timeout);
+}
+function onLeaveTooltip() {
+  isHovering.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>

package/src/components/Utility/Popovers/index.ts

@@ -1 +1,2 @@
 export { default as PopoverMenu } from "./PopoverMenu.vue";
+export { default as InteractiveTooltip } from "./InteractiveTooltip.vue";