@avakhula/ui 0.0.194 → 0.0.196

package/package.json

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

package/src/components/Accordion/Accordion.scss

@@ -76,10 +76,13 @@ $content-bg: $gray-50;
   .accordion-content {
     border-radius: 0 0 4px 4px;
     border: 1px solid $content-border-color;
-    padding:10px 15px 15px;
     overflow: hidden;
     transition: height 0.3s, padding-top 0.3s, padding-bottom 0.3s;
     background-color: $content-bg;
+    
+    .accordion-content-wrapper {
+      padding: 10px 15px 15px;
+    }
   }
 
   &.active {

package/src/components/Accordion/Accordion.vue

@@ -13,7 +13,9 @@
       @leave="leave"
     >
       <div v-show="isActive" class="accordion-content">
-        <slot name="content"></slot>
+        <div class="accordion-content-wrapper">
+          <slot name="content"></slot>
+        </div>
       </div>
     </Transition>
   </div>

package/src/components/Avatar/Avatar.vue

@@ -1,5 +1,10 @@
 <template>
-  <img v-if="src && !userAvatar" :class="classList" :src="src" :alt="name" />
+  <img
+    v-if="src && !userAvatar"
+    :class="classList"
+    :src="src"
+    :alt="firstName + '' + lastName"
+  />
 
   <div
     v-else-if="src && userAvatar"
@@ -10,7 +15,7 @@
     }"
   ></div>
 
-  <div v-else-if="validateName" class="empty-avatar" :class="classList">
+  <div v-else-if="!validateName" class="empty-avatar" :class="classList">
     <ib-icon name="camera-outline" />
   </div>
 
@@ -26,7 +31,11 @@ import { avatarSizes } from "./constants";
 export default {
   name: "IbAvatar",
   props: {
-    name: {
+    firstName: {
+      type: String,
+      default: "",
+    },
+    lastName: {
       type: String,
       default: "",
     },
@@ -49,14 +58,13 @@ export default {
       return classList;
     },
     validateName() {
-      return this.name?.trim().split(" ").length < 2;
+      return (
+        this.firstName?.trim().length !== 0 &&
+        this.lastName?.trim().length !== 0
+      );
     },
     initials() {
-      const words = this.name.split(" ");
-
-      return words.length === 1
-        ? (words[0][0] + words[0][1]).toUpperCase()
-        : (words[0][0] + words[1][0]).toUpperCase();
+      return this.firstName[0].toUpperCase() + this.lastName[0].toUpperCase();
     },
   },
   components: {

package/src/components/Form/Input/Input.vue

@@ -250,9 +250,6 @@ export default {
     value(newVal) {
       this.actualValue = newVal;
     },
-    modelValue(newVal) {
-      this.actualValue = newVal;
-    },
     disabled(newVal) {
       this.$globalEvents.$emit(`label:disabled:${this.id}`, newVal);
     },

package/src/components/Form/Radio/radio.scss

@@ -15,6 +15,7 @@ $radio-border: $gray-500;
 $radio-border-hover: $blue-300;
 $radio-border-active: $blue-200;
 $radio-border-disabled: $neutral-500;
+$radio-text-disabled: $neutral-500;
 $radio-border-error: $red-800;
 $radio-border-error-hover: $red-800;
 $radio-bg-error-hover: $red-50;
@@ -148,7 +149,7 @@ $radio-border-filled-disabled: $neutral-500;
     }
 
     .ib-radio-label {
-      color: $radio-text-disabled;
+      border-color: $radio-text-disabled;
     }
   }
 

package/src/components/TreeSelect/Select.vue

@@ -93,7 +93,7 @@
               :is-multiple="isMultiple"
               :is-bookmarkable="true"
               :is-bookmarked="true"
-              @check="onCheck"
+              @check="registerCheck"
               @toggle-bookmark="toggleBookmark"
               :uid="uid"
               :only-end-nodes="onlyEndNodes"
@@ -151,7 +151,7 @@
                 :name="actualName"
                 :parent-auto-check="parentAutoCheck"
                 :is-multiple="isMultiple"
-                @check="onCheck"
+                @check="registerCheck"
                 @toggle-bookmark="toggleBookmark"
                 :uid="uid"
                 :only-end-nodes="onlyEndNodes"
@@ -214,7 +214,7 @@
                     :parent-auto-check="parentAutoCheck"
                     :is-multiple="isMultiple"
                     :is-bookmarkable="isBookmarkable"
-                    @check="onCheck"
+                    @check="registerCheck"
                     @toggle-bookmark="toggleBookmark"
                     :uid="uid"
                     :only-end-nodes="onlyEndNodes"
@@ -765,18 +765,6 @@ export default {
     checkIfOptionsChecked(options) {
       return options.every((option) => option.checked);
     },
-    onCheck(option, isChecked, isDirectChild) {
-      this.registerCheck(option, isChecked, isDirectChild);
-      const values = Object.keys(this.selected);
-
-      if (this.isMultiple) {
-        this.$emit("update:modelValue", values);
-        this.$emit("input", values);
-      } else {
-        this.$emit("update:modelValue", values[0]);
-        this.$emit("input", values[0]);
-      }
-    },
     registerCheck(option, isChecked, isDirectChild) {
       if (isChecked) {
         option.checked = true;
@@ -785,6 +773,8 @@ export default {
             !(this.onlyEndNodes && option.children && option.children.length)
           ) {
             this.selected[option.id] = option;
+            this.$emit("update:modelValue", Object.keys(this.selected));
+            this.$emit("input", Object.keys(this.selected));
           }
         } else {
           const selectedOptionKey = Object.keys(this.selected)[0];
@@ -799,6 +789,8 @@ export default {
       } else {
         delete this.selected[option.id];
         option.checked = false;
+        this.$emit("update:modelValue", Object.keys(this.selected));
+        this.$emit("input", Object.keys(this.selected));
       }
 
       this.toggleDuplicateOptions(this.actualOptions, option.id, isChecked);
@@ -823,9 +815,6 @@ export default {
       this.traverseTree(this.actualOptions, (option) => {
         this.registerCheck(option, this.allOptionsIsChecked, false);
       });
-
-      this.$emit("update:modelValue", Object.keys(this.selected));
-      this.$emit("input", Object.keys(this.selected));
     },
     traverseTree(tree, callback) {
       tree.forEach((option) => {