@avakhula/ui 0.0.196 → 0.0.197

package/package.json

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

package/src/App.vue

@@ -1,59 +1,30 @@
 <template>
-  <div class="hello">
-    <div v-for="item in items" :key="item.id">
-      {{ item.name }}
+  <div style="padding-left: 200px;padding-top: 200px;">
 
-      <ib-icon-button @click="deleteItem(item.id)" v-tooltip="'DELETE'">
-        <ib-icon name="close-outline" />
-      </ib-icon-button>
-    </div>
+    <ib-sorting
+      title="'test'"
+      class="table-sorting"
+      view="table-sorting"
+      table-name="user-list-table"
+      toggle-tip-title="some title"
+    >
+      <template #toggleTipBody>
+        hello
+      </template>
+
+      <template #toggleTipButtons>
+        some buttons
+      </template>
+    </ib-sorting>
   </div>
 </template>
 
 <script>
-import { TextOverflowTooltipDirective as TextOverflowTooltip } from "./directives/tooltip/textOverflowTooltip";
-import { TooltipDirective as Tooltip } from "./directives/tooltip/tooltip";
+import IbSorting from "./components/Sorting/Sorting.vue";
 
-import IbIconButton from "./components/IconButton/IconButton.vue";
-import IbIcon from "./components/Icon.vue"
 export default {
-  data() {
-    return {
-      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" },
-      ],
-    };
-  },
-  methods: {
-    deleteItem(id) {
-      const idx = this.items.findIndex((item) => item.id === id);
-      this.items.splice(idx, 1);
-    },
-  },
-  directives: {
-    TextOverflowTooltip,
-    Tooltip
-  },
   components: {
-    IbIconButton,
-    IbIcon
+    IbSorting,
   }
-};
-</script>
-
-<style lang="scss">
-@import "./assets/scss/mixins.scss";
-
-.hello {
-  padding: 200px;
-}
-
-.test {
-  max-width: 20px;
-  @include lineClamp(1);
 }
-</style>
+</script>

package/src/components/Sorting/Sorting.stories.js

@@ -16,7 +16,7 @@ export default {
     },
     tooltipPosition: {
       control: { type: "select" },
-      options: Object.values(popoverPosition),
+      options: Object.keys(popoverPosition),
     },
   },
 };

package/src/components/Sorting/Sorting.vue

@@ -8,32 +8,46 @@
       }"
       v-if="view === sortingTypesView.TABLE_VIEW"
     >
-      <button class="sorting-label" type="button">
-        {{ title }}
-        <ib-tooltip
-          v-if="tooltipText"
-          :text="tooltipText"
-          :position="tooltipPosition"
+      <div>
+        <button
+          v-tooltip:[tooltipPosition]="tooltipText"
+          class="sorting-label"
+          type="button"
+          @click="isOpenToggleTip = true"
         >
-        </ib-tooltip>
-      </button>
-      <ib-icon-button kind="white" size="s" @click="clickHandler">
-        <ion-icon :name="iconType"></ion-icon>
-        <ib-tooltip
-          v-if="tooltipIconSorting"
-          :text="tooltipIconSorting"
-          :position="tooltipPosition"
+          {{ title }}
+        </button>
+
+        <ib-toggle-tip
+          v-if="hasToggleTip"
+          :is-open="isOpenToggleTip"
+          :title="toggleTipTitle"
+          @close="isOpenToggleTip = false"
         >
-        </ib-tooltip>
+          <slot name="toggleTipBody"></slot>
+          <template #buttons>
+            <slot name="toggleTipButtons"></slot>
+          </template>
+        </ib-toggle-tip>
+      </div>
+
+      <ib-icon-button
+        v-tooltip="tooltipIconText"
+        kind="white"
+        size="s"
+        @click="clickHandler"
+      >
+        <ion-icon :name="iconType"></ion-icon>
       </ib-icon-button>
     </div>
 
     <button
       v-else
+      v-tooltip:[tooltipPosition]="tooltipText"
       class="sorting-button"
       type="button"
