fix(vue3): update examples to work with vuetify 3

Kitware · Jan 4, 2024 · 222f2c3 · 222f2c3
1 parent e198720
commit 222f2c3
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 94 deletions.
diff --git a/examples/00_AddressBook/app.py b/examples/00_AddressBook/app.py
@@ -1,7 +1,7 @@
 from pathlib import Path
 from trame.app import get_server
-from trame.ui.vuetify import SinglePageWithDrawerLayout
-from trame.widgets import vuetify, simput
+from trame.ui.vuetify3 import SinglePageWithDrawerLayout
+from trame.widgets import vuetify3 as vuetify, simput
 
 from trame_simput import get_simput_manager
 
@@ -109,8 +109,8 @@ def entry_ids(self):
             items=(
                 "options",
                 [
-                    {"text": "English", "value": "en"},
-                    {"text": "Francais", "value": "fr"},
+                    {"title": "English", "value": "en"},
+                    {"title": "Francais", "value": "fr"},
                 ],
             ),
             **compact_styles,
@@ -119,7 +119,7 @@ def entry_ids(self):
             classes="mx-2",
             v_model="abAutoApply",
             label="Apply",
-            **compact_styles,
+            **compact_styles, 
         )
         with vuetify.VBtn(
             **btn_styles,
@@ -154,20 +154,19 @@ def entry_ids(self):
 
     with layout.drawer:
         with vuetify.VList(**compact_styles):
-            with vuetify.VListItemGroup(v_model="active_id", color="primary"):
+            with vuetify.VListGroup(v_model="active_id", color="primary"):
                 with vuetify.VListItem(
                     v_for="(id, i) in person_ids",
                     key="i",
                     value=("id",),
                 ):
-                    with vuetify.VListItemContent():
-                        with vuetify.VListItemTitle():
-                            simput.SimputItem(
-                                "{{FirstName}} {{LastName}}",
-                                item_id="id",
-                                no_ui=True,
-                                extract=["FirstName", "LastName"],
-                            )
+                    with vuetify.VListItemTitle():
+                        simput.SimputItem(
+                            "{{FirstName}} {{LastName}}",
+                            item_id="id",
+                            no_ui=True,
+                            extract=["FirstName", "LastName"],
+                        )
 
     with layout.content:
         with vuetify.VContainer(fluid=True):

diff --git a/examples/00_AddressBook/definitions/model.yaml b/examples/00_AddressBook/definitions/model.yaml
@@ -33,107 +33,107 @@ Person:
     domains:
       - type: LabelList
         values:
-          - text: Alabama
+          - title: Alabama
             value: AL
-          - text: Alaska
+          - title: Alaska
             value: AK
-          - text: Arizona
+          - title: Arizona
             value: AZ
-          - text: Arkansas
+          - title: Arkansas
             value: AR
-          - text: California
+          - title: California
             value: CA
-          - text: Colorado
+          - title: Colorado
             value: CO
-          - text: Connecticut
+          - title: Connecticut
             value: CT
-          - text: Delaware
+          - title: Delaware
             value: DE
-          - text: Florida
+          - title: Florida
             value: FL
-          - text: Georgia
+          - title: Georgia
             value: GA
-          - text: Hawaii
+          - title: Hawaii
             value: HI
-          - text: Idaho
+          - title: Idaho
             value: ID
-          - text: Illinois
+          - title: Illinois
             value: IL
-          - text: Indiana
+          - title: Indiana
             value: IN
-          - text: Iowa
+          - title: Iowa
             value: IA
-          - text: Kansas
+          - title: Kansas
             value: KS
-          - text: Kentucky
+          - title: Kentucky
             value: KY
-          - text: Louisiana
+          - title: Louisiana
             value: LA
-          - text: Maine
+          - title: Maine
             value: ME
-          - text: Maryland
+          - title: Maryland
             value: MD
-          - text: Massachusetts
+          - title: Massachusetts
             value: MA
-          - text: Michigan
+          - title: Michigan
             value: MI
-          - text: Minnesota
+          - title: Minnesota
             value: MN
-          - text: Mississippi
+          - title: Mississippi
             value: MS
-          - text: Missouri
+          - title: Missouri
             value: MO
-          - text: Montana
+          - title: Montana
             value: MT
-          - text: Nebraska
+          - title: Nebraska
             value: NE
-          - text: Nevada
+          - title: Nevada
             value: NV
-          - text: New Hampshire
+          - title: New Hampshire
             value: NH
-          - text: New Jersey
+          - title: New Jersey
             value: NJ
-          - text: New Mexico
+          - title: New Mexico
             value: NM
-          - text: New York
+          - title: New York
             value: NY
-          - text: North Carolina
+          - title: North Carolina
             value: NC
-          - text: North Dakota
+          - title: North Dakota
             value: ND
-          - text: Ohio
+          - title: Ohio
             value: OH
-          - text: Oklahoma
+          - title: Oklahoma
             value: OK
-          - text: Oregon
+          - title: Oregon
             value: OR
-          - text: Pennsylvania
+          - title: Pennsylvania
             value: PA
-          - text: Rhode Island
+          - title: Rhode Island
             value: RI
-          - text: South Carolina
+          - title: South Carolina
             value: SC
-          - text: South Dakota
+          - title: South Dakota
             value: SD
-          - text: Tennessee
+          - title: Tennessee
             value: TN
-          - text: Texas
+          - title: Texas
             value: TX
-          - text: Utah
+          - title: Utah
             value: UT
-          - text: Vermont
+          - title: Vermont
             value: VT
-          - text: Virginia
+          - title: Virginia
             value: VA
-          - text: Washington
+          - title: Washington
             value: WA
-          - text: West Virginia
+          - title: West Virginia
             value: WV
-          - text: Wisconsin
+          - title: Wisconsin
             value: WI
-          - text: Wyoming
+          - title: Wyoming
             value: WY
-          - text: Not Applicable
+          - title: Not Applicable
             value: N/A
   ZipCode:
     _label: Zip Code

diff --git a/examples/01_Widgets/app.py b/examples/01_Widgets/app.py
@@ -1,7 +1,7 @@
 from pathlib import Path
 from trame.app import get_server
-from trame.ui.vuetify import SinglePageLayout
-from trame.widgets import vuetify, simput, html
+from trame.ui.vuetify3 import SinglePageLayout
+from trame.widgets import vuetify3 as vuetify, simput, html
 
 from trame_simput import get_simput_manager
 

diff --git a/examples/02_Hints/app.py b/examples/02_Hints/app.py
@@ -1,15 +1,15 @@
 from pathlib import Path
 from trame.app import get_server
-from trame.ui.vuetify import SinglePageLayout
-from trame.widgets import vuetify, simput
+from trame.ui.vuetify3 import SinglePageLayout
+from trame.widgets import vuetify3 as vuetify, simput
 
 from trame_simput import get_simput_manager
 
 # -----------------------------------------------------------------------------
 # Trame setup
 # -----------------------------------------------------------------------------
 
-server = get_server()
+server = get_server(client_type="vue3")
 state, ctrl = server.state, server.controller
 
 
@@ -30,7 +30,7 @@
 CHOICES = []
 for obj_type in pxm.types():
     item = pxm.create(obj_type)
-    CHOICES.append({"text": obj_type, "value": item.id})
+    CHOICES.append({"title": obj_type, "value": item.id})
 
 # -----------------------------------------------------------------------------
 # Simput container initialization

diff --git a/examples/03_VTK/app.py b/examples/03_VTK/app.py
@@ -1,8 +1,8 @@
 from pathlib import Path
 
 from trame.app import get_server
-from trame.ui.vuetify import SinglePageWithDrawerLayout
-from trame.widgets import vuetify, simput, html, trame, vtk
+from trame.ui.vuetify3 import SinglePageWithDrawerLayout
+from trame.widgets import vuetify3 as vuetify, simput, html, trame, vtk
 
 from trame_simput import get_simput_manager
 
@@ -131,27 +131,27 @@ def import_file(import_file, **kwargs):
             for icon in ICONS:
                 with vuetify.VTab():
                     vuetify.VIcon(icon)
-        with vuetify.VTabsItems(v_model=("drawer_mode", 0)):
-            with vuetify.VTabItem():
+
+        with vuetify.VWindow(v_model=("drawer_mode", 0), style="height: 100%;"):
+            with vuetify.VWindowItem(style="height: 100%;"):
                 with vuetify.VList(dense=True):
-                    with vuetify.VListItemGroup(
+                    with vuetify.VItemGroup(
                         v_model=("active_id", 0), color="primary"
                     ):
                         with vuetify.VListItem(
                             v_for="(id, i) in source_ids",
                             key="i",
                             value=("id",),
                         ):
-                            with vuetify.VListItemContent():
-                                with vuetify.VListItemTitle():
-                                    simput.SimputItem(
-                                        "{{ data.name }}",
-                                        item_id="id",
-                                        no_ui=True,
-                                        v_slot="{ data }",
-                                    )
-
-            with vuetify.VTabItem():
+                            with vuetify.VListItemTitle():
+                                simput.SimputItem(
+                                    "{{ data.name }}",
+                                    item_id="id",
+                                    no_ui=True,
+                                    v_slot="{ data }",
+                                )
+
+            with vuetify.VWindowItem():
                 with vuetify.VCard():
                     with vuetify.VCardText():
                         with vuetify.VRow():
@@ -176,7 +176,7 @@ def import_file(import_file, **kwargs):
                             "Create", click=(create_object, "[obj_name, obj_type]")
                         )
 
-            with vuetify.VTabItem():
+            with vuetify.VWindowItem():
                 simput.SimputItem(item_id="active_id")
 
     with layout.toolbar as toolbar:
@@ -192,7 +192,7 @@ def import_file(import_file, **kwargs):
                     v_bind="attrs",
                     v_on="on",
                     icon=True,
-                    click="document.getElementById('importFile').click();",
+                    click="window.document.getElementById('importFile').click();",
                 ):
                     vuetify.VIcon("mdi-database-import-outline")
                     html.Input(

diff --git a/examples/04_DynaDomain/app.py b/examples/04_DynaDomain/app.py
@@ -1,7 +1,7 @@
 from pathlib import Path
 from trame.app import get_server
-from trame.ui.vuetify import SinglePageLayout
-from trame.widgets import vuetify, simput
+from trame.ui.vuetify3 import SinglePageLayout
+from trame.widgets import vuetify3 as vuetify, simput
 
 from trame_simput import get_simput_manager
 from trame_simput.core.domains import PropertyDomain, register_property_domain

diff --git a/examples/05_ReadonlyDisabled/app.py b/examples/05_ReadonlyDisabled/app.py
@@ -1,6 +1,6 @@
 from pathlib import Path
 from trame.app import get_server
-from trame.ui.vuetify import SinglePageLayout
+from trame.ui.vuetify3 import SinglePageLayout
 from trame.widgets import simput
 from trame_simput import get_simput_manager
 

diff --git a/examples/06_DynaDropDown/app.py b/examples/06_DynaDropDown/app.py
@@ -1,7 +1,7 @@
 from pathlib import Path
 from trame.app import get_server
-from trame.ui.vuetify import SinglePageLayout
-from trame.widgets import vuetify, simput, html
+from trame.ui.vuetify3 import SinglePageLayout
+from trame.widgets import vuetify3 as vuetify, simput, html
 from trame.decorators import TrameApp
 
 from trame_simput import get_simput_manager
@@ -22,7 +22,7 @@ def available(self):
 class App:
     def __init__(self, server=None):
         global PROXY_FIELDS
-        self.server = get_server(server, client_type="vue2")
+        self.server = get_server(server, client_type="vue3")
         register_property_domain("ListDomain", ListDomain)
 
         # Simput