Started migration of frontend to Vue

2025-12-19 22:24:17 +01:00 · 2024-02-08 20:59:50 +01:00
parent 56c097aea3
commit 458726d472
11 changed files with 268 additions and 69 deletions
--- a/package.json
+++ b/package.json
@@ -11,11 +11,13 @@
  "dependencies": {
    "@google/model-viewer": "^3.4.0",
    "three": "^0.160.1",
-    "three-orientation-gizmo": "https://github.com/jrj2211/three-orientation-gizmo"
+    "three-orientation-gizmo": "https://github.com/jrj2211/three-orientation-gizmo",
+    "vue": "^3.4.16"
  },
  "devDependencies": {
    "@parcel/optimizer-data-url": "2.11.0",
    "@parcel/transformer-inline-string": "2.11.0",
+    "@parcel/transformer-vue": "2.11.0",
    "@types/three": "^0.160.0",
    "buffer": "^5.5.0||^6.0.0",
    "parcel": "^2.11.0"
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import ModelViewer from './ModelViewer.vue'
+</script>
+
+<template>
+  <ModelViewer></ModelViewer>
+</template>
+
+<style scoped>
+</style>
+
+<style>
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+    color: #fff;
+  }
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: hidden;
+}
+</style>
--- a/src/ModelViewer.vue
+++ b/src/ModelViewer.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import ModelViewerWrapper from "./ModelViewerWrapper.vue";
+import ModelViewerOverlay from "./ModelViewerOverlay.vue";
+</script>
+
+<template>
+  <ModelViewerWrapper/>
+  <ModelViewerOverlay/>
+</template>
+
+<style scoped>
+</style>
--- a/src/ModelViewerOverlay.vue
+++ b/src/ModelViewerOverlay.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+// TODO: transparent SVG overlay that redirects and grabs some events
+</script>
+
+<template>
+
+</template>
--- a/src/ModelViewerWrapper.vue
+++ b/src/ModelViewerWrapper.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import {settings} from "./settings";
+import {onMounted, ref} from "vue";
+import {ModelViewerElement} from '@google/model-viewer';
+import {OrientationGizmo} from "./orientation";
+import {$scene} from "@google/model-viewer/lib/model-viewer-base";
+import {ModelScene} from "@google/model-viewer/lib/three-components/ModelScene";
+
+let _ = ModelViewerElement  // HACK: Keep the import from being removed by the bundler
+const viewer = ref(null);
+onMounted(() => {
+  // TODO: Custom gizmo component inside Tools window
+  // Gizmo installation
+  let scene: ModelScene = viewer.value[$scene];
+  console.log('Mounted ModelViewerWrapper', viewer, scene);
+  let gizmo = new OrientationGizmo(scene);
+  gizmo.install();
+
+  function updateGizmo() {
+    gizmo.update();
+    requestAnimationFrame(updateGizmo);
+  }
+
+  updateGizmo();
+  console.log('Mounted ModelViewerWrapper');
+});
+</script>
+
+<template>
+  <model-viewer
+      ref="viewer" style="width: 100%; height: 100%" :src="settings.preloadModel" alt="The 3D model(s)" camera-controls
+      camera-orbit="30deg 75deg auto" max-camera-orbit="Infinity 180deg auto" min-camera-orbit="-Infinity 0deg auto"
+      :exposure="settings.exposure" :shadow-intensity="settings.shadowIntensity" interaction-prompt="none"
+      :autoplay="settings.autoplay" :ar="settings.arModes.length > 0" :ar-modes="settings.arModes"
+      :skybox-image="settings.background" :environment-image="settings.background"></model-viewer>
+</template>
--- a/src/app.ts
+++ b/src/app.ts
@@ -1,49 +0,0 @@
-import {ModelViewerElement} from '@google/model-viewer';
-import {$scene} from "@google/model-viewer/lib/model-viewer-base";
-import {OrientationGizmo} from "./orientation";
-import {ModelScene} from "@google/model-viewer/lib/three-components/ModelScene";
-import {settings} from "./settings";
-
-export class App {
-    element: ModelViewerElement
-
-    install() {
-        this.element = new ModelViewerElement();
-        this.element.setAttribute('alt', 'The CAD Viewer is not supported on this browser.');
-        this.element.setAttribute('camera-controls', '');
-        this.element.setAttribute('camera-orbit', '30deg 75deg auto');
-        this.element.setAttribute('max-camera-orbit', 'Infinity 180deg auto');
-        this.element.setAttribute('min-camera-orbit', '-Infinity 0deg auto');
-        this.element.setAttribute('interaction-prompt', 'none'); // Quits selected views from gizmo
-        // this.element.setAttribute('auto-rotate', ''); // Messes with the gizmo (rotates model instead of camera)
-        if (settings.autoplay) this.element.setAttribute('autoplay', '');
-        if (settings.arModes) {
-            this.element.setAttribute('ar', '');
-            this.element.setAttribute('ar-modes', settings.arModes);
-        }
-        if (settings.shadowIntensity) {
-            this.element.setAttribute('shadow-intensity', '1');
-        }
-        if (settings.background) {
-            this.element.setAttribute('skybox-image', settings.background);
-            this.element.setAttribute('environment-image', settings.background);
-        }
-        console.log('ModelViewerElement', this.element)
-        document.body.appendChild(this.element);
-        // Misc installation
-        let scene: ModelScene = this.element[$scene];
-        let gizmo = new OrientationGizmo(scene);
-        gizmo.install();
-
-        function updateGizmo() {
-            gizmo.update();
-            requestAnimationFrame(updateGizmo);
-        }
-
-        updateGizmo();
-    }
-
-    replaceModel(url: string) {
-        this.element.setAttribute('src', url)
-    }
-}
--- a/src/index.css
+++ b/src/index.css
@@ -1,12 +0,0 @@
-html, body, model-viewer {
-    height: 100%;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-}
-
-@media (prefers-color-scheme: dark) {
-    body {
-        background-color: #000;
-    }
-}
--- a/src/index.html
+++ b/src/index.html
@@ -4,9 +4,9 @@
    <meta charset="utf-8">
    <title>Yet Another CAD Viewer</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'/>
