feat(VBreadcrumbs): pass props and width to items

Author: J-Sek

packages/docs/src/data/new-in.json

@@ -31,6 +31,17 @@
       "bgColor": "3.4.0"
     }
   },
+  "VBreadcrumbs": {
+    "props": {
+      "itemProps": "3.11.0"
+    }
+  },
+  "VBreadcrumbsItem": {
+    "props": {
+      "width": "3.11.0",
+      "maxWidth": "3.11.0"
+    }
+  },
   "VBtn": {
     "props": {
       "text": "3.2.0",
@@ -331,4 +342,4 @@
       "transitionDuration": "3.10.0"
     }
   }
-}
+}

packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx

@@ -18,7 +18,7 @@ import { makeTagProps } from '@/composables/tag'
 
 // Utilities
 import { computed, toRef } from 'vue'
-import { genericComponent, propsFactory, useRender } from '@/util'
+import { genericComponent, isObject, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -47,6 +47,7 @@ export const makeVBreadcrumbsProps = propsFactory({
     type: Array as PropType<readonly BreadcrumbItem[]>,
     default: () => ([]),
   },
+  itemProps: Boolean,
 
   ...makeComponentProps(),
   ...makeDensityProps(),
@@ -139,6 +140,7 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
                   key={ index }
                   disabled={ index >= array.length - 1 }
                   { ...(typeof item === 'string' ? { title: item } : item) }
+                  { ...(props.itemProps && isObject(raw) ? raw : {}) }
                   v-slots={{
                     default: slots.title ? () => slots.title?.({ item, index }) : undefined,
                   }}

packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbsItem.tsx

@@ -1,12 +1,13 @@
 // Composables
 import { useTextColor } from '@/composables/color'
 import { makeComponentProps } from '@/composables/component'
+import { makeDimensionProps, useDimension } from '@/composables/dimensions'
 import { makeRouterProps, useLink } from '@/composables/router'
 import { makeTagProps } from '@/composables/tag'
 
 // Utilities
 import { computed } from 'vue'
-import { genericComponent, propsFactory, useRender } from '@/util'
+import { genericComponent, pick, propsFactory, useRender } from '@/util'
 
 export const makeVBreadcrumbsItemProps = propsFactory({
   active: Boolean,
@@ -17,6 +18,7 @@ export const makeVBreadcrumbsItemProps = propsFactory({
   title: String,
 
   ...makeComponentProps(),
+  ...pick(makeDimensionProps(), ['width', 'maxWidth']),
   ...makeRouterProps(),
   ...makeTagProps({ tag: 'li' }),
 }, 'VBreadcrumbsItem')
@@ -29,6 +31,7 @@ export const VBreadcrumbsItem = genericComponent()({
   setup (props, { slots, attrs }) {
     const link = useLink(props, attrs)
     const isActive = computed(() => props.active || link.isActive?.value)
+    const { dimensionStyles } = useDimension(props)
 
     const { textColorClasses, textColorStyles } = useTextColor(
       () => isActive.value ? props.activeColor : props.color
@@ -49,6 +52,7 @@ export const VBreadcrumbsItem = genericComponent()({
           ]}
           style={[
             textColorStyles.value,
+            dimensionStyles.value,
             props.style,
           ]}
           aria-current={ isActive.value ? 'page' : undefined }