add radix vue, improve ui

7 months ago · f83246e88a
11 changed files with 301 additions and 198 deletions
--- a/src/app/components/ui/UserMenu.vue
+++ b/src/app/components/ui/UserMenu.vue
@ -1,80 +1,70 @@
 <template>
-  <button
-    class="flex items-center pe-1 font-medium text-sm text-gray-400 rounded-full hover:text-red-800 dark:hover:text-red-800 md:me-0 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:text-neutral-400"
-    type="button"
-    @click.prevent="toggleMenu"
-  >
-    <IconsAvatar class="w-8 h-8 me-2 rounded-full" />
-    {{ authStore.userData?.name }}
-    <svg
-      class="w-2.5 h-2.5 ms-3"
-      aria-hidden="true"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 10 6"
-    >
-      <path
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="m1 1 4 4 4-4"
-      />
-    </svg>
-  </button>
-
-  <!-- Dropdown menu -->
-  <div
-    v-show="menuOpen"
-    class="z-10 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-neutral-700 dark:divide-neutral-800"
-  >
-    <div class="px-4 py-3 text-sm text-gray-900 dark:text-white">
-      <div class="truncate">{{ authStore.userData?.name }}</div>
-      <div class="truncate">@{{ authStore.userData?.username }}</div>
-    </div>
-    <ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
-      <li>
-        <NuxtLink
-          to="/"
-          class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-          @click="closeMenu"
-        >
-          Clients
-        </NuxtLink>
-      </li>
-      <li v-if="authStore.userData?.role === 'ADMIN'">
-        <NuxtLink
-          to="/admin"
-          class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-          @click="closeMenu"
-        >
-          Admin Panel
-        </NuxtLink>
-      </li>
-    </ul>
-    <div class="py-2">
+  <DropdownMenuRoot v-model:open="toggleState">
+    <DropdownMenuTrigger>
      <button
-        class="flex items-center gap-2 w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-        @click.prevent="logout"
+        class="flex items-center pe-1 font-medium text-sm text-gray-400 rounded-full hover:text-red-800 dark:hover:text-red-800 md:me-0 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:text-neutral-400"
+        type="button"
      >
-        <IconsLogout class="h-5" />
-        {{ $t('logout') }}
+        <AvatarRoot
+          class="inline-flex h-8 w-8 select-none items-center justify-center overflow-hidden rounded-full align-middle mr-2"
+        >
+          <AvatarFallback
+            class="text-grass11 leading-1 flex h-full w-full items-center justify-center bg-white text-[15px] font-medium"
+            :delay-ms="600"
+          >
+            {{ fallbackName }}
+          </AvatarFallback>
+        </AvatarRoot>
+        {{ authStore.userData?.name }}
      </button>
-    </div>
-  </div>
+    </DropdownMenuTrigger>
+
+    <DropdownMenuPortal>
+      <DropdownMenuContent
+        :side-offset="5"
+        class="z-10 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-neutral-700 dark:divide-neutral-800 text-gray-700 dark:text-gray-200"
+      >
+        <DropdownMenuItem>
+          <div class="truncate">{{ authStore.userData?.name }}</div>
+          <div class="truncate">@{{ authStore.userData?.username }}</div>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <NuxtLink
+            to="/"
+            class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+          >
+            Clients
+          </NuxtLink>
+        </DropdownMenuItem>
+        <DropdownMenuItem v-if="authStore.userData?.role === 'ADMIN'">
+          <NuxtLink
+            to="/admin"
+            class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+          >
+            Admin Panel
+          </NuxtLink>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <button
+            class="flex items-center gap-2 w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+            @click.prevent="logout"
+          >
+            <IconsLogout class="h-5" />
+            {{ $t('logout') }}
+          </button>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
 </template>

 <script setup lang="ts">
 const authStore = useAuthStore();
-const menuOpen = ref(false);
+const toggleState = ref(false);

