manuelcillero/pagetop
manuelcillero/pagetop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🚧 (theme): Renombra variantes de Intent

Browse source 
Renombra `Intent::Secondary`/`Danger` a `Neutral`/`Severe` y actualiza
Badge y su CSS por defecto (basic.css) al nuevo vocabulario.

Introduce el punto de extensión `Theme::intent_color()`, que traduce una
`Intent` al nombre de color de la paleta propia de cada tema, con
`Intent::color(cx)` como atajo de uso desde los componentes.
This commit is contained in:
Manuel Cillero 2026-08-28 01:10:45 +02:00
parent af53cd4b52
commit 56a6691c87
6 changed files with 116 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/base/component/badge.rs
View file

@ -6,10 +6,10 @@ use crate::prelude::*;
///
/// ```rust,no_run
/// # use pagetop::prelude::*;
/// let badge = Badge::labeled(Lc::n("Admin")).with_intent(Intent::Danger);
/// let badge = Badge::labeled(Lc::n("Admin")).with_intent(Intent::Severe);
///
/// // Equivalente usando el constructor directo del tipo.
/// let badge = Badge::danger(Lc::n("Admin"));
/// let badge = Badge::severe(Lc::n("Admin"));
/// ```
#[derive(AutoDefault, Clone, Debug, Getters)]
pub struct Badge {
@ -19,7 +19,7 @@ pub struct Badge {
label: Lc,
/// Devuelve la intención semántica del badge.
#[getters(copy)]
#[default(Intent::Secondary)]
#[default(Intent::Neutral)]
intent: Intent,
}
@ -33,10 +33,10 @@ impl Component for Badge {
self.props.get_id()
}
fn setup(&mut self, _cx: &Context) {
fn setup(&mut self, cx: &Context) {
self.alter_prop(PropsOp::prepend_classes(util::join!(
"badge badge-",
self.intent().as_str()
self.intent().color(cx)
)));
}
@ -67,11 +67,11 @@ impl Badge {
}
}
/// Crea un badge de tipo *secondary* con la etiqueta indicada.
pub fn secondary(label: Lc) -> Self {
/// Crea un badge de tipo *neutral* con la etiqueta indicada.
pub fn neutral(label: Lc) -> Self {
Self {
label,
intent: Intent::Secondary,
intent: Intent::Neutral,
..Default::default()
}
}
@ -103,11 +103,11 @@ impl Badge {
}
}
/// Crea un badge de tipo *danger* con la etiqueta indicada.
pub fn danger(label: Lc) -> Self {
/// Crea un badge de tipo *severe* con la etiqueta indicada.
pub fn severe(label: Lc) -> Self {
Self {
label,
intent: Intent::Danger,
intent: Intent::Severe,
..Default::default()
}
}

35
src/core/theme.rs
View file

@ -13,12 +13,14 @@
//!
//! # Temas hijo, herencia y componentes
//!
//! PageTop permite crear **temas hijo** que refinan el comportamiento de su tema padre. Un tema
//! hijo hereda automáticamente todos los métodos del padre y puede sobrescribirlos selectivamente.
//! Esta herencia sólo determina qué implementación de sus métodos se usa cuando el tema hijo no los
//! sobrescribe (como el renderizado del `<body>` y del `<head>`, los recursos incorporados, el uso
//! de [`Theme::handle_component()`], las páginas de error, etc.). Un tema hijo puede ser a su vez
//! padre de otro, basta declararlo cada vez con [`Theme::parent()`].
//! PageTop permite crear **temas hijo** que refinan el comportamiento de su tema padre,
//! identificado por [`Theme::parent()`]. Un tema hijo hereda automáticamente todos los métodos del
//! padre y puede sobrescribirlos selectivamente. Esta herencia determina qué implementación de sus
//! métodos se usa cuando el tema hijo no los sobrescribe (ya sea el renderizado del `<body>` o del
//! `<head>`, la definición de los recursos necesarios, la asignación de colores por intención vía
//! [`Theme::intent_color()`], la captura de componentes con [`Theme::handle_component()`], las
//! páginas de error, etc.). Un tema hijo puede ser a su vez padre de otro, basta declararlo cada
//! vez con [`Theme::parent()`].
//!
//! Como `parent()` se resuelve en tiempo de ejecución, PageTop no puede descartar en compilación
//! referencias circulares (un tema acaba siendo padre de sí mismo, directa o transitivamente). Ese
@ -48,8 +50,8 @@
//! devuelva `Some(&Self)`. Basta con un `impl Theme for MyTheme {}` vacío, ya que todos los
//! métodos de [`Theme`] tienen implementación por defecto.
//!
//! Un tema puede personalizarse en tres pasos, cada uno necesario sólo si lo que ofrece PageTop por
//! defecto no basta:
//! Un tema puede personalizarse en cinco pasos, cada uno necesario sólo si lo que ofrece PageTop
//! por defecto no basta:
//!
//! 1. **Definir regiones nuevas**. Por defecto, PageTop define [`CoreRegions`] (`Header`, `Aside`,
//! `Content`, `Footer`) como regiones de plantilla siempre disponibles, y [`ReservedRegions`]
@ -75,6 +77,21 @@
//! ejemplo, [`CoreTemplates`] o el propio *enum* del tema). `pagetop-bootsier` hace exactamente
//! esto para maquetar `Standard` y `Admin` de forma distinta, sin necesitar sus propias
//! variantes de plantilla.
//! 4. **Traducir [`Intent`] a la paleta de colores propia del tema** sobrescribiendo
//! [`Theme::intent_color()`]. Por defecto, este método devuelve el vocabulario semántico de
//! [`Intent`] (`"primary"`, `"severe"`, etc.); un tema con su propio catálogo de colores (por
//! ejemplo, uno basado en Bootstrap) debe traducir cada variante al nombre que le corresponda en
//! su paleta. Los componentes que generan clases CSS a partir de una [`Intent`] (`Button`,
//! `Badge`, `Dropdown`, etc.) consultan este método a través de [`Intent::color()`], así que la
//! clase resultante ya nace en la paleta del tema activo.
//! 5. **Reexportar, extender o añadir componentes**. Un tema puede reexportar tal cual los
//! componentes propios de PageTop que no requieran adaptación, extenderlos con un trait propio
//! para añadir métodos exclusivos (guardando su estado en valores extra con
//! [`PropsOp::set_extra()`](crate::html::PropsOp::set_extra) para consumirlos en el
//! `setup()`/`render()` vía [`Theme::handle_component()`]), o aportar componentes propios.
//! `pagetop-bootsier` combina las tres estrategias: reexporta `Form`/`Fieldset` sin cambios,
//! extiende `Button`/`Badge`/`Dropdown`/`Nav`/`Navbar` con sus propios traits (`ButtonBootsier`,
//! `BadgeBootsier`, etc.), y añade componentes propios como `Offcanvas`.
//!
//! Para forzar una plantilla completamente distinta en una página concreta, se puede llamar
//! manualmente a [`with_template()`](crate::core::component::Contextual::with_template).
@ -86,7 +103,7 @@
//! plantilla distinta.
//!
//! El resto del comportamiento de un tema (por ejemplo, el renderizado del `<head>`) se sobrescribe
//! de forma independiente de estos tres pasos y no es necesario para tener un tema funcional.
//! de forma independiente de estos pasos y no es necesario para tener un tema funcional.
//!
//! # Componentes que se procesan en todas las páginas
//!

30
src/core/theme/definition.rs
View file

@ -3,7 +3,7 @@ use crate::base::component::{Html, Intro, IntroOpening, layout};
use crate::core::component::{ChildOp, Component, ComponentError, ComponentRender};
use crate::core::component::{Context, Contextual};
use crate::core::extension::Extension;
use crate::core::theme::CoreRegions;
use crate::core::theme::{CoreRegions, Intent};
use crate::global;
use crate::html::{Markup, html};
use crate::locale::Lc;
@ -65,6 +65,34 @@ pub trait Theme: Extension + Send + Sync {
None
}
/// Traduce una [`Intent`] al nombre de color de la paleta propia del tema.
///
/// `Intent` no define ninguna cadena propia. Cada tema decide qué nombre le corresponde a cada
/// variante en su paleta (p. ej. un tema basado en Bootstrap traduce `Severe` a `"danger"`).
/// Los componentes que generan clases CSS a partir de una `Intent` (`Button`, `Badge`,
/// `Dropdown`, etc.) no llaman a este método directamente en su `setup()`, usan mejor
/// [`Intent::color()`](crate::core::theme::Intent::color) como la forma más sencilla de obtener
/// este mismo valor a través de [`Context::theme()`](crate::core::component::Context::theme),
/// para que la clase resultante ya nazca en la paleta del tema activo.
///
/// La implementación por defecto devuelve el vocabulario semántico propio de PageTop
/// (`"primary"`, `"severe"`, etc.), que actúa como paleta base cuando ningún tema la
/// sobrescribe.
#[rustfmt::skip]
fn intent_color(&self, intent: Intent) -> &'static str {
if let Some(parent) = self.parent() {
return parent.intent_color(intent);
}
match intent {
Intent::Primary => "primary",
Intent::Neutral => "neutral",
Intent::Info => "info",
Intent::Success => "success",
Intent::Warning => "warning",
Intent::Severe => "severe",
}
}
/// Acciones específicas del tema antes de renderizar el `<body>` de la página.
///
/// Es un buen lugar para inicializar o ajustar recursos en función del contexto de la página,

42
src/core/theme/intent.rs
View file

@ -1,31 +1,41 @@
use crate::AutoDefault;
use crate::core::component::{Context, Contextual};
/// Intención semántica de un componente visual.
///
/// Representa la intención que pretende comunicar un componente (énfasis principal, confirmación de
/// un evento exitoso, aviso, peligro, etc.). Cada tema decidirá cómo pintarlo.
/// Describe *qué comunica* un componente, y cada tema traduce la intención a su propia paleta de
/// colores. Define un vocabulario con variantes por énfasis (`Primary`, `Neutral`), un canal
/// informativo (`Info`) y una escala de severidad (`Success`, `Warning`, `Severe`).
#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)]
pub enum Intent {
/// Énfasis principal, suele ser la acción que más destaca a la vista.
#[default]
Primary,
Secondary,
Success,
/// Presencia sin énfasis, una opción discreta o normal.
Neutral,
/// Informa de algo que merece leerse, ajeno a la escala de severidad. Encaja en notas o avisos
/// informativos.
Info,
/// Destaca algo que ha ido bien, un estado favorable o un camino afirmativo. En una alerta
/// podría indicar la confirmación de una operación correcta o un estado saludable; en un botón,
/// la acción que confirma o aprueba algo positivamente.
Success,
/// Precaución, representa algo que requiere atención o cuidado. En una alerta, sería un
/// problema no bloqueante o un aviso; en un botón, una acción que conviene meditar sin llegar a
/// ser destructiva.
Warning,
Danger,
/// Algo va mal, es peligroso o destructivo. En una alerta sería un error o un fallo bloqueante;
/// en un botón, la acción destructiva o irreversible (p. ej. eliminar).
Severe,
}
impl Intent {
/// Devuelve el nombre de la intención (`"primary"`, `"danger"`, etc.).
#[rustfmt::skip]
pub const fn as_str(&self) -> &'static str {
match self {
Self::Primary => "primary",
Self::Secondary => "secondary",
Self::Success => "success",
Self::Info => "info",
Self::Warning => "warning",
Self::Danger => "danger",
}
/// Devuelve el nombre del color asociado a la intención en el tema activo del contexto actual.
///
/// Atajo de [`Theme::intent_color()`](crate::core::theme::Theme::intent_color) a través de
/// [`Context::theme()`]. La intención no tiene una cadena propia, es el tema activo quien
/// decide su traducción.
pub fn color(&self, cx: &Context) -> &'static str {
cx.theme().intent_color(*self)
}
}