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

vue3 component library, css framework

(function(e,n){typeof exports=="object"&&typeof module!="undefined"?module.exports=n(require("vue")):typeof define=="function"&&define.amd?define(["vue"],n):(e=typeof globalThis!="undefined"?globalThis:e||self,e["es-modal"]=n(e.Vue))})(this,function(e){"use strict";const n=e.defineComponent({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(t,o){const{emit:s}=o,l=()=>{s("update:modelValue",!1)},a=()=>{t.beforeClose?t.beforeClose(l):l()};return{handleClose:a,clickConfirm:()=>{t.confirm?t.confirm(l):a(),s("confirm")},clickCancel:()=>{t.cancel?t.cancel(l):a(),s("cancel")}}}}),d=()=>{e.useCssVars(t=>({"996535f6-maxHeight":t.maxHeight}))},r=n.setup;n.setup=r?(t,o)=>(d(),r(t,o)):d,e.pushScopeId("data-v-996535f6");const c={class:"es-modal__header"},f={class:"es-modal__header__title"},m={class:"es-modal__content"},p={class:"es-modal__footer"};e.popScopeId();function _(t,o,s,l,a,C){const i=e.resolveComponent("es-button");return e.openBlock(),e.createBlock(e.Teleport,{to:"body",disabled:!t.appendToBody},[e.createVNode(e.Transition,{"enter-active-class":"es-animated fadeIn","leave-active-class":"es-animated fadeOut",duration:100},{default:e.withCtx(()=>[t.modelValue?(e.openBlock(),e.createElementBlock("div",{key:0,class:"es-mask__global",onClick:o[1]||(o[1]=e.withModifiers(()=>t.closeOnClickMask&&t.handleClose(),["self"]))},[e.createVNode(e.Transition,{"enter-active-class":"es-animated fadeIn","leave-active-class":"es-animated fadeOut",duration:50},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(["es-modal",{"es-modal__fullscreen":t.fullscreen}]),style:e.normalizeStyle(t.styles)},[e.createElementVNode("span",{class:"es-modal__header__icon-close es-icon-close-line",onClick:o[0]||(o[0]=(...g)=>t.handleClose&&t.handleClose(...g))}),e.createElementVNode("div",c,[e.renderSlot(t.$slots,"header",{},()=>[e.createElementVNode("span",f,e.toDisplayString(t.title),1)])]),e.createElementVNode("div",m,[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.message),1)])]),e.createElementVNode("div",p,[e.renderSlot(t.$slots,"footerLeft"),e.renderSlot(t.$slots,"footer",{},()=>[t.showConfirm?(e.openBlock(),e.createBlock(i,{key:0,class:"es-modal__footer__confirm",size:"small",onClick:t.clickConfirm},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.confirmText),1)]),_:1},8,["onClick"])):e.createCommentVNode("v-if",!0),t.showCancel?(e.openBlock(),e.createBlock(i,{key:1,class:"es-modal__footer__cancel",size:"small",plain:"",onClick:t.clickCancel},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.cancelText),1)]),_:1},8,["onClick"])):e.createCommentVNode("v-if",!0)])])],6)]),_:3})])):e.createCommentVNode("v-if",!0)]),_:3})],8,["disabled"])}function h(t,o){o===void 0&&(o={});var s=o.insertAt;if(!(!t||typeof document=="undefined")){var l=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css",s==="top"&&l.firstChild?l.insertBefore(a,l.firstChild):l.appendChild(a),a.styleSheet?a.styleSheet.cssText=t:a.appendChild(document.createTextNode(t))}}var u=`.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;
}`;return h(u),n.render=_,n.__scopeId="data-v-996535f6",n.__file="components/modal/index.vue",n.install=t=>{t.component("es-modal",n)},n});