@avakhula/ui 0.0.79 → 0.0.81

package/package.json

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

package/src/App.vue

@@ -1,21 +1,59 @@
 <template>
-  <ib-checkbox label="test" v-model:model-value="test" />
+  <div class="hello">
+    <div v-for="item in items" :key="item.id">
+      {{ item.name }}
+
+      <ib-icon-button @click="deleteItem(item.id)" v-tooltip="'DELETE'">
+        <ib-icon name="close-outline" />
+      </ib-icon-button>
+    </div>
+  </div>
 </template>
 
 <script>
-import IbCheckbox from './components/Form/Checkbox/Checkbox.vue';
+import { TextOverflowTooltipDirective as TextOverflowTooltip } from "./directives/tooltip/textOverflowTooltip";
+import { TooltipDirective as Tooltip } from "./directives/tooltip/tooltip";
 
+import IbIconButton from "./components/IconButton/IconButton.vue";
+import IbIcon from "./components/Icon.vue"
 export default {
   data() {
     return {
-      test: null,
-    }
+      items: [
+        { id: 1, name: "Item 1" },
+        { id: 2, name: "Item 2" },
+        { id: 3, name: "Item 3" },
+        { id: 4, name: "Item 4" },
+        { id: 5, name: "Item 5" },
+      ],
+    };
   },
-  components: {
-    IbCheckbox
+  methods: {
+    deleteItem(id) {
+      const idx = this.items.findIndex((item) => item.id === id);
+      this.items.splice(idx, 1);
+    },
+  },
+  directives: {
+    TextOverflowTooltip,
+    Tooltip
   },
+  components: {
+    IbIconButton,
+    IbIcon
+  }
 };
 </script>
 
-<style>
-</style>
+<style lang="scss">
+@import "./assets/scss/mixins.scss";
+
+.hello {
+  padding: 200px;
+}
+
+.test {
+  max-width: 20px;
+  @include lineClamp(1);
+}
+</style>

package/src/components/Form/Checkbox/Checkbox.vue

@@ -98,7 +98,7 @@ export default {
   },
   data() {
     return {
-      checked: this.isChecked,
+      checked: this.modelValue || this.isChecked,
     };
   },
   methods: {

package/src/components/TreeSelect/Select.vue

@@ -660,7 +660,7 @@ export default {
               }
 
               if (option.children) {
-                this.hasTreeChildren = true; //here
+                this.hasTreeChildren = true;
                 option.isChildrenVisible = false;
               }
 

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;
-      }
-    });
+  beforeUnmount(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);
-    });
+  beforeUnmount(el, binding) {
+    tooltip.destroyTooltip();
+    el.removeEventListener("mouseenter", () => createTooltip(el, binding));
+    el.removeEventListener("mouseleave", destroyTooltip);
   },
 };