layui/package/component/es/ripple/index.js

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 };