vue-devui/breadcrumb/index.umd.js

DevUI components based on Vite and Vue3

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