@poupe/vue/dist/use-ripple-C71Mu4m1.js

Vue component library for Poupe UI framework with theme customization and accessibility support

import { reactive as v, readonly as $, toValue as S, ref as O, computed as j, inject as D, provide as T, onMounted as L, unref as M, onUnmounted as X } from "vue";
import "./iconify-C52eJ6S7.js";
const Y = {
  body: "",
  width: 24,
  height: 24
}, U = {
  body: '<text y=".9em" font-size="90" fill="currentColor">�</text>',
  width: 100,
  height: 100
}, B = {
  blankIcon: Y,
  unknownIcon: U,
  spinner: "svg-spinners:6-dots-scale",
  // input[type=password]
  showPassword: "heroicons:eye",
  hidePassword: "heroicons:eye-slash"
}, a = v({
  poupe: B
}), K = (t, o) => {
  a[t] = {
    ...a[t],
    ...o
  };
}, y = (t) => {
  const o = S(t);
  if (!o)
    return a.poupe.blankIcon;
  if (typeof o != "string")
    return o;
  const n = o.indexOf(":"), e = a[n > 0 ? o.slice(0, n) : "poupe"];
  if (!e)
    return o;
  const r = n === -1 ? o : o.slice(n + 1);
  if (e[r])
    return y(e[r]);
  const s = r.replaceAll(/[-_]([a-z])/g, (u, c) => c.toUpperCase());
  return e[s] ? y(e[s]) : a.poupe.unknownIcon;
}, V = () => ({
  icons: $(a),
  toIcon: y,
  registerIcons: K
});
function Q(t) {
  const { poupe: o } = V().icons, n = O(!1);
  return {
    showPassword: n,
    passwordToggleIcon: j(() => n.value ? o.hidePassword : o.showPassword),
    typeAttr: j(() => n.value ? "text" : S(t))
  };
}
function h(t) {
  if (t === null || typeof t != "object")
    return !1;
  const o = Object.getPrototypeOf(t);
  return o !== null && o !== Object.prototype && Object.getPrototypeOf(o) !== null || Symbol.iterator in t ? !1 : Symbol.toStringTag in t ? Object.prototype.toString.call(t) === "[object Module]" : !0;
}
function g(t, o, n = ".", e) {
  if (!h(o))
    return g(t, {}, n, e);
  const r = Object.assign({}, o);
  for (const s in t) {
    if (s === "__proto__" || s === "constructor")
      continue;
    const u = t[s];
    u != null && (e && e(r, s, u, n) || (Array.isArray(u) && Array.isArray(r[s]) ? r[s] = [...u, ...r[s]] : h(u) && h(r[s]) ? r[s] = g(
      u,
      r[s],
      (n ? `${n}.` : "") + s.toString(),
      e
    ) : r[s] = u));
  }
  return r;
}
function q(t) {
  return (...o) => (
    // eslint-disable-next-line unicorn/no-array-reduce
    o.reduce((n, e) => g(n, e, "", t), {})
  );
}
const m = q(), b = Symbol("poupe");
function W(t = {}) {
  const o = v(t);
  return {
    install(n) {
      n.provide(b, o);
    }
  };
}
function F() {
  return D(b);
}
function z(t) {
  var n;
  const o = F();
  return (n = o == null ? void 0 : o.defaults) == null ? void 0 : n[t];
}
function Z(t) {
  T(b, v(t));
}
function R(t, o, n) {
  const e = z(o);
  return m(t, n || {}, e || {});
}
function tt(t, o, n) {
  const e = z(o);
  return m(t, n, e || {});
}
function ot(t, o = {}) {
  const {
    color: n = "currentColor",
    opacity: e = 0.12,
    duration: r = 600,
    bounded: s = !0,
    disabled: u = !1
  } = o, c = O([]);
  let _ = 0;
  const w = (i) => {
    if (M(u) || !t.value) return;
    const l = t.value.getBoundingClientRect();
    let p, d;
    if (i instanceof MouseEvent)
      p = i.clientX - l.left, d = i.clientY - l.top;
    else {
      const f = i.touches[0];
      p = f.clientX - l.left, d = f.clientY - l.top;
    }
    const k = Math.max(p, l.width - p), A = Math.max(d, l.height - d), C = Math.hypot(k, A) * 2, I = _++, E = { x: p, y: d, size: C, id: I };
    c.value.push(E), setTimeout(() => {
      c.value = c.value.filter((f) => f.id !== I);
    }, r);
  }, P = (i) => {
    w(i);
  }, x = (i) => {
    w(i);
  };
  return L(() => {
    !t.value || M(u) || (t.value.addEventListener("mousedown", P), t.value.addEventListener("touchstart", x, { passive: !0 }), t.value.style.position = "relative", t.value.style.overflow = s ? "hidden" : "visible");
  }), X(() => {
    t.value && (t.value.removeEventListener("mousedown", P), t.value.removeEventListener("touchstart", x));
  }), {
    ripples: c,
    getRippleStyle: (i) => ({
      position: "absolute",
      left: `${i.x}px`,
      top: `${i.y}px`,
      width: `${i.size}px`,
      height: `${i.size}px`,
      transform: "translate(-50%, -50%)",
      borderRadius: "50%",
      backgroundColor: n,
      opacity: e,
      pointerEvents: "none",
      animation: `ripple ${r}ms ease-out`
    })
  };
}
export {
  Q as a,
  F as b,
  W as c,
  z as d,
  Z as e,
  R as f,
  tt as g,
  ot as h,
  b as p,
  V as u
};