Compare commits
No commits in common. "af53cd4b528dda660d6b174576d477ed2feb2696" and "99a4837e1174379f958c2144f1f68522ff90522b" have entirely different histories.
af53cd4b52
...
99a4837e11
15 changed files with 70 additions and 466 deletions
|
|
@ -283,68 +283,6 @@ input:disabled + label {
|
||||||
color: var(--val-color--text--muted);
|
color: var(--val-color--text--muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
|
||||||
* Dialog component
|
|
||||||
*/
|
|
||||||
|
|
||||||
.dialog {
|
|
||||||
padding: 0;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 32rem;
|
|
||||||
color: var(--val-color--text);
|
|
||||||
background-color: var(--val-color--bg);
|
|
||||||
border: none;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
.dialog::backdrop {
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 1rem;
|
|
||||||
padding: 1rem 1.25rem;
|
|
||||||
border-bottom: 1px solid color-mix(in srgb, var(--val-color--border) 15%, var(--val-color--bg));
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.125rem;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-close {
|
|
||||||
width: 1.5rem;
|
|
||||||
height: 1.5rem;
|
|
||||||
padding: 0;
|
|
||||||
line-height: 1;
|
|
||||||
color: var(--val-color--text--muted);
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.dialog-close::before {
|
|
||||||
content: "\2715";
|
|
||||||
}
|
|
||||||
.dialog-close:hover {
|
|
||||||
color: var(--val-color--text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-body {
|
|
||||||
padding: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 0.5rem;
|
|
||||||
padding: 1rem 1.25rem;
|
|
||||||
border-top: 1px solid color-mix(in srgb, var(--val-color--border) 15%, var(--val-color--bg));
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Dropdown component
|
* Dropdown component
|
||||||
*/
|
*/
|
||||||
|
|
@ -365,14 +303,18 @@ input:disabled + label {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.dropdown-toggle::after {
|
.dropdown-toggle::after {
|
||||||
content: "\25BC";
|
content: "";
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
width: 0.4em;
|
||||||
|
height: 0.4em;
|
||||||
margin-left: 0.35em;
|
margin-left: 0.35em;
|
||||||
font-size: 0.8em;
|
border-right: 0.125em solid currentColor;
|
||||||
|
border-bottom: 0.125em solid currentColor;
|
||||||
|
transform: rotate(45deg);
|
||||||
transition: transform .15s ease-in-out;
|
transition: transform .15s ease-in-out;
|
||||||
}
|
}
|
||||||
.dropdown:has(> .dropdown-menu.show) > .dropdown-toggle::after {
|
.dropdown:has(> .dropdown-menu.show) > .dropdown-toggle::after {
|
||||||
transform: rotate(180deg);
|
transform: rotate(-135deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
|
|
@ -388,11 +330,9 @@ input:disabled + label {
|
||||||
border: 1px solid color-mix(in srgb, var(--val-color--border) 15%, var(--val-color--bg));
|
border: 1px solid color-mix(in srgb, var(--val-color--border) 15%, var(--val-color--bg));
|
||||||
border-radius: 0.375rem;
|
border-radius: 0.375rem;
|
||||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||||||
/* Closed by default */
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
.dropdown-menu.show {
|
.dropdown-menu.hide {
|
||||||
display: block;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-item {
|
.dropdown-item {
|
||||||
|
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
// Abre y cierra los componentes `Dialog` de Basic (elemento `<dialog>` nativo) interpretando el
|
|
||||||
// vocabulario de atributos `data-dialog-*`, común a todos los temas: Bootsier traduce estos mismos
|
|
||||||
// nombres a los suyos propios (`data-bs-*`) en `setup()` para que el JS de Bootstrap los reconozca,
|
|
||||||
// así el marcado de un disparador o de un botón de cierre es idéntico en los dos temas. Sin
|
|
||||||
// dependencias: ni htmx, ni Bootstrap, ni ninguna otra librería.
|
|
||||||
|
|
||||||
// Abre el diálogo referenciado por `data-dialog-target` al pulsar un elemento con
|
|
||||||
// `data-dialog-toggle="modal"`.
|
|
||||||
document.addEventListener("click", function (event) {
|
|
||||||
var toggle = event.target.closest('[data-dialog-toggle="modal"]');
|
|
||||||
if (!toggle) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var target = toggle.getAttribute("data-dialog-target");
|
|
||||||
var dialog = target && document.querySelector(target);
|
|
||||||
if (!(dialog instanceof HTMLDialogElement)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
event.preventDefault();
|
|
||||||
dialog.showModal();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Cierra el `<dialog>` ascendente más cercano al pulsar un elemento con
|
|
||||||
// `data-dialog-dismiss="modal"`.
|
|
||||||
document.addEventListener("click", function (event) {
|
|
||||||
var dismiss = event.target.closest('[data-dialog-dismiss="modal"]');
|
|
||||||
if (!dismiss) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var dialog = dismiss.closest("dialog");
|
|
||||||
if (dialog) {
|
|
||||||
event.preventDefault();
|
|
||||||
dialog.close();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Cierra el diálogo al pulsar sobre el fondo (`::backdrop`): un clic ahí llega con el propio
|
|
||||||
// `<dialog>` como `event.target`, porque el fondo no forma parte de su caja de contenido.
|
|
||||||
document.querySelectorAll("dialog.dialog").forEach(function (dialog) {
|
|
||||||
dialog.addEventListener("click", function (event) {
|
|
||||||
if (event.target === dialog) {
|
|
||||||
dialog.close();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
// Conecta cada `Dropdown` (standalone o embebido en un `Nav`) con `accessible-menu` (ver
|
|
||||||
// basic.menu.min.js), que añade los roles ARIA, el `aria-expanded` y la navegación por teclado
|
|
||||||
// sobre el marcado ya generado en el servidor. Selecciona por clase, no por etiqueta, porque el
|
|
||||||
// disparador es un `<button>` en un `Dropdown` independiente y un `<a>` cuando cuelga de un
|
|
||||||
// `nav::Item::dropdown()`.
|
|
||||||
document.querySelectorAll(".dropdown > .dropdown-toggle").forEach(function (toggle) {
|
|
||||||
var container = toggle.parentElement;
|
|
||||||
var menu = container.querySelector(":scope > .dropdown-menu");
|
|
||||||
if (!menu) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
new TopLinkDisclosureMenu({
|
|
||||||
menuElement: menu,
|
|
||||||
containerElement: container,
|
|
||||||
controllerElement: toggle,
|
|
||||||
// `Header`/`Divider`/`Label` no son interactivos: se excluyen de `menuItemSelector`
|
|
||||||
// (si no, la librería asume que todo `<li>` tiene un enlace y lanza un TypeError al
|
|
||||||
// intentar añadirle listeners de foco).
|
|
||||||
menuItemSelector: "li:has(> a.dropdown-item, > button.dropdown-item)",
|
|
||||||
menuLinkSelector: "a.dropdown-item, button.dropdown-item",
|
|
||||||
// La navegación con flechas/Home/End es opcional en la librería (`false` por defecto);
|
|
||||||
// se activa para igualar el comportamiento habitual de un menú desplegable.
|
|
||||||
optionalKeySupport: true,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Cada `TopLinkDisclosureMenu` es independiente: al hacer clic fuera sólo cierra su propio menú
|
|
||||||
// (ver `_handleClick()` en accessible-menu), así que abrir un desplegable no cierra otro que ya
|
|
||||||
// estuviera abierto en otra parte de la página. Se corrige aquí escuchando `accessibleMenuExpand`
|
|
||||||
// -evento que la librería emite en cada apertura- y cerrando el resto de menús de nivel superior
|
|
||||||
// ya registrados, vía `window.AccessibleMenu.menus`, el registro global que la propia librería
|
|
||||||
// mantiene con todas las instancias (incluye las de `basic.menu.init.js`).
|
|
||||||
document.addEventListener("accessibleMenuExpand", function (event) {
|
|
||||||
var openedToggle = event.detail.toggle;
|
|
||||||
var menus = (window.AccessibleMenu && window.AccessibleMenu.menus) || {};
|
|
||||||
Object.values(menus).forEach(function (menu) {
|
|
||||||
var controller = menu.elements.controller;
|
|
||||||
if (controller && controller !== openedToggle) {
|
|
||||||
controller.close();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// El cierre "al hacer clic fuera" que trae la librería no funciona para un `controllerElement` de
|
|
||||||
// nivel superior como el nuestro: en `toggleToggle()` (accessible-menu), al abrir, hace
|
|
||||||
// `menu.focusState = "self"` y a continuación `toggle.elements.controlledMenu.focusState =
|
|
||||||
// "none"` -pensado para cuando el toggle abre un submenú hijo distinto del menú que lo contiene-,
|
|
||||||
// pero aquí `menu` y `toggle.elements.controlledMenu` son el mismo objeto: la segunda asignación
|
|
||||||
// deshace la primera. El cierre nativo de la librería depende de `focusState !== "none"`, así que
|
|
||||||
// nunca se dispara aunque el menú esté abierto (`isOpen` sí queda correcto). Se sustituye aquí por
|
|
||||||
// una comprobación propia basada sólo en `isOpen` y en la posición del clic.
|
|
||||||
document.addEventListener("click", function (event) {
|
|
||||||
var menus = (window.AccessibleMenu && window.AccessibleMenu.menus) || {};
|
|
||||||
Object.values(menus).forEach(function (menu) {
|
|
||||||
var controller = menu.elements.controller;
|
|
||||||
if (
|
|
||||||
controller &&
|
|
||||||
controller.isOpen &&
|
|
||||||
!menu.dom.menu.contains(event.target) &&
|
|
||||||
!controller.dom.toggle.contains(event.target)
|
|
||||||
) {
|
|
||||||
controller.close();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
26
assets/js/dropdown.init.js
Normal file
26
assets/js/dropdown.init.js
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
// Conecta cada `Dropdown` (standalone o embebido en un `Nav`) con `accessible-menu` (ver
|
||||||
|
// basic.menu.min.js), que añade los roles ARIA, el `aria-expanded` y la navegación por teclado
|
||||||
|
// sobre el marcado ya generado en el servidor. Selecciona por clase, no por etiqueta, porque el
|
||||||
|
// disparador es un `<button>` en un `Dropdown` independiente y un `<a>` cuando cuelga de un
|
||||||
|
// `nav::Item::dropdown()`.
|
||||||
|
document.querySelectorAll(".dropdown > .dropdown-toggle").forEach(function (toggle) {
|
||||||
|
var container = toggle.parentElement;
|
||||||
|
var menu = container.querySelector(":scope > .dropdown-menu");
|
||||||
|
if (!menu) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
new TopLinkDisclosureMenu({
|
||||||
|
menuElement: menu,
|
||||||
|
containerElement: container,
|
||||||
|
controllerElement: toggle,
|
||||||
|
// `Header`/`Divider`/`Label` no son interactivos: se excluyen de `menuItemSelector`
|
||||||
|
// (si no, la librería asume que todo `<li>` tiene un enlace y lanza un TypeError al
|
||||||
|
// intentar añadirle listeners de foco).
|
||||||
|
menuItemSelector: "li:has(> a.dropdown-item, > button.dropdown-item)",
|
||||||
|
menuLinkSelector: "a.dropdown-item, button.dropdown-item",
|
||||||
|
// La navegación con flechas/Home/End es opcional en la librería (`false` por defecto);
|
||||||
|
// se activa para igualar el comportamiento habitual de un menú desplegable.
|
||||||
|
optionalKeySupport: true,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -285,39 +285,6 @@ async fn form_controls(request: HttpRequest) -> Result<Markup, ErrorPage> {
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
.with_child(form_lists()),
|
.with_child(form_lists()),
|
||||||
)
|
|
||||||
// Bloque 4: diálogo modal.
|
|
||||||
.with_child(
|
|
||||||
Block::new()
|
|
||||||
.with_title(Lc::t("block_dialog", &LOC))
|
|
||||||
.with_child(
|
|
||||||
Dialog::new()
|
|
||||||
.with_id("delete-confirm")
|
|
||||||
.with_title(Lc::t("dialog_delete_title", &LOC))
|
|
||||||
.with_child(Html::with(|cx| {
|
|
||||||
html! {
|
|
||||||
p { (Lc::t("dialog_delete_body", &LOC).using(cx)) }
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
.with_footer(
|
|
||||||
Button::plain(Lc::t("btn_cancel", &LOC))
|
|
||||||
.with_prop(PropsOp::set("data-dialog-dismiss", "modal"))
|
|
||||||
.with_style(button::ButtonStyle::Outline(
|
|
||||||
Intent::Secondary,
|
|
||||||
)),
|
|
||||||
)
|
|
||||||
.with_footer(
|
|
||||||
Button::plain(Lc::t("btn_ok", &LOC))
|
|
||||||
.with_prop(PropsOp::set("data-dialog-dismiss", "modal"))
|
|
||||||
.with_style(button::ButtonStyle::Solid(Intent::Primary)),
|
|
||||||
),
|
|
||||||
)
|
|
||||||
.with_child(
|
|
||||||
Button::plain(Lc::t("btn_delete", &LOC))
|
|
||||||
.with_prop(PropsOp::set("data-dialog-toggle", "modal"))
|
|
||||||
.with_prop(PropsOp::set("data-dialog-target", "#delete-confirm"))
|
|
||||||
.with_style(button::ButtonStyle::Solid(Intent::Danger)),
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
.render()
|
.render()
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,6 @@ block_selections = Checkboxes, switches and radio buttons
|
||||||
block_text = Text fields, multiline and range
|
block_text = Text fields, multiline and range
|
||||||
block_lists = Selection lists
|
block_lists = Selection lists
|
||||||
block_lists_floating = Select lists and floating labels
|
block_lists_floating = Select lists and floating labels
|
||||||
block_dialog = Modal dialog
|
|
||||||
|
|
||||||
fieldset_text = Text fields
|
fieldset_text = Text fields
|
||||||
label_name = Full name
|
label_name = Full name
|
||||||
|
|
@ -78,6 +77,3 @@ btn_reset = Reset
|
||||||
btn_cancel = Cancel
|
btn_cancel = Cancel
|
||||||
btn_ok = Ok
|
btn_ok = Ok
|
||||||
btn_delete = Delete record
|
btn_delete = Delete record
|
||||||
|
|
||||||
dialog_delete_title = Delete record
|
|
||||||
dialog_delete_body = Are you sure you want to delete this record? This action cannot be undone.
|
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,6 @@ block_selections = Casillas, interruptores y botones de opción
|
||||||
block_text = Campos de texto, multilínea y rango
|
block_text = Campos de texto, multilínea y rango
|
||||||
block_lists = Listas de selección
|
block_lists = Listas de selección
|
||||||
block_lists_floating = Listas de selección y etiquetas flotantes
|
block_lists_floating = Listas de selección y etiquetas flotantes
|
||||||
block_dialog = Diálogo modal
|
|
||||||
|
|
||||||
fieldset_text = Campos de texto
|
fieldset_text = Campos de texto
|
||||||
label_name = Nombre completo
|
label_name = Nombre completo
|
||||||
|
|
@ -78,6 +77,3 @@ btn_reset = Restablecer
|
||||||
btn_cancel = Cancelar
|
btn_cancel = Cancelar
|
||||||
btn_ok = Aceptar
|
btn_ok = Aceptar
|
||||||
btn_delete = Eliminar registro
|
btn_delete = Eliminar registro
|
||||||
|
|
||||||
dialog_delete_title = Eliminar registro
|
|
||||||
dialog_delete_body = ¿Seguro que quieres eliminar este registro? Esta acción no se puede deshacer.
|
|
||||||
|
|
|
||||||
|
|
@ -23,9 +23,6 @@ pub mod container;
|
||||||
#[doc(inline)]
|
#[doc(inline)]
|
||||||
pub use container::Container;
|
pub use container::Container;
|
||||||
|
|
||||||
mod dialog;
|
|
||||||
pub use dialog::Dialog;
|
|
||||||
|
|
||||||
pub mod dropdown;
|
pub mod dropdown;
|
||||||
#[doc(inline)]
|
#[doc(inline)]
|
||||||
pub use dropdown::Dropdown;
|
pub use dropdown::Dropdown;
|
||||||
|
|
|
||||||
|
|
@ -1,149 +0,0 @@
|
||||||
use crate::prelude::*;
|
|
||||||
|
|
||||||
/// Componente para crear un **diálogo modal**.
|
|
||||||
///
|
|
||||||
/// Renderiza un cuadro de diálogo con cabecera (título opcional más el botón de cierre), cuerpo y
|
|
||||||
/// un pie opcional para botones de acción (`Ok`, `Cancelar`, u otros botones personalizados).
|
|
||||||
///
|
|
||||||
/// Sin cuerpo ni pie, el componente **no se renderiza**.
|
|
||||||
///
|
|
||||||
/// Cualquier [`Button`] que deba abrir o cerrar el diálogo debe usar el siguiente vocabulario de
|
|
||||||
/// atributos `data-dialog-*`:
|
|
||||||
///
|
|
||||||
/// - `data-dialog-toggle="modal"` más `data-dialog-target="#id"` en el `Button` que abre el
|
|
||||||
/// diálogo.
|
|
||||||
/// - `data-dialog-dismiss="modal"` en cualquier `Button` que deba cerrarlo (el botón de cierre de
|
|
||||||
/// la cabecera ya lo lleva).
|
|
||||||
///
|
|
||||||
/// Sólo en los componentes `Button` **podrán renombrarse automáticamente estos atributos al
|
|
||||||
/// vocabulario propio de cada tema**; cualquier otro elemento deberá usar directamente el nombre
|
|
||||||
/// final que el tema en cuestión espera, perdiendo así la portabilidad entre temas que sí tiene un
|
|
||||||
/// `Button`.
|
|
||||||
///
|
|
||||||
/// # Ejemplo
|
|
||||||
///
|
|
||||||
/// ```rust,no_run
|
|
||||||
/// use pagetop::prelude::*;
|
|
||||||
///
|
|
||||||
/// let dialog = Dialog::new()
|
|
||||||
/// .with_id("confirm-delete")
|
|
||||||
/// .with_title(Lc::n("Delete record"))
|
|
||||||
/// .with_child(
|
|
||||||
/// Html::with(|_| html! { p { "Are you sure you want to delete this record?" } })
|
|
||||||
/// )
|
|
||||||
/// .with_footer(
|
|
||||||
/// Button::plain(Lc::n("Cancel")).with_prop(PropsOp::set("data-dialog-dismiss", "modal")),
|
|
||||||
/// )
|
|
||||||
/// .with_footer(Button::submit(Lc::n("Delete")));
|
|
||||||
///
|
|
||||||
/// let opener = Button::plain(Lc::n("Delete"))
|
|
||||||
/// .with_prop(PropsOp::set("data-dialog-toggle", "modal"))
|
|
||||||
/// .with_prop(PropsOp::set("data-dialog-target", "#confirm-delete"));
|
|
||||||
/// ```
|
|
||||||
#[derive(AutoDefault, Clone, Debug, Getters)]
|
|
||||||
pub struct Dialog {
|
|
||||||
/// Devuelve identificador, clases CSS, atributos HTML y valores extra del componente.
|
|
||||||
props: Props,
|
|
||||||
/// Devuelve el título del diálogo.
|
|
||||||
title: Lc,
|
|
||||||
/// Devuelve la lista de componentes (`children`) del cuerpo del diálogo.
|
|
||||||
body: Children,
|
|
||||||
/// Devuelve la lista de componentes (`children`) del pie del diálogo.
|
|
||||||
footer: Children,
|
|
||||||
}
|
|
||||||
|
|
||||||
#[async_trait]
|
|
||||||
impl Component for Dialog {
|
|
||||||
fn new() -> Self {
|
|
||||||
Self::default()
|
|
||||||
}
|
|
||||||
|
|
||||||
fn id(&self) -> Option<String> {
|
|
||||||
self.props.get_id()
|
|
||||||
}
|
|
||||||
|
|
||||||
fn setup(&mut self, cx: &Context) {
|
|
||||||
// Asegura que el diálogo tiene un identificador único con el que abrirlo.
|
|
||||||
self.alter_prop(PropsOp::ensure_id(cx.build_id::<Self>(1)));
|
|
||||||
self.alter_prop(PropsOp::prepend_classes("dialog"));
|
|
||||||
}
|
|
||||||
|
|
||||||
async fn prepare(&self, cx: &mut Context) -> Result<Markup, ComponentError> {
|
|
||||||
let body = self.body().render(cx).await;
|
|
||||||
let footer = self.footer().render(cx).await;
|
|
||||||
if body.is_empty() && footer.is_empty() {
|
|
||||||
return Ok(html! {});
|
|
||||||
}
|
|
||||||
|
|
||||||
let title = self.title().using(cx);
|
|
||||||
// `setup()` garantiza que habrá un `id` antes de renderizar. Sin título no hay elemento
|
|
||||||
// que etiquete el diálogo, así que `aria-labelledby` se omite en vez de apuntar a un `id`
|
|
||||||
// inexistente.
|
|
||||||
let id_label = (!title.is_empty()).then(|| util::join!(self.id().unwrap(), "-label"));
|
|
||||||
|
|
||||||
Ok(html! {
|
|
||||||
dialog (self.props()) 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) }
|
|
||||||
}
|
|
||||||
button
|
|
||||||
type="button"
|
|
||||||
class="dialog-close"
|
|
||||||
data-dialog-dismiss="modal"
|
|
||||||
aria-label=[Lc::l("dialog_close").lookup(cx)]
|
|
||||||
{}
|
|
||||||
}
|
|
||||||
div class="dialog-body" { (body) }
|
|
||||||
@if !footer.is_empty() {
|
|
||||||
div class="dialog-footer" { (footer) }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
impl Dialog {
|
|
||||||
// **< Dialog BUILDER >*************************************************************************
|
|
||||||
|
|
||||||
/// 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, atributos HTML o valores extra del componente.
|
|
||||||
#[builder_fn]
|
|
||||||
pub fn with_prop(mut self, op: PropsOp) -> Self {
|
|
||||||
self.props.alter_prop(op);
|
|
||||||
self
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Establece el título del diálogo.
|
|
||||||
#[builder_fn]
|
|
||||||
pub fn with_title(mut self, title: Lc) -> Self {
|
|
||||||
self.title = title;
|
|
||||||
self
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Añade un nuevo componente al cuerpo del diálogo o modifica la lista de componentes
|
|
||||||
/// (`children`) del cuerpo con una operación [`ChildOp`].
|
|
||||||
#[builder_fn]
|
|
||||||
pub fn with_child(mut self, op: impl Into<ChildOp>) -> Self {
|
|
||||||
self.body.alter_child(op.into());
|
|
||||||
self
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Añade un nuevo componente al pie del diálogo (normalmente un [`Button`]) o modifica la
|
|
||||||
/// lista de componentes (`children`) del pie con una operación [`ChildOp`].
|
|
||||||
///
|
|
||||||
/// El pie ya se maqueta en fila y alineado a la derecha por su propia clase CSS
|
|
||||||
/// (`dialog-footer`); por lo que no requiere un [`ButtonSet`](super::ButtonSet) para alinear
|
|
||||||
/// los botones, aunque puede usarse si se desea.
|
|
||||||
#[builder_fn]
|
|
||||||
pub fn with_footer(mut self, op: impl Into<ChildOp>) -> Self {
|
|
||||||
self.footer.alter_child(op.into());
|
|
||||||
self
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -4,4 +4,4 @@ mod component;
|
||||||
pub use component::Dropdown;
|
pub use component::Dropdown;
|
||||||
|
|
||||||
mod item;
|
mod item;
|
||||||
pub use item::{Item, ItemKind};
|
pub use item::Item;
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
use crate::prelude::*;
|
use crate::prelude::*;
|
||||||
|
|
||||||
/// Componente para crear un **menú desplegable**.
|
/// Componente para crear un **menú de acciones desplegable**.
|
||||||
///
|
///
|
||||||
/// Renderiza un botón (único o desdoblado, ver [`with_button_split()`](Self::with_button_split))
|
/// Renderiza un botón (único o desdoblado, ver [`with_button_split()`](Self::with_button_split))
|
||||||
/// que despliega u oculta una lista de elementos [`dropdown::Item`](super::Item).
|
/// que despliega u oculta una lista de elementos [`dropdown::Item`](super::Item).
|
||||||
|
|
@ -29,7 +29,7 @@ pub struct Dropdown {
|
||||||
props: Props,
|
props: Props,
|
||||||
/// Devuelve el título del menú desplegable.
|
/// Devuelve el título del menú desplegable.
|
||||||
title: Lc,
|
title: Lc,
|
||||||
/// Devuelve si el botón se desdobla (*split*) en botón de acción más *toggle*.
|
/// Devuelve si el botón se desdobla (*split*) en botón de acción + *toggle*.
|
||||||
button_split: bool,
|
button_split: bool,
|
||||||
/// Devuelve la lista de elementos del menú.
|
/// Devuelve la lista de elementos del menú.
|
||||||
items: Children,
|
items: Children,
|
||||||
|
|
@ -119,31 +119,28 @@ impl Dropdown {
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Activa/desactiva el modo *split* (botón de acción más *toggle*).
|
/// Activa/desactiva el modo *split* (botón de acción + *toggle*).
|
||||||
#[builder_fn]
|
#[builder_fn]
|
||||||
pub fn with_button_split(mut self, split: bool) -> Self {
|
pub fn with_button_split(mut self, split: bool) -> Self {
|
||||||
self.button_split = split;
|
self.button_split = split;
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Añade un nuevo elemento al menú o modifica la lista de elementos del menú con una operación
|
/// Añade un nuevo elemento al menú o modifica la lista de elementos del menú con una
|
||||||
/// [`TypedOp`].
|
/// operación [`ChildOp`].
|
||||||
///
|
///
|
||||||
/// # Ejemplo
|
/// # Ejemplo
|
||||||
///
|
///
|
||||||
/// ```rust,no_run
|
/// ```rust,ignore
|
||||||
/// use pagetop::prelude::*;
|
/// dropdown.with_item(dropdown::Item::link("Opción", "/ruta"));
|
||||||
///
|
/// dropdown.with_item(ChildOp::AddMany(vec![
|
||||||
/// let dd = dropdown::Dropdown::new()
|
/// dropdown::Item::link(...).into(),
|
||||||
/// .with_item(dropdown::Item::link(Lc::n("Option"), "/path/to/option"))
|
/// dropdown::Item::divider().into(),
|
||||||
/// .with_item(TypedOp::AddMany(vec![
|
/// dropdown::Item::link(...).into(),
|
||||||
/// dropdown::Item::link(Lc::n("Other"), "/path/to/other"),
|
|
||||||
/// dropdown::Item::divider(),
|
|
||||||
/// dropdown::Item::link(Lc::n("Home"), "/"),
|
|
||||||
/// ]));
|
/// ]));
|
||||||
/// ```
|
/// ```
|
||||||
#[builder_fn]
|
#[builder_fn]
|
||||||
pub fn with_item(mut self, op: impl Into<TypedOp<dropdown::Item>>) -> Self {
|
pub fn with_item(mut self, op: impl Into<ChildOp>) -> Self {
|
||||||
self.items.alter_child(op.into());
|
self.items.alter_child(op.into());
|
||||||
self
|
self
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -28,10 +28,7 @@ impl Theme for Basic {
|
||||||
JavaScript::defer("/pagetop/js/basic.menu.min.js").with_version("4.4.0"),
|
JavaScript::defer("/pagetop/js/basic.menu.min.js").with_version("4.4.0"),
|
||||||
))
|
))
|
||||||
.alter_assets(AssetsOp::AddJavaScript(
|
.alter_assets(AssetsOp::AddJavaScript(
|
||||||
JavaScript::defer("/pagetop/js/basic.dropdown.min.js").with_version(PAGETOP_VERSION),
|
JavaScript::defer("/pagetop/js/dropdown.init.js").with_version(PAGETOP_VERSION),
|
||||||
))
|
|
||||||
.alter_assets(AssetsOp::AddJavaScript(
|
|
||||||
JavaScript::defer("/pagetop/js/basic.dialog.min.js").with_version(PAGETOP_VERSION),
|
|
||||||
))
|
))
|
||||||
.alter_child_in(
|
.alter_child_in(
|
||||||
&CoreRegions::Footer,
|
&CoreRegions::Footer,
|
||||||
|
|
|
||||||
|
|
@ -76,13 +76,8 @@ pub enum PropsError {
|
||||||
///
|
///
|
||||||
/// Las variantes [`Set`](Self::Set) y [`Remove`](Self::Remove) son operaciones de propósito
|
/// Las variantes [`Set`](Self::Set) y [`Remove`](Self::Remove) son operaciones de propósito
|
||||||
/// general. `Set` añade o reemplaza cualquier atributo HTML por nombre y valor, y `Remove` lo
|
/// general. `Set` añade o reemplaza cualquier atributo HTML por nombre y valor, y `Remove` lo
|
||||||
/// elimina. Los atributos `id`, `class` y `style` tienen semántica especial documentada en estas
|
/// elimina. Los atributos `id`, `class` y `style` tienen semántica especial documentada en cada
|
||||||
/// variantes.
|
/// variante.
|
||||||
///
|
|
||||||
/// [`Rename`](Self::Rename) cambia el nombre de un atributo genérico conservando su valor; no
|
|
||||||
/// reconoce `"id"`, `"class"` ni `"style"` como origen ni destino. Está pensada para que un tema
|
|
||||||
/// traduzca a su propio vocabulario los atributos que un componente ya expone, sin que éste tenga
|
|
||||||
/// que conocer ningún tema en concreto.
|
|
||||||
///
|
///
|
||||||
/// Las variantes `*Extra` permiten añadir valores tipados usando una clave. Están pensadas para
|
/// Las variantes `*Extra` permiten añadir valores tipados usando una clave. Están pensadas para
|
||||||
/// ampliar el comportamiento de componentes ya existentes. Como no es posible añadir campos a la
|
/// ampliar el comportamiento de componentes ya existentes. Como no es posible añadir campos a la
|
||||||
|
|
@ -144,13 +139,6 @@ pub enum PropsOp {
|
||||||
/// cadena con `;` (`content: "a;b"`) se interpretan correctamente. En cualquier caso, se
|
/// cadena con `;` (`content: "a;b"`) se interpretan correctamente. En cualquier caso, se
|
||||||
/// recomienda usar [`PropsOp::add_style()`](Self::add_style) para declarar estilos.
|
/// recomienda usar [`PropsOp::add_style()`](Self::add_style) para declarar estilos.
|
||||||
Set(CowStr, CowStr),
|
Set(CowStr, CowStr),
|
||||||
/// Si el primer atributo (origen) existe, lo renombra al segundo (destino), conservando su
|
|
||||||
/// valor; si el destino ya tiene su propio valor, se respeta sin sobrescribir y sólo se elimina
|
|
||||||
/// el origen. Si el origen no existe, la operación no tiene efecto.
|
|
||||||
///
|
|
||||||
/// Sólo actúa sobre atributos genéricos, por lo que los nombres `"id"`, `"class"` y `"style"`
|
|
||||||
/// no se reconocen como origen ni destino.
|
|
||||||
Rename(CowStr, CowStr),
|
|
||||||
/// Elimina el atributo indicado. Usar `"id"` elimina el identificador; usar `"class"` vacía la
|
/// Elimina el atributo indicado. Usar `"id"` elimina el identificador; usar `"class"` vacía la
|
||||||
/// lista de clases; y usar `"style"` vacía la lista de estilos.
|
/// lista de clases; y usar `"style"` vacía la lista de estilos.
|
||||||
Remove(CowStr),
|
Remove(CowStr),
|
||||||
|
|
@ -248,26 +236,6 @@ impl PropsOp {
|
||||||
Self::Set(name.into(), value.into())
|
Self::Set(name.into(), value.into())
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Crea la variante [`Rename`](Self::Rename) para renombrar `from` a `to`.
|
|
||||||
///
|
|
||||||
/// ```rust
|
|
||||||
/// # use pagetop::prelude::*;
|
|
||||||
/// let props = Props::new("data-dialog-toggle", "modal")
|
|
||||||
/// .with_prop(PropsOp::rename("data-dialog-toggle", "data-bs-toggle"));
|
|
||||||
/// assert_eq!(props.get_prop("data-bs-toggle"), Some("modal".to_string()));
|
|
||||||
/// assert_eq!(props.get_prop("data-dialog-toggle"), None);
|
|
||||||
///
|
|
||||||
/// // Si el destino tiene su propio valor no se sobrescribe, sólo se elimina el origen.
|
|
||||||
/// let props = Props::new("data-bs-toggle", "collapse")
|
|
||||||
/// .with_prop(PropsOp::set("data-dialog-toggle", "modal"))
|
|
||||||
/// .with_prop(PropsOp::rename("data-dialog-toggle", "data-bs-toggle"));
|
|
||||||
/// assert_eq!(props.get_prop("data-bs-toggle"), Some("collapse".to_string()));
|
|
||||||
/// assert_eq!(props.get_prop("data-dialog-toggle"), None);
|
|
||||||
/// ```
|
|
||||||
pub fn rename(from: impl Into<CowStr>, to: impl Into<CowStr>) -> Self {
|
|
||||||
Self::Rename(from.into(), to.into())
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Crea la variante [`Remove`](Self::Remove) para el atributo indicado.
|
/// Crea la variante [`Remove`](Self::Remove) para el atributo indicado.
|
||||||
pub fn remove(name: impl Into<CowStr>) -> Self {
|
pub fn remove(name: impl Into<CowStr>) -> Self {
|
||||||
Self::Remove(name.into())
|
Self::Remove(name.into())
|
||||||
|
|
@ -603,14 +571,6 @@ impl Props {
|
||||||
self.attrs.push((name, value));
|
self.attrs.push((name, value));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
PropsOp::Rename(from, to) => {
|
|
||||||
if let Some(pos) = self.attrs.iter().position(|(k, _)| k == &from) {
|
|
||||||
let (_, value) = self.attrs.remove(pos);
|
|
||||||
if !self.attrs.iter().any(|(k, _)| k == &to) {
|
|
||||||
self.attrs.push((to, value));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
PropsOp::Remove(name) => {
|
PropsOp::Remove(name) => {
|
||||||
if name.as_ref() == "id" {
|
if name.as_ref() == "id" {
|
||||||
self.id = None;
|
self.id = None;
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,3 @@
|
||||||
# Breadcrumb component.
|
|
||||||
breadcrumb_label = Breadcrumb navigation
|
|
||||||
|
|
||||||
# Dialog component.
|
|
||||||
dialog_close = Close dialog
|
|
||||||
|
|
||||||
# Dropdown component.
|
|
||||||
dropdown_toggle = Toggle dropdown
|
|
||||||
dropdown_default_title = Dropdown
|
|
||||||
|
|
||||||
# Form components.
|
# Form components.
|
||||||
field_required = This field is required
|
field_required = This field is required
|
||||||
|
|
||||||
|
|
@ -26,8 +16,15 @@ intro_text2 = PageTop brings back the essence of the classic web, renders on the
|
||||||
intro_code = Code
|
intro_code = Code
|
||||||
intro_have_fun = Coding is creating
|
intro_have_fun = Coding is creating
|
||||||
|
|
||||||
# Navbar component.
|
# PoweredBy component.
|
||||||
navbar_toggle = Toggle navigation
|
poweredby_pagetop = Powered by { $pagetop_link }
|
||||||
|
|
||||||
|
# Dropdown component.
|
||||||
|
dropdown_toggle = Toggle dropdown
|
||||||
|
dropdown_default_title = Dropdown
|
||||||
|
|
||||||
|
# Breadcrumb component.
|
||||||
|
breadcrumb_label = Breadcrumb navigation
|
||||||
|
|
||||||
# Pager component.
|
# Pager component.
|
||||||
pager_aria_label = Page navigation
|
pager_aria_label = Page navigation
|
||||||
|
|
@ -39,8 +36,5 @@ pager_goto_label = Jump to page
|
||||||
pager_goto_button = Go
|
pager_goto_button = Go
|
||||||
pager_summary = Showing { $first }-{ $last } of { $total }
|
pager_summary = Showing { $first }-{ $last } of { $total }
|
||||||
|
|
||||||
# PoweredBy component.
|
|
||||||
poweredby_pagetop = Powered by { $pagetop_link }
|
|
||||||
|
|
||||||
# Table component.
|
# Table component.
|
||||||
table_empty = No data to display
|
table_empty = No data to display
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,3 @@
|
||||||
# Breadcrumb component.
|
|
||||||
breadcrumb_label = Ruta de navegación
|
|
||||||
|
|
||||||
# Dialog component.
|
|
||||||
dialog_close = Cerrar diálogo
|
|
||||||
|
|
||||||
# Dropdown component.
|
|
||||||
dropdown_toggle = Alternar menú desplegable
|
|
||||||
dropdown_default_title = Menú desplegable
|
|
||||||
|
|
||||||
# Form components.
|
# Form components.
|
||||||
field_required = Este campo es obligatorio
|
field_required = Este campo es obligatorio
|
||||||
|
|
||||||
|
|
@ -26,8 +16,15 @@ intro_text2 = PageTop reivindica la esencia de la web clásica, renderiza en el
|
||||||
intro_code = Código
|
intro_code = Código
|
||||||
intro_have_fun = Programar es crear
|
intro_have_fun = Programar es crear
|
||||||
|
|
||||||
# Navbar component.
|
# PoweredBy component.
|
||||||
navbar_toggle = Alternar navegación
|
poweredby_pagetop = Funciona con { $pagetop_link }
|
||||||
|
|
||||||
|
# Dropdown component.
|
||||||
|
dropdown_toggle = Alternar menú desplegable
|
||||||
|
dropdown_default_title = Menú desplegable
|
||||||
|
|
||||||
|
# Breadcrumb component.
|
||||||
|
breadcrumb_label = Ruta de navegación
|
||||||
|
|
||||||
# Pager component.
|
# Pager component.
|
||||||
pager_aria_label = Navegación de páginas
|
pager_aria_label = Navegación de páginas
|
||||||
|
|
@ -39,8 +36,5 @@ pager_goto_label = Saltar a la página
|
||||||
pager_goto_button = Ir
|
pager_goto_button = Ir
|
||||||
pager_summary = Mostrando { $first }-{ $last } de { $total }
|
pager_summary = Mostrando { $first }-{ $last } de { $total }
|
||||||
|
|
||||||
# PoweredBy component.
|
|
||||||
poweredby_pagetop = Funciona con { $pagetop_link }
|
|
||||||
|
|
||||||
# Table component.
|
# Table component.
|
||||||
table_empty = No hay datos que mostrar
|
table_empty = No hay datos que mostrar
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue