SunUI Component Library

SunUI is Doggy's custom frontend UI component library, implemented via Twig macros with 25+ components.

Overview

SunUI has no dependency on Bootstrap or other UI frameworks. Component templates live in templates/ui/:

templates/ui/
├── elements.html.twig          # Element showcase
├── table.html.twig             # Table component
├── buttons/
│   ├── button.html.twig        # Button
│   ├── button_group.html.twig  # Button group
│   └── icon_button.html.twig   # Icon button
├── drawer/
│   ├── drawer.html.twig        # Drawer
│   ├── addField.html.twig
│   └── confirmButton.html.twig
├── form/
│   └── singleField.html.twig   # Single field form
├── template/
│   ├── icons.html.twig         # Icon templates
│   └── ui.html.twig            # UI templates
└── example/
    └── button.html.twig        # Button examples

Shared components:

templates/components/
├── breadcrumb.html.twig    # Breadcrumb
├── datagrid.html.twig      # Data table
└── tree.html.twig          # Tree component

Core Components

Data Display

Component	Template	Description
DataGrid	components/datagrid.html.twig	Advanced data table
Tree	components/tree.html.twig	Tree structure
Table	ui/table.html.twig	Basic table

Forms

Component	Test Template	Type
Input	test/input.html.twig	Text input
Select	test/select.html.twig	Dropdown (searchable, multi-select)
DatePicker	test/date.html.twig	Date picker
Switch	test/switch.html.twig	Toggle switch
Checkbox	test/checkbox.html.twig	Checkbox
Upload	test/file.html.twig	File upload
Radio	test/radio.html.twig	Radio buttons

Feedback

Component	Template	Description
Modal	test/modal.html.twig	Modal dialog
Drawer	ui/drawer/drawer.html.twig	Slide-out drawer
Toast	test/alert.html.twig	Message toast

Navigation

Component	Description
Tabs	test/tabs.html.twig
Breadcrumb	components/breadcrumb.html.twig
Menu	admin/dynamic/menu.html.twig

Form Themes

Custom Twig form themes:

templates/form/
├── ef_ui_form_theme.html.twig              # Default form theme
└── ef_ui_form_theme_department.html.twig   # Department selector theme

Test Pages

Complete component examples and test pages in templates/test/ (45+ templates), covering:

• All form field types (input, select, date, file, color, password, money, percent, etc.)
• Layout components (grid, table, tabs, drawer, modal)
• Business components (employee, department, company examples)
• Functional tests (form dates, choice fields, etc.)