chore: upgrade vuetify-ui to 3.0.0-beta.12

GuMengYu · Oct 5, 2022 · 5944473 · 5944473
1 parent af6e49e
commit 5944473
Show file tree

Hide file tree

Showing 19 changed files with 43 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -90,7 +90,7 @@
     "vue-tsc": "^0.34.11",
     "vue-virtual-scroller": "^2.0.0-alpha.1",
     "vue3-slider": "git+https://github.com/GuMengYu/vue3-slider.git",
-    "vuetify": "3.0.0-beta.10",
+    "vuetify": "3.0.0-beta.12",
     "vuetify-ctx-menu": "git+https://github.com/GuMengYu/vue3-context-menu.git#v0.0.1",
     "wavesurfer.js": "^6.2.0",
     "webfontloader": "^1.0.0"

diff --git a/packages/main/core/windowManager.ts b/packages/main/core/windowManager.ts
@@ -8,7 +8,7 @@ import { WindowState } from '../../renderer/src/util/enum'
 import log from './util/log'
 
 export const WindowDefaultSize = {
-  height: 710,
+  height: 720,
   width: 1200,
   minWidth: 393,
   minHeight: 600,

diff --git a/packages/renderer/src/components/layout/WindowControl.vue b/packages/renderer/src/components/layout/WindowControl.vue
@@ -17,7 +17,7 @@
       </v-icon>
     </v-btn>
     <v-dialog v-model="showAlert" persistent class="close-modal">
-      <v-card class="pt-4" rounded="xl" color="surface" width="90vw" max-width="350">
+      <v-card class="pt-4 align-self-center" rounded="xl" color="surface" width="90vw" max-width="350">
         <div class="d-flex justify-center">
           <v-icon color="secondary">
             {{ mdiExitToApp }}

diff --git a/packages/renderer/src/components/skeleton/ListSkeleton.vue b/packages/renderer/src/components/skeleton/ListSkeleton.vue
@@ -19,7 +19,7 @@ const itemHeight = 56
     :style="{
       display: 'grid',
       gridGap: '5px',
-      gridTemplateColumns: '[index] 48px [first] 3fr [second] minmax(140px, 1fr)',
+      gridTemplateColumns: '[index] 48px [first] 3fr [second] minmax(140px, 160px)',
     }"
   >
     <span class="d-flex justify-center">#</span>

