guastallaigor / vue-paycard

Credit card component made with Vue.js (works with Vue 2 & 3)
https://vue-paycard.netlify.app
MIT License
106 stars 23 forks source link

Get card type #37

Closed vein101 closed 2 years ago

vein101 commented 2 years ago

Is your feature request related to a problem? Please describe. I need to get the card type.

Describe the solution you'd like Emit card type when it's set.

Describe alternatives you've considered Use the regex in form component, but this is unnecessary duplication.

Additional context Apologies for being over eager and ignoring this with my previous pull request. I have 2 scenarios, adding a new card and listing existing cards.

  1. Seeing as this already selects the type to display the logo according to the number entered when adding the card, may as well just emit (@get-type="useTypeValue") that instead of duplicating the work somewhere else.

  2. When listing cards I have partial (masked) numbers so it cant figure out the type, so add a 'setType' prop that will display the correct logo.

guastallaigor commented 2 years ago

Hey @vein101 If I understand correctly you just need a new event to be emitted when changing the card, which emits the type from the cardType computed property? I'll see what we can do, but if you have an idea of the implementation, let me know, I can accept a PR for it. Just remember that we need to keep the storybook and tests up to date with new features, even small ones. I can help with that if you don't want to or doesn't have any experience with them.

vein101 commented 2 years ago

@guastallaigor that is correct, I can add this change to my current PR. I was thinking either to add a watcher to the computed property or change the if's in the computed method to a switch and then emit the type variable before returning it?

guastallaigor commented 2 years ago

The watcher approach seems better to me. Side effects, even a simple emit on a computed property usually are not that good to have in my opinion.

guastallaigor commented 2 years ago

ref #36