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

♻️ (html): API para id's en Props y componentes

Browse source
This commit is contained in:
Manuel Cillero 2026-06-20 15:02:23 +02:00
parent 8d0103c257
commit 62219584b0
31 changed files with 541 additions and 405 deletions
Download patch file Download diff file Expand all files Collapse all files

5
extensions/pagetop-bootsier/assets/_bootsier-custom.scss
View file

@ -18,6 +18,11 @@
font-display: swap;
}
// Font-relative top offset to keep the skip-link hidden at any font size.
.skip-link {
top: -3em;
}
// Required field indicator in forms.
.form-required {
color: var(--bs-danger);

15
extensions/pagetop-bootsier/src/theme/button.rs
View file

@ -45,9 +45,7 @@ use crate::theme::{ButtonAction, ButtonColor, ButtonSize};
/// ```
#[derive(AutoDefault, Clone, Debug, Getters)]
pub struct Button {
#[getters(skip)]
id: AttrId,
/// Devuelve los atributos HTML y clases CSS del botón.
/// Devuelve identificador, clases CSS y atributos HTML del componente.
props: Props,
/// Devuelve el comportamiento del botón al activarse.
kind: ButtonAction,
@ -73,7 +71,7 @@ impl Component for Button {
}
fn id(&self) -> Option<String> {
self.id.get()
self.props.get_id()
}
fn setup(&mut self, _cx: &Context) {
@ -86,7 +84,6 @@ impl Component for Button {
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
Ok(html! {
button
id=[self.id()]
type=(self.kind())
(self.props())
name=[self.name().get()]
@ -140,14 +137,14 @@ impl Button {
// **< Button BUILDER >*************************************************************************
/// Establece el identificador único (`id`) del botón.
/// Establece el identificador único del componente; igual a `with_prop(PropsOp::set_id(id))`.
#[builder_fn]
pub fn with_id(mut self, id: impl AsRef<str>) -> Self {
self.id.alter_id(id);
pub fn with_id(mut self, id: impl Into<CowStr>) -> Self {
self.props.alter_id(id);
self
}
/// Modifica los atributos HTML o las clases CSS del botón.
/// Modifica identificador, clases CSS o atributos HTML del componente.
#[builder_fn]
pub fn with_prop(mut self, op: PropsOp) -> Self {
self.props.alter_prop(op);

26
extensions/pagetop-bootsier/src/theme/container/component.rs
View file

@ -20,9 +20,7 @@ use crate::theme::*;
/// ```
#[derive(AutoDefault, Clone, Debug, Getters)]
pub struct Container {
#[getters(skip)]
id: AttrId,
/// Devuelve los atributos HTML y clases CSS del contenedor.
/// Devuelve identificador, clases CSS y atributos HTML del componente.
props: Props,
/// Devuelve el tipo semántico del contenedor.
container_kind: container::Kind,
@ -38,7 +36,7 @@ impl Component for Container {
}
fn id(&self) -> Option<String> {
self.id.get()
self.props.get_id()
}
fn setup(&mut self, _cx: &Context) {
@ -58,32 +56,32 @@ impl Component for Container {
};
Ok(match self.container_kind() {
container::Kind::Default => html! {
div id=[self.id()] (self.props()) style=[style] {
div (self.props()) style=[style] {
(output)
}
},
container::Kind::Main => html! {
main id=[self.id()] (self.props()) style=[style] {
main (self.props()) style=[style] {
(output)
}
},
container::Kind::Header => html! {
header id=[self.id()] (self.props()) style=[style] {
header (self.props()) style=[style] {
(output)
}
},
container::Kind::Footer => html! {
footer id=[self.id()] (self.props()) style=[style] {
footer (self.props()) style=[style] {
(output)
}
},
container::Kind::Section => html! {
section id=[self.id()] (self.props()) style=[style] {
section (self.props()) style=[style] {
(output)
}
},
container::Kind::Article => html! {
article id=[self.id()] (self.props()) style=[style] {
article (self.props()) style=[style] {
(output)
}
},
@ -134,14 +132,14 @@ impl Container {
// **< Container BUILDER >**********************************************************************
/// Establece el identificador único (`id`) del contenedor.
/// Establece el identificador único del componente; igual a `with_prop(PropsOp::set_id(id))`.
#[builder_fn]
pub fn with_id(mut self, id: impl AsRef<str>) -> Self {
self.id.alter_id(id);
pub fn with_id(mut self, id: impl Into<CowStr>) -> Self {
self.props.alter_id(id);
self
}
/// Modifica los atributos HTML o las clases CSS del contenedor.
/// Modifica identificador, clases CSS o atributos HTML del componente.
///
/// También acepta clases predefinidas para:
///

16
extensions/pagetop-bootsier/src/theme/dropdown/component.rs
View file

@ -38,9 +38,7 @@ use crate::theme::*;
/// ```
#[derive(AutoDefault, Clone, Debug, Getters)]
pub struct Dropdown {
#[getters(skip)]
id: AttrId,
/// Devuelve los atributos HTML y clases CSS del menú desplegable.
/// Devuelve identificador, clases CSS y atributos HTML del componente.
props: Props,
/// Devuelve el título del menú desplegable.
title: L10n,
@ -70,7 +68,7 @@ impl Component for Dropdown {
}
fn id(&self) -> Option<String> {
self.id.get()
self.props.get_id()
}
fn setup(&mut self, _cx: &Context) {
@ -90,7 +88,7 @@ impl Component for Dropdown {
let title = self.title().using(cx);
Ok(html! {
div id=[self.id()] (self.props()) {
div (self.props()) {
@if !title.is_empty() {
@let btn_base = {
let mut classes = "btn".to_string();
@ -178,14 +176,14 @@ impl Component for Dropdown {
impl Dropdown {
// **< Dropdown BUILDER >***********************************************************************
/// Establece el identificador único (`id`) del menú desplegable.
/// Establece el identificador único del componente; igual a `with_prop(PropsOp::set_id(id))`.
#[builder_fn]
pub fn with_id(mut self, id: impl AsRef<str>) -> Self {
self.id.alter_id(id);
pub fn with_id(mut self, id: impl Into<CowStr>) -> Self {
self.props.alter_id(id);
self
}
/// Modifica los atributos HTML o las clases CSS del menú desplegable.
/// Modifica identificador, clases CSS o atributos HTML del componente.
#[builder_fn]
pub fn with_prop(mut self, op: PropsOp) -> Self {
self.props.alter_prop(op);

24
extensions/pagetop-bootsier/src/theme/dropdown/item.rs
View file

@ -45,9 +45,7 @@ pub enum ItemKind {
/// asociada, manteniendo una interfaz común para renderizar todos los elementos del menú.
#[derive(AutoDefault, Clone, Debug, Getters)]
pub struct Item {
#[getters(skip)]
id: AttrId,
/// Devuelve los atributos HTML y clases CSS del elemento.
/// Devuelve identificador, clases CSS y atributos HTML del componente.
props: Props,
/// Devuelve el tipo de elemento representado.
item_kind: ItemKind,
@ -59,7 +57,7 @@ impl Component for Item {
}
fn id(&self) -> Option<String> {
self.id.get()
self.props.get_id()
}
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
@ -67,7 +65,7 @@ impl Component for Item {
ItemKind::Void => html! {},
ItemKind::Label(label) => html! {
li id=[self.id()] (self.props()) {
li (self.props()) {
span class="dropdown-item-text" {
(label.using(cx))
}
@ -101,7 +99,7 @@ impl Component for Item {
let tabindex = disabled.then_some("-1");
html! {
li id=[self.id()] (self.props()) {
li (self.props()) {
a
class=(classes)
href=[href]
@ -127,7 +125,7 @@ impl Component for Item {
let disabled_attr = disabled.then_some("disabled");
html! {
li id=[self.id()] (self.props()) {
li (self.props()) {
button
class=(classes)
type="button"
@ -141,7 +139,7 @@ impl Component for Item {
}
ItemKind::Header(label) => html! {
li id=[self.id()] (self.props()) {
li (self.props()) {
h6 class="dropdown-header" {
(label.using(cx))
}
@ -149,7 +147,7 @@ impl Component for Item {
},
ItemKind::Divider => html! {
li id=[self.id()] (self.props()) { hr class="dropdown-divider" {} }
li (self.props()) { hr class="dropdown-divider" {} }
},
})
}
@ -260,14 +258,14 @@ impl Item {
// **< Item BUILDER >***************************************************************************
/// Establece el identificador único (`id`) del elemento.
/// Establece el identificador único del componente; igual a `with_prop(PropsOp::set_id(id))`.
#[builder_fn]
pub fn with_id(mut self, id: impl AsRef<str>) -> Self {
self.id.alter_id(id);
pub fn with_id(mut self, id: impl Into<CowStr>) -> Self {
self.props.alter_id(id);
self
}
/// Modifica los atributos HTML o las clases CSS del elemento.
/// Modifica identificador, clases CSS o atributos HTML del componente.
#[builder_fn]
pub fn with_prop(mut self, op: PropsOp) -> Self {
self.props.alter_prop(op);

36
extensions/pagetop-bootsier/src/theme/form/check.rs
View file

@ -108,9 +108,7 @@ impl Item {
/// ```
#[derive(AutoDefault, Clone, Debug, Getters)]
pub struct Field {
#[getters(skip)]
id: AttrId,
/// Devuelve los atributos HTML y clases CSS del contenedor del grupo.
/// Devuelve identificador, clases CSS y atributos HTML del componente.
props: Props,
/// Devuelve el nombre base compartido por todas las casillas del grupo.
name: AttrName,
@ -132,21 +130,31 @@ impl Component for Field {
}
fn id(&self) -> Option<String> {
self.id.get()
self.props.get_id()
}
fn setup(&mut self, _cx: &Context) {
self.alter_prop(PropsOp::prepend_classes("form-field form-field-checkboxes"));
}
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
fn setup(&mut self, cx: &Context) {
// Asegura `name` e `id`.
// Si falta uno se deriva del otro; si faltan ambos se genera un valor único.
let name = self
.name()
.get()
.unwrap_or_else(|| cx.required_id::<Self>(self.id(), 3));
self.alter_name(&name);
let container_id = self.id().unwrap_or_else(|| util::join!("edit-", &name));
self.alter_prop(PropsOp::ensure_id(container_id));
// Clases CSS del contenedor del grupo de casillas.
self.alter_prop(PropsOp::prepend_classes("form-field form-field-checkboxes"));
}
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
// En `setup()` se garantiza que `name` e `id` están definidos antes del renderizado.
let name = self.name().get().unwrap();
let container_id = self.id().unwrap();
Ok(html! {
div id=(&container_id) (self.props()) {
div (self.props()) {
@if let Some(label) = self.label().lookup(cx) {
label class="form-label" { (label) }
}
@ -188,14 +196,14 @@ impl Component for Field {
impl Field {
// **< Field BUILDER >**************************************************************************
/// Establece el identificador único (`id`) del grupo de casillas.
/// Establece el identificador único del componente; igual a `with_prop(PropsOp::set_id(id))`.
#[builder_fn]
pub fn with_id(mut self, id: impl AsRef<str>) -> Self {
self.id.alter_id(id);
pub fn with_id(mut self, id: impl Into<CowStr>) -> Self {
self.props.alter_id(id);
self
}
/// Modifica los atributos HTML o las clases CSS del contenedor del grupo de casillas.
/// Modifica identificador, clases CSS o atributos HTML del componente.
#[builder_fn]
pub fn with_prop(mut self, op: PropsOp) -> Self {
self.props.alter_prop(op);

39
extensions/pagetop-bootsier/src/theme/form/checkbox.rs
View file

@ -43,9 +43,7 @@ use crate::theme::form;
/// ```
#[derive(AutoDefault, Clone, Debug, Getters)]
pub struct Checkbox {
#[getters(skip)]
id: AttrId,
/// Devuelve los atributos HTML y clases CSS del contenedor del control.
/// Devuelve identificador, clases CSS y atributos HTML del componente.
props: Props,
/// Devuelve la variante visual del control.
checkbox_kind: form::CheckboxKind,
@ -73,10 +71,21 @@ impl Component for Checkbox {
}
fn id(&self) -> Option<String> {
self.id.get()
self.props.get_id()
}
fn setup(&mut self, _cx: &Context) {
fn setup(&mut self, cx: &Context) {
// Asegura `name` e `id`.
// Si falta uno se deriva del otro; si faltan ambos se genera un valor único.
let name = self
.name()
.get()
.unwrap_or_else(|| cx.required_id::<Self>(self.id(), 1));
self.alter_name(&name);
let container_id = self.id().unwrap_or_else(|| util::join!("edit-", &name));
self.alter_prop(PropsOp::ensure_id(container_id));
// Clases CSS del contenedor de la casilla de verificación.
let mut classes = "form-field form-check".to_string();
if *self.checkbox_kind() == form::CheckboxKind::Switch {
classes.push_str(" form-switch");
@ -91,15 +100,15 @@ impl Component for Checkbox {
}
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
let name = self
.name()
.get()
.unwrap_or_else(|| cx.required_id::<Self>(self.id(), 1));
let container_id = self.id().unwrap_or_else(|| util::join!("edit-", &name));
// En `setup()` se garantiza que `name` e `id` están definidos antes del renderizado.
let name = self.name().get().unwrap();
let container_id = self.id().unwrap();
let checkbox_id = util::join!(&container_id, "-checkbox");
let is_switch = *self.checkbox_kind() == form::CheckboxKind::Switch;
Ok(html! {
div id=(&container_id) (self.props()) {
div (self.props()) {
input
type="checkbox"
role=[is_switch.then_some("switch")]
@ -145,14 +154,14 @@ impl Checkbox {
// **< Checkbox BUILDER >***********************************************************************
/// Establece el identificador único (`id`) del control.
/// Establece el identificador único del componente; igual a `with_prop(PropsOp::set_id(id))`.
#[builder_fn]
pub fn with_id(mut self, id: impl AsRef<str>) -> Self {
self.id.alter_id(id);
pub fn with_id(mut self, id: impl Into<CowStr>) -> Self {
self.props.alter_id(id);
self
}
/// Modifica los atributos HTML o las clases CSS del contenedor del control.
/// Modifica identificador, clases CSS o atributos HTML del componente.
#[builder_fn]
pub fn with_prop(mut self, op: PropsOp) -> Self {
self.props.alter_prop(op);

15
extensions/pagetop-bootsier/src/theme/form/component.rs
View file

@ -47,9 +47,7 @@ use crate::theme::form;
/// ```
#[derive(AutoDefault, Clone, Debug, Getters)]
pub struct Form {
#[getters(skip)]
id: AttrId,
/// Devuelve los atributos HTML y clases CSS del formulario.
/// Devuelve identificador, clases CSS y atributos HTML del componente.
props: Props,
/// Devuelve la URL/ruta de destino del formulario.
action: AttrValue,
@ -68,7 +66,7 @@ impl Component for Form {
}
fn id(&self) -> Option<String> {
self.id.get()
self.props.get_id()
}
fn setup(&mut self, _cx: &Context) {
@ -82,7 +80,6 @@ impl Component for Form {
};
Ok(html! {
form
id=[self.id()]
(self.props())
action=[self.action().get()]
method=[method]
@ -97,14 +94,14 @@ impl Component for Form {
impl Form {
// **< Form BUILDER >***************************************************************************
/// Establece el identificador único (`id`) del formulario.
/// Establece el identificador único del componente; igual a `with_prop(PropsOp::set_id(id))`.
#[builder_fn]
pub fn with_id(mut self, id: impl AsRef<str>) -> Self {
self.id.alter_id(id);
pub fn with_id(mut self, id: impl Into<CowStr>) -> Self {
self.props.alter_id(id);
self
}
/// Modifica los atributos HTML o las clases CSS del formulario.
/// Modifica identificador, clases CSS o atributos HTML del componente.
#[builder_fn]
pub fn with_prop(mut self, op: PropsOp) -> Self {
self.props.alter_prop(op);

16
extensions/pagetop-bootsier/src/theme/form/fieldset.rs
View file

@ -24,9 +24,7 @@ use pagetop::prelude::*;
/// ```
#[derive(AutoDefault, Clone, Debug, Getters)]
pub struct Fieldset {
#[getters(skip)]
id: AttrId,
/// Devuelve los atributos HTML y clases CSS del `fieldset`.
/// Devuelve identificador, clases CSS y atributos HTML del componente.
props: Props,
/// Devuelve la leyenda del `fieldset`.
legend: Attr<L10n>,
@ -44,7 +42,7 @@ impl Component for Fieldset {
}
fn id(&self) -> Option<String> {
self.id.get()
self.props.get_id()
}
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
@ -55,7 +53,7 @@ impl Component for Fieldset {
}
Ok(html! {
fieldset id=[self.id()] (self.props()) disabled[*self.disabled()] {
fieldset (self.props()) disabled[*self.disabled()] {
@if let Some(legend) = self.legend().lookup(cx) {
legend { (legend) }
}
@ -71,14 +69,14 @@ impl Component for Fieldset {
impl Fieldset {
// **< Fieldset BUILDER >***********************************************************************
/// Establece el identificador único (`id`) del `fieldset` (grupo de controles).
/// Establece el identificador único del componente; igual a `with_prop(PropsOp::set_id(id))`.
#[builder_fn]
pub fn with_id(mut self, id: impl AsRef<str>) -> Self {
self.id.alter_id(id);
pub fn with_id(mut self, id: impl Into<CowStr>) -> Self {
self.props.alter_id(id);
self
}
/// Modifica los atributos HTML o las clases CSS del `fieldset`.
/// Modifica identificador, clases CSS o atributos HTML del componente.
#[builder_fn]
pub fn with_prop(mut self, op: PropsOp) -> Self {
self.props.alter_prop(op);

28
extensions/pagetop-bootsier/src/theme/form/input.rs
View file

@ -126,9 +126,7 @@ impl fmt::Display for Mode {
/// ```
#[derive(AutoDefault, Clone, Debug, Getters)]
pub struct Field {
#[getters(skip)]
id: AttrId,
/// Devuelve los atributos HTML y clases CSS del contenedor del campo.
/// Devuelve identificador, clases CSS y atributos HTML del componente.
props: Props,
/// Devuelve el tipo de campo.
kind: Kind,
@ -170,10 +168,18 @@ impl Component for Field {
}
fn id(&self) -> Option<String> {
self.id.get()
self.props.get_id()
}
fn setup(&mut self, _cx: &Context) {
if let Some(container_id) = self
.id()
.or_else(|| self.name().get().map(|n| util::join!("edit-", n)))
{
self.alter_prop(PropsOp::ensure_id(container_id));
}
// Clases CSS del contenedor del campo de texto.
if *self.floating_label() {
self.alter_prop(PropsOp::prepend_classes("form-floating"));
}
@ -184,9 +190,7 @@ impl Component for Field {
}
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
let container_id = self
.id()
.or_else(|| self.name().get().map(|n| util::join!("edit-", n)));
let container_id = self.id();
let input_id = container_id.as_deref().map(|id| util::join!(id, "-input"));
let input_class = if *self.plaintext() {
"form-control-plaintext"
@ -217,7 +221,7 @@ impl Component for Field {
None => html! {},
};
Ok(html! {
div id=[container_id.as_deref()] (self.props()) {
div (self.props()) {
@if !*self.floating_label() {
(label)
}
@ -313,14 +317,14 @@ impl Field {
// **< Field BUILDER >**************************************************************************
/// Establece el identificador único (`id`) del contenedor del campo.
/// Establece el identificador único del componente; igual a `with_prop(PropsOp::set_id(id))`.
#[builder_fn]
pub fn with_id(mut self, id: impl AsRef<str>) -> Self {
self.id.alter_id(id);
pub fn with_id(mut self, id: impl Into<CowStr>) -> Self {
self.props.alter_id(id);
self
}
/// Modifica los atributos HTML o las clases CSS del contenedor del campo.
/// Modifica identificador, clases CSS o atributos HTML del componente.
#[builder_fn]
pub fn with_prop(mut self, op: PropsOp) -> Self {
self.props.alter_prop(op);

36
extensions/pagetop-bootsier/src/theme/form/radio.rs
View file

@ -96,9 +96,7 @@ impl Item {
/// ```
#[derive(AutoDefault, Clone, Debug, Getters)]
pub struct Field {
#[getters(skip)]
id: AttrId,
/// Devuelve los atributos HTML y clases CSS del contenedor del grupo.
/// Devuelve identificador, clases CSS y atributos HTML del componente.
props: Props,
/// Devuelve el nombre compartido por todos los botones de opción del grupo.
name: AttrName,
@ -122,21 +120,31 @@ impl Component for Field {
}
fn id(&self) -> Option<String> {
self.id.get()
self.props.get_id()
}
fn setup(&mut self, _cx: &Context) {
self.alter_prop(PropsOp::prepend_classes("form-field form-field-radios"));
}
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
fn setup(&mut self, cx: &Context) {
// Asegura `name` e `id`.
// Si falta uno se deriva del otro; si faltan ambos se genera un valor único.
let name = self
.name()
.get()
.unwrap_or_else(|| cx.required_id::<Self>(self.id(), 3));
self.alter_name(&name);
let container_id = self.id().unwrap_or_else(|| util::join!("edit-", &name));
self.alter_prop(PropsOp::ensure_id(container_id));
// Clases CSS del contenedor del grupo de opciones.
self.alter_prop(PropsOp::prepend_classes("form-field form-field-radios"));
}
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
// En `setup()` se garantiza que `name` e `id` están definidos antes del renderizado.
let name = self.name().get().unwrap();
let container_id = self.id().unwrap();
Ok(html! {
div id=(&container_id) (self.props()) {
div (self.props()) {
@if let Some(label) = self.label().lookup(cx) {
label class="form-label" {
(label)
@ -190,14 +198,14 @@ impl Component for Field {
impl Field {
// **< Field BUILDER >**************************************************************************
/// Establece el identificador único (`id`) del grupo de opciones.
/// Establece el identificador único del componente; igual a `with_prop(PropsOp::set_id(id))`.
#[builder_fn]
pub fn with_id(mut self, id: impl AsRef<str>) -> Self {
self.id.alter_id(id);
pub fn with_id(mut self, id: impl Into<CowStr>) -> Self {
self.props.alter_id(id);
self
}
/// Modifica los atributos HTML o las clases CSS del contenedor del grupo de opciones.
/// Modifica identificador, clases CSS o atributos HTML del componente.
#[builder_fn]
pub fn with_prop(mut self, op: PropsOp) -> Self {
self.props.alter_prop(op);

28
extensions/pagetop-bootsier/src/theme/form/range.rs
View file

@ -31,9 +31,7 @@ use pagetop::prelude::*;
/// ```
#[derive(AutoDefault, Clone, Debug, Getters)]
pub struct Range {
#[getters(skip)]
id: AttrId,
/// Devuelve los atributos HTML y clases CSS del contenedor del control deslizante.
/// Devuelve identificador, clases CSS y atributos HTML del componente.
props: Props,
/// Devuelve el nombre del campo.
name: AttrName,
@ -61,20 +59,26 @@ impl Component for Range {
}
fn id(&self) -> Option<String> {
self.id.get()
self.props.get_id()
}
fn setup(&mut self, _cx: &Context) {
if let Some(container_id) = self
.id()
.or_else(|| self.name().get().map(|n| util::join!("edit-", n)))
{
self.alter_prop(PropsOp::ensure_id(container_id));
};
// Clases CSS del contenedor del control deslizante.
self.alter_prop(PropsOp::prepend_classes("form-field form-field-range"));
}
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
let container_id = self
.id()
.or_else(|| self.name().get().map(|n| util::join!("edit-", n)));
let container_id = self.id();
let range_id = container_id.as_deref().map(|id| util::join!(id, "-range"));
Ok(html! {
div id=[container_id.as_deref()] (self.props()) {
div (self.props()) {
@if let Some(label) = self.label().lookup(cx) {
label for=[range_id.as_deref()] class="form-label" { (label) }
}
@ -100,14 +104,14 @@ impl Component for Range {
impl Range {
// **< Range BUILDER >**************************************************************************
/// Establece el identificador único (`id`) del contenedor del control deslizante.
/// Establece el identificador único del componente; igual a `with_prop(PropsOp::set_id(id))`.
#[builder_fn]
pub fn with_id(mut self, id: impl AsRef<str>) -> Self {
self.id.alter_id(id);
pub fn with_id(mut self, id: impl Into<CowStr>) -> Self {
self.props.alter_id(id);
self
}
/// Modifica los atributos HTML o las clases CSS del contenedor del control deslizante.
/// Modifica identificador, clases CSS o atributos HTML del componente.
#[builder_fn]
pub fn with_prop(mut self, op: PropsOp) -> Self {
self.props.alter_prop(op);

28
extensions/pagetop-bootsier/src/theme/form/select.rs
View file

@ -191,9 +191,7 @@ pub enum Entry {
/// ```
#[derive(AutoDefault, Clone, Debug, Getters)]
pub struct Field {
#[getters(skip)]
id: AttrId,
/// Devuelve los atributos HTML y clases CSS del contenedor de la lista de selección.
/// Devuelve identificador, clases CSS y atributos HTML del componente.
props: Props,
/// Devuelve el nombre del campo.
name: AttrName,
@ -225,10 +223,18 @@ impl Component for Field {
}
fn id(&self) -> Option<String> {
self.id.get()
self.props.get_id()
}
fn setup(&mut self, _cx: &Context) {
if let Some(container_id) = self
.id()
.or_else(|| self.name().get().map(|n| util::join!("edit-", n)))
{
self.alter_prop(PropsOp::ensure_id(container_id));
};
// Clases CSS del contenedor de la lista de selección.
if *self.floating_label() {
self.alter_multiple(false);
self.alter_rows(None::<u16>);
@ -238,9 +244,7 @@ impl Component for Field {
}
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
let container_id = self
.id()
.or_else(|| self.name().get().map(|n| util::join!("edit-", n)));
let container_id = self.id();
let select_id = container_id.as_deref().map(|id| util::join!(id, "-select"));
let label = match self.label().lookup(cx) {
Some(text) => html! {
@ -259,7 +263,7 @@ impl Component for Field {
None => html! {},
};
Ok(html! {
div id=[container_id.as_deref()] (self.props()) {
div (self.props()) {
@if !*self.floating_label() {
(label)
}
@ -318,14 +322,14 @@ impl Component for Field {
impl Field {
// **< Field BUILDER >***************************************************************************
/// Establece el identificador único (`id`) del contenedor del campo.
/// Establece el identificador único del componente; igual a `with_prop(PropsOp::set_id(id))`.
#[builder_fn]
pub fn with_id(mut self, id: impl AsRef<str>) -> Self {
self.id.alter_id(id);
pub fn with_id(mut self, id: impl Into<CowStr>) -> Self {
self.props.alter_id(id);
self
}
/// Modifica los atributos HTML o las clases CSS del contenedor de la lista de selección.
/// Modifica identificador, clases CSS o atributos HTML del componente.
#[builder_fn]
pub fn with_prop(mut self, op: PropsOp) -> Self {
self.props.alter_prop(op);

28
extensions/pagetop-bootsier/src/theme/form/textarea.rs
View file

@ -34,9 +34,7 @@ use crate::theme::form;
/// ```
#[derive(AutoDefault, Clone, Debug, Getters)]
pub struct Textarea {
#[getters(skip)]
id: AttrId,
/// Devuelve los atributos HTML y clases CSS del contenedor del área de texto.
/// Devuelve identificador, clases CSS y atributos HTML del componente.
props: Props,
/// Devuelve el nombre del campo.
name: AttrName,
@ -74,10 +72,18 @@ impl Component for Textarea {
}
fn id(&self) -> Option<String> {
self.id.get()
self.props.get_id()
}
fn setup(&mut self, _cx: &Context) {
if let Some(container_id) = self
.id()
.or_else(|| self.name().get().map(|n| util::join!("edit-", n)))
{
self.alter_prop(PropsOp::ensure_id(container_id));
};
// Clases CSS del contenedor del área de texto.
if *self.floating_label() {
self.alter_rows(None::<u16>);
self.alter_prop(PropsOp::prepend_classes("form-floating"));
@ -86,9 +92,7 @@ impl Component for Textarea {
}
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
let container_id = self
.id()
.or_else(|| self.name().get().map(|n| util::join!("edit-", n)));
let container_id = self.id();
let textarea_id = container_id
.as_deref()
.map(|id| util::join!(id, "-textarea"));
@ -116,7 +120,7 @@ impl Component for Textarea {
None => html! {},
};
Ok(html! {
div id=[container_id.as_deref()] (self.props()) {
div (self.props()) {
@if !*self.floating_label() {
(label)
}
@ -152,14 +156,14 @@ impl Component for Textarea {
impl Textarea {
// **< Textarea BUILDER >***********************************************************************
/// Establece el identificador único (`id`) del contenedor del campo.
/// Establece el identificador único del componente; igual a `with_prop(PropsOp::set_id(id))`.
#[builder_fn]
pub fn with_id(mut self, id: impl AsRef<str>) -> Self {
self.id.alter_id(id);
pub fn with_id(mut self, id: impl Into<CowStr>) -> Self {
self.props.alter_id(id);
self
}
/// Modifica los atributos HTML o las clases CSS del contenedor del campo.
/// Modifica identificador, clases CSS o atributos HTML del componente.
#[builder_fn]
pub fn with_prop(mut self, op: PropsOp) -> Self {
self.props.alter_prop(op);

15
extensions/pagetop-bootsier/src/theme/icon.rs
View file

@ -15,7 +15,7 @@ pub enum IconKind {
#[derive(AutoDefault, Clone, Debug, Getters)]
pub struct Icon {
/// Devuelve los atributos HTML y clases CSS del icono.
/// Devuelve los atributos HTML y clases CSS del componente.
props: Props,
icon_kind: IconKind,
aria_label: AttrL10n,
@ -26,6 +26,10 @@ impl Component for Icon {
Self::default()
}
fn id(&self) -> Option<String> {
self.props.get_id()
}
fn setup(&mut self, _cx: &Context) {
if !matches!(self.icon_kind(), IconKind::None) {
self.alter_prop(PropsOp::prepend_classes("icon"));
@ -98,7 +102,14 @@ impl Icon {
// **< Icon BUILDER >***************************************************************************
/// Modifica los atributos HTML o las clases CSS del icono.
/// Establece el identificador único del componente; igual a `with_prop(PropsOp::set_id(id))`.
#[builder_fn]
pub fn with_id(mut self, id: impl Into<CowStr>) -> Self {
self.props.alter_id(id);
self
}
/// Modifica identificador, clases CSS o atributos HTML del componente.
#[builder_fn]
pub fn with_prop(mut self, op: PropsOp) -> Self {
self.props.alter_prop(op);

17
extensions/pagetop-bootsier/src/theme/image/component.rs
View file

@ -13,9 +13,7 @@ use crate::theme::*;
/// - Aplicar el texto alternativo `alt` con **localización** mediante [`L10n`].
#[derive(AutoDefault, Clone, Debug, Getters)]
pub struct Image {
#[getters(skip)]
id: AttrId,
/// Devuelve los atributos HTML y clases CSS de la imagen.
/// Devuelve identificador, clases CSS y atributos HTML del componente.
props: Props,
/// Devuelve las dimensiones de la imagen.
size: image::Size,
@ -31,10 +29,11 @@ impl Component for Image {
}
fn id(&self) -> Option<String> {
self.id.get()
self.props.get_id()
}
fn setup(&mut self, _cx: &Context) {
// Clases CSS por defecto para la imagen, según el origen seleccionado.
self.alter_prop(PropsOp::prepend_classes(self.source().to_class()));
}
@ -46,7 +45,6 @@ impl Component for Image {
image::Source::Logo(logo) => {
return Ok(html! {
span
id=[self.id()]
(self.props())
style=[dimensions]
role=[(!is_decorative).then_some("img")]
@ -65,7 +63,6 @@ impl Component for Image {
img
src=[source]
alt=(alt_text)
id=[self.id()]
(self.props())
style=[dimensions] {}
})
@ -80,14 +77,14 @@ impl Image {
// **< Image BUILDER >**************************************************************************
/// Establece el identificador único (`id`) de la imagen.
/// Establece el identificador único del componente; igual a `with_prop(PropsOp::set_id(id))`.
#[builder_fn]
pub fn with_id(mut self, id: impl AsRef<str>) -> Self {
self.id.alter_id(id);
pub fn with_id(mut self, id: impl Into<CowStr>) -> Self {
self.props.alter_id(id);
self
}
/// Modifica los atributos HTML o las clases CSS de la imagen.
/// Modifica identificador, clases CSS o atributos HTML del componente.
///
/// También acepta clases predefinidas para:
///

17
extensions/pagetop-bootsier/src/theme/nav/component.rs
View file

@ -32,9 +32,7 @@ use crate::theme::*;
/// ```
#[derive(AutoDefault, Clone, Debug, Getters)]
pub struct Nav {
#[getters(skip)]
id: AttrId,
/// Devuelve los atributos HTML y clases CSS del menú.
/// Devuelve identificador, clases CSS y atributos HTML del componente.
props: Props,
/// Devuelve el estilo visual seleccionado.
nav_kind: nav::Kind,
@ -50,10 +48,11 @@ impl Component for Nav {
}
fn id(&self) -> Option<String> {
self.id.get()
self.props.get_id()
}
fn setup(&mut self, _cx: &Context) {
// Clases CSS por defecto para el menú, según el estilo y la distribución seleccionados.
self.alter_prop(PropsOp::prepend_classes({
let mut classes = "nav".to_string();
self.nav_kind().push_class(&mut classes);
@ -69,7 +68,7 @@ impl Component for Nav {
}
Ok(html! {
ul id=[self.id()] (self.props()) {
ul (self.props()) {
(items)
}
})
@ -94,14 +93,14 @@ impl Nav {
// **< Nav BUILDER >****************************************************************************
/// Establece el identificador único (`id`) del menú.
/// Establece el identificador único del componente; igual a `with_prop(PropsOp::set_id(id))`.
#[builder_fn]
pub fn with_id(mut self, id: impl AsRef<str>) -> Self {
self.id.alter_id(id);
pub fn with_id(mut self, id: impl Into<CowStr>) -> Self {
self.props.alter_id(id);
self
}
/// Modifica los atributos HTML o las clases CSS del menú.
/// Modifica identificador, clases CSS o atributos HTML del componente.
#[builder_fn]
pub fn with_prop(mut self, op: PropsOp) -> Self {
self.props.alter_prop(op);

22
extensions/pagetop-bootsier/src/theme/nav/item.rs
View file

@ -78,9 +78,7 @@ impl ItemKind {
/// asociada, manteniendo una interfaz común para renderizar todos los elementos del menú.
#[derive(AutoDefault, Clone, Debug, Getters)]
pub struct Item {
#[getters(skip)]
id: AttrId,
/// Devuelve los atributos HTML y clases CSS del elemento.
/// Devuelve identificador, clases CSS y atributos HTML del componente.
props: Props,
/// Devuelve el tipo de elemento representado.
item_kind: ItemKind,
@ -92,7 +90,7 @@ impl Component for Item {
}
fn id(&self) -> Option<String> {
self.id.get()
self.props.get_id()
}
fn setup(&mut self, _cx: &Context) {
@ -104,7 +102,7 @@ impl Component for Item {
ItemKind::Void => html! {},
ItemKind::Label(label) => html! {
li id=[self.id()] (self.props()) {
li (self.props()) {
span class="nav-link disabled" aria-disabled="true" {
(label.using(cx))
}
@ -137,7 +135,7 @@ impl Component for Item {
let aria_disabled = (*disabled).then_some("true");
html! {
li id=[self.id()] (self.props()) {
li (self.props()) {
a
class=(classes)
href=[href]
@ -153,7 +151,7 @@ impl Component for Item {
}
ItemKind::Html(html) => html! {
li id=[self.id()] (self.props()) {
li (self.props()) {
(html.render(cx))
}
},
@ -170,7 +168,7 @@ impl Component for Item {
.unwrap_or_else(|| "Dropdown".to_string())
});
html! {
li id=[self.id()] (self.props()) {
li (self.props()) {
a
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
@ -283,14 +281,14 @@ impl Item {
// **< Item BUILDER >***************************************************************************
/// Establece el identificador único (`id`) del elemento.
/// Establece el identificador único del componente; igual a `with_prop(PropsOp::set_id(id))`.
#[builder_fn]
pub fn with_id(mut self, id: impl AsRef<str>) -> Self {
self.id.alter_id(id);
pub fn with_id(mut self, id: impl Into<CowStr>) -> Self {
self.props.alter_id(id);
self
}
/// Modifica los atributos HTML o las clases CSS del elemento.
/// Modifica identificador, clases CSS o atributos HTML del componente.
#[builder_fn]
pub fn with_prop(mut self, op: PropsOp) -> Self {
self.props.alter_prop(op);

13
extensions/pagetop-bootsier/src/theme/navbar/brand.rs
View file

@ -13,8 +13,6 @@ use crate::theme::*;
/// - El eslogan ([`with_slogan()`](Self::with_slogan)) es opcional; por defecto no tiene contenido.
#[derive(AutoDefault, Clone, Debug, Getters)]
pub struct Brand {
#[getters(skip)]
id: AttrId,
/// Devuelve la imagen de marca (si la hay).
image: Embed<Image>,
/// Devuelve el título de la identidad de marca.
@ -32,10 +30,6 @@ impl Component for Brand {
Self::default()
}
fn id(&self) -> Option<String> {
self.id.get()
}
fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
let image = self.image().render(cx);
let title = self.title().using(cx);
@ -56,13 +50,6 @@ impl Component for Brand {
impl Brand {
// **< Brand BUILDER >**************************************************************************
/// Establece el identificador único (`id`) de la marca.
#[builder_fn]
pub fn with_id(mut self, id: impl AsRef<str>) -> Self {
self.id.alter_id(id);
self
}
/// Asigna o quita la imagen de marca. Si se pasa `None`, no se mostrará.
#[builder_fn]
pub fn with_image(mut self, image: Option<Image>) -> Self {