In composer.json add:
"repositories": [
{
"type": "vcs", # "path",
"url": "https://github.com/vertex-it/blade-components" # "../path/to/blade-components"
}
]Then install the package via composer:
composer require vertex-it/blade-componentsIf you are installing blade-components for the first time you will be asked to generate a token, which is really easy, just follow the steps provided in the composer message.
# Sortable JS (required)
npm install sortablejs@^1.15.0
# Image Cropper
npm install jquery@^3.6.4 cropperjs@^1.5.13 jquery-cropper@^1.0.1
# Date
npm install flatpickr@^4.6.13
# Select
npm install selectize@^0.12.6
# Textarea
npm install tinymce@^5.10.7
# Timepicker
npm install timepicker@^1.14.0
# Uppy
npm install uppy@^2.3.0
# Bootstrap Switch
npm install bootstrap4-toggle@^3.6.1
# Or if you want to install all the dependencies use this command
npm install jquery@^3.6.4 sortablejs@^1.15.0 cropperjs@^1.5.13 jquery-cropper@^1.0.1 flatpickr@^4.6.13 selectize@^0.12.6 tinymce@^5.10.7 timepicker@^1.14.0 uppy@^2.3.0 bootstrap4-toggle@^3.6.1
To start using blade components you will need to add the following to your webpack.mix.js:
mix.js('resources/js/blade-components.js', 'public/js');
// ...
mix.styles([
//... css resources
]).scripts([
'public/js/blade-components.js',
// ... all other js resources
]);
// Tinymce resources
// If you need to use tinymce rich text editor you will need to add the following
mix.copyDirectory('node_modules/tinymce/icons', 'public/js/icons');
mix.copyDirectory('node_modules/tinymce/plugins', 'public/js/plugins');
mix.copyDirectory('node_modules/tinymce/skins', 'public/js/skins');
mix.copyDirectory('node_modules/tinymce/themes', 'public/js/themes');Finally run to get compiled frontend resources and start using blade components:
npm run dev // or npm run prod if you are in production <x-form
action="absolute/path/to/articles"
method="POST"
buttonText="Submit"
multipart
>
{{-- There goes slot content --}}
</x-form>| Component attribute | HTML equivalent | Required | Description |
|---|---|---|---|
| name | name | Yes | Name attribute has the same value as passed to the x-component. Only exception are the components which can accept multiple values: checkbox and select. |
| label | label | No | If not passed, label will be created from formatted name attribute value. |
| placeholder | placeholder | No | If not passed, placeholder will be created from the placeholder_prefix (translation key) and generated label. Some of the components do not support placeholder attribute: checkbox, cropper, file, radio, toggle and uppy. |
| value | value | No | If passed x-component will use it as value for the according input. If there is a validation error, x-component will prefer old() value over originally passed value! |
| required | required | No | If passed, it will be added to the inputs which have native required support. All of the components with the required attribute will contain red asterisk as a sign of the required field in the label. |
| comment | - | No | Accepts text or HTML. Output is displayed below component as a small block of text (HTML). |
| inline | - | No | If passed, components will use bootstrap inline configuration (classes, elements, etc.). Please note that if you are using inline you should wrap those components in a bootstrap row! Some of them do not support inline attribute: checkbox, cropper, radio, textarea and uppy. |
<x-inputs.checkbox
name="seasons"
label="Custom seasons label"
:value="['spring']"
required
comment="You can use <strong>comment</strong> attribute with all of the components and also you can add as much custom attributes as you want to all of the components! <br> Please note that already injected (predefined) attributes will not be available in the custom attributes array and that custom attributes should be named according to the HTML conventions!"
:options="['winter', 'spring', 'summer', 'autumn']"
{{-- These are custom attributes which will be apended to the input --}}
custom_attribute_one="customAttributeOneValue"
custom_attribute_two="customAttributeTwoValue"
custom_attribute_n="customAttributeNValue"
/>Checkbox component accepts :options array as a set of keys and labels. If keys are not specified then snake cased values will be used. The :value attribute accepts an array of keys which will be used to determine if the option is checked.
Please note that checkbox component is created as an alternative to the select component. If you want to use it as input representation of the boolean value then you should use toggle component instead.
<x-inputs.cropper
name="cover"
value="path/to/the/image"
:aspectRatio="[16, 9]"
/>Cropper component accepts optional :aspectRatio array. The optional value attribute should contain path to the image.
Based on the cropper and the jquery-cropper.
Use example:
<x-forms.cropper
name="attrName"
value="{{ $model->attrName }}"
label="Attr name"
required
:aspectRatio="[0, 0]"
/>Based on the flatpickr.
Use example:
<x-forms.date
name="attrName"
value="{{ $model->attrName }}"
label="Attr name"
// required
// time
// placeholder
autofocus
/>Based on the selectize.
Based on the TinyMCE.
Based on the jquery timepicker.
Based on the Uppy.
composer testPlease see CHANGELOG for more information what has changed recently.
Please see CONTRIBUTING for details.
If you discover any security related issues, please email [email protected] instead of using the issue tracker.
The MIT License (MIT). Please see License File for more information.
This package was generated using the Laravel Package Boilerplate.