@avakhula/ui 0.0.207 → 0.0.208

package/src/components/Sorting/Sorting.vue

@@ -8,46 +8,32 @@
       }"
       v-if="view === sortingTypesView.TABLE_VIEW"
     >
-      <div>
-        <button
-          v-tooltip:[tooltipPosition]="tooltipText"
-          class="sorting-label"
-          type="button"
-          @click="isOpenToggleTip = true"
+      <button class="sorting-label" type="button">
+        {{ title }}
+        <ib-tooltip
+          v-if="tooltipText"
+          :text="tooltipText"
+          :position="tooltipPosition"
         >
-          {{ title }}
-        </button>
-
-        <ib-toggle-tip
-          v-if="hasToggleTip"
-          :is-open="isOpenToggleTip"
-          :title="toggleTipTitle"
-          @close="isOpenToggleTip = false"
-        >
-          <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"
-      >
+        </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"
+        >
+        </ib-tooltip>
       </ib-icon-button>
     </div>
 
     <button
       v-else
-      v-tooltip:[tooltipPosition]="tooltipText"
       class="sorting-button"
       type="button"
-      @click="clickHandler"
       :aria-label="sort"
+      @click="clickHandler"
       :class="{
         active: currentTypeSort,
         disabled: disable,
@@ -55,6 +41,12 @@
     >
       {{ title }}
       <ib-icon v-if="iconType" :name="iconType"></ib-icon>
+      <ib-tooltip
+        v-if="tooltipText"
+        :text="tooltipText"
+        :position="tooltipPosition"
+      >
+      </ib-tooltip>
     </button>
   </div>
 </template>
@@ -62,9 +54,9 @@
 <script>
 import IbIcon from "../Icon.vue";
 import IbIconButton from "../IconButton/IconButton.vue";
-import IbToggleTip from "../ToggleTip/ToggleTip.vue";
+import IbTooltip from "../Tooltip/Tooltip.vue";
 import { typesSorting, typesSortingView } from "./constants.js";
