✨ Añade clases de fondo, texto, bordes y esquinas
- Refactoriza el componente contenedor `Container` para usar estas clases y aplicar los nuevos enums `Kind` y `Width` para mejorar el comportamiento semántico y *responsive*. - Actualiza los componentes `Dropdown`, `Image`, `Nav`, `Navbar` y `Offcanvas` para usar los nuevos métodos de unión de clases. - Elimina propiedades de estilo redundantes de los componentes `Navbar` e `Image`, simplificando sus interfaces.
This commit is contained in:
parent
5ec69345b3
commit
748bd81bf1
23 changed files with 1041 additions and 994 deletions
|
|
@ -1,16 +1,47 @@
|
|||
use pagetop::prelude::*;
|
||||
|
||||
use crate::prelude::*;
|
||||
use crate::theme::aux::Color;
|
||||
|
||||
use std::fmt;
|
||||
|
||||
// **< BorderColor >********************************************************************************
|
||||
|
||||
/// Colores `border-*` para los bordes ([`classes::Border`](crate::theme::classes::Border)).
|
||||
#[derive(AutoDefault)]
|
||||
pub enum BorderColor {
|
||||
/// No define ninguna clase.
|
||||
#[default]
|
||||
Default,
|
||||
/// Genera internamente clases `border-{color}`.
|
||||
Theme(Color),
|
||||
/// Genera internamente clases `border-{color}-subtle` (un tono suavizado del color).
|
||||
Subtle(Color),
|
||||
/// Color negro.
|
||||
Black,
|
||||
/// Color blanco.
|
||||
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"),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// **< BorderSize >*********************************************************************************
|
||||
|
||||
/// Tamaño para el ancho de los bordes ([`Border`]).
|
||||
/// 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 clase (devuelve `""`).
|
||||
/// - `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).
|
||||
|
|
@ -29,7 +60,7 @@ pub enum BorderSize {
|
|||
|
||||
impl BorderSize {
|
||||
#[rustfmt::skip]
|
||||
fn to_class(&self, prefix: impl AsRef<str>) -> String {
|
||||
pub(crate) fn to_class(&self, prefix: impl AsRef<str>) -> String {
|
||||
match self {
|
||||
Self::None => String::new(),
|
||||
Self::Default => String::from(prefix.as_ref()),
|
||||
|
|
@ -48,146 +79,3 @@ impl fmt::Display for BorderSize {
|
|||
write!(f, "{}", self.to_class("border"))
|
||||
}
|
||||
}
|
||||
|
||||
// **< Border >*************************************************************************************
|
||||
|
||||
/// Agrupa propiedades para crear **bordes**.
|
||||
///
|
||||
/// Permite:
|
||||
///
|
||||
/// - 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 (`ColorBorder`).
|
||||
/// - Aplicar un nivel de **opacidad** (`BorderOpacity`).
|
||||
///
|
||||
/// # Comportamiento aditivo / sustractivo
|
||||
///
|
||||
/// - **Aditivo**: basta con crear un borde sin tamaño con `Border::new()` para ir añadiendo cada
|
||||
/// lado lógico con el tamaño deseado usando `BorderSize::Scale{1..5}`.
|
||||
///
|
||||
/// - **Sustractivo**: se crea un borde con tamaño predefinido, p. ej. utilizando
|
||||
/// `Border::with(BorderSize::Scale2)` y eliminar los lados deseados con `BorderSize::Zero`.
|
||||
///
|
||||
/// - **Anchos diferentes por lado**: usando `BorderSize::Scale{1..5}` en cada lado deseado.
|
||||
///
|
||||
/// # Ejemplos
|
||||
///
|
||||
/// **Borde global:**
|
||||
/// ```rust
|
||||
/// # use pagetop_bootsier::prelude::*;
|
||||
/// let b = Border::with(BorderSize::Scale2);
|
||||
/// assert_eq!(b.to_string(), "border-2");
|
||||
/// ```
|
||||
///
|
||||
/// **Aditivo (solo borde superior):**
|
||||
/// ```rust
|
||||
/// # use pagetop_bootsier::prelude::*;
|
||||
/// let b = Border::new().with_top(BorderSize::Scale1);
|
||||
/// assert_eq!(b.to_string(), "border-top-1");
|
||||
/// ```
|
||||
///
|
||||
/// **Sustractivo (borde global menos el superior):**
|
||||
/// ```rust
|
||||
/// # use pagetop_bootsier::prelude::*;
|
||||
/// let b = Border::with(BorderSize::Default).with_top(BorderSize::Zero);
|
||||
/// assert_eq!(b.to_string(), "border border-top-0");
|
||||
/// ```
|
||||
///
|
||||
/// **Ancho por lado (lado lógico inicial a 2 y final a 4):**
|
||||
/// ```rust
|
||||
/// # use pagetop_bootsier::prelude::*;
|
||||
/// let b = Border::new().with_start(BorderSize::Scale2).with_end(BorderSize::Scale4);
|
||||
/// assert_eq!(b.to_string(), "border-end-4 border-start-2");
|
||||
/// ```
|
||||
///
|
||||
/// **Combinado (ejemplo completo):**
|
||||
/// ```rust
|
||||
/// # use pagetop_bootsier::prelude::*;
|
||||
/// let b = 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.
|
||||
/// .with_style(StyleBorder::Both(ColorBorder::Theme(Color::Primary), Opacity::Half));
|
||||
///
|
||||
/// assert_eq!(b.to_string(), "border border-top-0 border-end-3 border-primary border-opacity-50");
|
||||
/// ```
|
||||
#[rustfmt::skip]
|
||||
#[derive(AutoDefault)]
|
||||
pub struct Border {
|
||||
size : BorderSize,
|
||||
top : BorderSize,
|
||||
end : BorderSize,
|
||||
bottom: BorderSize,
|
||||
start : BorderSize,
|
||||
style : StyleBorder,
|
||||
}
|
||||
|
||||
impl Border {
|
||||
/// Prepara un borde **sin tamaño global** de partida.
|
||||
pub fn new() -> Self {
|
||||
Self::default()
|
||||
}
|
||||
|
||||
/// Crea un borde **con tamaño global** (`size`).
|
||||
pub fn with(size: BorderSize) -> Self {
|
||||
Self::default().with_size(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;
|
||||
self
|
||||
}
|
||||
|
||||
/// Establece el estilo de color/opacidad del borde.
|
||||
pub fn with_style(mut self, style: StyleBorder) -> Self {
|
||||
self.style = style;
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl fmt::Display for Border {
|
||||
/// Concatena cada definición en el orden: *global*, `top`, `end`, `bottom`, `start` y
|
||||
/// *color*/*opacidad*; respetando LTR/RTL y omitiendo las definiciones vacías.
|
||||
fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
|
||||
write!(
|
||||
f,
|
||||
"{}",
|
||||
join_opt!([
|
||||
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.style.to_string(),
|
||||
]; " ")
|
||||
.unwrap_or_default()
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue