FormVueLate

https://formvuelate.js.org
Admin
FormVueLate is a zero dependency Vue library for generating schema-driven forms with flexibility,...
Tokens:16,442
Snippets:179
Trust Score:8.1
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install Lookup Plugin with NPM

Source: https://formvuelate.js.org/guide/lookup.html

Install the plugin using NPM. This is a prerequisite for using the Lookup Plugin.

```bash
npm i @formvuelate/plugin-lookup
```

--------------------------------

### Install FormVueLate

Source: https://formvuelate.js.org/

Install the package using yarn or npm.

```bash
yarn add formvuelate
// OR
npm install formvuelate
```

--------------------------------

### Install Lookup Plugin with Yarn

Source: https://formvuelate.js.org/guide/lookup.html

Install the plugin using Yarn. This is a prerequisite for using the Lookup Plugin.

```bash
yarn add @formvuelate/plugin-lookup
```

--------------------------------

### Install Vee-Validate Plugin

Source: https://formvuelate.js.org/guide/veevalidate.html

Install the required packages via yarn or npm.

```bash
yarn add vee-validate@next @formvuelate/plugin-vee-validate

# OR

npm i vee-validate@next @formvuelate/plugin-vee-validate
```

--------------------------------

### Setup component data and validation

Source: https://formvuelate.js.org/guide/vuelidate.html

Initialize form data and Vuelidate within the component setup function.

```javascript
setup (props, context) {
  const userData = ref({
    firstName: 'John',
    lastName: '',
    email: ''
  })

  const $v = useVuelidate()

  return {
    schema: ref(SCHEMA),
    userData,
    updateValidations
  }
}
```

--------------------------------

### Install FormVueLate.js

Source: https://formvuelate.js.org/guide

Install the FormVueLate package using either yarn or npm. This is the first step to integrating the library into your project.

```bash
yarn add formvuelate
// OR
npm install formvuelate

```

--------------------------------

### SchemaWizard Basic Usage

Source: https://formvuelate.js.org/guide/schema-wizard.html

Demonstrates the basic setup of the SchemaWizard component with its required props: schema and step.

```APIDOC
## SchemaWizard Basic Usage

### Description
This example shows how to integrate the `SchemaWizard` component into your Vue application. It requires the `schema` and `step` props and utilizes the `useSchemaForm` composable for form data management.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Props
- **schema** (Array) - Required - The schema defining the steps and fields of the wizard form.
- **step** (Number) - Required - The current step index (0-based) to display.

### Request Example
```html
<template>
  <SchemaWizard :schema="wizardSchema" :step="step" />
</template>

<script>
import { ref } from 'vue'
import { SchemaWizard, useSchemaForm } from 'formvuelate'

export default {
  components: { SchemaWizard },
  setup () {
    const step = ref(0)
    const userData = ref({})
    useSchemaForm( αυτά)

    const wizardSchema = ref([
      // Step 1 - user's name
      {
        firstName: { component: 'FormText' },
        lastName: { component: 'FormText' }
      },
      // Step 2 - user's email and agree to terms
      {
        email: { component: 'FormEmail' },
        terms: { component: 'FormCheckbox' }
      }
    ])

    return {
      step,
      wizardSchema
    }
  }
}
</script>
```

### Response
N/A (Component Usage)
```

--------------------------------

### Install Vuelidate Plugin dependencies

Source: https://formvuelate.js.org/guide/vuelidate.html

Install the required Vuelidate and FormVueLatte plugin packages via npm or yarn.

```bash
npm i @vuelidate/core @vuelidate/validators @formvuelate/plugin-vuelidate

OR

yarn add @vuelidate/core @vuelidate/validators @formvuelate/plugin-vuelidate
```

--------------------------------

### Initial schema example for mapProps

Source: https://formvuelate.js.org/guide/lookup.html

An example schema where component types are defined using the 'type' property.

```json
{
  "firstName": {
    "type": "FormText",
    "info": "First name"
  }
}
```

--------------------------------

### Implement useSchemaForm in Setup

Source: https://formvuelate.js.org/migration

Wrap your form's model data with useSchemaForm within your component's setup function to manage reactivity.

```javascript
import { SchemaForm, useSchemaForm } from 'formvuelate'
import { ref } from 'vue'

export default {
  setup () {
    const userData = ref({
      firstName: '',
      lastName: ''
    })

    useSchemaForm(userData)

    return {
      userData
    }
  }
}
```

--------------------------------

### Example Schema for Component Mapping

Source: https://formvuelate.js.org/guide/lookup.html

An example schema where component names might not directly match the application's component names.

```json
{
  "firstName": {
    "component": "string",
    "label": "First name"
  },
   "favoriteThingAboutVue": {
    "component": "array",
    "label": "Favorite thing about Vue",
    "required": true,
    "options": [
      "Ease of use",
      "Documentation",
      "Community"
    ]
  }
}
```

--------------------------------

### Implement SchemaWizard Component

Source: https://formvuelate.js.org/guide/schema-wizard.html

Basic setup for a SchemaWizard component using the useSchemaForm composable.

```vue
<template>
  <SchemaWizard :schema="wizardSchema" :step="step" />
</template>

<script>
import { ref } from 'vue'
import { SchemaWizard, useSchemaForm } from 'formvuelate'

export default {
  components: { SchemaWizard },
  setup () {
    const step = ref(0)
    const userData = ref({})
    useSchemaForm(userData)

    const wizardSchema = ref({
      // schema
    })

    return {
      step,
      wizardSchema
    }
  }
}
</script>
```

--------------------------------

### Array Based Schema Example

Source: https://formvuelate.js.org/examples

Demonstrates constructing a schema as an array, where each element defines a field using a `model` property. This is an alternative to object-based schemas.

