diff --git a/src/components/NcBreadcrumbs/NcBreadcrumbs.vue b/src/components/NcBreadcrumbs/NcBreadcrumbs.vue index 352ff7fe71..b13b279470 100644 --- a/src/components/NcBreadcrumbs/NcBreadcrumbs.vue +++ b/src/components/NcBreadcrumbs/NcBreadcrumbs.vue @@ -176,10 +176,6 @@ export default { emits: ['dropped'], data() { return { - /** - * The breadcrumbs which should be shown in a dropdown Actions menu. - */ - hiddenCrumbs: [], /** * Array to track the hidden breadcrumbs by their index. * Comparing two crumbs somehow does not work, so we use the indices. @@ -239,13 +235,6 @@ export default { unsubscribe('navigation-toggled', this.delayedResize) }, methods: { - /** - * Call the resize function after a delay - */ - async delayedResize() { - await this.$nextTick() - this.handleWindowResize() - }, /** * Close the actions menu * @@ -258,6 +247,13 @@ export default { } this.menuBreadcrumbProps.open = false }, + /** + * Call the resize function after a delay + */ + async delayedResize() { + await this.$nextTick() + this.handleWindowResize() + }, /** * Check the width of the breadcrumb and hide breadcrumbs * if we overflow otherwise. @@ -270,23 +266,6 @@ export default { // All breadcrumb components passed into the default slot const breadcrumbs = Object.values(this.breadcrumbsRefs) - const breadcrumbsVnodes = [] - // We have to iterate over all slot elements - this.$slots.default.forEach(vnode => { - if (this.isBreadcrumb(vnode)) { - breadcrumbsVnodes.push(vnode) - return - } - // If we encounter a Fragment, we have to check its children too - if (vnode?.type === Fragment) { - vnode?.children?.forEach?.(child => { - if (this.isBreadcrumb(child)) { - breadcrumbsVnodes.push(child) - } - }) - } - }) - const nrCrumbs = breadcrumbs.length const hiddenIndices = [] const availableWidth = this.$refs.container.offsetWidth @@ -313,8 +292,6 @@ export default { // We only update the hidden crumbs if they have changed, // otherwise we will run into an infinite update loop. if (!this.arraysEqual(this.hiddenIndices, hiddenIndices.sort((a, b) => a - b))) { - // Get all breadcrumbs based on the hidden indices - this.hiddenCrumbs = hiddenIndices.map((index) => { return breadcrumbsVnodes[index] }) this.hiddenIndices = hiddenIndices } }, @@ -530,6 +507,7 @@ export default { // Add the root icon to the first breadcrumb // eslint-disable-next-line import/no-named-as-default-member Vue.set(breadcrumbs[0].componentOptions.propsData, 'icon', this.rootIcon) + // eslint-disable-next-line import/no-named-as-default-member Vue.set(breadcrumbs[0].componentOptions.propsData, 'ref', 'breadcrumbs') /** @@ -540,13 +518,15 @@ export default { const breadcrumbsRefs = {} // Add the breadcrumbs to the array of the created VNodes, check if hiding them is necessary. breadcrumbs.forEach((crumb, index) => { + // eslint-disable-next-line import/no-named-as-default-member Vue.set(crumb, 'ref', `crumb-${index}`) breadcrumbsRefs[index] = crumb }) // The array of all created VNodes let crumbs = [] - if (!this.hiddenCrumbs.length) { + + if (!this.hiddenIndices.length) { // We don't hide any breadcrumbs. crumbs = breadcrumbs } else { @@ -587,7 +567,8 @@ export default { }, }, // Add all hidden breadcrumbs as ActionRouter or ActionLink - }, this.hiddenCrumbs.map(crumb => { + }, this.hiddenIndices.map(index => { + const crumb = breadcrumbs[index] // Get the parameters from the breadcrumb component props const to = crumb.componentOptions.propsData.to const href = crumb.componentOptions.propsData.href @@ -653,7 +634,7 @@ export default { this.breadcrumbsRefs = breadcrumbsRefs - return h('div', { class: ['breadcrumb', { 'breadcrumb--collapsed': (this.hiddenCrumbs.length === breadcrumbs.length - 2) }], ref: 'container' }, wrapper) + return h('div', { class: ['breadcrumb', { 'breadcrumb--collapsed': (this.hiddenIndices.length === breadcrumbs.length - 2) }], ref: 'container' }, wrapper) }, }