README

Blade Components

Componentes Laraval Blade reusáveis para as suas aplicações. Os compomentes são baseados Design System do Governo Federal Brasileiro. Os componentes foram desenvolvidos utilizando o framework Laravel e o Bootstrap CSS.

Sumário

• Blade Components
  • Sumário
  • Instalação
  • Configuração
  • Uso
    • Componentes
      • AvatarDropdown
      • AvatarIcon
      • AvatarLetter
      • AvatarPhoto
      • Breadcrumb
      • Button
      • ButtonSecondary
      • ButtonTertiary
      • ButtonCircle
      • ButtonCircleSecondary
      • ButtonCircleTertiary
      • ButtonLink
      • Card
      • CardImage
      • Divider
      • Form - Loading
      • Input
      • InputFile
      • InputPassword
      • Div - Row
      • Div - Col
      • Div - ColAuto
      • Loading - Percentage
      • Loading - Spinner
      • Message - Danger
      • Message - Info
      • Message - Success
      • Message - Warning
      • Message - Danger
      • Message - Context - Info
      • Message - Context - Success
      • Message - Context - Warning
      • Radio Vertical
      • Select
        • Forma 1:
        • Forma 2:
      • SelectGov
      • Switcher
      • Tab
      • Table
      • Tag - Count
      • Tag - Icon
      • Tag - Status
      • Tag - Text
      • TextArea
  • Log de Alterações
  • Guia de Contribuição
  • Licença
  • Referências
    • Exemplos de implementação de componentes blade

Instalação

Adicione o pacote ao seu projeto:

# adicionando a dependência no projeto
composer require ufvjm/blade-components

Configuração

Adicionar a seguinte entrada nas seções post-install-cmd e post-update-cmd do arquivo composer.json do seu projeto:

    "scripts": {
        "post-install-cmd": [
            "@php artisan vendor:publish --provider='Dsi\\LaravelBladeComponents\\LaravelBladeComponentsServiceProvider' --tag=css --force"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --provider='Dsi\\LaravelBladeComponents\\LaravelBladeComponentsServiceProvider' --tag=css --force"
        ],
    }

Isso fará com que o arquivo css será exportado para o seu projeto após instalação e atualização.

Editar o arquivo resources/css/app.css e adicionar a seguinte entrada:

@import './blade-components.css';

Uso

Componentes

Lista de componentes disponíveis.

AvatarDropdown

<x-dsi.avatar-dropdown fullName="Fulano de Tal" />

AvatarIcon

<x-dsi.avatar-icon title="Usuário" icon="fas fa-user" size="small" />

AvatarLetter

<x-dsi.avatar-letter title="Usuário" letter="U" size="medium"
    bgColor="{{ \Dsi\LaravelBladeComponents\Enum\BgColors::GREEN->value }}"
/>

AvatarPhoto

<x-dsi.avatar-photo title="Usuário" photoUrl="https://picsum.photos/id/1005/400" size="large" />

Breadcrumb

Povoando a variável:

$crumbs = [
  '/menu-anterior' => 'Menu Anterior',
  '#' => 'Atual',
];

Adicionando o componente:

<x-dsi.breadcrumb :crumbs="$crumbs" homeUrl="/inicio"></x-dsi.breadcrumb>

Button

<x-dsi.button>Salvar</x-dsi.button>

ButtonSecondary

<x-dsi.button-secondary>Salvar</x-dsi.button-secondary>

ButtonTertiary

<x-dsi.button-tertiary>Salvar</x-dsi.button-tertiary>

ButtonCircle

<x-dsi.button-circle iconClass="fas fa-city" title="Cadastro de cidades" />

ButtonCircleSecondary

<x-dsi.button-circle-secondary iconClass="fas fa-city" title="Cadastro de cidades" />

ButtonCircleTertiary

<x-dsi.button-circle-tertiary iconClass="fas fa-city" title="Cadastro de cidades" />

ButtonLink

<x-dsi.button-link href="/home" title="Início">Voltar</x-dsi-link.button>