```vue
<template>
<form @submit.prevent="formSubmit">
<SchemaForm :schema="schema" />
<BaseButton type="submit">Submit</BaseButton>
<pre>{{ userData }}</pre>
</form>
</template>
<script>
import { ref } from "vue";
import FormText from "@/components/FormText.vue";
import FormSelect from "@/components/FormSelect.vue";
import FormCheckbox from "@/components/FormCheckbox.vue";
import BaseButton from "@/components/BaseButton.vue";
import { SchemaForm, useSchemaForm } from "formvuelate";

const SCHEMA = [
  {
    model: "firstName",
    component: FormText,
    label: "First Name",
  },
  {
    model: "lastName",
    component: FormText,
    label: "Last Name",
  },
  {
    model: "email",
    component: FormText,
    label: "Email",
    type: "email",
  },
  {
    model: "password",
    component: FormText,
    label: "Password",
    type: "password",
  },
  {
    model: "country",
    component: FormSelect,
    label: "Country",
    options: [
      { value: "", label: "-- Select a country --" },
      { value: "USA", label: "USA" },
      { value: "Argentina", label: "Argentina" },
    ],
  },
  {
    model: "terms",
    component: FormCheckbox,
    label: "Terms and Conditions",
  },
];

export default {
  components: {
    SchemaForm,
    BaseButton,
  },
  setup() {
    const schema = ref(SCHEMA);
    const { userData, formSubmit } = useSchemaForm();

    return {
      schema,
      userData,
      formSubmit,
    };
  },
};
</script>

```

--------------------------------

### Schema example for advanced mapProps function

Source: https://formvuelate.js.org/guide/lookup.html

Schema demonstrating different ways to define components ('type' vs 'field') for advanced mapping scenarios.

```json
{
  "firstName": {
    "type": "FormText",
    "label": "First name",
    "important": true
  },
  "lastName": {
    "field": "FormText",
    "label": "Last name",
    "important": true
  }
}
```

--------------------------------

### Implement FormText Component with Validation

Source: https://formvuelate.js.org/guide/veevalidate.html

Example component accepting the validation object as a prop.

```html
<template>
  <div>
    <input :value="modelValue" @input="update($event.target.value)" />
    <span>{{ validation.errorMessage }}</span>
  </div>
</template>

<script>
export default {
  props: {
    // other props
    modelValue: {
      required: true
    },
    validation: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    update (value) {
      this.$emit('update:modelValue', value)
    }
  }
}
</script>
```

--------------------------------

### Schema with mapped and preserved properties

Source: https://formvuelate.js.org/guide/lookup.html

Example of a schema after applying `mapProps` with `preserveMappedProps: true`, showing both original and mapped properties.

```json
{
  "firstName": {
    "type": "FormText",
    "component": "FormText",
    "label": "First name",
    "important": true
  },
  "lastName": {
    "field": "FormText",
    "component": "FormText",
    "label": "Last name",
    "important": true
  }
}
```

--------------------------------

### Example Schema with Nested SchemaForm

Source: https://formvuelate.js.org/guide/lookup.html

This is an example of a schema structure that includes nested SchemaForm components, requiring the lookupSubSchemas function for proper handling.

```json
{
  "firstName": {
    "component": "string",
    "info": "First Name"
  },
  "work": {
    "component": "SchemaForm",
    "schema": {
      "address": {
        "type": "string",
        "label": "Work address"
      },
      "details": {
        "component": "SchemaForm",
        "schema": {
          "position": {
            "type": "string",
            "label": "Work email"
          }
        }
      }
    }
  }
}
```

--------------------------------

### Initialize Schema Form with Sub-Schema Lookup

Source: https://formvuelate.js.org/guide/lookup.html

Call lookupSubSchemas before useSchemaForm in your setup function to ensure nested SchemaForm components are correctly processed.

```javascript
setup () {
  const model = ref({})

  lookupSubSchemas(SchemaFormWithPlugins)
  useSchemaForm(model)

  const schema = shallowRef(MY_SCHEMA)

  return {
    schema
  }
}
```

--------------------------------

### Set Initial Touched Meta Flags

Source: https://formvuelate.js.org/guide/veevalidate.html

Use the initial-touched prop to define the starting touched state for specific fields in the schema.

```vue
<template>
  <SchemaForm :schema="schema" :initial-touched="initialTouched">
    <template #afterForm>
      <button>Submit</button>
    </template>
  </SchemaForm>
</template>

<script>
export default {
  setup() {
    const schema = ref([
      // schema...
    ])

    const formData = ref({})
    useSchemaForm(formData)

    const initialTouched = {
      email: true,
      password: false
    }

    return {
      formData,
      schema,
      initialErrors,
      initialTouched
    }
  }
}
</script>
```

--------------------------------

### Nested Schemas Example

Source: https://formvuelate.js.org/examples

Illustrates how `SchemaForm` handles nested schemas, where properties can be objects that themselves use `SchemaForm` with their own schemas. This allows for hierarchical form structures.

