@avakhula/ui 0.0.33 → 0.0.34-4.2

package/src/components/TreeSelect/Select.vue

@@ -1,11 +1,24 @@
 <template>
-  <div class="tree-select">
+  <ib-alert class="tree-select-error" v-if="errorMessage">
+    {{ errorMessage }}
+  </ib-alert>
+
+  <div
+    class="tree-select"
+    :class="{
+      ...classList, 'tree-select-custom-trigger-content': hasTriggerContent
+    }"
+  >
     <ib-dropdown
-      :disabled="isLoading"
+      :disabled="isLoading || disable"
       :is-resizable="isResizable"
-      :vertical="vertical"
-      @close="onClose"
+      :vertical="verticalVal"
+      :class="{
+        disable: disable
+      }"
       ref="dropdown"
+      @close="onClose"
+      @open="onOpen"
     >
       <template v-if="hasTrigger" v-slot:trigger>
         <slot v-bind:selected-count="selectedKeys.length" name="trigger"></slot>
@@ -16,53 +29,65 @@
           role="combobox"
           tabindex="0"
           class="tree-choice"
+          ref="combobox"
           @click.prevent
+          @blur="onBlur"
+          @keyup.down="comboboxKeyupDown"
+          @keyup.up="comboboxKeyupDown"
           :aria-label="ariaLabel"
-          :aria-expanded="isOpened"
+          :aria-activedescendant="focusedOptionId"
           :class="{
             'tree-choice-opened': isOpened,
-            'has-clear-button': !showClearButton,
+            'has-clear-button': showClearButton,
+            'tree-choice-error': errorMessage,
           }"
         >
-          <template v-if="htmlOptionTitle">
-            <span
-              :class="{ placeholder: !selectStatus }"
-              v-html="selectStatus || placeholder"
-            ></span>
+
+          <template v-if="hasTriggerContent">
+            <slot v-bind:selected-count="selectedKeys.length" name="triggerContent"></slot>
           </template>
+
           <template v-else>
-            <span :class="{ placeholder: !selectStatus }">
-              {{ selectStatus || placeholder }}
-            </span>
+            <template v-if="htmlOptionTitle">
+              <span
+                :class="{ placeholder: !selectStatus }"
+                v-html="selectStatus || placeholder"
+              ></span>
+            </template>
+            <template v-else>
+              <span :class="{ placeholder: !selectStatus }">
+                {{ selectStatus || placeholder }}
+              </span>
+            </template>
           </template>
-        </div>
-        <ib-icon-button
-          v-if="showClearButton"
-          kind="ghost"
-          class="button-clear"
-          @click.prevent="clearValue"
-          :help-text="clearButtonMessage"
-          v-show="Object.keys(selected).length"
-        >
-          <ib-icon name="close-outline"></ib-icon>
-        </ib-icon-button>
 
-        <ib-icon
-          :name="isOpened ? 'chevron-up-outline' : 'chevron-down-outline'"
-          :classes="'tree-select-caret'"
-        />
+          <ib-icon-button
+            v-if="showClearButton"
+            kind="ghost"
+            class="button-clear"
+            @click.prevent="clearValue"
+            @keypress.enter.stop.prevent
+            @keydown.enter.stop.prevent
+            @keyup.enter.prevent="clearValue"
+            :help-text="clearButtonMessage"
+            v-show="Object.keys(selected).length"
+          >
+            <ib-icon name="close-outline"></ib-icon>
+          </ib-icon-button>
+
+          <ib-icon
+            :name="isOpened ? 'chevron-up-outline' : 'chevron-down-outline'"
+            :classes="'tree-select-caret'"
+          />
+      </div>
+
       </template>
 
       <template v-slot:body>
         <div
           class="tree-drop"
           :class="{ 'not-tree-child': !hasTreeChildren }"
-          :style="{
-            width: 'auto',
-            position: 'absolute',
-            left: -size.left + 'px',
-            right: -size.right + 'px',
-          }"
+          :style="treeDropPos"
         >
           <div
             v-if="isResizable"
@@ -98,24 +123,32 @@
           <ib-input
             class="tree-search"
             v-if="showSearch"
+            ref="search"
             :show-icon="true"
+            autocomplete="off"
             :value="filterString"
