variantjs / vue

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

TInput Variant not working #55

Open HugoHeneault opened 2 years ago

HugoHeneault commented 2 years ago

Hi there,

Thanks for your great work! We're definitively looking at sponsoring you soon :) I have this conf for my vue3 / inertia app :

import { createApp, h } from "vue";
import { createInertiaApp, Link, Head } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";

import { ZiggyVue } from "ziggy";
import { Ziggy } from "./ziggy";

import { variantJS, VariantJSConfiguration } from '@variantjs/vue'

InertiaProgress.init();

createInertiaApp({
    resolve: async (name) => {
        return (await import(`./Pages/${name}`)).default;
    },
    setup({ el, App, props, plugin }) {
        const configuration = {
            TInput: {
                variants: {
                    error: 'border-red-300 bg-red-50 placeholder-red-200 text-red-900'
                }
            },
        }

        createApp({ render: () => h(App, props) })
            .use(variantJS, configuration)
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .component("Link", Link)
            .component("Head", Head)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

Then I use

            <TInput v-model="form.name" :variant="$page.props.errors.name ? 'error' : ''"/>

The variant isn't applied and I have this error:

Uncaught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.
    at patchAttr (http://localhost:8080/js/app.js:26423:16)
    at patchProp (http://localhost:8080/js/app.js:26629:9)
    at patchProps (http://localhost:8080/js/app.js:23145:21)
    at patchElement (http://localhost:8080/js/app.js:23056:17)
    at processElement (http://localhost:8080/js/app.js:22904:13)
    at patch (http://localhost:8080/js/app.js:22821:21)
    at ReactiveEffect.componentUpdateFn [as fn] (http://localhost:8080/js/app.js:23433:17)
    at ReactiveEffect.run (http://localhost:8080/js/app.js:17176:25)
    at updateComponent (http://localhost:8080/js/app.js:23294:26)
    at processComponent (http://localhost:8080/js/app.js:23227:13)

Here are the props passed to the TInput:

CleanShot 2022-03-08 at 12 55 45@2x

What am i doing wrong?

Thanks alot for your help and awesome work!