Merge branch 'develop' into sightDevelop

.prettierrc

@@ -1,3 +1,6 @@
 {
-
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2
 }
+

example/docs/zh-CN/components/skeleton.md

@@ -0,0 +1,109 @@
+::: title 基础使用
+:::
+
+
+::: demo
+
+<template>
+<div>
+<div style="margin-bottom: 10px">
+<lay-switch v-model="loading" active-text="加载" inactive-text="关闭"></lay-switch>
+</div>
+  <lay-skeleton :rows="4" :loading="loading" animated>
+    <p style="margin-bottom: 18px">1 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
+    <p style="margin-bottom: 18px">2 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
+    <p style="margin-bottom: 18px">3 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
+    <p style="margin-bottom: 18px">4 layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式</p>
+  </lay-skeleton>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const loading = ref(true);
+    return {
+        loading,
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 图片
+:::
+
+
+::: demo
+
+<template>
+<div>
+<div style="margin-bottom: 10px">
+<lay-switch v-model="loading" active-text="加载" inactive-text="关闭"></lay-switch>
+</div>
+  <lay-skeleton :loading="loading" animated>
+        <template #skeleton>
+            <lay-skeleton-item type="image"/>
+            <lay-skeleton-item type="p" style="width: 240px"/>
+        </template>
+    <div class="img-content">
+        <img src="https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png" />
+        <p style="margin-top: 18px">layui-vue 发展史....</p>
+    </div>
+  </lay-skeleton>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const loading = ref(true);
+    return {
+        loading,
+    }
+  }
+}
+</script>
+
+<style>
+    .img-content {
+        width: 240px;
+        height: 240px;
+    }
+</style>
+
+:::
+
+::: title 骨架屏属性
+:::
+
+::: table
+
+| 属性  | 描述 | 可选值 |
+| ----- | ---- | ------ |
+| loading | 是否显示 | `true` `false`     |
+| rows | 显示行数 | --     |
+| animated | 是否动画 | `true` `false`    |
+| type | 展示类型 | `p` `image`    |
+
+:::
+
+::: title 骨架屏插槽
+:::
+
+::: table
+
+| 插槽   | 描述     | 可选值 |
+| ------ | -------- | ------ |
+| default| 默认插槽 | --     |
+| skeleton | 自定义插槽 | --     |
+
+:::
+
+::: comment
+:::

example/docs/zh-CN/components/slider.md

