/**
 * ldesign v0.4.2
 * (c) 2023 ldesign
 * @license MIT
 */

import { ref, onMounted, onUnmounted } from 'vue';
import setStyle from '../utils/set-style.mjs';
import useKeepAnimation from './useKeepAnimation.mjs';
import { usePrefixClass } from './useConfig.mjs';
import '../_chunks/dep-99920870.mjs';
import '../_chunks/dep-a0b4a044.mjs';
import '../_chunks/dep-79821ff2.mjs';
import '../_chunks/dep-0bfbf721.mjs';
import '../_chunks/dep-39cc276d.mjs';
import '../_chunks/dep-6b22dd27.mjs';
import '../_chunks/dep-c959a6fb.mjs';
import '../_chunks/dep-b4041200.mjs';
import '../_chunks/dep-0f0c89ff.mjs';
import '../_chunks/dep-8f777748.mjs';
import '../_chunks/dep-ae357f26.mjs';
import '../_chunks/dep-352691c2.mjs';
import '../_chunks/dep-2cfd5b3a.mjs';
import '../_chunks/dep-05fa17c9.mjs';
import '../_chunks/dep-c31e1d9e.mjs';
import '../_chunks/dep-e3b14d70.mjs';
import '../_chunks/dep-66d6733b.mjs';
import '../_chunks/dep-a9c8a5d5.mjs';
import '../_chunks/dep-10085c61.mjs';
import '../_chunks/dep-1b058de3.mjs';
import '../_chunks/dep-c852a61a.mjs';
import '../_chunks/dep-92e7085e.mjs';
import '../_chunks/dep-c7e9ce16.mjs';
import '../_chunks/dep-3afa94cf.mjs';
import '../_chunks/dep-ba3c0b2e.mjs';
import '../_chunks/dep-ee57d235.mjs';
import '../_common/js/global-config/default-config.mjs';
import '../_common/js/global-config/locale/zh_CN.mjs';
import '../_chunks/dep-6b4aa943.mjs';
import '../_chunks/dep-d52291a9.mjs';
import '../config-provider/useConfig.mjs';
import '../_chunks/dep-44417261.mjs';
import '../_chunks/dep-bf74f1c2.mjs';
import '../_chunks/dep-44f056cd.mjs';
import '../_chunks/dep-23a0f453.mjs';
import '../_chunks/dep-1cf2b129.mjs';
import '../config-provider/type.mjs';

var period = 200;
var noneRippleBg = "rgba(0, 0, 0, 0)";
var defaultRippleColor = "rgba(0, 0, 0, 0.35)";
var getRippleColor = function getRippleColor(el, fixedRippleColor) {
  var _el$dataset;
  if (fixedRippleColor) return fixedRippleColor;
  if (el !== null && el !== void 0 && (_el$dataset = el.dataset) !== null && _el$dataset !== void 0 && _el$dataset.ripple) {
    var rippleColor = el.dataset.ripple;
    return rippleColor;
  }
  var cssVariable = getComputedStyle(el).getPropertyValue("--ripple-color");
  if (cssVariable) return cssVariable;
  return defaultRippleColor;
};
function useRipple(el, fixedRippleColor) {
  var rippleContainer = ref(null);
  var classPrefix = usePrefixClass();
  var _useKeepAnimation = useKeepAnimation(),
    keepRipple = _useKeepAnimation.keepRipple;
  var handleAddRipple = function handleAddRipple(e) {
    var dom = el.value;
    var rippleColor = getRippleColor(dom, fixedRippleColor === null || fixedRippleColor === void 0 ? void 0 : fixedRippleColor.value);
    if (e.button !== 0 || !el || !keepRipple) return;
    if (dom.classList.contains("".concat(classPrefix.value, "-is-active")) || dom.classList.contains("".concat(classPrefix.value, "-is-disabled")) || dom.classList.contains("".concat(classPrefix.value, "-is-checked")) || dom.classList.contains("".concat(classPrefix.value, "-is-loading"))) return;
    var elStyle = getComputedStyle(dom);
    var elBorder = parseInt(elStyle.borderWidth, 10);
    var border = elBorder > 0 ? elBorder : 0;
    var width = dom.offsetWidth;
    var height = dom.offsetHeight;
    if (rippleContainer.value.parentNode === null) {
      setStyle(rippleContainer.value, {
        position: "absolute",
        left: "".concat(0 - border, "px"),
        top: "".concat(0 - border, "px"),
        width: "".concat(width, "px"),
        height: "".concat(height, "px"),
        borderRadius: elStyle.borderRadius,
        pointerEvents: "none",
        overflow: "hidden"
      });
      dom.appendChild(rippleContainer.value);
    }
    var ripple = document.createElement("div");
    setStyle(ripple, {
      marginTop: "0",
      marginLeft: "0",
      right: "".concat(width, "px"),
      width: "".concat(width + 20, "px"),
      height: "100%",
      transition: "transform ".concat(period, "ms cubic-bezier(.38, 0, .24, 1), background ").concat(period * 2, "ms linear"),
      transform: "skewX(-8deg)",
      pointerEvents: "none",
      position: "absolute",
      zIndex: 0,
      backgroundColor: rippleColor,
      opacity: "0.9"
    });
    var elMap = /* @__PURE__ */new WeakMap();
    for (var n = dom.children.length, i = 0; i < n; ++i) {
      var child = dom.children[i];
      if (child.style.zIndex === "" && child !== rippleContainer.value) {
        child.style.zIndex = "1";
        elMap.set(child, true);
      }
    }
    var initPosition = dom.style.position ? dom.style.position : getComputedStyle(dom).position;
    if (initPosition === "" || initPosition === "static") dom.style.position = "relative";
    rippleContainer.value.insertBefore(ripple, rippleContainer.value.firstChild);
    setTimeout(function () {
      ripple.style.transform = "translateX(".concat(width, "px)");
    }, 0);
    var handleClearRipple = function handleClearRipple() {
      ripple.style.backgroundColor = noneRippleBg;
      if (!el.value) return;
      el.value.removeEventListener("pointerup", handleClearRipple, false);
      el.value.removeEventListener("pointerleave", handleClearRipple, false);
      setTimeout(function () {
        ripple.remove();
        if (rippleContainer.value.children.length === 0) rippleContainer.value.remove();
      }, period * 2 + 100);
    };
    el.value.addEventListener("pointerup", handleClearRipple, false);
    el.value.addEventListener("pointerleave", handleClearRipple, false);
  };
  onMounted(function () {
    var dom = el === null || el === void 0 ? void 0 : el.value;
    if (!dom) return;
    rippleContainer.value = document.createElement("div");
    dom.addEventListener("pointerdown", handleAddRipple, false);
  });
  onUnmounted(function () {
    var _el$value;
    el === null || el === void 0 ? void 0 : (_el$value = el.value) === null || _el$value === void 0 ? void 0 : _el$value.removeEventListener("pointerdown", handleAddRipple, false);
  });
}

export { useRipple as default };
//# sourceMappingURL=useRipple.mjs.map
