Manuel Cillero
50e4b42fe4
- Nuevo módulo `html::spacing` con `Margin`/`Padding`: igual que `FlexItem`, se resuelven generando clases CSS dinámicamente y se aplican con `PropsOp::margin()`/`PropsOp::padding()` sobre cualquier componente. - Elimina `Margin`/`Padding` de `pagetop-bootsier`. - Añade el ejemplo `intro-spacing` con los patrones de uso típicos.
278 lines
12 KiB
Rust
278 lines
12 KiB
Rust
use crate::core::component::Context;
|
|
use crate::core::theme::{Breakpoint, Responsive};
|
|
use crate::html::flex::{Align, AlignContent, Behavior, ContentJustify, Direction, Gap};
|
|
use crate::{AutoDefault, Getters, builder_impl, util};
|
|
|
|
// **< DisplayFlex >********************************************************************************
|
|
|
|
// Modo de activación del posicionamiento Flexbox de un contenedor `Flex`. Detalle interno de
|
|
// implementación: la API pública sólo expone los constructores `Flex::new()`, `Flex::at()`,
|
|
// `Flex::inline()` e `Flex::inline_at()`, nunca esta variante directamente.
|
|
#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)]
|
|
enum DisplayFlex {
|
|
#[default]
|
|
Always,
|
|
AlwaysInline,
|
|
At(Breakpoint),
|
|
InlineAt(Breakpoint),
|
|
}
|
|
|
|
// **< Flex >***************************************************************************************
|
|
|
|
/// Configuración para el posicionamiento Flexbox en un contenedor.
|
|
///
|
|
/// Se resuelve como clases CSS generadas dinámicamente (`display`, `flex-direction`, `flex-wrap`,
|
|
/// `justify-content`, `align-items`, `align-content`, `gap`), registradas vía
|
|
/// [`AssetsOp::add_responsive_style()`] en [`ResponsiveStyles`] y renderizadas como reglas en el
|
|
/// `<head>` del documento. Son propiedades nativas que no requieren interpretación por parte de los
|
|
/// temas, siempre funcionan igual, sin una sola línea de CSS ni de código específico.
|
|
///
|
|
/// El nombre de cada clase se deriva de la propiedad y el valor que representa (por ejemplo
|
|
/// `_flex-direction_row_`), así que dos contenedores con la misma configuración comparten la misma
|
|
/// regla generada en vez de duplicarla, y el nombre generado no coincide por accidente con clases
|
|
/// de terceros.
|
|
///
|
|
/// [`AssetsOp::add_responsive_style()`]: crate::core::component::AssetsOp::add_responsive_style
|
|
/// [`ResponsiveStyles`]: crate::html::ResponsiveStyles
|
|
///
|
|
/// # Ejemplo
|
|
///
|
|
/// ```rust,no_run
|
|
/// use pagetop::prelude::*;
|
|
///
|
|
/// let actions = Container::new()
|
|
/// .with_flex(
|
|
/// Flex::new()
|
|
/// .with_justify(flex::ContentJustify::End)
|
|
/// .with_align(flex::Align::Center)
|
|
/// .with_gap(flex::Gap::Both(UnitValue::RelRem(0.5))),
|
|
/// )
|
|
/// .with_child(Button::submit(Lc::n("Save")))
|
|
/// .with_child(Button::plain(Lc::n("Cancel")));
|
|
/// ```
|
|
#[derive(AutoDefault, Clone, Copy, Debug, PartialEq, Getters)]
|
|
pub struct Flex {
|
|
// Determina si esta configuración debe aplicarse (y con qué variante de `display`) o si
|
|
// `Flex` no está en absoluto configurado. `None` es el estado real de ausencia: lo que tiene
|
|
// un contenedor que nunca ha llamado a `with_flex()`. Sin getter público; `new()`, `at()`,
|
|
// `inline()` e `inline_at()` son la única forma de activarlo.
|
|
#[getters(skip)]
|
|
display: Option<DisplayFlex>,
|
|
/// Devuelve la dirección del eje principal por punto de corte.
|
|
#[getters(copy)]
|
|
direction: Responsive<Direction>,
|
|
/// Devuelve el comportamiento cuando los elementos no caben en una sola línea, por punto de
|
|
/// corte.
|
|
#[getters(copy)]
|
|
wrap: Responsive<Behavior>,
|
|
/// Devuelve la alineación de los elementos en el eje principal, por punto de corte.
|
|
#[getters(copy)]
|
|
justify: Responsive<ContentJustify>,
|
|
/// Devuelve la alineación de los elementos en el eje transversal, por punto de corte.
|
|
#[getters(copy)]
|
|
align: Responsive<Align>,
|
|
/// Devuelve la alineación de las líneas cuando hay más de una, por punto de corte.
|
|
#[getters(copy)]
|
|
align_content: Responsive<AlignContent>,
|
|
/// Devuelve el espaciado entre elementos, por punto de corte.
|
|
#[getters(copy)]
|
|
gap: Responsive<Gap>,
|
|
}
|
|
|
|
#[builder_impl]
|
|
impl Flex {
|
|
/// Define una configuración Flex con `display: flex`, sin punto de corte: se aplica siempre.
|
|
pub fn new() -> Self {
|
|
Self {
|
|
display: Some(DisplayFlex::Always),
|
|
..Default::default()
|
|
}
|
|
}
|
|
|
|
/// Define una configuración Flex con `display: flex` que se aplica a partir del punto de corte
|
|
/// indicado.
|
|
pub fn at(bp: Breakpoint) -> Self {
|
|
Self {
|
|
display: Some(DisplayFlex::At(bp)),
|
|
..Default::default()
|
|
}
|
|
}
|
|
|
|
/// Define una configuración Flex con `display: inline-flex`, sin punto de corte: se aplica
|
|
/// siempre.
|
|
pub fn inline() -> Self {
|
|
Self {
|
|
display: Some(DisplayFlex::AlwaysInline),
|
|
..Default::default()
|
|
}
|
|
}
|
|
|
|
/// Define una configuración Flex con `display: inline-flex` que se aplica a partir del punto de
|
|
/// corte indicado.
|
|
pub fn inline_at(bp: Breakpoint) -> Self {
|
|
Self {
|
|
display: Some(DisplayFlex::InlineAt(bp)),
|
|
..Default::default()
|
|
}
|
|
}
|
|
|
|
// **< Flex BUILDER >***************************************************************************
|
|
|
|
/// Establece la dirección del eje principal.
|
|
pub fn with_direction(mut self, dir: Direction) -> Self {
|
|
self.direction = self.direction.set(dir);
|
|
self
|
|
}
|
|
|
|
/// Establece la dirección del eje principal a partir del punto de corte indicado.
|
|
pub fn with_direction_at(mut self, bp: Breakpoint, dir: Direction) -> Self {
|
|
self.direction = self.direction.set_at(bp, dir);
|
|
self
|
|
}
|
|
|
|
/// Establece el comportamiento cuando los elementos no caben en una sola línea.
|
|
pub fn with_wrap(mut self, wrap: Behavior) -> Self {
|
|
self.wrap = self.wrap.set(wrap);
|
|
self
|
|
}
|
|
|
|
/// Establece el comportamiento cuando los elementos no caben en una sola línea, a partir del
|
|
/// punto de corte indicado.
|
|
pub fn with_wrap_at(mut self, bp: Breakpoint, wrap: Behavior) -> Self {
|
|
self.wrap = self.wrap.set_at(bp, wrap);
|
|
self
|
|
}
|
|
|
|
/// Establece la alineación de los elementos en el eje principal.
|
|
pub fn with_justify(mut self, justify: ContentJustify) -> Self {
|
|
self.justify = self.justify.set(justify);
|
|
self
|
|
}
|
|
|
|
/// Establece la alineación de los elementos en el eje principal, a partir del punto de corte
|
|
/// indicado.
|
|
pub fn with_justify_at(mut self, bp: Breakpoint, justify: ContentJustify) -> Self {
|
|
self.justify = self.justify.set_at(bp, justify);
|
|
self
|
|
}
|
|
|
|
/// Establece la alineación de los elementos en el eje transversal.
|
|
pub fn with_align(mut self, align: Align) -> Self {
|
|
self.align = self.align.set(align);
|
|
self
|
|
}
|
|
|
|
/// Establece la alineación de los elementos en el eje transversal, a partir del punto de corte
|
|
/// indicado.
|
|
pub fn with_align_at(mut self, bp: Breakpoint, align: Align) -> Self {
|
|
self.align = self.align.set_at(bp, align);
|
|
self
|
|
}
|
|
|
|
/// Establece la alineación de las líneas cuando hay más de una (ver [`AlignContent`]).
|
|
pub fn with_align_content(mut self, align_content: AlignContent) -> Self {
|
|
self.align_content = self.align_content.set(align_content);
|
|
self
|
|
}
|
|
|
|
/// Establece la alineación de las líneas cuando hay más de una (ver [`AlignContent`]), a partir
|
|
/// del punto de corte indicado.
|
|
pub fn with_align_content_at(mut self, bp: Breakpoint, align_content: AlignContent) -> Self {
|
|
self.align_content = self.align_content.set_at(bp, align_content);
|
|
self
|
|
}
|
|
|
|
/// Establece el espaciado entre elementos.
|
|
pub fn with_gap(mut self, gap: Gap) -> Self {
|
|
self.gap = self.gap.set(gap);
|
|
self
|
|
}
|
|
|
|
/// Establece el espaciado entre elementos, a partir del punto de corte indicado.
|
|
pub fn with_gap_at(mut self, bp: Breakpoint, gap: Gap) -> Self {
|
|
self.gap = self.gap.set_at(bp, gap);
|
|
self
|
|
}
|
|
}
|
|
|
|
impl Flex {
|
|
/// Combina esta configuración con otra `Flex`, campo a campo, o la resetea a los valores por
|
|
/// defecto si se pasa `None`.
|
|
///
|
|
/// Cada campo de `flex` que tenga un valor sustituye al correspondiente de `self`; los que
|
|
/// estén a `None` dejan intacto el valor ya presente en `self`. Así, sucesivas llamadas pueden
|
|
/// ir completando o sobrescribiendo campos concretos sin necesidad de repetir los ya
|
|
/// establecidos. Es el método recomendado para que un contenedor propio adopte `Flex` de forma
|
|
/// incremental (ver [`Container::with_flex()`](crate::base::component::Container::with_flex)
|
|
/// como referencia de uso).
|
|
pub fn merge(mut self, flex: impl Into<Option<Flex>>) -> Self {
|
|
let Some(flex) = flex.into() else {
|
|
return Flex::default();
|
|
};
|
|
self.display = flex.display.or(self.display);
|
|
self.direction = self.direction.merge(flex.direction);
|
|
self.wrap = self.wrap.merge(flex.wrap);
|
|
self.justify = self.justify.merge(flex.justify);
|
|
self.align = self.align.merge(flex.align);
|
|
self.align_content = self.align_content.merge(flex.align_content);
|
|
self.gap = self.gap.merge(flex.gap);
|
|
self
|
|
}
|
|
|
|
/// Aplica esta configuración a un [`Props`] como declaraciones de estilo en línea.
|
|
///
|
|
/// Es el método recomendado para que un componente adopte `Flex`: concentra en un único sitio
|
|
/// la traducción de la configuración a estilos, para no repetirla en cada componente que la
|
|
/// use. Precedente: [`Container`](crate::base::component::Container) lo aplica sobre su
|
|
/// propio `Props`; [`Navbar`](crate::base::component::Navbar), sobre el `Props` de su área de
|
|
/// contenido.
|
|
///
|
|
/// Las clases generadas se añaden a `classes`, separadas con un espacio de las que ya hubiera,
|
|
/// para poder compartir un único acumulador con [`FlexItem::apply()`](super::FlexItem::apply)
|
|
/// sin cadenas intermedias.
|
|
#[rustfmt::skip]
|
|
pub(crate) fn apply(self, cx: &mut Context, classes: &mut String) {
|
|
// Sin `display` no hay contenedor Flex: el resto de facetas (`flex-direction`, `gap`...)
|
|
// no tienen ningún efecto en CSS sin `display: flex`/`inline-flex`, así que ni se generan.
|
|
let Some(display) = self.display else {
|
|
return;
|
|
};
|
|
|
|
use crate::html::responsive::{apply, responsive_class, styles, value_to_token};
|
|
|
|
let (prefix, value) = match display {
|
|
DisplayFlex::Always
|
|
| DisplayFlex::At(_) => ("_flex_", "flex"),
|
|
DisplayFlex::AlwaysInline
|
|
| DisplayFlex::InlineAt(_) => ("_inline-flex_", "inline-flex"),
|
|
};
|
|
let entry = match display {
|
|
DisplayFlex::At(bp) | DisplayFlex::InlineAt(bp) => bp.resolved(cx),
|
|
_ => None,
|
|
};
|
|
let class = match entry {
|
|
None => prefix.into(),
|
|
Some(entry) => util::join!(prefix, entry.name, "_").into(),
|
|
};
|
|
styles(cx, classes, entry, class, "display", value.into());
|
|
|
|
apply!(cx, classes, self.direction, "_flex-direction_", "flex-direction");
|
|
apply!(cx, classes, self.wrap, "_flex-wrap_", "flex-wrap");
|
|
apply!(cx, classes, self.justify, "_flex-justify_", "justify-content");
|
|
apply!(cx, classes, self.align, "_flex-align-items_", "align-items");
|
|
apply!(cx, classes, self.align_content, "_flex-align-content_", "align-content");
|
|
for (bp, gap) in self.gap.by_breakpoint() {
|
|
let entry = bp.resolved(cx);
|
|
for (property, value) in gap.styles().into_iter().flatten() {
|
|
// El prefijo de `gap` no es literal (depende de la propiedad), así que se compone
|
|
// aquí en un único `join!` en vez de pasar por `responsive_class!`.
|
|
let token = value_to_token(&value);
|
|
let class = match entry {
|
|
None => util::join!("_flex-", property, "_", token, "_"),
|
|
Some(e) => util::join!("_flex-", property, "_", token, "_", e.name, "_"),
|
|
};
|
|
styles(cx, classes, entry, class.into(), property, value);
|
|
}
|
|
}
|
|
}
|
|
}
|