@avakhula/ui 0.0.229 → 0.0.232

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.229",
+  "version": "0.0.232",
   "main": "dist/index.js",
   "module": "dist/index.umd.cjs",
   "source": "src/index.js",

package/src/App.vue

@@ -1,6 +1,11 @@
 <template>
-  <ib-select :options="opt"/>
+  {{ selectedRoles }}
 
+  <ib-select
+    :options="opt"
+  />
+
+<button @click="selectedRoles = []">resset</button>
 </template>
 
 <script>
@@ -10,8 +15,6 @@ const testData1 = [
     id: "1",
     title: "A Education",
     is_category: true,
-    initiallyVisible: true,
-    visible: true,
     isDisabled: false,
     checked: true,
     isChildrenVisible: true,
@@ -20,8 +23,6 @@ const testData1 = [
     id: "2",
     title: "Education 2",
     is_category: true,
-    initiallyVisible: true,
-    visible: true,
     isDisabled: false,
     checked: false,
     isChildrenVisible: true,
@@ -30,8 +31,6 @@ const testData1 = [
     id: "3",
     title: "Education 3",
     is_category: true,
-    initiallyVisible: true,
-    visible: true,
     isDisabled: false,
     checked: false,
     isChildrenVisible: true,
@@ -40,8 +39,6 @@ const testData1 = [
     id: "4",
     title: "Education 4",
     is_category: true,
-    initiallyVisible: true,
-    visible: true,
     isDisabled: false,
     checked: false,
     isChildrenVisible: true,
@@ -50,8 +47,6 @@ const testData1 = [
     id: "5",
     title: "Education 5",
     is_category: true,
-    initiallyVisible: true,
-    visible: true,
     isDisabled: false,
     checked: false,
     isChildrenVisible: true,
@@ -61,8 +56,6 @@ const testData1 = [
     id: "6",
     title: "Education 6",
     is_category: true,
-    initiallyVisible: true,
-    visible: true,
     isDisabled: false,
     checked: false,
     isChildrenVisible: true,
@@ -72,8 +65,6 @@ const testData1 = [
     id: "7",
     title: "Education 7",
     is_category: true,
-    initiallyVisible: true,
-    visible: true,
     isDisabled: false,
     checked: false,
     isChildrenVisible: true,
@@ -83,8 +74,6 @@ const testData1 = [
     id: "8",
     title: "Education 8",
     is_category: true,
-    initiallyVisible: true,
-    visible: true,
     isDisabled: false,
     checked: false,
     isChildrenVisible: true,
@@ -93,8 +82,6 @@ const testData1 = [
     id: "9",
     title: "Education 9",
     is_category: true,
-    initiallyVisible: true,
-    visible: true,
     isDisabled: false,
     checked: false,
     isChildrenVisible: true,
@@ -103,8 +90,6 @@ const testData1 = [
     id: "10",
     title: "Education 10",
     is_category: true,
-    initiallyVisible: true,
-    visible: true,
     isDisabled: false,
     checked: false,
     isChildrenVisible: true,
@@ -113,17 +98,144 @@ const testData1 = [
     id: "11",
     title: "Education 11",
     is_category: true,
-    initiallyVisible: true,
-    visible: true,
     isDisabled: false,
     checked: false,
     isChildrenVisible: true,
   },
 ];
+
+const testData = [
+  {
+    id: "category_id_2",
+    title: "Education",
+    is_category: true,
+    children: [
+      {
+        id: "category_id_19",
+        title: "Test1",
+        is_category: true,
+        children: [
+          {
+            id: 139,
+            title: "Test Course 1",
+            selected: false,
+            isDisabled: false,
+            checked: false,
+          },
+          {
+            id: 300,
+            title: "Course for unenrollmemt test",
+            selected: false,
+            isDisabled: false,
+            checked: false,
+          },
+        ],
+        isDisabled: false,
+        checked: false,
+        isChildrenVisible: true,
+      },
+      {
+        id: 15,
+        title: "History",
+        selected: false,
+        isDisabled: false,
+        checked: false,
+      },
+      {
+        id: 17,
+        title: "Algebra 101",
+        selected: false,
+        isDisabled: false,
+        checked: false,
+      },
+      {
+        id: 29,
+        title: "Music",
+        selected: false,
+        isDisabled: false,
+        checked: false,
+      },
+      {
+        id: 30,
+        title: "Astronomy",
+        selected: false,
+        isDisabled: false,
+        checked: false,
+      },
+      {
+        id: 31,
+        title: "Pharmacology",
+        selected: false,
+        isDisabled: false,
+        checked: false,
+      },
+      {
+        id: 32,
+        title: "German Basics",
+        selected: false,
+        isDisabled: false,
+        checked: false,
+      },
+    ],
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
+  {
+    id: 43234,
+    title: "German Basics 1",
+    selected: false,
+    isDisabled: false,
+    checked: false,
+  },
+  {
+    id: 434,
+    title: "German Basics 2",
+    selected: false,
+    isDisabled: false,
+    checked: false,
+  },
+  {
+    id: 4324,
+    title: "German Basics 3",
+    selected: false,
+    isDisabled: false,
+    checked: false,
+  },
+  {
+    id: 41224,
+    title: "German Basics 4",
+    selected: false,
+    isDisabled: false,
+    checked: false,
+  },
+  {
+    id: 990,
+    title: "German Basics 5",
+    selected: false,
+    isDisabled: false,
+    checked: false,
+  },
+  {
+    id: 122324,
+    title: "German Basics 6",
+    selected: false,
+    isDisabled: false,
+    checked: false,
+  },
+  {
+    id: 9123123,
+    title: "German Basics 7",
+    selected: false,
+    isDisabled: false,
+    checked: false,
+  },
+];
 export default {
   data() {
     return {
-      opt: testData1,
+      opt: testData,
+      selectedRolesVal: []
     }
   },
   components: {IbSelect}

package/src/components/Button/Button.vue

@@ -146,7 +146,7 @@ export default {
       return classList;
     },
     attrs() {
-      const attrsList = { ...removeEvents({ ...this.$attrs }) };
+      const attrsList = removeEvents({ ...this.$attrs }, ['onClick']);
 
       attrsList.class = [...this.classes, attrsList.class];
       attrsList.disabled = this.isDisabled;
@@ -164,7 +164,7 @@ export default {
       return this.linkMethod === "GET" ? "GET" : "POST";
     },
     token() {
-      return document.head.querySelector('meta[name="csrf-token"]').content;
+      return document.head.querySelector('meta[name="csrf-token"]')?.content;
     },
   },
   inheritAttrs: false,

package/src/components/IconButton/IconButton.vue

@@ -85,7 +85,8 @@ export default {
       return classList;
     },
     attrs() {
-      const attrsList = { ...removeEvents({ ...this.$attrs }) };
+      const attrsList = removeEvents({ ...this.$attrs }, ['onClick']);
+
       attrsList.class = [...this.classes, attrsList.class];
 
       if (this.disabledFocus) {

package/src/components/TreeSelect/Option.vue

@@ -275,6 +275,17 @@ export default {
       else return Checkbox;
     },
     isChecked() {
+      if(this.hasChildren) {
+        if (!this.childrenSelectedCount) {
+        return false;
+      } else if (
+          this.childrenSelectedCount > 0 &&
+          this.countOfAllChildren > this.childrenSelectedCount
+        ) {
+          return null; //null will trigger indeterminate stage
+        }
+      }
+
       if (this.option.checked) {
         return true;
       }
@@ -283,19 +294,10 @@ export default {
         return null; //null will trigger indeterminate stage
       }
 
-      if (!this.childrenSelectedCount) {
-        return false;
-      } else if (
-        this.childrenSelectedCount > 0 &&
-        this.countOfAllChildren > this.childrenSelectedCount
-      ) {
-        return null; //null will trigger indeterminate stage
-      }
-
-      return true;
+      return false;
     },
     hasChildren() {
-      return this.option.children && this.option.children.length;
+      return Boolean(this.option.children && this.option.children.length);
     },
     hasVisibleChildren() {
       return this.calculateChildren(this.option, (item) => item.visible);

package/src/components/TreeSelect/Select.vue

@@ -46,11 +46,15 @@
             </span>
           </template>
         </div>
+
         <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"
         >
@@ -212,7 +216,7 @@
                   :html-title="htmlOptionTitle"
                   :show-input="showInputs"
                 >
-                  <select-option
+                <select-option
                     v-show="option.visible"
                     :option="option"
                     :is-toggle="isToggle"
@@ -657,6 +661,8 @@ export default {
       this.$emit("update:modelValue", null);
     },
     clearValue() {
+      console.log('test')
+
       this.clear();
       this.setPreparedValues();
     },
@@ -733,36 +739,34 @@ export default {
       });
     },
     filterFunc(options, filterString) {
-      options.forEach((option) => {
-        let isVisible =
-          option.initiallyVisible &&
-          option.title.toString().toLowerCase().includes(filterString) &&
-          !this.actualBookmarkedOptions[option.id];
+      let visibleOptionsCount = 0;
 
-        if (option.children && option.children.length) {
-          let visibleChildrenCount = this.filterFunc(
-            option.children,
-            filterString
-          );
-
-          if (visibleChildrenCount) {
-            option.isChildrenVisible =
-              !!filterString ||
-              Boolean(Object.keys(this.actualBookmarkedOptions).length);
-            option.isDisabled =
-              visibleChildrenCount < option.children.length &&
-              !this.isBookmarkable;
-          }
+      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);
+              visibleOptionsCount += visibleChildrenCount;
 
-          if (!isVisible) {
-            isVisible = !!visibleChildrenCount;
-          } else if (!visibleChildrenCount) {
-            isVisible = false;
+              if (visibleChildrenCount) {
+                  option.isChildrenVisible = !!filterString || Boolean(Object.keys(this.actualBookmarkedOptions).length);
+                  option.isDisabled = visibleChildrenCount < option.children.length && !this.isBookmarkable;
+              }
+
+              if (!isVisible) {
+                  isVisible = !!visibleChildrenCount;
+              } else if (!visibleChildrenCount) {
+                  isVisible = false;
+              }
           }
-        }
 
-        option.visible = isVisible;
+          option.visible = isVisible;
+
+          if (isVisible) {
+              visibleOptionsCount++;
+          }
       });
+      return visibleOptionsCount;
     },
     submit() {
       this.change();