Best way to handle invalid state for InputText when using PassThrough

[jfitzsimmons2]

I'm using passthrough in PrimeVue and trying to determine the best way to create a style for when the value is invalid using passthrough. Right now I have something like this in my main.ts. I use usePassThrough to merge it with the builtin Tailwind pt.

const pt = {
  invalid: {
    inputtext: {
      root: (s) => {
        return {
          class: [
            ...Tailwind.inputtext.root(s).class,
            "border border-red-600 dark:border-red-400 hover:border-red-600 focus:border-red-600 dark:focus:border-red-400 dark:hover:border-red-600",
          ],
        };
      },
    },
  },

Then in my component

<InputText v-model="text" :pt="invalid ? pt.invalid.inputtext : ''" placeholder="test" />

If invalid is true it'll use the invalid styles I set up in main.ts. It seems a little clunky, just curious if anyone has encountered a better way?

[tugcekucukoglu]

invalid is not a property or a special context object for PrimeVue components. PrimeVue designer provides some additional class styles like p-invalid and if you want to add an invalid style class with Tailwind there is a way for this. Firstly, you could find the Tailwind InputText object of PrimeVue here https://primevue.org/inputtext/#theming.tailwind. You may choose to copy-paste or create a custom new Tailwind object.

Let's say you did create a custom invalid property:

<InputText type="text" v-model="value" :invalid="true" />

The pt object can find all properties from global main.js and then customize it as you wish.

app.use(PrimeVue, {
  unstyled: true,
  pt: {
    inputtext: {
      root: ({ instance }) => ({
        class: [console.log(instance.$attrs.invalid)],
      }),
    },
  }
});

[jfitzsimmons2]

I like this a lot better than what I was trying, thanks! 🙏