vue-devui 1.0.0-beta.18 → 1.0.0-beta.20220808

package/ripple/index.es.js

@@ -1,27 +1,11 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 const DEFAULT_PLUGIN_OPTIONS = {
   directive: "ripple",
   color: "currentColor",
   initialOpacity: 0.2,
   finalOpacity: 0.1,
-  duration: 0.8,
+  duration: 400,
   easing: "ease-out",
-  delayTime: 75,
+  delay: 75,
   disabled: false
 };
 const createContainer = ({
@@ -53,7 +37,7 @@ const createrippleElement = (x, y, size, options) => {
   rippleElement.style.borderRadius = "50%";
   rippleElement.style.opacity = `${options.initialOpacity}`;
   rippleElement.style.transform = `translate(-50%,-50%) scale(0)`;
-  rippleElement.style.transition = `transform ${options.duration}s ${options.easing}, opacity ${options.duration}s ${options.easing}`;
+  rippleElement.style.transition = `transform ${options.duration / 1e3}s ${options.easing}, opacity ${options.duration / 1e3}s ${options.easing}`;
   return rippleElement;
 };
 function magnitude(x1, y1, x2, y2) {
@@ -73,6 +57,13 @@ const getRelativePointer = ({ x, y }, { top, left }) => ({
   y: y - top
 });
 const RIPPLE_COUNT = "vRippleCountInternal";
+function setRippleCount(el, count) {
+  el.dataset[RIPPLE_COUNT] = count.toString();
+}
+function getRippleCount(el) {
+  var _a;
+  return parseInt((_a = el.dataset[RIPPLE_COUNT]) != null ? _a : "0", 10);
+}
 function incrementRippleCount(el) {
   const count = getRippleCount(el);
   setRippleCount(el, count + 1);
@@ -81,13 +72,6 @@ function decrementRippleCount(el) {
   const count = getRippleCount(el);
   setRippleCount(el, count - 1);
 }
-function setRippleCount(el, count) {
-  el.dataset[RIPPLE_COUNT] = count.toString();
-}
-function getRippleCount(el) {
-  var _a;
-  return parseInt((_a = el.dataset[RIPPLE_COUNT]) != null ? _a : "0", 10);
-}
 function deleteRippleCount(el) {
   delete el.dataset[RIPPLE_COUNT];
 }
@@ -99,27 +83,10 @@ const ripple = (event, el, options) => {
   const size = MULTIPLE_NUMBER * getDistanceToFurthestCorner(x, y, rect);
   const rippleContainer = createContainer(computedStyles);
   const rippleEl = createrippleElement(x, y, size, options);
-  incrementRippleCount(el);
   let originalPositionValue = "";
-  if (computedStyles.position === "static") {
-    if (el.style.position)
-      originalPositionValue = el.style.position;
-    el.style.position = "relative";
-  }
-  rippleContainer.appendChild(rippleEl);
-  el.appendChild(rippleContainer);
   let shouldDissolveripple = false;
-  const releaseripple = (e) => {
-    if (typeof e !== "undefined") {
-      document.removeEventListener("pointerup", releaseripple);
-      document.removeEventListener("pointercancel", releaseripple);
-    }
-    if (shouldDissolveripple)
-      dissolveripple();
-    else
-      shouldDissolveripple = true;
-  };
-  const dissolveripple = () => {
+  let token = null;
+  function dissolveripple() {
     rippleEl.style.transition = "opacity 150ms linear";
     rippleEl.style.opacity = "0";
     setTimeout(() => {
@@ -130,39 +97,64 @@ const ripple = (event, el, options) => {
         el.style.position = originalPositionValue;
       }
     }, 150);
-  };
+  }
+  function releaseripple(e) {
+    if (typeof e !== "undefined") {
+      document.removeEventListener("pointerup", releaseripple);
+      document.removeEventListener("pointercancel", releaseripple);
+    }
+    if (shouldDissolveripple) {
+      dissolveripple();
+    } else {
+      shouldDissolveripple = true;
+    }
+  }
+  function cancelripple() {
+    clearTimeout(token);
+    rippleContainer.remove();
+    document.removeEventListener("pointerup", releaseripple);
+    document.removeEventListener("pointercancel", releaseripple);
+    document.removeEventListener("pointercancel", cancelripple);
+  }
+  incrementRippleCount(el);
+  if (computedStyles.position === "static") {
+    if (el.style.position) {
+      originalPositionValue = el.style.position;
+    }
+    el.style.position = "relative";
+  }
+  rippleContainer.appendChild(rippleEl);
+  el.appendChild(rippleContainer);
   document.addEventListener("pointerup", releaseripple);
   document.addEventListener("pointercancel", releaseripple);
-  const token = setTimeout(() => {
+  token = setTimeout(() => {
     document.removeEventListener("pointercancel", cancelripple);
     requestAnimationFrame(() => {
       rippleEl.style.transform = `translate(-50%,-50%) scale(1)`;
       rippleEl.style.opacity = `${options.finalOpacity}`;
-      setTimeout(() => releaseripple(), options.duration * 1e3);
+      setTimeout(() => releaseripple(), options.duration);
     });
-  }, options.delayTime);
-  const cancelripple = () => {
-    clearTimeout(token);
-    rippleContainer.remove();
-    document.removeEventListener("pointerup", releaseripple);
-    document.removeEventListener("pointercancel", releaseripple);
-    document.removeEventListener("pointercancel", cancelripple);
-  };
+  }, options.delay);
   document.addEventListener("pointercancel", cancelripple);
 };
 const optionMap = /* @__PURE__ */ new WeakMap();
-const globalOptions = __spreadValues({}, DEFAULT_PLUGIN_OPTIONS);
+const globalOptions = { ...DEFAULT_PLUGIN_OPTIONS };
 var RippleDirective = {
   mounted(el, binding) {
     var _a;
     optionMap.set(el, (_a = binding.value) != null ? _a : {});
     el.addEventListener("pointerdown", (event) => {
       const options = optionMap.get(el);
-      if (binding.value && binding.value.disabled)
+      if (binding.value && binding.value.disabled) {
         return;
-      if (options === false)
+      }
+      if (options === false) {
         return;
-      ripple(event, el, __spreadValues(__spreadValues({}, globalOptions), options));
+      }
+      ripple(event, el, {
+        ...globalOptions,
+        ...options
+      });
     });
   },
   updated(el, binding) {

package/ripple/index.umd.js

@@ -1 +1 @@
-var B=Object.defineProperty;var T=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var $=(s,r,a)=>r in s?B(s,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):s[r]=a,y=(s,r)=>{for(var a in r||(r={}))F.call(r,a)&&$(s,a,r[a]);if(T)for(var a of T(r))j.call(r,a)&&$(s,a,r[a]);return s};(function(s,r){typeof exports=="object"&&typeof module!="undefined"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(s=typeof globalThis!="undefined"?globalThis:s||self,r(s.index={}))})(this,function(s){"use strict";const r={directive:"ripple",color:"currentColor",initialOpacity:.2,finalOpacity:.1,duration:.8,easing:"ease-out",delayTime:75,disabled:!1},a=({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},w=(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}s ${o.easing}, opacity ${o.duration}s ${o.easing}`,n};function u(t,e,i,o){const n=t-i,l=e-o;return Math.sqrt(n*n+l*l)}function M(t,e,{width:i,height:o}){const n=u(t,e,0,0),l=u(t,e,i,0),d=u(t,e,0,o),g=u(t,e,i,o);return Math.max(n,l,d,g)}const O=({x:t,y:e},{top:i,left:o})=>({x:t-o,y:e-i}),f="vRippleCountInternal";function P(t){const e=v(t);R(t,e+1)}function k(t){const e=v(t);R(t,e-1)}function R(t,e){t.dataset[f]=e.toString()}function v(t){var e;return parseInt((e=t.dataset[f])!=null?e:"0",10)}function I(t){delete t.dataset[f]}const x=2.05,S=(t,e,i)=>{const o=e.getBoundingClientRect(),n=window.getComputedStyle(e),{x:l,y:d}=O(t,o),g=x*M(l,d,o),m=a(n),p=w(l,d,g,i);P(e);let h="";n.position==="static"&&(e.style.position&&(h=e.style.position),e.style.position="relative"),m.appendChild(p),e.appendChild(m);let b=!1;const c=A=>{typeof A!="undefined"&&(document.removeEventListener("pointerup",c),document.removeEventListener("pointercancel",c)),b?U():b=!0},U=()=>{p.style.transition="opacity 150ms linear",p.style.opacity="0",setTimeout(()=>{m.remove(),k(e),v(e)===0&&(I(e),e.style.position=h)},150)};document.addEventListener("pointerup",c),document.addEventListener("pointercancel",c);const N=setTimeout(()=>{document.removeEventListener("pointercancel",C),requestAnimationFrame(()=>{p.style.transform="translate(-50%,-50%) scale(1)",p.style.opacity=`${i.finalOpacity}`,setTimeout(()=>c(),i.duration*1e3)})},i.delayTime),C=()=>{clearTimeout(N),m.remove(),document.removeEventListener("pointerup",c),document.removeEventListener("pointercancel",c),document.removeEventListener("pointercancel",C)};document.addEventListener("pointercancel",C)},E=new WeakMap,_=y({},r);var L={mounted(t,e){var i;E.set(t,(i=e.value)!=null?i:{}),t.addEventListener("pointerdown",o=>{const n=E.get(t);e.value&&e.value.disabled||n!==!1&&S(o,t,y(y({},_),n))})},updated(t,e){var i;E.set(t,(i=e.value)!=null?i:{})}},D={title:"Ripple \u6C34\u6CE2\u7EB9",category:"\u901A\u7528",status:"100%",install(t){t.directive("Ripple",L)}};s.RippleDirective=L,s.default=D,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});
+(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"}})});