vue-devui 1.0.0-rc.1 → 1.0.0-rc.12

package/ripple/index.es.js

@@ -19,9 +19,9 @@ const DEFAULT_PLUGIN_OPTIONS = {
   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 +53,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 +73,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 +88,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,29 +99,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(() => {
@@ -132,24 +113,44 @@ 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();

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