+            :aria-label="
+              searchPlaceholderText
+                ? searchPlaceholderText
+                : actualStrings.searchPlaceholder"
             :placeholder="
               searchPlaceholderText
                 ? searchPlaceholderText
                 : actualStrings.searchPlaceholder
             "
             @input="filter($event, actualOptions)"
+            @keyup.down="inputKeyupDown"
           ></ib-input>
 
           <list
             ref="list"
+            role="listbox"
             :class="{ 'tree-select-list': true, 'has-hierarchy': hasHierarchy }"
           >
             <div
               v-if="
                 !requiredDependencyNotFilled &&
-                !countVisibleChildren &&
+                !visibleOptionsCount &&
                 hasEmptyMessage
               "
               class="tree-select-empty"
@@ -123,7 +156,7 @@
               <slot name="emptyMessage"></slot>
             </div>
             <div
-              v-else-if="!requiredDependencyNotFilled && !countVisibleChildren"
+              v-else-if="!requiredDependencyNotFilled && !visibleOptionsCount"
               class="tree-select-default-empty tree-select-empty"
             >
               {{ actualStrings.emptyTitle }}
@@ -157,7 +190,7 @@
                 v-if="
                   allOptions &&
                   isMultiple &&
-                  countVisibleChildren &&
+                  visibleOptionsCount &&
                   !requiredDependencyNotFilled
                 "
               >
@@ -178,14 +211,18 @@
                   :parent-auto-check="false"
                   :is-multiple="isMultiple"
                   :is-bookmarkable="false"
-                  @check="manageAll"
                   :uid="uid"
                   :only-end-nodes="onlyEndNodes"
                   :show-input="showInputs"
+                  @check="manageAll"
+                  @on-focus="(id) => focusedOptionId = id"
                 ></select-option>
               </template>
 
-              <template v-for="option in actualOptions" :key="option.value">
+              <template
+                v-for="option in actualOptions"
+                :key="name + option.value"
+              >
                 <slot
                   :option="option"
                   :name="actualName"
@@ -196,7 +233,7 @@
                   :html-title="htmlOptionTitle"
                   :show-input="showInputs"
                 >
-                  <select-option
+                <select-option
                     v-show="option.visible"
                     :option="option"
                     :is-toggle="isToggle"
@@ -204,12 +241,13 @@
                     :parent-auto-check="parentAutoCheck"
                     :is-multiple="isMultiple"
                     :is-bookmarkable="isBookmarkable"
-                    @check="registerCheck"
-                    @toggle-bookmark="toggleBookmark"
                     :uid="uid"
                     :only-end-nodes="onlyEndNodes"
                     :html-title="htmlOptionTitle"
                     :show-input="showInputs"
+                    @check="registerCheck"
+                    @toggle-bookmark="toggleBookmark"
+                    @on-focus="(id) => focusedOptionId = id"
                   ></select-option>
                 </slot>
               </template>
@@ -222,6 +260,7 @@
 </template>
 
 <script>
+// <!-- TODO: use constants for vertical position -->
 import IbInput from "../Form/Input/Input.vue";
 import Option from "./Option.vue";
 import Mark from "mark.js/dist/mark.es6.min";
@@ -229,11 +268,18 @@ import generateUID from "../../helpers/generateUID";
 import IbDropdown from "../Dropdown/Dropdown.vue";
 import IbIcon from "../Icon.vue";
 import IbIconButton from "../IconButton/IconButton.vue";
+import IbAlert from "../Alert/Alert.vue";
 import List from "../List.vue";
 
