vue-devui/breadcrumb/index.umd.js

DevUI components based on Vite and Vue3

(function(N,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("@floating-ui/dom")):typeof define=="function"&&define.amd?define(["exports","vue","@floating-ui/dom"],e):(N=typeof globalThis!="undefined"?globalThis:N||self,e(N.index={},N.Vue,N.dom))})(this,function(N,e,x){"use strict";const M={source:{type:Array,default:[]},separatorIcon:{type:String}},I={showMenu:{type:Boolean,default:!1},menuList:{type:Array},isSearch:{type:Boolean,dafault:!1},to:{type:[String,Object],default:""},replace:{type:Boolean,default:!1}};function L(t,n,o){let a=t;return n&&(a+=`__${n}`),o&&(a+=`--${o}`),a}function O(t,n=!1){const o=n?`.devui-${t}`:`devui-${t}`;return{b:()=>L(o),e:l=>l?L(o,l):"",m:l=>l?L(o,"",l):"",em:(l,r)=>l&&r?L(o,l,r):""}}var ce="";const _={visible:{type:Boolean,default:!1},trigger:{type:String,default:"click"},closeScope:{type:String,default:"all"},position:{type:Array,default:()=>["bottom","top","left","right"]},offset:{type:[Number,Object],default:4},shiftOffset:{type:Number},closeOnMouseLeaveMenu:{type:Boolean,default:!1},showAnimation:{type:Boolean,default:!0},overlayClass:{type:String,default:""},destroyOnHide:{type:Boolean,default:!0},teleport:{type:[String,Object],default:"body"}},$=Symbol("popper-trigger");function R(t){const n=Object.prototype.toString.call(t);return n.includes("object")&&n.includes("HTML")&&n.includes("Element")}function F(t){return t instanceof Element||R(t)?t:t&&typeof t=="object"&&(t.$el instanceof Element||R(t.$el))?t.$el:null}const P=new Map;function T(t,n,o){return t==null||t.addEventListener(n,o),()=>{t==null||t.removeEventListener(n,o)}}const z=({id:t,isOpen:n,origin:o,dropdownRef:a,props:c,emit:i})=>{let s=!1,l=!1;const{trigger:r,closeScope:u,closeOnMouseLeaveMenu:B}=e.toRefs(c),m=b=>{n.value=b,i("toggle",n.value)},v=async(b,E)=>{await new Promise(f=>setTimeout(f,50)),!(b==="origin"&&s||b==="dropdown"&&l)&&(E&&[...P.values()].reverse().forEach(f=>{setTimeout(()=>{var d;(d=f.toggle)==null||d.call(f)},0)}),m(!1))};e.watch([r,o,a],([b,E,f],d,y)=>{const p=F(E),V=[];setTimeout(()=>{V.push(T(document,"click",g=>{g.stopPropagation();const h=[...P.values()];!n.value||u.value==="none"||(f==null?void 0:f.contains(g.target))&&u.value==="blank"||h.some(k=>{var C;return(C=k.toggleEl)==null?void 0:C.contains(g.target)})&&h.some(k=>{var C;return(C=k.menuEl)==null?void 0:C.contains(g.target)})||([...P.values()].reverse().forEach(k=>{setTimeout(()=>{var C,w;(C=k.toggleEl)!=null&&C.contains(g.target)||(w=k.toggle)==null||w.call(k)},0)}),s=!1)}))},0),b==="click"?V.push(T(p,"click",()=>m(!n.value)),T(f,"mouseleave",g=>{var h;B.value&&!((h=P.get(t).child)!=null&&h.contains(g.relatedTarget))&&v("dropdown",!0)})):b==="hover"&&V.push(T(p,"mouseenter",()=>{l=!0,m(!0)}),T(p,"mouseleave",()=>{l=!1,v("origin")}),T(f,"mouseenter",()=>{s=!0,n.value=!0}),T(f,"mouseleave",g=>{var h;s=!1,!(g.relatedTarget&&((p==null?void 0:p.contains(g.relatedTarget))||((h=P.get(t).child)==null?void 0:h.contains(g.relatedTarget))))&&v("dropdown",!0)})),y(()=>V.forEach(g=>g()))})};function H(t,n,o,a,c,i){e.watch(n,(s,l)=>{l!==void 0&&(o.value=s,i("toggle",o.value))},{immediate:!0}),e.watch([o,c],([s,l])=>{var r;if(s){P.set(t,{...P.get(t),menuEl:l,toggle:()=>{o.value=!1,i("toggle",o.value)}});for(const u of P.values())(r=u.menuEl)!=null&&r.contains(a.value)&&(u.child=l)}}),e.onMounted(()=>{P.set(t,{toggleEl:a.value})}),e.onUnmounted(()=>{P.delete(t)})}function U(t,n,o){const{showAnimation:a,overlayClass:c,destroyOnHide:i}=e.toRefs(t),s=e.ref(!1),l=e.ref(!1),r=e.computed(()=>({transformOrigin:n.value==="top"?"0% 100%":"0% 0%",zIndex:"var(--devui-z-index-dropdown, 1052)"})),u=e.computed(()=>({"fade-in-bottom":a.value&&o.value&&n.value==="bottom","fade-in-top":a.value&&o.value&&n.value==="top",[`${c.value}`]:!0})),B=m=>{n.value=m.includes("top")||m.includes("right-end")||m.includes("left-end")?"top":"bottom"};return e.watch(o,m=>{s.value=i.value?m:!0,l.value=m}),{overlayModelValue:s,overlayShowValue:l,styles:r,classes:u,handlePositionChange:B}}const W={modelValue:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0}};function q(){if(document.documentElement.scrollHeight>document.documentElement.clientHeight){const t=document.documentElement.scrollTop,n=document.documentElement.getAttribute("style");return document.documentElement.style.position="fixed",document.documentElement.style.top=`-${t}px`,document.documentElement.style.width=document.documentElement.style.width||"100%",document.documentElement.style.overflowY="scroll",()=>{n?document.documentElement.setAttribute("style",n):document.documentElement.removeAttribute("style"),document.documentElement.scrollTop=t}}}function G(t,n){let o;const a=i=>{i.preventDefault(),n.emit("click",i),t.closeOnClickOverlay&&n.emit("update:modelValue",!1)},c=()=>{o==null||o()};return e.watch(()=>t.modelValue,i=>{i?t.lockScroll&&(o=q()):c()}),e.onUnmounted(c),{onClick:a}}var se="";e.defineComponent({name:"DFixedOverlay",inheritAttrs:!1,props:W,emits:["update:modelValue","click"],setup(t,n){const{modelValue:o}=e.toRefs(t),a=O("fixed-overlay"),{onClick:c}=G(t,n);return()=>e.createVNode(e.Transition,{name:a.m("fade")},{default:()=>{var i,s;return[o.value&&e.createVNode("div",e.mergeProps({class:a.b()},n.attrs,{onClick:c}),[(s=(i=n.slots).default)==null?void 0:s.call(i)])]}})}});const Y={modelValue:{type:Boolean,default:!1},origin:{type:Object,require:!0},position:{type:Array,default:["bottom"]},offset:{type:[Number,Object],default:8},shiftOffset:{type:Number},align:{type:String,default:null},showArrow:{type:Boolean,default:!1},isArrowCenter:{type:Boolean,default:!0},clickEventBubble:{type:Boolean,default:!1},fitOriginWidth:{type:Boolean,default:!1}};function K(t,n,o,a){let{x:c,y:i}=n;if(!t){const{width:s,height:l}=a;c&&o.includes("start")&&(c=12),c&&o.includes("end")&&(c=Math.round(s-24)),i&&o.includes("start")&&(i=10),i&&o.includes("end")&&(i=l-14)}return{x:c,y:i}}function X(t,n){const{fitOriginWidth:o,position:a,showArrow:c}=e.toRefs(t),i=e.ref(),s=e.ref(),l=e.ref(0);let r;const u=e.computed(()=>o.value?{width:l.value+"px"}:{}),B=(d,y,p,V)=>{const{x:g,y:h}=K(t.isArrowCenter,p,y,V.getBoundingClientRect()),k={top:"bottom",right:"left",bottom:"top",left:"right"}[y.split("-")[0]];Object.assign(d.style,{left:g?`${g}px`:"",top:h?`${h}px`:"",right:"",bottom:"",[k]:"-4px"})},m=async()=>{const d=t.origin,y=e.unref(i.value),p=e.unref(s.value),[V,...g]=a.value,h=[x.offset(t.offset)];h.push(g.length?x.flip({fallbackPlacements:g}):x.flip()),c.value&&h.push(x.arrow({element:s.value}));const{x:k,y:C,placement:w,middlewareData:ae}=await x.computePosition(d,y,{strategy:"fixed",placement:V,middleware:h});let le=k,ie=C;n("positionChange",w),Object.assign(y.style,{top:`${ie}px`,left:`${le}px`}),t.showArrow&&B(p,w,ae.arrow,y)},v=d=>{var p,V;const y=d.target;y!=null&&y.contains((V=(p=t.origin)==null?void 0:p.$el)!=null?V:t.origin)&&m()},b=d=>{l.value=d.getBoundingClientRect().width,m()},E=()=>{var d,y;if(o.value&&typeof window!="undefined"){const p=(y=(d=t.origin)==null?void 0:d.$el)!=null?y:t.origin;p&&(r=new window.ResizeObserver(()=>b(p)),r.observe(p))}},f=()=>{var y,p;const d=(p=(y=t.origin)==null?void 0:y.$el)!=null?p:t.origin;d&&(r==null||r.unobserve(d))};return e.watch(()=>t.modelValue,()=>{t.modelValue&&t.origin?(e.nextTick(m),window.addEventListener("scroll",v,!0),window.addEventListener("resize",m),E()):(window.removeEventListener("scroll",v,!0),window.removeEventListener("resize",m),f())}),e.onUnmounted(()=>{window.removeEventListener("scroll",v,!0),window.removeEventListener("resize",m),f()}),{arrowRef:s,overlayRef:i,styles:u,updatePosition:m}}var ue="";const J=e.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:Y,emits:["update:modelValue","positionChange"],setup(t,{slots:n,attrs:o,emit:a,expose:c}){const i=O("flexible-overlay"),{clickEventBubble:s}=e.toRefs(t),{arrowRef:l,overlayRef:r,styles:u,updatePosition:B}=X(t,a);return c({updatePosition:B}),()=>{var m;return t.modelValue&&e.createVNode("div",e.mergeProps({ref:r,class:i.b(),style:u.value},o,{onClick:e.withModifiers(()=>({}),[s.value?"":"stop"]),onPointerup:e.withModifiers(()=>({}),["stop"])}),[(m=n.default)==null?void 0:m.call(n),t.showArrow&&e.createVNode("div",{ref:l,class:i.e("arrow")},null)])}}});/**
* @vue/shared v3.4.27
* (c) 2018-present Yuxi (Evan) You and Vue contributors
* @license MIT
**/const Q=t=>t!==null&&typeof t=="object",Z=O("popper-trigger");function j(t){return e.h("span",{class:Z.b()},t)}function D(t){for(const n of t){if(Q(n)){if(n.type===e.Comment)continue;return n.type==="svg"||n.type===e.Text?j(n):n.type===e.Fragment?D(n.children):n}return j(n)}return null}var ee=e.defineComponent({name:"DPopperTrigger",setup(t,n){const{slots:o,attrs:a}=n;return()=>{var l;const c=(l=o.default)==null?void 0:l.call(o,a),i=e.inject($);if(!c)return null;const s=D(c);return s?e.withDirectives(e.cloneVNode(s,a),[[{mounted(r){i.value=r},updated(r){i.value=r},unmounted(){i.value=null}}]]):null}}}),de="";let te=1;var ne=e.defineComponent({name:"DDropdown",inheritAttrs:!1,props:_,emits:["toggle"],setup(t,{slots:n,attrs:o,emit:a,expose:c}){const{visible:i,position:s,offset:l,destroyOnHide:r,shiftOffset:u,showAnimation:B,teleport:m}=e.toRefs(t),v=e.ref(),b=e.ref(),E=e.ref(),f=`dropdown_${te++}`,d=e.ref(!1),y=e.ref("bottom"),p=O("dropdown");e.provide($,v),z({id:f,isOpen:d,origin:v,dropdownRef:b,props:t,emit:a}),H(f,i,d,v,b,a);const{overlayModelValue:V,overlayShowValue:g,styles:h,classes:k,handlePositionChange:C}=U(t,y,d);return e.watch(g,w=>{e.nextTick(()=>{!r.value&&w&&E.value.updatePosition()})}),c({updatePosition:()=>E.value.updatePosition()}),()=>e.createVNode(e.Fragment,null,[e.createVNode(ee,null,{default:()=>{var w;return[(w=n.default)==null?void 0:w.call(n)]}}),e.createVNode(e.Teleport,{to:m.value},{default:()=>[e.createVNode(e.Transition,{name:B.value?p.m(`fade-${y.value}`):""},{default:()=>[e.withDirectives(e.createVNode(J,{modelValue:V.value,"onUpdate:modelValue":w=>V.value=w,ref:E,origin:v.value,position:s.value,offset:l.value,shiftOffset:u==null?void 0:u.value,onPositionChange:C,"click-event-bubble":!0,class:k.value,style:h.value},{default:()=>{var w;return[e.createVNode("div",e.mergeProps({ref:b,class:p.e("menu-wrap")},o),[(w=n.menu)==null?void 0:w.call(n)])]}}),[[e.vShow,g.value]])]})]})])}}),A=e.defineComponent({name:"DBreadcrumbItem",components:{DDropdown:ne},props:I,setup(t,{slots:n}){var E;const o=e.inject("separatorIcon"),a=O("breadcrumb"),c=t.to?"is-link":"",i=t.showMenu&&((E=t.menuList)==null?void 0:E.length)?a.e("dropdown-title"):"",s=e.ref(null),l=e.getCurrentInstance(),r=l==null?void 0:l.appContext.config.globalProperties.$router,u=e.ref(t.showMenu),B=e.ref(t.menuList||[]),m=()=>{!t.to||!r||(t.replace?r.replace(t.to):r.push(t.to))};e.onMounted(()=>{var f;(f=s.value)==null||f.addEventListener("click",m)}),e.onBeforeUnmount(()=>{var f;(f=s.value)==null||f.removeEventListener("click",m)});const v=()=>e.createVNode("span",{class:a.e("separator")},[o]),b=()=>{var f;return u.value?e.createVNode("div",{class:a.e("item")},[e.createVNode(e.resolveComponent("d-dropdown"),{trigger:"hover","close-scope":"blank"},{default:()=>{var d;return[e.createVNode("span",{class:[c,i]},[(d=n==null?void 0:n.default)==null?void 0:d.call(n),e.createVNode("span",{class:"icon icon-chevron-down"},null)])]},menu:()=>e.createVNode("ul",{class:a.e("item-dropdown")},[B.value.map(d=>d.link?e.createVNode("a",{href:d.link,target:d.target?d.target:"_self"},[e.createVNode("li",{class:a.e("item-dropdown-item")},[d.title])]):e.createVNode("li",{class:a.e("item-dropdown-item")},[e.createVNode("span",{class:c},[d.title])]))])})]):e.createVNode("div",{class:a.e("item")},[e.createVNode("span",{ref:s,class:c},[(f=n==null?void 0:n.default)==null?void 0:f.call(n)]),v()])};return()=>b()}});function oe(t,n,o="default"){var a,c;return(c=n[o])!=null?c:(a=t[o])==null?void 0:a.call(t)}var fe="",S=e.defineComponent({name:"DBreadcrumb",components:{DBreadcrumbItem:A},props:M,setup(t,{slots:n}){var l;const o=(l=oe(n,t,"separatorIcon"))!=null?l:"/";e.provide("separatorIcon",o);const a=O("breadcrumb"),c=r=>e.createVNode(e.resolveComponent("d-breadcrumb-item"),{to:`path: ${r.link}`,replace:r.replace},{default:()=>[r.title]}),i=r=>e.createVNode(e.resolveComponent("d-breadcrumb-item"),{menuList:r.children,showMenu:r.showMenu,to:`path: ${r.link}`,replace:r.replace},{default:()=>[!r.noNavigation&&(!r.linkType||r.linkType==="hrefLink")?e.createVNode("a",{href:r.link,target:r.target?r.target:"_self"},[r.title]):null,r.noNavigation?e.createVNode("span",null,[r.title]):null]}),s=r=>r.map(u=>!u.noNavigation&&u.linkType==="routerLink"?c(u):u.children&&u.children.length>0?i(u):e.createVNode(e.resolveComponent("d-breadcrumb-item"),null,{default:()=>[!u.noNavigation&&(!u.linkType||u.linkType==="hrefLink")?e.createVNode("a",{href:u.link,target:u.target?u.target:"_self"},[u.title]):null,u.noNavigation?e.createVNode("span",null,[u.title]):null]}));return()=>{var r;return e.createVNode("div",{class:a.b()},[t.source&&t.source.length?s(t.source):(r=n==null?void 0:n.default)==null?void 0:r.call(n)])}}}),re={title:"Breadcrumb \u9762\u5305\u5C51",category:"\u5BFC\u822A",status:"100%",install(t){t.component(S.name,S),t.component(A.name,A)}};N.Breadcrumb=S,N.BreadcrumbItem=A,N.breadcrumbItemProps=I,N.breadcrumbProps=M,N.default=re,Object.defineProperties(N,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});