sfxcode / formkit-primevue

PrimeVue (v4, v3) support for the FormKit validation Framwork
https://sfxcode.github.io/formkit-primevue
85 stars 10 forks source link

Feature Request: Floating Label #16

Closed mynameisjeffe closed 8 months ago

mynameisjeffe commented 9 months ago

Hi Tom!

I'm trying to use the built-in floating label of Prime Vue and tried using floating label of [Form Kit Plugin] (https://formkit.com/plugins/floating-labels#usage)

I can't seem to make it work.

For Form Kit Plugin I've tried the following

// formkit.config.ts
import type { DefaultConfigOptions } from '@formkit/vue'
import { defaultConfig } from '@formkit/vue'
import { createFloatingLabelsPlugin } from '@formkit/addons'
import '@formkit/addons/css/floatingLabels'
import { primeInputs } from '@sfxcode/formkit-primevue'

const config: DefaultConfigOptions = defaultConfig({
  plugins: [
    createFloatingLabelsPlugin({
      useAsDefault: true, // defaults to false
    }),
  ],
  inputs: primeInputs,

})

export default config

But this doesn't seem to work.

For built-in floating label of Prime Vue, I've tried playing around

  [
    {
      $formkit: 'primeInputText',
      name: 'email',
      type: 'email',
      label: 'Email',
      validation: 'required|email',
      outerClass: "card flex justify-content-center",
      wrapperClass: "p-float-label"
    },

But this doesn't work either.

Might you have any idea on how to do this?>

sfxcode commented 8 months ago

Sorry, but createFloatingLabelsPlugin only work with the formkit provided inputs.

imho there is no easy way to make PrimeVue floating label work.

Greetings,

Tom

mynameisjeffe commented 8 months ago

This is noted. Closing this issue!