From 9150e6a467b5620ee1fc7de502ce476990dc0969 Mon Sep 17 00:00:00 2001
From: xiaohuohumax <59244940+xiaohuohumax@users.noreply.github.com>
Date: Tue, 5 Mar 2024 23:52:15 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=BB=9A=E5=8A=A8=EF=BC=8C?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E4=B8=A4=E7=A7=8D=E6=AD=8C=E8=AF=8D=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/nasty-snakes-matter.md             |   5 +
 examples/vue/package.json                     |   2 +
 examples/vue/src/App.vue                      | 114 +++++------------
 examples/vue/src/component/HandoverLyrics.vue |  37 ++++++
 examples/vue/src/component/RollLyrics.vue     |  78 ++++++++++++
 examples/vue/src/main.ts                      |   3 +-
 examples/vue/src/styles.css                   |   5 -
 examples/vue/src/styles.sass                  |   1 +
 examples/vue/src/util/lyricTag.ts             |  16 +++
 examples/vue/tsconfig.json                    |   3 +
 examples/vue/vite.config.ts                   |   6 +
 pnpm-lock.yaml                                | 119 ++++++++++++++++--
 12 files changed, 291 insertions(+), 98 deletions(-)
 create mode 100644 .changeset/nasty-snakes-matter.md
 create mode 100644 examples/vue/src/component/HandoverLyrics.vue
 create mode 100644 examples/vue/src/component/RollLyrics.vue
 delete mode 100644 examples/vue/src/styles.css
 create mode 100644 examples/vue/src/styles.sass
 create mode 100644 examples/vue/src/util/lyricTag.ts

