botoxs

botoxs default components

Table of contents

• Installation
• Usage
• Example

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)

⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.

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)

⚠️ You need to configure your bundler to compile .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]

oxs-client