CheckboxComponent

Properties
  • label - You can use a slot or a label property
  • name - Custom name for the checkbox
  • value - Pass a value to the checkbox
  • disabled - To get a disabled checkbox
  • trueValue - Default: true
  • falseValue - Default: false
Usage example
<checkbox v-model='model'>Check label</checkbox>
true

RadioComponent

Properties
  • label - Label for the radio
  • name - Custom name for the radio
  • val - Pass a value to the radio
  • disabled - To get a disabled radio
Usage example
<radio class="gap" name="radio_name" val="1" v-model="bindModel" label="Um"></radio>
<radio class="gap" name="radio_name" val="2" v-model="bindModel" label="Dois"></radio>
1

IosSwitchComponent

Properties
  • name - Custom name for the switch
  • value - Pass a value to the switch
  • disabled - To get a disabled switch
  • trueValue - Default: true
  • falseValue - Default: false
Usage example
<ios-switch :value="bindValue" :disabled="disabledBind" @input="someMethod"></ios-switch>
Normal example
Disabled example
false

BackComponent

An arrow back button using vue router Usage example
<back></back>

SpinnerComponent

Show a pulse spinner

Properties

  • loading - true to set visible or false to set hidden
  • color - Spinner color, ex: #9d9d9d
  • size
  • margin
  • radius
Usage example
<spinner :loading="loadingBind"></spinner>

ListManagerComponent

Used to show a list when status is success and got itens, or a No records found message when the status is success and the list size is zero

Properties

  • status - Status can be loading | success | failure
  • count - Number with a list count
Usage example
<list-manager :status="statusBind" :count="myList.length">Some html content</list-manager>

Nenhum registro encontrado


LoadManagerComponent

Used to show an spinner when status is loading, an error message when the status is failure or the content when status is success
Properties
  • status - Status can be loading | success | failure
Usage example
<load-manager :status="statusBind">Some html content</load-manager>

InputContainerComponent

Container for label and input

Properties

  • icon - String Icon label class. Ex: fa fa-user
  • label - String Label for the input
  • asterisk - Boolean Show an asterisk after label if true. Used to indicates required inputs
Usage example
<input-container :icon="iconClass" :label="labalText" :asterisk="true"></input-container>

PaginatorComponent

1 de 5
Usage (pug)
paginator(:page='page', :pages='pages' @prev-page='prevPage' @next-page='nextPage' color='green')

BackgroundImageDirective

Add a background image to an element
<div class="thumb" v-background-image="url">
Url:

TextBindDirective

Bind some content to a html tag
export default {
  data () {
    return {
      myProp: 'Orange'
    }
  }
}
<div v-text-bind="'myProp'"></div>            //Outputs -> Orange

CurrencyFilter

Show a Number in currency format
export default {
  data () {
    return {
      amount: 35.6
    }
  }
}
<div>{{amount}}</div>                     // Outputs -> 35.6
<div>{{amount | currency}}</div>          // Outputs -> R$35,60
Alternatively you can pass a prefix
<div>{{amount | currency("$")}}</div>     // Outputs -> $35,60
PrefixAmount R$35,60

DateFilter

Show a formatted date
export default {
  data () {
    return {
      myDate: '2017-03-01T11:54:56.856Z'
    }
  }
}
<div>{{myDate}}</div>                     // Outputs -> 2017-03-01T11:54:56.856Z
<div>{{myDate | date}}</div>              // Outputs -> 01/03/17 11:54
Alternatively you can pass a custom format
<div>{{myDate | date("dateTime")}}</div>  // Outputs -> 01/03/2017 11:54:56
Available formats
  • default = 'DD/MM/YYYY HH:mm:ss'
  • date = 'DD/MM/YYYY'
  • time = 'HH:mm:ss'
  • dateTime = 'DD/MM/YYYY HH:mm:ss'
  • shortDate = 'DD/MM/YY'
  • shortTime = 'HH:mm'
  • shortDateTime = 'DD/MM/YY HH:mm'
  • json = 'YYYY-MM-DDTHH:mm:ss'

TruncateFilter

Truncate a string
export default {
  data () {
    return {
      text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
    }
  }
}
<div>{{text | truncate}}</div>  //Outputs -> Lorem ipsum dolor sit amet,...

Example:

Truncate Length

Lorem ipsum dolor sit amet,...


Masks

Use the-mask


Dialog

Use v-slim-dialog


Modal

Use v-slim-dialog


VuexMapper

Mixin to map vuex in the components

1 - Install (Pass Vuex when install)

import Vue from 'vue'
import Vuex from 'vuex'
import PaliariVue from 'paliari-vue'
Vue.use(PaliariVue, { Vuex })

2 - Then in your components

export default {
  vuex: {
    products: {
      state: ['list', 'status', 'page', 'pages', 'query'],
      getters: ['someGetter']
      actions: ['fetchList', 'prevPage', 'nextPage']
      mutations: ['someMutation']
    },
    session: {
      state: ['currentUser']
    }
  },
}