workflow: support custom TS version for playground (#8735)

diff --git a/packages/sfc-playground/package.json b/packages/sfc-playground/package.json
index 76e6a014e7d4df1917a2b2646ccd850c8c02022e..04752e391236da893834cc8ec454baf4de203b63 100644 (file)
--- a/packages/sfc-playground/package.json
+++ b/packages/sfc-playground/package.json
@@ -9,10 +9,10 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
-    "vite": "^4.3.9"
+    "vite": "^4.4.2"
   },
   "dependencies": {
-    "@vue/repl": "^2.4.0",
+    "@vue/repl": "^2.5.4",
     "file-saver": "^2.0.5",
     "jszip": "^3.6.0",
     "vue": "workspace:*"

diff --git a/packages/sfc-playground/src/App.vue b/packages/sfc-playground/src/App.vue
index f9b77f47ea24dfb4b7abc0d3d851f32841b17dca..744cfd4d9c0749fc3c0a770da7230edbcb30504e 100644 (file)
--- a/packages/sfc-playground/src/App.vue
+++ b/packages/sfc-playground/src/App.vue
@@ -73,7 +73,7 @@ function toggleSSR() {
   store.setFiles(store.getFiles())
 }
 
-const theme = ref('dark')
+const theme = ref<'dark' | 'light'>('dark')
 function toggleTheme(isDark: boolean) {
   theme.value = isDark ? 'dark' : 'light'
 }

diff --git a/packages/sfc-playground/src/Header.vue b/packages/sfc-playground/src/Header.vue
index d8271b8e528af354c8f73f38b834bda5c963b6ee..e865a76a5fed740dbe9503f3ea477401500c7db8 100644 (file)
--- a/packages/sfc-playground/src/Header.vue
+++ b/packages/sfc-playground/src/Header.vue
@@ -1,44 +1,35 @@
 <script setup lang="ts">
 import { downloadProject } from './download/download'
-import { ref, onMounted } from 'vue'
+import { ref } from 'vue'
 import Sun from './icons/Sun.vue'
 import Moon from './icons/Moon.vue'
 import Share from './icons/Share.vue'
 import Download from './icons/Download.vue'
 import GitHub from './icons/GitHub.vue'
 import type { ReplStore } from '@vue/repl'
+import VersionSelect from './VersionSelect.vue'
 
 const props = defineProps<{
   store: ReplStore
   dev: boolean
   ssr: boolean
 }>()
+const emit = defineEmits(['toggle-theme', 'toggle-ssr', 'toggle-dev'])
 
 const { store } = props
 
 const currentCommit = __COMMIT__
-const activeVersion = ref(`@${currentCommit}`)
-const publishedVersions = ref<string[]>()
-const expanded = ref(false)
-
-async function toggle() {
-  expanded.value = !expanded.value
-  if (!publishedVersions.value) {
-    publishedVersions.value = await fetchVersions()
-  }
-}
+const vueVersion = ref(`@${currentCommit}`)
 
 async function setVueVersion(v: string) {
-  activeVersion.value = `loading...`
+  vueVersion.value = `loading...`
   await store.setVueVersion(v)
-  activeVersion.value = `v${v}`
-  expanded.value = false
+  vueVersion.value = `v${v}`
 }
 
 function resetVueVersion() {
   store.resetVueVersion()
-  activeVersion.value = `@${currentCommit}`
-  expanded.value = false
+  vueVersion.value = `@${currentCommit}`
 }
 
 async function copyLink(e: MouseEvent) {
@@ -51,54 +42,14 @@ async function copyLink(e: MouseEvent) {
   alert('Sharable URL has been copied to clipboard.')
 }
 
-const emit = defineEmits(['toggle-theme', 'toggle-ssr','toggle-dev'])
- function toggleDark() {
+function toggleDark() {
   const cls = document.documentElement.classList
-   cls.toggle('dark')
-   localStorage.setItem(
-     'vue-sfc-playground-prefer-dark',
-     String(cls.contains('dark'))
-  )
-   emit('toggle-theme', cls.contains('dark'))
- }
-
-onMounted(async () => {
-  window.addEventListener('click', () => {
-    expanded.value = false
-  })
-  window.addEventListener('blur', () => {
-    if (document.activeElement?.tagName === 'IFRAME') {
-      expanded.value = false
-    }
-  })
-})
-
-async function fetchVersions(): Promise<string[]> {
-  const res = await fetch(
-    `https://api.github.com/repos/vuejs/core/releases?per_page=100`
+  cls.toggle('dark')
+  localStorage.setItem(
+    'vue-sfc-playground-prefer-dark',
+    String(cls.contains('dark'))
   )
-  const releases: any[] = await res.json()
-  const versions = releases.map(r =>
-    /^v/.test(r.tag_name) ? r.tag_name.slice(1) : r.tag_name
-  )
-  // if the latest version is a pre-release, list all current pre-releases
-  // otherwise filter out pre-releases
-  let isInPreRelease = versions[0].includes('-')
-  const filteredVersions: string[] = []
-  for (const v of versions) {
-    if (v.includes('-')) {
-      if (isInPreRelease) {
-        filteredVersions.push(v)
-      }
-    } else {
-      filteredVersions.push(v)
-      isInPreRelease = false
-    }
-    if (filteredVersions.length >= 30 || v === '3.0.10') {
-      break
-    }
-  }
-  return filteredVersions
+  emit('toggle-theme', cls.contains('dark'))
 }
 </script>
 
@@ -109,28 +60,28 @@ async function fetchVersions(): Promise<string[]> {
       <span>Vue SFC Playground</span>
     </h1>
     <div class="links">
-      <div class="version" @click.stop>
-        <span class="active-version" @click="toggle">
-          Version
-          <span class="number">{{ activeVersion }}</span>
-        </span>
-        <ul class="versions" :class="{ expanded }">
-          <li v-if="!publishedVersions"><a>loading versions...</a></li>
-          <li v-for="version of publishedVersions">
-            <a @click="setVueVersion(version)">v{{ version }}</a>
-          </li>
-          <li>
-            <a @click="resetVueVersion">This Commit ({{ currentCommit }})</a>
-          </li>
-          <li>
-            <a
-              href="https://app.netlify.com/sites/vue-sfc-playground/deploys"
-              target="_blank"
-              >Commits History</a
-            >
-          </li>
-        </ul>
-      </div>
+      <VersionSelect
+        v-model="store.state.typescriptVersion"
+        pkg="typescript"
+        label="TypeScript Version"
+      />
+      <VersionSelect
+        :model-value="vueVersion"
+        @update:model-value="setVueVersion"
+        pkg="vue"
+        label="Vue Version"
+      >
+        <li>
+          <a @click="resetVueVersion">This Commit ({{ currentCommit }})</a>
+        </li>
+        <li>
+          <a
+            href="https://app.netlify.com/sites/vue-sfc-playground/deploys"
+            target="_blank"
+            >Commits History</a
+          >
+        </li>
+      </VersionSelect>
       <button
         title="Toggle development production mode"
         class="toggle-dev"
@@ -147,7 +98,7 @@ async function fetchVersions(): Promise<string[]> {
       >
         <span>{{ ssr ? 'SSR ON' : 'SSR OFF' }}</span>
       </button>
-       <button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
+      <button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
         <Sun class="light" />
         <Moon class="dark" />
       </button>
@@ -235,33 +186,6 @@ h1 img {
   display: flex;
 }
 
-.version {
-  margin-right: 12px;
-  position: relative;
-}
-
-.active-version {
-  cursor: pointer;
-  position: relative;
-  display: inline-flex;
-  place-items: center;
-}
-
-.active-version .number {
-  color: var(--green);
-  margin-left: 4px;
-}
-
-.active-version::after {
-  content: '';
-  width: 0;
-  height: 0;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-  border-top: 6px solid #aaa;
-  margin-left: 8px;
-}
-
 .toggle-dev span,
 .toggle-ssr span {
   font-size: 12px;

diff --git a/packages/sfc-playground/src/VersionSelect.vue b/packages/sfc-playground/src/VersionSelect.vue
new file mode 100644 (file)
index 0000000..2dfbcbc
--- /dev/null
+++ b/packages/sfc-playground/src/VersionSelect.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+const expanded = ref(false)
+const versions = ref<string[]>()
+
+const version = defineModel()
+const props = defineProps<{
+  pkg: string
+  label: string
+}>()
+
+async function toggle() {
+  expanded.value = !expanded.value
+  if (!versions.value) {
+    versions.value = await fetchVersions()
+  }
+}
+
+async function fetchVersions(): Promise<string[]> {
+  const res = await fetch(
+    `https://data.jsdelivr.com/v1/package/npm/${props.pkg}`
+  )
+  const { versions } = (await res.json()) as { versions: string[] }
+
+  if (props.pkg === 'vue') {
+    // if the latest version is a pre-release, list all current pre-releases
+    // otherwise filter out pre-releases
+    let isInPreRelease = versions[0].includes('-')
+    const filteredVersions: string[] = []
+    for (const v of versions) {
+      if (v.includes('-')) {
+        if (isInPreRelease) {
+          filteredVersions.push(v)
+        }
+      } else {
+        filteredVersions.push(v)
+        isInPreRelease = false
+      }
+      if (filteredVersions.length >= 30 || v === '3.0.10') {
+        break
+      }
+    }
+    return filteredVersions
+  } else if (props.pkg === 'typescript') {
+    return versions.filter(v => !v.includes('dev') && !v.includes('insiders'))
+  }
+  return versions
+}
+
+function setVersion(v: string) {
+  version.value = v
+  expanded.value = false
+}
+
+onMounted(() => {
+  window.addEventListener('click', () => {
+    expanded.value = false
+  })
+  window.addEventListener('blur', () => {
+    if (document.activeElement?.tagName === 'IFRAME') {
+      expanded.value = false
+    }
+  })
+})
+</script>
+
+<template>
+  <div class="version" @click.stop>
+    <span class="active-version" @click="toggle">
+      {{ label }}
+      <span class="number">{{ version }}</span>
+    </span>
+
+    <ul class="versions" :class="{ expanded }">
+      <li v-if="!versions"><a>loading versions...</a></li>
+      <li v-for="version of versions">
+        <a @click="setVersion(version)">v{{ version }}</a>
+      </li>
+      <div @click="expanded = false">
+        <slot />
+      </div>
+    </ul>
+  </div>
+</template>
+
+<style>
+.version {
+  margin-right: 12px;
+  position: relative;
+}
+
+.active-version {
+  cursor: pointer;
+  position: relative;
+  display: inline-flex;
+  place-items: center;
+}
+
+.active-version .number {
+  color: var(--green);
+  margin-left: 4px;
+}
+
+.active-version::after {
+  content: '';
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 6px solid #aaa;
+  margin-left: 8px;
+}
+</style>

diff --git a/packages/sfc-playground/vite.config.ts b/packages/sfc-playground/vite.config.ts
index ed76f69dcf9c7698246853b956ff53b6a13c6e9a..8b93d1d31267f2684fd832932d2fe115a631bc4d 100644 (file)
--- a/packages/sfc-playground/vite.config.ts
+++ b/packages/sfc-playground/vite.config.ts
@@ -10,6 +10,7 @@ export default defineConfig({
   plugins: [
     vue({
       script: {
+        defineModel: true,
         fs: {
           fileExists: fs.existsSync,
           readFile: file => fs.readFileSync(file, 'utf-8')

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 793d916f9b99451ebb61c1473847b101f6012054..17029035c3150c595c98a1ffc1ff256c2efb61f2 100644 (file)
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -333,8 +333,8 @@ importers:
   packages/sfc-playground:
     dependencies:
       '@vue/repl':
-        specifier: ^2.4.0
-        version: 2.4.0
+        specifier: ^2.5.4
+        version: 2.5.4
       file-saver:
         specifier: ^2.0.5
         version: 2.0.5
@@ -347,10 +347,10 @@ importers:
     devDependencies:
       '@vitejs/plugin-vue':
         specifier: ^4.2.3
-        version: 4.2.3(vite@4.3.9)(vue@packages+vue)
+        version: 4.2.3(vite@4.4.2)(vue@packages+vue)
       vite:
-        specifier: ^4.3.9
-        version: 4.3.9(@types/node@16.18.38)(terser@5.18.2)
+        specifier: ^4.4.2
+        version: 4.4.2(@types/node@16.18.38)(terser@5.18.2)
 
   packages/shared: {}
 
@@ -627,6 +627,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/android-arm64@0.18.11:
+    resolution: {integrity: sha512-snieiq75Z1z5LJX9cduSAjUr7vEI1OdlzFPMw0HH5YI7qQHDd3qs+WZoMrWYDsfRJSq36lIA6mfZBkvL46KoIw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/android-arm@0.17.19:
     resolution: {integrity: sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==}
     engines: {node: '>=12'}
@@ -636,6 +645,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/android-arm@0.18.11:
+    resolution: {integrity: sha512-q4qlUf5ucwbUJZXF5tEQ8LF7y0Nk4P58hOsGk3ucY0oCwgQqAnqXVbUuahCddVHfrxmpyewRpiTHwVHIETYu7Q==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/android-x64@0.17.19:
     resolution: {integrity: sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==}
     engines: {node: '>=12'}
@@ -645,6 +663,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/android-x64@0.18.11:
+    resolution: {integrity: sha512-iPuoxQEV34+hTF6FT7om+Qwziv1U519lEOvekXO9zaMMlT9+XneAhKL32DW3H7okrCOBQ44BMihE8dclbZtTuw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/darwin-arm64@0.17.19:
     resolution: {integrity: sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==}
     engines: {node: '>=12'}
@@ -654,6 +681,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/darwin-arm64@0.18.11:
+    resolution: {integrity: sha512-Gm0QkI3k402OpfMKyQEEMG0RuW2LQsSmI6OeO4El2ojJMoF5NLYb3qMIjvbG/lbMeLOGiW6ooU8xqc+S0fgz2w==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/darwin-x64@0.17.19:
     resolution: {integrity: sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==}
     engines: {node: '>=12'}
@@ -663,6 +699,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/darwin-x64@0.18.11:
+    resolution: {integrity: sha512-N15Vzy0YNHu6cfyDOjiyfJlRJCB/ngKOAvoBf1qybG3eOq0SL2Lutzz9N7DYUbb7Q23XtHPn6lMDF6uWbGv9Fw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/freebsd-arm64@0.17.19:
     resolution: {integrity: sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==}
     engines: {node: '>=12'}
@@ -672,6 +717,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/freebsd-arm64@0.18.11:
+    resolution: {integrity: sha512-atEyuq6a3omEY5qAh5jIORWk8MzFnCpSTUruBgeyN9jZq1K/QI9uke0ATi3MHu4L8c59CnIi4+1jDKMuqmR71A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/freebsd-x64@0.17.19:
     resolution: {integrity: sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==}
     engines: {node: '>=12'}
@@ -681,6 +735,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/freebsd-x64@0.18.11:
+    resolution: {integrity: sha512-XtuPrEfBj/YYYnAAB7KcorzzpGTvOr/dTtXPGesRfmflqhA4LMF0Gh/n5+a9JBzPuJ+CGk17CA++Hmr1F/gI0Q==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-arm64@0.17.19:
     resolution: {integrity: sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==}
     engines: {node: '>=12'}
@@ -690,6 +753,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-arm64@0.18.11:
+    resolution: {integrity: sha512-c6Vh2WS9VFKxKZ2TvJdA7gdy0n6eSy+yunBvv4aqNCEhSWVor1TU43wNRp2YLO9Vng2G+W94aRz+ILDSwAiYog==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-arm@0.17.19:
     resolution: {integrity: sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==}
     engines: {node: '>=12'}
@@ -699,6 +771,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-arm@0.18.11:
+    resolution: {integrity: sha512-Idipz+Taso/toi2ETugShXjQ3S59b6m62KmLHkJlSq/cBejixmIydqrtM2XTvNCywFl3VC7SreSf6NV0i6sRyg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-ia32@0.17.19:
     resolution: {integrity: sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==}
     engines: {node: '>=12'}
@@ -708,6 +789,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-ia32@0.18.11:
+    resolution: {integrity: sha512-S3hkIF6KUqRh9n1Q0dSyYcWmcVa9Cg+mSoZEfFuzoYXXsk6196qndrM+ZiHNwpZKi3XOXpShZZ+9dfN5ykqjjw==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-loong64@0.17.19:
     resolution: {integrity: sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==}
     engines: {node: '>=12'}
@@ -717,6 +807,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-loong64@0.18.11:
+    resolution: {integrity: sha512-MRESANOoObQINBA+RMZW+Z0TJWpibtE7cPFnahzyQHDCA9X9LOmGh68MVimZlM9J8n5Ia8lU773te6O3ILW8kw==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-mips64el@0.17.19:
     resolution: {integrity: sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==}
     engines: {node: '>=12'}
@@ -726,6 +825,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-mips64el@0.18.11:
+    resolution: {integrity: sha512-qVyPIZrXNMOLYegtD1u8EBccCrBVshxMrn5MkuFc3mEVsw7CCQHaqZ4jm9hbn4gWY95XFnb7i4SsT3eflxZsUg==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-ppc64@0.17.19:
     resolution: {integrity: sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==}
     engines: {node: '>=12'}
@@ -735,6 +843,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-ppc64@0.18.11:
+    resolution: {integrity: sha512-T3yd8vJXfPirZaUOoA9D2ZjxZX4Gr3QuC3GztBJA6PklLotc/7sXTOuuRkhE9W/5JvJP/K9b99ayPNAD+R+4qQ==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-riscv64@0.17.19:
     resolution: {integrity: sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==}
     engines: {node: '>=12'}
@@ -744,6 +861,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-riscv64@0.18.11:
+    resolution: {integrity: sha512-evUoRPWiwuFk++snjH9e2cAjF5VVSTj+Dnf+rkO/Q20tRqv+644279TZlPK8nUGunjPAtQRCj1jQkDAvL6rm2w==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-s390x@0.17.19:
     resolution: {integrity: sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==}
     engines: {node: '>=12'}
@@ -753,6 +879,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-s390x@0.18.11:
+    resolution: {integrity: sha512-/SlRJ15XR6i93gRWquRxYCfhTeC5PdqEapKoLbX63PLCmAkXZHY2uQm2l9bN0oPHBsOw2IswRZctMYS0MijFcg==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-x64@0.17.19:
     resolution: {integrity: sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==}
     engines: {node: '>=12'}
@@ -762,6 +897,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-x64@0.18.11:
+    resolution: {integrity: sha512-xcncej+wF16WEmIwPtCHi0qmx1FweBqgsRtEL1mSHLFR6/mb3GEZfLQnx+pUDfRDEM4DQF8dpXIW7eDOZl1IbA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/netbsd-x64@0.17.19:
     resolution: {integrity: sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==}
     engines: {node: '>=12'}
@@ -771,6 +915,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/netbsd-x64@0.18.11:
+    resolution: {integrity: sha512-aSjMHj/F7BuS1CptSXNg6S3M4F3bLp5wfFPIJM+Km2NfIVfFKhdmfHF9frhiCLIGVzDziggqWll0B+9AUbud/Q==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/openbsd-x64@0.17.19:
     resolution: {integrity: sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==}
     engines: {node: '>=12'}
@@ -780,6 +933,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/openbsd-x64@0.18.11:
+    resolution: {integrity: sha512-tNBq+6XIBZtht0xJGv7IBB5XaSyvYPCm1PxJ33zLQONdZoLVM0bgGqUrXnJyiEguD9LU4AHiu+GCXy/Hm9LsdQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/sunos-x64@0.17.19:
     resolution: {integrity: sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==}
     engines: {node: '>=12'}
@@ -789,6 +951,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/sunos-x64@0.18.11:
+    resolution: {integrity: sha512-kxfbDOrH4dHuAAOhr7D7EqaYf+W45LsAOOhAet99EyuxxQmjbk8M9N4ezHcEiCYPaiW8Dj3K26Z2V17Gt6p3ng==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/win32-arm64@0.17.19:
     resolution: {integrity: sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==}
     engines: {node: '>=12'}
@@ -798,6 +969,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/win32-arm64@0.18.11:
+    resolution: {integrity: sha512-Sh0dDRyk1Xi348idbal7lZyfSkjhJsdFeuC13zqdipsvMetlGiFQNdO+Yfp6f6B4FbyQm7qsk16yaZk25LChzg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/win32-ia32@0.17.19:
     resolution: {integrity: sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==}
     engines: {node: '>=12'}
@@ -807,6 +987,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/win32-ia32@0.18.11:
+    resolution: {integrity: sha512-o9JUIKF1j0rqJTFbIoF4bXj6rvrTZYOrfRcGyL0Vm5uJ/j5CkBD/51tpdxe9lXEDouhRgdr/BYzUrDOvrWwJpg==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/win32-x64@0.17.19:
     resolution: {integrity: sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==}
     engines: {node: '>=12'}
@@ -816,6 +1005,15 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/win32-x64@0.18.11:
+    resolution: {integrity: sha512-rQI4cjLHd2hGsM1LqgDI7oOCYbQ6IBOVsX9ejuRMSze0GqXUG2ekwiKkiBU1pRGSeCqFFHxTrcEydB2Hyoz9CA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@eslint/eslintrc@1.4.1:
     resolution: {integrity: sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1244,14 +1442,14 @@ packages:
       eslint-visitor-keys: 3.3.0
     dev: true
 
-  /@vitejs/plugin-vue@4.2.3(vite@4.3.9)(vue@packages+vue):
+  /@vitejs/plugin-vue@4.2.3(vite@4.4.2)(vue@packages+vue):
     resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.3.9(@types/node@16.18.38)(terser@5.18.2)
+      vite: 4.4.2(@types/node@16.18.38)(terser@5.18.2)
       vue: link:packages/vue
     dev: true
 
@@ -1315,8 +1513,9 @@ packages:
     engines: {node: '>= 0.12.0'}
     dev: true
 
-  /@vue/repl@2.4.0:
-    resolution: {integrity: sha512-vXXEysYTCZdJo3kECwKDTxd6GI3F9RzJ3dkslY6fpdGn7q+aCizLqcWiEnWaeBjbqOh31rMsPPUxhhC3jhaiXQ==}
+  /@vue/repl@2.5.4:
+    resolution: {integrity: sha512-rUcoebQQDG/T0oXkj+QGGuVHtWdvmT76CuPjZKgYMhXQiRkydnxPsW8iBdsZ5hHFuLRukuO83Crh5itByDOe5w==}
+    requiresBuild: true
     dev: false
 
   /@zeit/schemas@2.6.0:
@@ -2386,6 +2585,36 @@ packages:
       '@esbuild/win32-x64': 0.17.19
     dev: true
 
+  /esbuild@0.18.11:
+    resolution: {integrity: sha512-i8u6mQF0JKJUlGR3OdFLKldJQMMs8OqM9Cc3UCi9XXziJ9WERM5bfkHaEAy0YAvPRMgqSW55W7xYn84XtEFTtA==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/android-arm': 0.18.11
+      '@esbuild/android-arm64': 0.18.11
+      '@esbuild/android-x64': 0.18.11
+      '@esbuild/darwin-arm64': 0.18.11
+      '@esbuild/darwin-x64': 0.18.11
+      '@esbuild/freebsd-arm64': 0.18.11
+      '@esbuild/freebsd-x64': 0.18.11
+      '@esbuild/linux-arm': 0.18.11
+      '@esbuild/linux-arm64': 0.18.11
+      '@esbuild/linux-ia32': 0.18.11
+      '@esbuild/linux-loong64': 0.18.11
+      '@esbuild/linux-mips64el': 0.18.11
+      '@esbuild/linux-ppc64': 0.18.11
+      '@esbuild/linux-riscv64': 0.18.11
+      '@esbuild/linux-s390x': 0.18.11
+      '@esbuild/linux-x64': 0.18.11
+      '@esbuild/netbsd-x64': 0.18.11
+      '@esbuild/openbsd-x64': 0.18.11
+      '@esbuild/sunos-x64': 0.18.11
+      '@esbuild/win32-arm64': 0.18.11
+      '@esbuild/win32-ia32': 0.18.11
+      '@esbuild/win32-x64': 0.18.11
+    dev: true
+
   /escalade@3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
     engines: {node: '>=6'}
@@ -4373,8 +4602,8 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
-  /postcss@8.4.24:
-    resolution: {integrity: sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==}
+  /postcss@8.4.25:
+    resolution: {integrity: sha512-7taJ/8t2av0Z+sQEvNzCkpDynl0tX3uJMCODi6nT3PfASC7dYCWV9aQ+uiCf+KBD4SEFcu+GvJdGdwzQ6OSjCw==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
       nanoid: 3.3.6
@@ -4816,8 +5045,8 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /rollup@3.25.1:
-    resolution: {integrity: sha512-tywOR+rwIt5m2ZAWSe5AIJcTat8vGlnPFAv15ycCrw33t6iFsXZ6mzHVFh2psSjxQPmI+xgzMZZizUAukBI4aQ==}
+  /rollup@3.26.2:
+    resolution: {integrity: sha512-6umBIGVz93er97pMgQO08LuH3m6PUb3jlDUUGFsNJB6VgTCUaDFpupf5JfU30529m/UKOgmiX+uY6Sx8cOYpLA==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
     optionalDependencies:
@@ -5585,13 +5814,14 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vite@4.3.9(@types/node@16.18.38)(terser@5.18.2):
-    resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
+  /vite@4.4.2(@types/node@16.18.38)(terser@5.18.2):
+    resolution: {integrity: sha512-zUcsJN+UvdSyHhYa277UHhiJ3iq4hUBwHavOpsNUGsTgjBeoBlK8eDt+iT09pBq0h9/knhG/SPrZiM7cGmg7NA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:
       '@types/node': '>= 14'
       less: '*'
+      lightningcss: ^1.21.0
       sass: '*'
       stylus: '*'
       sugarss: '*'
@@ -5601,6 +5831,8 @@ packages:
         optional: true
       less:
         optional: true
+      lightningcss:
+        optional: true
       sass:
         optional: true
       stylus:
@@ -5611,9 +5843,9 @@ packages:
         optional: true
     dependencies:
       '@types/node': 16.18.38
-      esbuild: 0.17.19
-      postcss: 8.4.24
-      rollup: 3.25.1
+      esbuild: 0.18.11
+      postcss: 8.4.25
+      rollup: 3.26.2
       terser: 5.18.2
     optionalDependencies:
       fsevents: 2.3.2