+function copy(data) {
+    return JSON.parse(JSON.stringify(data));
+}
+
 export default {
   name: "IbTreeSelect",
+  inject: ["LANG_COMPONENTS"],
   props: {
+    classList: [String, Array],
     placeholder: {
       type: String,
       default: "",
@@ -254,6 +300,9 @@ export default {
       type: Boolean,
       default: false,
     },
+    menuSize: {
+      type: [String, Number],
+    },
     initialSize: {
       left: 0,
       right: 0,
@@ -355,6 +404,10 @@ export default {
       type: String,
       default: "",
     },
+    errorMessage: {
+      type: String,
+      default: "",
+    },
     allOptions: {
       type: Boolean,
       default: true,
@@ -371,15 +424,35 @@ export default {
       type: Boolean,
       default: false,
     },
+    disable: {
+      type: Boolean,
+      default: false
+    }
   },
+  emits: [
+    "close",
+    "input",
+    "blur",
+    "search",
+    "resize",
+    "submit",
+    "clearValue",
+    "update:modelValue",
+  ],
   watch: {
     value(value) {
       this.val = value;
-      this.setPreparedValues();
+      if (!Array.isArray(value) || value.join(',') !== Object.keys(this.selected).join(',')) {
+        this.setPreparedValues(this.actualOptions, false);
+      }
     },
-    modelValue(value) {
-      this.val = value;
-      this.setPreparedValues();
+    modelValue: {
+      handler(value) {
+        this.val = value;
+        this.actualOptions = [];
+        this.setPreparedValues();
+      },
+      deep: true,
     },
     val(value) {
       if (
@@ -395,15 +468,21 @@ export default {
         });
       }
     },
-    options() {
+    options: {
+      handler(newOptions) {
+        this.initialOptions = copy(newOptions);
+      },
+      deep: true,
+    },
+    initialOptions(newOptions) {
       let isOptionsEqual = true;
 
-      if (typeof this.options === "function") {
+      if (typeof newOptions === "function") {
         isOptionsEqual = false;
       } else {
         const result = [];
 
-        const options = this.options;
+        const options = newOptions;
         Array.prototype.forEach.call(options, (option) => {
           if (option.id !== undefined) result.push(option.id);
         });
@@ -449,11 +528,7 @@ export default {
     this.defaultFilter = (options) => {
       this.marker.unmark();
       const filterString = this.filterString.toLowerCase().trim();
-      this.countVisibleChildren = this.filterFunc.call(
-        this,
-        options,
-        filterString
-      );
+      this.filterFunc.call(this, options, filterString);
 
       if (filterString) {
         this.marker.mark(filterString);
@@ -461,6 +536,7 @@ export default {
     };
 
     return {
+      initialOptions: copy(this.options),
       val: this.modelValue ? this.modelValue : this.value,
       size: {
         left: (this.initialSize && this.initialSize.left) || 0,
@@ -475,51 +551,48 @@ export default {
       actualOptions: [],
       actualBookmarkedOptions: {},
       selected: [],
+      isOpen: false,
+      verticalVal: this.vertical ?? "bottom",
       allOptionsIsChecked: true,
-      countVisibleChildren: 0,
       hasTreeChildren: false,
       uid: `f${(~~(Math.random() * 1e8)).toString(16)}`,
+      focusedOptionId: '',
       actualStrings: {
         ...{
-          searchPlaceholder: "Search placeholder",
-          // this.lang(
-          //   this.searchPlaceholderText.length
-          //     ? this.searchPlaceholderText
-          //     : "search_placeholder",
-          //   LANG_COMPONENTS.COMPONENT_SELECT
-          // ),
-          emptyTitle: "Empty title",
-          // this.lang(
-          //   "empty_title",
-          //   LANG_COMPONENTS.COMPONENT_SELECT
-          // ),
-          selectAllOptions: "All Options",
-          // this.lang(
-          //   "all_options",
-          //   LANG_COMPONENTS.COMPONENT_SELECT
-          // ),
-          allSelected: "All selected",
-          //  this.lang(
-          // "all_selected",
-          // LANG_COMPONENTS.COMPONENT_SELECT
-          // ),
-          loading: "loading",
-          // this.lang("loading", LANG_COMPONENTS.COMPONENT_SELECT) + "...",
-          selectedCount: "Selected {selected} of {all} items",
-          // this.lang(
-          //   "selected_count",
-          //   LANG_COMPONENTS.COMPONENT_SELECT
-          // ),
-          buttonTitle: "Button title",
-          // this.buttonTitle ||
-          // this.lang("button_title", LANG_COMPONENTS.COMPONENT_SELECT),
-          requiredDependencyNotFilled: "Required dependency are not filled",
-          // // eslint-disable-next-line vue/no-computed-properties-in-data
-          // this.requiredDependencyNotFilled ||
-          // this.lang(
-          //   "required_dependency_are_not_filled",
-          //   LANG_COMPONENTS.COMPONENT_SELECT
-          // ),
+          searchPlaceholder: lang(
+            this.searchPlaceholderText.length
+              ? this.searchPlaceholderText
+              : "search_placeholder",
+            this.LANG_COMPONENTS?.COMPONENT_SELECT
+          ),
+          emptyTitle: lang(
+            "empty_title",
+            this.LANG_COMPONENTS?.COMPONENT_SELECT
+          ),
+          selectAllOptions: lang(
+            "all_options",
+            this.LANG_COMPONENTS?.COMPONENT_SELECT
+          ),
+          allSelected: lang(
+            "all_selected",
+            this.LANG_COMPONENTS?.COMPONENT_SELECT
+          ),
+          loading:
+            lang("loading", this.LANG_COMPONENTS?.COMPONENT_SELECT) + "...",
+          selectedCount: lang(
+            "selected_count",
+            this.LANG_COMPONENTS?.COMPONENT_SELECT
+          ),
+          buttonTitle:
+            this.buttonTitle ||
+            lang("button_title", this.LANG_COMPONENTS?.COMPONENT_SELECT),
+          requiredDependencyNotFilled:
+            // eslint-disable-next-line vue/no-computed-properties-in-data
+            this.requiredDependencyNotFilled ||
+            lang(
+              "required_dependency_are_not_filled",
+              this.LANG_COMPONENTS?.COMPONENT_SELECT
+            ),
         },
         ...this.strings,
       },
@@ -527,6 +600,30 @@ export default {
     };
   },
   methods: {
+    onBlur() {
+      setTimeout(() => {
+        if (!this.isOpen) {
+          this.$emit("blur");
+        }
+      }, 200);
+    },
+    inputKeyupDown() {
+      this.focusOnFirstOptions();
+    },
+    comboboxKeyupDown() {
+      if (this.showSearch) {
+        this.$refs.search.focus();
+        return;
+      }
+
+      this.focusOnFirstOptions();
+    },
+    focus() {
+      this.$refs.combobox.focus();
+    },
+    focusOnFirstOptions() {
+      this.$refs.list.$el.querySelector('[tabindex]:not(hidden)').focus();
+    },
     startResizing(prop) {
       this.resizingProp = prop;
     },
@@ -582,7 +679,7 @@ export default {
       this.defaultFilter(options);
     },
     setPreparedValues(opt) {
-      let options = opt || this.options;
+      let options = opt || this.initialOptions;
       if (this.alphabetSort) {
         options = options.sort((a, b) =>
           a.title.toLowerCase().localeCompare(b.title.toLowerCase())
@@ -592,18 +689,28 @@ export default {
       return this.prepare(options).then(([options, selected]) => {
         this.actualOptions = options;
         this.allOptionsIsChecked = this.checkIfOptionsChecked(options);
-        this.countVisibleChildren = options.length;
         this.isInitialized = true;
         this.selected = selected;
         this.setBookmarkedOptions(options);
       });
     },
     clear() {
-      this.actualOptions = [];
+      this.setPreparedValues();
       this.allOptionsIsChecked = false;
-      this.countVisibleChildren = 0;
       this.selected = [];
-      this.$emit("update:modelValue", null);
+
+      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();
@@ -636,7 +743,7 @@ export default {
               option.initiallyVisible =
                 typeof option.visible === "undefined" ? true : option.visible;
               option.visible = option.initiallyVisible;
-              option.isDisabled = false;
+              option.readonly = option.readonly ? true : false;
 
               option.checked = this.isMultiple
                 ? this.val !== null &&
@@ -650,7 +757,7 @@ export default {
               }
 
               if (option.children) {
-                this.hasTreeChildren = true; //here
+                this.hasTreeChildren = true;
                 option.isChildrenVisible = false;
               }
 
@@ -684,26 +791,16 @@ export default {
     filterFunc(options, filterString) {
       let visibleOptionsCount = 0;
 
-      options.forEach((option) => {
-        let isVisible =
-          option.initiallyVisible &&
-          option.title.toString().toLowerCase().includes(filterString) &&
-          !this.actualBookmarkedOptions[option.id];
+      options.forEach(option => {
+        let isVisible = option.initiallyVisible && option.title && option.title.toString().toLowerCase().includes(filterString) && !this.actualBookmarkedOptions[option.id];
 
         if (option.children && option.children.length) {
-          let visibleChildrenCount = this.filterFunc(
-            option.children,
-            filterString
-          );
+          let visibleChildrenCount = this.filterFunc(option.children, filterString);
           visibleOptionsCount += visibleChildrenCount;
 
           if (visibleChildrenCount) {
-            option.isChildrenVisible =
-              !!filterString ||
-              Boolean(Object.keys(this.actualBookmarkedOptions).length);
-            option.isDisabled =
-              visibleChildrenCount < option.children.length &&
-              !this.isBookmarkable;
+              option.isChildrenVisible = !!filterString || Boolean(Object.keys(this.actualBookmarkedOptions).length);
+              option.isDisabled = visibleChildrenCount < option.children.length && !this.isBookmarkable;
           }
 
           if (!isVisible) {
@@ -719,7 +816,6 @@ export default {
           visibleOptionsCount++;
         }
       });
-
       return visibleOptionsCount;
     },
     submit() {
@@ -747,7 +843,7 @@ export default {
       this.$refs.dropdown.close();
     },
     checkIfOptionsChecked(options) {
-      return options.every((option) => option.checked);
+      return options.every((option) => option.checked || option.readonly);
     },
     registerCheck(option, isChecked, isDirectChild) {
       if (isChecked) {
@@ -757,8 +853,8 @@ export default {
             !(this.onlyEndNodes && option.children && option.children.length)
           ) {
             this.selected[option.id] = option;
-            this.$emit("input", Object.keys(this.selected));
             this.$emit("update:modelValue", Object.keys(this.selected));
+            this.$emit("input", Object.keys(this.selected));
           }
         } else {
           const selectedOptionKey = Object.keys(this.selected)[0];
@@ -773,8 +869,8 @@ export default {
       } else {
         delete this.selected[option.id];
         option.checked = false;
-        this.$emit("input", Object.keys(this.selected));
         this.$emit("update:modelValue", Object.keys(this.selected));
+        this.$emit("input", Object.keys(this.selected));
       }
 
       this.toggleDuplicateOptions(this.actualOptions, option.id, isChecked);
@@ -797,6 +893,7 @@ export default {
     manageAll() {
       this.allOptionsIsChecked = !this.allOptionsIsChecked;
       this.traverseTree(this.actualOptions, (option) => {
+        if (option.readonly) return;
         this.registerCheck(option, this.allOptionsIsChecked, false);
       });
     },
@@ -842,20 +939,57 @@ export default {
       this.filter(this.filterString, options);
     },
     onClose() {
+      this.isOpen = false;
+      this.filter("", this.actualOptions);
+
       if (this.isMultiple) {
         this.$emit("close", Object.keys(this.selected));
       } else {
         this.$emit("close", Object.keys(this.selected)[0]);
       }
+      this.$emit("blur");
+      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.verticalVal = "top";
+        }
+      })
+    }
   },
   computed: {
     hasTrigger() {
       return !!this.$slots.trigger;
     },
+    hasTriggerContent() {
+      return !!this.$slots.triggerContent;
+    },
     hasEmptyMessage() {
       return !!this.$slots.emptyMessage;
     },
+    treeDropPos() {
+      if (this.menuSize) {
+        return {
+          width: this.menuSize + "px",
+          maxWidth: this.menuSize + "px",
+          minWidth: this.menuSize + "px",
+        };
+      }
+
+      return {
+        width: "auto",
+        position: "absolute",
+        left: -this.size.left + "px",
+        right: -this.size.right + "px",
+      };
+    },
     hasHierarchy() {
       return this.actualOptions.some((option) => {
         return option.children;
@@ -938,6 +1072,7 @@ export default {
     },
   },
   components: {
+    IbAlert,
     IbIconButton,
     IbIcon,
     IbDropdown,

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

@@ -199,6 +199,14 @@ $option-checked-hover-bg: $blue-50;
       &.toggle-on {
         background-color: transparent;
       }
+
+      & + .option-label {
+        width: calc(100% - 65px);
+      }
     }
   }
+
+  .disabled {
+    color: $neutral-500 !important;
+  }
 }