```vue
<template>
<form @submit.prevent="formSubmit">
<SchemaForm :schema="schema" />
<BaseButton type="submit">Submit</BaseButton>
<pre>{{ userData }}</pre>
</form>
</template>
<script>
import { ref } from "vue";
import FormText from "@/components/FormText.vue";
import FormSelect from "@/components/FormSelect.vue";
import FormCheckbox from "@/components/FormCheckbox.vue";
import BaseButton from "@/components/BaseButton.vue";
import { SchemaForm, useSchemaForm } from "formvuelate";

const SCHEMA = {
  firstName: {
    component: FormText,
    label: "First Name",
  },
  lastName: {
    component: FormText,
    label: "Last Name",
  },
  email: {
    component: FormText,
    label: "Email",
    type: "email",
  },
  password: {
    component: FormText,
    label: "Password",
    type: "password",
  },
  country: {
    component: FormSelect,
    label: "Country",
    options: [
      { value: "", label: "-- Select a country --" },
      { value: "USA", label: "USA" },
      { value: "Argentina", label: "Argentina" },
    ],
  },
  terms: {
    component: FormCheckbox,
    label: "Terms and Conditions",
  },
  work: {
    component: SchemaForm,
    schema: {
      company: {
        component: FormText,
        label: "Company",
      },
      position: {
        component: FormText,
        label: "Position",
      },
      details: {
        component: SchemaForm,
        schema: {
          startDate: {
            component: FormText,
            label: "Start Date",
            type: "date",
          },
          endDate: {
            component: FormText,
            label: "End Date",
            type: "date",
          },
        },
      },
    },
  },
};

export default {
  components: {
    SchemaForm,
    BaseButton,
  },
  setup() {
    const schema = ref(SCHEMA);
    const { userData, formSubmit } = useSchemaForm();

    return {
      schema,
      userData,
      formSubmit,
    };
  },
};
</script>

```

--------------------------------

### Create SchemaForm with Plugins

Source: https://formvuelate.js.org/guide/plugins

Use SchemaFormFactory to generate a component with multiple plugins applied in order. Ensure useSchemaForm is called within the setup function of the consuming component.

```vue
<template>
  <SchemaFormWithPlugins :schema="mySchema" />
</template>

<script>
import useVuelidate from '@vuelidate'
import VuelidatePlugin from '@formvuelate/plugin-vuelidate'
import LookupPlugin from '@formvuelate/plugin-lookup'
import VeeValidatePlugin from '@formvuelate/plugin-vee-validate'

import { SchemaFormFactory, useSchemaForm } from 'formvuelate'
import { ref } from 'vue'

const SchemaFormWithPlugins = SchemaFormFactory([
  LookupPlugin({
      mapComponents: {
      string: 'FormText',
      array: 'FormSelect'
    }
  }),
  VuelidatePlugin(useVuelidate),
  VeeValidatePlugin(),
])

export default {
  components: {
    SchemaFormWithPlugins
  },
  setup () {
    const formData = ref({})
    useSchemaForm(formData)

    const mySchema = ref({
      // Schema
    })

    return {
      mySchema
    }
  }
}
</script>
```

--------------------------------

### Form Level Validation Schema with Yup

Source: https://formvuelate.js.org/guide/veevalidate.html

Configure form-level validation by passing a Yup validation schema to the `validation-schema` prop of SchemaFormWithValidation. Ensure vee-validate and Yup are installed.

```javascript
import * as yup from 'yup'

export default {
  components: {
    SchemaFormWithValidation
  },
  setup() {
    const schema = ref([
      // Fields without the `validation` prop
    ])

    const formData = ref({})
    useSchemaForm(formData)

    // The validation schema
    const validationSchema = yup.object().shape({
      email:
        .string()
        .email()
        .required(),
      password:
        .string()
        .min(5)
        .required(),
      fullName: yup.string().required()
    })

    return {
      schema,
      validationSchema
    }
  }
}
```

--------------------------------

### Conditional Element Cleanup Behavior

Source: https://formvuelate.js.org/guide/advanced-schema.html

By default, fields with invalid conditions are removed from the model. This example shows the initial model state and the resulting model after a condition becomes false.

```javascript
const form = ref({
  type: "A",
  aField: 'default a',
  bField: 'default b'
});

useSchemaForm(form)

const schema = ref({
  type: {
    component: FormSelect,
    label: "Schema A or B?",
    options: ["A", "B"],
  },
  aField: {
    component: FormText,
    label: "A field",
    condition: model => model.type === 'A'
  },
  bField: {
    component: FormText,
    label: 'B field',
    condition(model) {
      return model.type === 'B'
    }
  }
})
```

```json
{
  type: "A",
  aField: 'default a'
}
```

--------------------------------

### Handling Form Submit with VeeValidatePlugin

Source: https://formvuelate.js.org/guide/veevalidate.html

The VeeValidatePlugin automatically triggers validation before form submission. The `submit` event handler only executes if the form is valid. No special setup is required for validation triggering.

```html
<template>
  <SchemaForm @submit="onSubmit" :schema="schema">
    <template #afterForm>
      <button>Submit</button>
    </template>
  </SchemaForm>
</template>
```

--------------------------------

### Field Level Validations Schema

Source: https://formvuelate.js.org/guide/veevalidate.html

Define field-level validations using string rules, functions, or Yup schemas within the schema configuration. Ensure vee-validate is installed and configured.

```javascript
import * as yup from 'yup'

const schema = {
  email: {
    component: FormText,
    label: 'Email',
    // Globally defined rules
    validations: 'required|email'
  },
  password: {
    component: FormText,
    label: 'Password',
    // Validation functions
    validations: value => value && value.length > 6
  },
  fullName: {
    component: FormText,
    label: 'Full Name',
    // yup validations
    validations: yup.string().required()
  }
}
```

--------------------------------

### Custom Validation Message Labels

Source: https://formvuelate.js.org/guide/veevalidate.html

Override default validation messages by adding a `label` prop to your field schema. This provides more user-friendly error messages. This example shows the custom message for a 'required' rule.

```javascript
const arraySchema = ref([
  {
    model: 'firstName',
    label: 'First name',
  }
])

const objectSchema = ref({
  firstName: {
    label: 'First name',
  }
})
```

--------------------------------

### Handle Nested Model Properties in Conditions

Source: https://formvuelate.js.org/guide/advanced-schema.html

Safely access deeply nested properties within the form model in condition functions using optional chaining (?.) or external libraries like Lodash's `get` to prevent errors.

```javascript
condition: model => model.first?.second?.third?.myField === 'something'
```