-    <link rel="stylesheet" type="text/css" href="./index.css">
    <script type="module" src="./index.ts"></script>
 </head>
 <body>
+<div id="app"></div>
 </body>
 </html>
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,7 +1,16 @@
-import {App} from "./app";
-import {settings} from "./settings";
-const app = new App()
+// @ts-ignore
+globalThis.__VUE_OPTIONS_API__ = process.env.NODE_ENV === "development"
+// @ts-ignore
+globalThis.__VUE_PROD_DEVTOOLS__ = process.env.NODE_ENV === "development"
+// @ts-ignore
+globalThis.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = process.env.NODE_ENV === "development"

-app.install();
+// import {createApp} from 'vue/dist/vue.esm-browser.prod.js'
+// import {createApp} from 'vue/dist/vue.esm-browser.js'
+import {createApp} from 'vue'
+// @ts-ignore
+import App from './App.vue'

-app.replaceModel(settings.preloadModel)
+const app = createApp(App)
+app.config.compilerOptions.isCustomElement = tag => tag === 'model-viewer'
+app.mount('body')
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -8,7 +8,8 @@ export const settings = {
    preloadModel: logo,
    autoplay: true,
    arModes: 'webxr scene-viewer quick-look',
-    shadowIntensity: 1,
+    exposure: 1,
+    shadowIntensity: 0,
    background: skyboxUrl,
 }

--- a/yarn.lock
+++ b/yarn.lock
@@ -24,6 +24,11 @@
    chalk "^2.4.2"
    js-tokens "^4.0.0"

