improve deletion of dismissed ui.notification elements

nicegui/elements/notification.js

@@ -1,15 +1,27 @@
+import { convertDynamicProperties } from "../../static/utils/dynamic_properties.js";
+
 export default {
   mounted() {
-    this.notification = Quasar.Notify.create(this.options);
+    this.notification = Quasar.Notify.create(this.convertedOptions);
   },
   updated() {
-    this.notification(this.options);
+    this.notification(this.convertedOptions);
   },
   methods: {
     dismiss() {
       this.notification();
     },
   },
+  computed: {
+    convertedOptions() {
+      convertDynamicProperties(this.options, true);
+      const options = {
+        ...this.options,
+        onDismiss: () => this.$emit("dismiss"),
+      };
+      return options;
+    },
+  },
   props: {
     options: Object,
   },

nicegui/elements/notification.py

@@ -1,8 +1,11 @@
-from typing import Any, Literal, Optional, Union
+import asyncio
+from typing import Any, Callable, Literal, Optional, Union
+
+from typing_extensions import Self
 
 from ..context import context
 from ..element import Element
-from .timer import Timer
+from ..events import UiEventArguments, handle_event
 
 NotificationPosition = Literal[
     'top-left',
@@ -37,6 +40,7 @@ def __init__(self,
                  icon: Optional[str] = None,
                  spinner: bool = False,
                  timeout: Optional[float] = 5.0,
+                 on_dismiss: Optional[Callable] = None,
                  **kwargs: Any,
                  ) -> None:
         """Notification element
@@ -54,6 +58,7 @@ def __init__(self,
         :param icon: optional name of an icon to be displayed in the notification (default: `None`)
         :param spinner: display a spinner in the notification (default: False)
         :param timeout: optional timeout in seconds after which the notification is dismissed (default: 5.0)
+        :param on_dismiss: optional callback to be invoked when the notification is dismissed
 
         Note: You can pass additional keyword arguments according to `Quasar's Notify API <https://quasar.dev/quasar-plugins/notify#notify-api>`_.
         """
@@ -76,17 +81,18 @@ def __init__(self,
         if icon is not None:
             self._props['options']['icon'] = icon
         self._props['options'].update(kwargs)
-        with self:
-            def delete():
-                self.clear()
-                self.delete()
 
-            async def try_delete():
-                query = f'''!!document.querySelector("[data-id='nicegui-dialog-{self.id}']")'''
-                if not await self.client.run_javascript(query):
-                    delete()
+        if on_dismiss:
+            self.on_dismiss(on_dismiss)
 
-            Timer(1.0, try_delete)
+        async def handle_dismiss() -> None:
+            if self.client.is_auto_index_client:
+                self.dismiss()
+                await asyncio.sleep(1.0)  # NOTE: sent dismiss message to all browsers before deleting the element
+            if not self._deleted:
+                self.clear()
+                self.delete()
+        self.on('dismiss', handle_dismiss)
 
     @property
     def message(self) -> str:
@@ -177,6 +183,11 @@ def close_button(self, value: Union[bool, str]) -> None:
         self._props['options']['closeBtn'] = value
         self.update()
 
+    def on_dismiss(self, callback: Callable[..., Any]) -> Self:
+        """Add a callback to be invoked when the notification is dismissed."""
+        self.on('dismiss', lambda _: handle_event(callback, UiEventArguments(sender=self, client=self.client)), [])
+        return self
+
     def dismiss(self) -> None:
         """Dismiss the notification."""
         self.run_method('dismiss')