-      :aria-label="sort"
       @click="clickHandler"
+      :aria-label="sort"
       :class="{
         active: currentTypeSort,
         disabled: disable,
@@ -41,12 +55,6 @@
     >
       {{ title }}
       <ib-icon v-if="iconType" :name="iconType"></ib-icon>
-      <ib-tooltip
-        v-if="tooltipText"
-        :text="tooltipText"
-        :position="tooltipPosition"
-      >
-      </ib-tooltip>
     </button>
   </div>
 </template>
@@ -54,9 +62,9 @@
 <script>
 import IbIcon from "../Icon.vue";
 import IbIconButton from "../IconButton/IconButton.vue";
-import IbTooltip from "../Tooltip/Tooltip.vue";
+import IbToggleTip from "../ToggleTip/ToggleTip.vue";
 import { typesSorting, typesSortingView } from "./constants.js";
-
+import { TooltipDirective as Tooltip } from "../../directives/tooltip/tooltip";
 export default {
   name: "IbSorting",
   props: {
@@ -69,6 +77,9 @@ export default {
     tooltipIconSorting: {
       type: String,
     },
+    toggleTipTitle: {
+      type: String,
+    },
     title: {
       type: String,
       default: "",
@@ -99,6 +110,7 @@ export default {
   },
   data() {
     return {
+      isOpenToggleTip: false,
       sortingTypes: typesSorting,
       sortingTypesView: typesSortingView,
       currentTypeSort: this.sort,
@@ -132,11 +144,29 @@ export default {
       }
       return null;
     },
+    tooltipIconText() {
+      if (this.currentTypeSort === this.sortingTypes.TYPE_ASC) {
+        return lang("sort_descending", this.LANG_COMPONENTS?.COMPONENT_SELECT);
+      } else if (this.currentTypeSort === this.sortingTypes.TYPE_DESC) {
+        return lang("reset_sorting", this.LANG_COMPONENTS?.COMPONENT_SELECT);
+      } else if (this.view !== this.sortingTypesView.GRID_VIEW) {
+        return lang("sort_ascending", this.LANG_COMPONENTS?.COMPONENT_SELECT);
+      }
+      return "";
+    },
+    hasToggleTip() {
+      return (
+        this.toggleTipTitle &&
+        this.$slots.toggleTipBody &&
+        this.$slots.toggleTipButtons
+      );
+    }
   },
+  directives: { Tooltip },
   components: {
     IbIcon,
     IbIconButton,
-    IbTooltip,
+    IbToggleTip,
   },
 };
 </script>

package/src/components/Tooltip/Tooltip.vue

@@ -54,16 +54,16 @@ export default {
   max-width: 240px;
   box-shadow: $ib-shadow-1;
 
-  &::after {
-    content: "";
-    width: 100%;
-    height: calc(100% + 5px);
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: -5px;
-    z-index: -1;
-  }
+  // &::after {
+  //   content: "";
+  //   width: 100%;
+  //   height: calc(100% + 5px);
+  //   position: absolute;
+  //   left: 0;
+  //   right: 0;
+  //   bottom: -5px;
+  //   z-index: -1;
+  // }
 
   &.ib-tooltip-large {
     box-shadow: $ib-shadow-2;
@@ -76,5 +76,99 @@ export default {
   p {
     @include Ib-H4-regular;
   }
+
+  // Its dublicate
+  &::before {
+    content: "";
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 4px 4px 0 4px;
+    border-color: #fff transparent transparent transparent;
+    position: absolute;
+  }
+
+  &.top-left {
+    &::before {
+      bottom: -4px;
+      right: 10px;
+    }
+  }
+  &.top-center {
+    &::before {
+      bottom: -4px;
+        right: 50%;
+        transform: translateX(50%);
+    }
+  }
+  &.top-right {
+    &::before {
+      bottom: -4px;
+        left: 10px;
+    }
+  }
+  &.right-top {
+    &::before {
+      left: -6px;
+        bottom: 10px;
+        transform: rotate(90deg);
+    }
+  }
+  &.right-center {
+    &::before {
+      left: -8px;
+        top: 50%;
+        transform: rotate(90deg) translateY(-50%);
+    }
+  }
+  &.right-bottom {
+    &::before {
+      top: 10px;
+        left: -6px;
+        transform: rotate(90deg);
+    }
+  }
+  &.bottom-left {
+    &::before {
+      top: -4px;
+        right: 10px;
+        transform: rotate(180deg);
+    }
+  }
+  &.bottom-center {
+    &::before {
+      top: -4px;
+        right: 50%;
+        transform: rotate(180deg) translateX(-50%);
+    }
+  }
+  &.bottom-right {
+    &::before {
+      top: -4px;
+        left: 10px;
+        transform: rotate(180deg);
+    }
+  }
+  &.left-top {
+    &::before {
+      right: -6px;
+        bottom: 10px;
+        transform: rotate(-90deg);
+    }
+  }
+  &.left-center {
+    &::before {
+      right: -8px;
+        top: 50%;
+        transform: rotate(-90deg) translateY(-50%);
+    }
+  }
+  &.left-bottom {
+    &::before {
+      top: 10px;
+        right: -6px;
+        transform: rotate(-90deg);
+    }
+  }
 }
 </style>

package/src/directives/tooltip/TooltipController.js

@@ -1,4 +1,5 @@
 import { createApp } from "vue";
+import { popoverPosition } from "../../components/Popover/constants";
 import IbTooltip from "../../components/Tooltip/Tooltip.vue";
 import generateUID from "../../helpers/generateUID";
 
@@ -25,8 +26,8 @@ export default class Tooltip {
     this.uuid = "tooltip_" + generateUID();
   }
 
-  createTooltip(el, text) {
-    if (!text.length) {
+  createTooltip(el, text, position) {
+    if (!text?.length) {
       return;
     }
 
@@ -46,6 +47,7 @@ export default class Tooltip {
       text: text,
       alwaysVisible: true,
       for: this.uuid,
+      class: this.getClassList(position),
     });
 
     this.tooltipInstance.mount(this.tooltipContainer);
@@ -53,19 +55,8 @@ export default class Tooltip {
     setTimeout(() => {
       if (this.tooltipContainer?.firstChild) {
         el.setAttribute("describedby", this.uuid);
-        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;
-        `;
 
+        const tooltipStyles = this.getPositionStyle(el, position);
         this.tooltipContainer.firstChild.setAttribute("style", tooltipStyles);
       }
     }, 100);
@@ -79,4 +70,112 @@ export default class Tooltip {
     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 + 5}px!important;
+          top: ${bottom + scrollTop + 5}px!important;`;
+        break;
+      case "bottomRight":
+        styles =
+          styles +
+          `left: ${left + width / 2 - 5}px!important;
+          top: ${bottom + scrollTop + 5}px!important;`;
+        break;
+      case "topLeft":
+        styles =
+          styles +
+          `left: ${right - tooltipWidth - width / 2 + 5}px!important;
+          top: ${top - tooltipHeight + scrollTop - 5}px!important;`;
+        break;
+      case "topRight":
+        styles =
+          styles +
+          `left: ${left + width / 2 - 5}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 + 9
+          }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 - 9}px!important;`;
+        break;
+      case "rightTop":
+        styles =
+          styles +
+          `left: ${right + 5}px!important;
+          top: ${
+            bottom - tooltipHeight - height / 2 + scrollTop + 9
+          }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 - 9}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/tooltip.js

@@ -3,7 +3,8 @@ import Tooltip from "./TooltipController";
 const tooltip = new Tooltip();
 const createTooltip = (el, binding) => {
   if (!tooltip.getTooltipContainer()) {
-    tooltip.createTooltip(el, binding.value);
+    const position = Object.keys(binding.modifiers)[0] || binding.arg;
+    tooltip.createTooltip(el, binding.value, position);
   }
 };
 
@@ -26,15 +27,33 @@ const destroyTooltip = (event, el) => {
   }
 };
 
+const attachTooltipListeners = (el, binding) => {
+  el.__tooltip_create = () => createTooltip(el, binding);
+  el.__tooltip_destroy = (e) => destroyTooltip(e, el);
+  el.__tooltip_remove_tooltip = () => tooltip.destroyTooltip();
+
+  el.addEventListener("mouseenter", el.__tooltip_create);
+  document.addEventListener("mousemove", el.__tooltip_destroy);
+  el.addEventListener("focus", el.__tooltip_create);
+  el.addEventListener("blur", el.__tooltip_remove_tooltip);
+};
+
+const removeTooltipListeners = (el) => {
+  el.removeEventListener("mouseenter", el.__tooltip_create);
+  document.removeEventListener("mousemove", el.__tooltip_destroy);
+  el.removeEventListener("focus", el.__tooltip_create);
+  el.removeEventListener("blur", el.__tooltip_remove_tooltip);
+};
+
 export const TooltipDirective = {
   mounted(el, binding) {
-    el.addEventListener("mouseenter", () => createTooltip(el, binding));
-    document.addEventListener("mousemove", (e) => destroyTooltip(e, el));
+    attachTooltipListeners(el, binding);
   },
-
-  beforeUnmount(el, binding) {
-    tooltip.destroyTooltip();
-    el.removeEventListener("mouseenter", () => createTooltip(el, binding));
-    document.removeEventListener("mousemove", (e) => destroyTooltip(e, el));
+  updated(el, binding) {
+    removeTooltipListeners(el);
+    attachTooltipListeners(el, binding);
+  },
+  beforeUnmount(el) {
+    removeTooltipListeners(el);
   },
 };

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

@@ -18,13 +18,59 @@ const Template = (args) => ({
   setup() {
     return { args };
   },
-  template: `<ib-button v-tooltip="'Tooltip Content'" v-bind="args">Hover to me</ib-button>`,
+  template: `
+    <div style="display:flex;flex-wrap:wrap;">
+      <div style="margin:20px">
+        <ib-button v-tooltip.bottomLeft="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(bottomLeft)</ib-button>
+      </div>
+      <div style="margin:20px">
+        <ib-button v-tooltip.bottomCenter="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(bottomCenter)</ib-button>
+      </div>
+      <div style="margin:20px">
+        <ib-button v-tooltip.bottomRight="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(bottomRight)</ib-button>
+      </div>
+
+      <div style="margin:20px">
+        <ib-button v-tooltip.topLeft="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(topLeft)</ib-button>
+      </div>
+      <div style="margin:20px">
+        <ib-button v-tooltip="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(default)</ib-button>
+      </div>
+      <div style="margin:20px">
+        <ib-button v-tooltip.topRight="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(topRight)</ib-button>
+      </div>
+
+      <div style="margin:20px">
+        <ib-button v-tooltip.leftTop="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(leftTop)</ib-button>
+      </div>
+      <div style="margin:20px">
+        <ib-button v-tooltip.leftCenter="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(leftCenter)</ib-button>
+      </div>
+      <div style="margin:20px">
+        <ib-button v-tooltip.leftBottom="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(leftBottom)</ib-button>
+      </div>
+
+
+      <div style="margin:20px">
+        <ib-button v-tooltip.rightTop="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(rightTop)</ib-button>
+      </div>
+      <div style="margin:20px">
+        <ib-button v-tooltip.rightCenter="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(rightCenter)</ib-button>
+      </div>
+      <div style="margin:20px">
+      <ib-button v-tooltip.rightBottom="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(rightBottom)</ib-button>
+    </div>
+    
+
+    </div>
+
+    `,
 });
 
 export const Default = Template.bind({});
 Default.decorators = [
   () => ({
     template:
-      '<div style="display: flex; align-items:center; justify-content: center; width: 400px; height: 400px; margin: 0 auto"><story /></div>',
+      '<div style="display: flex; align-items:center; justify-content: center; width: 600px; height: auto; margin: 0 auto"><story /></div>',
   }),
 ];