feat(vue23): Add support for vue3

Update code base to work in both vue2 and vue3

.gitignore

@@ -4,6 +4,7 @@
 
 # OS files
 .DS_Store
+.task
 
 # Editor directories and files
 .idea

examples/cursor.py

@@ -0,0 +1,87 @@
+import os
+from trame.app import get_server
+from trame.widgets import trame, html
+from trame.ui.html import DivLayout
+
+# -----------------------------------------------------------------------------
+# Trame setup
+# -----------------------------------------------------------------------------
+
+server = get_server()
+server.client_type = os.environ.get("VUE_VERSION", "vue2")
+print(f"Using {server.client_type}")
+
+state = server.state
+
+CURSORS = [
+    "auto",
+    "default",
+    "none",
+    "context-menu",
+    "help",
+    "pointer",
+    "progress",
+    "wait",
+    "cell",
+    "crosshair",
+    "text",
+    "vertical-text",
+    "alias",
+    "copy",
+    "move",
+    "no-drop",
+    "not-allowed",
+    "grab",
+    "grabbing",
+    "e-resize",
+    "n-resize",
+    "ne-resize",
+    "nw-resize",
+    "s-resize",
+    "se-resize",
+    "sw-resize",
+    "w-resize",
+    "ew-resize",
+    "ns-resize",
+    "nesw-resize",
+    "nwse-resize",
+    "col-resize",
+    "row-resize",
+    "all-scroll",
+    "zoom-in",
+    "zoom-out",
+]
+
+# -----------------------------------------------------------------------------
+# UI setup
+# -----------------------------------------------------------------------------
+
+NB_REGIONS = 5
+
+with DivLayout(server) as layout:
+    html.Input(
+        type="range",
+        min=0,
+        max=len(CURSORS) - NB_REGIONS - 1,
+        v_model_number=("active", 0),
+    )
+
+    with html.Div(
+        style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around;"
+    ):
+        for i in range(NB_REGIONS):
+            with html.Div(
+                f"{{{{ options[active + {i}] }}}}",
+                style="width: 150px; height: 150px; border: solid 1px #333;",
+            ):
+                trame.Cursor(
+                    active=(f"active + {i}",),
+                    cursors=("options", CURSORS),
+                )
+
+# -----------------------------------------------------------------------------
+# start server
+# -----------------------------------------------------------------------------
+
+if __name__ == "__main__":
+    server.start()

examples/float_card.py

@@ -0,0 +1,26 @@
+import os
+from trame.app import get_server
+from trame.widgets import trame
+
+server = get_server()
+server.client_type = os.environ.get("VUE_VERSION", "vue2")
+print(f"Using {server.client_type}")
+
+if server.client_type == "vue2":
+    from trame.ui.vuetify2 import SinglePageLayout
+else:
+    from trame.ui.vuetify3 import SinglePageLayout
+
+with SinglePageLayout(server) as layout:
+    layout.title.set_text("FloatCard Demo")
+
+    with layout.content:
+        trame.FloatCard(
+            "Drag the handle to move me anywhere",
+            classes="pa-8",
+            location=("[100, 100]",),
+            handle_position="bottom",
+        )
+
+if __name__ == "__main__":
+    server.start()

examples/git_tree.py

@@ -0,0 +1,58 @@
+import os
+from trame.app import get_server
+from trame.ui.html import DivLayout
+from trame.widgets import trame, html
+
+server = get_server()
+server.client_type = os.environ.get("VUE_VERSION", "vue2")
+print(f"Using {server.client_type}")
+
+selection = ["2"]
+tree = [
+    {"id": "1", "parent": "0", "visible": 0, "name": "Wavelet"},
+    {"id": "2", "parent": "1", "visible": 0, "name": "Clip"},
+    {"id": "3", "parent": "1", "visible": 1, "name": "Slice"},
+    {"id": "4", "parent": "2", "visible": 1, "name": "Slice 2"},
+]
+
+
+def on_visibility_change(event):
+    node_id = event.get("id")
+    visible = 1 if event.get("visible", 0) else 0
+    for node in tree:
+        if node.get("id") == node_id:
+            node["visible"] = visible
+    server.state.dirty("tree")
+
+
+def on_active_change(event):
+    server.state.selection = event
+
+
+with DivLayout(server) as layout:
+    layout.root.style = "height: 100vh; width: 100%; padding: 0; margin: 0;"
+    with html.Div(style="display: flex;"):
+        html.Button("Toggle", click="show = !show")
+        html.Button("Clear active", click="selection = []")
+        html.Div("Selection {{ selection }}", style="margin: 5px 10px;")
+        html.Div(
+            "Visible {{ tree.filter(({ visible }) => visible).map(({ id }) => id) }}",
+            style="margin: 5px 10px;",
+        )
+
+    with html.Div(style="display: flex;"):
+        trame.GitTree(
+            sources=("tree", tree),
+            actives=("selection", selection),
+            visibility_change=(on_visibility_change, "[$event]"),
+            actives_change=(on_active_change, "[$event]"),
+        )
+        trame.GitTree(
+            v_if=("show", True),
+            sources=("tree", tree),
+            actives=("selection", selection),
+        )
+
+
+if __name__ == "__main__":
+    server.start()

examples/life_cycle.py

