eslink-ui-plus/es/drawer/index.js

vue3 component library, css framework

import{defineComponent as _,ref as L,shallowReactive as z,watch as D,computed as H,pushScopeId as O,popScopeId as A,resolveComponent as B,openBlock as d,createBlock as T,Teleport as $,createVNode as m,Transition as I,withCtx as k,withDirectives as S,createElementVNode as o,normalizeClass as C,normalizeStyle as f,createCommentVNode as l,withModifiers as b,createElementBlock as s,renderSlot as y,toDisplayString as N,vShow as E}from"vue";var g=_({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(e,{emit:t}){const u=L(null),a=z({modalShow:typeof e.modal=="undefined"?!1:e.modal,drawerShow:e.visible?e.visible:!1,aligns:e.align||"right",enterClass:"",leaveClass:""});D(()=>e.visible,i=>{a.drawerShow=i},{immediate:!0});const n=H(()=>{const i=a.aligns;let c="",v="";return(i=="right"||i=="left")&&(c=e.width||"25%",v=e.height||"100%"),(i=="top"||i=="bottom")&&(c=e.width||"100%",v=e.height||"25%"),{width:c,height:v}}),p=()=>{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]||""},w=()=>{t("open")},h=()=>{a.drawerShow=!0,t("opened")},r=()=>{a.drawerShow=!1,e.loading!=null&&t("update:loading",!1),t("update:visible",!1),t("close")};return{setting:a,close:r,drawerHide:()=>{!e.closeOnClickModal||r()},drawer:u,beforeEnter:p,drawerBeforeEnter:w,drawerEnter:i=>{console.log(i)},drawerAfterEnter:h,drawerleave:()=>{t("closed")},drawerbeforeLeave:()=>{},drawerafterLeave:()=>{a.drawerShow=!1},leave:()=>{p()},drawerWH:n}}});O("data-v-1e2a4222");const M={key:0,class:"loading"},V={class:"loader",title:"2"},F={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"}},R=["fill"],U=o("p",{style:{color:"var(--neutral14)"}},"\u52A0\u8F7D\u4E2D...",-1),W={class:"head__container"},j={key:0,class:"title"},q=o("i",{class:"es-icon-close-line"},null,-1),G=[q],J=o("i",{class:"es-icon-arrow-right-circle-fill"},null,-1);A();function K(e,t,u,a,n,p){const w=B("animatetransform"),h=B("router-link");return d(),T($,{to:"body",disabled:!e.appendToBody},[m(I,{disabled:!e.isDrawer,"enter-active-class":"es-animated fadeIn","leave-active-class":"es-animated fadeOut",onBeforeEnter:e.drawerBeforeEnter,onEnter:e.drawerEnter,onAfterEnter:e.drawerAfterEnter,onLeave:e.drawerleave,onBeforeLeave:e.drawerbeforeLeave,onAfterLeave:e.drawerafterLeave,duration:{enter:200,leave:200}},{default:k(()=>[S(o("div",{class:C(["drawer__container",[e.isDrawer?"is--drawer":""]]),onClick:t[3]||(t[3]=(...r)=>e.drawerHide&&e.drawerHide(...r)),style:f({"background-color":e.setting.modalShow?"rgba(0,0,0,0.5)":""})},[l(` <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
				> `),S(o("div",{ref:"drawer",class:C(["drawer",e.setting.aligns=="left"?"drawer--left":e.setting.aligns=="right"?"drawer--right":e.setting.aligns=="top"?"drawer--top":e.setting.aligns=="bottom"?"drawer--bottom":"drawer--right"]),style:f({width:e.drawerWH.width,height:e.drawerWH.height}),onClick:t[2]||(t[2]=b(()=>{},["stop"]))},[l(" \u52A0\u8F7D\u4E2D"),(e.loading==null?!1:e.loading)?(d(),s("div",M,[o("div",V,[(d(),s("svg",F,[o("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:e.loadingColor?e.loadingColor:"var(--blue6)"},[m(w,{attributetype:"xml",attributename:"transform",type:"rotate",from:"0 25 25",to:"360 25 25",dur:"0.8s",repeatcount:"indefinite"})],8,R)])),U])])):l("v-if",!0),o("header",{style:f({background:e.headerBackground?e.headerBackground:""})},[o("div",W,[e.headerSlot?(d(),s("span",j,[y(e.$slots,"header")])):(d(),s("span",{key:1,class:"title",style:f({color:e.titleColor?e.titleColor+"!important":""})},N(e.title?e.title:"\u6807\u9898"),5)),(e.closeBtnShow==null?!0:e.closeBtnShow)?(d(),s("span",{key:2,class:"close",onClick:t[0]||(t[0]=b((...r)=>e.close&&e.close(...r),["stop"]))},G)):l("v-if",!0),e.link?(d(),s("span",{key:3,class:"close",onClick:t[1]||(t[1]=b((...r)=>e.close&&e.close(...r),["stop"]))},[m(h,{to:e.link},{default:k(()=>[J]),_:1},8,["to"])])):l("v-if",!0)])],4),o("main",{style:f({background:e.mainBackground?e.mainBackground:""})},[y(e.$slots,"default")],4),(e.footerSlot?e.footerSlot:!1)?(d(),s("footer",{key:1,style:f({height:e.footerHeight?e.footerHeight:"60px",background:e.footerBackground?e.footerBackground:""})},[y(e.$slots,"footer")],4)):l("v-if",!0)],6),[[E,e.setting.drawerShow]]),l(" </transition> ")],6),[[E,e.setting.drawerShow]])]),_:3},8,["disabled","onBeforeEnter","onEnter","onAfterEnter","onLeave","onBeforeLeave","onAfterLeave"])],8,["disabled"])}function P(e,t){t===void 0&&(t={});var u=t.insertAt;if(!(!e||typeof document=="undefined")){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css",u==="top"&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}var Q=`@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%);
}`;P(Q),g.render=K,g.__scopeId="data-v-1e2a4222",g.__file="components/drawer/index.vue",g.install=e=>{e.component("es-drawer",g)};export{g as default};