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