feat: vue country code component

package.json

@@ -31,5 +31,7 @@
         "vue-meta": "^2.4.0",
         "vue-template-compiler": "^2.6.12"
     },
-    "dependencies": {}
+    "dependencies": {
+        "vue-country-code": "^1.1.2"
+    }
 }

public/js/resources_js_Pages_Exports_vue.js

@@ -907,6 +907,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 //
 //
 //
+//
+//
+//
 // import GoogleReCaptchaV3 from "./GoogleReCaptchaV3";
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   props: {
@@ -936,9 +939,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
         }]
       }),
-      // errorsArr: [],
       validationErrorsObj: {},
-      loader: false
+      loader: false,
+      countryCode: ''
     };
   },
   computed: {
@@ -969,6 +972,13 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
         })
       });
     },
+    onSelect: function onSelect(_ref) {
+      var name = _ref.name,
+          iso2 = _ref.iso2,
+          dialCode = _ref.dialCode;
+      console.log(name, iso2, dialCode);
+      this.countryCode = dialCode;
+    },
     submit: function submit() {
       var _this = this;
 
@@ -2103,6 +2113,16 @@ var render = function() {
                   "a-form-item",
                   { attrs: { label: _vm.trans("Phone") } },
                   [
+                    _c("vue-country-code", {
+                      attrs: {
+                        preferredCountries: ["tm"],
+                        defaultCountry: "tm"
+                      },
+                      on: { onSelect: _vm.onSelect }
+                    }),
+                    _vm._v(" "),
+                    _c("span", [_vm._v(_vm._s(_vm.countryCode))]),
+                    _vm._v(" "),
                     _c("a-input", {
                       attrs: { placeholder: _vm.trans("Phone") },
                       model: {

public/js/resources_js_Pages_Imports_vue.js

@@ -907,6 +907,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 //
 //
 //
+//
+//
+//
 // import GoogleReCaptchaV3 from "./GoogleReCaptchaV3";
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   props: {
@@ -936,9 +939,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
         }]
       }),
-      // errorsArr: [],
       validationErrorsObj: {},
-      loader: false
+      loader: false,
+      countryCode: ''
     };
   },
   computed: {
@@ -969,6 +972,13 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
         })
       });
     },
+    onSelect: function onSelect(_ref) {
+      var name = _ref.name,
+          iso2 = _ref.iso2,
+          dialCode = _ref.dialCode;
+      console.log(name, iso2, dialCode);
+      this.countryCode = dialCode;
+    },
     submit: function submit() {
       var _this = this;
 
@@ -1988,6 +1998,16 @@ var render = function() {
                   "a-form-item",
                   { attrs: { label: _vm.trans("Phone") } },
                   [
+                    _c("vue-country-code", {
+                      attrs: {
+                        preferredCountries: ["tm"],
+                        defaultCountry: "tm"
+                      },
+                      on: { onSelect: _vm.onSelect }
+                    }),
+                    _vm._v(" "),
+                    _c("span", [_vm._v(_vm._s(_vm.countryCode))]),
+                    _vm._v(" "),
                     _c("a-input", {
                       attrs: { placeholder: _vm.trans("Phone") },
                       model: {

resources/js/Components/CreateRequestModal.vue

@@ -25,6 +25,12 @@
           <a-form-item
             :label="trans('Phone')"
           >
+            <vue-country-code
+              @onSelect="onSelect"
+              :preferredCountries="['tm']"
+              :defaultCountry="'tm'">
+            </vue-country-code>
+            <span>{{ countryCode }}</span>
             <a-input v-model="form.phone" :placeholder="trans('Phone')" />
             <template v-if="validationErrorsObj.phone">
               <span class="validation-error" v-for="item in validationErrorsObj.phone" :key="item">{{ item }}</span>
@@ -145,9 +151,9 @@ export default {
           },
         ],
       }),
-      // errorsArr: [],
       validationErrorsObj: {},
-      loader: false
+      loader: false,
+      countryCode: '',
     };
   },
 
@@ -185,6 +191,11 @@ export default {
       };
     },
 
+    onSelect({name, iso2, dialCode}) {
+      console.log(name, iso2, dialCode);
+      this.countryCode = dialCode
+    },
+
     submit() {
       // this.form.post(this.route('requests.store'), {
       //   onSuccess: (res) => {

resources/js/app.js

@@ -8,12 +8,14 @@ import PortalVue from 'portal-vue';
 import Antd from 'ant-design-vue';
 import Layout from '@/Layouts/AppLayout'
 import VueMeta from 'vue-meta'
+import VueCountryCode from "vue-country-code";
 
 Vue.mixin({ methods: { route } });
 Vue.use(InertiaPlugin);
 Vue.use(PortalVue);
 Vue.use(Antd);
 Vue.use(VueMeta);
+Vue.use(VueCountryCode);
 
 const app = document.getElementById('app');