variant prop is not working (DOMException: Failed to execute 'setAttribute...)

[MuhammedAlkhudiry]

Hello,
I followed the README file and this is my setup:

export const theme = {
    TButton: {
        // The fixed classes will never change and will be merged with the `classes` value or the active variant
        fixedClasses: 'focus:outline-none focus:shadow-outline inline-flex items-center transition ease-in-out duration-150',
        // Classes used when any variant is active
        classes: 'text-white bg-blue-600 hover:bg-blue-500 focus:border-blue-700 active:bg-blue-700 text-sm font-medium border border-transparent px-3 py-2 rounded-md',
        variants: {
            // A red variant of the button (applied when `<t-button variant="error" />`)
            error: 'text-white bg-red-600 hover:bg-red-500 focus:border-red-700 active:bg-red-700 text-sm font-medium border border-transparent px-3 py-2 rounded-md',
            // A green variant of the button (applied when `<t-button variant="success" />`)
            success: 'text-white bg-green-600 hover:bg-green-500 focus:border-green-700 active:bg-green-700 text-sm font-medium border border-transparent px-3 py-2 rounded-md',
            // ...unlimited variants
        }
        // ...More settings
    },
};

when I try to use the button

<TButton
         variant="error"
         class="shadow-lg px-6 py-3 text-xl border-b-4 border-green-200 rounded-xl inline"
          href="#pricing">
  
</TButton>

this error shows

Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.

note: it works when I delete variant="error", and I use Vite for bundling

And also, I can not thank you enough for this great library.

[stephenkhoo]

I've tried to setup with similar setting, I can't get the configuration / theme to even work.

import { createApp } from 'vue'
import App from './components/App.vue'
import { variantJS, TButton } from '@variantjs/vue'

let app = createApp(App)

app.mount('#app')

const configuration = {
  't-button': {
    component: TButton,
    props: {
      fixedClasses: 'border-2 block w-full rounded text-gray-800',
      classes: 'border-2 block w-full rounded text-gray-800'
      // ...More settings
    }
  },
}

app.use(variantJS, configuration)

The classes or fixedClasses will not reflect when I use the component. :(

[alfonsobries]

@stephenkhoo docs are incorrect the correct syntax is this:

export const theme = {
  TButton: {
      // The fixed classes will never change and will be merged with the `classes` value or the active variant
      fixedClasses: 'focus:outline-none focus:shadow-outline inline-flex items-center transition ease-in-out duration-150',
      // Classes used when any variant is active
      classes: 'text-white bg-blue-600 hover:bg-blue-500 focus:border-blue-700 active:bg-blue-700 text-sm font-medium border border-transparent px-3 py-2 rounded-md',
      variants: {
          error: {
            classes: 'text-white bg-red-600 hover:bg-red-500 focus:border-red-700 active:bg-red-700 text-sm font-medium border border-transparent px-3 py-2 rounded-md',
          },
          success: {
            classes: 'text-white bg-green-600 hover:bg-green-500 focus:border-green-700 active:bg-green-700 text-sm font-medium border border-transparent px-3 py-2 rounded-md',
          }
      }
      // ...More settings
  },
};

I am updating the docs right now, feel free to open this ticket again if it doesn't work