@avakhula/ui 0.0.352 → 0.0.353

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.352",
+  "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/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"
     >

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="endDatePlaceholder"
-            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>
 
@@ -106,6 +112,14 @@ export default {
       type: String,
       default: SINGLE_MODE,
     },
+    ariaLabel: {
+      type: String,
+      required: true,
+    },
+    endDateAriaLabel: {
+      type: String,
+      required: true,
+    },
     label: {
       type: String,
       default: "",
@@ -142,6 +156,8 @@ export default {
       this.initFlatpickr();
     },
     modelValue() {
+      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);
     },
@@ -232,6 +248,11 @@ export default {
         this.close();
       }
     },
+    onKeydownEndField(e) {
+      if (e.key === "ArrowDown") {
+        this.flat.selectedDateElem.focus();
+      }
+    },
     triggerChange() {
       setTimeout(() => {
         if (this.pickerOptions.mode === "range") {

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

@@ -7,7 +7,7 @@
 
       <input
         v-bind="attrs"
-        v-model="actualValue"
+        v-model.trim="actualValue"
         ref="field"
         :aria-invalid="hasErrorState ? true : false"
         :readonly="readonly"
@@ -23,7 +23,7 @@
       <ib-icon-button
         kind="ghost"
         class="button-clear"
-        :disabled="readonly || disabled"
+        :disabled="disabled"
         :help-text="clearButtonMessage"
         prevent-default
         type="button"

package/src/components/Form/PhoneInput/PhoneInput.vue

@@ -8,9 +8,9 @@
     v-model="phone"
     v-bind="$attrs"
     @country-changed="countryChanged"
-    :input-options="{ name: inputName, id: inputName }"
+    :input-options="{ name: inputName, id: inputName, autocomplete: 'off' }"
     :auto-default-country="autoDefaultCountry"
-    :dropdown-options="{ showSearchBox: true, showFlags: true }"
+    :dropdown-options="{ showSearchBox: true, showFlags: true, tabindex: 0 }"
     :defaultCountry="defaultCountry"
     :ignoredCountries="ignoredCountries"
     :class="{ error: error || errorMessage.length }"
@@ -24,14 +24,19 @@
 </template>
 
 <script>
-import { VueTelInput } from "vue-tel-input";
 import IbIcon from "../../Icon.vue";
 import IbAlert from "../../Alert/Alert.vue";
 import { OutsideDirective as Outside } from "../../../directives/outside/outside";
+import { VueTelInput } from 'vue-tel-input';
+import 'vue-tel-input/vue-tel-input.css'
 
 export default {
   directives: { Outside },
   props: {
+    modelValue: {
+      type: String
+    },
+    value: String,
     inputName: {
       type: String,
       default: "phone",
@@ -40,10 +45,6 @@ export default {
       type: Boolean,
       default: true,
     },
-    value: {
-      type: String,
-      default: "",
-    },
     ignoredCountries: {
       type: Array,
       default: () => [],
@@ -57,6 +58,7 @@ export default {
       default: "",
     },
   },
+  emits: ['update:modelValue', 'onReady'],
   components: {
     VueTelInput,
     IbAlert,
@@ -65,16 +67,24 @@ export default {
   data() {
     return {
       vueTel: null,
-      phone: "",
       dialCode: "",
       defaultCountry: "US",
+      allowChange: false
     };
   },
   mounted() {
     this.vueTel = this.$refs.vueTel;
 
-    if (this.value) {
-      this.phone = this.value[0] === "+" ? this.value : "+" + this.value;
+    this.$emit('onReady');
+  },
+  computed: {
+    phone: {
+      get() {
+        return this.modelValue
+      },
+      set(value) {
+        this.$emit('update:modelValue', value)
+      }
     }
   },
   methods: {
@@ -83,15 +93,11 @@ export default {
         this.vueTel.choose(value);
       });
 
-      this.phone = "+" + data.dialCode;
-
-      // if (!this.phone || this.phone.length - 1 < this.dialCode.length) {
-      //   console.log('1')
-      //   this.phone = "+" + data.dialCode;
-      // } else if (this.dialCode) {
-      //   console.log(2)
-      //   this.phone = this.phone.replace(this.dialCode, data.dialCode);
-      // }
+      if (!this.phone || this.phone.length - 1 < this.dialCode.length) {
+        this.phone = "+" + data.dialCode;
+      } else if (this.dialCode) {
+        this.phone = this.phone.replace(this.dialCode, data.dialCode);
+      }
       this.dialCode = data.dialCode;
     },
     clickOutside() {
@@ -105,5 +111,4 @@ export default {
 
 <style lang="scss">
 @import "./phoneInput.scss";
-</style>
-<style src="vue-tel-input/vue-tel-input.css"></style>
+</style>

package/src/components/Form/PhoneInput/phoneInput.scss

@@ -100,11 +100,10 @@ $dropdown-item-selected-border-color: $blue-900;
     .vti__input {
       background-color: transparent;
       width: 100%;
-      margin: 0;
-      margin-bottom: 6.5px;
-      border-left: 0px;
-      border-right: 0px;
-      border-top: 0px;
+      margin: 0 0 6.5px;
+      border-left: 0;
+      border-right: 0;
+      border-top: 0;
       border-radius: 0;
 
       &::placeholder {

package/src/components/Form/Radio/Radio.vue

@@ -44,7 +44,7 @@ export default {
       },
     },
     value: {
-      type: String,
+      type: [String, Number],
       required: true,
     },
     disabled: {
@@ -73,8 +73,8 @@ export default {
     },
   },
   methods: {
-    checkHandler($event) {
-      this.$emit('update:modelValue', $event.target.value)
+    checkHandler() {
+      this.$emit('update:modelValue', this.value)
       if (!this.disabled) {
         this.checked = !this.checked;
         this.$globalEvents.$emit(`radio:update:${this.name}`, this.uid);