make toasts disappear after dur seconds.

docs/api_reference/api_reference.py

@@ -413,10 +413,10 @@ def ex_alerts3():
         cls=AlertT.error)
 
 def ex_toasts1():
-    return Toast("First Example Toast", cls=(ToastHT.start, ToastVT.bottom))
+    return Toast("First Example Toast", cls=(ToastHT.start, ToastVT.bottom), dur=300)
 
 def ex_toasts2():
-    return Toast("Second Example Toast", alert_cls=AlertT.info)
+    return Toast("Second Example Toast", alert_cls=AlertT.info, dur=300)
 
 docs_notifications = create_doc_section(
     H1("Alerts & Toasts API Reference"),
@@ -434,6 +434,7 @@ def ex_toasts2():
     fn2code_string(ex_toasts1), 
     P("To define toast colors, set the class of the alert wrapped by the toast:"),
     fn2code_string(ex_toasts2),
+    P("Toasts will disappear automatically after 5 seconds. To change the duration of the toast set the `dur` param like this `Toast('Content', dur=10)`."),
     Toast, ToastHT, ToastVT,
     title="Alerts & Toasts")
 

monsterui/daisy.py

@@ -109,8 +109,11 @@ def _generate_next_value_(name, start, count, last_values): return f'toast-{name
 def Toast(*c, # Content for toast (often test)
           cls='', # Classes for toast (often `ToastHT` and `ToastVT` options)
           alert_cls='', # classes for altert (often `AlertT` options)
+          dur=5.0, # no. of seconds before the toast disappears
           **kwargs # Additional args for outer container (`Div` tag)
          )->FT: # Div(Alert(...), cls='toast')
     "Toasts are stacked announcements, positioned on the corner of page."
     a = Alert(*c, cls=alert_cls)
-    return Div(a, cls=('toast', stringify(cls)), **kwargs)
+    _id = fh.unqid()
+    js = '''(() => setTimeout(() => document.querySelector('[data-mui="%s"]').remove(),%s))()'''%(_id,dur*1000)
+    return Div(a, NotStr(f"<script>{js}</script>"), data_mui=_id, cls=('toast', stringify(cls)), **kwargs)

nbs/03_daisy.ipynb

@@ -351,11 +351,22 @@
     "def Toast(*c, # Content for toast (often test)\n",
     "          cls='', # Classes for toast (often `ToastHT` and `ToastVT` options)\n",
     "          alert_cls='', # classes for altert (often `AlertT` options)\n",
+    "          dur=5.0, # no. of seconds before the toast disappears\n",
     "          **kwargs # Additional args for outer container (`Div` tag)\n",
     "         )->FT: # Div(Alert(...), cls='toast')\n",
     "    \"Toasts are stacked announcements, positioned on the corner of page.\"\n",
     "    a = Alert(*c, cls=alert_cls)\n",
-    "    return Div(a, cls=('toast', stringify(cls)), **kwargs)"
+    "    _id = fh.unqid()\n",
+    "    js = '''(() => setTimeout(() => document.querySelector('[data-mui=\"%s\"]').remove(),%s))()'''%(_id,dur*1000)\n",
+    "    return Div(a, NotStr(f\"<script>{js}</script>\"), data_mui=_id, cls=('toast', stringify(cls)), **kwargs)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "2323f7ff",
+   "metadata": {},
+   "source": [
+    "*Note: We use `NotStr(f\"<script>{js}</script>\")` instead of `Script(js)` to prevent the js from being escaped.*"
    ]
   },
   {
@@ -376,15 +387,15 @@
      "data": {
       "text/markdown": [
        "```html\n",
-       "<div class=\"toast toast-start toast-middle\">\n",
+       "<div data-mui=\"_6Hhof295QJm6E7-LMKS9BA\" class=\"toast toast-start toast-middle\">\n",
        "  <div class=\"alert \" role=\"alert\">\n",
        "<span>New message arrived.</span>  </div>\n",
-       "</div>\n",
+       "<script>(() => setTimeout(() => document.querySelector('[data-mui=\"_6Hhof295QJm6E7-LMKS9BA\"]').remove(),5000.0))()</script></div>\n",
        "\n",
        "```"
       ],
       "text/plain": [
-       "div((div((span(('New message arrived.',),{}),),{'class': 'alert ', 'role': 'alert'}),),{'class': 'toast toast-start toast-middle'})"
+       "div((div((span(('New message arrived.',),{}),),{'class': 'alert ', 'role': 'alert'}), '<script>(() => setTimeout(() => document.querySelector(\\'[data-mui=\"_6Hhof295QJm6E7-LMKS9BA\"]\\').remove(),5000.0))()</script>'),{'data-mui': '_6Hhof295QJm6E7-LMKS9BA', 'class': 'toast toast-start toast-middle'})"
       ]
      },
      "execution_count": null,
@@ -414,15 +425,15 @@
      "data": {
       "text/markdown": [
        "```html\n",
-       "<div class=\"toast \">\n",
+       "<div data-mui=\"_vq6iBLofRF2Rz0Z7Qqvyfg\" class=\"toast \">\n",
        "  <div class=\"alert alert-info\" role=\"alert\">\n",
        "<span>New message arrived.</span>  </div>\n",
-       "</div>\n",
+       "<script>(() => setTimeout(() => document.querySelector('[data-mui=\"_vq6iBLofRF2Rz0Z7Qqvyfg\"]').remove(),5000.0))()</script></div>\n",
        "\n",
        "```"
       ],
       "text/plain": [
-       "div((div((span(('New message arrived.',),{}),),{'class': 'alert alert-info', 'role': 'alert'}),),{'class': 'toast '})"
+       "div((div((span(('New message arrived.',),{}),),{'class': 'alert alert-info', 'role': 'alert'}), '<script>(() => setTimeout(() => document.querySelector(\\'[data-mui=\"_vq6iBLofRF2Rz0Z7Qqvyfg\"]\\').remove(),5000.0))()</script>'),{'data-mui': '_vq6iBLofRF2Rz0Z7Qqvyfg', 'class': 'toast '})"
       ]
      },
      "execution_count": null,
@@ -434,6 +445,44 @@
     "Toast(\"New message arrived.\", alert_cls=AlertT.info)"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "b380807d",
+   "metadata": {},
+   "source": [
+    "Set the Toast duration to 10 seconds."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "180451d1",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/markdown": [
+       "```html\n",
+       "<div data-mui=\"_vbVi8KJdR9SQntA85v9FDw\" class=\"toast \">\n",
+       "  <div class=\"alert alert-info\" role=\"alert\">\n",
+       "<span>New message arrived.</span>  </div>\n",
+       "<script>(() => setTimeout(() => document.querySelector('[data-mui=\"_vbVi8KJdR9SQntA85v9FDw\"]').remove(),10000.0))()</script></div>\n",
+       "\n",
+       "```"
+      ],
+      "text/plain": [
+       "div((div((span(('New message arrived.',),{}),),{'class': 'alert alert-info', 'role': 'alert'}), '<script>(() => setTimeout(() => document.querySelector(\\'[data-mui=\"_vbVi8KJdR9SQntA85v9FDw\"]\\').remove(),10000.0))()</script>'),{'data-mui': '_vbVi8KJdR9SQntA85v9FDw', 'class': 'toast '})"
+      ]
+     },
+     "execution_count": null,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "Toast(\"New message arrived.\", alert_cls=AlertT.info, dur=10.0)"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,