sapitur-toolkit-vue

sapitur-toolkit-vue

Installation

npm install sapitur-toolkit-vue --save
yarn add sapitur-toolkit-vue

Configuration - main.js project file

import Toolkit from 'sapitur-toolkit-vue';
import 'sapitur-toolkit-vue/dist/sapitur-toolkit-vue.css';
Vue.use(Toolkit);

Components

sp-breadcrumb: Breadcrumb
sp-button: Button
sp-grid: Grid
sp-layout: Layout
sp-form: Form
sp-form-input: Input
sp-form-textarea: Textarea
sp-form-select: Select
sp-form-radio: Radio
sp-form-select: Select
sp-form-cpfcnpj: CPFCNPJ
sp-form-maskedinput: Maskedinput
sp-form-permissions: Grid

NotFound: Template

Registrar os filtros customizados

import { CustomFilters } from 'sapitur-toolkit-vue';
Vue.use(CustomFilters);

Os filtros disponiveis são:

• cpfCnpj
• millisToDate

Este filtros não precisam ser redeclarados no projeto de destino. Pasta usar dentro da interpolação normalmente após o registro. Para registrar um novo filtro, aplique a configuração em @/utils/custom-filters.js.

Registrar o Loading

Para registrar o componente, execute:

import { Loading } from 'sapitur-toolkit-vue';
Vue.use(Loading, { icon: 'broken' });

Os icones disponiveis são: arrow | broken | fontain | segment. O icone default é o arrow.

Para trocar o icone após a inicialização, execute:

this.$loading.setIcon(icon);

Ativação e desativação

this.$loading.activate();
this.$loading.deactivate();

App.vue - sample

<template>
  <div id="app">
    <sp-layout
      title="Toolkit"
      :navigation="navigation"
      :links="links"
      :show-hamburguer-icon="true"
      :show-left-menu="true">
      <router-view />
    </sp-layout>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navigation: [
        {
          root: { icon: 'fas fa-home', title: 'Home', link: '/' },
        },
        {
          root: { icon: 'fas fa-file-alt', title: 'First' },
          leaves: [
            { title: 'First', link: '/first' },
          ],
        },
      ],
    };
  },
  computed: {
    links() {
      if (this.$route.meta.breadcrumb) return this.$route.meta.breadcrumb;
      return [];
    },
  },
};
</script>

sp-layout props

- navigation [array: data] - an array with the Left Menu options
- links [array: computed] - an array defined on router file with the breadcrumb page options. each route needs a breadcrumb definition
- show-hamburguer-icon [boolean: props] - controls the exibition of the hamburguer icon to hide or show the left menu
- show-left-menu [boolean: props] - hide or show the left menu

Versionamento

A aplicação possui os scripts abaixo que podem ser usados para alterar a versão da aplicação.

| version:major | X.0.0 | | version:minor | 0.X.0 | | version:patch | 0.0.X |