Librería de componentes SunUI

SunUI es la librería de componentes de interfaz de usuario desarrollada internamente por Doggy, implementada con macros de Twig y con más de 25 componentes.

Descripción general

SunUI no depende de frameworks de UI de terceros como Bootstrap; las plantillas de los componentes se encuentran en templates/ui/:

templates/ui/
├── elements.html.twig          # Presentación de elementos
├── table.html.twig             # Componente de tabla
├── buttons/
│   ├── button.html.twig        # Botón
│   ├── button_group.html.twig  # Grupo de botones
│   └── icon_button.html.twig   # Botón con icono
├── drawer/
│   ├── drawer.html.twig        # Panel lateral
│   ├── addField.html.twig
│   └── confirmButton.html.twig
├── form/
│   └── singleField.html.twig   # Formulario de un solo campo
├── template/
│   ├── icons.html.twig         # Plantilla de iconos
│   └── ui.html.twig            # Plantilla de UI
└── example/
    └── button.html.twig        # Ejemplo de botón

Además, hay componentes públicos:

templates/components/
├── breadcrumb.html.twig    # Migas de pan
├── datagrid.html.twig      # Tabla de datos
└── tree.html.twig          # Componente de árbol

Componentes principales

Presentación de datos

Componente	Plantilla	Descripción
DataGrid	components/datagrid.html.twig	Tabla de datos avanzada
Tree	components/tree.html.twig	Estructura en árbol
Table	ui/table.html.twig	Tabla básica

Formularios

Componente	Descripción de plantilla	Tipo
Input	Entrada de texto	Ver plantilla de prueba test/input.html.twig
Select	Selección desplegable (soporta búsqueda y selección múltiple)	test/select.html.twig
DatePicker	Selector de fecha	test/date.html.twig
Switch	Interruptor	test/switch.html.twig
Checkbox	Casilla de verificación	test/checkbox.html.twig
Upload	Subida de archivos	test/file.html.twig
Radio	Selección única	test/radio.html.twig

Retroalimentación

Componente	Plantilla	Descripción
Modal	test/modal.html.twig	Cuadro modal
Drawer	ui/drawer/drawer.html.twig	Panel lateral
Toast	test/alert.html.twig	Aviso de mensaje

Navegación

Componente	Descripción
Tabs	Pestañas (test/tabs.html.twig)
Breadcrumb	Migas de pan (components/breadcrumb.html.twig)
Menu	Menú (admin/dynamic/menu.html.twig)

Tema de formularios

El renderizado de formularios se basa en un tema Twig personalizado:

templates/form/
├── ef_ui_form_theme.html.twig              # Tema de formularios por defecto
└── ef_ui_form_theme_department.html.twig   # Tema del selector de departamentos

Páginas de prueba

Los ejemplos completos de componentes y las páginas de prueba se encuentran en templates/test/ (más de 45 plantillas de prueba), e incluyen:

• Todos los tipos de campos de formulario (input, select, date, file, color, password, money, percent, etc.)
• Componentes de diseño (grid, table, tabs, drawer, modal)
• Componentes de negocio (ejemplos de employee, department, company)
• Pruebas funcionales (form_dates_check, choice_fields, etc.)