Download the PHP package bjnstnkvc/form-components without Composer

On this page you can find all versions of the php package bjnstnkvc/form-components. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Informations about the package form-components

Laravel Form Components Library

A collection of pre-made simple Laravel Blade form components.

Installation & setup

You can install the package via composer:

composer require bjnstnkvc/form-components

The package will automatically register its service provider.

Usage

Config

Publish the components' config file with:

php artisan vendor:publish --provider="Bjnstnkvc\FormComponents\FormComponentsServiceProvider" --tag=form-config

This will publish a file called in your config-directory.

Resources

Publish the components' resources files with:

php artisan vendor:publish --provider="Bjnstnkvc\FormComponents\FormComponentsServiceProvider" --tag=form-resources

This will publish a following files to a folder configured in . By default, that folders is public/vendor/form-components. Detailed explanation for each property can be found here.

  1. form-components.css
  2. form-components.min.css
  3. form-components.js
  4. form-components.min.js

Directives

Once config and resources have been published, add following Blade directives to your layout file.

@componentStyles

@componentScripts

As the name of the directives suggests, these will add Form components minified CSS and JS files. In case you would like to edit published resource files, but would not like to edit minified versions, you can use the following syntax:

@componentStyles('full')

@componentScripts('full')

Directives above will instruct the library to load unminified css and js files, which you can edit as you see fit.

Form Components

