Submit missing styling

[raizdev]

My submit is missing styling. If I import inside the component from primevue then the styling is back.

What I am doing wrong?

[sfxcode]

Hi,

button styling is not really part of this framework, but depends on your environment.

Styling is done by the FormKit Element:

<FormKit
      id="form"
      v-model="formData"
      :form-class="formClass"
      :actions-class="actionsClass"
      type="form"
      :submit-label="submitLabel"
      :submit-attrs="{
        inputClass,
      }"
      @submit="handleSave"
    >

If you use PrimeVue styled, inputClass should be like

p-button p-component

to be shown.

In unstyled mode use TailWind like classes for the button.

tbh, your example makes it very hard to suggest a solution for your problem ;-)

Hope that helps,

Greetings Tom

[raizdev]

I forgot to add example, i use the p-component p-button

<template>
      <FormKit
          id="form"
          v-model="data"
          type="form"
          :submit-attrs="{
            inputClass: 'p-button p-component',
          }"
          @submit="submitHandler"
      >
            <FormKitSchema :schema="schema" :data="data" />
        </FormKit>
</template>

Above is not working, if I add manually the button component inside this component then the styling is back. But then i have 2 buttons.. which means that it seems the style is by default not imported

<template>
      <FormKit
          id="form"
          v-model="data"
          type="form"
          :submit-attrs="{
            inputClass: 'p-button p-component',
          }"
          @submit="submitHandler"
      >
            <FormKitSchema :schema="schema" :data="data" />
        </FormKit>
</template>

[sfxcode]

Hm,

that works normally at expected because it is the same pattern i use in the playground. FormKit should render at least an unstyled button. You should check the output html and maybe the console if something goes wrong.

Greetings, Tom

[raizdev]

Hm,

that works normally at expected because it is the same pattern i use in the playground. FormKit should render at least an unstyled button. You should check the output html and maybe the console if something goes wrong.

Greetings, Tom

I have made an example on stackblitz https://stackblitz.com/edit/vitejs-vite-meubb6

As you can see the button is not styled. If you add component inside App.vue formkit will be styled.

No concole errors, stuck for days and trying many things to solve it, but unfortunately. I hope you have the solution :)

[sfxcode]

Hi, Now i get your problem. Because no Button component is used elsewhere in your Application, PrimeVue does not provide the style class for p-button, what make sense because you don't want to blow up the styles from not used components.

It looks as there are some solutions for the moment: Use some Button component anywhere in the app (like you did) or provide some styling for the formkit submit button by yourself (Then submit mechanism from FormKit is used).

Or there is an explanation in the FormKit docs how to use a custom button (like PrimeVue Button Component), but you must implement some Form Submit Button behavior by yourself. Maybe i can provide some sample for this in the near future ...

In my Application it seems that the TopBar Buttons does the job ...

Anyway, good point, but i see no general solution atm in styled mode of PrimeVue

Sorry,

Tom

[raizdev]

I fixed now with define button component inside template formkit. But feels not the right way. Would be nice if you have another solution so it will be available in every component without define it manually

<template #submit>
    <Button label="Submit" />
</template>

[sfxcode]

You are right, i will try include the PrimeVue Button in my provided FormKitDataEdit component to ensure proper style rendering.

Thank you for reporting and a nice coding time,

Tom

[raizdev]

@sfxcode thanks for your commit!! it working by default now :)