feat: Vuetify3 support

.bumpversion.cfg

@@ -21,4 +21,4 @@ values =
 
 [bumpversion:file:docs/conf.py]
 
-[bumpversion:file:pyproject.toml]
+[bumpversion:file:js/src/VuetifyWidget.js]

.github/workflows/test.yml

@@ -9,34 +9,42 @@ on:
   pull_request:
   workflow_dispatch:
 
+permissions:
+  contents: read
+  id-token: write
+
 jobs:
   lint:
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-python@v5
+      - uses: actions/checkout@v5
+      - uses: actions/setup-python@v6
         with:
           python-version: "3.10"
-      - uses: pre-commit/action@v3.0.1
+      - name: Install pre-commit
+        run: python -m pip install pre-commit
+      - uses: actions/cache@v5
+        with:
+          path: ~/.cache/pre-commit
+          key: pre-commit-3|${{ env.pythonLocation }}|${{ hashFiles('.pre-commit-config.yaml') }}
+      - name: Run pre-commit
+        run: pre-commit run --show-diff-on-failure --color=always --all-files
 
   build:
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-python@v5
+      - uses: actions/checkout@v5
+      - uses: actions/setup-python@v6
         with:
           python-version: "3.10"
-      # https://github.com/webpack/webpack/issues/14532
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v5
         with:
-          node-version: 16
-      - name: install build
-        run: python -m pip install build
-
+          node-version: "24"
       - name: Install dependencies
         run: |
           python -m pip install --upgrade pip
-          pip install "reacton[generate]" ipyvue
+          pip install "reacton[generate]" "ipyvue>=3.0.0" build
+
       - name: build wheel
         run: python -m build
 
