🚧 [base] Añade nuevo componente menu

This commit is contained in:
Manuel Cillero 2025-09-28 13:47:33 +02:00
parent 744bd700fc
commit c0577a0773
15 changed files with 1249 additions and 7 deletions

View file

@ -1,5 +1,53 @@
//! Componentes nativos proporcionados por PageTop.
use crate::AutoDefault;
use std::fmt;
// **< FontSize >***********************************************************************************
#[derive(AutoDefault)]
pub enum FontSize {
ExtraLarge,
XxLarge,
XLarge,
Large,
Medium,
#[default]
Normal,
Small,
XSmall,
XxSmall,
ExtraSmall,
}
#[rustfmt::skip]
impl FontSize {
#[inline]
pub const fn as_str(&self) -> &'static str {
match self {
FontSize::ExtraLarge => "fs__x3l",
FontSize::XxLarge => "fs__x2l",
FontSize::XLarge => "fs__xl",
FontSize::Large => "fs__l",
FontSize::Medium => "fs__m",
FontSize::Normal => "",
FontSize::Small => "fs__s",
FontSize::XSmall => "fs__xs",
FontSize::XxSmall => "fs__x2s",
FontSize::ExtraSmall => "fs__x3s",
}
}
}
impl fmt::Display for FontSize {
fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
f.write_str(self.as_str())
}
}
// *************************************************************************************************
mod html;
pub use html::Html;
@ -11,3 +59,5 @@ pub use poweredby::PoweredBy;
mod icon;
pub use icon::{Icon, IconKind};
pub mod menu;

View file

@ -0,0 +1,17 @@
mod menu_menu;
pub use menu_menu::Menu;
mod item;
pub use item::{Item, ItemKind};
mod submenu;
pub use submenu::Submenu;
mod megamenu;
pub use megamenu::Megamenu;
mod group;
pub use group::Group;
mod element;
pub use element::{Element, ElementType};

View file

@ -0,0 +1,56 @@
use crate::prelude::*;
type Content = Typed<Html>;
type SubmenuItems = Typed<menu::Submenu>;
#[derive(AutoDefault)]
pub enum ElementType {
#[default]
Void,
Html(Content),
Submenu(SubmenuItems),
}
#[rustfmt::skip]
#[derive(AutoDefault)]
pub struct Element {
element_type: ElementType,
}
impl Component for Element {
fn new() -> Self {
Element::default()
}
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
match self.element_type() {
ElementType::Void => PrepareMarkup::None,
ElementType::Html(content) => PrepareMarkup::With(html! {
(content.render(cx))
}),
ElementType::Submenu(submenu) => PrepareMarkup::With(html! {
(submenu.render(cx))
}),
}
}
}
impl Element {
pub fn html(content: Html) -> Self {
Element {
element_type: ElementType::Html(Content::with(content)),
}
}
pub fn submenu(submenu: menu::Submenu) -> Self {
Element {
element_type: ElementType::Submenu(SubmenuItems::with(submenu)),
}
}
// **< Element GETTERS >************************************************************************
pub fn element_type(&self) -> &ElementType {
&self.element_type
}
}

View file

@ -0,0 +1,58 @@
use crate::prelude::*;
#[rustfmt::skip]
#[derive(AutoDefault)]
pub struct Group {
id : AttrId,
elements: Children,
}
impl Component for Group {
fn new() -> Self {
Group::default()
}
fn id(&self) -> Option<String> {
self.id.get()
}
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
PrepareMarkup::With(html! {
div id=[self.id()] class="menu-group" {
(self.elements().render(cx))
}
})
}
}
impl Group {
// **< Group BUILDER >**************************************************************************
/// Establece el identificador único (`id`) del grupo.
#[builder_fn]
pub fn with_id(mut self, id: impl AsRef<str>) -> Self {
self.id.alter_value(id);
self
}
/// Añade un nuevo elemento al menú.
pub fn add_element(mut self, element: menu::Element) -> Self {
self.elements
.alter_typed(TypedOp::Add(Typed::with(element)));
self
}
/// Modifica la lista de elementos (`children`) aplicando una operación [`TypedOp`].
#[builder_fn]
pub fn with_elements(mut self, op: TypedOp<menu::Element>) -> Self {
self.elements.alter_typed(op);
self
}
// **< Group GETTERS >**************************************************************************
/// Devuelve la lista de elementos (`children`) del grupo.
pub fn elements(&self) -> &Children {
&self.elements
}
}

