build: vaadin v22

.changeset/spotty-icons-promise.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-wc-vaadin": minor
+---
+
+Update vaadin components to v22

demos/examples/LanguageMultiSelect/index.ts

@@ -3,15 +3,19 @@ import $rdf from '@zazuko/env/web.js'
 import { MultiEditor, Lazy } from '@hydrofoil/shaperone-core'
 import { vcard, rdfs } from '@tpluscode/rdf-ns-builders'
 import { getLocalizedLabel } from '@rdfjs-elements/lit-helpers'
-import { sort } from '@hydrofoil/shaperone-core/lib/components'
-import { ShaperoneEnvironment } from '@hydrofoil/shaperone-core/env'
+import { sort } from '@hydrofoil/shaperone-core/lib/components.js'
+import { ShaperoneEnvironment } from '@hydrofoil/shaperone-core/env.js'
 
 const editor = $rdf.namedNode('http://example.com/LanguageMultiSelect')
 
 export const component: (theme: 'lumo' | 'material') => Lazy<MultiEditorComponent> = theme => ({
   editor,
   async lazyRender() {
-    await import(/* @vite-ignore */`multiselect-combo-box/theme/${theme}/multiselect-combo-box`)
+    if (theme === 'material') {
+      await import(/* @vite-ignore */'multiselect-combo-box/theme/material/multiselect-combo-box.js')
+    } else {
+      await import(/* @vite-ignore */'multiselect-combo-box/theme/lumo/multiselect-combo-box.js')
+    }
 
     return ({ property }, { update }) => {
       const languages = property.shape.in

demos/examples/package.json

@@ -5,6 +5,7 @@
   "repository": "https://github.com/hypermedia-app/shaperone",
   "author": "Tomasz Pluskiewicz <[email protected]>",
   "license": "MIT",
+  "type": "module",
   "private": true,
   "dependencies": {
     "@tpluscode/rdf-ns-builders": "^4.3.0",
@@ -17,6 +18,6 @@
     "@zazuko/prefixes": "^2.2.0",
     "is-graph-pointer": "^2",
     "lit": "^2.0.0",
-    "multiselect-combo-box": "^2.4.2"
+    "multiselect-combo-box": "^3.0.0-alpha.2"
   }
 }

demos/lit-html/package.json

@@ -32,22 +32,22 @@
     "@tpluscode/rdf-string": "^1.2.0",
     "@types/rdfjs__fetch-lite": "^3.0.10",
     "@shoelace-style/shoelace": "^2.0.0-beta.78",
-    "@vaadin/vaadin-app-layout": "^2.1.0",
-    "@vaadin/vaadin-button": "^2.4.0",
-    "@vaadin/vaadin-checkbox": "^2.5.0",
-    "@vaadin/vaadin-combo-box": "^5.2.0",
-    "@vaadin/vaadin-dialog": "^2.5.0-beta1",
-    "@vaadin/vaadin-item": "^2",
-    "@vaadin/vaadin-select": "^2.4.0",
-    "@vaadin/vaadin-menu-bar": "^1.1.0",
-    "@vaadin/vaadin-split-layout": "^4.2.0",
-    "@vaadin/vaadin-text-field": "^2.6.2",
-    "@vaadin-component-factory/vcf-tooltip": "^1.3.10",
+    "@vaadin/vaadin-app-layout": "^22",
+    "@vaadin/vaadin-button": "^22",
+    "@vaadin/vaadin-checkbox": "^22",
+    "@vaadin/vaadin-combo-box": "^22",
+    "@vaadin/vaadin-dialog": "^22",
+    "@vaadin/vaadin-item": "^22",
+    "@vaadin/vaadin-select": "^22",
+    "@vaadin/vaadin-menu-bar": "^22",
+    "@vaadin/vaadin-split-layout": "^22",
+    "@vaadin/vaadin-text-field": "^22",
+    "@vaadin-component-factory/vcf-tooltip": "^22.0.0",
     "@zazuko/env": "^2.1.0",
     "@zazuko/prefixes": "^2.2.0",
     "alcaeus": "^3.0.0",
     "lit": "^2.0.0",
-    "multiselect-combo-box": "^2.4.2",
+    "multiselect-combo-box": "^3.0.0-alpha.2",
     "nanoid": "^5.0.6"
   },
   "devDependencies": {

demos/lit-html/src/configure.ts

@@ -93,8 +93,8 @@ export const configureRenderer = (() => {
       previousNesting = nesting
 
       if (nesting === 'always one') {
-        const { topmostFocusNodeFormRenderer } = await import('@hydrofoil/shaperone-playground-examples/NestedShapesIndividually/renderer')
-        const nestingComponents = await import('@hydrofoil/shaperone-playground-examples/NestedShapesIndividually/components')
+        const { topmostFocusNodeFormRenderer } = await import('@hydrofoil/shaperone-playground-examples/NestedShapesIndividually/renderer.js')
+        const nestingComponents = await import('@hydrofoil/shaperone-playground-examples/NestedShapesIndividually/components.js')
 
         renderer.setTemplates({
           form: topmostFocusNodeFormRenderer(initialStrategy.form),

demos/lit-html/src/menu/resource.ts

@@ -5,7 +5,7 @@ import { State } from '../state/models/resource.js'
 import { Menu } from '../menu.js'
 
 const resourceMenuItem = (() => {
-  import('@vaadin/vaadin-combo-box/vaadin-combo-box')
+  import('@vaadin/vaadin-combo-box/vaadin-combo-box.js')
 
   const comboBox = document.createElement('vaadin-combo-box')
   comboBox.addEventListener('selected-item-changed', (e: any) => {