Use open as parameter, show / hide / toggle as function call

panel/layout/modal.py

@@ -20,12 +20,11 @@
 
 
 class Modal(ListPanel):
-
     height = param.Integer(default=None, bounds=(0, None))
 
     width = param.Integer(default=None, bounds=(0, None))
 
-    is_open = param.Boolean(default=False, readonly=True, doc="Whether the modal is open.")
+    open = param.Boolean(default=False, doc="Whether to open the modal.")
 
     show_close_button = param.Boolean(default=True, doc="Whether to show a close button in the modal.")
 
@@ -44,16 +43,20 @@ def _get_model(
         )
         return super()._get_model(doc, root, parent, comm)
 
-    def open(self):
+    def show(self):
         self._send_event(ModalDialogEvent, open=True)
 
-    def close(self):
+    def hide(self):
         self._send_event(ModalDialogEvent, open=False)
 
     def toggle(self):
-        self.close() if self.is_open else self.open()
+        self._send_event(ModalDialogEvent, open=not self.open)
+
+    @param.depends("open", watch=True)
+    def _open(self):
+        self._send_event(ModalDialogEvent, open=self.open)
 
     def _process_param_change(self, msg):
         msg = super()._process_param_change(msg)
-        msg.pop("is_open", None)
+        msg.pop("open", None)
         return msg

panel/models/modal.py

@@ -1,6 +1,6 @@
 from typing import Any
 
-from bokeh.core.properties import Bool, Readonly
+from bokeh.core.properties import Bool
 from bokeh.events import ModelEvent
 
 from ..io.resources import bundled_files
@@ -36,7 +36,7 @@ def __js_skip__(cls):
         }
     }
 
-    is_open = Readonly(Bool, default=False, help="Whether or not the modal is open.")
+    open = Bool(default=False, help="Whether or not the modal is open.")
     show_close_button = Bool(True, help="Whether to show a close button in the modal.")
     background_close = Bool(True, help="Whether to enable closing the modal when clicking the background.")
 

panel/models/modal.ts

@@ -110,8 +110,8 @@ export class ModalView extends BkColumnView {
 
     this.modal = new (window as any).A11yDialog(dialog)
     this.update_close_button()
-    this.modal.on("show", () => { this.model.is_open = true })
-    this.modal.on("hide", () => { this.model.is_open = false })
+    this.modal.on("show", () => { this.model.open = true })
+    this.modal.on("hide", () => { this.model.open = false })
   }
 
   update_close_button(): void {
@@ -127,7 +127,7 @@ export namespace Modal {
   export type Attrs = p.AttrsOf<Props>
 
   export type Props = BkColumn.Props & {
-    is_open: p.Property<boolean>
+    open: p.Property<boolean>
     show_close_button: p.Property<boolean>
     background_close: p.Property<boolean>
   }
@@ -146,7 +146,7 @@ export class Modal extends BkColumn {
   static {
     this.prototype.default_view = ModalView
     this.define<Modal.Props>(({Bool}) => ({
-      is_open: [Bool, false],
+      open: [Bool, false],
       show_close_button: [Bool, true],
       background_close: [Bool, true],
     }))