diff --git a/package-lock.json b/package-lock.json index a0cd8bc..4c439fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1296,23 +1296,6 @@ "node": ">=12" } }, - "node_modules/@esbuild/openbsd-arm64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.0.tgz", - "integrity": "sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "openbsd" - ], - "engines": { - "node": ">=18" - } - }, "node_modules/@esbuild/openbsd-x64": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz", @@ -2789,21 +2772,13 @@ } }, "node_modules/@stencil/vue-output-target": { - "version": "0.9.1", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.9.1.tgz", - "integrity": "sha512-qAuzZXMd2LuQUuDpshZYHMQKBjIessMK62Q8F0nwbGr2uZBS8WRTjjZyHIM9onMBH/zExrcnI/TGQUHtb1IltA==", + "version": "0.8.9", + "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.9.tgz", + "integrity": "sha512-1yuapCWYViLlxGlEaeta2wryq4M5zZxxBa+4rEBp54VwW2W/trlzPv0IJyw6I3Il51rHYm2WmWlBLOGmoMyW9Q==", + "dev": true, "license": "MIT", "peerDependencies": { - "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0", - "vue": "^3.4.38" - }, - "peerDependenciesMeta": { - "@stencil/core": { - "optional": true - }, - "vue": { - "optional": false - } + "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0" } }, "node_modules/@types/babel__core": { @@ -3550,9 +3525,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001689", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001689.tgz", - "integrity": "sha512-CmeR2VBycfa+5/jOfnp/NpWPGd06nf1XYiefUvhXFfZE4GkRc9jv+eGPS4nT558WS/8lYCzV8SlANCIPvbWP1g==", + "version": "1.0.30001690", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz", + "integrity": "sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==", "dev": true, "funding": [ { @@ -4044,9 +4019,9 @@ "license": "MIT" }, "node_modules/electron-to-chromium": { - "version": "1.5.74", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.74.tgz", - "integrity": "sha512-ck3//9RC+6oss/1Bh9tiAVFy5vfSKbRHAFh7Z3/eTRkEqJeWgymloShB17Vg3Z4nmDNp35vAd1BZ6CMW4Wt6Iw==", + "version": "1.5.75", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.75.tgz", + "integrity": "sha512-Lf3++DumRE/QmweGjU+ZcKqQ+3bKkU/qjaKYhIJKEOhgIO9Xs6IiAQFkfFoj+RhgDk4LUeNsLo6plExHqSyu6Q==", "dev": true, "license": "ISC" }, @@ -6780,9 +6755,9 @@ } }, "node_modules/resolve": { - "version": "1.22.9", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.9.tgz", - "integrity": "sha512-QxrmX1DzraFIi9PxdG5VkRfRwIgjwyud+z/iBwfRRrVmHc+P9Q7u2lSSpQ6bjr2gy5lrqIiU9vb6iAeGf2400A==", + "version": "1.22.10", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz", + "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==", "dev": true, "license": "MIT", "dependencies": { @@ -6793,6 +6768,9 @@ "bin": { "resolve": "bin/resolve" }, + "engines": { + "node": ">= 0.4" + }, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -6982,9 +6960,9 @@ } }, "node_modules/sass/node_modules/chokidar": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.2.tgz", - "integrity": "sha512-/b57FK+bblSU+dfewfFe0rT1YjVDfOmeLQwCAuC+vwvgLkXboATqqmy+Ipux6JrF6L5joe5CBnFOw+gLWH6yKg==", + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz", + "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==", "dev": true, "license": "MIT", "dependencies": { @@ -7777,7 +7755,7 @@ "@playwright/test": "^1.49.1", "@stencil/playwright": "^0.2.1", "@stencil/sass": "^3.0.12", - "@stencil/vue-output-target": "^0.9.1", + "@stencil/vue-output-target": "0.8.9", "@types/jest": "^29.5.14", "@types/node": "~22.10.2", "clean-css-cli": "^5.6.3", @@ -7799,8 +7777,7 @@ "version": "0.3.8", "license": "MIT", "dependencies": { - "@poppy-ui/core": "^0.3.8", - "@stencil/vue-output-target": "^0.9.1" + "@poppy-ui/core": "0.3.8" }, "devDependencies": { "@biomejs/biome": "^1.9.4", @@ -7810,531 +7787,144 @@ "rimraf": "^6.0.1", "rollup": "^4.28.1", "typescript": "^5.7.2", - "vite": "^6.0.3", "vue": "3.5.13" } }, - "packages/vue/node_modules/@esbuild/aix-ppc64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.0.tgz", - "integrity": "sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==", - "cpu": [ - "ppc64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "aix" - ], - "engines": { - "node": ">=18" - } - }, - "packages/vue/node_modules/@esbuild/android-arm": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.0.tgz", - "integrity": "sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=18" - } - }, - "packages/vue/node_modules/@esbuild/android-arm64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.0.tgz", - "integrity": "sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=18" - } - }, - "packages/vue/node_modules/@esbuild/android-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.0.tgz", - "integrity": "sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=18" - } - }, - "packages/vue/node_modules/@esbuild/darwin-arm64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.0.tgz", - "integrity": "sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=18" - } - }, - "packages/vue/node_modules/@esbuild/darwin-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.0.tgz", - "integrity": "sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=18" - } - }, - "packages/vue/node_modules/@esbuild/freebsd-arm64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.0.tgz", - "integrity": "sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=18" - } - }, - "packages/vue/node_modules/@esbuild/freebsd-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.0.tgz", - "integrity": "sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=18" - } - }, - "packages/vue/node_modules/@esbuild/linux-arm": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.0.tgz", - "integrity": "sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==", - "cpu": [ - "arm" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "packages/vue/node_modules/@esbuild/linux-arm64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.0.tgz", - "integrity": "sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "packages/vue/node_modules/@esbuild/linux-ia32": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.0.tgz", - "integrity": "sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==", - "cpu": [ - "ia32" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "packages/vue/node_modules/@esbuild/linux-loong64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.0.tgz", - "integrity": "sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==", - "cpu": [ - "loong64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "packages/vue/node_modules/@esbuild/linux-mips64el": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.0.tgz", - "integrity": "sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==", - "cpu": [ - "mips64el" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" - } - }, - "packages/vue/node_modules/@esbuild/linux-ppc64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.0.tgz", - "integrity": "sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==", - "cpu": [ - "ppc64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" + "tests/vue": { + "name": "test-vue", + "version": "0.3.8", + "dependencies": { + "@poppy-ui/vue": "0.3.8", + "vue": "3.5.11", + "vue-router": "^4.4.5" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^5.1.4", + "typescript": "^5.6.2", + "vite": "^5.4.8", + "vue-tsc": "^2.1.6" } }, - "packages/vue/node_modules/@esbuild/linux-riscv64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.0.tgz", - "integrity": "sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==", - "cpu": [ - "riscv64" - ], - "dev": true, + "tests/vue/node_modules/@vue/compiler-core": { + "version": "3.5.11", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.11.tgz", + "integrity": "sha512-PwAdxs7/9Hc3ieBO12tXzmTD+Ln4qhT/56S+8DvrrZ4kLDn4Z/AMUr8tXJD0axiJBS0RKIoNaR0yMuQB9v9Udg==", "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" + "dependencies": { + "@babel/parser": "^7.25.3", + "@vue/shared": "3.5.11", + "entities": "^4.5.0", + "estree-walker": "^2.0.2", + "source-map-js": "^1.2.0" } }, - "packages/vue/node_modules/@esbuild/linux-s390x": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.0.tgz", - "integrity": "sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==", - "cpu": [ - "s390x" - ], - "dev": true, + "tests/vue/node_modules/@vue/compiler-dom": { + "version": "3.5.11", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.11.tgz", + "integrity": "sha512-pyGf8zdbDDRkBrEzf8p7BQlMKNNF5Fk/Cf/fQ6PiUz9at4OaUfyXW0dGJTo2Vl1f5U9jSLCNf0EZJEogLXoeew==", "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" + "dependencies": { + "@vue/compiler-core": "3.5.11", + "@vue/shared": "3.5.11" } }, - "packages/vue/node_modules/@esbuild/linux-x64": { - "version": "0.24.0", - "cpu": [ - "x64" - ], - "dev": true, + "tests/vue/node_modules/@vue/compiler-sfc": { + "version": "3.5.11", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.11.tgz", + "integrity": "sha512-gsbBtT4N9ANXXepprle+X9YLg2htQk1sqH/qGJ/EApl+dgpUBdTv3yP7YlR535uHZY3n6XaR0/bKo0BgwwDniw==", "license": "MIT", - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=18" + "dependencies": { + "@babel/parser": "^7.25.3", + "@vue/compiler-core": "3.5.11", + "@vue/compiler-dom": "3.5.11", + "@vue/compiler-ssr": "3.5.11", + "@vue/shared": "3.5.11", + "estree-walker": "^2.0.2", + "magic-string": "^0.30.11", + "postcss": "^8.4.47", + "source-map-js": "^1.2.0" } }, - "packages/vue/node_modules/@esbuild/netbsd-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.0.tgz", - "integrity": "sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==", - "cpu": [ - "x64" - ], - "dev": true, + "tests/vue/node_modules/@vue/compiler-ssr": { + "version": "3.5.11", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.11.tgz", + "integrity": "sha512-P4+GPjOuC2aFTk1Z4WANvEhyOykcvEd5bIj2KVNGKGfM745LaXGr++5njpdBTzVz5pZifdlR1kpYSJJpIlSePA==", "license": "MIT", - "optional": true, - "os": [ - "netbsd" - ], - "engines": { - "node": ">=18" + "dependencies": { + "@vue/compiler-dom": "3.5.11", + "@vue/shared": "3.5.11" } }, - "packages/vue/node_modules/@esbuild/openbsd-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.0.tgz", - "integrity": "sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==", - "cpu": [ - "x64" - ], - "dev": true, + "tests/vue/node_modules/@vue/reactivity": { + "version": "3.5.11", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.11.tgz", + "integrity": "sha512-Nqo5VZEn8MJWlCce8XoyVqHZbd5P2NH+yuAaFzuNSR96I+y1cnuUiq7xfSG+kyvLSiWmaHTKP1r3OZY4mMD50w==", "license": "MIT", - "optional": true, - "os": [ - "openbsd" - ], - "engines": { - "node": ">=18" + "dependencies": { + "@vue/shared": "3.5.11" } }, - "packages/vue/node_modules/@esbuild/sunos-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.0.tgz", - "integrity": "sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==", - "cpu": [ - "x64" - ], - "dev": true, + "tests/vue/node_modules/@vue/runtime-core": { + "version": "3.5.11", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.11.tgz", + "integrity": "sha512-7PsxFGqwfDhfhh0OcDWBG1DaIQIVOLgkwA5q6MtkPiDFjp5gohVnJEahSktwSFLq7R5PtxDKy6WKURVN1UDbzA==", "license": "MIT", - "optional": true, - "os": [ - "sunos" - ], - "engines": { - "node": ">=18" + "dependencies": { + "@vue/reactivity": "3.5.11", + "@vue/shared": "3.5.11" } }, - "packages/vue/node_modules/@esbuild/win32-arm64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.0.tgz", - "integrity": "sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==", - "cpu": [ - "arm64" - ], - "dev": true, + "tests/vue/node_modules/@vue/runtime-dom": { + "version": "3.5.11", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.11.tgz", + "integrity": "sha512-GNghjecT6IrGf0UhuYmpgaOlN7kxzQBhxWEn08c/SQDxv1yy4IXI1bn81JgEpQ4IXjRxWtPyI8x0/7TF5rPfYQ==", "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=18" + "dependencies": { + "@vue/reactivity": "3.5.11", + "@vue/runtime-core": "3.5.11", + "@vue/shared": "3.5.11", + "csstype": "^3.1.3" } }, - "packages/vue/node_modules/@esbuild/win32-ia32": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.0.tgz", - "integrity": "sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==", - "cpu": [ - "ia32" - ], - "dev": true, + "tests/vue/node_modules/@vue/server-renderer": { + "version": "3.5.11", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.11.tgz", + "integrity": "sha512-cVOwYBxR7Wb1B1FoxYvtjJD8X/9E5nlH4VSkJy2uMA1MzYNdzAAB//l8nrmN9py/4aP+3NjWukf9PZ3TeWULaA==", "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=18" + "dependencies": { + "@vue/compiler-ssr": "3.5.11", + "@vue/shared": "3.5.11" + }, + "peerDependencies": { + "vue": "3.5.11" } }, - "packages/vue/node_modules/@esbuild/win32-x64": { - "version": "0.24.0", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.0.tgz", - "integrity": "sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==", - "cpu": [ - "x64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=18" - } + "tests/vue/node_modules/@vue/shared": { + "version": "3.5.11", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.11.tgz", + "integrity": "sha512-W8GgysJVnFo81FthhzurdRAWP/byq3q2qIw70e0JWblzVhjgOMiC2GyovXrZTFQJnFVryYaKGP3Tc9vYzYm6PQ==", + "license": "MIT" }, - "packages/vue/node_modules/esbuild": { - "version": "0.24.0", - "dev": true, - "hasInstallScript": true, - "license": "MIT", - "bin": { - "esbuild": "bin/esbuild" - }, - "engines": { - "node": ">=18" - }, - "optionalDependencies": { - "@esbuild/aix-ppc64": "0.24.0", - "@esbuild/android-arm": "0.24.0", - "@esbuild/android-arm64": "0.24.0", - "@esbuild/android-x64": "0.24.0", - "@esbuild/darwin-arm64": "0.24.0", - "@esbuild/darwin-x64": "0.24.0", - "@esbuild/freebsd-arm64": "0.24.0", - "@esbuild/freebsd-x64": "0.24.0", - "@esbuild/linux-arm": "0.24.0", - "@esbuild/linux-arm64": "0.24.0", - "@esbuild/linux-ia32": "0.24.0", - "@esbuild/linux-loong64": "0.24.0", - "@esbuild/linux-mips64el": "0.24.0", - "@esbuild/linux-ppc64": "0.24.0", - "@esbuild/linux-riscv64": "0.24.0", - "@esbuild/linux-s390x": "0.24.0", - "@esbuild/linux-x64": "0.24.0", - "@esbuild/netbsd-x64": "0.24.0", - "@esbuild/openbsd-arm64": "0.24.0", - "@esbuild/openbsd-x64": "0.24.0", - "@esbuild/sunos-x64": "0.24.0", - "@esbuild/win32-arm64": "0.24.0", - "@esbuild/win32-ia32": "0.24.0", - "@esbuild/win32-x64": "0.24.0" - } - }, - "packages/vue/node_modules/vite": { - "version": "6.0.3", - "dev": true, + "tests/vue/node_modules/vue": { + "version": "3.5.11", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.11.tgz", + "integrity": "sha512-/8Wurrd9J3lb72FTQS7gRMNQD4nztTtKPmuDuPuhqXmmpD6+skVjAeahNpVzsuky6Sy9gy7wn8UadqPtt9SQIg==", "license": "MIT", "dependencies": { - "esbuild": "^0.24.0", - "postcss": "^8.4.49", - "rollup": "^4.23.0" - }, - "bin": { - "vite": "bin/vite.js" - }, - "engines": { - "node": "^18.0.0 || ^20.0.0 || >=22.0.0" - }, - "funding": { - "url": "https://github.com/vitejs/vite?sponsor=1" - }, - "optionalDependencies": { - "fsevents": "~2.3.3" + "@vue/compiler-dom": "3.5.11", + "@vue/compiler-sfc": "3.5.11", + "@vue/runtime-dom": "3.5.11", + "@vue/server-renderer": "3.5.11", + "@vue/shared": "3.5.11" }, "peerDependencies": { - "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", - "jiti": ">=1.21.0", - "less": "*", - "lightningcss": "^1.21.0", - "sass": "*", - "sass-embedded": "*", - "stylus": "*", - "sugarss": "*", - "terser": "^5.16.0", - "tsx": "^4.8.1", - "yaml": "^2.4.2" + "typescript": "*" }, "peerDependenciesMeta": { - "@types/node": { - "optional": true - }, - "jiti": { - "optional": true - }, - "less": { - "optional": true - }, - "lightningcss": { - "optional": true - }, - "sass": { - "optional": true - }, - "sass-embedded": { - "optional": true - }, - "stylus": { - "optional": true - }, - "sugarss": { - "optional": true - }, - "terser": { - "optional": true - }, - "tsx": { - "optional": true - }, - "yaml": { + "typescript": { "optional": true } } - }, - "tests/vue": { - "name": "test-vue", - "version": "0.3.8", - "dependencies": { - "@poppy-ui/vue": "0.3.7", - "vue": "~3.5.11", - "vue-router": "^4.4.5" - }, - "devDependencies": { - "@vitejs/plugin-vue": "^5.1.4", - "typescript": "^5.6.2", - "vite": "^5.4.8", - "vue-tsc": "^2.1.6" - } - }, - "tests/vue/node_modules/@poppy-ui/vue": { - "version": "0.3.7", - "resolved": "https://registry.npmjs.org/@poppy-ui/vue/-/vue-0.3.7.tgz", - "integrity": "sha512-f7ILln3P05kVGYHc790NEX6gX/pQ8wGgGJd/IkEbPix8AdYgBna3PLhgRUfhP7jnh4H9bdShB5Meib0hS8fsUA==", - "license": "MIT", - "dependencies": { - "@poppy-ui/core": "^0.3.7", - "@stencil/vue-output-target": "^0.9.0" - } } } } diff --git a/packages/core/package.json b/packages/core/package.json index 30d8bdd..da41e2f 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -71,7 +71,7 @@ "@playwright/test": "^1.49.1", "@stencil/playwright": "^0.2.1", "@stencil/sass": "^3.0.12", - "@stencil/vue-output-target": "^0.9.1", + "@stencil/vue-output-target": "0.8.9", "@types/jest": "^29.5.14", "@types/node": "~22.10.2", "clean-css-cli": "^5.6.3", diff --git a/packages/vue/package.json b/packages/vue/package.json index dc4e760..41f9c25 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -44,8 +44,7 @@ "copy:css": "node ./scripts/copy-css.js" }, "dependencies": { - "@poppy-ui/core": "^0.3.8", - "@stencil/vue-output-target": "^0.9.1" + "@poppy-ui/core": "0.3.8" }, "devDependencies": { "@biomejs/biome": "^1.9.4", @@ -55,7 +54,6 @@ "rimraf": "^6.0.1", "rollup": "^4.28.1", "typescript": "^5.7.2", - "vite": "^6.0.3", "vue": "3.5.13" }, "vetur": { diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 591bdb5..cbcc303 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -1,7 +1,7 @@ /* eslint-disable */ /* tslint:disable */ /* auto-generated vue proxies */ -import { defineContainer } from '@stencil/vue-output-target/runtime'; +import { defineContainer } from './vue-component-lib/utils'; import type { JSX } from '@poppy-ui/core/components'; @@ -58,9 +58,6 @@ export const PopAccordionGroup = /*@__PURE__*/ defineContainer('pop-butto 'active', 'popFocus', 'popBlur' -], [ - 'popFocus', - 'popBlur' ]); @@ -124,10 +118,6 @@ export const PopCheckbox = /*@__PURE__*/ defineContainer('pop-drawe 'open', 'popDidPresent', 'popDidDismiss' -], [ - 'popDidPresent', - 'popDidDismiss' ]); @@ -161,9 +148,6 @@ export const PopDropdown = /*@__PURE__*/ defineContainer('pop-d 'showBackdrop', 'present', 'dismiss' -], [ - 'present', - 'dismiss' ]); @@ -173,10 +157,6 @@ export const PopImg = /*@__PURE__*/ defineContainer('pop-img', defin 'popWillLoad', 'popDidLoad', 'popError' -], [ - 'popWillLoad', - 'popDidLoad', - 'popError' ]); @@ -219,11 +199,6 @@ export const PopInput = /*@__PURE__*/ defineContainer('pop 'popChange', 'popFocus', 'popBlur' -], [ - 'popChange', - 'popFocus', - 'popBlur' ]); @@ -292,9 +263,6 @@ export const PopModal = /*@__PURE__*/ defineContainer('pop-modal', 'open', 'present', 'dismiss' -], [ - 'present', - 'dismiss' ]); @@ -315,11 +283,6 @@ export const PopPopover = /*@__PURE__*/ defineContainer('pop-pop 'didPresent', 'willDismiss', 'didDismiss' -], [ - 'willPresent', - 'didPresent', - 'willDismiss', - 'didDismiss' ]); @@ -341,9 +304,6 @@ export const PopRadio = /*@__PURE__*/ defineContainer { + modelValue?: T; +} + +const UPDATE_VALUE_EVENT = 'update:modelValue'; +const MODEL_VALUE = 'modelValue'; +const ROUTER_LINK_VALUE = 'routerLink'; +const NAV_MANAGER = 'navManager'; +const ROUTER_PROP_PREFIX = 'router'; +const ARIA_PROP_PREFIX = 'aria'; +/** + * Starting in Vue 3.1.0, all properties are + * added as keys to the props object, even if + * they are not being used. In order to correctly + * account for both value props and v-model props, + * we need to check if the key exists for Vue <3.1.0 + * and then check if it is not undefined for Vue >= 3.1.0. + * See https://github.com/vuejs/vue-next/issues/3889 + */ +const EMPTY_PROP = Symbol(); +const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP }; + +interface NavManager { + navigate: (options: T) => void; +} + +const getComponentClasses = (classes: unknown) => { + return (classes as string)?.split(' ') || []; +}; + +const getElementClasses = ( + ref: Ref, + componentClasses: Set, + defaultClasses: string[] = [] +) => { + return [...Array.from(ref.value?.classList || []), ...defaultClasses].filter( + (c: string, i, self) => !componentClasses.has(c) && self.indexOf(c) === i + ); +}; + +/** + * Create a callback to define a Vue component wrapper around a Web Component. + * + * @prop name - The component tag name (i.e. `ion-button`) + * @prop componentProps - An array of properties on the + * component. These usually match up with the @Prop definitions + * in each component's TSX file. + * @prop customElement - An option custom element instance to pass + * to customElements.define. Only set if `includeImportCustomElements: true` in your config. + * @prop modelProp - The prop that v-model binds to (i.e. value) + * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange) + */ +export const defineContainer = ( + name: string, + defineCustomElement: any, + componentProps: string[] = [], + modelProp?: string, + modelUpdateEvent?: string +) => { + /** + * Create a Vue component wrapper around a Web Component. + * Note: The `props` here are not all properties on a component. + * They refer to whatever properties are set on an instance of a component. + */ + + if (defineCustomElement !== undefined) { + defineCustomElement(); + } + + const Container = defineComponent>((props, { attrs, slots, emit }) => { + let modelPropValue = props[modelProp]; + const containerRef = ref(); + const classes = new Set(getComponentClasses(attrs.class)); + + /** + * This directive is responsible for updating any reactive + * reference associated with v-model on the component. + * This code must be run inside of the "created" callback. + * Since the following listener callbacks as well as any potential + * event callback defined in the developer's app are set on + * the same element, we need to make sure the following callbacks + * are set first so they fire first. If the developer's callback fires first + * then the reactive reference will not have been updated yet. + */ + const vModelDirective = { + created: (el: HTMLElement) => { + const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent]; + eventsNames.forEach((eventName: string) => { + el.addEventListener(eventName.toLowerCase(), (e: Event) => { + /** + * Only update the v-model binding if the event's target is the element we are + * listening on. For example, Component A could emit ionChange, but it could also + * have a descendant Component B that also emits ionChange. We only want to update + * the v-model for Component A when ionChange originates from that element and not + * when ionChange bubbles up from Component B. + */ + if (e.target.tagName === el.tagName) { + modelPropValue = (e?.target as any)[modelProp]; + emit(UPDATE_VALUE_EVENT, modelPropValue); + } + }); + }); + }, + }; + + const currentInstance = getCurrentInstance(); + const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER]; + const navManager: NavManager | undefined = hasRouter ? inject(NAV_MANAGER) : undefined; + const handleRouterLink = (ev: Event) => { + const { routerLink } = props; + if (routerLink === EMPTY_PROP) return; + + if (navManager !== undefined) { + /** + * This prevents the browser from + * performing a page reload when pressing + * an Ionic component with routerLink. + * The page reload interferes with routing + * and causes ion-back-button to disappear + * since the local history is wiped on reload. + */ + ev.preventDefault(); + + let navigationPayload: any = { event: ev }; + for (const key in props) { + const value = props[key]; + if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) { + navigationPayload[key] = value; + } + } + + navManager.navigate(navigationPayload); + } else { + console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.'); + } + }; + + return () => { + modelPropValue = props[modelProp]; + + getComponentClasses(attrs.class).forEach((value) => { + classes.add(value); + }); + + const oldClick = props.onClick; + const handleClick = (ev: Event) => { + if (oldClick !== undefined) { + oldClick(ev); + } + if (!ev.defaultPrevented) { + handleRouterLink(ev); + } + }; + + let propsToAdd: any = { + ref: containerRef, + class: getElementClasses(containerRef, classes), + onClick: handleClick, + }; + + /** + * We can use Object.entries here + * to avoid the hasOwnProperty check, + * but that would require 2 iterations + * where as this only requires 1. + */ + for (const key in props) { + const value = props[key]; + if ((props.hasOwnProperty(key) && value !== EMPTY_PROP) || key.startsWith(ARIA_PROP_PREFIX)) { + propsToAdd[key] = value; + } + } + + if (modelProp) { + /** + * If form value property was set using v-model + * then we should use that value. + * Otherwise, check to see if form value property + * was set as a static value (i.e. no v-model). + */ + if (props[MODEL_VALUE] !== EMPTY_PROP) { + propsToAdd = { + ...propsToAdd, + [modelProp]: props[MODEL_VALUE], + }; + } else if (modelPropValue !== EMPTY_PROP) { + propsToAdd = { + ...propsToAdd, + [modelProp]: modelPropValue, + }; + } + } + + // If router link is defined, add href to props + // in order to properly render an anchor tag inside + // of components that should become activatable and + // focusable with router link. + if (props[ROUTER_LINK_VALUE] !== EMPTY_PROP) { + propsToAdd = { + ...propsToAdd, + href: props[ROUTER_LINK_VALUE], + }; + } + + /** + * vModelDirective is only needed on components that support v-model. + * As a result, we conditionally call withDirectives with v-model components. + */ + const node = h(name, propsToAdd, slots.default && slots.default()); + return modelProp === undefined ? node : withDirectives(node, [[vModelDirective]]); + }; + }); + + if (typeof Container !== 'function') { + Container.name = name; + + Container.props = { + [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP, + }; + + componentProps.forEach((componentProp) => { + Container.props[componentProp] = DEFAULT_EMPTY_PROP; + }); + + if (modelProp) { + Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP; + Container.emits = [UPDATE_VALUE_EVENT]; + } + } + + return Container; +}; diff --git a/tests/vue/package.json b/tests/vue/package.json index a5306fd..8989b1b 100644 --- a/tests/vue/package.json +++ b/tests/vue/package.json @@ -9,8 +9,8 @@ "preview": "vite preview" }, "dependencies": { - "@poppy-ui/vue": "0.3.7", - "vue": "~3.5.11", + "@poppy-ui/vue": "0.3.8", + "vue": "3.5.11", "vue-router": "^4.4.5" }, "devDependencies": { @@ -18,5 +18,8 @@ "typescript": "^5.6.2", "vite": "^5.4.8", "vue-tsc": "^2.1.6" + }, + "overrides": { + "@poppy-ui/core": "0.3.8" } } diff --git a/tests/vue/src/App.vue b/tests/vue/src/App.vue index fe7eb41..f8e3b21 100644 --- a/tests/vue/src/App.vue +++ b/tests/vue/src/App.vue @@ -1,6 +1,16 @@