@avakhula/ui 0.1.13 → 0.1.15

package/src/components/TreeSelect/Select.vue

@@ -10,9 +10,12 @@
     }"
   >
     <ib-dropdown
-      :disabled="isLoading"
+      :disabled="isLoading || disable"
       :is-resizable="isResizable"
-      :vertical="vertical"
+      :vertical="verticalVal"
+      :class="{
+        disable: disable
+      }"
       ref="dropdown"
       @close="onClose"
       @open="onOpen"
@@ -27,6 +30,7 @@
           tabindex="0"
           class="tree-choice"
           ref="combobox"
+          :aria-expanded="isOpened"
           @click.prevent
           @blur="onBlur"
           @keyup.down="comboboxKeyupDown"
@@ -41,7 +45,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>
@@ -62,6 +66,7 @@
             v-if="showClearButton"
             kind="ghost"
             class="button-clear"
+            aria-label="Clear selection"
             @click.prevent="clearValue"
             @keypress.enter.stop.prevent
             @keydown.enter.stop.prevent
@@ -85,6 +90,7 @@
           class="tree-drop"
           :class="{ 'not-tree-child': !hasTreeChildren }"
           :style="treeDropPos"
+          role="listbox"
         >
           <div
             v-if="isResizable"
@@ -95,34 +101,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 +128,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="
@@ -173,6 +166,7 @@
                 :name="actualName"
                 :parent-auto-check="parentAutoCheck"
                 :is-multiple="isMultiple"
+                role="option"
                 @check="registerCheck"
                 @toggle-bookmark="toggleBookmark"
                 :uid="uid"
@@ -181,10 +175,31 @@
               ></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"
+                role="option"
+                @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 +225,8 @@
                   :uid="uid"
                   :only-end-nodes="onlyEndNodes"
                   :show-input="showInputs"
+                  :alphabetic-style="alphabeticStyle"
+                  role="option"
                   @check="manageAll"
                   @on-focus="(id) => focusedOptionId = id"
                 ></select-option>
@@ -234,6 +251,7 @@
                     :option="option"
                     :is-toggle="isToggle"
                     :name="actualName"
+                    role="option"
                     :parent-auto-check="parentAutoCheck"
                     :is-multiple="isMultiple"
                     :is-bookmarkable="isBookmarkable"
@@ -241,6 +259,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 +267,8 @@
                 </slot>
               </template>
             </template>
+
+            <div v-if="infiniteLoader" ref="infinityLoader"></div>
           </list>
         </div>
       </template>
