feat(VTabs): add support for v-tabs-window (#19248)

vuetifyjs · Apr 10, 2024 · b905b67 · b905b67
1 parent c6f6587
commit b905b67
Show file tree

Hide file tree

Showing 24 changed files with 411 additions and 184 deletions.
diff --git a/packages/docs/components.d.ts b/packages/docs/components.d.ts
@@ -23,6 +23,8 @@ declare module 'vue' {
     ApiSection: typeof import('./src/components/api/Section.vue')['default']
     ApiSlotsTable: typeof import('./src/components/api/SlotsTable.vue')['default']
     AppBackToTop: typeof import('./src/components/app/BackToTop.vue')['default']
+    AppBanner: typeof import('./src/components/app/Banner.vue')['default']
+    AppBarAuthDialog: typeof import('./src/components/app/bar/AuthDialog.vue')['default']
     AppBarBar: typeof import('./src/components/app/bar/Bar.vue')['default']
     AppBarEcosystemMenu: typeof import('./src/components/app/bar/EcosystemMenu.vue')['default']
     AppBarEnterpriseLink: typeof import('./src/components/app/bar/EnterpriseLink.vue')['default']
@@ -76,6 +78,7 @@ declare module 'vue' {
     AppSettingsOptionsQuickbarOption: typeof import('./src/components/app/settings/options/QuickbarOption.vue')['default']
     AppSettingsOptionsRailDrawerOption: typeof import('./src/components/app/settings/options/RailDrawerOption.vue')['default']
     AppSettingsOptionsSlashSearchOption: typeof import('./src/components/app/settings/options/SlashSearchOption.vue')['default']
+    AppSettingsOptionsSyncOption: typeof import('./src/components/app/settings/options/SyncOption.vue')['default']
     AppSettingsOptionsThemeOption: typeof import('./src/components/app/settings/options/ThemeOption.vue')['default']
     AppSettingsPerksOptions: typeof import('./src/components/app/settings/PerksOptions.vue')['default']
     AppSettingsSettingsHeader: typeof import('./src/components/app/settings/SettingsHeader.vue')['default']
@@ -149,10 +152,16 @@ declare module 'vue' {
     SponsorCard: typeof import('./src/components/sponsor/Card.vue')['default']
     SponsorLink: typeof import('./src/components/sponsor/Link.vue')['default']
     SponsorSponsors: typeof import('./src/components/sponsor/Sponsors.vue')['default']
+    UserAccountConnectedAccounts: typeof import('./src/components/user/account/ConnectedAccounts.vue')['default']
+    UserAccountOneSubscription: typeof import('./src/components/user/account/OneSubscription.vue')['default']
     UserBadgesUserAdminBadge: typeof import('./src/components/user/badges/UserAdminBadge.vue')['default']
     UserBadgesUserOneBadge: typeof import('./src/components/user/badges/UserOneBadge.vue')['default']
     UserBadgesUserSponsorBadge: typeof import('./src/components/user/badges/UserSponsorBadge.vue')['default']
+    UserDiscordLogin: typeof import('./src/components/user/DiscordLogin.vue')['default']
+    UserGithubLogin: typeof import('./src/components/user/GithubLogin.vue')['default']
     UserOneSubCard: typeof import('./src/components/user/OneSubCard.vue')['default']
+    UserUserBadges: typeof import('./src/components/user/UserBadges.vue')['default']
+    UserUserProfile: typeof import('./src/components/user/UserProfile.vue')['default']
     UserUserTabs: typeof import('./src/components/user/UserTabs.vue')['default']
   }
 }
diff --git a/packages/docs/src/examples/v-tabs/misc-content.vue b/packages/docs/src/examples/v-tabs/misc-content.vue
@@ -7,13 +7,9 @@
 
       <v-spacer></v-spacer>
 
-      <v-btn icon>
-        <v-icon>mdi-magnify</v-icon>
-      </v-btn>
+      <v-btn icon="mdi-magnify"></v-btn>
 
-      <v-btn icon>
-        <v-icon>mdi-dots-vertical</v-icon>
-      </v-btn>
+      <v-btn icon="mdi-dots-vertical"></v-btn>
 
       <template v-slot:extension>
         <v-tabs
@@ -23,25 +19,24 @@
           <v-tab
             v-for="i in 3"
             :key="i"
+            :text="`Item ${i}`"
             :value="i"
-          >
-            Item {{ i }}
-          </v-tab>
+          ></v-tab>
         </v-tabs>
       </template>
     </v-toolbar>
 
-    <v-window v-model="model">
-      <v-window-item
+    <v-tabs-window v-model="model">
+      <v-tabs-window-item
         v-for="i in 3"
         :key="i"
         :value="i"
       >
         <v-card>
           <v-card-text>{{ text }}</v-card-text>
         </v-card>
-      </v-window-item>
-    </v-window>
+      </v-tabs-window-item>
+    </v-tabs-window>
   </v-card>
 </template>
 

diff --git a/packages/docs/src/examples/v-tabs/misc-dynamic-height.vue b/packages/docs/src/examples/v-tabs/misc-dynamic-height.vue
@@ -2,7 +2,6 @@
   <v-card>
     <v-toolbar
       color="purple"
-      dark
       flat
       prominent
     >
@@ -24,9 +23,8 @@
           <v-tab
             v-for="n in 3"
             :key="n"
-          >
-            Item {{ n }}
-          </v-tab>
+            :text="`Item ${n}`"
+          ></v-tab>
         </v-tabs>
       </template>
     </v-toolbar>

diff --git a/packages/docs/src/examples/v-tabs/misc-dynamic.vue b/packages/docs/src/examples/v-tabs/misc-dynamic.vue
@@ -7,29 +7,29 @@
       <v-tab
         v-for="n in length"
         :key="n"
+        :text="`Item ${n}`"
         :value="n"
-      >
-        Item {{ n }}
-      </v-tab>
+      ></v-tab>
     </v-tabs>
+
     <v-card-text class="text-center">
       <v-btn
         :disabled="!length"
+        text="Remove Tab"
         variant="text"
         @click="length--"
-      >
-        Remove Tab
-      </v-btn>
+      ></v-btn>
+
       <v-divider
         class="mx-4"
         vertical
       ></v-divider>
+
       <v-btn
+        text="Add Tab"
         variant="text"
         @click="length++"
-      >
-        Add Tab
-      </v-btn>
+      ></v-btn>
     </v-card-text>
   </v-card>
 </template>

diff --git a/packages/docs/src/examples/v-tabs/misc-mobile.vue b/packages/docs/src/examples/v-tabs/misc-mobile.vue
@@ -1,19 +1,15 @@
 <template>
   <v-card class="mx-auto" width="350px">
-    <v-toolbar class="px-0" color="transparent">
+    <v-toolbar color="surface">
       <v-app-bar-nav-icon></v-app-bar-nav-icon>
 
       <v-toolbar-title>Contacts</v-toolbar-title>
 
       <v-spacer></v-spacer>
 
-      <v-btn icon>
-        <v-icon>mdi-magnify</v-icon>
-      </v-btn>
+      <v-btn icon="mdi-magnify"></v-btn>
 
-      <v-btn icon>
-        <v-icon>mdi-dots-vertical</v-icon>
-      </v-btn>
+      <v-btn icon="mdi-dots-vertical"></v-btn>
 
       <template v-slot:extension>
         <v-tabs
@@ -24,26 +20,26 @@
           <v-tab
             :value="1"
           >
-            <v-icon>mdi-phone</v-icon>
+            <v-icon icon="mdi-phone"></v-icon>
           </v-tab>
 
           <v-tab
             :value="2"
           >
-            <v-icon>mdi-heart</v-icon>
+            <v-icon icon="mdi-heart"></v-icon>
           </v-tab>
 
           <v-tab
             :value="3"
           >
-            <v-icon>mdi-account-box</v-icon>
+            <v-icon icon="mdi-account-box"></v-icon>
           </v-tab>
         </v-tabs>
       </template>
     </v-toolbar>
 
-    <v-window v-model="tabs">
-      <v-window-item
+    <v-tabs-window v-model="tabs">
+      <v-tabs-window-item
         v-for="i in 3"
         :key="i"
         :value="i"
@@ -53,8 +49,8 @@
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </v-card-text>
         </v-card>
-      </v-window-item>
-    </v-window>
+      </v-tabs-window-item>
+    </v-tabs-window>
   </v-card>
 </template>
 

diff --git a/packages/docs/src/examples/v-tabs/misc-overflow-to-menu.vue b/packages/docs/src/examples/v-tabs/misc-overflow-to-menu.vue
@@ -9,13 +9,9 @@
 
       <v-spacer></v-spacer>
 
-      <v-btn icon>
-        <v-icon>mdi-magnify</v-icon>
-      </v-btn>
+      <v-btn icon="mdi-magnify"></v-btn>
 
-      <v-btn icon>
-        <v-icon>mdi-dots-vertical</v-icon>
-      </v-btn>
+      <v-btn icon="mdi-dots-vertical"></v-btn>
 
       <template v-slot:extension>
         <v-tabs
@@ -25,14 +21,11 @@
           <v-tab
             v-for="item in items"
             :key="item"
+            :text="item"
             :value="'tab-' + item"
-          >
-            {{ item }}
-          </v-tab>
+          ></v-tab>
 
-          <v-menu
-            v-if="more.length"
-          >
+          <v-menu v-if="more.length">
             <template v-slot:activator="{ props }">
               <v-btn
                 class="align-self-center me-4"
@@ -42,28 +35,26 @@
                 v-bind="props"
               >
                 more
-                <v-icon end>
-                  mdi-menu-down
-                </v-icon>
+
+                <v-icon icon="mdi-menu-down" end></v-icon>
               </v-btn>
             </template>
 
             <v-list class="bg-grey-lighten-3">
               <v-list-item
                 v-for="item in more"
                 :key="item"
+                :title="item"
                 @click="addItem(item)"
-              >
-                {{ item }}
-              </v-list-item>
+              ></v-list-item>
             </v-list>
           </v-menu>
         </v-tabs>
       </template>
     </v-toolbar>
 
-    <v-window v-model="currentItem">
-      <v-window-item
+    <v-tabs-window v-model="currentItem">
+      <v-tabs-window-item
         v-for="item in items.concat(more)"
         :key="item"
         :value="'tab-' + item"
@@ -74,8 +65,8 @@
             {{ text }}
           </v-card-text>
         </v-card>
-      </v-window-item>
-    </v-window>
+      </v-tabs-window-item>
+    </v-tabs-window>
   </v-card>
 </template>
 

diff --git a/packages/docs/src/examples/v-tabs/misc-pagination.vue b/packages/docs/src/examples/v-tabs/misc-pagination.vue
@@ -8,10 +8,9 @@
       <v-tab
         v-for="i in 30"
         :key="i"
+        :text="'Item ' + i"
         :value="'tab-' + i"
-      >
-        Item {{ i }}
-      </v-tab>
+      ></v-tab>
     </v-tabs>
   </v-card>
 </template>
diff --git a/packages/docs/src/examples/v-tabs/misc-tab-items.vue b/packages/docs/src/examples/v-tabs/misc-tab-items.vue
@@ -7,9 +7,8 @@
       <v-tab
         v-for="item in items"
         :key="item.tab"
-      >
-        {{ item.tab }}
-      </v-tab>
+        :title="item.tab"
+      ></v-tab>
     </v-tabs>
 
     <v-tabs-items v-model="tab">

diff --git a/packages/docs/src/examples/v-tabs/prop-align-tabs-center.vue b/packages/docs/src/examples/v-tabs/prop-align-tabs-center.vue
@@ -9,8 +9,9 @@
       <v-tab :value="2">City</v-tab>
       <v-tab :value="3">Abstract</v-tab>
     </v-tabs>
-    <v-window v-model="tab">
-      <v-window-item
+
+    <v-tabs-window v-model="tab">
+      <v-tabs-window-item
         v-for="n in 3"
         :key="n"
         :value="n"
@@ -26,13 +27,14 @@
               <v-img
                 :lazy-src="`https://picsum.photos/10/6?image=${i * n * 5 + 10}`"
                 :src="`https://picsum.photos/500/300?image=${i * n * 5 + 10}`"
-                aspect-ratio="1"
+                height="205"
+                cover
               ></v-img>
             </v-col>
           </v-row>
         </v-container>
-      </v-window-item>
-    </v-window>
+      </v-tabs-window-item>
+    </v-tabs-window>
   </v-card>
 </template>
 

diff --git a/packages/docs/src/examples/v-tabs/prop-align-tabs-end.vue b/packages/docs/src/examples/v-tabs/prop-align-tabs-end.vue
@@ -9,8 +9,9 @@
       <v-tab :value="2">City</v-tab>
       <v-tab :value="3">Abstract</v-tab>
     </v-tabs>
-    <v-window v-model="tab">
-      <v-window-item
+
+    <v-tabs-window v-model="tab">
+      <v-tabs-window-item
         v-for="n in 3"
         :key="n"
         :value="n"
@@ -26,13 +27,14 @@
               <v-img
                 :lazy-src="`https://picsum.photos/10/6?image=${i * n * 5 + 10}`"
                 :src="`https://picsum.photos/500/300?image=${i * n * 5 + 10}`"
-                aspect-ratio="1"
+                height="205"
+                cover
               ></v-img>
             </v-col>
           </v-row>
         </v-container>
-      </v-window-item>
-    </v-window>
+      </v-tabs-window-item>
+    </v-tabs-window>
   </v-card>
 </template>