View file

@ -0,0 +1,183 @@
use crate::prelude::*;
//use super::{Megamenu, Submenu};
type Label = L10n;
type Content = Typed<Html>;
type SubmenuItems = Typed<menu::Submenu>;
//type MegamenuGroups = Typed<Megamenu>;
#[derive(AutoDefault)]
pub enum ItemKind {
#[default]
Void,
Label(Label),
Link(Label, FnPathByContext),
LinkBlank(Label, FnPathByContext),
Html(Content),
Submenu(Label, SubmenuItems),
// Megamenu(Label, MegamenuGroups),
}
#[rustfmt::skip]
#[derive(AutoDefault)]
pub struct Item {
item_kind : ItemKind,
description: AttrL10n,
left_icon : Typed<Icon>,
right_icon : Typed<Icon>,
}
impl Component for Item {
fn new() -> Self {
Item::default()
}
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
let description = self.description().lookup(cx);
let left_icon = self.left_icon().render(cx);
let right_icon = self.right_icon().render(cx);
match self.item_kind() {
ItemKind::Void => PrepareMarkup::None,
ItemKind::Label(label) => PrepareMarkup::With(html! {
li class="menu__label" {
span title=[description] {
(left_icon)
(label.using(cx))
(right_icon)
}
}
}),
ItemKind::Link(label, path) => PrepareMarkup::With(html! {
li class="menu__link" {
a href=(path(cx)) title=[description] {
(left_icon)
(label.using(cx))
(right_icon)
}
}
}),
ItemKind::LinkBlank(label, path) => PrepareMarkup::With(html! {
li class="menu__link" {
a href=(path(cx)) title=[description] target="_blank" {
(left_icon)
(label.using(cx))
(right_icon)
}
}
}),
ItemKind::Html(content) => PrepareMarkup::With(html! {
li class="menu__html" {
(content.render(cx))
}
}),
ItemKind::Submenu(label, submenu) => PrepareMarkup::With(html! {
li class="menu__children" {
a href="#" title=[description] {
(left_icon)
(label.using(cx)) i class="menu__icon bi-chevron-down" {}
}
div class="menu__subs" {
(submenu.render(cx))
}
}
}),
/*
ItemKind::Megamenu(label, megamenu) => PrepareMarkup::With(html! {
li class="menu__children" {
a href="#" title=[description] {
(left_icon)
(label.escaped(cx.langid())) i class="menu__icon bi-chevron-down" {}
}
div class="menu__subs menu__mega" {
(megamenu.render(cx))
}
}
}),
*/
}
}
}
impl Item {
pub fn label(label: L10n) -> Self {
Item {
item_kind: ItemKind::Label(label),
..Default::default()
}
}
pub fn link(label: L10n, path: FnPathByContext) -> Self {
Item {
item_kind: ItemKind::Link(label, path),
..Default::default()
}
}
pub fn link_blank(label: L10n, path: FnPathByContext) -> Self {
Item {
item_kind: ItemKind::LinkBlank(label, path),
..Default::default()
}
}
pub fn html(content: Html) -> Self {
Item {
item_kind: ItemKind::Html(Content::with(content)),
..Default::default()
}
}
pub fn submenu(label: L10n, submenu: menu::Submenu) -> Self {
Item {
item_kind: ItemKind::Submenu(label, SubmenuItems::with(submenu)),
..Default::default()
}
}
/*
pub fn megamenu(label: L10n, megamenu: Megamenu) -> Self {
Item {
item_kind: ItemKind::Megamenu(label, MegamenuGroups::with(megamenu)),
..Default::default()
}
}
*/
// **< Item BUILDER >***************************************************************************
#[builder_fn]
pub fn with_description(mut self, text: L10n) -> Self {
self.description.alter_value(text);
self
}
#[builder_fn]
pub fn with_left_icon<I: Into<Icon>>(mut self, icon: Option<I>) -> Self {
self.left_icon.alter_component(icon.map(Into::into));
self
}
#[builder_fn]
pub fn with_right_icon<I: Into<Icon>>(mut self, icon: Option<I>) -> Self {
self.right_icon.alter_component(icon.map(Into::into));
self
}
// **< Item GETTERS >***************************************************************************
pub fn item_kind(&self) -> &ItemKind {
&self.item_kind
}
pub fn description(&self) -> &AttrL10n {
&self.description
}
pub fn left_icon(&self) -> &Typed<Icon> {
&self.left_icon
}
pub fn right_icon(&self) -> &Typed<Icon> {
&self.right_icon
}
}

