@avakhula/ui 0.1.13 → 0.1.15

package/src/components/Popover/Popover.vue

@@ -1,53 +1,81 @@
 <template>
-  <Transition>
-    <div v-show="isVisible" :class="classes">
-      <slot></slot>
-    </div>
-  </Transition>
+    <Teleport to="body" v-if="attachToBody">
+        <Transition>
+            <div ref="popover" v-show="isVisible" :class="classes">
+                <slot></slot>
+            </div>
+        </Transition>
+    </Teleport>
+
+    <Transition v-else>
+        <div ref="popover" v-show="isVisible" :class="classes">
+            <slot></slot>
+        </div>
+    </Transition>
 </template>
 
 <script>
-import { popoverPosition } from "./constants";
+import { computePosition, autoPlacement } from '@floating-ui/dom';
 
 export default {
   name: "IbPopover",
   props: {
     position: {
-      type: String,
-      default: popoverPosition.topCenter,
+      type: [String, Array],
+      default: 'top',
     },
     alwaysVisible: {
       type: Boolean,
       default: false,
     },
+    attachToBody: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
       parentNode: null,
       isVisible: this.alwaysVisible ? true : false,
+      activePosition: null,
     };
   },
   mounted() {
     this.$nextTick(() => {
       this.parentNode = this.$el.parentNode;
 
-      if (!this.parentNode) return;
-
-      if (getComputedStyle(this.parentNode).position !== "absolute") {
-        this.parentNode.style.position = "relative";
-      }
-
       if (!this.alwaysVisible) {
-        this.parentNode.addEventListener("focus", this.showPopover, true);
-        this.parentNode.addEventListener("blur", this.hidePopover, true);
-        this.parentNode.addEventListener("mouseover", this.showPopover, true);
-        this.parentNode.addEventListener("mouseleave", this.hidePopover, true);
+        this.parentNode?.addEventListener("focus", this.showPopover, true);
+        this.parentNode?.addEventListener("blur", this.hidePopover, true);
+        this.parentNode?.addEventListener("mouseover", this.showPopover);
+        this.parentNode?.addEventListener("mouseleave", this.hidePopover);
       }
     });
   },
   methods: {
     showPopover() {
+      if (this.isVisible) return;
       this.isVisible = true;
+
+      computePosition(
+          this.parentNode,
+          this.$refs.popover,
+          {
+            middleware: [
+              autoPlacement({
+                allowedPlacements: this.position,
+              })
+            ]
+          }
+        )
+          .then(({x, y, placement }) => {
+            this.activePosition = placement;
+
+            Object.assign(this.$refs.popover.style, {
+              left: `${x}px`,
+              top: `${y}px`,
+            });
+        });
     },
     hidePopover() {
       this.isVisible = false;
@@ -56,7 +84,7 @@ export default {
   computed: {
     classes() {
       const classList = ["ib-popover"];
-      classList.push(`ib-${this.position}`);
+      classList.push(`ib-${this.activePosition}`);
 
       if (this.isVisible) {
         classList.push("active");

package/src/components/Popover/popover.scss

@@ -1,5 +1,4 @@
 @import "../../assets/scss/typography.scss";
-@import "../../assets/scss/mixins/tooltip-position.scss";
 @import "../../assets/scss/variables/colors.scss";
 @import "../../assets/scss/variables/shadows.scss";
 
@@ -16,11 +15,32 @@ $shadow: $ib-shadow-3;
   color: $textColor;
   border-radius: 4px;
   box-shadow: $shadow;
-  top: auto;
-  bottom: auto;
-  left: auto;
-  right: auto;
-  @include TooltipPosition;
-  z-index: 100;
+  z-index: 9998;
   text-align: start;
+
+  &.ib {
+    &-right,
+    &-right-start,
+    &-right-end {
+      margin-left: 7px;
+    }
+
+    &-left,
+    &-left-start,
+    &-left-end {
+      margin-left: -7px;
+    }
+
+    &-top,
+    &-top-start,
+    &-top-end {
+      margin-top: -7px;
+    }
+
+    &-bottom,
+    &-bottom-start,
+    &-bottom-end {
+      margin-bottom: -7px;
+    }
+  }
 }

package/src/components/Sorting/Sorting.vue

@@ -8,33 +8,31 @@
       }"
       v-if="view === sortingTypesView.TABLE_VIEW"
     >
-      <div>
-        <button
-          class="sorting-label"
-          v-tooltip:[sortingTooltipPosition]="sortingTooltipContent"
-          :class="{
-            'sorting-label-active': isOpenToggleTip && hasToggleTip,
-            'has-action': tooltipText?.length || hasToggleTip
-          }"
-          type="button"
-          @click="isOpenToggleTip = !isOpenToggleTip"
-        >
-          {{ title }}
-        </button>
+      <button
+        class="sorting-label"
+        v-tooltip:[sortingTooltipPosition]="sortingTooltipContent"
+        :class="{
+          'sorting-label-active': isOpenToggleTip && hasToggleTip,
+          'has-action': tooltipText?.length || hasToggleTip
+        }"
+        type="button"
+        @click="isOpenToggleTip = !isOpenToggleTip"
+      >
+        {{ title }}
+      </button>
 
-        <ib-toggle-tip
-          v-if="hasToggleTip"
-          position="bottom-center"
-          :is-open="isOpenToggleTip"
-          :title="toggleTipTitle"
-          @close="isOpenToggleTip = false"
-        >
-          <slot name="toggleTipBody"></slot>
-          <template #buttons>
-            <slot name="toggleTipButtons"></slot>
-          </template>
-        </ib-toggle-tip>
-      </div>
+      <ib-toggle-tip
+        v-if="hasToggleTip"
+        position="bottom-center"
+        :is-open="isOpenToggleTip"
+        :title="toggleTipTitle"
+        @close="isOpenToggleTip = false"
+      >
+        <slot name="toggleTipBody"></slot>
+        <template #buttons>
+          <slot name="toggleTipButtons"></slot>
+        </template>
+      </ib-toggle-tip>
 
       <ib-icon-button
         v-if="!hideSortingButton"

package/src/components/SplitButton/SplitButton.vue

@@ -1,16 +1,20 @@
 <template>
   <div :class="classes">
-    <button
-      :disabled="disabled"
-      v-if="!isLink"
+
+    <router-link
+      v-if="isRouterLink"
       class="split-button-main"
+      :class="{ disabled }"
+      :disabled="disabled"
+      :to="mainButtonAttrs.to"
       v-bind="mainButtonAttrs"
+      @click="onClickLink"
     >
       {{ content }}
-    </button>
+    </router-link>
 
     <a
-      v-else
+      v-else-if="isLink"
       class="split-button-main"
       :class="{ disabled }"
       :disabled="disabled"
@@ -20,7 +24,16 @@
       {{ content }}
     </a>
 
-    <ib-dropdown-list :disabled="disabled" :closeOnClick="true">
+    <button
+      v-else
+      :disabled="disabled"
+      class="split-button-main"
+      v-bind="mainButtonAttrs"
+    >
+      {{ content }}
+    </button>
+
+    <ib-dropdown-list :disabled="disabled" :closeOnClick="true" :vertical="verticalPosition" :horizontal="verticalPosition === 'top' ? 'right' : 'left'">
       <template #trigger>
         <button :disabled="disabled" class="split-button-menu-trigger">
           <ib-icon name="chevron-down-outline" />
@@ -53,6 +66,10 @@ export default {
       type: String,
       default: splitButtonKindOptions.common,
     },
+    verticalPosition: {
+      type: String,
+      default: "bottom",
+    },
     disabled: {
       type: Boolean,
       default: false,
@@ -83,7 +100,20 @@ export default {
       }
     }
 
-    this.setActiveItem();
+    this.$nextTick(() => {
+      this.setActiveItem();
+    });
+
+    this.listObserver = new MutationObserver((mutationsList) => {
+        for (const mutation of mutationsList) {
+            if (mutation.type === "attributes" && mutation.attributeName === "disabled") {
+                this.mainButtonAttrs.disabled = mutation.target.disabled;
+                break;
+            }
+        }
+    });
+
+    this.listObserver.observe(this.$refs.list, { attributes: true, subtree: true });
   },
   data() {
     return {
@@ -91,7 +121,9 @@ export default {
       content: "",
       mainButtonAttrs: {},
       isLink: false,
+      isRouterLink: false,
       childList: [],
+      listObserver: null,
     };
   },
   components: {
@@ -100,14 +132,21 @@ export default {
   },
   methods: {
     setActiveItem() {
-      this.mainButtonAttrs = this.$slots.default()[this.activeElemIdx].props;
+      const attrs = this.$slots.default()[this.activeElemIdx].props;
 
+      this.mainButtonAttrs = attrs;
       if (this.mainButtonAttrs && "href" in this.mainButtonAttrs) {
         this.isLink = true;
       } else {
         this.isLink = false;
       }
 
+      if (this.mainButtonAttrs && "to" in this.mainButtonAttrs) {
+        this.isRouterLink = true;
+      } else {
+        this.isRouterLink = false;
+      }
+
       this.childList[this.activeElemIdx].classList.add("active");
       this.content = this.childList[this.activeElemIdx].textContent;
     },
@@ -131,6 +170,10 @@ export default {
       this.setActiveItem();
     },
   },
+  beforeUnmount() {
+    this.listObserver.disconnect();
+    this.listObserver = null;
+  }
 };
 </script>
 

package/src/components/SplitButton/SplitButtonItem.vue

@@ -1,6 +1,6 @@
 <template>
   <component
-    :is="href.length ? 'a' : 'button'"
+    :is="component"
     v-bind="attrs"
     class="ib-dropdown-item"
   >
@@ -15,6 +15,9 @@ export default {
       type: String,
       default: "",
     },
+    to: {
+      type: [String, Object],
+    }
   },
   computed: {
     attrs() {
@@ -23,8 +26,17 @@ export default {
         attrsList.href = this.href;
       }
 
+      if (this.to) {
+        attrsList.to = this.to;
+      }
+
       return attrsList;
     },
+    component() {
+      if (this.href.length) return "a";
+      if (this.to) return "router-link";
+      return "button";
+    }
   },
 };
 </script>