@@ -72,5 +72,27 @@ export default {
 </script>
 :::
 
+::: title 纵向区间
+:::
+
+::: demo
+
+<template>
+  <lay-slider v-model="value3" :range="true" :vertical="true"></lay-slider>
+</template>
+
+<script>
+import { ref } from 'vue'
+export default {
+  setup() {
+    const value4 = ref([20,50])
+    return {
+      value4
+    }
+  }
+}
+</script>
+:::
+
 ::: comment
 :::

example/docs/zh-CN/guide/changelog.md

@@ -12,16 +12,18 @@
 <lay-timeline>
   <lay-timeline-item title="0.3.x">
   <ul> 
-      <a name="0-3-0"> </a> 
+      <a name="0-3-1"> </a> 
       <li> 
-        <h3>0.3.0 <span class="layui-badge-rim">2021-12-25</span></h3> 
+        <h3>0.3.1 <span class="layui-badge-rim">2021-12-28</span></h3> 
         <ul> 
-          <li>[新增] slider 滑块 range 属性, 支持区间过程。</li>
+          <li>[新增] count-up 数字滚动组件。</li>
+          <li>[新增] slider 滑块 range 属性, 支持区间取值。</li>
           <li>[新增] button 按钮 disabled 属性, 删除 type 属性 disabled 值。</li>  
           <li>[修复] 演示站点剪贴板功能，http下不能使用的问题。</li>  
           <li>[修复] checkbox 复选框 modelValue 属性必填警告。</li>  
           <li>[修复] formItem 内下拉框组件校验不通过边框未标红问题。</li>  
           <li>[修复] rate 评分 mouseleave 事件绑定警告。</li>
+          <li>[修复] npm 安装 layui-vue 不必要的依赖警告。</li>  
           <li>[集成] eslint, prettier 规范插件 。</li>  
           <li>[升级] icons-vue 1.0.2。</li>  
         </ul> 

example/docs/zh-CN/guide/member.md

@@ -9,14 +9,11 @@
         <lay-col md="2">
             就眠仪式
         </lay-col>
-        <lay-col md="6">
+        <lay-col md="10">
             焦点：layui-vue
         </lay-col>
         <lay-col md="4">
-            地点：China Beijing
+            地点：中国 北京
-        </lay-col>
-        <lay-col md="5">
-            生态：Pear Admin
         </lay-col>
         <lay-col md="6">
             其他：Gitee Github
@@ -31,14 +28,11 @@
         <lay-col md="2">
             落小梅
         </lay-col>
-        <lay-col md="6">
+        <lay-col md="10">
             焦点：tree table
         </lay-col>
         <lay-col md="4">
-            地点：China Hunan
+            地点：中国 湖南
-        </lay-col>
-        <lay-col md="5">
-            生态：Pear Admin
         </lay-col>
         <lay-col md="6">
             其他：Gitee Github
@@ -54,17 +48,94 @@
         <lay-col md="2">
             halo
         </lay-col>
-        <lay-col md="6">
+        <lay-col md="10">
             焦点：slider
         </lay-col>
         <lay-col md="4">
-            地点：China Beijing
+            地点：中国 北京
-        </lay-col>
-        <lay-col md="5">
-            生态：暂无
         </lay-col>
         <lay-col md="6">
-            其他：
+            其他：Gitee Github
+        </lay-col>
+    </lay-row>
+</lay-card>
+
+<lay-card>
+    <lay-row>
+        <lay-col md="1">
+            <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/1871/5614379_xumisky_1607057214.png"></lay-avatar>
+        </lay-col>
+        <lay-col md="2">
+            须弥
+        </lay-col>
+        <lay-col md="10">
+            焦点：layui-vue
+        </lay-col>
+        <lay-col md="4">
+            地点：中国 广州
+        </lay-col>
+        <lay-col md="6">
+            其他：<a href="https://gitee.com/xumisky">Gitee</a> <a href="https://github.com/xumiSky">Github</a>
+        </lay-col>
+    </lay-row>
+</lay-card>
+
+<lay-card>
+    <lay-row>
+        <lay-col md="1">
+            <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2469/7407590_wcg666_1640528494.png"></lay-avatar>
+        </lay-col>
+        <lay-col md="2">
+            Sight
+        </lay-col>
+        <lay-col md="10">
+            焦点：count-up backtop
+        </lay-col>
+        <lay-col md="4">
+            地点：中国 未知
+        </lay-col>
+        <lay-col md="6">
+            其他：Gitee Github
+        </lay-col>
+    </lay-row>
+</lay-card>
+
+<lay-card>
+    <lay-row>
+        <lay-col md="1">
+            <lay-avatar src="https://portrait.gitee.com/uploads/avatars/user/2596/7789823_finalsummer_1613993823.png"></lay-avatar>
+        </lay-col>
+        <lay-col md="2">
+            finalsummer
+        </lay-col>
+        <lay-col md="10">
+            焦点：layer-vue
+        </lay-col>
+        <lay-col md="4">
+            地点：中国 未知
+        </lay-col>
+        <lay-col md="6">
+            其他：Gitee Github
+        </lay-col>
+    </lay-row>
+</lay-card>
+
+<lay-card>
+    <lay-row>
+        <lay-col md="1">
+            <lay-avatar src="http://mms0.baidu.com/it/u=1690972933,1482111264&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=500&h=500"></lay-avatar>
+        </lay-col>
+        <lay-col md="2">
+            莫名点
+        </lay-col>
+        <lay-col md="10">
+            焦点：skeleton
+        </lay-col>
+        <lay-col md="4">
+            地点：中国 未知
+        </lay-col>
+        <lay-col md="6">
+            其他：Gitee Github
         </lay-col>
     </lay-row>
 </lay-card>

example/src/layouts/Layout.vue

@@ -43,7 +43,7 @@
           </a>
         </li>
         <li class="layui-nav-item">
-          <a href="javascript:void(0)"> 0.3.0 </a>
+          <a href="javascript:void(0)"> 0.3.1 </a>
         </li>
       </ul>
     </lay-header>

example/src/router/zh-CN.ts

@@ -76,6 +76,11 @@ const zhCN = [
         component: Component,
         meta: { title: '组件' },
         children: [
+          {
+            path: '/zh-CN/components/skeleton',
+            component: () => import('../../docs/zh-CN/components/skeleton.md'),
+            meta: { title: '骨架屏' },
+          },
           {
             path: '/zh-CN/components/layout',
             component: () => import('../../docs/zh-CN/components/layout.md'),

example/src/view/component.vue

@@ -98,6 +98,12 @@ export default {
         id: 1,
         title: '布局',
         children: [
+          {
+            id: 111,
+            title: '骨架屏',
+            subTitle: 'skeleton',
+            path: '/zh-CN/components/skeleton',
+          },
           {
             id: 4,
             title: '布局',

example/src/view/index.vue

@@ -26,7 +26,7 @@
           >
         </div>
         <div class="site-version">
-          <span>当前版本：v<cite class="site-showv">0.3.0</cite></span>
+          <span>当前版本：v<cite class="site-showv">0.3.1</cite></span>
           <span
             ><router-link
               class="layui-inline site-down"
@@ -44,7 +44,7 @@
           rel="nofollow"
           class="site-star"
         >
-          <i class="layui-icon"></i> Star <cite id="getStars">336</cite>
+          <i class="layui-icon"></i> Star <cite id="getStars">521</cite>
         </a>
         <a
           href="https://gitee.com/layui-vue"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "author": "sleeprite",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",
@@ -26,8 +26,9 @@
     "build": "vite build --emptyOutDir && npm run build:types",
     "build:types": "rimraf types && tsc -d",
     "build:example": "vite build example",
-    "lint:eslint": "eslint \"src/**/*.{vue,ts,tsx}\" --fix",
+    "lint:eslint": "eslint 'src/**/*.{vue,ts,tsx}' --fix",
-    "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
+    "lint:prettier": "prettier --write  'src/**/*'",
+    "publish": "npm run build && npm publish --access=public",
     "commit": "git cz"
   },
   "dependencies": {
@@ -78,10 +79,5 @@
     "current node",
     "last 2 versions and > 2%",
     "ie > 10"
-  ],
+  ]
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  }
 }

src/index.ts

@@ -67,6 +67,8 @@ import LayCarouselItem from "./module/carouselItem/index";
 import LayColorPicker from "./module/colorPicker/index";
 import LayTooltip from "./module/tooltip/index";
 import LayInputNumber from "./module/inputNumber/index";
+import LaySkeleton from './module/skeleton/index';
+import LaySkeletonItem from './module/skeletonItem/index';
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -129,6 +131,8 @@ const components: Record<string, IDefineComponent> = {
   LayModal,
   LayTooltip,
   LayInputNumber,
+  LaySkeleton,
+  LaySkeletonItem,
   LayCountUp,
 };
 
@@ -142,6 +146,8 @@ const install = (app: App, options?: InstallOptions): void => {
 };
 
 export {
+  LaySkeleton,
+  LaySkeletonItem,
   LayRadio,
   LayIcon,
   LayButton,

src/module/page/index.vue

@@ -54,7 +54,7 @@
 </template>
 
 <script setup name="LayPage" lang="ts">
-import { defineProps, Ref, ref, watch, useSlots } from "vue";
+import { defineProps, Ref, ref, watch, useSlots, computed, ComputedRef } from "vue";
 
 const slots = useSlots();
 
@@ -86,7 +86,6 @@ const inlimit = ref(props.limit);
 const totalPage = ref(Math.ceil(props.total / inlimit.value));
 const currentPage: Ref<number> = ref(1);
 const currentPageShow: Ref<number> = ref(currentPage.value);
-
 const emit = defineEmits(["jump"]);
 
 const prev = function () {

src/module/skeleton/index.less

@@ -0,0 +1,72 @@
+.lay-skeleton{
+  .lay-skeleton-item {
+    height: 16px;
+    border-radius: 5px;
+    margin-bottom: 16px;
+    background: #eeeeee;
+  }
+  .lay-skeleton-type--p{
+    height: 16px;
+    border-radius: 5px;
+    margin-bottom: 16px;
+    background: #eeeeee;
+  }
+
+  .lay-skeleton-type--image{
+    width: 240px;
+    height: 240px;
+    background: #eeeeee;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    i{
+      font-size: 40px;
+    }
+  }
+}
+
+.lay-skeleton-animated {
+  .lay-skeleton-type--image{
+    width: 240px;
+    height: 240px !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    i{
+      font-size: 40px;
+    }
+  }
+  .lay-skeleton-item {
+    height: 16px;
+    border-radius: 5px;
+    margin-bottom: 16px;
+    background: #eeeeee;
+    background: linear-gradient(
+            90deg,#f2f2f2 25%,#ececec 37%,#f2f2f2 63%);
+    background-size: 400% 100%;
+    animation: lay-skeleton-loading 1.2s ease infinite;
+  }
+
+
+}
+
+
+.lay-skeleton-first {
+  width: 30%;
+}
+
+.lay-skeleton-last {
+  width: 62.8%;
+}
+
+
+
+@keyframes lay-skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0 50%;
+  }
+}

src/module/skeleton/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+    app.component(Component.name || 'LaySkeleton', Component)
+}
+
+export default Component as IDefineComponent

src/module/skeleton/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div :class="['lay-skeleton', animated ? 'lay-skeleton-animated': '',]" v-bind="$attrs">
+    <template v-if="loading">
+      <slot name="skeleton">
+        <lay-skeleton-item
+            v-for="item in rows"
+            :class="[
+              item===1? 'lay-skeleton-first': '',
+              item === rows? 'lay-skeleton-last': '']"
+            type="p"
+        ></lay-skeleton-item>
+      </slot>
+    </template>
+    <slot v-else></slot>
+  </div>
+</template>
+
+<script setup name="LaySkeleton" lang="ts">
+import LaySkeletonItem from '../skeletonItem/index.vue'
+import './index.less'
+import { defineProps, withDefaults} from "vue";
+
+export interface LaySkeletonProps {
+  rows?: number;
+  loading?: boolean;
+  animated?: boolean;
+}
+
+const props = withDefaults(defineProps<LaySkeletonProps>(), {
+  rows: 4,
+  loading: false,
+  animated: false,
+});
+</script>-

src/module/skeletonItem/index.ts

@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+    app.component(Component.name || 'LaySkeletonItem', Component)
+}
+
+export default Component as IDefineComponent

