@nextcloud/vue 8.0.0-beta.6 → 8.0.0-beta.8

package/dist/Components/NcBreadcrumbs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcBreadcrumbs.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"NcBreadcrumbs.cjs","sources":["../../src/utils/ValidateSlot.js","../../src/components/NcBreadcrumbs/NcBreadcrumbs.vue"],"sourcesContent":["/**\n * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @author John Molakvoæ <skjnldsv@protonmail.com>\n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n *\n */\nimport Vue from 'vue'\n\n/**\n * Validate children of a vue component\n *\n * @param {object[]} slots the vue component slot\n * @param {string[]} allowed the allowed components name\n * @param {object} vm the vue component instance\n */\nconst ValidateSlot = (slots, allowed, vm) => {\n\tif (slots === undefined) {\n\t\treturn\n\t}\n\n\tfor (let index = slots.length - 1; index >= 0; index--) {\n\t\tconst node = slots[index]\n\t\t// also check against allowed to avoid uninitiated vnodes with no componentOptions\n\t\tconst isHtmlElement = !node.componentOptions && node.tag && allowed.indexOf(node.tag) === -1\n\t\tconst isVueComponent = !!node.componentOptions && typeof node.componentOptions.tag === 'string'\n\t\tconst isForbiddenComponent = isVueComponent && allowed.indexOf(node.componentOptions.tag) === -1\n\n\t\t// if html element or not a vue component or vue component not in allowed tags\n\t\tif (isHtmlElement || !isVueComponent || isForbiddenComponent) {\n\t\t\t// only warn when html elment or forbidden component\n\t\t\t// sometimes text nodes are present which are hardly removeable by the developer and spam the warnings\n\t\t\tif (isHtmlElement || isForbiddenComponent) {\n\t\t\t\tVue.util.warn(`${isHtmlElement ? node.tag : node.componentOptions.tag} is not allowed inside the ${vm.$options.name} component`, vm)\n\t\t\t}\n\n\t\t\t// cleanup\n\t\t\tslots.splice(index, 1)\n\t\t}\n\t}\n}\n\nexport default ValidateSlot\n","<!--\n - @copyright Copyright (c) 2020 Raimund Schlüßler <raimund.schluessler@mailbox.org>\n -\n - @author Raimund Schlüßler <raimund.schluessler@mailbox.org>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n\n### General description\n\nThis component renders a breadcrumb bar. It adjusts to the available width\nby hiding breadcrumbs in a dropdown menu and emits an event when something\nis dropped on a creadcrumb.\n\n### Usage\n\n```vue\n<template>\n\t<div>\n\t\t<div class=\"container\">\n\t\t\t<NcBreadcrumbs @dropped=\"dropped\">\n\t\t\t\t<NcBreadcrumb name=\"Home\"\n\t\t\t\t\ttitle=\"Title of the Home folder\"\n\t\t\t\t\thref=\"/\"\n\t\t\t\t\t@dropped=\"droppedOnCrumb\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Folder :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcBreadcrumb>\n\t\t\t\t<NcBreadcrumb name=\"Folder 1\"\n\t\t\t\t\ttitle=\"Folder 1\"\n\t\t\t\t\thref=\"/Folder 1\" />\n\t\t\t\t<NcBreadcrumb name=\"Folder 2\"\n\t\t\t\t\thref=\"/Folder 1/Folder 2\"\n\t\t\t\t\t:disable-drop=\"true\" />\n\t\t\t\t<NcBreadcrumb name=\"Folder 3\"\n\t\t\t\t\ttitle=\"Folder 3\"\n\t\t\t\t\thref=\"/Folder 1/Folder 2/Folder 3\" />\n\t\t\t\t<NcBreadcrumb name=\"Folder 4\"\n\t\t\t\t\ttitle=\"Folder 4\"\n\t\t\t\t\thref=\"/Folder 1/Folder 2/Folder 3/Folder 4\" />\n\t\t\t\t<NcBreadcrumb name=\"Folder 5\"\n\t\t\t\t\ttitle=\"Folder 5\"\n\t\t\t\t\thref=\"/Folder 1/Folder 2/Folder 3/Folder 4/Folder 5\"\n\t\t\t\t\t:disable-drop=\"true\">\n\t\t\t\t\t<template #menu-icon>\n\t\t\t\t\t\t<MenuDown :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t<NcActionButton @click=\"alert('Share')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tShare\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton @click=\"alert('Download')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Download :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDownload\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</NcBreadcrumb>\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tNew\n\t\t\t\t\t</NcButton>\n\t\t\t\t</template>\n\t\t\t</NcBreadcrumbs>\n\t\t</div>\n\t\t<br />\n\t\t<div class=\"dragme\" draggable=\"true\" @dragstart=\"dragStart\">\n\t\t\t<span>Drag me onto the breadcrumbs.</span>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport Download from 'vue-material-design-icons/Download'\nimport Folder from 'vue-material-design-icons/Folder'\nimport MenuDown from 'vue-material-design-icons/MenuDown'\nimport Plus from 'vue-material-design-icons/Plus'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant'\n\nexport default {\n\tcomponents: {\n\t\tDownload,\n\t\tFolder,\n\t\tMenuDown,\n\t\tPlus,\n\t\tShareVariant,\n\t},\n\tmethods: {\n\t\tdropped(e, path) {\n\t\t\talert('Global drop on ' + path)\n\t\t},\n\t\tdroppedOnCrumb(e, path) {\n\t\t\talert('Drop on crumb ' + path)\n\t\t},\n\t\tdragStart(e) {\n\t\t\te.dataTransfer.setData('text/plain', 'dragging')\n\t\t},\n\t}\n}\n</script>\n<style>\n.container {\n\tdisplay: inline-flex;\n\twidth: 100%;\n}\n\n.dragme {\n\tdisplay: block;\n\twidth: 100px;\n\theight: 44px;\n\tbackground-color: var(--color-background-dark);\n}\n</style>\n```\n</docs>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcActionRouter from '../NcActionRouter/index.js'\nimport NcActionLink from '../NcActionLink/index.js'\nimport NcBreadcrumb from '../NcBreadcrumb/index.js'\nimport ValidateSlot from '../../utils/ValidateSlot.js'\n\nimport { subscribe, unsubscribe } from '@nextcloud/event-bus'\n\nimport IconFolder from 'vue-material-design-icons/Folder.vue'\n\nimport debounce from 'debounce'\nimport Vue from 'vue'\nimport { Fragment } from 'vue-frag'\n\nconst crumbClass = 'vue-crumb'\n\nexport default {\n\tname: 'NcBreadcrumbs',\n\tcomponents: {\n\t\tNcActions,\n\t\tNcActionButton,\n\t\tNcActionRouter,\n\t\tNcActionLink,\n\t\tNcBreadcrumb,\n\t\tIconFolder,\n\t},\n\tprops: {\n\t\t/**\n\t\t * Set a css icon-class for the icon of the root breadcrumb to be used.\n\t\t */\n\t\trootIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: 'icon-home',\n\t\t},\n\t},\n\temits: ['dropped'],\n\tdata() {\n\t\treturn {\n\t\t\t/**\n\t\t\t * Array to track the hidden breadcrumbs by their index.\n\t\t\t * Comparing two crumbs somehow does not work, so we use the indices.\n\t\t\t */\n\t\t\thiddenIndices: [],\n\n\t\t\t/**\n\t\t\t * This is the props of the middle Action menu\n\t\t\t * that show the ellipsised breadcrumbs\n\t\t\t */\n\t\t\tmenuBreadcrumbProps: {\n\t\t\t\t// Don't show a name for this breadcrumb, only the Actions menu\n\t\t\t\tname: '',\n\t\t\t\tforceMenu: true,\n\t\t\t\t// Don't allow dropping directly on the actions breadcrumb\n\t\t\t\tdisableDrop: true,\n\t\t\t\t// Is the menu open or not\n\t\t\t\topen: false,\n\t\t\t},\n\t\t\tbreadcrumbsRefs: {},\n\t\t}\n\t},\n\tbeforeMount() {\n\t\t// Filter all invalid items, only Breadcrumb components are allowed\n\t\tValidateSlot(this.$slots.default, ['NcBreadcrumb'], this)\n\t},\n\tbeforeUpdate() {\n\t\t// Also check before every update\n\t\tValidateSlot(this.$slots.default, ['NcBreadcrumb'], this)\n\t},\n\tcreated() {\n\t\t/**\n\t\t * Add a listener so the component reacts on resize\n\t\t */\n\t\twindow.addEventListener('resize', debounce(() => {\n\t\t\tthis.handleWindowResize()\n\t\t}, 100))\n\t\tsubscribe('navigation-toggled', this.delayedResize)\n\t},\n\tmounted() {\n\t\tthis.handleWindowResize()\n\t},\n\tupdated() {\n\t\t/**\n\t\t * Check the size on update\n\t\t */\n\t\tthis.delayedResize()\n\t\t/**\n\t\t * Check that crumbs to hide are hidden\n\t\t */\n\t\tthis.$nextTick(() => {\n\t\t\tthis.hideCrumbs()\n\t\t})\n\t},\n\tbeforeDestroy() {\n\t\twindow.removeEventListener('resize', this.handleWindowResize)\n\t\tunsubscribe('navigation-toggled', this.delayedResize)\n\t},\n\tmethods: {\n\t\t/**\n\t\t * Close the actions menu\n\t\t *\n\t\t * @param {object} e The event\n\t\t */\n\t\tcloseActions(e) {\n\t\t\t// Don't do anything if we leave towards a child element.\n\t\t\tif (this.$refs.actionsBreadcrumb.$el.contains(e.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.menuBreadcrumbProps.open = false\n\t\t},\n\t\t/**\n\t\t * Call the resize function after a delay\n\t\t */\n\t\t async delayedResize() {\n\t\t\tawait this.$nextTick()\n\t\t\tthis.handleWindowResize()\n\t\t},\n\t\t/**\n\t\t * Check the width of the breadcrumb and hide breadcrumbs\n\t\t * if we overflow otherwise.\n\t\t */\n\t\thandleWindowResize() {\n\t\t\t// If there is no container yet, we cannot determine its size\n\t\t\tif (!this.$refs.container) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// All breadcrumb components passed into the default slot\n\t\t\tconst breadcrumbs = Object.values(this.breadcrumbsRefs)\n\n\t\t\tconst nrCrumbs = breadcrumbs.length\n\t\t\tconst hiddenIndices = []\n\t\t\tconst availableWidth = this.$refs.container.offsetWidth\n\t\t\tlet totalWidth = this.getTotalWidth(breadcrumbs)\n\t\t\t// If we have breadcumbs actions, we have to take their width into account too.\n\t\t\tif (this.$refs.breadcrumb__actions) {\n\t\t\t\ttotalWidth += this.$refs.breadcrumb__actions.offsetWidth\n\t\t\t}\n\t\t\tlet overflow = totalWidth - availableWidth\n\t\t\t// If we overflow, we have to take the action-item width into account as well.\n\t\t\toverflow += (overflow > 0) ? 64 : 0\n\t\t\tlet i = 0\n\t\t\t// We start hiding the breadcrumb in the center\n\t\t\tconst startIndex = Math.floor(nrCrumbs / 2)\n\t\t\t// Don't hide the first and last breadcrumb\n\t\t\twhile (overflow > 0 && i < nrCrumbs - 2) {\n\t\t\t\t// We hide elements alternating to the left and right\n\t\t\t\tconst currentIndex = startIndex + ((i % 2) ? i + 1 : i) / 2 * Math.pow(-1, i + (nrCrumbs % 2))\n\t\t\t\t// Calculate the remaining overflow width after hiding this breadcrumb\n\t\t\t\toverflow -= this.getWidth(breadcrumbs[currentIndex]?.elm)\n\t\t\t\thiddenIndices.push(currentIndex)\n\t\t\t\ti++\n\t\t\t}\n\t\t\t// We only update the hidden crumbs if they have changed,\n\t\t\t// otherwise we will run into an infinite update loop.\n\t\t\tif (!this.arraysEqual(this.hiddenIndices, hiddenIndices.sort((a, b) => a - b))) {\n\t\t\t\tthis.hiddenIndices = hiddenIndices\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Checks if two arrays are equal.\n\t\t * Only works for primitive arrays, but that's enough here.\n\t\t *\n\t\t * @param {Array} a The first array\n\t\t * @param {Array} b The second array\n\t\t * @return {boolean} Wether the arrays are equal\n\t\t */\n\t\tarraysEqual(a, b) {\n\t\t\tif (a.length !== b.length) return false\n\t\t\tif (a === b) return true\n\t\t\tif (a === null || b === null) return false\n\n\t\t\tfor (let i = 0; i < a.length; ++i) {\n\t\t\t\tif (a[i] !== b[i]) {\n\t\t\t\t\treturn false\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn true\n\t\t},\n\t\t/**\n\t\t * Calculates the total width of all breadcrumbs\n\t\t *\n\t\t * @param {Array} breadcrumbs All breadcrumbs\n\t\t * @return {number} The total width\n\t\t */\n\t\tgetTotalWidth(breadcrumbs) {\n\t\t\treturn breadcrumbs.reduce((width, crumb, index) => width + this.getWidth(crumb?.elm), 0)\n\t\t},\n\t\t/**\n\t\t * Calculates the width of the provided element\n\t\t *\n\t\t * @param {object} el The element\n\t\t * @return {number} The width\n\t\t */\n\t\tgetWidth(el) {\n\t\t\tif (!el?.classList) return 0\n\t\t\tconst hide = el.classList.contains(`${crumbClass}--hidden`)\n\t\t\tel.style.minWidth = 'auto'\n\t\t\tel.classList.remove(`${crumbClass}--hidden`)\n\t\t\tconst w = el.offsetWidth\n\t\t\tif (hide) {\n\t\t\t\tel.classList.add(`${crumbClass}--hidden`)\n\t\t\t}\n\t\t\tel.style.minWidth = ''\n\t\t\treturn w\n\t\t},\n\t\t/**\n\t\t * Prevents the default of a provided event\n\t\t *\n\t\t * @param {object} e The event\n\t\t * @return {boolean}\n\t\t */\n\t\tpreventDefault(e) {\n\t\t\tif (e.preventDefault) {\n\t\t\t\te.preventDefault()\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\t/**\n\t\t * Handles the drag start.\n\t\t * Prevents a breadcrumb from being draggable.\n\t\t *\n\t\t * @param {object} e The event\n\t\t * @return {boolean}\n\t\t */\n\t\tdragStart(e) {\n\t\t\treturn this.preventDefault(e)\n\t\t},\n\t\t/**\n\t\t * Handles when something is dropped on the breadcrumb.\n\t\t *\n\t\t * @param {object} e The drop event\n\t\t * @param {string} path The path of the breadcrumb\n\t\t * @param {boolean} disabled Whether dropping is disabled for this breadcrumb\n\t\t * @return {boolean}\n\t\t */\n\t\tdropped(e, path, disabled) {\n\t\t\t/**\n\t\t\t * Don't emit if dropping is disabled.\n\t\t\t */\n\t\t\tif (!disabled) {\n\t\t\t\t/**\n\t\t\t\t * Event emitted when something is dropped on the breadcrumb.\n\t\t\t\t *\n\t\t\t\t * @param {Event} e the drop DOM event\n\t\t\t\t * @param {string} path The path of the breadcrumb\n\t\t\t\t */\n\t\t\t\tthis.$emit('dropped', e, path)\n\t\t\t}\n\t\t\t// Close the actions menu after the drop\n\t\t\tthis.menuBreadcrumbProps.open = false\n\n\t\t\t// Remove all hovering classes\n\t\t\tconst crumbs = document.querySelectorAll(`.${crumbClass}`)\n\t\t\tcrumbs.forEach((f) => { f.classList.remove(`${crumbClass}--hovered`) })\n\t\t\treturn this.preventDefault(e)\n\t\t},\n\t\t/**\n\t\t * Handles the drag over event\n\t\t *\n\t\t * @param {object} e The drag over event\n\t\t * @return {boolean}\n\t\t */\n\t\tdragOver(e) {\n\t\t\treturn this.preventDefault(e)\n\t\t},\n\t\t/**\n\t\t * Handles the drag enter event\n\t\t *\n\t\t * @param {object} e The drag over event\n\t\t * @param {boolean} disabled Whether dropping is disabled for this breadcrumb\n\t\t */\n\t\tdragEnter(e, disabled) {\n\t\t\t/**\n\t\t\t * Don't do anything if dropping is disabled.\n\t\t\t */\n\t\t\tif (disabled) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Get the correct element, in case we hover a child.\n\t\t\tif (e.target.closest) {\n\t\t\t\tconst target = e.target.closest(`.${crumbClass}`)\n\t\t\t\tif (target.classList && target.classList.contains(crumbClass)) {\n\t\t\t\t\tconst crumbs = document.querySelectorAll(`.${crumbClass}`)\n\t\t\t\t\tcrumbs.forEach((f) => { f.classList.remove(`${crumbClass}--hovered`) })\n\t\t\t\t\ttarget.classList.add(`${crumbClass}--hovered`)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Handles the drag leave event\n\t\t *\n\t\t * @param {object} e The drag leave event\n\t\t * @param {boolean} disabled Whether dropping is disabled for this breadcrumb\n\t\t */\n\t\tdragLeave(e, disabled) {\n\t\t\t/**\n\t\t\t * Don't do anything if dropping is disabled.\n\t\t\t */\n\t\t\tif (disabled) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Don't do anything if we leave towards a child element.\n\t\t\tif (e.target.contains(e.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Get the correct element, in case we leave directly from a child.\n\t\t\tif (e.target.closest) {\n\t\t\t\tconst target = e.target.closest(`.${crumbClass}`)\n\t\t\t\tif (target.contains(e.relatedTarget)) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tif (target.classList && target.classList.contains(crumbClass)) {\n\t\t\t\t\ttarget.classList.remove(`${crumbClass}--hovered`)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Check for each crumb if we have to hide it and\n\t\t * add it to the array of all crumbs.\n\t\t */\n\t\thideCrumbs() {\n\t\t\tconst crumbs = Object.values(this.breadcrumbsRefs)\n\t\t\tcrumbs.forEach((crumb, i) => {\n\t\t\t\tif (crumb?.elm?.classList) {\n\t\t\t\t\tif (this.hiddenIndices.includes(i)) {\n\t\t\t\t\t\tcrumb.elm.classList.add(`${crumbClass}--hidden`)\n\t\t\t\t\t} else {\n\t\t\t\t\t\tcrumb.elm.classList.remove(`${crumbClass}--hidden`)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\n\t\tisBreadcrumb(vnode) {\n\t\t\treturn (vnode?.componentOptions?.tag || vnode?.tag || '').includes('NcBreadcrumb')\n\t\t},\n\t},\n\t/**\n\t * The render function to display the component\n\t *\n\t * @param {Function} h The function to create VNodes\n\t * @return {object|undefined} The created VNode\n\t */\n\trender(h) {\n\t\t// Get the breadcrumbs\n\t\tconst breadcrumbs = []\n\t\t// We have to iterate over all slot elements\n\t\tthis.$slots.default.forEach(vnode => {\n\t\t\tif (this.isBreadcrumb(vnode)) {\n\t\t\t\tbreadcrumbs.push(vnode)\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// If we encounter a Fragment, we have to check its children too\n\t\t\tif (vnode?.type === Fragment) {\n\t\t\t\tvnode?.children?.forEach?.(child => {\n\t\t\t\t\tif (this.isBreadcrumb(child)) {\n\t\t\t\t\t\tbreadcrumbs.push(child)\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\n\t\t// Check that we have at least one breadcrumb\n\t\tif (breadcrumbs.length === 0) {\n\t\t\treturn\n\t\t}\n\n\t\t// Add the root icon to the first breadcrumb\n\t\t// eslint-disable-next-line import/no-named-as-default-member\n\t\tVue.set(breadcrumbs[0].componentOptions.propsData, 'icon', this.rootIcon)\n\t\t// eslint-disable-next-line import/no-named-as-default-member\n\t\tVue.set(breadcrumbs[0].componentOptions.propsData, 'ref', 'breadcrumbs')\n\n\t\t/**\n\t\t * Use a proxy object to store breadcrumbs refs\n\t\t * and don't write to this.breadcrumbsRefs directly\n\t\t * to not trigger a myriad of re-renders.\n\t\t */\n\t\tconst breadcrumbsRefs = {}\n\t\t// Add the breadcrumbs to the array of the created VNodes, check if hiding them is necessary.\n\t\tbreadcrumbs.forEach((crumb, index) => {\n\t\t\t// eslint-disable-next-line import/no-named-as-default-member\n\t\t\tVue.set(crumb, 'ref', `crumb-${index}`)\n\t\t\tbreadcrumbsRefs[index] = crumb\n\t\t})\n\n\t\t// The array of all created VNodes\n\t\tlet crumbs = []\n\n\t\tif (!this.hiddenIndices.length) {\n\t\t\t// We don't hide any breadcrumbs.\n\t\t\tcrumbs = breadcrumbs\n\t\t} else {\n\t\t\t/**\n\t\t\t * We show the first half of the breadcrumbs before the Actions dropdown menu\n\t\t\t * which shows the hidden breadcrumbs.\n\t\t\t */\n\t\t\t// Add the breadcrumbs to the array of the created VNodes, check if hiding them is necessary.\n\t\t\tcrumbs = breadcrumbs.slice(0, Math.round(breadcrumbs.length / 2))\n\n\t\t\t// The Actions menu\n\t\t\t// Use a breadcrumb component for the hidden breadcrumbs\n\t\t\tcrumbs.push(h('NcBreadcrumb', {\n\t\t\t\tclass: 'dropdown',\n\n\t\t\t\tprops: this.menuBreadcrumbProps,\n\n\t\t\t\tattrs: {\n\t\t\t\t\t// Hide the dropdown menu from screen-readers,\n\t\t\t\t\t// since the crumbs in the menu are still in the list.\n\t\t\t\t\t'aria-hidden': true,\n\t\t\t\t},\n\n\t\t\t\t// Add a ref to the Actions menu\n\t\t\t\tref: 'actionsBreadcrumb',\n\t\t\t\tkey: 'actions-breadcrumb-1',\n\t\t\t\t// Add handlers so the Actions menu opens on hover\n\t\t\t\tnativeOn: {\n\t\t\t\t\tdragstart: this.dragStart,\n\t\t\t\t\tdragenter: () => { this.menuBreadcrumbProps.open = true },\n\t\t\t\t\tdragleave: this.closeActions,\n\t\t\t\t},\n\t\t\t\ton: {\n\t\t\t\t\t// Make sure we keep the same open state\n\t\t\t\t\t// as the Actions component\n\t\t\t\t\t'update:open': (open) => {\n\t\t\t\t\t\tthis.menuBreadcrumbProps.open = open\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t// Add all hidden breadcrumbs as ActionRouter or ActionLink\n\t\t\t}, this.hiddenIndices.map(index => {\n\t\t\t\tconst crumb = breadcrumbs[index]\n\t\t\t\t// Get the parameters from the breadcrumb component props\n\t\t\t\tconst to = crumb.componentOptions.propsData.to\n\t\t\t\tconst href = crumb.componentOptions.propsData.href\n\t\t\t\tconst disabled = crumb.componentOptions.propsData.disableDrop\n\t\t\t\tconst title = crumb.componentOptions.propsData.title\n\t\t\t\tconst name = crumb.componentOptions.propsData.name\n\n\t\t\t\t// Decide whether to show the breadcrumbs as ActionButton, ActionRouter or ActionLink\n\t\t\t\tlet element = 'NcActionButton'\n\t\t\t\tlet path = ''\n\t\t\t\tif (href) {\n\t\t\t\t\telement = 'NcActionLink'\n\t\t\t\t\tpath = href\n\t\t\t\t}\n\t\t\t\tif (to) {\n\t\t\t\t\telement = 'NcActionRouter'\n\t\t\t\t\tpath = to\n\t\t\t\t}\n\t\t\t\tconst folderIcon = h('IconFolder', {\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tsize: 20,\n\t\t\t\t\t},\n\t\t\t\t\tslot: 'icon',\n\t\t\t\t})\n\t\t\t\treturn h(element, {\n\t\t\t\t\tclass: crumbClass,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\thref: href || null,\n\t\t\t\t\t\ttitle,\n\t\t\t\t\t\tto: to || null,\n\t\t\t\t\t},\n\t\t\t\t\t// Prevent the breadcrumbs from being draggable\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\tdraggable: false,\n\t\t\t\t\t},\n\t\t\t\t\ton: {\n\t\t\t\t\t\t...crumb.componentOptions.listeners,\n\t\t\t\t\t},\n\t\t\t\t\t// Add the drag and drop handlers\n\t\t\t\t\tnativeOn: {\n\t\t\t\t\t\tdragstart: this.dragStart,\n\t\t\t\t\t\tdrop: ($event) => this.dropped($event, path, disabled),\n\t\t\t\t\t\tdragover: this.dragOver,\n\t\t\t\t\t\tdragenter: ($event) => this.dragEnter($event, disabled),\n\t\t\t\t\t\tdragleave: ($event) => this.dragLeave($event, disabled),\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t[folderIcon, name],\n\t\t\t\t)\n\t\t\t})),\n\t\t\t)\n\n\t\t\t// The second half of the breadcrumbs\n\t\t\tconst crumbs2 = breadcrumbs.slice(Math.round(breadcrumbs.length / 2))\n\t\t\tcrumbs = crumbs.concat(crumbs2)\n\t\t}\n\n\t\tconst wrapper = [h('nav', {}, [h('ul', { class: 'breadcrumb__crumbs' }, [crumbs])])]\n\t\t// Append the actions slot if it is populated\n\t\tif (this.$slots.actions) {\n\t\t\twrapper.push(h('div', { class: 'breadcrumb__actions', ref: 'breadcrumb__actions' }, this.$slots.actions))\n\t\t}\n\n\t\tthis.breadcrumbsRefs = breadcrumbsRefs\n\n\t\treturn h('div', { class: ['breadcrumb', { 'breadcrumb--collapsed': (this.hiddenIndices.length === breadcrumbs.length - 2) }], ref: 'container' }, wrapper)\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.breadcrumb {\n\twidth: 100%;\n\tflex-grow: 1;\n\tdisplay: inline-flex;\n\talign-items: center;\n\n\t&--collapsed  :deep(.vue-crumb:last-child) {\n\t\tmin-width: 100px;\n\t\tflex-shrink: 1;\n\t}\n\n\tnav {\n\t\tflex-shrink: 1;\n\t\tmax-width: 100%;\n\t\t/**\n\t\t * This value is given by the min-width of the last crumb (100px) plus\n\t\t * two times the width of a crumb with an icon (first crumb and hidden crumbs actions).\n\t\t */\n\t\tmin-width: 228px;\n\t}\n\n\t& #{&}__crumbs {\n\t\tmax-width: 100%;\n\t}\n\n\t& #{&}__crumbs,\n\t& #{&}__actions {\n\t\tdisplay: inline-flex;\n\t}\n}\n</style>\n"],"names":["ValidateSlot","slots","allowed","vm","index","node","isHtmlElement","isVueComponent","isForbiddenComponent","Vue__default","crumbClass","_sfc_main","Components_NcActions","Components_NcActionButton","Components_NcActionRouter","Components_NcActionLink","Components_NcBreadcrumb","IconFolder__default","debounce__default","eventBus","breadcrumbs","nrCrumbs","hiddenIndices","availableWidth","totalWidth","overflow","i","startIndex","currentIndex","_a","a","b","width","crumb","el","hide","w","path","disabled","f","target","vnode","h","vueFrag","_b","child","breadcrumbsRefs","crumbs","open","to","href","title","name","element","folderIcon","$event","crumbs2","wrapper"],"mappings":"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"}

