@repzio/vue-components v2.1.0

@repzio/vue-components

Install

npm install @repzio/vue-components

Import

Put these lines of code in main.ts or whatever the entry file is for your Vue app

import RepZioVueComponents from '@repzio/vue-components';
import '@repzio/vue-components/dist/repzio.css';

Vue.use(RepZioVueComponents, { colors: { primary: '#1d9e75', secondary: '#0588ff', danger: '#9e1d58', textPrimary: '#1c2234', textSecondary: '#434343' } })

### Declare (TypeScript)
> Put this line of code in `global.d.ts` or another declaration file

declare module '@repzio/vue-components'

### Use
> Components are registered on the global Vue instance, so you don't need to import a component every time you want to use it

<repzio-button @click="$emit('cancel')" type="success" button-content="Submit" :disabled="false">

# Documentation

<details>
<summary>Button</summary>

# Button
Commonly used button.

## Basic Usage

<repzio-button @click="onClick($event)" type="primary" button-content="Primary" margin="0 10px" :disabled="false">

### Attributes
| Name | Description | Type | Default | Required |
| --- | --- | --- | --- | --- |
| buttonContent | Text to display for button | string | none | yes |
| disabled | Enable or disable the button | boolean | false | no |
| margin | Add margin to the button using CSS shorthand i.e. 5px 10px | string | 0 | no |
| type | default, primary, secondary, danger, cancel | string | default | no |
| width | specify a width for the button, i.e. 250px | string | 100px | no |

### Events
| Name | Description | Payload |
| --- | --- | --- |
| click | Fires every time an enabled button is clicked | Event |
</details>

<details>
<summary>Checkbox</summary>

# Checkbox
A group of options for multiple choices.

## Basic Usage

<repzio-checkbox :initial-value="false" @change="handleChange($event)" label="My Checkbox">

### Attributes
| Name | Description | Type | Default | Required |
| --- | --- | --- | --- | --- |
| label | Text displayed next to the checkbox | string | none | yes |
| initialValue | Reactive property that handles checked/unchecked | boolean | false | no |
| disabled | Allow or prevent the checkbox from being toggled | boolean | false | no |

### Events
| Name | Description | Payload |
| --- | --- | --- |
| change | Fires every time the checked value changes | boolean |
</details>

<details>
<summary>Datepicker</summary>

# Datepicker
Use Datepicker for date input.

## Basic Usage

<repzio-datepicker :disabled="loading" :hide-icon="false" :initial-value="initialStartDate" :placeholder="Start Date" @clear="handleClear" @selected="handleDateSelected($event)">

### Attributes
| Name | Description | Type | Default | Required |
| --- | --- | --- | --- | --- |
| disabled | Prevent the user from interacting with datepicker | boolean | false | no |
| hideIcon | Hide the calendar icon to the left of the datepicker | boolean | false | no |
| initialValue | Saved value for datepicker | string | none | no |
| placeholder | Placeholder for datepicker | string | Pick a Date | no |

### Events
| Name | Description | Payload |
| --- | --- | --- |
| clear | Indicates that the user wants to clear their current date selection | none |
| selected | Fires every time a date is selected | Date |
</details>

<details>
<summary>Datepicker Range</summary>

# Datepicker Range
Use Datepicker range two select two dates. End date must be after start date.

## Basic Usage

<repzio-datepicker-range width="350px" :initial-start-date="startDate" :initial-end-date="endDate" :placeholder-start-date="START DATE" :placeholder-end-date="END DATE" @dateRangeSelected="handleDateRangeSelected($event)">

### Attributes
| Name | Description | Type | Default | Required |
| --- | --- | --- | --- | --- |
| width | Specify a width for the datepicker range | string | none | no |
| initialStartDate | Initial value for start date | string | none | no |
| initialEndDate | Initial value for end date | string | none | no |
| placeholderStartDate | Placeholder for start date | string | none | no |
| placeholderEndDate | Placeholder for end date | string | none | no |

### Events
| Name | Description | Payload |
| --- | --- | --- |
| dateRangeSelected | Fires every time a valid date range is selected | { startDate, endDate } |
</details>

<details>
<summary>Dropdown</summary>

# Dropdown
When there are plenty of options, use a drop-down menu to display and select desired ones.

## Basic Usage

<repzio-dropdown :enable-search="true" @change="onDropdownChange($event)" :placeholder="placeholder || 'Select a Sales Rep'" icon-color-open="#1d9e75" :saved-option="savedOption" :options="computedOptions">

