+-import{useElement as w}from"./core/element.js";import{convertCSSDuration as y}from"./core/utils/CSSUtils.js";const E="s-popup",k={align:"bottom"},S=":host{display:inline-block;vertical-align:middle;text-align:left}dialog{inset:0;width:100%;height:100%;background:none;border:none;padding:0;max-width:none;max-height:none;outline:none;position:relative;overflow:hidden;color:inherit}dialog::backdrop{background:none}.scrim{position:absolute;top:0;left:0;width:100%;height:100%}.container{position:relative;width:fit-content;max-width:100%;max-height:100%}::slotted(:not([slot])){border-radius:4px;max-width:100%;max-height:100%;white-space:nowrap;box-shadow:var(--s-elevation-level2, 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12));background:var(--s-color-surface-container, #ECEEF0)}",C='<slot name="trigger"></slot><dialog class="popup" part="popup"><div class="scrim" part="scrim"></div><div class="container" part="container"><slot></slot></div></dialog>';class b extends w({style:S,template:C,props:k,setup(l){const r=l.querySelector("dialog"),n=l.querySelector(".container"),p=getComputedStyle(this),h=()=>{const e=p.getPropertyValue("--s-motion-easing-standard")||"cubic-bezier(0.2, 0, 0, 1.0)",t=p.getPropertyValue("--s-motion-duration-medium4")||"400ms";return{easing:e,duration:y(t)}},d=e=>{if(!this.isConnected||r.open)return;const t={top:0,left:0,origin:[]};if(r.showModal(),!this.dispatchEvent(new Event("show",{cancelable:!0})))return r.close();const o=n.offsetWidth,c=n.offsetHeight;if(!e||e instanceof HTMLElement){const g=e??this;if(!g)return;const i=g.getBoundingClientRect(),a={middle(f){t.origin[0]="center",t.left=i.left-(o-i.width)/2;const m=()=>(t.top=i.top+i.height,t.origin[1]="top",t.top+c>innerHeight),u=()=>(t.top=i.top-c,t.origin[1]="bottom",t.top<0);t.left<0&&(t.left=i.left,t.origin[0]="left"),t.left+o>innerWidth&&(t.left=i.left+i.width-o,t.origin[0]="right"),f==="top"&&u()&&m(),f==="bottom"&&m()&&u()},left(){return t.origin=["right","top"],t.left=i.left-o,t.top=i.top,t.left<0},right(){return t.origin=["left","top"],t.left=i.left+i.width,t.top=i.top,t.left+o>innerWidth}};switch(this.align){case"bottom":case"top":a.middle(this.align);break;case"left":a.left()&&a.right();break;case"right":a.right()&&a.left();break}}else t.top=e.y,t.left=e.x,t.origin=e.origin?.split(" ")??["left","top"],e.x+o>innerWidth&&(t.left=e.x-o,t.origin[0]="right"),e.y+c>innerHeight&&(t.top=e.y-c,t.origin[1]="bottom");n.style.transformOrigin=t.origin.join(" "),n.style.top=`${Math.max(t.top,0)}px`,n.style.left=`${Math.max(t.left,0)}px`;const x=n.animate({transform:["scale(.9)","scale(1)"],opacity:[0,1]},h());this.setAttribute("showed",""),x.finished.then(()=>this.dispatchEvent(new Event("showed")))},s=()=>{if(!this.isConnected||!r.open||n.getAnimations().length>0||!this.dispatchEvent(new Event("close",{cancelable:!0})))return;const e=n.animate({transform:["scale(1)","scale(.9)"],opacity:[1,0]},h());this.removeAttribute("showed"),e.finished.then(()=>{r.close(),this.dispatchEvent(new Event("closed"))})},v=e=>r.open?s():d(e);return l.querySelector("slot[name=trigger]").addEventListener("click",()=>d()),l.querySelector(".scrim").addEventListener("pointerdown",s),{expose:{show:d,toggle:v,close:s},onMounted:()=>addEventListener("resize",s),onUnmounted:()=>removeEventListener("resize",s)}}}){}b.define(E);export{b as Popup};
0 commit comments