SplitStack control and TextBox control improvements (#66)

* SplitStack control

* Dialog, Panel - default 'bool' props

* New TextBox props: rows, shift_enter, resizable

* SplitStack.on_resize event

* Examples updated

* Use Pglet 0.7.0

* BorderStyle allows arrays

Affected controls: Image, IFrame, Stack, Text

* 0.7.0 added to Changelog

* Fix changelog [skip ci]

Author: FeodorFitsner

CHANGELOG.md

@@ -1,5 +1,26 @@
 # Change Log - Pglet client for Python
 
+## [0.7.0](https://pypi.org/project/pglet/0.7.0) - Feb 17, 2022
+
+Works with [Pglet Server 0.7.0](https://github.com/pglet/pglet/releases/tag/v0.7.0).
+
+New `SplitStack` control (based on [split.js](https://split.js.org/)) which could be used as a drop-in replacement for `Stack`, but with resize gutters instead of gaps. Check out [SplitStack control example](https://github.com/pglet/examples/blob/main/python/controls/split.py).
+
+New `TextBox` control properties:
+* `shiftEnter` (bool) - blocks ENTER button in `multiline` TextBox, but pops up the event, so `Stack.submit` could be triggered. New line could still be entered with SHIFT+ENTER. This is to build Discord-like message box.
+* `rows` (int) - sets initial size in rows of `multiline` TextBox.
+* `resizable` (bool) - controls whether `multiline` TextBox is resizable by the user. Default is `true`. `autoAdjustHeight` is still respected even if `resizable` is `false`.
+
+`Panel` control changes:
+* `blocking` (bool) is now `true` by default.
+
+`border_style` property in `Image`, `IFrame`, `Stack` and `Text` allows lists, for example:
+
+```python
+stack.border_style = ["solid", "double"]  # top and bottom borders are solid, left and right are double
+```
+
+
 ## [0.6.0](https://pypi.org/project/pglet/0.6.0) - Feb 13, 2022
 
 * Works with [Pglet Server 0.6.0](https://github.com/pglet/pglet/releases/tag/v0.6.0).

examples/chat.py

@@ -31,7 +31,14 @@ def main(page):
         vertical_align="end",
         controls=[messages],
     )
-    message = Textbox(width="100%")
+    message = Textbox(
+        width="100%",
+        multiline=True,
+        rows=1,
+        auto_adjust_height=True,
+        shift_enter=True,
+        resizable=True,
+    )
 
     def on_message(user, message):
         if user:

examples/panel.py

@@ -0,0 +1,33 @@
+import pglet
+from pglet import Button, Checkbox, Panel, Text
+
+with pglet.page("panel-custom") as page:
+
+    def button_clicked(e):
+
+        p.light_dismiss = light_dismiss.value
+        p.auto_dismiss = auto_dismiss.value
+        p.blocking = blocking.value
+        values.value = (
+            f"Panel properties are:  {p.light_dismiss}, {p.auto_dismiss}, {p.blocking}."
+        )
+        p.open = True
+        page.update()
+
+    values = Text()
+    light_dismiss = Checkbox(label="Light dismiss", value=False)
+    auto_dismiss = Checkbox(label="Auto-dismiss", value=True)
+    blocking = Checkbox(label="Blocking", value=True)
+    b = Button(text="Open panel", on_click=button_clicked)
+    page.add(light_dismiss, auto_dismiss, blocking, b, values)
+
+    t = Text("Content goes here")
+
+    p = Panel(
+        title="Panel with dismiss options",
+        controls=[t],
+    )
+
+    page.add(p)
+
+    input()

examples/split.py

@@ -0,0 +1,67 @@
+import logging
+
+import pglet
+from pglet import SplitStack, Stack, Text
+from pglet.button import Button
+
+logging.basicConfig(level=logging.DEBUG)
+
+
+def split_resize(e):
+    for c in e.control.controls:
+        print("size", c.width if e.control.horizontal else c.height)
+
+
+page = pglet.page("split1")
+page.title = "Split test"
+page.horizontal_align = "stretch"
+page.vertical_fill = True
+st = SplitStack(
+    height="100%",
+    horizontal=True,
+    # gutter_color="#eee",
+    gutter_size=10,
+    on_resize=split_resize,
+    controls=[
+        Stack(width="200", min_width="200", height="100%", controls=[Text("Column A")]),
+        Stack(height="100%", controls=[Text("Column B")]),
+        Stack(
+            height="100%",
+            width="30%",
+            controls=[
+                SplitStack(
+                    height="100%",
+                    gutter_color="yellow",
+                    gutter_hover_color="orange",
+                    gutter_drag_color="blue",
+                    on_resize=split_resize,
+                    controls=[
+                        Stack(
+                            width="100%",
+                            bgcolor="lightGreen",
+                            controls=[Text("Row A")],
+                        ),
+                        Stack(
+                            width="100%",
+                            height="200",
+                            max_height="400",
+                            bgcolor="lightGreen",
+                            controls=[Text("Row B")],
+                        ),
+                    ],
+                )
+            ],
+        ),
+    ],
+)
+
+
+def btn_click(e):
+    st.height = "90%"
+    st.update()
+
+
+btn = Button("Click me!", on_click=btn_click)
+page.add(btn, st)
+
+input()

pglet/__init__.py

@@ -28,6 +28,7 @@
 from pglet.slider import Slider
 from pglet.spinbutton import SpinButton
 from pglet.spinner import Spinner
+from pglet.splitstack import SplitStack
 from pglet.stack import Stack
 from pglet.tabs import Tab, Tabs
 from pglet.text import Text

pglet/constants.py

@@ -1,4 +1,4 @@
-PGLET_SERVER_VERSION = "0.6.0"
+PGLET_SERVER_VERSION = "0.7.0"
 PGLET_SERVER_DEFAULT_PORT = 8550
 HOSTED_SERVICE_URL = "https://app.pglet.io"
 CONNECT_TIMEOUT_SECONDS = 30

pglet/control.py

@@ -1,21 +1,33 @@
 import datetime as dt
 import threading
-from typing import Optional
 from difflib import SequenceMatcher
+from typing import List, Optional, Union
+
+from beartype import beartype
+
+from pglet.protocol import Command
 
 try:
     from typing import Literal
 except:
     from typing_extensions import Literal
 
-from beartype import beartype
-
-from pglet.protocol import Command
 
-BorderStyle = Literal[
-    None, "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"
+BorderStyles = Literal[
+    "none",
+    "hidden",
+    "dotted",
+    "dashed",
+    "solid",
+    "double",
+    "groove",
+    "ridge",
+    "inset",
+    "outset",
 ]
 
+BorderStyle = Union[None, BorderStyles, List[BorderStyles]]
+
 TextSize = Literal[
     None,
     "tiny",

pglet/dialog.py

@@ -1,12 +1,14 @@
 from typing import Optional
+
+from beartype import beartype
+
+from pglet.control import Control
+
 try:
     from typing import Literal
 except:
     from typing_extensions import Literal
 
-from beartype import beartype
-
-from pglet.control import Control
 
 DialogType = Literal[None, "normal", "largeHeader", "close"]
 
@@ -129,7 +131,7 @@ def type(self, value: DialogType):
     # auto_dismiss
     @property
     def auto_dismiss(self):
-        return self._get_attr("autoDismiss")
+        return self._get_attr("autoDismiss", data_type="bool", def_value=True)
 
     @auto_dismiss.setter
     @beartype

pglet/iframe.py

@@ -1,13 +1,15 @@
+from typing import List
+
 from beartype import beartype
-from pglet.control import Control, BorderStyle
+
+from pglet.control import BorderStyle, Control
 
 
 class IFrame(Control):
     def __init__(
         self,
         id=None,
         src=None,
-        border=None,
         border_style: BorderStyle = None,
         border_width=None,
         border_color=None,
@@ -33,7 +35,6 @@ def __init__(
         )
 
         self.src = src
-        self.border = border
         self.border_style = border_style
         self.border_width = border_width
         self.border_color = border_color
@@ -52,23 +53,19 @@ def src(self):
     def src(self, value):
         self._set_attr("src", value)
 
-    # border
-    @property
-    def border(self):
-        return self._get_attr("border")
-
-    @border.setter
-    def border(self, value):
-        self._set_attr("border", value)
-
     # border_style
     @property
     def border_style(self):
-        return self._get_attr("borderStyle")
+        v = self._get_attr("borderStyle")
+        if v:
+            return [x.strip() for x in v.split(" ")]
+        return v
 
     @border_style.setter
     @beartype
     def border_style(self, value: BorderStyle):
+        if isinstance(value, List):
+            value = " ".join(value)
         self._set_attr("borderStyle", value)
 
     # border_width

pglet/image.py

@@ -1,12 +1,14 @@
-from typing import Optional
+from typing import List, Optional
+
+from beartype import beartype
+
+from pglet.control import BorderStyle, Control
+
 try:
     from typing import Literal
 except:
     from typing_extensions import Literal
 
-from beartype import beartype
-
-from pglet.control import Control, BorderStyle
 
 Fit = Literal[
     None, "none", "contain", "cover", "center", "centerContain", "centerCover"
@@ -108,11 +110,16 @@ def fit(self, value: Fit):
     # border_style
     @property
     def border_style(self):
-        return self._get_attr("borderStyle")
+        v = self._get_attr("borderStyle")
+        if v:
+            return [x.strip() for x in v.split(" ")]
+        return v
 
     @border_style.setter
     @beartype
     def border_style(self, value: BorderStyle):
+        if isinstance(value, List):
+            value = " ".join(value)
         self._set_attr("borderStyle", value)
 
     # border_width