Biblioteca de componentes SunUI

O SunUI é a biblioteca de componentes de UI desenvolvida internamente pelo Doggy, implementada com macros Twig, fornecendo mais de 25 componentes.

Visão geral

O SunUI não depende de frameworks de UI de terceiros como o Bootstrap; os templates de componentes localizam-se em templates/ui/:

templates/ui/
├── elements.html.twig          # Apresentação de elementos
├── table.html.twig             # Componente de tabela
├── buttons/
│   ├── button.html.twig        # Botão
│   ├── button_group.html.twig  # Grupo de botões
│   └── icon_button.html.twig   # Botão de ícone
├── drawer/
│   ├── drawer.html.twig        # Gaveta
│   ├── addField.html.twig
│   └── confirmButton.html.twig
├── form/
│   └── singleField.html.twig   # Formulário de campo único
├── template/
│   ├── icons.html.twig         # Template de ícones
│   └── ui.html.twig            # Template de UI
└── example/
    └── button.html.twig        # Exemplo de botão

Existem também componentes comuns:

templates/components/
├── breadcrumb.html.twig    # Breadcrumb
├── datagrid.html.twig      # Tabela de dados
└── tree.html.twig          # Componente de árvore

Componentes centrais

Apresentação de dados

Componente	Template	Descrição
DataGrid	components/datagrid.html.twig	Tabela de dados avançada
Tree	components/tree.html.twig	Estrutura de árvore
Table	ui/table.html.twig	Tabela básica

Formulários

Componente	Descrição do template	Tipo
Input	Entrada de texto	ver template de teste test/input.html.twig
Select	Seleção em lista pendente (suporta pesquisa, seleção múltipla)	test/select.html.twig
DatePicker	Seletor de datas	test/date.html.twig
Switch	Interruptor	test/switch.html.twig
Checkbox	Caixa de verificação	test/checkbox.html.twig
Upload	Upload de ficheiros	test/file.html.twig
Radio	Seleção única	test/radio.html.twig

Feedback

Componente	Template	Descrição
Modal	test/modal.html.twig	Caixa de diálogo modal
Drawer	ui/drawer/drawer.html.twig	Gaveta
Toast	test/alert.html.twig	Aviso de mensagem

Navegação

Componente	Descrição
Tabs	Separadores (test/tabs.html.twig)
Breadcrumb	Breadcrumb (components/breadcrumb.html.twig)
Menu	Menu (admin/dynamic/menu.html.twig)

Tema de formulários

A renderização de formulários baseia-se em temas Twig personalizados:

templates/form/
├── ef_ui_form_theme.html.twig              # Tema de formulário predefinido
└── ef_ui_form_theme_department.html.twig   # Tema do seletor de departamentos

Páginas de teste

Exemplos completos e páginas de teste dos componentes localizam-se em templates/test/ (mais de 45 templates de teste), cobrindo:

• Todos os tipos de campos de formulário (input, select, date, file, color, password, money, percent, etc.)
• Componentes de layout (grid, table, tabs, drawer, modal)
• Componentes de negócio (exemplos de employee, department, company)
• Testes funcionais (form_dates_check, choice_fields, etc.)