Allow schema sections to be moved

Describe the feature

Similar to Vuetify’s default inline-label option, I’d like to be able to easily add labels which replace the need for placeholders and also serve an aestethic purpose. I’m currently replacing a Vuetify project (yuk) with custom styling + FormKit, but have found the above to be a useful feature for this project that I miss.

While I understand FormKit wanting to leave most styling options to the user, in this case it’s a hurdle that would be easier to add internally.

Here’s a codepen to display the styling I want to accomplish, and why it doesn’t work in FormKit out of the box. https://codepen.io/TitusDecali/pen/QWagGJj?editors=1100

Due to the formkit-inner wrapper, the CSS cannot properly target the :focus state.

I do understand that this can be removed with

 :sections-schema="{
    inner: { $el: null }
 }"

However that then removes a ton of wanted styling for borders, focus states, error highlighting, etc.

As this requires quite significant modification to achieve (as well as adding the above code to every input), and the time required for each person to figure out how to properly achieve this look, I would like to suggest an inline-label prop be available that gives us this functionality out of the box, automatically removes placeholders, and give us a class to target the label when in these given states to allow for font-size adjustment depending on if it is in a focused state or not (if needed).

As always, thanks for this great library!

[justin-schroeder]

Dang it — I got sucked into this — been having too much fun. Here’s a more fleshed out example:

https://formkit.link/81efab356e3c6459ee1501d5acb42d60

[justin-schroeder]

Based on that stacktrace I think the plugin must not be exported/imported correctly. Assuming you put the plugin in ./moveLabelPlugin.js, it should look like:

// moveLabelPlugin.js
import { clone } from '@formkit/vue'

export default function moveLabelPlugin (node) {
  node.on('created', () => {
    const inputDefinition = clone(node.props.definition)
    if (['radio', 'checkbox', 'select'].includes(node.props.type)) return
    const originalSchema = inputDefinition.schema
    const higherOrderSchema = (extensions) => {
      // This kills the original label
      extensions.label = { $el: null, children: null }
      extensions.suffix = {
        $el: 'label',
        children: '$label',
        attrs: {
          'data-has-value': '$_value !== "" && $_value !== undefined',
          class: '$classes.floating',
          for: '$id'
        }
      }
      return originalSchema(extensions)
    }
    
    inputDefinition.schema = higherOrderSchema
    node.props.definition = inputDefinition
  })
}