@avakhula/ui 0.0.78 → 0.0.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.78",
+  "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/components/Form/Input/input.scss

@@ -14,7 +14,7 @@ $input-hover-color: $neutral-900;
 $input-hover-bg: $blue-200;
 $input-hover-border-color: $blue-700;
 $input-hover-placeholder-color: $neutral-600;
-$input-hover-error-color: $red-800;
+$input-border-error-color: $red-800;
 
 .ib-input-wrapper {
   position: relative;
@@ -123,7 +123,7 @@ $input-hover-error-color: $red-800;
     &.ib-error {
       border-radius: 4px;
       border-color: transparent;
-      @include outline(-2px, $input-hover-error-color);
+      @include outline(-2px, $input-border-error-color);
     }
   }
 }

package/src/components/TreeSelect/Select.stories.js

@@ -73,6 +73,9 @@ export default {
     emptyMessage: {
       control: { type: "text" },
     },
+    errorMessage: {
+      control: { type: "text" },
+    },
     allOptions: {
       control: { type: "boolean" },
     },

package/src/components/TreeSelect/Select.vue

@@ -1,4 +1,8 @@
 <template>
+  <ib-alert class="tree-select-error" v-if="errorMessage">
+    {{ errorMessage }}
+  </ib-alert>
+
   <div class="tree-select">
     <ib-dropdown
       :disabled="isLoading"
@@ -22,6 +26,7 @@
           :class="{
             'tree-choice-opened': isOpened,
             'has-clear-button': !showClearButton,
+            'tree-choice-error': errorMessage,
           }"
         >
           <template v-if="htmlOptionTitle">
@@ -232,6 +237,7 @@ import generateUID from "../../helpers/generateUID";
 import IbDropdown from "../Dropdown/Dropdown.vue";
 import IbIcon from "../Icon.vue";
 import IbIconButton from "../IconButton/IconButton.vue";
+import IbAlert from "../Alert/Alert.vue";
 import List from "../List.vue";
 
 export default {
@@ -359,6 +365,10 @@ export default {
       type: String,
       default: "",
     },
+    errorMessage: {
+      type: String,
+      default: "",
+    },
     allOptions: {
       type: Boolean,
       default: true,
@@ -938,6 +948,7 @@ export default {
     },
   },
   components: {
+    IbAlert,
     IbIconButton,
     IbIcon,
     IbDropdown,

package/src/components/TreeSelect/scss/select.scss

@@ -17,10 +17,22 @@ $choice-hover-icon-color: $blue-700;
 $choice-opened-bg: $blue-50;
 $choice-opened-border-color: $blue-900;
 $choice-opened-icon-color: $blue-900;
-
+$choice-border-error-color: $red-800;
 $tree-search-border-color: $gray-600;
+
+.tree-select-error {
+  margin-bottom: 5px;
+}
+
 .tree-select {
+  width: 100%;
+
+  .ib-dropdown {
+    width: 100%;
+  }
+
   .dropdown-trigger {
+    width: inherit;
     display: inline-block;
     position: relative;
 
@@ -60,7 +72,6 @@ $tree-search-border-color: $gray-600;
     background-color: $choice-bg;
     color: $choice-text-color;
     border-radius: 4px 4px 0 0;
-    width: 280px;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -92,6 +103,12 @@ $tree-search-border-color: $gray-600;
         color: $choice-opened-icon-color;
       }
     }
+
+    &.tree-choice-error {
+      border-radius: 4px;
+      border-color: transparent;
+      @include outline(-2px, $choice-border-error-color);
+    }
   }
 
   .button-clear {

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);
   },
 };