-function toggleMenu() {
-  menuOpen.value = !menuOpen.value;
-}
-
-function closeMenu() {
-  menuOpen.value = false;
-}
+watchEffect(() => {
+  console.log(toggleState);
+});

 async function logout() {
  try {
@ -87,4 +77,12 @@ async function logout() {
    }
  }
 }
+
+const fallbackName = computed(() => {
+  return authStore.userData?.name
+    .split(' ')
+    .map((word) => word.charAt(0).toUpperCase())
+    .slice(0, 2)
+    .join('');
+});
 </script>
--- a/src/app/layouts/Header.vue
+++ b/src/app/layouts/Header.vue
@ -7,16 +7,18 @@
          : 'flex flex-col-reverse xxs:flex-row flex-auto items-center gap-3'
      "
    >
-      <h1
-        v-if="isLoginPage"
-        class="text-4xl dark:text-neutral-200 font-medium flex-grow self-start mb-4"
-      >
-        <img
-          src="/logo.png"
-          width="32"
-          class="inline align-middle dark:bg mr-2"
-        /><span class="align-middle">WireGuard</span>
-      </h1>
+      <NuxtLink to="/" class="flex-grow self-start mb-4">
+        <h1
+          v-if="isLoginPage"
+          class="text-4xl dark:text-neutral-200 font-medium"
+        >
+          <img
+            src="/logo.png"
+            width="32"
+            class="inline align-middle dark:bg mr-2"
+          /><span class="align-middle">WireGuard</span>
+        </h1>
+      </NuxtLink>
      <div class="flex items-center grow-0 gap-3 self-end xxs:self-center">
        <!-- Dark / light theme -->
        <button
--- a/src/app/pages/admin.vue
+++ b/src/app/pages/admin.vue
@ -1,26 +1,28 @@
 <template>
-  <div class="min-h-screen">
+  <div>
    <div class="container mx-auto p-4">
      <div class="flex">
-        <!-- Sidebar -->
        <div class="w-64 bg-white dark:bg-neutral-700 rounded-lg p-4 mr-4">
-          <h2 class="text-xl font-bold dark:text-neutral-200 mb-4">
-            Admin Panel
-          </h2>
-          <ul class="space-y-2">
-            <li
+          <NuxtLink to="/admin">
+            <h2 class="text-xl font-bold dark:text-neutral-200 mb-4">
+              Admin Panel
+            </h2>
+          </NuxtLink>
+          <div class="space-y-2 flex flex-col">
+            <NuxtLink
              v-for="(item, index) in menuItems"
              :key="index"
-              :class="{ 'bg-gray-700': activeMenuItem?.id === item.id }"
-              class="font-medium dark:text-neutral-200 p-2 rounded cursor-pointer hover:bg-red-800 transition-colors duration-200"
-              @click="router.push(`/admin/${item.id}`)"
+              :to="`/admin/${item.id}`"
            >
-              {{ item.name }}
-            </li>
-          </ul>
+              <BaseButton
+                class="font-medium dark:text-neutral-200 p-2 rounded cursor-pointer hover:bg-red-800 transition-colors duration-200 w-full"
+              >
+                {{ item.name }}
+              </BaseButton>
+            </NuxtLink>
+          </div>
        </div>

-        <!-- Main Content -->
        <div
          class="flex-1 bg-white dark:text-neutral-200 dark:bg-neutral-700 rounded-lg p-6"
        >
@ -36,12 +38,11 @@
 const authStore = useAuthStore();
 authStore.update();

-const router = useRouter();
 const route = useRoute();

 const menuItems = [
+  { id: 'features', name: 'Features' },
  { id: 'user', name: 'User' },
-  { id: 'clients', name: 'Clients' },
  { id: 'server', name: 'Server' },
 ];

