Added a button component and gif

Author: eadwinCode

README.md

@@ -4,8 +4,8 @@
 from py_html.contrib.bootstrap._types import BVariants
 from py_html.contrib.bootstrap.icon import BIcon
 from py_html.contrib.bootstrap.util import apply_classes
-from py_html.el import Element, Fragment
-from py_html.el.base import BuildContext, Component, NodeContext
+from py_html.el import Fragment
+from py_html.el.base import NodeContext
 from py_html.styles import StyleCSS
 
 avatar_style = el.Style(
@@ -30,7 +30,7 @@
 )
 
 
-class BAvatar(el.BaseElement, Component):
+class BAvatar(el.BaseElement):
     class_name = "b-avatar"
 
     def __init__(
@@ -46,7 +46,6 @@ def __init__(
         rounded: t.Literal["circle", "square"] = "circle",
         icon: t.Optional[str] = None,
         text: t.Optional[str] = None,
-        content: t.Optional[t.Any] = None,
         **attrs,
     ):
         self.tag = tag
@@ -58,17 +57,13 @@ def __init__(
         self.badge_variant = badge_variant
         self.rounded = rounded
         self.size = size
-        self.slot = content
 
         if not self.icon and not self.text:
             self.icon = "people-fill"
 
         super().__init__(**attrs)
 
-    def exports(self, ctx: BuildContext) -> None:
-        ctx.add_root_style(avatar_style)
-
-    def resolve_content(self) -> t.Union[Fragment, Element]:
+    def render_content(self, content: t.Any, ctx: NodeContext) -> str:
         self.class_name = (
             self.class_name
             + " "
@@ -78,7 +73,7 @@ def resolve_content(self) -> t.Union[Fragment, Element]:
         if self.size:
             self.style.update_style(width=self.size, height=self.size)
 
-        return el.Fragment(
+        element = el.Fragment(
             BAvatarText(
                 content=self.text,
                 style=StyleCSS(font_size=f"calc({self.size} * 0.4)")
@@ -106,8 +101,9 @@ def resolve_content(self) -> t.Union[Fragment, Element]:
             )
             if self.badge
             else el.Comment(),
-            self.slot,
+            content,
         )
+        return ctx.render_content(element)
 
 
 class BAvatarText(el.Span):
@@ -203,7 +199,7 @@ def get_parent_style(self) -> StyleCSS:
         return StyleCSS()
 
     def render_content(self, content: Fragment, ctx: NodeContext) -> str:
-        for node in content:
+        for node in content or []:
             if isinstance(node.element, BAvatar):
                 if self.size:
                     node.element.size = self.size
@@ -219,7 +215,7 @@ def render_content(self, content: Fragment, ctx: NodeContext) -> str:
                 if self.variant:
                     node.element.variant = self.variant
 
-        return ctx.get_content(content)
+        return ctx.render_content(content)
 
     def render_attributes(self, ctx: NodeContext) -> str:
         self.style = StyleCSS(**(self.style or {}), **self.get_parent_style())

bootstrap_exercise.py

@@ -3,6 +3,7 @@
 import py_html.el as el
 from py_html.contrib.bootstrap._types import BVariants
 from py_html.contrib.bootstrap.util import apply_classes
+from py_html.el.base import NodeContext
 
 
 class BBadge(el.BaseHTML):
@@ -13,11 +14,15 @@ def __init__(
         tag: str = "span",
         variant: t.Optional[BVariants] = "secondary",
         pill: bool = False,
-        class_name: t.Optional[str] = "",
         **attrs,
     ):
         self.tag = tag
         self.variant = variant
+        self.pill = pill
 
-        class_name = class_name or "" + apply_classes(bg=variant, badge_pill=pill)
-        super().__init__(class_name=class_name, **attrs)
+        super().__init__(**attrs)
+
+    def render_attributes(self, ctx: NodeContext) -> str:
+        self.class_name += "" + apply_classes(bg=self.variant, badge_pill=self.pill)
+
+        return super().render_attributes(ctx)

docs/images/pyhtml_example.gif

@@ -0,0 +1,71 @@
+import typing as t
+
+import py_html.el as el
+from py_html.contrib.bootstrap.util import apply_classes
+from py_html.el.base import NodeContext
+
+aTarget = t.Literal[
+    "_blank",
+    "_self",
+    "_parent",
+    "_top",
+]
+
+
+class BreadcrumbItem(t.TypedDict, total=False):
+    text: str
+    href: t.Optional[str]
+    active: bool
+    target: aTarget
+
+
+class BBreadcrumb(el.Ol):
+    class_name = "breadcrumb"
+
+    def __init__(self, *items: BreadcrumbItem, **attrs) -> None:
+        super().__init__(**attrs)
+        self.items = items
+        if self.items and self.content:
+            raise Exception("Invalid Configuration. Use 'Items' or 'Content'")
+
+    def render_content(self, content: t.Any, ctx: NodeContext) -> t.Any:
+        if self.items:
+            return ctx.render_content(self._get_breadcrumb_item_elements())
+        return ctx.render_content(content)
+
+    def _get_breadcrumb_item_elements(self) -> el.Fragment:
+        return el.Fragment(
+            *(
+                BBreadcrumbItem(
+                    href=item.get("href", "#"),
+                    active=item.get("active", False),
+                    target=item.get("target", "_self"),
+                    content=item["text"],
+                )
+                for item in self.items
+            )
+        )
+
+
+class BBreadcrumbItem(el.Li):
+    class_name = "breadcrumb-item"
+
+    def __init__(
+        self, target: aTarget = "_self", active: bool = False, href: str = "#", **attrs
+    ) -> None:
+        attrs.setdefault("aria_current", "location")
+        super().__init__(**attrs)
+
+        self.href = href
+        self.target = target
+        self.active = active
+
+        self.class_name += apply_classes(active=active)
+
+    def render_content(self, content: t.Any, ctx: NodeContext) -> t.Any:
+        if self.active:
+            return ctx.render_content(el.Span(content=content))
+
+        return ctx.render_content(
+            el.A(href=self.href, content=content, target=self.target)
+        )

py_html/contrib/bootstrap/avatar.py

@@ -0,0 +1,115 @@
+import typing as t
+
+import py_html.el as el
+from py_html.contrib.bootstrap.util import apply_classes
+from py_html.el.base import NodeContext
+
+button_variant = t.Literal[
+    "link",
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "info",
+    "light",
+    "dark",
+    "outline-primary",
+    "outline-secondary",
+    "outline-success",
+    "outline-danger",
+    "outline-warning",
+    "outline-info",
+    "outline-light",
+    "outline-dark",
+]
+
+
+class BButton(el.BaseHTML):
+    class_name = "btn"
+
+    def __init__(
+        self,
+        tag: str = "button",
+        disabled: bool = False,
+        pill: bool = False,
+        squared: bool = False,
+        pressed: bool = False,
+        size: t.Literal["sm", "md", "lg"] = "sm",
+        type: t.Literal["button", "submit", "reset"] = "button",
+        variant: button_variant = "primary",
+        href: t.Optional[str] = None,
+        **attrs,
+    ) -> None:
+        self.tag = tag
+        self.href = href
+        self.pill = pill
+        self.squared = squared
+        self.size = size
+        self.variant = variant
+        self.type = type
+        self.disabled = disabled
+        self.pressed = pressed
+
+        super().__init__(**attrs)
+
+    def render_attributes(self, ctx: NodeContext) -> str:
+        self.class_name += apply_classes(
+            pill=self.pill,
+            rounded="0" if self.squared else None,
+            btn=self.variant,
+            disabled=self.disabled,
+            active=self.pressed,
+        )
+        self.class_name += apply_classes(
+            btn=self.size,
+        )
+        if self.pressed:
+            self.attrs.setdefault("aria_pressed", self.pressed)
+
+        self.attrs.update(disabled=self.disabled, type=self.type)
+        return super().render_attributes(ctx)
+
+
+class BButtonGroup(el.BaseHTML):
+    class_name = "btn-group"
+
+    def __init__(
+        self,
+        tag: str = "div",
+        squared: bool = False,
+        size: t.Literal["sm", "md", "lg"] = "sm",
+        vertical: bool = False,
+        **attrs,
+    ) -> None:
+        attrs.setdefault("role", "group")
+
+        self.tag = tag
+        self.vertical = vertical
+        self.size = size
+        self.squared = squared
+
+        super().__init__(**attrs)
+
+        if self.vertical:
+            self.class_name.replace(self.__class__.class_name, "btn-group-vertical")
+
+    def render_content(self, content: t.Any, ctx: NodeContext) -> t.Any:
+        for node in content or []:
+            if isinstance(node.element, BButton):
+                if self.size:
+                    node.element.size = self.size
+
+                if self.squared:
+                    node.element.squared = self.squared
+
+        return ctx.render_content(content)
+
+
+class BButtonToolbar(el.BaseHTML):
+    class_name = "btn-toolbar"
+    role = "toolbar"
+
+    def __init__(self, tag: str = "div", **attrs) -> None:
+        self.tag = tag
+        super().__init__(**attrs)