```javascript
condition: model => _.get(model, 'first.second.third.myField', false) === 'something'
```

--------------------------------

### Using initial-touched prop

Source: https://formvuelate.js.org/guide/veevalidate.html

Demonstrates how to provide the `initial-touched` prop to set the initial `touched` meta flags for schema fields.

```APIDOC
## Setting Initial Touched State

### Description
Use the `initial-touched` prop to pre-define the touched state for your form fields.

### Component
SchemaForm

### Props
- **initial-touched** (Object) - Required - An object where keys are field names and values are booleans indicating their initial touched state.

### Request Example
```html
<template>
  <SchemaForm :schema="schema" :initial-touched="initialTouched">
    <template #afterForm>
      <button>Submit</button>
    </template>
  </SchemaForm>
</template>

<script>
import { ref } from 'vue';
import { SchemaForm, useSchemaForm } from '@formvuelate/vue3';

export default {
  components: {
    SchemaForm
  },
  setup() {
    const schema = ref([
      // schema definition...
    ]);

    const formData = ref({});
    useSchemaForm(formData);

    const initialTouched = {
      email: true,
      password: false
    };

    return {
      formData,
      schema,
      initialTouched
    };
  }
}
</script>
```
```

--------------------------------

### Basic SchemaForm with useSchemaForm

Source: https://formvuelate.js.org/examples

Demonstrates the simplest usage of `SchemaForm` by providing a schema object and binding form output to local data using `useSchemaForm`. Ensure custom components like `FormText`, `FormSelect`, `FormCheckbox`, and `BaseButton` are available.

```vue
<template>
<form @submit.prevent="formSubmit">
<SchemaForm :schema="schema" />
<BaseButton type="submit">Submit</BaseButton>
<pre>{{ userData }}</pre>
</form>
</template>
<script>
import { computed, ref } from "vue";
import FormText from "@/components/FormText.vue";
import FormSelect from "@/components/FormSelect.vue";
import FormCheckbox from "@/components/FormCheckbox.vue";
import BaseButton from "@/components/BaseButton.vue";
import { SchemaForm, useSchemaForm } from "formvuelate";

const SCHEMA = {
  firstName: {
    component: FormText,
    label: "First Name",
  },
  lastName: {
    component: FormText,
    label: "Last Name",
  },
  email: {
    component: FormText,
    label: "Email",
    type: "email",
  },
  password: {
    component: FormText,
    label: "Password",
    type: "password",
  },
  country: {
    component: FormSelect,
    label: "Country",
    options: [
      { value: "", label: "-- Select a country --" },
      { value: "USA", label: "USA" },
      { value: "Argentina", label: "Argentina" },
    ],
  },
  terms: {
    component: FormCheckbox,
    label: "Terms and Conditions",
  },
};

export default {
  components: {
    SchemaForm,
    BaseButton,
  },
  setup() {
    const schema = ref(SCHEMA);
    const { userData, formSubmit } = useSchemaForm();

    return {
      schema,
      userData,
      formSubmit,
    };
  },
};
</script>

```

--------------------------------

### Import useSchemaForm

Source: https://formvuelate.js.org/migration

Import the necessary components and composables from the FormVueLate package.

```javascript
import { SchemaForm, useSchemaForm } from 'formvuelate'
```

--------------------------------

### Import SchemaFormFactory and LookupPlugin

Source: https://formvuelate.js.org/guide/lookup.html

Import the necessary components, SchemaFormFactory and LookupPlugin, to enable schema manipulation.

```javascript
import { SchemaFormFactory } from 'formvuelate'
import LookupPlugin from '@formvuelate/plugin-lookup'
```

--------------------------------

### Create Schema Form with Lookup Plugin

Source: https://formvuelate.js.org/guide/lookup.html

Instantiate your schema form component, applying the LookupPlugin with custom component mappings.

```javascript
const SchemaFormWithPlugins = SchemaFormFactory([
  LookupPlugin({
    mapComponents: {
      Text: BaseInput
    }
  })
])
```

--------------------------------

### SchemaWizard Submit Handling

Source: https://formvuelate.js.org/guide/schema-wizard.html

Illustrates how to listen for the `submit` event emitted by the SchemaWizard component to handle form submissions.

```APIDOC
## SchemaWizard Submit Handling

### Description
The `SchemaWizard` component automatically creates a form wrapper and emits a `submit` event when the form is submitted. You can listen to this event using `@submit` to handle the submission logic on your end.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Events
- **@submit** - Emitted when the form is submitted. The event uses `preventDefault()`.

### Request Example
```html
<template>
  <SchemaWizard
    @submit="onSubmit"
    :schema="mySchema"
    :step="step"
  />
</template>

<script>
export default {
  methods: {
    onSubmit (event) {
      // Handle form submission logic here
      console.log('Form submitted:', event)
    }
  }
}
</script>
```

### Response
N/A (Event Handling)
```

--------------------------------

### Create SchemaForm with Lookup Plugin

Source: https://formvuelate.js.org/guide/lookup.html

Instantiate a SchemaForm component enabled with the Lookup Plugin using SchemaFormFactory. Plugin configuration can be passed here.

```javascript
const SchemaFormWithPlugin = SchemaFormFactory([
  LookupPlugin({
    // plugin configuration here
  })
])
```

--------------------------------

### Default Validation Message Labels

Source: https://formvuelate.js.org/guide/veevalidate.html

By default, vee-validate uses the field's model name for validation messages. This example shows the default message for a 'required' rule.

```javascript
const arraySchema = ref([
  {
    model: 'firstName',
    // ...
  }
])

const objectSchema = ref({
  firstName: {
    // ...
  }
})
```

--------------------------------

### Import SchemaFormFactory

Source: https://formvuelate.js.org/guide/plugins

Import the factory function from the formvuelate package.

