@avakhula/ui 0.0.288 → 0.0.290

package/package.json

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

package/src/components/Form/Checkbox/Checkbox.scss

@@ -130,12 +130,13 @@ $checkbox-bg-indeterminate: $blue-800;
       }
     }
 
-    &.checkbox-disabled {
-      .checkbox-input {
-        background-color: $checkbox-bg-filed-disabled;
-        border-color: $checkbox-border-filed-disabled;
-      }
-    }
+    // &.checkbox-readonly,
+    // &.checkbox-disabled {
+    //   .checkbox-input {
+    //     background-color: $checkbox-bg-filed-disabled;
+    //     border-color: $checkbox-border-filed-disabled;
+    //   }
+    // }
   }
 
   &.ib-checkbox-indeterminate {
@@ -165,6 +166,7 @@ $checkbox-bg-indeterminate: $blue-800;
     }
   }
 
+  &.ib-checkbox-readonly,
   &.ib-checkbox-disabled {
     cursor: not-allowed;
 
@@ -198,10 +200,6 @@ $checkbox-bg-indeterminate: $blue-800;
       }
     }
 
-    .ib-checkbox-label {
-      color: $checkbox-text-color-disabled;
-    }
-
     &.ib-checkbox-filled,
     &.ib-checkbox-indeterminate{
       .ib-checkbox-input {
@@ -220,6 +218,12 @@ $checkbox-bg-indeterminate: $blue-800;
         }
       }
     }
