Components

The form related functionality is encapsulated in four distinct components, each serving a specific purpose to enhance form rendering and user interaction. You can import them from @fancy-crud/vue

<script lang="ts" setup>
import { FForm, FFormHeader, FFormBody, FFormFooter } from '@fancy-crud/vue'
</script>

Form Header

The f-form-header component focuses on the form header, allowing you to customize and present information related to the form. It provides the flexibility to dynamically display the form mode title.

Props

Name	Description	Type	Default
title	Title value to display in the form header	string | undefined
mode	Current form mode	FormMode

Slots

Name	Description	Scope
default	Default slot to display form title	{ formModeTitle: string }

Form Body

The f-form-body component is designed to handle the rendering of form fields. It efficiently manages the display of fields, providing a clean structure for your form's body.

Props

Name	Description	Type	Default
formId	The id generated in useForm composable	symbol
fields	Object with normalized fields.	ObjectWithNormalizedFields | Record<string, NormalizedField> | NormalizedFields<T>
settings	Form settings	NormalizedSettings

Slots

• You have three dynamic slots for each field in the form.
• Where the [fieldKey] is the key name in the fields object.
• These three dynamic fields has access to the field through the v-bind property.

Name	Description	Scope
before-field-[fieldKey]	Adds elements before a field.	{ field: NormalizedField }
field-[fieldKey]	Overrides the auto-rendered field.	{ field: NormalizedField }
after-field-[fieldKey]	Adds elements after a field.	{ field: NormalizedField }

Let's see an example where the [fieldKey] is email.

<template>
  <f-form v-bind="form">
    <template #before-field-email="{ field }">
      <p class="col-span-12">Your email is: {{ field.modelValue }}</p>
    </template>

    <template #field-email>
      <input
        v-model="form.fields.email.modelValue"
        placeholder="Type your email"
        class="col-span-12"
      />
    </template>

    <template #after-field-email>
      <p class="col-span-12">
        <input type="checkbox">
        <span class="pl-1">Do you want to receive ads?</span>
      </p>
    </template>
  </f-form>
</template>

<script lang="ts" setup>
import { FieldType, useForm } from '@fancy-crud/vue';

const form = useForm({
  fields: {
    email: {
      type: FieldType.text,
      label: 'Email'
    },
  },
})
</script>

<style scoped>
.col-span-12 {
  grid-column: span 12 / span 12;
}

.pl-1 {
  padding-left: 0.5rem;
}

input {
  border: 1px solid #4f4f4f;
  border-radius: 5px;
  padding: 1rem;
}
</style>

Create new record

Your email is:

Do you want to receive ads?

Form Footer

Handling the form's footer, f-form-footer, this component includes buttons and functionality for main and auxiliary actions. It enables easy customization of buttons and responsiveness to user interactions.

Props

Name	Description	Type	Default
buttons	Object with normalized main and aux buttons	{ main: NormalizedButton, aux: NormalizedButton }
settings	Normalized settings object	NormalizedSettings
isFormValid	If the value is false the user won't be able to click the main button	boolean	false

Events

Name	Description	Type
@main-click	Event emitted when the user click on the main button	() => void
@aux-click	Event emitted when the user click on the aux button	() => void

Slots

Name	Description	Scope
default	Default slot to render buttons	{ mainButton: NormalizedButton; auxButton: NormalizedButton; getLabel: string; onMainClick: Function; onAxuClick: Function; isMainButtonDisabled: boolean }

Form Container

The main form container, f-form, orchestrates the integration of the aforementioned components. It offers a comprehensive structure for managing the entire form, including the header, body, and footer.

Props

Name	Description	Type	Default
id	Form ID as symbol value	symbol
fields	Normalized fields to render in the form	NormalizedFields
settings	Normalized settings to manage form behavior	NormalizedSettings
buttons	Normalized buttons to display in the form footer	NormalizedButtons

<template>
  <!-- Expanded way to pass props -->
  <f-form
    :id="form.id"
    :fields="form.fields"
    :buttons="form.buttons"
    :settings="form.settings"
  />

  <!-- This is the shortcut to pass all the props -->
  <f-form v-bind="form" />
</template>

<script lang="ts" setup>
import { FieldType, useForm } from '@fancy-crud/vue';

const form = useForm({
  fields: {
    // Some fields...
  },
  settings: {
    // Some settings...
  },
})
</script>

Events

Name	Description	Type
@success	Event emitted when the create/update a record successfully	(response: any) => void
@error	Event emitted after a create/update record fails	(error?: any) => void

Slots

Name	Description	Scope
form-header	Allows you to use the default slot as in f-form-header component	Same as in f-form-header component
(before-|after-)field-[fieldKey]	Allows you to use the same slots as in f-form-body component	Same as in f-form-body component
form-footer	Allows you to use the default slot as in f-form-footer component	Same as in f-form-footer component