@avakhula/ui 0.0.337-alpha.1 → 0.0.338

package/package.json

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

package/src/App.vue

@@ -1,5 +1,9 @@
 <template>
-  <ib-select :options="opt"/>
+  <ib-select :options="opt">
+    <template v-slot:triggerContent="{ selectedCount }">
+        {{ selectedCount }}
+    </template>
+  </ib-select>
 
 </template>
 

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

@@ -15,7 +15,7 @@
         :disabled="disabled"
         :required="required"
         v-model="checked"
-        @click.prevent="onChange"
+        @click="onChange"
       />
       <div class="ib-checkbox-body">
         <span
@@ -116,8 +116,11 @@ export default {
     };
   },
   methods: {
-    onChange() {
-      if (this.readonly) return;
+    onChange(e) {
+      if (this.readonly) {
+        e.preventDefault();
+        return;
+      };
 
       this.checked = !this.checked;
       this.$emit("update:modelValue", this.checked);

package/src/components/Form/CheckboxGroup/CheckboxGroup.vue

@@ -7,7 +7,6 @@
       v-if="labelText.length"
       class="ib-checkbox-group-label"
       :required="required"
-      :info-text="infoText"
     >
       {{ labelText }}
     </ib-label>
@@ -45,14 +44,6 @@ export default {
       type: String,
       default: "",
     },
-    infoText: {
-      type: String,
-      default: ""
-    },
-    height: {
-      type: String,
-      default: '290px'
-    }
   },
   components: {
     IbLabel,
@@ -71,8 +62,6 @@ 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,8 +17,6 @@ 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

@@ -4,7 +4,6 @@
     :class="classes"
     :for="id"
     :aria-checked="checked"
-    @click.prevent="onClick"
   >
     <input
       type="radio"

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

@@ -38,7 +38,6 @@ $radio-border-filled-disabled: $neutral-500;
     width: 1px;
     height: 1px;
 
-
     &:focus + .ib-radio-body {
       border-radius: 4px;
       @include outline(2px);

package/src/components/Panel/Panel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="panel" :class="{ 'panel-error': error }">
+  <div class="ib-panel" :class="{ 'panel-error': error }">
     <div class="panel-head">
       <div class="head-title">
         <slot name="title" />
@@ -60,9 +60,8 @@ $panel-border-color: $gray-200;
 $panel-error-outline-color: $red-800;
 $panel-title-color: $neutral-900;
 $panel-divider-color: $gray-300;
-$description-color: $gray-700;
 
-.panel {
+.ib-panel {
   border: 1px solid $panel-border-color;
   border-radius: 4px;
 
@@ -91,9 +90,25 @@ $description-color: $gray-700;
     }
 
     .head-content {
+      width: 100%;
       @include Ib-H4-regular;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+@import "../../assets/scss/variables/colors.scss";
+@import "../../assets/scss/typography.scss";
+
+$description-color: $gray-700;
+
+.ib-panel {
+  .head-content {
+    width: 100%;
+    @include Ib-H4-regular;
+    p {
       color: $description-color;
-      width: 100%;
     }
   }
 }

package/src/components/TreeSelect/Select.vue

@@ -12,7 +12,7 @@
     <ib-dropdown
       :disabled="isLoading"
       :is-resizable="isResizable"
-      :vertical="vertical"
+      :vertical="verticalVal"
       ref="dropdown"
       @close="onClose"
       @open="onOpen"
@@ -393,10 +393,9 @@ export default {
       type: Boolean,
       default: false,
     },
-    // vertical: {
-    //   type: String,
-    //   default: "bottom"
-    // },
+    vertical: {
+      type: String,
+    },
     emptyMessage: {
       type: String,
       default: "",
@@ -545,7 +544,7 @@ export default {
       actualBookmarkedOptions: {},
       selected: [],
       isOpen: false,
-      vertical: "bottom",
+      verticalVal: this.vertical ?? "bottom",
       allOptionsIsChecked: true,
       hasTreeChildren: false,
       uid: `f${(~~(Math.random() * 1e8)).toString(16)}`,
@@ -942,16 +941,18 @@ export default {
         this.$emit("close", Object.keys(this.selected)[0]);
       }
       this.$emit("blur");
-      this.vertical = "bottom";
+      this.verticalVal = this.vertical ?? "bottom";
     },
     onOpen() {
       const screenHeight = document.documentElement.scrollHeight;
       this.isOpen = true;
 
+      if (this.vertical === "bottom") return;
+
       this.$nextTick(() => {
         const newScreenHeight = document.documentElement.scrollHeight
         if(newScreenHeight > screenHeight) {
-          this.vertical = "top";
+          this.verticalVal = "top";
         }
       })
     }