+
+    &.ib-checkbox-disabled {
+      .ib-checkbox-label {
+        color: $checkbox-text-color-disabled;
+      }
+    }
   }
 
   &.ib-has-error {

package/src/components/Form/Checkbox/Checkbox.vue

@@ -15,7 +15,7 @@
         :checked="checked"
         :disabled="disabled"
         :required="required"
-        @click="onChange"
+        @click.prevent="onChange"
       />
       <div class="ib-checkbox-body">
         <span
@@ -80,6 +80,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
     disabled: {
       type: Boolean,
       default: false,
@@ -112,6 +116,8 @@ export default {
   },
   methods: {
     onChange() {
+      if (this.readonly) return;
+
       this.checked = !this.checked;
       this.$emit("update:modelValue", this.checked);
       this.$emit("input", this.checked);
@@ -124,6 +130,7 @@ export default {
         "ib-has-error": this.error,
         "ib-checkbox-filled": this.checked,
         "ib-checkbox-disabled": this.disabled,
+        "ib-checkbox-readonly": this.readonly,
         "ib-checkbox-indeterminate": this.indeterminate,
       };
     },

package/src/components/TreeSelect/Option.vue

@@ -49,6 +49,7 @@
           :id="'input' + id"
           :is-checked="isChecked(option)"
           :disabled="option.isDisabled"
+          :readonly="option.readonly"
           autocomplete="off"
           autocorrect="off"
           autocapitalize="off"

package/src/components/TreeSelect/Select.stories.js

@@ -21,7 +21,7 @@ const testData = [
     initiallyVisible: true,
     visible: true,
     isDisabled: false,
-    checked: true,
+    readonly: true,
     isChildrenVisible: true,
   },
   {
@@ -31,7 +31,6 @@ const testData = [
     initiallyVisible: true,
     visible: true,
     isDisabled: false,
-    checked: false,
     isChildrenVisible: true,
   },
   {
@@ -41,7 +40,6 @@ const testData = [
     initiallyVisible: true,
     visible: true,
     isDisabled: false,
-    checked: false,
     isChildrenVisible: true,
   },
   {
@@ -51,12 +49,11 @@ const testData = [
     initiallyVisible: true,
     visible: true,
     isDisabled: false,
-    checked: false,
     isChildrenVisible: true,
   },
 ];
 
-const a = [{"id":1,"title":"Moodle","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":2,"title":"Canvas","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":true},{"id":3,"title":"Blackboard","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":4,"title":"D2l","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":5,"title":"Google Classroom","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":9,"title":"Zoom","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":11,"title":"Ellucian Banner","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":12,"title":"Ellucian Colleague Banner","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":16,"title":"Ilias","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":17,"title":"Blackboard Collaborate","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":18,"title":"Sakai","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":20,"title":"Moodle Workplace","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":21,"title":"Totara","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":22,"title":"Qwickly","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":24,"title":"Mongoose Cadence","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":27,"title":"Workday Raas","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":28,"title":"Hubspot","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":29,"title":"Open Lms Work","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":30,"title":"Totara 18","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":31,"title":"Blackboard Data","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false}]
+// const a = [{"id":1,"title":"Moodle","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":2,"title":"Canvas","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":true},{"id":3,"title":"Blackboard","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":4,"title":"D2l","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":5,"title":"Google Classroom","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":9,"title":"Zoom","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":11,"title":"Ellucian Banner","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":12,"title":"Ellucian Colleague Banner","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":16,"title":"Ilias","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":17,"title":"Blackboard Collaborate","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":18,"title":"Sakai","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":20,"title":"Moodle Workplace","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":21,"title":"Totara","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":22,"title":"Qwickly","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":24,"title":"Mongoose Cadence","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":27,"title":"Workday Raas","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":28,"title":"Hubspot","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":29,"title":"Open Lms Work","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":30,"title":"Totara 18","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false},{"id":31,"title":"Blackboard Data","initiallyVisible":true,"visible":true,"isDisabled":false,"checked":false}]
 
 const testData1 = [
   {
@@ -66,7 +63,6 @@ const testData1 = [
     initiallyVisible: true,
     visible: true,
     isDisabled: false,
-    checked: true,
     isChildrenVisible: true,
   },
   {
@@ -76,7 +72,6 @@ const testData1 = [
     initiallyVisible: true,
     visible: true,
     isDisabled: false,
-    checked: false,
     isChildrenVisible: true,
   },
   {
@@ -86,7 +81,6 @@ const testData1 = [
     initiallyVisible: true,
     visible: true,
     isDisabled: false,
-    checked: false,
     isChildrenVisible: true,
   },
   {
@@ -106,7 +100,6 @@ const testData1 = [
     initiallyVisible: true,
     visible: true,
     isDisabled: false,
-    checked: false,
     isChildrenVisible: true,
   },
 
@@ -117,7 +110,6 @@ const testData1 = [
     initiallyVisible: true,
     visible: true,
     isDisabled: false,
-    checked: false,
     isChildrenVisible: true,
   },
 
@@ -128,7 +120,6 @@ const testData1 = [
     initiallyVisible: true,
     visible: true,
     isDisabled: false,
-    checked: false,
     isChildrenVisible: true,
   },
 
@@ -149,7 +140,6 @@ const testData1 = [
     initiallyVisible: true,
     visible: true,
     isDisabled: false,
-    checked: false,
     isChildrenVisible: true,
   },
   {
@@ -159,7 +149,6 @@ const testData1 = [
     initiallyVisible: true,
     visible: true,
     isDisabled: false,
-    checked: false,
     isChildrenVisible: true,
   },
   {
@@ -169,7 +158,6 @@ const testData1 = [
     initiallyVisible: true,
     visible: true,
     isDisabled: false,
-    checked: false,
     isChildrenVisible: true,
   },
 ];
@@ -266,7 +254,7 @@ CustomTrigger.args = {
   placeholder: "Please select",
   ariaLabel: "Search",
   clearButtonMessage: "Clear",
-  options: a,
+  // options: a,
   initialSize: {
     left: 0,
     right: 100,

package/src/components/TreeSelect/Select.vue

@@ -469,7 +469,7 @@ export default {
       } else {
         const result = [];
 
-        const options = newOptions;
+        const options = this.initialOptions;
         Array.prototype.forEach.call(options, (option) => {
           if (option.id !== undefined) result.push(option.id);
         });
@@ -830,7 +830,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) {
@@ -880,6 +880,7 @@ export default {
     manageAll() {
       this.allOptionsIsChecked = !this.allOptionsIsChecked;
       this.traverseTree(this.actualOptions, (option) => {
+        if (option.readonly) return;
         this.registerCheck(option, this.allOptionsIsChecked, false);
       });
     },

package/src/components/TreeSelect/TreeSelect.stories.js

@@ -108,8 +108,6 @@ const testData = [
             selected: false,
             initiallyVisible: true,
             visible: true,
-            isDisabled: false,
-            checked: false,
           },
           {
             id: 300,
@@ -117,14 +115,10 @@ const testData = [
             selected: false,
             initiallyVisible: true,
             visible: true,
-            isDisabled: false,
-            checked: false,
           },
         ],
         initiallyVisible: true,
         visible: true,
-        isDisabled: false,
-        checked: false,
         isChildrenVisible: true,
       },
       {
@@ -133,8 +127,6 @@ const testData = [
         selected: false,
         initiallyVisible: true,
         visible: true,
-        isDisabled: false,
-        checked: false,
       },
       {
         id: 17,
@@ -142,8 +134,6 @@ const testData = [
         selected: false,
         initiallyVisible: true,
         visible: true,
-        isDisabled: false,
-        checked: false,
       },
       {
         id: 29,
@@ -151,8 +141,6 @@ const testData = [
         selected: false,
         initiallyVisible: true,
         visible: true,
-        isDisabled: false,
-        checked: false,
       },
       {
         id: 30,
@@ -160,8 +148,6 @@ const testData = [
         selected: false,
         initiallyVisible: true,
         visible: true,
-        isDisabled: false,
-        checked: false,
       },
       {
         id: 31,
@@ -169,8 +155,6 @@ const testData = [
         selected: false,
         initiallyVisible: true,
         visible: true,
-        isDisabled: false,
-        checked: false,
       },
       {
         id: 32,
@@ -178,14 +162,10 @@ const testData = [
         selected: false,
         initiallyVisible: true,
         visible: true,
-        isDisabled: false,
-        checked: false,
       },
     ],
     initiallyVisible: true,
     visible: true,
-    isDisabled: false,
-    checked: false,
     isChildrenVisible: true,
   },
   {
@@ -194,8 +174,6 @@ const testData = [
     selected: false,
     initiallyVisible: true,
     visible: true,
-    isDisabled: false,
-    checked: false,
   },
   {
     id: 434,
@@ -203,8 +181,6 @@ const testData = [
     selected: false,
     initiallyVisible: true,
     visible: true,
-    isDisabled: false,
-    checked: false,
   },
   {
     id: 4324,
@@ -212,8 +188,6 @@ const testData = [
     selected: false,
     initiallyVisible: true,
     visible: true,
-    isDisabled: false,
-    checked: false,
   },
   {
     id: 41224,
@@ -221,8 +195,6 @@ const testData = [
     selected: false,
     initiallyVisible: true,
     visible: true,
-    isDisabled: false,
-    checked: false,
   },
   {
     id: 990,
@@ -230,8 +202,6 @@ const testData = [
     selected: false,
     initiallyVisible: true,
     visible: true,
-    isDisabled: false,
-    checked: false,
   },
   {
     id: 122324,
@@ -239,8 +209,6 @@ const testData = [
     selected: false,
     initiallyVisible: true,
     visible: true,
-    isDisabled: false,
-    checked: false,
   },
   {
     id: 9123123,
@@ -248,8 +216,6 @@ const testData = [
     selected: false,
     initiallyVisible: true,
     visible: true,
-    isDisabled: false,
-    checked: false,
   },
 ];
 export const Default = Template.bind({});