@avakhula/ui 0.1.20 → 0.1.21

package/src/components/TreeSelect/Option.vue

@@ -9,7 +9,8 @@
       :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,
@@ -25,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>
@@ -279,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;
@@ -304,12 +304,14 @@ export default {
     },
     isChecked(option) {
       if(this.hasChildren) {
-        if (this.childrenSelectedCount === this.countOfAllChildren) {
-          return true;
-        }
 
-        if (this.childrenSelectedCount > 0 && this.countOfAllChildren > this.childrenSelectedCount) {
-          return null; //null will trigger indeterminate stage
+      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;
         }
       }
 
@@ -368,5 +370,5 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "./scss/option.scss";
+@use "./scss/option.scss" as *;
 </style>

package/src/components/TreeSelect/Select.vue

@@ -7,7 +7,7 @@
     v-bind="Object.fromEntries(Object.entries($attrs).filter(([key]) => key.startsWith('data-')))"
     class="tree-select"
     :class="{
-      ...classList, 'tree-select-custom-trigger-content': hasTriggerContent
+      ...classList, 'tree-select-custom-trigger-content': hasTriggerContent, 'disabled-parent-autocheck': parentAutoCheck === false
     }"
   >
     <ib-dropdown
@@ -22,7 +22,7 @@
       @open="onOpen"
     >
       <template v-if="hasTrigger" v-slot:trigger>
-        <slot v-bind:selected-count="selectedKeys.length" name="trigger"></slot>
+        <slot v-bind:selected-count="selectedKeys.length" v-bind:is-open="isOpen" name="trigger"></slot>
       </template>
 
       <template v-else v-slot:trigger="{ isOpened }">
@@ -82,8 +82,15 @@
             :name="isOpened ? 'chevron-up-outline' : 'chevron-down-outline'"
             :classes="'tree-select-caret'"
           />
-      </div>
 
+        <input
+          v-for="id in selectedKeys"
+          type="hidden"
+          :key="'hidden-'+id"
+          :name="actualName"
+          :value="id"
+        />
+      </div>
       </template>
 
       <template v-slot:body>
@@ -109,14 +116,15 @@
             class="tree-search"
             v-if="showSearch"
             ref="search"
-            autocomplete="off"
+            autocomplete="new-password"
             :show-icon="true"
             :value="filterString"
             :debounce="searchDebounce"
             :aria-label="
               searchPlaceholderText
                 ? searchPlaceholderText
-                : actualStrings.searchPlaceholder"
+                : actualStrings.searchPlaceholder
+            "
             :placeholder="
               searchPlaceholderText
                 ? searchPlaceholderText
@@ -145,6 +153,7 @@
             >
               <slot name="emptyMessage"></slot>
             </div>
+
             <div
               v-else-if="!requiredDependencyNotFilled && !visibleOptionsCount"
               class="tree-select-default-empty tree-select-empty"
@@ -165,7 +174,7 @@
                   checked: isEmpty,
                 }"
                 :name="actualName"
-                :parent-auto-check="parentAutoCheck"
+                :parent-auto-check="parentAutoCheckVal"
                 :is-multiple="isMultiple"
                 role="option"
                 @check="registerCheck"
@@ -176,7 +185,7 @@
               ></select-option>
             </template>
 
-            <template  v-if="Object.keys(actualBookmarkedOptions).length > 0">
+            <template v-if="Object.keys(actualBookmarkedOptions).length > 0">
               <select-option
                 :key="'bookmark' + option.id"
                 v-for="option in actualBookmarkedOptions"
@@ -197,6 +206,7 @@
             </template>
 
             <template v-if="!requiredDependencyNotFilled">
+            <div class="scrollable-container">
               <template
                 v-if="
                   allOptions &&
@@ -209,7 +219,6 @@
                 <select-option
                   :option="{
                     title: actualStrings.selectAllOptions,
-                    id: '!all!',
                     initiallyVisible: true,
                     visible: true,
                     isDisabled: visibleOptionsCount < optionsCount,
@@ -219,7 +228,6 @@
                       : false,
                   }"
                   :is-toggle="isToggle"
-                  :name="actualName"
                   :parent-auto-check="false"
                   :is-multiple="isMultiple"
                   :is-bookmarkable="false"
