init

es/ripple/index.css

@@ -0,0 +1 @@
+.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}

es/ripple/index.js

@@ -0,0 +1,98 @@
+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 };