src/module/skeletonItem/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div :class="['lay-skeleton-item',`lay-skeleton-type--${type}`]" v-bind="$attrs">
+    <div v-if="type==='image'" >
+      <lay-icon type="layui-icon-picture"></lay-icon>
+    </div>
+  </div>
+</template>
+
+<script setup name="LaySkeletonItem" lang="ts">
+import { defineProps, withDefaults} from "vue";
+
+export interface LaySkeletonProps {
+  type?: string;
+}
+
+const props = withDefaults(defineProps<LaySkeletonProps>(), {
+  type: 'p',
+});
+</script>-

src/module/slider/index.less

@@ -99,3 +99,10 @@
   position: relative;
   cursor: pointer;
 }
+
+.layui-slider-vrange {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  cursor: pointer;
+}

src/module/slider/index.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="layui-slider-vertical" v-if="vertical">
-    <div v-if="range">range vertical slider</div>
+    <div ref="rangetracker2" class="layui-slider-vrange" v-if="range">
+      <div class="layui-slider-vertical-btn"></div>
+      <div class="layui-slider-vertical-btn"></div>
+      <div class="layui-slider-vertical-line"></div>
+      <div class="layui-slider-vertical-rate"></div>
+    </div>
 
     <div
       ref="verticaltracker"
@@ -26,27 +31,35 @@
   </div>
 
   <div class="layui-slider-v" v-else>
