@avakhula/ui 0.0.142 → 0.0.144

package/package.json

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

package/src/App.vue

@@ -1,21 +1,25 @@
 <template>
-  <ib-alert class="info-notification" type="info" show-icon title="twat">
-
-    Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda minus qui reiciendis. Id assumenda dolore
-    laudantium nobis corporis corrupti, rem officiis voluptatum et debitis voluptatem error asperiores, aperiam porro
-    itaque?
-
-    Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda minus qui reiciendis. Id assumenda dolore
-    laudantium nobis corporis corrupti, rem officiis voluptatum et debitis voluptatem error asperiores, aperiam porro
-    itaque?
-  </ib-alert>
+  <div class="test">
+    <div>
+      <ib-radio value="a" label="Item 1" name="Checkbox" v-bind="{}" />
+      <ib-radio isChecked style="margin-left: 15px" value="b" label="Item 2" name="Checkbox" v-bind="{}" />
+    </div>
+  </div>
 </template>
 
 <script>
-import IbAlert from "./components/Alert/Alert.vue"
+import IbRadio from "./components/Form/Radio/Radio.vue";
+
 export default {
   components: {
-    IbAlert
+    IbRadio
   }
 }
-</script>
+
+</script>
+
+<style>
+.test {
+  padding-top: 110vh;
+}
+</style>

package/src/components/Button/button.scss

@@ -157,9 +157,7 @@ $disabled-btn-color: $neutral-500;
       }
 
       &.ib-btn-disabled {
-        &:disabled {
-          background: $ghost-btn-disabled-background;
-        }
+        background: $ghost-btn-disabled-background;
       }
     }
 
@@ -195,9 +193,7 @@ $disabled-btn-color: $neutral-500;
       }
 
       &.ib-btn-disabled {
-        &:disabled {
-          background: $ghostDanger-btn-disabled-background;
-        }
+        background: $ghostDanger-btn-disabled-background;
       }
     }
   }
@@ -209,9 +205,7 @@ $disabled-btn-color: $neutral-500;
   }
 
   &.ib-btn-disabled {
-    &:disabled {
-      background: $disabled-btn-background;
-      color: $disabled-btn-color;
-    }
+    background: $disabled-btn-background;
+    color: $disabled-btn-color;
   }
 }

package/src/components/Form/Radio/Radio.vue

@@ -1,5 +1,5 @@
 <template>
-  <label :class="classes" :for="id">
+  <label :class="classes" :for="id" @click.prevent="onClick">
     <input
       type="radio"
       :name="name"
@@ -9,7 +9,6 @@
       :disabled="disabled"
       ref="radio"
       @input.stop
-      @click="onClick"
       @change="onChange"
     />
     <span class="ib-radio-body" :class="{ 'without-text': !label?.length }">
@@ -62,32 +61,33 @@ export default {
     },
   },
   mounted() {
-    this.$globalEvents.$on("radio:update", (name) => {
-      if (name === this.name) {
-        this.checked = this.$refs.radio?.checked;
+    this.$globalEvents.$on(`radio:update:${this.name}`, (uid) => {
+      if (this.uid !== uid) {
+        this.checked = false;
       }
     });
   },
   data() {
     return {
       checked: this.isChecked,
+      uid: generateUID(),
     };
   },
   methods: {
     onClick() {
       if (!this.disabled) {
-        this.checked = this.$refs.radio?.checked;
+        this.checked = !this.checked;
+        this.$globalEvents.$emit(`radio:update:${this.name}`, this.uid);
         this.$emit("input", this.checked);
         this.$emit("change", this.checked);
-        this.$globalEvents.$emit("radio:update", this.name);
       }
     },
     onChange() {
       if (!this.disabled) {
-        this.checked = this.$refs.radio?.checked;
+        this.checked = !this.checked;
+        this.$globalEvents.$emit(`radio:update:${this.name}`, this.uid);
         this.$emit("change", this.checked);
         this.$emit("input", this.checked);
-        this.$globalEvents.$emit("radio:update", this.name);
       }
     },
   },