refactor(VCarousel): tuning pass (#15197)

packages/docs/src/pages/en/components/carousels.md

@@ -14,14 +14,18 @@ related:
 
 The `v-carousel` component is used to display large numbers of visual content on a rotating timer.
 
-<entry />
+![carousel Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-carousel/v-carousel-entry.png)
+
+---
 
 ## Usage
 
 The `v-carousel` component expands upon `v-window` by providing additional features targeted at displaying images.
 
 <example file="v-carousel/usage" />
 
+<entry />
+
 ## API
 
 <api-inline />

packages/vuetify/src/components/VCarousel/VCarousel.tsx

@@ -8,17 +8,17 @@ import { VProgressLinear } from '@/components/VProgressLinear'
 import { VWindow } from '@/components/VWindow'
 
 // Composables
+import { IconValue } from '@/composables/icons'
 import { useLocale } from '@/composables/locale'
 import { useProxiedModel } from '@/composables/proxiedModel'
-import { IconValue } from '@/composables/icons'
 
 // Utilities
 import { convertToUnit, defineComponent, useRender } from '@/util'
 import { onMounted, ref, watch } from 'vue'
 
 // Types
-import type { PropType } from 'vue'
 import type { GroupProvide } from '@/composables/group'
+import type { PropType } from 'vue'
 
 export const VCarousel = defineComponent({
   name: 'VCarousel',
@@ -94,8 +94,8 @@ export const VCarousel = defineComponent({
         ]}
         style={{ height: convertToUnit(props.height) }}
         continuous
-        showArrows={ props.showArrows }
         mandatory="force"
+        showArrows={ props.showArrows }
       >
         {{
           default: slots.default,
@@ -151,5 +151,7 @@ export const VCarousel = defineComponent({
         }}
       </VWindow>
     ))
+
+    return {}
   },
 })

packages/vuetify/src/components/VCarousel/VCarouselItem.tsx

@@ -17,10 +17,7 @@ export const VCarouselItem = defineComponent({
   setup (props, { slots, attrs }) {
     useRender(() => (
       <VWindowItem class="v-carousel-item" value={ props.value }>
-        <VImg
-          { ...attrs }
-          v-slots={ slots }
-        />
+        <VImg { ...attrs } v-slots={ slots } />
       </VWindowItem>
     ))
   },

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

@@ -0,0 +1,14 @@
+/// <reference types="../../../../types/cypress" />
+
+import { VCarousel } from '..'
+import { generate } from '@/../cypress/templates'
+
+const props = {}
+
+const stories = {
+  Default: <VCarousel />,
+}
+// Tests
+describe('VCarousel', () => {
+  generate({ stories, props, component: VCarousel })
+})

packages/vuetify/src/components/VCarousel/__tests__/VCarouselItem.spec.cy.tsx

@@ -0,0 +1,18 @@
+/// <reference types="../../../../types/cypress" />
+
+import { VCarousel, VCarouselItem } from '..'
+import { generate } from '@/../cypress/templates'
+
+const props = {}
+
+const stories = {
+  Default: (
+    <VCarousel>
+      <VCarouselItem />
+    </VCarousel>
+  ),
+}
+// Tests
+describe('VCarouselItem', () => {
+  generate({ stories, props, component: VCarouselItem })
+})

packages/vuetify/src/components/VCarousel/_variables.scss

@@ -1,3 +1,4 @@
+// VCarousel
 $carousel-controls-bg: rgba(var(--v-theme-surface-variant), .3) !default;
 $carousel-controls-size: 50px !default;
 $carousel-dot-margin: 0 8px !default;