@avakhula/ui 0.0.351 → 0.0.353

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.351",
+  "version": "0.0.353",
   "main": "dist/index.js",
   "module": "dist/index.umd.cjs",
   "source": "src/index.js",
@@ -11,7 +11,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port 3006",
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --ignore-path .gitignore",
@@ -23,6 +23,7 @@
   "dependencies": {
     "@vueup/vue-quill": "^1.2.0",
     "mitt": "^3.0.0",
+    "quill-placeholder-module": "^0.3.1",
     "vue": "^3.2.45"
   },
   "devDependencies": {
@@ -60,6 +61,6 @@
     "vite": "^4.0.0",
     "vitest": "^0.28.4",
     "vue-loader": "^16.8.3",
-    "vue-tel-input": "^8.1.1"
+    "vue-tel-input": "^9.1.4"
   }
 }

package/src/App.vue

@@ -1,76 +1,20 @@
 <template>
-  <ib-select :options="opt" :is-multiple="false"
-             :show-clear-button="false" :style="{ width: '400px' }">
-    <template v-slot:triggerContent="{ selectedCount }">
-        {{ selectedCount }}
+  <chips :active="true" @click="() => console.log('hello click')">
+    <template #icon>
+      <icon name="people-outline" />
     </template>
-  </ib-select>
-
-  <ib-phone-input></ib-phone-input>
-
-
+    Users
+  </chips>
 </template>
 
 <script>
-import IbSelect from "./components/TreeSelect/Select.vue";
-import label from "@/components/Form/Label/Label.vue";
-import {IbCheckboxGroup} from "./index.js";
-import {IbRadio} from "./index.js";
-import IbToggle from "@/components/Form/Toggle/Toggle.vue";
-import {IbPhoneInput} from "./index.js";
-const testData1 = [
-  {
-    disable: false,
-    active: false,
-    id: "2024-06-12 23:59:59.999999",
-    title: "One Day",
-    isDisabled: false,
-    showTooltipByDefault: true
-  },
-  {
-    disable: false,
-    active: false,
-    id: "2024-06-18 23:59:59.999999",
-    title: "One Week",
-    isDisabled: false
-  },
-  {
-    disable: false,
-    active: false,
-    id: "2024-06-25 23:59:59.999999",
-    title: "Two Weeks",
-    isDisabled: true
-  },
-  {
-    disable: false,
-    active: false,
-    id: "2024-07-11 23:59:59.999999",
-    title: "One Month",
-    isDisabled: true,
-    disableTooltip: 'disable 123',
-    showTooltipByDefault: true
-  },
-  {
-    disable: false,
-    active: true,
-    id: "2025-02-01 23:59:59.999999",
-    title: "All Time",
-    isDisabled: true,
-    disableTooltip: 'disable 123'
-  }
-]
+import Chips from "./components/Chips/Chips.vue";
+import Icon from "./components/Icon.vue";
 export default {
-  computed: {
-    label() {
-      return label
-    }
+  components: {
+    Chips,
+    Icon,
   },
-  data() {
-    return {
-      opt: testData1,
-      checked: '1'
-    }
-  },
-  components: {IbToggle, IbSelect, IbCheckboxGroup, IbRadio, IbPhoneInput}
-}
-</script>
+};
+</script>
+

package/src/components/Alert/Alert.vue

@@ -6,6 +6,7 @@
         <b v-if="title?.length" class="ib-alert-title">
           {{ title }}
         </b>
+        <slot name="title"></slot>
       </span>
 
       <span class="text-content">
@@ -54,6 +55,10 @@ export default {
       type: String,
       default: "",
     },