package/dist/Components/NcBreadcrumbs.mjs

@@ -1,153 +1,384 @@
-import "../assets/index46.css";
+import "../assets/index-33da80f0.css";
 import O from "./NcActions.mjs";
-import L from "./NcActionButton.mjs";
-import B from "./NcActionRouter.mjs";
-import y from "./NcActionLink.mjs";
-import D from "./NcBreadcrumb.mjs";
-import p from "vue";
-import { subscribe as R, unsubscribe as W } from "@nextcloud/event-bus";
-import w from "vue-material-design-icons/Folder.vue";
-import N from "debounce";
-import { Fragment as z } from "vue-frag";
-import { n as E } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
+import B from "./NcActionButton.mjs";
+import L from "./NcActionRouter.mjs";
+import v from "./NcActionLink.mjs";
+import y from "./NcBreadcrumb.mjs";
+import h from "vue";
+import { subscribe as w, unsubscribe as R } from "@nextcloud/event-bus";
+import W from "vue-material-design-icons/Folder.vue";
+import D from "debounce";
+import { Fragment as I } from "vue-frag";
+import { n as N } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+/**
+ * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
 const b = (t, e, s) => {
   if (t !== void 0)
-    for (let o = t.length - 1; o >= 0; o--) {
-      const a = t[o], r = !a.componentOptions && a.tag && e.indexOf(a.tag) === -1, n = !!a.componentOptions && typeof a.componentOptions.tag == "string", c = n && e.indexOf(a.componentOptions.tag) === -1;
-      (r || !n || c) && ((r || c) && p.util.warn(`${r ? a.tag : a.componentOptions.tag} is not allowed inside the ${s.$options.name} component`, s), t.splice(o, 1));
+    for (let i = t.length - 1; i >= 0; i--) {
+      const o = t[i], r = !o.componentOptions && o.tag && e.indexOf(o.tag) === -1, n = !!o.componentOptions && typeof o.componentOptions.tag == "string", c = n && e.indexOf(o.componentOptions.tag) === -1;
+      (r || !n || c) && ((r || c) && h.util.warn(`${r ? o.tag : o.componentOptions.tag} is not allowed inside the ${s.$options.name} component`, s), t.splice(i, 1));
     }
 };
-const i = "vue-crumb", A = { name: "NcBreadcrumbs", components: { NcActions: O, NcActionButton: L, NcActionRouter: B, NcActionLink: y, NcBreadcrumb: D, IconFolder: w }, props: { rootIcon: { type: String, default: "icon-home" } }, emits: ["dropped"], data() {
-  return { hiddenIndices: [], menuBreadcrumbProps: { name: "", forceMenu: !0, disableDrop: !0, open: !1 }, breadcrumbsRefs: {} };
-}, beforeMount() {
-  b(this.$slots.default, ["NcBreadcrumb"], this);
-}, beforeUpdate() {
-  b(this.$slots.default, ["NcBreadcrumb"], this);
-}, created() {
-  window.addEventListener("resize", N(() => {
+const a = "vue-crumb", z = {
+  name: "NcBreadcrumbs",
+  components: {
+    NcActions: O,
+    NcActionButton: B,
+    NcActionRouter: L,
+    NcActionLink: v,
+    NcBreadcrumb: y,
+    IconFolder: W
+  },
+  props: {
+    /**
+     * Set a css icon-class for the icon of the root breadcrumb to be used.
+     */
+    rootIcon: {
+      type: String,
+      default: "icon-home"
+    }
+  },
+  emits: ["dropped"],
+  data() {
+    return {
+      /**
+       * Array to track the hidden breadcrumbs by their index.
+       * Comparing two crumbs somehow does not work, so we use the indices.
+       */
+      hiddenIndices: [],
+      /**
+       * This is the props of the middle Action menu
+       * that show the ellipsised breadcrumbs
+       */
+      menuBreadcrumbProps: {
+        // Don't show a name for this breadcrumb, only the Actions menu
+        name: "",
+        forceMenu: !0,
+        // Don't allow dropping directly on the actions breadcrumb
+        disableDrop: !0,
+        // Is the menu open or not
+        open: !1
+      },
+      breadcrumbsRefs: {}
+    };
+  },
+  beforeMount() {
+    b(this.$slots.default, ["NcBreadcrumb"], this);
+  },
+  beforeUpdate() {
+    b(this.$slots.default, ["NcBreadcrumb"], this);
+  },
+  created() {
+    window.addEventListener("resize", D(() => {
+      this.handleWindowResize();
+    }, 100)), w("navigation-toggled", this.delayedResize);
+  },
+  mounted() {
     this.handleWindowResize();
-  }, 100)), R("navigation-toggled", this.delayedResize);
-}, mounted() {
-  this.handleWindowResize();
-}, updated() {
-  this.delayedResize(), this.$nextTick(() => {
-    this.hideCrumbs();
-  });
-}, beforeDestroy() {
-  window.removeEventListener("resize", this.handleWindowResize), W("navigation-toggled", this.delayedResize);
-}, methods: { closeActions(t) {
-  this.$refs.actionsBreadcrumb.$el.contains(t.relatedTarget) || (this.menuBreadcrumbProps.open = !1);
-}, async delayedResize() {
-  await this.$nextTick(), this.handleWindowResize();
-}, handleWindowResize() {
-  var d;
-  if (!this.$refs.container)
-    return;
-  const t = Object.values(this.breadcrumbsRefs), e = t.length, s = [], o = this.$refs.container.offsetWidth;
-  let a = this.getTotalWidth(t);
-  this.$refs.breadcrumb__actions && (a += this.$refs.breadcrumb__actions.offsetWidth);
-  let r = a - o;
-  r += r > 0 ? 64 : 0;
-  let n = 0;
-  const c = Math.floor(e / 2);
-  for (; r > 0 && n < e - 2; ) {
-    const l = c + (n % 2 ? n + 1 : n) / 2 * Math.pow(-1, n + e % 2);
-    r -= this.getWidth((d = t[l]) == null ? void 0 : d.elm), s.push(l), n++;
-  }
-  this.arraysEqual(this.hiddenIndices, s.sort((l, h) => l - h)) || (this.hiddenIndices = s);
-}, arraysEqual(t, e) {
-  if (t.length !== e.length)
-    return !1;
-  if (t === e)
-    return !0;
-  if (t === null || e === null)
-    return !1;
-  for (let s = 0; s < t.length; ++s)
-    if (t[s] !== e[s])
-      return !1;
-  return !0;
-}, getTotalWidth(t) {
-  return t.reduce((e, s, o) => e + this.getWidth(s == null ? void 0 : s.elm), 0);
-}, getWidth(t) {
-  if (!(t != null && t.classList))
-    return 0;
-  const e = t.classList.contains(`${i}--hidden`);
-  t.style.minWidth = "auto", t.classList.remove(`${i}--hidden`);
-  const s = t.offsetWidth;
-  return e && t.classList.add(`${i}--hidden`), t.style.minWidth = "", s;
-}, preventDefault(t) {
-  return t.preventDefault && t.preventDefault(), !1;
-}, dragStart(t) {
-  return this.preventDefault(t);
-}, dropped(t, e, s) {
-  return s || this.$emit("dropped", t, e), this.menuBreadcrumbProps.open = !1, document.querySelectorAll(`.${i}`).forEach((o) => {
-    o.classList.remove(`${i}--hovered`);
-  }), this.preventDefault(t);
-}, dragOver(t) {
-  return this.preventDefault(t);
-}, dragEnter(t, e) {
-  if (!e && t.target.closest) {
-    const s = t.target.closest(`.${i}`);
-    s.classList && s.classList.contains(i) && (document.querySelectorAll(`.${i}`).forEach((o) => {
-      o.classList.remove(`${i}--hovered`);
-    }), s.classList.add(`${i}--hovered`));
-  }
-}, dragLeave(t, e) {
-  if (!e && !t.target.contains(t.relatedTarget) && t.target.closest) {
-    const s = t.target.closest(`.${i}`);
-    if (s.contains(t.relatedTarget))
-      return;
-    s.classList && s.classList.contains(i) && s.classList.remove(`${i}--hovered`);
-  }
-}, hideCrumbs() {
-  Object.values(this.breadcrumbsRefs).forEach((t, e) => {
-    var s;
-    (s = t == null ? void 0 : t.elm) != null && s.classList && (this.hiddenIndices.includes(e) ? t.elm.classList.add(`${i}--hidden`) : t.elm.classList.remove(`${i}--hidden`));
-  });
-}, isBreadcrumb(t) {
-  var e;
-  return (((e = t == null ? void 0 : t.componentOptions) == null ? void 0 : e.tag) || (t == null ? void 0 : t.tag) || "").includes("NcBreadcrumb");
-} }, render(t) {
-  const e = [];
-  if (this.$slots.default.forEach((r) => {
-    var n, c;
-    if (this.isBreadcrumb(r)) {
-      e.push(r);
+  },
+  updated() {
+    this.delayedResize(), this.$nextTick(() => {
+      this.hideCrumbs();
+    });
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleWindowResize), R("navigation-toggled", this.delayedResize);
+  },
+  methods: {
+    /**
+     * Close the actions menu
+     *
+     * @param {object} e The event
+     */
+    closeActions(t) {
+      this.$refs.actionsBreadcrumb.$el.contains(t.relatedTarget) || (this.menuBreadcrumbProps.open = !1);
+    },
+    /**
+     * 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.
+     */
+    handleWindowResize() {
+      var d;
+      if (!this.$refs.container)
+        return;
+      const t = Object.values(this.breadcrumbsRefs), e = t.length, s = [], i = this.$refs.container.offsetWidth;
+      let o = this.getTotalWidth(t);
+      this.$refs.breadcrumb__actions && (o += this.$refs.breadcrumb__actions.offsetWidth);
+      let r = o - i;
+      r += r > 0 ? 64 : 0;
+      let n = 0;
+      const c = Math.floor(e / 2);
+      for (; r > 0 && n < e - 2; ) {
+        const l = c + (n % 2 ? n + 1 : n) / 2 * Math.pow(-1, n + e % 2);
+        r -= this.getWidth((d = t[l]) == null ? void 0 : d.elm), s.push(l), n++;
+      }
+      this.arraysEqual(this.hiddenIndices, s.sort((l, u) => l - u)) || (this.hiddenIndices = s);
+    },
+    /**
+     * Checks if two arrays are equal.
+     * Only works for primitive arrays, but that's enough here.
+     *
+     * @param {Array} a The first array
+     * @param {Array} b The second array
+     * @return {boolean} Wether the arrays are equal
+     */
+    arraysEqual(t, e) {
+      if (t.length !== e.length)
+        return !1;
+      if (t === e)
+        return !0;
+      if (t === null || e === null)
+        return !1;
+      for (let s = 0; s < t.length; ++s)
+        if (t[s] !== e[s])
+          return !1;
+      return !0;
+    },
+    /**
+     * Calculates the total width of all breadcrumbs
+     *
+     * @param {Array} breadcrumbs All breadcrumbs
+     * @return {number} The total width
+     */
+    getTotalWidth(t) {
+      return t.reduce((e, s, i) => e + this.getWidth(s == null ? void 0 : s.elm), 0);
+    },
+    /**
+     * Calculates the width of the provided element
+     *
+     * @param {object} el The element
+     * @return {number} The width
+     */
+    getWidth(t) {
+      if (!(t != null && t.classList))
+        return 0;
+      const e = t.classList.contains(`${a}--hidden`);
+      t.style.minWidth = "auto", t.classList.remove(`${a}--hidden`);
+      const s = t.offsetWidth;
+      return e && t.classList.add(`${a}--hidden`), t.style.minWidth = "", s;
+    },
+    /**
+     * Prevents the default of a provided event
+     *
+     * @param {object} e The event
+     * @return {boolean}
+     */
+    preventDefault(t) {
+      return t.preventDefault && t.preventDefault(), !1;
+    },
+    /**
+     * Handles the drag start.
+     * Prevents a breadcrumb from being draggable.
+     *
+     * @param {object} e The event
+     * @return {boolean}
+     */
+    dragStart(t) {
+      return this.preventDefault(t);
+    },
+    /**
+     * Handles when something is dropped on the breadcrumb.
+     *
+     * @param {object} e The drop event
+     * @param {string} path The path of the breadcrumb
+     * @param {boolean} disabled Whether dropping is disabled for this breadcrumb
+     * @return {boolean}
+     */
+    dropped(t, e, s) {
+      return s || this.$emit("dropped", t, e), this.menuBreadcrumbProps.open = !1, document.querySelectorAll(`.${a}`).forEach((o) => {
+        o.classList.remove(`${a}--hovered`);
+      }), this.preventDefault(t);
+    },
+    /**
+     * Handles the drag over event
+     *
+     * @param {object} e The drag over event
+     * @return {boolean}
+     */
+    dragOver(t) {
+      return this.preventDefault(t);
+    },
+    /**
+     * Handles the drag enter event
+     *
+     * @param {object} e The drag over event
+     * @param {boolean} disabled Whether dropping is disabled for this breadcrumb
+     */
+    dragEnter(t, e) {
+      if (!e && t.target.closest) {
+        const s = t.target.closest(`.${a}`);
+        s.classList && s.classList.contains(a) && (document.querySelectorAll(`.${a}`).forEach((o) => {
+          o.classList.remove(`${a}--hovered`);
+        }), s.classList.add(`${a}--hovered`));
+      }
+    },
+    /**
+     * Handles the drag leave event
+     *
+     * @param {object} e The drag leave event
+     * @param {boolean} disabled Whether dropping is disabled for this breadcrumb
+     */
+    dragLeave(t, e) {
+      if (!e && !t.target.contains(t.relatedTarget) && t.target.closest) {
+        const s = t.target.closest(`.${a}`);
+        if (s.contains(t.relatedTarget))
+          return;
+        s.classList && s.classList.contains(a) && s.classList.remove(`${a}--hovered`);
+      }
+    },
+    /**
+     * Check for each crumb if we have to hide it and
+     * add it to the array of all crumbs.
+     */
+    hideCrumbs() {
+      Object.values(this.breadcrumbsRefs).forEach((e, s) => {
+        var i;
+        (i = e == null ? void 0 : e.elm) != null && i.classList && (this.hiddenIndices.includes(s) ? e.elm.classList.add(`${a}--hidden`) : e.elm.classList.remove(`${a}--hidden`));
+      });
+    },
+    isBreadcrumb(t) {
+      var e;
+      return (((e = t == null ? void 0 : t.componentOptions) == null ? void 0 : e.tag) || (t == null ? void 0 : t.tag) || "").includes("NcBreadcrumb");
+    }
+  },
+  /**
+   * The render function to display the component
+   *
+   * @param {Function} h The function to create VNodes
+   * @return {object|undefined} The created VNode
+   */
+  render(t) {
+    const e = [];
+    if (this.$slots.default.forEach((r) => {
+      var n, c;
+      if (this.isBreadcrumb(r)) {
+        e.push(r);
+        return;
+      }
+      (r == null ? void 0 : r.type) === I && ((c = (n = r == null ? void 0 : r.children) == null ? void 0 : n.forEach) == null || c.call(n, (d) => {
+        this.isBreadcrumb(d) && e.push(d);
+      }));
+    }), e.length === 0)
       return;
+    h.set(e[0].componentOptions.propsData, "icon", this.rootIcon), h.set(e[0].componentOptions.propsData, "ref", "breadcrumbs");
+    const s = {};
+    e.forEach((r, n) => {
+      h.set(r, "ref", `crumb-${n}`), s[n] = r;
+    });
+    let i = [];
+    if (!this.hiddenIndices.length)
+      i = e;
+    else {
+      i = e.slice(0, Math.round(e.length / 2)), i.push(
+        t("NcBreadcrumb", {
+          class: "dropdown",
+          props: this.menuBreadcrumbProps,
+          attrs: {
+            // Hide the dropdown menu from screen-readers,
+            // since the crumbs in the menu are still in the list.
+            "aria-hidden": !0
+          },
+          // Add a ref to the Actions menu
+          ref: "actionsBreadcrumb",
+          key: "actions-breadcrumb-1",
+          // Add handlers so the Actions menu opens on hover
+          nativeOn: {
+            dragstart: this.dragStart,
+            dragenter: () => {
+              this.menuBreadcrumbProps.open = !0;
+            },
+            dragleave: this.closeActions
+          },
+          on: {
+            // Make sure we keep the same open state
+            // as the Actions component
+            "update:open": (n) => {
+              this.menuBreadcrumbProps.open = n;
+            }
+          }
+          // Add all hidden breadcrumbs as ActionRouter or ActionLink
+        }, this.hiddenIndices.map((n) => {
+          const c = e[n], d = c.componentOptions.propsData.to, l = c.componentOptions.propsData.href, u = c.componentOptions.propsData.disableDrop, g = c.componentOptions.propsData.title, $ = c.componentOptions.propsData.name;
+          let m = "NcActionButton", f = "";
+          l && (m = "NcActionLink", f = l), d && (m = "NcActionRouter", f = d);
+          const _ = t("IconFolder", {
+            props: {
+              size: 20
+            },
+            slot: "icon"
+          });
+          return t(
+            m,
+            {
+              class: a,
+              props: {
+                href: l || null,
+                title: g,
+                to: d || null
+              },
+              // Prevent the breadcrumbs from being draggable
+              attrs: {
+                draggable: !1
+              },
+              on: {
+                ...c.componentOptions.listeners
+              },
+              // Add the drag and drop handlers
+              nativeOn: {
+                dragstart: this.dragStart,
+                drop: (p) => this.dropped(p, f, u),
+                dragover: this.dragOver,
+                dragenter: (p) => this.dragEnter(p, u),
+                dragleave: (p) => this.dragLeave(p, u)
+              }
+            },
+            [_, $]
+          );
+        }))
+      );
+      const r = e.slice(Math.round(e.length / 2));
+      i = i.concat(r);
     }
-    (r == null ? void 0 : r.type) === z && ((c = (n = r == null ? void 0 : r.children) == null ? void 0 : n.forEach) == null || c.call(n, (d) => {
-      this.isBreadcrumb(d) && e.push(d);
-    }));
-  }), e.length === 0)
-    return;
-  p.set(e[0].componentOptions.propsData, "icon", this.rootIcon), p.set(e[0].componentOptions.propsData, "ref", "breadcrumbs");
-  const s = {};
-  e.forEach((r, n) => {
-    p.set(r, "ref", `crumb-${n}`), s[n] = r;
-  });
-  let o = [];
-  if (!this.hiddenIndices.length)
-    o = e;
-  else {
-    o = e.slice(0, Math.round(e.length / 2)), o.push(t("NcBreadcrumb", { class: "dropdown", props: this.menuBreadcrumbProps, attrs: { "aria-hidden": !0 }, ref: "actionsBreadcrumb", key: "actions-breadcrumb-1", nativeOn: { dragstart: this.dragStart, dragenter: () => {
-      this.menuBreadcrumbProps.open = !0;
-    }, dragleave: this.closeActions }, on: { "update:open": (n) => {
-      this.menuBreadcrumbProps.open = n;
-    } } }, this.hiddenIndices.map((n) => {
-      const c = e[n], d = c.componentOptions.propsData.to, l = c.componentOptions.propsData.href, h = c.componentOptions.propsData.disableDrop, g = c.componentOptions.propsData.title, v = c.componentOptions.propsData.name;
-      let m = "NcActionButton", f = "";
-      l && (m = "NcActionLink", f = l), d && (m = "NcActionRouter", f = d);
-      const $ = t("IconFolder", { props: { size: 20 }, slot: "icon" });
-      return t(m, { class: i, props: { href: l || null, title: g, to: d || null }, attrs: { draggable: !1 }, on: { ...c.componentOptions.listeners }, nativeOn: { dragstart: this.dragStart, drop: (u) => this.dropped(u, f, h), dragover: this.dragOver, dragenter: (u) => this.dragEnter(u, h), dragleave: (u) => this.dragLeave(u, h) } }, [$, v]);
-    })));
-    const r = e.slice(Math.round(e.length / 2));
-    o = o.concat(r);
+    const o = [t("nav", {}, [t("ul", { class: "breadcrumb__crumbs" }, [i])])];
+    return this.$slots.actions && o.push(t("div", { class: "breadcrumb__actions", ref: "breadcrumb__actions" }, this.$slots.actions)), this.breadcrumbsRefs = s, t("div", { class: ["breadcrumb", { "breadcrumb--collapsed": this.hiddenIndices.length === e.length - 2 }], ref: "container" }, o);
   }
-  const a = [t("nav", {}, [t("ul", { class: "breadcrumb__crumbs" }, [o])])];
-  return this.$slots.actions && a.push(t("div", { class: "breadcrumb__actions", ref: "breadcrumb__actions" }, this.$slots.actions)), this.breadcrumbsRefs = s, t("div", { class: ["breadcrumb", { "breadcrumb--collapsed": this.hiddenIndices.length === e.length - 2 }], ref: "container" }, a);
-} }, I = null, _ = null;
-var x = E(A, I, _, !1, null, "e809461d", null, null);
-const J = x.exports;
+}, E = null, A = null;
+var x = /* @__PURE__ */ N(
+  z,
+  E,
+  A,
+  !1,
+  null,
+  "e809461d",
+  null,
+  null
+);
+const G = x.exports;
 export {
-  J as default
+  G as default
 };