diff --git a/.changeset/nasty-snakes-matter.md b/.changeset/nasty-snakes-matter.md
new file mode 100644
index 0000000..db437fc
--- /dev/null
+++ b/.changeset/nasty-snakes-matter.md
@@ -0,0 +1,5 @@
+---
+"@lrc/example-vue": patch
+---
+
+添加滚动，切换的简单歌词显示 Demo
diff --git a/examples/vue/package.json b/examples/vue/package.json
index f9f87e6..4c4991e 100644
--- a/examples/vue/package.json
+++ b/examples/vue/package.json
@@ -11,6 +11,8 @@
   "dependencies": {
     "@xiaohuohumax/lrc-parser": "workspace:^",
     "@xiaohuohumax/lrc-util": "workspace:^",
+    "bootstrap": "^5.3.3",
+    "sass": "^1.71.1",
     "vue": "^3.4.19"
   },
   "devDependencies": {
diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue
index 90f6188..f00f40c 100644
--- a/examples/vue/src/App.vue
+++ b/examples/vue/src/App.vue
@@ -1,91 +1,41 @@
 <template>
-  <div class="info">
-    <pre>{{ lrcSource }}</pre>
-    <pre>{{ lrcUtil.getLrc() }}</pre>
-  </div>
-  <div class="controls">
-    <audio ref="audio" :src="musicUrl" controls></audio>
-    <div class="lyrics">
-      <div v-html="lyricsHtml(nowLyric)"></div>
-      <div v-html="lyricsHtml(nextLyric)"></div>
+  <div class="h3 text-center mt-4">LRC歌词解析器简单使用</div>
+  <div class="d-flex fs-6 m-4">
+    <div class="w-25 flex-grow-1">
+      <div class="card p-4 mb-4">
+        <div class="h4">切换</div>
+        <hr>
+        <HandoverLyrics />
+      </div>
+      <div class="card p-4">
+        <div class="h4">滚动</div>
+        <hr>
+        <RollLyrics />
+      </div>
+    </div>
+    <div class="me-4"></div>
+    <div class="w-25 flex-grow-1">
+      <div class="card p-4 mb-4">
+        <div class="h4">LRC数据</div>
+        <hr>
+        <pre style="height:15em;">{{ lrcSource }}</pre>
+      </div>
+      <div class="card p-4">
+        <div class="h4">解析结果</div>
+        <hr>
+        <pre style="height:30em;">{{ lrc }}</pre>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import lrcSource from './assets/lrc/The Myth.lrc?raw';
-import musicUrl from './assets/music/The Myth.mp3';
-
-import { LrcUtil, Lyric } from '@xiaohuohumax/lrc-util';
+import HandoverLyrics from './component/HandoverLyrics.vue';
+import RollLyrics from './component/RollLyrics.vue';
+import lrcSource from '@/assets/lrc/The Myth.lrc?raw';
+import { LrcUtil } from '@xiaohuohumax/lrc-util';
 
 const lrcUtil = new LrcUtil(lrcSource, { fuzzy: true, parserConfig: { lyricAddOffset: true } });
 
-const audio = ref<HTMLAudioElement>(null!);
-
-const nowLyric = ref<Lyric>();
-const nextLyric = ref<Lyric>();
-
-const tagMap = {
-  M: '男', F: '女', D: '合唱'
-};
-
-function lyricsHtml(lyric: Lyric | undefined) {
-  let res = '';
-  if (lyric) {
-    res = `[${lyric.time}]: ${lyric.lyric}`;
-    if (lyric.tag) {
-      res = tagMap[lyric.tag] + res;
-    }
-  }
-  return res;
-}
-
-
-onMounted(() => audio.value.addEventListener('timeupdate', () => {
-  const time = audio.value.currentTime * 1000;
-  lrcUtil.setTime(time);
-  nowLyric.value = lrcUtil.getLyric();
-  nextLyric.value = lrcUtil.getNextLyric();
-}));
-</script>
-
-<style scoped>
-.info {
-  display: flex;
-  margin: 5em;
-  font-size: 1.25em;
-  font-weight: 800;
-}
-
-.info pre {
-  flex: 1 1;
-}
-
-.controls {
-  position: fixed;
-  bottom: 0;
-  width: 100svw;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 1em 10em;
-  background: rgba(0, 0, 0, 0.5);
-  font-size: 1.5em;
-  color: white;
-}
-
-.lyrics {
-  margin-top: 1em;
-  width: 100%;
-}
-
-.lyrics div:first-child {
-  text-align: left;
-}
-
-.lyrics div:last-child {
-  text-align: right;
-}
-</style>
+const lrc = lrcUtil.getLrc();
+</script>
\ No newline at end of file
diff --git a/examples/vue/src/component/HandoverLyrics.vue b/examples/vue/src/component/HandoverLyrics.vue
new file mode 100644
index 0000000..19a826f
--- /dev/null
+++ b/examples/vue/src/component/HandoverLyrics.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="controls text-lg">
+    <audio class="w-100" ref="audio" :src="musicUrl" controls></audio>
+    <div class="lyrics mt-4">
+      <div v-html="lyricsHtml(nowLyric)"></div>
+      <div class="text-end" v-html="lyricsHtml(nextLyric)"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import lrcSource from '@/assets/lrc/The Myth.lrc?raw';
+import musicUrl from '@/assets/music/The Myth.mp3';
+import { lyricsHtml } from '../util/lyricTag';
+
+import { LrcUtil, Lyric } from '@xiaohuohumax/lrc-util';
+
+const lrcUtil = new LrcUtil(lrcSource, { fuzzy: true, parserConfig: { lyricAddOffset: true } });
+
+const audio = ref<HTMLAudioElement>(null!);
+
+const nowLyric = ref<Lyric>();
+const nextLyric = ref<Lyric>();
+
+function timeUpdate() {
+  const time = audio.value.currentTime * 1000;
+  lrcUtil.setTime(time);
+  nowLyric.value = lrcUtil.getLyric();
+  nextLyric.value = lrcUtil.getNextLyric();
+}
+
+onMounted(() => {
+  timeUpdate();
+  audio.value.addEventListener('timeupdate', timeUpdate);
+});
+</script>
\ No newline at end of file
diff --git a/examples/vue/src/component/RollLyrics.vue b/examples/vue/src/component/RollLyrics.vue
new file mode 100644
index 0000000..800a9fe
--- /dev/null
+++ b/examples/vue/src/component/RollLyrics.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="controls">
+    <audio class="w-100" ref="audio" :src="musicUrl" controls></audio>
+    <div ref="lyricsMain" class="card overflow-y-hidden position-relative mt-4" style="height:20em;">
+      <div ref="lyricBody" class="lyric-body w-100 position-absolute text-center fw-blod">
+        <div ref="items" :class="lyric.tag?.toLocaleLowerCase()" :id="lyric.time + ''" class="item mt-2"
+          v-for="lyric in lrc.lyrics.filter(l => l.lyric != '')" :key="lyric.time">
+          {{ lyricsHtml(lyric) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import lrcSource from '@/assets/lrc/The Myth.lrc?raw';
+import musicUrl from '@/assets/music/The Myth.mp3';
+import { lyricsHtml } from '../util/lyricTag';
+
+import { LrcUtil, Lyric } from '@xiaohuohumax/lrc-util';
+
+const lrcUtil = new LrcUtil(lrcSource, { fuzzy: true, parserConfig: { lyricAddOffset: true } });
+
+const audio = ref<HTMLAudioElement>(null!);
+const lyricsMain = ref<HTMLDivElement>(null!);
+const lyricBody = ref<HTMLDivElement>(null!);
+
+const items = ref<HTMLDivElement[]>(null!);
+
+const lrc = lrcUtil.getLrc();
+const nowLyric = ref<Lyric>(null!);
+
+onMounted(() => {
+  const bodyHeight = lyricsMain.value.clientHeight;
+
+  lyricBody.value.style.top = bodyHeight / 2 + 'px';
+
+  watch(() => nowLyric.value, () => {
+    if (nowLyric.value.lyric == '') {
+      return;
+    }
+
+    items.value.forEach(item => item.classList.remove('now'));
+
+    const nowItem = items.value.find(item => item.id == nowLyric.value.time + '');
+
+    if (nowItem) {
+      nowItem?.classList.add('now');
+      lyricBody.value.style.top = (-1 * nowItem.offsetTop + bodyHeight / 2 - nowItem.clientHeight / 2) + 'px';
+    }
+  });
+
+  audio.value.addEventListener('timeupdate', () => {
+    lrcUtil.setTime(audio.value.currentTime * 1000);
+    nowLyric.value = lrcUtil.getLyric();
+  });
+
+});
+</script>
+
+<style scoped>
+.lyric-body {
+  animation: top 1s ease-in-out;
+  transition: all 1s;
+}
+
+.item {
+  transition: all .5s ease-in-out;
+  opacity: .4;
+}
+
+.now {
+  font-size: 1.2em !important;
+  color: red;
+  opacity: 1;
+}
+</style>
\ No newline at end of file
diff --git a/examples/vue/src/main.ts b/examples/vue/src/main.ts
index 27a79bf..d65266d 100644
--- a/examples/vue/src/main.ts
+++ b/examples/vue/src/main.ts
@@ -1,5 +1,6 @@
 import { createApp } from 'vue';
 import App from './App.vue';
-import './styles.css';
+
+import './styles.sass';
 
 createApp(App).mount('#app');
diff --git a/examples/vue/src/styles.css b/examples/vue/src/styles.css
deleted file mode 100644
index 826575d..0000000
--- a/examples/vue/src/styles.css
+++ /dev/null
@@ -1,5 +0,0 @@
-*{
-    padding: 0;
-    margin:  0;
-    box-sizing: border-box;
-}
\ No newline at end of file
diff --git a/examples/vue/src/styles.sass b/examples/vue/src/styles.sass
new file mode 100644
index 0000000..3719926
--- /dev/null
+++ b/examples/vue/src/styles.sass
@@ -0,0 +1 @@
+@import "bootstrap/scss/bootstrap"
diff --git a/examples/vue/src/util/lyricTag.ts b/examples/vue/src/util/lyricTag.ts
new file mode 100644
index 0000000..cc369c5
--- /dev/null
+++ b/examples/vue/src/util/lyricTag.ts
@@ -0,0 +1,16 @@
+import { Lyric } from '@xiaohuohumax/lrc-util';
+
+const tagMap = {
+  M: '男', F: '女', D: '合唱'
+};
+
+export function lyricsHtml(lyric: Lyric | undefined) {
+  let res = '';
+  if (lyric) {
+    res = `[${lyric.time}]: ${lyric.lyric}`;
+    if (lyric.tag) {
+      res = tagMap[lyric.tag] + res;
+    }
+  }
+  return res;
+}
\ No newline at end of file
diff --git a/examples/vue/tsconfig.json b/examples/vue/tsconfig.json
index d1362a4..9dbfe59 100644
--- a/examples/vue/tsconfig.json
+++ b/examples/vue/tsconfig.json
@@ -16,6 +16,9 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "preserve",
+    "types": [
+      "vite/client"
+    ],
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
diff --git a/examples/vue/vite.config.ts b/examples/vue/vite.config.ts
index 6405595..236e402 100644
--- a/examples/vue/vite.config.ts
+++ b/examples/vue/vite.config.ts
@@ -1,7 +1,13 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
+import path from 'node:path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  }
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9cf35fb..5c44d74 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -60,6 +60,12 @@ importers:
       '@xiaohuohumax/lrc-util':
         specifier: workspace:^
         version: link:../../packages/util
+      bootstrap:
+        specifier: ^5.3.3
+        version: 5.3.3(@popperjs/core@2.11.8)
+      sass:
+        specifier: ^1.71.1
+        version: 1.71.1
       vue:
         specifier: ^3.4.19
         version: 3.4.21(typescript@5.3.3)
@@ -72,7 +78,7 @@ importers:
         version: 5.3.3
       vite:
         specifier: ^5.1.4
-        version: 5.1.5(@types/node@20.11.24)
+        version: 5.1.5(sass@1.71.1)
       vue-tsc:
         specifier: ^1.8.27
         version: 1.8.27(typescript@5.3.3)
@@ -885,6 +891,10 @@ packages:
     dev: true
     optional: true
 
+  /@popperjs/core@2.11.8:
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+    dev: false
+
   /@rollup/pluginutils@5.1.0(rollup@4.12.0):
     resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
     engines: {node: '>=14.0.0'}
@@ -1168,7 +1178,7 @@ packages:
       vite: ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 5.1.5(@types/node@20.11.24)
+      vite: 5.1.5(sass@1.71.1)
       vue: 3.4.21(typescript@5.3.3)
     dev: true
 
@@ -1333,6 +1343,13 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
   /argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
     dependencies:
@@ -1403,10 +1420,22 @@ packages:
       is-windows: 1.0.2
     dev: true
 
+  /binary-extensions@2.2.0:
+    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
+    engines: {node: '>=8'}
+
   /boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
     dev: true
 
+  /bootstrap@5.3.3(@popperjs/core@2.11.8):
+    resolution: {integrity: sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==}
+    peerDependencies:
+      '@popperjs/core': ^2.11.8
+    dependencies:
+      '@popperjs/core': 2.11.8
+    dev: false
+
   /brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
     dependencies:
@@ -1425,7 +1454,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       fill-range: 7.0.1
-    dev: true
 
   /breakword@1.0.6:
     resolution: {integrity: sha512-yjxDAYyK/pBvws9H4xKYpLDpYKEH6CzrBPAuXq3x18I+c/2MkVtT3qAr7Oloi6Dss9qNhPVueAAVU1CSeNDIXw==}
@@ -1490,6 +1518,20 @@ packages:
     resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
     dev: true
 
+  /chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.2
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
   /ci-info@3.9.0:
     resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
     engines: {node: '>=8'}
@@ -2050,7 +2092,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       to-regex-range: 5.0.1
-    dev: true
 
   /find-up@4.1.0:
     resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
@@ -2185,7 +2226,6 @@ packages:
     engines: {node: '>= 6'}
     dependencies:
       is-glob: 4.0.3
-    dev: true
 
   /glob-parent@6.0.2:
     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
@@ -2336,6 +2376,9 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
+  /immutable@4.3.5:
+    resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==}
+
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -2392,6 +2435,12 @@ packages:
       has-bigints: 1.0.2
     dev: true
 
+  /is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+    dependencies:
+      binary-extensions: 2.2.0
+
   /is-boolean-object@1.1.2:
     resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
     engines: {node: '>= 0.4'}
@@ -2421,7 +2470,6 @@ packages:
   /is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /is-fullwidth-code-point@3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
@@ -2433,7 +2481,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       is-extglob: 2.1.1
-    dev: true
 
   /is-negative-zero@2.0.3:
     resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
@@ -2450,7 +2497,6 @@ packages:
   /is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
-    dev: true
 
   /is-path-inside@3.0.3:
     resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
@@ -2779,6 +2825,10 @@ packages:
       validate-npm-package-license: 3.0.4
     dev: true
 
+  /normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
   /nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
     dependencies:
@@ -2939,7 +2989,6 @@ packages:
   /picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
-    dev: true
 
   /pify@4.0.1:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
@@ -3042,6 +3091,12 @@ packages:
       strip-bom: 3.0.0
     dev: true
 
+  /readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      picomatch: 2.3.1
+
   /redent@3.0.0:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
     engines: {node: '>=8'}
@@ -3198,6 +3253,15 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: true
 
+  /sass@1.71.1:
+    resolution: {integrity: sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.6.0
+      immutable: 4.3.5
+      source-map-js: 1.0.2
+
   /semver@5.7.2:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
     hasBin: true
@@ -3460,7 +3524,6 @@ packages:
     engines: {node: '>=8.0'}
     dependencies:
       is-number: 7.0.0
-    dev: true
 
   /tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
@@ -3662,6 +3725,42 @@ packages:
       fsevents: 2.3.3
     dev: true
 
+  /vite@5.1.5(sass@1.71.1):
+    resolution: {integrity: sha512-BdN1xh0Of/oQafhU+FvopafUp6WaYenLU/NFoL5WyJL++GxkNfieKzBhM24H3HVsPQrlAqB7iJYTHabzaRed5Q==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.19.12
+      postcss: 8.4.35
+      rollup: 4.12.0
+      sass: 1.71.1
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
   /vue-eslint-parser@9.4.2(eslint@8.57.0):
     resolution: {integrity: sha512-Ry9oiGmCAK91HrKMtCrKFWmSFWvYkpGglCeFAIqDdr9zdXmMMpJOmUJS7WWsW7fX81h6mwHmUZCQQ1E0PkSwYQ==}
     engines: {node: ^14.17.0 || >=16.0.0}