Componentes

Este é um modelo de projeto Laravel criado pela Divisão de Sistemas Institucionais (DSI) da UFVJM, a fim de facilitar o desenvolvimento de novos projetos sem necessidade de configurações iniciais. O projeto conta com um sistema de autenticação, um layout básico e alguns componentes prontos para uso, bem como, facilitadores ao consumo da API da UFVJM.

Componente

AvatarDropdown

Componente de avatar com menu dropdown, usado para exibir um avatar com opções de usuário.

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

AvatarIcon

Componente de avatar com ícone, usado para exibir um ícone representativo de um usuário ou entidade.

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

AvatarLetter

Componente de avatar com letra, usado para exibir uma letra representativa de um usuário ou entidade.

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

AvatarPhoto

Componente de avatar com foto, usado para exibir uma imagem representativa de um usuário ou entidade.

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

Breadcrumb

Componente de navegação que exibe o caminho atual dentro da hierarquia do site.

        $crumbs = [
  '/menu-anterior' => 'Menu Anterior',
  '#' => 'Atual',
];<x-dsi.breadcrumb :crumbs="$crumbs" homeUrl="/inicio"></x-dsi.breadcrumb>

Button

Componente de botão que pode ser usado para ações como enviar formulários ou navegar.

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

ButtonSecondary

Componente de botão secundário, usado para ações menos importantes ou alternativas.

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

ButtonTertiary

Componente de botão terciário, usado para ações menos importantes ou alternativas.

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

ButtonCircle

Componente de botão circular, ideal para ações rápidas e destacadas.

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

ButtonCircleSecondary

Componente de botão circular secundário, usado para ações menos importantes ou alternativas.

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

ButtonCircleTertiary

Componente de botão circular terciário, usado para ações menos importantes ou alternativas.

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

ButtonLink

Componente de botão que funciona como um link, ideal para navegação.

Voltar

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

Card

Componente de cartão que exibe informações de forma organizada e visualmente agradável.

Título

Conteúdo

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

CardImage

Componente de cartão com imagem, ideal para exibir conteúdo visualmente atraente.

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

Divider

Componente de divisor que separa visualmente seções de conteúdo.

        <x-dsi.divider />

Input

Componente de entrada de texto, ideal para formulários e coleta de dados.

Nome

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

InputFile

Componente de entrada de arquivo, ideal para upload de documentos e imagens.

Envio de arquivo

        <x-dsi.input-file name="arquivo" id="arquivo" label="Envio de arquivo"
    message="Os arquivos devem ser no formato PNG ou JPG e ter no máximo 100MB." />

InputPassword

Componente de entrada de senha, ideal para formulários que requerem autenticação.

Senha

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

Loading.Percentage

Componente de carregamento que exibe uma porcentagem, ideal para indicar progresso.

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

Loading.Spinner

Componente de carregamento que exibe um spinner, ideal para indicar que uma ação está em progresso.

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

Message.Danger

Componente de mensagem de perigo, usado para alertar sobre erros ou problemas.

Título Mensagem de Perigo

        <x-dsi.message.danger title="Título" message="Mensagem de Perigo" />

Message.Info

Componente de mensagem informativa, usado para fornecer informações adicionais.

Informação Mensagem Informativa

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

Message.Success

Componente de mensagem de sucesso, usado para indicar ações bem-sucedidas.

Sucesso Mensagem de Sucesso

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

Message.Warning

Componente de mensagem de aviso, usado para alertar sobre possíveis problemas.

Aviso Mensagem de Aviso

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

Message.Context.Danger

Componente de mensagem de contexto de perigo, usado para alertar sobre erros ou problemas.

Mensagem de Perigo

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

Message.Context.Info

Componente de mensagem de contexto informativo, usado para fornecer informações adicionais.

Mensagem Informativa

        <x-dsi.message.context.info message="Mensagem Informativa" />

Message.Context.Success

Componente de mensagem de contexto de sucesso, usado para indicar ações bem-sucedidas.

Mensagem de Sucesso

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

Message.Context.Warning

Componente de mensagem de contexto de aviso, usado para alertar sobre possíveis problemas.

Mensagem de Aviso

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

Radio.Vertical

Componente de botão de opção vertical, usado para selecionar uma única opção entre várias.

Fruta

Selecione uma fruta.

Maçã

Banana

Laranja

        <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

Componente de seleção, usado para escolher uma opção de uma lista suspensa.

Estado

Preenchimento obritagório

        $options = [
    'AC' => 'Acre',
    'AL' => 'Alagoas',
    'AP' => 'Amapá',
    'AM' => 'Amazonas',
];<x-dsi.select
    id="estado"
    name="estado"
    label="Estado"
    selectMessage="Selecione um estado"
    errorMessage="Preenchimento obritagório"
    :options=$options
/>

Switcher

Componente de seletor, usado para alternar entre dois estados (ligado/desligado).

Habilitado

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

Table

Componente de tabela, usado para exibir dados em formato tabular.

        $id = '9999';
$title = 'Produtos';<x-dsi.table :id=$id :title=$title>

    <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>
        <!-- Linha 2 -->
        <x-dsi.table.body-row :canCollapse=$canCollapse :canSelect=$canSelect :id=$id :rowNumber="2">
            <x-dsi.table.body-col-data title="Título coluna 1">
                Linha 2 coluna 1
            </x-dsi.table.body-col-data>
            <x-dsi.table.body-col-data title="Título coluna 2">
                Linha 2 coluna 2
            </x-dsi.table.body-col-data>
            <x-dsi.table.body-col-data title="Título coluna 3">
                Linha 2 coluna 3
            </x-dsi.table.body-col-data>
        </x-dsi.table.body-row>
    </x-slot>

</x-dsi.table>

Tab

Componente de aba, usado para organizar conteúdo em seções distintas.

Painel Item

Painel Todos

Painel Categorias

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

Tag.Count

Componente de tag que exibe uma contagem, ideal para categorizar ou marcar itens.

        <x-dsi.tag.count bgColor="bg-indigo-warm-vivid-50" title="100 mensagens não lidas" message="100" />

Tag.Icon

Componente de tag que exibe um ícone, ideal para destacar informações importantes.

        <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

Componente de tag que exibe um status, ideal para indicar o estado de um item ou ação.

Estoque baixo

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

Tag.Text

Componente de tag que exibe um texto, ideal para categorizar ou marcar itens com informações textuais.

Viagem de carro

        <x-dsi.tag.text bgColor="bg-info" message="Viagem de carro">
    <i class="fas fa-car" aria-hidden="true"></i>
</x-dsi.tag.text>

TextArea

Componente de área de texto, usado para entrada de texto longo ou múltiplas linhas.

Rótulo

Texto de ajuda para o campo de texto longo.

        <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."
/>