```javascript
import { SchemaFormFactory } from 'formvuelate'
```

--------------------------------

### Define a basic FormVueLate plugin

Source: https://formvuelate.js.org/guide/customplugins.html

Create a plugin function and register it using SchemaFormFactory.

```javascript
const myPlugin = function () {
  // Plugin code goes here
}

const SchemaFormWithCustomPlugin = SchemaFormFactory([
  myPlugin
])
```

--------------------------------

### Initializing Form Model with useSchemaForm

Source: https://formvuelate.js.org/guide/advanced-schema.html

Initialize the form's model using the useSchemaForm composable. The returned model is a Vue ref that can be directly modified.

```javascript
const { model, updateFormModel } = useSchemaForm({
  name: '',
  email: '',
  nested: {
    phone: ''
  }
})
```

--------------------------------

### Using SchemaForm with Initial Errors

Source: https://formvuelate.js.org/guide/veevalidate.html

Render a SchemaForm with pre-defined initial errors by passing the `initial-errors` object to the prop.

```html
<template>
  <SchemaForm :schema="schema" :initial-errors="initialErrors">
    <template #afterForm>
      <button>Submit</button>
    </template>
  </SchemaForm>
</template>

<script>
export default {
  setup() {
    const schema = ref([
      // schema...
    ])

    const formData = ref({})
    useSchemaForm(formData)

    const initialErrors = {
      email: 'This email is already taken',
      password: 'Password must be at least 8 characters long'
    }

    return {
      schema,
      initialErrors
    }
  }
}
</script>
```

--------------------------------

### Create a cumulative plugin

Source: https://formvuelate.js.org/guide/customplugins.html

Plugins receive the base returns from the previous step and must return the object with modifications.

```javascript
const pluginThatAddsSomethingCool = function(baseReturns) {
  return {
    ...baseReturns,
    somethingCool: true
  }
}

const cumulativeExample = SchemaFormFactory([
  pluginThatAddsSomethingCool
])
```

--------------------------------

### Implement SchemaForm Component

Source: https://formvuelate.js.org/

Initialize the form model using useSchemaForm and pass the schema to the SchemaForm component.

```vue
<template>
  <SchemaForm :schema="mySchema" />
</template>

<script>
import { ref } from 'vue'
import { SchemaForm, useSchemaForm } from 'formvuelate'

export default {
  components: { SchemaForm },
  setup () {
    const formModel = ref({})
    useSchemaForm(formModel)

    const mySchema = ref({
      // Schema here
    })

    return {
      mySchema
    }
  }
}
</script>
```

--------------------------------

### Import lookupSubSchemas from Plugin-Lookup

Source: https://formvuelate.js.org/guide/lookup.html

Import the necessary composition function before configuring your schema form.

```javascript
import LookupPlugin, { lookupSubSchemas } from '@formvuelate/plugin-lookup'
```

--------------------------------

### Initialize SchemaForm with Vee-Validate

Source: https://formvuelate.js.org/guide/veevalidate.html

Create a validated SchemaForm component by passing the plugin to SchemaFormFactory.

```javascript
import { SchemaFormFactory } from 'formvuelate'
import VeeValidatePlugin from '@formvuelate/plugin-vee-validate'

const SchemaFormWithValidation = SchemaFormFactory([
  VeeValidatePlugin({
    // plugin configuration here
  })
])
```

--------------------------------

### Handle Form Submit

Source: https://formvuelate.js.org/guide/schema-wizard.html

Listen to the submit event emitted by the SchemaWizard component.

```vue
<template>
  <SchemaWizard
    @submit="onSubmit"
    :schema="mySchema"
    :step="step"
  />
</template>
```

--------------------------------

### Use Custom Form Wrapper

Source: https://formvuelate.js.org/guide/schema-form.html

Employ useCustomFormWrapper to disable the automatic generation of a wrapping <form> tag, useful when integrating with component libraries like Quasar.

```html
<q-form>
  <SchemaForm
    :schema="schema"
    useCustomFormWrapper
  />
</q-form>
```

--------------------------------

### Setting Initial Errors for SchemaForm

Source: https://formvuelate.js.org/guide/veevalidate.html

Provide initial validation errors to the SchemaForm using the `initial-errors` prop. This is useful for pre-populating error states.

```javascript
const initialErrors = {
  email: 'This email is already taken',
  password: 'Password must be at least 8 characters long'
}
```

--------------------------------

### SchemaWizard Slots

Source: https://formvuelate.js.org/guide/schema-wizard.html

Explains the usage of `beforeForm` and `afterForm` slots for customizing the form's layout.

```APIDOC
## SchemaWizard Slots

### Description
The `SchemaWizard` component provides two slots, `beforeForm` and `afterForm`, allowing you to inject custom content before and after the internal `SchemaForm` components, respectively. The `afterForm` slot is recommended for placing submit buttons.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Slots
#### beforeForm
Content placed here will render after the main `<form>` tag but before the internal `SchemaForm` components.

#### afterForm
Content placed here will render after the internal `SchemaForm` components but before the closing `</form>` tag. Ideal for submit buttons.

### Request Example
```html
<template>
  <SchemaWizard :schema="mySchema" :step="step">
    <template #beforeForm>
      <div>Content before the form fields</div>
    </template>
    <template #afterForm>
      <button type="submit">Submit</button>
    </template>
  </SchemaWizard>
</template>
```

### Response
N/A (Slot Usage)
```

--------------------------------

### Bind schema and data in template

Source: https://formvuelate.js.org/guide/vuelidate.html

Bind the schema and form data to the SchemaForm component in the template.

```html
<template>
  <SchemaFormWithValidations
    :schema="schema"
    v-model="userData"
  />
</template>
```

--------------------------------

### Import FormVueLate Components and Composables

