✨ (base): Añade componente Dialog
Sustituye `PropsOp::Translate` por `Rename` para que los temas traduzcan atributos `data-dialog-*` al vocabulario propio (p. ej. `data-bs-*` en Bootsier).
This commit is contained in:
parent
3c67d9d04c
commit
76c5cb9b76
11 changed files with 362 additions and 42 deletions
|
|
@ -23,6 +23,9 @@ pub mod container;
|
|||
#[doc(inline)]
|
||||
pub use container::Container;
|
||||
|
||||
mod dialog;
|
||||
pub use dialog::Dialog;
|
||||
|
||||
pub mod dropdown;
|
||||
#[doc(inline)]
|
||||
pub use dropdown::Dropdown;
|
||||
|
|
|
|||
149
src/base/component/dialog.rs
Normal file
149
src/base/component/dialog.rs
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
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
|
||||
}
|
||||
}
|
||||
|
|
@ -30,6 +30,9 @@ impl Theme for Basic {
|
|||
.alter_assets(AssetsOp::AddJavaScript(
|
||||
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(
|
||||
&CoreRegions::Footer,
|
||||
ChildOp::AddIfEmpty(PoweredBy::new().into()),
|
||||
|
|
|
|||
|
|
@ -76,8 +76,13 @@ pub enum PropsError {
|
|||
///
|
||||
/// 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
|
||||
/// elimina. Los atributos `id`, `class` y `style` tienen semántica especial documentada en cada
|
||||
/// variante.
|
||||
/// elimina. Los atributos `id`, `class` y `style` tienen semántica especial documentada en estas
|
||||
/// variantes.
|
||||
///
|
||||
/// [`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
|
||||
/// ampliar el comportamiento de componentes ya existentes. Como no es posible añadir campos a la
|
||||
|
|
@ -139,16 +144,16 @@ pub enum PropsOp {
|
|||
/// cadena con `;` (`content: "a;b"`) se interpretan correctamente. En cualquier caso, se
|
||||
/// recomienda usar [`PropsOp::add_style()`](Self::add_style) para declarar estilos.
|
||||
Set(CowStr, CowStr),
|
||||
/// 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.
|
||||
Remove(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.
|
||||
Translate(CowStr, CowStr),
|
||||
Rename(CowStr, CowStr),
|
||||
/// 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.
|
||||
Remove(CowStr),
|
||||
/// Almacena un valor extra tipado asociado a la clave indicada. Si ya existe uno con esa clave,
|
||||
/// lo reemplaza.
|
||||
SetExtra(&'static str, PropsExtra),
|
||||
|
|
@ -243,29 +248,29 @@ impl PropsOp {
|
|||
Self::Set(name.into(), value.into())
|
||||
}
|
||||
|
||||
/// Crea la variante [`Remove`](Self::Remove) para el atributo indicado.
|
||||
pub fn remove(name: impl Into<CowStr>) -> Self {
|
||||
Self::Remove(name.into())
|
||||
}
|
||||
|
||||
/// Crea la variante [`Translate`](Self::Translate) para renombrar `from` a `to`.
|
||||
/// 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::translate("data-dialog-toggle", "data-bs-toggle"));
|
||||
/// .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::translate("data-dialog-toggle", "data-bs-toggle"));
|
||||
/// .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 translate(from: impl Into<CowStr>, to: impl Into<CowStr>) -> Self {
|
||||
Self::Translate(from.into(), to.into())
|
||||
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.
|
||||
pub fn remove(name: impl Into<CowStr>) -> Self {
|
||||
Self::Remove(name.into())
|
||||
}
|
||||
|
||||
/// Crea la variante [`SetExtra`](Self::SetExtra) con la clave y el valor indicados.
|
||||
|
|
@ -598,6 +603,14 @@ impl Props {
|
|||
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) => {
|
||||
if name.as_ref() == "id" {
|
||||
self.id = None;
|
||||
|
|
@ -609,14 +622,6 @@ impl Props {
|
|||
self.attrs.retain(|(k, _)| k != &name);
|
||||
}
|
||||
}
|
||||
PropsOp::Translate(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::SetExtra(key, extra) => {
|
||||
self.extras.insert(key, extra);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,13 @@
|
|||
# Breadcrumb component.
|
||||
breadcrumb_label = Breadcrumb navigation
|
||||
|
||||
# Dialog component.
|
||||
dialog_close = Close dialog
|
||||
|
||||
# Dropdown component.
|
||||
dropdown_toggle = Toggle dropdown
|
||||
dropdown_default_title = Dropdown
|
||||
|
||||
# Form components.
|
||||
field_required = This field is required
|
||||
|
||||
|
|
@ -16,15 +26,8 @@ intro_text2 = PageTop brings back the essence of the classic web, renders on the
|
|||
intro_code = Code
|
||||
intro_have_fun = Coding is creating
|
||||
|
||||
# PoweredBy component.
|
||||
poweredby_pagetop = Powered by { $pagetop_link }
|
||||
|
||||
# Dropdown component.
|
||||
dropdown_toggle = Toggle dropdown
|
||||
dropdown_default_title = Dropdown
|
||||
|
||||
# Breadcrumb component.
|
||||
breadcrumb_label = Breadcrumb navigation
|
||||
# Navbar component.
|
||||
navbar_toggle = Toggle navigation
|
||||
|
||||
# Pager component.
|
||||
pager_aria_label = Page navigation
|
||||
|
|
@ -36,5 +39,8 @@ pager_goto_label = Jump to page
|
|||
pager_goto_button = Go
|
||||
pager_summary = Showing { $first }-{ $last } of { $total }
|
||||
|
||||
# PoweredBy component.
|
||||
poweredby_pagetop = Powered by { $pagetop_link }
|
||||
|
||||
# Table component.
|
||||
table_empty = No data to display
|
||||
|
|
|
|||
|
|
@ -1,3 +1,13 @@
|
|||
# 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.
|
||||
field_required = Este campo es obligatorio
|
||||
|
||||
|
|
@ -16,15 +26,8 @@ intro_text2 = PageTop reivindica la esencia de la web clásica, renderiza en el
|
|||
intro_code = Código
|
||||
intro_have_fun = Programar es crear
|
||||
|
||||
# PoweredBy component.
|
||||
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
|
||||
# Navbar component.
|
||||
navbar_toggle = Alternar navegación
|
||||
|
||||
# Pager component.
|
||||
pager_aria_label = Navegación de páginas
|
||||
|
|
@ -36,5 +39,8 @@ pager_goto_label = Saltar a la página
|
|||
pager_goto_button = Ir
|
||||
pager_summary = Mostrando { $first }-{ $last } de { $total }
|
||||
|
||||
# PoweredBy component.
|
||||
poweredby_pagetop = Funciona con { $pagetop_link }
|
||||
|
||||
# Table component.
|
||||
table_empty = No hay datos que mostrar
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue