@avakhula/ui 0.0.341 → 0.0.342

package/package.json

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

package/src/App.vue

@@ -5,10 +5,45 @@
     </template>
   </ib-select>
 
+
+  <ib-checkbox-group
+      label-text="label"
+      info-text="info"
+      required
+  >
+    <ib-radio
+        :value="'1'"
+        name="connection_id"
+        dusk="active-radio-button"
+        label="text 1"
+        id="1"
+        v-model="checked"
+    />
+    <ib-radio
+        :value="'2'"
+        name="connection_id"
+        dusk="active-radio-button"
+        label="text 2"
+        id="2"
+        v-model="checked"
+    />
+    <ib-radio
+        :value="'3'"
+        name="connection_id"
+        dusk="active-radio-button"
+        label="text 3"
+        id="3"
+        v-model="checked"
+    />
+  </ib-checkbox-group>
+
 </template>
 
 <script>
 import IbSelect from "./components/TreeSelect/Select.vue";
+import label from "@/components/Form/Label/Label.vue";
+import {IbCheckboxGroup} from "./index.js";
+import {IbRadio} from "./index.js";
 const testData1 = [
   {
     id: "1",
@@ -125,11 +160,17 @@ const testData1 = [
   },
 ];
 export default {
+  computed: {
+    label() {
+      return label
+    }
+  },
   data() {
     return {
       opt: testData1,
+      checked: '1'
     }
   },
-  components: {IbSelect}
+  components: {IbSelect, IbCheckboxGroup, IbRadio}
 }
 </script>

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

@@ -3,19 +3,17 @@
     role="radio"
     :class="classes"
     :for="id"
-    :aria-checked="checked"
-    @click.prevent="onClick"
+    :aria-checked="isChecked"
   >
     <input
       type="radio"
       :name="name"
       :id="id"
       :value="value"
-      :checked="checked"
+      :checked="isChecked"
       :disabled="disabled"
       ref="radio"
-      @input.stop
-      @change="onChange"
+      @change="checkHandler"
     />
     <span class="ib-radio-body" :class="{ 'without-text': !label?.length }">
       <span class="ib-radio-input"></span>
@@ -29,11 +27,8 @@ import generateUID from "../../../helpers/generateUID";
 
 export default {
   name: "IbRadio",
-  model: {
-    prop: "isChecked",
-    event: "input",
-  },
   props: {
+    modelValue: '',
     label: String,
     error: {
       type: Boolean,
@@ -52,50 +47,39 @@ export default {
       type: String,
       required: true,
     },
-    isChecked: {
-      type: Boolean,
-      default: false,
-    },
     disabled: {
       type: Boolean,
       default: false,
     },
   },
-  watch: {
-    isChecked(value) {
-      this.checked = value;
-    },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      checked: false,
+      uid: generateUID(),
+    };
   },
   mounted() {
+    this.checked = this.isChecked;
     this.$globalEvents.$on(`radio:update:${this.name}`, (uid) => {
       if (this.uid !== uid) {
         this.checked = false;
       }
     });
   },
-  data() {
-    return {
-      checked: this.isChecked,
-      uid: generateUID(),
-    };
+  watch: {
+    isChecked(val) {
+      this.checked = val;
+    },
   },
   methods: {
-    onClick() {
+    checkHandler($event) {
+      this.$emit('update:modelValue', $event.target.value)
       if (!this.disabled) {
         this.checked = !this.checked;
         this.$globalEvents.$emit(`radio:update:${this.name}`, this.uid);
-        this.$emit("input", this.checked);
-        this.$emit("change", this.checked);
       }
-    },
-    onChange() {
-      if (!this.disabled) {
-        this.checked = !this.checked;
-        this.$globalEvents.$emit(`radio:update:${this.name}`, this.uid);
-        this.$emit("change", this.checked);
-        this.$emit("input", this.checked);
-      }
-    },
+    }
   },
   computed: {
     classes() {
@@ -106,6 +90,9 @@ export default {
         "radio-disabled": this.disabled,
       };
     },
+    isChecked() {
+      return this.modelValue === this.value
+    }
   },
 };
 </script>