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

`javascript
import Vue from "vue"
import Botoxs from "botoxs"

Vue.use(Botoxs)
`

That's It!
now just use any you need throughout the project

You can also use specific components:

`javascript
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

`html




`

The plugin should be auto-installed. If not, you can install it manually with the instructions below.

Install all the components:

`javascript
Vue.use(Botoxs)
`

Use specific components:

`javascript
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 -

`


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 -

`


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 -

`


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

`


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

`


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

`


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

`

accepts 3 slots- header, body , footer

props-
showNav- navigation buttons, default "false"

emit-
close button emits "closeModal"
navigation emits "back" and "next"

`

Tabs

`

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)

`


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

`


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-