botoxs
botoxs default components
Table of contents
Installation
npm i --save botoxs
Default import
Install all the components in your main.js
import Vue from "vue"
import Botoxs from "botoxs"
Vue.use(Botoxs)That's It!
now just use any <uiComponent><uiComponent/> you need throughout the project
You can also use specific components:
import Vue from "vue"
import { Component } from "botoxs"
Vue.component("test", Component)Browser
<link rel="stylesheet" href="botoxs/dist/botoxs.css" />
<script src="vue.js"></script>
<script src="botoxs/dist/botoxs.browser.js"></script>The plugin should be auto-installed. If not, you can install it manually with the instructions below.
Install all the components:
Vue.use(Botoxs)Use specific components:
Vue.component("test", Botoxs.Test).vue files. More info in the official documentation.
List Of Components
--TEST VERSION--
For all components there are props to pass in, some,like label fields, has default values you can overide or not pass atall, others like "checked" for checkboxes are mendatory to pass in for proper functionality.
Button -
`<uiButton><uiButton/>`
props:
isLoading - (Boolean, default is "false")
waitingText- (to show the user, default is "Please wait...")
action - normal(as default), danger,success
value – displayed text (default is ‘Submit’)
emits "click" event with payload
Radio -
`<uiRadio><uiRadio/>`
label – text name for radio
model – null\number to make choice
value- number
selectable - Boolean (default is "true")
id – String
display- inline (default is “block”)
emits value of selected radio on "change" event
Checkbox -
`<uiCheckbox><uiCheckbox/>`
label – text name for box
model – [id,label,checked]
disabled - Boolean (default “false”)
selectable - Boolean (default is "true")
id – String
display- inline (default is “block”)
checked – boolean, for v-modeling to another checkbox (default-”false”)
emits model on "change" event)
Input- Dropdown
<uiDropdownInput/>
list -[{label, id}...] or ["string", "string2"...]
if array is 1 object component will behave as single Input
label -name by the component - string
isEditable – Boolean (default - “true”)
emit – “change”(id/item, index)
selected- default- first in array
Input- AutoComplete
<uiAutoComplete/>
list -[{label, id}...] or ["string", "string2"...]
description - string
placeholder- default “search...”
isAsync- default “false”
emit – “input”(id/item, index) - use to call/retrive async
Input - RegEx Validation
<uiInputValidation><uiInputValidation/>
props-
validation - number, text, email (default "number")
minLength & maxLength= default 0 & Infinity
required & disabled - default "false"
placeHolder - default "enter..."
id- give your vales some id
label - text line next to the input
error - massage for invalid input (default "enter a valid {{validation}})
icon- pass html link the "src" of an img tag next to the input
Emits change on "key" -
emits object- {key:”value”, valid:isValid, id}
Modal
<uiModal><uiModal/>
accepts 3 slots- header, body , footer
props-
showNav- navigation buttons, default "false"
emit-
close button emits "closeModal"
navigation emits "back" and "next"
Tabs
<uiTabs><uiTabs/>
accepts an array of minimum 2 objects-
component- inject component to tab
isActive- (default to 1st object in array),
label - tab text
id
number- presents a number next to the text
emits event "change"(label,id)
Table (with pagination+sortable)
<uiTable></uiTable>
props -
*
headers - the table headers row, accepts an object with *
*
value and is sortable(if true a sort button will be craeted for column)-
{value:..., isSort:Boolean}
*
data- the table data by rows, pass in an array arays of values - [["1","2",....], ["3","4"...]]
*
sides - optional - when injected the right column is Sticky,
pass names of the rows as a value attribute - {value:"..."}
*
maxResults - maximum results per page
emit-
*
data – bodyClicked- passes out data, index and row
*
sides – sidesClicked- passes out data, index
*
header– headerClicked- passes out data, index
Table Extended- (with pagination+sortable) Table ready for data insertion within rows
<uiTableExtended></uiTableExtended>
props -
*
headers - the table headers row, accepts an object with value and is sortable(if true a sort button will be craeted for column)-
{value:..., isSort:Boolean}
*
data- the table data by rows, pass in an array arays of values - [["1","2",....], ["3","4"...]]
*
sides - optional - when injected the right column is Sticky,
pass names of the rows as a value attribute - {value:"..."}
*
maxResults - maximum results per page
emit-
*
data – bodyClicked- passes out data, index and row
*
sides – sidesClicked- passes out data, index
*
headers– headerClicked- passes out data, index
to insert data rows use a scoped template
pass to the table your data array of rows and the inner "uiTableCell" component passes out a "data" prop to use when rendering your rows manually as follows-
<template slot="tableRows" slot-scope="table">
<tr v-for="row in table.data">
<div @click="expend=row >
<td v-for=" in row">
<uiTableCell>{{row[i+1]}}</uiTableCell>
</td>
</div>
<div v-show="expend==row">
I am an expendable data cell!!
</div>
</tr>
<template/>
DebtTable -
<uiDebtTable></uiDebtTable>
props -
*
headers- pass in value and column space- if there's no value specify the space between columns- sml/med/lg
{value:"header value", space:"sml/med/lg"}
*
data- array of arrays of objects, pass in value and icon(both optional)
*
max results- maximum rows in a page
*
resize- if resize is needed- pass in Boolean
emit-
@click
Tool Bar - event emiting buttons, calender, files sorting built in search bar and more
<uiToolBar></uiToolBar>
every button has a isButton prop show or hide it
props-
*
label - tool bar label text
*
searchElement- search bar
isSearch - Boolean
emits "@searchChange"
*
files- print file icon
isFiles- Boolean
options- name of option you want+true {pdf:true, excel:true... etc...}
emits "fileElementChange"
*
calender- monthly, yearly, and by by range selectors
isCalender- Boolean
byMonth \ byYear - Boolean- choose one
yearRange - if selecting "byYear" inject this array with the years wanted- ["2011","2012","2013"...]
emits "calenderElementChange"
*
addElement - a "+" button, with optional options screen
isAdd- Boolean
elements- optional, if not injected the button emits "send" on click, if injected provide an array of options - ["option1","option2"...]
emits "addElementChange"
*
checkbox-
isCheckbox- Boolean
list- object with a "value" and a "checked" boolean - {value:"checkbox 1", checked:false}
emits "checkboxChange"
*
listElement - 2 icons of resize screen
isList- Boolean
emits "normal" or "extended" on @listChange
Form - validation form for multiple components
accepts an array of components and a validation property, if the form is not valid it will not launch a 'submit' event
props- * btnValue- value of the submit button
uiToggleButton - toggle 2 options
props- * labels- array of 2 objects that contains name, color, and backgroundColor of 2 options default: [ { name: "מושהה", color: "white", backgroundColor: "blue" }, { name: "פעיל", color: "white", backgroundColor: "blue" } ]
* disabled- Boolean (default:false)
* isLoading- Boolen (default:false)
* loadingText - Text (default:"אנא המתן...")
# Example
---
## License
[MIT](http://opensource.org/licenses/MIT)
[OXS]