PHPackages                             sistemas-eel/portal-ui - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. sistemas-eel/portal-ui

ActiveLibrary[Templating & Views](/categories/templating)

sistemas-eel/portal-ui
======================

Biblioteca de UI Blade-first reutilizável para sistemas Laravel.

v0.1.0(yesterday)01↑2900%MITBladePHP ^7.4|^8.0|^8.1|^8.2|^8.3|^8.4

Since Jun 18Pushed yesterdayCompare

[ Source](https://github.com/sistemas-eel/portal-ui)[ Packagist](https://packagist.org/packages/sistemas-eel/portal-ui)[ RSS](/packages/sistemas-eel-portal-ui/feed)WikiDiscussions main Synced today

READMEChangelogDependencies (4)Versions (2)Used By (0)

PortalUi
========

[](#portalui)

Biblioteca de UI Laravel reutilizável para sistemas administrativos. O pacote é `Blade-first`: entrega layouts, componentes, configuração e assets compilados sem exigir Livewire, Alpine, Tailwind ou Vite no app consumidor.

Versão inicial: `v0.1.0`.

Requisitos
----------

[](#requisitos)

```
{
  "php": "^7.4|^8.0|^8.1|^8.2|^8.3|^8.4",
  "illuminate/support": "^8.0|^9.0|^10.0|^11.0|^12.0|^13.0",
  "illuminate/view": "^8.0|^9.0|^10.0|^11.0|^12.0|^13.0"
}
```

Instalação
----------

[](#instalação)

Instale o pacote no app consumidor com Composer:

```
composer require sistemas-eel/portal-ui
```

Depois execute:

```
php artisan package:discover
```

Se quiser fixar uma faixa de versão, use algo como `sistemas-eel/portal-ui:^0.1`.

Publicação
----------

[](#publicação)

```
php artisan vendor:publish --tag=portal-ui-config
php artisan vendor:publish --tag=portal-ui-assets
php artisan vendor:publish --tag=portal-ui-stubs
```

Views tematizadas para `uspdev/senhaunica-socialite` podem ser publicadas separadamente quando o app consumidor precisar customizar algum ponto:

```
php artisan vendor:publish --tag=portal-ui-senhaunica-views
```

Publique `views` apenas quando precisar sobrescrever Blade no app consumidor:

```
php artisan vendor:publish --tag=portal-ui-views
```

Regra prática:

- `assets`: necessários para carregar o CSS/JS compilado do tema.
- `config`: útil para ajustar marca, cores, rotas, navegação e mensagens.
- `stubs`: modelos opcionais de navegação e rotas de demo.
- `portal-ui-senhaunica-views`: opcional; copia apenas os overrides tematizados da SenhaUnica.
- `views`: use somente para customizações locais de layout, partials ou componentes.

Evite publicar `views` sem necessidade. Quando elas existem em `resources/views/vendor/portal-ui`, o Laravel usa a cópia local e deixa de acompanhar automaticamente as views do pacote.

Uso Rápido
----------

[](#uso-rápido)

Layout autenticado:

```
@extends('portal-ui::layouts.app')

@section('title', 'Painel')

@section('content')

            Indicadores

        Conteúdo principal da página.

@endsection
```

Layout visitante:

```
@extends('portal-ui::layouts.guest')

@section('title', 'Entrar')

@section('content')

    Entrar
@endsection
```

Também existem componentes de layout baseados em classe:

```

        Conteúdo principal.

```

Configuração
------------

[](#configuração)

O arquivo publicado é:

```
config/portal-ui.php

```

Principais seções:

- `brand`: nome, subtítulo, logo e favicon.
- `colors`: tokens visuais principais.
- `layout`: comportamento geral do layout.
- `assets`: carregamento de CSS/JS.
- `navigation`: grupos e itens da sidebar.
- `routes`: nomes de rotas comuns, como `login`, `logout` e `home`.
- `integrations`: integrações opcionais com outros pacotes, como `uspdev/senhaunica-socialite`.
- `flash`: chaves de sessão usadas por mensagens.

Integração SenhaUnica
---------------------

[](#integração-senhaunica)

Quando `portal-ui.integrations.senhaunica.enabled` está ativo, o pacote registra views tematizadas no namespace `senhaunica`.

A ordem de resolução fica:

1. `resources/views/vendor/senhaunica` do sistema consumidor.
2. `resources/views/integrations/senhaunica` do `portal-ui`.
3. Views originais registradas por `uspdev/senhaunica-socialite`.

Isso permite que os sistemas usem a lista de usuários, permissões, LoginAs, modais e login local da SenhaUnica já adaptados ao tema, sem copiar todas as views para cada aplicação.

Para desabilitar:

```
PORTAL_UI_SENHAUNICA_VIEWS=false
```

Navegação
---------

[](#navegação)

A sidebar é montada por `config('portal-ui.navigation.groups')`. Se não houver item visível, a sidebar e o botão de menu não são renderizados.

Exemplo mínimo:

```
'navigation' => [
    'hide_missing_routes' => true,
    'groups' => [
        'main' => [
            'label' => 'Menu Principal',
            'items' => [
                [
                    'label' => 'Início',
                    'route' => 'home',
                    'icon' => 'fa-home',
                    'active' => 'home',
                ],
            ],
        ],
    ],
],
```

Itens podem usar `route`, `url`, `icon`, `active`, `can`, `guest`, `children`, `external`, `target` e `rel`. Quando `url` for absoluta (`http`/`https`) ou `external` for `true`, o item abre em nova aba com `rel="noopener noreferrer"` por padrão.

Submenus usam `children` e o item pai fica visível quando tiver pelo menos um filho visível:

```
[
    'label' => 'Cadastros',
    'icon' => 'fa-folder',
    'active' => 'cadastros.*',
    'children' => [
        [
            'label' => 'Unidades',
            'route' => 'unidades.index',
            'active' => 'unidades.*',
        ],
        [
            'label' => 'Manual',
            'url' => 'https://example.org/manual',
            'external' => true,
        ],
    ],
]
```

Menus mais completos estão em [docs/examples.md](docs/examples.md).

Componentes
-----------

[](#componentes)

Componentes disponíveis com prefixo `x-portal::`:

- `alert`
- `badge`
- `button`
- `card`
- `confirm-modal`
- `empty-state`
- `flash-messages`
- `input`
- `modal`
- `page-header`
- `resource-actions`
- `section-footer`
- `section-header`
- `select`
- `flash-alert`
- `sidebar-item`
- `switch`
- `table-actions`
- `table`
- `textarea`

Exemplo:

```

    Operação realizada.

    Salvar

            Nome

            Exemplo

    Adicionar item

```

Assets
------

[](#assets)

O pacote distribui:

- `public/portal-ui.css`
- `public/portal-ui.js`

O app consumidor deve publicar esses assets para `public/vendor/portal-ui`:

```
php artisan vendor:publish --tag=portal-ui-assets
```

Ao alterar CSS ou JavaScript do pacote, gere novamente os arquivos distribuíveis:

```
npm install
npm run build
```

Extensão de CSS e JS
--------------------

[](#extensão-de-css-e-js)

Os layouts expõem stacks para CSS, metas e scripts customizados:

- `portal-ui-head`: conteúdo extra no ``.
- `portal-ui-before-scripts`: scripts antes do `portal-ui.js`.
- `portal-ui-after-scripts`: scripts depois do `portal-ui.js`.

Exemplo:

```
@push('portal-ui-head')

        .painel-kpi {
            border-color: var(--portal-ui-primary);
        }

@endpush

@push('portal-ui-after-scripts')

        console.log('JS extra da tela');

@endpush
```

Livewire
--------

[](#livewire)

Livewire não é dependência obrigatória. O pacote não registra componentes Livewire nem inclui `@livewireStyles` ou `@livewireScripts` no layout.

Apps consumidores que usam Livewire continuam responsáveis por carregar seus próprios assets.

Os componentes de formulário aceitam atributos `wire:*` normalmente, então o mesmo componente pode ser usado tanto com Blade tradicional quanto com Livewire:

```

    Salvar

```

O modal também aceita `wire:model` de forma opcional. Quando esse atributo está presente, o pacote renderiza apenas atributos Alpine compatíveis com o `$wire.entangle(...)` do próprio Livewire, sem usar a diretiva Blade `@entangle`. Em aplicações sem Livewire, basta continuar usando o modal com a prop `show`.

Exemplo mínimo com Livewire:

```