vue-devui 1.0.0-alpha.1 → 1.0.0-alpha.10

package/ripple/index.es.js

@@ -1 +1,173 @@
-var e=Object.defineProperty,t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable,i=(t,n,o)=>n in t?e(t,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[n]=o,r=(e,r)=>{for(var a in r||(r={}))n.call(r,a)&&i(e,a,r[a]);if(t)for(var a of t(r))o.call(r,a)&&i(e,a,r[a]);return e};"undefined"!=typeof require&&require;function a(e,t,n,o){const i=e-n,r=t-o;return Math.sqrt(i*i+r*r)}function s(e,t){e.dataset.vRippleCountInternal=t.toString()}function l(e){var t;return parseInt(null!=(t=e.dataset.vRippleCountInternal)?t:"0",10)}const c=(e,t,n)=>{const o=t.getBoundingClientRect(),i=window.getComputedStyle(t),{x:r,y:c}=(({x:e,y:t},{top:n,left:o})=>({x:e-o,y:t-n}))(e,o),d=2.05*function(e,t,{width:n,height:o}){const i=a(e,t,0,0),r=a(e,t,n,0),s=a(e,t,0,o),l=a(e,t,n,o);return Math.max(i,r,s,l)}(r,c,o),p=(({borderTopLeftRadius:e,borderTopRightRadius:t,borderBottomLeftRadius:n,borderBottomRightRadius:o})=>{const i=document.createElement("div");return i.style.top="0",i.style.left="0",i.style.width="100%",i.style.height="100%",i.style.position="absolute",i.style.borderRadius=`${e} ${t} ${o} ${n}`,i.style.overflow="hidden",i.style.pointerEvents="none",i.style.webkitMaskImage="-webkit-radial-gradient(white, black)",i})(i),u=((e,t,n,o)=>{const i=document.createElement("div");return i.style.position="absolute",i.style.width=`${n}px`,i.style.height=`${n}px`,i.style.top=`${t}px`,i.style.left=`${e}px`,i.style.background=o.color,i.style.borderRadius="50%",i.style.opacity=`${o.initialOpacity}`,i.style.transform="translate(-50%,-50%) scale(0)",i.style.transition=`transform ${o.duration}s ${o.easing}, opacity ${o.duration}s ${o.easing}`,i})(r,c,d,n);!function(e){s(e,l(e)+1)}(t);let y="";"static"===i.position&&(t.style.position&&(y=t.style.position),t.style.position="relative"),p.appendChild(u),t.appendChild(p);let m=!1;const v=e=>{void 0!==e&&(document.removeEventListener("pointerup",v),document.removeEventListener("pointercancel",v)),m?f():m=!0},f=()=>{u.style.transition="opacity 150ms linear",u.style.opacity="0",setTimeout((()=>{p.remove(),function(e){s(e,l(e)-1)}(t),0===l(t)&&(!function(e){delete e.dataset.vRippleCountInternal}(t),t.style.position=y)}),150)};document.addEventListener("pointerup",v),document.addEventListener("pointercancel",v);const b=setTimeout((()=>{document.removeEventListener("pointercancel",g),requestAnimationFrame((()=>{u.style.transform="translate(-50%,-50%) scale(1)",u.style.opacity=`${n.finalOpacity}`,setTimeout((()=>v()),1e3*n.duration)}))}),n.delayTime),g=()=>{clearTimeout(b),p.remove(),document.removeEventListener("pointerup",v),document.removeEventListener("pointercancel",v),document.removeEventListener("pointercancel",g)};document.addEventListener("pointercancel",g)},d=new WeakMap,p=r({},{directive:"ripple",color:"currentColor",initialOpacity:.2,finalOpacity:.1,duration:.8,easing:"ease-out",delayTime:75});var u={mounted(e,t){var n;d.set(e,null!=(n=t.value)?n:{}),e.addEventListener("pointerdown",(t=>{const n=d.get(e);!1!==n&&c(t,e,r(r({},p),n))}))},updated(e,t){var n;d.set(e,null!=(n=t.value)?n:{})}},y={title:"Ripple 水波纹",category:"通用",status:void 0,install(e){e.directive("Ripple",u)}};export{u as RippleDirective,y as default};
+const DEFAULT_PLUGIN_OPTIONS = {
+  directive: "ripple",
+  color: "currentColor",
+  initialOpacity: 0.2,
+  finalOpacity: 0.1,
+  duration: 400,
+  easing: "ease-out",
+  delay: 75,
+  disabled: false
+};
+const createContainer = ({
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius
+}) => {
+  const rippleContainer = document.createElement("div");
+  rippleContainer.style.top = "0";
+  rippleContainer.style.left = "0";
+  rippleContainer.style.width = "100%";
+  rippleContainer.style.height = "100%";
+  rippleContainer.style.position = "absolute";
+  rippleContainer.style.borderRadius = `${borderTopLeftRadius} ${borderTopRightRadius} ${borderBottomRightRadius} ${borderBottomLeftRadius}`;
+  rippleContainer.style.overflow = "hidden";
+  rippleContainer.style.pointerEvents = "none";
+  rippleContainer.style.webkitMaskImage = "-webkit-radial-gradient(white, black)";
+  return rippleContainer;
+};
+const createrippleElement = (x, y, size, options) => {
+  const rippleElement = document.createElement("div");
+  rippleElement.style.position = "absolute";
+  rippleElement.style.width = `${size}px`;
+  rippleElement.style.height = `${size}px`;
+  rippleElement.style.top = `${y}px`;
+  rippleElement.style.left = `${x}px`;
+  rippleElement.style.background = options.color;
+  rippleElement.style.borderRadius = "50%";
+  rippleElement.style.opacity = `${options.initialOpacity}`;
+  rippleElement.style.transform = `translate(-50%,-50%) scale(0)`;
+  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) {
+  const deltaX = x1 - x2;
+  const deltaY = y1 - y2;
+  return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+}
+function getDistanceToFurthestCorner(x, y, { width, height }) {
+  const topLeft = magnitude(x, y, 0, 0);
+  const topRight = magnitude(x, y, width, 0);
+  const bottomLeft = magnitude(x, y, 0, height);
+  const bottomRight = magnitude(x, y, width, height);
+  return Math.max(topLeft, topRight, bottomLeft, bottomRight);
+}
+const getRelativePointer = ({ x, y }, { top, left }) => ({
+  x: x - 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);
+}
+function decrementRippleCount(el) {
+  const count = getRippleCount(el);
+  setRippleCount(el, count - 1);
+}
+function deleteRippleCount(el) {
+  delete el.dataset[RIPPLE_COUNT];
+}
+const MULTIPLE_NUMBER = 2.05;
+const ripple = (event, el, options) => {
+  const rect = el.getBoundingClientRect();
+  const computedStyles = window.getComputedStyle(el);
+  const { x, y } = getRelativePointer(event, rect);
+  const size = MULTIPLE_NUMBER * getDistanceToFurthestCorner(x, y, rect);
+  const rippleContainer = createContainer(computedStyles);
+  const rippleEl = createrippleElement(x, y, size, options);
+  let originalPositionValue = "";
+  let shouldDissolveripple = false;
+  let token = null;
+  function dissolveripple() {
+    rippleEl.style.transition = "opacity 150ms linear";
+    rippleEl.style.opacity = "0";
+    setTimeout(() => {
+      rippleContainer.remove();
+      decrementRippleCount(el);
+      if (getRippleCount(el) === 0) {
+        deleteRippleCount(el);
+        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);
+  token = setTimeout(() => {
+    document.removeEventListener("pointercancel", cancelripple);
+    requestAnimationFrame(() => {
+      rippleEl.style.transform = `translate(-50%,-50%) scale(1)`;
+      rippleEl.style.opacity = `${options.finalOpacity}`;
+      setTimeout(() => releaseripple(), options.duration);
+    });
+  }, options.delay);
+  document.addEventListener("pointercancel", cancelripple);
+};
+const optionMap = /* @__PURE__ */ new WeakMap();
+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) {
+        return;
+      }
+      if (options === false) {
+        return;
+      }
+      ripple(event, el, {
+        ...globalOptions,
+        ...options
+      });
+    });
+  },
+  updated(el, binding) {
+    var _a;
+    optionMap.set(el, (_a = binding.value) != null ? _a : {});
+  }
+};
+var index = {
+  title: "Ripple \u6C34\u6CE2\u7EB9",
+  category: "\u901A\u7528",
+  status: "100%",
+  install(app) {
+    app.directive("Ripple", RippleDirective);
+  }
+};
+export { RippleDirective, index as default };

