@optimuscms/ui

This is a collection of components and styles which are the building blocks of Optimus CMS.

Stats

StarsIssuesVersionUpdatedCreatedSize
@optimuscms/ui
1.1.103 years ago3 years agoMinified + gzip package size for @optimuscms/ui in KB

Readme

Optimus UI

This is a collection of components and styles which are the building blocks of Optimus CMS.

Installation

Install the package:

# npm
npm install @optimuscms/ui --save

# yarn
yarn add @optimuscms/ui

Install the Vue plugin:

import OptimusUi from '@optimuscms/ui';

Vue.use(OptimusUi);

Import the SCSS:

Styles are a mix of the Bulma framework and helpers from Optix Sass, so we must setup the scss imports as follows:

@charset "utf-8";

// Setup package variables
@import "~bulma/sass/utilities/initial-variables";
@import "~optix-sass/variables";
@import "~@optimuscms/ui/src/sass/variables";

// Import packages
@import "~bulma";
@import "~optix-sass";
@import "~@optimuscms/ui/src/sass/_all";

Usage

Form Components

Errors:

<o-errors></o-errors>

Props:

  • errors: Expects an object of errors

Form field:

<o-form-field></o-form-field>

Props:

  • label|string
  • input|string: this should match the ID of the input inside the form field
  • required|boolean: shows a visual indication that the content inside the form field is required

Input:

<o-input v-model="value"></o-input>

Props:

  • id|string|required
  • type|string: all input standard types are vaild including textarea, defaults to text
  • required|boolean: enables html validation

Checkbox / Radio:

<o-checkbox v-model="value"></o-checkbox>

Props:

  • id|string|required
  • label|string|required
  • type|string: accepts radio defaults to checkbox
  • checked-value: value which will be sent when form is submitted, defaults to true
  • required|boolean: enables html validation

Select:

<o-select v-model="value"></o-select>

Props:

  • id|string|required
  • required|boolean: enables html validation

Multi Select:

<o-multi-select v-model="value"></o-multi-select>

Props:

  • options|array|required: an array of objects containing a value keyed as id and label keyed as name
  • optionValue|string: Override the default options value key
  • optionLabel|string: Override the default options label key

Date Picker:

<o-date-picker v-model="value"></o-date-picker>

Props:

  • id|string|required
  • required|boolean: Enables html validation
  • time|boolean: Defaults to true, shows a time picker
  • format|string: Visual only format the date and time formatting tokens

Build Components

Header:

<o-header></o-header>

Props:

  • title|string|required: title for the current page / section

Main navigation:

A wrapper component for the navigation items

<o-main-nav></o-main-nav>

Main navigation item:

<o-main-nav-item></o-main-nav-item>

Props:

  • icon|(array|string)|required: Font awesome icon name
  • to|(object|string)|required: vue router location

Sub navigation:

A wrapper component for the sub navigation items

<o-sub-nav></o-sub-nav>

Events:

  • opened: emitted when navigation is opened
  • closed: emitted when navigation is closed

Sub navigation item:

<o-sub-nav-item></o-sub-nav-item>

Props:

  • to|(object|string)|required: vue router location

Slots:

  • confirmButtonText: Confirm

UI Components

Alert:

<o-alert ref="alert">
    Alert message
</o-alert>

We can open alert via the ref.

this.$refs.alert.open();

Change the default confirm button text via the named slot confirmButtonText

Confirm:

<o-confirm
    ref="confirm"
    @confirm="handleItem"
></o-confirm>

We can open the confirm modal via the ref, we can also pass an object which will be passed back in the confirm event.

this.$refs.confirm.open({
    id: 1,
    title: 'Exmaple item'
});

Props:

  • type|string: type of alert, info, warning, danger by default success

Events:

  • confirm: emitted when the confirm button is clicked

Slots:

  • default: The default slot proped with the passed object
  • confirmButtonText: Confirm
  • cancelButtonText: Cancel

Proped slot example:

<template slot-scope="item">
    Are you sure you want to move <strong>"{{ item.title }}"</strong>
</template>

Notification:

<o-notification></o-notification>

Props:

  • closeable|boolean: allowed user to close the notification, true by default

Events:

  • close: emitted when notification is closed

Slots:

  • default: Notification content

Dropdown:

<o-dropdown>
    <a slot="button">Please select...</a>

    <a class="dropdown-item">All categories</a>
    <a class="dropdown-item">Category One</a>
</o-dropdown>

Slots:

  • default: Dropdown items
  • button: Element to be used to trigger the dropdown

Search Form:

<o-search-form v-model="searchQuery"></o-search-form>

Props:

  • placeholder|string: placeholder text

Events:

  • submit: emitted when form is submitted.

Table Sort:

<o-table-sort></o-table-sort>

Props:

  • column|string|required: Name of the column
  • current|string: Name of the column which is currently being ordered by

Events:

  • order: emits the new column name with direction prefix

Pagination:

<o-pagination></o-pagination>

Props:

  • options|object: pagination object returned from laravel

Events:

  • change-page: emits page number when a pagination link is clicked
  • Loader:*
<o-loader></o-loader>

Props:

  • loading|boolean|required: used to start and stop the loader

Modal:

<o-modal></o-modal>

Props:

  • active|boolean|required: used to show or hide the modal

Slots:

  • default: Modal content

License

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.