@avakhula/ui 0.0.213 → 0.0.215

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.213",
+  "version": "0.0.215",
   "main": "dist/index.js",
   "module": "dist/index.umd.cjs",
   "source": "src/index.js",
@@ -29,16 +29,16 @@
     "@babel/core": "^7.20.7",
     "@babel/preset-env": "^7.21.4",
     "@rushstack/eslint-patch": "^1.1.4",
-    "@storybook/addon-a11y": "^7.3.2",
-    "@storybook/addon-actions": "^7.3.2",
-    "@storybook/addon-docs": "^7.3.2",
-    "@storybook/addon-essentials": "^7.3.2",
-    "@storybook/addon-interactions": "^7.3.2",
-    "@storybook/addon-links": "^7.3.2",
-    "@storybook/addon-mdx-gfm": "^7.3.2",
+    "@storybook/addon-a11y": "^7.1.0",
+    "@storybook/addon-actions": "^7.1.0",
+    "@storybook/addon-docs": "^7.1.0",
+    "@storybook/addon-essentials": "^7.1.0",
+    "@storybook/addon-interactions": "^7.1.0",
+    "@storybook/addon-links": "^7.1.0",
+    "@storybook/addon-mdx-gfm": "^7.1.0",
     "@storybook/testing-library": "^0.2.0",
-    "@storybook/vue3": "^7.3.2",
-    "@storybook/vue3-vite": "^7.3.2",
+    "@storybook/vue3": "^7.1.0",
+    "@storybook/vue3-vite": "^7.1.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitest/coverage-c8": "^0.28.4",
     "@vue/eslint-config-prettier": "^7.0.0",
@@ -56,7 +56,7 @@
     "react-dom": "^18.2.0",
     "sass": "^1.57.1",
     "sass-loader": "^13.2.0",
-    "storybook": "^7.3.2",
+    "storybook": "^7.1.0",
     "vite": "^4.0.0",
     "vitest": "^0.28.4",
     "vue-loader": "^16.8.3",

package/src/components/Accordion/Accordion.scss

@@ -76,10 +76,13 @@ $content-bg: $gray-50;
   .accordion-content {
     border-radius: 0 0 4px 4px;
     border: 1px solid $content-border-color;
-    padding:10px 15px 15px;
     overflow: hidden;
     transition: height 0.3s, padding-top 0.3s, padding-bottom 0.3s;
     background-color: $content-bg;
+    
+    .accordion-content-wrapper {
+      padding: 10px 15px 15px;
+    }
   }
 
   &.active {

package/src/components/Accordion/Accordion.vue

@@ -25,7 +25,9 @@
         :id="'accordion-section-' + uuid"
         :aria-labelledby="'accordion' + uuid"
       >
-        <slot name="content"></slot>
+        <div class="accordion-content-wrapper">
+          <slot name="content"></slot>
+        </div>
       </div>
     </Transition>
   </div>

package/src/components/Alert/alert.scss

@@ -147,6 +147,7 @@ $alert-success-secondary-color: $green-50;
     margin-right: 5px;
   }
 
