fix(docs): dedupe and add alias for vue

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

docs/assets/index.css

@@ -13,10 +13,9 @@ html,
 body,
 #root,
 #__nuxt {
-  height: 100vh;
   margin: 0;
+  height: 100%;
   color: #111;
-  overflow: hidden;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;

docs/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="flex items-center py-4 px-8 text-white h-[92px]">
+  <header class="flex items-center py-4 px-8 text-white">
     <div class="flex flex-col">
       <a class="logo text-xl" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow </a>
       <span class="text-xs text-gray-800 mt-2"

docs/nuxt.config.ts

@@ -1,3 +1,4 @@
+import { resolve } from 'path'
 import { defineNuxtConfig } from 'nuxt3'
 
 export default defineNuxtConfig({
@@ -8,5 +9,14 @@ export default defineNuxtConfig({
   router: {
     base: '/',
   },
+  vite: {
+    alias: {
+      vue: resolve('./node_modules/vue'),
+    },
+    resolve: {
+      dedupe: ['vue'],
+      preserveSymlinks: false,
+    },
+  },
   buildModules: ['nuxt-windicss'],
 })

docs/package.json

@@ -1,8 +1,8 @@
 {
   "private": true,
   "scripts": {
-    "dev": "nuxt dev",
-    "build": "nuxt build",
+    "dev": "nuxi dev",
+    "build": "nuxi build",
     "start": "node .output/server/index.mjs"
   },
   "dependencies": {
@@ -11,7 +11,6 @@
     "localforage": "^1.10.0"
   },
   "devDependencies": {
-    "@nuxt/nitro": "^0.10.0",
     "@types/dagre": "^0.7.46",
     "nuxt-windicss": "^2.0.4",
     "nuxt3": "latest"

docs/pages/examples/edge-types.vue

@@ -1,7 +1,4 @@
 <script lang="ts" setup>
-/**
- * Example for checking the different edge types and source and target positions
- */
 import {
   Flow,
   removeElements,

docs/pages/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup></script>
 <template>
-  <div class="flex justify-center items-center h-full">
+  <div class="flex justify-center items-center h-full w-full">
     <h1 class="text-5xl">Vue Flow</h1>
   </div>
 </template>

examples/Basic/Basic.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   MiniMap,
   Controls,
   Background,
@@ -12,7 +13,7 @@ import Flow, {
   isNode,
   removeElements,
   Node,
-} from '~/index'
+} from '@braks/vue-flow'
 
 const onNodeDragStop = ({ node }: { node: Node }) => console.log('drag stop', node)
 const onElementClick = ({ node }: { node: Node }) => console.log('click', node)

examples/CustomConnectionLine/CustomConnectionLine.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import ConnectionLine from './ConnectionLine.vue'
-import Flow, { removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '~/index'
+import { Flow, removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '~/index'
 
 const elements = ref<Elements>([
   {

examples/CustomNode/CustomNode.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import ColorSelectorNode from './ColorSelectorNode.vue'
-import Flow, {
+import {
+  Flow,
   isEdge,
   removeElements,
   addEdge,

examples/DragNDrop/DnD.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Sidebar from './Sidebar.vue'
-import Flow, { addEdge, removeElements, Controls, FlowInstance, Elements, Connection, Edge, ElementId, Node } from '~/index'
+import { Flow, addEdge, removeElements, Controls, FlowInstance, Elements, Connection, Edge, ElementId, Node } from '~/index'
 import './dnd.css'
 
 const flowInstance = ref<FlowInstance>()

examples/EdgeTypes/EdgeTypesExample.vue

@@ -3,7 +3,7 @@
  * Example for checking the different edge types and source and target positions
  */
 import { getElements } from './utils'
-import Flow, { removeElements, addEdge, MiniMap, Controls, Background, FlowInstance, Connection, Edge, Elements } from '~/index'
+import { Flow, removeElements, addEdge, MiniMap, Controls, Background, FlowInstance, Connection, Edge, Elements } from '~/index'
 
 const onLoad = (flowInstance: FlowInstance) => {
   flowInstance.fitView()

examples/EdgeWithButton/EdgeWithButton.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import ButtonEdge from './ButtonEdge.vue'
-import Flow, {
+import {
+  Flow,
   addEdge,
   Background,
   Connection,

examples/Edges/EdgesExample.vue

@@ -2,7 +2,8 @@
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'
-import Flow, {
+import {
+  Flow,
   MiniMap,
   Controls,
   Background,

examples/Empty/EmptyExample.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, {
+import {
+  Flow,
   MiniMap,
   Controls,
   Background,

examples/Hidden/HiddenExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { MiniMap, Controls, Connection, Edge, Elements, addEdge } from '~/index'
+import { Flow, MiniMap, Controls, Connection, Edge, Elements, addEdge } from '~/index'
 
 const initialElements: Elements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },

examples/Interaction/InteractionExample.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   addEdge,
   MiniMap,
   Controls,

examples/Layouting/LayoutingExample.vue

@@ -3,7 +3,8 @@ import dagre from 'dagre'
 import initialElements from './initial-elements'
 import './layouting.css'
 
-import Flow, {
+import {
+  Flow,
   Controls,
   addEdge,
   ConnectionMode,

examples/MultiFlows/Flow.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { Background, Connection, Elements, Edge, removeElements, addEdge } from '~/index'
+import { Flow, Background, Connection, Elements, Edge, removeElements, addEdge } from '~/index'
 const initialElements: Elements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },

examples/NodeTypeChange/NodeTypeChangeExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, { addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '~/index'
+import { Flow, addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '~/index'
 
 const initialElements: Elements = [
   {

examples/NodeTypesIdChange/NodeTypesIdChangeExample.vue

@@ -2,7 +2,7 @@
 import { CSSProperties } from 'vue'
 import NodeA from './NodeA.vue'
 import NodeB from './NodeB.vue'
-import Flow, { Elements, Position, NodeType, Connection, Edge, addEdge } from '~/index'
+import { Flow, Elements, Position, NodeType, Connection, Edge, addEdge } from '~/index'
 
 const initialElements: Elements = [
   {

examples/Overview/Overview.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, {
+import {
+  Flow,
   removeElements,
   addEdge,
   MiniMap,

examples/Provider/ProviderExample.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import Sidebar from './Sidebar.vue'
-import Flow, {
+import {
+  Flow,
   addEdge,
   removeElements,
   Controls,

examples/SaveRestore/SaveRestoreExample.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Controls from './Controls.vue'
-import Flow, { addEdge, Connection, Node, Edge, Elements, FlowInstance, removeElements } from '~/index'
+import { Flow, addEdge, Connection, Node, Edge, Elements, FlowInstance, removeElements } from '~/index'
 
 import './save.css'
 

examples/Stress/StressExample.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
 import { getElements } from './utils'
-import Flow, {
+import {
+  Flow,
   removeElements,
   addEdge,
   MiniMap,

examples/Switch/SwitchExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { removeElements, addEdge, Node, FlowElement, Elements, Connection, Edge } from '~/index'
+import { Flow, removeElements, addEdge, Node, FlowElement, Elements, Connection, Edge } from '~/index'
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
 const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)

examples/Unidirectional/UnidirectionalExample.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import CustomNode from './CustomNode.vue'
-import Flow, {
+import {
+  Flow,
   NodeType,
   addEdge,
   useZoomPanHelper,

examples/UpdatableEdge/UpdatableEdgeExample.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   Controls,
   updateEdge,
   addEdge,

examples/UpdateNode/UpdateNodeExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { Elements } from '~/index'
+import { Flow, Elements } from '~/index'
 
 import './updatenode.css'
 

examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
 import CustomNode from './CustomNode.vue'
-import Flow, {
+import {
+  Flow,
   NodeType,
   addEdge,
   useZoomPanHelper,

examples/Validation/ValidationExample.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
-import Flow, {
+import {
+  Flow,
   addEdge,
   Handle,
   Connection,

examples/ZoomPanHelper/ZoomPanHelperExample.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   removeElements,
   addEdge,
   Background,

package.json

@@ -11,26 +11,24 @@
   "exports": {
     ".": {
       "import": "./dist/vue-flow.es.js",
-      "require": "./dist/vue-flow.umd.js"
+      "require": "./dist/vue-flow.cjs.js"
     },
     "./*": "./*"
   },
-  "main": "./dist/vue-flow.umd.js",
+  "main": "./dist/vue-flow.cjs.js",
   "types": "./dist/index.d.ts",
   "module": "./dist/vue-flow.es.js",
-  "unpkg": "./dist/vue-flow.umd.js",
-  "jsdelivr": "./dist/vue-flow.umd.js",
+  "unpkg": "./dist/vue-flow.iife.js",
+  "jsdelivr": "./dist/vue-flow.iife.js",
   "files": [
     "dist"
   ],
   "scripts": {
-    "dev": "vue-tsc --noEmit && vite",
     "build": "vite build && vue-tsc --declaration --emitDeclarationOnly",
-    "serve": "vite preview",
-    "prepublishOnly": "pnpm build",
+    "prepublishOnly": "yarn build",
     "test": "exit 0;",
     "lint:js": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path .gitignore .",
-    "lint": "pnpm lint:js"
+    "lint": "yarn lint:js"
   },
   "dependencies": {
     "@braks/revue-draggable": "0.2.5",
@@ -40,30 +38,29 @@
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
     "fast-deep-equal": "^3.1.3",
-    "pinia": "^2.0.0-rc.14",
-    "ssr-window": "^4.0.0"
+    "pinia": "^2.0.0-rc.14"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.9.0",
     "@rollup/plugin-replace": "^2.4.2",
     "@vitejs/plugin-vue": "^1.9.3",
+    "@vue/compiler-sfc": "^3.2.21",
     "autoprefixer": "^10.3.7",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.1",
     "np": "^7.5.0",
-    "pnpm": "^6.18.0",
     "postcss-nested": "^5.0.6",
     "prettier": "^2.4.1",
     "typescript": "^4.4.4",
     "unplugin-auto-import": "^0.4.12",
     "vite": "^2.6.10",
     "vite-svg-loader": "^2.2.0",
-    "vue": "^3.2.20",
+    "vue": "^3.2.21",
     "vue-tsc": "^0.28.7"
   },
   "peerDependencies": {
-    "vue": ">=3.0.5"
+    "vue": "^3.2.21"
   },
   "publishConfig": {
     "access": "public",

src/components/Edges/Edge.vue

@@ -118,7 +118,6 @@ const edgePos = computed(() =>
 </script>
 <template>
   <g
-    v-if="!props.edge.isHidden && isVisible(edgePos)"
     :class="[
       'vue-flow__edge',
       `vue-flow__edge-${props.edge.type || 'default'}`,
@@ -137,6 +136,7 @@ const edgePos = computed(() =>
     @mouseleave="onEdgeMouseLeave"
   >
     <slot
+      v-if="!props.edge.isHidden && isVisible(edgePos)"
       v-bind="{
         id: props.edge.id,
         source: props.edge.source,

src/composables/useWindow.ts

@@ -1,6 +1,4 @@
-import { ssrWindow } from 'ssr-window'
-
 export default (): Window & typeof globalThis & { chrome?: any } => {
   if (typeof window !== 'undefined') return window
-  else return ssrWindow as any
+  else return {} as any
 }

src/container/Flow/Flow.vue

@@ -128,7 +128,11 @@ const init = (opts: typeof props) => {
 
 onBeforeUnmount(() => store?.$dispose())
 
-watch(props, (val) => init(val))
+watch(
+  () => props,
+  (val) => init(val),
+  { flush: 'pre', deep: true },
+)
 init(props)
 
 const nodeTypes = controlledComputed(
@@ -180,8 +184,8 @@ const edgeTypes = controlledComputed(
           </template>
         </EdgeRenderer>
       </SelectionPane>
+      <slot v-bind="{ ...props, store, hooks }"></slot>
     </ZoomPane>
-    <slot v-bind="{ ...props, store, hooks }"></slot>
   </div>
 </template>
 <style>

src/container/SelectionPane/SelectionPane.vue

@@ -29,24 +29,28 @@ const onContextMenu = (event: MouseEvent) => hooks.paneContextMenu.trigger(event
 
 const onWheel = (event: WheelEvent) => hooks.paneScroll.trigger(event)
 
-const selectionKeyPresed = useKeyPress(props.selectionKeyCode)
+const selectionKeyPresed = ref(false)
 
-useKeyPress(props.deleteKeyCode, (keyPressed) => {
-  if (keyPressed && store.selectedElements) {
-    const selectedNodes = store.selectedElements.filter(isNode)
-    const connectedEdges = getConnectedEdges(selectedNodes, store.edges)
-    const elementsToRemove = [...store.selectedElements, ...connectedEdges].reduce(
-      (res, item) => res.set(item.id, item),
-      new Map<ElementId, FlowElement>(),
-    )
+onMounted(() => {
+  useKeyPress(props.deleteKeyCode, (keyPressed) => {
+    if (keyPressed && store.selectedElements) {
+      const selectedNodes = store.selectedElements.filter(isNode)
+      const connectedEdges = getConnectedEdges(selectedNodes, store.edges)
+      const elementsToRemove = [...store.selectedElements, ...connectedEdges].reduce(
+        (res, item) => res.set(item.id, item),
+        new Map<ElementId, FlowElement>(),
+      )
 
-    hooks.elementsRemove.trigger(Array.from(elementsToRemove.values()))
-    store.unsetNodesSelection()
-    store.resetSelectedElements()
-  }
+      hooks.elementsRemove.trigger(Array.from(elementsToRemove.values()))
+      store.unsetNodesSelection()
+      store.resetSelectedElements()
+    }
+  })
+
+  useKeyPress(props.multiSelectionKeyCode, (keyPressed) => (store.multiSelectionActive = keyPressed))
+
+  useKeyPress(props.selectionKeyCode, (keyPressed) => (selectionKeyPresed.value = keyPressed))
 })
-
-useKeyPress(props.multiSelectionKeyCode, (keyPressed) => (store.multiSelectionActive = keyPressed))
 </script>
 <template>
   <slot></slot>

src/container/ZoomPane/ZoomPane.vue

@@ -37,7 +37,7 @@ const props = withDefaults(defineProps<ZoomPaneProps>(), {
 const store = useStore()
 const hooks = useHooks()
 
-const zoomPaneEl = templateRef<HTMLDivElement>('zoom-pane', null)
+const zoomPaneEl = templateRef<HTMLDivElement>('zoomPane', null)
 
 const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
   prevTransform.x !== eventTransform.x || prevTransform.y !== eventTransform.y || prevTransform.zoom !== eventTransform.k
@@ -218,7 +218,7 @@ onMounted(() => {
 })
 </script>
 <template>
-  <div ref="zoom-pane" class="vue-flow__renderer vue-flow__zoompane">
+  <div ref="zoomPane" class="vue-flow__renderer vue-flow__zoompane">
     <slot v-bind="{ transform, dimensions: { width, height } }"></slot>
   </div>
 </template>

vite.config.ts

@@ -9,13 +9,15 @@ import pkg from './package.json'
 // https://vitejs.dev/config/
 export default defineConfig({
   resolve: {
-    extensions: ['*', '.ts', '.vue'],
+    dedupe: ['vue'],
+    extensions: ['.ts', '.vue'],
   },
   build: {
-    minify: 'terser',
+    emptyOutDir: true,
     lib: {
+      formats: ['es', 'cjs', 'iife'],
       entry: resolve(__dirname, 'src/index.ts'),
-      name: 'vue-flow',
+      name: 'vueFlow',
     },
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
@@ -45,4 +47,7 @@ export default defineConfig({
       dts: 'src/auto-imports.d.ts',
     }),
   ],
+  optimizeDeps: {
+    include: ['vue', '@vueuse/core'],
+  },
 })

yarn.lock

@@ -854,6 +854,16 @@
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
+"@vue/compiler-core@3.2.21":
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.21.tgz#26566c32b2ad838199d471ef5df620a83846f24e"
+  integrity sha512-NhhiQZNG71KNq1h5pMW/fAXdTF7lJRaSI7LDm2edhHXVz1ROMICo8SreUmQnSf4Fet0UPBVqJ988eF4+936iDQ==
+  dependencies:
+    "@babel/parser" "^7.15.0"
+    "@vue/shared" "3.2.21"
+    estree-walker "^2.0.2"
+    source-map "^0.6.1"
+
 "@vue/compiler-dom@3.2.20", "@vue/compiler-dom@^3.2.20":
   version "3.2.20"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.20.tgz#8e0ef354449c0faf41519b00bfc2045eae01dcb5"
@@ -862,7 +872,31 @@
     "@vue/compiler-core" "3.2.20"
     "@vue/shared" "3.2.20"
 
-"@vue/compiler-sfc@3.2.20", "@vue/compiler-sfc@^3.0.11":
+"@vue/compiler-dom@3.2.21":
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.21.tgz#d6f6c85364ef8888f9c4e9122bfba11e78fb398c"
+  integrity sha512-gsJD3DpYZSYquiA7UIPsMDSlAooYWDvHPq9VRsqzJEk2PZtFvLvHPb4aaMD8Ufd62xzYn32cnnkzsEOJhyGilA==
+  dependencies:
+    "@vue/compiler-core" "3.2.21"
+    "@vue/shared" "3.2.21"
+
+"@vue/compiler-sfc@3.2.21", "@vue/compiler-sfc@^3.2.21":
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.21.tgz#42639ee49e725afb7d8f1d1940e75dc17a56002c"
+  integrity sha512-+yDlUSebKpz/ovxM2vLRRx7w/gVfY767pOfYTgbIhAs+ogvIV2BsIt4fpxlThnlCNChJ+yE0ERUNoROv2kEGEQ==
+  dependencies:
+    "@babel/parser" "^7.15.0"
+    "@vue/compiler-core" "3.2.21"
+    "@vue/compiler-dom" "3.2.21"
+    "@vue/compiler-ssr" "3.2.21"
+    "@vue/ref-transform" "3.2.21"
+    "@vue/shared" "3.2.21"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
+    postcss "^8.1.10"
+    source-map "^0.6.1"
+
+"@vue/compiler-sfc@^3.0.11":
   version "3.2.20"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.20.tgz#2d7668e76f066c566dd7c09c15c9acce4e876e0a"
   integrity sha512-03aZo+6tQKiFLfunHKSPZvdK4Jsn/ftRCyaro8AQIWkuxJbvSosbKK6HTTn+D2c3nPScG155akJoxKENw7rftQ==
@@ -886,12 +920,27 @@
     "@vue/compiler-dom" "3.2.20"
     "@vue/shared" "3.2.20"
 
+"@vue/compiler-ssr@3.2.21":
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.21.tgz#37d124f89e8adef9fd56b85775de4b5310a0436e"
+  integrity sha512-eU+A0iWYy+1zAo2CRIJ0zSVlv1iuGAIbNRCnllSJ31pV1lX3jypJYzGbJlSRAbB7VP6E+tYveVT1Oq8JKewa3g==
+  dependencies:
+    "@vue/compiler-dom" "3.2.21"
+    "@vue/shared" "3.2.21"
+
 "@vue/devtools-api@^6.0.0-beta.19":
   version "6.0.0-beta.19"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.19.tgz#f8e88059daa424515992426a0c7ea5cde07e99bf"
   integrity sha512-ObzQhgkoVeoyKv+e8+tB/jQBL2smtk/NmC9OmFK8UqdDpoOdv/Kf9pyDWL+IFyM7qLD2C75rszJujvGSPSpGlw==
 
-"@vue/reactivity@3.2.20", "@vue/reactivity@^3.2.20":
+"@vue/reactivity@3.2.21":
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.21.tgz#073ad144192ed78a07e151e95a3baa515e4099a2"
+  integrity sha512-7C57zFm/5E3SSTUhVuYj1InDwuJ+GIVQ/z+H43C9sST85gIThGXVhksl1yWTAadf8Yz4T5lSbqi5Ds8U/ueWcw==
+  dependencies:
+    "@vue/shared" "3.2.21"
+
+"@vue/reactivity@^3.2.20":
   version "3.2.20"
   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.20.tgz#81fe1c368e7f20bc0ec1dec1045bbee253582de8"
   integrity sha512-nSmoLojUTk+H8HNTAkrUduB4+yIUBK2HPihJo2uXVSH4Spry6oqN6lFzE5zpLK+F27Sja+UqR9R1+/kIOsHV5w==
@@ -909,36 +958,52 @@
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
-"@vue/runtime-core@3.2.20":
-  version "3.2.20"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.20.tgz#8f63e956a3f88fb772541443c45a7701211012cb"
-  integrity sha512-d1xfUGhZPfiZzAN7SatStD4vRtT8deJSXib2+Cz3x0brjMWKxe32asQc154FF1E2fFgMCHtnfd4A90bQEzV4GQ==
+"@vue/ref-transform@3.2.21":
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/@vue/ref-transform/-/ref-transform-3.2.21.tgz#b0c554c9f640c3f005f77e676066aa0faba90984"
+  integrity sha512-uiEWWBsrGeun9O7dQExYWzXO3rHm/YdtFNXDVqCSoPypzOVxWxdiL+8hHeWzxMB58fVuV2sT80aUtIVyaBVZgQ==
   dependencies:
-    "@vue/reactivity" "3.2.20"
-    "@vue/shared" "3.2.20"
+    "@babel/parser" "^7.15.0"
+    "@vue/compiler-core" "3.2.21"
+    "@vue/shared" "3.2.21"
+    estree-walker "^2.0.2"
+    magic-string "^0.25.7"
 
-"@vue/runtime-dom@3.2.20":
-  version "3.2.20"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.20.tgz#8aa56ae6c30f9cd4a71ca0e9ec3c4bdc67148d15"
-  integrity sha512-4TCvZMLhESWCFHFYgqN4QmMA/onnINAlUovhopjlS8ST27G1A8Z0tyxPzLoXLa+b5JrOpbMPheEMPvdKExTJig==
+"@vue/runtime-core@3.2.21":
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.21.tgz#e12dac8c3893b7aebfc37e32066718d8aa686ac5"
+  integrity sha512-7oOxKaU0D2IunOAMOOHZgJVrHg63xwng8BZx3fbgmakqEIMwHhQcp+5GV1sOg/sWW7R4UhaRDIUCukO2GRVK2Q==
   dependencies:
-    "@vue/runtime-core" "3.2.20"
-    "@vue/shared" "3.2.20"
+    "@vue/reactivity" "3.2.21"
+    "@vue/shared" "3.2.21"
+
+"@vue/runtime-dom@3.2.21":
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.21.tgz#33dd15bc85281e773177a30dc6931c294bd77aa1"
+  integrity sha512-apBdriD6QsI4ywbllY8kjr9/0scGuStDuvLbJULPQkFPtHzntd51bP5PQTQVAEIc9kwnTozmj6x6ZdX/cwo7xA==
+  dependencies:
+    "@vue/runtime-core" "3.2.21"
+    "@vue/shared" "3.2.21"
     csstype "^2.6.8"
 
-"@vue/server-renderer@3.2.20":
-  version "3.2.20"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.20.tgz#705e07ae9425132b2b6227d308a51a13f4d4ec81"
-  integrity sha512-viIbZGep9XabnrRcaxWIi00cOh1x21QYm2upIL5W0zqzTJ54VdTzpI+zi1osNp+VfRQDTHpV2U7H3Kn4ljYJvg==
+"@vue/server-renderer@3.2.21":
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.21.tgz#887d0a44de76f72313cff2686a24c0315231d634"
+  integrity sha512-QBgYqVgI7XCSBCqGa4LduV9vpfQFdZBOodFmq5Txk5W/v1KrJ1LoOh2Q0RHiRgtoK/UR9uyvRVcYqOmwHkZNEg==
   dependencies:
-    "@vue/compiler-ssr" "3.2.20"
-    "@vue/shared" "3.2.20"
+    "@vue/compiler-ssr" "3.2.21"
+    "@vue/shared" "3.2.21"
 
 "@vue/shared@3.2.20", "@vue/shared@^3.2.20":
   version "3.2.20"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.20.tgz#53746961f731a8ea666e3316271e944238dc31db"
   integrity sha512-FbpX+hD5BvXCQerEYO7jtAGHlhAkhTQ4KIV73kmLWNlawWhTiVuQxizgVb0BOkX5oG9cIRZ42EG++d/k/Efp0w==
 
+"@vue/shared@3.2.21":
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.21.tgz#4cd80c0e62cf65a7adab2449e86b6f0cb33a130b"
+  integrity sha512-5EQmIPK6gw4UVYUbM959B0uPsJ58+xoMESCZs3N89XyvJ9e+fX4pqEPrOGV8OroIk3SbEvJcC+eYc8BH9JQrHA==
+
 "@vueuse/core@^5.1.3":
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-5.3.0.tgz#d8c6e939e18089afa224fab6e443fae2bdb57a51"
@@ -4261,11 +4326,6 @@ pluralize@^8.0.0:
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-8.0.0.tgz#1a6fa16a38d12a1901e0320fa017051c539ce3b1"
   integrity sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==
 
-pnpm@^6.18.0:
-  version "6.19.0"
-  resolved "https://registry.yarnpkg.com/pnpm/-/pnpm-6.19.0.tgz#6b34e482068202515bfdbf324e3c9578b9220ac5"
-  integrity sha512-sRSTETIg4RI+5jitvA2a9iDqay7EtSxy3cJP24o0AeJAH2p6LEdtmp7Y5kZosdnxTz00JTHSi3MJg6mYzpJYUw==
-
 postcss-nested@^5.0.6:
   version "5.0.6"
   resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.6.tgz#466343f7fc8d3d46af3e7dba3fcd47d052a945bc"
@@ -4815,11 +4875,6 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
-ssr-window@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-4.0.0.tgz#4ee82fc360c5f88a022f321740bcfec59ada1a61"
-  integrity sha512-qCg6wJNeGNTVcPK2KFNfwtHU1gA3UZDZdxogu+Ys5+Ue5PMOENxUb7sscpAWWo4mWOBkJRCwQ50IlyA7qZ0hxw==
-
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
@@ -5415,16 +5470,16 @@ vue-tsc@^0.28.7:
   dependencies:
     vscode-vue-languageservice "0.28.7"
 
-vue@^3.2.20:
-  version "3.2.20"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.20.tgz#940f8aa8bf3e3be78243ca582bad41fcd45ae3e6"
-  integrity sha512-81JjEP4OGk9oO8+CU0h2nFPGgJBm9mNa3kdCX2k6FuRdrWrC+CNe+tOnuIeTg8EWwQuI+wwdra5Q7vSzp7p4Iw==
+vue@^3.2.21:
+  version "3.2.21"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.21.tgz#55f5665172d95cf97e806b9aad0a375180be23a1"
+  integrity sha512-jpy7ckXdyclfRzqLjL4mtq81AkzQleE54KjZsJg/9OorNVurAxdlU5XpD49GpjKdnftuffKUvx2C5jDOrgc/zg==
   dependencies:
-    "@vue/compiler-dom" "3.2.20"
-    "@vue/compiler-sfc" "3.2.20"
-    "@vue/runtime-dom" "3.2.20"
-    "@vue/server-renderer" "3.2.20"
-    "@vue/shared" "3.2.20"
+    "@vue/compiler-dom" "3.2.21"
+    "@vue/compiler-sfc" "3.2.21"
+    "@vue/runtime-dom" "3.2.21"
+    "@vue/server-renderer" "3.2.21"
+    "@vue/shared" "3.2.21"
 
 webpack-virtual-modules@^0.4.3:
   version "0.4.3"