@@ -229,44 +237,54 @@
                   :alphabetic-style="alphabeticStyle"
                   role="option"
                   @check="manageAll"
-                  @on-focus="(id) => focusedOptionId = id"
+                  @on-focus="(id) => (focusedOptionId = id)"
                 ></select-option>
               </template>
 
-              <template
-                v-for="option in actualOptions"
-                :key="name + option.value"
-              >
-                <slot
-                  :option="option"
-                  :name="actualName"
-                  :parent-auto-check="parentAutoCheck"
-                  :is-multiple="isMultiple"
-                  :uid="uid"
-                  :only-end-nodes="onlyEndNodes"
-                  :html-title="htmlOptionTitle"
-                  :show-input="showInputs"
+              <div ref="parentRef">
+                <div
+                  :style="{
+                    height: virtualizer?.getTotalSize() + 'px',
+                    position: 'relative',
+                  }"
                 >
-                <select-option
-                    v-show="option.visible"
-                    :option="option"
-                    :is-toggle="isToggle"
-                    :name="actualName"
-                    role="option"
-                    :parent-auto-check="parentAutoCheck"
-                    :is-multiple="isMultiple"
-                    :is-bookmarkable="isBookmarkable"
-                    :uid="uid"
-                    :only-end-nodes="onlyEndNodes"
-                    :html-title="htmlOptionTitle"
-                    :show-input="showInputs"
-                    :alphabetic-style="alphabeticStyle"
-                    @check="registerCheck"
-                    @toggle-bookmark="toggleBookmark"
-                    @on-focus="(id) => focusedOptionId = id"
-                  ></select-option>
-                </slot>
-              </template>
+                  <div
+                    v-for="virtualRow in virtualizer?.getVirtualItems()"
+                    :key="virtualRow.index"
+                    :data-index="virtualRow.index"
+                    :ref="virtualizer.measureElement"
+                    :style="{
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      width: '100%',
+                      transform: `translateY(${virtualRow.start}px)`,
+                    }"
+                  >
+                    <select-option
+                        v-if="actualOptions[virtualRow.index]"
+                        v-show="actualOptions[virtualRow.index].visible && !actualOptions[virtualRow.index].hidden"
+                        :option="actualOptions[virtualRow.index]"
+                        :is-toggle="isToggle"
+                        :name="actualName"
+                        role="option"
+                        :parent-auto-check="parentAutoCheckVal"
+                        :is-multiple="isMultiple"
+                        :is-bookmarkable="isBookmarkable"
+                        :uid="uid"
+                        :only-end-nodes="onlyEndNodes"
+                        :html-title="htmlOptionTitle"
+                        :show-input="showInputs"
+                        :alphabetic-style="alphabeticStyle"
+                        @check="registerCheck"
+                        @toggle-bookmark="toggleBookmark"
+                        @on-focus="(id) => focusedOptionId = id"
+                    ></select-option>
+                  </div>
+                </div>
+              </div>
+              </div>
+
             </template>
 
             <div v-if="infiniteLoader" ref="infinityLoader"></div>
@@ -278,7 +296,7 @@
 </template>
 
 <script>
-// <!-- TODO: use constants for vertical position -->
+import { useVirtualizer } from "@tanstack/vue-virtual";
 import IbInput from "../Form/Input/Input.vue";
 import Option from "./Option.vue";
 import Mark from "mark.js/dist/mark.es6.min";