diff --git a/packages/renderer/src/components/toggle/SearchInput.vue b/packages/renderer/src/components/toggle/SearchInput.vue
@@ -58,17 +58,17 @@ function handleSearch() {
   max-width: 320px;
   :deep(.v-field--variant-solo) {
     box-shadow: none;
-    border-radius: 40px;
-    padding-inline-end: 2px;
+    // border-radius: 40px;
+    // padding-inline-end: 2px;
 
     .v-field__input {
-      padding-top: 0px;
+      // padding-top: 0px;
       font-size: 0.875rem;
       font-weight: 500;
     }
 
     .v-field__append-inner {
-      padding-top: 0px;
+      // padding-top: 0px;
       align-items: center;
     }
   }

diff --git a/packages/renderer/src/components/track/TrackItem.vue b/packages/renderer/src/components/track/TrackItem.vue
@@ -251,9 +251,9 @@ async function toggleLike() {
   grid-gap: 5px;
   align-items: center;
   height: 56px;
-  grid-template-columns: [index] 48px [first] 4fr [last] minmax(140px, 1fr);
+  grid-template-columns: [index] 48px [first] 4fr [last] minmax(140px, 160px);
   &.album-item {
-    grid-template-columns: [index] 48px [first] 3fr [second] 2fr [last] minmax(140px, 1fr);
+    grid-template-columns: [index] 48px [first] 3fr [second] 2fr [last] minmax(140px, 160px);
   }
   &:hover {
     background-color: rgba(var(--v-theme-surfaceVariant), 0.5);
@@ -288,7 +288,6 @@ async function toggleLike() {
   }
   .track-third {
     display: flex;
-    gap: 16px;
     align-items: center;
     justify-content: space-between;
   }

diff --git a/packages/renderer/src/components/track/TrackList.vue b/packages/renderer/src/components/track/TrackList.vue
@@ -296,9 +296,9 @@ function toAlbum(id: number) {
   .list-header {
     display: grid;
     grid-gap: 5px;
-    grid-template-columns: [index] 48px [first] 3fr [second] 2fr [last] minmax(140px, 1fr);
+    grid-template-columns: [index] 48px [first] 3fr [second] 2fr [last] minmax(140px, 160px);
     &.album-header {
-      grid-template-columns: [index] 48px [first] 4fr [last] minmax(140px, 1fr);
+      grid-template-columns: [index] 48px [first] 4fr [last] minmax(140px, 160px);
     }
   }
 }

diff --git a/packages/renderer/src/pages/Album.vue b/packages/renderer/src/pages/Album.vue
@@ -181,7 +181,7 @@ function saveCover() {
         </CardRow>
       </Col>
       <v-dialog v-model="showMoreDesc" scrollable>
-        <v-card rounded="xl" color="surfaceVariant" class="py-4" width="90vw" max-width="450">
+        <v-card rounded="xl" color="surfaceVariant" class="py-4 align-self-center" width="90vw" max-width="450">
           <v-card-title>{{ $t('main.album.desc') }}</v-card-title>
           <v-card-text>
             {{ state.album['description'] }}

diff --git a/packages/renderer/src/pages/Artist.vue b/packages/renderer/src/pages/Artist.vue
@@ -226,7 +226,7 @@ function formatDate(datetime: string | number, format = 'YYYY-MM-DD') {
         </card-row>
       </Col>
       <v-dialog v-model="more.showMoreDesc" :scrollable="true">
-        <v-card color="surfaceVariant" rounded="xl" class="py-4" width="90vw" max-width="450">
+        <v-card color="surfaceVariant" rounded="xl" class="py-4 align-self-center" width="90vw" max-width="450">
           <v-card-title> {{ $t('main.artist.desc') }}</v-card-title>
           <v-card-text>
             {{ state.artist['briefDesc'] }}

diff --git a/packages/renderer/src/pages/Library.vue b/packages/renderer/src/pages/Library.vue
@@ -46,7 +46,7 @@
       </v-window-item>
     </v-window>
     <v-dialog v-model="createState.show">
-      <v-card width="90vw" max-width="450" rounded="xl" class="py-2">
+      <v-card width="90vw" max-width="450" rounded="xl" class="py-2 align-self-center">
         <v-card-title>{{ $t('main.playlist.new') }}</v-card-title>
         <v-card-text>
           <v-text-field

diff --git a/packages/renderer/src/pages/cloud/index.vue b/packages/renderer/src/pages/cloud/index.vue
@@ -134,7 +134,7 @@ function handleCloseUploadModal() {
     </template>
     <cloud-list :tracks="clouds" @update-list="(list) => (clouds = [...list])" />
     <v-dialog v-model="uploadMusic.visible" persistent class="upload-file-wrapper">
-      <v-card outlined color="surface" class="pt-4" rounded="lg" width="90vw" max-width="350">
+      <v-card outlined color="surface" class="pt-4 align-self-center" rounded="lg" width="90vw" max-width="350">
         <div class="d-flex justify-center">
           <v-icon color="secondary">
             {{ mdiCloudUpload }}

diff --git a/packages/renderer/src/pages/components/PlayingList.vue b/packages/renderer/src/pages/components/PlayingList.vue
@@ -5,7 +5,7 @@
         v-slot="{ item: track, index }"
         class="scroller"
         :style="{
-          height: `450px`,
+          height: `290px`,
         }"
         :items="nextList"
         :item-size="64"

diff --git a/packages/renderer/src/pages/components/PlaylistHeader.vue b/packages/renderer/src/pages/components/PlaylistHeader.vue
@@ -219,7 +219,7 @@ function saveCover() {
                 {{ $tc('message.delete_list', isDelete ? 2 : 1) }}
               </v-btn>
             </template>
-            <v-card class="pt-4" rounded="xl" color="surface" width="90vw" max-width="350">
+            <v-card class="pt-4 align-self-center" rounded="xl" color="surface" width="90vw" max-width="350">
               <div class="d-flex justify-center">
                 <v-icon color="secondary">
                   {{ mdiDeleteAlert }}
@@ -250,7 +250,7 @@ function saveCover() {
       </span>
     </div>
     <v-dialog v-model="showEdit" :scrollable="true">
-      <v-card width="90vw" max-width="450" min-height="300" rounded="xl" class="py-2">
+      <v-card width="90vw" max-width="450" min-height="300" rounded="xl" class="py-2 align-self-center">
         <v-card-title> {{ $t('main.playlist.edit') }} </v-card-title>
         <v-card-text>
           <v-text-field v-model="editForm.title" variant="outlined" :label="$t('main.playlist.name')"> </v-text-field>
@@ -264,7 +264,7 @@ function saveCover() {
       </v-card>
     </v-dialog>
     <v-dialog v-model="showMoreDesc" :scrollable="true">
-      <v-card color="surfaceVariant" width="90vw" max-width="450" rounded="xl" class="py-4">
+      <v-card color="surfaceVariant" width="90vw" max-width="450" rounded="xl" class="py-4 align-self-center">
         <v-card-title>{{ $t('main.playlist.desc') }}</v-card-title>
         <v-card-text>
           {{ playlist['description'] }}

diff --git a/packages/renderer/src/pages/components/Track.vue b/packages/renderer/src/pages/components/Track.vue
@@ -199,7 +199,6 @@ function openMenu(e: MouseEvent) {
   }
   .track-third {
     display: flex;
-    gap: 16px;
     align-items: center;
     justify-content: center;
   }

diff --git a/packages/renderer/src/pages/modal/Login.vue b/packages/renderer/src/pages/modal/Login.vue
@@ -1,6 +1,13 @@
 <template>
   <v-dialog v-model="showLogin" persistent>
-    <v-card outlined color="surface" class="login-container py-4" rounded="lg" width="90vw" max-width="450">
+    <v-card
+      outlined
+      color="surface"
+      class="login-container py-4 align-self-center"
+      rounded="lg"
+      width="90vw"
+      max-width="450"
+    >
       <div class="d-flex justify-center">
         <v-icon color="secondary" size="large">
           {{ mdiLogin }}

diff --git a/packages/renderer/src/pages/modal/Profile.vue b/packages/renderer/src/pages/modal/Profile.vue
@@ -57,9 +57,9 @@ const signOut = () => {
 </script>
 <template>
   <v-dialog v-model="show">
-    <v-card flat color="surface" width="90vw" max-width="420" rounded="xl">
+    <v-card flat color="surface" width="50vw" max-width="450" rounded="xl" class="align-self-center">
       <div class="px-2 pt-2">
-        <v-btn icon @click="show = false">
+        <v-btn icon variant="plain" @click="show = false">
           <v-icon> {{ mdiClose }}</v-icon>
         </v-btn>
       </div>

diff --git a/packages/renderer/src/pages/mode/components/lyric.vue b/packages/renderer/src/pages/mode/components/lyric.vue
@@ -67,7 +67,11 @@ const displayAll = ref(false)
     </div>
 
     <v-dialog v-model="displayAll" scrollable max-height="70vh">
-      <v-card color="surfaceVariant" width="45vw" class="text-onSurfaceVariant rounded-lg pa-4 overflow-y-auto">
+      <v-card
+        color="surfaceVariant"
+        width="45vw"
+        class="text-onSurfaceVariant rounded-lg pa-4 overflow-y-auto align-self-center"
+      >
         <ul class="lyrics-list text-xl-h6 text-lg-subtitle-1">
           <li v-for="(item, index) in lyrics" :key="index" :data-time="item.time" v-html="item.sentence"></li>
         </ul>

diff --git a/packages/renderer/src/pages/setting/components/Other.vue b/packages/renderer/src/pages/setting/components/Other.vue
@@ -52,7 +52,7 @@
               {{ t('message.reset_app') }}
             </v-btn>
           </template>
-          <v-card class="pt-4" rounded="xl" color="surface" width="90vw" max-width="350">
+          <v-card class="pt-4 align-self-center" rounded="xl" color="surface" width="90vw" max-width="350">
             <div class="d-flex justify-center">
               <v-icon color="secondary">
                 {{ mdiRestore }}