2.1.0 • Published 4 years ago

@repzio/vue-components v2.1.0

Weekly downloads
-
License
-
Repository
-
Last release
4 years ago

@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

NameDescriptionTypeDefaultRequired
marginTopSpecify a top marginstring81pxno
navigationDisplay a back arrow top leftbooleanfalseno
closeDisplay a close icon top rightbooleanfalseno
trashDisplay a trash icon top rightbooleanfalseno
printDisplay a print icon top rightbooleanfalseno
titleDisplay this string as the title bottom leftstringnoneno
actionWidthSpecify a width for the actions bottom rightstringautono
loadingShow a loader instead of the title and actionsbooleanfalseno

Events

NameDescriptionPayload
backFires when user presses the back arrownone
deleteFires when user presses the trash iconnone
closeFires when user presses the close iconnone

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

NameDescriptionTypeDefaultRequired
valueValue of the inputstringnoneyes
autofocusSpecify whether to focus the input when mountedbooleanfalseno
placeholderPlaceholder for the inputstringnoneno
nameName attribute used for auto complete attributes (email, password, address, etc.)stringnoneno
typeType of input (text, email, password, number)stringtextno
iconNameSpecify an icon to display next to the inputstringeditno
loadingShow loader in the error message slotbooleanfalseno
rulesVee Validate rules (confirmed, required, numeric, alpha_num, email)stringnoneno
disabledPrevent the user from interacting with the inputbooleanfalseno

Events

NameDescriptionPayload
inputFires when input value changesstring
focusFires when input is focusedEvent

Loader

Show animation while loading data.

Basic Usage

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

Attributes

NameDescriptionTypeDefaultRequired
sizeSpecify a height and width for the loaderstring35pxno

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

NameDescriptionTypeDefaultRequired
typeSuccess or danger (changes the background color of the modal header)stringsuccessno

Events

NameDescriptionPayload
closeFires when user clicks outside of the modalnone

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

NameDescriptionTypeDefaultRequired
columnsArray containing the details for the column layout. See example belowArraynoneyes
dataArray of data for the table to loop through and displayArraynoneyes
keyPropUnique property on the data object used as the key for each rowstringnoneyes
layoutNameSpecify a unique string to save in localStorage when user customizes table column layoutstringnoneyes
borderRowspecify a row index to highlight i.e. the last row that a user clicked onnumbernoneno
hoverBorderSpecify whether or not to highlight the rows as a user hovers over thembooleanfalseno
loadingDisplay a loader instead of the table rowsbooleanfalseno
widthSpecify a width for the tablestringnoneno
enableSortIndicates whether the user can sort the table by clicking on hthe table headersbooleanfalseno
sortOnIf sorting is enabled, this is what the table should be sorted on initiallystringnoneno
sortDirectionSpecify a starting sort directionstringascno
excludedColumnsExclude these columns from the "Add Column" dropdownArraynoneno
enableAddColumnIndicates whether or not to show the "Add Column" widgetbooleanfalseno
enableFilteringIndicates whether or not to give users the ability to filter columnsbooleanfalseno
baseFilterStringSpecify a filter to apply on top of any additional filters added by the userstringnoneno
hideEmptyResultsIndicates whether or not to show the "No results" message when data array is emptybooleanfalseno
concatColumnsSpecify additional columns to add, on top of additional columns added by userArraynoneno

Events

NameDescriptionPayload
cellClickedFires every time a user clicks a cell in the table{row, column, index}
updateFilterStringFires when user adds a filter to the tablestring
changeSortFires when user clicks outside of the modalcolumn property

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

NameDescriptionTypeDefaultRequired
totalRecordsNumber to display next to subject at the bottom leftnumber0yes
subjectSpecify which kind of record you are displaying. i.e. users, invoices, etc.stringnoneyes
totalPagesSpecify the total number of pagesnumbernoneyes
currentPageNumberSpecify the page number that user is currently onnumbernoneyes
loadingDisplay the loader in place of paginationbooleanfalseno

Events

NameDescriptionPayload
handlePageFires when user selects a new page, passing the page number clickednumber

Toggle

Single selection among two options.

Basic Usage

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

Attributes

NameDescriptionTypeDefaultRequired
valueSet the value to true or false (on or off) when first mountedbooleanfalseno

Events

NameDescriptionPayload
toggleFires every time toggle value changesboolean
2.0.9

4 years ago

2.1.0

4 years ago

2.0.3

4 years ago

2.0.2

4 years ago

2.0.4

4 years ago

2.0.7

4 years ago

2.0.6

4 years ago

2.0.8

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.1.9

4 years ago

1.1.8

4 years ago

1.1.7

4 years ago

1.1.6

4 years ago

1.1.5

4 years ago

1.1.4

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.1.1

4 years ago

1.0.9

4 years ago

1.1.0

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago

0.8.1

4 years ago

0.8.0

4 years ago

0.7.9

4 years ago

0.7.8

4 years ago

0.7.6

4 years ago

0.7.7

4 years ago

0.7.5

4 years ago

0.7.4

4 years ago

0.7.3

4 years ago

0.7.2

4 years ago

0.7.1

4 years ago

0.7.0

4 years ago

0.6.9

4 years ago

0.6.8

4 years ago

0.6.7

4 years ago

0.6.3

4 years ago

0.6.5

4 years ago

0.6.4

4 years ago

0.6.2

4 years ago

0.5.9

4 years ago

0.6.1

4 years ago

0.6.0

4 years ago

0.5.8

4 years ago

0.5.7

4 years ago

0.5.6

4 years ago

0.5.5

4 years ago

0.5.4

4 years ago

0.5.3

4 years ago

0.5.2

4 years ago

0.4.9

4 years ago

0.5.1

4 years ago

0.4.7

4 years ago

0.4.6

4 years ago

0.4.5

4 years ago

0.4.4

4 years ago

0.4.3

4 years ago

0.4.2

4 years ago

0.4.1

4 years ago

0.4.0

4 years ago

0.3.9

4 years ago

0.3.8

4 years ago

0.3.7

4 years ago

0.3.6

4 years ago

0.3.5

4 years ago

0.3.4

4 years ago

0.3.3

4 years ago

0.3.2

4 years ago

0.3.1

4 years ago

0.3.0

4 years ago

0.2.9

4 years ago

0.2.8

4 years ago

0.2.7

4 years ago