@avakhula/ui 0.0.33 → 0.0.34-4.2

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

@@ -17,10 +17,34 @@ $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;
+
+.disable {
+  .tree-choice {
+    background-color: $gray-100 !important;
+    color: $neutral-500 !important;
+    border-bottom: 1px solid $neutral-500 !important;
+  }
+}
+
+.tree-select-error {
+  margin-bottom: 5px;
+}
+
 .tree-select {
+  width: 100%;
+
+  &.tree-select-custom-trigger-content {
+    width: fit-content;
+  }
+
+  .ib-dropdown {
+    width: 100%;
+  }
+
   .dropdown-trigger {
+    width: inherit;
     display: inline-block;
     position: relative;
 
@@ -39,6 +63,7 @@ $tree-search-border-color: $gray-600;
       display: flex;
       align-items: center;
       justify-content: center;
+      font-size: 16px;
     }
 
     &:hover {
@@ -60,18 +85,21 @@ $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;
     overflow: hidden;
     position: relative;
-    padding-right: 40px;
+    padding-right: 30px;
     border-bottom: 1px solid $choice-border-color;
     transition: background-color 0.3s, border-color 0.3s, border-radius 0.3s;
 
     &.has-clear-button {
-      padding-right: 30px;
+      padding-right: 60px;
+    }
+
+    &.tree-choice-custom-content {
+      width: fit-content;
     }
 
     span {
@@ -80,8 +108,8 @@ $tree-search-border-color: $gray-600;
 
     &:focus {
       border-radius: 4px;
-      border-bottom-color: transparent;
-      @include outline();
+      border-bottom: 0px;
+      @include outline(0px);
     }
 
     &.tree-choice-opened {
@@ -92,12 +120,29 @@ $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);
+
+      &:focus {
+        @include outline(0px);
+      }
+    }
   }
 
   .button-clear {
     margin-left: auto;
   }
 
+  .dropdown-top {
+    .tree-drop {
+      bottom: 42px;
+      top: auto;
+    }
+  }
+
   .tree-drop {
     z-index: 9998;
     box-shadow: $menu-shadow;

package/src/directives/tooltip/TooltipController.js

@@ -0,0 +1,184 @@
+import { createApp } from "vue";
+import { popoverPosition } from "../../components/Popover/constants";
+import IbTooltip from "../../components/Tooltip/Tooltip.vue";
+import generateUID from "../../helpers/generateUID";
+
+export default class Tooltip {
+  constructor() {
+    this.tooltipInstance = null;
+    this.tooltipContainer = null;
+    this.uuid = null;
+  }
+
+  getTooltipInstance() {
+    return this.getTooltipInstance;
+  }
+
+  getTooltipContainer() {
+    return this.tooltipContainer;
+  }
+
+  getId() {
+    return this.uuid;
+  }
+
+  generateUID() {
+    this.uuid = "tooltip_" + generateUID();
+  }
+
+  createTooltip(el, content, position) {
+    if (!content.text?.length) {
+      return;
+    }
+
+    this.generateUID();
+
+    const tooltipContainerStyles = `
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      opacity: 0;
+    `;
+
+    this.tooltipContainer = document.createElement("div");
+    this.tooltipContainer.setAttribute("style", tooltipContainerStyles);
+
+    document.body.appendChild(this.tooltipContainer);
+    this.tooltipInstance = createApp(IbTooltip, {
+      title: content.title, 
+      text: content.text,
+      alwaysVisible: true,
+      for: this.uuid,
+      class: this.getClassList(position),
+    });
+
+    this.tooltipInstance.mount(this.tooltipContainer);
+
+    setTimeout(() => {
+      if (this.tooltipContainer?.firstChild) {
+        el.setAttribute("aria-describedby", this.uuid);
+
+        const tooltipStyles = this.getPositionStyle(el, position);
+        this.tooltipContainer.firstChild.setAttribute("style", tooltipStyles);
+        this.tooltipContainer.setAttribute("style", {'opacity': 1});
+      }
+    }, 100);
+  }
+
+  destroyTooltip(el) {
+    el?.removeAttribute("aria-describedby");
+    this.uuid = null;
+    this.tooltipInstance?.unmount();
+    this.tooltipInstance = null;
+    this.tooltipContainer?.remove();
+    this.tooltipContainer = null;
+  }
+
+  getPositionStyle(el, position) {
+    const { top, bottom, left, right, width, height } = el.getBoundingClientRect();
+    const { width: tooltipWidth, height: tooltipHeight } =
+      this.tooltipContainer.firstChild.getBoundingClientRect();
+
+    const scrollTop = document.documentElement.scrollTop;
+
+    let styles = `
+      bottom: auto!important;
+      right: auto!important;
+      transform: none!important;
+    `;
+
+    switch (position) {
+      case "bottomCenter":
+        styles =
+          styles +
+          `left: ${left + width / 2 - tooltipWidth / 2}px!important;
+          top: ${bottom + scrollTop + 5}px!important;`;
+        break;
+      case "bottomLeft":
+        styles =
+          styles +
+          `left: ${right - tooltipWidth - width / 2 + 14}px!important;
+          top: ${bottom + scrollTop + 5}px!important;`;
+        break;
+      case "bottomRight":
+        styles =
+          styles +
+          `left: ${left + width / 2 - 14}px!important;
+          top: ${bottom + scrollTop + 5}px!important;`;
+        break;
+      case "topLeft":
+        styles =
+          styles +
+          `left: ${right - tooltipWidth - width / 2 + 14}px!important;
+          top: ${top - tooltipHeight + scrollTop - 5}px!important;`;
+        break;
+      case "topRight":
+        styles =
+          styles +
+          `left: ${left + width / 2 - 14}px!important;
+          top: ${top - tooltipHeight + scrollTop - 5}px!important;`;
+        break;
+      case "leftTop":
+        styles =
+          styles +
+          `left: ${left - tooltipWidth - 5}px!important;
+          top: ${
+            bottom - tooltipHeight - height / 2 + scrollTop + 12
+          }px!important`;
+        break;
+      case "leftCenter":
+        styles =
+          styles +
+          `left: ${left - tooltipWidth - 5}px!important;
+          top: ${
+            bottom + scrollTop - tooltipHeight / 2 - height / 2
+          }px!important;`;
+        break;
+      case "leftBottom":
+        styles =
+          styles +
+          `left: ${left - tooltipWidth - 5}px!important;
+          top: ${bottom + scrollTop - height / 2 - 12}px!important;`;
+        break;
+      case "rightTop":
+        styles =
+          styles +
+          `left: ${right + 5}px!important;
+          top: ${
+            bottom - tooltipHeight - height / 2 + scrollTop + 12
+          }px!important`;
+        break;
+      case "rightCenter":
+        styles =
+          styles +
+          `left: ${right + 5}px!important;
+          top: ${
+            bottom + scrollTop - tooltipHeight / 2 - height / 2
+          }px!important;`;
+        break;
+
+      case "rightBottom":
+        styles =
+          styles +
+          `left: ${right + 5}px!important;
+          top: ${bottom + scrollTop - height / 2 - 12}px!important`;
+        break;
+      default:
+        styles =
+          styles +
+          `left: ${left + width / 2 - tooltipWidth / 2}px!important;
+          top: ${top - tooltipHeight + scrollTop - 5}px!important`;
+        break;
+    }
+
+    return styles;
+  }
+
+  getClassList(position) {
+    if (!position) {
+      return popoverPosition.topCenter;
+    }
+
+    return popoverPosition[position];
+  }
+}

package/src/directives/tooltip/readme.mdx

@@ -0,0 +1,17 @@
+# TooltipDirectives
+Use the v-tooltip directive on any element or component where you would like a tooltip to appear.
+
+## Usage
+```html
+<script>
+  import { TooltipDirective as Tooltip } from "ib/ui";// change when we deployed on npm
+
+  export default {
+    directives: { Tooltip },
+  };
+</script>
+
+<template>
+  <div v-tooltip="'Tooltip Content'">Hover to me</div>
+</template>
+```

package/src/directives/tooltip/textOverflowTooltip.js

@@ -1,61 +1,33 @@
-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);
+const createTooltip = (el, binding) => {
+  if (multiLineOverflows(el)) {
 
-  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 content = {
+      title: binding.value.title || '',
+      text: typeof(binding.value) === 'object' ? binding.value.text : 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;
-    `;
+    tooltip.createTooltip(el, content);
+  }
+};
 
-      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,62 @@
-import { createApp } from "vue";
-import IbTooltip from "../../components/Tooltip/Tooltip.vue";
+import Tooltip from "./TooltipController";
+
+const tooltip = new Tooltip();
+const createTooltip = (el, binding) => {
+  if (tooltip.getTooltipContainer()) {
+    tooltip.destroyTooltip();
+  }
+    const position = Object.keys(binding.modifiers)[0] || binding.arg;
+
+    const content = {
+      title: binding.value?.title || '',
+      text: typeof(binding.value) === 'object' ? binding.value.text : binding.value,
+    }
+
+    tooltip.createTooltip(el, content, position);
+};
+
+const destroyTooltip = (event, el) => {
+  const uuid = tooltip.getId();
+
+  if (el.getAttribute("aria-describedby") !== uuid) {
+    return;
+  }
+
+  const tooltipContainer = tooltip.getTooltipContainer();
+
+  const isMouseOverEl = el !== event.target && !el.contains(event.target);
+  const isMouseOverTooltip =
+    tooltipContainer !== event.target &&
+    !tooltipContainer?.contains(event.target);
+
+  if (isMouseOverEl && isMouseOverTooltip) {
+    tooltip.destroyTooltip(el);
+  }
+};
+
+const attachTooltipListeners = (el, binding) => {
+  el.__tooltip_create = () => createTooltip(el, binding);
+  el.__tooltip_destroy = (e) => destroyTooltip(e, el);
+
+  el.addEventListener("mouseenter", el.__tooltip_create);
+  document.addEventListener("mousemove", el.__tooltip_destroy);
+};
+
+const removeTooltipListeners = (el) => {
+  tooltip.destroyTooltip(el);
+  el.removeEventListener("mouseenter", el.__tooltip_create);
+  document.removeEventListener("mousemove", el.__tooltip_destroy);
+};
 
 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 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);
-    });
-
-    el.addEventListener("mouseleave", () => {
-      tooltipInstance.unmount();
-      document.body.removeChild(tooltipContainer);
-    });
+    attachTooltipListeners(el, binding);
+  },
+  updated(el, binding) {
+    removeTooltipListeners(el);
+    attachTooltipListeners(el, binding);
+  },
+  beforeUnmount(el) {
+    removeTooltipListeners(el);
   },
 };

package/src/directives/tooltip/tooltip.stories.js

@@ -0,0 +1,39 @@
+import IbButton from "../../components/Button/Button.vue";
+
+import { TooltipDirective } from "./tooltip";
+import readme from "./readme.mdx";
+
+export default {
+  title: "directives/tooltip",
+  component: TooltipDirective,
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbButton },
+  directives: { tooltip: TooltipDirective },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="display:flex;flex-wrap:wrap;margin-top: 100px;">
+      <ib-button v-tooltip="'Tooltip Content Content Content Content Tooltip Content Content Content Content Tooltip Content Content Content Content Tooltip Content Content Content Content Tooltip Content Content Content Content Tooltip Content Content Content Content'" v-bind="args">Tooltip</ib-button>
+
+
+      <ib-button v-tooltip="{text: 'antonushkoeliseyantonushkoelisey@gmail.com', title: 'test'}" v-bind="args">Tooltip</ib-button>
+    </div>
+
+    `,
+});
+
+export const Default = Template.bind({});
+Default.decorators = [
+  () => ({
+    template:
+      '<div style="display: flex; align-items:center; justify-content: center; width: 600px; height: auto; margin: 0 auto"><story /></div>',
+  }),
+];

package/src/helpers/removeEvents.js

@@ -1,6 +1,6 @@
-export default function removeEvents(attrList) {
+export default function removeEvents(attrList, eventsToRemove = []) {
   for (let prop in attrList) {
-    if (prop.startsWith("on")) {
+    if (prop.startsWith("on") && (eventsToRemove.length === 0 || eventsToRemove.includes(prop))) {
       delete attrList[prop];
     }
   }

package/src/index.js

@@ -1,6 +1,7 @@
 export { default as IbIcon } from "./components/Icon.vue";
 export { default as IbAccordion } from "./components/Accordion/Accordion.vue";
 export { default as IbAlert } from "./components/Alert/Alert.vue";
+export { default as IbAvatar } from "./components/Avatar/Avatar.vue";
 export { default as IbBadge } from "./components/Badge/Badge.vue";
 export { default as IbButton } from "./components/Button/Button.vue";
 export { default as IbButtonGroup } from "./components/ButtonGroup/ButtonGroup.vue";

package/src/main.js

@@ -2,6 +2,7 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import EventEmitter from "./EventEmmiter";
 
+window.lang = (key, component, params = {}) => key;
 const app = createApp(App);
 app.config.globalProperties.$globalEvents = new EventEmitter();
 app.config.globalProperties.$emitEvent = function (event, ...args) {

package/src/scripts/parseScssVariables.js

@@ -1,10 +1,26 @@
-import fs from "fs";
-import path from "path";
-
-const shadowFilePath = path.join("../assets/scss/variables/shadows.scss");
-const shadowOutputFile = path.join("../assets/scss/variables/shadows.json");
-const colorFilePath = path.join("../assets/scss/variables/colors.scss");
-const colorOutputFile = path.join("../assets/scss/variables/colors.json");
+import fs from "node:fs";
+import path, { dirname } from "node:path";
+
+const __filename = new URL(import.meta.url).pathname;
+const __dirname = dirname(__filename);
+
+const shadowFilePath = path.join(
+  __dirname,
+  "../assets/scss/variables/shadows.scss"
+);
+const shadowOutputFile = path.join(
+  __dirname,
+  "../assets/scss/variables/shadows.json"
+);
+
+const colorFilePath = path.join(
+  __dirname,
+  "../assets/scss/variables/colors.scss"
+);
+const colorOutputFile = path.join(
+  __dirname,
+  "../assets/scss/variables/colors.json"
+);
 
 parseFile(colorFilePath, colorOutputFile);
 parseFile(shadowFilePath, shadowOutputFile);

package/src/components/Panel/constants.js

@@ -1,4 +0,0 @@
-export const panelVariant = {
-  primary: "primary",
-  secondary: "secondary",
-};