@avakhula/ui 0.1.20 → 0.1.22

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>