Card

<x-dsi.card title="Título">Conteúdo</x-dsi.card>

CardImage

<x-dsi.card-image src="https://example.com/image.jpg" alt="Example Image"/>

Divider

<x-dsi.divider />

Form - Loading

<x-dsi.form.loading />

Input

<x-dsi.input name="nome" id="identificador" label="Nome" value="John Doe" />

InputFile

@php
$label = 'Envio de arquivo';
$message = 'Os arquivos devem ser no formato PNG ou JPG e ter no máximo 100MB.';
@endphp

<x-dsi.input-file name="arquivo" id="arquivo" :label="$label" :message="$message" />

InputPassword

<x-dsi.input-password name="senha" id="senha" label="Senha" />

Div - Row

<x-dsi.div.row>Conteúdo</x-dsi.div.row>

Div - Col

<x-dsi.div.col>Conteúdo</x-dsi.div.col>

Div - ColAuto

<x-dsi.div.col-auto>Conteúdo</x-dsi.div.col-auto>

Loading - Percentage

<x-dsi.loading.percentage label="Carregando" percentage="75" />

Loading - Spinner

<x-dsi.loading.spinner label="Carregando" :medium="true" />

Message - Danger

<x-dsi.message.danger title="Perigo" message="Mensagem de perigo" />

Message - Info

<x-dsi.message.info title="Informação" message="Mensagem de informação" />

Message - Success

x-dsi.message.success title="Sucesso" message="Mensagem de sucesso" />

Message - Warning

<x-dsi.message.warning title="Alerta" message="Mensagem de alerta" />

Message - Danger

<x-dsi.message.context.danger message="Mensagem de Perigo" />

Message - Context - Info

<x-dsi.message.context.info message="Mensagem de Informação" />

Message - Context - Success

<x-dsi.message.context.success message="Mensagem de Sucesso" />

Message - Context - Warning

<x-dsi.message.context.warning message="Mensagem de Alerta" />

Radio Vertical

<x-dsi.radio-vertical id="fruta" name="fruta" label="Fruta" helpText="Selecione uma fruta.">
    <x-dsi.radio.radio-item id="fruta-maca" name="fruta" label="Maçã" value="maca" checked />
    <x-dsi.radio.radio-item id="fruta-banana" name="fruta" label="Banana" value="banana" disabled />
    <x-dsi.radio.radio-item id="fruta-laranja" name="fruta" label="Laranja" value="laranja" />
</x-dsi.radio-vertical>

Select

Existem duas formas de utilizar este componente Select, uma passando um array de opções simples e outra passando um array de objetos com os valores e rótulos (value e option).

Forma 1:

@php
    $options = [
        'AC' => 'Acre',
        'AL' => 'Alagoas',
        'AP' => 'Amapá',
        'AM' => 'Amazonas',
    ];
@endphp

<x-dsi.select
    id="estado"
    name="estado"
    label="Estado"
    selectMessage="Selecione um estado"
    errorMessage="Preenchimento obritagório"
    :options=$options
/>

Forma 2:

Além do array de objetos, deve ser informado dois novos parâmetros, value e option, sendo o value a notação para identificar o conteúdo value de cada option , e já o option é a notação para identificar o conteúdo visivel da opção do select, como apresentado abaixo:

@php
    $options = [
       (object)[
            'id' => 1,
            'sigla' => 'AC',
            'nome' => 'Acre',
        ],
        (object)[
            'id' => 2,
            'sigla' => 'AL',
            'nome' => 'Alagoas',
        ],
        (object)[
            'id' => 5,
            'sigla' => 'AP',
            'nome' => 'Amapá',
        ],
        (object)[
            'id' => 6,
            'sigla' => 'AM',
            'nome' => 'Amazonas',
        ],
    ];
@endphp

<x-dsi.select
    id="estado"
    name="estado"
    label="Estado"
    selectMessage="Selecione um estado"
    errorMessage="Preenchimento obritagório"
    :options=$options
    
    value="sigla"
    option='nome'
