feat: Vuetify3 support

.bumpversion.cfg

@@ -20,3 +20,5 @@ values =
 [bumpversion:file:js/package.json]
 
 [bumpversion:file:docs/conf.py]
+
+[bumpversion:file:js/src/VuetifyWidget.js]

.github/workflows/test.yml

@@ -7,33 +7,28 @@ on:
 
 jobs:
   lint:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-python@v4
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v5
         with:
           python-version: "3.10"
-      - uses: pre-commit/action@v3.0.0
+      - uses: pre-commit/action@v3.0.1
 
   build:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-python@v4
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v5
         with:
           python-version: "3.10"
-      # https://github.com/webpack/webpack/issues/14532
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16.x
-
-      - name: install build
-        run: python -m pip install build
-
+          node-version: 18.x
       - name: Install dependencies
         run: |
           python -m pip install --upgrade pip
-          pip install "reacton[generate]" ipyvue
+          pip install "reacton[generate]" ipyvue "jupyterlab<4"  build
 
       - name: build wheel
         run: python -m build
@@ -43,83 +38,113 @@ jobs:
           cp ipyvuetify/components.py ipyvuetify/components-previous.py
           python -m ipyvuetify.components
           diff ipyvuetify/components.py ipyvuetify/components-previous.py
-
+      - name: Package js
+        run: (cd js && npm pack)
       - name: Upload build artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: ipyvuetify-dist-${{ github.run_number }}
           path: |
             ./dist
             ./js/*.tgz
 
       - name: Upload components
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: ipyvuetify-components-${{ github.run_number }}
           path: |
             ./ipyvuetify/components.py
 
   test:
     needs: [lint, build]
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     strategy:
       fail-fast: false
       matrix:
-        python-version: ["3.6", "3.7", "3.8", "3.9", "3.10", "3.11"]
+        python-version: ["3.7", "3.8", "3.9", "3.10", "3.11", "3.12", "3.13"]
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-python@v4
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v5
         with:
           python-version: ${{ matrix.python-version }}
-      - uses: actions/download-artifact@v3
+      - uses: actions/download-artifact@v4
         with:
           name: ipyvuetify-dist-${{ github.run_number }}
       - name: Install ipyvuetify
-        run: python -m pip install "$(find dist -name *.whl)"
+        run: |
+          pip install jupyter_core jupyter-packaging "jupyterlab<4"
+          python -m pip install https://github.com/widgetti/ipyvue/archive/refs/heads/vue3.zip "$(find dist -name *.whl)"
       - name: test import
         run: (mkdir test-install; cd test-install; python -c "from ipyvuetify import Btn")
 
   ui-test:
     needs: [lint, build]
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-python@v4
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v5
         with:
           python-version: "3.10"
-      - uses: actions/download-artifact@v3
+      - uses: actions/download-artifact@v4
         with:
           name: ipyvuetify-dist-${{ github.run_number }}
       - name: Install ipyvuetify
-        run: python -m pip install "$(find dist -name *.whl)[test]"
+        run: |
+          pip install jupyter_core jupyter-packaging "jupyterlab<4"
+          python -m pip install https://github.com/widgetti/ipyvue/archive/refs/heads/vue3.zip "$(find dist -name *.whl)[test]"
       - name: Install chromium
         run: playwright install chromium
       - name: Run ui-tests
-        run: pytest tests/ui/ --video=retain-on-failure --solara-update-snapshots-ci -s
+        run: pytest tests/ui/ --video=retain-on-failure -s
       - name: Upload Test artifacts
         if: always()
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: ipyvuetify-test-results
           path: test-results
 
+  release-dry-run:
+    needs: [test]
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/download-artifact@v4
+        with:
+          name: ipyvuetify-dist-${{ github.run_number }}
+
+      - name: Install node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18.x"
+          registry-url: "https://registry.npmjs.org"
+      #      No --dry-run available for twine
+      #      - name: Publish the Python package
+      - name: Publish the NPM package
+        run: |
+          cd js
+          echo $PRE_RELEASE
+          if [[ $PRE_RELEASE == "true" ]]; then export TAG="next"; else export TAG="latest"; fi
+          npm publish --dry-run --tag ${TAG} --access public *.tgz
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          PRE_RELEASE: ${{ github.event.release.prerelease }}
+
   release:
     if: startsWith(github.event.ref, 'refs/tags/v')
-    needs: [test]
-    runs-on: ubuntu-20.04
+    needs: [release-dry-run]
+    runs-on: ubuntu-22.04
     steps:
-      - uses: actions/download-artifact@v3
+      - uses: actions/download-artifact@v4
         with:
           name: ipyvuetify-dist-${{ github.run_number }}
 
       - name: Install node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: "14.x"
+          node-version: "18.x"
           registry-url: "https://registry.npmjs.org"
 
       - name: Install Python
-        uses: actions/setup-python@v2
+        uses: actions/setup-python@v5
         with:
           python-version: 3.8
 

.gitignore

@@ -10,7 +10,7 @@ dist/
 build/
 
 # generated code
-generate_source/build
+generate_source/vuetify
 ipyvuetify/generated
 js/src/generated
 

docs/conf.py

@@ -11,7 +11,7 @@
 project = "ipyvuetify"
 copyright = f"2019-{datetime.now().year}, Mario Buikhuizen"
 author = "Mario Buikhuizen"
-release = "1.8.10"
+release = "3.0.0.dev0"
 
 # -- General configuration ---------------------------------------------------
 

examples/Examples template.ipynb

@@ -23,26 +23,27 @@
     "    items = List(['red', 'green', 'purple']).tag(sync=True)\n",
     "    button_text = Unicode('menu').tag(sync=True)\n",
     "    template = Unicode('''\n",
+    "    <template>\n",
     "        <v-layout>\n",
-    "            <v-menu offset-y>\n",
-    "                <template v-slot:activator=\"{ on }\">\n",
-    "                    <v-btn\n",
-    "                            :color=\"color\"\n",
-    "                            class=\"white--text\"\n",
-    "                            v-on=\"on\">\n",
-    "                        {{ button_text }}\n",
-    "                    </v-btn>\n",
-    "                </template>\n",
-    "                <v-list>\n",
-    "                    <v-list-item\n",
+    "            <v-btn\n",
+    "                :color=\"color\"\n",
+    "                class=\"white--text\"\n",
+    "            >\n",
+    "                {{ button_text }}\n",
+    "                <v-menu activator=\"parent\" offset-y>\n",
+    "                    <v-list>\n",
+    "                        <v-list-item\n",
     "                            v-for=\"(item, index) in items\"\n",
     "                            :key=\"index\"\n",
-    "                            @click=\"menu_click(index)\">\n",
-    "                        <v-list-item-title>{{ item }}</v-list-item-title>\n",
-    "                    </v-list-item>\n",
-    "                </v-list>\n",
-    "            </v-menu>\n",
-    "        </v-layout>''').tag(sync=True)\n",
+    "                            @click=\"menu_click(index)\"\n",
+    "                        >\n",
+    "                            <v-list-item-title>{{ item }}</v-list-item-title>\n",
+    "                        </v-list-item>\n",
+    "                    </v-list>\n",
+    "                </v-menu>\n",
+    "            </v-btn>\n",
+    "        </v-layout>\n",
+    "    </template>''').tag(sync=True)\n",
     "    \n",
     "    \n",
     "    def vue_menu_click(self, data):\n",
@@ -69,10 +70,12 @@
     "    \n",
     "    items = Any(['a', 'b']).tag(sync=True)\n",
     "    template = Unicode('''\n",
+    "        <template>\n",
     "            <v-layout column>\n",
     "              <myselect/>\n",
     "              <v-select :items=\"items\"/>\n",
     "            </v-layout>\n",
+    "        </template>\n",
     "''').tag(sync=True)\n",
     "    \n",
     "    \n",
@@ -161,8 +164,8 @@
     "        data = data.reset_index()\n",
     "        self.index_col = data.columns[0]\n",
     "        headers = [{\n",
-    "              \"text\": col,\n",
-    "              \"value\": col\n",
+    "              \"title\": col,\n",
+    "              \"key\": col\n",
     "            } for col in data.columns]\n",
     "        headers[0].update({'align': 'left', 'sortable': True})\n",
     "        self.headers = headers\n",