@avakhula/ui 0.0.289 → 0.0.290

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.289",
+  "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,6 +21,7 @@ const testData = [
     initiallyVisible: true,
     visible: true,
     isDisabled: false,
+    readonly: true,
     isChildrenVisible: true,
   },
   {

package/src/components/TreeSelect/Select.vue

@@ -459,7 +459,7 @@ export default {
       }
     },
     options(newOptions) {
-      // this.initialOptions = copy(newOptions);
+      this.initialOptions = copy(newOptions);
     },
     initialOptions(newOptions) {
       let isOptionsEqual = true;
@@ -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);
       });
     },