fix(VTabs): render tabs correctly using items (#19868)

packages/api-generator/src/locale/en/VTabs.json

@@ -13,7 +13,7 @@
     "height": "Sets the height of the tabs bar.",
     "hideSlider": "Hide's the generated `v-tabs-slider`.",
     "iconsAndText": "Will stack icon and text vertically.",
-    "items": "The items to display in the component. This can be an array of strings or objects with a property `title`.",
+    "items": "The items to display in the component. This can be an array of strings or objects with a property `text`.",
     "light": "Applies the light theme variant to the component.",
     "mobileBreakpoint": "Sets the designated mobile breakpoint for the component.",
     "optional": "Does not require an active item. Useful when using `v-tab` as a `router-link`.",

packages/vuetify/src/components/VTabs/VTabs.tsx

@@ -144,7 +144,7 @@ export const VTabs = genericComponent<VTabsSlots>()({
                   key={ item.text }
                   value={ item.value }
                   v-slots={{
-                    default: () => slots[`tab.${item.value}`]?.({ item }),
+                    default: slots[`tab.${item.value}`] ? () => slots[`tab.${item.value}`]?.({ item }) : undefined,
                   }}
                 />
               )

packages/vuetify/src/components/VTabs/__tests__/VTabs.spec.cy.tsx

@@ -145,4 +145,17 @@ describe('VTabs', () => {
         expect(model.value).to.equal('B')
       })
   })
+
+  it('should render tabs using items', () => {
+    const items = [
+      { text: 'A', value: 1 },
+      { text: 'B', value: 2 },
+      { text: 'C', value: 3 },
+    ]
+    cy.mount(() => (
+      <VTabs items={ items } />
+    )).get('.v-tab').eq(0).should('have.text', 'A')
+      .get('.v-tab').eq(1).should('have.text', 'B')
+      .get('.v-tab').eq(2).should('have.text', 'C')
+  })
 })