Source: https://formvuelate.js.org/guide

Import the required components and the `useSchemaForm` composable from the FormVueLate library into your Vue component. This makes them available for use in your form implementation.

```javascript
import { SchemaForm, SchemaWizard, SchemaFormFactory, useSchemaForm } from 'formvuelate'

```

--------------------------------

### Add Content Before Form

Source: https://formvuelate.js.org/guide/schema-form.html

Utilize the 'beforeForm' slot to insert content before the SchemaForm component but after the opening <form> tag.

```html
<form>
  <!-- beforeForm slot content goes here -->
  <SchemaForm />
</form>
```

--------------------------------

### Define Wizard Schema

Source: https://formvuelate.js.org/guide/schema-wizard.html

The schema for SchemaWizard must be an array where each element represents a step in the form.

```javascript
const wizardSchema = [
  // Step 1 - user's name
  {
    firstName: { component: FormText },
    lastName: { component: FormText }
  },

  // Step 2 - user's email and agree to terms
  {
    email: { component: FormEmail },
    terms: { component: FormCheckbox }
  }
]
```

--------------------------------

### Display Loading State During Submission

Source: https://formvuelate.js.org/guide/veevalidate.html

Apply CSS classes based on the validation.isSubmitting state to indicate form processing.

```vue
<SchemaForm :schema="schema">
  <template #afterForm="{ validation }">
    <button :class="{ 'is-submitting': validation.isSubmitting }">Submit</button>
  </template>
</SchemaForm>
```

--------------------------------

### Define schema with validation rules

Source: https://formvuelate.js.org/guide/vuelidate.html

Add a validations property to each schema element to define validation rules using Vuelidate validators.

```javascript
import { required, email } from '@vuelidate/validators'
import useVuelidate from '@vuelidate/core'
import { ref } from 'vue'

const SCHEMA = {
  firstName: {
    component: FormText,
    label: 'First Name',
    validations: {
      required
    }
  },
  lastName: {
    component: FormText,
    label: 'Last Name',
    validations: {
      required
    }
  },
  email: {
    component: FormText,
    label: 'Your email',
    validations: {
      email,
      required
    }
  }
}
```

--------------------------------

### Create SchemaForm with VuelidatePlugin

Source: https://formvuelate.js.org/guide/vuelidate.html

Use SchemaFormFactory to inject the VuelidatePlugin into the form component.

```javascript
import { SchemaFormFactory } from 'formvuelatte'
import useVuelidate from '@vuelidate'
import VuelidatePlugin from '@formvuelatte/plugin-vuelidate'

const SchemaFormWithPlugins = SchemaFormFactory([
  VuelidatePlugin(useVuelidate)
])
```

--------------------------------

### Handle Form Submit Event

Source: https://formvuelate.js.org/guide/schema-form.html

Listen for the '@submit' event on the SchemaForm component to handle form submissions. The event is automatically prevented to allow custom handling.

```html
<template>
  <SchemaForm
    @submit="onSubmit"
    :schema="mySchema"
  />
</template>
```

--------------------------------

### Using SchemaForm with Form Level Validation

Source: https://formvuelate.js.org/guide/veevalidate.html

Render a form with both schema and a Yup validation schema using the SchemaFormWithValidation component.

```html
<template>
  <div id="app">
    <SchemaFormWithValidation
      :schema="schema"
      :validation-schema="validationSchema"
    />
  </div>
</template>
```

--------------------------------

### 100 Nested Inputs with useSchemaForm

Source: https://formvuelate.js.org/examples

Showcases the performance benefits of `useSchemaForm` by recursively nesting 100 input elements. Updates to individual inputs or the schema structure do not trigger unnecessary re-renders of the entire form.

```vue
// This example is conceptual and would require a function to generate 100 nested schemas.
// The core idea is to demonstrate performance with deep nesting.

// Example of a single nested schema structure that would be repeated:
const nestedSchema = {
  nestedField: {
    component: FormText,
    label: "Nested Input",
  },
  // ... potentially more nesting here
};

// Function to generate a deeply nested schema (conceptual)
function generateNestedSchema(depth) {
  if (depth <= 0) {
    return {
      finalField: {
        component: FormText,
        label: "Final Input",
      }
    };
  }
  return {
    intermediateField: {
      component: SchemaForm,
      schema: generateNestedSchema(depth - 1)
    }
  };
}

// In the setup function:
// const schema = ref(generateNestedSchema(100)); // This would be very large
// const { userData, formSubmit } = useSchemaForm();

// The actual implementation would involve creating a large schema object, potentially
// using a loop or recursive function, and passing it to SchemaForm via useSchemaForm.
// The key takeaway is that updates are efficient due to the state management.

```

--------------------------------

### Register Components Locally with SchemaFormFactory

Source: https://formvuelate.js.org/guide/plugins

Pass an object of components as the second argument to SchemaFormFactory to register them locally within the generated component.

```vue
<template>
  <div id="app">
    <SchemaForm :schema="schema" />
  </div>
</template>

<script>
import { ref, markRaw } from "vue"
import { SchemaFormFactory, useSchemaForm } from "formvuelate"
import FormText from "@/components/FormText"
import FormSelect from "@/components/FormSelect"

markRaw(FormSelect)
markRaw(FormText)

// Declare FormText and FormSelect as local components
const factory = SchemaFormFactory([], { FormText, FormSelect })

export default {
  name: "App",
  components: { SchemaForm: factory },
  setup () {
    const form = ref({
      name: '',
      pet: 'cat'
    })
    useSchemaForm(form)

    // We can now declare our `component` property as a string, since
    // the component will be registered locally within the SchemaForm component
    const schema = ref({
      name: {
        component: 'FormText',
        label: 'Your name'
      },
      pet: {
        component: 'FormSelect',
        label: 'Your pet',
        options: ['cat', 'dog']
      }
    })

    return {
      schema,
    }
  },
}
</script>
```

