♻️ (bootsier): Ajusta componentes base
- Añade `#[builder_fn]` a `with_width()`/`with_floating_label()`. - `Rounded::new()` pasa a aplicar el radio por defecto (`Rounded::default()` queda sin redondeo). - `Form::action` usa `Route` en lugar de `AttrValue`, y `check::Item` expone `value` en vez de `name` para generar casillas con `name` compartido valores distintos.
This commit is contained in:
parent
4cc72aac0e
commit
545a87fbb0
9 changed files with 118 additions and 111 deletions
|
|
@ -1,38 +1,22 @@
|
|||
//! Definiciones y componentes del tema.
|
||||
//!
|
||||
//! En esta página, el apartado **Modules** incluye las definiciones necesarias para los componentes
|
||||
//! que se muestran en el apartado **Structs**, mientras que en **Enums** se listan los elementos
|
||||
//! auxiliares del tema utilizados en clases y componentes.
|
||||
//! Definiciones y plantillas del tema Bootsier.
|
||||
|
||||
mod attrs;
|
||||
pub use attrs::*;
|
||||
pub mod bs;
|
||||
|
||||
pub mod classes;
|
||||
pub mod class;
|
||||
|
||||
// Button.
|
||||
mod button;
|
||||
pub use button::{Button, ButtonAction};
|
||||
mod token;
|
||||
pub use token::*;
|
||||
|
||||
// Container.
|
||||
pub mod container;
|
||||
#[doc(inline)]
|
||||
pub use container::Container;
|
||||
|
||||
// Dropdown.
|
||||
pub mod dropdown;
|
||||
#[doc(inline)]
|
||||
pub use dropdown::Dropdown;
|
||||
|
||||
// Form.
|
||||
pub mod form;
|
||||
#[doc(inline)]
|
||||
pub use form::Form;
|
||||
#[doc(hidden)]
|
||||
pub use form::input::InputBootsier;
|
||||
pub use bs::badge::BadgeBootsier;
|
||||
#[doc(hidden)]
|
||||
pub use form::select::SelectBootsier;
|
||||
pub use bs::container::ContainerBootsier;
|
||||
#[doc(hidden)]
|
||||
pub use form::textarea::TextareaBootsier;
|
||||
pub use bs::form::input::InputBootsier;
|
||||
#[doc(hidden)]
|
||||
pub use bs::form::select::SelectBootsier;
|
||||
#[doc(hidden)]
|
||||
pub use bs::form::textarea::TextareaBootsier;
|
||||
|
||||
// Image.
|
||||
pub mod image;
|
||||
|
|
|
|||
|
|
@ -24,6 +24,12 @@ pub use dropdown::Dropdown;
|
|||
pub mod form;
|
||||
#[doc(inline)]
|
||||
pub use form::Form;
|
||||
#[doc(inline)]
|
||||
pub use form::input::InputBootsier;
|
||||
#[doc(inline)]
|
||||
pub use form::select::SelectBootsier;
|
||||
#[doc(inline)]
|
||||
pub use form::textarea::TextareaBootsier;
|
||||
|
||||
// Image.
|
||||
pub mod image;
|
||||
|
|
|
|||
|
|
@ -10,10 +10,12 @@ const EXTRA_WIDTH: &str = "bootsier.container.width";
|
|||
|
||||
/// Extensión de Bootsier para [`Container`].
|
||||
///
|
||||
/// Permite definir el comportamiento del ancho del contenedor usando el método
|
||||
/// [`with_width()`](Self::with_width). También acepta clases predefinidas para:
|
||||
/// Permite establecer el comportamiento del ancho del contenedor usando el método
|
||||
/// [`with_width()`](Self::with_width).
|
||||
///
|
||||
/// - Modificar el color de fondo ([`Background`](crate::theme::class::Background)).
|
||||
/// También habilita al componente para aceptar clases predefinidas para:
|
||||
///
|
||||
/// - Modificar el color de fondo ([`Bg`](crate::theme::class::Bg)).
|
||||
/// - Definir la apariencia del texto ([`Text`](crate::theme::class::Text)).
|
||||
/// - Establecer bordes ([`Border`](crate::theme::class::Border)).
|
||||
/// - Redondear las esquinas ([`Rounded`](crate::theme::class::Rounded)).
|
||||
|
|
@ -24,11 +26,11 @@ const EXTRA_WIDTH: &str = "bootsier.container.width";
|
|||
///
|
||||
/// let main = bs::Container::main()
|
||||
/// .with_id("main-page")
|
||||
/// .with_width(bs::container::Width::From(token::BreakPoint::LG))
|
||||
/// .with_prop(PropsOp::add_classes(class::Background::with(token::Color::Light)))
|
||||
/// .with_prop(PropsOp::add_classes(class::Text::with(token::Color::Dark)))
|
||||
/// .with_prop(PropsOp::add_classes(class::Border::with(token::ScaleSize::One)))
|
||||
/// .with_prop(PropsOp::add_classes(class::Rounded::with(token::RoundedRadius::Default)));
|
||||
/// .with_width(bs::container::Width::From(BreakPoint::LG))
|
||||
/// .with_prop(PropsOp::add_classes(class::Bg::with(ThemeColor::Light)))
|
||||
/// .with_prop(PropsOp::add_classes(class::Text::with(ThemeColor::Dark)))
|
||||
/// .with_prop(PropsOp::add_classes(class::Border::with(ScaleSize::One)))
|
||||
/// .with_prop(PropsOp::add_classes(class::Rounded::new()));
|
||||
/// ```
|
||||
pub trait ContainerBootsier {
|
||||
/// Establece el comportamiento del ancho para el contenedor.
|
||||
|
|
@ -36,12 +38,15 @@ pub trait ContainerBootsier {
|
|||
/// Determina si el contenedor aplica los anchos máximos predefinidos para cada punto de
|
||||
/// ruptura, o si ocupa siempre el 100% del ancho disponible, o lo hace hasta un ancho máximo
|
||||
/// explícito. Ver [`Width`] para las variantes disponibles.
|
||||
#[builder_fn]
|
||||
fn with_width(self, width: Width) -> Self;
|
||||
}
|
||||
|
||||
impl ContainerBootsier for Container {
|
||||
fn with_width(self, width: Width) -> Self {
|
||||
self.with_prop(PropsOp::set_extra(EXTRA_WIDTH, width))
|
||||
#[builder_fn]
|
||||
fn with_width(mut self, width: Width) -> Self {
|
||||
self.alter_prop(PropsOp::set_extra(EXTRA_WIDTH, width));
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -56,7 +61,7 @@ pub enum Width {
|
|||
Default,
|
||||
/// Aplica los anchos máximos predefinidos a partir del punto de ruptura indicado. Por debajo de
|
||||
/// ese punto de ruptura ocupa el 100% del ancho disponible.
|
||||
From(token::BreakPoint),
|
||||
From(BreakPoint),
|
||||
/// Ocupa el 100% del ancho disponible siempre.
|
||||
Fluid,
|
||||
/// Ocupa el 100% del ancho disponible hasta un ancho máximo explícito.
|
||||
|
|
@ -70,10 +75,10 @@ impl Width {
|
|||
#[inline]
|
||||
pub fn push_to(self, classes: &mut String) {
|
||||
match self {
|
||||
Self::Default => token::BreakPoint::None.push_to(classes, Self::CONTAINER, ""),
|
||||
Self::Default => BreakPoint::None.push_to(classes, Self::CONTAINER, ""),
|
||||
Self::From(bp) => bp.push_to(classes, Self::CONTAINER, ""),
|
||||
Self::Fluid | Self::FluidMax(_) => {
|
||||
token::BreakPoint::None.push_to(classes, Self::CONTAINER, "fluid")
|
||||
BreakPoint::None.push_to(classes, Self::CONTAINER, "fluid")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,12 +28,15 @@ pub trait InputBootsier {
|
|||
/// Cuando está activo, la etiqueta se superpone al campo y asciende al enfocarlo o cuando tiene
|
||||
/// contenido. Requiere que el campo tenga un atributo `placeholder` definido; si no se
|
||||
/// especifica, se fuerza `placeholder=""` antes del renderizado.
|
||||
#[builder_fn]
|
||||
fn with_floating_label(self, floating: bool) -> Self;
|
||||
}
|
||||
|
||||
impl InputBootsier for Field {
|
||||
fn with_floating_label(self, floating: bool) -> Self {
|
||||
self.with_prop(PropsOp::set_extra(EXTRA_FLOATING_LABEL, floating))
|
||||
#[builder_fn]
|
||||
fn with_floating_label(mut self, floating: bool) -> Self {
|
||||
self.alter_prop(PropsOp::set_extra(EXTRA_FLOATING_LABEL, floating));
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -33,12 +33,15 @@ pub trait SelectBootsier {
|
|||
/// Si se usa la etiqueta flotante, se anulan los valores establecidos con
|
||||
/// [`with_multiple()`](form::select::Field::with_multiple) y
|
||||
/// [`with_rows()`](form::select::Field::with_rows) antes del renderizado.
|
||||
#[builder_fn]
|
||||
fn with_floating_label(self, floating: bool) -> Self;
|
||||
}
|
||||
|
||||
impl SelectBootsier for Field {
|
||||
fn with_floating_label(self, floating: bool) -> Self {
|
||||
self.with_prop(PropsOp::set_extra(EXTRA_FLOATING_LABEL, floating))
|
||||
#[builder_fn]
|
||||
fn with_floating_label(mut self, floating: bool) -> Self {
|
||||
self.alter_prop(PropsOp::set_extra(EXTRA_FLOATING_LABEL, floating));
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,12 +31,15 @@ pub trait TextareaBootsier {
|
|||
///
|
||||
/// Si se usa la etiqueta flotante, se anula el valor establecido con
|
||||
/// [`with_rows()`](form::Textarea::with_rows) antes del renderizado.
|
||||
#[builder_fn]
|
||||
fn with_floating_label(self, floating: bool) -> Self;
|
||||
}
|
||||
|
||||
impl TextareaBootsier for Textarea {
|
||||
fn with_floating_label(self, floating: bool) -> Self {
|
||||
self.with_prop(PropsOp::set_extra(EXTRA_FLOATING_LABEL, floating))
|
||||
#[builder_fn]
|
||||
fn with_floating_label(mut self, floating: bool) -> Self {
|
||||
self.alter_prop(PropsOp::set_extra(EXTRA_FLOATING_LABEL, floating));
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -104,32 +104,48 @@ impl Into<CowStr> for RoundedRadius {
|
|||
/// - Ajustar el radio de las **esquinas concretas** (`top-start`, `top-end`, `bottom-start`,
|
||||
/// `bottom-end`, **en este orden**, respetando LTR/RTL).
|
||||
///
|
||||
/// # Comportamiento aditivo / sustractivo
|
||||
///
|
||||
/// - **Aditivo**: se parte de [`Rounded::default()`] (sin redondeo) y se van añadiendo lados o
|
||||
/// esquinas concretas con el radio deseado.
|
||||
///
|
||||
/// - **Sustractivo**: se parte de [`Rounded::new()`] o [`Rounded::with`] (radio global ya aplicado)
|
||||
/// y se anulan lados o esquinas concretas con [`RoundedRadius::Zero`].
|
||||
///
|
||||
/// # Ejemplos
|
||||
///
|
||||
/// ```rust
|
||||
/// use pagetop_bootsier::theme::*;
|
||||
///
|
||||
/// // Radio global:
|
||||
/// let r = class::Rounded::with(class::RoundedRadius::Default);
|
||||
/// // Radio global por defecto, equivalente a `Rounded::with(RoundedRadius::Default)`:
|
||||
/// let r = class::Rounded::new();
|
||||
/// assert_eq!(r.to_class(), "rounded");
|
||||
///
|
||||
/// // Sin redondeo:
|
||||
/// let r = class::Rounded::new();
|
||||
/// // Radio global explícito:
|
||||
/// let r = class::Rounded::with(class::RoundedRadius::Scale3);
|
||||
/// assert_eq!(r.to_class(), "rounded-3");
|
||||
///
|
||||
/// // Sin redondeo (comportamiento de `Default`):
|
||||
/// let r = class::Rounded::default();
|
||||
/// assert_eq!(r.to_class(), "");
|
||||
///
|
||||
/// // Radio en las esquinas de un lado lógico:
|
||||
/// let r = class::Rounded::new().with_end(class::RoundedRadius::Scale2);
|
||||
/// // Aditivo (radio en las esquinas de un lado lógico):
|
||||
/// let r = class::Rounded::default().with_end(class::RoundedRadius::Scale2);
|
||||
/// assert_eq!(r.to_class(), "rounded-end-2");
|
||||
///
|
||||
/// // Radio en una esquina concreta:
|
||||
/// let r = class::Rounded::new().with_top_start(class::RoundedRadius::Scale3);
|
||||
/// // Aditivo (radio en una esquina concreta):
|
||||
/// let r = class::Rounded::default().with_top_start(class::RoundedRadius::Scale3);
|
||||
/// assert_eq!(r.to_class(), "rounded-top-start-3");
|
||||
///
|
||||
/// // Sustractivo (radio global menos la esquina superior-inicial):
|
||||
/// let r = class::Rounded::new().with_top_start(class::RoundedRadius::Zero);
|
||||
/// assert_eq!(r.to_class(), "rounded rounded-top-start-0");
|
||||
///
|
||||
/// // Combinado (ejemplo completo):
|
||||
/// let r = class::Rounded::new()
|
||||
/// let r = class::Rounded::default()
|
||||
/// .with_top(class::RoundedRadius::Default) // Añade redondeo arriba.
|
||||
/// .with_bottom_start(class::RoundedRadius::Scale4) // Añade una esquina redondeada concreta.
|
||||
/// .with_bottom_end(class::RoundedRadius::Circle); // Añade redondeo extremo en otra esquina.
|
||||
/// .with_bottom_start(class::RoundedRadius::Scale4) // Añade esquina redondeada concreta.
|
||||
/// .with_bottom_end(class::RoundedRadius::Circle); // Añade redondeo máximo en otra esquina.
|
||||
/// assert_eq!(r.to_class(), "rounded-top rounded-bottom-start-4 rounded-bottom-end-circle");
|
||||
/// ```
|
||||
#[rustfmt::skip]
|
||||
|
|
@ -147,12 +163,13 @@ pub struct Rounded {
|
|||
}
|
||||
|
||||
impl Rounded {
|
||||
/// Prepara las esquinas **sin redondeo global** de partida.
|
||||
/// Prepara las esquinas con el **radio de redondeo por defecto** (`rounded`), como
|
||||
/// [`Self::with`] con [`RoundedRadius::Default`].
|
||||
pub fn new() -> Self {
|
||||
Self::default()
|
||||
Self::default().with_radius(RoundedRadius::Default)
|
||||
}
|
||||
|
||||
/// Crea las esquinas **con redondeo global** (`radius`).
|
||||
/// Crea las esquinas con un **radio global** explícito (`radius`).
|
||||
pub fn with(radius: RoundedRadius) -> Self {
|
||||
Self::default().with_radius(radius)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue