@avakhula/ui 0.0.503 → 0.0.505-alpha-spa.2

package/src/components/Dropdown/DropdownItem.vue

@@ -1,12 +1,17 @@
 <template>
   <li class="dropdown-item-wrapper">
     <component
-      :is="href ? 'a' : 'div'"
+      :is="component"
       :class="checked ? 'active' : ''"
       v-bind="attrs"
       tabindex="0"
     >
-      <slot ref="slot"></slot>
+      <p>
+        <div class="dropdown-item-icon">
+          <slot name="icon"></slot>
+        </div>
+        <slot ref="slot"></slot>
+      </p>
     </component>
   </li>
 </template>
@@ -21,8 +26,20 @@ export default {
     href: {
       type: String,
     },
+    to: {
+      type: [String, Object],
+    }
   },
   computed: {
+    component() {
+      if (this.href) {
+        return "a";
+      } else if (this.to) {
+        return "router-link";
+      } else {
+        return "div";
+      }
+    },
     attrs() {
       const attrs = {
         class: "ib-dropdown-item",
@@ -32,13 +49,17 @@ export default {
         attrs.href = this.href;
       }
 
+      if (this.to) {
+        attrs.to = this.to;
+      }
+
       return attrs;
     },
   },
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import "../../assets/scss/mixins/dropdown-list-item.scss";
 @include DropdownListItem;
 
@@ -50,8 +71,9 @@ export default {
   display: flex;
   align-items: center;
 
-  .ib-icon {
+  .dropdown-item-icon {
     font-size: 16px;
+    height: 16px;
     color: inherit;
     margin-right: 15px;
   }

package/src/components/Form/CharactersCount.vue

@@ -3,17 +3,13 @@
     <template v-if="!characterLength">
       <p class="val-limit">Max {{ characterLimit }}</p>
     </template>
-    <template v-else-if="characterLimit > characterLength">
-      <p class="val-length">{{ characterLimit - characterLength }}</p>
+    <template v-else-if="characterLimit >= characterLength">
+      <p class="val-length">{{ characterLength }}</p>
       /
       <p class="val-limit">{{ characterLimit }}</p>
     </template>
-    <template v-else-if="characterLimit === characterLength">0</template>
-
     <template v-else>
-      <p class="val-length val-limited">
-        {{ characterLimit - characterLength }}
-      </p>
+      <p class="val-length error">{{ characterLimit - characterLength }}</p>
     </template>
   </div>
 </template>
@@ -51,5 +47,12 @@ $textarea-character-count-limited-color: $red-900;
       color: $textarea-character-count-limited-color;
     }
   }
+
+  .val-length,
+  .val-limit {
+    &.error {
+      color: $textarea-character-count-limited-color;
+    }
+  }
 }
 </style>

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

@@ -1,9 +1,10 @@
 <template>
-  <div role="checkbox" class="ib-checkbox-wrapper" :class="this.$attrs.class" :aria-checked="checked ? true : false">
+  <div role="checkbox" class="ib-checkbox-wrapper" :class="this.$attrs.class">
     <label
       v-bind="attrs"
       :for="id"
       :tabindex="disabled | disableFocus ? -1 : 0"
+      :aria-checked="checked ? true : false"
       @click.prevent.stop="onChange"
       @keypress.prevent="onChange"
     >
@@ -12,12 +13,22 @@
         type="checkbox"
         :name="name"
         :id="id"
-        :value="value"
+        :value="value ?? 1"
         :disabled="disabled"
         :required="required"
         v-model="checked"
         @click="onChange"
       />
+
+      <input
+        v-if="!value && !checked"
+        value="0"
+        type="hidden"
+        :name="name"
+        :disabled="disabled"
+        :required="required"
+      />
+
       <div class="ib-checkbox-body">
         <span
           v-if="labelPosition === 'left' && label.length"
@@ -72,10 +83,10 @@ export default {
       },
     },
     value: {
-      default: 1,
+      type: [String, Number],
     },
     modelValue: {
-      type: Boolean,
+      type: [Boolean, String],
     },
     isChecked: {
       type: Boolean,
@@ -108,20 +119,21 @@ export default {
     },
     modelValue(value) {
       this.$emit("update:modelValue", this.modelValue);
-      this.checked = value;
+      this.checked = value === "0" ? false : Boolean(value);
     },
   },
   data() {
+    const value = this.modelValue
+      ? (this.modelValue === "0" ? false : Boolean(this.modelValue))
+      : this.isChecked;
+
     return {
-      checked: this.modelValue ? this.modelValue : this.isChecked,
+      checked: value,
     };
   },
   methods: {
     onChange(e) {
-      if (this.readonly) {
-        e.preventDefault();
-        return;
-      };
+      if (this.disabled || this.readonly) return;
 
       this.checked = !this.checked;
       this.$emit("update:modelValue", this.checked);
@@ -157,6 +169,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,8 @@
       v-if="labelText.length"
       class="ib-checkbox-group-label"
       :required="required"
+      :info-text="infoText"
+      :tooltip-position="tooltipPosition"
     >
       {{ labelText }}
     </ib-label>
@@ -44,6 +46,17 @@ export default {
       type: String,
       default: "",
     },
+    infoText: {
+      type: String,
+      default: ""
+    },
+    height: {
+      type: String,
+      default: '290px'
+    },
+    tooltipPosition: {
+      type: String
+    }
   },
   components: {
     IbLabel,
@@ -62,6 +75,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