-
+    <div
-
+      @mousedown.stop="handle_mousedown"
-
+      ref="rangetracker1"
-
+      class="layui-slider-srange"
-
+      v-if="range"
-    <div @mousedown.stop="handle_mousedown" ref="rangetracker1" class="layui-slider-srange" v-if="range">
+    >
       <lay-tooltip :content="rangeValue[0] + ''">
-        <div :style="{ left: rangeValue[0] + '%' }" class="layui-slider-btn-v"></div>
+        <div
+          :style="{ left: rangeValue[0] + '%' }"
+          class="layui-slider-btn-v"
+        ></div>
       </lay-tooltip>
       <lay-tooltip :content="rangeValue[1]">
-        <div :style="{ left: rangeValue[1] + '%' }" class="layui-slider-btn-v"></div>
+        <div
+          :style="{ left: rangeValue[1] + '%' }"
+          class="layui-slider-btn-v"
+        ></div>
       </lay-tooltip>
 
       <div class="layui-slider-line-v"></div>
-      <div :style="{ width:rangeValue[1]-rangeValue[0] +'%', left: rangeValue[0]+'%' }" class="layui-slider-rate-v"></div>
+      <div
+        :style="{
+          width: rangeValue[1] - rangeValue[0] + '%',
+          left: rangeValue[0] + '%',
+        }"
+        class="layui-slider-rate-v"
+      ></div>
     </div>
 