--------------------------------

### Delete schema properties using mapProps (object syntax)

Source: https://formvuelate.js.org/guide/lookup.html

Use the object syntax in mapProps to set a property to `false` to delete it from all components.

```javascript
LookupPlugin({
  mapProps: {
    important: false
  }
})
```

--------------------------------

### Configure Component Mapping in LookupPlugin

Source: https://formvuelate.js.org/guide/lookup.html

Use the `mapComponents` option within LookupPlugin to remap schema component names to your application's actual component names.

```javascript
LookupPlugin({
  mapComponents: {
    string: 'FormText',
    array: 'FormSelect'
  }
})
```

--------------------------------

### Map multiple schema properties with mapProps

Source: https://formvuelate.js.org/guide/lookup.html

Configure mapProps to simultaneously map multiple schema properties, such as 'type' to 'component' and 'info' to 'label'.

```javascript
const SchemaFormWithPlugin = SchemaFormFactory([
  LookupPlugin({
    mapProps: {
      type: 'component',
      info: 'label'
    }
  })
])
```

--------------------------------

### Using markRaw with Imported Components

Source: https://formvuelate.js.org/guide/advanced-schema.html

When creating a reactive schema with components, use markRaw to prevent Vue from making the component itself reactive. This is especially useful for computed schemas.

```javascript
import MyComponent from 'components/MyComponent.vue'

[...] 
const schema = ref({
  name: {
    component: MyComponent
  }
})
[...]
```

```javascript
import { ref, markRaw } from 'vue'
import MyComponent from 'components/MyComponent.vue'

markRaw(MyComponent)

[...] 
const schema = ref({
  name: {
    component: MyComponent
  }
})
[...]
```

--------------------------------

### Map schema 'type' to 'component' prop

Source: https://formvuelate.js.org/guide/lookup.html

Use mapProps to translate schema properties like 'type' to the 'component' prop expected by SchemaForm.

```javascript
const SchemaFormWithPlugin = SchemaFormFactory([
  LookupPlugin({
    mapProps: {
      type: 'component'
    }
  })
])
```

--------------------------------

### Simple Input Component for SchemaForm

Source: https://formvuelate.js.org/guide/schema-form.html

This component accepts a `modelValue` prop and emits an `update:modelValue` event on input change, fulfilling SchemaForm's requirements.

```vue
<template>
  <input
    type="text"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script>
export default {
  props: {
    modelValue: {
      required: true,
      type: [String, Number]
    }
  }
}
</script>

```

--------------------------------

### Accessing Form Validation State via Slots

Source: https://formvuelate.js.org/guide/veevalidate.html

Explains how to use the `validation` object provided by the `afterForm` and `beforeForm` slots to access form-level validation status.

```APIDOC
## SchemaForm Slot Props: Validation Object

### Description
Access the form-level validation state using the `validation` object provided in the `afterForm` or `beforeForm` slots. This feature requires FormVuelate 3.2+ and @formvuelate/plugin-vee-validate 2.3+.

### Slot Props
- **validation** (Object) - Contains form-level validation state.
  - **isSubmitting** (Boolean) - Indicates if the form is currently being submitted.
  - **submitCount** (Number) - The number of times the form has been submitted.
  - **values** (Object) - A key-value record of the form's current field values.
  - **errors** (Object) - A key-value record of the form's field errors.
  - **meta** (Object) - The form's meta object, including validity status.

### Usage Example
```html
<template>
  <SchemaForm @submit="onSubmit" :schema="schema">
    <template #afterForm="{ validation }">
      <span>Form is submitting: {{ validation.isSubmitting }}</span>
      <span>Attempted submits: {{ validation.submitCount }}</span>
      <span>Values: {{ validation.values }}</span>
      <span>Errors: {{ validation.errors }}</span>
      <span>Metadata: {{ validation.meta }}</span>
    </template>
  </SchemaForm>
</template>
```

### Common Behaviors with Validation State

#### Disable buttons until all fields are valid
```html
<SchemaForm :schema="schema">
  <template #afterForm="{ validation }">
    <button :aria-disabled="!validation.meta.valid">Submit</button>
  </template>
</SchemaForm>
```

#### Display spinner or loading state when the form is submitting
```html
<SchemaForm :schema="schema">
  <template #afterForm="{ validation }">
    <button :class="{ 'is-submitting': validation.isSubmitting }">Submit</button>
  </template>
</SchemaForm>
```

#### Display all errors as a summary before the form fields
```html
<SchemaForm :schema="schema">
  <template #beforeForm="{ validation }">
    <p>Please correct these errors</p>
    <ul v-if="validation.errors">
      <li v-for="(error, field) in validation.errors" :key="field">{{ error }}</li>
    </ul>
  </template>
</SchemaForm>
```
```

--------------------------------

### Define Typed Schemas with FormArraySchema and FormObjectSchema

Source: https://formvuelate.js.org/guide/typescript.html

Use FormArraySchema and FormObjectSchema to create type-safe schemas for FormVueLate components. Ensure correct types are passed to component props for better type checking.

```typescript
import { SchemaForm, SchemaFormFactory, FormArraySchema, FormObjectSchema } from "formvuelate";

export default defineComponent({
  name: "App",
  components: {
    SchemaForm
  },
  setup() {
    const arraySchema = ref<FormArraySchema>([
      {
        component: FormText,
        model: 'firstName'
      },
      {
        model: 'lastName',
        component: FormText
      }
    ])

    const objectSchema = ref<FormObjectSchema>({
      firstName: {
        component: FormText
      },
      lastName: {
        component: FormText
      },
    })

    return {
      schema
    }
  }
})
```

--------------------------------

### Add Content After Form

