@nextcloud/vue/dist/Components/NcBreadcrumbs.cjs

Nextcloud vue components

var T=require("../assets/index13.css");const L=require("./NcActions.cjs"),B=require("./NcActionButton.cjs"),y=require("./NcActionRouter.cjs"),D=require("./NcActionLink.cjs"),q=require("./NcBreadcrumb.cjs"),p=require("vue"),b=require("@nextcloud/event-bus"),R=require("vue-material-design-icons/Folder.vue"),W=require("debounce"),w=require("vue-frag"),z=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs"),g=(e,t,s)=>{if(e!==void 0)for(let o=e.length-1;o>=0;o--){const a=e[o],r=!a.componentOptions&&a.tag&&t.indexOf(a.tag)===-1,n=!!a.componentOptions&&typeof a.componentOptions.tag=="string",c=n&&t.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),e.splice(o,1))}};const i="vue-crumb",N={name:"NcBreadcrumbs",components:{NcActions:L,NcActionButton:B,NcActionRouter:y,NcActionLink:D,NcBreadcrumb:q,IconFolder:R},props:{rootIcon:{type:String,default:"icon-home"}},emits:["dropped"],data(){return{hiddenIndices:[],menuBreadcrumbProps:{name:"",forceMenu:!0,disableDrop:!0,open:!1},breadcrumbsRefs:{}}},beforeMount(){g(this.$slots.default,["NcBreadcrumb"],this)},beforeUpdate(){g(this.$slots.default,["NcBreadcrumb"],this)},created(){window.addEventListener("resize",W(()=>{this.handleWindowResize()},100)),b.subscribe("navigation-toggled",this.delayedResize)},mounted(){this.handleWindowResize()},updated(){this.delayedResize(),this.$nextTick(()=>{this.hideCrumbs()})},beforeDestroy(){window.removeEventListener("resize",this.handleWindowResize),b.unsubscribe("navigation-toggled",this.delayedResize)},methods:{closeActions(e){this.$refs.actionsBreadcrumb.$el.contains(e.relatedTarget)||(this.menuBreadcrumbProps.open=!1)},async delayedResize(){await this.$nextTick(),this.handleWindowResize()},handleWindowResize(){var d;if(!this.$refs.container)return;const e=Object.values(this.breadcrumbsRefs),t=e.length,s=[],o=this.$refs.container.offsetWidth;let a=this.getTotalWidth(e);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(t/2);for(;r>0&&n<t-2;){const l=c+(n%2?n+1:n)/2*Math.pow(-1,n+t%2);r-=this.getWidth((d=e[l])==null?void 0:d.elm),s.push(l),n++}this.arraysEqual(this.hiddenIndices,s.sort((l,u)=>l-u))||(this.hiddenIndices=s)},arraysEqual(e,t){if(e.length!==t.length)return!1;if(e===t)return!0;if(e===null||t===null)return!1;for(let s=0;s<e.length;++s)if(e[s]!==t[s])return!1;return!0},getTotalWidth(e){return e.reduce((t,s,o)=>t+this.getWidth(s==null?void 0:s.elm),0)},getWidth(e){if(!(e!=null&&e.classList))return 0;const t=e.classList.contains(`${i}--hidden`);e.style.minWidth="auto",e.classList.remove(`${i}--hidden`);const s=e.offsetWidth;return t&&e.classList.add(`${i}--hidden`),e.style.minWidth="",s},preventDefault(e){return e.preventDefault&&e.preventDefault(),!1},dragStart(e){return this.preventDefault(e)},dropped(e,t,s){return s||this.$emit("dropped",e,t),this.menuBreadcrumbProps.open=!1,document.querySelectorAll(`.${i}`).forEach(o=>{o.classList.remove(`${i}--hovered`)}),this.preventDefault(e)},dragOver(e){return this.preventDefault(e)},dragEnter(e,t){if(!t&&e.target.closest){const s=e.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(e,t){if(!t&&!e.target.contains(e.relatedTarget)&&e.target.closest){const s=e.target.closest(`.${i}`);if(s.contains(e.relatedTarget))return;s.classList&&s.classList.contains(i)&&s.classList.remove(`${i}--hovered`)}},hideCrumbs(){Object.values(this.breadcrumbsRefs).forEach((e,t)=>{var s;(s=e==null?void 0:e.elm)!=null&&s.classList&&(this.hiddenIndices.includes(t)?e.elm.classList.add(`${i}--hidden`):e.elm.classList.remove(`${i}--hidden`))})},isBreadcrumb(e){var t;return(((t=e==null?void 0:e.componentOptions)==null?void 0:t.tag)||(e==null?void 0:e.tag)||"").includes("NcBreadcrumb")}},render(e){const t=[];if(this.$slots.default.forEach(r=>{var n,c;if(this.isBreadcrumb(r)){t.push(r);return}(r==null?void 0:r.type)===w.Fragment&&((c=(n=r==null?void 0:r.children)==null?void 0:n.forEach)==null||c.call(n,d=>{this.isBreadcrumb(d)&&t.push(d)}))}),t.length===0)return;p.set(t[0].componentOptions.propsData,"icon",this.rootIcon),p.set(t[0].componentOptions.propsData,"ref","breadcrumbs");const s={};t.forEach((r,n)=>{p.set(r,"ref",`crumb-${n}`),s[n]=r});let o=[];if(!this.hiddenIndices.length)o=t;else{o=t.slice(0,Math.round(t.length/2)),o.push(e("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=t[n],d=c.componentOptions.propsData.to,l=c.componentOptions.propsData.href,u=c.componentOptions.propsData.disableDrop,v=c.componentOptions.propsData.title,$=c.componentOptions.propsData.name;let m="NcActionButton",f="";l&&(m="NcActionLink",f=l),d&&(m="NcActionRouter",f=d);const O=e("IconFolder",{props:{size:20},slot:"icon"});return e(m,{class:i,props:{href:l||null,title:v,to:d||null},attrs:{draggable:!1},on:{...c.componentOptions.listeners},nativeOn:{dragstart:this.dragStart,drop:h=>this.dropped(h,f,u),dragover:this.dragOver,dragenter:h=>this.dragEnter(h,u),dragleave:h=>this.dragLeave(h,u)}},[O,$])})));const r=t.slice(Math.round(t.length/2));o=o.concat(r)}const a=[e("nav",{},[e("ul",{class:"breadcrumb__crumbs"},[o])])];return this.$slots.actions&&a.push(e("div",{class:"breadcrumb__actions",ref:"breadcrumb__actions"},this.$slots.actions)),this.breadcrumbsRefs=s,e("div",{class:["breadcrumb",{"breadcrumb--collapsed":this.hiddenIndices.length===t.length-2}],ref:"container"},a)}},E=null,A=null;var I=z.normalizeComponent(N,E,A,!1,null,"e809461d",null,null);const _=I.exports;module.exports=_;