+"@babel/parser@^7.23.9":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.9.tgz#7b903b6149b0f8fa7ad564af646c4c38a77fc44b"
+  integrity sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==
+
 "@google/model-viewer@^3.4.0":
  version "3.4.0"
  resolved "https://registry.yarnpkg.com/@google/model-viewer/-/model-viewer-3.4.0.tgz#dd3fd098b85ae5953a93f8eeef0e62434a0e7cc0"
@@ -32,6 +37,11 @@
    "@monogrid/gainmap-js" "^3.0.1"
    lit "^2.7.2"

+"@jridgewell/sourcemap-codec@^1.4.15":
+  version "1.4.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
+  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+
 "@lezer/common@^1.0.0":
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.2.1.tgz#198b278b7869668e1bebbe687586e12a42731049"
@@ -689,6 +699,20 @@
    posthtml-render "^3.0.0"
    semver "^7.5.2"

+"@parcel/transformer-vue@2.11.0":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-vue/-/transformer-vue-2.11.0.tgz#a3a2009d957d9fa8157667c2c11fe20389389be3"
+  integrity sha512-GbPSj0bMlRD4uELi02syzyEW+EN9zbGcH/mry9o/PvZW/5xYCDQlTrvEq8MXFdsvS5rt18GNhMI+SZdwKCcxDw==
+  dependencies:
+    "@parcel/diagnostic" "2.11.0"
+    "@parcel/plugin" "2.11.0"
+    "@parcel/source-map" "^2.1.1"
+    "@parcel/utils" "2.11.0"
+    "@vue/compiler-sfc" "^3.2.27"
+    consolidate "^0.16.0"
+    nullthrows "^1.1.1"
+    semver "^7.5.2"
+
 "@parcel/types@2.11.0":
  version "2.11.0"
  resolved "https://registry.yarnpkg.com/@parcel/types/-/types-2.11.0.tgz#c3e96a305d7d95ac3861611915c55e250f582484"
@@ -927,6 +951,85 @@
  resolved "https://registry.yarnpkg.com/@types/webxr/-/webxr-0.5.11.tgz#e142a8fc99e939d7349262a7764a173e486e61d9"
  integrity sha512-bo3K4UFBwP1RbMjuMin9cgyThD5YxjIWjQHJT7O7PVU2DB81qop7JnZAXRmrrGPbEsoHcdUmjmQDXI6zfqkVIQ==

+"@vue/compiler-core@3.4.16":
+  version "3.4.16"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.16.tgz#366805bb40d23ec82d4c352b78227a3d58293a30"
+  integrity sha512-HXgyy7gen4FNJS8Hz2q/NNBEdzD3QInhDTWaP2/mS0TlmV9CnjmXip7TZ0ROYiQM4FgXZCCJvh74yDikFkPpkQ==
+  dependencies:
+    "@babel/parser" "^7.23.9"
+    "@vue/shared" "3.4.16"
+    entities "^4.5.0"
+    estree-walker "^2.0.2"
+    source-map-js "^1.0.2"
+
+"@vue/compiler-dom@3.4.16":
+  version "3.4.16"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.16.tgz#f3c0d8062a5cbc3bba9a83c16237483622a2c998"
+  integrity sha512-lvs9ankPzLEuIC5aB72ntLUcwVGmgY7ASkXDRvo9+lUMWOOCqnAmM/64AZPeVAZ4EnjocCE40OUN+ZboNe4ygA==
+  dependencies:
+    "@vue/compiler-core" "3.4.16"
+    "@vue/shared" "3.4.16"
+
+"@vue/compiler-sfc@3.4.16", "@vue/compiler-sfc@^3.2.27":
+  version "3.4.16"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.16.tgz#77d23ecebff67c3bef58f04b6b7a9ba11605e9fa"
+  integrity sha512-zVYC42Q/NmbB4nigGcQeIvsLpBlq6K9wJP5jTFCqfpXWnkodxfLFQHDu2GntZ7yKOgwAjxuvLwrPx+I6LPL2vg==
+  dependencies:
+    "@babel/parser" "^7.23.9"
+    "@vue/compiler-core" "3.4.16"
+    "@vue/compiler-dom" "3.4.16"
+    "@vue/compiler-ssr" "3.4.16"
+    "@vue/shared" "3.4.16"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.6"
+    postcss "^8.4.33"
+    source-map-js "^1.0.2"
+
+"@vue/compiler-ssr@3.4.16":
+  version "3.4.16"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.16.tgz#f1ffcfb6ce2d5d7dc18ed686909489c944657fda"
+  integrity sha512-1kNF+fHdEB+5aTcPZ0hh/gzi9Ezq5IBO4bl/hV4Dg4fub6t12W6VGlsERtvdUaEowL35M3pojv0hOvLaq0FbdQ==
+  dependencies:
+    "@vue/compiler-dom" "3.4.16"
+    "@vue/shared" "3.4.16"
+
+"@vue/reactivity@3.4.16":
+  version "3.4.16"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.4.16.tgz#bc925def789c69c091f9fe89ce3fab46acb31471"
+  integrity sha512-XTWRMBG10PGs4MxDoUdBEhMacS5QBUAlGeb5AmQysTQ16tXxQ0lymgbSTmR2h79v5dJDFuULuLWUbwc0uj6zqQ==
+  dependencies:
+    "@vue/shared" "3.4.16"
+
+"@vue/runtime-core@3.4.16":
+  version "3.4.16"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.4.16.tgz#d9f6ed355055c10704321e60c39d1380993ccc91"
+  integrity sha512-vgS25M79AOY2EsBWxBcy9yAou10x2WHJhGN0FM/Ii8yum0a+KBfg8ehzq/cuDqfOPrtVrDPW+QkH3WNJNakfRw==
+  dependencies:
+    "@vue/reactivity" "3.4.16"
+    "@vue/shared" "3.4.16"
+
+"@vue/runtime-dom@3.4.16":
+  version "3.4.16"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.4.16.tgz#3ca030d0bc90ce7978ab3120c3f3611490ece0e7"
+  integrity sha512-X+knHfhefB8tX0rJG3d14U8p1CpeZ/qZxol9rN8ZAD9UalTInIsKXlBTd/xLC8GwO2aXVXxjaSIiTU5th5wj9Q==
+  dependencies:
+    "@vue/runtime-core" "3.4.16"
+    "@vue/shared" "3.4.16"
+    csstype "^3.1.3"
+
+"@vue/server-renderer@3.4.16":
+  version "3.4.16"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.16.tgz#cd81e732bee7f66feac6b8378194216d64854111"
+  integrity sha512-e0PZDpk/eZgICYb0DTQ+OeBlgt0FYGo+2DEcUkZxw+pDgF1qL0aYaOqmPcSbL5KK0nizvuSd7k5HZOkSwSaC2g==
+  dependencies:
+    "@vue/compiler-ssr" "3.4.16"
+    "@vue/shared" "3.4.16"
+
+"@vue/shared@3.4.16":
+  version "3.4.16"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.16.tgz#003eb5e759adea5aa1d5d51625ab10d7be437b26"
+  integrity sha512-HKCjeaxR+R95dCw1BDaytcHdlzZj9lxj7RlFnxWtcKq670t8oSeMsbPlkzkNc2V6IUzHaMtUxdBcdREAhb+7NA==
+
 abortcontroller-polyfill@^1.1.9:
  version "1.7.5"
  resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.5.tgz#6738495f4e901fbb57b6c0611d0c75f76c485bed"
@@ -968,6 +1071,11 @@ base64-js@^1.3.1:
  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==

+bluebird@^3.7.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
+
 boolbase@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
@@ -1071,6 +1179,13 @@ commander@^7.0.0, commander@^7.2.0:
  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==

