Add "schema" prop to FormulateInput

[realnot]

I like the idea of using schemas with FormulateForm for generating form, but I believe that the step involved to generate the schema and working on it is not so easy. I think also mixing component objects with metadata field objects doesn't seems a big deal for big form (I'm thinking about data driven application you ma find in IoT for example)

My suggestion is to provide a solution to both world providing automation and flexibility (UI side). What about adding a schema to FormulateInput?

<template>
  <FormulateForm
    values="formValues"
  >
    <FormulateInput schema="my_schema.name"/>
    <FormulateInput schema="my_schema.email"/>
    <FormulateInput schema
      type="submit"
      label="Save account"
    />
  </FormulateForm>
</template>

This allow me to keep in sync all the properties of a specific field (less error prone) with the flexibility of custom / advanced layouts without touching the schema. Don't know if it's a good idea, just asking.

[justin-schroeder]

@realnot see if using v-bind would work for you? Vue Formulate's schema is intended to mirror the props api, so I think you should have good success. If not I'd be interested to hear what didnt work well so we can consider a future proposal for this. Thanks 👍

<template>
  <FormulateForm
    values="formValues"
  >
    <FormulateInput v-bind="my_schema.name"/>
    <FormulateInput v-bind="my_schema.email"/>
    <FormulateInput
      type="submit"
      label="Save account"
    />
  </FormulateForm>
</template>

[realnot]

@justin-schroeder thanks for your suggestion and time. I'll give you a feedback asap.

[realnot]

It's been a long time, but I've been able to play with VueFormulate and I can confirm that v-bind works fine for me:

<formulate-input
  v-bind="this.schema['rollout']['site']['properties']['status']"
  type="select"
  placeholder="Select a status"
  input-class="form-select"
/>

Where status is a property of site entity/model of rollout application and is similar to:

status: {
  ...
  description:"The site status"
  label:"Status"
  label-class:"form-label"
  name:"status"
  options: [
    { ... },
    {
      label:"Work in Progress",
      value:"work_in_progress"
    }
  ]
}

Amazing!