@apok/admin-components-bootstrap v1.0.1-rc.18

Apok-admin-components-bootstrap

The Bootstrap Styled Components for Apok-admin vue plugin

Table of Contents

• Installation
• Renderers
• Input Mixin
• Components
  • Inputs
  • Layout
  • Form
  • Miscellaneous

Installation

When installing Apok-admin VueJS plugin, you'll have to choose the CSS styled components. This project contains the Bootstrap 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="success">
        Add to cart
    </button-renderer>
</template>

The same logic applies to all renderers listed here

Input Mixin

All input components 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:

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 Bootstrap

• Bootstrap-Vue, so make sure to check the docs for more info about it.

• Inputs

  InputFormCalendar.vue

  Under the hood, this component uses date-fns for format and parse functions. Make sure to check the docs for additional info!

  • Properties

    Name	Description	Type	Default
    readonly	Changes readonly state of component	Boolean	false
    canSelectYear	Whether the year can be selected or not	Boolean	true
    canSelectMonth	Whether the month can be selected or not	Boolean	true
    format	Date format	String	'yyyy-MM-dd'
    displayFormat	Date format to be displayed	String	'dd/MM/yyyy'
    daysNames	Days of the week names	Array	"calendar.days.domingo", "calendar.days.lunes", "calendar.days.martes", "calendar.days.miercoles", "calendar.days.jueves", "calendar.days.viernes", "calendar.days.sabado"
    monthsNames	Months of the year names	Array	"calendar.months.enero","calendar.months.febrero","calendar.months.marzo","calendar.months.abril","calendar.months.mayo","calendar.months.junio","calendar.months.julio","calendar.months.agosto","calendar.months.septiembre","calendar.months.octubre","calendar.months.noviembre","calendar.months.diciembre"

  • Events

    | Name | Description | Parameters |
    |:---|:---|:---:|
    | ``date-selected`` | Triggered on date pick | formatted picked date |

    InputFormCheck.vue

    This component makes use of the InputMixin props and any other bound attribute via v-bind directive.

    InputFormFile.vue

    Same as last one, makes use of InputMixin props and v-binded values

    InputFormMultiSelect.vue

  • Properties

    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

  • Events

    | Name | Description | Parameters |
    |:---|:---|:---:|
    | ``input`` | Triggers when a option has been selected | Array of selected options |

    InputFormRadio.vue

  • Properties

    | Name | Description | Type | Default|
    |:---|:---|:---:|:---:|
    | ``options`` | Array of options | Array | [{label: 'Default, value: false}] |

    InputFormSelect.vue

    Apply the same logic as the check component

    InputFormText.vue

    See check component

    InputFormTextArea.vue

    See check component

    InputFormTimePicker.vue

    Similar to InputFormCalendar, this components uses the format function of date-fns library. Make sure to check it!

  • Properties

    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	'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'

  • Events

    Name	Description	Parameters
    input	Emits an event when input is made	event

• Layout

  Layout.vue

  • Properties

    Name	Description	Type	Default
    navbarProps	Navigation bar properties	Object	-
    footerProps	Footer properties	Object	-
    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	-

  • Events

    | Name | Description | Parameters |
    |:---|:---|:---:|
    | ``messageDismissed`` | Triggered on message close event | message id |
    | ``toggle-sidebar`` | Triggered on sidebar expansion | - |

    LayoutNavbar.vue

  • Properties

    Name	Description	Type	Default
    navbarProps	Navigation bar properties	Object	{ title: { type: String, default: 'Apok-admin'}, shortTitle: { type: String, default: 'Admin' } }
    user	User's data object	Object	-
    expanded	Expansion state of navbar	Boolean	-
    canToggleSidebar	Whether or not can be toggled the sidebar	Boolean	true
    locales	Available translation for your page	Array	-

  • Events

    | Name | Description | Parameters |
    |:---|:---|:---:|
    | ``sidebarToggled`` | Triggered on sidebar expansion | - |
    | ``setLocale`` | On language selection | - |
    | ``onLogout`` | When logout option is clicked | - |

    LayoutFooter.vue

    This component does not make use of any property, 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>

    LayoutMenu.vue

  • Properties

    Name	Description	Type	Default
    items	Menu items to render	Array	-
    inNavBar	Whether or not the items will be render on the navigation bar or an independant navigator	Boolean	false
    vertical	Use a vertical expansible menu	Boolean	false
    expanded	Whether or not the menu is expanded	Boolean	true

  • Events

    | Name | Description | Parameters |
    |:---|:---|:---:|
    | ``onMenuItemClicked`` | Triggered on native click event of item menu | - |

    LayoutMenuItem.vue

  • Properties

    | Name | Description | Type | Default|
    |:---|:---|:---:|:---:|
    | ``ìtem`` | Item properties | Object | { label: '' } |
    | ``keyId`` | Item id. Specially useful when menu items are nested | String | - |
    | ``vertical`` | Sets flex-column bootstrap class on item | Object | { label: '' } |
    | ``showText`` | Show item label | Boolean | true |

    Dashboard.vue

    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 doesn't exist in the current grid wont be rendered at all.

  • Properties

    Name	Description	Type	Default
    rows	Amount of rows in grid	Number	0
    columns	Amount of columns on each row	Number	0
    sample	Render sample content in dashboard	Boolean	false

• Form

  AdminForm.vue

  • Properties

    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	'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	'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
    submitButtonIconOnly	Only show icon for the submit button	Boolean	false
    cancelButtonIconOnly	Only show icon for the cancel button	Boolean	false
    backButtonIconOnly	Only show icon for the back button	Boolean	false

  • Events

    | Name | Description | Parameters |
    |:---|:---|:---:|
    | ``fieldChanged`` | Triggered on field's input event | - |
    | ``cancel`` | When back button is clicked | - |
    | ``submit`` | When submit button is clicked | - |

    AdminFormField.vue

  • Properties

    This components also uses the [Input Mixin](#input-mixin).
    
    | Name | Description | Type | Default|
    |:---|:---|:---:|:---:|
    | ``append`` | Appended addon of field | Array | - |
    | ``prepend`` | Prepended addon of field | Array | - |

    IconButton.vue

  • Properties

    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
    loading	Icon of choice	Object, String	null

• Miscellaneous

  Icon.vue

  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 given properties. For mdi, a simple <i> tag is rendered with the right classes to display the icons.

  • Properties

    | 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 |

    AdminTable.vue

  • Properties

    Name	Description	Type	Default
    hover	Make hoverable rows	Boolean	false
    striped	Make striped table	Boolean	false
    bordered	Make borders on table	Boolean	false
    canChangePageSize	Allows page sizing	Boolean	true
    canCreate	Show create button	Boolean	true
    createRoute	Create button route	Object, String	null
    idField	Name of ID column	String	'id'
    loading	Table loading state	Boolean	false
    canReload	Show reload button	Boolean	true
    currentPage	Current displayed page	Number	1
    totalPages	Total amount of pages on whole list	Number	1
    pageSize	Amount of items shown per page	Number	20
    createButtonText	Create button label	String	new
    createButtonProps	Sets the create button type and icon	Object	{ variant: 'success', icon: 'plus'}
    orderField	Sorting order	String	'asc'
    items	Table items	Array	-
    fields	Table columns	Array	-
    actions	Allowed actions on each row	Array	-
    filters	Content used for filtering	Object	-
    filtersFields	Columns used for filtering	Array	-

  • Events

    | Name | Description | Parameters |
    |:---|:---|:---:|
    | ``refresh`` | Triggered when refresh button is clicked | - |
    | ``onChangePageSize`` | Triggered when page size is changed | event |
    | ``pageChanged`` | Triggered when page is changed on pagination | event |
    | ``toggleOrder`` | Changes sorting order of the column | key of the toggled field |

    Pagination.vue

  • Properties

    Name	Description	Type	Default
    currentPage	Current page marker	Number	1
    totalPages	Total amount of pages on list	Number	1

  • Events

    | Name | Description | Parameters |
    |:---|:---|:---:|
    | ``onPageChanged`` | Triggered on page size selection | event |

    Messages.vue

    Each message properties object has the following structure: { id, type, text }. Every prop object is a message on its own, being: id, the message ID; type, the message color variant on Bootstrap colors; and text, the string describing the message itself.

  • Properties

    Name	Description	Type	Default
    messages	Array of Objects containing messages props	Array	-

  • Events

    Name	Description	Parameters
    messageDismissed	On message close action	Dismissed message id