package/src/components/Tabs/Tab.vue

@@ -19,6 +19,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    icon: {
+      type: String,
+      required: false,
+    },
     initialized: {
       type: Boolean,
       default: false,

package/src/components/Tabs/Tabs.vue

@@ -14,6 +14,8 @@
             @click="selectTab(tab.id)"
             target="_self"
           >
+            <ib-icon class="tab-icon" v-if="tab.icon" :name="tab.icon" />
+
             {{ tab.title }}
           </a>
         </div>
@@ -32,8 +34,10 @@
   </div>
 </template>
 <script>
+import IbIcon from "../Icon.vue";
 import IbTabDropdown from "./TabDropdown.vue";
 import getHrefFromId from "../../helpers/getHrefFromID";
+
 export default {
   name: "IbTabs",
   props: {
@@ -108,6 +112,7 @@ export default {
   },
   components: {
     IbTabDropdown,
+    IbIcon,
   },
   emits: ["changeTab"]
 };

package/src/components/Tabs/tabs.scss

@@ -23,7 +23,7 @@
       background-color: $gray-300;
       z-index: -1;
     }
-    
+
     .tab-item {
       position: relative;
       margin: 0 15px;
@@ -65,6 +65,12 @@
           color: $neutral-900;
         }
 
+        .tab-icon {
+            margin-right: 3px;
+            color: inherit;
+            font-size: 16px;
+        }
+
         &::after {
           content: '';
           width: 100%;
@@ -154,4 +160,4 @@
       }
     }
   }
