gijutsu-toolkit-vue

Installation

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

Configuration - main.js project file

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

Components

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


NotFound: Template

App.vue - sample

<template>
  <div id="app">
    <gj-layout
      title="Toolkit"
      :navigation="navigation"
      :links="links"
      :show-hamburguer-icon="true"
      :show-left-menu="true">
      <router-view />
    </gj-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>

gj-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