vue-devui 0.1.3 → 1.0.0-alpha.10

package/ripple/index.es.js

@@ -0,0 +1,173 @@
+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

@@ -0,0 +1 @@
+(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/ripple/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "ripple",
+  "version": "0.0.0",
+  "main": "index.umd.js",
+  "module": "index.es.js",
+  "style": "style.css"
+}

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;