@avakhula/ui 0.0.350 → 0.0.352

package/package.json

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

package/src/components/Avatar/Avatar.stories.js

@@ -1,5 +1,5 @@
 import Avatar from "./Avatar.vue";
-import { avatarSizes } from "./constants";
+import { avatarSizes, avatarTypes } from "./constants";
 
 export default {
   title: "Avatar",
@@ -9,6 +9,10 @@ export default {
       control: { type: "select" },
       options: Object.values(avatarSizes),
     },
+    type: {
+      control: { type: "select" },
+      options: Object.values(avatarTypes),
+    },
   },
 };
 

package/src/components/Avatar/Avatar.vue

@@ -26,7 +26,7 @@
 
 <script>
 import IbIcon from "../Icon.vue";
-import { avatarSizes } from "./constants";
+import { avatarSizes, avatarTypes } from "./constants";
 
 export default {
   name: "IbAvatar",
@@ -51,10 +51,14 @@ export default {
       type: String,
       default: avatarSizes.M,
     },
+    type: {
+      type: String,
+      default: avatarTypes.CIRCLE,
+    },
   },
   computed: {
     classList() {
-      const classList = ["avatar", `avatar-size-${this.size}`];
+      const classList = ["avatar", `avatar-size-${this.size}`, `avatar-type-${this.type}`];
       return classList;
     },
     validateName() {
@@ -86,15 +90,34 @@ $avatar-border: $blue-200;
   justify-content: center;
   object-fit: cover;
 
+  &.avatar-type-circle {
+    border-radius: 100%;
+  }
+
+  &.avatar-type-square {
+    border-radius: 4px;
+  }
+
   &.avatar-size {
     &-m {
       width: 34px;
+      min-width: 34px;
       height: 34px;
+      min-height: 34px;
     }
 
     &-l {
       width: 74px;
+      min-width: 74px;
       height: 74px;
+      min-height: 74px;
+    }
+
+    &-xl {
+      width: 87px;
+      min-width: 87px;
+      height: 87px;
+      min-height: 87px;
     }
   }
 

package/src/components/Avatar/constants.js

@@ -1,4 +1,10 @@
 export const avatarSizes = {
   M: "m",
   L: "l",
+  XL: "xl",
 };
+
+export const avatarTypes = {
+  SQUARE: "square",
+  CIRCLE: "circle",
+};

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

@@ -12,12 +12,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 +82,10 @@ export default {
       },
     },
     value: {
-      default: 1,
+      type: [String, Number],
     },
     modelValue: {
-      type: Boolean,
+      type: [Boolean, String],
     },
     isChecked: {
       type: Boolean,
@@ -108,12 +118,16 @@ 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: {

package/src/components/Form/DatePicker/DatePicker.vue

@@ -48,7 +48,7 @@
         >
           <input
             class="date-picker-input"
-            :placeholder="placeholder"
+            :placeholder="endDatePlaceholder"
             ref="toDate"
           />
 
@@ -90,6 +90,10 @@ export default {
       type: String,
       default: "",
     },
+    endDatePlaceholder: {
+      type: String,
+      default: "",
+    },
     required: {
       type: Boolean,
       default: false,
@@ -138,7 +142,8 @@ export default {
       this.initFlatpickr();
     },
     modelValue() {
-      this.initFlatpickr();
+      const value = this.modelValue[0] && this.modelValue[1] ? this.modelValue : [];
+      this.flat?.setDate(value, true);
     },
   },
   data() {
@@ -196,7 +201,7 @@ export default {
         if (this.mode === RANGE_MODE) {
           defaultConfig.defaultDate = this.modelValue.length
             ? [this.modelValue[0], this.modelValue[1]]
-            : [this.value[0], this.value[1]];
+            : [this.value?.[0], this.value?.[1]];
         } else {
           defaultConfig.defaultDate = this.modelValue
             ? this.modelValue
@@ -277,6 +282,7 @@ export default {
     IbLabel,
     IbAlert,
   },
+  emits: ["input", "update:modelValue"],
 };
 </script>
 <style lang="scss">

package/src/components/Form/Input/Input.vue

@@ -30,7 +30,7 @@
         @click="clearInput"
         @keypress.enter="clearInput"
         v-if="type !== 'password' && showClearButton"
-        v-show="actualValue?.length"
+        v-show="actualValue?.toString().length"
       >
         <ib-icon name="close-outline"></ib-icon>
       </ib-icon-button>

package/src/components/Form/Label/Label.vue

@@ -1,5 +1,5 @@
 <template>
-  <label :class="classes" :for="for">
+  <label :class="classes" :for>
     <span v-if="required" class="required">* </span>
     <slot></slot>
 

package/src/components/Form/Textarea/Textarea.vue

@@ -57,10 +57,22 @@ export default {
       type: String,
       default: "",
     },
+    value: {
+      type: String,
+      default: "",
+    },
+  },
+  watch: {
+    value() {
+      this.val = this.value;
+    },
+    val() {
+      this.$emit("update:value", this.val);
+    },
   },
   data() {
     return {
-      val: "",
+      val: this.value,
     };
   },
   methods: {
@@ -93,6 +105,7 @@ export default {
     IbAlert,
     IbCharacterCount,
   },
+  emits: ["input", "blur", "update:value"],
   inheritAttrs: false,
 };
 </script>

package/src/components/IconButton/IconButton.scss

@@ -1,6 +1,10 @@
 @import "../../assets/scss/variables/colors.scss";
 @import "../../assets/scss/mixins.scss";
 
+// Disabled button colors
+$disabled-btn-background: $gray-100;
+$disabled-btn-color: $neutral-500;
+
 .ib-icon-button {
   padding: 0;
   display: flex;
@@ -93,6 +97,13 @@
         color: $blue-900;
         background-color: $blue-200;
       }
+
+      &:disabled {
+        background: $disabled-btn-background;
+        color: $disabled-btn-color;
+        cursor: auto;
+        border-color: transparent;
+      }
     }
   }
 }

package/src/components/Panel/Panel.vue

@@ -8,6 +8,19 @@
       <div class="head-content">
         <slot name="head-content" />
       </div>
+
+      <icon-button
+        v-if="showOpenButton"
+        :class="{
+          'toggle-visible-button': true,
+          'active': isOpenVal,
+        }"
+        kind="ghost"
+        type="button"
+        @click="isOpenVal = !isOpenVal"
+      >
+        <icon name="chevron-down-outline" />
+      </icon-button>
     </div>
     <Transition
       name="expand"