### Attributes
| Name | Description | Type | Default | Required |
| --- | --- | --- | --- | --- |
| options | Array of { key, value, label } to display as options for the user | Array<{key, value, label}> | none | yes |
| savedOption | {key, value, label} matching one of the options. Displayed to user as selected option | Object{key, value, label} | none | no |
| alternateIcon | Use this icon instead of the standard drop arrow | string | drop-arrow | no |
| alternateIconHeight | Specify a height for the dropdown icon | string | 8 | no |
| alternateIconWidth | Specify a height for the dropdown icon | string | 15 | no |
| iconColorOpen | Specify a color for the icon when dropdown is open | string | primary | no |
| placeholder | Placeholder for dropdown when nothinig is selected | string | Select | no |
| override | Display this string as the selected value | string | none | no |
| width | Specifiy a width for the dropdown | string | 100% | no |
| loading | Indicates whether to show a loader instead of the dropdown | boolean | false | no |
| enableSearch | When dropdown is open, user can search through the options | boolean | false | no |
| searchPlaceholder | Placeholder for search input field | string | Search | no |
| simple | Display options without a placeholder and disable search | boolean | false | no |

### Events
| Name | Description | Payload |
| --- | --- | --- |
| change | Fires every time a new dropdown value is selected | { key, value, label } |
</details>

<details>
<summary>File Input</summary>

# File Input
When you need your user to select a file use this component.

## Basic Usage

<repzio-file-input @fileChosen="handleFileChosen($event)">

### Attributes
No attributes.

### Events
| Name | Description | Payload |
| --- | --- | --- |
| fileChosen | Fires every time a file is chosen | File |
</details>

<details>
<summary>Header</summary>

# Header
Optionally display a title, subtitle, back button, close button, and additional actions.

## Basic Usage

<repzio-header @back="handleClickBack" :navigation="true" :loading="loading" margin-top="0" :title="true">

<p slot="navigation">Back to All Users</p>
<repzio-loader slot="title" v-if="loading"></repzio-loader>
<span v-else slot="title" class="book">Create New User</span>
<p slot="subtitle" class="book">Use this form to create a new user in the system.</p>
<div slot="actions">
    <repzio-button
        @click="createUser"
        type="success"
        button-content="CREATE USER"
        width="165px"
        :disabled="false">
    </repzio-button>
</div>

Attributes

Events

Input

Input data using mouse or keyboard.

Basic Usage

<repzio-input
    @input="handleBasicInput($event, 'email')"
    success-color="#1d9e75"
    rules="required|email"
    :value="user.email"
    icon-name="envelope"
    name="email"
    type="text"
    placeholder="Email Address">
</repzio-input>

Attributes

Events

Loader

Show animation while loading data.

Basic Usage

<repzio-loader v-if="loading" :size="20"></repzio-loader>

Attributes

Events

No events.

Modal

Informs users while preserving the current page state.

Basic Usage

<repzio-modal @close="handleClose" type="danger">
    <div class="modal-header-inner" slot="header">
        <svgicon icon="exclam" height="34" color="#FFF"></svgicon>
        <div class="text-wrapper">
            <span class="medium">Wait!</span>
        </div>
    </div>
    <div class="modal-body-inner" slot="body">
        <div class="body-item-wrapper">
            <span>You are trying to add a user that already exists.</span>
        </div>
    </div>
    <div class="modal-footer-inner" slot="footer">
        <div class="buttons">
            <div class="button-wrapper">
                <repzio-button
                    @click="handleClose"
                    type="danger"
                    button-content="OK"
                    :disabled="false">
                </repzio-button>
            </div>
        </div>
    </div>
</repzio-modal>

Attributes

Events

Table

Display multiple data with similar format.

Basic Usage

<repzio-table
    width="calc(100% - 70px)"
    key-prop="id"
    @cellClicked="onCellClicked($event)"
    @updateFilterString="handleUpdateFilterString($event)"
    @changeSort="handleSort"
    :loading="loading"
    :enable-sort="true"
    :enable-add-column="true"
    :enable-filtering="true"
    :hover-border="true"
    :border-row="recentRowIndex"
    :sort-on="sortOn"
    :sort-direction="sortDirection === 'asc' ? 0 : 1"
    :data="customers"
    :columns="columnLayout">
</repzio-table>

Attributes

Events

Example Column Layout

columnLayout: any[] = [
        {
            prop: 'name',
            label: 'Name',
            type: 'text',
            sort: false
        },
        {
            prop: 'description',
            label: 'Description',
            type: 'text'
        },
        {
            prop: 'price',
            label: 'Price',
            type: 'price',
            sort: false
        },
        {
            prop: 'inStock',
            label: 'In Stock',
            type: 'boolean',
            sort: true
        },
        {
            prop: 'provider',
            linkProp: 'url',
            label: 'Link',
            type: 'link'
        }
    ];

Footer

Display total records and pagination.

Basic Usage

<repzio-footer
    subject="Statement"
    @handlePage="handlePage($event)"
    :total-records="commissionStore.statementsTotalRecords"
    :current-page-number="currentPageNumber"
    :total-pages="totalPages"
    :loading="loading">
</repzio-footer>

Attributes

Events

Toggle

Single selection among two options.

Basic Usage

<repzio-toggle
    @toggle="checked=!checked"
    :value="checked">
</repzio-toggle>

Attributes

Events