@progress/kendo-vue-layout/breadcrumb/Breadcrumb.js

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("vue"),w=require("../package-metadata.js"),r=require("@progress/kendo-vue-common"),I=require("./BreadcrumbOrderedList.js"),f=require("./BreadcrumbListItem.js"),x=require("./BreadcrumbDelimiter.js"),g=require("./BreadcrumbLink.js");function R(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!d.isVNode(e)}const F=d.defineComponent({name:"KendoBreadcrumb",emits:{select:null,keydown:null},props:{id:String,tabIndex:Number,disabled:Boolean,collapseMode:{type:String,default:"auto",validator:function(e){return["auto","wrap","none"].includes(e)}},ariaLabel:{type:String,default:"Breadcrumb"},breadcrumbOrderedList:[Object,Function,String],breadcrumbListItem:[Object,Function,String],breadcrumbDelimiter:[Object,Function,String],breadcrumbLink:[Object,Function,String],dataItems:{type:Array,default:[]},size:{type:String,default:"medium"},dir:{type:String,default:void 0},valueField:{type:String,default:"id"},textField:{type:String,default:"text"},svgIconField:{type:String,default:"svgIcon"},iconField:{type:String,default:"icon"},onSelect:Function,onKeydown:Function},created(){this.observer=null,r.validatePackage(w.packageMetadata)},data(){return{currentDir:"ltr",localData:[...this.dataItems],listItems:[],itemsData:[],addDelimiter:!1}},computed:{itemClasses(){const{disabled:e,size:i,collapseMode:a}=this.$props;return{"k-breadcrumb":!0,"k-rtl":this.currentDir==="rtl","k-disabled":e,"k-breadcrumb-md":!i,"k-breadcrumb-wrap":a==="wrap",[`k-breadcrumb-${r.kendoThemeMaps.sizeMap[i]||i}`]:i}}},setup(){return{breadcrumbRef:d.ref(null)}},mounted(){this.currentDir=r.getDir(this.$el,this.$props.dir),this.listItems=this.breadcrumbRef.querySelectorAll("li"),this.itemsData=Array.from(this.listItems).map((e,i)=>({id:i,name:e.innerText,width:e.offsetWidth,visible:!0})),this.resizeObserver=r.canUseDOM&&window.ResizeObserver&&new ResizeObserver(this.calculateMedia),this.breadcrumbRef&&this.resizeObserver&&(this.resizeObserver.observe(this.breadcrumbRef),this.$nextTick(()=>{this.calculateMedia()}))},unmounted(){document!=null&&document.body&&this.resizeObserver&&this.resizeObserver.disconnect()},render(){let e;const{id:i,dir:a,tabIndex:t,collapseMode:l,disabled:u,ariaLabel:y,valueField:o,svgIconField:m,iconField:b,textField:n}=this.$props,S=r.templateRendering.call(this,this.$props.breadcrumbDelimiter,r.getListeners.call(this)),c=this.$props.breadcrumbDelimiter?r.getTemplate.call(this,{h:d.h,template:S,additionalProps:{dir:this.currentDir,tabIndex:t}}):d.createVNode(x.BreadcrumbDelimiter,{dir:this.currentDir,tabIndex:t},null),D=r.templateRendering.call(this,this.$props.breadcrumbLink,r.getListeners.call(this)),L=d.createVNode(g.BreadcrumbLink,{id:this.localData[0][o],isLast:this.localData.length-1===0,isFirst:!0,tabIndex:t,svgIcon:this.localData[0][m]||void 0,icon:this.localData[0][b]||void 0,text:this.localData[0][n]?String(this.localData[0][n]):void 0,disabled:this.localData[0].disabled,onSelect:this.handleSelect,onKeydown:this.handleKeyDown},null),p=r.getTemplate.call(this,{h:d.h,template:D,defaultRendering:L,additionalProps:{id:this.localData[0][o],isLast:this.localData.length-1===0,isFirst:!0,tabIndex:t,svgIcon:this.localData[0][m]||void 0,icon:this.localData[0][b]||void 0,text:this.localData[0][n]?String(this.localData[0][n]):void 0,disabled:this.localData[0].disabled,onSelect:this.handleSelect,onKeydown:this.handleKeyDown},defaultSlots:c});return d.createVNode("nav",{id:i,ref:s=>this.breadcrumbRef=s,tabindex:r.getTabIndex(t,u),dir:this.currentDir,"aria-label":y,class:this.itemClasses},[l==="wrap"&&d.createVNode(I.BreadcrumbOrderedList,{rootItem:!0,dir:a,tabIndex:t},{default:()=>[d.createVNode(f.BreadcrumbListItem,{key:this.localData[0][o],isFirstItem:!0,isLastItem:this.dataItems.length-1===0},{default:()=>[p,this.localData.length>1&&c,this.addDelimiter&&l==="auto"&&c]})]}),d.createVNode(I.BreadcrumbOrderedList,{dir:a,tabIndex:t,collapseMode:this.$props.collapseMode},R(e=this.localData.map((s,h)=>{if(h===0&&l!=="wrap")return d.createVNode(f.BreadcrumbListItem,{key:this.localData[0][o],isFirstItem:!0,isLastItem:this.localData.length-1===0},{default:()=>[p,c,this.addDelimiter&&l==="auto"&&c]});if(h>0){const k=d.createVNode(g.BreadcrumbLink,{id:s[o],isLast:this.localData.length-1===h,isFirst:!1,tabIndex:t,svgIcon:s[m]||void 0,icon:s[b]||void 0,text:s[n]?String(s[n]):void 0,disabled:s.disabled,onSelect:this.handleSelect,onKeydown:this.handleKeyDown},null),v=r.getTemplate.call(this,{h:d.h,template:D,defaultRendering:k,additionalProps:{id:s[o],isLast:this.localData.length-1===h,isFirst:!1,tabIndex:t,svgIcon:s[m]||void 0,icon:s[b]||void 0,text:s[n]?String(s[n]):void 0,disabled:s.disabled,onSelect:this.handleSelect,onKeydown:this.handleKeyDown}});return d.createVNode(f.BreadcrumbListItem,{key:s[o],isFirstItem:!1,isLastItem:this.localData.length-1===h},{default:()=>[v,h!==this.localData.length-1&&c]})}}))?e:{default:()=>[e]})])},methods:{getLastHiddenItemWidth(){const e=this.itemsData.slice().reverse().findIndex(i=>i.id!==0&&i.visible===!1);if(e!==-1){const i=this.itemsData.length-1-e,a=this.itemsData[i].width;return[i,a]}return[-1,0]},calculateMedia(){if(this.breadcrumbRef.offsetWidth){this.listItems=this.breadcrumbRef.querySelectorAll("li");let e=this.itemsData.reduce((t,l)=>l.visible?t+l.width:t,0);for(;this.breadcrumbRef.offsetWidth+1<e&&this.collapseMode==="auto";){const t=this.itemsData.findIndex(u=>u.id!==0&&u.visible===!0);this.itemsData[t].visible=!1,this.listItems[t].style.display="none";const l=this.itemsData[t].width;e=e-l,this.addDelimiter=!0}let[i,a]=this.getLastHiddenItemWidth();if(i!==-1)for(;this.breadcrumbRef.offsetWidth-1>e+a&&this.addDelimiter&&(this.itemsData[i].visible=!0,this.listItems[i].style.display="",e=e+a,this.addDelimiter=this.itemsData.findIndex(t=>t.visible===!1)!==-1,[i,a]=this.getLastHiddenItemWidth(),i!==-1););(this.collapseMode==="wrap"||this.collapseMode==="none")&&(this.listItems.forEach(t=>{t.style.display=""}),this.itemsData.forEach(t=>{t.visible=!0}))}},handleSelect(e){const i=this.dataItems.findIndex(t=>t.id===e.id),a=this.dataItems.slice(0,i+1);this.localData=a,this.itemsData=a,this.$emit("select",{event:e,id:e.id})},handleKeyDown(e){if(e.event.key==="Enter"){const i=this.dataItems.findIndex(t=>t.id===e.id),a=this.dataItems.slice(0,i+1);this.localData=a,this.itemsData=a}this.$emit("keydown",{event:e,id:e.id})}}});exports.Breadcrumb=F;