@avakhula/ui 0.0.33 → 0.0.34-4.1

package/src/components/Form/Checkbox/Checkbox.vue

@@ -1,49 +1,52 @@
 <template>
-  <label
-    v-bind="attrs"
-    :for="id"
-    :tabindex="disabled ? -1 : 0"
-    @keypress.prevent="onChange"
-  >
-    <input
-      tabindex="-1"
-      type="checkbox"
-      :name="name"
-      :id="id"
-      :value="value"
-      :checked="checked"
-      :disabled="disabled"
-      :required="required"
-      @click="onChange"
-    />
-    <div class="ib-checkbox-body">
-      <span
-        v-if="labelPosition === 'left' && label.length"
-        class="ib-checkbox-label"
-        :class="{ 'ib-checkbox-label-left': labelPosition === 'left' }"
-      >
-        <span v-if="required" class="required">*</span>
-        {{ label }}
-      </span>
+  <div role="checkbox" class="ib-checkbox-wrapper" :class="this.$attrs.class" :aria-checked="checked ? true : false">
+    <label
+      v-bind="attrs"
+      :for="id"
+      :tabindex="disabled | disableFocus ? -1 : 0"
+      @click.prevent.stop="onChange"
+      @keypress.prevent="onChange"
+    >
+      <input
+        tabindex="-1"
+        type="checkbox"
+        :name="name"
+        :id="id"
+        :value="value"
+        :disabled="disabled"
+        :required="required"
+        v-model="checked"
+        @click="onChange"
+      />
+      <div class="ib-checkbox-body">
+        <span
+          v-if="labelPosition === 'left' && label.length"
+          class="ib-checkbox-label"
+          :class="{ 'ib-checkbox-label-left': labelPosition === 'left' }"
+        >
+          <span v-if="required" class="required">*</span>
+          {{ label }}
+        </span>
 
-      <span class="ib-checkbox-input">
-        <ib-icon name="checkmark-sharp" v-show="checked && !indeterminate" />
-        <ib-icon
-          :class="'checkbox-undeterminate-icon'"
-          name="remove-sharp"
-          v-show="indeterminate"
-        />
-      </span>
+        <span class="ib-checkbox-input">
+          <ib-icon name="checkmark-sharp" v-show="checked && !indeterminate" />
+          <ib-icon
+            :class="'checkbox-undeterminate-icon'"
+            name="remove-sharp"
+            v-show="indeterminate"
+          />
+        </span>
 
-      <span
-        v-if="labelPosition === 'right' && label?.length"
-        class="ib-checkbox-label"
-      >
-        <span v-if="required" class="required">*</span>
-        {{ label }}
-      </span>
-    </div>
-  </label>
+        <span
+          v-if="labelPosition === 'right' && label?.length"
+          class="ib-checkbox-label"
+        >
+          <span v-if="required" class="required">*</span>
+          {{ label }}
+        </span>
+      </div>
+    </label>
+  </div>
 </template>
 <script>
 import generateUID from "../../../helpers/generateUID";
@@ -71,14 +74,25 @@ export default {
     value: {
       default: 1,
     },
+    modelValue: {
+      type: Boolean,
+    },
     isChecked: {
       type: Boolean,
       default: false,
     },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
     disabled: {
       type: Boolean,
       default: false,
     },
+    disableFocus: {
+      type: Boolean,
+      default: false,
+    },
     required: {
       type: Boolean,
       default: false,
@@ -92,15 +106,22 @@ export default {
     isChecked(value) {
       this.checked = value;
     },
+    modelValue(value) {
+      this.$emit("update:modelValue", this.modelValue);
+      this.checked = value;
+    },
   },
   data() {
     return {
-      checked: this.isChecked,
+      checked: this.modelValue ? this.modelValue : this.isChecked,
     };
   },
   methods: {
-    onChange() {
+    onChange(e) {
+      if (this.disabled || this.readonly) return;
+
       this.checked = !this.checked;
+      this.$emit("update:modelValue", this.checked);
       this.$emit("input", this.checked);
     },
   },
@@ -111,6 +132,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,
       };
     },
@@ -119,8 +141,8 @@ export default {
     },
     attrs() {
       const attrsList = { ...removeEvents({ ...this.$attrs }) };
-
-      attrsList.class = [this.classes, attrsList.class];
+      delete attrsList.class;
+      attrsList.class = this.classes;
 
       return attrsList;
     },
@@ -132,6 +154,6 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import "./Checkbox.scss";
 </style>

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