99 lines
5.2 KiB
JavaScript
99 lines
5.2 KiB
JavaScript
import { w as withInstall } from "../badge/index2.js";
|
|
import { defineComponent, ref, computed, onMounted, watch, openBlock, createElementBlock, mergeProps, toHandlerKey, createElementVNode, normalizeClass, unref, normalizeStyle, renderSlot } from "vue";
|
|
var index = /* @__PURE__ */ (() => ".layui-water-ripples-container{position:relative;display:inline-block}.layui-water-ripples-container .layui-slot-container{position:relative;z-index:2}.layui-water-ripples-container .layui-out-ripples{position:absolute;left:0;top:0;height:100%;opacity:1;z-index:1;pointer-events:none}.layui-water-ripples-container .layui-animate-once--out{animation:ripple-effect 1s forwards}.layui-water-ripples-container .layui-animate-always--out{animation:ripple-effect 1s infinite}@keyframes ripple-effect{0%{box-shadow:0 0 0 0 var(--layui-ripple-color);opacity:.4}to{box-shadow:0 0 0 var(--layui-spread-width) var(--layui-ripple-color);opacity:0}}.layui-water-ripples-container .layui-inset-ripples{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:1;width:0px;height:0px;background:var(--layui-ripple-color);pointer-events:none}@keyframes size-effect{0%{width:0px;height:0px;opacity:.8}to{width:var(--layui-spread-size);height:var(--layui-spread-size);opacity:0}}.layui-water-ripples-container .layui-animate-once--inset{animation:size-effect 1s forwards}.layui-water-ripples-container .layui-animate-always--inset{animation:size-effect 1s infinite}\n")();
|
|
const __default__ = {
|
|
name: "LayRipple"
|
|
};
|
|
const _sfc_main = defineComponent({
|
|
...__default__,
|
|
props: {
|
|
type: { default: "inset" },
|
|
color: { default: "currentColor" },
|
|
borderRadius: { default: "0" },
|
|
spreadWidth: { default: "6px" },
|
|
spreadSize: null,
|
|
trigger: { default: "click" },
|
|
center: { type: Boolean, default: false }
|
|
},
|
|
setup(__props) {
|
|
const props = __props;
|
|
const isActiveRef = ref(false);
|
|
const spreadSizeRef = ref("0px");
|
|
const ripplesRefEl = ref(null);
|
|
const waterRipplesContainerRefEl = ref(null);
|
|
const isOut = computed(() => {
|
|
return props.type === "out";
|
|
});
|
|
const rippleX = ref(void 0);
|
|
const rippleY = ref(void 0);
|
|
const onActive = function(event) {
|
|
isActiveRef.value = true;
|
|
if (props.type === "inset" && !props.spreadSize && !props.center) {
|
|
const el = event.currentTarget;
|
|
const rect = el.getBoundingClientRect();
|
|
const rippleOffsetLeft = event.clientX - rect.left;
|
|
const rippleOffsetTop = event.clientY - rect.top;
|
|
const sizeX = Math.max(rippleOffsetLeft, rect.width - rippleOffsetLeft);
|
|
const sizeY = Math.max(rippleOffsetTop, rect.height - rippleOffsetTop);
|
|
rippleX.value = rippleOffsetLeft + "px";
|
|
rippleY.value = rippleOffsetTop + "px";
|
|
spreadSizeRef.value = Math.sqrt(sizeX ** 2 + sizeY ** 2) * 2 + "px";
|
|
}
|
|
};
|
|
const initWidth = function() {
|
|
let container = waterRipplesContainerRefEl.value;
|
|
let ripples = ripplesRefEl.value;
|
|
if (!container || !ripples)
|
|
return;
|
|
if (props.type == "out") {
|
|
ripples.style.width = container.clientWidth + "px";
|
|
} else {
|
|
container.style.overflow = "hidden";
|
|
if (!props.spreadSize || props.center) {
|
|
spreadSizeRef.value = container.clientWidth * 1.1 + "px";
|
|
} else {
|
|
spreadSizeRef.value = props.spreadSize;
|
|
}
|
|
}
|
|
ripples.addEventListener("animationend", () => {
|
|
isActiveRef.value = false;
|
|
}, false);
|
|
};
|
|
onMounted(() => {
|
|
initWidth();
|
|
});
|
|
watch(() => props.trigger, (val) => isActiveRef.value = val === "always", { immediate: true });
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", mergeProps({
|
|
class: "layui-water-ripples-container",
|
|
ref_key: "waterRipplesContainerRefEl",
|
|
ref: waterRipplesContainerRefEl
|
|
}, { [toHandlerKey(__props.trigger)]: onActive }), [
|
|
createElementVNode("div", {
|
|
ref_key: "ripplesRefEl",
|
|
ref: ripplesRefEl,
|
|
class: normalizeClass({
|
|
"layui-out-ripples": unref(isOut),
|
|
"layui-inset-ripples": __props.type == "inset",
|
|
"layui-animate-always--out": isActiveRef.value && __props.trigger == "always" && __props.type == "out",
|
|
"layui-animate-once--out": isActiveRef.value && (__props.trigger == "mouseenter" || __props.trigger == "click") && __props.type == "out",
|
|
"layui-animate-always--inset": isActiveRef.value && __props.trigger == "always" && __props.type == "inset",
|
|
"layui-animate-once--inset": isActiveRef.value && (__props.trigger == "mouseenter" || __props.trigger == "click") && __props.type == "inset"
|
|
}),
|
|
style: normalizeStyle({
|
|
borderRadius: unref(isOut) ? __props.borderRadius : "50%",
|
|
left: rippleX.value,
|
|
top: rippleY.value,
|
|
"--layui-ripple-color": __props.color,
|
|
"--layui-spread-width": __props.spreadWidth,
|
|
"--layui-spread-size": spreadSizeRef.value
|
|
})
|
|
}, null, 6),
|
|
renderSlot(_ctx.$slots, "default")
|
|
], 16);
|
|
};
|
|
}
|
|
});
|
|
const component = withInstall(_sfc_main);
|
|
export { component as default };
|