ci: merge feat-ripple-dev

package/component/src/component/datePicker/index.vue

@@ -8,17 +8,38 @@
       </lay-input>
       <template #content>
         <!-- 日期选择 -->
-        <div class="layui-laydate" v-show="showPane === 'date' || showPane === 'datetime'">
+        <div
+          class="layui-laydate"
+          v-show="showPane === 'date' || showPane === 'datetime'"
+        >
           <div class="layui-laydate-main laydate-main-list-0">
             <div class="layui-laydate-header">
-              <i class="layui-icon laydate-icon laydate-prev-y" @click="changeYearOrMonth('year', -1)"></i>
+              <i
-              <i class="layui-icon laydate-icon laydate-prev-m" @click="changeYearOrMonth('month', -1)"></i>
+                class="layui-icon laydate-icon laydate-prev-y"
+                @click="changeYearOrMonth('year', -1)"
+                ></i
+              >
+              <i
+                class="layui-icon laydate-icon laydate-prev-m"
+                @click="changeYearOrMonth('month', -1)"
+                ></i
+              >
               <div class="laydate-set-ym">
                 <span @click="showYearPanel">{{ currentYear }} 年</span>
-                <span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
+                <span @click="showPane = 'month'"
+                  >{{ currentMonth + 1 }} 月</span
+                >
               </div>
-              <i class="layui-icon laydate-icon laydate-next-m" @click="changeYearOrMonth('month', 1)"></i>
+              <i
-              <i class="layui-icon laydate-icon laydate-next-y" @click="changeYearOrMonth('year', 1)"></i>
+                class="layui-icon laydate-icon laydate-next-m"
+                @click="changeYearOrMonth('month', 1)"
+                ></i
+              >
+              <i
+                class="layui-icon laydate-icon laydate-next-y"
+                @click="changeYearOrMonth('year', 1)"
+                ></i
+              >
             </div>
             <div class="layui-laydate-content">
               <table>
@@ -28,17 +49,26 @@
                   </tr>
                 </thead>
                 <tbody>
-                  <template v-for="(o, i) of dateList.length % 7 == 0
+                  <template
+                    v-for="(o, i) of dateList.length % 7 == 0
                       ? dateList.length / 7
-                  : Math.floor(dateList.length / 7) + 1" :key="i">
+                      : Math.floor(dateList.length / 7) + 1"
+                    :key="i"
+                  >
                     <tr>
-                      <td v-for="(item, index) of dateList.slice(
+                      <td
+                        v-for="(item, index) of dateList.slice(
                           i * 7,
                           i * 7 + 7
-                      )" :key="index" :data-unix="item.value" :class="{
+                        )"
+                        :key="index"
+                        :data-unix="item.value"
+                        :class="{
                           'laydate-day-prev': item.type !== 'current',
                           'layui-this': item.value === currentDay,
-}" @click="handleDayClick(item)">
+                        }"
+                        @click="handleDayClick(item)"
+                      >
                         {{ item.day }}
                       </td>
                     </tr>
@@ -48,37 +78,69 @@
             </div>
           </div>
           <div class="layui-laydate-footer">
-            <span v-if="type === 'datetime'" @click="showPane = 'time'" class="laydate-btns-time">选择时间</span>
+            <span
+              v-if="type === 'datetime'"
+              @click="showPane = 'time'"
+              class="laydate-btns-time"
+              >选择时间</span
+            >
             <div class="laydate-footer-btns">
-              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear"
-              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
+                >清空</span
-              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
+              >
+              <span lay-type="now" class="laydate-btns-now" @click="now"
+                >现在</span
+              >
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
+                >确定</span
+              >
             </div>
           </div>
         </div>
         <!-- 年份选择器 -->
-        <div class="layui-laydate" v-show="showPane === 'year' || showPane === 'yearmonth'">
+        <div
+          class="layui-laydate"
+          v-show="showPane === 'year' || showPane === 'yearmonth'"
+        >
           <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
             <div class="layui-laydate-header">
               <div class="laydate-set-ym">
                 <span class="laydate-time-text">选择年份</span>
               </div>
             </div>