package/ripple/index.umd.js

@@ -1 +1 @@
-var __defProp=Object.defineProperty,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,t,o)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,__spreadValues=(e,t)=>{for(var o in t||(t={}))__hasOwnProp.call(t,o)&&__defNormalProp(e,o,t[o]);if(__getOwnPropSymbols)for(var o of __getOwnPropSymbols(t))__propIsEnum.call(t,o)&&__defNormalProp(e,o,t[o]);return e},__require="undefined"!=typeof require?require:e=>{throw new Error('Dynamic require of "'+e+'" is not supported')};!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).index={})}(this,(function(e){"use strict";function t(e,t,o,n){const r=e-o,i=t-n;return Math.sqrt(r*r+i*i)}const o="vRippleCountInternal";function n(e,t){e.dataset[o]=t.toString()}function r(e){var t;return parseInt(null!=(t=e.dataset[o])?t:"0",10)}const i=(e,i,s)=>{const a=i.getBoundingClientRect(),l=window.getComputedStyle(i),{x:p,y:d}=(({x:e,y:t},{top:o,left:n})=>({x:e-n,y:t-o}))(e,a),u=2.05*function(e,o,{width:n,height:r}){const i=t(e,o,0,0),s=t(e,o,n,0),a=t(e,o,0,r),l=t(e,o,n,r);return Math.max(i,s,a,l)}(p,d,a),c=(({borderTopLeftRadius:e,borderTopRightRadius:t,borderBottomLeftRadius:o,borderBottomRightRadius:n})=>{const r=document.createElement("div");return r.style.top="0",r.style.left="0",r.style.width="100%",r.style.height="100%",r.style.position="absolute",r.style.borderRadius=`${e} ${t} ${n} ${o}`,r.style.overflow="hidden",r.style.pointerEvents="none",r.style.webkitMaskImage="-webkit-radial-gradient(white, black)",r})(l),y=((e,t,o,n)=>{const r=document.createElement("div");return r.style.position="absolute",r.style.width=`${o}px`,r.style.height=`${o}px`,r.style.top=`${t}px`,r.style.left=`${e}px`,r.style.background=n.color,r.style.borderRadius="50%",r.style.opacity=`${n.initialOpacity}`,r.style.transform="translate(-50%,-50%) scale(0)",r.style.transition=`transform ${n.duration}s ${n.easing}, opacity ${n.duration}s ${n.easing}`,r})(p,d,u,s);!function(e){n(e,r(e)+1)}(i);let m="";"static"===l.position&&(i.style.position&&(m=i.style.position),i.style.position="relative"),c.appendChild(y),i.appendChild(c);let f=!1;const v=e=>{void 0!==e&&(document.removeEventListener("pointerup",v),document.removeEventListener("pointercancel",v)),f?_():f=!0},_=()=>{y.style.transition="opacity 150ms linear",y.style.opacity="0",setTimeout((()=>{c.remove(),function(e){n(e,r(e)-1)}(i),0===r(i)&&(!function(e){delete e.dataset[o]}(i),i.style.position=m)}),150)};document.addEventListener("pointerup",v),document.addEventListener("pointercancel",v);const b=setTimeout((()=>{document.removeEventListener("pointercancel",g),requestAnimationFrame((()=>{y.style.transform="translate(-50%,-50%) scale(1)",y.style.opacity=`${s.finalOpacity}`,setTimeout((()=>v()),1e3*s.duration)}))}),s.delayTime),g=()=>{clearTimeout(b),c.remove(),document.removeEventListener("pointerup",v),document.removeEventListener("pointercancel",v),document.removeEventListener("pointercancel",g)};document.addEventListener("pointercancel",g)},s=new WeakMap,a=__spreadValues({},{directive:"ripple",color:"currentColor",initialOpacity:.2,finalOpacity:.1,duration:.8,easing:"ease-out",delayTime:75});var l={mounted(e,t){var o;s.set(e,null!=(o=t.value)?o:{}),e.addEventListener("pointerdown",(t=>{const o=s.get(e);!1!==o&&i(t,e,__spreadValues(__spreadValues({},a),o))}))},updated(e,t){var o;s.set(e,null!=(o=t.value)?o:{})}},p={title:"Ripple 水波纹",category:"通用",status:void 0,install(e){e.directive("Ripple",l)}};e.RippleDirective=l,e.default=p,Object.defineProperty(e,"__esModule",{value:!0}),e[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"}})});

package/search/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;