@avakhula/ui 0.0.505 → 0.0.510-alpha-spa.1

package/src/components/Popover/popover.scss

@@ -1,6 +1,6 @@
-@import "../../assets/scss/typography.scss";
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/variables/shadows.scss";
+@use "../../assets/scss/typography.scss" as *;
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/variables/shadows.scss" as *;
 
 $background: $white;
 $textColor: $neutral-900;
@@ -15,7 +15,7 @@ $shadow: $ib-shadow-3;
   color: $textColor;
   border-radius: 4px;
   box-shadow: $shadow;
-  z-index: 1000;
+  z-index: 9998;
   text-align: start;
 
   &.ib {

package/src/components/ProgressBar/ProgressBar.vue

@@ -67,5 +67,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./progressBar.scss";
+@use "./progressBar.scss" as *;
 </style>

package/src/components/ProgressBar/progressBar.scss

@@ -1,4 +1,4 @@
-@import "../../assets/scss/variables/colors.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
 
 $progress-bar-bg: $gray-300;
 $progress-bar-gradient: linear-gradient(

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"
@@ -212,5 +210,5 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "./sorting.scss";
+@use "./sorting.scss" as *;
 </style>

package/src/components/Sorting/sorting.scss

@@ -1,7 +1,7 @@
-@import "../../assets/scss/typography.scss";
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/reset.scss";
-@import "../../assets/scss/mixins.scss";
+@use "../../assets/scss/typography.scss" as *;
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/reset.scss" as *;
+@use "../../assets/scss/mixins.scss" as *;
 
 button {
   padding: 0;
@@ -87,4 +87,4 @@ button {
       @include focus(2px);
     }
   }
-}
+}

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,9 +170,13 @@ export default {
       this.setActiveItem();
     },
   },
+  beforeUnmount() {
+    this.listObserver.disconnect();
+    this.listObserver = null;
+  }
 };
 </script>
 
 <style lang="scss">
-@import "./splitButton.scss";
+@use "./splitButton.scss" as *;
 </style>

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,12 +26,21 @@ 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>
 <style lang="scss" scoped>
-@import "../../assets/scss/mixins/dropdown-list-item.scss";
+@use "../../assets/scss/mixins/dropdown-list-item.scss" as *;
 @include DropdownListItem;
 </style>

package/src/components/SplitButton/splitButton.scss

@@ -1,6 +1,6 @@
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/typography.scss";
-@import "../../assets/scss/mixins.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/typography.scss" as *;
+@use "../../assets/scss/mixins.scss" as *;
 
 $split-button-color: $white;
 $split-button-disabled-color: $neutral-500;

package/src/components/StatusIndicator/StatusIndicator.vue

@@ -24,8 +24,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss//typography.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss//typography.scss" as *;
 
 @keyframes loader {
   from {

package/src/components/Table/Cells/Cell.vue

@@ -43,8 +43,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../../assets/scss/typography.scss";
-@import "../../../assets/scss/variables/colors.scss";
+@use "../../../assets/scss/typography.scss" as *;
+@use "../../../assets/scss/variables/colors.scss" as *;
 
 .ib-cell {
   @include Ib-H4-regular;

package/src/components/Table/Row.vue

@@ -11,7 +11,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../assets/scss/variables/colors.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
 .ib-tr {
   .ib-cell {
     background-color: $white;

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/TabDropdown.vue

@@ -89,5 +89,5 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "./tabs.scss";
+@use "./tabs.scss" as *;
 </style>

package/src/components/Tabs/Tabs.vue

@@ -3,19 +3,23 @@
     <ul class="tabs-list">
       <li class="tab-item" v-for="(tab, index) in tabs" :key="index">
         <div v-if="!tab.name" class="wrapper-tab-link">
-          <a
+          <component
+            :is="setHref ? 'a' : 'div'"
+            v-bind="setHref ? { href: createHref(tab.id), target: '_self' } : {}"
             class="tab-link"
             :class="{
               active: selectedTab === tab.id,
               disabled: tab.disabled,
             }"
-            :href="createHref(tab.id)"
             :tabindex="tab.disabled ? -1 : 0"
             @click="selectTab(tab.id)"
-            target="_self"
           >
-            {{ tab.title }}
-          </a>
+            <ib-icon class="tab-icon" v-if="tab.icon" :name="tab.icon" />
+
+            <template v-if="showTitle">
+              {{ tab.title }}
+            </template>
+          </component>
         </div>
         <ib-tab-dropdown
           v-else
@@ -32,15 +36,25 @@
   </div>
 </template>
 <script>
+import IbIcon from "../Icon.vue";
 import IbTabDropdown from "./TabDropdown.vue";
 import getHrefFromId from "../../helpers/getHrefFromID";
+
 export default {
   name: "IbTabs",
   props: {
+    showTitle: {
+      type: Boolean,
+      default: true,
+    },
     selectedTabId: {
       type: String,
       default: "",
     },
+    setHref: {
+      type: Boolean,
+      default: false,
+    }
   },
   data() {
     return {
@@ -108,10 +122,11 @@ export default {
   },
   components: {
     IbTabDropdown,
+    IbIcon,
   },
   emits: ["changeTab"]
 };
 </script>
 <style lang="scss" scoped>
-@import "./tabs.scss";
+@use "./tabs.scss" as *;
 </style>

package/src/components/Tabs/tabs.scss

@@ -1,7 +1,7 @@
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/typography.scss";
-@import "../../assets/scss/mixins.scss";
-@import "../../assets/scss/reset.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/typography.scss" as *;
+@use "../../assets/scss/mixins.scss" as *;
+@use "../../assets/scss/reset.scss" as *;
 
 .tabs {
 
@@ -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";
@@ -50,8 +56,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/typography.scss";
-@import "../../assets/scss/variables/colors.scss";
+@use "../../assets/scss/typography.scss" as *;
+@use "../../assets/scss/variables/colors.scss" as *;
 
 $neutral-tag-bg: $gray-100;
 $neutral-tag-color: $neutral-600;

package/src/components/ToggleTip/ToggleTip.vue

@@ -95,7 +95,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "./toggleTip.scss";
+@use "./toggleTip.scss" as *;
 </style>
 
 <style lang="scss" scoped>

package/src/components/ToggleTip/toggleTip.scss

@@ -1,7 +1,7 @@
-@import "../../assets/scss/typography.scss";
-@import "../../assets/scss/mixins/tooltip-position.scss";
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/variables/shadows.scss";
+@use "../../assets/scss/typography.scss" as *;
+@use "../../assets/scss/mixins/tooltip-position.scss" as *;
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/variables/shadows.scss" as *;
 
 $background: $white;
 $textColor: $neutral-900;
@@ -19,7 +19,7 @@ $shadow: $ib-shadow-3;
   bottom: auto;
   left: auto;
   right: auto;
-  z-index: 100; 
+  z-index: 100;
   @include TooltipPosition;
 
   &-head {

package/src/components/Tooltip/Tooltip.vue

@@ -45,15 +45,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/typography.scss";
-@import "../../assets/scss/variables/shadows.scss";
-@import "../../assets/scss/mixins.scss";
+@use "../../assets/scss/typography.scss" as *;
+@use "../../assets/scss/variables/shadows.scss" as *;
+@use "../../assets/scss/mixins.scss" as *;
 
 .ib-tooltip {
   padding: 10px;
   max-width: 240px;
   box-shadow: $ib-shadow-1;
-  z-index: 10002;
+  z-index: 10051;
 
   &.ib-tooltip-large {
     box-shadow: $ib-shadow-2;