feat: vuetify v3.6

kingyue737 · Apr 24, 2024 · fe508ee · fe508ee
1 parent 7d42cda
commit fe508ee
Show file tree

Hide file tree

Showing 10 changed files with 486 additions and 523 deletions.
diff --git a/app.vue b/app.vue
@@ -29,19 +29,19 @@ useSeoMeta({
   <v-app>
     <AppDrawer />
     <AppBar />
-    <!-- https://github.com/vuetifyjs/vuetify/issues/15202 -->
-    <v-main style="--v-layout-top: 64px; --v-layout-bottom: 32px">
+    <v-main>
       <NuxtPage />
     </v-main>
     <AppFooter />
   </v-app>
 </template>
 
 <style scoped>
+/* replace padding with margin to limit scrollbar in v-main */
 .v-main {
   padding-top: 0;
-  margin-top: var(--v-layout-top);
   padding-bottom: 0;
+  margin-top: var(--v-layout-top);
   margin-bottom: var(--v-layout-bottom);
   height: calc(100vh - var(--v-layout-top) - var(--v-layout-bottom));
   overflow-y: auto;

diff --git a/assets/styles/global.css b/assets/styles/global.css
@@ -59,13 +59,3 @@ html {
   width: 100%;
   height: 100%;
 }
-
-/* https://github.com/vuetifyjs/vuetify/issues/15202 */
-.v-app-bar,
-.v-footer {
-  left: 256px;
-  width: calc(100% - 256px);
-}
-.v-navigation-drawer {
-  width: 256px;
-}
diff --git a/components/App/AppDrawer.vue b/components/App/AppDrawer.vue
@@ -15,9 +15,7 @@ const drawer = computed({
 const rail = computed(() => !drawerState.value && !mobile.value)
 routes.sort((a, b) => (a.meta?.drawerIndex ?? 99) - (b.meta?.drawerIndex ?? 98))
 
-nextTick(() => {
-  drawerState.value = lgAndUp.value && width.value !== 1280
-})
+drawerState.value = lgAndUp.value && width.value !== 1280
 </script>
 
 <template>

diff --git a/components/App/AppNotification.vue b/components/App/AppNotification.vue
@@ -21,18 +21,12 @@ function toggleAll() {
 </script>
 
 <template>
-  <v-tooltip location="top" text="Notification">
-    <template #activator="{ props }">
-      <v-btn
-        :icon="
-          notifications.length ? 'mdi-bell-badge-outline' : 'mdi-bell-outline'
-        "
-        :rounded="0"
-        v-bind="props"
-        @click="toggleAll"
-      />
-    </template>
-  </v-tooltip>
+  <v-btn
+    v-tooltip="{ text: 'Notification' }"
+    :icon="notifications.length ? 'mdi-bell-badge-outline' : 'mdi-bell-outline'"
+    :rounded="0"
+    @click="toggleAll"
+  />
   <teleport to="body">
     <v-card
       elevation="6"
@@ -45,27 +39,19 @@ function toggleAll() {
           class="font-weight-light text-body-1"
           :text="notifications.length ? 'Notification' : 'No New Notifications'"
         />
-        <v-tooltip location="top" text="Clear All Notifications">
-          <template #activator="{ props }">
-            <v-btn
-              v-bind="props"
-              size="small"
-              icon="mdi-bell-remove"
-              @click="emptyNotifications"
-            />
-          </template>
-        </v-tooltip>
-        <v-tooltip location="top" text="Hide Notifications">
-          <template #activator="{ props }">
-            <v-btn
-              v-bind="props"
-              class="mr-0"
-              size="small"
-              icon="$expand"
-              @click="toggleAll"
-            />
-          </template>
-        </v-tooltip>
+        <v-btn
+          v-tooltip="{ text: 'Clear All Notifications' }"
+          size="small"
+          icon="mdi-bell-remove"
+          @click="emptyNotifications"
+        />
+        <v-btn
+          v-tooltip="{ text: 'Hide Notifications' }"
+          class="mr-0"
+          size="small"
+          icon="$expand"
+          @click="toggleAll"
+        />
       </v-toolbar>
       <v-slide-y-reverse-transition
         tag="div"

diff --git a/components/App/AppSettings.vue b/components/App/AppSettings.vue
@@ -31,15 +31,14 @@ const menuShow = ref(false)
     offset="15"
   >
     <template #activator="{ props: menu }">
-      <v-tooltip location="top">
+      <v-tooltip location="top" text="Theme Palette">
         <template #activator="{ props: tooltip }">
           <v-btn
             icon="mdi-palette-outline"
             v-bind="mergeProps(menu, tooltip)"
             :rounded="0"
           />
         </template>
-        <span>Theme Palette</span>
       </v-tooltip>
     </template>
     <v-card width="320">

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -18,8 +18,6 @@ export default defineNuxtConfig({
   build: {
     transpile: ['vue-echarts', 'resize-detector'],
   },
-  // you can turn on SSR but Vuetify has a layout bug
-  // https://github.com/vuetifyjs/vuetify/issues/15202
   ssr: true,
   modules: [
     '@pinia/nuxt',

diff --git a/package.json b/package.json
@@ -26,13 +26,18 @@
     "rollup-plugin-regexp": "^5.0.1",
     "vitest": "^1.5.0",
     "vue-tsc": "^2.0.14",
-    "vuetify-nuxt-module": "^0.13.2"
+    "vuetify-nuxt-module": "^0.13.3"
   },
   "dependencies": {
     "@pinia/nuxt": "^0.5.1",
     "@vueuse/nuxt": "^10.9.0",
     "echarts": "^5.5.0",
     "nuxt-auth-utils": "^0.0.24",
-    "vue-echarts": "^6.6.10"
+    "vue-echarts": "^6.7.1"
+  },
+  "pnpm": {
+    "overrides": {
+      "vuetify": "3.6.0-beta.0.0"
+    }
   }
 }
diff --git a/pages/auth.vue b/pages/auth.vue
@@ -53,26 +53,14 @@ watch(loggedIn, () => {
                   VIcon: {
                     size: 20,
                   },
+                  VTooltip: {
+                    location: 'top',
+                  },
                 }"
               >
-                <v-tooltip location="top">
-                  <template #activator="{ props }">
-                    <v-btn icon="mdi-pencil" v-bind="props" />
-                  </template>
-                  <span>Edit</span>
-                </v-tooltip>
-                <v-tooltip location="top">
-                  <template #activator="{ props }">
-                    <v-btn icon="mdi-content-copy" v-bind="props" />
-                  </template>
-                  <span>Copy</span>
-                </v-tooltip>
-                <v-tooltip location="top">
-                  <template #activator="{ props }">
-                    <v-btn icon="mdi-delete" v-bind="props" />
-                  </template>
-                  <span>Delete</span>
-                </v-tooltip>
+                <v-btn v-tooltip="{ text: 'Edit' }" icon="mdi-pencil" />
+                <v-btn v-tooltip="{ text: 'Copy' }" icon="mdi-content-copy" />
+                <v-btn v-tooltip="{ text: 'Delete' }" icon="mdi-delete" />
               </v-defaults-provider>
             </template>
           </v-data-table>

diff --git a/pages/table.vue b/pages/table.vue
@@ -173,16 +173,11 @@ const desserts = ref([
                   },
                 }"
               >
-                <v-tooltip location="top">
-                  <template #activator="{ props }">
-                    <v-btn
-                      icon="mdi-delete-outline"
-                      v-bind="props"
-                      @click.stop="showDialogDelete(item.name)"
-                    />
-                  </template>
-                  <span>Delete</span>
-                </v-tooltip>
+                <v-btn
+                  v-tooltip="{ text: 'Delete', location: 'top' }"
+                  icon="mdi-delete-outline"
+                  @click.stop="showDialogDelete(item.name)"
+                />
               </v-defaults-provider>
             </template>
           </v-data-table>