variantjs / vue

Vue Variantjs
https://variantjs.netlify.app
182 stars 13 forks source link

TInputGroup: variants css overwrites props #57

Open tobiasdiez opened 2 years ago

tobiasdiez commented 2 years ago

If you have a input group

<t-input-group
  label="Email address"
  variant="important"
>
  <t-input
    v-model="email"
    v-focus
  />
</t-input-group>

and style config

TInputGroup: {
    fixedClasses: {
      wrapper: '',
      label: 'block text-sm text-gray-700',
      body: 'mt-1',
      feedback: ' text-sm text-sm mt-1',
      description: 'text-gray-400 text-sm',
    },
    classes: {
      wrapper: '',
      label: '',
      body: '',
      feedback: 'text-gray-400',
      description: 'text-gray-400',
    },
    variants: {
      important: {
        label: 'font-semibold',
      },
    },
  },

then the config option label from variants > important is overwriting the prop label and font-semibold instead of Email address is the label text.

tobiasdiez commented 2 years ago

Apparently, variantjs requires an additional classes as in

    variants: {
      important: {
        classes: {
          label: 'font-semibold',
        }
      },
    },

not sure if that's by design.