@avakhula/ui 0.0.28 → 0.0.29

package/package.json

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

package/src/App.vue

@@ -26,11 +26,16 @@
   <ib-button style="margin-bottom: 1020px;" v-tooltip="'test'" >HOVER ME</ib-button>
   <ib-button style="margin-bottom: 20px;" v-tooltip="'second test'" >HOVER ME</ib-button>
 
+  <p class="test" v-TextOverflowTooltipTooltip="'test'">
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum inventore maxime porro exercitationem. Deserunt temporibus quasi rerum numquam tenetur dolor illum nemo
+  </p>
+
 </template>
 
 <script>
 import IbButton from "./components/Button/Button.vue"
 import { TooltipDirective as Tooltip} from "./directives/tooltip/tooltip"
+import { TextOverflowTooltipDirective as TextOverflowTooltipTooltip} from "./directives/tooltip/textOverflowTooltip"
 
 import IbSelect from "./components/TreeSelect/Select.vue";
 import IbCheckbox from "./components/Form/Checkbox/Checkbox.vue";
@@ -95,6 +100,7 @@ export default {
   },
   directives: {
     Tooltip,
+    TextOverflowTooltipTooltip,
   },
   watch: {
     test(val) {
@@ -128,4 +134,11 @@ export default {
 </script>
 
 <style>
+.test {
+  overflow: hidden;
+display: -webkit-box;
+-webkit-line-clamp: 1;
+-webkit-box-orient: vertical;
+
+}
 </style>

package/src/directives/tooltip/textOverflowTooltip.js

@@ -0,0 +1,61 @@
+import { createApp } from "vue";
+import IbTooltip from "../../components/Tooltip/Tooltip.vue";
+import multiLineOverflows from "../../helpers/multiLineOverflows";
+
+let tooltipInstance = null;
+let tooltipContainer = null;
+
+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;
+    `;
+
+      tooltipContainer.firstChild.setAttribute("style", tooltipStyles);
+    }
+  }, 100);
+}
+
+export const TextOverflowTooltipDirective = {
+  mounted(el, binding) {
+    el.addEventListener("mouseenter", () => {
+      if (multiLineOverflows(el)) {
+        createTooltipInstance(el, binding);
+      }
+    });
+
+    el.addEventListener("mouseleave", () => {
+      tooltipInstance?.unmount();
+      if (tooltipContainer) {
+        document.body.removeChild(tooltipContainer);
+        tooltipContainer = null;
+      }
+    });
+  },
+};

package/src/index.js

@@ -48,3 +48,4 @@ export { default as IbCheckboxCell } from "./components/Table/Cells/CheckboxCell
 // Directives
 export { OutsideDirective } from "./directives/outside/outside";
 export { TooltipDirective } from "./directives/tooltip/tooltip";
+export { TextOverflowTooltipDirective } from "./directives/tooltip/textOverflowTooltip";