@@ -369,7 +387,7 @@ export default {
     },
     parentAutoCheck: {
       type: Boolean,
-      default: true,
+      default: null,
     },
     strings: {
       type: Object,
@@ -484,9 +502,15 @@ export default {
     },
     modelValue: {
       handler(value) {
-        this.val = value;
-        this.actualOptions = [];
-        this.setPreparedValues();
+          if (this.isInternalChange) return;
+
+          this.val = value;
+          this.val = value;
+          if (!Array.isArray(value) || value.join(',') !== Object.keys(this.selected).join(',')) {
+            this.setPreparedValues(this.actualOptions, false);
+          }
+          const selectedSet = new Set(Array.isArray(value) ? value : [value].filter(Boolean));
+          this.syncCheckedBySet(selectedSet);
       },
       deep: true,
     },
@@ -569,9 +593,12 @@ export default {
       if (filterString && this.keywordHighlighter) {
         this.marker.mark(filterString);
       }
+
+      this.virtualizer?.measure();
     }, 1000);
 
     return {
+      virtualizer: null,
       initialOptions: typeof this.options === "function" ? this.options : copy(this.options),
       val: this.modelValue ? this.modelValue : this.value,
       size: {
@@ -580,14 +607,15 @@ export default {
       },
       resizingProp: null,
       isInitialized: false,
-      optionsIdsWatch: [],
       isLoading: false,
+      isOpen: false,
+      optionsIdsWatch: [],
       actualName: this.isMultiple ? this.name + "[]" : this.name,
+      parentAutoCheckVal: this.parentAutoCheck !== null ? this.parentAutoCheck : this.isMultiple,
       filterString: "",
       actualOptions: [],
       actualBookmarkedOptions: {},
       selected: [],
-      isOpen: false,
       verticalVal: this.vertical ?? "bottom",
       allOptionsIsChecked: true,
       hasTreeChildren: false,
@@ -633,9 +661,38 @@ export default {
         ...this.strings,
       },
       dependencyValue: null,
+      isInternalChange: false,
+      nodeIndex: new Map()
     };
   },
   methods: {
+    toggleDuplicateOptionsFast(optionId, checked) {
+        const arr = this.nodeIndex.get(optionId);
+        if (!arr) return;
+        for (const node of arr) node.checked = checked;
+    },
+    buildNodeIndex() {
+        this.nodeIndex.clear();
+        this.traverseTree(this.actualOptions, (node) => {
+          if (!this.nodeIndex.has(node.id)) this.nodeIndex.set(node.id, []);
+          this.nodeIndex.get(node.id).push(node);
+        });
+    },
+    syncCheckedBySet(selectedSet) {
+        this.traverseTree(this.actualOptions, (opt) => {
+          const shouldBeChecked = selectedSet.has(opt.id);
+          if (opt.checked !== shouldBeChecked) opt.checked = shouldBeChecked;
+        });
+
+        this.selected = {};
+        this.traverseTree(this.actualOptions, (opt) => {
+          if (opt.checked && (!this.onlyEndNodes || !opt.children)) {
+            this.selected[opt.id] = opt;
+          }
+        });
+
+        this.allOptionsIsChecked = this.checkIfOptionsChecked(this.actualOptions);
+    },
     onBlur() {
       setTimeout(() => {
         if (!this.isOpen) {
@@ -658,7 +715,7 @@ export default {
       this.$refs.combobox.focus();
     },
     focusOnFirstOptions() {
-      this.$refs.list.$el.querySelector('[tabindex]:not(hidden)').focus();
+      this.$refs.list.$el.querySelector("[tabindex]:not(hidden)").focus();
     },
     startResizing(prop) {
       this.resizingProp = prop;
@@ -681,18 +738,11 @@ export default {
     },
     registerDependency(oldDependency) {
       if (this.dependency) {
-        this.$globalEvents.$on(
-          "select-" + this.dependency + ":update",
-          (dependencyValue) => {
-            this.clear();
+          this.$globalEvents.$on("select-" + this.dependency + ":update", (dependencyValue) => {
+              this.clear();
             this.dependencyValue = dependencyValue;
 
-            if (
-              this.dependencyValue &&
-              this.dependencyValue.values &&
-              (!Array.isArray(this.dependencyValue.values) ||
-                this.dependencyValue.values.length)
-            ) {
+            if (this.dependencyValue && this.dependencyValue.values && (!Array.isArray(this.dependencyValue.values) || this.dependencyValue.values.length)) {
               this.setPreparedValues();
             }
           }
@@ -722,35 +772,33 @@ export default {
         );
       }
 
-      return this.prepare(options).then(([options, selected]) => {
-        this.actualOptions = options;
-        this.allOptionsIsChecked = this.checkIfOptionsChecked(options);
-        this.isInitialized = true;
-        this.selected = selected;
-        this.setBookmarkedOptions(options);
-      });
+       return this.prepare(options).then(([options, selected]) => {
+         this.actualOptions = options;
+         this.buildNodeIndex();
+         this.allOptionsIsChecked = this.checkIfOptionsChecked(options);
+         this.isInitialized = true;
+         this.selected = selected;
+         this.setBookmarkedOptions(options);
+       });
     },
     clear() {
-      this.setPreparedValues();
+      this.actualOptions = [];
       this.allOptionsIsChecked = false;
+      this.countVisibleChildren = 0;
       this.selected = [];
-
-      if (this.isMultiple) {
-        this.$emit("update:modelValue", null);
-        this.$emit("input", null);
-        this.$emit("clear-value", null);
-
-      } else {
-        this.$emit("update:modelValue", []);
-        this.$emit("input", []);
-        this.$emit("clear-value", []);
-      }
-
-      this.setPreparedValues();
     },
     clearValue() {
-      this.clear();
-      this.setPreparedValues();
+       this.traverseTree(this.actualOptions, (opt) => (opt.checked = false));
+       this.clear();
+
+       this.isInternalChange = true;
+       const empty = this.isMultiple ? [] : null;
+
+       this.$emit("update:modelValue", empty);
+       this.$emit("input", empty);
+       this.$emit("clear-value", empty);
+       this.$nextTick(() => (this.isInternalChange = false));
+       this.setPreparedValues();
     },
     prepare(options, checkInitialVisibility = true) {
       return new Promise((res) => {
@@ -804,8 +852,10 @@ export default {
                       ([preparedChildren, selectedChildren]) => {
                         option.children = preparedChildren;
 
-                        if (this.parentAutoCheck) {
-                            option.checked = this.checkIfOptionsChecked(option.children);
+                        if (this.parentAutoCheckVal) {
+                          option.checked = this.checkIfOptionsChecked(
+                            option.children
+                          );
                         }
 
                         Object.assign(selected, selectedChildren);
@@ -841,8 +891,12 @@ export default {
           visibleOptionsCount += visibleChildrenCount;
 
           if (visibleChildrenCount) {
-              option.isChildrenVisible = filterString.length > 0 || Boolean(Object.keys(this.actualBookmarkedOptions).length);
-              option.isDisabled = visibleChildrenCount < option.children.length && !this.isBookmarkable;
+            option.isChildrenVisible =
+              filterString.length > 0 ||
+              Boolean(Object.keys(this.actualBookmarkedOptions).length);
+            option.isDisabled =
+              visibleChildrenCount < option.children.length &&
+              !this.isBookmarkable;
           }
 
           if (!isVisible) {
@@ -870,57 +924,52 @@ export default {
       this.$emit("submit");
     },
     change() {
-      const values = Object.keys(this.selected);
-      if (this.isMultiple) {
-        this.$emit("update:modelValue", values);
-        this.$emit("input", values);
-      } else {
-        this.$emit("update:modelValue", values[0]);
-        this.$emit("input", values[0]);
-      }
-      this.$globalEvents.$emit("select-" + this.filterId + ":update", {
-        values,
-        filter: this.filterId,
-      });
-      this.$refs.dropdown.close();
+       const values = Object.keys(this.selected);
+       this.isInternalChange = true;
+       if (this.isMultiple) {
+         this.$emit("update:modelValue", values);
+         this.$emit("input", values);
+       } else {
+         this.$emit("update:modelValue", values[0]);
+         this.$emit("input", values[0]);
+       }
+       this.$nextTick(() => (this.isInternalChange = false));
+       this.$globalEvents.$emit("select-" + this.filterId + ":update", { values, filter: this.filterId });
+       if (!this.isMultiple) this.$refs.dropdown.close();
     },
     checkIfOptionsChecked(options) {
       return options.every((option) => option.checked || option.readonly);
     },
     registerCheck(option, isChecked, isDirectChild) {
-      if (isChecked) {
-        option.checked = true;
-        if (this.isMultiple) {
-          if (
-            !(this.onlyEndNodes && option.children && option.children.length)
-          ) {
+        if (isChecked) {
+          option.checked = true;
+          if (this.isMultiple && !(this.onlyEndNodes && option.children?.length)) {
             this.selected[option.id] = option;
-            this.$emit("update:modelValue", Object.keys(this.selected));
-            this.$emit("input", Object.keys(this.selected));
+          } else if (!this.isMultiple) {
+            const prev = Object.keys(this.selected)[0];
+            if (prev) this.selected[prev].checked = false;
+            this.selected = { [option.id]: option };
+            this.change();
+            return;
           }
         } else {
-          const selectedOptionKey = Object.keys(this.selected)[0];
+          delete this.selected[option.id];
+          option.checked = false;
+        }
 
-          if (selectedOptionKey) {
-            this.selected[selectedOptionKey].checked = false;
-          }
+        this.toggleDuplicateOptionsFast(option.id, isChecked);
 
-          this.selected = { [option.id]: option };
-          this.change();
+        if (isDirectChild) {
+          this.allOptionsIsChecked = this.checkIfOptionsChecked(this.actualOptions);
         }
-      } else {
-        delete this.selected[option.id];
-        option.checked = false;
-        this.$emit("update:modelValue", Object.keys(this.selected));
-        this.$emit("input", Object.keys(this.selected));
-      }
 
-      this.toggleDuplicateOptions(this.actualOptions, option.id, isChecked);
-      if (isDirectChild) {
-        this.allOptionsIsChecked = this.checkIfOptionsChecked(
-          this.actualOptions
-        );
-      }
+        if (this.isMultiple) {
+          this.isInternalChange = true;
+          const values = Object.keys(this.selected);
+          this.$emit("update:modelValue", values);
+          this.$emit("input", values);
+          this.$nextTick(() => (this.isInternalChange = false));
+        }
     },
     toggleDuplicateOptions(options, optionId, checked) {
       for (let opt of options) {
@@ -990,6 +1039,7 @@ export default {
       } else {
         this.$emit("close", Object.keys(this.selected)[0]);
       }
+      this.virtualizer = null;
       this.$emit("blur");
       this.verticalVal = this.vertical ?? "bottom";
     },
@@ -997,6 +1047,17 @@ export default {
       const screenHeight = document.documentElement.scrollHeight;
       this.isOpen = true;
 
+
+      if (!this.virtualizer) {
+        this.virtualizer = useVirtualizer({
+          count: this.actualOptions.length,
+          getScrollElement: () => this.$refs.parentRef,
+          estimateSize: () => 40,
+          overscan: 8,
+        });
+      }
+      this.virtualizer?.measure();
+
       if (this.vertical === "bottom") return;
 
       this.$nextTick(() => {
@@ -1005,7 +1066,7 @@ export default {
           this.verticalVal = "top";
         }
       })
-    }
+    },
   },
   computed: {
     hasTrigger() {
@@ -1045,7 +1106,7 @@ export default {
         }
       });
     },
-    selectStatus() {
+      selectStatus() {
       if (this.staticPlaceholder) {
         return this.placeholder;
       } else if (this.isLoading) {
@@ -1056,7 +1117,7 @@ export default {
         return this.selectedKeys
           .map((key) => this.selected[key].title)
           .join(",");
-      } else if (this.selectedKeys.length < this.optionsCount) {
+      } else if (!this.allOptionsIsChecked) {
         return this.actualStrings.selectedCount
           .replace("{selected}", this.selectedKeys.length)
           .replace("{all}", this.optionsCount);
@@ -1076,7 +1137,7 @@ export default {
       );
     },
     showSearch() {
-      return this.useSearch || (this.optionsCount > 10 && !this.alphabeticStyle);
+      return (this.useSearch || (this.optionsCount > 10 && !this.alphabeticStyle));
     },
     arrayOfOptions() {
       return this.getArrayOptions(this.actualOptions);
@@ -1134,7 +1195,13 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "./scss/select.scss";
+@use "./scss/select.scss" as *;
+@use "../../assets/scss/variables/colors.scss" as *;
+
+.scrollable-container {
+    overflow: auto;
+    max-height: 300px;
+}
 
 .bookmarked-option {
   .tree-select-option-label {

package/src/components/TreeSelect/scss/option.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 *;
 
 $option-hover-bg: $gray-100;
 $option-checked-bg: $gray-100;
@@ -41,7 +41,7 @@ $option-checked-hover-bg: $blue-50;
 
     .ib-checkbox-body {
       padding: 0;
-    } 
+    }
 
     .option-label {
       margin-left: 15px;
@@ -165,7 +165,7 @@ $option-checked-hover-bg: $blue-50;
         .ib-checkbox {
           transform: translateX(75px);
         }
-        
+
         .option-label {
           width: calc(100% - 100px);
         }
@@ -212,7 +212,7 @@ $option-checked-hover-bg: $blue-50;
       }
     }
 
-    
+
     .ib-toggle-container {
       position: absolute;
       right: 0;