Download the PHP package z1lab/laravel-vue-form without Composer
On this page you can find all versions of the php package z1lab/laravel-vue-form. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download z1lab/laravel-vue-form
More information about z1lab/laravel-vue-form
Files in z1lab/laravel-vue-form
Package laravel-vue-form
Short Description A PHP package for generate VueJS forms.
License MIT
Homepage https://github.com/z1lab/laravel-vue-form
Informations about the package laravel-vue-form
Introduction
Laravel Vue Form is a package developed for make agile forms using Json:API response and VueJS components.
License
Laravel Vue Form is open-sourced software licensed under the MIT license.
Installation
Publish Vue Components and JS files
Properties
Property | Required | Input | Default | Description |
---|---|---|---|---|
action | true | String | Route to submit the form. | |
header | false | String | title and sub-title for creating the form's card header. | |
method | false | String | POST | Method of submitting the form. |
self | false | String | Form root route. | |
callback | false | String | Return route after submitting the form. | |
return | true | Padronizando retorno para utilizar formVue.js | ||
create | **true*** | Input,Fieldset | Emit value with mask chars, default is raw. | |
createMany | **true*** | Input,Fieldset | Emit value with mask chars, default is raw. |
*Create is mandatory if you do not have a createMany being used and vice versa.
Example Simple
HomeController.php
home.blade
Fieldset
Property | Required | Input | Default | Description |
---|---|---|---|---|
legend | false | String | Use this property to titrate the fieldset component. | |
subtitle | false | String | Subtitle for description of the component Fieldset. | |
create | **true*** | Input | Emit value with mask chars, default is raw. | |
createMany | **true*** | Input | Emit value with mask chars, default is raw. |
*Create is mandatory if you do not have a createMany being used and vice versa.
PostalCode
Property | Required | Input | Default | Description |
---|---|---|---|---|
legend | false | String | Use this property to titrate the fieldset component. | |
subtitle | false | String | Subtitle for description of the component Fieldset. | |
col | false | String | col-md-3 | Use if you want to change the grid size of the postal code. |
validate | false | String | required,cep | Use if you want to change the default validation of the postal code. |
mask | false | String | #####-### | Use if you want to modify the default masking of the postal code. |
value | false | String | Use if you want to modify the initial value of the postal code. | |
inputs | true | Array | [] | Use to add other fields in the address fieldset, if you do not add any, only the portal code will be displayed because it is created by default. |
Inputs
Property | Required | Input | Default | Restricted | Description |
---|---|---|---|---|---|
name | true | String | Name to assign to input. | ||
col | false | String | col-12 | Size of the component in the grid. | |
validate | false | String | Validation, use the VeeValidate package for use. | ||
type | false | String | text | Input type. | |
key | false | String | If you need to use a key other than name in js. | ||
placeholder | false | String | Description/Example of input. | ||
value | false | Input value. | |||
disabled | false | Bool | FALSE | Disable input for editing. | |
readonly | false | Bool | FALSE | Enable read mode for input. | |
removeLabel | false | FALSE | If you want your component does not have a label. | ||
condition | false | Condition for certain fields to be displayed if certain inputs have a certain value. | |||
checkboxs | true | Array | Checkbox | Receives a checkbox array for component creation. It receives two values within this label and value array. | |
format | false | Date, DateFlatpickr | Use to identify the format that will arrive for the component, the function may undergo changes in different components. | ||
exhibition | false | String | '##/##/####' | Date | Use to create masks for UX. |
time | false | String | FALSE | DateFlatpickr | Enables time picker. |
time_24hr | false | String | TRUE | DateFlatpickr | Displays time picker in 24 hour mode without AM/PM selection when enabled. |
alt_input | false | String | TRUE | DateFlatpickr | Show the user a readable date (as per format), but return something totally different to the server. |
range | false | DateFlatpickr | Use to create a minimum or maximum date. | ||
mask | true | String | Mask | Use to create masks for your components to have a friendly UX. | |
masked | false | Bool | FALSE | Mask, Money | Use if you want the component return to come with the mask. |
percentage | false | FALSE | Money | Use if you want to use percentage in the component. | |
data | false | Array | Selected | Use to populate the selected component. | |
key | false | String | Selected | Use to tell the key to be returned when selecting an option. | |
label | false | String, Array | Selected | Use to enter the title to be displayed in the option. | |
options | true | Selected | Function for complete creation of the selected component. See the Example below for more details. | ||
typeInput | false | String | FALSE | Selected | If you want a more advanced select, used in cases where the component has many options. You only get 2 "search" or "helper" options. |
on | false | FALSE | CheckSwitch | Set switch value to TRUE. |
- checkbox
- date
- date-flatpickr
- default
- editor
- mask
- money
- radio
- selected
- selected-helper
- selected-search
- switch
- textarea
checkbox
date
This component uses vue-the-mask for its construction, if you want to modify the display exhibition see your doc.
date-flatpickr
This component uses the flatpickr package for its construction, if you want to create any modification see your doc.
default
editor
This component uses the Vue2Editor package for its construction, if you want to create any modification see your doc.
mask
This component uses vue-the-mask for its construction, if you want to modify the display exhibition see your doc.
money
This component uses v-money for its construction, if you want to modify the display exhibition see your doc.
radio
selected
selected-helper
selected-search
switch
textarea
All versions of laravel-vue-form with dependencies
illuminate/contracts Version 5.8.*
illuminate/http Version 5.8.*
illuminate/support Version 5.8.*
jenssegers/model Version 1.2.*