Forms

NPM License npm download GitHub top language GitHub issues npm version

Vue Form Package

Can be used outside of the Enso ecosystem.

For live examples and demos, you may visit laravel-enso.com

Should be used with its backend sibling

Installation

Install the package:

yarn add @enso-ui/forms

Note that this package has a couple of external dependencies. Read here for more info.

Usage

Import the desired forms(s):

import { EnsoForm, VueForm } from '@enso-ui/forms/bulma';
import CoreForm from '@enso-ui/forms/renderless';

CoreForm

Renderless component.

Props

  • path - string, required - the URI for the form data/template.
  • errorHandler - function, optional - an error handling function for the axios requests
  • params - object, optional - parameters that get sent to the backend when fetching the form data
  • i18n - Function, optional - the function that performs translations
  • locale - string, optional, default en - used for the date fields

VueForm

The bulma styled form component built on top of the renderless version of the component.

Example:

<vue-form
    path="/api/system/menus/2/edit"/>

Methods

  • fetch(), fetches the form data & template from the back-end
  • field(field), returns the field with the given name
  • param(field), returns the parameter with the given name
  • routeParam(field), returns the route parameter with the given name

Slots

  • if any fields are marked as custom fields in the form template, then a scoped slot is rendered for each of these fields. The name of the slot is the field's name. The slot exposes the props object that has to be binded to the custom field, besides your custom logic
<template v-slot:group_id="props">
    <form-field v-bind="props"
        @input="pivotParams.userGroups.id = $event"/>
</template>

EnsoForm.vue

Designed to be used within the Enso ecosystem, requiring less configuration from the dev.

Example

<enso-form class="box has-background-light raises-on-hover animated fadeIn"/>
<enso-form class="box has-background-light raises-on-hover animated fadeIn"
    :path="route('system.menus.edit', 1, false)"/>
<enso-form class="box has-background-light raises-on-hover animated fadeIn"
    path="/api/system/menus/2/edit"/>

Props

All the props from the renderless component can be provided here

Components for custom fields

Starting with v1.1.0 you should always use FormField when dealing with slots.

If you want further customization the package provides a component for each type of field:

DateField
InputField
MoneyField
SelectField
SwitchField
TextareaField.vue
TimeField.vue

Don't forget to add your own label when when using the dedicated component.

Example:

<label class="label">My Field</label>
<date-field v-bind="props"
    v-bind="props"
    @input="doSomethingExtra"/>

Questions & Issues

For questions and support please use the issues functionality for this package's github repository.

Please make sure to search for existing issues before creating a new issue, and when opening a new issue, fill the required information in the issue template.

Issues not conforming to the guidelines may be closed immediately.

Contributions

are welcome. Pull requests are great, but issues are good too.

Thank you to all the people who already contributed to Enso!

License

ISC