AfikDeri / v-credit-card

Beautiful credit card form component for vueJS
MIT License
62 stars 27 forks source link

Allow label and placeholder customization #4

Closed gtbustos closed 4 years ago

gtbustos commented 4 years ago

It is possible to change text for labels and placeholders, this is useful for those who want to use this module on non-english projects.

AfikDeri commented 4 years ago

@gtbustos Great PR. While I love the approach of having a multi language support I'm not sure we need so many props for that. I like your way of doing this but allow me to suggest another option.

Each user can define a "translations" object;

const translations = {
  name: {
    label: 'Name',
    placeholder: 'Full Name'
  },
  card: {
    label: 'Card Number',
    placeholder: 'Card Number'
  },
  // all the rest ...
};

Then send it over through a single prop

<VCreditCard :trans="translations"/>

Now we can use it inside the credit card component like so

const defaultTranslations = {
  name: {
    label: 'Name',
    placeholder: 'Full Name'
  },
  card: {
    label: 'Card Number',
    placeholder: 'Card Number'
  },
  // all the rest ...
}

export default {
  props: {
    trans: {
      type: Object.
      default: defaultTranslations
    },
    // ...
  },
  // ...
}
 <label for="name">{{ trans.name.label }}</label>

What do you think? I'm not really sure which approach is better, but I'd love to get your opinion