View file

@ -0,0 +1,57 @@
use crate::prelude::*;
#[rustfmt::skip]
#[derive(AutoDefault)]
pub struct Megamenu {
id : AttrId,
groups: Children,
}
impl Component for Megamenu {
fn new() -> Self {
Megamenu::default()
}
fn id(&self) -> Option<String> {
self.id.get()
}
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
PrepareMarkup::With(html! {
div id=[self.id()] class="menu__groups" {
(self.groups().render(cx))
}
})
}
}
impl Megamenu {
// **< Megamenu BUILDER >***********************************************************************
/// Establece el identificador único (`id`) del megamenú.
#[builder_fn]
pub fn with_id(mut self, id: impl AsRef<str>) -> Self {
self.id.alter_value(id);
self
}
/// Añade un nuevo grupo al menú.
pub fn add_group(mut self, group: menu::Group) -> Self {
self.groups.alter_typed(TypedOp::Add(Typed::with(group)));
self
}
/// Modifica la lista de grupos (`children`) aplicando una operación [`TypedOp`].
#[builder_fn]
pub fn with_groups(mut self, op: TypedOp<menu::Group>) -> Self {
self.groups.alter_typed(op);
self
}
// **< Megamenu GETTERS >***********************************************************************
/// Devuelve la lista de grupos (`children`) del megamenú.
pub fn groups(&self) -> &Children {
&self.groups
}
}

View file

@ -0,0 +1,106 @@
use crate::prelude::*;
#[rustfmt::skip]
#[derive(AutoDefault)]
pub struct Menu {
id : AttrId,
classes: AttrClasses,
items : Children,
}
impl Component for Menu {
fn new() -> Self {
Menu::default()
}
fn id(&self) -> Option<String> {
self.id.get()
}
fn setup_before_prepare(&mut self, _cx: &mut Context) {
self.alter_classes(ClassesOp::Prepend, "menu");
}
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
// cx.set_param::<bool>(PARAM_BASE_INCLUDE_MENU_ASSETS, &true);
// cx.set_param::<bool>(PARAM_BASE_INCLUDE_ICONS, &true);
PrepareMarkup::With(html! {
div id=[self.id()] class=[self.classes().get()] {
div class="menu__wrapper" {
div class="menu__panel" {
div class="menu__overlay" {}
nav class="menu__nav" {
div class="menu__header" {
button type="button" class="menu__back" {
(Icon::svg(html! {
path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0" {}
}).render(cx))
}
div class="menu__title" {}
button type="button" class="menu__close" {
(Icon::svg(html! {
path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z" {}
}).render(cx))
}
}
ul class="menu__list" {
(self.items().render(cx))
}
}
}
button
type="button"
class="menu__trigger"
title=[L10n::l("menu_toggle").lookup(cx)]
{
span {} span {} span {}
}
}
}
})
}
}
impl Menu {
// **< Menu BUILDER >***************************************************************************
/// Establece el identificador único (`id`) del menú.
#[builder_fn]
pub fn with_id(mut self, id: impl AsRef<str>) -> Self {
self.id.alter_value(id);
self
}
/// Modifica la lista de clases CSS aplicadas al menú.
#[builder_fn]
pub fn with_classes(mut self, op: ClassesOp, classes: impl AsRef<str>) -> Self {
self.classes.alter_value(op, classes);
self
}
/// Añade un nuevo ítem al menú.
pub fn add_item(mut self, item: menu::Item) -> Self {
self.items.alter_typed(TypedOp::Add(Typed::with(item)));
self
}
/// Modifica la lista de ítems (`children`) aplicando una operación [`TypedOp`].
#[builder_fn]
pub fn with_items(mut self, op: TypedOp<menu::Item>) -> Self {
self.items.alter_typed(op);
self
}
// **< Menu GETTERS >***************************************************************************
/// Devuelve las clases CSS asociadas al menú.
pub fn classes(&self) -> &AttrClasses {
&self.classes
}
/// Devuelve la lista de ítems (`children`) del menú.
pub fn items(&self) -> &Children {
&self.items
}
}

