Vue Components
VueJS Components Collection for Laravel Enso.
Features
- Bulma elements, suite of common, reusable components styled for Bulma, such as:
- BooleanFilter
- Card
- DateIntervalFilter
- Dropdown
- IntervalFilter
- Modal
- Overlay
- Paginate
- Popover
- Tabs & Tab
- Typeahead
- VueFilter
- FileUploader component, for handling the upload of files
- NProgress component, for showing load progress
Bulma
BooleanFilter
, a single option filtering component with predefined options to filter boolean values (true, false, null), that can be used in conjunction with datatables or anywhere else you need itCard
, a multi purpose containerDropdown
, a simple dropdownModal
, an ultra light and smart modal componentOverlay
, an overlay containerPaginate
, a simple to use and powerful pagination modulePopover
, a basic dual option popover useful for confirming actionsTabs
, a tab manager componentTypeahead
, exactly what the name saysVueFilter
, a single option filtering component, that can be used in conjunction with datatables or anywhere else you need itVueSelectFilter
, a select option filtering component
BooleanFilter
Takes the same properties like VueFilter
To use it include it in the page:
<boolean-filter
title="Active"
v-model="filters.users.active">
</boolean-filter>
Card
Takes the following properties:
collapsed
, boolean, flag for the initial state of the card | defaultfalse
| (optional)icon
, object, an icon object for the card's icon | defaultnull
| (optional)title
, string, the name that's displayed as title | defaultnull
| (optional)search
, boolean, flag for showing the search box | defaultfalse
| (optional)badge
, number, value that's displayed | defaultnull
| (optional)refresh
, boolean, flag for refresh control | defaultfalse
| (optional)fixed
, boolean, flag for making the card non collapsible | defaultfalse
| (optional)removable
, boolean, flag for showing the close button | defaultfalse
| (optional)controls
, number, option for generating the needed number of controls slots | default0
| (optional)overlay
, boolean, flag for rendering the overlay inner component | defaultfalse
, | (optional)
DateIntervalFilter
Takes the following properties:
title
, string, the name that's displayed as title | defaultnull
| (optional)min
, the starting date for lower limit date selector | requiredmax
- the starting date for higher limit date selector | required
Dropdown
Takes the following properties:
width
, number, the minimum width for the dropdown menu | default64
| (required)height
- number, the maximum height for the dropdown content | default200
| (optional)
IntervalFilter
Takes the following properties:
title
, string, the name that's displayed as title | defaultnull
| (optional)type
, string, the type of the two filter inputs | requiredmin
, the starting date for lower limit input | requiredmax
- the starting date for higher limit input | required
Modal
The Modal component renders itself as a <body>
child, within a div, by default with the modal-wrapper
wrapper class,
as it offers an elegant solution to various z-index related issues that might otherwise arise.
Irrespective of its content, the modal renders a subtle close button in the top right corner, and will also close when using the Esc key.
Takes the following properties:
show
, boolean, makes the modal visible | (required)card
, boolean, if true, renders a card with header, body & footer slots, otherwise renders a simple div with an unnamed, default slot | defaults tofalse
| (optional)container
, string, the css class of the div container used to render the modal | defaultmodal-wrapper
| (optional)
Overlay
Takes the following properties:
size
, small/medium/large, size of the loader | defaultsmall
| (optional)transparent
, boolean, sets the transparency | defaultfalse
| (optional)color
, string, the color code for the overlay | default#f44336
| (optional)
Paginate
Takes the following properties:
list
, array, the items that need to be paginated | (required)length
, number, the starting number of items on one page | default10
| (optional)lengths
, array, an array of lengths to choose from | default[10, 15, 20, 25, 30]
| (optional)border
, boolean, a flag for showing a border around the component | defaultfalse
| (optional)
Popover
Takes the following properties:
placement
, string, the placement position (top
,top-start
,top-end
,right
,right-start
,right-end
,bottom
,bottom-start
,bottom-end
,left
,left-start
,left-end
) | defaultbottom
| (required)trigger
, string, the type of trigger to be used (hover
,click
,focus
,manual
) | defaultclick
| (optional)open
, boolean, flag that make the component visible | defaultfalse
| (optional)
Tabs
Takes the following properties:
alignment
,left
/center
/right
, the alignment of the tabs | defaultleft
| (optional)boxed
, boolean, flag that toggles the rendering of the tabs in a box | defaultfalse
| (optional)custom
, boolean, marks a tab as custom, with specific styling | defaultfalse
| (optional)fullwidth
, boolean, flag that toggles theis-fullwidth
Bulma class, where the tabs take up the entire available width | defaultfalse
| (optional)size
,small
/normal
/medium
/large
, the size of the element, as styled by Bulma's is-* classes| defaultnormal
| (optional)toggle
, boolean, flag that toggles theis-toggle
Bulma class, for mutually exclusive tabs | defaultfalse
| (optional)toggleRounded
, boolean, flag that toggles theis-toggle-rounded
Bulma class, where the first and last tabs are rounded | defaultfalse
| (optional)
The component emits a selected
event when a tab is selected.
Tab
Takes the following properties:
id
, string/object, a value used to identify the tab - gets passed to parent (Tabs) component | requireddefault
, boolean, tab index value, sets the active tab | defaultfalse
| (optional)disabled
, boolean, flag that disables a tab | defaultfalse
| (optional)keepAlive
, boolean, flag that marks a tab to be kept alive | defaultfalse
| (optional)
Keep Alive
Depending on the content of a tab, there might be cases when you don't want that tab created/destroyed each time you switch to it / away from it, but instead you want it contents created once. At the same time, you might have cases when it does not make sense to have all the tabs created when the page or parent component is loaded.
For these cases, now you can mark a tab to be kept alive (default is false
) so it's created once and then always
available when you switch to it.
Typeahead
Takes the following properties:
disabled
, boolean, the title string | defaultnull
| (optional)length
, number, the number of retrieved options | default10
| (optional)source
, string, the endpoint that gives back results | (required)params
, object, properties object that gets sent with the request | defaultnull
| (optional)label
, string, label | (required)placeholder
, string | defaultWhat are you searching for today?
| (optional)noResults
, string, a placeholder when not having results | defaultNo results found matching the criteria...
| (optional)searching
, string, a placeholder while searching | defaultSearching...
| (optional)validator
, boolean, flag that enables the value validation using the regular expression | defaultfalse
| (optional)regExp
, RegExp, validation regular expression | default/.*/
| (optional)value
, String, starting value | default `` | (optional)
VueFilter
Takes the following properties:
compact
- boolean, flag for displaying the component in the compact mode | defaultfalse
| (optional)hideOff
- boolean, flag for hiding the 'off' option | defaultfalse
| (optional)icons
- boolean, flag for showing icons instead of labels - should be used together withoptions.label
which should now represent a font awesome icon class | defaultfalse
| (optional)offLabel
- string, the label for the 'off' button | defaultOff
| (optional)options
- array, the options the user can choose from when filtering, see below for examples | default[]
| (required)readonly
- boolean, flag for showing the filter in read-only mode | defaultfalse
| (optional)title
- string, the title to display above the options | defaultnull
| (optional)value
- the value for the component | defaultnull
| (optional)
Notice that the component is bound to a model, much like an input element. If the model variable has a valid value, the filter will start up with that option selected.
To use it include it in the page:
<vue-filter
title="Taxes Paid"
v-model="filters.orders.paid_taxes"
:options="options">
</vue-filter>
where the options
and filters
may be something like:
options: [
{value:true, label:"Yes"},
{value:false, label:"No"}
],
filters: {
orders: {
paid_taxes: ''
}
}
When using the icons flag, options may be something like:
options: [
{ value: true, label: 'check', class: 'has-text-success' },
{ value: false, label: 'times', class: 'has-text-danger' }
]
Next, when defining your DataTable, make sure you give it your filters:
<vue-table class="box"
source="orders"
:extra-filters="filters"
id="index-orders-id">
</vue-table>
Note that you may use more than one such filter, just bind it inside the same encompassing filters
object
and it will get passed to the datatables back end logic.
FileUploader
<file-uploader
@upload-successful="myFunction()"
:url="uploadLink"
multiple>
</file-uploader>
Options
multiple
- boolean, flag for the single/multiple selection of files | default is false | (optional)url
- string, the url to post the uploaded file(s) to | (required)file-size-limit
- number, the maximum file size limit | default is 8388608 | (optional)params
- object, parameters object that gets passed to the backend, may be used when processing the upload | defaultnull
| (optional)file-key
- string, request key for the file(s) sent when uploading, allowing for a more meaningful interpretation of the request in the backend | defaultfile
| (optional)
Events
upload-start
- emitted before the beginning of the upload, contains no payloadupload-successful
- emitted after a successful upload, contains as payload the data of the request responseupload-error
- emitted in case of an upload error, contains no payload
For more Back-End information also check out the FileManager package and its documentation
NProgress
On init, the component adds itself to the Axios request
& response
interceptors, as well as to the beforeEach
& afterEach
interceptors of VueRouter so it starts and stops without manual intervention.
The NProgress.vue
listens to the following, self-descriptive, events:
nprogress-add-request
nprogress-add-response
nprogress-done
Publishes
php artisan vendor:publish --tag=vue-components
- the main VueJS components and their dependenciesphp artisan vendor:publish --tag=enso-assets
- a common alias for when wanting to update the VueJS assets, once a newer version is released, can be used with the--force
flag
Notes
The Laravel Enso Core package comes with this package included.