15 lines
12 KiB
JavaScript
15 lines
12 KiB
JavaScript
/**
|
|
*
|
|
* @authors yutent (yutent.io@gmail.com)
|
|
* @date 2022-06-23 15:46:28
|
|
* @version v1.0.6
|
|
*
|
|
*/
|
|
|
|
var k=Object.defineProperty,x=Object.defineProperties;var T=Object.getOwnPropertyDescriptors;var _=Object.getOwnPropertySymbols;var w=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable;var d=(s,e,t)=>e in s?k(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t,f=(s,e)=>{for(var t in e||(e={}))w.call(e,t)&&d(s,t,e[t]);if(_)for(var t of _(e))v.call(e,t)&&d(s,t,e[t]);return s},u=(s,e)=>x(s,T(e));var m=(s,e,t)=>(d(s,typeof e!="symbol"?e+"":e,t),t);import"../form/input.js";import E from"../drag/core.js";import i from"../utils.js";const l={en:{TITLE:"Dialog",BTNS:["Cancel","OK"]},cn:{TITLE:"\u63D0\u793A",BTNS:["\u53D6\u6D88","\u786E\u5B9A"]}};l["zh-CN"]=l.cn;const a=l[window.__ENV_LANG__||navigator.language]||l.cn;let c=null,h=null;const p=["alert","confirm","prompt"];function C(s){var e="";return s.forEach((t,r)=>{e+=`<button data-idx="${r}">${t||a.BTNS[r]}</button>`}),e}class y extends HTMLElement{constructor(){super();m(this,"props",{left:"auto",right:"auto",top:"auto",bottom:"auto",from:Object.create(null),to:Object.create(null),btns:[],type:"",title:"",blur:!1,background:null,mask:!1,radius:null,"mask-close":!1,"mask-color":null,fixed:!0});Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),this.root.innerHTML='<style>*{box-sizing:border-box;margin:0;padding:0}::before,::after{box-sizing:border-box}:host{display:none;justify-content:center;align-items:center;position:fixed;z-index:65534;left:0;top:0;width:100%}:host([alert]),:host([confirm]),:host([prompt]),:host([frame]),:host([toast]),:host([notify]),:host([common]){display:flex}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.noselect img,.noselect a{-webkit-user-drag:none}.layer{overflow:hidden;flex:0 auto;position:absolute;z-index:65535;border-radius:2px;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;opacity:0}.layer.scale{transform:scale(1.01);transition:transform .1s linear}.layer.blur{backdrop-filter:blur(5px)}.layer:active{z-index:65536}.layer__title{display:none;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{--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;height:36px}::slotted(.layer__content__frame){display:flex;width:100%;height:100%;margin:0;padding:0;border:0;resize:none;background:#fff}::slotted(.layer__content__toast){display:flex;align-items:center;width:300px;padding:0 10px !important;border-radius:3px;font-weight:normal;text-indent:8px;--size: 16px;color:var(--color-dark-1)}::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:none;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:2px;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}:host([mask]){height:100%;background:rgba(255,255,255,.15);backdrop-filter:blur(5px)}:host([alert]) .layer,:host([confirm]) .layer,:host([prompt]) .layer{max-width:600px;min-width:300px;background:#fff}:host([alert]) .layer__content,:host([confirm]) .layer__content,:host([prompt]) .layer__content{padding:0 15px}:host([notify]) .layer{width:300px;height:120px}:host([notify]) .layer__content{padding:0 15px}:host([toast]) .layer{box-shadow:none}:host([toast]) .layer__content{min-height:40px}</style> <div class="layer"> <div class="layer__title noselect"></div> <div class="layer__content"><slot></slot></div> <div class="layer__ctrl noselect"></div> </div> ',this.__TITLE__=this.root.children[1].firstElementChild,this.__BODY__=this.root.children[1].children[1],this.__CTRL__=this.root.children[1].lastElementChild,this.promise=new Promise((t,r)=>{this.resolve=t,this.reject=r})}static get observedAttributes(){return["left","right","top","bottom","from","to","btns","type","title","blur","background","mask","radius","mask-close","mask-color","fixed"]}set title(t){this.props.title=t,t?(this.__TITLE__.firstElementChild?this.__TITLE__.insertBefore(document.createTextNode(t),this.__TITLE__.firstElementChild):this.__TITLE__.textContent=t,this.__TITLE__.style.display="flex"):this.__TITLE__.style.display=""}set type(t){var{btns:r}=this.props;if(!(!t||this._handleBtnClick)){switch(t){case"alert":for(;r.length>1;)r.shift();break;case"confirm":case"prompt":for(;r.length>2;)r.shift();break;case"toast":case"notify":case"frame":if(t==="notify"){var o=document.createElement("wc-icon");o.setAttribute("is","close"),this.__TITLE__.appendChild(o)}r=[];break;default:t="common";break}this.props.type=t,r.length?(this.__CTRL__.innerHTML=C(r),this.__CTRL__.style.display="flex"):this.__CTRL__.style.display="",this.setAttribute(t,"")}}set fixed(t){this.props.fixed=!!t,this._updateFixedStat()}_updateFixedStat(){p.includes(this.props.type)||(this.props.fixed?this._dragIns&&(this._dragIns.destroy(),this._dragIns=null):(this._dragIns=new E(this.root.children[1]).by(this.__TITLE__,{overflow:this.props.hasOwnProperty("overflow")?this.props.overflow:!1}),this.removeAttribute("fixed")))}_intercept(t){this.props.intercept?this.props.intercept(t,r=>{delete this.props.intercept,this.resolve(t),this.close()}):(this.resolve(t),this.close())}close(t){if(this.wrapped===!1)if(this._dragIns&&this._dragIns.destroy(),p.includes(this.props.type)&&(c=null),delete this.promise,i.unbind(this.__CTRL__,"click",this._handleBtnClick),this.props.from&&!t){let r="opacity:0;";for(let o in this.props.from)r+=`${o}:${this.props.from[o]};`;this.root.children[1].style.cssText+=r,this.timer=setTimeout(()=>{this.parentNode.removeChild(this),this.dispatchEvent(new CustomEvent("close"))},200)}else clearTimeout(this.timer),this.parentNode.removeChild(this),this.dispatchEvent(new CustomEvent("close"));else this.removeAttribute("common"),this.dispatchEvent(new CustomEvent("close"))}show(){this.wrapped!==!1&&this.setAttribute("common","")}moveTo(t={}){var r="";for(var o in t)r+=`${o}:${t[o]};`;this.root.children[1].style.cssText+=r}connectedCallback(){this.type=this.props.type,this.title=this.props.title,this._handleBtnClick=i.bind(this.__CTRL__,"click",r=>{if(r.target.tagName==="BUTTON"){var o=+r.target.dataset.idx,{type:n}=this.props;switch(n){case"alert":this.resolve(),this.close();break;case"confirm":case"prompt":if(o===0)this.reject(),this.close();else{let g=n==="prompt"?this.__INPUT__.value:null;this._intercept(g)}break;default:this._intercept(o);break}}}),this.props.type==="prompt"&&(this.__INPUT__=this.__BODY__.firstElementChild.assignedNodes().pop(),this._handleSubmit=i.bind(this.__INPUT__,"submit",r=>{this._intercept(r.detail)})),this.props.mask&&this.setAttribute("mask",""),this._updateFixedStat(),this.props.mask&&(this._handlMask=i.outside(this.root.children[1],r=>{r.target===this&&(this.props["mask-close"]?(this.wrapped===!1&&this.reject(null),this.close()):p.includes(this.props.type)&&(this.root.children[1].classList.toggle("scale",!0),setTimeout(o=>{this.root.children[1].classList.remove("scale")},100)))}),this.props["mask-color"]&&(this.style.backgroundColor=this.props["mask-color"])),this.props.blur&&this.root.children[1].classList.toggle("blur",!0);let t=this.props.from?"":"opacity:1;";if(this.props.background&&(t+=`background: ${this.props.background};`,this.props.background==="transparent"&&(t+="box-shadow:none;")),(this.props.radius||this.props.radius===0)&&(t+=`border-radius: ${this.props.radius};`),this.props.size)for(let r in this.props.size)t+=`${r}:${this.props.size[r]};`;if(this.props.from){for(let r in this.props.from)t+=`${r}:${this.props.from[r]};`;setTimeout(r=>{let o="opacity:1;";for(let n in this.props.to)o+=`${n}:${this.props.to[n]};`;this.root.children[1].style.cssText+=o},50)}t&&(this.root.children[1].style.cssText+=t),this.props.btns.length&&(this.__CTRL__.lastElementChild.setAttribute("autofocus",""),setTimeout(r=>this.__CTRL__.lastElementChild.focus(),10)),this.props.type==="toast"&&(this.timer=setTimeout(()=>{h=null,this.close()},3e3)),this.props.type==="notify"&&(this._handleClose=i.bind(this.__TITLE__,"click",r=>{r.target.tagName==="WC-ICON"&&this.close()}))}disconnectedCallback(){i.clearOutside(this._handlMask),i.unbind(this.__TITLE__,"click",this._handleClose),i.unbind(this.__CTRL__,"click",this._handleBtnClick),this._handleSubmit&&i.unbind(this.__INPUT__,"submit",this._handleSubmit)}attributeChangedCallback(t,r,o){if(r!==o)switch(t){case"title":case"type":this[t]=o;break;case"mask-color":case"background":this.props[t]=o;break;case"mask":case"mask-close":case"blur":this.props[t]=!0;break;case"radius":this.props.radius=o;break;case"left":case"right":case"top":case"bottom":this.props.from[t]=o,this.props.to=this.props.from,this.removeAttribute(t);break;case"fixed":this.fixed=!0;break}}}function b(s){var e=document.createElement("wc-layer");if(s.type||(s.type="common"),s.type==="toast"){var{type:t,content:r}=s;s={type:t,content:r,from:{top:0},to:{top:"30px"}},h&&h.close(!0),h=e}else e.props.mask=s.mask,s.btns===!1?e.props.btns=[]:s.btns&&s.btns.length?e.props.btns=s.btns:e.props.btns=a.BTNS.concat(),s.intercept&&typeof s.intercept=="function"&&(e.props.intercept=s.intercept),e.props.mask=s.mask,e.props["mask-close"]=s["mask-close"],s.hasOwnProperty("overflow")&&(e.props.overflow=s.overflow),e.props["mask-color"]=s["mask-color"],e.props.blur=s.blur,e.props.radius=s.radius,e.props.background=s.background,s.size&&typeof s.size=="object"&&(e.props.size=s.size),p.includes(s.type)&&(c&&c.close(!0),c=e);return s.to&&typeof s.to=="object"&&(e.props.to=s.to,s.from&&typeof s.from=="object"?e.props.from=s.from:e.props.from=s.to),e.props.type=s.type,e.props.title=s.title,s.hasOwnProperty("fixed")&&(e.props.fixed=s.fixed),e.innerHTML=s.content,e.wrapped=!1,document.body.appendChild(e),e.promise}Object.assign(b,{alert(s,e=a.TITLE,t){return typeof e=="object"&&(t=e,e=a.TITLE),this({type:"alert",title:e,content:s,mask:!0,btns:t})},confirm(s,e=a.TITLE,t){return typeof e=="object"&&(t=e,e=a.TITLE),this({type:"confirm",title:e,content:s,mask:!0,btns:t})},prompt(s=a.TITLE,e="",t){return typeof e=="function"&&(t=e,e=""),t||(t=function(r,o){r&&o()}),this({type:"prompt",title:s,content:`<wc-input autofocus class="layer__content__input" value="${e}"></wc-input>`,mask:!0,intercept:t})},frame(s,e={}){return this(u(f({},e),{type:"frame",content:`<iframe class="layer__content__frame" src="${s}"></iframe>`,mask:!0,"mask-close":!0}))},notify(s){return this({type:"notify",title:"\u901A\u77E5",content:s,blur:!0,from:{right:"-300px",top:0},to:{right:0}})},toast(s,e="info"){var t=e;switch(e){case"info":case"warning":break;case"error":t="deny";break;case"success":t="get";break;default:t="info"}return this({content:`
|
|
<div class="layer__content__toast style-${e}">
|
|
<wc-icon is="${t}"></wc-icon>
|
|
<span class="toast-txt">${s}</span>
|
|
</div>`,type:"toast"})}}),window.layer=b,customElements.get("wc-layer")||customElements.define("wc-layer",y);export{y as default};
|
|
|