-            <div class="layui-laydate-content" style="height: 220px; overflow-y: auto">
+            <div
+              class="layui-laydate-content"
+              style="height: 220px; overflow-y: auto"
+            >
               <ul class="layui-laydate-list laydate-year-list">
-                <li v-for="item of yearList" :key="item" :class="[{ 'layui-this': currentYear === item }]"
+                <li
-                  @click="handleYearClick(item)">
+                  v-for="item of yearList"
+                  :key="item"
+                  :class="[{ 'layui-this': currentYear === item }]"
+                  @click="handleYearClick(item)"
+                >
                   {{ item }}
                 </li>
               </ul>
             </div>
           </div>
           <div class="layui-laydate-footer">
-            <span class="layui-laydate-preview" title="当前选中的结果" style="color: rgb(102, 102, 102)">{{ dateValue }}</span>
+            <span
+              class="layui-laydate-preview"
+              title="当前选中的结果"
+              style="color: rgb(102, 102, 102)"
+              >{{ dateValue }}</span
+            >
             <div class="laydate-footer-btns">
-              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear"
-              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
+                >清空</span
-              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
+              >
+              <span lay-type="now" class="laydate-btns-now" @click="now"
+                >现在</span
+              >
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
+                >确定</span
+              >
             </div>
           </div>
         </div>
@@ -86,30 +148,59 @@
         <div class="layui-laydate" v-show="showPane === 'month'">
           <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
             <div class="layui-laydate-header">
-              <i class="layui-icon laydate-icon laydate-prev-y" @click="changeYearOrMonth('year', -1)"></i>
+              <i
+                class="layui-icon laydate-icon laydate-prev-y"
+                @click="changeYearOrMonth('year', -1)"
+                ></i
+              >
               <div class="laydate-set-ym">
-                <span @click="showYearPanel" v-if="showPane === 'date' || showPane === 'datetime'">{{ currentYear }}
+                <span
-                  年</span>
+                  @click="showYearPanel"
-                <span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
+                  v-if="showPane === 'date' || showPane === 'datetime'"
+                  >{{ currentYear }} 年</span
+                >
+                <span @click="showPane = 'month'"
+                  >{{ currentMonth + 1 }} 月</span
+                >
               </div>
-              <i class="layui-icon laydate-icon laydate-next-y" @click="changeYearOrMonth('year', 1)"></i>
+              <i
+                class="layui-icon laydate-icon laydate-next-y"
+                @click="changeYearOrMonth('year', 1)"
+                ></i
+              >
             </div>
             <div class="layui-laydate-content" style="height: 220px">
               <ul class="layui-laydate-list laydate-month-list">
-                <li v-for="item of MONTH_NAME" :key="item" :class="[
+                <li
+                  v-for="item of MONTH_NAME"
+                  :key="item"
+                  :class="[
                     { 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
-                ]" @click="handleMonthClick(item)">
+                  ]"
+                  @click="handleMonthClick(item)"
+                >
                   {{ item.slice(0, 3) }}
                 </li>
               </ul>
             </div>
           </div>
           <div class="layui-laydate-footer">
-            <span class="layui-laydate-preview" title="当前选中的结果" style="color: rgb(102, 102, 102)">{{ dateValue }}</span>
+            <span
+              class="layui-laydate-preview"
+              title="当前选中的结果"
+              style="color: rgb(102, 102, 102)"
+              >{{ dateValue }}</span
+            >
             <div class="laydate-footer-btns">
-              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear"
-              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
+                >清空</span
-              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
+              >
+              <span lay-type="now" class="laydate-btns-now" @click="now"
+                >现在</span
+              >
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
+                >确定</span
+              >
             </div>
           </div>
         </div>
@@ -125,13 +216,19 @@
               <ul class="layui-laydate-list laydate-time-list">
                 <li class="num-list" v-for="item in els" :key="item.type">
                   <ol class="scroll" @click="choseTime">
