@avakhula/ui 0.0.79 → 0.0.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.79",
+  "version": "0.0.80",
   "main": "dist/index.js",
   "module": "dist/index.umd.cjs",
   "source": "src/index.js",

package/src/App.vue

@@ -1,21 +1,37 @@
 <template>
-  <ib-checkbox label="test" v-model:model-value="test" />
+  <div class="hello">
+    <p class="test" v-text-overflow-tooltip="test">
+      {{ test }}
+    </p>
+  </div>
 </template>
 
 <script>
-import IbCheckbox from './components/Form/Checkbox/Checkbox.vue';
-
+import { TextOverflowTooltipDirective as TextOverflowTooltip } from "./directives/tooltip/textOverflowTooltip";
 export default {
   data() {
     return {
-      test: null,
+      test: `Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit inventore
+    quos, ratione veniam delectus, repellat voluptate maiores quo laudantium
+    nostrum fugiat! Reiciendis rem ipsum itaque quas molestiae ex doloribus
+    ullam!`
     }
   },
-  components: {
-    IbCheckbox
+  directives: {
+    TextOverflowTooltip,
   },
 };
 </script>
 
-<style>
-</style>
+<style lang="scss">
+@import "./assets/scss/mixins.scss";
+
+.hello {
+  padding: 200px;
+}
+
+.test {
+  max-width: 20px;
+  @include lineClamp(1);
+}
+</style>

package/src/directives/tooltip/TooltipController.js

@@ -0,0 +1,55 @@
+import { createApp } from "vue";
+import IbTooltip from "../../components/Tooltip/Tooltip.vue";
+
+export default class Tooltip {
+  constructor() {
+    this.tooltipInstance = null;
+    this.tooltipContainer = null;
+  }
+
+  createTooltip(el, text) {
+    const tooltipContainerStyles = `
+      position: absolute;
+      top: 0px;
+      left: 0px;
+    `;
+    this.tooltipContainer = document.createElement("div");
+    this.tooltipContainer.setAttribute("style", tooltipContainerStyles);
+
+    document.body.appendChild(this.tooltipContainer);
+    this.tooltipInstance = createApp(IbTooltip, {
+      text: text,
+    });
+
+    this.tooltipInstance.mount(this.tooltipContainer);
+    this.tooltipContainer.firstChild.setAttribute("style", "display: block");
+
+    setTimeout(() => {
+      if (this.tooltipContainer?.firstChild) {
+        const { top, left, width } = el.getBoundingClientRect();
+        const { width: tooltipWidth, height: tooltipHeight } =
+          this.tooltipContainer.firstChild.getBoundingClientRect();
+        const scrollTop = document.documentElement.scrollTop;
+
+        const tooltipStyles = `
+          left: ${left + width / 2 - tooltipWidth / 2}px!important;
+          top: ${top - tooltipHeight + scrollTop - 5}px!important;
+          bottom: auto!important;
+          right: auto!important;
+          transform: none!important;
+        `;
+
+        this.tooltipContainer.firstChild.setAttribute("style", tooltipStyles);
+      }
+    }, 100);
+  }
+
+  destroyTooltip() {
+    if (this.tooltipInstance && this.tooltipContainer) {
+      this.tooltipInstance.unmount();
+      this.tooltipInstance = null;
+      this.tooltipContainer.remove();
+      this.tooltipContainer = null;
+    }
+  }
+}

package/src/directives/tooltip/textOverflowTooltip.js

@@ -1,61 +1,27 @@
-import { createApp } from "vue";
-import IbTooltip from "../../components/Tooltip/Tooltip.vue";
+import Tooltip from "./TooltipController";
 import multiLineOverflows from "../../helpers/multiLineOverflows";
 
-let tooltipInstance = null;
-let tooltipContainer = null;
+const tooltip = new Tooltip();
 
-function createTooltipInstance(el, binding) {
-  const tooltipContainerStyles = `
-    position: absolute;
-    top: 0px;
-    left: 0px;
-`;
-  tooltipContainer = document.createElement("div");
-  tooltipContainer.setAttribute("style", tooltipContainerStyles);
-
-  document.body.appendChild(tooltipContainer);
-  tooltipInstance = createApp(IbTooltip, {
-    text: binding.value,
-  });
-
-  tooltipInstance.mount(tooltipContainer);
-  tooltipContainer.firstChild.setAttribute("style", "display: block");
-
-  setTimeout(() => {
-    if (tooltipContainer?.firstChild) {
-      const { top, left, width } = el.getBoundingClientRect();
-      const { width: tooltipWidth, height: tooltipHeight } =
-        tooltipContainer.firstChild.getBoundingClientRect();
-      const scrollTop = document.documentElement.scrollTop;
-
-      const tooltipStyles = `
-      left: ${left + width / 2 - tooltipWidth / 2}px!important;
-      top: ${top - tooltipHeight + scrollTop - 5}px!important;
-      bottom: auto!important;
-      right: auto!important;
-      transform: none!important;
-    `;
+const createTooltip = (el, binding) => {
+  if (multiLineOverflows(el)) {
+    tooltip.createTooltip(el, binding.value);
+  }
+};
 
-      tooltipContainer.firstChild.setAttribute("style", tooltipStyles);
-    }
-  }, 100);
-}
+const destroyTooltip = () => {
+  tooltip.destroyTooltip();
+};
 
 export const TextOverflowTooltipDirective = {
   mounted(el, binding) {
-    el.addEventListener("mouseenter", () => {
-      if (multiLineOverflows(el)) {
-        createTooltipInstance(el, binding);
-      }
-    });
+    el.addEventListener("mouseenter", () => createTooltip(el, binding));
+    el.addEventListener("mouseleave", destroyTooltip);
+  },
 
-    el.addEventListener("mouseleave", () => {
-      tooltipInstance?.unmount();
-      if (tooltipContainer) {
-        document.body.removeChild(tooltipContainer);
-        tooltipContainer = null;
-      }
-    });
+  onBeforeUnmount(el, binding) {
+    tooltip.destroyTooltip();
+    el.removeEventListener("mouseenter", () => createTooltip(el, binding));
+    el.removeEventListener("mouseleave", destroyTooltip);
   },
 };

package/src/directives/tooltip/tooltip.js

@@ -1,50 +1,23 @@
-import { createApp } from "vue";
-import IbTooltip from "../../components/Tooltip/Tooltip.vue";
+import Tooltip from "./TooltipController";
 
-export const TooltipDirective = {
-  mounted(el, binding) {
-    let tooltipInstance = null;
-    const tooltipContainer = document.createElement("div");
-
-    el.addEventListener("mouseenter", () => {
-      const tooltipContainerStyles = `
-          position: absolute;
-          top: 0px;
-          left: 0px;
-      `;
-      tooltipContainer.setAttribute("style", tooltipContainerStyles);
-
-      document.body.appendChild(tooltipContainer);
-      tooltipInstance = createApp(IbTooltip, {
-        text: binding.value,
-      });
-
-      tooltipInstance.mount(tooltipContainer);
-      tooltipContainer.firstChild.setAttribute("style", "display: block");
-
-      setTimeout(() => {
-        if (tooltipContainer.firstChild) {
-          const { top, left, width } = el.getBoundingClientRect();
-          const { width: tooltipWidth, height: tooltipHeight } =
-            tooltipContainer.firstChild.getBoundingClientRect();
-          const scrollTop = document.documentElement.scrollTop;
+const tooltip = new Tooltip();
+const createTooltip = (el, binding) => {
+  tooltip.createTooltip(el, binding.value);
+};
 
-          const tooltipStyles = `
-            left: ${left + width / 2 - tooltipWidth / 2}px!important;
-            top: ${top - tooltipHeight + scrollTop - 5}px!important;
-            bottom: auto!important;
-            right: auto!important;
-            transform: none!important;
-          `;
+const destroyTooltip = () => {
+  tooltip.destroyTooltip();
+};
 
-          tooltipContainer.firstChild.setAttribute("style", tooltipStyles);
-        }
-      }, 100);
-    });
+export const TooltipDirective = {
+  mounted(el, binding) {
+    el.addEventListener("mouseenter", () => createTooltip(el, binding));
+    el.addEventListener("mouseleave", destroyTooltip);
+  },
 
-    el.addEventListener("mouseleave", () => {
-      tooltipInstance.unmount();
-      document.body.removeChild(tooltipContainer);
-    });
+  onBeforeUnmount(el, binding) {
+    tooltip.destroyTooltip();
+    el.removeEventListener("mouseenter", () => createTooltip(el, binding));
+    el.removeEventListener("mouseleave", destroyTooltip);
   },
 };