-import { TooltipDirective as Tooltip } from "../../directives/tooltip/tooltip";
+
 export default {
   name: "IbSorting",
   props: {
@@ -77,9 +69,6 @@ export default {
     tooltipIconSorting: {
       type: String,
     },
-    toggleTipTitle: {
-      type: String,
-    },
     title: {
       type: String,
       default: "",
@@ -110,7 +99,6 @@ export default {
   },
   data() {
     return {
-      isOpenToggleTip: false,
       sortingTypes: typesSorting,
       sortingTypesView: typesSortingView,
       currentTypeSort: this.sort,
@@ -144,29 +132,11 @@ 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,
-    IbToggleTip,
+    IbTooltip,
   },
 };
 </script>

package/src/components/Sorting/sorting.scss

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

package/src/components/Tooltip/Tooltip.vue

@@ -53,7 +53,17 @@ export default {
   padding: 10px;
   max-width: 240px;
   box-shadow: $ib-shadow-1;
-  z-index: 9999;
+
+  &::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;
@@ -66,99 +76,5 @@ 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,8 +1,12 @@
 <template>
   <li>
     <div
-      v-tooltip="showTooltip ? option.title : ''"
       class="tree-select-option"
+      tabindex="0"
+      role="option"
+      :aria-selected="isChecked"
+      :aria-label="option.title"
+      :id="'option-' + id"
       :class="{
         'tree-select-option-checked': isChecked,
         'tree-select-option-margin': hasVisibleChildren,
@@ -11,9 +15,11 @@
         'is-not-multiple': !isMultiple,
         'tree-select-option-toggle': this.isToggle && this.isMultiple,
       }"
-      tabindex="0"
       @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"
@@ -36,7 +42,9 @@
           ref="component"
           tabindex="-1"
           v-show="showInput"
+          disable-focus
           :is="component"
+          :aria-label="option.title"
           :name="actualName"
           :value="option.id"
           :id="'input' + id"
@@ -109,7 +117,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 { TooltipDirective as Tooltip } from "../../directives/tooltip/tooltip";
+import IbTooltip from "../Tooltip/Tooltip.vue";
 import multiLineOverflows from "../../helpers/multiLineOverflows";
 import {
   SPACE_KEY_CODE,
@@ -321,8 +329,8 @@ export default {
     IbIcon,
     List,
     IbIconButton,
+    IbTooltip,
   },
-  directives: { Tooltip },
 };
 </script>
 <style lang="scss">

package/src/components/TreeSelect/Select.vue

@@ -8,8 +8,9 @@
       :disabled="isLoading"
       :is-resizable="isResizable"
       :vertical="vertical"
-      @close="onClose"
       ref="dropdown"
+      @close="onClose"
+      @open="isOpen = true"
     >
       <template v-if="hasTrigger" v-slot:trigger>
         <slot v-bind:selected-count="selectedKeys.length" name="trigger"></slot>
@@ -23,8 +24,10 @@
           ref="combobox"
           @click.prevent
           @blur="onBlur"
+          @keyup.down="comboboxKeyupDown"
+          @keyup.up="comboboxKeyupDown"
           :aria-label="ariaLabel"
-          :aria-expanded="isOpened"
+          :aria-activedescendant="focusedOptionId"
           :class="{
             'tree-choice-opened': isOpened,
             'has-clear-button': !showClearButton,
@@ -61,22 +64,16 @@
       </template>
 
       <template v-slot:body>
-      <!-- here -->
         <div
           class="tree-drop"
           :class="{ 'not-tree-child': !hasTreeChildren }"
-          :style="treeDropPos"
+          :style="{
+            width: 'auto',
+            position: 'absolute',
+            left: -size.left + 'px',
+            right: -size.right + 'px',
+          }"
         >
-          <!-- :style="
-            !feetContentSize
-              ? {
-                  width: 'auto',
-                  position: 'absolute',
-                  left: -size.left + 'px',
-                  right: -size.right + 'px',
-                }
-              : ''
-          " -->
           <div
             v-if="isResizable"
             class="ib-dropdown-resizer ib-dropdown-resizer-left"
@@ -111,18 +108,25 @@
           <ib-input
             class="tree-search"
             v-if="showSearch"
+            ref="search"
             :show-icon="true"
             :value="filterString"
+            :aria-label="
+              searchPlaceholderText
+                ? searchPlaceholderText
+                : actualStrings.searchPlaceholder"
             :placeholder="
               searchPlaceholderText
                 ? searchPlaceholderText
                 : actualStrings.searchPlaceholder
             "
             @input="filter($event, actualOptions)"
+            @keyup.down="inputKeyupDown"
           ></ib-input>
 
           <list
             ref="list"
+            role="listbox"
             :class="{ 'tree-select-list': true, 'has-hierarchy': hasHierarchy }"
           >
             <div
@@ -191,10 +195,11 @@
                   :parent-auto-check="false"
                   :is-multiple="isMultiple"
                   :is-bookmarkable="false"
-                  @check="manageAll"
                   :uid="uid"
                   :only-end-nodes="onlyEndNodes"
                   :show-input="showInputs"
+                  @check="manageAll"
+                  @on-focus="(id) => focusedOptionId = id"
                 ></select-option>
               </template>
 
@@ -220,12 +225,13 @@
                     :parent-auto-check="parentAutoCheck"
                     :is-multiple="isMultiple"
                     :is-bookmarkable="isBookmarkable"
-                    @check="registerCheck"
-                    @toggle-bookmark="toggleBookmark"
                     :uid="uid"
                     :only-end-nodes="onlyEndNodes"
                     :html-title="htmlOptionTitle"
                     :show-input="showInputs"
+                    @check="registerCheck"
+                    @toggle-bookmark="toggleBookmark"
+                    @on-focus="(id) => focusedOptionId = id"
                   ></select-option>
                 </slot>
               </template>
@@ -273,9 +279,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    menuSize: {
-      type: [String, Number],
-    },
     initialSize: {
       left: 0,
       right: 0,
@@ -507,9 +510,11 @@ export default {
       actualOptions: [],
       actualBookmarkedOptions: {},
       selected: [],
+      isOpen: false,
       allOptionsIsChecked: true,
       hasTreeChildren: false,
       uid: `f${(~~(Math.random() * 1e8)).toString(16)}`,
+      focusedOptionId: '',
       actualStrings: {
         ...{
           searchPlaceholder: lang(
@@ -555,14 +560,28 @@ export default {
   methods: {
     onBlur() {
       setTimeout(() => {
-        if (!this.isOpened) {
+        if (!this.isOpen) {
           this.$emit("blur");
         }
       }, 200);
     },
+    inputKeyupDown() {
+      this.focusOnFirstOptions();
+    },
+    comboboxKeyupDown() {
+      if (this.showSearch) {
+        this.$refs.search.focus();
+        return;
+      }
+
+      this.focusOnFirstOptions();
+    },
     focus() {
       this.$refs.combobox.focus();
     },
+    focusOnFirstOptions() {
+      this.$refs.list.$el.querySelector('[tabindex]:not(hidden)').focus();
+    },
     startResizing(prop) {
       this.resizingProp = prop;
     },
@@ -867,6 +886,7 @@ export default {
       this.filter(this.filterString, options);
     },
     onClose() {
+      this.isOpen = false;
       this.filter("", this.actualOptions);
 
       if (this.isMultiple) {
@@ -884,22 +904,6 @@ 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,10 +199,6 @@ $option-checked-hover-bg: $blue-50;
       &.toggle-on {
         background-color: transparent;
       }
-
-      & + .option-label {
-        width: calc(100% - 65px);
-      }
     }
   }
 }

package/src/directives/tooltip/TooltipController.js

@@ -1,5 +1,4 @@
 import { createApp } from "vue";
-import { popoverPosition } from "../../components/Popover/constants";
 import IbTooltip from "../../components/Tooltip/Tooltip.vue";
 import generateUID from "../../helpers/generateUID";
 
@@ -26,8 +25,8 @@ export default class Tooltip {
     this.uuid = "tooltip_" + generateUID();
   }
 
-  createTooltip(el, text, position) {
-    if (!text?.length) {
+  createTooltip(el, text) {
+    if (!text.length) {
       return;
     }
 
@@ -47,135 +46,37 @@ export default class Tooltip {
       text: text,
       alwaysVisible: true,
       for: this.uuid,
-      class: this.getClassList(position),
     });
 
     this.tooltipInstance.mount(this.tooltipContainer);
 
     setTimeout(() => {
       if (this.tooltipContainer?.firstChild) {
-        el.setAttribute("describedby", this.uuid);
+        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);
   }
 
   destroyTooltip(el) {
-    el?.removeAttribute("describedby");
+    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];
-  }
 }