vue-devui/ripple/index.umd.js

DevUI components based on Vite and Vue3

(function(s,a){typeof exports=="object"&&typeof module!="undefined"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(s=typeof globalThis!="undefined"?globalThis:s||self,a(s.index={}))})(this,function(s){"use strict";const a={directive:"ripple",color:"currentColor",initialOpacity:.2,finalOpacity:.1,duration:400,easing:"ease-out",delay:75,disabled:!1},b=({borderTopLeftRadius:t,borderTopRightRadius:e,borderBottomLeftRadius:i,borderBottomRightRadius:o})=>{const n=document.createElement("div");return n.style.top="0",n.style.left="0",n.style.width="100%",n.style.height="100%",n.style.position="absolute",n.style.borderRadius=`${t} ${e} ${o} ${i}`,n.style.overflow="hidden",n.style.pointerEvents="none",n.style.webkitMaskImage="-webkit-radial-gradient(white, black)",n},$=(t,e,i,o)=>{const n=document.createElement("div");return n.style.position="absolute",n.style.width=`${i}px`,n.style.height=`${i}px`,n.style.top=`${e}px`,n.style.left=`${t}px`,n.style.background=o.color,n.style.borderRadius="50%",n.style.opacity=`${o.initialOpacity}`,n.style.transform="translate(-50%,-50%) scale(0)",n.style.transition=`transform ${o.duration/1e3}s ${o.easing}, opacity ${o.duration/1e3}s ${o.easing}`,n};function p(t,e,i,o){const n=t-i,r=e-o;return Math.sqrt(n*n+r*r)}function T(t,e,{width:i,height:o}){const n=p(t,e,0,0),r=p(t,e,i,0),u=p(t,e,0,o),v=p(t,e,i,o);return Math.max(n,r,u,v)}const w=({x:t,y:e},{top:i,left:o})=>({x:t-o,y:e-i}),m="vRippleCountInternal";function g(t,e){t.dataset[m]=e.toString()}function f(t){var e;return parseInt((e=t.dataset[m])!=null?e:"0",10)}function M(t){const e=f(t);g(t,e+1)}function O(t){const e=f(t);g(t,e-1)}function P(t){delete t.dataset[m]}const k=2.05,x=(t,e,i)=>{const o=e.getBoundingClientRect(),n=window.getComputedStyle(e),{x:r,y:u}=w(t,o),v=k*T(r,u,o),d=b(n),c=$(r,u,v,i);let R="",L=!1,h=null;function _(){c.style.transition="opacity 150ms linear",c.style.opacity="0",setTimeout(()=>{d.remove(),O(e),f(e)===0&&(P(e),e.style.position=R)},150)}function l(D){typeof D!="undefined"&&(document.removeEventListener("pointerup",l),document.removeEventListener("pointercancel",l)),L?_():L=!0}function E(){clearTimeout(h),d.remove(),document.removeEventListener("pointerup",l),document.removeEventListener("pointercancel",l),document.removeEventListener("pointercancel",E)}M(e),n.position==="static"&&(e.style.position&&(R=e.style.position),e.style.position="relative"),d.appendChild(c),e.appendChild(d),document.addEventListener("pointerup",l),document.addEventListener("pointercancel",l),h=setTimeout(()=>{document.removeEventListener("pointercancel",E),requestAnimationFrame(()=>{c.style.transform="translate(-50%,-50%) scale(1)",c.style.opacity=`${i.finalOpacity}`,setTimeout(()=>l(),i.duration)})},i.delay),document.addEventListener("pointercancel",E)},y=new WeakMap,I={...a};var C={mounted(t,e){var i;y.set(t,(i=e.value)!=null?i:{}),t.addEventListener("pointerdown",o=>{const n=y.get(t);e.value&&e.value.disabled||n!==!1&&x(o,t,{...I,...n})})},updated(t,e){var i;y.set(t,(i=e.value)!=null?i:{})}},S={title:"Ripple \u6C34\u6CE2\u7EB9",category:"\u901A\u7528",status:"100%",install(t){t.directive("Ripple",C)}};s.RippleDirective=C,s.default=S,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});