xdesign-vue-next
Version:
XDesign Component for vue-next
153 lines (149 loc) • 6.12 kB
JavaScript
/**
* xdesign v1.0.6
* (c) 2023 xdesign
* @license MIT
*/
import { ref, onMounted, onUnmounted } from 'vue';
import useKeepAnimation from './useKeepAnimation.mjs';
import { usePrefixClass } from './useConfig.mjs';
import setStyle from '../utils/set-style.mjs';
import '../_chunks/dep-b09f48fa.mjs';
import '../_chunks/dep-10a947a6.mjs';
import '../_chunks/dep-81c83986.mjs';
import '../_chunks/dep-6aa0223b.mjs';
import '../_chunks/dep-db381ece.mjs';
import '../_chunks/dep-1cc1c24f.mjs';
import '../_chunks/dep-b75d8d74.mjs';
import '../_chunks/dep-82805301.mjs';
import '../_chunks/dep-6ad18815.mjs';
import '../_chunks/dep-5755c21c.mjs';
import '../_chunks/dep-7f239c43.mjs';
import '../_chunks/dep-6f04869e.mjs';
import '../_chunks/dep-d32fbbb3.mjs';
import '../_chunks/dep-dafada74.mjs';
import '../_chunks/dep-addc2a84.mjs';
import '../_chunks/dep-a95026f2.mjs';
import '../_chunks/dep-068e912d.mjs';
import '../_chunks/dep-6e7b37b8.mjs';
import '../_chunks/dep-e1ab85c5.mjs';
import '../_chunks/dep-5f0e0453.mjs';
import '../_chunks/dep-71f84cf2.mjs';
import '../_chunks/dep-0e832fc7.mjs';
import '../_chunks/dep-26bf361a.mjs';
import '../_chunks/dep-3ec3335a.mjs';
import '../_chunks/dep-ed4e7c50.mjs';
import '../_chunks/dep-a666b9ad.mjs';
import '../_common/js/global-config/default-config.mjs';
import '../_common/js/global-config/locale/en_US.mjs';
import '../config-provider/useConfig.mjs';
import '../_chunks/dep-91ac8f71.mjs';
import '../_chunks/dep-c4737535.mjs';
import '../_chunks/dep-69963a8c.mjs';
import '../_chunks/dep-8d1c9a23.mjs';
import '../_chunks/dep-03412fab.mjs';
import '../_chunks/dep-205ff58d.mjs';
import '../_chunks/dep-11fa9c2c.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 || (_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