How to get selected country (#28)

* How to get selected country

* country output added

* 1.1.4

Author: CdTgr

dev/serve.vue

@@ -2,10 +2,14 @@
   <div id="app">
     <div class="row">
       <div class="col-3 offset-3 q-mt-lg">
-        <vue3-q-tel-input use-icon v-model:tel="input" searchText="Search using code/country" dense filled default-country="de" />
+        <vue3-q-tel-input use-icon v-model:tel="input" searchText="Search using code/country" dense filled default-country="de" @country="c => (country = c)" />
       </div>
     </div>
     <div>entered telephone number : {{ input }}</div>
+    <div>
+      Country :
+      <pre>{{ JSON.stringify(country, null, 4) }}</pre>
+    </div>
   </div>
 </template>
 
@@ -21,6 +25,7 @@ export default defineComponent({
   data() {
     return {
       input: '',
+      country: null,
     };
   },
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-q-tel-input",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Vue 3 telephone input implemented over Quasar framework",
   "scripts": {
     "serve": "vue-cli-service serve dev/serve.ts",

readme.md

@@ -89,7 +89,7 @@ _example_
 </vue3-q-tel-input>
 ```
 
-All the slots that are supported in [quasar select](https://quasar.dev/vue-components/select) field are available in the plugin as  country select control slots with prefix `cs-`.
+All the slots that are supported in [quasar select](https://quasar.dev/vue-components/select) field are available in the plugin as country select control slots with prefix `cs-`.
 
 _example_
 
@@ -117,7 +117,7 @@ _example_
 | ---------------- | ------- | -------- | ------------------------------------------------------------------------------------- |
 | required         | Boolean | No       | Shows error validation when the field is empty                                        |
 | search-text      | String  | No       | The label for the search field inside the country dropdown                            |
-| search-icon      | String  | No       | Set the icon for the search field to something else                                   |  
+| search-icon      | String  | No       | Set the icon for the search field to something else                                   |
 | default-country  | String  | No       | The default country to load. eg: us, ae, de, in etc.                                  |
 | dropdown-options | Obejct  | No       | The props availalbe for the [Quasar Select](https://quasar.dev/vue-components/select) |
 | eager-validate   | Boolean | No       | Set to true if the validation needs not be run on loading                             |
@@ -130,3 +130,4 @@ _example_
 | update:tel | string  | Triggers when an update is made to the model value  |
 | input      | string  | Triggers when the input value changes               |
 | error      | boolean | true when the input is invalid and false when valid |
+| country    | Country | Gets back the object information of a country       |

src/component/Index.vue

@@ -51,7 +51,7 @@ export default defineComponent({
     dense: { type: Boolean, default: () => false },
     disable: { type: Boolean, default: () => false },
   },
-  emits: ['update:tel', 'input', 'error'],
+  emits: ['update:tel', 'input', 'error', 'country'],
   setup(_, { slots }) {
     const country: Ref<Country> = ref(getDefault() as Country);
     const old_country: Ref<Country | undefined> = ref(undefined);
@@ -97,6 +97,7 @@ export default defineComponent({
     country: {
       immediate: true,
       handler() {
+        this.$emit('country', this.country);
         this?.$nextTick(() => {
           this.old_country = this.country;
         });