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

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

@@ -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,6 +122,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"
@@ -9,12 +9,15 @@
       :aria-label="option.title"
       :id="'option-' + id"
       :class="{
-        'tree-select-option-checked': isChecked(option),
+        'tree-select-option-checked': option.checked,
+        'tree-select-option-indeterminate': isChecked(option) === null,
         'tree-select-option-margin': hasVisibleChildren,
         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}`)"
@@ -23,7 +26,7 @@
         :disabled-focus="true"
         kind="ghost"
         class="toggle-children"
-        @click="toggleChildrenVisibility"
+        @click.prevent="toggleChildrenVisibility"
         v-show="hasVisibleChildren"
       >
         <ib-icon :name="iconName"></ib-icon>
@@ -46,7 +49,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 +66,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 +95,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 +135,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 +186,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 +213,7 @@ export default {
   data() {
     return {
       showTooltip: false,
+      generateUID,
     };
   },
   methods: {
@@ -219,6 +248,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 &&
@@ -246,12 +280,11 @@ export default {
         allChildrenSelected =
           childrenSelectedCount >= this.option.children.length;
 
-      if (
-        (!this.option.checked && allChildrenSelected && this.parentAutoCheck) ||
-        (this.option.checked && !allChildrenSelected)
-      ) {
-        this.toggle(!this.option.checked, false);
-      }
+        if (!this.option.checked && allChildrenSelected || this.option.checked && !allChildrenSelected) {
+            if (this.parentAutoCheck) {
+                this.toggle(!this.option.checked, false);
+            }
+        }
     },
     calculateChildren(option, filter, checkNested = false) {
       let count = 0;
@@ -271,13 +304,14 @@ export default {
     },
     isChecked(option) {
       if(this.hasChildren) {
-        if (!this.childrenSelectedCount) {
-        return false;
-      } else if (
-          this.childrenSelectedCount > 0 &&
-          this.countOfAllChildren > this.childrenSelectedCount
+
+      const childrenSelectedCount = this.childrenSelectedCount;
+
+        if (childrenSelectedCount > 0 && this.countOfAllChildren > childrenSelectedCount
+            || (!childrenSelectedCount && this.option.checked && !this.parentAutoCheck)
+            || (this.countOfAllChildren == childrenSelectedCount && !this.option.checked && !this.parentAutoCheck)
         ) {
-          return null; //null will trigger indeterminate stage
+            return null;
         }
       }