vue-3-breadcrumbs
Version:
Breadcrumbs logic and component for vue 3
2 lines (1 loc) • 3.65 kB
JavaScript
var VueBreadcrumbs=function(e){"use strict";class r{#e;#r;constructor(r){this.#e=r,this.#r=r.config.globalProperties.$router,this.value=e.reactive([])}init(){this.#r.afterEach(((e,r,t)=>{if(t||e.path===r.path&&r.matched.length)return!1;this.setBreadcrumbsByRoute(e)}))}setBreadcrumbsByRoute(e){if(!e)return!1;let r=e.path.replace(/\/$/,"").split("/"),t="",n=!1;r.forEach(((e,a)=>{t+=1===a?e:"/"+e;let l=a+1>=r.length;if(this.value[a]?._path===t)return l&&this.value.splice(a+1,this.value.length),this.value[a].current=a+1>=r.length,!1;!n&&a<this.value.length&&(this.value.splice(a,this.value.length),n=!0);const c=this.createBreadcrumb(t,l);if(!c)return!1;this.value.push(c)}))}createBreadcrumb(e,r=!1){if(!e)return!1;let t=this.#r.resolve(e),n=t.meta?.breadcrumb;if("function"==typeof n&&(n=n.call(null,t,this.#e)),!n)return!1;let a="object"==typeof n;return{label:a?n.label:n,link:a&&n.link?n.link:t.path,current:r,_path:e}}}var t={install:(t,n)=>{if(t.config.globalProperties.$breadcrumbs=new r(t),t.config.globalProperties.$breadcrumbs.init(),n?.includeComponent){const r=e.defineAsyncComponent((()=>Promise.resolve().then((function(){return u}))));t.component("AmBreadcrumbs",r)}}},n={name:"AmBreadcrumbs",props:{showCurrentCrumb:{type:Boolean,default:!0}}};const a={key:0,class:"am-breadcrumbs"},l={class:"am-breadcrumbs__list"},c={key:0,class:"am-breadcrumbs__item"},s={class:"am-breadcrumbs__link-wrapper"},o={key:0,class:"am-breadcrumbs__link am-breadcrumbs__link_current"},i=e.createElementVNode("div",{class:"am-breadcrumbs__separator"}," / ",-1);!function(e,r){void 0===r&&(r={});var t=r.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.am-breadcrumbs {\n display: flex;\n margin: 16px 16px;\n}\n.am-breadcrumbs__list {\n display: block;\n padding: 0;\n margin: 0;\n text-align: left;\n}\n.am-breadcrumbs__item {\n display: inline;\n}\n.am-breadcrumbs__separator {\n display: inline;\n padding: 0 4px;\n color: rgb(150, 159, 175);\n}\n.am-breadcrumbs__link-wrapper {\n display: inline;\n}\n.am-breadcrumbs__link {\n display: inline;\n color: #2c3e50;\n text-decoration: none;\n transition: color 0.2s;\n}\n.am-breadcrumbs__link:hover {\n color: #3eaf7c;\n}\n.am-breadcrumbs__link.am-breadcrumbs__link_current {\n color: rgb(150, 159, 175);\n}\n.am-breadcrumbs__item:last-child .am-breadcrumbs__separator {\n display: none;\n}\n"),n.render=function(r,t,n,u,m,d){const b=e.resolveComponent("router-link");return r.$breadcrumbs&&r.$breadcrumbs.value&&r.$breadcrumbs.value.length&&(n.showCurrentCrumb||!r.$breadcrumbs.value[0].current)?(e.openBlock(),e.createElementBlock("nav",a,[e.createElementVNode("ol",l,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.$breadcrumbs.value,((t,a)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[n.showCurrentCrumb||!t.current?(e.openBlock(),e.createElementBlock("li",c,[e.renderSlot(r.$slots,"crumb",{crumb:t},(()=>[e.createElementVNode("div",s,[t.current?(e.openBlock(),e.createElementBlock("span",o,e.toDisplayString(t.label),1)):(e.openBlock(),e.createBlock(b,{key:1,class:"am-breadcrumbs__link",to:t.link},{default:e.withCtx((()=>[e.createTextVNode(e.toDisplayString(t.label),1)])),_:2},1032,["to"]))]),i]))])):e.createCommentVNode("v-if",!0)],64)))),256))])])):e.createCommentVNode("v-if",!0)},n.__file="src/AmBreadcrumbs.vue";var u=Object.freeze({__proto__:null,default:n});return t}(Vue);