vue-devui
Version:
DevUI components based on Vite and Vue3
2 lines (1 loc) • 16.7 kB
JavaScript
var ze=Object.defineProperty;var Pe=(h,n,C)=>n in h?ze(h,n,{enumerable:!0,configurable:!0,writable:!0,value:C}):h[n]=C;var ce=(h,n,C)=>(Pe(h,typeof n!="symbol"?n+"":n,C),C);(function(h,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue"),require("clipboard")):typeof define=="function"&&define.amd?define(["exports","vue","clipboard"],n):(h=typeof globalThis!="undefined"?globalThis:h||self,n(h.index={},h.Vue))})(this,function(h,n){"use strict";function C(e,l,t){let s=e;return l&&(s+=`__${l}`),t&&(s+=`--${t}`),s}function E(e,l=!1){const t=l?`.devui-${e}`:`devui-${e}`;return{b:()=>C(t),e:f=>f?C(t,f):"",m:f=>f?C(t,"",f):"",em:(f,m)=>f&&m?C(t,f,m):""}}const Q=[];let U=[];const W=n.ref(24),x=E("menu"),de=E("submenu"),_=x.b(),X=`${x.b()}-item-horizontal-wrapper`,Y=`${x.b()}-item-select`,Z=`${x.b()}-active-parent`;function ue(e){W.value=e}function fe(e){Q.push(e)}function me(){U=[],Q.forEach(t=>{U.push(t.el.parentElement)});const e=[...U],l=t=>{var s;return(s=/layer_(\d*)/gim.exec(t))==null?void 0:s[1]};for(;e.length;){const t=e.shift();if(t==null?void 0:t.classList.contains(_)){const s=t.children;e.unshift(...Array.from(s));continue}else{if(t.tagName==="DIV")if(t.classList.contains(`${x.b()}-item-vertical-wrapper`)||t.classList.contains(`${de.b()}-menu-item-vertical-wrapper`)){const s=t.parentElement;if(e.unshift(...Array.from(t.children)),s==null?void 0:s.classList.contains(_))t.classList.add("layer_1");else{let a=l((s==null?void 0:s.classList.value)||"");a=Number(a),t.classList.add(`layer_${a}`)}}else{const s=t.parentElement;let a=l((s==null?void 0:s.classList.value)||"");a=Number(a),t.classList.add(`layer_${a}`),t.style.paddingLeft=`${(a===2?1:a-1)*W.value}px`}if(t.tagName==="UL"){const s=t.parentElement,a=t.children;for(let f=0;f<a.length;f++)e.unshift(a[f]);const o=(s==null?void 0:s.classList.value)||"";let d=l(o);(s==null?void 0:s.classList.contains(_))?(d=1,t.classList.add(`layer_${2}`)):(t.classList.add(`layer_${Number(d)+1}`),d=Number(d)+1)}if(t.tagName==="LI"){const s=t.parentElement,a=(s==null?void 0:s.classList.value)||"";let o=l(a);l(a),o=Number(o),t.style.padding=`0 ${o*W.value}px`}}}}function pe(e){var s;const l=e;let t=null;for(let a=0;a<l.length;a++){const o=l[a];((s=o==null?void 0:o.classList)==null?void 0:s.contains(`${x.b()}-horizontal`))&&(t=o)}return t}function he(e,l){let t=l.target,s=[];const a=pe(l.composedPath());for(s=[...Array.from(a.children)],t.tagName==="SPAN"&&(t=t.parentElement);s.length;){const o=s.shift();if((o==null?void 0:o.tagName)==="UL"||(o==null?void 0:o.classList.contains(X))){const d=o==null?void 0:o.children;s.unshift(...Array.from(d))}o!==t&&(o==null||o.classList.remove(Y),o==null||o.classList.remove(Z))}}function ge(e,l){const t=[],s=l.path||l.composedPath&&l.composedPath();for(let a=0;a<s.length;a++){const o=s[a];if(!o.classList.contains(_))t.push(...Array.from(o.children));else{t.push(...Array.from(o.children));break}}for(;t.length;){const a=t.shift();((a==null?void 0:a.tagName)==="UL"||(a==null?void 0:a.classList.contains(X)))&&t.push(...Array.from(a==null?void 0:a.children)),a!==e&&((a==null?void 0:a.tagName)==="DIV"&&t.unshift(...Array.from(a==null?void 0:a.children)),a==null||a.classList.remove(Y),a==null||a.classList.remove(Z))}}function ee(e,l,t=!1){t?he(e,l):ge(e,l)}function ye(e){var s;const l=/layer_(\d{1,})/gim,t=e.className;return(s=l.exec(t))==null?void 0:s[1]}const be={disabled:{type:Boolean,default:!1},href:{type:String,default:""},route:{type:[String,Object]}},te=E("menu");function ne(e,l,t,s){const a=n.ref(!1);return t?e.includes(l)?a.value=!0:a.value=!1:e[0]===l&&!s.value?a.value=!0:a.value=!1,a.value}function ve(e){var t,s;let l=e.parentElement;for(;!l.classList.contains(te.b());)((t=l.firstElementChild)==null?void 0:t.tagName)==="DIV"&&((s=l==null?void 0:l.firstElementChild)==null||s.classList.add(`${te.b()}-active-parent`)),l=l.parentElement;return l}function Le(e,l,t,s){if(t&&l){const a=e.route||s,o=l.push(a).then(d=>d);return{route:a,routerResult:o}}}const q=E("menu");function se(e){const l=e.composedPath();for(let t=0;t<l.length;t++){const s=l[t];if(s.classList.contains(`${q.b()}-horizontal`))break;if(s.classList.contains(`${q.b()}-item-horizontal-wrapper`))continue;s.tagName!=="SPAN"&&s.classList.add(`${q.b()}-item-select`)}}const V=E("menu"),B=`${V.b()}-item-select`,we=`${V.b()}-item-disabled`;var F=n.defineComponent({name:"DMenuItem",props:be,setup(e,l){var c,b;const t=n.getCurrentInstance(),s=String(t==null?void 0:t.vnode.key),a=n.inject("menuStore"),o=n.inject("mode"),d=n.inject("multiple"),f=n.inject("defaultIndent"),m=n.inject("isCollapsed"),v=n.inject("defaultSelectKey"),{disabled:z}=n.toRefs(e),L=n.ref(ne(v.value,s,d,z)),S=n.ref(!0),A=n.inject("rootMenuEmit"),k=n.inject("useRouter"),P=t==null?void 0:t.appContext.config.globalProperties.$router,w=n.computed(()=>({[`${V.b()}-item`]:!0,[`${V.b()}-item-isCollapsed`]:m.value,[B]:L.value,[we]:z.value}));a.on("menuItem:clear:select",()=>{L.value=!1});const N=r=>{var u;r.stopPropagation();const i=r.currentTarget;let p;if(e.disabled&&r.preventDefault(),!e.disabled){if(!d)a.emit("menuItem:clear:select"),ee(i,r,o.value==="horizontal"),o.value==="horizontal"&&se(r),L.value=!0,p=Le(e,P,k.value,s);else if(i.classList.contains(B)){A("deselect",{type:"deselect",key:s,el:i,e:r}),L.value=!1;return}else L.value=!0,i.classList.add(B);p===void 0?A("select",{type:"select",key:s,el:i,e:r}):A("select",{type:"select",key:s,el:i,e:r,route:p})}if(o.value==="vertical"){const g=r.currentTarget;ve(g)}if(o.value==="horizontal"){const g=(u=i.parentElement)==null?void 0:u.parentElement;g==null||g.classList.add(`${V.b()}-active-parent`)}},$=n.createVNode("span",{class:`${V.b()}-icon`},[(b=(c=l.slots).icon)==null?void 0:b.call(c)]),y=n.ref(null);return n.watch(z,()=>{d||(w.value[B]=!1)}),n.watch(()=>[...v.value],r=>{L.value=ne(r,s,d,z),w.value[B]=L.value}),n.onMounted(()=>{var p,u;let r="";const i=y.value;o.value==="vertical"&&(((u=(p=i.parentElement)==null?void 0:p.parentElement)==null?void 0:u.classList.contains(V.b()))?(S.value=!0,S.value&&(i.style.paddingRight="",i.style.paddingLeft=`${f}px`),n.watch(m,g=>{g?(i.style.padding!=="0"&&(r=i.style.padding),setTimeout(()=>{i.style.padding="0",i.style.width="",i.style.textAlign="center"},300),i.style.display="block"):(i.style.padding=`${r}`,i.style.textAlign="",i.style.display="flex")})):S.value=!1)}),()=>o.value==="vertical"?n.createVNode("div",{class:`${V.b()}-item-vertical-wrapper`},[n.createVNode("li",{class:w.value,onClick:N,ref:y},[l.slots.icon!==void 0&&$,e.href===""?n.createVNode(n.Transition,{name:"fade"},{default:()=>{var r,i;return[n.withDirectives(n.createVNode("span",null,[(i=(r=l.slots).default)==null?void 0:i.call(r)]),[[n.vShow,!m.value]])]}}):n.createVNode("a",{href:e.href},[n.createVNode(n.Transition,{name:"fade"},{default:()=>{var r,i;return[(i=(r=l.slots).default)==null?void 0:i.call(r)]}})])])]):n.createVNode("li",{class:w.value,onClick:N,ref:y},[l.slots.icon!==void 0&&$,e.href===""?n.createVNode(n.Transition,{name:"fade"},{default:()=>{var r,i;return[n.withDirectives(n.createVNode("span",null,[(i=(r=l.slots).default)==null?void 0:i.call(r)]),[[n.vShow,!m.value]])]}}):n.createVNode("a",{href:e.href},[n.createVNode(n.Transition,{name:"fade"},{default:()=>{var r,i;return[(i=(r=l.slots).default)==null?void 0:i.call(r)]}})])])}});function ae(e=8){const l="abcdefghijklmnopqrstuvwxyz0123456789";let t="";for(let s=0;s<e;s++)t+=l[parseInt((Math.random()*l.length).toString())];return t}function le(e){for(;e&&e.tagName!=="LI"&&e.tagName!=="UL";)e=e.parentElement;return e}const oe="0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out",D={"before-enter"(e){e.style.transition=oe,e.setAttribute("data-oldPadding",e.style.padding),e.setAttribute("data-oldMargin",e.style.margin),e.style.height="0",e.style.padding="0",e.style.margin="0"},enter(e){e.dataset.oldOverflow=e.style.overflow,e.scrollHeight!==0?e.style.height=e.scrollHeight+"px":e.style.height="",e.style.padding=e.getAttribute("data-oldPadding"),e.style.margin=e.getAttribute("data-oldMargin"),e.style.overflow="hidden"},"after-enter"(e){e.style.transition="",e.style.transition="",e.style.height="",e.style.overflow=e.getAttribute("data-overflow")},"before-leave"(e){e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.dataset.oldOverflow=e.style.overflow,e.style.height=e.scrollHeight+"px",e.style.overflow="hidden"},leave(e){e.scrollHeight!==0&&(e.style.transition=oe,e.style.height="0",e.style.paddingTop="0",e.style.paddingBottom="0")},"after-leave"(e){e.style.transition="",e.style.height="",e.style.overflow=e.dataset.oldOverflow,e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom}};var Ne=n.defineComponent({name:"DMenuTransition",setup(e,l){return()=>n.createVNode(n.Transition,{onBeforeEnter:t=>D["before-enter"](t),onBeforeLeave:t=>D["before-leave"](t),onEnter:t=>D.enter(t),onAfterEnter:t=>D["after-enter"](t),onLeave:t=>D.leave(t),onAfterLeave:t=>D["after-leave"](t)},{default:()=>{var t,s;return[(s=(t=l.slots).default)==null?void 0:s.call(t)]}})}});const $e={title:{type:String,default:""},disabled:{type:Boolean,default:!1}},R=E("menu"),Se=E("submenu"),I=`${R.b()}-item-horizontal-wrapper-hidden`,H=`${R.b()}-item-horizontal-wrapper-show`;function j(e,l,t){const s=l.currentTarget,a=s.parentElement,o=t.children;if(t.style.padding="0 20px !important",e==="mouseenter"){if((a==null?void 0:a.tagName)==="DIV"){t.classList.add(`${R.b()}-item-horizontal-wrapper-level`);const{width:d}=s.getClientRects()[0];t.style.top="0px",t.style.left=`${d}px`}else t.style.top="26px",t.style.left="0px";t.classList.remove(I),t.classList.add(H);for(let d=0;d<o.length;d++){const f=o[d];if(f.tagName==="UL"&&f.classList.contains(Se.b())){const m=f.getElementsByClassName(`${R.b()}-item-horizontal-wrapper`)[0];f.addEventListener("mouseenter",v=>{v.stopPropagation(),j("mouseenter",v,m),m.classList.remove(I),m.classList.add(H)}),f.addEventListener("mouseleave",v=>{v.stopPropagation(),j("mouseleave",v,m),m.classList.remove(H),m.classList.add(I)})}}}e==="mouseleave"&&(t.classList.remove(H),t.classList.add(I))}const G=E("menu"),T=E("submenu").b();var K=n.defineComponent({name:"DSubMenu",props:$e,setup(e,l){const t=n.ref(!0),{vnode:{key:s}}=n.getCurrentInstance();let a=String(s);const o=n.inject("openKeys"),d=n.ref(o.value.includes(a)),f=n.inject("defaultIndent"),m=n.inject("isCollapsed"),v=n.inject("mode"),z=n.ref(null),L=n.inject("rootMenuEmit"),S=v.value==="horizontal";a==="null"&&(console.warn("[devui][menu]: Key can not be null"),a=`randomKey-${ae(16)}`);const A=c=>{c.stopPropagation();const b=le(c.target);if(!(b.classList.contains(T)&&S)&&(S&&(ee(b,c,!0),se(c)),!e.disabled&&v.value!=="horizontal")){const r=le(c.target),i=o.value.indexOf(a);i>=0&&r.tagName==="UL"?o.value.splice(i,1):r.tagName==="UL"&&o.value.push(a),d.value=o.value.indexOf(a)>=0,L("submenu-change",{type:"submenu-change",state:d.value,key:a,el:b})}},k=n.ref(null);let P;const w=n.ref(null),N=n.ref(null);let $="";const y=n.ref("");return n.watchEffect(()=>{P=k.value,fe({el:w.value})},{flush:"post"}),n.watch(()=>o,c=>{c.value.includes(a)?d.value=!0:d.value=!1},{deep:!0}),n.onMounted(()=>{var r;const c=N.value,b=w.value;me(),y.value=`layer_${(r=Array.from(b.classList).at(-1))==null?void 0:r.replace("layer_","")}`,S&&!e.disabled&&(w.value.addEventListener("mouseenter",i=>{i.stopPropagation(),j("mouseenter",i,P)}),w.value.addEventListener("mouseleave",i=>{i.stopPropagation(),j("mouseleave",i,P)})),n.watch(m,i=>{const p=Number(ye(b));Number.isNaN(p)||p>2&&(t.value=!m.value),i?(c.style.padding!=="0"&&($=c.style.padding),setTimeout(()=>{c.style.padding="0",c.style.width="",c.style.textAlign="center"},300),c.style.display="block"):(c.style.padding=`${$}`,c.style.textAlign="",c.style.display="flex")})}),()=>{var c,b,r,i;return n.withDirectives(n.createVNode("ul",{onClick:A,class:[T,y.value,e.disabled&&`${T}-disabled`],ref:w},[n.createVNode("div",{class:[`${T}-title`],style:`padding: 0 ${f}px`,ref:N},[n.createVNode("span",{class:`${G.b()}-icon`},[(b=(c=l.slots)==null?void 0:c.icon)==null?void 0:b.call(c)]),n.withDirectives(n.createVNode("span",{class:`${T}-title-content`},[e.title]),[[n.vShow,!m.value]]),n.withDirectives(n.createVNode("i",{class:{"icon icon-chevron-up":y.value!==`layer_${T}`,"icon icon-chevron-right":y.value===`layer_${T}`,"is-opened":d.value}},null),[[n.vShow,!m.value&&s!=="overflowContainer"]])]),S?n.withDirectives(n.createVNode("div",{class:`${G.b()}-item-horizontal-wrapper ${G.b()}-item-horizontal-wrapper-hidden`,ref:k},[(i=(r=l.slots).default)==null?void 0:i.call(r)]),[[n.vShow,!e.disabled]]):n.createVNode(Ne,null,{default:()=>{var p,u;return[n.withDirectives(n.createVNode("div",{class:[`${T}-menu-item-vertical-wrapper`],ref:z},[(u=(p=l.slots).default)==null?void 0:u.call(p)]),[[n.vShow,d.value]])]}})]),[[n.vShow,t.value]])}}});const Ce={width:{type:String,default:""},collapsed:{type:Boolean,default:!1},collapsedIndent:{type:Number,default:24},indentSize:{type:Number,default:24},multiple:{type:Boolean,default:!1},openKeys:{type:Array,default:[]},defaultSelectKeys:{type:Array,default:[]},mode:{type:String,default:"vertical"},router:{type:Boolean,default:!1},disableOverflowStyle:{type:Boolean,default:!1}};var Te="";const M={};class Ee{constructor(l){ce(this,"rootMenuName");this.rootMenuName=l}on(l,t){var s;((s=M==null?void 0:M[this.rootMenuName])==null?void 0:s[l])||Reflect.set(M[this.rootMenuName],l,[]),M[this.rootMenuName][l].push(t)}emit(l,...t){M[this.rootMenuName][l].forEach(s=>s(...t))}off(l,t){const s=M[this.rootMenuName][l].indexOf(t);s>=0&&M[this.rootMenuName][l].splice(s,1)}}function Me(e){return M[e]||Reflect.set(M,e,{}),new Ee(e)}var J=n.defineComponent({name:"DMenu",props:Ce,emits:["select","deselect","submenu-change"],setup(e,l){const t=E("menu"),{openKeys:s,mode:a,collapsed:o,defaultSelectKeys:d,router:f}=n.toRefs(e),m=ae(16),v=Me(m);n.provide("menuStore",v),n.provide("isCollapsed",o),n.provide("defaultIndent",e.indentSize),n.provide("multiple",e.multiple),n.provide("openKeys",s),n.provide("defaultSelectKey",d),n.provide("mode",a),n.provide("collapsedIndent",e.collapsedIndent),n.provide("rootMenuEmit",l.emit),n.provide("useRouter",f),ue(e.indentSize);const z=n.ref(null),L=n.ref(0),S=n.ref(null),A=`${t.b()}-item-select`,k=n.computed(()=>({[`${t.b()}`]:!0,[`${t.b()}-vertical`]:a.value==="vertical",[`${t.b()}-horizontal`]:a.value==="horizontal",[`${t.b()}-collapsed`]:o.value})),P=n.reactive({[A]:!1,[`${t.b()}-overflow-container`]:!0}),w=N=>{const $=Array.from(N.children);for(const y of $)if(y.classList.contains(A)){P[A]=!0;break}else P[A]=!1};return n.onMounted(()=>{var N;if(e.mode==="horizontal"){let $=!1;const y=(N=S.value)==null?void 0:N.$el,c=z.value,b=c.children,r=y.children[1],i=new IntersectionObserver(p=>{p.forEach(u=>{if(!u.isIntersecting&&!e.disableOverflowStyle){const g=u.target.cloneNode(!0);u.target.classList.contains(`${t.b()}-overflow-container`)?$&&u.target.previousElementSibling&&r.children.length?c.appendChild(u.target.previousElementSibling):$=!0:(L.value+=1,u.target.style.visibility="hidden",y.nextSibling?c.insertBefore(u.target,y.nextSibling):c.appendChild(u.target),r.appendChild(g),w(r))}else if(!u.target.classList.contains(`${t.b()}-overflow-container`)&&u.target.style.visibility==="hidden"){i.unobserve(u.target),c.insertBefore(u.target,y),u.target.style.visibility="";const g=y.previousElementSibling;if(g&&u.boundingClientRect.width%u.target.getBoundingClientRect().width===0&&i.observe(g),g==null?void 0:g.classList.contains("devui-submenu")){const ie=g,re=g.children[1];ie.addEventListener("mouseenter",O=>{O.stopPropagation(),j("mouseenter",O,re)}),ie.addEventListener("mouseleave",O=>{O.stopPropagation(),j("mouseleave",O,re)})}L.value-=1,i.observe(u.target),r.lastChild&&r.removeChild(r.lastChild),w(r)}})},{root:c,threshold:1,rootMargin:"8px"});for(let p=0;p<b.length;p++)i.observe(b[p])}}),()=>{var N,$;return n.createVNode("ul",{ref:z,class:k.value,style:[e.collapsed?`width:${e.collapsedIndent*2}px`:`width: ${e.width}`]},[($=(N=l.slots).default)==null?void 0:$.call(N),n.withDirectives(n.createVNode(K,{ref:S,key:"overflowContainer",title:"...",class:P},null),[[n.vShow,L.value>0&&a.value==="horizontal"&&!e.disableOverflowStyle]])])}}}),Ae={title:"Menu \u83DC\u5355",category:"\u5BFC\u822A",status:"100%",install(e){e.component(J.name,J),e.component(F.name,F),e.component(K.name,K)}};h.Menu=J,h.MenuItem=F,h.SubMenu=K,h.default=Ae,Object.defineProperty(h,"__esModule",{value:!0}),h[Symbol.toStringTag]="Module"});