--- a/src/app/pages/admin/clients.vue
+++ b/src/app/pages/admin/clients.vue
@ -1,34 +0,0 @@
-<template>
-  <div class="space-y-6">
-    <div class="flex items-center space-x-4">
-      <img src="/logo.png" alt="User Avatar" class="w-20 h-20 rounded-full" />
-      <div>
-        <h3 class="text-xl font-semibold">John Doe</h3>
-        <p class="text-gray-400">john.doe@example.com</p>
-      </div>
-    </div>
-    <div class="space-y-4">
-      <div>
-        <label class="block text-sm font-medium mb-1">Username</label>
-        <input
-          v-model="username"
-          type="text"
-          class="w-full bg-gray-800 rounded p-2 text-white"
-        />
-      </div>
-      <div>
-        <label class="block text-sm font-medium mb-1">Email</label>
-        <input
-          v-model="email"
-          type="email"
-          class="w-full bg-gray-800 rounded p-2 text-white"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const username = ref();
-const email = ref();
-</script>
--- a/src/app/pages/admin/features.vue
+++ b/src/app/pages/admin/features.vue
@ -0,0 +1,63 @@
+<template>
+  <div class="flex flex-col">
+    <div v-for="feature in featuresData" :key="feature.name" class="space-y-2">
+      <div class="flex items-center justify-between">
+        <div>
+          <h3 class="text-lg font-medium text-gray-900 dark:text-neutral-200">
+            {{ feature.name }}
+          </h3>
+          <p class="text-sm text-gray-500 dark:text-neutral-300">
+            {{ feature.description }}
+          </p>
+        </div>
+        <SwitchRoot
+          :checked="feature.enabled"
+          class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-800"
+          :class="feature.enabled ? 'bg-red-800' : 'bg-gray-200'"
+          @update:checked="toggleFeature(feature)"
+        >
+          <SwitchThumb
+            class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
+            :class="feature.enabled ? 'translate-x-6' : 'translate-x-1'"
+          />
+        </SwitchRoot>
+      </div>
+    </div>
+    <BaseButton class="self-end">Save</BaseButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+const globalStore = useGlobalStore();
+
+const featuresData = ref([
+  {
+    name: 'Traffic Stats',
+    description: 'Show more detailed Statistics about Client Traffic',
+    enabled: globalStore.features.trafficStats.enabled,
+  },
+  {
+    name: 'Sort Clients',
+    description: 'Be able to sort Clients by Name',
+    enabled: globalStore.features.sortClients.enabled,
+  },
+  {
+    name: 'One Time Links',
+    description: 'Be able to generate One Time Link to download Config',
+    enabled: globalStore.features.oneTimeLinks.enabled,
+  },
+  {
+    name: 'Client Expiration',
+    description: 'Be able to set Date when Client will be disabled',
+    enabled: globalStore.features.clientExpiration.enabled,
+  },
+]);
+
+function toggleFeature(feature: (typeof featuresData)['value'][number]) {
+  const feat = featuresData.value.find((v) => v.name === feature.name);
+  if (!feat) {
+    return;
+  }
+  feat.enabled = !feat.enabled;
+}
+</script>
--- a/src/app/pages/admin/index.vue
+++ b/src/app/pages/admin/index.vue
@ -1,5 +1,10 @@
 <template>
-  <div class="space-y-6">This is a test</div>
+  <div>
+    This is the Admin Panel. Your are running wg-easy
+    {{ globalStore.currentRelease }}
+  </div>
 </template>

