feat(VBreadcrumbs): add collapseFrom props and expose collapse function

Author: Jonathan de Flaugergues

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

@@ -1,13 +1,14 @@
 {
   "props": {
     "collapseInMenu": "When true, overflowing breadcrumb items are collapsed into a contextual menu rather than a static ellipsis.",
+    "collapseFrom": "Determines the number of leading breadcrumb items that remain visible before collapsing the middle items.",
     "divider": "Specifies the dividing character between items.",
     "ellipsis": "Text displayed when breadcrumb items collapsed.",
     "icons": "Specifies that the dividers between items are [v-icon](/components/icons)s.",
     "justifyCenter": "Align the breadcrumbs center.",
     "justifyEnd": "Align the breadcrumbs at the end.",
     "large": "Increase the font-size of the breadcrumb item text to 16px (14px default).",
-    "totalVisible": "Determines how many breadcrumb items can be shown before middle items are collapsed."
+    "totalVisible": "Determines how many breadcrumb items can be shown before other items are collapsed."
   },
   "slots": {
     "divider": "The slot used for dividers.",

packages/docs/src/examples/v-breadcrumbs/prop-total-visible.vue

@@ -1,11 +1,14 @@
 <template>
   <v-container max-width="600">
     <v-breadcrumbs
+      ref="breadcrumbsRef"
+      :collapse-from="collapseFrom"
       :items="items"
       :total-visible="limit"
     ></v-breadcrumbs>
 
     <v-breadcrumbs
+      :collapse-from="collapseFrom"
       :items="items"
       :total-visible="limit"
       collapse-in-menu
@@ -14,13 +17,17 @@
     <div class="border-t pa-6">
       <v-slider v-model="count" label="Items count:" max="10" step="1" thumb-label="always"></v-slider>
       <v-slider v-model="limit" label="Collapse when exceeding:" max="10" step="1" thumb-label="always"></v-slider>
+      <v-slider v-model="collapseFrom" label="Collapse from:" max="10" step="1" thumb-label="always"></v-slider>
+      <v-btn @click="breadcrumbsRef.collapse()">Re-Collapse</v-btn>
     </div>
   </v-container>
 </template>
 
 <script setup>
   import { shallowRef, toRef } from 'vue'
 
+  const breadcrumbsRef = useTemplateRef('breadcrumbsRef')
+  const collapseFrom = shallowRef(0)
   const count = shallowRef(6)
   const limit = shallowRef(3)
 

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

@@ -62,6 +62,7 @@ Breadcrumbs separator can be set using `divider` property.
 #### Total visible
 
 You can use the `total-visible` prop to limit the visible items. Items that exceed limit are displayed after clicking on "..." item. The default behavior can be changed with `collapse-in-menu` to display the collapsed items inside a dropdown menu.
+You can also use the `collapse-from` prop to control how many leading items remain visible before collapsing items.
 
 <ExamplesExample file="v-breadcrumbs/prop-total-visible" />
 

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

@@ -39,6 +39,10 @@ export const makeVBreadcrumbsProps = propsFactory({
   activeColor: String,
   bgColor: String,
   collapseInMenu: Boolean,
+  collapseFrom: {
+    type: Number,
+    default: 0,
+  },
   color: String,
   disabled: Boolean,
   divider: {
@@ -61,7 +65,10 @@ export const makeVBreadcrumbsProps = propsFactory({
   menuProps: {
     type: Object as PropType<VMenu['$props']>,
   },
-  totalVisible: Number,
+  totalVisible: {
+    type: Number,
+    default: Number.MAX_VALUE,
+  },
 
   ...makeComponentProps(),
   ...makeDensityProps(),
@@ -86,7 +93,7 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
 
   props: makeVBreadcrumbsProps(),
 
-  setup (props, { slots }) {
+  setup (props, { slots, expose }) {
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.bgColor)
     const { densityClasses } = useDensity(props)
     const { roundedClasses } = useRounded(props)
@@ -103,12 +110,28 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
       },
     })
 
-    const items = computed(() => props.items.map(item => {
-      return typeof item === 'string' ? { item: { title: item }, raw: item } : { item, raw: item }
-    }))
-    const ellipsisEnabled = toRef(() => props.totalVisible ? items.value.length > props.totalVisible : false)
+    const items = computed(() => props.items.map(item =>
+      typeof item === 'string' ? { item: { title: item }, raw: item } : { item, raw: item }
+    ))
+    const ellipsisEnabled = toRef(() => items.value.length > props.totalVisible)
     const hasEllipsis = ref(ellipsisEnabled.value)
+    const collapseStartIndex = toRef(() => Math.min(props.collapseFrom, props.totalVisible))
+    const collapseEndIndex = toRef(() => collapseStartIndex.value + items.value.length - props.totalVisible)
+    const visibleItemsStart = toRef(() =>
+      collapseStartIndex.value < items.value.length ? items.value.slice(0, collapseStartIndex.value) : items.value
+    )
+    const collapsedItems = toRef(() =>
+      items.value.slice(collapseStartIndex.value, collapseEndIndex.value)
+    )
+    const visibleItemsEnd = toRef(() => {
+      const sliceIndex = props.totalVisible - collapseStartIndex.value
+
+      return sliceIndex <= 0 ? [] : items.value.slice(-sliceIndex)
+    })
 
+    const collapse = () => {
+      hasEllipsis.value = ellipsisEnabled.value
+    }
     const onClickEllipsis = () => {
       hasEllipsis.value = false
     }
@@ -135,7 +158,7 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
             props.style,
           ]}
         >
-          <ol>
+          <ol role="list">
           { hasPrepend && (
             <li key="prepend" class="v-breadcrumbs__prepend">
               { !slots.prepend ? (
@@ -188,41 +211,66 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
           { hasEllipsis.value && (
             <>
               { (() => {
-                const { item } = items.value[0]
-                return (
-                  <>
-                    { slots.item?.({ item, index: 0 }) ?? (
-                      <VBreadcrumbsItem
-                        disabled={ false }
-                        { ...(typeof item === 'string' ? { title: item } : item) }
-                      />
-                    )}
-                  </>
-                )
+                return visibleItemsStart.value.map(({ item }, i) => {
+                  const isLast = i === visibleItemsStart.value.length - 1
+
+                  return (
+                    <>
+                      { slots.item?.({ item, index: i }) ?? (
+                        <VBreadcrumbsItem
+                          key={ i }
+                          disabled={ false }
+                          { ...(typeof item === 'string' ? { title: item } : item) }
+                        />
+                      )}
+
+                      { !isLast && (
+                        <VBreadcrumbsDivider />
+                      )}
+                    </>
+                  )
+                })
               })()}
 
-              <VBreadcrumbsDivider />
+              { collapseStartIndex.value > 0 && <VBreadcrumbsDivider /> }
 
               <VBreadcrumbsItem
                 tabindex="0"
                 onClick={ props.collapseInMenu ? noop : onClickEllipsis }
+                onKeydown={ (e: KeyboardEvent) => {
+                  if (!['Enter', ' '].includes(e.key)) return
+                  e.preventDefault()
+                  props.collapseInMenu ? e.currentTarget.click() : onClickEllipsis()
+                }}
                 class="v-breadcrumbs-item--ellipsis"
+                role="button"
+                aria-haspopup={ props.collapseInMenu ? 'menu' : undefined }
+                aria-expanded={ !hasEllipsis.value }
+                aria-label="show more breadcrumb items"
               >
                 { props.ellipsis }
+
                 { props.collapseInMenu ? (
-                  <VMenu
-                    activator="parent"
-                    { ...props.menuProps }
-                  >
+                  <VMenu activator="parent" { ...props.menuProps } role="menu" aria-label="hidden breadcrumb items">
                     {{
                       default: () => (
                         <VList { ...props.listProps }>
-                          { items.value.slice(1, items.value.length - 1).map(({ item }, index) => {
+                          { collapsedItems.value.map(({ item }, index) => {
+                            const isLastCollapsedItem = index === collapsedItems.value.length - 1
+                            const isCurrentPage = !visibleItemsEnd.value.length && isLastCollapsedItem
                             if (slots['list-item']) {
                               return slots['list-item']({ item, index })
                             }
                             return (
-                              <VListItem key={ index } value={ index } href={ 'href' in item ? item.href : undefined }>
+                              <VListItem
+                                key={ index }
+                                value={ index }
+                                active={ isCurrentPage }
+                                aria-current={ isCurrentPage ? 'page' : undefined }
+                                disabled={ isCurrentPage }
+                                href={ 'href' in item ? item.href : undefined }
+                                role="menuitem"
+                              >
                                 <VListItemTitle>{ item.title }</VListItemTitle>
                               </VListItem>
                             )
@@ -234,22 +282,29 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
                 ) : null }
               </VBreadcrumbsItem>
 
-              <VBreadcrumbsDivider />
+              { visibleItemsEnd.value.length > 0 && <VBreadcrumbsDivider /> }
 
               { (() => {
-                const lastIndex = items.value.length - 1
-                const { item } = items.value[lastIndex]
-                return (
-                  <>
-                    { slots.item?.({ item, index: lastIndex }) ?? (
-                      <VBreadcrumbsItem
-                        disabled
-                        active
-                        { ...(typeof item === 'string' ? { title: item } : item) }
-                      />
-                    )}
-                  </>
-                )
+                return visibleItemsEnd.value.map(({ item }, i) => {
+                  const isLast = i === visibleItemsEnd.value.length - 1
+
+                  return (
+                    <>
+                      { slots.item?.({ item, index: i }) ?? (
+                        <VBreadcrumbsItem
+                          key={ i }
+                          disabled={ i === items.value.length - 1 }
+                          active={ i === items.value.length - 1 }
+                          { ...(typeof item === 'string' ? { title: item } : item) }
+                        />
+                      )}
+
+                      { !isLast && (
+                        <VBreadcrumbsDivider key={ `divider-last-${i}` } />
+                      )}
+                    </>
+                  )
+                })
               })()}
             </>
           )}
@@ -259,7 +314,7 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
         </props.tag>
       )
     })
-
+    expose({ collapse })
     return {}
   },
 })