🚚 Gran actualización de Paquetes a Extensiones

CREDITS.md

@@ -1,8 +1,8 @@
 # 🔃 Dependencias
 
 `PageTop` está basado en [Rust](https://www.rust-lang.org/) y crece a hombros de gigantes
-aprovechando algunas de las librerías (*crates*) más robustas y populares del
-[ecosistema Rust](https://lib.rs), incluyendo:
+aprovechando algunas de las librerías más robustas y populares del [ecosistema Rust](https://lib.rs)
+como:
 
   * [Actix Web](https://actix.rs/) para los servicios web.
   * [Tracing](https://github.com/tokio-rs/tracing) para la gestión de trazas y registro de eventos
@@ -10,7 +10,7 @@ aprovechando algunas de las librerías (*crates*) más robustas y populares del
   * [Fluent templates](https://github.com/XAMPPRocky/fluent-templates), que integra
     [Fluent](https://projectfluent.org/) para internacionalizar las aplicaciones.
   * Además de otros crates adicionales que puedes explorar en los archivos `Cargo.toml` de `PageTop`
-    y sus paquetes.
+    y sus extensiones.
 
 
 # ⌨️ Código
@@ -18,12 +18,12 @@ aprovechando algunas de las librerías (*crates*) más robustas y populares del
 `PageTop` incorpora código de [config-rs](https://crates.io/crates/config) (versión
 [0.11.0](https://github.com/mehcode/config-rs/tree/0.11.0)) de
 [Ryan Leckey](https://crates.io/users/mehcode), por sus ventajas para leer y asignar a tipos seguros
-las opciones de configuración, delegando la asignación a cada paquete, tema o aplicación.
+las opciones de configuración, delegando la asignación a cada extensión, tema o aplicación.
 
 
 # 🗚 FIGfonts
 
-`PageTop` usa el paquete [figlet-rs](https://crates.io/crates/figlet-rs) desarrollado por
+`PageTop` usa el *crate* [figlet-rs](https://crates.io/crates/figlet-rs) desarrollado por
 *yuanbohan* para mostrar un banner de presentación en el terminal con el nombre de la aplicación en
 caracteres [FIGlet](http://www.figlet.org). Las fuentes incluidas en `pagetop/src/app` son:
 

Cargo.toml

@@ -8,14 +8,14 @@ members = [
     # PageTop
     "pagetop",
 
-    # Packages
-    "packages/pagetop-seaorm",
-    "packages/pagetop-mdbook",
-    "packages/pagetop-hljs",
+    # Extensions
+    "extensions/pagetop-seaorm",
+    "extensions/pagetop-mdbook",
+    "extensions/pagetop-hljs",
 
     # Themes
-    #"packages/pagetop-aliner",
-    "packages/pagetop-bootsier",
+    #"extensions/pagetop-aliner",
+    "extensions/pagetop-bootsier",
 
     # Apps
     "website",
@@ -40,11 +40,11 @@ pagetop-macros = { version = "0.0", path = "helpers/pagetop-macros" }
 # PageTop
 pagetop = { version = "0.0", path = "pagetop" }
 
-# Packages
-pagetop-seaorm = { version = "0.0", path = "packages/pagetop-seaorm" }
-pagetop-mdbook = { version = "0.0", path = "packages/pagetop-mdbook" }
-pagetop-hljs = { version = "0.0", path = "packages/pagetop-hljs" }
+# Extensions
+pagetop-seaorm = { version = "0.0", path = "extensions/pagetop-seaorm" }
+pagetop-mdbook = { version = "0.0", path = "extensions/pagetop-mdbook" }
+pagetop-hljs = { version = "0.0", path = "extensions/pagetop-hljs" }
 
 # Themes
-#pagetop-aliner = { version = "0.0", path = "packages/pagetop-aliner" }
-pagetop-bootsier = { version = "0.0", path = "packages/pagetop-bootsier" }
+#pagetop-aliner = { version = "0.0", path = "extensions/pagetop-aliner" }
+pagetop-bootsier = { version = "0.0", path = "extensions/pagetop-bootsier" }

README.md

@@ -22,10 +22,10 @@ según las necesidades de cada proyecto, incluyendo:
     de ejecución.
   * **Componentes** (*components*): encapsulan HTML, CSS y JavaScript en unidades funcionales,
     configurables y reutilizables.
-  * **Paquetes** (*packages*): añaden, extienden o personalizan funcionalidades usando las APIs de
-    `PageTop` o de terceros.
-  * **Temas** (*themes*): permiten modificar la apariencia de páginas y componentes sin comprometer
-    su funcionalidad.
+  * **Extensiones** (*extensions*): añaden, extienden o personalizan funcionalidades usando las APIs
+    de `PageTop` o de terceros.
+  * **Temas** (*themes*): son extensiones que permiten modificar la apariencia de páginas y
+    componentes sin comprometer su funcionalidad.
 
 
 # ⚡️ Guía rápida
@@ -44,14 +44,14 @@ async fn main() -> std::io::Result<()> {
 Por defecto, este código sirve una página web de bienvenida accesible desde un navegador en la
 dirección `http://localhost:8088`, siguiendo la configuración predeterminada.
 
-Para personalizar el servicio, puedes crear un paquete de `PageTop` de la siguiente manera:
+Para personalizar el servicio, puedes crear una extensión de `PageTop` de la siguiente manera:
 
 ```rust#ignore
 use pagetop::prelude::*;
 
 struct HelloWorld;
 
-impl PackageTrait for HelloWorld {
+impl ExtensionTrait for HelloWorld {
     fn configure_service(&self, scfg: &mut service::web::ServiceConfig) {
         scfg.route("/", service::web::get().to(hello_world));
     }
@@ -69,7 +69,7 @@ async fn main() -> std::io::Result<()> {
 }
 ```
 
-Este programa implementa un paquete llamado `HelloWorld` que sirve una página web en la ruta raíz
+Este programa implementa una extensión llamada `HelloWorld` que sirve una página web en la ruta raíz
 (`/`) mostrando el texto "Hello world!" dentro de un elemento HTML `<h1>`.
 
 
@@ -90,23 +90,23 @@ El código se organiza en un *workspace* con los siguientes subproyectos:
   * **[pagetop-macros](https://github.com/manuelcillero/pagetop/tree/latest/helpers/pagetop-macros)**,
     proporciona una colección de macros que mejoran la experiencia de desarrollo con `PageTop`.
 
-## Paquetes
+## Extensiones
 
-  * **[pagetop-seaorm](https://github.com/manuelcillero/pagetop/tree/latest/packages/pagetop-seaorm)**,
+  * **[pagetop-seaorm](https://github.com/manuelcillero/pagetop/tree/latest/extensions/pagetop-seaorm)**,
     integra [SeaORM](https://www.sea-ql.org/SeaORM) para trabajar con bases de datos en aplicaciones
     `PageTop`.
 
-  * **[pagetop-mdbook](https://github.com/manuelcillero/pagetop/tree/latest/packages/pagetop-mdbook)**,
+  * **[pagetop-mdbook](https://github.com/manuelcillero/pagetop/tree/latest/extensions/pagetop-mdbook)**,
     incluye contenido generado por [mdBook](https://rust-lang.github.io/mdBook/) en aplicaciones
     desarrolladas con `PageTop`.
 
-  * **[pagetop-hljs](https://github.com/manuelcillero/pagetop/tree/latest/packages/pagetop-hljs)**,
+  * **[pagetop-hljs](https://github.com/manuelcillero/pagetop/tree/latest/extensions/pagetop-hljs)**,
     utiliza [HighlightJS](https://highlightjs.org) para mostrar fragmentos de código con resaltado
     de sintaxis con `PageTop`.
 
 ## Temas
 
-  * **[pagetop-bootsier](https://github.com/manuelcillero/pagetop/tree/latest/packages/pagetop-bootsier)**,
+  * **[pagetop-bootsier](https://github.com/manuelcillero/pagetop/tree/latest/extensions/pagetop-bootsier)**,
     tema para `PageTop` que usa [Bootstrap](https://getbootstrap.com) para dar vida a tus diseños
     web.
 

drust/src/main.rs

@@ -20,10 +20,10 @@ use pagetop::prelude::*;
 
 struct Drust;
 
-impl PackageTrait for Drust {
-    fn dependencies(&self) -> Vec<PackageRef> {
+impl ExtensionTrait for Drust {
+    fn dependencies(&self) -> Vec<ExtensionRef> {
         vec![
-            // Paquetes.
+            // Extensiones.
             //&pagetop_admin::Admin,
             //&pagetop_user::User,
             //&pagetop_node::Node,

extensions/pagetop-bootsier/src/bs.rs

@@ -2,6 +2,10 @@ use pagetop::prelude::*;
 
 use std::fmt;
 
+// Utilities.
+mod utility;
+pub use utility::*;
+
 // Container.
 pub mod container;
 pub use container::{Container, ContainerType};
@@ -16,6 +20,10 @@ pub use offcanvas::{
     Offcanvas, OffcanvasBackdrop, OffcanvasBodyScroll, OffcanvasPlacement, OffcanvasVisibility,
 };
 
+// Image.
+mod image;
+pub use image::{Image, ImageSize};
+
 // Navbar.
 pub mod navbar;
 pub use navbar::{Navbar, NavbarContent, NavbarToggler};

extensions/pagetop-bootsier/src/bs/image.rs

@@ -0,0 +1,157 @@
+use pagetop::prelude::*;
+
+use crate::bs::Border;
+
+use std::fmt;
+
+#[derive(AutoDefault)]
+pub enum ImageType {
+    #[default]
+    Fluid,
+    Thumbnail,
+}
+
+#[rustfmt::skip]
+impl fmt::Display for ImageType {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            ImageType::Fluid     => write!(f, "img-fluid"),
+            ImageType::Thumbnail => write!(f, "img-thumbnail"),
+        }
+    }
+}
+
+#[derive(AutoDefault)]
+pub enum ImageSize {
+    #[default]
+    Auto,
+    Size(u16, u16),
+    Width(u16),
+    Height(u16),
+    Both(u16),
+}
+
+#[rustfmt::skip]
+#[derive(AutoDefault)]
+pub struct Image {
+    id        : OptionId,
+    classes   : OptionClasses,
+    image_type: ImageType,
+    source    : OptionString,
+    size      : ImageSize,
+    border    : Border,
+}
+
+impl ComponentTrait for Image {
+    fn new() -> Self {
+        Image::default()
+    }
+
+    fn id(&self) -> Option<String> {
+        self.id.get()
+    }
+
+    fn setup_before_prepare(&mut self, _cx: &mut Context) {
+        self.alter_classes(
+            ClassesOp::Prepend,
+            [self.image_type().to_string()].join(" "),
+        );
+    }
+
+    fn prepare_component(&self, _cx: &mut Context) -> PrepareMarkup {
+        let (width, height) = match self.size() {
+            ImageSize::Auto => (None, None),
+            ImageSize::Size(width, height) => (Some(width), Some(height)),
+            ImageSize::Width(width) => (Some(width), None),
+            ImageSize::Height(height) => (None, Some(height)),
+            ImageSize::Both(value) => (Some(value), Some(value)),
+        };
+        PrepareMarkup::With(html! {
+            img
+                src=[self.source().get()]
+                id=[self.id()]
+                class=[self.classes().get()]
+                width=[width]
+                height=[height] {}
+        })
+    }
+}
+
+impl Image {
+    pub fn with(source: &str) -> Self {
+        Image::default().with_source(source)
+    }
+
+    pub fn thumbnail(source: &str) -> Self {
+        Image::default()
+            .with_source(source)
+            .with_image_type(ImageType::Thumbnail)
+    }
+    /*
+        pub fn pagetop() -> Self {
+            Image::default()
+                .with_source("/base/pagetop-logo.svg")
+                .with_classes(ClassesOp::Add, IMG_FIXED)
+                .with_size(ImageSize::Size(64, 64))
+        }
+    */
+    // Image BUILDER.
+
+    #[fn_builder]
+    pub fn with_id(mut self, id: impl Into<String>) -> Self {
+        self.id.alter_value(id);
+        self
+    }
+
+    #[fn_builder]
+    pub fn with_classes(mut self, op: ClassesOp, classes: impl Into<String>) -> Self {
+        self.classes.alter_value(op, classes);
+        self
+    }
+
+    #[fn_builder]
+    pub fn with_image_type(mut self, image_type: ImageType) -> Self {
+        self.image_type = image_type;
+        self
+    }
+
+    #[fn_builder]
+    pub fn with_source(mut self, source: &str) -> Self {
+        self.source.alter_value(source);
+        self
+    }
+
+    #[fn_builder]
+    pub fn with_size(mut self, size: ImageSize) -> Self {
+        self.size = size;
+        self
+    }
+
+    #[fn_builder]
+    pub fn with_border(mut self, border: Border) -> Self {
+        self.border = border;
+        self
+    }
+
+    // Image GETTERS.
+
+    pub fn classes(&self) -> &OptionClasses {
+        &self.classes
+    }
+
+    pub fn image_type(&self) -> &ImageType {
+        &self.image_type
+    }
+
+    pub fn source(&self) -> &OptionString {
+        &self.source
+    }
+
+    pub fn size(&self) -> &ImageSize {
+        &self.size
+    }
+
+    pub fn border(&self) -> &Border {
+        &self.border
+    }
+}

extensions/pagetop-bootsier/src/bs/navbar.rs

@@ -1,6 +1,9 @@
 mod component;
 pub use component::{Navbar, NavbarContent, NavbarToggler};
 
+//mod brand;
+//pub use brand::Brand;
+
 mod nav;
 pub use nav::Nav;
 

extensions/pagetop-bootsier/src/bs/navbar/brand.rs

@@ -0,0 +1,102 @@
+use pagetop::prelude::*;
+
+#[rustfmt::skip]
+#[derive(AutoDefault)]
+pub struct Brand {
+    id       : OptionId,
+    #[default(_code = "global::SETTINGS.app.name.to_owned()")]
+    app_name : String,
+    slogan   : OptionTranslated,
+    logo     : OptionComponent<Image>,
+    #[default(_code = "|_| \"/\"")]
+    home     : FnContextualPath,
+}
+
+impl ComponentTrait for Brand {
+    fn new() -> Self {
+        Brand::default()
+    }
+
+    fn id(&self) -> Option<String> {
+        self.id.get()
+    }
+
+    fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
+        let logo = self.logo().render(cx);
+        let home = self.home()(cx);
+        let title = &L10n::l("site_home").using(cx.langid());
+        PrepareMarkup::With(html! {
+            div id=[self.id()] class="branding__container" {
+                div class="branding__content" {
+                    @if !logo.is_empty() {
+                        a class="branding__logo" href=(home) title=[title] rel="home" {
+                            (logo)
+                        }
+                    }
+                    div class="branding__text" {
+                        a class="branding__name" href=(home) title=[title] rel="home" {
+                            (self.app_name())
+                        }
+                        @if let Some(slogan) = self.slogan().using(cx.langid()) {
+                            div class="branding__slogan" {
+                                (slogan)
+                            }
+                        }
+                    }
+                }
+            }
+        })
+    }
+}
+
+impl Brand {
+    // Brand BUILDER.
+
+    #[fn_builder]
+    pub fn with_id(mut self, id: impl Into<String>) -> Self {
+        self.id.alter_value(id);
+        self
+    }
+
+    #[fn_builder]
+    pub fn with_app_name(mut self, app_name: impl Into<String>) -> Self {
+        self.app_name = app_name.into();
+        self
+    }
+
+    #[fn_builder]
+    pub fn with_slogan(mut self, slogan: L10n) -> Self {
+        self.slogan.alter_value(slogan);
+        self
+    }
+
+    #[fn_builder]
+    pub fn with_logo(mut self, logo: Option<Image>) -> Self {
+        self.logo.alter_value(logo);
+        self
+    }
+
+    #[fn_builder]
+    pub fn with_home(mut self, home: FnContextualPath) -> Self {
+        self.home = home;
+        self
+    }
+
+    // Brand GETTERS.
+
+    pub fn app_name(&self) -> &String {
+        &self.app_name
+    }
+
+    pub fn slogan(&self) -> &OptionTranslated {
+        &self.slogan
+    }
+
+    pub fn logo(&self) -> &OptionComponent<Image> {
+        &self.logo
+    }
+
+    pub fn home(&self) -> &FnContextualPath {
+        &self.home
+    }
+}

extensions/pagetop-bootsier/src/bs/utility.rs

@@ -0,0 +1,10 @@
+mod color;
+pub use color::Color;
+pub use color::{BgColor, BorderColor, TextColor};
+
+mod opacity;
+pub use opacity::Opacity;
+pub use opacity::{BgOpacity, BorderOpacity, TextOpacity};
+
+mod border;
+pub use border::{Border, BorderSize};

extensions/pagetop-bootsier/src/bs/utility/border.rs

@@ -0,0 +1,102 @@
+use pagetop::{prelude::*, strict_string};
+
+use crate::bs::{BorderColor, BorderOpacity};
+
+use std::fmt;
+
+#[derive(AutoDefault)]
+pub enum BorderSize {
+    #[default]
+    Default,
+    Zero,
+    Width1,
+    Width2,
+    Width3,
+    Width4,
+    Width5,
+}
+
+#[rustfmt::skip]
+impl fmt::Display for BorderSize {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            BorderSize::Default => write!(f, ""),
+            BorderSize::Zero    => write!(f, "0"),
+            BorderSize::Width1  => write!(f, "1"),
+            BorderSize::Width2  => write!(f, "2"),
+            BorderSize::Width3  => write!(f, "3"),
+            BorderSize::Width4  => write!(f, "4"),
+            BorderSize::Width5  => write!(f, "5"),
+        }
+    }
+}
+
+#[rustfmt::skip]
+#[derive(AutoDefault)]
+pub struct Border {
+    color  : BorderColor,
+    opacity: BorderOpacity,
+    size   : BorderSize,
+    top    : BorderSize,
+    end    : BorderSize,
+    bottom : BorderSize,
+    start  : BorderSize,
+}
+
+impl Border {
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    pub fn with(size: BorderSize) -> Self {
+        Self::default().with_size(size)
+    }
+
+    // Border BUILDER.
+
+    pub fn with_color(mut self, color: BorderColor) -> Self {
+        self.color = color;
+        self
+    }
+
+    pub fn with_opacity(mut self, opacity: BorderOpacity) -> Self {
+        self.opacity = opacity;
+        self
+    }
+
+    pub fn with_size(mut self, size: BorderSize) -> Self {
+        self.size = size;
+        self
+    }
+
+    pub fn with_top(mut self, size: BorderSize) -> Self {
+        self.top = size;
+        self
+    }
+
+    pub fn with_end(mut self, size: BorderSize) -> Self {
+        self.end = size;
+        self
+    }
+
+    pub fn with_bottom(mut self, size: BorderSize) -> Self {
+        self.bottom = size;
+        self
+    }
+
+    pub fn with_start(mut self, size: BorderSize) -> Self {
+        self.start = size;
+        self
+    }
+}
+
+#[rustfmt::skip]
+impl fmt::Display for Border {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        write!(f, "{}", strict_string!([
+            "border",
+            &self.color.to_string(),
+            &self.opacity.to_string(),
+        ]; " ").unwrap_or_default())
+    }
+}

extensions/pagetop-bootsier/src/bs/utility/color.rs

@@ -0,0 +1,119 @@
+use pagetop::prelude::*;
+
+use std::fmt;
+
+#[derive(AutoDefault)]
+pub enum Color {
+    #[default]
+    Primary,
+    Secondary,
+    Success,
+    Info,
+    Warning,
+    Danger,
+    Light,
+    Dark,
+}
+
+#[rustfmt::skip]
+impl fmt::Display for Color {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            Color::Primary   => write!(f, "primary"),
+            Color::Secondary => write!(f, "secondary"),
+            Color::Success   => write!(f, "success"),
+            Color::Info      => write!(f, "info"),
+            Color::Warning   => write!(f, "warning"),
+            Color::Danger    => write!(f, "danger"),
+            Color::Light     => write!(f, "light"),
+            Color::Dark      => write!(f, "dark"),
+        }
+    }
+}
+
+#[derive(AutoDefault)]
+pub enum BgColor {
+    #[default]
+    Default,
+    Body,
+    BodySecondary,
+    BodyTertiary,
+    Theme(Color),
+    Subtle(Color),
+    Black,
+    White,
+    Transparent,
+}
+
+#[rustfmt::skip]
+impl fmt::Display for BgColor {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            BgColor::Default       => write!(f, ""),
+            BgColor::Body          => write!(f, "bg-body"),
+            BgColor::BodySecondary => write!(f, "bg-body-secondary"),
+            BgColor::BodyTertiary  => write!(f, "bg-body-tertiary"),
+            BgColor::Theme(c)      => write!(f, "bg-{}", c),
+            BgColor::Subtle(c)     => write!(f, "bg-{}-subtle", c),
+            BgColor::Black         => write!(f, "bg-black"),
+            BgColor::White         => write!(f, "bg-white"),
+            BgColor::Transparent   => write!(f, "bg-transparent"),
+        }
+    }
+}
+
+#[derive(AutoDefault)]
+pub enum BorderColor {
+    #[default]
+    Default,
+    Theme(Color),
+    Subtle(Color),
+    Black,
+    White,
+}
+
+#[rustfmt::skip]
+impl fmt::Display for BorderColor {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            BorderColor::Default   => write!(f, ""),
+            BorderColor::Theme(c)  => write!(f, "border-{}", c),
+            BorderColor::Subtle(c) => write!(f, "border-{}-subtle", c),
+            BorderColor::Black     => write!(f, "border-black"),
+            BorderColor::White     => write!(f, "border-white"),
+        }
+    }
+}
+
+#[derive(AutoDefault)]
+pub enum TextColor {
+    #[default]
+    Default,
+    Body,
+    BodyEmphasis,
+    BodySecondary,
+    BodyTertiary,
+    Theme(Color),
+    Emphasis(Color),
+    Background(Color),
+    Black,
+    White,
+}
+
+#[rustfmt::skip]
+impl fmt::Display for TextColor {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            TextColor::Default       => write!(f, ""),
+            TextColor::Body          => write!(f, "text-body"),
+            TextColor::BodyEmphasis  => write!(f, "text-body-emphasis"),
+            TextColor::BodySecondary => write!(f, "text-body-secondary"),
+            TextColor::BodyTertiary  => write!(f, "text-body-tertiary"),
+            TextColor::Theme(c)      => write!(f, "text-{}", c),
+            TextColor::Emphasis(c)   => write!(f, "text-{}-emphasis", c),
+            TextColor::Background(c) => write!(f, "text-bg-{}", c),
+            TextColor::Black         => write!(f, "text-black"),
+            TextColor::White         => write!(f, "text-white"),
+        }
+    }
+}

extensions/pagetop-bootsier/src/bs/utility/opacity.rs

@@ -0,0 +1,78 @@
+use pagetop::prelude::*;
+
+use std::fmt;
+
+#[rustfmt::skip]
+#[derive(AutoDefault)]
+pub enum Opacity {
+    #[default]
+    Opaque,            // 100%
+    SemiOpaque,        // 75%
+    Half,              // 50%
+    SemiTransparent,   // 25%
+    AlmostTransparent, // 10%
+}
+
+#[rustfmt::skip]
+impl fmt::Display for Opacity {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            Opacity::Opaque            => write!(f, "opacity-100"),
+            Opacity::SemiOpaque        => write!(f, "opacity-75"),
+            Opacity::Half              => write!(f, "opacity-50"),
+            Opacity::SemiTransparent   => write!(f, "opacity-25"),
+            Opacity::AlmostTransparent => write!(f, "opacity-10"),
+        }
+    }
+}
+
+#[derive(AutoDefault)]
+pub enum BgOpacity {
+    #[default]
+    Default,
+    Theme(Opacity),
+}
+
+#[rustfmt::skip]
+impl fmt::Display for BgOpacity {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            BgOpacity::Default  => write!(f, ""),
+            BgOpacity::Theme(o) => write!(f, "bg-{}", o),
+        }
+    }
+}
+
+#[derive(AutoDefault)]
+pub enum BorderOpacity {
+    #[default]
+    Default,
+    Theme(Opacity),
+}
+
+#[rustfmt::skip]
+impl fmt::Display for BorderOpacity {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            BorderOpacity::Default  => write!(f, ""),
+            BorderOpacity::Theme(o) => write!(f, "border-{}", o),
+        }
+    }
+}
+
+#[derive(AutoDefault)]
+pub enum TextOpacity {
+    #[default]
+    Default,
+    Theme(Opacity),
+}
+
+#[rustfmt::skip]
+impl fmt::Display for TextOpacity {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            TextOpacity::Default  => write!(f, ""),
+            TextOpacity::Theme(o) => write!(f, "text-{}", o),
+        }
+    }
+}

extensions/pagetop-bootsier/src/bs/utility/rounded.rs

@@ -0,0 +1,116 @@
+use pagetop::prelude::*;
+
+use crate::bs::{Color, Opacity};
+
+#[derive(AutoDefault)]
+pub enum BorderSize {
+    #[default]
+    None,
+    Width1,
+    Width2,
+    Width3,
+    Width4,
+    Width5,
+    Free(unit::Value),
+}
+
+#[derive(AutoDefault)]
+pub enum BorderRadius {
+    #[default]
+    None,
+    Rounded1,
+    Rounded2,
+    Rounded3,
+    Rounded4,
+    Rounded5,
+    Circle,
+    Pill,
+    Free(f32),
+}
+
+#[rustfmt::skip]
+#[derive(AutoDefault)]
+pub struct BorderProperty {
+    color  : Color,
+    opacity: Opacity,
+    size   : BorderSize,
+    radius : BorderRadius,
+}
+
+impl BorderProperty {
+    pub fn new() -> Self {
+        BorderProperty::default()
+    }
+
+    pub fn with_color(mut self, color: Color) -> Self {
+        self.color = color;
+        self
+    }
+
+    pub fn with_opacity(mut self, opacity: Opacity) -> Self {
+        self.opacity = opacity;
+        self
+    }
+
+    pub fn with_size(mut self, size: BorderSize) -> Self {
+        self.size = size;
+        self
+    }
+
+    pub fn with_radius(mut self, radius: BorderRadius) -> Self {
+        self.radius = radius;
+        self
+    }
+}
+
+#[rustfmt::skip]
+#[derive(AutoDefault)]
+pub struct Border {
+    all   : Option<BorderProperty>,
+    top   : Option<BorderProperty>,
+    end   : Option<BorderProperty>,
+    bottom: Option<BorderProperty>,
+    start : Option<BorderProperty>,
+}
+
+impl Border {
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    // Border BUILDER.
+
+    pub fn with_all(mut self, border: BorderProperty) -> Self {
+        self.all = Some(border);
+        self
+    }
+
+    pub fn with_top(mut self, border: BorderProperty) -> Self {
+        self.top = Some(border);
+        self
+    }
+
+    pub fn with_end(mut self, border: BorderProperty) -> Self {
+        self.end = Some(border);
+        self
+    }
+
+    pub fn with_bottom(mut self, border: BorderProperty) -> Self {
+        self.bottom = Some(border);
+        self
+    }
+
+    pub fn with_start(mut self, border: BorderProperty) -> Self {
+        self.start = Some(border);
+        self
+    }
+
+    pub fn with_none(mut self) -> Self {
+        self.all = None;
+        self.top = None;
+        self.end = None;
+        self.bottom = None;
+        self.start = None;
+        self
+    }
+}

extensions/pagetop-bootsier/src/lib.rs

@@ -17,7 +17,7 @@ pub mod bs;
 
 pub struct Bootsier;
 
-impl PackageTrait for Bootsier {
+impl ExtensionTrait for Bootsier {
     fn theme(&self) -> Option<ThemeRef> {
         Some(&Bootsier)
     }