-                    <li v-for="(it, index) in item.count" :id="item.type + index.toString()"
+                    <li
-                      :data-value="index.toString().padStart(2, '0')" :data-type="item.type" :key="it" :class="[
+                      v-for="(it, index) in item.count"
+                      :id="item.type + index.toString()"
+                      :data-value="index.toString().padStart(2, '0')"
+                      :data-type="item.type"
+                      :key="it"
+                      :class="[
                         'num',
                         index.toString().padStart(2, '0') == hms[item.type]
                           ? 'layui-this'
                           : '',
-                      ]">
+                      ]"
+                    >
                       {{ index.toString().padStart(2, "0") }}
                     </li>
                   </ol>
@@ -140,11 +237,22 @@
             </div>
           </div>
           <div class="layui-laydate-footer">
-            <span @click="showPane = 'date'" v-if="type != 'time'" class="laydate-btns-time">返回日期</span>
+            <span
+              @click="showPane = 'date'"
+              v-if="type != 'time'"
+              class="laydate-btns-time"
+              >返回日期</span
+            >
             <div class="laydate-footer-btns">
-              <span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
+              <span lay-type="clear" class="laydate-btns-clear" @click="clear"
-              <span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
+                >清空</span
-              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
+              >
+              <span lay-type="now" class="laydate-btns-now" @click="now"
+                >现在</span
+              >
+              <span lay-type="confirm" class="laydate-btns-confirm" @click="ok"
+                >确定</span
+              >
             </div>
           </div>
         </div>

package/component/src/component/noticeBar/index.vue

@@ -19,7 +19,15 @@
           {{ text }}
         </div>
         <div class="notice-bar-warp-slot" v-else>
-					  <lay-carousel v-model="active4" :interval="3000" :autoplay="true" anim="updown"  indicator="none" arrow="none"  style="height:40px;">
+          <lay-carousel
+            v-model="active4"
+            :interval="3000"
+            :autoplay="true"
+            anim="updown"
+            indicator="none"
+            arrow="none"
+            style="height: 40px"
+          >
             <lay-carousel-item :id="ind" v-for="(item, ind) in arrays">
               <div>{{ item }}</div>
             </lay-carousel-item>
@@ -46,13 +54,13 @@ import {
   onMounted,
   nextTick,
 } from "vue";