+  &-error,
   &-alert {
     border-left-color: $alert-alert-primary-color;
     background-color: $alert-alert-secondary-color;

package/src/components/Alert/constants.js

@@ -1,5 +1,6 @@
 export const alertTypeOptions = {
   alert: "alert",
+  error: "error",
   warning: "warning",
   info: "info",
   success: "success",

package/src/components/Avatar/Avatar.vue

@@ -1,5 +1,10 @@
 <template>
-  <img v-if="src && !userAvatar" :class="classList" :src="src" :alt="name" />
+  <img
+    v-if="src && !userAvatar"
+    :class="classList"
+    :src="src"
+    :alt="firstName + '' + lastName"
+  />
 
   <div
     v-else-if="src && userAvatar"
@@ -10,7 +15,7 @@
     }"
   ></div>
 
-  <div v-else-if="validateName" class="empty-avatar" :class="classList">
+  <div v-else-if="!validateName" class="empty-avatar" :class="classList">
     <ib-icon name="camera-outline" />
   </div>
 
@@ -26,7 +31,11 @@ import { avatarSizes } from "./constants";
 export default {
   name: "IbAvatar",
   props: {
-    name: {
+    firstName: {
+      type: String,
+      default: "",
+    },
+    lastName: {
       type: String,
       default: "",
     },
@@ -49,14 +58,13 @@ export default {
       return classList;
     },
     validateName() {
-      return this.name?.trim().split(" ").length < 2;
+      return (
+        this.firstName?.trim().length !== 0 &&
+        this.lastName?.trim().length !== 0
+      );
     },
     initials() {
-      const words = this.name.split(" ");
-
-      return words.length === 1
-        ? (words[0][0] + words[0][1]).toUpperCase()
-        : (words[0][0] + words[1][0]).toUpperCase();
+      return this.firstName[0].toUpperCase() + this.lastName[0].toUpperCase();
     },
   },
   components: {

package/src/components/Form/Input/Input.vue

@@ -250,6 +250,9 @@ export default {
     value(newVal) {
       this.actualValue = newVal;
     },
+    modelValue(newVal) {
+      this.actualValue = newVal;
+    },
     disabled(newVal) {
       this.$globalEvents.$emit(`label:disabled:${this.id}`, newVal);
     },

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.langComponents?.COMPONENT_SELECT);
+      } else if (this.currentTypeSort === this.sortingTypes.TYPE_DESC) {
+        return lang("reset_sorting", this.langComponents?.COMPONENT_SELECT);
+      } else if (this.view !== this.sortingTypesView.GRID_VIEW) {
+        return lang("sort_ascending", this.langComponents?.COMPONENT_SELECT);
+      }
+      return "";
+    },
+    hasToggleTip() {
+      return (
+        this.toggleTipTitle &&
+        this.$slots.toggleTipBody &&
+        this.$slots.toggleTipButtons
+      );
+    },
   },
+  directives: { Tooltip },
   components: {
     IbIcon,
     IbIconButton,
-    IbTooltip,
+    IbToggleTip,
   },
 };
 </script>

package/src/components/Sorting/sorting.scss

