@avakhula/ui 0.0.340 → 0.0.342

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.340",
+  "version": "0.0.342",
   "main": "dist/index.js",
   "module": "dist/index.umd.cjs",
   "source": "src/index.js",
@@ -21,7 +21,6 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.5.4",
     "@vueup/vue-quill": "^1.2.0",
     "mitt": "^3.0.0",
     "vue": "^3.2.45"

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/CheckboxGroup/CheckboxGroup.vue

@@ -7,6 +7,7 @@
       v-if="labelText.length"
       class="ib-checkbox-group-label"
       :required="required"
+      :info-text="infoText"
     >
       {{ labelText }}
     </ib-label>
@@ -44,6 +45,14 @@ export default {
       type: String,
       default: "",
     },
+    infoText: {
+      type: String,
+      default: ""
+    },
+    height: {
+      type: String,
+      default: '290px'
+    }
   },
   components: {
     IbLabel,
@@ -62,6 +71,8 @@ export default {
   .ib-checkbox-group-content {
     display: flex;
     flex-direction: column;
+    flex-wrap: wrap;
+    max-height: v-bind(height);
     .ib-radio:not(:last-child),
     .ib-checkbox:not(:last-child) {
       margin-bottom: 10px;

package/src/components/Form/CheckboxGroup/readme.mdx

@@ -17,6 +17,8 @@ The IbCheckboxGroup component is a wrapper component that helps to group and dis
 | required     | Boolean | false   | If true, a required indicator will be displayed next to the label       |
 | horizontal   | Boolean | false   | If true, the checkboxes or radio buttons will be displayed horizontally |
 | errorMessage | String  | ''      | Responsible for displaying an error                                     |
+| infoText     | String  | ''      | The text that will be displayed inside the tooltip when the information button is hover or have focus. |
+| maxHeight    | String  | '290px' | Max height of container with radio elements.                                |
 
 ### Slots
 

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>

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

@@ -30,12 +30,15 @@ $radio-border-filled-disabled: $neutral-500;
 .ib-radio {
   display: inline-flex;
   cursor: pointer;
+  position: relative;
 
   input {
     opacity: 0;
     position: absolute;
-    top: -100%;
-    right: -100%;
+    width: 1px;
+    height: 1px;
+    z-index: -1;
+
 
     &:focus + .ib-radio-body {
       border-radius: 4px;