From 623ef7e2c785cf9978193fcd37e03fa74ae7ded3 Mon Sep 17 00:00:00 2001 From: Manuel Cillero Date: Sat, 15 Nov 2025 13:16:15 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20[bootsier]=20Refactoriza?= =?UTF-8?q?=20la=20gesti=C3=B3n=20de=20clases?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Mejora la legibilidad del código. - Simplifica las alteraciones de clases en los componentes `Container`, `Dropdown`, `Image`, `Nav`, `Navbar` y `Offcanvas` usando métodos dedicados para generar clases en función de sus propiedades. - Mejora los enums añadiendo métodos que devuelven sus clases asociadas, reduciendo código repetitivo. - Elimina el trait `JoinClasses` y su implementación, integrando la lógica de unión de clases directamente en los componentes. --- extensions/pagetop-bootsier/src/theme/aux.rs | 5 +- .../pagetop-bootsier/src/theme/aux/border.rs | 114 +++---- .../src/theme/aux/breakpoint.rs | 145 +++++---- .../pagetop-bootsier/src/theme/aux/button.rs | 119 ++++++- .../pagetop-bootsier/src/theme/aux/color.rs | 305 ++++++++++++++---- .../pagetop-bootsier/src/theme/aux/layout.rs | 104 ++++++ .../pagetop-bootsier/src/theme/aux/rounded.rs | 119 +++++-- .../pagetop-bootsier/src/theme/classes.rs | 3 + .../src/theme/classes/border.rs | 178 +++++----- .../src/theme/classes/color.rs | 97 +++--- .../src/theme/classes/layout.rs | 205 ++++++++++++ .../src/theme/classes/rounded.rs | 60 ++-- .../src/theme/container/component.rs | 15 +- .../src/theme/container/props.rs | 38 ++- .../src/theme/dropdown/component.rs | 68 ++-- .../src/theme/dropdown/item.rs | 2 +- .../src/theme/dropdown/props.rs | 148 ++++++++- .../src/theme/image/component.rs | 31 +- .../pagetop-bootsier/src/theme/image/props.rs | 59 +++- .../src/theme/nav/component.rs | 28 +- .../pagetop-bootsier/src/theme/nav/item.rs | 51 ++- .../pagetop-bootsier/src/theme/nav/props.rs | 85 ++++- .../src/theme/navbar/component.rs | 22 +- .../pagetop-bootsier/src/theme/navbar/item.rs | 31 +- .../src/theme/navbar/props.rs | 36 ++- .../src/theme/offcanvas/component.rs | 25 +- .../src/theme/offcanvas/props.rs | 67 +++- src/base/component.rs | 12 +- src/html.rs | 3 - src/html/assets/stylesheet.rs | 6 +- src/html/join_classes.rs | 67 ---- src/html/logo.rs | 2 +- src/prelude.rs | 4 +- 33 files changed, 1607 insertions(+), 647 deletions(-) create mode 100644 extensions/pagetop-bootsier/src/theme/aux/layout.rs create mode 100644 extensions/pagetop-bootsier/src/theme/classes/layout.rs delete mode 100644 src/html/join_classes.rs diff --git a/extensions/pagetop-bootsier/src/theme/aux.rs b/extensions/pagetop-bootsier/src/theme/aux.rs index 528126d..99431fe 100644 --- a/extensions/pagetop-bootsier/src/theme/aux.rs +++ b/extensions/pagetop-bootsier/src/theme/aux.rs @@ -7,8 +7,11 @@ mod color; pub use color::{Color, Opacity}; pub use color::{ColorBg, ColorText}; +mod layout; +pub use layout::{ScaleSize, Side}; + mod border; -pub use border::{BorderColor, BorderSize}; +pub use border::BorderColor; mod rounded; pub use rounded::RoundedRadius; diff --git a/extensions/pagetop-bootsier/src/theme/aux/border.rs b/extensions/pagetop-bootsier/src/theme/aux/border.rs index 47547c3..4388276 100644 --- a/extensions/pagetop-bootsier/src/theme/aux/border.rs +++ b/extensions/pagetop-bootsier/src/theme/aux/border.rs @@ -2,12 +2,8 @@ use pagetop::prelude::*; use crate::theme::aux::Color; -use std::fmt; - -// **< BorderColor >******************************************************************************** - /// Colores `border-*` para los bordes ([`classes::Border`](crate::theme::classes::Border)). -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum BorderColor { /// No define ninguna clase. #[default] @@ -22,60 +18,70 @@ pub enum BorderColor { White, } -#[rustfmt::skip] -impl fmt::Display for BorderColor { - fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result { - match self { - Self::Default => Ok(()), - Self::Theme(c) => write!(f, "border-{c}"), - Self::Subtle(c) => write!(f, "border-{c}-subtle"), - Self::Black => f.write_str("border-black"), - Self::White => f.write_str("border-white"), - } - } -} +impl BorderColor { + const BORDER: &str = "border"; + const BORDER_PREFIX: &str = "border-"; -// **< BorderSize >********************************************************************************* - -/// Tamaño para el ancho de los bordes ([`classes::Border`](crate::theme::classes::Border)). -/// -/// Mapea a `border`, `border-0` y `border-{1..5}`: -/// -/// - `None` no añade ninguna clase. -/// - `Default` genera `border` (borde por defecto del tema). -/// - `Zero` genera `border-0` (sin borde). -/// - `Scale{1..5}` genera `border-{1..5}` (ancho creciente). -#[derive(AutoDefault)] -pub enum BorderSize { - #[default] - None, - Default, - Zero, - Scale1, - Scale2, - Scale3, - Scale4, - Scale5, -} - -impl BorderSize { + // Devuelve el sufijo de la clase `border-*`, o `None` si no define ninguna clase. #[rustfmt::skip] - pub(crate) fn to_class(&self, prefix: impl AsRef) -> String { + #[inline] + const fn suffix(self) -> Option<&'static str> { match self { - Self::None => String::new(), - Self::Default => String::from(prefix.as_ref()), - Self::Zero => join!(prefix, "-0"), - Self::Scale1 => join!(prefix, "-1"), - Self::Scale2 => join!(prefix, "-2"), - Self::Scale3 => join!(prefix, "-3"), - Self::Scale4 => join!(prefix, "-4"), - Self::Scale5 => join!(prefix, "-5"), + Self::Default => None, + Self::Theme(_) => Some(""), + Self::Subtle(_) => Some("-subtle"), + Self::Black => Some("-black"), + Self::White => Some("-white"), } } -} -impl fmt::Display for BorderSize { - fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result { - write!(f, "{}", self.to_class("border")) + // Añade la clase `border-*` a la cadena de clases. + #[inline] + pub(crate) fn push_class(self, classes: &mut String) { + if let Some(suffix) = self.suffix() { + if !classes.is_empty() { + classes.push(' '); + } + match self { + Self::Theme(c) | Self::Subtle(c) => { + classes.push_str(Self::BORDER_PREFIX); + classes.push_str(c.as_str()); + } + _ => classes.push_str(Self::BORDER), + } + classes.push_str(suffix); + } + } + + /// Devuelve la clase `border-*` correspondiente al color de borde. + /// + /// # Ejemplos + /// + /// ```rust + /// # use pagetop_bootsier::prelude::*; + /// assert_eq!(BorderColor::Theme(Color::Primary).to_class(), "border-primary"); + /// assert_eq!(BorderColor::Subtle(Color::Warning).to_class(), "border-warning-subtle"); + /// assert_eq!(BorderColor::Black.to_class(), "border-black"); + /// assert_eq!(BorderColor::Default.to_class(), ""); + /// ``` + #[inline] + pub fn to_class(self) -> String { + if let Some(suffix) = self.suffix() { + let base_len = match self { + Self::Theme(c) | Self::Subtle(c) => Self::BORDER_PREFIX.len() + c.as_str().len(), + _ => Self::BORDER.len(), + }; + let mut class = String::with_capacity(base_len + suffix.len()); + match self { + Self::Theme(c) | Self::Subtle(c) => { + class.push_str(Self::BORDER_PREFIX); + class.push_str(c.as_str()); + } + _ => class.push_str(Self::BORDER), + } + class.push_str(suffix); + return class; + } + String::new() } } diff --git a/extensions/pagetop-bootsier/src/theme/aux/breakpoint.rs b/extensions/pagetop-bootsier/src/theme/aux/breakpoint.rs index 27d7c29..4d9a762 100644 --- a/extensions/pagetop-bootsier/src/theme/aux/breakpoint.rs +++ b/extensions/pagetop-bootsier/src/theme/aux/breakpoint.rs @@ -1,9 +1,7 @@ use pagetop::prelude::*; -use std::fmt; - /// Define los puntos de ruptura (*breakpoints*) para aplicar diseño *responsive*. -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum BreakPoint { /// **Menos de 576px**. Dispositivos muy pequeños: teléfonos en modo vertical. #[default] @@ -21,71 +19,96 @@ pub enum BreakPoint { } impl BreakPoint { + // Devuelve la identificación del punto de ruptura. #[rustfmt::skip] #[inline] - const fn suffix(&self) -> Option<&'static str> { + pub(crate) const fn as_str(self) -> &'static str { match self { - Self::None => None, - Self::SM => Some("sm"), - Self::MD => Some("md"), - Self::LG => Some("lg"), - Self::XL => Some("xl"), - Self::XXL => Some("xxl"), + Self::None => "", + Self::SM => "sm", + Self::MD => "md", + Self::LG => "lg", + Self::XL => "xl", + Self::XXL => "xxl", } } - /// Genera un nombre de clase CSS basado en el punto de ruptura. - /// - /// Si es un punto de ruptura efectivo concatena el prefijo, un guion (`-`) y el sufijo - /// asociado. Para `None` devuelve sólo el prefijo. - /// - /// # Ejemplo - /// - /// ```rust - /// # use pagetop_bootsier::prelude::*; - /// let breakpoint = BreakPoint::MD; - /// assert_eq!(breakpoint.to_class("col"), "col-md"); - /// - /// let breakpoint = BreakPoint::None; - /// assert_eq!(breakpoint.to_class("offcanvas"), "offcanvas"); - /// ``` + // Añade el punto de ruptura con un prefijo y un sufijo (opcional) separados por un guion `-` a + // la cadena de clases. + // + // - Para `None` - `prefix` o `prefix-suffix` (si `suffix` no está vacío). + // - Para `SM..XXL` - `prefix-{breakpoint}` o `prefix-{breakpoint}-{suffix}`. #[inline] - pub fn to_class(&self, prefix: impl AsRef) -> String { - join_pair!(prefix, "-", self.suffix().unwrap_or_default()) - } - - /// Intenta generar un nombre de clase CSS basado en el punto de ruptura. - /// - /// Si es un punto de ruptura efectivo devuelve `Some(String)` concatenando el prefijo, un guion - /// (`-`) y el sufijo asociado. En otro caso devuelve `None`. - /// - /// # Ejemplo - /// - /// ```rust - /// # use pagetop_bootsier::prelude::*; - /// let breakpoint = BreakPoint::MD; - /// let class = breakpoint.try_class("col"); - /// assert_eq!(class, Some("col-md".to_string())); - /// - /// let breakpoint = BreakPoint::None; - /// let class = breakpoint.try_class("navbar-expand"); - /// assert_eq!(class, None); - /// ``` - #[inline] - pub fn try_class(&self, prefix: impl AsRef) -> Option { - self.suffix().map(|suffix| join_pair!(prefix, "-", suffix)) - } -} - -impl fmt::Display for BreakPoint { - /// Implementa [`Display`](std::fmt::Display) para asociar `"sm"`, `"md"`, `"lg"`, `"xl"` o - /// `"xxl"` a los puntos de ruptura `BreakPoint::SM`, `MD`, `LG`, `XL` o `XXL`, respectivamente. - /// Y `""` (cadena vacía) a `BreakPoint::None`. - fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result { - if let Some(suffix) = self.suffix() { - f.write_str(suffix) - } else { - Ok(()) + pub(crate) fn push_class(self, classes: &mut String, prefix: &str, suffix: &str) { + if prefix.is_empty() { + return; + } + if !classes.is_empty() { + classes.push(' '); + } + match self { + Self::None => classes.push_str(prefix), + _ => { + classes.push_str(prefix); + classes.push('-'); + classes.push_str(self.as_str()); + } + } + if !suffix.is_empty() { + classes.push('-'); + classes.push_str(suffix); } } + + // Devuelve la clase para el punto de ruptura, con un prefijo y un sufijo opcional, separados + // por un guion `-`. + // + // - Para `None` - `prefix` o `prefix-suffix` (si `suffix` no está vacío). + // - Para `SM..XXL` - `prefix-{breakpoint}` o `prefix-{breakpoint}-{suffix}`. + // - Si `prefix` está vacío devuelve `""`. + // + // # Ejemplos + // + // ```rust + // # use pagetop_bootsier::prelude::*; + // let bp = BreakPoint::MD; + // assert_eq!(bp.class_with("col", ""), "col-md"); + // assert_eq!(bp.class_with("col", "6"), "col-md-6"); + // + // let bp = BreakPoint::None; + // assert_eq!(bp.class_with("offcanvas", ""), "offcanvas"); + // assert_eq!(bp.class_with("col", "12"), "col-12"); + // + // let bp = BreakPoint::LG; + // assert_eq!(bp.class_with("", "3"), ""); + // ``` + #[inline] + pub(crate) fn class_with(self, prefix: &str, suffix: &str) -> String { + if prefix.is_empty() { + return String::new(); + } + + let bp = self.as_str(); + let has_bp = !bp.is_empty(); + let has_suffix = !suffix.is_empty(); + + let mut len = prefix.len(); + if has_bp { + len += 1 + bp.len(); + } + if has_suffix { + len += 1 + suffix.len(); + } + let mut class = String::with_capacity(len); + class.push_str(prefix); + if has_bp { + class.push('-'); + class.push_str(bp); + } + if has_suffix { + class.push('-'); + class.push_str(suffix); + } + class + } } diff --git a/extensions/pagetop-bootsier/src/theme/aux/button.rs b/extensions/pagetop-bootsier/src/theme/aux/button.rs index a2f2efb..0d1df87 100644 --- a/extensions/pagetop-bootsier/src/theme/aux/button.rs +++ b/extensions/pagetop-bootsier/src/theme/aux/button.rs @@ -2,12 +2,10 @@ use pagetop::prelude::*; use crate::theme::aux::Color; -use std::fmt; - // **< ButtonColor >******************************************************************************** /// Variantes de color `btn-*` para botones. -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum ButtonColor { /// No define ninguna clase. #[default] @@ -20,14 +18,72 @@ pub enum ButtonColor { Link, } -#[rustfmt::skip] -impl fmt::Display for ButtonColor { - fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result { +impl ButtonColor { + const BTN_PREFIX: &str = "btn-"; + const BTN_OUTLINE_PREFIX: &str = "btn-outline-"; + const BTN_LINK: &str = "btn-link"; + + // Añade la clase `btn-*` a la cadena de clases. + #[inline] + pub(crate) fn push_class(self, classes: &mut String) { + if let Self::Default = self { + return; + } + if !classes.is_empty() { + classes.push(' '); + } match self { - Self::Default => Ok(()), - Self::Background(c) => write!(f, "btn-{c}"), - Self::Outline(c) => write!(f, "btn-outline-{c}"), - Self::Link => f.write_str("btn-link"), + Self::Default => unreachable!(), + Self::Background(c) => { + classes.push_str(Self::BTN_PREFIX); + classes.push_str(c.as_str()); + } + Self::Outline(c) => { + classes.push_str(Self::BTN_OUTLINE_PREFIX); + classes.push_str(c.as_str()); + } + Self::Link => { + classes.push_str(Self::BTN_LINK); + } + } + } + + /// Devuelve la clase `btn-*` correspondiente al color del botón. + /// + /// # Ejemplos + /// + /// ```rust + /// # use pagetop_bootsier::prelude::*; + /// assert_eq!( + /// ButtonColor::Background(Color::Primary).to_class(), + /// "btn-primary" + /// ); + /// assert_eq!( + /// ButtonColor::Outline(Color::Danger).to_class(), + /// "btn-outline-danger" + /// ); + /// assert_eq!(ButtonColor::Link.to_class(), "btn-link"); + /// assert_eq!(ButtonColor::Default.to_class(), ""); + /// ``` + #[inline] + pub fn to_class(self) -> String { + match self { + Self::Default => String::new(), + Self::Background(c) => { + let color = c.as_str(); + let mut class = String::with_capacity(Self::BTN_PREFIX.len() + color.len()); + class.push_str(Self::BTN_PREFIX); + class.push_str(color); + class + } + Self::Outline(c) => { + let color = c.as_str(); + let mut class = String::with_capacity(Self::BTN_OUTLINE_PREFIX.len() + color.len()); + class.push_str(Self::BTN_OUTLINE_PREFIX); + class.push_str(color); + class + } + Self::Link => Self::BTN_LINK.to_string(), } } } @@ -35,7 +91,7 @@ impl fmt::Display for ButtonColor { // **< ButtonSize >********************************************************************************* /// Tamaño visual de un botón. -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum ButtonSize { /// Tamaño por defecto del tema (no añade clase). #[default] @@ -46,13 +102,42 @@ pub enum ButtonSize { Large, } -#[rustfmt::skip] -impl fmt::Display for ButtonSize { - fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result { +impl ButtonSize { + const BTN_SM: &str = "btn-sm"; + const BTN_LG: &str = "btn-lg"; + + // Añade la clase de tamaño `btn-sm` o `btn-lg` a la cadena de clases. + #[inline] + pub(crate) fn push_class(self, classes: &mut String) { + if let Self::Default = self { + return; + } + if !classes.is_empty() { + classes.push(' '); + } match self { - Self::Default => Ok(()), - Self::Small => f.write_str("btn-sm"), - Self::Large => f.write_str("btn-lg"), + Self::Default => unreachable!(), + Self::Small => classes.push_str(Self::BTN_SM), + Self::Large => classes.push_str(Self::BTN_LG), + } + } + + /// Devuelve la clase `btn-sm` o `btn-lg` correspondiente al tamaño del botón. + /// + /// # Ejemplos + /// + /// ```rust + /// # use pagetop_bootsier::prelude::*; + /// assert_eq!(ButtonSize::Small.to_class(), "btn-sm"); + /// assert_eq!(ButtonSize::Large.to_class(), "btn-lg"); + /// assert_eq!(ButtonSize::Default.to_class(), ""); + /// ``` + #[inline] + pub fn to_class(self) -> String { + match self { + Self::Default => String::new(), + Self::Small => Self::BTN_SM.to_string(), + Self::Large => Self::BTN_LG.to_string(), } } } diff --git a/extensions/pagetop-bootsier/src/theme/aux/color.rs b/extensions/pagetop-bootsier/src/theme/aux/color.rs index d0f1da0..480ff3d 100644 --- a/extensions/pagetop-bootsier/src/theme/aux/color.rs +++ b/extensions/pagetop-bootsier/src/theme/aux/color.rs @@ -1,7 +1,5 @@ use pagetop::prelude::*; -use std::fmt; - // **< Color >************************************************************************************** /// Paleta de colores temáticos. @@ -11,7 +9,7 @@ use std::fmt; /// ([`classes::Background`](crate::theme::classes::Background)), bordes /// ([`classes::Border`](crate::theme::classes::Border)) y texto /// ([`classes::Text`](crate::theme::classes::Text)). -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum Color { #[default] Primary, @@ -24,20 +22,45 @@ pub enum Color { Dark, } -#[rustfmt::skip] -impl fmt::Display for Color { - fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result { +impl Color { + // Devuelve el nombre del color. + #[rustfmt::skip] + #[inline] + pub(crate) const fn as_str(self) -> &'static str { match self { - Self::Primary => f.write_str("primary"), - Self::Secondary => f.write_str("secondary"), - Self::Success => f.write_str("success"), - Self::Info => f.write_str("info"), - Self::Warning => f.write_str("warning"), - Self::Danger => f.write_str("danger"), - Self::Light => f.write_str("light"), - Self::Dark => f.write_str("dark"), + Self::Primary => "primary", + Self::Secondary => "secondary", + Self::Success => "success", + Self::Info => "info", + Self::Warning => "warning", + Self::Danger => "danger", + Self::Light => "light", + Self::Dark => "dark", } } + + /* Añade el nombre del color a la cadena de clases (reservado). + #[inline] + pub(crate) fn push_class(self, classes: &mut String) { + if !classes.is_empty() { + classes.push(' '); + } + classes.push_str(self.as_str()); + } */ + + /// Devuelve la clase correspondiente al color. + /// + /// # Ejemplos + /// + /// ```rust + /// # use pagetop_bootsier::prelude::*; + /// assert_eq!(Color::Primary.to_class(), "primary"); + /// assert_eq!(Color::Danger.to_class(), "danger"); + /// ``` + #[inline] + pub fn to_class(self) -> String { + self.as_str().to_owned() + } } // **< Opacity >************************************************************************************ @@ -48,7 +71,7 @@ impl fmt::Display for Color { /// ([`classes::Background`](crate::theme::classes::Background)), de los bordes `border-opacity-*` /// ([`classes::Border`](crate::theme::classes::Border)) o del texto `text-opacity-*` /// ([`classes::Text`](crate::theme::classes::Text)). -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum Opacity { /// No define ninguna clase. #[default] @@ -68,39 +91,95 @@ pub enum Opacity { } impl Opacity { + const OPACITY: &str = "opacity"; + const OPACITY_PREFIX: &str = "-opacity"; + + // Devuelve el sufijo para `*opacity-*`, o `None` si no define ninguna clase. #[rustfmt::skip] #[inline] - const fn suffix(&self) -> &'static str { + const fn suffix(self) -> Option<&'static str> { match self { - Self::Default => "", - Self::Opaque => "opacity-100", - Self::SemiOpaque => "opacity-75", - Self::Half => "opacity-50", - Self::SemiTransparent => "opacity-25", - Self::AlmostTransparent => "opacity-10", - Self::Transparent => "opacity-0", + Self::Default => None, + Self::Opaque => Some("-100"), + Self::SemiOpaque => Some("-75"), + Self::Half => Some("-50"), + Self::SemiTransparent => Some("-25"), + Self::AlmostTransparent => Some("-10"), + Self::Transparent => Some("-0"), } } + // Añade la opacidad a la cadena de clases usando el prefijo dado (`bg`, `border`, `text`, o + // vacío para `opacity-*`). #[inline] - pub(crate) fn to_class(&self, prefix: impl AsRef) -> String { - match self { - Self::Default => String::new(), - _ => join_pair!(prefix, "-", self.suffix()), + pub(crate) fn push_class(self, classes: &mut String, prefix: &str) { + if let Some(suffix) = self.suffix() { + if !classes.is_empty() { + classes.push(' '); + } + if prefix.is_empty() { + classes.push_str(Self::OPACITY); + } else { + classes.push_str(prefix); + classes.push_str(Self::OPACITY_PREFIX); + } + classes.push_str(suffix); } } -} -impl fmt::Display for Opacity { - fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result { - f.write_str(self.suffix()) + // Devuelve la clase de opacidad con el prefijo dado (`bg`, `border`, `text`, o vacío para + // `opacity-*`). + // + // # Ejemplos + // + // ```rust + // # use pagetop_bootsier::prelude::*; + // assert_eq!(Opacity::Opaque.class_with(""), "opacity-100"); + // assert_eq!(Opacity::Half.class_with("bg"), "bg-opacity-50"); + // assert_eq!(Opacity::SemiTransparent.class_with("text"), "text-opacity-25"); + // assert_eq!(Opacity::Default.class_with("bg"), ""); + // ``` + #[inline] + pub(crate) fn class_with(self, prefix: &str) -> String { + if let Some(suffix) = self.suffix() { + let base_len = if prefix.is_empty() { + Self::OPACITY.len() + } else { + prefix.len() + Self::OPACITY_PREFIX.len() + }; + let mut class = String::with_capacity(base_len + suffix.len()); + if prefix.is_empty() { + class.push_str(Self::OPACITY); + } else { + class.push_str(prefix); + class.push_str(Self::OPACITY_PREFIX); + } + class.push_str(suffix); + return class; + } + String::new() + } + + /// Devuelve la clase de opacidad `opacity-*`. + /// + /// # Ejemplos + /// + /// ```rust + /// # use pagetop_bootsier::prelude::*; + /// assert_eq!(Opacity::Opaque.to_class(), "opacity-100"); + /// assert_eq!(Opacity::Half.to_class(), "opacity-50"); + /// assert_eq!(Opacity::Default.to_class(), ""); + /// ``` + #[inline] + pub fn to_class(self) -> String { + self.class_with("") } } // **< ColorBg >************************************************************************************ /// Colores `bg-*` para el fondo. -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum ColorBg { /// No define ninguna clase. #[default] @@ -123,27 +202,83 @@ pub enum ColorBg { Transparent, } -#[rustfmt::skip] -impl fmt::Display for ColorBg { - fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result { +impl ColorBg { + const BG: &str = "bg"; + const BG_PREFIX: &str = "bg-"; + + // Devuelve el sufijo de la clase `bg-*`, o `None` si no define ninguna clase. + #[rustfmt::skip] + #[inline] + const fn suffix(self) -> Option<&'static str> { match self { - Self::Default => Ok(()), - Self::Body => f.write_str("bg-body"), - Self::BodySecondary => f.write_str("bg-body-secondary"), - Self::BodyTertiary => f.write_str("bg-body-tertiary"), - Self::Theme(c) => write!(f, "bg-{c}"), - Self::Subtle(c) => write!(f, "bg-{c}-subtle"), - Self::Black => f.write_str("bg-black"), - Self::White => f.write_str("bg-white"), - Self::Transparent => f.write_str("bg-transparent"), + Self::Default => None, + Self::Body => Some("-body"), + Self::BodySecondary => Some("-body-secondary"), + Self::BodyTertiary => Some("-body-tertiary"), + Self::Theme(_) => Some(""), + Self::Subtle(_) => Some("-subtle"), + Self::Black => Some("-black"), + Self::White => Some("-white"), + Self::Transparent => Some("-transparent"), } } + + // Añade la clase de fondo `bg-*` a la cadena de clases. + #[inline] + pub(crate) fn push_class(self, classes: &mut String) { + if let Some(suffix) = self.suffix() { + if !classes.is_empty() { + classes.push(' '); + } + match self { + Self::Theme(c) | Self::Subtle(c) => { + classes.push_str(Self::BG_PREFIX); + classes.push_str(c.as_str()); + } + _ => classes.push_str(Self::BG), + } + classes.push_str(suffix); + } + } + + /// Devuelve la clase `bg-*` correspondiente al fondo. + /// + /// # Ejemplos + /// + /// ```rust + /// # use pagetop_bootsier::prelude::*; + /// assert_eq!(ColorBg::Body.to_class(), "bg-body"); + /// assert_eq!(ColorBg::Theme(Color::Primary).to_class(), "bg-primary"); + /// assert_eq!(ColorBg::Subtle(Color::Warning).to_class(), "bg-warning-subtle"); + /// assert_eq!(ColorBg::Transparent.to_class(), "bg-transparent"); + /// assert_eq!(ColorBg::Default.to_class(), ""); + /// ``` + #[inline] + pub fn to_class(self) -> String { + if let Some(suffix) = self.suffix() { + let base_len = match self { + Self::Theme(c) | Self::Subtle(c) => Self::BG_PREFIX.len() + c.as_str().len(), + _ => Self::BG.len(), + }; + let mut class = String::with_capacity(base_len + suffix.len()); + match self { + Self::Theme(c) | Self::Subtle(c) => { + class.push_str(Self::BG_PREFIX); + class.push_str(c.as_str()); + } + _ => class.push_str(Self::BG), + } + class.push_str(suffix); + return class; + } + String::new() + } } // **< ColorText >********************************************************************************** /// Colores `text-*` para el texto. -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum ColorText { /// No define ninguna clase. #[default] @@ -166,19 +301,75 @@ pub enum ColorText { White, } -#[rustfmt::skip] -impl fmt::Display for ColorText { - fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result { +impl ColorText { + const TEXT: &str = "text"; + const TEXT_PREFIX: &str = "text-"; + + // Devuelve el sufijo de la clase `text-*`, o `None` si no define ninguna clase. + #[rustfmt::skip] + #[inline] + const fn suffix(self) -> Option<&'static str> { match self { - Self::Default => Ok(()), - Self::Body => f.write_str("text-body"), - Self::BodyEmphasis => f.write_str("text-body-emphasis"), - Self::BodySecondary => f.write_str("text-body-secondary"), - Self::BodyTertiary => f.write_str("text-body-tertiary"), - Self::Theme(c) => write!(f, "text-{c}"), - Self::Emphasis(c) => write!(f, "text-{c}-emphasis"), - Self::Black => f.write_str("text-black"), - Self::White => f.write_str("text-white"), + Self::Default => None, + Self::Body => Some("-body"), + Self::BodyEmphasis => Some("-body-emphasis"), + Self::BodySecondary => Some("-body-secondary"), + Self::BodyTertiary => Some("-body-tertiary"), + Self::Theme(_) => Some(""), + Self::Emphasis(_) => Some("-emphasis"), + Self::Black => Some("-black"), + Self::White => Some("-white"), } } + + // Añade la clase de texto `text-*` a la cadena de clases. + #[inline] + pub(crate) fn push_class(self, classes: &mut String) { + if let Some(suffix) = self.suffix() { + if !classes.is_empty() { + classes.push(' '); + } + match self { + Self::Theme(c) | Self::Emphasis(c) => { + classes.push_str(Self::TEXT_PREFIX); + classes.push_str(c.as_str()); + } + _ => classes.push_str(Self::TEXT), + } + classes.push_str(suffix); + } + } + + /// Devuelve la clase `text-*` correspondiente al color del texto. + /// + /// # Ejemplos + /// + /// ```rust + /// # use pagetop_bootsier::prelude::*; + /// assert_eq!(ColorText::Body.to_class(), "text-body"); + /// assert_eq!(ColorText::Theme(Color::Primary).to_class(), "text-primary"); + /// assert_eq!(ColorText::Emphasis(Color::Danger).to_class(), "text-danger-emphasis"); + /// assert_eq!(ColorText::Black.to_class(), "text-black"); + /// assert_eq!(ColorText::Default.to_class(), ""); + /// ``` + #[inline] + pub fn to_class(self) -> String { + if let Some(suffix) = self.suffix() { + let base_len = match self { + Self::Theme(c) | Self::Emphasis(c) => Self::TEXT_PREFIX.len() + c.as_str().len(), + _ => Self::TEXT.len(), + }; + let mut class = String::with_capacity(base_len + suffix.len()); + match self { + Self::Theme(c) | Self::Emphasis(c) => { + class.push_str(Self::TEXT_PREFIX); + class.push_str(c.as_str()); + } + _ => class.push_str(Self::TEXT), + } + class.push_str(suffix); + return class; + } + String::new() + } } diff --git a/extensions/pagetop-bootsier/src/theme/aux/layout.rs b/extensions/pagetop-bootsier/src/theme/aux/layout.rs new file mode 100644 index 0000000..1d35158 --- /dev/null +++ b/extensions/pagetop-bootsier/src/theme/aux/layout.rs @@ -0,0 +1,104 @@ +use pagetop::prelude::*; + +// **< ScaleSize >********************************************************************************** + +/// Escala discreta de tamaños para definir clases utilitarias. +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] +pub enum ScaleSize { + /// Sin tamaño (no define ninguna clase). + #[default] + None, + /// Tamaño automático. + Auto, + /// Escala cero. + Zero, + /// Escala uno. + One, + /// Escala dos. + Two, + /// Escala tres. + Three, + /// Escala cuatro. + Four, + /// Escala cinco. + Five, +} + +impl ScaleSize { + // Devuelve el sufijo para el tamaño (`"-0"`, `"-1"`, etc.), o `None` si no define ninguna + // clase, o `""` para el tamaño automático. + #[rustfmt::skip] + #[inline] + const fn suffix(self) -> Option<&'static str> { + match self { + Self::None => None, + Self::Auto => Some(""), + Self::Zero => Some("-0"), + Self::One => Some("-1"), + Self::Two => Some("-2"), + Self::Three => Some("-3"), + Self::Four => Some("-4"), + Self::Five => Some("-5"), + } + } + + // Añade el tamaño a la cadena de clases usando el prefijo dado. + #[inline] + pub(crate) fn push_class(self, classes: &mut String, prefix: &str) { + if !prefix.is_empty() { + if let Some(suffix) = self.suffix() { + if !classes.is_empty() { + classes.push(' '); + } + classes.push_str(prefix); + classes.push_str(suffix); + } + } + } + + /* Devuelve la clase del tamaño para el prefijo, o una cadena vacía si no aplica (reservado). + // + // # Ejemplo + // + // ```rust + // # use pagetop_bootsier::prelude::*; + // assert_eq!(ScaleSize::Auto.class_with("border"), "border"); + // assert_eq!(ScaleSize::Zero.class_with("m"), "m-0"); + // assert_eq!(ScaleSize::Three.class_with("p"), "p-3"); + // assert_eq!(ScaleSize::None.class_with("border"), ""); + // ``` + #[inline] + pub(crate) fn class_with(self, prefix: &str) -> String { + if !prefix.is_empty() { + if let Some(suffix) = self.suffix() { + let mut class = String::with_capacity(prefix.len() + suffix.len()); + class.push_str(prefix); + class.push_str(suffix); + return class; + } + } + String::new() + } */ +} + +// **< Side >*************************************************************************************** + +/// Lados sobre los que aplicar una clase utilitaria (respetando LTR/RTL). +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] +pub enum Side { + /// Todos los lados. + #[default] + All, + /// Lado superior. + Top, + /// Lado inferior. + Bottom, + /// Lado lógico de inicio (respetando RTL). + Start, + /// Lado lógico de fin (respetando RTL). + End, + /// Lados lógicos laterales (abreviatura *x*). + LeftAndRight, + /// Lados superior e inferior (abreviatura *y*). + TopAndBottom, +} diff --git a/extensions/pagetop-bootsier/src/theme/aux/rounded.rs b/extensions/pagetop-bootsier/src/theme/aux/rounded.rs index 8eac7c5..20e061d 100644 --- a/extensions/pagetop-bootsier/src/theme/aux/rounded.rs +++ b/extensions/pagetop-bootsier/src/theme/aux/rounded.rs @@ -1,52 +1,117 @@ use pagetop::prelude::*; -use std::fmt; - /// Radio para el redondeo de esquinas ([`classes::Rounded`](crate::theme::classes::Rounded)). -/// -/// Mapea a `rounded`, `rounded-0`, `rounded-{1..5}`, `rounded-circle` y `rounded-pill`. -/// -/// - `None` no añade ninguna clase. -/// - `Default` genera `rounded` (radio por defecto del tema). -/// - `Zero` genera `rounded-0` (sin redondeo). -/// - `Scale{1..5}` genera `rounded-{1..5}` (radio creciente). -/// - `Circle` genera `rounded-circle`. -/// - `Pill` genera `rounded-pill`. -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum RoundedRadius { + /// No define ninguna clase. #[default] None, + /// Genera `rounded` (radio por defecto del tema). Default, + /// Genera `rounded-0` (sin redondeo). Zero, + /// Genera `rounded-1`. Scale1, + /// Genera `rounded-2`. Scale2, + /// Genera `rounded-3`. Scale3, + /// Genera `rounded-4`. Scale4, + /// Genera `rounded-5`. Scale5, + /// Genera `rounded-circle`. Circle, + /// Genera `rounded-pill`. Pill, } impl RoundedRadius { + const ROUNDED: &str = "rounded"; + + // Devuelve el sufijo para `*rounded-*`, o `None` si no define ninguna clase, o `""` para el + // redondeo por defecto. #[rustfmt::skip] - pub(crate) fn to_class(&self, prefix: impl AsRef) -> String { + #[inline] + const fn suffix(self) -> Option<&'static str> { match self { - RoundedRadius::None => String::new(), - RoundedRadius::Default => String::from(prefix.as_ref()), - RoundedRadius::Zero => join!(prefix, "-0"), - RoundedRadius::Scale1 => join!(prefix, "-1"), - RoundedRadius::Scale2 => join!(prefix, "-2"), - RoundedRadius::Scale3 => join!(prefix, "-3"), - RoundedRadius::Scale4 => join!(prefix, "-4"), - RoundedRadius::Scale5 => join!(prefix, "-5"), - RoundedRadius::Circle => join!(prefix, "-circle"), - RoundedRadius::Pill => join!(prefix, "-pill"), + Self::None => None, + Self::Default => Some(""), + Self::Zero => Some("-0"), + Self::Scale1 => Some("-1"), + Self::Scale2 => Some("-2"), + Self::Scale3 => Some("-3"), + Self::Scale4 => Some("-4"), + Self::Scale5 => Some("-5"), + Self::Circle => Some("-circle"), + Self::Pill => Some("-pill"), } } -} -impl fmt::Display for RoundedRadius { - fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result { - write!(f, "{}", self.to_class("rounded")) + // Añade el redondeo de esquinas a la cadena de clases usando el prefijo dado (`rounded-top`, + // `rounded-bottom-start`, o vacío para `rounded-*`). + #[inline] + pub(crate) fn push_class(self, classes: &mut String, prefix: &str) { + if let Some(suffix) = self.suffix() { + if !classes.is_empty() { + classes.push(' '); + } + if prefix.is_empty() { + classes.push_str(Self::ROUNDED); + } else { + classes.push_str(prefix); + } + classes.push_str(suffix); + } + } + + // Devuelve la clase para el redondeo de esquinas con el prefijo dado (`rounded-top`, + // `rounded-bottom-start`, o vacío para `rounded-*`). + // + // # Ejemplos + // + // ```rust + // # use pagetop_bootsier::prelude::*; + // assert_eq!(RoundedRadius::Scale2.class_with(""), "rounded-2"); + // assert_eq!(RoundedRadius::Zero.class_with("rounded-top"), "rounded-top-0"); + // assert_eq!(RoundedRadius::Scale3.class_with("rounded-top-end"), "rounded-top-end-3"); + // assert_eq!(RoundedRadius::Circle.class_with(""), "rounded-circle"); + // assert_eq!(RoundedRadius::None.class_with("rounded-bottom-start"), ""); + // ``` + #[inline] + pub(crate) fn class_with(self, prefix: &str) -> String { + if let Some(suffix) = self.suffix() { + let base_len = if prefix.is_empty() { + Self::ROUNDED.len() + } else { + prefix.len() + }; + let mut class = String::with_capacity(base_len + suffix.len()); + if prefix.is_empty() { + class.push_str(Self::ROUNDED); + } else { + class.push_str(prefix); + } + class.push_str(suffix); + return class; + } + String::new() + } + + /// Devuelve la clase `rounded-*` para el redondeo de esquinas. + /// + /// # Ejemplos + /// + /// ```rust + /// # use pagetop_bootsier::prelude::*; + /// assert_eq!(RoundedRadius::Default.to_class(), "rounded"); + /// assert_eq!(RoundedRadius::Zero.to_class(), "rounded-0"); + /// assert_eq!(RoundedRadius::Scale3.to_class(), "rounded-3"); + /// assert_eq!(RoundedRadius::Circle.to_class(), "rounded-circle"); + /// assert_eq!(RoundedRadius::None.to_class(), ""); + /// ``` + #[inline] + pub fn to_class(self) -> String { + self.class_with("") } } diff --git a/extensions/pagetop-bootsier/src/theme/classes.rs b/extensions/pagetop-bootsier/src/theme/classes.rs index 4e586e1..9e6c234 100644 --- a/extensions/pagetop-bootsier/src/theme/classes.rs +++ b/extensions/pagetop-bootsier/src/theme/classes.rs @@ -8,3 +8,6 @@ pub use border::Border; mod rounded; pub use rounded::Rounded; + +mod layout; +pub use layout::{Margin, Padding}; diff --git a/extensions/pagetop-bootsier/src/theme/classes/border.rs b/extensions/pagetop-bootsier/src/theme/classes/border.rs index f49c75c..3095498 100644 --- a/extensions/pagetop-bootsier/src/theme/classes/border.rs +++ b/extensions/pagetop-bootsier/src/theme/classes/border.rs @@ -1,122 +1,113 @@ use pagetop::prelude::*; -use crate::theme::aux::{BorderColor, BorderSize, Opacity}; - -use std::fmt; +use crate::theme::aux::{BorderColor, Opacity, ScaleSize, Side}; /// Clases para crear **bordes**. /// /// Permite: /// +/// - Iniciar un borde sin tamaño inicial (`Border::default()`). +/// - Crear un borde con tamaño por defecto (`Border::new()`). +/// - Ajustar el tamaño de cada **lado lógico** (`side`, respetando LTR/RTL). /// - Definir un tamaño **global** para todo el borde (`size`). -/// - Ajustar el tamaño de cada **lado lógico** (`top`, `end`, `bottom`, `start`, **en este orden**, -/// respetando LTR/RTL). /// - Aplicar un **color** al borde (`BorderColor`). /// - Aplicar un nivel de **opacidad** (`Opacity`). /// /// # Comportamiento aditivo / sustractivo /// -/// - **Aditivo**: basta con crear un borde sin tamaño con `classes::Border::new()` para ir -/// añadiendo cada lado lógico con el tamaño deseado usando `BorderSize::Scale{1..5}`. +/// - **Aditivo**: basta con crear un borde sin tamaño con `classes::Border::default()` para ir +/// añadiendo cada lado lógico con el tamaño deseado usando `ScaleSize::{One..Five}`. /// -/// - **Sustractivo**: se crea un borde con tamaño predefinido, p. ej. utilizando -/// `classes::Border::with(BorderSize::Scale2)` y eliminar los lados deseados con `BorderSize::Zero`. +/// - **Sustractivo**: se crea un borde con tamaño predefinido, p. ej. usando +/// `classes::Border::new()` o `classes::Border::with(ScaleSize::Two)` y eliminar los lados +/// deseados con `ScaleSize::Zero`. /// -/// - **Anchos diferentes por lado**: usando `BorderSize::Scale{1..5}` en cada lado deseado. +/// - **Anchos diferentes por lado**: usando `ScaleSize::{Zero..Five}` en cada lado deseado. /// /// # Ejemplos /// /// **Borde global:** /// ```rust /// # use pagetop_bootsier::prelude::*; -/// let b = classes::Border::with(BorderSize::Scale2); -/// assert_eq!(b.to_string(), "border-2"); +/// let b = classes::Border::with(ScaleSize::Two); +/// assert_eq!(b.to_class(), "border-2"); /// ``` /// /// **Aditivo (solo borde superior):** /// ```rust /// # use pagetop_bootsier::prelude::*; -/// let b = classes::Border::new().with_top(BorderSize::Scale1); -/// assert_eq!(b.to_string(), "border-top-1"); +/// let b = classes::Border::default().with_side(Side::Top, ScaleSize::One); +/// assert_eq!(b.to_class(), "border-top-1"); /// ``` /// /// **Sustractivo (borde global menos el superior):** /// ```rust /// # use pagetop_bootsier::prelude::*; -/// let b = classes::Border::with(BorderSize::Default).with_top(BorderSize::Zero); -/// assert_eq!(b.to_string(), "border border-top-0"); +/// let b = classes::Border::new().with_side(Side::Top, ScaleSize::Zero); +/// assert_eq!(b.to_class(), "border border-top-0"); /// ``` /// /// **Ancho por lado (lado lógico inicial a 2 y final a 4):** /// ```rust /// # use pagetop_bootsier::prelude::*; -/// let b = classes::Border::new().with_start(BorderSize::Scale2).with_end(BorderSize::Scale4); -/// assert_eq!(b.to_string(), "border-end-4 border-start-2"); +/// let b = classes::Border::default() +/// .with_side(Side::Start, ScaleSize::Two) +/// .with_side(Side::End, ScaleSize::Four); +/// assert_eq!(b.to_class(), "border-end-4 border-start-2"); /// ``` /// /// **Combinado (ejemplo completo):** /// ```rust /// # use pagetop_bootsier::prelude::*; -/// let b = classes::Border::with(BorderSize::Default) // Borde global por defecto. -/// .with_top(BorderSize::Zero) // Quita borde superior. -/// .with_end(BorderSize::Scale3) // Ancho 3 para el lado lógico final. +/// let b = classes::Border::new() // Borde por defecto. +/// .with_side(Side::Top, ScaleSize::Zero) // Quita borde superior. +/// .with_side(Side::End, ScaleSize::Three) // Ancho 3 para el lado lógico final. /// .with_color(BorderColor::Theme(Color::Primary)) /// .with_opacity(Opacity::Half); /// -/// assert_eq!(b.to_string(), "border border-top-0 border-end-3 border-primary border-opacity-50"); +/// assert_eq!(b.to_class(), "border border-top-0 border-end-3 border-primary border-opacity-50"); /// ``` #[rustfmt::skip] -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub struct Border { - size : BorderSize, - top : BorderSize, - end : BorderSize, - bottom : BorderSize, - start : BorderSize, + all : ScaleSize, + top : ScaleSize, + end : ScaleSize, + bottom : ScaleSize, + start : ScaleSize, color : BorderColor, opacity: Opacity, } impl Border { - /// Prepara un borde **sin tamaño global** de partida. + /// Prepara un borde del tamaño predefinido. Equivale a `border` (ancho por defecto del tema). pub fn new() -> Self { - Self::default() + Self::with(ScaleSize::Auto) } - /// Crea un borde **con tamaño global** (`size`). - pub fn with(size: BorderSize) -> Self { - Self::default().with_size(size) + /// Crea un borde **con un tamaño global** (`size`). + pub fn with(size: ScaleSize) -> Self { + Self::default().with_side(Side::All, size) } // **< Border BUILDER >************************************************************************* - /// Establece el tamaño global del borde (`border*`). - pub fn with_size(mut self, size: BorderSize) -> Self { - self.size = size; - self - } - - /// Establece el tamaño del borde superior (`border-top-*`). - pub fn with_top(mut self, size: BorderSize) -> Self { - self.top = size; - self - } - - /// Establece el tamaño del borde en el lado lógico final (`border-end-*`). Respeta LTR/RTL. - pub fn with_end(mut self, size: BorderSize) -> Self { - self.end = size; - self - } - - /// Establece el tamaño del borde inferior (`border-bottom-*`). - pub fn with_bottom(mut self, size: BorderSize) -> Self { - self.bottom = size; - self - } - - /// Establece el tamaño del borde en el lado lógico inicial (`border-start-*`). Respeta LTR/RTL. - pub fn with_start(mut self, size: BorderSize) -> Self { - self.start = size; + pub fn with_side(mut self, side: Side, size: ScaleSize) -> Self { + match side { + Side::All => self.all = size, + Side::Top => self.top = size, + Side::Bottom => self.bottom = size, + Side::Start => self.start = size, + Side::End => self.end = size, + Side::LeftAndRight => { + self.start = size; + self.end = size; + } + Side::TopAndBottom => { + self.top = size; + self.bottom = size; + } + }; self } @@ -131,25 +122,54 @@ impl Border { self.opacity = opacity; self } -} -impl fmt::Display for Border { - /// Concatena, en este orden, las clases para *global*, `top`, `end`, `bottom`, `start`, *color* - /// y *opacidad*; respetando LTR/RTL y omitiendo las definiciones vacías. - fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result { - write!( - f, - "{}", - [ - self.size.to_string(), - self.top.to_class("border-top"), - self.end.to_class("border-end"), - self.bottom.to_class("border-bottom"), - self.start.to_class("border-start"), - self.color.to_string(), - self.opacity.to_class("border"), - ] - .join_classes() - ) + // **< Border HELPERS >************************************************************************* + + /// Añade las clases de borde a la cadena de clases. + /// + /// Concatena, en este orden, las clases para *global*, `top`, `end`, `bottom`, `start`, + /// *color* y *opacidad*; respetando LTR/RTL y omitiendo las definiciones vacías. + #[rustfmt::skip] + #[inline] + pub(crate) fn push_class(self, classes: &mut String) { + self.all .push_class(classes, "border"); + self.top .push_class(classes, "border-top"); + self.end .push_class(classes, "border-end"); + self.bottom .push_class(classes, "border-bottom"); + self.start .push_class(classes, "border-start"); + self.color .push_class(classes); + self.opacity.push_class(classes, "border"); + } + + /// Devuelve las clases de borde como cadena (`"border-2"`, + /// `"border border-top-0 border-end-3 border-primary border-opacity-50"`, etc.). + /// + /// Si no se define ningún tamaño, color ni opacidad, devuelve `""`. + #[inline] + pub fn to_class(self) -> String { + let mut classes = String::new(); + self.push_class(&mut classes); + classes + } +} + +/// Atajo para crear un [`classes::Border`](crate::theme::classes::Border) a partir de un tamaño +/// [`ScaleSize`] aplicado a todo el borde. +/// +/// # Ejemplos +/// +/// ```rust +/// # use pagetop_bootsier::prelude::*; +/// // Convertir explícitamente con `From::from`: +/// let b = classes::Border::from(ScaleSize::Two); +/// assert_eq!(b.to_class(), "border-2"); +/// +/// // Convertir implícitamente con `into()`: +/// let b: classes::Border = ScaleSize::Auto.into(); +/// assert_eq!(b.to_class(), "border"); +/// ``` +impl From for Border { + fn from(size: ScaleSize) -> Self { + Self::with(size) } } diff --git a/extensions/pagetop-bootsier/src/theme/classes/color.rs b/extensions/pagetop-bootsier/src/theme/classes/color.rs index 6579d21..162b784 100644 --- a/extensions/pagetop-bootsier/src/theme/classes/color.rs +++ b/extensions/pagetop-bootsier/src/theme/classes/color.rs @@ -2,9 +2,7 @@ use pagetop::prelude::*; use crate::theme::aux::{ColorBg, ColorText, Opacity}; -use std::fmt; - -// **< Bg >***************************************************************************************** +// **< Background >********************************************************************************* /// Clases para establecer **color/opacidad del fondo**. /// @@ -14,28 +12,27 @@ use std::fmt; /// # use pagetop_bootsier::prelude::*; /// // Sin clases. /// let s = classes::Background::new(); -/// assert_eq!(s.to_string(), ""); +/// assert_eq!(s.to_class(), ""); /// /// // Sólo color de fondo. /// let s = classes::Background::with(ColorBg::Theme(Color::Primary)); -/// assert_eq!(s.to_string(), "bg-primary"); +/// assert_eq!(s.to_class(), "bg-primary"); /// /// // Color más opacidad. /// let s = classes::Background::with(ColorBg::BodySecondary).with_opacity(Opacity::Half); -/// assert_eq!(s.to_string(), "bg-body-secondary bg-opacity-50"); +/// assert_eq!(s.to_class(), "bg-body-secondary bg-opacity-50"); /// /// // Usando `From`. /// let s: classes::Background = ColorBg::Black.into(); -/// assert_eq!(s.to_string(), "bg-black"); +/// assert_eq!(s.to_class(), "bg-black"); /// /// // Usando `From<(ColorBg, Opacity)>`. /// let s: classes::Background = (ColorBg::White, Opacity::SemiTransparent).into(); -/// assert_eq!(s.to_string(), "bg-white bg-opacity-25"); +/// assert_eq!(s.to_class(), "bg-white bg-opacity-25"); /// ``` -#[rustfmt::skip] -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub struct Background { - color : ColorBg, + color: ColorBg, opacity: Opacity, } @@ -50,7 +47,7 @@ impl Background { Self::default().with_color(color) } - // **< Bg BUILDER >***************************************************************************** + // **< Background BUILDER >********************************************************************* /// Establece el color de fondo (`bg-*`). pub fn with_color(mut self, color: ColorBg) -> Self { @@ -63,14 +60,27 @@ impl Background { self.opacity = opacity; self } -} -impl fmt::Display for Background { - /// Concatena, en este orden, color del fondo (`bg-*`) y opacidad (`bg-opacity-*`), omitiendo - /// las definiciones vacías. - fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result { - let classes = [self.color.to_string(), self.opacity.to_class("bg")].join_classes(); - write!(f, "{classes}") + // **< Background HELPERS >********************************************************************* + + /// Añade las clases de fondo a la cadena de clases. + /// + /// Concatena, en este orden, color del fondo (`bg-*`) y opacidad (`bg-opacity-*`), + /// omitiendo los fragmentos vacíos. + #[inline] + pub(crate) fn push_class(self, classes: &mut String) { + self.color.push_class(classes); + self.opacity.push_class(classes, "bg"); + } + + /// Devuelve las clases de fondo como cadena (`"bg-primary"`, `"bg-body-secondary bg-opacity-50"`, etc.). + /// + /// Si no se define ni color ni opacidad, devuelve `""`. + #[inline] + pub fn to_class(self) -> String { + let mut classes = String::new(); + self.push_class(&mut classes); + classes } } @@ -83,7 +93,7 @@ impl From<(ColorBg, Opacity)> for Background { /// ``` /// # use pagetop_bootsier::prelude::*; /// let s: classes::Background = (ColorBg::White, Opacity::SemiTransparent).into(); - /// assert_eq!(s.to_string(), "bg-white bg-opacity-25"); + /// assert_eq!(s.to_class(), "bg-white bg-opacity-25"); /// ``` fn from((color, opacity): (ColorBg, Opacity)) -> Self { Background::with(color).with_opacity(opacity) @@ -98,7 +108,7 @@ impl From for Background { /// ``` /// # use pagetop_bootsier::prelude::*; /// let s: classes::Background = ColorBg::Black.into(); - /// assert_eq!(s.to_string(), "bg-black"); + /// assert_eq!(s.to_class(), "bg-black"); /// ``` fn from(color: ColorBg) -> Self { Background::with(color) @@ -115,28 +125,27 @@ impl From for Background { /// # use pagetop_bootsier::prelude::*; /// // Sin clases. /// let s = classes::Text::new(); -/// assert_eq!(s.to_string(), ""); +/// assert_eq!(s.to_class(), ""); /// /// // Sólo color del texto. /// let s = classes::Text::with(ColorText::Theme(Color::Primary)); -/// assert_eq!(s.to_string(), "text-primary"); +/// assert_eq!(s.to_class(), "text-primary"); /// /// // Color del texto y opacidad. /// let s = classes::Text::new().with_color(ColorText::White).with_opacity(Opacity::SemiTransparent); -/// assert_eq!(s.to_string(), "text-white text-opacity-25"); +/// assert_eq!(s.to_class(), "text-white text-opacity-25"); /// /// // Usando `From`. /// let s: classes::Text = ColorText::Black.into(); -/// assert_eq!(s.to_string(), "text-black"); +/// assert_eq!(s.to_class(), "text-black"); /// /// // Usando `From<(ColorText, Opacity)>`. /// let s: classes::Text = (ColorText::Theme(Color::Danger), Opacity::Opaque).into(); -/// assert_eq!(s.to_string(), "text-danger text-opacity-100"); +/// assert_eq!(s.to_class(), "text-danger text-opacity-100"); /// ``` -#[rustfmt::skip] -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub struct Text { - color : ColorText, + color: ColorText, opacity: Opacity, } @@ -164,13 +173,27 @@ impl Text { self.opacity = opacity; self } -} -impl fmt::Display for Text { - /// Concatena, en este orden, `text-*` y `text-opacity-*`, omitiendo las definiciones vacías. - fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result { - let classes = [self.color.to_string(), self.opacity.to_class("text")].join_classes(); - write!(f, "{classes}") + // **< Text HELPERS >*************************************************************************** + + /// Añade las clases de texto a la cadena de clases. + /// + /// Concatena, en este orden, `text-*` y `text-opacity-*`, omitiendo los fragmentos vacíos. + #[inline] + pub(crate) fn push_class(self, classes: &mut String) { + self.color.push_class(classes); + self.opacity.push_class(classes, "text"); + } + + /// Devuelve las clases de texto como cadena (`"text-primary"`, `"text-white text-opacity-25"`, + /// etc.). + /// + /// Si no se define ni color ni opacidad, devuelve `""`. + #[inline] + pub fn to_class(self) -> String { + let mut classes = String::new(); + self.push_class(&mut classes); + classes } } @@ -183,7 +206,7 @@ impl From<(ColorText, Opacity)> for Text { /// ``` /// # use pagetop_bootsier::prelude::*; /// let s: classes::Text = (ColorText::Theme(Color::Danger), Opacity::Opaque).into(); - /// assert_eq!(s.to_string(), "text-danger text-opacity-100"); + /// assert_eq!(s.to_class(), "text-danger text-opacity-100"); /// ``` fn from((color, opacity): (ColorText, Opacity)) -> Self { Text::with(color).with_opacity(opacity) @@ -199,7 +222,7 @@ impl From for Text { /// ``` /// # use pagetop_bootsier::prelude::*; /// let s: classes::Text = ColorText::Black.into(); - /// assert_eq!(s.to_string(), "text-black"); + /// assert_eq!(s.to_class(), "text-black"); /// ``` fn from(color: ColorText) -> Self { Text::with(color) diff --git a/extensions/pagetop-bootsier/src/theme/classes/layout.rs b/extensions/pagetop-bootsier/src/theme/classes/layout.rs new file mode 100644 index 0000000..e9d7e24 --- /dev/null +++ b/extensions/pagetop-bootsier/src/theme/classes/layout.rs @@ -0,0 +1,205 @@ +use pagetop::prelude::*; + +use crate::theme::aux::{ScaleSize, Side}; +use crate::theme::BreakPoint; + +// **< Margin >************************************************************************************* + +/// Clases para establecer **margin** por lado, tamaño y punto de ruptura. +/// +/// # Ejemplos +/// +/// ```rust +/// # use pagetop_bootsier::prelude::*; +/// let m = classes::Margin::with(Side::Top, ScaleSize::Three); +/// assert_eq!(m.to_class(), "mt-3"); +/// +/// let m = classes::Margin::with(Side::Start, ScaleSize::Auto).with_breakpoint(BreakPoint::LG); +/// assert_eq!(m.to_class(), "ms-lg-auto"); +/// +/// let m = classes::Margin::with(Side::All, ScaleSize::None); +/// assert_eq!(m.to_class(), ""); +/// ``` +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] +pub struct Margin { + side: Side, + size: ScaleSize, + breakpoint: BreakPoint, +} + +impl Margin { + /// Crea un **margin** indicando lado(s) y tamaño. Por defecto no se aplica a ningún punto de + /// ruptura. + pub fn with(side: Side, size: ScaleSize) -> Self { + Margin { + side, + size, + breakpoint: BreakPoint::None, + } + } + + // **< Margin BUILDER >************************************************************************* + + /// Establece el punto de ruptura a partir del cual se empieza a aplicar el **margin**. + pub fn with_breakpoint(mut self, breakpoint: BreakPoint) -> Self { + self.breakpoint = breakpoint; + self + } + + // **< Margin HELPERS >************************************************************************* + + // Devuelve el prefijo `m*` según el lado. + #[rustfmt::skip] + #[inline] + const fn side_prefix(&self) -> &'static str { + match self.side { + Side::All => "m", + Side::Top => "mt", + Side::Bottom => "mb", + Side::Start => "ms", + Side::End => "me", + Side::LeftAndRight => "mx", + Side::TopAndBottom => "my", + } + } + + // Devuelve el sufijo del tamaño (`auto`, `0`..`5`), o `None` si no define clase. + #[rustfmt::skip] + #[inline] + const fn size_suffix(&self) -> Option<&'static str> { + match self.size { + ScaleSize::None => None, + ScaleSize::Auto => Some("auto"), + ScaleSize::Zero => Some("0"), + ScaleSize::One => Some("1"), + ScaleSize::Two => Some("2"), + ScaleSize::Three => Some("3"), + ScaleSize::Four => Some("4"), + ScaleSize::Five => Some("5"), + } + } + + /* Añade la clase de **margin** a la cadena de clases (reservado). + // + // No añade nada si `size` es `ScaleSize::None`. + #[inline] + pub(crate) fn push_class(self, classes: &mut String) { + let Some(size) = self.size_suffix() else { + return; + }; + self.breakpoint + .push_class(classes, self.side_prefix(), size); + } */ + + /// Devuelve la clase de **margin** como cadena (`"mt-3"`, `"ms-lg-auto"`, etc.). + /// + /// Si `size` es `ScaleSize::None`, devuelve `""`. + #[inline] + pub fn to_class(self) -> String { + let Some(size) = self.size_suffix() else { + return String::new(); + }; + self.breakpoint.class_with(self.side_prefix(), size) + } +} + +// **< Padding >************************************************************************************ + +/// Clases para establecer **padding** por lado, tamaño y punto de ruptura. +/// +/// # Ejemplos +/// +/// ```rust +/// # use pagetop_bootsier::prelude::*; +/// let p = classes::Padding::with(Side::LeftAndRight, ScaleSize::Two); +/// assert_eq!(p.to_class(), "px-2"); +/// +/// let p = classes::Padding::with(Side::End, ScaleSize::Four).with_breakpoint(BreakPoint::SM); +/// assert_eq!(p.to_class(), "pe-sm-4"); +/// +/// let p = classes::Padding::with(Side::All, ScaleSize::Auto); +/// assert_eq!(p.to_class(), ""); // `Auto` no aplica a padding. +/// ``` +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] +pub struct Padding { + side: Side, + size: ScaleSize, + breakpoint: BreakPoint, +} + +impl Padding { + /// Crea un **padding** indicando lado(s) y tamaño. Por defecto no se aplica a ningún punto de + /// ruptura. + pub fn with(side: Side, size: ScaleSize) -> Self { + Padding { + side, + size, + breakpoint: BreakPoint::None, + } + } + + // **< Padding BUILDER >************************************************************************ + + /// Establece el punto de ruptura a partir del cual se empieza a aplicar el **padding**. + pub fn with_breakpoint(mut self, breakpoint: BreakPoint) -> Self { + self.breakpoint = breakpoint; + self + } + + // **< Padding HELPERS >************************************************************************ + + // Devuelve el prefijo `p*` según el lado. + #[rustfmt::skip] + #[inline] + const fn prefix(&self) -> &'static str { + match self.side { + Side::All => "p", + Side::Top => "pt", + Side::Bottom => "pb", + Side::Start => "ps", + Side::End => "pe", + Side::LeftAndRight => "px", + Side::TopAndBottom => "py", + } + } + + // Devuelve el sufijo del tamaño (`0`..`5`), o `None` si no define clase. + // + // Nota: `ScaleSize::Auto` **no aplica** a padding ⇒ devuelve `None`. + #[rustfmt::skip] + #[inline] + const fn suffix(&self) -> Option<&'static str> { + match self.size { + ScaleSize::None => None, + ScaleSize::Auto => None, + ScaleSize::Zero => Some("0"), + ScaleSize::One => Some("1"), + ScaleSize::Two => Some("2"), + ScaleSize::Three => Some("3"), + ScaleSize::Four => Some("4"), + ScaleSize::Five => Some("5"), + } + } + + /* Añade la clase de **padding** a la cadena de clases (reservado). + // + // No añade nada si `size` es `ScaleSize::None` o `ScaleSize::Auto`. + #[inline] + pub(crate) fn push_class(self, classes: &mut String) { + let Some(size) = self.suffix() else { + return; + }; + self.breakpoint.push_class(classes, self.prefix(), size); + } */ + + // Devuelve la clase de **padding** como cadena (`"px-2"`, `"pe-sm-4"`, etc.). + // + // Si `size` es `ScaleSize::None` o `ScaleSize::Auto`, devuelve `""`. + #[inline] + pub fn to_class(self) -> String { + let Some(size) = self.suffix() else { + return String::new(); + }; + self.breakpoint.class_with(self.prefix(), size) + } +} diff --git a/extensions/pagetop-bootsier/src/theme/classes/rounded.rs b/extensions/pagetop-bootsier/src/theme/classes/rounded.rs index b7510c1..58d50b8 100644 --- a/extensions/pagetop-bootsier/src/theme/classes/rounded.rs +++ b/extensions/pagetop-bootsier/src/theme/classes/rounded.rs @@ -2,8 +2,6 @@ use pagetop::prelude::*; use crate::theme::aux::RoundedRadius; -use std::fmt; - /// Clases para definir **esquinas redondeadas**. /// /// Permite: @@ -20,28 +18,28 @@ use std::fmt; /// ```rust /// # use pagetop_bootsier::prelude::*; /// let r = classes::Rounded::with(RoundedRadius::Default); -/// assert_eq!(r.to_string(), "rounded"); +/// assert_eq!(r.to_class(), "rounded"); /// ``` /// /// **Sin redondeo:** /// ```rust /// # use pagetop_bootsier::prelude::*; /// let r = classes::Rounded::new(); -/// assert_eq!(r.to_string(), ""); +/// assert_eq!(r.to_class(), ""); /// ``` /// /// **Radio en las esquinas de un lado lógico:** /// ```rust /// # use pagetop_bootsier::prelude::*; /// let r = classes::Rounded::new().with_end(RoundedRadius::Scale2); -/// assert_eq!(r.to_string(), "rounded-end-2"); +/// assert_eq!(r.to_class(), "rounded-end-2"); /// ``` /// /// **Radio en una esquina concreta:** /// ```rust /// # use pagetop_bootsier::prelude::*; /// let r = classes::Rounded::new().with_top_start(RoundedRadius::Scale3); -/// assert_eq!(r.to_string(), "rounded-top-start-3"); +/// assert_eq!(r.to_class(), "rounded-top-start-3"); /// ``` /// /// **Combinado (ejemplo completo):** @@ -52,10 +50,10 @@ use std::fmt; /// .with_bottom_start(RoundedRadius::Scale4) // Añade una esquina redondeada concreta. /// .with_bottom_end(RoundedRadius::Circle); // Añade redondeo extremo en otra esquina. /// -/// assert_eq!(r.to_string(), "rounded-top rounded-bottom-start-4 rounded-bottom-end-circle"); +/// assert_eq!(r.to_class(), "rounded-top rounded-bottom-start-4 rounded-bottom-end-circle"); /// ``` #[rustfmt::skip] -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub struct Rounded { radius : RoundedRadius, top : RoundedRadius, @@ -136,28 +134,36 @@ impl Rounded { self.bottom_end = radius; self } -} -impl fmt::Display for Rounded { + // **< Rounded HELPERS >************************************************************************ + + /// Añade las clases de redondeo a la cadena de clases. + /// /// Concatena, en este orden, las clases para *global*, `top`, `end`, `bottom`, `start`, /// `top-start`, `top-end`, `bottom-start` y `bottom-end`; respetando LTR/RTL y omitiendo las /// definiciones vacías. - fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result { - write!( - f, - "{}", - [ - self.radius.to_string(), - self.top.to_class("rounded-top"), - self.end.to_class("rounded-end"), - self.bottom.to_class("rounded-bottom"), - self.start.to_class("rounded-start"), - self.top_start.to_class("rounded-top-start"), - self.top_end.to_class("rounded-top-end"), - self.bottom_start.to_class("rounded-bottom-start"), - self.bottom_end.to_class("rounded-bottom-end"), - ] - .join_classes() - ) + #[rustfmt::skip] + #[inline] + pub(crate) fn push_class(self, classes: &mut String) { + self.radius .push_class(classes, ""); + self.top .push_class(classes, "rounded-top"); + self.end .push_class(classes, "rounded-end"); + self.bottom .push_class(classes, "rounded-bottom"); + self.start .push_class(classes, "rounded-start"); + self.top_start .push_class(classes, "rounded-top-start"); + self.top_end .push_class(classes, "rounded-top-end"); + self.bottom_start.push_class(classes, "rounded-bottom-start"); + self.bottom_end .push_class(classes, "rounded-bottom-end"); + } + + /// Devuelve las clases de redondeo como cadena (`"rounded"`, + /// `"rounded-top rounded-bottom-start-4 rounded-bottom-end-circle"`, etc.). + /// + /// Si no se define ningún radio, devuelve `""`. + #[inline] + pub fn to_class(self) -> String { + let mut classes = String::new(); + self.push_class(&mut classes); + classes } } diff --git a/extensions/pagetop-bootsier/src/theme/container/component.rs b/extensions/pagetop-bootsier/src/theme/container/component.rs index 1bcf100..068d24a 100644 --- a/extensions/pagetop-bootsier/src/theme/container/component.rs +++ b/extensions/pagetop-bootsier/src/theme/container/component.rs @@ -26,20 +26,7 @@ impl Component for Container { } fn setup_before_prepare(&mut self, _cx: &mut Context) { - self.alter_classes( - ClassesOp::Prepend, - [join_pair!( - "container", - "-", - match self.width() { - container::Width::Default => String::new(), - container::Width::From(bp) => bp.to_string(), - container::Width::Fluid => "fluid".to_string(), - container::Width::FluidMax(_) => "fluid".to_string(), - } - )] - .join_classes(), - ); + self.alter_classes(ClassesOp::Prepend, self.width().to_class()); } fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup { diff --git a/extensions/pagetop-bootsier/src/theme/container/props.rs b/extensions/pagetop-bootsier/src/theme/container/props.rs index 796e32f..2010ba8 100644 --- a/extensions/pagetop-bootsier/src/theme/container/props.rs +++ b/extensions/pagetop-bootsier/src/theme/container/props.rs @@ -1,14 +1,14 @@ use pagetop::prelude::*; -use crate::prelude::*; +use crate::theme::aux::BreakPoint; // **< Kind >*************************************************************************************** -/// Tipo de contenedor ([`Container`]). +/// Tipo de contenedor ([`Container`](crate::theme::Container)). /// /// Permite aplicar la etiqueta HTML apropiada (`
`, `
`, etc.) manteniendo una API /// común a todos los contenedores. -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum Kind { /// Contenedor genérico (`
`). #[default] @@ -27,8 +27,8 @@ pub enum Kind { // **< Width >************************************************************************************** -/// Define el comportamiento para ajustar el ancho de un contenedor ([`Container`]). -#[derive(AutoDefault)] +/// Define cómo se comporta el ancho de un contenedor ([`Container`](crate::theme::Container)). +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum Width { /// Comportamiento por defecto, aplica los anchos máximos predefinidos para cada punto de /// ruptura. Por debajo del menor punto de ruptura ocupa el 100% del ancho disponible. @@ -42,3 +42,31 @@ pub enum Width { /// Ocupa el 100% del ancho disponible hasta un ancho máximo explícito. FluidMax(UnitValue), } + +impl Width { + const CONTAINER: &str = "container"; + + /* Añade el comportamiento del contenedor a la cadena de clases según ancho (reservado). + #[inline] + pub(crate) fn push_class(self, classes: &mut String) { + match self { + Self::Default => BreakPoint::None.push_class(classes, Self::CONTAINER, ""), + Self::From(bp) => bp.push_class(classes, Self::CONTAINER, ""), + Self::Fluid | Self::FluidMax(_) => { + BreakPoint::None.push_class(classes, Self::CONTAINER, "fluid") + } + } + } */ + + /// Devuelve la clase asociada al comportamiento del contenedor según el ajuste de su ancho. + #[inline] + pub fn to_class(self) -> String { + match self { + Self::Default => BreakPoint::None.class_with(Self::CONTAINER, ""), + Self::From(bp) => bp.class_with(Self::CONTAINER, ""), + Self::Fluid | Self::FluidMax(_) => { + BreakPoint::None.class_with(Self::CONTAINER, "fluid") + } + } + } +} diff --git a/extensions/pagetop-bootsier/src/theme/dropdown/component.rs b/extensions/pagetop-bootsier/src/theme/dropdown/component.rs index 450edff..5d27daf 100644 --- a/extensions/pagetop-bootsier/src/theme/dropdown/component.rs +++ b/extensions/pagetop-bootsier/src/theme/dropdown/component.rs @@ -45,21 +45,11 @@ impl Component for Dropdown { self.id.get() } - #[rustfmt::skip] fn setup_before_prepare(&mut self, _cx: &mut Context) { - let g = self.button_grouped(); - self.alter_classes(ClassesOp::Prepend, [ - if g { "btn-group" } else { "" }, - match self.direction() { - dropdown::Direction::Default if g => "", - dropdown::Direction::Default => "dropdown", - dropdown::Direction::Centered => "dropdown-center", - dropdown::Direction::Dropup => "dropup", - dropdown::Direction::DropupCentered => "dropup-center", - dropdown::Direction::Dropend => "dropend", - dropdown::Direction::Dropstart => "dropstart", - } - ].join_classes()); + self.alter_classes( + ClassesOp::Prepend, + self.direction().class_with(self.button_grouped()), + ); } fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup { @@ -75,41 +65,21 @@ impl Component for Dropdown { PrepareMarkup::With(html! { div id=[self.id()] class=[self.classes().get()] { @if !title.is_empty() { - @let mut btn_classes = AttrClasses::new([ - "btn", - &self.button_size().to_string(), - &self.button_color().to_string(), - ].join_classes()); - @let (offset, reference) = match self.menu_position() { - dropdown::MenuPosition::Default => (None, None), - dropdown::MenuPosition::Offset(x, y) => (Some(format!("{x},{y}")), None), - dropdown::MenuPosition::Parent => (None, Some("parent")), - }; - @let auto_close = match self.auto_close { - dropdown::AutoClose::Default => None, - dropdown::AutoClose::ClickableInside => Some("inside"), - dropdown::AutoClose::ClickableOutside => Some("outside"), - dropdown::AutoClose::ManualClose => Some("false"), - }; - @let menu_classes = AttrClasses::new("dropdown-menu") - .with_value(ClassesOp::Add, match self.menu_align() { - dropdown::MenuAlign::Start => String::new(), - dropdown::MenuAlign::StartAt(bp) => bp.try_class("dropdown-menu") - .map_or(String::new(), |class| join!(class, "-start")), - dropdown::MenuAlign::StartAndEnd(bp) => bp.try_class("dropdown-menu") - .map_or( - "dropdown-menu-start".into(), - |class| join!("dropdown-menu-start ", class, "-end") - ), - dropdown::MenuAlign::End => "dropdown-menu-end".into(), - dropdown::MenuAlign::EndAt(bp) => bp.try_class("dropdown-menu") - .map_or(String::new(), |class| join!(class, "-end")), - dropdown::MenuAlign::EndAndStart(bp) => bp.try_class("dropdown-menu") - .map_or( - "dropdown-menu-end".into(), - |class| join!("dropdown-menu-end ", class, "-start") - ), - }); + @let mut btn_classes = AttrClasses::new({ + let mut classes = "btn".to_string(); + self.button_size().push_class(&mut classes); + self.button_color().push_class(&mut classes); + classes + }); + @let pos = self.menu_position(); + @let offset = pos.data_offset(); + @let reference = pos.data_reference(); + @let auto_close = self.auto_close.as_str(); + @let menu_classes = AttrClasses::new({ + let mut classes = "dropdown-menu".to_string(); + self.menu_align().push_class(&mut classes); + classes + }); // Renderizado en modo split (dos botones) o simple (un botón). @if self.button_split() { diff --git a/extensions/pagetop-bootsier/src/theme/dropdown/item.rs b/extensions/pagetop-bootsier/src/theme/dropdown/item.rs index a13058d..2f62f28 100644 --- a/extensions/pagetop-bootsier/src/theme/dropdown/item.rs +++ b/extensions/pagetop-bootsier/src/theme/dropdown/item.rs @@ -115,7 +115,7 @@ impl Component for Item { } ItemKind::Button { label, disabled } => { - let mut classes = "dropdown-item".to_owned(); + let mut classes = "dropdown-item".to_string(); if *disabled { classes.push_str(" disabled"); } diff --git a/extensions/pagetop-bootsier/src/theme/dropdown/props.rs b/extensions/pagetop-bootsier/src/theme/dropdown/props.rs index da305ea..7571332 100644 --- a/extensions/pagetop-bootsier/src/theme/dropdown/props.rs +++ b/extensions/pagetop-bootsier/src/theme/dropdown/props.rs @@ -7,7 +7,7 @@ use crate::prelude::*; /// Estrategia para el cierre automático de un menú [`Dropdown`]. /// /// Define cuándo se cierra el menú desplegado según la interacción del usuario. -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum AutoClose { /// Comportamiento por defecto, se cierra con clics dentro y fuera del menú, o pulsando `Esc`. #[default] @@ -21,12 +21,26 @@ pub enum AutoClose { ManualClose, } +impl AutoClose { + // Devuelve el valor para `data-bs-auto-close`, o `None` si es el comportamiento por defecto. + #[rustfmt::skip] + #[inline] + pub(crate) const fn as_str(self) -> Option<&'static str> { + match self { + Self::Default => None, + Self::ClickableInside => Some("inside"), + Self::ClickableOutside => Some("outside"), + Self::ManualClose => Some("false"), + } + } +} + // **< Direction >********************************************************************************** /// Dirección de despliegue de un menú [`Dropdown`]. /// /// Controla desde qué posición se muestra el menú respecto al botón. -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum Direction { /// Comportamiento por defecto (despliega el menú hacia abajo desde la posición inicial, /// respetando LTR/RTL). @@ -44,13 +58,58 @@ pub enum Direction { Dropstart, } +impl Direction { + // Mapea la dirección teniendo en cuenta si se agrupa con otros menús [`Dropdown`]. + #[rustfmt::skip ] + #[inline] + const fn as_str(self, grouped: bool) -> &'static str { + match self { + Self::Default if grouped => "", + Self::Default => "dropdown", + Self::Centered => "dropdown-center", + Self::Dropup => "dropup", + Self::DropupCentered => "dropup-center", + Self::Dropend => "dropend", + Self::Dropstart => "dropstart", + } + } + + // Añade la dirección de despliegue a la cadena de clases teniendo en cuenta si se agrupa con + // otros menús [`Dropdown`]. + #[inline] + pub(crate) fn push_class(self, classes: &mut String, grouped: bool) { + if grouped { + if !classes.is_empty() { + classes.push(' '); + } + classes.push_str("btn-group"); + } + let class = self.as_str(grouped); + if !class.is_empty() { + if !classes.is_empty() { + classes.push(' '); + } + classes.push_str(class); + } + } + + // Devuelve la clase asociada a la dirección teniendo en cuenta si se agrupa con otros menús + // [`Dropdown`], o `""` si no corresponde ninguna. + #[inline] + pub(crate) fn class_with(self, grouped: bool) -> String { + let mut classes = String::new(); + self.push_class(&mut classes, grouped); + classes + } +} + // **< MenuAlign >********************************************************************************** /// Alineación horizontal del menú desplegable [`Dropdown`]. /// /// Permite alinear el menú al inicio o al final del botón (respetando LTR/RTL) y añadirle una /// alineación diferente a partir de un punto de ruptura ([`BreakPoint`]). -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum MenuAlign { /// Alineación al inicio (comportamiento por defecto). #[default] @@ -67,13 +126,74 @@ pub enum MenuAlign { EndAndStart(BreakPoint), } +impl MenuAlign { + #[inline] + fn push_one(classes: &mut String, class: &str) { + if class.is_empty() { + return; + } + if !classes.is_empty() { + classes.push(' '); + } + classes.push_str(class); + } + + // Añade las clases de alineación a `classes` (sin incluir la base `dropdown-menu`). + #[inline] + pub(crate) fn push_class(self, classes: &mut String) { + match self { + // Alineación por defecto (start), no añade clases extra. + Self::Start => {} + + // `dropdown-menu-{bp}-start` + Self::StartAt(bp) => { + let class = bp.class_with("dropdown-menu", "start"); + Self::push_one(classes, &class); + } + + // `dropdown-menu-start` + `dropdown-menu-{bp}-end` + Self::StartAndEnd(bp) => { + Self::push_one(classes, "dropdown-menu-start"); + let bp_class = bp.class_with("dropdown-menu", "end"); + Self::push_one(classes, &bp_class); + } + + // `dropdown-menu-end` + Self::End => { + Self::push_one(classes, "dropdown-menu-end"); + } + + // `dropdown-menu-{bp}-end` + Self::EndAt(bp) => { + let class = bp.class_with("dropdown-menu", "end"); + Self::push_one(classes, &class); + } + + // `dropdown-menu-end` + `dropdown-menu-{bp}-start` + Self::EndAndStart(bp) => { + Self::push_one(classes, "dropdown-menu-end"); + let bp_class = bp.class_with("dropdown-menu", "start"); + Self::push_one(classes, &bp_class); + } + } + } + + /* Devuelve las clases de alineación sin incluir `dropdown-menu` (reservado). + #[inline] + pub(crate) fn to_class(self) -> String { + let mut classes = String::new(); + self.push_class(&mut classes); + classes + } */ +} + // **< MenuPosition >******************************************************************************* /// Posición relativa del menú desplegable [`Dropdown`]. /// /// Permite indicar un desplazamiento (*offset*) manual o referenciar al elemento padre para el /// cálculo de la posición. -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum MenuPosition { /// Posicionamiento automático por defecto. #[default] @@ -84,3 +204,23 @@ pub enum MenuPosition { /// [`button_split()`](crate::theme::Dropdown::button_split) es `true`. Parent, } + +impl MenuPosition { + // Devuelve el valor para `data-bs-offset` o `None` si no aplica. + #[inline] + pub(crate) fn data_offset(self) -> Option { + match self { + Self::Offset(x, y) => Some(format!("{x},{y}")), + _ => None, + } + } + + // Devuelve el valor para `data-bs-reference` o `None` si no aplica. + #[inline] + pub(crate) fn data_reference(self) -> Option<&'static str> { + match self { + Self::Parent => Some("parent"), + _ => None, + } + } +} diff --git a/extensions/pagetop-bootsier/src/theme/image/component.rs b/extensions/pagetop-bootsier/src/theme/image/component.rs index 2eda430..bc3f2c9 100644 --- a/extensions/pagetop-bootsier/src/theme/image/component.rs +++ b/extensions/pagetop-bootsier/src/theme/image/component.rs @@ -29,38 +29,11 @@ impl Component for Image { } fn setup_before_prepare(&mut self, _cx: &mut Context) { - self.alter_classes( - ClassesOp::Prepend, - match self.source() { - image::Source::Logo(_) => "img-fluid", - image::Source::Responsive(_) => "img-fluid", - image::Source::Thumbnail(_) => "img-thumbnail", - image::Source::Plain(_) => "", - }, - ); + self.alter_classes(ClassesOp::Prepend, self.source().to_class()); } fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup { - let dimensions = match self.size() { - image::Size::Auto => None, - image::Size::Dimensions(w, h) => { - let w = w.to_string(); - let h = h.to_string(); - Some(join!("width: ", w, "; height: ", h, ";")) - } - image::Size::Width(w) => { - let w = w.to_string(); - Some(join!("width: ", w, ";")) - } - image::Size::Height(h) => { - let h = h.to_string(); - Some(join!("height: ", h, ";")) - } - image::Size::Both(v) => { - let v = v.to_string(); - Some(join!("width: ", v, "; height: ", v, ";")) - } - }; + let dimensions = self.size().to_style(); let alt_text = self.alternative().lookup(cx).unwrap_or_default(); let is_decorative = alt_text.is_empty(); let source = match self.source() { diff --git a/extensions/pagetop-bootsier/src/theme/image/props.rs b/extensions/pagetop-bootsier/src/theme/image/props.rs index f871de7..e9b1286 100644 --- a/extensions/pagetop-bootsier/src/theme/image/props.rs +++ b/extensions/pagetop-bootsier/src/theme/image/props.rs @@ -3,7 +3,7 @@ use pagetop::prelude::*; // **< Size >*************************************************************************************** /// Define las **dimensiones** de una imagen ([`Image`](crate::theme::Image)). -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum Size { /// Ajuste automático por defecto. /// @@ -30,10 +30,24 @@ pub enum Size { Both(UnitValue), } +impl Size { + // Devuelve el valor del atributo `style` en función del tamaño, o `None` si no aplica. + #[inline] + pub(crate) fn to_style(self) -> Option { + match self { + Self::Auto => None, + Self::Dimensions(w, h) => Some(format!("width: {w}; height: {h};")), + Self::Width(w) => Some(format!("width: {w};")), + Self::Height(h) => Some(format!("height: {h};")), + Self::Both(v) => Some(format!("width: {v}; height: {v};")), + } + } +} + // **< Source >************************************************************************************* /// Especifica la **fuente** para publicar una imagen ([`Image`](crate::theme::Image)). -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Debug, PartialEq)] pub enum Source { /// Imagen con el logotipo de PageTop. #[default] @@ -51,3 +65,44 @@ pub enum Source { /// El `String` asociado es la URL (o ruta) de la imagen. Plain(String), } + +impl Source { + const IMG_FLUID: &str = "img-fluid"; + const IMG_THUMBNAIL: &str = "img-thumbnail"; + + // Devuelve la clase base asociada a la imagen según la fuente. + #[inline] + fn as_str(&self) -> &'static str { + match self { + Source::Logo(_) | Source::Responsive(_) => Self::IMG_FLUID, + Source::Thumbnail(_) => Self::IMG_THUMBNAIL, + Source::Plain(_) => "", + } + } + + /* Añade la clase base asociada a la imagen según la fuente a la cadena de clases (reservado). + #[inline] + pub(crate) fn push_class(&self, classes: &mut String) { + let s = self.as_str(); + if s.is_empty() { + return; + } + if !classes.is_empty() { + classes.push(' '); + } + classes.push_str(s); + } */ + + // Devuelve la clase asociada a la imagen según la fuente. + #[inline] + pub(crate) fn to_class(&self) -> String { + let s = self.as_str(); + if s.is_empty() { + String::new() + } else { + let mut class = String::with_capacity(s.len()); + class.push_str(s); + class + } + } +} diff --git a/extensions/pagetop-bootsier/src/theme/nav/component.rs b/extensions/pagetop-bootsier/src/theme/nav/component.rs index fe886bd..2bd4377 100644 --- a/extensions/pagetop-bootsier/src/theme/nav/component.rs +++ b/extensions/pagetop-bootsier/src/theme/nav/component.rs @@ -30,28 +30,12 @@ impl Component for Nav { } fn setup_before_prepare(&mut self, _cx: &mut Context) { - self.alter_classes( - ClassesOp::Prepend, - [ - "nav", - match self.nav_kind() { - nav::Kind::Default => "", - nav::Kind::Tabs => "nav-tabs", - nav::Kind::Pills => "nav-pills", - nav::Kind::Underline => "nav-underline", - }, - match self.nav_layout() { - nav::Layout::Default => "", - nav::Layout::Start => "justify-content-start", - nav::Layout::Center => "justify-content-center", - nav::Layout::End => "justify-content-end", - nav::Layout::Vertical => "flex-column", - nav::Layout::Fill => "nav-fill", - nav::Layout::Justified => "nav-justified", - }, - ] - .join_classes(), - ); + self.alter_classes(ClassesOp::Prepend, { + let mut classes = "nav".to_string(); + self.nav_kind().push_class(&mut classes); + self.nav_layout().push_class(&mut classes); + classes + }); } fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup { diff --git a/extensions/pagetop-bootsier/src/theme/nav/item.rs b/extensions/pagetop-bootsier/src/theme/nav/item.rs index bc097e0..a79947c 100644 --- a/extensions/pagetop-bootsier/src/theme/nav/item.rs +++ b/extensions/pagetop-bootsier/src/theme/nav/item.rs @@ -29,6 +29,40 @@ pub enum ItemKind { Dropdown(Typed), } +impl ItemKind { + const ITEM: &str = "nav-item"; + const DROPDOWN: &str = "nav-item dropdown"; + + // Devuelve las clases base asociadas al tipo de elemento. + #[inline] + const fn as_str(&self) -> &'static str { + match self { + Self::Void => "", + Self::Dropdown(_) => Self::DROPDOWN, + _ => Self::ITEM, + } + } + + /* Añade las clases asociadas al tipo de elemento a la cadena de clases (reservado). + #[inline] + pub(crate) fn push_class(&self, classes: &mut String) { + let class = self.as_str(); + if class.is_empty() { + return; + } + if !classes.is_empty() { + classes.push(' '); + } + classes.push_str(class); + } */ + + // Devuelve las clases asociadas al tipo de elemento. + #[inline] + pub(crate) fn to_class(&self) -> String { + self.as_str().to_owned() + } +} + // **< Item >*************************************************************************************** /// Representa un **elemento individual** de un menú [`Nav`](crate::theme::Nav). @@ -56,14 +90,7 @@ impl Component for Item { } fn setup_before_prepare(&mut self, _cx: &mut Context) { - self.alter_classes( - ClassesOp::Prepend, - if matches!(self.item_kind(), ItemKind::Dropdown(_)) { - "nav-item dropdown" - } else { - "nav-item" - }, - ); + self.alter_classes(ClassesOp::Prepend, self.item_kind().to_class()); } fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup { @@ -96,12 +123,12 @@ impl Component for Item { classes.push_str(" disabled"); } - let href = (!disabled).then_some(path); - let target = (!disabled && *blank).then_some("_blank"); - let rel = (!disabled && *blank).then_some("noopener noreferrer"); + let href = (!*disabled).then_some(path); + let target = (!*disabled && *blank).then_some("_blank"); + let rel = (!*disabled && *blank).then_some("noopener noreferrer"); let aria_current = (href.is_some() && is_current).then_some("page"); - let aria_disabled = disabled.then_some("true"); + let aria_disabled = (*disabled).then_some("true"); PrepareMarkup::With(html! { li id=[self.id()] class=[self.classes().get()] { diff --git a/extensions/pagetop-bootsier/src/theme/nav/props.rs b/extensions/pagetop-bootsier/src/theme/nav/props.rs index bd8ac1e..46a4e2b 100644 --- a/extensions/pagetop-bootsier/src/theme/nav/props.rs +++ b/extensions/pagetop-bootsier/src/theme/nav/props.rs @@ -3,7 +3,7 @@ use pagetop::prelude::*; // **< Kind >*************************************************************************************** /// Define la variante de presentación de un menú [`Nav`](crate::theme::Nav). -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum Kind { /// Estilo por defecto, lista de enlaces flexible y minimalista. #[default] @@ -16,10 +16,47 @@ pub enum Kind { Underline, } +impl Kind { + const TABS: &str = "nav-tabs"; + const PILLS: &str = "nav-pills"; + const UNDERLINE: &str = "nav-underline"; + + // Devuelve la clase base asociada al tipo de menú, o una cadena vacía si no aplica. + #[rustfmt::skip] + #[inline] + const fn as_str(self) -> &'static str { + match self { + Self::Default => "", + Self::Tabs => Self::TABS, + Self::Pills => Self::PILLS, + Self::Underline => Self::UNDERLINE, + } + } + + // Añade la clase asociada al tipo de menú a la cadena de clases. + #[inline] + pub(crate) fn push_class(self, classes: &mut String) { + let class = self.as_str(); + if class.is_empty() { + return; + } + if !classes.is_empty() { + classes.push(' '); + } + classes.push_str(class); + } + + /* Devuelve la clase asociada al tipo de menú, o una cadena vacía si no aplica (reservado). + #[inline] + pub(crate) fn to_class(self) -> String { + self.as_str().to_owned() + } */ +} + // **< Layout >************************************************************************************* /// Distribución y orientación de un menú [`Nav`](crate::theme::Nav). -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum Layout { /// Comportamiento por defecto, ancho definido por el contenido y sin alineación forzada. #[default] @@ -37,3 +74,47 @@ pub enum Layout { /// Todos los elementos ocupan el mismo ancho rellenando la fila. Justified, } + +impl Layout { + const START: &str = "justify-content-start"; + const CENTER: &str = "justify-content-center"; + const END: &str = "justify-content-end"; + const VERTICAL: &str = "flex-column"; + const FILL: &str = "nav-fill"; + const JUSTIFIED: &str = "nav-justified"; + + // Devuelve la clase base asociada a la distribución y orientación del menú. + #[rustfmt::skip] + #[inline] + const fn as_str(self) -> &'static str { + match self { + Self::Default => "", + Self::Start => Self::START, + Self::Center => Self::CENTER, + Self::End => Self::END, + Self::Vertical => Self::VERTICAL, + Self::Fill => Self::FILL, + Self::Justified => Self::JUSTIFIED, + } + } + + // Añade la clase asociada a la distribución y orientación del menú a la cadena de clases. + #[inline] + pub(crate) fn push_class(self, classes: &mut String) { + let class = self.as_str(); + if class.is_empty() { + return; + } + if !classes.is_empty() { + classes.push(' '); + } + classes.push_str(class); + } + + /* Devuelve la clase asociada a la distribución y orientación del menú, o una cadena vacía si no + // aplica (reservado). + #[inline] + pub(crate) fn to_class(self) -> String { + self.as_str().to_owned() + } */ +} diff --git a/extensions/pagetop-bootsier/src/theme/navbar/component.rs b/extensions/pagetop-bootsier/src/theme/navbar/component.rs index ac59243..b40d06c 100644 --- a/extensions/pagetop-bootsier/src/theme/navbar/component.rs +++ b/extensions/pagetop-bootsier/src/theme/navbar/component.rs @@ -35,22 +35,12 @@ impl Component for Navbar { } fn setup_before_prepare(&mut self, _cx: &mut Context) { - self.alter_classes( - ClassesOp::Prepend, - [ - "navbar".to_string(), - self.expand().try_class("navbar-expand").unwrap_or_default(), - match self.position() { - navbar::Position::Static => "", - navbar::Position::FixedTop => "fixed-top", - navbar::Position::FixedBottom => "fixed-bottom", - navbar::Position::StickyTop => "sticky-top", - navbar::Position::StickyBottom => "sticky-bottom", - } - .to_string(), - ] - .join_classes(), - ); + self.alter_classes(ClassesOp::Prepend, { + let mut classes = "navbar".to_string(); + self.expand().push_class(&mut classes, "navbar-expand", ""); + self.position().push_class(&mut classes); + classes + }); } fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup { diff --git a/extensions/pagetop-bootsier/src/theme/navbar/item.rs b/extensions/pagetop-bootsier/src/theme/navbar/item.rs index 07f52be..7e912a4 100644 --- a/extensions/pagetop-bootsier/src/theme/navbar/item.rs +++ b/extensions/pagetop-bootsier/src/theme/navbar/item.rs @@ -38,6 +38,14 @@ impl Component for Item { } } + fn setup_before_prepare(&mut self, _cx: &mut Context) { + if let Self::Nav(nav) = self { + if let Some(mut nav) = nav.borrow_mut() { + nav.alter_classes(ClassesOp::Prepend, "navbar-nav"); + } + } + } + fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup { match self { Self::Void => PrepareMarkup::None, @@ -48,29 +56,8 @@ impl Component for Item { if items.is_empty() { return PrepareMarkup::None; } - let classes = AttrClasses::new( - [ - "navbar-nav", - match nav.nav_kind() { - nav::Kind::Default => "", - nav::Kind::Tabs => "nav-tabs", - nav::Kind::Pills => "nav-pills", - nav::Kind::Underline => "nav-underline", - }, - match nav.nav_layout() { - nav::Layout::Default => "", - nav::Layout::Start => "justify-content-start", - nav::Layout::Center => "justify-content-center", - nav::Layout::End => "justify-content-end", - nav::Layout::Vertical => "flex-column", - nav::Layout::Fill => "nav-fill", - nav::Layout::Justified => "nav-justified", - }, - ] - .join_classes(), - ); PrepareMarkup::With(html! { - ul id=[nav.id()] class=[classes.get()] { + ul id=[nav.id()] class=[nav.classes().get()] { (items) } }) diff --git a/extensions/pagetop-bootsier/src/theme/navbar/props.rs b/extensions/pagetop-bootsier/src/theme/navbar/props.rs index 8632657..1aeb617 100644 --- a/extensions/pagetop-bootsier/src/theme/navbar/props.rs +++ b/extensions/pagetop-bootsier/src/theme/navbar/props.rs @@ -42,7 +42,7 @@ pub enum Layout { // **< Position >*********************************************************************************** /// Posición global de una barra de navegación [`Navbar`] en el documento. -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum Position { /// Barra normal, fluye con el documento. #[default] @@ -62,3 +62,37 @@ pub enum Position { /// La barra de navegación se fija en la parte inferior al hacer *scroll*. StickyBottom, } + +impl Position { + // Devuelve la clase base asociada a la posición de la barra de navegación. + #[inline] + const fn as_str(self) -> &'static str { + match self { + Self::Static => "", + Self::FixedTop => "fixed-top", + Self::FixedBottom => "fixed-bottom", + Self::StickyTop => "sticky-top", + Self::StickyBottom => "sticky-bottom", + } + } + + // Añade la clase asociada a la posición de la barra de navegación a la cadena de clases. + #[inline] + pub(crate) fn push_class(self, classes: &mut String) { + let class = self.as_str(); + if class.is_empty() { + return; + } + if !classes.is_empty() { + classes.push(' '); + } + classes.push_str(class); + } + + /* Devuelve la clase asociada a la posición de la barra de navegación, o cadena vacía si no + // aplica (reservado). + #[inline] + pub(crate) fn to_class(self) -> String { + self.as_str().to_string() + } */ +} diff --git a/extensions/pagetop-bootsier/src/theme/offcanvas/component.rs b/extensions/pagetop-bootsier/src/theme/offcanvas/component.rs index 7516238..f17fe97 100644 --- a/extensions/pagetop-bootsier/src/theme/offcanvas/component.rs +++ b/extensions/pagetop-bootsier/src/theme/offcanvas/component.rs @@ -44,25 +44,14 @@ impl Component for Offcanvas { self.id.get() } - #[rustfmt::skip] fn setup_before_prepare(&mut self, _cx: &mut Context) { - self.alter_classes( - ClassesOp::Prepend, - [ - self.breakpoint().to_class("offcanvas"), - match self.placement() { - offcanvas::Placement::Start => "offcanvas-start", - offcanvas::Placement::End => "offcanvas-end", - offcanvas::Placement::Top => "offcanvas-top", - offcanvas::Placement::Bottom => "offcanvas-bottom", - }.to_string(), - match self.visibility() { - offcanvas::Visibility::Default => "", - offcanvas::Visibility::Show => "show", - }.to_string(), - ] - .join_classes(), - ); + self.alter_classes(ClassesOp::Prepend, { + let mut classes = "offcanvas".to_string(); + self.breakpoint().push_class(&mut classes, "offcanvas", ""); + self.placement().push_class(&mut classes); + self.visibility().push_class(&mut classes); + classes + }); } fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup { diff --git a/extensions/pagetop-bootsier/src/theme/offcanvas/props.rs b/extensions/pagetop-bootsier/src/theme/offcanvas/props.rs index cbacbd7..cdfe862 100644 --- a/extensions/pagetop-bootsier/src/theme/offcanvas/props.rs +++ b/extensions/pagetop-bootsier/src/theme/offcanvas/props.rs @@ -4,7 +4,7 @@ use pagetop::prelude::*; /// Comportamiento de la capa de fondo (*backdrop*) de un panel /// [`Offcanvas`](crate::theme::Offcanvas) al deslizarse. -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum Backdrop { /// Sin capa de fondo, la página principal permanece visible e interactiva. Disabled, @@ -20,7 +20,7 @@ pub enum Backdrop { /// Controla si la página principal puede desplazarse al abrir un panel /// [`Offcanvas`](crate::theme::Offcanvas). -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum BodyScroll { /// Opción por defecto, la página principal se bloquea centrando la interacción en el panel. #[default] @@ -34,7 +34,7 @@ pub enum BodyScroll { /// Posición de aparición de un panel [`Offcanvas`](crate::theme::Offcanvas) al deslizarse. /// /// Define desde qué borde de la ventana entra y se ancla el panel. -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum Placement { /// Opción por defecto, desde el borde inicial según dirección de lectura (respetando LTR/RTL). #[default] @@ -47,10 +47,39 @@ pub enum Placement { Bottom, } +impl Placement { + // Devuelve la clase base asociada a la posición de aparición del panel. + #[rustfmt::skip] + #[inline] + const fn as_str(self) -> &'static str { + match self { + Placement::Start => "offcanvas-start", + Placement::End => "offcanvas-end", + Placement::Top => "offcanvas-top", + Placement::Bottom => "offcanvas-bottom", + } + } + + // Añade la clase asociada a la posición de aparición del panel a la cadena de clases. + #[inline] + pub(crate) fn push_class(self, classes: &mut String) { + if !classes.is_empty() { + classes.push(' '); + } + classes.push_str(self.as_str()); + } + + /* Devuelve la clase asociada a la posición de aparición del panel (reservado). + #[inline] + pub(crate) fn to_class(self) -> String { + self.as_str().to_owned() + } */ +} + // **< Visibility >********************************************************************************* /// Estado inicial de un panel [`Offcanvas`](crate::theme::Offcanvas). -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum Visibility { /// El panel permanece oculto desde el principio. #[default] @@ -58,3 +87,33 @@ pub enum Visibility { /// El panel se muestra abierto al cargar. Show, } + +impl Visibility { + // Devuelve la clase base asociada al estado inicial del panel. + #[inline] + const fn as_str(self) -> &'static str { + match self { + Visibility::Default => "", + Visibility::Show => "show", + } + } + + // Añade la clase asociada al estado inicial del panel a la cadena de clases. + #[inline] + pub(crate) fn push_class(self, classes: &mut String) { + let class = self.as_str(); + if class.is_empty() { + return; + } + if !classes.is_empty() { + classes.push(' '); + } + classes.push_str(class); + } + + /* Devuelve la clase asociada al estado inicial, o una cadena vacía si no aplica (reservado). + #[inline] + pub(crate) fn to_class(self) -> String { + self.as_str().to_owned() + } */ +} diff --git a/src/base/component.rs b/src/base/component.rs index 508a28e..bdab35c 100644 --- a/src/base/component.rs +++ b/src/base/component.rs @@ -2,11 +2,9 @@ use crate::prelude::*; -use std::fmt; - // **< FontSize >*********************************************************************************** -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum FontSize { ExtraLarge, XxLarge, @@ -24,7 +22,7 @@ pub enum FontSize { #[rustfmt::skip] impl FontSize { #[inline] - pub const fn as_str(&self) -> &'static str { + pub const fn as_str(self) -> &'static str { match self { FontSize::ExtraLarge => "fs__x3l", FontSize::XxLarge => "fs__x2l", @@ -40,12 +38,6 @@ impl FontSize { } } -impl fmt::Display for FontSize { - fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result { - f.write_str(self.as_str()) - } -} - // ************************************************************************************************* mod html; diff --git a/src/html.rs b/src/html.rs index f8709dc..5f5b833 100644 --- a/src/html.rs +++ b/src/html.rs @@ -87,9 +87,6 @@ use crate::{core, AutoDefault}; #[allow(type_alias_bounds)] pub type OptionComponent = core::component::Typed; -mod join_classes; -pub use join_classes::JoinClasses; - mod unit; pub use unit::UnitValue; diff --git a/src/html/assets/stylesheet.rs b/src/html/assets/stylesheet.rs index 68a13da..abadef8 100644 --- a/src/html/assets/stylesheet.rs +++ b/src/html/assets/stylesheet.rs @@ -23,7 +23,7 @@ enum Source { /// /// Permite especificar en qué contexto se aplica el CSS, adaptándose a diferentes dispositivos o /// situaciones de impresión. -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum TargetMedia { /// Se aplica en todos los casos (el atributo `media` se omite). #[default] @@ -39,7 +39,7 @@ pub enum TargetMedia { /// Devuelve el valor para el atributo `media` (`Some(...)`) o `None` para `Default`. #[rustfmt::skip] impl TargetMedia { - fn as_str_opt(&self) -> Option<&str> { + const fn as_str(self) -> Option<&'static str> { match self { TargetMedia::Default => None, TargetMedia::Print => Some("print"), @@ -171,7 +171,7 @@ impl Asset for StyleSheet { link rel="stylesheet" href=(join_pair!(path, "?v=", &self.version)) - media=[self.media.as_str_opt()]; + media=[self.media.as_str()]; }, Source::Inline(_, f) => html! { style { (PreEscaped((f)(cx))) }; diff --git a/src/html/join_classes.rs b/src/html/join_classes.rs deleted file mode 100644 index 3f7d7e7..0000000 --- a/src/html/join_classes.rs +++ /dev/null @@ -1,67 +0,0 @@ -/// Añade a los *slices* de elementos [`AsRef`] un método para unir clases CSS. -/// -/// El método es [`join_classes()`](JoinClasses::join_classes), que une las cadenas **no vacías** -/// del *slice* usando un espacio como separador. -pub trait JoinClasses { - /// Une las cadenas **no vacías** de un *slice* usando un espacio como separador. - /// - /// Son cadenas vacías únicamente los elementos del *slice* cuya longitud es `0` (p. ej., `""`); - /// no se realiza recorte ni normalización, por lo que elementos como `" "` no se consideran - /// vacíos. - /// - /// Si todas las cadenas están vacías, devuelve una cadena vacía. Acepta elementos que - /// implementen [`AsRef`] como `&str`, [`String`] o `Cow<'_, str>`. - /// - /// # Ejemplos - /// - /// ```rust - /// # use pagetop::prelude::*; - /// let classes = ["btn", "", "btn-primary"]; - /// assert_eq!(classes.join_classes(), "btn btn-primary"); - /// - /// let empty: [&str; 3] = ["", "", ""]; - /// assert_eq!(empty.join_classes(), ""); - /// - /// let border = String::from("border"); - /// let border_top = String::from("border-top-0"); - /// let v = vec![&border, "", "", "", &border_top]; - /// assert_eq!(v.as_slice().join_classes(), "border border-top-0"); - /// - /// // Elementos con espacios afectan al resultado. - /// let spaced = ["btn", " ", "primary "]; - /// assert_eq!(spaced.join_classes(), "btn primary "); - /// ``` - fn join_classes(&self) -> String; -} - -impl JoinClasses for [T] -where - T: AsRef, -{ - #[inline] - fn join_classes(&self) -> String { - let mut count = 0usize; - let mut total = 0usize; - for s in self.iter().map(T::as_ref).filter(|s| !s.is_empty()) { - count += 1; - total += s.len(); - } - if count == 0 { - return String::new(); - } - let separator = " "; - let mut result = String::with_capacity(total + separator.len() * count.saturating_sub(1)); - for (i, s) in self - .iter() - .map(T::as_ref) - .filter(|s| !s.is_empty()) - .enumerate() - { - if i > 0 { - result.push_str(separator); - } - result.push_str(s); - } - result - } -} diff --git a/src/html/logo.rs b/src/html/logo.rs index f5057d9..fd60441 100644 --- a/src/html/logo.rs +++ b/src/html/logo.rs @@ -27,7 +27,7 @@ use crate::AutoDefault; /// }; /// ``` -#[derive(AutoDefault)] +#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] pub enum PageTopSvg { /// Versión por defecto con el logotipo a color. #[default] diff --git a/src/prelude.rs b/src/prelude.rs index 0919e99..47fbbf6 100644 --- a/src/prelude.rs +++ b/src/prelude.rs @@ -33,8 +33,8 @@ pub use crate::trace; // alias obsoletos se volverá a declarar como `pub use crate::html::*;`. pub use crate::html::{ display, html_private, Asset, Assets, AttrClasses, AttrId, AttrL10n, AttrName, AttrValue, - ClassesOp, Escaper, Favicon, JavaScript, JoinClasses, Markup, PageTopSvg, PreEscaped, - PrepareMarkup, StyleSheet, TargetMedia, UnitValue, DOCTYPE, + ClassesOp, Escaper, Favicon, JavaScript, Markup, PageTopSvg, PreEscaped, PrepareMarkup, + StyleSheet, TargetMedia, UnitValue, DOCTYPE, }; pub use crate::locale::*;