@ozdao/prometheus-framework 0.2.34 → 0.2.36

package/src/components/FieldPhone/FieldPhone.vue

@@ -1,7 +1,9 @@
 <script>
   import { defineComponent } from 'vue';
   import { parsePhoneNumberFromString } from 'libphonenumber-js';
+
   import utils, { getCountry, setCaretPosition } from './utils';
+
   import clickOutside from './click-outside';
 
   function getDefault(key) {
@@ -13,241 +15,44 @@
   }
 
   export default /*#__PURE__*/defineComponent({
-    name: 'Vue3ReactiveTelInput', // vue component name
+    name: 'Vue3ReactiveTelInput', 
     directives: {
       clickOutside,
     },
     props: {
-      /**
-       * reactive value of the tel input
-       */
-      modelValue: {
-        type: String,
-        default: '',
-      },
-      /**
-       * class assign to root when the input number is invalid belong to the country code
-       */
-      badClass: {
-        type: [String, Array, Object],
-        default: '',
-      },
-      /**
-       * class assign to root when the input number is valid belong to the country code
-       */
-      goodClass: {
-        type: [String, Array, Object],
-        default: '',
-      },
-      /**
-       * style assign to root when the input number is invalid belong to the country code
-       */
-      badStyle: {
-        type: [String, Array, Object],
-        default: '',
-      },
-      /**
-       * style assign to root when the input number is valid belong to the country code
-       */
-      goodStyle: {
-        type: [String, Array, Object],
-        default: '',
-      },
-      /**
-       * class assign when the input number is invalid belong to the country code
-       */
-      badInputClass: {
-        type: [String, Array, Object],
-        default: '',
-      },
-      /**
-       * class assign when the input number is valid belong to the country code
-       */
-      goodInputClass: {
-        type: [String, Array, Object],
-        default: '',
-      },
-      /**
-       * style assign when the input number is invalid belong to the country code
-       */
-      badInputStyle: {
-        type: [String, Array, Object],
-        default: '',
-      },
-      /**
-       * style assign when the input number is valid belong to the country code
-       */
-      goodInputStyle: {
-        type: [String, Array, Object],
-        default: '',
-      },
-      /**
-       * list of all contries
-       */
-      allCountries: {
-        type: Array,
-        default: () => getDefault('allCountries'),
-      },
-      /**
-       * flag to know if the value will be automatically formatted
-       */
-      autoFormat: {
-        type: Boolean,
-        default: () => getDefault('autoFormat'),
-      },
-      validation: {
-        type: [Boolean,Object],
-        default: false,
-      },
-      /**
-       * customized validation RegExp or flag 
-       */
-      customValidate: {
-        type: [Boolean, RegExp],
-        default: () => getDefault('customValidate'),
-      },
-      /**
-       * a default country
-       */
-      defaultCountry: {
-        // Default country code, ie: 'AU'
-        // Will override the current country of user
-        type: String,
-        default: () => getDefault('defaultCountry'),
-      },
-      /**
-       * flag defining whether the input must be disabled
-       */
-      disabled: {
-        type: Boolean,
-        default: () => getDefault('disabled'),
-      },
-      /**
-       * flag definir if we'll automatically choose a default country
-       */
-      autoDefaultCountry: {
-        type: Boolean,
-        default: () => getDefault('autoDefaultCountry'),
-      },
-      /**
-       * object of dropdown options
-       */
-      dropdownOptions: {
-        type: Object,
-        default: () => getDefault('dropdownOptions'),
-      },
-      /**
-       * list of countries to ignore
-       */
-      ignoredCountries: {
-        type: Array,
-        default: () => getDefault('ignoredCountries'),
-      },
-      /**
-       * object of input options
-       */
-      inputOptions: {
-        type: Object,
-        default: () => getDefault('inputOptions'),
-      },
-      /**
-       * valid message to display
-       */
-      invalidMsg: {
-        type: String,
-        default: () => getDefault('invalidMsg'),
-      },
-      /**
-       * the mode of the input
-       */
-      mode: {
-        type: String,
-        default: () => getDefault('mode'),
-      },
-      /**
-       * limit the giving input to only manage your list of contry
-       */
-      onlyCountries: {
-        type: Array,
-        default: () => getDefault('onlyCountries'),
-      },
-      /**
-       * the list of preferred countries
-       */
-      preferredCountries: {
-        type: Array,
-        default: () => getDefault('preferredCountries'),
-      },
-      /**
-       * the flag defining if the input must only content valid characters
-       */
-      validCharactersOnly: {
-        type: Boolean,
-        default: () => getDefault('validCharactersOnly'),
-      },
-      /**
-       * the root default class
-       */
-      rootClass: {
-        type: [String, Array, Object],
-        default: () => getDefault('styleClasses'),
-      },
-      /**
-       * the input default class
-       */
-      inputClass: {
-        type: [String, Array, Object],
-        default: () => {return ''},
-      },
-      /**
-       * the div input default class
-       */
-      divInputClass: {
-        type: [String, Array, Object],
-        default: () => {return ''},
-      },
-      /**
-       * the root default style
-       */
-      rootStyle: {
-        type: [String, Array, Object],
-        default: () => {return ''},
-      },
-      /**
-       * the dropdown button style
-       */
-      dropdownStyle: {
-        type: [String, Array, Object],
-        default: () => {return ''},
-      },
-      /**
-       * the dropdown list style
-       */
-      listStyle: {
-        type: [String, Array, Object],
-        default: () => {return ''},
-      },
-      /**
-       * the input style
-       */
-      inputStyle: {
-        type: [String, Array, Object],
-        default: () => {return ''},
-      },
-      /**
-       * the input id 
-       */
-      inputId: {
-        type: [String, Array, Object],
-        default: () => {return ''},
-      },
-      /**
-       * the input placeholder
-       */
-      Placeholder: {
-        type: [String, Object, Function],
-        default: () => {return ''},
-      },
+      modelValue: { type: String, default: '',},
+      badClass: { type: [String, Array, Object], default: '', },
+      goodClass: { type: [String, Array, Object], default: '', },
+      badStyle: { type: [String, Array, Object], default: '', },
+      goodStyle: { type: [String, Array, Object], default: '', },
+      badInputClass: { type: [String, Array, Object], default: '', },
+      goodInputClass: { type: [String, Array, Object], default: '', },
+      badInputStyle: { type: [String, Array, Object], default: '', },
+      goodInputStyle: { type: [String, Array, Object], default: '', },
+      allCountries: { type: Array, default: () => getDefault('allCountries'), },
+      autoFormat: { type: Boolean, default: () => getDefault('autoFormat'), },
+      validation: { type: [Boolean, Object], default: false, },
+      customValidate: { type: [Boolean, RegExp], default: () => getDefault('customValidate'), },
+      defaultCountry: { type: String, default: () => getDefault('defaultCountry'), },
+      disabled: { type: Boolean, default: () => getDefault('disabled'), },
+      autoDefaultCountry: { type: Boolean, default: () => getDefault('autoDefaultCountry'), },
+      dropdownOptions: { type: Object, default: () => getDefault('dropdownOptions'), },
+      ignoredCountries: { type: Array, default: () => getDefault('ignoredCountries'), },
+      inputOptions: { type: Object, default: () => getDefault('inputOptions'), },
+      invalidMsg: { type: String, default: () => getDefault('invalidMsg'), },
+      mode: { type: String, default: () => getDefault('mode'), },
+      onlyCountries: { type: Array, default: () => getDefault('onlyCountries'), },
+      preferredCountries: { type: Array, default: () => getDefault('preferredCountries'), },
+      validCharactersOnly: { type: Boolean, default: () => getDefault('validCharactersOnly'), },
+      rootClass: { type: [String, Array, Object], default: () => getDefault('styleClasses'), },
+      inputClass: { type: [String, Array, Object], default: () => {return ''}, },
+      divInputClass: { type: [String, Array, Object], default: () => {return ''}, },
+      rootStyle: { type: [String, Array, Object], default: () => {return ''}, },
+      dropdownStyle: { type: [String, Array, Object], default: () => {return ''}, },
+      listStyle: { type: [String, Array, Object], default: () => {return ''}, },
+      inputStyle: { type: [String, Array, Object], default: () => {return ''}, },
+      inputId: { type: [String, Array, Object], default: () => {return ''}, },
+      Placeholder: { type: [String, Object, Function], default: () => {return ''}, },
     },
     data() {
       return {
@@ -257,7 +62,6 @@
           action: null,
           amount: null,
         },
-        // vue3-reactive-tel-data
         phone: this.modelValue ? this.modelValue : '',
         activeCountryCode: '',
         open: false,
@@ -311,15 +115,6 @@
           // console.log(this.phoneObject?this.phoneObject.number !== "":false)
           this.$nextTick(() => { this.phone = oldValue; this.onInput(); });
         } else {
-          // let dataphone;
-          // console.log(this.phoneObject?this.phoneObject !== "":false)
-          // if(this.phoneObject?this.phoneObject !== "":false)
-          // {
-          //   dataphone = this.phoneObject.number
-          // }
-          // else{
-          //   dataphone = value
-          // }
           this.phone = value;
         }
       },
@@ -334,9 +129,9 @@
       },
     },
     mounted() {
-      // if (this.value) {
-      //   this.phone = this.value;
-      // }
+      if (this.value) {
+        this.phone = this.value;
+      }
 
       this.cleanInvalidCharacters();
 
@@ -352,7 +147,6 @@
         .catch(console.error)
         .then(() => {
           this.finishMounted = true;
-          // console.log(123)
         });
     },
     computed: {
@@ -400,18 +194,15 @@
       },
       phoneObject() {
         let result;
+
         if (this.phone?.[0] === '+') {
           result = parsePhoneNumberFromString(this.phone) || {};
         } else {
           result = parsePhoneNumberFromString(this.phone, this.activeCountryCode) || {};
         }
 
-        const {
-          metadata,
-          ...phoneObject
-        } = result;
+        const { metadata, ...phoneObject } = result;
         
-        // console.log(result.isValid?result.isValid():'loll')
         let valid = result.isValid?.();
         let formatted = this.phone;
 
@@ -483,68 +274,28 @@
     methods: {
       resetPlaceholder() {
         this.parsedPlaceholder = this.inputOptions.placeholder;
-        // TODO: Fix dynamicPlaceholder
-        // if (!this.inputOptions.dynamicPlaceholder) {
-        //   return result;
-        // }
-        // getExamples()
-        //   .then((results) => {
-        //     examples = results;
-        //     const mode = (!this.mode || this.mode === 'auto') ? 'international' : this.mode;
-        //     const number = getExampleNumber(this.activeCountryCode.toUpperCase(), results);
-        //     this.parsedPlaceholder = number?.format(mode.toUpperCase()) || this.placeholder;
-        //   })
-        //   .catch(console.error);
       },
       initializeCountry() {
         return new Promise((resolve) => {
-          /**
-             * 1. If the phone included prefix (i.e. +12), try to get the country and set it
-             */
-          if (this.phone?.[0] === '+') {
-            resolve();
-            return;
-          }
-          /**
-           * 2. Use default country if passed from parent
-           */
-          if (this.defaultCountry) {
-            this.choose(this.defaultCountry);
-            resolve();
-            return;
-          }
-
+          // 1. If the phone included prefix (i.e. +12), try to get the country and set it
+          if (this.phone?.[0] === '+') { resolve(); return; }
+          // 2. Use default country if passed from parent
+          if (this.defaultCountry) { this.choose(this.defaultCountry); resolve(); return; }
           const fallbackCountry = this.preferredCountries[0] || this.filteredCountries[0];
-          /**
-           * 3. Check if fetching country based on user's IP is allowed, set it as the default country
-           */
+          // 3. Check if fetching country based on user's IP is allowed, set it as the default country
           if (this.autoDefaultCountry) {
             getCountry()
-              .then((res) => {
-                this.choose(res || this.activeCountryCode);
-              })
-              .catch((error) => {
-                console.warn(error);
-                /**
-                 * 4. Use the first country from preferred list (if available) or all countries list
-                 */
-                this.choose(fallbackCountry);
-              })
-              .then(() => {
-                resolve();
-              });
+              .then((res) => { this.choose(res || this.activeCountryCode); })
+              .catch((error) => { console.warn(error); this.choose(fallbackCountry); })
+              .then(() => { resolve(); });
           } else {
-            /**
-               * 4. Use the first country from preferred list (if available) or all countries list
-               */
+          // 4. Use the first country from preferred list (if available) or all countries list
             this.choose(fallbackCountry);
             resolve();
           }
         });
       },
-      /**
-       * Get the list of countries from the list of iso2 code
-       */
+      // Get the list of countries from the list of iso2 code
       getCountries(list = []) {
         return list
           .map((countryCode) => this.findCountry(countryCode))
@@ -628,9 +379,6 @@
       },
       onInput() {
         this.$refs.input.setCustomValidity(this.phoneObject.valid ? '' : this.invalidMsg);
-        // Returns response.number to assign it to v-model (if being used)
-        // Returns full response for cases @input is used
-        // and parent wants to return the whole response.
         this.emitInput(this.phoneObject);
       },
       emitInput(value) {
@@ -787,9 +535,11 @@
     <!-- <div :class="[divInputClass]" > -->
       <input
         v-model="phone"
-        pattern="[0-9]*"
+        inputmode="numeric" 
+         pattern="\d*"
         ref="input"
         :type="inputOptions.type"
+
         :autocomplete="inputOptions.autocomplete"
         :autofocus="inputOptions.autofocus"
         :class="['vti__input', inputOptions.styleClasses, inputClass, Iclasses]"
@@ -819,6 +569,7 @@
     </div>
   </transition>
 </template>
+
 <style scoped>
 .vue3-reactive-tel-input{
   display:flex