-<script setup lang="ts"></script>
+<script setup lang="ts">
+const globalStore = useGlobalStore();
+</script>
--- a/src/app/pages/admin/server.vue
+++ b/src/app/pages/admin/server.vue
@ -1,34 +0,0 @@
-<template>
-  <div class="space-y-6">
-    <div class="flex items-center space-x-4">
-      <img src="/logo.png" alt="User Avatar" class="w-20 h-20 rounded-full" />
-      <div>
-        <h3 class="text-xl font-semibold">John Doe</h3>
-        <p class="text-gray-400">john.doe@example.com</p>
-      </div>
-    </div>
-    <div class="space-y-4">
-      <div>
-        <label class="block text-sm font-medium mb-1">Username</label>
-        <input
-          v-model="username"
-          type="text"
-          class="w-full bg-gray-800 rounded p-2 text-white"
-        />
-      </div>
-      <div>
-        <label class="block text-sm font-medium mb-1">Email</label>
-        <input
-          v-model="email"
-          type="email"
-          class="w-full bg-gray-800 rounded p-2 text-white"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const username = ref();
-const email = ref();
-</script>
--- a/src/app/pages/admin/user.vue
+++ b/src/app/pages/admin/user.vue
@ -1,34 +0,0 @@
-<template>
-  <div class="space-y-6">
-    <div class="flex items-center space-x-4">
-      <img src="/logo.png" alt="User Avatar" class="w-20 h-20 rounded-full" />
-      <div>
-        <h3 class="text-xl font-semibold">John Doe</h3>
-        <p class="text-gray-400">john.doe@example.com</p>
-      </div>
-    </div>
-    <div class="space-y-4">
-      <div>
-        <label class="block text-sm font-medium mb-1">Username</label>
-        <input
-          v-model="username"
-          type="text"
-          class="w-full bg-gray-800 rounded p-2 text-white"
-        />
-      </div>
-      <div>
-        <label class="block text-sm font-medium mb-1">Email</label>
-        <input
-          v-model="email"
-          type="email"
-          class="w-full bg-gray-800 rounded p-2 text-white"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const username = ref();
-const email = ref();
-</script>
--- a/src/nuxt.config.ts
+++ b/src/nuxt.config.ts
@ -10,6 +10,7 @@ export default defineNuxtConfig({
    '@nuxtjs/tailwindcss',
    '@pinia/nuxt',
    '@eschricht/nuxt-color-mode',
+    'radix-vue/nuxt',
  ],
  colorMode: {
    preference: 'system',
--- a/src/package.json
+++ b/src/package.json
@ -34,6 +34,7 @@
    "nuxt": "^3.13.0",
    "pinia": "^2.2.2",
    "qrcode": "^1.5.4",
+    "radix-vue": "^1.9.5",
    "semver": "^7.6.3",
    "tailwindcss": "^3.4.10",
    "timeago.js": "^4.0.2",
--- a/src/pnpm-lock.yaml
+++ b/src/pnpm-lock.yaml
@ -62,6 +62,9 @@ importers:
      qrcode:
        specifier: ^1.5.4
        version: 1.5.4
+      radix-vue:
+        specifier: ^1.9.5
+        version: 1.9.5([email protected]([email protected]))
      semver:
        specifier: ^7.6.3
        version: 7.6.3
@ -751,6 +754,18 @@ packages:
    resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
    engines: {node: '>=14'}

+  '@floating-ui/[email protected]':
+    resolution: {integrity: sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==}
+
+  '@floating-ui/[email protected]':
+    resolution: {integrity: sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==}
+
+  '@floating-ui/[email protected]':
+    resolution: {integrity: sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==}
+
+  '@floating-ui/[email protected]':
+    resolution: {integrity: sha512-ammH7T3vyCx7pmm9OF19Wc42zrGnUw0QvLoidgypWsCLJMtGXEwY7paYIHO+K+oLC3mbWpzIHzeTVienYenlNg==}
+
  '@humanwhocodes/[email protected]':
    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
    engines: {node: '>=12.22'}
@ -759,6 +774,12 @@ packages:
    resolution: {integrity: sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==}
    engines: {node: '>=18.18'}

+  '@internationalized/[email protected]':
+    resolution: {integrity: sha512-H+CfYvOZ0LTJeeLOqm19E3uj/4YjrmOFtBufDHPfvtI80hFAMqtrp7oCACpe4Cil5l8S0Qu/9dYfZc/5lY8WQQ==}
+
+  '@internationalized/[email protected]':
+    resolution: {integrity: sha512-rd1wA3ebzlp0Mehj5YTuTI50AQEx80gWFyHcQu+u91/5NgdwBecO8BH6ipPfE+lmQ9d63vpB3H9SHoIUiupllw==}
+
  '@intlify/[email protected]':
    resolution: {integrity: sha512-UovJl10oBIlmYEcWw+VIHdKY5Uv5sdPG0b/b6bOYxGLln3UwB75+2dlc0F3Fsa0RhoznQ5Rp589/BZpABpE4Xw==}
    engines: {node: '>= 14.16'}
@ -1209,11 +1230,22 @@ packages:
    peerDependencies:
      eslint: '>=8.40.0'

+  '@swc/[email protected]':
+    resolution: {integrity: sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==}
+
  '@tailwindcss/[email protected]':
    resolution: {integrity: sha512-tM4XVr2+UVTxXJzey9Twx48c1gcxFStqn1pQz0tRsX8o3DvxhN5oY5pvyAbUx7VTaZxpej4Zzvc6h+1RJBzpIg==}
    peerDependencies:
      tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20'

+  '@tanstack/[email protected]':
+    resolution: {integrity: sha512-ND5dfsU0n9F4gROzwNNDJmg6y8n9pI8YWxtgbfJ5UcNn7Hx+MxEXtXcQ189tS7sh8pmCObgz2qSiyRKTZxT4dg==}
+
+  '@tanstack/[email protected]':
+    resolution: {integrity: sha512-OSK1fkvz4GaBhF80KVmBsJZoMI9ncVaUU//pI8OqTdBnepw467zcuF2Y+Ia1VC0CPYfUEALyS8n4Ar0RI/7ASg==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+
  '@trysound/[email protected]':
    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
    engines: {node: '>=10.13.0'}
@ -1251,6 +1283,9 @@ packages:
  '@types/[email protected]':
    resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}

+  '@types/[email protected]':
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+
  '@typescript-eslint/[email protected]':
    resolution: {integrity: sha512-rg8LGdv7ri3oAlenMACk9e+AR4wUV0yrrG+XKsGKOK0EVgeEDqurkXMPILG2836fW4ibokTB5v4b6Z9+GYQDEw==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@ -1430,6 +1465,15 @@ packages:
  '@vue/[email protected]':
    resolution: {integrity: sha512-q0xCiLkuWWQLzVrecPb0RMsNWyxICOjPrcrwxTUEHb1fsnvni4dcuyG7RT/Ie7VPTvnjzIaWzRMUBsrqNj/hhw==}

+  '@vueuse/[email protected]':
+    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
+
+  '@vueuse/[email protected]':
+    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
+
+  '@vueuse/[email protected]':
+    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+
  '@yr/[email protected]':
    resolution: {integrity: sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==}

@ -1534,6 +1578,10 @@ packages:
  [email protected]:
    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}

+  [email protected]:
+    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
+    engines: {node: '>=10'}
+
  [email protected]:
    resolution: {integrity: sha512-RlNqd4u6c/rJ5R+tN/ZTtyNrH8X0NHCvyt6gD8RHa3JjzxxHWoyaU0Ujk3Zjbh7IZqrYl1Sxm6XzZifmVxXxHQ==}
    engines: {node: '>=16.14.0'}
@ -3553,6 +3601,11 @@ packages:
  [email protected]:
    resolution: {integrity: sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==}

+  [email protected]:
+    resolution: {integrity: sha512-vtCq+WDAZj5BQtJiChGf/oC7w3y7jaod3agcntgph7fD6aqdcghLZYcUWdgT/XNJs2bEsk+3cjK3ONPRNeFcuQ==}
+    peerDependencies:
+      vue: '>= 3.2.0'
+
  [email protected]:
    resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}

@ -4992,10 +5045,38 @@ snapshots:

  '@fastify/[email protected]': {}

+  '@floating-ui/[email protected]':
+    dependencies:
+      '@floating-ui/utils': 0.2.7
+
+  '@floating-ui/[email protected]':
+    dependencies:
+      '@floating-ui/core': 1.6.7
+      '@floating-ui/utils': 0.2.7
+
+  '@floating-ui/[email protected]': {}
+
+  '@floating-ui/[email protected]([email protected]([email protected]))':
+    dependencies:
+      '@floating-ui/dom': 1.6.10
+      '@floating-ui/utils': 0.2.7
+      vue-demi: 0.14.10([email protected]([email protected]))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
  '@humanwhocodes/[email protected]': {}

  '@humanwhocodes/[email protected]': {}

+  '@internationalized/[email protected]':
+    dependencies:
+      '@swc/helpers': 0.5.13
+
+  '@internationalized/[email protected]':
+    dependencies:
+      '@swc/helpers': 0.5.13
+
  '@intlify/[email protected]([email protected]([email protected]([email protected])))':
    dependencies:
      '@intlify/message-compiler': 9.14.0
@ -5658,11 +5739,22 @@ snapshots:
      - supports-color
      - typescript

+  '@swc/[email protected]':
+    dependencies:
+      tslib: 2.7.0
+
  '@tailwindcss/[email protected]([email protected])':
    dependencies:
      mini-svg-data-uri: 1.4.4
      tailwindcss: 3.4.10

+  '@tanstack/[email protected]': {}
+
+  '@tanstack/[email protected]([email protected]([email protected]))':
+    dependencies:
+      '@tanstack/virtual-core': 3.10.7
+      vue: 3.4.38([email protected])
+
  '@trysound/[email protected]': {}

  '@types/[email protected]':
@ -5698,6 +5790,8 @@ snapshots:

  '@types/[email protected]': {}

+  '@types/[email protected]': {}
+
  '@typescript-eslint/[email protected](@typescript-eslint/[email protected]([email protected]([email protected]))([email protected]))([email protected]([email protected]))([email protected])':
    dependencies:
      '@eslint-community/regexpp': 4.11.0
@ -5992,6 +6086,25 @@ snapshots:

  '@vue/[email protected]': {}

+  '@vueuse/[email protected]([email protected]([email protected]))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.1
+      '@vueuse/shared': 10.11.1([email protected]([email protected]))
+      vue-demi: 0.14.10([email protected]([email protected]))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/[email protected]': {}
+
+  '@vueuse/[email protected]([email protected]([email protected]))':
+    dependencies:
+      vue-demi: 0.14.10([email protected]([email protected]))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
  '@yr/[email protected]': {}

  [email protected]: {}
@ -6104,6 +6217,10 @@ snapshots:

  [email protected]: {}

+  [email protected]:
+    dependencies:
+      tslib: 2.7.0
+
  [email protected]:
    dependencies:
      '@babel/parser': 7.25.6
@ -8309,6 +8426,23 @@ snapshots:

  [email protected]: {}

+  [email protected]([email protected]([email protected])):
+    dependencies:
+      '@floating-ui/dom': 1.6.10
+      '@floating-ui/vue': 1.1.4([email protected]([email protected]))
+      '@internationalized/date': 3.5.5
+      '@internationalized/number': 3.5.3
+      '@tanstack/vue-virtual': 3.10.7([email protected]([email protected]))
+      '@vueuse/core': 10.11.1([email protected]([email protected]))
+      '@vueuse/shared': 10.11.1([email protected]([email protected]))
+      aria-hidden: 1.2.4
+      defu: 6.1.4
+      fast-deep-equal: 3.1.3
+      nanoid: 5.0.7
+      vue: 3.4.38([email protected])
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
  [email protected]: {}

  [email protected]: