eslink-ui-plus
Version:
vue3 component library, css framework
104 lines (103 loc) • 9.25 kB
JavaScript
(function(e,o){typeof exports=="object"&&typeof module!="undefined"?module.exports=o(require("vue")):typeof define=="function"&&define.amd?define(["vue"],o):(e=typeof globalThis!="undefined"?globalThis:e||self,e["es-drawer"]=o(e.Vue))})(this,function(e){"use strict";var o=e.defineComponent({name:"im-drawer",props:{visible:{type:Boolean,default:!1},appendToBody:{type:Boolean,default:!1},modal:{type:Boolean,default:!1},isDrawer:{type:Boolean,default:!0},headerSlot:{type:Boolean,default:!1},footerSlot:{type:Boolean,default:!1},title:{type:String,default:""},closeBtnShow:{type:Boolean,default:!0},closeOnClickModal:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},loadingColor:{type:String,default:""},footerHeight:{type:String,default:""},width:{type:String,default:""},height:{type:String,default:""},headerBackground:{type:String,default:""},footerBackground:{type:String,default:""},titleColor:{type:String,default:""},mainBackground:{type:String,default:""},align:{type:String,default:""},link:{type:String,default:""}},emits:["open","opened","close","closed","update:modelValue","update:visible","update:loading"],setup(t,{emit:n}){const d=e.ref(null),a=e.shallowReactive({modalShow:typeof t.modal=="undefined"?!1:t.modal,drawerShow:t.visible?t.visible:!1,aligns:t.align||"right",enterClass:"",leaveClass:""});e.watch(()=>t.visible,l=>{a.drawerShow=l},{immediate:!0});const r=e.computed(()=>{const l=a.aligns;let p="",g="";return(l=="right"||l=="left")&&(p=t.width||"25%",g=t.height||"100%"),(l=="top"||l=="bottom")&&(p=t.width||"100%",g=t.height||"25%"),{width:p,height:g}}),s=()=>{a.enterClass={left:"es-animated fadeOutRightBig",right:"es-animated fadeOutLeftBig",top:"es-animated fadeOutDownBig",bottom:"es-animated fadeOutUpBig"}[a.aligns]||"",a.leaveClass={left:"es-animated fadeOutLeftBig",right:"es-animated fadeOutRightBig",top:"es-animated fadeOutUpBig",bottom:"es-animated fadeOutDownBig"}[a.aligns]||""},f=()=>{n("open")},c=()=>{a.drawerShow=!0,n("opened")},i=()=>{a.drawerShow=!1,t.loading!=null&&n("update:loading",!1),n("update:visible",!1),n("close")};return{setting:a,close:i,drawerHide:()=>{!t.closeOnClickModal||i()},drawer:d,beforeEnter:s,drawerBeforeEnter:f,drawerEnter:l=>{console.log(l)},drawerAfterEnter:c,drawerleave:()=>{n("closed")},drawerbeforeLeave:()=>{},drawerafterLeave:()=>{a.drawerShow=!1},leave:()=>{s()},drawerWH:r}}});e.pushScopeId("data-v-1e2a4222");const w={key:0,class:"loading"},h={class:"loader",title:"2"},m={id:"loader-1",version:"1.1",x:"0px",y:"0px",width:"40px",height:"40px",viewbox:"0 0 50 50",style:{"enable-background":"new 0 0 50 50"}},y=["fill"],u=e.createElementVNode("p",{style:{color:"var(--neutral14)"}},"\u52A0\u8F7D\u4E2D...",-1),b={class:"head__container"},B={key:0,class:"title"},k=[e.createElementVNode("i",{class:"es-icon-close-line"},null,-1)],S=e.createElementVNode("i",{class:"es-icon-arrow-right-circle-fill"},null,-1);e.popScopeId();function C(t,n,d,a,r,s){const f=e.resolveComponent("animatetransform"),c=e.resolveComponent("router-link");return e.openBlock(),e.createBlock(e.Teleport,{to:"body",disabled:!t.appendToBody},[e.createVNode(e.Transition,{disabled:!t.isDrawer,"enter-active-class":"es-animated fadeIn","leave-active-class":"es-animated fadeOut",onBeforeEnter:t.drawerBeforeEnter,onEnter:t.drawerEnter,onAfterEnter:t.drawerAfterEnter,onLeave:t.drawerleave,onBeforeLeave:t.drawerbeforeLeave,onAfterLeave:t.drawerafterLeave,duration:{enter:200,leave:200}},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["drawer__container",[t.isDrawer?"is--drawer":""]]),onClick:n[3]||(n[3]=(...i)=>t.drawerHide&&t.drawerHide(...i)),style:e.normalizeStyle({"background-color":t.setting.modalShow?"rgba(0,0,0,0.5)":""})},[e.createCommentVNode(` <transition\r
:enter-active-class="setting.enterClass"\r
:leave-active-class="setting.leaveClass"\r
:duration="{ enter: 400, leave: 150 }"\r
@before-enter="beforeEnter"\r
@leave="leave"\r
> `),e.withDirectives(e.createElementVNode("div",{ref:"drawer",class:e.normalizeClass(["drawer",t.setting.aligns=="left"?"drawer--left":t.setting.aligns=="right"?"drawer--right":t.setting.aligns=="top"?"drawer--top":t.setting.aligns=="bottom"?"drawer--bottom":"drawer--right"]),style:e.normalizeStyle({width:t.drawerWH.width,height:t.drawerWH.height}),onClick:n[2]||(n[2]=e.withModifiers(()=>{},["stop"]))},[e.createCommentVNode(" \u52A0\u8F7D\u4E2D"),(t.loading==null?!1:t.loading)?(e.openBlock(),e.createElementBlock("div",w,[e.createElementVNode("div",h,[(e.openBlock(),e.createElementBlock("svg",m,[e.createElementVNode("path",{d:"M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z",fill:t.loadingColor?t.loadingColor:"var(--blue6)"},[e.createVNode(f,{attributetype:"xml",attributename:"transform",type:"rotate",from:"0 25 25",to:"360 25 25",dur:"0.8s",repeatcount:"indefinite"})],8,y)])),u])])):e.createCommentVNode("v-if",!0),e.createElementVNode("header",{style:e.normalizeStyle({background:t.headerBackground?t.headerBackground:""})},[e.createElementVNode("div",b,[t.headerSlot?(e.openBlock(),e.createElementBlock("span",B,[e.renderSlot(t.$slots,"header")])):(e.openBlock(),e.createElementBlock("span",{key:1,class:"title",style:e.normalizeStyle({color:t.titleColor?t.titleColor+"!important":""})},e.toDisplayString(t.title?t.title:"\u6807\u9898"),5)),(t.closeBtnShow==null?!0:t.closeBtnShow)?(e.openBlock(),e.createElementBlock("span",{key:2,class:"close",onClick:n[0]||(n[0]=e.withModifiers((...i)=>t.close&&t.close(...i),["stop"]))},k)):e.createCommentVNode("v-if",!0),t.link?(e.openBlock(),e.createElementBlock("span",{key:3,class:"close",onClick:n[1]||(n[1]=e.withModifiers((...i)=>t.close&&t.close(...i),["stop"]))},[e.createVNode(c,{to:t.link},{default:e.withCtx(()=>[S]),_:1},8,["to"])])):e.createCommentVNode("v-if",!0)])],4),e.createElementVNode("main",{style:e.normalizeStyle({background:t.mainBackground?t.mainBackground:""})},[e.renderSlot(t.$slots,"default")],4),(t.footerSlot?t.footerSlot:!1)?(e.openBlock(),e.createElementBlock("footer",{key:1,style:e.normalizeStyle({height:t.footerHeight?t.footerHeight:"60px",background:t.footerBackground?t.footerBackground:""})},[e.renderSlot(t.$slots,"footer")],4)):e.createCommentVNode("v-if",!0)],6),[[e.vShow,t.setting.drawerShow]]),e.createCommentVNode(" </transition> ")],6),[[e.vShow,t.setting.drawerShow]])]),_:3},8,["disabled","onBeforeEnter","onEnter","onAfterEnter","onLeave","onBeforeLeave","onAfterLeave"])],8,["disabled"])}function E(t,n){n===void 0&&(n={});var d=n.insertAt;if(!(!t||typeof document=="undefined")){var a=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css",d==="top"&&a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}}var v=`@charset "UTF-8";
.drawer__container[data-v-1e2a4222] {
width: 100%;
height: 100%;
overflow: hidden;
/*\u52A0\u8F7D\u6837\u5F0F*/
}
.drawer__container.is--drawer[data-v-1e2a4222] {
position: fixed;
top: 0;
left: 0;
z-index: 2000;
}
.drawer__container .drawer[data-v-1e2a4222] {
position: absolute;
display: flex;
flex-direction: column;
background: #ffffff;
border-left: 1px solid #e6e7ef;
border-top: 1px solid #e6e7ef;
}
.drawer__container .drawer--top[data-v-1e2a4222] {
left: 0;
top: 0;
}
.drawer__container .drawer--bottom[data-v-1e2a4222] {
left: 0;
bottom: 0;
}
.drawer__container .drawer--left[data-v-1e2a4222] {
left: 0;
top: 0;
}
.drawer__container .drawer--right[data-v-1e2a4222] {
right: 0px;
top: 0;
margin: 0;
}
.drawer__container .loading[data-v-1e2a4222] {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
z-index: 2099;
/*background-color: rgba(0,0,0,0.7);*/
}
.drawer__container .head__container[data-v-1e2a4222] {
height: 100%;
display: flex;
padding: 0 20px;
line-height: 50px;
}
.drawer__container .head__container .title[data-v-1e2a4222] {
flex: 1;
font-size: 15px;
color: #17233d;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
.drawer__container .head__container i[data-v-1e2a4222] {
width: 30px;
text-align: right;
font-size: 18px;
color: var(--blue4);
cursor: pointer;
z-index: 2100;
}
.drawer__container .head__container i[data-v-1e2a4222]:hover {
color: var(--blue6);
}
.drawer__container main[data-v-1e2a4222] {
overflow: auto;
flex: 1;
padding: 20px 20px;
box-sizing: border-box;
}
.drawer__container footer[data-v-1e2a4222] {
border-top: 1px solid #e8eaec;
padding: 10px 20px;
box-sizing: border-box;
}
.drawer__container .loader[data-v-1e2a4222] {
height: 100px;
width: 20%;
text-align: center;
padding: 1em;
display: inline-block;
vertical-align: top;
position: absolute;
top: 40%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}`;return E(v),o.render=C,o.__scopeId="data-v-1e2a4222",o.__file="components/drawer/index.vue",o.install=t=>{t.component("es-drawer",o)},o});