const d = {
  event: "mousedown",
  transition: 200
}, w = {
  beforeMount: (e, t) => {
    var l, m, p;
    if (t.value === !1)
      return;
    const s = ((l = t == null ? void 0 : t.value) == null ? void 0 : l.color) || "#00000050", n = ((m = t == null ? void 0 : t.value) == null ? void 0 : m.duration) || 200, c = (p = t == null ? void 0 : t.value) == null ? void 0 : p.zIndex, u = t != null && t.value ? 0.2 : 0.3;
    d.transition = n;
    const x = e.getAttribute("ripple-background") || s;
    I(Object.keys(t.modifiers), d);
    const g = x || w.background, y = w.zIndex || c;
    e.addEventListener(d.event, (f) => {
      z({
        event: f,
        el: e,
        background: g,
        zIndex: y,
        opacity: u
      });
    });
  },
  updated(e, t) {
    var n, c;
    if (!t.value) {
      (n = e == null ? void 0 : e.clearRipple) == null || n.call(e);
      return;
    }
    const s = e.getAttribute("ripple-background");
    (c = e == null ? void 0 : e.setBackground) == null || c.call(e, s);
  }
};
function z({
  event: e,
  el: t,
  zIndex: s,
  background: n,
  opacity: c
}) {
  const u = parseInt(getComputedStyle(t).borderWidth.replace("px", "")), x = e.clientX || e.touches[0].clientX, g = e.clientY || e.touches[0].clientY, y = t.getBoundingClientRect(), {
    left: l,
    top: m
  } = y, {
    offsetWidth: p,
    offsetHeight: f
  } = t, {
    transition: b
  } = d, h = x - l, v = g - m, k = Math.max(h, p - h), T = Math.max(v, f - v), N = window.getComputedStyle(t), R = Math.sqrt(k * k + T * T), $ = u > 0 ? u : 0, a = document.createElement("div"), r = document.createElement("div");
  a.className = "ripple", Object.assign(a.style ?? {}, {
    marginTop: "0px",
    marginLeft: "0px",
    width: "1px",
    height: "1px",
    transition: `all ${b}ms cubic-bezier(0.4, 0, 0.2, 1)`,
    borderRadius: "50%",
    pointerEvents: "none",
    position: "relative",
    zIndex: s ?? "9999",
    backgroundColor: n ?? "rgba(0, 0, 0, 0.3)",
    opacity: c
  }), r.className = "ripple-container", Object.assign(r.style ?? {}, {
    position: "absolute",
    left: `${0 - $}px`,
    top: `${0 - $}px`,
    height: "0",
    width: "0",
    pointerEvents: "none",
    overflow: "hidden"
  });
  const E = t.style.position.length > 0 ? t.style.position : getComputedStyle(t).position;
  E !== "relative" && (t.style.position = "relative"), r.appendChild(a), t.appendChild(r), Object.assign(a.style, {
    marginTop: `${v}px`,
    marginLeft: `${h}px`
  });
  const {
    borderTopLeftRadius: C,
    borderTopRightRadius: j,
    borderBottomLeftRadius: B,
    borderBottomRightRadius: O
  } = N;
  Object.assign(r.style, {
    width: `${p}px`,
    height: `${f}px`,
    direction: "ltr",
    borderTopLeftRadius: C,
    borderTopRightRadius: j,
    borderBottomLeftRadius: B,
    borderBottomRightRadius: O
  }), setTimeout(() => {
    const o = `${R * 2}px`;
    Object.assign(a.style ?? {}, {
      width: o,
      height: o,
      marginLeft: `${h - R}px`,
      marginTop: `${v - R}px`
    });
  }, 0);
  function i() {
    setTimeout(() => {
      a.style.backgroundColor = "rgba(0, 0, 0, 0)";
    }, 250), setTimeout(() => {
      var o;
      (o = r == null ? void 0 : r.parentNode) == null || o.removeChild(r);
    }, 850), t.removeEventListener("mouseup", i, !1), t.removeEventListener("mouseleave", i, !1), t.removeEventListener("dragstart", i, !1), setTimeout(() => {
      let o = !0;
      for (let L = 0; L < t.childNodes.length; L++)
        t.childNodes[L].className === "ripple-container" && (o = !1);
      o && (t.style.position = E !== "static" ? E : "");
    }, d.transition + 260);
  }
  e.type === "mousedown" ? (t.addEventListener("mouseup", i, !1), t.addEventListener("mouseleave", i, !1), t.addEventListener("dragstart", i, !1)) : i(), t.setBackground = (o) => {
    o && (a.style.backgroundColor = o);
  };
}
function I(e, t) {
  e.forEach((s) => {
    isNaN(Number(s)) ? t.event = s : t.transition = s;
  });
}
const M = {
  title: "Ripple 水波纹",
  category: "通用",
  status: "100%",
  install(e) {
    e.directive("GRipple", w);
  }
};
export {
  w as RippleDirective,
  M as default
};
