init

.svn/pristine/98/9809f1da0ea4225c961e4b74019f3dec165d3a05.svn-base

@@ -0,0 +1,3 @@
+x
<01><><EFBFBD>n<EFBFBD>0<0C>w<EFBFBD>)"<22><>I<0B><>ݦ<EFBFBD>i Z<>Q:<3A>i<EFBFBD>><13>h<><68>6<EFBFBD><10><><EFBFBD><EFBFBD>ߖ%{ɟ<><C99F>C<0C>#a<><61><02><><12>Ҏ;P<><50><EFBFBD><1D><>8<EFBFBD><38>8<EFBFBD><38><EFBFBD><EFBFBD>.<2E>L<EFBFBD><4C>±315Vك<56>LC'C<><43>`<60>m<EFBFBD>器<EFBFBD><EFA8B8><EFBFBD>r<EFBFBD>5<EFBFBD>h<>	v_<76>'nޒ<6E><DE92><EFBFBD><16><><EFBFBD>ZqG<71>Z<EFBFBD><5A><0E>m<EFBFBD>QܚF<DC9A><46><؂R<D882><52>˾!G<>{<7B>3<EFBFBD><33>(b}ށ<><DE81>&po<70>5<EFBFBD>m3<6D>_x0E*<2A><><EFBFBD>A
+ؒ<EFBFBD>_yNM<11><10>}p<10>+-Y<><06>~<7E><>Du<44>#<23>
<01>><3E><<1F>b<0B><>xQ<1B>nMN<4D>TO<54><4F>5h6}
+<EFBFBD>D<EFBFBD><EFBFBD><EFBFBD><12>sph'aP<61>i<EFBFBD>*	<09>쑝<EFBFBD>4<EFBFBD>^<5E>P:<16>M<EFBFBD>/O<>/

.svn/pristine/98/981205898e908cd361988617e446227a34beb513.svn-base

@@ -0,0 +1,132 @@
+<script lang="ts">
+export default {
+  name: "LayRipple",
+};
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+import "./index.less";
+import { RippleTrigger, RippleType } from "./interface";
+
+export interface RippleProps {
+  type?: RippleType;
+  color?: string;
+  borderRadius?: string;
+  spreadWidth?: string;
+  spreadSize?: string;
+  trigger?: RippleTrigger;
+  center?: boolean;
+}
+
+const props = withDefaults(defineProps<RippleProps>(), {
+  type: "inset",
+  color: "currentColor",
+  borderRadius: "0",
+  spreadWidth: "6px",
+  trigger: "click",
+  center: false,
+});
+
+const isActiveRef = ref(false);
+const spreadSizeRef = ref<string>("0px");
+const ripplesRefEl = ref<HTMLElement | null>(null);
+const waterRipplesContainerRefEl = ref<HTMLElement | null>(null);
+
+const isOut = computed(() => {
+  return props.type === "out";
+});
+
+const rippleX = ref<string | number | undefined>(undefined);
+const rippleY = ref<string | number | undefined>(undefined);
+
+const onActive = function (event: Event) {
+  isActiveRef.value = true;
+
+  // 计算点击位置和波纹大小
+  if (props.type === "inset" && !props.spreadSize && !props.center) {
+    const el = event.currentTarget;
+    // @ts-ignore
+    const rect = el.getBoundingClientRect();
+    // @ts-ignore
+    const rippleOffsetLeft = event.clientX - rect.left;
+    // @ts-ignore
+    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 }
+);
+</script>
+
+<template>
+  <div
+    class="layui-water-ripples-container"
+    ref="waterRipplesContainerRefEl"
+    @[trigger]="onActive"
+  >
+    <div
+      ref="ripplesRefEl"
+      :class="{
+        'layui-out-ripples': isOut,
+        'layui-inset-ripples': type == 'inset',
+        'layui-animate-always--out':
+          isActiveRef && trigger == 'always' && type == 'out',
+        'layui-animate-once--out':
+          isActiveRef &&
+          (trigger == 'mouseenter' || trigger == 'click') &&
+          type == 'out',
+        'layui-animate-always--inset':
+          isActiveRef && trigger == 'always' && type == 'inset',
+        'layui-animate-once--inset':
+          isActiveRef &&
+          (trigger == 'mouseenter' || trigger == 'click') &&
+          type == 'inset',
+      }"
+      :style="{
+        borderRadius: isOut ? borderRadius : '50%',
+        left: rippleX,
+        top: rippleY,
+        '--layui-ripple-color': color,
+        '--layui-spread-width': spreadWidth,
+        '--layui-spread-size': spreadSizeRef,
+      }"
+    ></div>
+    <slot></slot>
+  </div>
+</template>

.svn/pristine/98/9885d5d23a307b18ea319eaccc75404b970570bc.svn-base

@@ -0,0 +1 @@
+f46e63adc92794b3fdc699889346854dff9c9f52

.svn/pristine/98/98a2e4c0b3b22f4505423cff5f0ffc35ab3802b3.svn-base

@@ -0,0 +1,5 @@
+import "../badge/index2.js";
+export { c as default } from "./index2.js";
+import "vue";
+import "../checkbox/index2.js";
+import "../_chunks/@ctrl/index.js";