@@ -0,0 +1,48 @@
+import os
+from trame.app import get_server
+from trame.widgets import trame, html
+from trame.ui.html import DivLayout
+
+server = get_server()
+server.client_type = os.environ.get("VUE_VERSION", "vue2")
+print(f"Using {server.client_type}")
+
+state = server.state
+global_layout = None
+
+state.a = 1
+state.last_event = None
+
+
+def add():
+    state.a += 1
+
+
+def add_div():
+    with global_layout:
+        html.Div("Hello")
+
+
+with DivLayout(server) as layout:
+    global_layout = layout
+    layout.root.add_child(
+        "a={{ a }} - LifeCycle {{ last_event }}<br> template_ts={{ tts }} <br> "
+    )
+    html.Button("a+", click="a+=1")
+    html.Button("set(a+)", click="set('a', a+1)")
+    html.Button("server", click=add)
+    html.Button("modify layout", click=add_div)
+    trame.LifeCycleMonitor(
+        type="emit",
+        created="last_event += 'created '",
+        before_mount="last_event += 'beforeMount '",
+        mounted="last_event += 'mounted '",
+        before_update="last_event += 'beforeUpdate' ",
+        updated="last_event += 'updated '",
+        before_destroy="last_event += 'beforeDestroy '",
+        destroyed="last_event += 'destroyed '",
+    )
+
+
+if __name__ == "__main__":
+    server.start()

examples/list_browser.py

@@ -0,0 +1,56 @@
+import os
+from trame.app import get_server
+from trame.widgets import trame
+
+server = get_server()
+server.client_type = os.environ.get("VUE_VERSION", "vue2")
+
+if server.client_type == "vue2":
+    from trame.ui.vuetify2 import SinglePageLayout
+else:
+    from trame.ui.vuetify3 import SinglePageLayout
+
+FILE_LISTING = [
+    {
+        "text": "Hello.txt",
+        "value": "hello.txt",
+        "type": "File",
+        "prependIcon": "mdi-file-document-outline",
+    },
+    {
+        "text": "Many files *",
+        "value": ["a.txt", "b.txt"],
+        "type": "Group",
+        "prependIcon": "mdi-file-document-multiple-outline",
+    },
+    {
+        "text": "directory_name",
+        "value": "directory_name",
+        "type": "Directory",
+        "prependIcon": "mdi-folder",
+        "appendIcon": "mdi-chevron-right",
+    },
+]
+
+PATH_HIERARCHY = ["Home", "parent", "child"]
+
+
+def on_click(e):
+    print(e)
+
+
+with SinglePageLayout(server) as layout:
+    layout.title.set_text("List Browser")
+    with layout.content:
+        trame.ListBrowser(
+            classes="pa-8",
+            location=("[100, 100]",),
+            handle_position="bottom",
+            filter=True,
+            list=("listing", FILE_LISTING),
+            path=("path", PATH_HIERARCHY),
+            click=(on_click, "[$event]"),
+        )
+
+if __name__ == "__main__":
+    server.start()

examples/mouse_trap.py

@@ -0,0 +1,67 @@
+import os
+from trame.app import get_server
+from trame.ui.html import DivLayout
+from trame.widgets import trame, html
+
+# -----------------------------------------------------------------------------
+# Trame app
+# -----------------------------------------------------------------------------
+
+server = get_server()
+state = server.state
+server.client_type = os.environ.get("VUE_VERSION", "vue2")
+print(f"Using {server.client_type}")
+
+state.last_action = ""
+state.action_count = 1
+
+
+def save():
+    print("Save")
+    state.action_count += 1
+    state.last_action = "Save"
+
+
+def open():
+    print("Open")
+    state.action_count += 1
+    state.last_action = "Open"
+
+
+def edit():
+    print("Edit")
+    state.action_count += 1
+    state.last_action = "Edit"
+
+
+def esc():
+    print("Escape")
+    state.action_count += 1
+    state.last_action = "Escape"
+
+
+# -----------------------------------------------------------------------------
+# UI setup
+# -----------------------------------------------------------------------------
+with DivLayout(server):
+    mt = trame.MouseTrap(
+        Save=save,
+        Open=open,
+        Edit=edit,
+        Escape=esc,
+    )
+    html.Div("{{ last_action }} #{{action_count}}")
+
+
+# Do binding after
+mt.bind(["ctrl+s", "mod+s"], "Save", stop_propagation=True)
+mt.bind(["ctrl+o", "mod+o"], "Open", stop_propagation=True)
+mt.bind("mod+e", "Edit")
+mt.bind("esc", "Escape")
+
+# -----------------------------------------------------------------------------
+# start server
+# -----------------------------------------------------------------------------
+
+if __name__ == "__main__":
+    server.start()

examples/size_observer.py

@@ -0,0 +1,39 @@
+import os
+from trame.app import get_server
+from trame.ui.html import DivLayout
+from trame.widgets import trame, html
+
+server = get_server()
+server.client_type = os.environ.get("VUE_VERSION", "vue2")
+print(f"Using {server.client_type}")
+
+
+@server.state.change("first_size")
+def on_size(first_size, **kwargs):
+    print(first_size)
+
+
+with DivLayout(server) as layout:
+    layout.root.style = "height: 100vh; width: 100%; padding: 0; margin: 0;"
+
+    with html.Div(
+        style="width: 40vw; height: 40vh; border: solid 1px #333; margin: 25px;"
+    ):
+        with trame.SizeObserver("first_size"):
+            html.Div(
+                "{{ first_size?.size.width.toFixed(1) }} x {{ first_size?.size.height.toFixed(1) }}",
+                style="margin: 0 auto; height: 100%; text-align: middle;",
+            )
+
+    with html.Div(
+        style="width: 20vw; height: 30vh; border: solid 1px #333; position: absolute; right: 10px; bottom: 10px"
+    ):
+        with trame.SizeObserver("second_size"):
+            html.Div(
+                "{{ second_size?.size.width.toFixed(1) }} x {{ second_size?.size.height.toFixed(1) }}",
+                style="margin: 0 auto; height: 100%; text-align: middle;",
+            )
+
+
+if __name__ == "__main__":
+    server.start()