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

vue3 component library, css framework

import{defineComponent as b,useCssVars as k,pushScopeId as x,popScopeId as w,resolveComponent as B,openBlock as i,createBlock as u,Teleport as S,createVNode as _,Transition as h,withCtx as d,createElementBlock as T,withModifiers as V,createElementVNode as s,normalizeClass as z,normalizeStyle as $,renderSlot as r,toDisplayString as f,createTextVNode as m,createCommentVNode as p}from"vue";const a=b({props:{styles:{type:Object,default:()=>({})},modelValue:{type:Boolean,default:!1},beforeClose:{type:Function},title:{type:String,default:"\u63D0\u793A"},message:String,fullscreen:{type:Boolean,default:!1},appendToBody:{type:Boolean,default:!1},closeOnClickMask:{type:Boolean,default:!0},showCancel:{type:Boolean,default:!0},cancelText:{type:String,default:"\u53D6\u6D88"},showConfirm:{type:Boolean,default:!0},confirmText:{type:String,default:"\u786E\u5B9A"},cancel:{type:Function,default:null},confirm:{type:Function,default:null}},emits:["update:modelValue","confirm","cancel"],setup(e,n){const{emit:l}=n,o=()=>{l("update:modelValue",!1)},t=()=>{e.beforeClose?e.beforeClose(o):o()};return{handleClose:t,clickConfirm:()=>{e.confirm?e.confirm(o):t(),l("confirm")},clickCancel:()=>{e.cancel?e.cancel(o):t(),l("cancel")}}}}),v=()=>{k(e=>({"996535f6-maxHeight":e.maxHeight}))},g=a.setup;a.setup=g?(e,n)=>(v(),g(e,n)):v,x("data-v-996535f6");const I={class:"es-modal__header"},N={class:"es-modal__header__title"},E={class:"es-modal__content"},O={class:"es-modal__footer"};w();function j(e,n,l,o,t,C){const c=B("es-button");return i(),u(S,{to:"body",disabled:!e.appendToBody},[_(h,{"enter-active-class":"es-animated fadeIn","leave-active-class":"es-animated fadeOut",duration:100},{default:d(()=>[e.modelValue?(i(),T("div",{key:0,class:"es-mask__global",onClick:n[1]||(n[1]=V(()=>e.closeOnClickMask&&e.handleClose(),["self"]))},[_(h,{"enter-active-class":"es-animated fadeIn","leave-active-class":"es-animated fadeOut",duration:50},{default:d(()=>[s("div",{class:z(["es-modal",{"es-modal__fullscreen":e.fullscreen}]),style:$(e.styles)},[s("span",{class:"es-modal__header__icon-close es-icon-close-line",onClick:n[0]||(n[0]=(...y)=>e.handleClose&&e.handleClose(...y))}),s("div",I,[r(e.$slots,"header",{},()=>[s("span",N,f(e.title),1)])]),s("div",E,[r(e.$slots,"default",{},()=>[m(f(e.message),1)])]),s("div",O,[r(e.$slots,"footerLeft"),r(e.$slots,"footer",{},()=>[e.showConfirm?(i(),u(c,{key:0,class:"es-modal__footer__confirm",size:"small",onClick:e.clickConfirm},{default:d(()=>[m(f(e.confirmText),1)]),_:1},8,["onClick"])):p("v-if",!0),e.showCancel?(i(),u(c,{key:1,class:"es-modal__footer__cancel",size:"small",plain:"",onClick:e.clickCancel},{default:d(()=>[m(f(e.cancelText),1)]),_:1},8,["onClick"])):p("v-if",!0)])])],6)]),_:3})])):p("v-if",!0)]),_:3})],8,["disabled"])}function A(e,n){n===void 0&&(n={});var l=n.insertAt;if(!(!e||typeof document=="undefined")){var o=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",l==="top"&&o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}}var D=`.es-mask__global[data-v-996535f6] {
  position: fixed;
  height: 100%;
  overflow: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  z-index: 2000;
  background-color: rgba(0, 0, 0, 0.5);
}
.es-modal[data-v-996535f6] {
  width: 30%;
  background: #ffffff;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.06), 0 7px 18px 0 rgba(0, 0, 0, 0.1);
  padding: 0 16px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0;
  left: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  z-index: 2001;
  border-radius: 4px;
}
.es-modal__header[data-v-996535f6] {
  height: 56px;
  line-height: 56px;
}
.es-modal__header__icon-close[data-v-996535f6] {
  position: absolute;
  cursor: pointer;
  color: #909399;
  top: 16px;
  right: 16px;
  color: #a7baf1;
}
.es-modal__header__icon-close[data-v-996535f6]:hover {
  color: #409eff;
}
.es-modal__content[data-v-996535f6] {
  flex: 1;
  max-height: var(--996535f6-maxHeight);
  overflow: auto;
}
.es-modal__footer[data-v-996535f6] {
  justify-items: end;
  width: 100%;
  box-sizing: border-box;
  padding-top: 12px;
  height: 56px;
  line-height: 44px;
}
.es-modal__footer__cancel[data-v-996535f6], .es-modal__footer__confirm[data-v-996535f6] {
  float: right;
}
.es-modal__footer__cancel[data-v-996535f6] {
  margin-right: 8px;
}
.es-modal__fullscreen[data-v-996535f6] {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transform: unset;
          transform: unset;
  width: unset;
}`;A(D),a.render=j,a.__scopeId="data-v-996535f6",a.__file="components/modal/index.vue",a.install=e=>{e.component("es-modal",a)};export{a as default};