@@ -15,7 +28,7 @@
       @after-enter="afterEnter"
       @leave="leave"
     >
-      <div v-show="isOpen" class="panel-body">
+      <div v-show="isOpenVal" class="panel-body">
         <slot name="body"></slot>
       </div>
     </Transition>
@@ -23,12 +36,18 @@
 </template>
 
 <script>
+import IconButton from "../IconButton/IconButton.vue";
+import Icon from "../Icon.vue";
 import expandAnimation from "../../mixins/expandAnimation";
 
 export default {
   name: "IbPanel",
   mixins: [expandAnimation],
   props: {
+    showOpenButton: {
+      type: Boolean,
+      default: false,
+    },
     isOpen: {
       type: Boolean,
       default: true,
@@ -38,6 +57,24 @@ export default {
       default: false,
     },
   },
+  watch: {
+    isOpen() {
+      this.isOpenVal = this.isOpen;
+    },
+    isOpenVal() {
+      this.$emit("update:isOpen", this.isOpenVal);
+    },
+  },
+  data() {
+    return {
+      isOpenVal: this.isOpen,
+    };
+  },
+  components: {
+    IconButton,
+    Icon,
+  },
+  emits: ["update:isOpen"],
 };
 </script>
 
@@ -69,6 +106,20 @@ $panel-divider-color: $gray-300;
     outline: 2px solid $panel-error-outline-color;
   }
 
+  .toggle-visible-button {
+    margin-left: 10px;
+
+    ion-icon {
+      transition: transform 0.5s;
+    }
+
+    &.active {
+      ion-icon {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
   .panel-head {
     display: inline-flex;
     width: 100%;

package/src/components/Tooltip/Tooltip.vue

@@ -53,7 +53,7 @@ export default {
   padding: 10px;
   max-width: 240px;
   box-shadow: $ib-shadow-1;
-  z-index: 10002;
+  z-index: 10051;
 
   &.ib-tooltip-large {
     box-shadow: $ib-shadow-2;