vue3-dialog-c
Version:
a vue3 dialog component
2 lines (1 loc) • 6.67 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue");var O;const x=typeof window<"u",T=t=>typeof t=="string",j=()=>{};x&&((O=window?.navigator)!=null&&O.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function N(t){return typeof t=="function"?t():e.unref(t)}function B(t){return t}function L(t){return e.getCurrentScope()?(e.onScopeDispose(t),!0):!1}function V(t){var o;const n=N(t);return(o=n?.$el)!=null?o:n}const k=x?window:void 0;function _(...t){let o,n,i,s;if(T(t[0])||Array.isArray(t[0])?([n,i,s]=t,o=k):[o,n,i,s]=t,!o)return j;Array.isArray(n)||(n=[n]),Array.isArray(i)||(i=[i]);const l=[],d=()=>{l.forEach(r=>r()),l.length=0},p=(r,c,g,v)=>(r.addEventListener(c,g,v),()=>r.removeEventListener(c,g,v)),f=e.watch(()=>[V(o),N(s)],([r,c])=>{d(),r&&l.push(...n.flatMap(g=>i.map(v=>p(r,g,v,c))))},{immediate:!0,flush:"post"}),a=()=>{f(),d()};return L(a),a}const w=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},I="__vueuse_ssr_handlers__";w[I]=w[I]||{};function $(t={}){const{type:o="page",touch:n=!0,resetOnTouchEnds:i=!1,initialValue:s={x:0,y:0},window:l=k,eventFilter:d}=t,p=e.ref(s.x),f=e.ref(s.y),a=e.ref(null),r=u=>{o==="page"?(p.value=u.pageX,f.value=u.pageY):o==="client"?(p.value=u.clientX,f.value=u.clientY):o==="movement"&&(p.value=u.movementX,f.value=u.movementY),a.value="mouse"},c=()=>{p.value=s.x,f.value=s.y},g=u=>{if(u.touches.length>0){const m=u.touches[0];o==="page"?(p.value=m.pageX,f.value=m.pageY):o==="client"&&(p.value=m.clientX,f.value=m.clientY),a.value="touch"}},v=u=>d===void 0?r(u):d(()=>r(u),{}),y=u=>d===void 0?g(u):d(()=>g(u),{});return l&&(_(l,"mousemove",v,{passive:!0}),_(l,"dragover",v,{passive:!0}),n&&o!=="movement"&&(_(l,"touchstart",y,{passive:!0}),_(l,"touchmove",y,{passive:!0}),i&&_(l,"touchend",c,{passive:!0}))),{x:p,y:f,sourceType:a}}var b;(function(t){t.UP="UP",t.RIGHT="RIGHT",t.DOWN="DOWN",t.LEFT="LEFT",t.NONE="NONE"})(b||(b={}));var Q=Object.defineProperty,D=Object.getOwnPropertySymbols,X=Object.prototype.hasOwnProperty,Y=Object.prototype.propertyIsEnumerable,E=(t,o,n)=>o in t?Q(t,o,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[o]=n,A=(t,o)=>{for(var n in o||(o={}))X.call(o,n)&&E(t,n,o[n]);if(D)for(var n of D(o))Y.call(o,n)&&E(t,n,o[n]);return t};const H={easeInSine:[.12,0,.39,0],easeOutSine:[.61,1,.88,1],easeInOutSine:[.37,0,.63,1],easeInQuad:[.11,0,.5,0],easeOutQuad:[.5,1,.89,1],easeInOutQuad:[.45,0,.55,1],easeInCubic:[.32,0,.67,0],easeOutCubic:[.33,1,.68,1],easeInOutCubic:[.65,0,.35,1],easeInQuart:[.5,0,.75,0],easeOutQuart:[.25,1,.5,1],easeInOutQuart:[.76,0,.24,1],easeInQuint:[.64,0,.78,0],easeOutQuint:[.22,1,.36,1],easeInOutQuint:[.83,0,.17,1],easeInExpo:[.7,0,.84,0],easeOutExpo:[.16,1,.3,1],easeInOutExpo:[.87,0,.13,1],easeInCirc:[.55,0,1,.45],easeOutCirc:[0,.55,.45,1],easeInOutCirc:[.85,0,.15,1],easeInBack:[.36,0,.66,-.56],easeOutBack:[.34,1.56,.64,1],easeInOutBack:[.68,-.6,.32,1.6]};A({linear:B},H);const h=Symbol("DialogToken");function R(){const{x:t,y:o}=$(),{dialogs:n,createDialog:i,disposeDialog:s,getDialogId:l}=e.inject(h),d=e.computed(()=>n&&l?n[l()]:null);function p(a,r){return i(a,{...r,pointerX:t.value,pointerY:o.value}),d?.value?.promise}function f(a){a?d?.value?.resolve(a):d?.value?.reject("取消"),s()}return{open:p,close:f}}const W=t=>(e.pushScopeId("data-v-26c39cca"),t=t(),e.popScopeId(),t),F={class:"dialog-header"},M={class:"title"},U=W(()=>e.createElementVNode("svg",{t:"1679295681396",class:"icon",viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"3779",width:"26",height:"26"},[e.createElementVNode("path",{d:"M572.16 512l183.466667-183.04a42.666667 42.666667 0 1 0-60.586667-60.586667L512 451.84l-183.04-183.466667a42.666667 42.666667 0 0 0-60.586667 60.586667l183.466667 183.04-183.466667 183.04a42.666667 42.666667 0 0 0 0 60.586667 42.666667 42.666667 0 0 0 60.586667 0l183.04-183.466667 183.04 183.466667a42.666667 42.666667 0 0 0 60.586667 0 42.666667 42.666667 0 0 0 0-60.586667z","p-id":"3780"})],-1)),z=[U],G={class:"dialog-body"},K=e.defineComponent({__name:"DialogContainer",props:{title:{type:String,default:"dialog"},mask:{type:Boolean,default:!0},width:{type:Number,default:600},pointerX:{type:Number},pointerY:{type:Number}},setup(t){const o=t,{dialogs:n,createDialog:i,disposeDialog:s,getDialogId:l}=e.inject(h),d=e.computed(()=>{const c=(document.documentElement.clientWidth-o.width)/2,g=o.pointerX?o.pointerX-c+"px":"0px",v=o.pointerY?o.pointerY-100+"px":"0px";return{width:`${o.width}px`,marginLeft:`-${o.width/2}px`,transform:`scale(${f.value?"1":"0"})`,transformOrigin:`${g} ${v} 0px`}}),p=e.computed(()=>n[l()]),f=e.computed(()=>n[l()]?.visible);function a(c){c.target.className==="dialog-overlay"&&r()}function r(){p.value.reject("取消"),s()}return(c,g)=>(e.openBlock(),e.createElementBlock("div",{class:"dialog-overlay",style:e.normalizeStyle({opacity:e.unref(f)?"1":"0"}),onClick:a},[e.createElementVNode("div",{role:"dialog",tabindex:"-1",class:"dialog",style:e.normalizeStyle(e.unref(d))},[e.createElementVNode("div",F,[e.createElementVNode("p",M,e.toDisplayString(t.title),1),e.createElementVNode("i",{class:"close-icon",onClick:r},z)]),e.createElementVNode("div",G,[e.renderSlot(c.$slots,"default",{},void 0,!0)])],4)],4))}});const q=(t,o)=>{const n=t.__vccOpts||t;for(const[i,s]of o)n[i]=s;return n},J=q(K,[["__scopeId","data-v-26c39cca"]]);function Z(){let t=0,o=null;const n=()=>`__dialog__${t++}`,i=e.reactive({});function s(a,r){o&&clearTimeout(o);let c,g;const v=n(),y=new Promise((S,P)=>{c=S,g=P}),{props:u,...m}=r,C=p(a,m,u);i[v]={component:C,config:r,visible:!1,promise:y,resolve:c,reject:g},e.nextTick(()=>{i[v].visible=!0})}function l(){const a=d(),r=i[a];r&&(r.visible=!1,o=setTimeout(()=>{delete i[a]},300))}function d(){const a=Object.keys(i).filter(r=>!!i[r]);return a.length>0?a[0]:""}function p(a,r,c){return console.log(r),e.defineComponent({render(){return e.createVNode(J,r,{default:()=>[e.createVNode(a,c,null)]})}})}return e.provide(h,{dialogs:i,createDialog:s,disposeDialog:l,getDialogId:d}),{dialogList:e.computed(()=>Object.keys(i).filter(r=>!!i[r]).map(r=>({id:r,...i[r],component:e.toRaw(i[r].component)})))}}const ee=e.defineComponent({__name:"DialogProvider",setup(t){const{dialogList:o}=Z();return(n,i)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.renderSlot(n.$slots,"default"),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(o),s=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(s.component),{key:s.id,id:s.id},null,8,["id"]))),128))],64))}});exports.DialogProvider=ee;exports.useDialog=R;