In order to use the Form components, use standard [Blade Component syntax from the docs. By the default, the Form components can be used with the form prefix. Form components are using attributes which dictate how the component will be rendered.

Following attributes are worth mentioning:

All other attributes wil be merged directly on to the HTML component element.

Base

Depending on the method choice, component will automatically add _method token if needed.

Above will generate the following options:

Note that by default, Form Base component method attribute is set to POST.

Input

Depending on the label-type choice, component will look as follows:

label-type="column" label-type="row" label-type="floating"

In case the field was not valid, depending on the label-type choice, component will look as follows:

label-type="column" label-type="row"

Password

Depending on the label-type choice, component will look as follows:

label-type="column" label-type="row" label-type="floating"

In case the field was not valid, depending on the label-type choice, component will look as follows:

label-type="column" label-type="row"

Password components comes with 'Password Visibility' feature which is by default turned on.

In case you'd like to disable it, add password-visibility="false" to the component. Alternatively, you can disable this feature for all password fields through the project by setting password_visibility to false in your published form_components.php file.

Email

Depending on the label-type choice, component will look as follows:

label-type="column" label-type="row" label-type="floating"

In case the field was not valid, depending on the label-type choice, component will look as follows:

label-type="column" label-type="row"
_

Search

Depending on the label-type choice, component will look as follows:

label-type="column" label-type="row" label-type="floating"

Search components comes with 'Search Clearing' feature which is by default turned on.

In case you'd like to disable it, add search-clearing="false" to the component. Alternatively, you can disable this feature for all Search fields through the project by setting search_clearing to false in your published form_components.php file.

Textarea

Depending on the label-type choice, component will look as follows:

label-type="column" label-type="row" label-type="floating"

In case the field was not valid, depending on the label-type choice, component will look as follows:

label-type="column" label-type="row"

Textarea component comes with an option to auto-expand when typing which is by default turned off. In order to have it enable, use the following syntax:

Depending on the label-type choice, component will display following behaviour:

label-type="column" label-type="row"

In case you wish auto expansion to be a default behaviour for all Textarea components, set auto_expand to true in your published form_components.php file.

Select

The Select components accept string or an array as value from which it'll construct select options.

In order to pass values as a string, use the following syntax:

Above will generate the following options:

In case you would like to pass option value as well as it's key, use the following syntax:

Above will generate the following options:

Same rules apply in case you are passing an array. For example, following PHP array:

and following blade component settings:

will generate the following options:

Note that due to the fact that an array was NOT passed as key => value, option value is starting from 0 and incrementing for each item.

In case an array has key => value pairs, following array:

will generate following HTML:

You can also pass whole Eloquent Model to the component. Let's say we have users table with the following data:

id first_name last_name email
1 John Doe [email protected]
2 Jane Does [email protected]

passed from the controller:

In order to use it with Select component, following syntax is used:

As can be seen in an example above, in case Eloquent model has been passed, Select component expects three properties:

  1. :model - Model passed from the controller or injected directly into the blade file.
  2. model-key - Model key that will be used as an option value (when not provided the id will be used).
  3. model-value - Model value from which option text will be generated.

In case you would like to pass JavaScript Data Set attribute to each generated option, use the following Blade Component attributes:

  1. js-data-key - The attribute key.
  2. js-data-value - The attribute value.

Note that the js-data-value attribute MUST match the Eloquent Model attribute name.

This will generate following HTML:

Same as with the other components, placeholder can be passed to the component which will generate placeholder option value.

will generate following HTML:

In order to set default select value, you can use default property, which will pre-select the option on component render. For example:

will generate following HTML:

Depending on the label-type choice, component will look as follows:

label-type="column" label-type="row" label-type="floating"

In case the field was not valid, depending on the label-type choice, component will look as follows:

label-type="column" label-type="row"

Date

Depending on the label-type choice, component will look as follows:

label-type="column" label-type="row" label-type="floating"

In case the field was not valid, depending on the label-type choice, component will look as follows:

label-type="column" label-type="row"

Time

Depending on the label-type choice, component will look as follows:

label-type="column" label-type="row" label-type="floating"

In case the field was not valid, depending on the label-type choice, component will look as follows:

label-type="column" label-type="row"

Date-Time

Depending on the label-type choice, component will look as follows:

label-type="column" label-type="row" label-type="floating"

In case the field was not valid, depending on the label-type choice, component will look as follows:

label-type="column" label-type="row"

Date, Time and Date-Time components utilize built-in HTML elements.

Clicking on the component icon will open native browser Input UI.

Additionally, you can pass a value to all three fields which utilizes Carbon behind the scenes in order to parse the value prior to rendering the component.

File

Depending on the label-type choice, component will look as follows:

label-type="column" label-type="row" label-type="floating"

In case the field was not valid, depending on the label-type choice, component will look as follows:

label-type="column" label-type="row"

File component utilize built-in HTML element.

Checkboxes and Radio Buttons

Checkbox

Depending on the position choice, component will look as follows:

position="left" position="center"

In case the field was not valid, depending on the position choice, component will look as follows:

position="left" position="center"

Radio

Depending on the position choice, component will look as follows:

position="left" position="center"

In case the field was not valid, depending on the position choice, component will look as follows:

position="left" position="center"

Switch

Alternatively, if you set switch attribute to true to Checkbox or Radio component, it will look as follows:

Checkbox Radio

Checked

Both Checkbox and Radio component come with checked attribute that expects boolean. Depending on the result, component will be renders as checked.

Buttons

Button

In order to render a Button component, use the following syntax:

The component utilizes Laravel Slots, so in case you need to inject HTML into the button, use the following syntax:

Additionally, in case you'd like the form button to actually be a link, all you need to do is add link property to the component.

Above property will render the component as an anchor tag.

Depending on the border-radius choice, component will look as follows:

border-radius="squared" border-radius="rounded-s" border-radius="rounded-m" border-radius="rounded"

Border

All components come with two different border styles, full and bottom. In order to change component border style, add border property equal to one of the options listed above to your component of choice.

If you'd like to set a certain border style by default for all components, simply change component_border in your published form_components.php file.

Depending on the label-type choice, component will look as follows:

label-type="column" label-type="row" label-type="floating"

Border Radius

All components come with three different border radius styles, squared, rounded-s, rounded. In order to change component border radius style, add border-radius property equal to one of the options listed above to your component of choice.

If you'd like to set a certain border radius style by default for all components, simply change component_radius property in your published form_components.php file.

border-radius="squared" border-radius="rounded-s" border-radius="rounded"

Invalidated Title

All components are shipped with an ability to highlight component title in case the filed was invalid. In order to turn this feature on, add invalidated-title="true" to your component of choice.

If you'd like this feature to be turned on by default for all components, simply change invalidated_title property in your published form_components.php file.

label-type="column" label-type="row" label-type="floating"

Interactivity

All components are shipped with an ability to remove validation errors on input. In order to turn this feature on, add interactive="true" to your component of choice.

If you'd like this feature to be turned on by default for all components, simply change interactive property in your published form_components.php file.

Customisation

Config

Note: You might need to clear config cache using php artisan cache:clear command after you make changes to .env file.

Publishing

You can publish all components class and view using artisan the following command:

php artisan components:publish

Optionally, you can pass component name as an argument, which will publish only those components.

php artisan components:publish Input Password Button

From this point on, you can change the published component class and view to your liking.

Restoring

If by any chance you'd like to restore the components default settings, use the following artisan command:

php artisan components:restore

Optionally, you can pass component name as an argument, which will restore only those components.

php artisan components:restore Input Password Button

Additionally, if you'd like to remove previously published components class and views, you can attach --delete option:

php artisan components:restore --delete

or

php artisan components:restore Input Password Button --delete

Note: You might need to clear config cache using php artisan cache:clear command after you publish or restore the components.

License

The MIT License (MIT). Please see License File for more information.


All versions of form-components with dependencies

PHP Build Version
Package Version
No informations.
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package bjnstnkvc/form-components contains the following files

Loading the files please wait ....