Merge branch 'next' into doc-demand

README.zh.md

@@ -0,0 +1,79 @@
+## 介绍
+
+<p>  
+  <a href="https://www.npmjs.com/package/@layui/layui-vue"><img src="https://img.shields.io/npm/v/@layui/layui-vue.svg?sanitize=true" alt="Version"></a>
+  <a href="https://www.npmjs.com/package/@layui/layui-vue"><img src="https://img.shields.io/npm/l/@layui/layui-vue.svg?sanitize=true" alt="License"></a>
+  <a href="https://travis-ci.org/sentsin/layui"><img alt="Build Status" src="https://img.shields.io/travis/sentsin/layui/master.svg"></a>
+  <a href="https://coveralls.io/r/sentsin/layui?branch=master"><img alt="Test Coverage" src="https://img.shields.io/coveralls/sentsin/layui/master.svg"></a>
+</p>  
+
+**[🔶 www.layui-vue.com »](http://www.layui-vue.com)**
+
+layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.
+
+**Run with code Sandbox.**
+
+[![Edit layui-vue](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/11mvy)
+
+## 功能
+
+你可以用layui vue做的一些事情：
+
+* 使用 setup script 编写组件
+* 多达 60 个高品质组件
+* 提供 Axure 设计资源
+* 支持 夜间模式
+* 支持 多主题
+* 支持 国际化
+
+## 开始使用
+
+使用 npm 安装
+
+```bash
+npm i @layui/layui-vue
+```
+使用前需要将layui vue挂载到vue并引入index.css样式文件
+
+```
+import App from './App.vue'
+import { createApp } from 'vue'
+import layui from '@layui/layui-vue'
+import '@layui/layui-vue/lib/index.css'
+
+createApp(App).use(layui).mount('#app')
+```
+
+我们在[网站](http://layui-vue.pearadmin.com)上有几个例子。这是第一个让您入门的方法：
+
+```
+<template>
+  <lay-button-container>
+    <lay-button>Hello Word</lay-button>
+  </lay-button-container>
+</template>
+```
+
+## 反馈
+
+欢迎在[提交问题](https://github.com/layui-vue/layui-vue/issues/new)上向我们反馈。欢迎功能请求。如果您想贡献，请查看[快速指南](./CONTRIBUTING.md)！
+
+如果您有什么想聊的，请随时加入我们的[Gitter chat](https://gitter.im/layui-vue/community)！
+
+## 构建过程
+
+- `build` 打包组件库
+
+请看一下[贡献指南](./CONTRIBUTING.md)，以获得关于如何构建应用程序的详细过程以及排除故障的信息。
+
+## 贡献者
+
+这个项目遵循[所有贡献者](https://github.com/layui-vue/layui-vue/graphs/contributors)规范，感谢这些[出色的贡献者](https://github.com/layui-vue/layui-vue/graphs/contributors)。
+
+<a href="https://github.com/layui-vue/layui-vue/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=layui-vue/layui-vue" />
+</a>
+
+## 开源许可
+
+Layui vue是基于[MIT协议](https://opensource.org/licenses/MIT)提供。

package/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "1.0.5-alpha.1",
+  "version": "1.0.6",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",
@@ -32,7 +32,7 @@
   "dependencies": {
     "@layui/icons-vue": "^1.0.8",
     "@layui/layer-vue": "^1.3.13",
-    "@vueuse/core": "^8.3.0",
+    "@vueuse/core": "^8.3.1",
     "animate.css": "^4.1.1",
     "async-validator": "^4.0.7",
     "cropperjs": "^1.5.12",
@@ -40,7 +40,7 @@
     "dayjs": "^1.11.0",
     "evtd": "^0.2.3",
     "uuid": "^8.3.2",
-    "vue-i18n": "^9.2.0-beta.34"
+    "vue-i18n": "^9.1.9"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",

package/component/src/component/scroll/index.less

@@ -1,44 +1,34 @@
-.scrollbar-box {
+.layui-scroll {
   height: 100%;
   overflow: hidden !important;
 }
 
-.scrollbar-y {
+.layui-scroll-y {
   position: relative;
   height: 100%;
-  .scroll-wrap {
+
+  .layui-scroll-wrap {
     height: 100%;
     overflow-y: scroll;
-    scrollbar-width: none; /* firefox */
+    scrollbar-width: none;
     -ms-overflow-style: none;
   }
 
-  .scrollbar-track {
+  .layui-scroll-track {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     border-radius: 8px;
     z-index: 20;
-    .scrollbar-thumb {
+    .layui-scroll-thumb {
       margin: 0 auto;
       border-radius: 6px;
       cursor: default;
     }
   }
 }
-.scrollbar-y ::-webkit-scrollbar {
+
+.layui-scroll-y ::-webkit-scrollbar {
   display: none;
-}
+}
-//移动端隐藏自定义滚动条
-.hide.scrollbar-box .scrollbar-track {
-  display: none;
-}
-//移动端显示原生滑块
-.hide.scrollbar-box .scrollbar-y ::-webkit-scrollbar {
-  display: block;
-}
-.hide.scrollbar-box .scrollbar-y .scroll-wrap {
-  scrollbar-width: auto;
-  -ms-overflow-style: scrollbar;
-}

package/component/src/component/scroll/index.vue

@@ -1,32 +1,28 @@
 <template>
   <div
-    class="scrollbar-box"
+    class="layui-scroll"
-    :class="{ hide: winWidth < 500 }"
+    :class="{ hide: data.winWidth < 500 }"
     :style="{ height: height }"
   >
-    <div class="scrollbar-y">
+    <div class="layui-scroll-y">
-      <div ref="scrollRef" class="scroll-wrap" @scroll="onMosewheel">
+      <div ref="scrollRef" class="layui-scroll-wrap" @scroll="onMosewheel">
         <slot></slot>
       </div>
       <div
         ref="barRef"
-        class="scrollbar-track"
+        class="layui-scroll-track"
         :style="{
-          backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : slotColor,
+          backgroundColor: data.heightPre == 1 ? 'rgba(0,0,0,0)' : trackColor,
         }"
       >
-        <!--
-        没有滑块方式，背景色透明：使用v-show窗口变大，滑块不出现，所以使用背景色控制
-        backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : scrollColor,
-       -->
         <div
           :style="{
-            height: barHeight + 'px',
+            height: data.barHeight + 'px',
-            width: scrollWidth + 'px',
+            width: thumbWidth + 'px',
-            transform: 'translateY(' + translateY + 'px)',
+            transform: 'translateY(' + data.translateY + 'px)',
-            backgroundColor: heightPre == 1 ? 'rgba(0,0,0,0)' : scrollColor,
+            backgroundColor: data.heightPre == 1 ? 'rgba(0,0,0,0)' : thumbColor,
           }"
-          class="scrollbar-thumb"
+          class="layui-scroll-thumb"
           @mousedown.stop.prevent="moveStart"
         ></div>
       </div>
@@ -34,202 +30,199 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
-import "./index.less";
+export default {
-import {
-  defineComponent,
-  toRefs,
-  onMounted,
-  nextTick,
-  reactive,
-  onUnmounted,
-} from "vue";
-export default defineComponent({
   name: "LayScroll",
-  props: {
+};
-    height: {
+</script>
-      type: String,
+
-      default: "100%",
+<script lang="ts" setup>
-    },
+import "./index.less";
-    slotColor: {
+import { toRefs, onMounted, nextTick, reactive, onUnmounted, ref } from "vue";
-      //滑块槽颜色 :slotColor="'red'"
+
-      type: String,
+export interface LayScrollProps {
-      default: "rgba(0,0,0,0)",
+  height?: string;
-    },
+  trackColor?: string;
-    scrollColor: {
+  thumbColor?: string;
-      //滑块颜色  :scrollColor="'red'"
+  thumbWidth?: number;
-      type: String,
+}
-      default: "#eeeeee",
+
-    },
+const props = withDefaults(defineProps<LayScrollProps>(), {
-    scrollWidth: {
+  height: "100%",
-      //滑块宽度 :scrollWidth="7"
+  trackColor: "rgba(0,0,0,0)",
-      type: Number,
+  thumbColor: "#eeeeee",
-      default: 6,
+  thumbWidth: 6,
-    },
+});
-  },
+
-  setup(props, ctx) {
+const emit = defineEmits(["arrive"]);
-    const data = reactive({
+
-      scrollRef: null, // 内容盒子
+const scrollRef = ref<HTMLElement | null>(null);
-      barRef: null, // 滚动条轨道
+const barRef = ref<HTMLElement | null>(null);
-      translateY: 0, // 滚动块平移的距离
+
-      heightPre: 0, // 可视高度和内容高度比
+const data = reactive({
-      barHeight: 0, // 滑块高度
+  translateY: 0, // 滚动块平移的距离
-      winWidth: document.body.clientWidth, //初始化浏览器页面宽度
+  heightPre: 0, // 可视高度和内容高度比
-    });
+  barHeight: 0, // 滑块高度
-    let time = null; // 定时器
+  winWidth: document.body.clientWidth, //初始化浏览器页面宽度
-    let isMove = false; // 判断鼠标是否点击滑块（为松开）
+});
-    let moveClientY = 0; // 鼠标点击滑块时，相对滑块的位置
+
-    let trackHeight = 0; // 滚动条轨道高度
+let time = null; // 定时器
-    let wrapHeight = 0; // 容器高度（可视高度）
+let isMove = false; // 判断鼠标是否点击滑块（为松开）
-    let wrapContentHeight = 0; // 内容高度（可滚动内容的高度）
+let moveClientY = 0; // 鼠标点击滑块时，相对滑块的位置
-
+let trackHeight = 0; // 滚动条轨道高度
-    // 页面挂载后计算滚动条
+let wrapHeight = 0; // 容器高度（可视高度）
-    onMounted(() => {
+let wrapContentHeight = 0; // 内容高度（可滚动内容的高度）
-      monitorWindow(); //监听窗口尺寸
+
-      monitorScrollBar(); //监听内容元素尺寸
+// 页面挂载后计算滚动条
-      nextTick(() => {
+onMounted(() => {
-        //dom渲染后
+  monitorWindow(); //监听窗口尺寸
-        calculationLength(); //初始化延迟更新滚动条
+  monitorScrollBar(); //监听内容元素尺寸
-      });
+  nextTick(() => {
-    });
+    //dom渲染后
-    // 页面卸载清除定时器
+    calculationLength(); //初始化延迟更新滚动条
-    onUnmounted(() => {
+  });
-      window.clearInterval(time);
+});
-      time = null;
+
-    });
+// 页面卸载清除定时器
-    // 监听页面尺寸改变计算滚动条
+onUnmounted(() => {
-    const monitorWindow = function () {
+  window.clearInterval(time);
-      let time; //定时器，防抖，窗口持续变化，延迟更新滚动条
+  time = null;
-      window.addEventListener("resize", () => {
+});
-        data.winWidth = document.body.clientWidth; //页面改变监听宽度控制移动端隐藏滚动条
+
-        clearTimeout(time);
+// 监听页面尺寸改变计算滚动条
-        time = setTimeout(() => {
+const monitorWindow = function () {
-          //页面宽度变化继续监听，如果小于500就关闭自定义滚动条
+  let time; //定时器，防抖，窗口持续变化，延迟更新滚动条
-          // console.log("浏览器窗口变化更新滚动条");
+  window.addEventListener("resize", () => {
-          initScrollListner();
+    data.winWidth = document.body.clientWidth; //页面改变监听宽度控制移动端隐藏滚动条
-        }, 500);
+    clearTimeout(time);
-      });
+    time = setTimeout(() => {
-    };
+      //页面宽度变化继续监听，如果小于500就关闭自定义滚动条
-
+      // console.log("浏览器窗口变化更新滚动条");
-    //监听内容元素尺寸变化
+      initScrollListner();
-    const monitorScrollBar = function () {
+    }, 500);
-      var monitorUl = data.scrollRef.children[0];
+  });
-      // var monitorDiv= document;    // 监听document
+};
-      let MutationObserver =
+
-        window.MutationObserver ||
+//监听内容元素尺寸变化
-        window.WebKitMutationObserver ||
+const monitorScrollBar = function () {
-        window.MozMutationObserver;
+  var monitorUl = scrollRef.value.children[0];
-      let observer = new MutationObserver(function (mutations) {
+  // var monitorDiv= document;    // 监听document
-        // console.log("内容元素变化更新滚动条");
+  let MutationObserver =
-        initScrollListner();
+    window.MutationObserver ||
-      });
+    // @ts-ignore
-
+    window.WebKitMutationObserver ||
-      // childList  观察子节点变动
+    // @ts-ignore
-      // 监听子节点增加或者内容撑起的尺寸
+    window.MozMutationObserver;
-      observer.observe(monitorUl, {
+  let observer = new MutationObserver(function (mutations) {
-        attributes: true,
+    // console.log("内容元素变化更新滚动条");
-        childList: true,
+    initScrollListner();
-      });
+  });
-    };
+
-
+  // 监听子节点增加或者内容撑起的尺寸
-    // 初始化延迟监听滚动条
+  observer.observe(monitorUl, {
-    const calculationLength = function () {
+    attributes: true,
-      // 直接执行initScrollListner函数，获取滚动条长度部准确
+    childList: true,
-      // 因为页面渲染有延迟，获取dom元素需要延迟
+  });
-      // 每间隔10毫秒更新滑块长度
+};
-      time = setInterval(() => {
+
-        // 计算滚动条长度
+// 初始化延迟监听滚动条
-        initScrollListner();
+const calculationLength = function () {
-      }, 50);
+  // 直接执行initScrollListner函数，获取滚动条长度部准确
-      // 间隔500毫秒清除定时器，滑块缩短会有动画效果，时间可延长没有影响
+  // 因为页面渲染有延迟，获取dom元素需要延迟
-      setTimeout(() => {
+  // 每间隔10毫秒更新滑块长度
-        window.clearInterval(time);
+  time = setInterval(() => {
-        time = null;
+    // 计算滚动条长度
-      }, 2000);
+    initScrollListner();
-    };
+  }, 50);
-    // 计算滚动条高度
+  // 间隔500毫秒清除定时器，滑块缩短会有动画效果，时间可延长没有影响
-    const initScrollListner = function () {
+  setTimeout(() => {
-      let scroll = data.scrollRef;
+    window.clearInterval(time);
-      let bar = data.barRef;
+    time = null;
-      // scroll有时候拿不到元素，要判断一下
+  }, 2000);
-      if (scroll) {
+};
-        wrapContentHeight = scroll.scrollHeight;
+
-        wrapHeight = scroll.clientHeight;
+// 计算滚动条高度
-        trackHeight = bar.clientHeight;
+const initScrollListner = function () {
-        // console.log(wrapContentHeight ,wrapHeight);
+  let scroll = scrollRef.value;
-        // 容器高度 / 内容高度   100 150
+  let bar = barRef.value;
-        data.heightPre = wrapHeight / wrapContentHeight;
+  // scroll有时候拿不到元素，要判断一下
-        // 滑动块的高度 根据 容器和内容的比  乘以 滚动轨道 计算出 滑动块的高度
+  if (scroll) {
-        data.barHeight = data.heightPre * trackHeight;
+    wrapContentHeight = scroll.scrollHeight;
-      }
+    wrapHeight = scroll.clientHeight;
-    };
+    trackHeight = bar.clientHeight;
-    // 内容滚动时，计算滑块移动的距离
+    // console.log(wrapContentHeight ,wrapHeight);
-    const onMosewheel = function (e) {
+    // 容器高度 / 内容高度   100 150
-      // scrollTop页面顶部滚出的高度
+    data.heightPre = wrapHeight / wrapContentHeight;
-      // offsetHeight页面可视区域高度
+    // 滑动块的高度 根据 容器和内容的比  乘以 滚动轨道 计算出 滑动块的高度
-      // scrollHeight页面正文全文高度
+    data.barHeight = data.heightPre * trackHeight;
-      // data.translateY滚动块平移的距离
+  }
-      data.translateY = e.target.scrollTop * data.heightPre;
+};
-      if (data.translateY == 0) {
+
-        // 到达顶部
+// 内容滚动时，计算滑块移动的距离
-        arrive("top");
+const onMosewheel = function (e) {
-      } else if (
+  // scrollTop页面顶部滚出的高度
-        e.target.scrollTop + e.target.offsetHeight ==
+  // offsetHeight页面可视区域高度
-        e.target.scrollHeight
+  // scrollHeight页面正文全文高度
-      ) {
+  // data.translateY滚动块平移的距离
-        // 滚出高度 + 可视区域高度 == 内容高度
+  data.translateY = e.target.scrollTop * data.heightPre;
-        arrive("bottom");
+  if (data.translateY == 0) {
-      }
+    // 到达顶部
-    };
+    arrive("top");
-    // 到达顶部或者底部通知父级元素
+  } else if (
-    const arrive = function name(tb) {
+    e.target.scrollTop + e.target.offsetHeight ==
-      ctx.emit("arrive", tb);
+    e.target.scrollHeight
-    };
+  ) {
-    // 鼠标点击滑块时
+    // 滚出高度 + 可视区域高度 == 内容高度
-    const moveStart = function (e) {
+    arrive("bottom");
-      isMove = true;
+  }
-      // clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置
+};
-      // data.translateY 滚动块平移的距离
+
-      // moveClientY 鼠标点击滑块时，相对滑块的位置
+// 到达顶部或者底部通知父级元素
-      moveClientY = e.clientY - data.translateY;
+const arrive = function name(tb) {
-      moveTo(); //移动时
+  emit("arrive", tb);
-      moveEnd(); //鼠标松开时
+};
-    };
+
-    // 鼠标移动，改变thumb的位置以及容器scrollTop的位置
+// 鼠标点击滑块时
-    const moveTo = function () {
+const moveStart = function (e) {
-      document.onmousemove = (e) => {
+  isMove = true;
-        // 移动时候判断是不是松开，松开就不在执行滑块移动操作
+  // clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置
-        if (isMove) {
+  // data.translateY 滚动块平移的距离
-          // 移动滑块时，判断时候到达顶部或者底部
+  // moveClientY 鼠标点击滑块时，相对滑块的位置
-          if (e.clientY - moveClientY > trackHeight - data.barHeight) {
+  moveClientY = e.clientY - data.translateY;
-            // 滑块到达  底部  就不在改变滑块translateY值
+  moveTo(); //移动时
-            data.translateY = trackHeight - data.barHeight;
+  moveEnd(); //鼠标松开时
-          } else if (e.clientY - moveClientY < 0) {
+};
-            // 滑块到达  顶部  就不在改变滑块translateY值
+
-            data.translateY = 0;
+// 鼠标移动，改变thumb的位置以及容器scrollTop的位置
-          } else {
+const moveTo = function () {
-            //改变滑块位置
+  document.onmousemove = (e) => {
-            data.translateY = e.clientY - moveClientY;
+    // 移动时候判断是不是松开，松开就不在执行滑块移动操作
-          }
+    if (isMove) {
-          // 计算出内容盒子滚出顶部的距离
+      // 移动滑块时，判断时候到达顶部或者底部
-          data.scrollRef.scrollTop = data.translateY / data.heightPre;
+      if (e.clientY - moveClientY > trackHeight - data.barHeight) {
-        }
+        // 滑块到达  底部  就不在改变滑块translateY值
-      };
+        data.translateY = trackHeight - data.barHeight;
-    };
+      } else if (e.clientY - moveClientY < 0) {
-    // 鼠标从滑块松开时，不在监听滑块移动操作
+        // 滑块到达  顶部  就不在改变滑块translateY值
-    const moveEnd = function () {
+        data.translateY = 0;
-      document.onmouseup = (e) => {
+      } else {
-        if (isMove) {
+        //改变滑块位置
-          isMove = false;
+        data.translateY = e.clientY - moveClientY;
-        }
+      }
-      };
+      // 计算出内容盒子滚出顶部的距离
-    };
+      scrollRef.value.scrollTop = data.translateY / data.heightPre;
-
+    }
-    return {
+  };
-      ...toRefs(data),
+};
-      onMosewheel,
+
-      moveStart,
+// 鼠标从滑块松开时，不在监听滑块移动操作
-    };
+const moveEnd = function () {
-  },
+  document.onmouseup = (e) => {
-});
+    if (isMove) {
+      isMove = false;
+    }
+  };
+};
+
+let dataRef = toRefs(data);
 </script>

package/component/src/component/slider/Standard.vue

@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+  name: "StandardVue",
+};
+</script>
+
 <script setup lang="ts">
 import { Ref, ref } from "vue";
 import { on, off } from "evtd";
@@ -11,6 +17,7 @@ interface Prop {
   min?: number;
   max?: number;
 }
+
 const props = withDefaults(defineProps<Prop>(), {
   disabled: false,
   val: 0,

package/component/src/component/slider/StandardRange.vue

@@ -1,8 +1,15 @@
+<script lang="ts">
+export default {
+  name: "StandardRange",
+};
+</script>
+
 <script setup lang="ts">
 import { ref, toRef, Ref } from "vue";
 import { on, off } from "evtd";
 import { throttle } from "./utils/index";
 import LayTooltip from "../tooltip/index.vue";
+
 interface Prop {
   rangeValue: Array<number>;
   disabled?: boolean;
@@ -17,6 +24,7 @@ const props = withDefaults(defineProps<Prop>(), {
   max: 100,
   disabled: false,
 });
+
 let rv = toRef(props, "rangeValue");
 
 const moveAction = throttle(rangeMove);

package/component/src/component/slider/Vertical.vue

@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+  name: "Vertical",
+};
+</script>
+
 <script setup lang="ts">
 import { Ref, ref } from "vue";
 import { on, off } from "evtd";
@@ -11,6 +17,7 @@ interface Prop {
   min?: number;
   max?: number;
 }
+
 const props = withDefaults(defineProps<Prop>(), {
   disabled: true,
   val: 0,

package/component/src/component/slider/VerticalRange.vue

@@ -1,8 +1,15 @@
+<script lang="ts">
+export default {
+  name: "VerticalRange",
+};
+</script>
+
 <script setup lang="ts">
 import { ref, toRef, Ref } from "vue";
 import { on, off } from "evtd";
 import { throttle } from "./utils/index";
 import LayTooltip from "../tooltip/index.vue";
+
 interface Prop {
   rangeValue: Array<number>;
   disabled?: boolean;

package/component/src/component/slider/index.less

@@ -17,7 +17,7 @@
 .layui-slider-btn-v {
   width: 12px;
   height: 12px;
-  background-color: var(--global-back-color);
+  background-color: white;
   position: absolute;
   border: 2px solid var(--global-primary-color);
   border-radius: 50%;
@@ -73,7 +73,7 @@
 .layui-slider-vertical-btn {
   width: 12px;
   height: 12px;
-  background-color: var(--global-back-color);
+  background-color: white;
   position: absolute;
   border: 2px solid var(--global-primary-color);
   border-radius: 50%;

package/component/src/component/slider/index.vue

@@ -1,6 +1,12 @@
+<script lang="ts">
+export default {
+  name: "LaySlider",
+};
+</script>
+
 <script setup lang="ts">
-import { Ref, toRef } from "vue";
 import "./index.less";
+import { Ref, toRef } from "vue";
 import StandardVue from "./Standard.vue";
 import StandardRange from "./StandardRange.vue";
 import Vertical from "./Vertical.vue";

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

@@ -1,168 +0,0 @@
-<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="
-        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">
-import { reactive, ref, defineProps } from "vue";
-import { on, off } from "evtd";
-import { throttle, handle_select } from "./utils/index";
-interface Prop {
-  disabled?: boolean;
-  bg?: string;
-  text?: string;
-  end?: string;
-  success?: Function;
-}
-
-const props = withDefaults(defineProps<Prop>(), {
-  disabled: false,
-});
-
-//默认配置
-const prototype = reactive({
-  isOk: false,
-  bg: props.bg, //默认滑块颜色
-  text: props.text ? props.text : "请拖动滑块验证",
-  success: props.end ? props.end : "验证通过",
-  ok: props.success,
-});
-
-//是否为移动端
-/*  prototype.isMobile = function () {
-   return (
-     device.os == "ios" ||
-     device.os == "android" ||
-     device.android ||
-     device.ios ||
-     (device.weixin && typeof device.weixin === Boolean)
-   );
- }; */
-
-const moveAction = throttle(move);
-let distance;
-let downX;
-
-//按下
-const down = function (e) {
-  e = e || window.event;
-  console.log(e.path);
-  distance = e.path[1].offsetWidth - e.path[0].offsetWidth;
-  //按下的坐标
-  downX = e.clientX;
-  on("selectstart", window, handle_select, { once: true });
-  on("mouseup", window, stop);
-  on("mousemove", window, moveAction);
-};
-
-//移动
-function move(e) {
-  e = e || window.event;
-  let moveX = e.clientX;
-  //鼠标水平位置的偏移量（鼠标移动时的位置 - 鼠标按下时的位置）
-  let offsetX = moveX - downX;
-  if (offsetX > 0) {
-    e.path[0].style.left = offsetX + "px";
-    e.path[1].childNodes[0].style.width = offsetX + "px";
-    //鼠标的水平移动距离 >= 滑动成功的宽度
-    if (offsetX >= distance) {
-      prototype.isOk = true;
-      //成功后，清除掉鼠标按下事件和移动事件（因为移动时并不会涉及到鼠标松开事件）
-      off("mousedown", window, down);
-      off("mousemove", window, moveAction);
-      //最后调用回调
-      if (prototype.ok) prototype.ok();
-    }
-  }
-}
-
-//放开
-const stop = function (e) {
-  //鼠标松开，如果滑到了终点，则验证通过
-  if (prototype.isOk === true) {
-    return;
-  } else {
-    e.path[0].style.left = 0;
-    e.path[1].childNodes[0].style.width = 0;
-  }
-
-  //鼠标松开了，不需要拖动就清除鼠标移动和松开事件。
-  off("selectstart", document, handle_select);
-  off("mouseup", window, stop);
-  off("mousemove", window, moveAction);
-};
-</script>
-
-<style scoped>
-.slider-item {
-  height: 38px;
-  line-height: 38px;
-  background-color: #d0d0d0;
-  position: relative;
-  border: 1px solid white;
-}
-
-.slider-bg {
-  position: absolute;
-  width: 40px;
-  height: 100%;
-  z-index: 100;
-}
-
-.slider-btn {
-  width: 40px;
-  height: 96%;
-  position: absolute;
-  border: 1px solid #ccc;
-  cursor: move;
-  text-align: center;
-  background-color: #fff;
-  user-select: none;
-  color: #666;
-  z-index: 120;
-}
-
-.slider-btn:hover {
-  cursor: pointer;
-}
-
-.slider-btn-success {
-  font-size: 22px;
-}
-
-.slider-text {
-  position: absolute;
-  text-align: center;
-  width: 100%;
-  height: 100%;
-  user-select: none;
-  font-size: 14px;
-  color: #fff;
-  z-index: 120;
-}
-
-.slider-error {
-  animation: glow 800ms ease-out infinite alternate;
-}
-
-@keyframes glow {
-  0% {
-    border-color: #e6e6e6;
-  }
-
-  100% {
-    border-color: #ff5722;
-  }
-}
-</style>

package/component/src/component/table/index.vue

@@ -270,12 +270,12 @@ onMounted(() => {
                 </th>
                 <template v-for="column in columns" :key="column">
                   <th
+                    v-if="tableColumnKeys.includes(column.key)"
                     class="layui-table-cell"
                     :style="{
                       textAlign: column.align,
                       flex: column.width ? '0 0 ' + column.width : '1',
                     }"
-                    v-if="tableColumnKeys.includes(column.key)"
                   >
                     <span>
                       <template v-if="column.titleSlot">
@@ -285,10 +285,11 @@ onMounted(() => {
                         {{ column.title }}
                       </template>
                     </span>
+                    <!-- 插槽 -->
                     <span
                       v-if="column.sort"
                       class="layui-table-sort layui-inline"
-                      lay-sort=""
+                      lay-sort
                     >
                       <i
                         @click.stop="sortTable($event, column.key, 'asc')"

package/component/src/theme/public.less

@@ -116,6 +116,11 @@ a:hover {
   color: #777;
 }
 
+a cite {
+  font-style: normal;
+  *cursor: pointer;
+}
+
 .layui-border-box,
 .layui-border-box * {
   box-sizing: border-box;

package/document/src/components/LayAnchor.vue

@@ -10,7 +10,7 @@
         <lay-icon :type="iconType" size="40"> </lay-icon>
       </lay-button>
     </div>
-    <lay-scroll :scrollWidth="0">
+    <lay-scroll :thumbWidth="0">
       <ul>
         <li
           v-for="(anchor, index) in anchorList"

package/document/src/document/zh-CN/components/scroll.md

@@ -40,9 +40,9 @@ export default {
 | 属性        | 描述     | 可选值 |
 | ----------- | -------- | ------ |
 | height      |   高度   | --     |
-| scrollWidth |   滑块宽度   | --     |
+| thumbWidth |   滑块宽度   | --     |
-| scrollColor |   滑块颜色   | --     |
+| thumbColor |   滑块颜色   | --     |
-| slotColor   |   滑槽颜色   | --     |
+| trackColor   |   滑槽颜色   | --     |
 
 :::
 

package/document/src/document/zh-CN/components/table.md

@@ -167,7 +167,6 @@ export default {
 
 :::
 
-
 ::: title 开启排序
 :::
 
@@ -311,15 +310,15 @@ export default {
 
 ::: table
 
-| 属性                 | 描述                          | 类型 | 默认值 | 可选值         |
+| 属性                 | 描述                          | 类型      | 默认值  | 可选值         |
-| -------------------- | ----------------------------- | ---- | ------ | -------------- |
+| -------------------- | ----------------------------- | --------- | ------- | -------------- |
-| columns              | 列配置 - [更多](#tableColumn) | --   | --     | --             |
+| columns              | 列配置 - [更多](#tableColumn) | --        | --      | --             |
-| dataSource           | 数据源                        | --   | --     | --             |
+| dataSource           | 数据源                        | --        | --      | --             |
-| checkbox             | 开启复选框                    | `boolean`   | `false`     | `true` `false`             |
+| checkbox             | 开启复选框                    | `boolean` | `false` | `true` `false` |
-| id                   | 主键                          | `string`   | --     | --             |
+| id                   | 主键                          | `string`  | --      | --             |
-| v-model:selectedKeys | 选中项                        | --   | --     | --             |
+| v-model:selectedKeys | 选中项                        | --        | --      | --             |
-| default-toolbar      | 工具栏                        | `boolean`   | `false`     | `true` `false` |
+| default-toolbar      | 工具栏                        | `boolean` | `false` | `true` `false` |
-| size                 | 尺寸                          | `string`   | `md`     | `lg` `md` `sm` |
+| size                 | 尺寸                          | `string`  | `md`    | `lg` `md` `sm` |
 
 :::
 
@@ -353,18 +352,17 @@ export default {
 
 ::: table
 
-| 插槽       | 描述       | 类型 | 默认值 | 可选值 |
+| 插槽       | 描述       | 类型     | 默认值 | 可选值                  |
-| ---------- | ---------- | ---- |---- |---- |
+| ---------- | ---------- | -------- | ------ | ----------------------- |
-| title      | 列标题     | --   |--   |--   |
+| title      | 列标题     | --       | --     | --                      |
-| key        | 数据字段   | --   |--   |--   |
+| key        | 数据字段   | --       | --     | --                      |
-| customSlot | 自定义插槽 | --   |--   |--   |
+| customSlot | 自定义插槽 | --       | --     | --                      |
-| width      | 宽度       | --   |--   |--   |
+| width      | 宽度       | --       | --     | --                      |
-| sort       | 排序       | --   |--   |--   |
+| sort       | 排序       | --       | --     | --                      |
-| titleSlot  | 标题插槽   | --   |--   |--   |
+| titleSlot  | 标题插槽   | --       | --     | --                      |
-| align      | 对齐方式   | `string` | `left` | `left` `right` `center`   |
+| align      | 对齐方式   | `string` | `left` | `left` `right` `center` |
+
 :::
 
- 
-
 ::: previousNext table
-:::
+:::

package/document/src/document/zh-CN/guide/changelog.md

@@ -12,7 +12,38 @@
 <lay-timeline>
   <lay-timeline-item title="1.0.x">
     <ul> 
-      <a name="1-0-4"> </a> 
+      <a name="1-0-6"></a> 
+      <li> 
+        <h3>1.0.6 <span class="layui-badge-rim">2022-05-02</span></h3> 
+        <ul>
+          <li>[修复] scroll 组件 height 属性必填警告。</li>
+          <li>[修复] scroll 组件 slotColor 属性必填警告。</li>
+          <li>[修复] scroll 组件 scrollColor 属性必填警告。</li>
+          <li>[修复] scroll 组件 scrollWidth 属性必填警告。</li>
+          <li>[修正] scroll 组件 slotColor 属性为 thackColor。</li>
+          <li>[修正] scroll 组件 scrollColor 属性为 thumbColor。</li>
+          <li>[修正] scroll 组件 scrollWidth 属性为 thumbWidth。</li>
+          <li>[升级] vueuse/core 8.3.1。</li>
+          <li>[升级] vue-i18n 9.1.9。</li>
+        </ul> 
+      </li>
+    </ul>
+    <ul> 
+      <a name="1-0-5"></a> 
+      <li> 
+        <h3>1.0.5 <span class="layui-badge-rim">2022-05-01</span></h3> 
+        <ul>
+          <li>[新增] dropdown 组件 context-menu 属性。</li>
+          <li>[修复] layer 组件 tooltip 组件 index 层级冲突。</li>
+          <li>[修复] table 组件 columns 宽度超出 table-box 错位。</li>
+          <li>[修复] table 组件 selected-keys 属性 deep 监听。</li>
+          <li>[修复] slider 组件 btn 背景色。</li>
+          <li>[修复] upload 组件 url 失效。</li>
+        </ul> 
+      </li>
+    </ul>
+    <ul> 
+      <a name="1-0-4"></a> 
       <li> 
         <h3>1.0.4 <span class="layui-badge-rim">2022-04-21</span></h3> 
         <ul>
@@ -33,7 +64,7 @@
       </li>
     </ul>
     <ul> 
-      <a name="1-0-3"> </a> 
+      <a name="1-0-3"></a> 
       <li> 
         <h3>1.0.3 <span class="layui-badge-rim">2022-04-17</span></h3> 
         <ul>
@@ -69,7 +100,7 @@
       </li>
     </ul>
     <ul> 
-      <a name="1-0-1"> </a> 
+      <a name="1-0-1"></a> 
       <li> 
         <h3>1.0.1 <span class="layui-badge-rim">2022-04-06</span></h3> 
         <ul>

package/document/src/view/index.vue

@@ -43,7 +43,7 @@
             rel="nofollow"
             class="site-star"
           >
-            <i class="layui-icon"></i> Star <cite id="getStars">746</cite>
+            <i class="layui-icon"></i> Star <cite id="getStars">863</cite>
           </a>
           <a
             href="https://gitee.com/layui-vue"

pnpm-lock.yaml

@@ -55,7 +55,7 @@ importers:
       '@vitejs/plugin-vue': ^2.3.1
       '@vue/compiler-sfc': ^3.2.33
       '@vue/server-renderer': ^3.2.33
-      '@vueuse/core': ^8.3.0
+      '@vueuse/core': ^8.3.1
       animate.css: ^4.1.1
       async-validator: ^4.0.7
       cropperjs: ^1.5.12
@@ -68,11 +68,11 @@ importers:
       typescript: ^4.6.3
       uuid: ^8.3.2
       vite: 2.9.2
-      vue-i18n: ^9.2.0-beta.34
+      vue-i18n: ^9.1.9
     dependencies:
       '@layui/icons-vue': link:../icons
       '@layui/layer-vue': link:../layer
-      '@vueuse/core': 8.3.0_vue@3.2.33
+      '@vueuse/core': 8.3.1_vue@3.2.33
       animate.css: 4.1.1
       async-validator: 4.0.7
       cropperjs: 1.5.12
@@ -80,7 +80,7 @@ importers:
       dayjs: 1.11.0
       evtd: 0.2.3
       uuid: 8.3.2
-      vue-i18n: 9.2.0-beta.34_vue@3.2.33
+      vue-i18n: 9.1.9_vue@3.2.33
     devDependencies:
       '@babel/core': 7.17.9
       '@babel/preset-env': 7.16.11_@babel+core@7.17.9
@@ -2554,6 +2554,18 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
+  /@intlify/core-base/9.1.9:
+    resolution: {integrity: sha512-x5T0p/Ja0S8hs5xs+ImKyYckVkL4CzcEXykVYYV6rcbXxJTe2o58IquSqX9bdncVKbRZP7GlBU1EcRaQEEJ+vw==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@intlify/devtools-if': 9.1.9
+      '@intlify/message-compiler': 9.1.9
+      '@intlify/message-resolver': 9.1.9
+      '@intlify/runtime': 9.1.9
+      '@intlify/shared': 9.1.9
+      '@intlify/vue-devtools': 9.1.9
+    dev: false
+
   /@intlify/core-base/9.2.0-beta.34:
     resolution: {integrity: sha512-MwWvL7GMpFeYBfFOU2fDj8V+kodtoGv3ZjK0qxnQtJ6oWtmv2ldqRuIu1NxPSmykYYg4iljrG174EzZnQkIcqA==}
     engines: {node: '>= 12'}
@@ -2564,6 +2576,13 @@ packages:
       '@intlify/vue-devtools': 9.2.0-beta.34
     dev: false
 
+  /@intlify/devtools-if/9.1.9:
+    resolution: {integrity: sha512-oKSMKjttG3Ut/1UGEZjSdghuP3fwA15zpDPcjkf/1FjlOIm6uIBGMNS5jXzsZy593u+P/YcnrZD6cD3IVFz9vQ==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@intlify/shared': 9.1.9
+    dev: false
+
   /@intlify/devtools-if/9.2.0-beta.34:
     resolution: {integrity: sha512-Q/MNzslMLKpVygLJDE2poOwzQFed3KTpAn6hPsN10pgBPNHwJGVi6LgBYsO/6TVszN0w4GA1cv+6nT3iIyW7+A==}
     engines: {node: '>= 12'}
@@ -2571,6 +2590,15 @@ packages:
       '@intlify/shared': 9.2.0-beta.34
     dev: false
 
+  /@intlify/message-compiler/9.1.9:
+    resolution: {integrity: sha512-6YgCMF46Xd0IH2hMRLCssZI3gFG4aywidoWQ3QP4RGYQXQYYfFC54DxhSgfIPpVoPLQ+4AD29eoYmhiHZ+qLFQ==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@intlify/message-resolver': 9.1.9
+      '@intlify/shared': 9.1.9
+      source-map: 0.6.1
+    dev: false
+
   /@intlify/message-compiler/9.2.0-beta.34:
     resolution: {integrity: sha512-l7JjkXJBW2l6cFZqPvI6oWU6QZn/i70agU6QB02W1O+6quFCFNpsiPswgYyQrmfHt4F4qYhLJUMZltIW/cqcbw==}
     engines: {node: '>= 12'}
@@ -2579,11 +2607,39 @@ packages:
       source-map: 0.6.1
     dev: false
 
+  /@intlify/message-resolver/9.1.9:
+    resolution: {integrity: sha512-Lx/DBpigeK0sz2BBbzv5mu9/dAlt98HxwbG7xLawC3O2xMF9MNWU5FtOziwYG6TDIjNq0O/3ZbOJAxwITIWXEA==}
+    engines: {node: '>= 10'}
+    dev: false
+
+  /@intlify/runtime/9.1.9:
+    resolution: {integrity: sha512-XgPw8+UlHCiie3fI41HPVa/VDJb3/aSH7bLhY1hJvlvNV713PFtb4p4Jo+rlE0gAoMsMCGcsiT982fImolSltg==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@intlify/message-compiler': 9.1.9
+      '@intlify/message-resolver': 9.1.9
+      '@intlify/shared': 9.1.9
+    dev: false
+
+  /@intlify/shared/9.1.9:
+    resolution: {integrity: sha512-xKGM1d0EAxdDFCWedcYXOm6V5Pfw/TMudd6/qCdEb4tv0hk9EKeg7lwQF1azE0dP2phvx0yXxrt7UQK+IZjNdw==}
+    engines: {node: '>= 10'}
+    dev: false
+
   /@intlify/shared/9.2.0-beta.34:
     resolution: {integrity: sha512-hbUKcVbTOkLVpnlSeZE1OPgEI7FpvhuZF/gb84xECTjXEImIa3u0fIcJKUUffv3dlAx8fMOE5xKgDzngidm0tw==}
     engines: {node: '>= 12'}
     dev: false
 
+  /@intlify/vue-devtools/9.1.9:
+    resolution: {integrity: sha512-YPehH9uL4vZcGXky4Ev5qQIITnHKIvsD2GKGXgqf+05osMUI6WSEQHaN9USRa318Rs8RyyPCiDfmA0hRu3k7og==}
+    engines: {node: '>= 10'}
+    dependencies:
+      '@intlify/message-resolver': 9.1.9
+      '@intlify/runtime': 9.1.9
+      '@intlify/shared': 9.1.9
+    dev: false
+
   /@intlify/vue-devtools/9.2.0-beta.34:
     resolution: {integrity: sha512-0fEUqxZ2XibWNpWr1OTQrz0hBgqiWdXOvg5D6NjYBYIrSlJ13cPFfkfPBlnKUkrfBdw7RG6l+SlcUwIPj0ViGA==}
     engines: {node: '>= 12'}
@@ -2991,10 +3047,31 @@ packages:
       vue-demi: 0.12.5_vue@3.2.33
     dev: false
 
+  /@vueuse/core/8.3.1_vue@3.2.33:
+    resolution: {integrity: sha512-WiXUgVyPG9elGx3G8UV8g+zqbEJ2hYacrPICogAxDdW6hnxxcUFdF7FtvDroJ/DxWmo2pg8XNNz07ybfnZyJbw==}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.0
+      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
+    dependencies:
+      '@vueuse/metadata': 8.3.1
+      '@vueuse/shared': 8.3.1_vue@3.2.33
+      vue: 3.2.33
+      vue-demi: 0.12.5_vue@3.2.33
+    dev: false
+
   /@vueuse/metadata/8.3.0:
     resolution: {integrity: sha512-7R/LNPQWp1r/owa2e71l3dFlJ21p89YE3ks14ZclP2VOTvhC6AzDRcpk+ChISNetv8spsFbWZj/Z7sFjbFZfuw==}
     dev: false
 
+  /@vueuse/metadata/8.3.1:
+    resolution: {integrity: sha512-1aZaFL44HzXXkfN6Q7KMDOXBFKTHDClHlOJBxtN8rTBXIIScoGOrJCpxWiQ4kuVg95MzG/pHrd3P4wd8poL9XQ==}
+    dev: false
+
   /@vueuse/shared/8.3.0_vue@3.2.33:
     resolution: {integrity: sha512-xehtLfevPw9nsVIGFe/tWMtFvbvZjeAfXh7DT9Fptt/6/C5rLwpJtxsVguIBtPybjwobO4KCpQYS78aa9fg5Sw==}
     peerDependencies:
@@ -3010,6 +3087,21 @@ packages:
       vue-demi: 0.12.5_vue@3.2.33
     dev: false
 
+  /@vueuse/shared/8.3.1_vue@3.2.33:
+    resolution: {integrity: sha512-7HKLCcxp4dtONq6QSSoavblo9riYgqzw7jhqiC0/VUYMXKzqj1G/GznOzTmY8Wi8uKKT197JqjKQ1DKt2j/0+A==}
+    peerDependencies:
+      '@vue/composition-api': ^1.1.0
+      vue: ^2.6.0 || ^3.2.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      vue:
+        optional: true
+    dependencies:
+      vue: 3.2.33
+      vue-demi: 0.12.5_vue@3.2.33
+    dev: false
+
   /JSONStream/1.3.5:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
@@ -5838,6 +5930,19 @@ packages:
       - supports-color
     dev: true
 
+  /vue-i18n/9.1.9_vue@3.2.33:
+    resolution: {integrity: sha512-JeRdNVxS2OGp1E+pye5XB6+M6BBkHwAv9C80Q7+kzoMdUDGRna06tjC0vCB/jDX9aWrl5swxOMFcyAr7or8XTA==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      '@intlify/core-base': 9.1.9
+      '@intlify/shared': 9.1.9
+      '@intlify/vue-devtools': 9.1.9
+      '@vue/devtools-api': 6.1.4
+      vue: 3.2.33
+    dev: false
+
   /vue-i18n/9.2.0-beta.34_vue@3.2.33:
     resolution: {integrity: sha512-AKzOMn91OKBKHTPVWrDF+kBSbYYNGfBeeBhuihkxW2ZTXd1l8vp7WBqA6weV9kb9EDv7HO61Qhctqcr79TmHVw==}
     engines: {node: '>= 12'}