zeppelin-element-library-vue

Vue Components for Zeppelin Element Library

Installation and Usage

npm install --save @zlab-de/zel-vue

yarn add @zlab-de/zel-vue

Components

1. Zelbutton
2. Zelcheckbox
3. ZelInput
4. Zelnotification
5. Zelnumberinput
6. Zelpagination
7. Zelradiobutton
8. zelsearchinput
9. zelselect
10. zeltab
11. zeltabs
12. zeltable
13. zelpagination

import Vue from 'vue';
import "path/to/zeppelin-element-library.css";
import {
  ZelVueButton,
  ZelVueCheckbox,
  ZelVueInput,
  ZelVueBulletList,
  ZelVueAttributeList,
  ZelVueNotifications,
  ZelVueNumberInput,
  ZelVueRadioButton,
  ZelVueSearchInput,
  ZelVueSelect,
  ZelVueTable,
  ZelVueTabs,
  ZelVueTab,
  ZelVueTag,
  ZelVuePagination
  }"@zlab-de/zel-vue";

  Vue.use(ZelVueButton);
  Vue.use(ZelVueCheckbox);
  Vue.use(ZelVueInput);

Alternatively you can 
``` html <a href=https://github.com/zepdev/zeppelin-element-library-vue/archive/master.zip" target="_blank" rel="noopener">download</a> ```  and reference the script and the stylesheet in your HTML:

``` html
<link rel="stylesheet" href="path/to/zeppelin-element-library.css">
<script src="path/to/dist/zel-vue.min.js"></script>

Components and Props

Each components are it's associated properties that can be added to it

Button (ZelVueButton) Component

| Prop Name | Type | Default | Description | ---------------- |:-------------:| --------:| ----------- | variant | String | primary | Other options tertiary, secondary | @click | Function | | Callback function attached to the component when the button click event is triggered. | disabled | Boolean | false | | fullWidth | Boolean | false | Set the button width to occupy the full width of it's parent container| | icon | String | | A string of icon name, see zeppelin element libary for more information about available icons set | size | String | | Sets the size of component eg: small

Checkbox (ZelVueCheckbox) Component

| Prop Name | Type | Default | Description |-----------------|:------------- |:----------|:------------ | disabled | Boolean | false | disables and/or enables a checkbox component | value | Boolean | false | checkstate | label | String | | label for the checkbox

Input (ZelVueInput) Component

| Prop Name | Type | Default | Description |-----------------|:------------- |:----------|:------------ | id | String | | element ID | placeholder | String | | placeholder text | disabled | Boolean | false | enable or disable component | label | String | label text| label for input component | value | String | | value of input component | error | Boolean | | set the error state on component |errorMessage | String | Required | Message to display when there is an error

List (ZelVueBulletlist) Component

| Prop Name | Type | Default | Description |-----------------|:------------- |:----------|:------------ | dataSource | Array | | An array of objects containing items to use as bullet list eg: [{id:1,text: 'bullet1'},{id:1, text:'bullet2'}]

List (ZelVueAttributeListItem) Component

| Prop Name | Type | Default | Description |-----------------|:------------- |:----------|:------------ | dataSource | Array | | An array of objects containing items to use as bullet list eg: [{id:1,text: 'bullet1', label:'label1'},{id:1, text:'bullet2', label:'label2'}]

Notification (ZelVueNotification) Component

| Prop Name | Type | Default | Description | |-----------------|:------------- |:----------|:------------ | variant | String | info | Indicates the type of notification eg (info, warning, danger, success) | message | String required | | Message to display on notifcation component | autoHideDuration| Number | 600 | duration to show the notification component | onClose | Function | | callback executed when close is clicked

NumberInput (ZelVueNumberInput) Component

| Prop Name | Type | Default | Description | |-----------------|:------------- |:----------|:------------ | plustitle | String | | The text shown on the plust icon | minustitle | String | | The text shown on the minus icon | max | Number | | Maximum number for the input component | min | Number | | Minimum number for the input component | step | Number | 1 | Increment per step | value | Number | 0 | value of the input element

RadioButton (ZelVueRadioButton) Component

| Prop Name | Type | Default | Description |-----------------|:------------- |:----------|:------------ | name | String | | name of radio component | classNameProp | String | | custom class name | label | String | | label for the radio | id | String | | element id of radio component | value | String | | value of radio component | required | Boolean | false | required attribute of component | checked | Boolean | false | check state of component | label | String required| | label of radio compoonent

Search (ZelVueSearchInput) Component

| Prop Name | Type | Default | Description |-----------------|:------------- |:----------|:------------ | className | String | | custom class name | label | String | | label for the search | id | String | searchbar | element id of search component | titlelabel | String | zepicons-search | search input label | placeholder | String | search | Placeholder for search | dataSource | Array | | Array or Array of Objects | value | String | | value of search input

Select (ZelVueSelect) Component

| Prop Name | Type | Default | Description |-----------------|:------------- |:----------|:------------ | label | String required | | label for the select | placeholder | String required | Select One | Placeholder for select | dataSource | Array required | [ ] | Array or Array of Objects | value | String | | value of select input

Table (ZelVueTable) Component

| Prop Name | Type | Default | Description |-----------------|:------------- |:----------|:------------ | className | String | | class name for table | titleHeaderClassName | String | | class name for table title header | subtitleHeaderClassName | String | | class name for sub-title header | tableBodyClassName | String | | class name for table body | tableHeaderClassName | String | | class name for table header | title | String required | | title for table | subtitle | String | | sub-tile for table | tableHeaderData | Array | [] | Array of object containing table header text/data | tableBodyData | Array | [] | Array of object containing table body text/data | tableFooterData | Array | [] | Array of object containing table footer text/data

Tab (ZelVueTab) Component

Expect ZelVueTabs

| Prop Name | Type | Default | Description |-----------------|:------------- |:----------|:------------ | name | String required | | name of tab container | selected | Boolean | false | select state of tab item

Tabs (ZelVueTabs) Component

You are required to nest a ZelVueTabs inside a ZelVueTab

| Prop Name | Type | Default | Description |-----------------|:------------- |:----------|:------------ | className | String | | class name for tab container | tabsizeSmall | Boolean | true | size of tab | id | String | | element id | tabindex | Number | | tabindex for each tab | tabsItems | Array | [] | Array of object containing id and name of tab item

Tag (ZelVueTag) Component

| Prop Name | Type | Default | Description |-----------------|:------------- |:----------|:------------ | tagname | String required | | tag name | tagtitle | String | zepicons-close | title of tab close

Pagination (ZelVuePagination) Component

| Prop Name | Type | Default | Description |------------------|:------------------- |:----------|:------------ | className | String required | | class name for pagination component | visiblebuttons | Number required | 5 | number of visible button to show at a time | perpage | Number required | | number of items per page | currentpage | Number required | | current page | items | Array of Objects | [] | Array of items to paginate | onPagechanged | function | | Callback function attached to the component when the page changed event is triggered.

Questions

If you have any questions, ideas or you want to discuss with Zel-element-library-vue community, use Issues to send any issue or note to us we will be happy to pick it up.

May work in other browsers but it's untested.

Credits and Thanks

• Alyssa for the support and contribution towards the project

License

MIT