@@ -266,6 +287,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 +297,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 +343,7 @@ export default {
       },
     },
     options: {
+      type: [Array, Function],
       default() {
         return [];
       },
@@ -393,10 +422,9 @@ export default {
       type: Boolean,
       default: false,
     },
-    // vertical: {
-    //   type: String,
-    //   default: "bottom"
-    // },
+    vertical: {
+      type: String,
+    },
     emptyMessage: {
       type: String,
       default: "",
@@ -421,6 +449,18 @@ export default {
       type: Boolean,
       default: false,
     },
+    disable: {
+      type: Boolean,
+      default: false
+    },
+    searchDebounce: {
+      type: Number,
+      default: 0,
+    },
+    alphabeticStyle: {
+      type: Boolean,
+      default: false
+    },
   },
   emits: [
     "close",
@@ -430,6 +470,7 @@ export default {
     "resize",
     "submit",
     "clearValue",
+    "toggle-bookmarked-option",
     "update:modelValue",
   ],
   watch: {
@@ -463,7 +504,7 @@ export default {
     },
     options: {
       handler(newOptions) {
-        this.initialOptions = copy(newOptions);
+        this.initialOptions  = typeof newOptions === "function" ? newOptions : copy(newOptions);
       },
       deep: true,
     },
@@ -523,13 +564,13 @@ export default {
       const filterString = this.filterString.toLowerCase().trim();
       this.filterFunc.call(this, options, filterString);
 
-      if (filterString) {
+      if (filterString && this.keywordHighlighter) {
         this.marker.mark(filterString);
       }
     };
 
     return {
-      initialOptions: copy(this.options),
+      initialOptions: typeof this.options === "function" ? this.options : copy(this.options),
       val: this.modelValue ? this.modelValue : this.value,
       size: {
         left: (this.initialSize && this.initialSize.left) || 0,
@@ -545,7 +586,7 @@ export default {
       actualBookmarkedOptions: {},
       selected: [],
       isOpen: false,
-      vertical: "bottom",
+      verticalVal: this.vertical ?? "bottom",
       allOptionsIsChecked: true,
       hasTreeChildren: false,
       uid: `f${(~~(Math.random() * 1e8)).toString(16)}`,
@@ -668,7 +709,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) {
@@ -709,7 +750,7 @@ export default {
       this.clear();
       this.setPreparedValues();
     },
-    prepare(options) {
+    prepare(options, checkInitialVisibility = true) {
       return new Promise((res) => {
         const selected = {},
           promises = [];
@@ -737,7 +778,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 &&
@@ -761,6 +801,11 @@ export default {
                     this.prepare(option.children).then(
                       ([preparedChildren, selectedChildren]) => {
                         option.children = preparedChildren;
+
+                        if (this.parentAutoCheck) {
+                            option.checked = this.checkIfOptionsChecked(option.children);
+                        }
+
                         Object.assign(selected, selectedChildren);
                         res(option);
                       }
@@ -790,10 +835,11 @@ export default {
 
         if (option.children && option.children.length) {
           let visibleChildrenCount = this.filterFunc(option.children, filterString);
+
           visibleOptionsCount += visibleChildrenCount;
 
           if (visibleChildrenCount) {
-              option.isChildrenVisible = !!filterString || Boolean(Object.keys(this.actualBookmarkedOptions).length);
+              option.isChildrenVisible = filterString.length > 0 || Boolean(Object.keys(this.actualBookmarkedOptions).length);
               option.isDisabled = visibleChildrenCount < option.children.length && !this.isBookmarkable;
           }
 
@@ -942,16 +988,18 @@ export default {
         this.$emit("close", Object.keys(this.selected)[0]);
       }
       this.$emit("blur");
-      this.vertical = "bottom";
+      this.verticalVal = this.vertical ?? "bottom";
     },
     onOpen() {
       const screenHeight = document.documentElement.scrollHeight;
       this.isOpen = true;
 
+      if (this.vertical === "bottom") return;
+
       this.$nextTick(() => {
         const newScreenHeight = document.documentElement.scrollHeight
         if(newScreenHeight > screenHeight) {
-          this.vertical = "top";
+          this.verticalVal = "top";
         }
       })
     }
@@ -1025,7 +1073,7 @@ export default {
       );
     },
     showSearch() {
-      return this.useSearch || this.optionsCount > 10;
+      return this.useSearch || (this.optionsCount > 10 && !this.alphabeticStyle);
     },
     arrayOfOptions() {
       return this.getArrayOptions(this.actualOptions);
@@ -1072,12 +1120,26 @@ export default {
     List,
     "select-option": Option,
   },
+  directives: {
+    Tooltip,
+  },
   beforeUnmount() {
     document.removeEventListener("mousemove", this.onResize);
     document.removeEventListener("mouseup", this.endResizing);
   },
+  inheritAttrs: false,
 };
 </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;
+  }
 }

package/src/components/TreeSelect/scss/select.scss

@@ -20,6 +20,14 @@ $choice-opened-icon-color: $blue-900;
 $choice-border-error-color: $red-800;
 $tree-search-border-color: $gray-600;
 
+.disable {
+  .tree-choice {
+    background-color: $gray-100 !important;
+    color: $neutral-500 !important;
+    border-bottom: 1px solid $neutral-500 !important;
+  }
+}
+
 .tree-select-error {
   margin-bottom: 5px;
 }
@@ -156,7 +164,7 @@ $tree-search-border-color: $gray-600;
 
     .ib-input-wrapper {
       margin-bottom: 6.5px;
-      
+
       & > div {
         overflow: visible;
       }
@@ -166,9 +174,36 @@ $tree-search-border-color: $gray-600;
       margin: 0;
       overflow: auto;
       max-height: 360px;
+
+      .ib-list {
+        max-height: fit-content;
+      }
+    }
+  }
+
+  .bookmarkable-option-content {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+
+    .option-label {
+      width: calc(100% - 65px);
+
+      ion-icon {
+        color: $blue-900;
+      }
     }
   }
 
+  .tree-select-option-label {
+    width: 99.5%;
+  }
+
+  .bookmarkable-option-title {
+    width: inherit;
+  }
+
   .ib-dropdown-menu {
     position: inherit;
   }
@@ -178,10 +213,11 @@ $tree-search-border-color: $gray-600;
     cursor: move;
     background: transparent;
     z-index: 2;
+    width: 3px;
+    transition: background 0.3s;
 
     &.ib-dropdown-resizer-left,
     &.ib-dropdown-resizer-right {
-      width: 3px;
       top: 0;
       bottom: 0;
     }
@@ -195,6 +231,10 @@ $tree-search-border-color: $gray-600;
       right: 0;
       cursor: e-resize;
     }
+
+    &:hover {
+      background-color: $blue-700;
+    }
   }
 
   .tree-select-default-empty {
@@ -205,4 +245,10 @@ $tree-search-border-color: $gray-600;
   .tree-select-empty {
     padding: 15px;
   }
+
+  .alphabetic-list {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+  }
 }

package/src/constants/keyCodes.js

@@ -6,3 +6,4 @@ export const ARROW_UP_KEY_CODE = 38;
 export const ARROW_LEFT_KEY_CODE = 37;
 export const ARROW_RIGHT_KEY_CODE = 39;
 export const ARROW_DOWN_KEY_CODE = 40;
+export const BACKSPACE_KEY_CODE = 8;

package/src/directives/tooltip/TooltipController.js

@@ -37,6 +37,7 @@ export default class Tooltip {
       position: absolute;
       top: 0px;
       left: 0px;
+      opacity: 0;
     `;
 
     this.tooltipContainer = document.createElement("div");
@@ -59,6 +60,7 @@ export default class Tooltip {
 
         const tooltipStyles = this.getPositionStyle(el, position);
         this.tooltipContainer.firstChild.setAttribute("style", tooltipStyles);
+        this.tooltipContainer.setAttribute("style", {'opacity': 1});
       }
     }, 100);
   }

package/src/directives/tooltip/textOverflowTooltip.js

@@ -6,12 +6,14 @@ const tooltip = new Tooltip();
 const createTooltip = (el, binding) => {
   if (multiLineOverflows(el)) {
 
+    const position = Object.keys(binding.modifiers)[0] || binding.arg;
+
     const content = {
       title: binding.value.title || '',
       text: typeof(binding.value) === 'object' ? binding.value.text : binding.value,
     }
 
-    tooltip.createTooltip(el, content);
+    tooltip.createTooltip(el, content, position);
   }
 };
 

package/src/directives/tooltip/tooltip.js

@@ -24,6 +24,15 @@ const destroyTooltip = (event, el) => {
 
   const tooltipContainer = tooltip.getTooltipContainer();
 
+  if(event.type === "blur") {
+    if(!el.contains(event.relatedTarget)) {
+      tooltip.destroyTooltip(el);
+    }
+
+    return;
+  }
+
+  // Remove Hover
   const isMouseOverEl = el !== event.target && !el.contains(event.target);
   const isMouseOverTooltip =
     tooltipContainer !== event.target &&
@@ -40,12 +49,18 @@ const attachTooltipListeners = (el, binding) => {
 
   el.addEventListener("mouseenter", el.__tooltip_create);
   document.addEventListener("mousemove", el.__tooltip_destroy);
+
+  el.addEventListener("focus", el.__tooltip_create);
+  el.addEventListener("blur", el.__tooltip_destroy, true);
 };
 
 const removeTooltipListeners = (el) => {
   tooltip.destroyTooltip(el);
   el.removeEventListener("mouseenter", el.__tooltip_create);
   document.removeEventListener("mousemove", el.__tooltip_destroy);
+
+  el.removeEventListener("focus", el.__tooltip_create);
+  el.removeEventListener("blur", el.__tooltip_destroy, true);
 };
 
 export const TooltipDirective = {

package/src/helpers/stripHtml.js

@@ -0,0 +1,4 @@
+export function stripHtml(html) {
+    let doc = new DOMParser().parseFromString(html, 'text/html');
+    return doc.body.textContent || "";
+};

package/src/index.js

@@ -26,6 +26,7 @@ export { default as IbLimitSelector } from "./components/Pagination/LimitSelecto
 export { default as IbProgressBar } from "./components/ProgressBar/ProgressBar.vue";
 export { default as IbStatusIndicator } from "./components/StatusIndicator/StatusIndicator.vue";
 export { default as IbPanel } from "./components/Panel/Panel.vue";
+export { default as IbChips } from "./components/Chips/Chips.vue";
 
 // FORM
 export { default as IbInput } from "./components/Form/Input/Input.vue";
@@ -40,6 +41,7 @@ export { default as IbTreeSelect } from "./components/TreeSelect/Select.vue";
 export { default as IbDatePicker } from "./components/Form/DatePicker/DatePicker.vue";
 export { default as IbPhoneInput } from "./components/Form/PhoneInput/PhoneInput.vue";
 export { default as IbTextEditor } from "./components/Form/TextEditor/TextEditor.vue";
+export {default as IbCharactersCount } from "./components/Form/CharactersCount.vue";
 
 // Table
 export { default as IbTable } from "./components/Table/Table.vue";