+consolidate@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/consolidate/-/consolidate-0.16.0.tgz#a11864768930f2f19431660a65906668f5fbdc16"
+  integrity sha512-Nhl1wzCslqXYTJVDyJCu3ODohy9OfBMB5uD2BiBTzd7w+QY0lBzafkR8y8755yMYHAaMD4NuzbAw03/xzfw+eQ==
+  dependencies:
+    bluebird "^3.7.2"
+
 cosmiconfig@^8.0.0:
  version "8.3.6"
  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-8.3.6.tgz#060a2b871d66dba6c8538ea1118ba1ac16f5fae3"
@@ -1112,6 +1227,11 @@ csso@^4.2.0:
  dependencies:
    css-tree "^1.1.2"

+csstype@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
 detect-libc@^1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
@@ -1182,6 +1302,11 @@ entities@^3.0.1:
  resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
  integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==

+entities@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
 error-ex@^1.3.1:
  version "1.3.2"
  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -1199,6 +1324,11 @@ escape-string-regexp@^1.0.5:
  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
  integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==

+estree-walker@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
+
 fflate@~0.6.10:
  version "0.6.10"
  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.6.10.tgz#5f40f9659205936a2d18abf88b2e7781662b6d43"
@@ -1458,6 +1588,13 @@ lru-cache@^6.0.0:
  dependencies:
    yallist "^4.0.0"

+magic-string@^0.30.6:
+  version "0.30.7"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.7.tgz#0cecd0527d473298679da95a2d7aeb8c64048505"
+  integrity sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+
 mdn-data@2.0.14:
  version "2.0.14"
  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
@@ -1502,6 +1639,11 @@ msgpackr@^1.9.5, msgpackr@^1.9.9:
  optionalDependencies:
    msgpackr-extract "^3.0.2"

+nanoid@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
+
 node-addon-api@^6.1.0:
  version "6.1.0"
  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-6.1.0.tgz#ac8470034e58e67d0c6f1204a18ae6995d9c0d76"
@@ -1603,6 +1745,15 @@ postcss-value-parser@^4.2.0:
  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==

+postcss@^8.4.33:
+  version "8.4.35"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.35.tgz#60997775689ce09011edf083a549cea44aabe2f7"
+  integrity sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 posthtml-parser@^0.10.1:
  version "0.10.2"
  resolved "https://registry.yarnpkg.com/posthtml-parser/-/posthtml-parser-0.10.2.tgz#df364d7b179f2a6bf0466b56be7b98fd4e97c573"
@@ -1672,6 +1823,11 @@ semver@^7.5.2:
  dependencies:
    lru-cache "^6.0.0"

+source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
 source-map@^0.6.1:
  version "0.6.1"
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
@@ -1786,6 +1942,17 @@ utility-types@^3.10.0:
  resolved "https://registry.yarnpkg.com/utility-types/-/utility-types-3.11.0.tgz#607c40edb4f258915e901ea7995607fdf319424c"
  integrity sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==

+vue@^3.4.16:
+  version "3.4.16"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.16.tgz#2ba9dcfe0fc1bd7bdcc02b983e4bee029a51b4be"
+  integrity sha512-l5/KcZRp3GbsFXQGeCL9ll1JfRU285K/7l8mZM+dEO+CnE1j26MvfBKJi17iCRRwstl+Jz7KSLlzj9L79fB6WA==
+  dependencies:
+    "@vue/compiler-dom" "3.4.16"
+    "@vue/compiler-sfc" "3.4.16"
+    "@vue/runtime-dom" "3.4.16"
+    "@vue/server-renderer" "3.4.16"
+    "@vue/shared" "3.4.16"
+
 weak-lru-cache@^1.2.2:
  version "1.2.2"
  resolved "https://registry.yarnpkg.com/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz#fdbb6741f36bae9540d12f480ce8254060dccd19"