30 lines
7.9 KiB
JavaScript
30 lines
7.9 KiB
JavaScript
|
import{css as c,html as y,Component as x,bind as g,styleMap as d}from"wkit";import"../form/input.js";let s=null,p=null;const a="\u63D0\u793A",u=["\u53D6\u6D88","\u786E\u5B9A"],h=["alert","confirm","prompt"],k=h.concat(["toast"]);class w extends x{static animation={};static props={type:{type:String,default:null,observer(t){this.#t=!k.includes(t)}},left:{type:String,attribute:!1},right:{type:String,attribute:!1},top:{type:String,attribute:!1},bottom:{type:String,attribute:!1},background:{type:String,attribute:!1},maskColor:{type:String,attribute:!1},mask:!1,maskClose:!1,title:{type:String,default:"",attribute:!1},content:{type:String,default:"",attribute:!1},btns:[]};static styles=[c`:host{display:none;justify-content:center;align-items:center;position:fixed;z-index:65534;left:0;top:0;width:100%;height:0}:host([type]){display:flex}:host([type=toast]) .layer,:host([type=common]) .layer{position:absolute}.noselect{-webkit-touch-callout:none;user-select:none}.noselect img,.noselect a{-webkit-user-drag:none}`,c`.layer{flex:0 auto;position:relative;z-index:65535;border-radius:3px;color:#666;font-size:14px;background:rgba(255,255,255,.8);box-shadow:0 5px 20px rgba(0,0,0,.3);transition:opacity .2s ease-in-out,left .2s ease-in-out,right .2s ease-in-out,top .2s ease-in-out,bottom .2s ease-in-out}.layer:active{z-index:65536}`,c`.layer__title{display:flex;justify-content:space-between;align-items:center;width:100%;height:60px;padding:15px;font-size:16px;color:var(--color-dark-2)}.layer__title wc-icon{--wc-icon-size: 14px}.layer__title wc-icon:hover{color:var(--color-red-1)}.layer__content{display:flex;position:relative;width:100%;height:auto;min-height:50px;word-break:break-all;word-wrap:break-word}::slotted(.layer__content__input){flex:1}::slotted(.layer__content__toast){flex-shrink:0;flex:1;display:flex;align-items:center;width:300px;min-height:40px;margin-bottom:15px !important;padding:0 10px !important;border-radius:3px;font-weight:normal;text-indent:8px;--wc-icon-size: 16px;color:var(--color-dark-1);box-shadow:0 2px 12px rgba(0,0,0,.1)}::slotted(.layer__content__toast+.layer__content__toast){margin-top:30px}::slotted(.layer__content__toast.style-info){border:1px solid #ebeef5;background:#edf2fc;color:var(--color-grey-3)}::slotted(.layer__content__toast.style-success){border:1px solid #e1f3d8;background:#f0f9eb;color:var(--color-green-3)}::slotted(.layer__content__toast.style-warning){border:1px solid #faebb4;background:#faecd8;color:var(--color-red-1)}::slotted(.layer__content__toast.style-error){border:1px solid #f5c4c4;background:#fde2e2;color:var(--color-red-1)}.layer__ctrl{display:flex;justify-content:flex-end;width:100%;height:60px;padding:15px;line-height:30px;font-size:14px;color:#454545;text-align:right}.layer__ctrl button{min-width:64px;height:30px;padding:0 10px;margin:0 5px;border:1px solid var(--color-plain-3);border-radius:3px;white-space:nowrap;background:#fff;font-size:inherit;font-family:inherit;outline:none;color:inherit}.layer__ctrl button:hover{background:var(--color-plain-1)}.layer__ctrl button:active{border-color:var(--color-grey-1)}.layer__ctrl button:focus{box-shadow:0 0 0 2px var(--color-plain-a)}.layer__ctrl button:last-child{color:#fff;background:var(--color-teal-2);border-color:rgba(0,0,0,0)}.layer__ctrl button:last-child:hover{background:var(--color-teal-1)}.layer__ctrl button:last-child:active{background:var(--color-teal-3)}.layer__ctrl button:last-child:focus{box-shadow:0 0 0 2px var(--color-teal-a)}.layer__ctrl button::-moz-focus-inner{border:none}`,c`:host([mask]){height:100%;background:rgba(0,0,0,.2)}:host([type=alert]) .layer,:host([type=confirm]) .layer,:host([type=prompt]) .layer{max-width:600px;min-width:300px;background:#fff}:host([type=alert]) .layer__content,:host([type=confirm]) .layer__content,:host([type=prompt]) .layer__content{padding:0 15px}:host([type=toast]) .layer{box-shadow:none;background:none}:host([type=toast]) .layer__content{flex-direction:column;min-height:40px}:host([blurry]) .layer{backdrop-filter:blur(5px)}`];#t=!0;#o=null;#i=null;constructor(){super(),this.promise=new
|
||
|
|
<div
|
||
|
|
ref="box"
|
||
|
|
class="layer"
|
||
|
|
#animation=${{type:"micro-bounce"}}
|
||
|
|
style=${f}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="layer__title noselect"
|
||
|
|
style=${d({display:this.title?"":"none"})}
|
||
|
|
>
|
||
|
|
${this.title}
|
||
|
|
</div>
|
||
|
|
<div class="layer__content">
|
||
|
|
<slot></slot>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="layer__ctrl noselect"
|
||
|
|
style=${d({display:this.btns.length?"":"none"})}
|
||
|
|
@click=${this.handleBtnClick}
|
||
|
|
>
|
||
|
|
${this.btns.map((b,_)=>y`<button data-idx=${_}>${b}</button>`)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`}}function l(i={}){let{type:t="common",content:e=""}=i,o=t==="toast"&&p||document.createElement("wc-layer"),n=t==="toast"&&!!p;if(o.type=i.type,t==="toast"?(p=o,o.top="20px"):(i.btns&&i.btns.length&&(o.btns=i.btns),i.intercept&&typeof i.intercept=="function"&&(o.intercept=i.intercept),o.mask=i.mask,o.title=i.title,h.includes(t)&&(s?s.$animate(!0).then(r=>{s.close(),s=o}):s=o)),n){let r=document.createElement("template");r.innerHTML=e,o.appendChild(r.content.cloneNode(!0)),o.updated(null,!0)}else o.innerHTML=e,document.body.appendChild(o);return o.promise}l.alert=function(i,t=a,e=u.slice(1)){return typeof t=="object"&&(e=t,t=a),this({type:"alert",title:t,content:i,mask:!0,btns:e})},l.confirm=function(i,t=a,e=u.concat()){return typeof t=="object"&&(e=t,t=a),this({type:"confirm",title:t,content:i,mask:!0,btns:e})},l.prompt=function(i=a,t="",e){return typeof t=="function"&&(e=t,t=""),e||(e=function(o,n){o&&n()}),this({type:"prompt",title:i,content:`<wc-input autofocus class="layer__content__input" value="${t}"></wc-input>`,mask:!0,intercept:e,btns:u.concat()})},l.toast=function(i,t="info"){var e=t;switch(t){case"info":case"warning":break;case"error":e="deny";break;case"success":e="get";break;default:e="info"}return this({content:`
|
||
|
|
<div class="layer__content__toast style-${t}">
|
||
|
|
<wc-icon name="${e}"></wc-icon>
|
||
|
|
<span class="toast-txt">${i}</span>
|
||
|
|
</div>`,type:"toast"})},w.reg("layer"),window.layer=l;
|