enhance: Integration of phone number validator on admin dashboard ven…

…dor creating form

src/admin/pages/VendorAccountFields.vue

@@ -63,7 +63,7 @@
 
                 <div class="column">
                     <label for="store-phone">{{ __( 'Phone Number', 'dokan-lite') }}</label>
-                    <input type="number" id="store-phone" class="dokan-form-input" v-model="vendorInfo.phone" :placeholder="__( '123456789', 'dokan-lite')">
+                    <input type="text" id="store-phone" class="dokan-form-input" v-model="vendorInfo.phone" @input.prevent="validatePhoneInput" :placeholder="__( '+123456789', 'dokan-lite')">
                 </div>
 
                 <div class="column">
@@ -374,8 +374,20 @@ export default {
             let height = dokan.store_banner_dimension.height;
 
             return this.__( `Upload banner for your store. Banner size is (${width}x${height}) pixels.`, 'dokan-lite' );
-        }
+        },
+
+        validatePhoneInput( event ) {
+            if ( ! event.data ) {
+                return;
+            }
+
+            const allowedChars = [ '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '(', ')', '+', '-', '_', '.' ];
 
+            // If the input character is valid.
+            if ( ! allowedChars.includes( event.data.at( -1 ) ) ) {
+                this.vendorInfo.phone = this.vendorInfo.phone.slice(0, -1);
+            }
+        }
     }
 };
 </script>