Phone Input Component #170
Comments
|
/bounty $150 |
|
💎 $150 bounty created by JhumanJ
|
|
I'm next in line! |
@JhumanJ can you clarify your 2nd last point in requirement. |
|
Hey guys. So essentially remove the leading 0 if there is one before pre-pending the country code |
|
/attempt #170 Options |
|
Note: The user @Ashutosh-Bhadauriya is already attempting to complete issue #170 and claim the bounty. If you attempt to complete the same issue, there is a chance that @Ashutosh-Bhadauriya will complete the issue first, and be awarded the bounty. We recommend discussing with @Ashutosh-Bhadauriya and potentially collaborating on the same solution versus creating an alternate solution. |
|
Hey @JhumanJ I'm getting this error, when running npm run dev, any idea. I tried googling found some fixes but it didn't help. Also tried adding this to vite.config.js, but no success
|
|
Hey @Ashutosh-Bhadauriya, I've just pushed something to fix this, please pull an try again. |
|
Sure, thanks! |
|
@rishi-raj-jain I've cancelled my attempt on this, you can take it. |
|
@Ashutosh-Bhadauriya I think @ayusham001 is already on it. |
|
Hey @ayusham001 can you please confirm or cancel attemp? |
|
@JhumanJ |
|
@Ashutosh-Bhadauriya: Reminder that in 7 days the bounty will become up for grabs, so please submit a pull request before then 🙏 |
|
@ayusham001: Reminder that in 7 days the bounty will become up for grabs, so please submit a pull request before then 🙏 |
|
Hey, is this still open? If yes, I'd like to have a shot at it |
|
Hey. Yes it is. No one is actively working on it. Thank you
Julien Nahum
Le 30 août 2023 à 09:09 +0200, Sutirtha Bharati Das ***@***.***>, a écrit :
… Hey, is this still open? If yes, I'd like to have a shot at it
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you were mentioned.Message ID: ***@***.***>
|
|
Alright then, I'm taking this. Options |
|
Hii @JhumanJ , Can I also work on this issue? I just want to make a try and it's my first open source attempt. |
|
@JhumanJ did you guys have any existing plan on how to render the flags? I had initially thought of using the flag emojis, like |
|
Good question. Maybe we could use this library: https://github.com/ubaldop/vue-country-flag and lazy load the component? So that flags would only be loaded if the Phone input is loading somewhere on the page. Happy to hear more suggestions.
… Le 31 août 2023 à 18:33, Sutirtha Bharati Das ***@***.***> a écrit :
@JhumanJ <https://github.com/JhumanJ> did you guys have any existing plan on how to render the flags? I had initially thought of using the flag emojis like 🇦🇫 for Afghanistan but Chrome isn't properly rendering them, atleast on my side. I could use SVGs for each but it would be a bit more complicated and might bloat the code a little.
|
|
I actually got this beautiful little library called vue-tel-input which does all the heavy lifting, don't even require the country-list json. However, the dropdown needs to be styled a bit more. Shall try to get a PR up by tomorrow. 
|
|
Hey, it could work but please make sure that the end result work with all of 3 form themes!
Julien Nahum
Le 1 sept. 2023 à 16:14 +0200, Sutirtha Bharati Das ***@***.***>, a écrit :
… I actually got this beautiful little library called vue-tel-input which does all the heavy lifting, don't even require the country-list json. However, the dropdown needs to be styled a but more. Shall try to get a PR up by tomorrow.
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you were mentioned.Message ID: ***@***.***>
|
|
Its a bit trickier than I initially thought. The styles are more or less working with the 3 themes but the borders are acting up a bit. The backend validation is still left though. Honestly, neither php nor vue are my strong suits, might take some more time. |
|
@Ahtritus: Reminder that in 7 days the bounty will become up for grabs, so please submit a pull request before then 🙏 |
… 0 phone number is ignored, added regex to ignore non digit phone input
… prop for dropdown styling
* #170-ENH: Created custom dropdown phone input * #170-ENH: Added phone_number rules * #170-ENH: Added phone_number rules * #170-ENH: Added separate Rule for phone number input, starting 0 phone number is ignored, added regex to ignore non digit phone input * #170-ENH: Removed global registration of CountryFlag * #170-ENH: Using VSelect component for country selection, added prop for dropdown styling * #170-ENH: Updated phone number rule * #170-ENH: Added margins to country selector --------- Co-authored-by: Sutirtha <[email protected]> Co-authored-by: Julien Nahum <[email protected]>
|
Hey @Ahtritus I think you need to do something here to claim the bounty! |
lol yeah, i forgot to claim it. Lemme do that in the PR |
|
💡 @Ahtritus submitted a pull request that claims the bounty. You can visit your org dashboard to reward. |
|
Not sure what's the next step, I guess you have to close it so that I receive the bounty. |
|
Let's try! |
|
🎉🎈 @Ahtritus has been awarded $150! 🎈🎊 |
|
Paid aout, thank you @Ahtritus ! |
|
Nice working with you man, thanks @JhumanJ ! |
Currently the input component used for the
phonetype is a basic<text-input>. We want to have a dedicated component for the phone type. Ex:The goal of this issue is to create this
PhoneInput.vuecomponent, and to use it for thephonetype. Required data for the countries can be placed as a json inresources/data.Requirements
form-theme.js). Themes can be changed in the customization section of the form editorVSelect.vuecomponent+33and start with a0, so if user selects+33for France, and enters0123456789, the resulting value should not be+330123456789but+330123456789AnswerFormRequest. The number must start with a valid country code and have the right lengthPlease feel free to reach out if you have any question!
The text was updated successfully, but these errors were encountered: