@avakhula/ui 0.1.10 → 0.1.11

package/package.json

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

package/src/components/Accordion/Accordion.vue

@@ -27,7 +27,7 @@
         :aria-labelledby="'accordion' + uuid"
       >
         <div class="accordion-content-wrapper">
-          <slot name="content"></slot>
+          <slot></slot>
         </div>
       </div>
     </Transition>

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

@@ -69,6 +69,8 @@ $checkbox-bg-indeterminate: $blue-800;
     border-radius: 2px;
     height: 16px;
     width: 16px;
+    min-height: 16px;
+    min-width: 16px;
     border: 1.25px solid;
     border-color: $checkbox-border;
     background-color: $checkbox-bg;
@@ -128,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 {
@@ -163,6 +166,7 @@ $checkbox-bg-indeterminate: $blue-800;
     }
   }
 
+  &.ib-checkbox-readonly,
   &.ib-checkbox-disabled {
     cursor: not-allowed;
 
@@ -196,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 {
@@ -218,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

@@ -1,5 +1,5 @@
 <template>
-  <div role="checkbox" :class="this.$attrs.class" :aria-checked="checked ? true : false">
+  <div role="checkbox" class="ib-checkbox-wrapper" :class="this.$attrs.class" :aria-checked="checked ? true : false">
     <label
       v-bind="attrs"
       :for="id"
@@ -12,10 +12,10 @@
         :name="name"
         :id="id"
         :value="value"
-        :checked="checked"
         :disabled="disabled"
         :required="required"
-        @click="onChange"
+        v-model="checked"
+        @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,
@@ -102,6 +106,7 @@ export default {
       this.checked = value;
     },
     modelValue(value) {
+      this.$emit("update:modelValue", this.modelValue);
       this.checked = value;
     },
   },
@@ -112,6 +117,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 +131,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/IconButton/IconButton.scss

@@ -16,16 +16,22 @@
     &-btn-m {
       width: 36px;
       height: 36px;
+      min-width: 36px;
+      min-height: 36px;
     }
 
     &-btn-s {
       width: 24px;
       height: 24px;
+      min-width: 24px;
+      min-height: 24px;
     }
 
     &-btn-xs {
       width: 16px;
       height: 16px;
+      min-width: 16px;
+      min-height: 16px;
 
       .ib-icon {
         position: absolute;

package/src/components/List.vue

@@ -119,7 +119,7 @@ $item-hover-bg: $gray-100;
     }
   }
 
-  .ib-checkbox {
+  .ib-checkbox-wrapper {
     transition: background-color 0.3s;
 
     .ib-checkbox-body {

package/src/components/Modal/Modal.vue

@@ -284,11 +284,14 @@ body.modal-open {
     @include Ib-H2-medium;
     color: $modal-title-color;
     margin-bottom: 15px;
+    padding-right: 25px;
   }
 
-  .modal-content.without-title {
-    padding-right: 25px;
-    padding-top: 4px;
+  .modal-content {
+    .without-title {
+      padding-right: 25px;
+      padding-top: 4px;
+    }
   }
 
   .modal-close-icon {

package/src/components/Tabs/Tabs.vue

@@ -36,12 +36,23 @@ import IbTabDropdown from "./TabDropdown.vue";
 import getHrefFromId from "../../helpers/getHrefFromID";
 export default {
   name: "IbTabs",
+  props: {
+    selectedTabId: {
+      type: String,
+      default: "",
+    },
+  },
   data() {
     return {
       tabs: [],
-      selectedTab: "",
+      selectedTab: this.selectTabId,
     };
   },
+  watch: {
+    selectedTabId(newId) {
+      this.selectTab(newId);
+    }
+  },
   created() {
     const slotItems = [];
     this.$slots.default().forEach(item => {
@@ -98,6 +109,7 @@ export default {
   components: {
     IbTabDropdown,
   },
+  emits: ["changeTab"]
 };
 </script>
 <style lang="scss" scoped>

package/src/components/Tabs/tabs.scss

@@ -12,7 +12,7 @@
     padding: 0;
     @include Ib-H4-medium;
     position: relative;
-    margin-bottom: 100px;
+    margin-bottom: 15px;
 
     &::after {
       content: '';

package/src/components/Tooltip/Tooltip.vue

@@ -53,7 +53,7 @@ export default {
   padding: 10px;
   max-width: 240px;
   box-shadow: $ib-shadow-1;
-  z-index: 9999;
+  z-index: 10002;
 
   &.ib-tooltip-large {
     box-shadow: $ib-shadow-2;

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

@@ -267,6 +267,10 @@ 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"],
@@ -435,10 +439,13 @@ export default {
         this.setPreparedValues(this.actualOptions, false);
       }
     },
-    modelValue(value) {
-      this.val = value;
-      this.actualOptions = [];
-      this.setPreparedValues();
+    modelValue: {
+      handler(value) {
+        this.val = value;
+        this.actualOptions = [];
+        this.setPreparedValues();
+      },
+      deep: true,
     },
     val(value) {
       if (
@@ -454,15 +461,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);
         });
@@ -516,6 +529,7 @@ export default {
     };
 
     return {
+      initialOptions: copy(this.options),
       val: this.modelValue ? this.modelValue : this.value,
       size: {
         left: (this.initialSize && this.initialSize.left) || 0,
@@ -658,7 +672,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())
@@ -722,6 +736,7 @@ export default {
               option.initiallyVisible =
                 typeof option.visible === "undefined" ? true : option.visible;
               option.visible = option.initiallyVisible;
+              option.readonly = option.readonly ? true : false;
               option.isDisabled = false;
 
               option.checked = this.isMultiple
@@ -822,7 +837,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) {
@@ -872,6 +887,7 @@ export default {
     manageAll() {
       this.allOptionsIsChecked = !this.allOptionsIsChecked;
       this.traverseTree(this.actualOptions, (option) => {
+        if (option.readonly) return;
         this.registerCheck(option, this.allOptionsIsChecked, false);
       });
     },