+    additionalTitleText: {
+      type: String,
+      default: "",
+    },
   },
   mounted() {
     this.checkHeight();

package/src/components/Alert/alert.scss

@@ -82,6 +82,7 @@ $alert-success-secondary-color: $green-50;
 
     .text-content {
       @include Ib-H5-regular;
+      margin-left: 3px;
     }
 
     &.large {
@@ -109,6 +110,7 @@ $alert-success-secondary-color: $green-50;
         margin-bottom: 5px;
         padding-left: 0!important;
         word-break: break-word;
+        margin-left: 3px;
       }
 
       & + .close-button {
@@ -138,10 +140,13 @@ $alert-success-secondary-color: $green-50;
   }
 
   &-title {
-    margin-right: 5px;
     @include Ib-H4-medium;
   }
 
+  &-additional-text {
+    margin-right: 5px;
+  }
+
   &-icon {
     display: inline-block;
     font-size: 20px;

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/Chips/Chips.stories.js

@@ -0,0 +1,30 @@
+import IbChips from "./Chips.vue";
+import Icon from "../Icon.vue";
+
+export default {
+title: "Chips",
+  component: IbChips,
+}
+
+const Template = (args) => ({
+  components: { IbChips },
+  setup() {
+    return { args };
+  },
+  template: '<ib-chips v-bind="args">Total Visits: 0-20</ib-chips>',
+});
+
+const TemplateWithIcon = (args) => ({
+  components: { IbChips, Icon },
+  setup() {
+    return { args };
+  },
+  template: '<ib-chips v-bind="args"><template #icon><icon name="people-outline" /></template>Users</ib-chips>',
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const ChipsWithIcon = TemplateWithIcon.bind({});
+ChipsWithIcon.args = {};
+

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/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,12 +119,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

@@ -18,11 +18,15 @@
           {{ label }}
         </ib-label>
         <div class="input-wrapper" @click="open" :class="{ active: isOpen }">
-          <input
-            :placeholder="placeholder"
-            ref="date"
-            class="date-picker-input"
-          />
+          <label :aria-label="ariaLabel">
+            <input
+              :placeholder="placeholder"
+              :name="name"
+              ref="date"
+              id="date"
+              class="date-picker-input"
+            />
+          </label>
 
           <ib-icon name="today-outline" class="calendar-icon" />
         </div>
@@ -46,12 +50,14 @@
           @click="openEndDate"
           :class="{ active: isOpenEndDate }"
         >
-          <input
-            class="date-picker-input"
-            :placeholder="placeholder"
-            ref="toDate"
-          />
-
+          <label :aria-label="endDateAriaLabel">
+            <input
+              class="date-picker-input"
+              :placeholder="endDatePlaceholder"
+              @keydown="onKeydownEndField"
+              ref="toDate"
+            />
+          </label>
           <ib-icon name="today-outline" class="calendar-icon" />
         </div>
 
@@ -90,6 +96,10 @@ export default {
       type: String,
       default: "",
     },
+    endDatePlaceholder: {
+      type: String,
+      default: "",
+    },
     required: {
       type: Boolean,
       default: false,
@@ -102,6 +112,14 @@ export default {
       type: String,
       default: SINGLE_MODE,
     },
+    ariaLabel: {
+      type: String,
+      required: true,
+    },
+    endDateAriaLabel: {
+      type: String,
+      required: true,
+    },
     label: {
       type: String,
       default: "",
@@ -138,7 +156,10 @@ export default {
       this.initFlatpickr();
     },
     modelValue() {
-      this.initFlatpickr();
+      if (JSON.stringify(this.modelValue) === JSON.stringify(this.data)) return;
+
+      const value = this.modelValue[0] && this.modelValue[1] ? this.modelValue : [];
+      this.flat?.setDate(value, true);
     },
   },
   data() {
@@ -196,7 +217,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
@@ -227,6 +248,11 @@ export default {
         this.close();
       }
     },
+    onKeydownEndField(e) {
+      if (e.key === "ArrowDown") {
+        this.flat.selectedDateElem.focus();
+      }
+    },
     triggerChange() {
       setTimeout(() => {
         if (this.pickerOptions.mode === "range") {
@@ -277,6 +303,7 @@ export default {
     IbLabel,
     IbAlert,
   },
+  emits: ["input", "update:modelValue"],
 };
 </script>
 <style lang="scss">