Source: https://formvuelate.js.org/guide/schema-form.html

Use the 'afterForm' slot to add elements after the SchemaForm component but before the closing </form> tag, such as a submit button.

```html
<form>
  <SchemaForm />
  <!-- afterForm slot content goes here -->
</form>
```

--------------------------------

### Bind labels to inputs using uuid

Source: https://formvuelate.js.org/guide/accessibility.html

Utilize the injected uuid property to create accessible form components by linking labels to input elements.

```vue
<template>
  <div>
    <label :for="uuid">
      {{ label }}
    </label>
    <input
      :value="modelValue"
      :id="uuid"
      @input="$emit('update:modelValue', $event.target.value)"
    >
  </div>
</template>

<script>
export default {
  props: {
    modelValue: { required: true },
    label: {
      type: String,
      required: true
    },
    uuid: {
      type: Number,
      default: 0
    }
  }
}
</script>
```

--------------------------------

### Delete schema properties using mapProps (function syntax)

Source: https://formvuelate.js.org/guide/lookup.html

Employ a function in mapProps for conditional deletion of schema properties based on specific criteria.

```javascript
LookupPlugin({
  mapProps: (el) => {
    if (el.label === 'First name') {
      // Delete the important prop from the elements with label 'First name'
      return {
        important: false
      }
    }

    // Ignore any other components
    return {}
  }
})
```

--------------------------------

### Display Error Summary

Source: https://formvuelate.js.org/guide/veevalidate.html

Iterate over the validation.errors object to display a list of form errors before the form fields.

```vue
<SchemaForm :schema="schema">
  <template #beforeForm="{ validation }">
    <p>Please correct these errors</p>
    <ul v-if="validation.errors">
      <li v-for="error in validation.errors">{{ error }}</li>
    </ul>
  </template>
</SchemaForm>
```

--------------------------------

### Render Rows Without Default Wrapper

Source: https://formvuelate.js.org/guide/schema-form.html

Set the unwrappedRows boolean property to true to render form components without the default '.schema-row' wrapping div.

```html
<SchemaForm
  unwrappedRows
  :schema="mySchema"
/>
```

--------------------------------

### Conditional Fields with Schema Condition Keyword

Source: https://formvuelate.js.org/examples

Implements conditional fields using the `condition` schema keyword introduced in version 3.1.0. This provides a declarative way to manage field visibility based on other form values.

```vue
<template>
<form @submit.prevent="formSubmit">
<SchemaForm :schema="schema" />
<BaseButton type="submit">Submit</BaseButton>
<pre>{{ userData }}</pre>
</form>
</template>
<script>
import { ref } from "vue";
import FormText from "@/components/FormText.vue";
import FormSelect from "@/components/FormSelect.vue";
import FormCheckbox from "@/components/FormCheckbox.vue";
import BaseButton from "@/components/BaseButton.vue";
import { SchemaForm, useSchemaForm } from "formvuelate";

const SCHEMA = {
  option: {
    component: FormSelect,
    label: "Choose an option",
    options: [
      { value: "A", label: "Option A" },
      { value: "B", label: "Option B" },
    ],
  },
  fieldA: {
    component: FormText,
    label: "Field A",
    condition: {
      field: "option",
      eq: "A",
    },
  },
  fieldB: {
    component: FormText,
    label: "Field B",
    condition: {
      field: "option",
      eq: "B",
    },
  },
};

export default {
  components: {
    SchemaForm,
    BaseButton,
  },
  setup() {
    const schema = ref(SCHEMA);
    const { userData, formSubmit } = useSchemaForm();

    return {
      schema,
      userData,
      formSubmit,
    };
  },
};
</script>

```

--------------------------------

### Create Compatible Plugins with PluginFunction Type

Source: https://formvuelate.js.org/guide/typescript.html

Utilize the PluginFunction type to develop custom plugins for FormVueLate. This type ensures that your plugins correctly extend the base functionality provided by SchemaFormFactory.

```typescript
import { SchemaFormFactory, PluginFunction } from 'formvuelate';

const pluginThatAddsSomethingCool: PluginFunction = function(baseReturns) {
  return {
    ...baseReturns,
    somethingCool: true
  }
}

const cumulativeExample = SchemaFormFactory([
  pluginThatAddsSomethingCool
])

```

--------------------------------

### Validation Prop Structure

Source: https://formvuelate.js.org/guide/veevalidate.html

The validation object structure provided to components.

```javascript
{
  errorMessage, // The first error message for that field
  errors, // All error messages for that field
  meta, // A field meta object
  setTouched, // Sets the meta `touched` flag
}
```

--------------------------------

### Register Validated SchemaForm Component

Source: https://formvuelate.js.org/guide/veevalidate.html

Use the created component within a Vue template.

```html
<template>
  <div id="app">
    <SchemaFormWithValidation :schema="mySchema" />
  </div>
</template>

<script>
export default {
  components: {
    SchemaFormWithValidation
  },
  setup () {
    [...]
  }
}
</script>
```

--------------------------------

### Using SchemaForm with Field Validations

Source: https://formvuelate.js.org/guide/veevalidate.html

Integrate the schema with field-level validations into your Vue template using the SchemaFormWithPlugin component.

```html
<div id="app">
  <SchemaFormWithPlugin :schema="schema" />
</div>
```

--------------------------------

### Horizontal Layout with Array Schemas

Source: https://formvuelate.js.org/guide/schema-form.html

Array schemas support nested arrays to define horizontal rows of form inputs. Each sub-array represents a row, and its elements are displayed side-by-side using flexbox.

```javascript
const SCHEMA = [
  [ {}, {}, {} ], // 3 inputs in a row
  {}, // 1 input in a row
  [ {}, {} ] // 2 inputs in a row
]
```
Tokens:
Raw