@avakhula/ui 0.0.503 → 0.0.505-alpha-spa.2

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,6 +24,15 @@
       {{ content }}
     </a>
 
+    <button
+      v-else
+      :disabled="disabled"
+      class="split-button-main"
+      v-bind="mainButtonAttrs"
+    >
+      {{ content }}
+    </button>
+
     <ib-dropdown-list :disabled="disabled" :closeOnClick="true">
       <template #trigger>
         <button :disabled="disabled" class="split-button-menu-trigger">
@@ -83,7 +96,9 @@ export default {
       }
     }
 
-    this.setActiveItem();
+    this.$nextTick(() => {
+      this.setActiveItem();
+    });
   },
   data() {
     return {
@@ -91,6 +106,7 @@ export default {
       content: "",
       mainButtonAttrs: {},
       isLink: false,
+      isRouterLink: false,
       childList: [],
     };
   },
@@ -100,14 +116,22 @@ export default {
   },
   methods: {
     setActiveItem() {
-      this.mainButtonAttrs = this.$slots.default()[this.activeElemIdx].props;
+      const attrs = this.$slots.default()[this.activeElemIdx].props;
+      delete attrs.disabled;
 
+      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;
     },

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/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}`)"
@@ -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>
 
@@ -168,16 +184,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;
       }
     });
@@ -219,6 +245,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 &&

package/src/components/TreeSelect/Select.vue

@@ -10,9 +10,12 @@
     }"
   >
     <ib-dropdown
-      :disabled="isLoading"
+      :disabled="isLoading || disable"
       :is-resizable="isResizable"
       :vertical="verticalVal"
+      :class="{
+        disable: disable
+      }"
       ref="dropdown"
       @close="onClose"
       @open="onOpen"
@@ -41,7 +44,7 @@
         >
 
           <template v-if="hasTriggerContent">
-            <slot v-bind:selected-count="selectedKeys.length" name="triggerContent"></slot>
+            <slot v-bind:selected-count="selectedKeys.length" v-bind:is-open="isOpened" name="triggerContent"></slot>
           </template>
 
           <template v-else>
@@ -95,34 +98,17 @@
             v-if="isResizable"
             class="ib-dropdown-resizer ib-dropdown-resizer-right"
             @mousedown="startResizing('right')"
+            v-tooltip.rightCenter="lang('resize_list', 'select')"
           ></div>
-          <list
-            :class="{ 'has-hierarchy': hasHierarchy }"
-            v-if="Object.keys(actualBookmarkedOptions).length > 0"
-          >
-            <select-option
-              :key="'bookmark' + option.id"
-              v-for="option in actualBookmarkedOptions"
-              :option="option"
-              :parent-auto-check="false"
-              :is-multiple="isMultiple"
-              :is-bookmarkable="true"
-              :is-bookmarked="true"
-              @check="registerCheck"
-              @toggle-bookmark="toggleBookmark"
-              :uid="uid"
-              :only-end-nodes="onlyEndNodes"
-              :html-title="htmlOptionTitle"
-              :show-input="showInputs"
-            ></select-option>
-          </list>
 
           <ib-input
             class="tree-search"
             v-if="showSearch"
             ref="search"
+            autocomplete="off"
             :show-icon="true"
             :value="filterString"
+            :debounce="searchDebounce"
             :aria-label="
               searchPlaceholderText
                 ? searchPlaceholderText
@@ -139,7 +125,11 @@
           <list
             ref="list"
             role="listbox"
-            :class="{ 'tree-select-list': true, 'has-hierarchy': hasHierarchy }"
+            :class="{
+              'tree-select-list': true,
+              'has-hierarchy': hasHierarchy,
+              'alphabetic-list': alphabeticStyle,
+            }"
           >
             <div
               v-if="
@@ -181,10 +171,30 @@
               ></select-option>
             </template>
 
+            <template  v-if="Object.keys(actualBookmarkedOptions).length > 0">
+              <select-option
+                :key="'bookmark' + option.id"
+                v-for="option in actualBookmarkedOptions"
+                class="bookmarked-option"
+                :option="option"
+                :parent-auto-check="false"
+                :is-multiple="isMultiple"
+                :is-bookmarkable="true"
+                :is-bookmarked="true"
+                @check="registerCheck"
+                @toggle-bookmark="toggleBookmark"
+                :uid="uid"
+                :only-end-nodes="onlyEndNodes"
+                :html-title="htmlOptionTitle"
+                :show-input="showInputs"
+              ></select-option>
+            </template>
+
             <template v-if="!requiredDependencyNotFilled">
               <template
                 v-if="
                   allOptions &&
+                  !alphabeticStyle &&
                   isMultiple &&
                   visibleOptionsCount &&
                   !requiredDependencyNotFilled
@@ -210,6 +220,7 @@
                   :uid="uid"
                   :only-end-nodes="onlyEndNodes"
                   :show-input="showInputs"
+                  :alphabetic-style="alphabeticStyle"
                   @check="manageAll"
                   @on-focus="(id) => focusedOptionId = id"
                 ></select-option>
@@ -241,6 +252,7 @@
                     :only-end-nodes="onlyEndNodes"
                     :html-title="htmlOptionTitle"
                     :show-input="showInputs"
+                    :alphabetic-style="alphabeticStyle"
                     @check="registerCheck"
                     @toggle-bookmark="toggleBookmark"
                     @on-focus="(id) => focusedOptionId = id"
@@ -248,6 +260,8 @@
                 </slot>
               </template>
             </template>
+
+            <div v-if="infiniteLoader" ref="infinityLoader"></div>
           </list>
         </div>
       </template>
@@ -266,6 +280,8 @@ import IbIcon from "../Icon.vue";
 import IbIconButton from "../IconButton/IconButton.vue";
 import IbAlert from "../Alert/Alert.vue";
 import List from "../List.vue";
+import InfinityLoaderMixin from "./mixins/InfinityLoaderMixin";
+import { TooltipDirective as Tooltip } from "../../directives/tooltip/tooltip";
 
 function copy(data) {
     return JSON.parse(JSON.stringify(data));
@@ -274,8 +290,13 @@ function copy(data) {
 export default {
   name: "IbTreeSelect",
   inject: ["LANG_COMPONENTS"],
+  mixins: [InfinityLoaderMixin],
   props: {
     classList: [String, Array],
+    keywordHighlighter: {
+      type: Boolean,
+      default: true,
+    },
     placeholder: {
       type: String,
       default: "",
@@ -315,6 +336,7 @@ export default {
       },
     },
     options: {
+      type: [Array, Function],
       default() {
         return [];
       },
@@ -420,6 +442,18 @@ export default {
       type: Boolean,
       default: false,
     },
+    disable: {
+      type: Boolean,
+      default: false
+    },
+    searchDebounce: {
+      type: Number,
+      default: 0,
+    },
+    alphabeticStyle: {
+      type: Boolean,
+      default: false
+    },
   },
   emits: [
     "close",
@@ -429,6 +463,7 @@ export default {
     "resize",
     "submit",
     "clearValue",
+    "toggle-bookmarked-option",
     "update:modelValue",
   ],
   watch: {
@@ -462,7 +497,7 @@ export default {
     },
     options: {
       handler(newOptions) {
-        this.initialOptions = copy(newOptions);
+        this.initialOptions  = typeof newOptions === "function" ? newOptions : copy(newOptions);
       },
       deep: true,
     },
@@ -522,7 +557,7 @@ export default {
       const filterString = this.filterString.toLowerCase().trim();
       this.filterFunc.call(this, options, filterString);
 
-      if (filterString) {
+      if (filterString && this.keywordHighlighter) {
         this.marker.mark(filterString);
       }
     };
@@ -667,7 +702,7 @@ export default {
     },
     filter(filterString, options) {
       this.filterString = filterString;
-      this.$emit("search", { search: this.filterString });
+      this.$emit("search", this.filterString);
       this.defaultFilter(options);
     },
     setPreparedValues(opt) {
@@ -736,7 +771,6 @@ export default {
                 typeof option.visible === "undefined" ? true : option.visible;
               option.visible = option.initiallyVisible;
               option.readonly = option.readonly ? true : false;
-              option.isDisabled = false;
 
               option.checked = this.isMultiple
                 ? this.val !== null &&
@@ -792,7 +826,8 @@ export default {
           visibleOptionsCount += visibleChildrenCount;
 
           if (visibleChildrenCount) {
-              option.isChildrenVisible = !!filterString || Boolean(Object.keys(this.actualBookmarkedOptions).length);
+            // remove?? this is auto open all childs after add or remove to bookmarks
+              // option.isChildrenVisible = !!filterString || Boolean(Object.keys(this.actualBookmarkedOptions).length);
               option.isDisabled = visibleChildrenCount < option.children.length && !this.isBookmarkable;
           }
 
@@ -1026,7 +1061,7 @@ export default {
       );
     },
     showSearch() {
-      return this.useSearch || this.optionsCount > 10;
+      return this.useSearch || (this.optionsCount > 10 && !this.alphabeticStyle);
     },
     arrayOfOptions() {
       return this.getArrayOptions(this.actualOptions);
@@ -1073,6 +1108,9 @@ export default {
     List,
     "select-option": Option,
   },
+  directives: {
+    Tooltip,
+  },
   beforeUnmount() {
     document.removeEventListener("mousemove", this.onResize);
     document.removeEventListener("mouseup", this.endResizing);
@@ -1081,4 +1119,14 @@ export default {
 </script>
 <style lang="scss">
 @import "./scss/select.scss";
+
+.bookmarked-option {
+  .tree-select-option-label {
+    padding-left: 15px;
+
+    ion-icon {
+      color: $blue-900;
+    }
+  }
+}
 </style>

package/src/components/TreeSelect/mixins/InfinityLoaderMixin.js

@@ -0,0 +1,40 @@
+export default {
+    props: {
+        infiniteLoader: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    watch: {
+        infiniteLoader(newValue) {
+            if (!newValue) {
+                infiniteLoaderObserver.disconnect();
+            }
+        }
+    },
+    data() {
+        return {
+            infiniteLoaderObserver: null,
+        }
+    },
+    mounted() {
+        if (this.infiniteLoader) {
+
+            this.infiniteLoaderObserver = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        this.$emit('loadMoreOptions');
+                    }
+                });
+            });
+
+            this.infiniteLoaderObserver.observe(this.$refs.infinityLoader);
+        }
+    },
+    beforeDestroy() {
+        if (this.infiniteLoader) {
+            infiniteLoaderObserver?.disconnect();
+        }
+    },
+    emits: ['loadMoreOptions'],
+};

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

@@ -89,6 +89,14 @@ $option-checked-hover-bg: $blue-50;
     }
   }
 
+  &.alphabetic-option {
+    max-width: 65px;
+    width: 65px;
+    &.tree-select-option-checked {
+      background-color: white;
+    }
+  }
+
   .tree-select-option-label {
     &:hover {
       background-color: $option-hover-bg;
@@ -110,6 +118,19 @@ $option-checked-hover-bg: $blue-50;
     }
   }
 
+  &.has-icon {
+    border-top: 1px solid $gray-200;
+
+    .option-label {
+      display: flex;
+      align-items: center;
+
+      ion-icon {
+        margin-right: 15px;
+      }
+    }
+  }
+
   .tree-select-option {
     .toggle-children,
     .option-label,
@@ -128,6 +149,12 @@ $option-checked-hover-bg: $blue-50;
         transform: translateX(50px);
       }
 
+      .bookmarkable-option-content {
+        .option-label {
+          width: calc(100% - 85px);
+        }
+      }
+
       .option-label {
         width: calc(100% - 75px);
       }
@@ -205,4 +232,8 @@ $option-checked-hover-bg: $blue-50;
       }
     }
   }
+
+  .disabled {
+    color: $neutral-500 !important;
+  }
 }