-import LayCarousel from '../carousel/index.vue'
+import LayCarousel from "../carousel/index.vue";
-import LayCarouselItem from '../carouselItem/index.vue'
+import LayCarouselItem from "../carouselItem/index.vue";
 export default defineComponent({
   name: "LayNoticeBar",
   components: {
     LayCarousel,
-    LayCarouselItem 
+    LayCarouselItem,
   },
   props: {
     mode: {
@@ -220,7 +228,13 @@ export default defineComponent({
   width: 100%;
   white-space: nowrap;
 }
-.notice-bar .notice-bar-warp .notice-bar-warp-text-box .notice-bar-warp-slot  .layui-carousel  >[carousel-item] * {
+.notice-bar
+  .notice-bar-warp
+  .notice-bar-warp-text-box
+  .notice-bar-warp-slot
+  .layui-carousel
+  > [carousel-item]
+  * {
   display: flex;
   align-items: center;
 }

package/component/src/component/ripple/index.vue

@@ -9,12 +9,12 @@ import { computed, onMounted, ref, watch } from "vue";
 import "./index.less";
 
 export interface LayRippletProps {
-  type?: 'out' | 'inset';
+  type?: "out" | "inset";
   color?: string;
   borderRadius?: string;
   spreadWidth?: string;
   spreadSize?: string;
-  trigger?: 'always' | 'mouseenter' | 'click';
+  trigger?: "always" | "mouseenter" | "click";
   center?: boolean;
 }
 
@@ -29,13 +29,13 @@ const props = withDefaults(defineProps<LayRippletProps>(), {
 
 const isActiveRef = ref(false);
 // 波纹宽高
-const spreadSizeRef = ref<string>("0px")
+const spreadSizeRef = ref<string>("0px");
 const ripplesRefEl = ref<HTMLElement | null>(null);
 const waterRipplesContainerRefEl = ref<HTMLElement | null>(null);
 
 const isOut = computed(() => {
-  return props.type === "out"
+  return props.type === "out";
-})
+});
 
 const rippleX = ref<string | number | undefined>(undefined);
 const rippleY = ref<string | number | undefined>(undefined);
@@ -45,17 +45,17 @@ const onActive = function (event: Event) {
 
   // 跟随鼠标点击
   if (props.type === "inset" && !props.spreadSize && !props.center) {
-    const el = event.currentTarget
+    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';
+    rippleX.value = rippleOffsetLeft + "px";
-    rippleY.value = rippleOffsetTop + 'px';
+    rippleY.value = rippleOffsetTop + "px";
-    spreadSizeRef.value = Math.sqrt(sizeX ** 2 + sizeY ** 2) * 2 + 'px'
+    spreadSizeRef.value = Math.sqrt(sizeX ** 2 + sizeY ** 2) * 2 + "px";
-  }
   }
+};
 
 const initWidth = function () {
   let container = waterRipplesContainerRefEl.value;
@@ -66,40 +66,54 @@ const initWidth = function () {
   } else {
     container.style.overflow = "hidden";
     if (!props.spreadSize || props.center) {
-      spreadSizeRef.value = container.clientWidth * 1.1 + "px"
+      spreadSizeRef.value = container.clientWidth * 1.1 + "px";
     } else {
-      spreadSizeRef.value = props.spreadSize
+      spreadSizeRef.value = props.spreadSize;
     }
   }
-  ripples.addEventListener('animationend', () => {
+  ripples.addEventListener(
-    isActiveRef.value = false
+    "animationend",
-  }, false);
+    () => {
-}
+      isActiveRef.value = false;
+    },
+    false
+  );
+};
 
 onMounted(() => {
   initWidth();
-})
+});
 
 watch(
   () => props.trigger,
-  (val) => isActiveRef.value = (val === 'always'),
+  (val) => (isActiveRef.value = val === "always"),
   { immediate: true }
-)
+);
-
-
 </script>
 
 <template>
-  <div class="layui-water-ripples-container" ref="waterRipplesContainerRefEl" @[trigger]="onActive">
+  <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-always--out':
-        'layui-animate-once--out': isActiveRef && (trigger == 'mouseenter' || trigger == 'click') && type == 'out',
+          isActiveRef && trigger == 'always' && type == 'out',
-        'layui-animate-always--inset': isActiveRef && trigger == 'always' && type == 'inset',
+        'layui-animate-once--out':
-        'layui-animate-once--inset': isActiveRef && (trigger == 'mouseenter' || trigger == 'click') && type == 'inset',
+          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%',

package/component/src/component/slider/sliderVerify.vue

@@ -1,22 +1,29 @@
 <template>
   <div id="sliderVerify" class="slider-item">
     <div class="slider-bg layui-bg-green"></div>
-        <div class="slider-text">{{ prototype.isOk == false ? prototype.text : prototype.success}}</div>
+    <div class="slider-text">
-        <div :class="prototype.isOk == false ? 'slider-btn layui-icon layui-icon-next' : 'slider-btn layui-icon layui-icon-ok-circle slider-btn-success'"
+      {{ prototype.isOk == false ? prototype.text : prototype.success }}
-            @mousedown.stop="down"></div>
+    </div>
-
+    <div
+      :class="
+        prototype.isOk == false
+          ? 'slider-btn layui-icon layui-icon-next'
+          : 'slider-btn layui-icon layui-icon-ok-circle slider-btn-success'
+      "
+      @mousedown.stop="down"
+    ></div>
   </div>
 </template>
-<script setup lang='ts'>
+<script setup lang="ts">
-import { reactive, ref, defineProps } from 'vue'
+import { reactive, ref, defineProps } from "vue";
 import { on, off } from "evtd";
 import { throttle, handle_select } from "./utils/index";
 interface Prop {
   disabled?: boolean;
-    bg?: string,
+  bg?: string;
-    text?: string,
+  text?: string;
-    end?: string,
+  end?: string;
-    success?: Function
+  success?: Function;
 }
 
 const props = withDefaults(defineProps<Prop>(), {
@@ -27,12 +34,11 @@ const props = withDefaults(defineProps<Prop>(), {
 const prototype = reactive({
   isOk: false,
   bg: props.bg, //默认滑块颜色
-    text: props.text ? props.text : '请拖动滑块验证',
+  text: props.text ? props.text : "请拖动滑块验证",
-    success: props.end ? props.end : '验证通过',
+  success: props.end ? props.end : "验证通过",
-    ok: props.success
+  ok: props.success,
 });
 
-
 //是否为移动端
 /*  prototype.isMobile = function () {
    return (
@@ -45,14 +51,14 @@ const prototype = reactive({
  }; */
 
 const moveAction = throttle(move);
-let distance
+let distance;
-let downX
+let downX;
 
 //按下
 const down = function (e) {
-    e = e || window.event
+  e = e || window.event;
-    console.log(e.path)
+  console.log(e.path);
-    distance = e.path[1].offsetWidth - e.path[0].offsetWidth
+  distance = e.path[1].offsetWidth - e.path[0].offsetWidth;
   //按下的坐标
   downX = e.clientX;
   on("selectstart", window, handle_select, { once: true });
@@ -60,11 +66,9 @@ const down = function (e) {
   on("mousemove", window, moveAction);
 };
 
-
-
 //移动
 function move(e) {
-    e = e || window.event
+  e = e || window.event;
   let moveX = e.clientX;
   //鼠标水平位置的偏移量（鼠标移动时的位置 - 鼠标按下时的位置）
   let offsetX = moveX - downX;
@@ -73,16 +77,15 @@ function move(e) {
     e.path[1].childNodes[0].style.width = offsetX + "px";
     //鼠标的水平移动距离 >= 滑动成功的宽度
     if (offsetX >= distance) {
-            prototype.isOk = true
+      prototype.isOk = true;
       //成功后，清除掉鼠标按下事件和移动事件（因为移动时并不会涉及到鼠标松开事件）
       off("mousedown", window, down);
       off("mousemove", window, moveAction);
       //最后调用回调
-            if (prototype.ok) prototype.ok()
+      if (prototype.ok) prototype.ok();
+    }
   }
 }
-
-};
 
 //放开
 const stop = function (e) {
@@ -114,7 +117,7 @@ const stop = function (e) {
   position: absolute;
   width: 40px;
   height: 100%;
-    z-index: 100
+  z-index: 100;
 }
 
 .slider-btn {
@@ -128,16 +131,14 @@ const stop = function (e) {
   user-select: none;
   color: #666;
   z-index: 120;
-
 }
 
 .slider-btn:hover {
-
+  cursor: pointer;
-    cursor: pointer
 }
 
 .slider-btn-success {
-    font-size: 22px
+  font-size: 22px;
 }
 
 .slider-text {
@@ -148,7 +149,7 @@ const stop = function (e) {
   user-select: none;
   font-size: 14px;
   color: #fff;
-    z-index: 120
+  z-index: 120;
 }
 
 .slider-error {
@@ -157,11 +158,11 @@ const stop = function (e) {
 
 @keyframes glow {
   0% {
-        border-color: #e6e6e6
+    border-color: #e6e6e6;
   }
 
   100% {
-        border-color: #ff5722
+    border-color: #ff5722;
   }
 }
 </style>

package/document/src/router/zh-CN.ts

@@ -385,14 +385,12 @@ const zhCN = [
           },
           {
             path: "/zh-CN/components/ripple",
-            component: () =>
+            component: () => import("../document/zh-CN/components/ripple.md"),
-              import("../document/zh-CN/components/ripple.md"),
             meta: { title: "水波纹" },
           },
           {
             path: "/zh-CN/components/area",
-            component: () =>
+            component: () => import("../document/zh-CN/components/area.md"),
-              import("../document/zh-CN/components/area.md"),
             meta: { title: "地址选择器" },
           },
         ],