fix(textfield): add new prop text-field-label for user custom label

ad new prop text-field-label for user to custom textfield label

fix #1

README.md

@@ -2,7 +2,7 @@
 International Telephone Input with Vuetify.
 
 <p align="center">
-<img width="600px" alt="In-action GIF" src="https://thumbs.gfycat.com/EducatedPoliteBluefintuna-size_restricted.gif"/>
+<img width="600px" alt="In-action GIF" src="https://media.giphy.com/media/eNe0TdR03G7MMNkFab/giphy.gif"/>
 </p>
 
 
@@ -14,12 +14,9 @@ International Telephone Input with Vuetify.
   - [vuetify](#vuetify)
   - [npm](#npm)
   - [Browser](#browser)
-  - [Use as a custom field of `vue-form-generator`](#use-as-a-custom-field-of-vue-form-generator)
 - [Usage](#usage)
   - [Props](#props)
   - [Events](#events)
-  - [Slots](#slots)
-- [Typescript Support](#typescript-support)
 - [Credits & Contributors](#credits-&-contributors)
 
 ## Installation
@@ -143,11 +140,6 @@ Include [vue-tel-input-vuetify](/dist/vue-tel-input-vuetify.min.js) in the page.
   | `close` |  | Fires when the flags dropdown closes | |
   | `country-changed` | `Object` | Fires when country changed (even for the first time) | Available from [v2.4.2](https://github.com/EducationLink/vue-tel-input/releases/tag/v2.4.2) |
 
-### Slots
-  | Slot | Description | Notes |
-  | ---- | ----------- | ----- |
-  | `arrow-icon` | Replace the arrow next to the flag with a component of your choice | Available from [v2.4.3](https://github.com/EducationLink/vue-tel-input/releases/tag/v2.4.3) |
-
 ## Credits & Contributors
 
 **Credits**

src/components/Example.vue

@@ -1,19 +1,55 @@
 <template>
   <v-container>
-    <v-row class="text-center">
-      <v-col cols="12">
+    <v-row justify="center">
+      <v-col cols="6">
         <vue-tel-input-vuetify
-          :preferred-countries="['us', 'gb', 'ua']"
+          :preferred-countries="['id', 'gb', 'ua']"
           :valid-characters-only="true"
           @input="onInput"
         />
       </v-col>
     </v-row>
+    <v-row justify="center">
+      <v-col cols="6">
+        <div v-if="phone.number" style="color: #e83e8c">
+          <span>
+            Number:
+            <strong>{{ phone.number }}</strong
+            >,&nbsp;
+          </span>
+          <span>
+            Is valid:
+            <strong>{{ phone.valid }}</strong
+            >,&nbsp;
+          </span>
+          <span>
+            Country:
+            <strong>{{ phone.country }}</strong>
+          </span>
+        </div>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
 <script>
 export default {
-  name: "Example"
+  name: "Example",
+  data() {
+    return {
+      phone: {
+        number: "",
+        valid: false,
+        country: undefined
+      }
+    };
+  },
+  methods: {
+    onInput(formattedNumber, { number, valid, country }) {
+      this.phone.number = number.international;
+      this.phone.valid = valid;
+      this.phone.country = country && country.name;
+    }
+  }
 };
 </script>

src/components/vue-tel-input-vuetify.vue

@@ -22,7 +22,7 @@
       ref="input"
       type="tel"
       v-model="phone"
-      label="Enter a Phone Number"
+      :label="textFieldLabel"
       :autofocus="autofocus"
       :name="name"
       :disabled="disabled"
@@ -107,6 +107,10 @@ export default {
       type: String,
       default: '',
     },
+    textFieldLabel: {
+      type: String,
+      default: 'Enter a Phone Number',
+    },
     placeholder: {
       type: String,
       default: () => getDefault('placeholder'),