-
-
-
-
     <div
       ref="standardtracker"
       @mousedown.stop="handle_mousedown"
@@ -71,7 +84,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { defineProps, onMounted, reactive, Ref, ref } from "vue";
+import { defineProps, reactive, Ref, ref } from "vue";
 import { on, off } from "evtd";
 import "./index.less";
 
@@ -93,13 +106,23 @@ const props = withDefaults(defineProps<LaySliderProps>(), {
   disabled: false,
 });
 
-let rangeValue:Ref<number[]> = ref([0,0])
+let rangeValue: Ref<number[]> = ref([0, 0]);
 if (Array.isArray(props.modelValue)) {
-  rangeValue.value = props.modelValue
+  // eslint-disable-next-line vue/no-setup-props-destructure
+  rangeValue.value = props.modelValue;
 }
+
+let verticalRangeValue: Ref<number[]> = ref([0, 0]);
+if (Array.isArray(props.modelValue)) {
+  // eslint-disable-next-line vue/no-setup-props-destructure
+  verticalRangeValue.value = props.modelValue;
+}
+
 const standardtracker = ref<HTMLElement | null>(null);
 const verticaltracker = ref<HTMLElement | null>(null);
 const rangetracker1 = ref<HTMLElement | null>(null);
+const rangetracker2 = ref<HTMLElement | null>(null);
+
 const standard_style = reactive({
   left: props.modelValue,
   width: props.modelValue,
@@ -131,6 +154,10 @@ function handle_mousemove(e: MouseEvent) {
   if (props.vertical === false && props.range === true) {
     starndardRangeMove(e);
   }
+
+  if (props.vertical === true && props.range === true) {
+    verticalRangeMove(e);
+  }
 }
 
 function handle_mouseup() {
@@ -197,30 +224,31 @@ const starndardRangeMove =(e:MouseEvent)=>{
   let point_left = e.clientX;
   let distance = point_left - origin_left;
   if (distance < 0) {
-    rangeValue.value[0] = 0
+    rangeValue.value[0] = 0;
   } else {
     let rate = (distance / tracker_rect.width) * 100;
-    let idx = moveNeighbor(Math.floor(rate))
+    let idx = moveNeighbor(Math.floor(rate));
-    rangeValue.value[idx] = Math.floor(rate)
+    rangeValue.value[idx] = Math.floor(rate);
     if (rangeValue.value[1] > 100) {
-      rangeValue.value[1] = 100
+      rangeValue.value[1] = 100;
     }
     if (rangeValue.value[0] < 0) {
-      rangeValue.value[0] = 0
+      rangeValue.value[0] = 0;
     }
-
   }
   emit("update:modelValue", rangeValue.value);
-}
+};
+
+const verticalRangeMove = (e: MouseEvent) => {};
 
 function moveNeighbor(rate: number) {
   let d1 = Math.abs(rate - rangeValue.value[0]);
   let d2 = Math.abs(rate - rangeValue.value[1]);
 
   if (d1 > d2) {
-    return 1
+    return 1;
   } else {
-    return 0
+    return 0;
   }
 }
 </script>