Apok-admin-components-bulma
The Bulma Styled Components for Apok-admin vue plugin
Table of Contents
Installation
When installing Apok-admin VueJS plugin, you'll have to choose the CSS styled components. This project contains the Bulma version of the aforementioned components. You really should not install this package directly into your Vue app, unless you are developing this project too. Most of the times, you want to get this package from the Apok-admin installation guide describe in its docs.
Renderers
For renderers information make sure to check the Apok-admin's Renderers documentation. The only detail that's not yet explained on the aforementioned docs are the properties passed to the renderer. Since a renderer is the alias used for the component, all properties passed to a renderer are equivalent to pass them to the component itself!. By this we mean that you can set properties to a renderer the same way to a component, thus making a renderer tag behave exactly like the component tag. It's a fact that the renderer concept might seem redundant, however, it allows you to keep the same html tag on the whole app, while using variations on the same component or even change it completely.
Here's an example of a Button component being called by its renderer tag equivalent and making use of it just as the component itself:
<!-- On a Vue component template -->
<template>
<!-- Passing props the same as in the IconButton.vue component-->
<button-renderer icon="plus" type="is-success">
Add to cart
</button-renderer>
</template>
The same logic applies to al renderers listed here
Input Mixin
All inputs on this package include a InputMixin.js mixin that covers most of the properties that input components may need.
This mixin has the inheritAttrs
attribute set to false, which does exactly
that.
Here's a list on the props included on this mixin:
Name | Description | Type | Default |
---|---|---|---|
inline |
Inline alignment on component | Boolean | false |
readonly |
Sets readonly state | Boolean | false |
loading |
Sets loading state | Boolean | false |
type |
Input type | String | 'text' |
label |
Input label | String | null |
id |
Input ID | String | null |
value |
Input field value | Any | null |
error |
Error message on field | String | null |
placeholder |
Input field placeholder | String | null |
Also there's a function called emit
that emits an event on input change and has the
input value as hte payload.
Components
This package includes a set of VueJS components for your project development. Each component have their own props and logic so you can work with them as you wish. Here's a list of every component and props. All components are made with Bulma + Buefy, so make sure to check the docs for more info about it.
-
Under the hood, this component uses date-fns for format and parse functions. Make sure to check the docs for additional info!
-
Name Description Type Default readonly
Changes readonly state of component Boolean false value
The picked date String, Date new Date() format
Display format for picked date String 'dd/MM/yyyy' parseFormat
Parsing format String 'yyyy-MM-dd'
-
Name Description Type Default color
Input color style String 'is-info' options
Options to choose from Array [{label: 'Default', value: False}]
-
Name Description Type Default buttonText
Sets the upload button label String 'Choose a file...' fileIcon
Sets the upload icon String, Object 'upload' -
Name Description Parameters input
Triggers when file has been selected chosen file
-
Name Description Type Default value
Array of selected options' value Array - options
Array of options Array - readonly
Sets read only status on input Boolean false placeholder
Placeholder label on input String 'Select options...' state
Error state String null -
Name Description Parameters input
Triggers when a option has been selected Array of selected options
-
Name Description Type Default options
Array of options Array [{label: 'Default, value: false}]
-
Name Description Type Default options
Array of options Array -
The properties and events linked to this component are those already existing the InputMixin.js file. For a better explanation about this, check the Input Mixin section of this docs and Vue Mixins on VueJS official docs
Similar to InputFormCalendar, this components uses the format function of date-fns library. Make sure to check it!
-
Name Description Type Default hoursLabel
Label for hours display String 'Hours' minutesLabel
Label for minutes display String 'Minutes' secondsLabel
Label for seconds display String 'Seconds readonly
Sets read only state on input Boolean false state
Error state String null buttonsVariant
Variant of buttons' color String 'is-info' hoursInterval
Increment / Decrement interval for hours Number 1 minutesInterval
Increment / Decrement interval for minutes Number 1 secondsInterval
Increment / Decrement interval for seconds Number 1 value
Chosen time String null format
Time format String 'HH:mm' -
Name Description Parameters input
Emits an event when input is made event selected-time
Emits and event with the current time displayed time
-
-
-
Name Description Type Default menu
Array of labels and links for the sidebar menu Array - messages
UI array of messages Array - user
Logged in user's data Object - sidebarExpanded
sidebar expansion flag Boolean - title
Displayed name on desktop viewport String 'Admin' shortTitle
Displayed name on mobile viewport String 'A' -
Name Description Parameters messageDismissed
Triggered on message close event message id toggle-sidebar
Triggered on sidebar expansion - logout-confimed
Triggered when 'ok' button is clicked on logout -
-
Name Description Type Default user
User's data object Object - expanded
Expansion state of navbar Boolean - canToggleSidebar
Whether or not can be toggled the sidebar Boolean true title
Navigation bar name on desktop viewport String - shortTitle
Navigation bar name on mobile viewport String - locales
Available translation for your page Array - color
Navigation bar color String 'light' -
Name Description Parameters toggle-sidebar
Triggered on sidebar expansion - logout
Triggered when logout option is clicked -
This component does not make use of, instead, it uses a slot that can be changed to any content you want. So, as long as you footer content is inside of a footer renderer tag, your content will always behave as expected. For example:
<layout-footer-renderer> <div class="myClass"> <h2> My header </h2>< /div> </layout-footer-renderer>
-
Name Description Type Default items
Menu items to render Array - expanded
Whether or not the menu is expanded Boolean true
-
Name Description Type Default label
Menu item label String - to
Router link Object, String - icon
Item icon Object, String - children
Array of children items of current parent item Array - mini
Whether or not should be renderer the miniature version of the item Boolean -
This components uses slots to render a sort of grid defined by rows and columns. Each "tile" will be the space taken by the specified slot where your content will render:
<dashboard-renderer rows="1" columns="2"> <template v-slot:tile_1_1> <p>Here's some content for the tile intersected between row 1 and column 1</p> </template> <template v-slot:tile_1_2> <p>And another one on the tile intersected between row 1 and column 2</p> </template> </dashboard-renderer>
You can add as many tiles as your grid allows. However, tiles that dont exist in the current grid wont be rendered at all since the slot for that tile doesn't exist.
-
Name Description Type Default rows
Amount of rows in grid Number 0 columns
Amount of columns on each row Number 0 isMultiline
Apply 'is-multiline' Bulma class to all rows Boolean true sample
Render sample content in dashboard Boolean false
-
-
-
Name Description Type Default formVar
Stores content for every field in form Object - fields
Array of fields to render on form Array - errors
Stores errors associated to a field Object - readonly
Sets read only state on form field Boolean - loading
Sets loading state on form field Boolean false showDivider
Render a divider between fields and buttons Boolean true buttonsAlignment
Alignment of buttons String 'left' submitButtonText
Label on submit button String 'actions.save' submitButtonVariant
Color variant of submit button String 'is-primary' submitButtonIcon
Icon of the submit button Object { icon: 'check' } cancelButtonText
Label on cancel button String 'actions.cancel' cancelButtonVariant
Color variant of cancel button String null cancelButtonIcon
Icon of the cancel button Object { icon: 'angle-left' } backButtonText
Label on back button String 'actions.goBack' backButtonVariant
Color variant of back button String 'is-info' backButtonIcon
Icon of the back button Object { icon: 'angle-left' } showCancel
Show cancel button Boolean true showSubmit
Show submit button Boolean true showBack
Show back button Boolean true -
Name Description Parameters fieldChanged
Triggered on field's input event - cancel
On cancel of back button click - submit
When submit button is clicked -
-
This components also uses the Input Mixin.
Name Description Type Default append
Appended addon of field Array - prepend
Prepended addon of field Array - help
Help text String -
-
Name Description Type Default iconOnly
Only show an icon on the button Boolean false right
Add an icon to the right Boolean - icon
Icon of choice Object, String null
-
-
This component wraps around the font-awesome-icon and unicon components. If any of those icon packs are chosen then the Icon component will render any of those depending on the passed properties. For mdi, a simple
<i>
tag es render with the correct classes to display the icons.-
Name Description Type Default unicons
Set true if you want to use (and have installed) unicons icon pack Boolean false material
Use material icons Boolean false mdi
Use Material Design Icons Boolean false iconStyle
Sets the icon style String 'line' icon
Icon's name String, Array null spin
Set spinning state if available Boolean false outlined
Sets outlined style of icon (material, mdi) Boolean false
-
Name Description Type Default items
Table items Array - idField
Name of ID column String 'id' loading
Table loading state Boolean false hover
Make hoverable rows Boolean false emptyIcon
Icon shown when table is empty String null emptyMessage
Message shown when table is empty String 'Nothing to show...' allowPagination
Show pagination Boolean false totalPages
Total amount of pages on whole list Number 1 currentPage
Current displayed page Number 1 canCreate
Show create button Boolean true canReload
Show reload button Boolean true canChangePageSize
Allows page sizing Boolean true createButtonText
Create button label String new createButtonProps
Sets the create button type and icon Object { type: 'is-success', icon: 'plus'} fields
Table columns Array - actions
Allowed actions on each row Array - sortFields
Column used to sort rows String null sortDirection
Sorting order String 'asc' filters
Content used for filtering Object - filtersFields
Columns used for filtering Array - -
Name Description Parameters refresh
Triggered when refresh button is clicked - pageChanged
Triggered when page is changed on pagination event
-
Name Description Type Default pageSizes
Permitted page sizes Array [1, 5, 10, 15, 20, 25, 50, 100] currentPage
Current page marker Number 1 totalPages
Total amount of pages on list Number 1 -
Name Description Parameters pageSizeChanged
Triggered on page size selection new page size
Each message properties object has the following structure:
{ id, type, text }
. Every props object is a message on its own, being:id
, the message ID;type
, the message color variant on Bulma colors; andtext
, the string describing the message itself.-
Name Description Type Default messages
Array of Objects containing messages props Array - -
Name Description Parameters messageDismissed
On message close action Dismissed message id
-