How to add prefix for primevue components

[modbender]

@sfxcode thank you for the starter, I wanted to know about FormKit configuration. My primevue config is as below:

primevue: {
    options: {
      unstyled: false,
      ripple: true,
    },
    cssLayerOrder: "tailwind-base, primevue, tailwind-utilities",
    components: {
      prefix: "Prime",
      include: "*",
      exclude: [],
    },
    directives: {
      include: ["Ripple", "Tooltip"],
    },
  },

As you can see I have configured components prefix to be Prime. How do I do the same configuration in Formkit?

[sfxcode]

Hi, what problem do you want to solve ?

Actual the FormKit definitions for the wrapped inputs starts with prime, because it ist defined in @sfxcode/formkit-primevue like:

primeAutoComplete: primeAutoCompleteDefinition

that loads the PrimeAutoComplete component from the framework path. The formkit wrapper name (primeAutoComplete) can be defined by you if needed before usage in the formkit config.

Greetings,

Tom

[modbender]

I have a schema like below:

const commonProps = {
  class: "login-box-input",
  classes: {
    label: "text-white font-semibold",
    help: {
      "p-text-secondary text-sm": true,
      "formkit-help": false,
    },
    message: {
      "text-red-300 text-sm font-semibold": true,
      "formkit-message": false,
    },
  },
};

const passwordProps = {
  $formkit: "primePassword",
  feedback: false,
  toggleMask: true,
  pt: {
    input: {
      class: "login-box-input w-full",
    },
    showIcon: {
      class: "text-slate-100",
    },
    hideIcon: {
      class: "text-slate-100",
    },
  },
};

const loginSchema = reactive([
  {
    $el: "h3",
    children: "Log in",
    attrs: {
      class: "text-slate-100 font-extrabold text-center text-xl",
    },
  },
  {
    $formkit: "primeInputText",
    name: "email",
    label: "Email",
    validation: "required|email",
    attrs: {
      class: "login-box-input",
    },
    ...commonProps,
  },
  {
    name: "password",
    label: "Password",
    validation: "required|length:5,16",
    validationLabel: "password",
    ...passwordProps,
    ...commonProps,
  },
]);

But it doesn't get resolve the the appropriate component:

[sfxcode]

Ok, i see,

that is not possible because the prefix in PrimeVue maps the Original name to an other name in your application. tThe formkit wrapping classes points to the original component name.

Sorry, but i think you have to stick with the original PrimeVue component names or have to look for an other way of validation.

Have a nice coding time,

Tom

[modbender]

Ok thank you