add vue-tel-input

config/nuxtConfig/build.js

@@ -13,13 +13,16 @@ export default {
   build: {
     extend (config, { isDev, isClient }) {
       config.node = {
-        fs: "empty"
+        fs: 'empty'
       }
     },
     plugins: [
       new webpack.ProvidePlugin({
         _: 'lodash'
       })
+    ],
+    transpile: [
+      'vue-tel-input-vuetify'
     ]
   },
 

config/nuxtConfig/plugins.js

@@ -8,6 +8,7 @@ export default {
     '~/plugins/Data/axios',
     '~/plugins/Data/dataPersister',
     '~/plugins/Data/dataProvider',
-    '~/plugins/Data/dataDeleter'
+    '~/plugins/Data/dataDeleter',
+    '~/plugins/phone-input'
   ]
 }

package.json

@@ -17,12 +17,12 @@
     "@casl/vue": "^1.2",
     "@fortawesome/fontawesome-free": "^5.15",
     "@nuxt/components": "^2.2",
+    "@nuxt/image": "^0.6.0",
     "@nuxt/typescript-runtime": "^2.0",
     "@nuxtjs/axios": "^5.13",
-    "@nuxtjs/vuetify": "^1.12.1",
     "@nuxtjs/composition-api": "^0.28",
     "@nuxtjs/i18n": "^7.0",
-    "@nuxt/image": "^0.6.0",
+    "@nuxtjs/vuetify": "^1.12.1",
     "@types/lodash": "^4.14",
     "@vuex-orm/core": "1.0.0-draft.14",
     "cookieparser": "^0.1",
@@ -34,6 +34,7 @@
     "nuxt-leaflet": "^0.0",
     "postcss": "^8.3.6",
     "vue-i18n-composable": "^0.2",
+    "vue-tel-input-vuetify": "^1.4.1",
     "vue-template-compiler": "^2.6",
     "webpack": "^4.46",
     "yaml-import": "^2.0"

pages/organization/contact_points/_id.vue

@@ -43,25 +43,25 @@
                   />
                 </v-col>
                 <v-col cols="12" sm="6">
-                  <UiInputText
+                  <UiInputPhone
                     field="telphone"
-                    label="telphone"
+                    :label="$t('telphone')"
                     :data="entry['telphone']"
                     @update="updateRepository"
                   />
                 </v-col>
                 <v-col cols="12" sm="6">
-                  <UiInputText
+                  <UiInputPhone
                     field="faxNumber"
-                    label="faxNumber"
+                    :label="$t('faxNumber')"
                     :data="entry['faxNumber']"
                     @update="updateRepository"
                   />
                 </v-col>
                 <v-col cols="12" sm="6">
-                  <UiInputText
+                  <UiInputPhone
                     field="mobilPhone"
-                    label="mobilPhone"
+                    :label="$t('mobilPhone')"
                     :data="entry['mobilPhone']"
                     @update="updateRepository"
                   />
@@ -117,7 +117,6 @@ export default defineComponent({
       loading
     }
   }
-
 })
 </script>
 <style>

plugins/phone-input.ts

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import vuetify from 'vuetify'
+// @ts-ignore
+import VueTelInputVuetify from 'vue-tel-input-vuetify/lib'
+import { NuxtAppOptions } from '@nuxt/types/app'
+
+// -- vue-tel-input-vuetify --
+// @see https://github.com/yogakurniawan/vue-tel-input-vuetify
+export default ({ app } : { app: NuxtAppOptions }) => {
+  Vue.use(VueTelInputVuetify, {
+    vuetify,
+    preferredCountries: ['FR', 'DE', 'CH', 'BE', 'GB'],
+    mode: 'international',
+    invalidMsg: app.i18n.t('phoneNumberInvalid'),
+    'valid-characters-only': 'true'
+  })
+}

types/interfaces.d.ts

@@ -131,12 +131,6 @@ interface EnumChoice {
   value: string,
   label: string
 }
-interface EnumChoices extends Array<EnumChoice> {}
-
-interface DataManager {
-  initCtx(ctx: Context): void,
-  invoke(args: UrlArgs): Promise<any>,
-}
 
 interface UrlArgs {
   readonly type: QUERY_TYPE,
@@ -157,6 +151,13 @@ interface DataPersisterArgs extends UrlArgs {
 }
 interface DataDeleterArgs extends UrlArgs {}
 
+interface EnumChoices extends Array<EnumChoice> {}
+
+interface DataManager {
+  initCtx(ctx: Context): void,
+  invoke(args: UrlArgs): Promise<any>,
+}
+
 interface HookProvider {
   invoke(args: DataProviderArgs): Promise<any>,
 }

yarn.lock

@@ -3105,6 +3105,11 @@ autoprefixer@^9.6.1:
     postcss "^7.0.32"
     postcss-value-parser "^4.1.0"
 
+awesome-phonenumber@^2.15.0:
+  version "2.59.0"
+  resolved "https://registry.yarnpkg.com/awesome-phonenumber/-/awesome-phonenumber-2.59.0.tgz#9a45f08167d92b1c177cbe2a3df313f8b19d8ebe"
+  integrity sha512-ySAF+Xe0M1NWvj8FMYcgsMMWGuFJAH1DJL9T/juFfozV6bOe0IifP50W+MdyBMQI2rQsNm5mNXBwdVGuwATkmQ==
+
 axios-retry@^3.1.9:
   version "3.1.9"
   resolved "https://registry.yarnpkg.com/axios-retry/-/axios-retry-3.1.9.tgz#6c30fc9aeb4519aebaec758b90ef56fa03fe72e8"
@@ -12848,6 +12853,15 @@ vue-style-loader@^4.1.0, vue-style-loader@^4.1.3:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
+vue-tel-input-vuetify@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/vue-tel-input-vuetify/-/vue-tel-input-vuetify-1.4.1.tgz#9ca62c9c9feb5d96adce59467885e79c285a4a39"
+  integrity sha512-oOswIiWhnkiVoNC4eCJJef4GG0mVkFsiVXTSquTio+oPn4GfMwm5f2OUv9qvuBE5IxdvW2X5WQZOF8IKhN7kHA==
+  dependencies:
+    awesome-phonenumber "^2.15.0"
+    vuetify "^2.2.11"
+    whatwg-fetch "^3.2.0"
+
 vue-template-compiler@^2.0.0, vue-template-compiler@^2.6, vue-template-compiler@^2.6.12, vue-template-compiler@^2.6.14:
   version "2.6.14"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz#a2f0e7d985670d42c9c9ee0d044fed7690f4f763"
@@ -12887,7 +12901,7 @@ vuetify-loader@^1.7.2:
     file-loader "^6.2.0"
     loader-utils "^2.0.0"
 
-vuetify@^2.5.3:
+vuetify@^2.2.11, vuetify@^2.5.3:
   version "2.5.8"
   resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-2.5.8.tgz#a23e6a7e77b77de0744b53cf1e7c9d40efac0635"
   integrity sha512-paLmNhKTYFD41+14rIHnCo+P1jHbUzwBiMowxs5qXVq8RdRMqRmcy05Sfse1WUu90amPGK2fIFQq5rL2N8zqZg==
@@ -13051,6 +13065,11 @@ whatwg-encoding@^1.0.5:
   dependencies:
     iconv-lite "0.4.24"
 
+whatwg-fetch@^3.2.0:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
+  integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==
+
 whatwg-mimetype@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"