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

[variantjs]

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

[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