-}
+}

package/src/components/TagPill/TagPill.vue

@@ -18,6 +18,10 @@ export default {
       default: tagPillSTatuses.neutral,
       validator: (value) => Object.keys(tagPillSTatuses).includes(value),
     },
+    icon: {
+      type: String,
+      default: "",
+    },
     showIcon: {
       type: Boolean,
       default: false,
@@ -31,6 +35,8 @@ export default {
       return classList;
     },
     iconName() {
+      if (this.icon) return this.icon;
+
       switch (this.status) {
         case tagPillSTatuses.success:
           return "checkmark-outline";

package/src/components/Tooltip/Tooltip.vue

@@ -53,7 +53,7 @@ export default {
   padding: 10px;
   max-width: 240px;
   box-shadow: $ib-shadow-1;
-  z-index: 10002;
+  z-index: 10051;
 
   &.ib-tooltip-large {
     box-shadow: $ib-shadow-2;

package/src/components/TreeSelect/Option.vue

@@ -1,7 +1,7 @@
 <template>
   <li>
     <div
-      v-tooltip="showTooltip ? option.title : ''"
+      v-tooltip="showTooltip ? (option.isDisabled ? option.disableTooltip : option.title) : ''"
       class="tree-select-option"
       tabindex="0"
       role="option"
@@ -14,7 +14,9 @@
         active: option.isChildrenVisible,
         'is-multiple': isMultiple,
         'is-not-multiple': !isMultiple,
+        'has-icon': option.icon,
         'tree-select-option-toggle': this.isToggle && this.isMultiple,
+        'alphabetic-option': alphabeticStyle,
       }"
       @keydown.self="onKeydown"
       @focus="$emit('onFocus', `option-${id}`)"
@@ -46,7 +48,7 @@
           :aria-label="option.title"
           :name="actualName"
           :value="option.id"
-          :id="'input' + id"
+          :id="'input' + id + generateUID()"
           :is-checked="isChecked(option)"
           :disabled="option.isDisabled"
           :readonly="option.readonly"
@@ -63,13 +65,21 @@
               'bookmarkable-option-title ' + (isBookmarked ? 'bookmarked' : '')
             "
           >
-            <span class="option-label" v-if="!hasChildren">
-              {{ option.title }}
-              <ib-icon
-                name="star"
+            <div class="bookmarkable-option-content" v-if="!hasChildren">
+              <span class="option-label" >
+                {{ option.title }}
+              </span>
+
+              <ib-icon-button
                 @click.stop.prevent="$emit('toggle-bookmark', option)"
-              ></ib-icon>
-            </span>
+                kind="ghost"
+                v-tooltip="lang(isBookmarked ? 'unpin' : 'pin_to_top', 'select')"
+              >
+                <ib-icon
+                  :name="isBookmarked ? 'star' : 'star-outline'"
+                ></ib-icon>
+              </ib-icon-button>
+            </div>
 
             <span class="option-label" v-else>{{ option.title }}</span>
           </span>
@@ -84,7 +94,13 @@
         </template>
 
         <template v-else>
-          <span class="option-label">{{ option.title }}</span>
+          <span class="option-label">
+            <ib-icon
+              v-if="option.icon"
+              :name="option.icon"
+            ></ib-icon>
+            {{ option.title }}
+          </span>
         </template>
       </div>
 
@@ -118,6 +134,7 @@ 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 generateUID from "../../helpers/generateUID";
 import multiLineOverflows from "../../helpers/multiLineOverflows";
 import {
   SPACE_KEY_CODE,
@@ -168,16 +185,26 @@ export default {
       type: Boolean,
       default: false,
     },
+    alphabeticStyle: {
+      type: Boolean,
+      default: false
+    },
   },
   mounted() {
     // eslint-disable-next-line no-prototype-builtins
     if (this.option.hasOwnProperty("children") && this.option.children) {
       this.checkParent();
     }
+
+    if(this.option.showTooltipByDefault) {
+      this.showTooltip = true;
+    }
   },
   updated() {
     this.$nextTick(() => {
-      if (multiLineOverflows(this.$el.querySelector(".option-label"))) {
+      if(this.option.showTooltipByDefault) {
+        this.showTooltip = true;
+      } else if (multiLineOverflows(this.$el.querySelector(".option-label"))) {
         this.showTooltip = true;
       }
     });
@@ -185,6 +212,7 @@ export default {
   data() {
     return {
       showTooltip: false,
+      generateUID,
     };
   },
   methods: {
@@ -219,6 +247,11 @@ export default {
       this.check(this.option, value, true, checkChildren);
     },
     check(option, checkStatus, isDirectChild, checkChildren) {
+      if (!this.isMultiple && this.hasVisibleChildren) {
+        this.toggleChildrenVisibility();
+        return;
+      }
+
       this.$emit("check", option, checkStatus, isDirectChild);
       if (checkChildren) {
         option.children &&
@@ -271,12 +304,11 @@ export default {
     },
     isChecked(option) {
       if(this.hasChildren) {
-        if (!this.childrenSelectedCount) {
-        return false;
-      } else if (
-          this.childrenSelectedCount > 0 &&
-          this.countOfAllChildren > this.childrenSelectedCount
-        ) {
+        if (this.childrenSelectedCount === this.countOfAllChildren) {
+          return true;
+        }
+
+        if (this.childrenSelectedCount > 0 && this.countOfAllChildren > this.childrenSelectedCount) {
           return null; //null will trigger indeterminate stage
         }
       }