Sh Form

This helps generate and manage front end forms

Inputs will be autogenerated.

Validation from laravel backend will also be handled

Basic Example

Import the component

import { ShForm } from '@silahkosgei/sfrontend'

Using it

<sh-form
:fields="['name','email','password']"
action="users/add"
:successCallback="userRegistered"
/>

Above form will generate a form with 3 fields

• name field
• email field
• password field

Form component will automatically set password field to be input type password

Attributes

fields

• Type: array

• Default: none

• Details:

  These are the form files, like inputs, select etc

• Example: ['name','email']

action

• Type: string

• default: none

• Details:

  This is the action url to the api backend where the post request will be handled

• Example: users/add

current-data

• Type: object

• Default: null

• Details:

  Existing form data, used mostly when editing an item. Form fields will be autofilled with data from this object. Key of the array is the input field

• Example:

:current-data="{
    email:'johnss@gmail.com'
 }"

successCallback

• Type: function/method
• Default: none
• Details: A method that will be invoked/called by the form when data is submitted successfully
• Example: :success_callback="userRegistered"

labels

• Type: object
• Default: none
• Details: An object that will hel change form field labels
• Example:

:labels="{
            date_created: 'Registration Date'
           }"

fill-selects

• Type: object
• Default: none
• Details: Fill select element with select options, id will be used as option value and name will be option label displayed
• Example 1 for defined select data:

:fill-selects="{
    gender: {
      data: [
          {
            id: 'Male',
            name: 'Male'
          },
          {
            id: 'Female',
            name: 'Female'
          }
      ]
    }
  }"

• Example 2 For getting data from api backend

:fill-selects="{
    user_id: {
      url: 'admin/users/list?all=1'
  }"

• Fill selects can also have suggestion (searchable), this will help search

:fill-selects="{
    user_id: {
      suggests: true
      url: 'admin/users/list?all=1'
  }"

• Fill selects can also have suggestion with multi select, this will help search

:fill-selects="{
    user_id: {
      suggests: true,
      allowMultiple: true
      url: 'admin/users/list?all=1'
  }"

customComponent

This will help you add custom component as a form element instead of using prebuilt

e.g

Import First

import CkEditor from '@/lib/components/form-components/CkEditor.vue'

Use it this way in your sh-form, key is the name of

<sh-form
        :fields="['mail','name']"
        :custom-component="{
    mail: CkEditor
      }"
        :current-data="{
        email: 'jack@gmail.com'
      }"
        action="auth/register"
/>