@avakhula/ui 0.0.505 → 0.0.506-alpha-spa.1

package/src/components/Chips/Chips.vue

@@ -0,0 +1,125 @@
+<template>
+  <button
+    :class="{
+      'ib-chips': true,
+      'ib-chips-active': active,
+      'ib-chips-error': error,
+      'ib-chips-disabled': disabled,
+    }"
+    :disabled="disabled"
+  >
+    <span v-if="hasIcon" class="ib-chips-icon-wrapper">
+      <slot class="ib-chips-icon" name="icon" />
+    </span>
+
+    <slot />
+
+    <span class="ib-chips-close-wrapper" v-if="showCloseIcon">
+      <icon class="ib-chips-icon" name="close-outline" />
+    </span>
+  </button>
+</template>
+
+<script>
+import Icon from "../Icon.vue";
+
+export default {
+  props: {
+    showCloseIcon: {
+      type: Boolean,
+      default: false,
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    error: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    hasIcon() {
+      return this.$slots?.icon;
+    },
+  },
+  components: {
+    Icon,
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "../../assets/scss/variables/colors.scss";
+@import "../../assets/scss/typography.scss";
+@import "../../assets/scss/mixins.scss";
+
+.ib-chips {
+  @include Ib-H4-medium;
+  padding: 8.5px 10px;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  background-color: $gray-100;
+  color: $neutral-600;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  .ib-chips-close-wrapper,
+  .ib-chips-icon-wrapper {
+    width: 16px;
+    height: 16px;
+  }
+
+  .ib-chips-icon-wrapper {
+    margin-right: 5px;
+  }
+  .ib-chips-close-wrapper {
+    margin-left: 5px;
+  }
+
+  .ib-chips-icon {
+    color: inherit;
+    font-size: 16px;
+  }
+
+  &.ib-chips-active {
+    background-color: $blue-200;
+    color: $blue-800;
+  }
+
+  &.ib-chips-error {
+    border-color: $red-800;
+    color: $red-800;
+    background-color: $red-50;
+  }
+
+  &.ib-chips-disabled {
+    border-color: transparent!important;
+    color: $neutral-500!important;
+    background-color: $gray-100!important;
+    cursor: default;
+  }
+
+  &:hover {
+    border-color: $blue-300;
+    background-color: $blue-100;
+    color: $blue-700;
+  }
+
+  &:active {
+    border-color: transparent;
+    background-color: $blue-200;
+    color: $blue-900;
+  }
+
+  &:focus {
+    @include focus(2px);
+  }
+}
+</style>

package/src/components/Dropdown/Dropdown.vue

@@ -21,23 +21,46 @@
       <slot name="trigger" v-bind:is-opened="isOpenedState"></slot>
     </span>
 
-    <div
-      ref="body"
-      :class="'ib-dropdown-menu ' + classes"
-      v-if="!destroyOnHide || isOpenedState"
-      v-show="isOpenedState"
+    <Teleport
+      :to="attachToBody ? 'body' : attachTo"
+      v-if="attachToBody || attachTo"
     >
-      <div class="dropdown-body" @click="closeOnClickIfRequired">
-        <slot name="body" v-bind:is-opened-state="isOpenedState"></slot>
-
-        <span class="close" @click="close" v-if="showCloseIcon">
-          <slot name="close"></slot>
-        </span>
+      <div
+        ref="body"
+        :class="'ib-dropdown-menu is-teleported ' + classes"
+        v-if="!destroyOnHide || isOpenedState"
+        v-show="isOpenedState"
+      >
+        <div class="dropdown-body" @click="closeOnClickIfRequired">
+          <slot name="body" v-bind:is-opened-state="isOpenedState"></slot>
+          <span class="close" @click="close" v-if="showCloseIcon">
+            <slot name="close"></slot>
+          </span>
+        </div>
+        <div class="footer-slot">
+          <slot name="footer"></slot>
+        </div>
       </div>
-      <div class="footer-slot">
-        <slot name="footer"></slot>
+    </Teleport>
+
+    <template v-else>
+      <div
+        ref="body"
+        :class="'ib-dropdown-menu ' + classes"
+        v-if="!destroyOnHide || isOpenedState"
+        v-show="isOpenedState"
+      >
+        <div class="dropdown-body" @click="closeOnClickIfRequired">
+          <slot name="body" v-bind:is-opened-state="isOpenedState"></slot>
+          <span class="close" @click="close" v-if="showCloseIcon">
+            <slot name="close"></slot>
+          </span>
+        </div>
+        <div class="footer-slot">
+          <slot name="footer"></slot>
+        </div>
       </div>
-    </div>
+    </template>
 
     <div class="before" @click="close">
       <slot name="before"></slot>
@@ -55,6 +78,7 @@ import {
 import { EVENT_NAME_CLICK } from "../../constants/events";
 import { OutsideDirective as Outside } from "../../directives/outside/outside";
 import { verticalPosition, horizontalPosition } from "./constants";
+import { computePosition, flip, shift, offset } from "@floating-ui/dom";
 
 export default {
   name: "IbDropdown",
@@ -95,6 +119,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    attachToBody: {
+      type: Boolean,
+      default: false,
+    },
+    attachTo: {
+      type: String,
+      default: null,
+    },
   },
   watch: {
     isOpened(value) {
@@ -122,6 +154,39 @@ export default {
     };
   },
   methods: {
+    async updatePosition() {
+      const trigger = this.$refs.dropdown;
+      const body = this.$refs.body;
+
+      if (!trigger || !body) return;
+
+      const placementMap = {
+        bottom: { v: "bottom", h: "left" },
+        top: { v: "top", h: "left" },
+      };
+
+      const verticalPlacement = this.vertical === "top" ? "top" : "bottom";
+      const horizontalAlignment =
+        this.horizontal === "right"
+          ? "end"
+          : this.horizontal === "center"
+          ? ""
+          : "start";
+
+      const placement = horizontalAlignment
+        ? `${verticalPlacement}-${horizontalAlignment}`
+        : verticalPlacement;
+
+      const { x, y } = await computePosition(trigger, body, {
+        placement,
+        middleware: [offset(3), flip(), shift({ padding: 8 })],
+      });
+
+      Object.assign(body.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+    },
     onKeydown(e) {
       if (e.keyCode === ENTER_KEY_CODE || e.keyCode === SPACE_KEY_CODE) {
         e.preventDefault();
@@ -147,14 +212,16 @@ export default {
       }
     },
     open() {
-      if (this.disabled) {
-        return;
-      }
-
-      this.isOpenedState = true;
-      this.$emit("open");
-      this.$globalEvents.$emit("dropdown:open", this);
-    },
+       if (this.disabled) return;
+       this.isOpenedState = true;
+       this.$emit('open');
+       this.$globalEvents.$emit('dropdown:open', this);
+       this.$nextTick(() => {
+         if (this.attachToBody || this.attachTo) {
+           this.updatePosition();
+         }
+       });
+     },
     close() {
       if (this.isOpenedState) {
         if (this.disabled) {
@@ -250,9 +317,12 @@ $menu-bg: $white;
   position: absolute;
   display: block;
   background-color: $menu-bg;
-  min-width: 100%;
   width: fit-content;
 
+  &.is-teleported {
+    position: fixed;
+  }
+
   .dropdown-body {
     width: max-content;
     min-width: 100%;

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 v-show="$slots.icon" 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/Dropdown/DropdownList.vue

@@ -1,11 +1,13 @@
 <template>
-  <div class="dropdown-list-wrapper">
+  <div class="dropdown-list-wrapper" :class="class">
     <ib-dropdown
       :horizontal="horizontal"
       :vertical="vertical"
       :isOpened="isOpened"
       :closeOnClick="closeOnClick"
       :disabled="disabled"
+      :attachToBody="attachToBody"
+      :attachTo="attachTo"
       v-bind="$attrs"
       ref="dropdown"
       @all="proxyEvents"
@@ -50,6 +52,18 @@ export default {
       type: Boolean,
       default: false,
     },
+    class: {
+      type: String,
+      default: "",
+    },
+    attachToBody: {
+      type: Boolean,
+      default: false,
+    },
+    attachTo: {
+      type: String,
+      default: null,
+    },
   },
   methods: {
     proxyEvents(eventInfo) {

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,11 @@
 <template>
-  <div role="checkbox" class="ib-checkbox-wrapper" :class="this.$attrs.class" :aria-checked="checked ? true : false">
+  <div class="ib-checkbox-wrapper" :class="this.$attrs.class">
     <label
       v-bind="attrs"
+      role="checkbox"
       :for="id"
       :tabindex="disabled | disableFocus ? -1 : 0"
+      :aria-checked="checked ? true : false"
       @click.prevent.stop="onChange"
       @keypress.prevent="onChange"
     >
@@ -12,12 +14,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 +84,10 @@ export default {
       },
     },
     value: {
-      default: 1,
+      type: [String, Number],
     },
     modelValue: {
-      type: Boolean,
+      type: [Boolean, String],
     },
     isChecked: {
       type: Boolean,
@@ -108,20 +120,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 +170,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