some minor tweaks

examples/01_hello_world/main.py

@@ -5,17 +5,25 @@ from pyscript_bootstrap_templates import HTML as HTML
 
 app = bootstrap_templates.PyScriptBootstrapDashboard(
     parent_element="pyscript_app", brand_name="hello_world")
-div = bHTML.BootstrapContainer("This is a sidebar", parent=app.sidebar)
+
+
+div = bHTML.Div("This is a sidebar", parent=app.sidebar)
 div.font_size = 4
 
 btn = bHTML.ButtonPrimary("Click me", parent=app.sidebar)
 btn.w = 100
 
+toast_container = bHTML.ToastContainer(parent=app.main_area)
+toast_container.position_bottom = 0
+toast_container.position_end = 0
+
+
+
 def onclick(_):
     alert = bHTML.AlertSuccess("You clicked me!", parent=app.main_area)
-    toast = bHTML.Toast("You clicked me!", parent=app.main_area)
-    toast.position_bottom = 0
-    toast.position_end = 0
+    alert.w = 25
+    toast = bHTML.Toast("You clicked me!", parent=toast_container)
+    toast.animation = True
     toast.show()
 
 btn.onclick = onclick

examples/02_image_filter/main.py

@@ -21,13 +21,20 @@ def sobel_image(img):
 app = bootstrap_templates.PyScriptBootstrapDashboard(parent_element="pyscript_app", brand_name="Image Filter Example")
 
 image_input = bInputs.InputFile(label_text="choose image file", parent=app.sidebar)
-image_input.set_attribute("accept", "image/*")
+
+# FIXME: add filter option to InputFile class!
+image_input._input.set_attribute("accept", "image/*")
+
+toast_container = bHTML.ToastContainer(parent=app.main_area)
+toast_container.position_bottom = 0
+toast_container.position_end = 0
+
 
 def on_image_change(f, *args):
-    print("image changed")
-    print(f)
+
     f.seek(0)
     img = Image.open(f)
+
     img = sobel_image(np.array(img))
 
     output = bHTML.Image.from_numpy_array(img, parent=app.main_area)
@@ -35,4 +42,7 @@ def on_image_change(f, *args):
     output.rounded_size = 10
     output.shadow = bHTML.Shadow.LARGE
 
+    bHTML.Toast("Processing Done", title="info", parent=toast_container).show()
+
+
 image_input.onchange = on_image_change

pyscript_bootstrap_templates/bootstrap_HTML.py

@@ -6,7 +6,8 @@ from . import HTML
 from .bootstrap_HTML_container import *
 from js import bootstrap  # type: ignore
 
-
+class Div(BootstrapContainer):
+    pass
 class Button(HTML.Button, BootstrapContainer):
     _default_class_name = "btn"
 
@@ -1350,7 +1351,7 @@ class Toast(BootstrapContainer):
         self.set_attribute("role", "alert")
         self.set_attribute("aria-live", "assertlive")
         self.set_attribute("aria-atomic", True)
-        self.set_attribute("style", "position: absolute")
+        self.p = 2
 
         ToastHeader(title, parent=self)
         ToastBody(inner_html, parent=self)
@@ -1362,6 +1363,50 @@ class Toast(BootstrapContainer):
     
     def hide(self):
         self._js_toast.hide()
+    
+    def dispose(self):
+        self._js_toast.dispose()
+    
+    @property
+    def animation(self) -> bool:
+        return self.get_attribute("data-bs-animation", is_boolean_attribute=True)
+    
+    @animation.setter
+    def animation(self, value:bool):
+        self.set_attribute("data-bs-animation", attribute_value=value ,is_boolean_attribute=True)
+    
+    @property
+    def autohide(self) -> bool:
+        return self.get_attribute("data-bs-autohide", is_boolean_attribute=True)
+    
+    @autohide.setter
+    def autohide(self, value:bool):
+        self.set_attribute("data-bs-autohide", attribute_value=value ,is_boolean_attribute=True)
+    
+    @property
+    def delay(self) -> bool:
+        return self.get_attribute("data-bs-delay", is_boolean_attribute=True)
+    
+    @delay.setter
+    def delay(self, value:bool):
+        self.set_attribute("data-bs-delay", attribute_value=value ,is_boolean_attribute=True)
+
+class ToastContainer(BootstrapContainer):
+    _default_class_name: str = "toast-container"
+
+    def __init__(self, inner_html: str = None,
+                       id: str = None,
+                       class_name: str = None,
+                       parent: "Element" = None) -> None:
+
+        super().__init__(inner_html=inner_html, id=id, class_name=class_name, parent=parent)
+
+        self.position = Position.ABSOLUTE
+        self.p = 3
+    
+    def show_toast(self, toast: Toast):
+        self.append_child(toast)
+        toast.show()
 
 class OffcanvasTitle(HTML.H5, BootstrapContainer):