Add examples of DataSelector actions and PersistentDialog

examples/data_selector/view.py

@@ -1,6 +1,7 @@
 """View for data selector example."""
 
 import os
+from typing import Any, Dict
 
 from nova.mvvm.trame_binding import TrameBinding
 from nova.trame import ThemedApp
@@ -37,11 +38,27 @@ def create_ui(self) -> None:
                     # Please note that this is a dangerous operation. You should ensure that you restrict this
                     # component to only expose files that are strictly necessary to making your application
                     # functional.
-                    DataSelector(v_model="data.selected_files", directory=os.environ.get("HOME", "/"))
+                    DataSelector(
+                        v_model="data.selected_files",
+                        directory=os.environ.get("HOME", "/"),
+                        # Setting the action parameter adds a button for each file that triggers a callback that
+                        # you've specified. This can be useful when you need to enable behavior per-file behavior
+                        # beyond selection.
+                        action=self.test,
+                        # You can customize the button with the following parameters.
+                        # https://pictogrammers.com/library/mdi/ for a list of available icons.
+                        action_icon="mdi-pencil",
+                        # By default, all rows will show the button. You can modify this with a JavaScript
+                        # expression. item contains the dictionary that is sent to the action callback.
+                        action_visible=("item.path.endsWith('.h5')",),
+                    )
                 html.Span("You have selected {{ data.selected_files.length }} files.")
 
     def create_vm(self) -> None:
         binding = TrameBinding(self.state)
 
         model = Model()
         self.view_model = ViewModel(model, binding)
+
+    def test(self, item: Dict[str, Any]) -> None:
+        print(f"Clicked action for {item}")

examples/dialog/view.py

@@ -2,6 +2,7 @@
 
 from nova.mvvm.trame_binding import TrameBinding
 from nova.trame import ThemedApp
+from nova.trame.view.components import PersistentDialog
 from nova.trame.view.layouts import VBoxLayout
 from trame.widgets import client
 from trame.widgets import vuetify3 as vuetify
@@ -24,8 +25,9 @@ def __init__(self) -> None:
     def create_ui(self) -> None:
         with super().create_ui() as layout:
             with layout.content:
-                with VBoxLayout(halign="center", valign="center", stretch=True):
+                with VBoxLayout(gap="0.5em", halign="center", valign="center", stretch=True):
                     vuetify.VBtn("Open the Dialog", click=self.view_model.open_dialog)
+                    vuetify.VBtn("Open the Persistent Dialog", click=self.view_model.open_persistent_dialog)
 
                 # An important note about working with Trame is that it doesn't automatically listen to changes in
                 # Pydantic fields. While our InputField component handles this automatically, when you are using other
@@ -41,6 +43,18 @@ def create_ui(self) -> None:
                             vuetify.VCardTitle("Dialog")
                             vuetify.VCardSubtitle("Click anywhere outside of the dialog to dismiss.")
 
+                    # PersistentDialog will automatically set view_state.dialog_open to False when the user uses the
+                    # escape key but not when they click outside of the dialog.
+                    with PersistentDialog(
+                        v_model="view_state.persistent_dialog_open",
+                        # This is a default, but if you want to fully block closing the dialog you can set it to False.
+                        close_on_escape=True,
+                        width=400,
+                    ):
+                        with vuetify.VCard(classes="pa-4"):
+                            vuetify.VCardTitle("Dialog")
+                            vuetify.VCardSubtitle("Use the escape key to dismiss this dialog.")
+
     def create_vm(self) -> None:
         binding = TrameBinding(self.state)
 

examples/dialog/view_model.py

@@ -8,6 +8,7 @@ class ViewState(BaseModel):
     """Pydantic model for holding view state."""
 
     dialog_open: bool = Field(default=False)
+    persistent_dialog_open: bool = Field(default=False)
 
 
 class ViewModel:
@@ -21,3 +22,7 @@ def __init__(self, binding: BindingInterface) -> None:
     def open_dialog(self) -> None:
         self.view_state.dialog_open = True
         self.view_state_bind.update_in_view(self.view_state)
+
+    def open_persistent_dialog(self) -> None:
+        self.view_state.persistent_dialog_open = True
+        self.view_state_bind.update_in_view(self.view_state)