ibg-layout-base v1.0.0

Layout Padrão

Componente Vue.js para renderização do layout padrão IBG

• Uso básico
• Componentes
  • layout-base
  • s-link-item
  • s-router-link-item
  • s-group-link-item
• Forma declarativa do menu lateral
• Models
  • LayoutBaseModel
  • MenuModel
  • MenuConfigModel
  • NavbarModel
  • NavbarConfigModel
  • UserModel
  • BreadcrumbModel
  • ConfigModel
• Types
  • MenuItemModelTypes
  • BreadcrumbModelTypes

Uso básico

<layout-base v-model="modelo">
    <!-- Conteúdo da página -->
</layout-base>

import { LayoutBaseModel } from '@ui/layout-base'

export default {
  name: 'app',
  data () {
    return {
      modelo: new LayoutBaseModel()
    }
  },
  beforeMount () {
    // Atribuição das informações do layout
    this.modelo.navbar.title = "Título do sistema"
    this.modelo.menu.config.menuStartsOpened = true
  }
}

Componentes

layout-base

Componente principal para o layout.

<layout-base v-model="modelo">
    ...
</layout-base>

• v-model

  Objecto principal que completa as informações do layout

  Tipo: LayoutBaseModel

• Slots

  • menu-lateral-itens

    Slot para para incluir itens de menu na forma declarativa (html) Os componentes aceitos são:

    • s-link-item
    • s-group-link-item
    • s-router-link-item

    <layout-base v-model="modelo">
        <template slot="menu-lateral-itens">
        ...
        </template>
    </layout-base>

  • menu-superior-itens

    Slot para para incluir conteúdo na barra superior. O conteúdo é inserido ao lado esquerdo dos itens do menu superior.

    <layout-base v-model="modelo">
        <template slot="menu-superior-itens">
        ...
        </template>
    </layout-base>

  • breadcrumb-custom-area

    Slot para para incluir conteúdo dentro do container do breadcrumb.

    <layout-base v-model="modelo">
        <template slot="breadcrumb-custom-area">
        ...
        </template>
    </layout-base>

  • titulo-customizado

    Slot para para incluir um título de sistema customizado.

    <layout-base v-model="modelo">
        <template slot="titulo-customizado">
        ...
        </template>
    </layout-base>

s-link-item

Componente para criação de item de menu do tipo link (\\)

• Slots

  • icon: Slot para a atribuição do ícone do item de menu

• Props

  Propriedade	Descrição	Tipo
  show-new-label	Exibir flag indicando que é um novo item no menu	Boolean

s-router-link-item

Componente para criação de item de menu do tipo router (router-link)

• Slots

  • icon: Slot para a atribuição do ícone do item de menu

• Props

  Propriedade	Descrição	Tipo
  route-config	Configuração da rota	Object
  show-new-label	Exibir flag indicando que é um novo item no menu	Boolean

• O atributo name deve ser o mesmo definido na configuração da rota

s-group-link-item

Componente para criação de um agrupador de itens de menu.

• Slots

  • icon: Slot para a atribuição do ícone do item de menu

• Props

  Propriedade	Descrição	Tipo
  show-new-label	Exibir flag indicando que é um novo item no menu	Boolean

Forma declarativa do menu lateral

<layout-base v-model="modelo">
    <template slot="menu-lateral-itens">
        <!-- s-link-item -->
        <s-link-item label="Pagina" path="http://localhost:8080/pagina/">
          <font-awesome-icon icon="user" slot="icon"/>
        </s-link-item>

        <!-- s-router-link-item -->
        <s-router-link-item label="Página Exemplo" :route-config="{ name: 'NomeDaRota', params: {} }">
          <font-awesome-icon icon="user" slot="icon"/>
        </s-router-link-item>

        <!-- s-group-link-item -->
        <s-group-link-item label="Agrupador de link itens" :show-new-label="true">
          <font-awesome-icon icon="bell" slot="icon"/>
          <s-link-item label="Pagina" path="http://localhost:8080/pagina/">
            <font-awesome-icon icon="user" slot="icon"/>
          </s-link-item>
        </s-group-link-item>
    </template>
    ...
</layout-base>

• Todos os itens de menu aceitam como filhos outros itens de menu, incluindo itens de mesmo tipo

Models

LayoutBaseModel

Tipo: Object

MenuModel

Tipo: Object

//..
export default {
  //...
  beforeMount () {
    this.modelo.menu.itens = [
      {
        label: 'Router link', // Label do item
        type: MenuItemModelTypes.Route, // Item do tipo Router link
        routeConfig: {name: 'routeName'}, // Configurações da rota
        icon = "user", // Icone do fontawesome svg
        showNewLabel: true, // Flag para exibição do idicador 'NOVO ITEM'
        children: [
          { label: 'Router Link', type: MenuItemModelTypes.Link, path: 'http://url', icon: "user" },
        ]
      },
      {
        label: 'Agrupador de links',
        type: MenuItemModelTypes.Group, // Item do tipo agrupador
        icon = "user",
        children: [
          { // Item do tipo link
            label: 'Anchor Link', type: MenuItemModelTypes.Link, path: 'http://url', icon: "user"
          },
        ]
      }
    ]
    this.modelo.menu.config.menuStartsOpened = true
  }
}

• A inicialização dos itens de menu também pode ser alcançada usando a forma declarativa (html). Ver Forma declarativa do menu lateral

MenuConfigModel

Tipo: Object

NavbarModel

Tipo: Object

//..
export default {
  //...
  beforeMount () {
    this.modelo.navbar.title = 'Título do sistema'
    this.modelo.navbar.config.showIBG = true
    this.modelo.navbar.subTitle = 'Subtítulo do sistema'
  }
}

NavbarConfigModel

Tipo: Object

UserModel

Tipo: Object

BreadcrumbModel

Tipo: Object

//...
this.modelo.breadcrumb.itens = [
    { label: 'Nome Sistema', type: BreadcrumbModelTypes.Route , route: {name: 'pageA'} },
    { label: 'Funcionalidade', type: BreadcrumbModelTypes.Link  , path: '/' },
    { label: 'Operação', href: '/' },
]
//...

• Breadcrumbs não podem ser usados na forma declarativa (html).

ConfigModel

Tipo: Object

Caso a propriedade loginUrl seja preenchida, o sistema irá buscar os dados do usuário no caminho definido, caso contrário, a propriedade user deve ser definida manualmente.

Types

MenuItemModelTypes

Define os tipos de itens de menu. Usado na definição programática do menu lateral

const MenuItemModelTypes = {
  Group: 0, Route: 1, Link: 2
}

BreadcrumbModelTypes

Define os tipos de breadcrumb. Usado na definição programática do breadcrumb

const BreadcrumbModelTypes = {
  Route: 0, Link: 1
}