/>

SelectGov

<x-dsi.select-gov id="estado" name="estado" label="Estado" placeholder="Selecione um estado" errorMessage="Preenchimento obritagório">
    <x-dsi.select-gov.select-item id="rb0" name="estados-simples" value="Acre"/>
    <x-dsi.select-gov.select-item id="rb1" name="estados-simples" value="Alagoas"/>
    <x-dsi.select-gov.select-item id="rb2" name="estados-simples" value="Amapá"/>
</x-dsi.select>

Switcher

<x-dsi.switcher id="habilitado" name="habilitado" label="Habilitado" labelPosition='right' :checked=true />

Tab

@php
    $items = [
        ['title' => 'ITEM', 'content' => 'Painel Item'],
        ['title' => 'TODOS', 'content' => 'Painel Todos'],
        ['title' => 'CATEGORIAS', 'content' => 'Painel Categorias'],
    ];
@endphp
<x-dsi.tab :items="$items" />

Table

@php
    $canCollapse = false;
    $canSelect = false;    
    $canSearch = false;
    $canPaginate = false;
    $id = '9999';
    $title = 'Produtos';
@endphp

<x-dsi.table :id=$id :title=$title 
    :canCollapse=$canCollapse 
    :canSelect=$canSelect 
    :canSearch=$canSearch 
    :canPaginate=$canPaginate
>
    
    <x-slot name="header">
        <x-dsi.table.header-col title="Título coluna 1">
            Título coluna 1
        </x-dsi.table.header-col>
        <x-dsi.table.header-col title="Título coluna 2">
            Título coluna 2
        </x-dsi.table.header-col>
        <x-dsi.table.header-col title="Título coluna 3">
            Título coluna 3
        </x-dsi.table.header-col>
    </x-slot>
    
    <x-slot name="body">
        <!-- Linha 1 -->
        <x-dsi.table.body-row :canCollapse=$canCollapse :canSelect=$canSelect :id=$id :rowNumber="1">
            <x-dsi.table.body-col-data title="Título coluna 1">
                Linha 1 coluna 1
            </x-dsi.table.body-col-data>
            <x-dsi.table.body-col-data title="Título coluna 2">
                Linha 1 coluna 2
            </x-dsi.table.body-col-data>
            <x-dsi.table.body-col-data title="Título coluna 3">
                Linha 1 coluna 3
            </x-dsi.table.body-col-data>
        </x-dsi.table.body-row>        
    </x-slot>    
    
</x-dsi.table>

Tag - Count

<x-dsi.tag.count title="100 mensagens não lidas" message="100" />

Tag - Icon

<x-dsi.tag.icon bgColor="bg-success" iconTitle="Ícone de carro">
    <i class="fas fa-car" aria-hidden="true"></i>
</x-dsi.tag.icon>

Tag - Status

<x-dsi.tag.status bgColor="bg-warning" title="Disponibilidade" message="Estoque baixo" />

Tag - Text

<x-dsi.tag.icon bgColor="bg-success" iconTitle="Ícone de carro">
    <i class="fas fa-car" aria-hidden="true"></i>
</x-dsi.tag.icon>

TextArea

<x-dsi.text-area
    id="descricao"
    name="descricao"
    label="Rótulo"
    value="Longo Texto"
    placeholder="Exemplo de texto longo ..."
    helpText="Texto de ajuda para o campo de texto longo."
/>

Log de Alterações

Acesse o Log de Alterações do projeto.

Guia de Contribuição

Acesse o Guia de Contribuição para instruções sobre como adicionar um novo componente.

Licença

Acesse a Licença de uso do pacote.

Referências

• https://www.csrhymes.com/2021/06/16/testing-blade-components.html
• Testbench
• Design System do Governo Federal Brasileiro

Exemplos de implementação de componentes blade

• Laravel Blade components collection
• Laravel Components Library

Exemplos de implementação de componentes livewire

• Laravel Livewire Modals