View file

@ -0,0 +1,73 @@
use crate::prelude::*;
#[rustfmt::skip]
#[derive(AutoDefault)]
pub struct Submenu {
id : AttrId,
title: AttrL10n,
items: Children,
}
impl Component for Submenu {
fn new() -> Self {
Submenu::default()
}
fn id(&self) -> Option<String> {
self.id.get()
}
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
PrepareMarkup::With(html! {
div id=[self.id()] class="menu__items" {
@if let Some(title) = self.title().lookup(cx) {
h4 class="menu__title" { (title) }
}
ul {
(self.items().render(cx))
}
}
})
}
}
impl Submenu {
// **< Submenu BUILDER >************************************************************************
/// Establece el identificador único (`id`) del submenú.
#[builder_fn]
pub fn with_id(mut self, id: impl AsRef<str>) -> Self {
self.id.alter_value(id);
self
}
#[builder_fn]
pub fn with_title(mut self, title: L10n) -> Self {
self.title.alter_value(title);
self
}
/// Añade un nuevo ítem al submenú.
pub fn add_item(mut self, item: menu::Item) -> Self {
self.items.alter_typed(TypedOp::Add(Typed::with(item)));
self
}
/// Modifica la lista de ítems (`children`) aplicando una operación [`TypedOp`].
#[builder_fn]
pub fn with_items(mut self, op: TypedOp<menu::Item>) -> Self {
self.items.alter_typed(op);
self
}
// **< Submenu GETTERS >************************************************************************
pub fn title(&self) -> &AttrL10n {
&self.title
}
/// Devuelve la lista de ítems (`children`) del submenú.
pub fn items(&self) -> &Children {
&self.items
}
}

View file

@ -51,14 +51,35 @@ impl Theme for Basic {
"PageTopIntro" => "/css/intro.css",
_ => "/css/basic.css",
};
let pkg_version = env!("CARGO_PKG_VERSION");
page.alter_assets(AssetsOp::AddStyleSheet(
StyleSheet::from("/css/normalize.css")
.with_version("8.0.1")
.with_weight(-99),
))
.alter_assets(AssetsOp::AddStyleSheet(
StyleSheet::from("/css/root.css")
.with_version(pkg_version)
.with_weight(-99),
))
.alter_assets(AssetsOp::AddStyleSheet(
StyleSheet::from("/css/components.css")
.with_version(pkg_version)
.with_weight(-99),
))
.alter_assets(AssetsOp::AddStyleSheet(
StyleSheet::from("/css/menu.css")
.with_version(pkg_version)
.with_weight(-99),
))
.alter_assets(AssetsOp::AddStyleSheet(
StyleSheet::from(styles)
.with_version(env!("CARGO_PKG_VERSION"))
.with_version(pkg_version)
.with_weight(-99),
))
.alter_assets(AssetsOp::AddJavaScript(
JavaScript::defer("/js/menu.js")
.with_version(pkg_version)
.with_weight(-99),
));
}

View file

@ -15,6 +15,7 @@ pub use assets::{Asset, Assets};
mod context;
pub use context::{AssetsOp, Context, Contextual, ErrorParam};
pub type FnPathByContext = fn(cx: &Context) -> &str;
// **< HTML ATTRIBUTES >****************************************************************************