@avakhula/ui 0.0.505 → 0.0.510-alpha-spa.1

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

@@ -3,35 +3,56 @@
     {{ errorMessage }}
   </ib-alert>
 
-  <vue-tel-input
-    v-outside="clickOutside"
-    v-model="phone"
-    v-bind="$attrs"
-    @country-changed="countryChanged"
-    :input-options="{ name: inputName, id: inputName }"
-    :auto-default-country="autoDefaultCountry"
-    :dropdown-options="{ showSearchBox: true, showFlags: true }"
-    :defaultCountry="defaultCountry"
-    :ignoredCountries="ignoredCountries"
-    :class="{ error: error || errorMessage.length }"
-    style-classes="ib-phone-input"
-    ref="vueTel"
-  >
-    <template #arrow-icon>
-      <ib-icon name="chevron-down-outline"></ib-icon>
-    </template>
-  </vue-tel-input>
+  <div class="ib-phone-wrapper">
+    <vue-tel-input
+        v-outside="clickOutside"
+        v-model="phone"
+        v-bind="$attrs"
+        @country-changed="countryChanged"
+        :input-options="{ name: inputName, id: inputName, autocomplete: 'tel' }"
+        :auto-default-country="autoDefaultCountry"
+        :dropdown-options="{ showSearchBox: true, showFlags: true, tabindex: 0 }"
+        :defaultCountry="defaultCountry"
+        :ignoredCountries="ignoredCountries"
+        :class="{ error: error || errorMessage.length, disabled }"
+        :disabled="disabled"
+        style-classes="ib-phone-input"
+        ref="vueTel"
+    >
+        <template #arrow-icon>
+        <ib-icon name="chevron-down-outline"></ib-icon>
+        </template>
+
+        <template #icon-right>
+            <ib-icon-button
+                v-if="showClearButton"
+                v-show="phone.length"
+                kind="ghost"
+                class="ib-phone-clear-button"
+                @click="clearPhone"
+            >
+                <ib-icon name="close-outline" />
+            </ib-icon-button>
+        </template>
+    </vue-tel-input>
+  </div>
 </template>
 
 <script>
-import { VueTelInput } from "vue-tel-input";
 import IbIcon from "../../Icon.vue";
+import IbIconButton from "../../IconButton/IconButton.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 +61,6 @@ export default {
       type: Boolean,
       default: true,
     },
-    value: {
-      type: String,
-      default: "",
-    },
     ignoredCountries: {
       type: Array,
       default: () => [],
@@ -56,25 +73,43 @@ export default {
       type: String,
       default: "",
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    showClearButton: {
+      type: Boolean,
+      default: true,
+    },
   },
+  emits: ['update:modelValue', 'onReady'],
   components: {
     VueTelInput,
+    IbIconButton,
     IbAlert,
     IbIcon,
   },
   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: {
@@ -95,11 +130,25 @@ export default {
         this.vueTel.clickedOutside();
       }
     },
+    clearPhone() {
+        this.phone = "";
+    }
   },
 };
 </script>
 
 <style lang="scss">
-@import "./phoneInput.scss";
+@use "./phoneInput.scss" as *;
+
+.ib-phone-wrapper {
+    position: relative;
+
+    .ib-phone-clear-button {
+        position: absolute;
+        right: 5px;
+        top: 50%;
+        transform: translateY(-50%);
+
+    }
+}
 </style>
-<style src="vue-tel-input/vue-tel-input.css"></style>

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

@@ -1,7 +1,7 @@
-@import "../../../assets/scss/variables/colors.scss";
-@import "../../../assets/scss/variables/shadows.scss";
-@import "../../../assets/scss/typography.scss";
-@import "../../../assets/scss/mixins.scss";
+@use "../../../assets/scss/variables/colors.scss" as *;
+@use "../../../assets/scss/variables/shadows.scss" as *;
+@use "../../../assets/scss/typography.scss" as *;
+@use "../../../assets/scss/mixins.scss" as *;
 
 $input-bg: $gray-100;
 $input-color: $neutral-900;
@@ -43,6 +43,39 @@ $dropdown-item-selected-border-color: $blue-900;
     }
   }
 
+  &.disabled {
+    .vti__input {
+      background-color: $gray-100 !important;
+      color: $neutral-500 !important;
+      border-color: $input-border-color !important;
+
+      &:focus {
+        outline: none !important;
+        border-bottom: 1px solid $input-border-color !important;
+        border-radius: 4px 4px 0 0 !important;
+      }
+    }
+
+    .vti__dropdown {
+        background-color: $gray-100 !important;
+        border-color: $input-border-color !important;
+        cursor: not-allowed;
+
+        .vti__selection {
+            filter:grayscale(1);
+        }
+
+        &:focus {
+          .vti__selection {
+            outline: none !important;
+            background-color: $gray-100 !important;
+            border-bottom: 1px solid $input-border-color !important;
+            border-radius: 4px 4px 0 0 !important;
+          }
+        }
+    }
+  }
+
   .vti__dropdown {
     padding: 0;
     border-radius: 4px 4px 0 0;
@@ -100,17 +133,16 @@ $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 {
         @include Ib-H4-regular-italic;
         color: $input-placeholder-color;
-      }  
+      }
 
       &:focus {
         border-radius: 0;

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,67 +44,44 @@ 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;
-    },
-  },
-  mounted() {
-    this.$globalEvents.$on(`radio:update:${this.name}`, (uid) => {
-      if (this.uid !== uid) {
-        this.checked = false;
-      }
-    });
-  },
+  emits: ['update:modelValue'],
   data() {
     return {
-      checked: this.isChecked,
       uid: generateUID(),
     };
   },
+  mounted() {
+    this.checked = this.isChecked;
+  },
   methods: {
-    onClick() {
-      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);
-      }
-    },
+    checkHandler() {
+      this.$emit('update:modelValue', this.value)
+    }
   },
   computed: {
     classes() {
       return {
         "ib-radio": true,
         "has-error": this.error,
-        "radio-filled": this.checked,
+        "radio-filled": this.isChecked,
         "radio-disabled": this.disabled,
       };
     },
+    isChecked() {
+      return this.modelValue === this.value
+    }
   },
 };
 </script>
 
 <style scoped lang="scss">
-@import "./radio.scss";
+@use "./radio.scss" as *;
 </style>

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

@@ -1,6 +1,6 @@
-@import "../../../assets/scss/variables/colors.scss";
-@import "../../../assets/scss/typography.scss";
-@import "../../../assets/scss/mixins.scss";
+@use "../../../assets/scss/variables/colors.scss" as *;
+@use "../../../assets/scss/typography.scss" as *;
+@use "../../../assets/scss/mixins.scss" as *;
 
 //checkbox
 $radio-text: $neutral-900;
@@ -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;