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

♻️ Atributos class e id explícitos en html!

Browse source 
Se usa `class="..."` e `id="..."` en lugar de `div.a #x`. El HTML
generado es idéntico.
This commit is contained in:
Manuel Cillero 2026-09-26 07:05:59 +02:00
parent 58d1fef4f1
commit 3f3634fdab
21 changed files with 80 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

18
extensions/pagetop-admin/src/component/admin_frame.rs
View file

@ -53,14 +53,14 @@ impl Component for AdminFrame {
Ok(html! {
(breadcrumbs)
header.admin-header {
h1.admin-page-title { (self.title().using(cx)) }
header class="admin-header" {
h1 class="admin-page-title" { (self.title().using(cx)) }
(local_acts)
}
@if !local_tasks.0.is_empty() {
nav.admin-local-tasks { (local_tasks) }
nav class="admin-local-tasks" { (local_tasks) }
}
div.admin-content {
div class="admin-content" {
(body)
}
})
@ -117,7 +117,7 @@ fn render_local_tasks(cx: &Context, current_path: &str) -> Markup {
return html! {};
}
html! {
ul.admin-tasks-list {
ul class="admin-tasks-list" {
@for task in tasks {
@let is_active = current_path == task.path;
li class=(if is_active { "admin-task admin-task-active" } else { "admin-task" }) {
@ -137,10 +137,12 @@ fn render_local_actions(cx: &Context, current_path: &str) -> Markup {
return html! {};
}
html! {
ul.admin-actions-list {
ul class="admin-actions-list" {
@for action in actions {
li.admin-action {
a.admin-action-link href=(cx.route(action.url.as_str())) { (action.title.using(cx)) }
li class="admin-action" {
a class="admin-action-link" href=(cx.route(action.url.as_str())) {
(action.title.using(cx))
}
}
}
}

32
extensions/pagetop-admin/src/component/config_form.rs
View file

@ -98,20 +98,20 @@ impl Component for ConfigForm {
Ok(html! {
@if *self.saved() {
div.admin-message."admin-message-ok" { (&saved_msg) }
div class="admin-message admin-message-ok" { (&saved_msg) }
}
@if *self.error() {
div.admin-message."admin-message-error" { (&error_msg) }
div class="admin-message admin-message-error" { (&error_msg) }
}
form.admin-config-form method="post" action=(action) {
form class="admin-config-form" method="post" action=(action) {
@for (i, field) in schema.fields().iter().enumerate() {
@let pf = &prepared[i];
div.admin-form-field {
label.admin-form-label for=(field.name()) { (field.label()) }
div class="admin-form-field" {
label class="admin-form-label" for=(field.name()) { (field.label()) }
@match field.field_type() {
SettingFieldType::Text { max_length } => {
@if let Some(max) = max_length {
input.admin-form-input
input class="admin-form-input"
type="text"
id=(field.name())
name=(field.name())
@ -119,7 +119,7 @@ impl Component for ConfigForm {
maxlength=(max)
required[*field.required()];
} @else {
input.admin-form-input
input class="admin-form-input"
type="text"
id=(field.name())
name=(field.name())
@ -129,7 +129,7 @@ impl Component for ConfigForm {
}
SettingFieldType::Number { min, max } => {
@if let (Some(lo), Some(hi)) = (min, max) {
input.admin-form-input
input class="admin-form-input"
type="number"
id=(field.name())
name=(field.name())
@ -138,7 +138,7 @@ impl Component for ConfigForm {
max=(hi)
required[*field.required()];
} @else if let Some(lo) = min {
input.admin-form-input
input class="admin-form-input"
type="number"
id=(field.name())
name=(field.name())
@ -146,7 +146,7 @@ impl Component for ConfigForm {
min=(lo)
required[*field.required()];
} @else if let Some(hi) = max {
input.admin-form-input
input class="admin-form-input"
type="number"
id=(field.name())
name=(field.name())
@ -154,7 +154,7 @@ impl Component for ConfigForm {
max=(hi)
required[*field.required()];
} @else {
input.admin-form-input
input class="admin-form-input"
type="number"
id=(field.name())
name=(field.name())
@ -163,7 +163,7 @@ impl Component for ConfigForm {
}
}
SettingFieldType::Boolean => {
input.admin-form-checkbox
input class="admin-form-checkbox"
type="checkbox"
id=(field.name())
name=(field.name())
@ -171,7 +171,7 @@ impl Component for ConfigForm {
checked[pf.checked];
}
SettingFieldType::Select { options } => {
select.admin-form-select
select class="admin-form-select"
id=(field.name())
name=(field.name())
required[*field.required()]
@ -187,12 +187,12 @@ impl Component for ConfigForm {
}
}
@if let Some(help) = field.help_text() {
small.admin-form-help { (help) }
small class="admin-form-help" { (help) }
}
}
}
div.admin-form-actions {
button.admin-btn."admin-btn-primary" type="submit" {
div class="admin-form-actions" {
button class="admin-btn admin-btn-primary" type="submit" {
(&save_label)
}
}

4
extensions/pagetop-htmx/README.md
View file

@ -58,7 +58,7 @@ async fn homepage(request: HttpRequest) -> Result<Markup, ErrorPage> {
button hx-get="/api/hello" hx-target="#result" {
"Say hello"
}
div #result {}
div id="result" {}
}))
.render().await
}
@ -79,7 +79,7 @@ async fn homepage(request: HttpRequest) -> Result<Markup, ErrorPage> {
Page::new(request)
.with_child(Html::with(move |cx| html! {
button (props.unpack(cx)) { "Say hello" }
div #result {}
div id="result" {}
}))
.render().await
}

4
extensions/pagetop-htmx/src/lib.rs
View file

@ -59,7 +59,7 @@ async fn homepage(request: HttpRequest) -> Result<Markup, ErrorPage> {
button hx-get="/api/hello" hx-target="#result" {
"Say hello"
}
div #result {}
div id="result" {}
}))
.render().await
}
@ -80,7 +80,7 @@ async fn homepage(request: HttpRequest) -> Result<Markup, ErrorPage> {
Page::new(request)
.with_child(Html::with(move |cx| html! {
button (props.unpack(cx)) { "Say hello" }
div #result {}
div id="result" {}
}))
.render().await
}

4
extensions/pagetop-htmx/src/response.rs
View file

@ -21,7 +21,7 @@ use crate::hx;
/// use pagetop_htmx::prelude::*;
///
/// async fn add_item() -> impl IntoResponse {
/// let new_item = html! { li #item-42 { "New item" } };
/// let new_item = html! { li id="item-42" { "New item" } };
///
/// HtmxResponse::new(new_item)
/// .retarget("#list")
@ -123,7 +123,7 @@ impl HtmxResponse {
///
/// # fn build_response(table: Markup, roles_count: i64) -> HtmxResponse {
/// let counter = html! {
/// span #roles-count hx-swap-oob="true" { (roles_count) }
/// span id="roles-count" hx-swap-oob="true" { (roles_count) }
/// };
/// HtmxResponse::new(table).oob(counter)
/// # }

12
extensions/pagetop-htmx/tests/response.rs
View file

@ -15,7 +15,7 @@ fn header<'a>(response: &'a web::Response, name: &str) -> Option<&'a str> {
#[pagetop::test]
async fn new_renders_the_given_markup_with_an_html_content_type() {
let response = HtmxResponse::new(html! { li #item-42 { "New item" } }).into_response();
let response = HtmxResponse::new(html! { li id="item-42" { "New item" } }).into_response();
assert_eq!(
header(&response, "content-type"),
@ -41,8 +41,8 @@ async fn empty_has_no_body_but_keeps_the_html_content_type() {
#[pagetop::test]
async fn oob_appends_markup_after_the_main_body() {
let response = HtmxResponse::new(html! { li #item-42 { "New item" } })
.oob(html! { span #item-count hx-swap-oob="true" { "1" } })
let response = HtmxResponse::new(html! { li id="item-42" { "New item" } })
.oob(html! { span id="item-count" hx-swap-oob="true" { "1" } })
.into_response();
let body = web::test::read_body_text(response).await;
@ -58,8 +58,8 @@ async fn oob_appends_markup_after_the_main_body() {
#[pagetop::test]
async fn oob_can_be_called_several_times_to_accumulate_fragments() {
let response = HtmxResponse::new(html! { p { "Main" } })
.oob(html! { span #a hx-swap-oob="true" { "A" } })
.oob(html! { span #b hx-swap-oob="true" { "B" } })
.oob(html! { span id="a" hx-swap-oob="true" { "A" } })
.oob(html! { span id="b" hx-swap-oob="true" { "B" } })
.into_response();
let body = web::test::read_body_text(response).await;
@ -76,7 +76,7 @@ async fn oob_can_be_called_several_times_to_accumulate_fragments() {
#[pagetop::test]
async fn oob_works_from_an_empty_response() {
let response = HtmxResponse::empty()
.oob(html! { span #item-count hx-swap-oob="true" { "0" } })
.oob(html! { span id="item-count" hx-swap-oob="true" { "0" } })
.into_response();
let body = web::test::read_body_text(response).await;

2
extensions/pagetop-user/src/component.rs
View file

@ -22,7 +22,7 @@ use pagetop::prelude::*;
// formularios de autenticación y por los de administración.
pub(crate) fn error_banner(error: Option<Lc>) -> Html {
Html::with(move |cx| match &error {
Some(e) => html! { div.user-form-error role="alert" { (e.clone().using(cx)) } },
Some(e) => html! { div class="user-form-error" role="alert" { (e.clone().using(cx)) } },
None => html! {},
})
}

4
extensions/pagetop-user/src/component/admin/role_table.rs
View file

@ -111,13 +111,13 @@ impl Component for RoleTable {
Ok(html! {
div (self.props().unpack(cx)) {
div.user-admin-actions {
div class="user-admin-actions" {
a href=(new_href) {
(Lc::t("btn-create-role", &LOCALES_USER).using(cx))
}
}
@if let Some(message) = self.message() {
div.user-form-error role="alert" { (message.clone().using(cx)) }
div class="user-form-error" role="alert" { (message.clone().using(cx)) }
}
(table.render(cx).await)
(pager)

2
extensions/pagetop-user/src/component/admin/user_table.rs
View file

@ -87,7 +87,7 @@ impl Component for UserTable {
Ok(html! {
div (self.props().unpack(cx)) {
div.user-admin-actions {
div class="user-admin-actions" {
a href=(new_href) {
(Lc::t("btn-create-user", &LOCALES_USER).using(cx))
}

8
extensions/pagetop-user/src/component/login_form.rs
View file

@ -69,8 +69,8 @@ impl Component for LoginForm {
let form = form.render(cx).await;
Ok(html! {
div.user-login-page {
div.user-login-card {
div class="user-login-page" {
div class="user-login-card" {
(form)
}
}
@ -82,13 +82,13 @@ fn links(allow_registration: bool) -> Html {
Html::with(move |cx| {
html! {
@if allow_registration {
p.user-register-link {
p class="user-register-link" {
a href=(cx.route(REGISTER_PATH)) {
(Lc::t("link-register", &LOCALES_USER).using(cx))
}
}
}
p.user-reset-link {
p class="user-reset-link" {
a href=(cx.route(PASSWORD_RESET_PATH)) {
(Lc::t("link-forgot-password", &LOCALES_USER).using(cx))
}

8
extensions/pagetop-user/src/component/user_block.rs
View file

@ -19,10 +19,10 @@ impl Component for UserBlock {
Ok(if user.is_authenticated() {
let display = user.display_name().unwrap_or("?");
html! {
nav.user-block {
span.user-name { (display) }
nav class="user-block" {
span class="user-name" { (display) }
" · "
form.user-logout-inline method="post" action=(cx.route(LOGOUT_PATH)) {
form class="user-logout-inline" method="post" action=(cx.route(LOGOUT_PATH)) {
button type="submit" {
(Lc::t("btn-logout", &LOCALES_USER).using(cx))
}
@ -31,7 +31,7 @@ impl Component for UserBlock {
}
} else {
html! {
nav.user-block {
nav class="user-block" {
a href=(cx.route(LOGIN_PATH)) {
(Lc::t("btn-login", &LOCALES_USER).using(cx))
}

2
extensions/pagetop-user/src/handlers/account.rs
View file

@ -119,7 +119,7 @@ async fn profile_roles(roles: &[role::Model], cx: &mut Context) -> Block {
@if items.is_empty() {
"-"
} @else {
ul.user-profile-roles {
ul class="user-profile-roles" {
@for (label, system_badge) in &items {
li {
(label.as_str())

2
extensions/pagetop-user/src/handlers/admin.rs
View file

@ -51,7 +51,7 @@ pub(crate) fn back_link(href: impl Into<RoutePath>) -> Html {
let href = href.into();
Html::with(move |cx| {
html! {
p.user-admin-back-link {
p class="user-admin-back-link" {
a href=(href.clone()) { (Lc::t("link-back-to-list", &LOCALES_USER).using(cx)) }
}
}

4
extensions/pagetop-user/src/handlers/admin/permissions.rs
View file

@ -26,12 +26,12 @@ pub(crate) async fn list_get(request: HttpRequest) -> Result<Response, ErrorPage
content = content.with_child(Block::new().with_title(group_label.clone()).with_child(
Html::with(move |cx| {
html! {
table.user-admin-table {
table class="user-admin-table" {
tbody {
@for (key, label) in &items {
tr {
td { (label.using(cx)) }
td.user-admin-permission-key { (key) }
td class="user-admin-permission-key" { (key) }
}
}
}

6
extensions/pagetop-user/src/handlers/admin/roles.rs
View file

@ -361,12 +361,12 @@ fn role_view_permissions(groups: &PermissionGroups) -> Vec<Block> {
.with_title(group_label.clone())
.with_child(Html::with(move |cx| {
html! {
ul.user-admin-permission-list {
ul class="user-admin-permission-list" {
@for (_key, label, granted) in &perms {
@if *granted {
li.user-admin-permission-granted { (label.using(cx)) }
li class="user-admin-permission-granted" { (label.using(cx)) }
} @else {
li.user-admin-permission-missing { (label.using(cx)) }
li class="user-admin-permission-missing" { (label.using(cx)) }
}
}
}

4
extensions/pagetop-user/src/handlers/admin/users.rs
View file

@ -92,7 +92,7 @@ fn search_bar(current_query: Option<String>) -> Html {
let value = current_query.unwrap_or_default();
Html::with(move |cx| {
html! {
div.user-admin-search {
div class="user-admin-search" {
input
type="search"
id="user-admin-search-input"
@ -588,7 +588,7 @@ async fn user_view_roles(roles: &[role::Model], cx: &mut Context) -> Block {
@if items.is_empty() {
"-"
} @else {
table.user-admin-table {
table class="user-admin-table" {
tbody {
@for (id, machine_name, label, system_badge) in &items {
@let href = cx.route(role_path(*id, "view")).to_string();