@@ -45,125 +53,111 @@ 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)
+        run: (cd js && npm pack --ignore-scripts)
       - name: Upload build artifacts
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v6
         with:
           name: ipyvuetify-dist-${{ github.run_number }}
           path: |
             ./dist
             ./js/*.tgz
 
       - name: Upload components
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v6
         with:
           name: ipyvuetify-components-${{ github.run_number }}
           path: |
             ./ipyvuetify/components.py
 
   test:
     needs: [lint, build]
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-22.04
     strategy:
       fail-fast: false
       matrix:
-        python-version: ["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@v4
-      - uses: actions/setup-python@v5
+      - uses: actions/checkout@v5
+      - uses: actions/setup-python@v6
         with:
           python-version: ${{ matrix.python-version }}
-      - uses: actions/download-artifact@v4
+      - uses: actions/download-artifact@v7
         with:
           name: ipyvuetify-dist-${{ github.run_number }}
       - name: Install ipyvuetify
-        run: python -m pip install "$(find dist -name *.whl)"
+        run: |
+          python -m pip install "$(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-24.04
+    runs-on: ubuntu-22.04
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-python@v5
+      - uses: actions/checkout@v5
+      - uses: actions/setup-python@v6
         with:
           python-version: "3.10"
-      - uses: actions/download-artifact@v4
+      - uses: actions/download-artifact@v7
         with:
           name: ipyvuetify-dist-${{ github.run_number }}
       - name: Install ipyvuetify
-        run: python -m pip install "$(find dist -name *.whl)[test]"
+        run: python -m pip install "$(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@v4
+        uses: actions/upload-artifact@v6
         with:
           name: ipyvuetify-test-results
           path: test-results
 
   release-dry-run:
     needs: [test, ui-test]
-    if: github.event.pull_request.head.repo.full_name == 'widgetti/ipyvuetify'
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-22.04
     steps:
-      - uses: actions/download-artifact@v4
+      - uses: actions/download-artifact@v7
         with:
           name: ipyvuetify-dist-${{ github.run_number }}
 
       - name: Install node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
-          node-version: 14
+          node-version: "24"
           registry-url: "https://registry.npmjs.org"
-
-      - name: Install Python
-        uses: actions/setup-python@v5
-        with:
-          python-version: 3.8
-      - name: Install dependencies
-        run: |
-          python -m pip install --upgrade pip
-          pip install twine
-
-      - name: Publish the Python package
-        env:
-          TWINE_USERNAME: __token__
-          TWINE_PASSWORD: ${{ secrets.TEST_PYPI_API_TOKEN }}
-        run: twine upload --skip-existing --repository testpypi dist/*
-
+          package-manager-cache: false
+      #      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
+          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, ui-test]
-    runs-on: ubuntu-24.04
+    needs: [release-dry-run]
+    runs-on: ubuntu-22.04
     steps:
-      - uses: actions/download-artifact@v4
+      - uses: actions/download-artifact@v7
         with:
           name: ipyvuetify-dist-${{ github.run_number }}
 
       - name: Install node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
-          node-version: 14
+          node-version: "24"
           registry-url: "https://registry.npmjs.org"
+          package-manager-cache: false
 
       - name: Install Python
-        uses: actions/setup-python@v5
+        uses: actions/setup-python@v6
         with:
           python-version: 3.8
 
@@ -185,5 +179,4 @@ jobs:
           if [[ $PRE_RELEASE == "true" ]]; then export TAG="next"; else export TAG="latest"; fi
           npm publish --tag ${TAG} --access public *.tgz
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
           PRE_RELEASE: ${{ github.event.release.prerelease }}

.gitignore

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

.pre-commit-config.yaml

@@ -4,6 +4,7 @@ repos:
     hooks:
       - id: black
         stages: [commit]
+        exclude: ^ipyvuetify/components\.py$
   - repo: "https://github.com/commitizen-tools/commitizen"
     rev: "v2.18.0"
     hooks:

.readthedocs.yaml

@@ -6,10 +6,16 @@ version: 2
 
 # build with latest available ubuntu version
 build:
-  os: ubuntu-20.04
+  os: ubuntu-22.04
   tools:
     python: "3.10"
-    nodejs: "16"
+    nodejs: "20"
+  jobs:
+    pre_install:
+      - cd js && npm ci --ignore-scripts
+      - cd js && npm run build:docs
+      - mkdir -p prefix/share/jupyter/nbextensions/jupyter-vuetify
+      - touch prefix/share/jupyter/nbextensions/jupyter-vuetify/index.js
 
 # Build documentation in the docs/ directory with Sphinx
 sphinx:

README.md

@@ -8,7 +8,7 @@
 [![Black badge](https://img.shields.io/badge/code%20style-black-000000.svg)](https://github.com/psf/black)
 [![conventional commit](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
 
-Jupyter widgets based on [vuetify UI components](https://v2.vuetifyjs.com/) which implement Google's
+Jupyter widgets based on [vuetify UI components](https://v3.vuetifyjs.com/) which implement Google's
 [Material Design Spec](https://material.io/) with the [Vue.js framework](https://vuejs.org/).
 
 A small selection of widgets:
@@ -43,16 +43,16 @@ https://ipyvuetify.readthedocs.io/
 
 For examples see the [example notebook](examples/Examples.ipynb).
 
-The [Vuetify documentation](https://v2.vuetifyjs.com/components/buttons#buttons) can be used to find all available
+The [Vuetify 3 documentation](https://v3.vuetifyjs.com/en/components/buttons/) can be used to find all available
 components and attributes (in the left side bar or use the search field). Ipyvuetify tries to stay close to the Vue.js
 and Vuetify template syntax, but there are some differences:
 
 | Description                                                             | Vuetify                                 | ipyvuetify                              |
 | ----------------------------------------------------------------------- | --------------------------------------- | --------------------------------------- |
-| Component names are in CamelCase and the v- prefix is stripped          | `<v-list-tile .../>`                    | `ListTile(...)`                         |
+| Component names are in CamelCase and the v- prefix is stripped          | `<v-list-item .../>`                    | `ListItem(...)`                         |
 | Child components and text are defined in the children traitlet          | `<v-btn>text <v-icon .../></v-btn>`     | `Btn(children=['text', Icon(...)])`     |
-| Flag attributes require a boolean value                                 | `<v-btn round ...`                      | `Btn(round=True ...`                    |
-| Attributes are snake_case                                               | `<v-menu offset-y ..`                   | `Menu(offset_y=True ...`                |
+| Flag attributes require a boolean value                                 | `<v-btn rounded ...>`                   | `Btn(rounded=True, ...)`                |
+| Attributes are snake_case                                               | `<v-select append-icon="mdi-menu" ...>` | `Select(append_icon='mdi-menu', ...)`   |
 | The v_model attribute (value in ipywidgets) contains the value directly | `<v-slider v-model="some_property" ...` | `Slider(v_model=25...`                  |
 | Event listeners are defined with on_event                               | `<v-btn @click='someMethod()' ...`      | `button.on_event('click', some_method)` |
 |                                                                         |                                         | `def some_method(widget, event, data):` |
@@ -61,26 +61,26 @@ and Vuetify template syntax, but there are some differences:
 
 ### Advanced usage
 
-#### .sync
+#### v-model arguments
 
-The .sync property modifier functionality can be achieved by using an event named:  
-`update:[propertyNameInCamelCase]`.
+Vue 3 uses `v-model` arguments for two-way bindings on component properties. The same behavior can be achieved in
+ipyvuetify by listening for an event named `update:[propertyNameInCamelCase]`.
 
 ##### Vuetify:
 
 ```HTML
-<v-navigation-drawer :mini-variant.sync=...
+<v-navigation-drawer v-model:rail="someProperty" ...>
 ```
 
 ##### ipyvuetify:
 
 ```python
-drawer = v.NavigationDrawer(mini_variant=True, ...)
+drawer = v.NavigationDrawer(rail=True, ...)
 
-def update_mini(widget, event, data):
-    drawer.mini_variant = data`
+def update_rail(widget, event, data):
+    drawer.rail = data
 
-drawer.on_event('update:miniVariant', update_mini)
+drawer.on_event('update:rail', update_rail)
 ```
 
 ### (scoped) slots
@@ -89,8 +89,8 @@ drawer.on_event('update:miniVariant', update_mini)
 
 ```HTML
 <v-menu>
-  <template slot:activator="{ on }">
-    <v-btn v-on="on">...</v-btn>
+  <template v-slot:activator="{ props }">
+    <v-btn v-bind="props">...</v-btn>
   </template>
   <v-list>
     ...
@@ -104,13 +104,13 @@ drawer.on_event('update:miniVariant', update_mini)
 Menu(v_slots=[{
     'name': 'activator',
     'variable': 'x',
-    'children': Btn(v_on='x.on', children=[...])
+    'children': Btn(v_on='x.props', children=[...])
 }], children=[
     List(...)
 ])
 ```
 
-For non scoped slots `'scope': 'x'` and `v_on` can be omitted.
+For non-scoped slots, `variable` and `v_on` can be omitted.
 
 ### Icons
 

docs/_static/jupyter-vuetify-embed-amd.js

@@ -0,0 +1,15 @@
+const localVuetify = new URL("_static/jupyter-vuetify/index", document.baseURI)
+  .href;
+
+require.config({
+  paths: {
+    "jupyter-vue":
+      "https://cdn.jsdelivr.net/npm/jupyter-vue@3.0.0-alpha.5/dist/index",
+    "jupyter-vuetify": localVuetify,
+  },
+});
+
+const script = document.createElement("script");
+script.src =
+  "https://cdn.jsdelivr.net/npm/@jupyter-widgets/html-manager@^1.0.1/dist/embed-amd.js";
+document.head.appendChild(script);