♻️ (pagetop): Incorpora Context al render de Props

src/base/component/badge.rs

@@ -42,7 +42,7 @@ impl Component for Badge {
 
     async fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
         Ok(html! {
-            span (self.props()) {
+            span (self.props().unpack(cx)) {
                 (self.label().using(cx))
             }
         })

src/base/component/block.rs

@@ -40,7 +40,7 @@ impl Component for Block {
         }
 
         Ok(html! {
-            div (self.props()) {
+            div (self.props().unpack(cx)) {
                 @if let Some(title) = self.title().lookup(cx) {
                     h2 class="block-title" { span { (title) } }
                 }

src/base/component/brand.rs

@@ -69,9 +69,9 @@ impl Component for Brand {
         }
         Ok(html! {
             @if let Some(route) = self.route() {
-                a (self.props()) href=(route.resolve(cx)) { (inner_brand) }
+                a (self.props().unpack(cx)) href=(route.resolve(cx)) { (inner_brand) }
             } @else {
-                span (self.props()) { (inner_brand) }
+                span (self.props().unpack(cx)) { (inner_brand) }
             }
         })
     }

src/base/component/breadcrumb/component.rs

@@ -56,7 +56,7 @@ impl Component for Breadcrumb {
         }
 
         Ok(html! {
-            nav (self.props()) aria-label=[Lc::l("breadcrumb_label").lookup(cx)] {
+            nav (self.props().unpack(cx)) aria-label=[Lc::l("breadcrumb_label").lookup(cx)] {
                 ol.breadcrumb {
                     @for crumb in self.crumbs() {
                         (crumb.render_crumb(cx))

src/base/component/breadcrumb/crumb.rs

@@ -92,12 +92,12 @@ impl Crumb {
         let label = self.label().using(cx);
         match self.route() {
             Some(route) => html! {
-                li (self.props()) {
+                li (self.props().unpack(cx)) {
                     a href=(route.resolve(cx).to_string()) { (label) }
                 }
             },
             None => html! {
-                li (self.props()) { (label) }
+                li (self.props().unpack(cx)) { (label) }
             },
         }
     }

src/base/component/button/component.rs

@@ -103,7 +103,7 @@ impl Component for Button {
 
             return Ok(html! {
                 a
-                    (self.props())
+                    (self.props().unpack(cx))
                     href=[href]
                     title=[self.title().lookup(cx)]
                     autofocus[*self.autofocus()]
@@ -118,7 +118,7 @@ impl Component for Button {
         Ok(html! {
             button
                 type=(self.kind())
-                (self.props())
+                (self.props().unpack(cx))
                 name=[self.name().as_deref()]
                 value=[self.value().as_deref()]
                 title=[self.title().lookup(cx)]

src/base/component/container.rs

@@ -77,12 +77,12 @@ impl Component for Container {
             return Ok(html! {});
         }
         Ok(match self.kind() {
-            Kind::Default => html! { div     (self.props()) { (output) } },
-            Kind::Main    => html! { main    (self.props()) { (output) } },
-            Kind::Header  => html! { header  (self.props()) { (output) } },
-            Kind::Footer  => html! { footer  (self.props()) { (output) } },
-            Kind::Section => html! { section (self.props()) { (output) } },
-            Kind::Article => html! { article (self.props()) { (output) } },
+            Kind::Default => html! { div     (self.props().unpack(cx)) { (output) } },
+            Kind::Main    => html! { main    (self.props().unpack(cx)) { (output) } },
+            Kind::Header  => html! { header  (self.props().unpack(cx)) { (output) } },
+            Kind::Footer  => html! { footer  (self.props().unpack(cx)) { (output) } },
+            Kind::Section => html! { section (self.props().unpack(cx)) { (output) } },
+            Kind::Article => html! { article (self.props().unpack(cx)) { (output) } },
         })
     }
 }

src/base/component/dialog.rs

@@ -82,7 +82,7 @@ impl Component for Dialog {
         let id_label = (!title.is_empty()).then(|| util::join!(self.id().unwrap(), "-label"));
 
         Ok(html! {
-            dialog (self.props()) aria-labelledby=[id_label.as_deref()] {
+            dialog (self.props().unpack(cx)) aria-labelledby=[id_label.as_deref()] {
                 div class="dialog-header" {
                     @if let Some(id_label) = &id_label {
                         h2 id=(id_label) class="dialog-title" { (title) }

src/base/component/dropdown/component.rs

@@ -103,7 +103,7 @@ impl Component for Dropdown {
         let toggle_label = Lc::l("dropdown_toggle").using(cx);
 
         Ok(html! {
-            div (self.props()) {
+            div (self.props().unpack(cx)) {
                 @if *self.button_split() {
                     button type="button" class=(&button_classes) { (&title) }
                     button

src/base/component/dropdown/item.rs

@@ -63,7 +63,7 @@ impl Component for Item {
             ItemKind::Void => html! {},
 
             ItemKind::Label(label) => html! {
-                li (self.props()) {
+                li (self.props().unpack(cx)) {
                     span class="dropdown-item-text" {
                         (label.using(cx))
                     }
@@ -97,7 +97,7 @@ impl Component for Item {
                 let tabindex = disabled.then_some("-1");
 
                 html! {
-                    li (self.props()) {
+                    li (self.props().unpack(cx)) {
                         a
                             class=(classes)
                             href=[href]
@@ -123,7 +123,7 @@ impl Component for Item {
                 let disabled_attr = disabled.then_some("disabled");
 
                 html! {
-                    li (self.props()) {
+                    li (self.props().unpack(cx)) {
                         button
                             class=(classes)
                             type="button"
@@ -137,7 +137,7 @@ impl Component for Item {
             }
 
             ItemKind::Header(label) => html! {
-                li (self.props()) {
+                li (self.props().unpack(cx)) {
                     h6 class="dropdown-header" {
                         (label.using(cx))
                     }
@@ -145,7 +145,7 @@ impl Component for Item {
             },
 
             ItemKind::Divider => html! {
-                li (self.props()) { hr class="dropdown-divider" {} }
+                li (self.props().unpack(cx)) { hr class="dropdown-divider" {} }
             },
         })
     }

src/base/component/form/check.rs

@@ -144,7 +144,7 @@ impl Component for Field {
         let container_id = self.id().unwrap();
 
         Ok(html! {
-            div (self.props()) {
+            div (self.props().unpack(cx)) {
                 @if let Some(label) = self.label().lookup(cx) {
                     label class="form-label" { (label) }
                 }

src/base/component/form/checkbox.rs

@@ -105,7 +105,7 @@ impl Component for Checkbox {
         let is_switch = *self.checkbox_kind() == form::CheckboxKind::Switch;
 
         Ok(html! {
-            div (self.props()) {
+            div (self.props().unpack(cx)) {
                 input
                     type="checkbox"
                     role=[is_switch.then_some("switch")]

src/base/component/form/component.rs

@@ -78,7 +78,7 @@ impl Component for Form {
         };
         Ok(html! {
             form
-                (self.props())
+                (self.props().unpack(cx))
                 action=[self.action().try_resolve(cx)]
                 method=[method]
                 accept-charset=[self.charset().as_deref()]

src/base/component/form/fieldset.rs

@@ -54,7 +54,7 @@ impl Component for Fieldset {
         }
 
         Ok(html! {
-            fieldset (self.props()) disabled[*self.disabled()] {
+            fieldset (self.props().unpack(cx)) disabled[*self.disabled()] {
                 @if let Some(legend) = self.legend().lookup(cx) {
                     legend { (legend) }
                 }

src/base/component/form/input.rs

@@ -234,7 +234,7 @@ impl Component for Field {
         };
 
         Ok(html! {
-            div (self.props()) {
+            div (self.props().unpack(cx)) {
                 @if let Some(label) = self.label().lookup(cx) {
                     label for=[input_id.as_deref()] class="form-label" {
                         (label)

src/base/component/form/number.rs

@@ -86,7 +86,7 @@ impl Component for Number {
         let container_id = self.id();
         let input_id = container_id.as_deref().map(|id| util::join!(id, "-input"));
         Ok(html! {
-            div (self.props()) {
+            div (self.props().unpack(cx)) {
                 @if let Some(label) = self.label().lookup(cx) {
                     label for=[input_id.as_deref()] class="form-label" {
                         (label)

src/base/component/form/radio.rs

@@ -144,7 +144,7 @@ impl Component for Field {
         let container_id = self.id().unwrap();
 
         Ok(html! {
-            div (self.props()) {
+            div (self.props().unpack(cx)) {
                 @if let Some(label) = self.label().lookup(cx) {
                     label class="form-label" {
                         (label)

src/base/component/form/range.rs

@@ -83,7 +83,7 @@ impl Component for Range {
         let container_id = self.id();
         let range_id = container_id.as_deref().map(|id| util::join!(id, "-range"));
         Ok(html! {
-            div (self.props()) {
+            div (self.props().unpack(cx)) {
                 @if let Some(label) = self.label().lookup(cx) {
                     label for=[range_id.as_deref()] class="form-label" { (label) }
                 }

src/base/component/form/select.rs

@@ -242,7 +242,7 @@ impl Component for Field {
         let select_id = container_id.as_deref().map(|id| util::join!(id, "-select"));
 
         Ok(html! {
-            div (self.props()) {
+            div (self.props().unpack(cx)) {
                 @if let Some(label) = self.label().lookup(cx) {
                     label for=[select_id.as_deref()] class="form-label" {
                         (label)

src/base/component/form/textarea.rs

@@ -95,7 +95,7 @@ impl Component for Textarea {
             .map(|id| util::join!(id, "-textarea"));
 
         Ok(html! {
-            div (self.props()) {
+            div (self.props().unpack(cx)) {
                 @if let Some(label) = self.label().lookup(cx) {
                     label for=[textarea_id.as_deref()] class="form-label" {
                         (label)

src/base/component/image/component.rs

@@ -77,11 +77,9 @@ impl Component for Image {
     }
 
     async fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
-        let alt_text = self.alternative().lookup(cx).unwrap_or_default();
         let source = match self.source() {
             image::Source::Logo(svg) => {
-                let label = (!alt_text.is_empty()).then_some(alt_text.as_str());
-                return Ok(svg.markup_with(self.props(), label));
+                return Ok(svg.markup_with(cx, self.props(), self.alternative().clone()));
             }
             image::Source::Responsive(source) => Some(source),
             image::Source::Thumbnail(source) => Some(source),
@@ -90,8 +88,8 @@ impl Component for Image {
         Ok(html! {
             img
                 src=[source]
-                alt=(alt_text)
-                (self.props()) {}
+                alt=(self.alternative().lookup(cx).unwrap_or_default())
+                (self.props().unpack(cx)) {}
         })
     }
 }

src/base/component/messages.rs

@@ -54,7 +54,7 @@ impl Component for Messages {
             return Ok(html! {});
         }
         Ok(html! {
-            div (self.props()) role="alert" {
+            div (self.props().unpack(cx)) role="alert" {
                 @for message in cx.messages() {
                     div class=(match message.level() {
                         MessageLevel::Info => "message message-info",

src/base/component/nav/component.rs

@@ -62,7 +62,7 @@ impl Component for Nav {
         }
 
         Ok(html! {
-            ul (self.props()) {
+            ul (self.props().unpack(cx)) {
                 (items)
             }
         })

src/base/component/nav/item.rs

@@ -86,7 +86,7 @@ impl Component for Item {
             ItemKind::Void => html! {},
 
             ItemKind::Label(label) => html! {
-                li (self.props()) {
+                li (self.props().unpack(cx)) {
                     span class="nav-link disabled" aria-disabled="true" {
                         (label.using(cx))
                     }
@@ -119,7 +119,7 @@ impl Component for Item {
                 let aria_disabled = (*disabled).then_some("true");
 
                 html! {
-                    li (self.props()) {
+                    li (self.props().unpack(cx)) {
                         a
                             class=(classes)
                             href=[route_link]
@@ -135,7 +135,7 @@ impl Component for Item {
             }
 
             ItemKind::Html(html) => html! {
-                li (self.props()) {
+                li (self.props().unpack(cx)) {
                     (html.render(cx).await)
                 }
             },
@@ -153,7 +153,7 @@ impl Component for Item {
                         title
                     };
                     html! {
-                        li (self.props()) {
+                        li (self.props().unpack(cx)) {
                             a
                                 class="nav-link dropdown-toggle"
                                 href="#"

src/base/component/navbar/component.rs

@@ -139,36 +139,36 @@ impl Component for Navbar {
         content_props.alter_prop(PropsOp::prepend_classes("navbar-content"));
 
         Ok(html! {
-            nav (self.props()) {
+            nav (self.props().unpack(cx)) {
                 @match self.layout() {
                     // Barra más sencilla: sólo contenido, siempre visible.
                     navbar::Layout::Simple => {
-                        div (content_props) { (items) }
+                        div (content_props.unpack(cx)) { (items) }
                     },
 
                     // Barra sencilla que se puede contraer/expandir.
                     navbar::Layout::SimpleToggle => {
                         (button(cx, &id_content))
-                        div id=(&id_content) (content_props) { (items) }
+                        div id=(&id_content) (content_props.unpack(cx)) { (items) }
                     },
 
                     // Barra con marca, siempre visible, sin botón.
                     navbar::Layout::SimpleBrandLeft(brand) => {
                         (brand.render(cx).await)
-                        div (content_props) { (items) }
+                        div (content_props.unpack(cx)) { (items) }
                     },
 
                     // Barra con marca y botón, en ese orden.
                     navbar::Layout::BrandLeft(brand) => {
                         (brand.render(cx).await)
                         (button(cx, &id_content))
-                        div id=(&id_content) (content_props) { (items) }
+                        div id=(&id_content) (content_props.unpack(cx)) { (items) }
                     },
 
                     // Barra con botón y marca, en ese orden.
                     navbar::Layout::BrandRight(brand) => {
                         (button(cx, &id_content))
-                        div id=(&id_content) (content_props) { (items) }
+                        div id=(&id_content) (content_props.unpack(cx)) { (items) }
                         (brand.render(cx).await)
                     },
                 }

src/base/component/pager.rs

@@ -235,7 +235,7 @@ impl Component for Pager {
         };
 
         Ok(html! {
-            nav (self.props()) aria-label=[self.aria_label().lookup(cx)] {
+            nav (self.props().unpack(cx)) aria-label=[self.aria_label().lookup(cx)] {
                 @if show_summary {
                     @let items_per_page = self.items_per_page().max(1);
                     @let first = (page - 1) * items_per_page + 1;

src/base/component/table/column.rs

@@ -89,13 +89,13 @@ impl Column {
         let label = self.label().using(cx);
 
         let Some(sort) = self.sort() else {
-            return html! { th (self.props()) scope="col" { (label) } };
+            return html! { th (self.props().unpack(cx)) scope="col" { (label) } };
         };
         let (aria_sort, link_props) = sort.header_attrs();
 
         html! {
-            th (self.props()) scope="col" aria-sort=(aria_sort) {
-                a href=[sort.href().as_deref()] (link_props) { (label) }
+            th (self.props().unpack(cx)) scope="col" aria-sort=(aria_sort) {
+                a href=[sort.href().as_deref()] (link_props.unpack(cx)) { (label) }
             }
         }
     }

src/base/component/table/component.rs

@@ -81,7 +81,7 @@ impl Component for Table {
 
         Ok(html! {
             div.table-responsive {
-                table (self.props()) {
+                table (self.props().unpack(cx)) {
                     @if !self.columns().is_empty() {
                         thead {
                             tr {
@@ -94,9 +94,9 @@ impl Component for Table {
                     @if !self.rows().is_empty() {
                         tbody {
                             @for row in self.rows() {
-                                tr (row.props()) {
+                                tr (row.props().unpack(cx)) {
                                     @for cell in row.cells() {
-                                        td (cell.props()) { (cell.children().render(cx).await) }
+                                        td (cell.props().unpack(cx)) { (cell.children().render(cx).await) }
                                     }
                                 }
                             }