@avakhula/ui 0.0.503 → 0.0.505-alpha-spa.2

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

@@ -1,10 +1,11 @@
 <template>
   <div
-    class="flatpickr-wrapper"
+    class="ib-flatpickr-wrapper"
     :class="{
       'has-labels': label.length || endDateLabel.length,
       'has-label': label.length,
       'has-error': errorMessage.length,
+      'is-disabled': disabled,
       'is-range': mode === 'range',
     }"
   >
@@ -18,11 +19,16 @@
           {{ 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"
+              :disabled="disabled"
+              class="date-picker-input"
+            />
+          </label>
 
           <ib-icon name="today-outline" class="calendar-icon" />
         </div>
@@ -46,12 +52,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"
+              ref="toDate"
+              @keydown="onKeydownEndField"
+            />
+          </label>
           <ib-icon name="today-outline" class="calendar-icon" />
         </div>
 
@@ -90,6 +98,10 @@ export default {
       type: String,
       default: "",
     },
+    endDatePlaceholder: {
+      type: String,
+      default: "",
+    },
     required: {
       type: Boolean,
       default: false,
@@ -102,6 +114,14 @@ export default {
       type: String,
       default: SINGLE_MODE,
     },
+    ariaLabel: {
+      type: String,
+      default: "",
+    },
+    endDateAriaLabel: {
+      type: String,
+      default: "",
+    },
     label: {
       type: String,
       default: "",
@@ -122,6 +142,10 @@ export default {
       type: String,
       default: "",
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    }
   },
   mounted() {
     document.addEventListener("keyup", this.onDocumentKeyDown, true);
@@ -137,8 +161,16 @@ export default {
     value() {
       this.initFlatpickr();
     },
+    disabled() {
+      this.$nextTick(() => {
+        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 +228,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
@@ -213,6 +245,7 @@ export default {
       this.$nextTick(() => {
         this.isOpen = false;
         this.isOpenEndDate = false;
+        this.$emit("blur");
       });
     },
     onChange(value) {
@@ -227,6 +260,11 @@ export default {
         this.close();
       }
     },
+    onKeydownEndField(e) {
+      if (e.key === "ArrowDown") {
+        this.flat.selectedDateElem.focus();
+      }
+    },
     triggerChange() {
       setTimeout(() => {
         if (this.pickerOptions.mode === "range") {
@@ -247,6 +285,8 @@ export default {
             this.$emit("input", this.data);
             this.$emit("update:modelValue", this.data);
           }
+
+          this.$emit("blur");
         }
       });
     },
@@ -277,6 +317,7 @@ export default {
     IbLabel,
     IbAlert,
   },
+  emits: ["input", "update:modelValue"],
 };
 </script>
 <style lang="scss">

package/src/components/Form/FormGroup/FormGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ib-form-group" :class="{ disable: disable }">
+  <div class="ib-form-group" :class="{ disabled: disabled }">
     <slot></slot>
     <p class="support-text" v-if="supportText.length">{{ supportText }}</p>
   </div>
@@ -13,7 +13,7 @@ export default {
       type: String,
       default: "",
     },
-    disable: {
+    disabled: {
       type: Boolean,
       default: false,
     },
@@ -34,7 +34,7 @@ export default {
     margin-top: 5px;
   }
 
-  &.disable {
+  &.disabled {
     .support-text {
       color: $neutral-500;
     }

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

@@ -7,12 +7,13 @@
 
       <input
         v-bind="attrs"
-        v-model="actualValue"
+        v-model.trim="actualValue"
         ref="field"
         :aria-invalid="hasErrorState ? true : false"
         :readonly="readonly"
         :disabled="disabled"
         :id="id"
+        :autocomplete="autocomplete"
         :class="classes"
         @input="onInput($event)"
         @blur="onBlur($event)"
@@ -29,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>
@@ -164,6 +165,9 @@ export default {
       type: Boolean,
       default: false,
     },
+    autocomplete: {
+      type: String
+    }
   },
   data() {
     return {

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

@@ -1,26 +1,25 @@
 <template>
-  <label :class="classes" :for="for">
+  <label :class="classes" :for>
     <span v-if="required" class="required">* </span>
     <slot></slot>
 
     <ib-icon-button
-      v-if="infoText.length"
+      v-if="infoText.length || Object.keys(infoText).length"
       size="xs"
       class="info-button"
       kind="ghost"
       type="button"
+      v-tooltip:[tooltipPosition]="infoText"
     >
       <ib-icon name="information-circle-outline" />
-
-      <ib-tooltip :text="infoText" :position="tooltipPosition"></ib-tooltip>
     </ib-icon-button>
   </label>
 </template>
 
 <script>
 import IbIconButton from "../../IconButton/IconButton.vue";
-import IbTooltip from "../../Tooltip/Tooltip.vue";
 import IbIcon from "../../Icon.vue";
+import { TooltipDirective as Tooltip } from "../../../directives/tooltip/tooltip";
 
 export default {
   name: "IbLabel",
@@ -33,23 +32,32 @@ export default {
       default: false,
     },
     infoText: {
-      type: String,
+      type: [String, Object],
       default: "",
     },
     tooltipPosition: {
       type: String,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   mounted() {
     this.$globalEvents.$on(`label:disabled:${this.for}`, (value) => {
-      this.disabled = value;
+      this.idDisabled = value;
     });
   },
   data() {
     return {
-      disabled: false,
+      idDisabled: this.disabled,
     };
   },
+  watch: {
+    disabled(value) {
+      this.idDisabled = value;
+    },
+  },
   computed: {
     classes() {
       const classList = ["ib-label"];
@@ -58,7 +66,7 @@ export default {
         classList.push("has-info-text");
       }
 
-      if (this.disabled) {
+      if (this.idDisabled) {
         classList.push("label-disabled");
       }
 
@@ -68,7 +76,9 @@ export default {
   components: {
     IbIconButton,
     IbIcon,
-    IbTooltip,
+  },
+  directives: {
+    Tooltip,
   },
 };
 </script>
@@ -109,6 +119,8 @@ export default {
   .info-button {
     display: inline-block;
     margin-left: 3px;
+    position: relative;
+
     .ib-icon {
       color: $gray-600;
       font-size: 16px;

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: {
@@ -101,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

@@ -3,19 +3,17 @@
     role="radio"
     :class="classes"
     :for="id"
-    :aria-checked="checked"
-    @click.prevent="onClick"
+    :aria-checked="isChecked"
   >
     <input
       type="radio"
       :name="name"
       :id="id"
       :value="value"
-      :checked="checked"
+      :checked="isChecked"
       :disabled="disabled"
       ref="radio"
-      @input.stop
-      @change="onChange"
+      @change="checkHandler"
     />
     <span class="ib-radio-body" :class="{ 'without-text': !label?.length }">
       <span class="ib-radio-input"></span>
@@ -29,11 +27,8 @@ import generateUID from "../../../helpers/generateUID";
 
 export default {
   name: "IbRadio",
-  model: {
-    prop: "isChecked",
-    event: "input",
-  },
   props: {
+    modelValue: '',
     label: String,
     error: {
       type: Boolean,
@@ -49,53 +44,42 @@ export default {
       },
     },
     value: {
-      type: String,
+      type: [String, Number],
       required: true,
     },
-    isChecked: {
-      type: Boolean,
-      default: false,
-    },
     disabled: {
       type: Boolean,
       default: false,
     },
   },
-  watch: {
-    isChecked(value) {
-      this.checked = value;
-    },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      checked: false,
+      uid: generateUID(),
+    };
   },
   mounted() {
+    this.checked = this.isChecked;
     this.$globalEvents.$on(`radio:update:${this.name}`, (uid) => {
       if (this.uid !== uid) {
         this.checked = false;
       }
     });
   },
-  data() {
-    return {
-      checked: this.isChecked,
-      uid: generateUID(),
-    };
+  watch: {
+    isChecked(val) {
+      this.checked = val;
+    },
   },
   methods: {
-    onClick() {
+    checkHandler() {
+      this.$emit('update:modelValue', this.value)
       if (!this.disabled) {
         this.checked = !this.checked;
         this.$globalEvents.$emit(`radio:update:${this.name}`, this.uid);
-        this.$emit("input", this.checked);
-        this.$emit("change", this.checked);
       }
-    },
-    onChange() {
-      if (!this.disabled) {
-        this.checked = !this.checked;
-        this.$globalEvents.$emit(`radio:update:${this.name}`, this.uid);
-        this.$emit("change", this.checked);
-        this.$emit("input", this.checked);
-      }
-    },
+    }
   },
   computed: {
     classes() {
@@ -106,6 +90,9 @@ export default {
         "radio-disabled": this.disabled,
       };
     },
+    isChecked() {
+      return this.modelValue === this.value
+    }
   },
 };
 </script>

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

@@ -30,12 +30,15 @@ $radio-border-filled-disabled: $neutral-500;
 .ib-radio {
   display: inline-flex;
   cursor: pointer;
+  position: relative;
 
   input {
     opacity: 0;
     position: absolute;
-    top: -100%;
-    right: -100%;
+    width: 1px;
+    height: 1px;
+    z-index: -1;
+
 
     &:focus + .ib-radio-body {
       border-radius: 4px;