@@ -22,7 +22,7 @@ button {
 
     .sorting-label {
       border: solid 2px transparent;
-      padding: 0 4px;
+      padding: 0 2px;
       border-radius: 4px;
       margin-right: 2px;
       @include Ib-H4-medium;

package/src/components/Tooltip/Tooltip.vue

@@ -53,17 +53,7 @@ export default {
   padding: 10px;
   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;
-  }
+  z-index: 9999;
 
   &.ib-tooltip-large {
     box-shadow: $ib-shadow-2;
@@ -76,5 +66,99 @@ export default {
   p {
     @include Ib-H4-regular;
   }
+
+  &::before {
+    content: "";
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 4px 4px 0 4px;
+    border-color: #fff transparent transparent transparent;
+    position: absolute;
+    transform: none !important;
+  }
+
+  &.top-left {
+    &::before {
+      bottom: -4px;
+      right: 10px;
+    }
+  }
+  &.top-center {
+    &::before {
+      bottom: -4px;
+      right: 50%;
+      transform: translateX(50%) !important;
+    }
+  }
+  &.top-right {
+    &::before {
+      bottom: -4px;
+      left: 10px;
+    }
+  }
+  &.right-top {
+    &::before {
+      left: -6px;
+      bottom: 10px;
+      transform: rotate(90deg) !important;
+    }
+  }
+  &.right-center {
+    &::before {
+      left: -8px;
+      top: 50%;
+      transform: rotate(90deg) translateY(-50%) !important;
+    }
+  }
+  &.right-bottom {
+    &::before {
+      top: 10px;
+      left: -6px;
+      transform: rotate(90deg) !important;
+    }
+  }
+  &.bottom-left {
+    &::before {
+      top: -4px;
+      right: 10px;
+      transform: rotate(180deg) !important;
+    }
+  }
+  &.bottom-center {
+    &::before {
+      top: -4px;
+      right: 50%;
+      transform: rotate(180deg) translateX(-50%) !important;
+    }
+  }
+  &.bottom-right {
+    &::before {
+      top: -4px;
+      left: 10px;
+      transform: rotate(180deg) !important;
+    }
+  }
+  &.left-top {
+    &::before {
+      right: -6px;
+      bottom: 10px;
+      transform: rotate(-90deg) !important;
+    }
+  }
+  &.left-center {
+    &::before {
+      right: -8px;
+      top: 50%;
+      transform: rotate(-90deg) translateY(-50%) !important;
+    }
+  }
+  &.left-bottom {
+    &::before {
+      top: 10px;
+      right: -6px;
+      transform: rotate(-90deg) !important;
+    }
+  }
 }
 </style>

package/src/components/TreeSelect/Option.vue

@@ -1,6 +1,7 @@
 <template>
   <li>
     <div
+      v-tooltip="showTooltip ? option.title : ''"
       class="tree-select-option"
       tabindex="0"
       role="option"
@@ -18,8 +19,6 @@
       @keydown.self="onKeydown"
       @focus="$emit('onFocus', `option-${id}`)"
     >
-      <ib-tooltip v-if="showTooltip" :text="option.title"></ib-tooltip>
-
       <ib-icon-button
         :disabled-focus="true"
         kind="ghost"
@@ -117,7 +116,7 @@ import Toggle from "../Form/Toggle/Toggle.vue";
 import List from "../List.vue";
 import IbIcon from "../Icon.vue";
 import IbIconButton from "../IconButton/IconButton.vue";
-import IbTooltip from "../Tooltip/Tooltip.vue";
+import { TooltipDirective as Tooltip } from "../../directives/tooltip/tooltip";
 import multiLineOverflows from "../../helpers/multiLineOverflows";
 import {
   SPACE_KEY_CODE,
@@ -329,8 +328,8 @@ export default {
     IbIcon,
     List,
     IbIconButton,
-    IbTooltip,
   },
+  directives: { Tooltip },
 };
 </script>
 <style lang="scss">

package/src/components/TreeSelect/Select.vue

@@ -26,7 +26,6 @@
           @blur="onBlur"
           @keyup.down="comboboxKeyupDown"
           @keyup.up="comboboxKeyupDown"
-          :id="id"
           :aria-label="ariaLabel"
           :aria-activedescendant="focusedOptionId"
           :class="{
@@ -68,12 +67,7 @@
         <div
           class="tree-drop"
           :class="{ 'not-tree-child': !hasTreeChildren }"
-          :style="{
-            width: 'auto',
-            position: 'absolute',
-            left: -size.left + 'px',
-            right: -size.right + 'px',
-          }"
+          :style="treeDropPos"
         >
           <div
             v-if="isResizable"
@@ -280,6 +274,9 @@ export default {
       type: Boolean,
       default: false,
     },
+    menuSize: {
+      type: [String, Number],
+    },
     initialSize: {
       left: 0,
       right: 0,
@@ -905,6 +902,22 @@ export default {
     hasEmptyMessage() {
       return !!this.$slots.emptyMessage;
     },
+    treeDropPos() {
+      if (this.menuSize) {
+        return {
+          width: this.menuSize + "px",
+          maxWidth: this.menuSize + "px",
+          minWidth: this.menuSize + "px",
+        };
+      }
+
+      return {
+        width: "auto",
+        position: "absolute",
+        left: -this.size.left + "px",
+        right: -this.size.right + "px",
+      };
+    },
     hasHierarchy() {
       return this.actualOptions.some((option) => {
         return option.children;

package/src/components/TreeSelect/scss/option.scss

@@ -199,6 +199,10 @@ $option-checked-hover-bg: $blue-50;
       &.toggle-on {
         background-color: transparent;
       }
+
+      & + .option-label {
+        width: calc(100% - 65px);
+      }
     }
   }
 }

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("aria-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 + 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];
+  }
 }