Merge branch 'develop' of gitee.com:layui-vue/layui-vue into develop

LICENSE

@@ -17,4 +17,4 @@ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

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

@@ -119,17 +119,15 @@ export default {
 }
 </script>
 
-
-
 :::
 
-::: title 设置每页数量选择范围
+::: title 完整分页
 :::
 
 ::: demo
 
 <template>
-  <lay-page :limit="limit" :total="total" :limits="[10,50,100,200]"></lay-page>
+  <lay-page :limit="limit" :total="total" :show-count="showCount" :show-page="showPage" :show-limit="showLimit" :show-refresh="showRefresh" showSkip="showSkip"></lay-page>
 </template>
 
 <script>
@@ -140,66 +138,6 @@ export default {
 
     const limit = ref(20)
     const total = ref(100)
-
-    return {
-      limit,
-      total
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 每页数量切换事件(limit)
-:::
-
-::: demo
-
-<template>
-  <lay-page :limit="limit" :total="total" @limit="limit=$event" :show-limit="showLimit" ></lay-page>
-  <div>每页数量:{{limit}}</div>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const limit = ref(5)
-    const total = ref(9999)
-    const showLimit = ref(true)
-
-    return {
-      limit,
-      total,
-      showLimit,
-    }
-  }
-}
-</script>
-
-:::
-
-::: title 完整分页
-:::
-
-::: demo
-
-<template>
-  <lay-page :limit="limit" :total="9999" :show-count="showCount" @limit="limit=$event" :show-page="showPage" :show-limit="showLimit" :show-refresh="showRefresh" showSkip="showSkip"></lay-page>
-  每页数量:{{limit}}
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-
-    const limit = ref(5)
-    const total = ref(9999)
     const showCount = ref(true)
     const showPage = ref(true)
     const showLimit = ref(true)
@@ -269,8 +207,6 @@ export default {
 | showLimit   | 显示每页数量 | `false` |
 | showRefresh | 显示刷新按钮 | `false` |
 | showSkip    | 显示跳转     | `false` |
-| pages       | 显示切页按钮数量     | `10` |
-| limits       | 切换每页数量的选择项     | `[10,20,30,40,50]` |
 
 :::
 
@@ -282,7 +218,6 @@ export default {
 | 事件 | 描述     | 参数                  |
 | ---- | -------- | --------------------- |
 | jump | 切换回调 | { current: 当前页面 } |
-| limit | 每页数量变化 | 变化后的值 |
 
 :::
 

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>[修复] 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

@@ -64,7 +64,76 @@
             生态：暂无
         </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="6">
+            焦点：layui-vue
+        </lay-col>
+        <lay-col md="4">
+            地点：未知
+        </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/2469/7407590_wcg666_1640528494.png"></lay-avatar>
+        </lay-col>
+        <lay-col md="2">
+            Sight
+        </lay-col>
+        <lay-col md="6">
+            焦点：count-up backtop
+        </lay-col>
+        <lay-col md="4">
+            地点：未知
+        </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/2596/7789823_finalsummer_1613993823.png"></lay-avatar>
+        </lay-col>
+        <lay-col md="2">
+            finalsummer
+        </lay-col>
+        <lay-col md="6">
+            焦点：layer-vue
+        </lay-col>
+        <lay-col md="4">
+            地点：未知
+        </lay-col>
+        <lay-col md="5">
+            生态：暂无
+        </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/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",
@@ -78,10 +78,5 @@
     "current node",
     "last 2 versions and > 2%",
     "ie > 10"
-  ],
+  ]
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  }
 }

shims-vue.d.ts

@@ -22,4 +22,4 @@ interface ImportMeta {
     DEV: boolean
     SSR: boolean
   }
-}
+}

src/module/page/index.vue

@@ -1,57 +1,60 @@
 <template>
   <div class="layui-box layui-laypage layui-laypage-default">
-    <span v-if="showCount" class="layui-laypage-count">共 {{ total }} 条 {{ maxPage }}页</span>
+    <span v-if="showCount" class="layui-laypage-count">共 {{ total }} 条</span
-    <a
+    ><a
       href="javascript:;"
       class="layui-laypage-prev"
       :class="[currentPage === 1 ? 'layui-disabled' : '']"
       @click="prev()"
+      ><slot v-if="slots.prev" name="prev"></slot>
+      <template v-else>上一页</template></a
     >
-      <slot v-if="slots.prev" name="prev"></slot>
-      <template v-else>上一页</template>
-    </a>
     <template v-if="showPage">
       <template v-for="index of totalPage" :key="index">
-        <span v-if="index === currentPage" class="layui-laypage-curr">
+        <span v-if="index === currentPage" class="layui-laypage-curr"
-          <em class="layui-laypage-em" :class="[theme ? 'layui-bg-' + theme : '']"></em>
+          ><em
-          <em>{{ index }}</em>
+            class="layui-laypage-em"
-        </span>
+            :class="[theme ? 'layui-bg-' + theme : '']"
-        <a v-else href="javascript:;" @click="jump(index)">{{ index }}</a>
+          ></em
+          ><em>{{ index }}</em></span
+        >
+        <a v-else href="javascript:;" @click="jump(index)">
+          {{ index }}
+        </a>
       </template>
     </template>
 
     <a
       href="javascript:;"
       class="layui-laypage-next"
-      :class="[currentPage === maxPage ? 'layui-disabled' : '']"
+      :class="[currentPage === totalPage ? 'layui-disabled' : '']"
       @click="next()"
+      ><slot v-if="slots.next" name="next"></slot>
+      <template v-else>下一页</template></a
+    ><span v-if="showLimit" class="layui-laypage-limits"
+      ><select v-model="inlimit">
+        <option value="10">10 条/页</option>
+        <option value="20">20 条/页</option>
+        <option value="30">30 条/页</option>
+        <option value="40">40 条/页</option>
+        <option value="50">50 条/页</option>
+      </select></span
+    ><a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh"
+      ><i class="layui-icon layui-icon-refresh"></i></a
+    ><span v-if="showSkip" class="layui-laypage-skip"
+      >到第<input
+        v-model="currentPageShow"
+        type="number"
+        class="layui-input layui-input-number"
+      />页<button type="button" class="layui-laypage-btn" @click="jumpPage()">
+        确定
+      </button></span
     >
-      <slot v-if="slots.next" name="next"></slot>
-      <template v-else>下一页</template>
-    </a>
-    <span v-if="showLimit" class="layui-laypage-limits">
-      <select v-model="inlimit">
-        <option v-for="val of limits" :key="val" :value="val">{{ val }} 条/页</option>
-      </select>
-    </span>
-    <a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh">
-      <i class="layui-icon layui-icon-refresh"></i>
-    </a>
-    <span v-if="showSkip" class="layui-laypage-skip">
-      到第
-      <input v-model="currentPageShow" type="number" class="layui-input layui-input-number" />页
-      <button
-        type="button"
-        class="layui-laypage-btn"
-        @click="jumpPage()"
-        :disabled="currentPageShow > maxPage"
-      >确定</button>
-    </span>
   </div>
 </template>
 
 <script setup name="LayPage" lang="ts">
-import { defineProps, Ref, ref, watch, useSlots, computed } from "vue";
+import { defineProps, Ref, ref, watch, useSlots, computed, ComputedRef } from "vue";
 
 const slots = useSlots();
 
@@ -66,8 +69,6 @@ const props = withDefaults(
     showLimit?: boolean | string;
     showInput?: boolean | string;
     showRefresh?: boolean | string;
-    pages?: number,
-    limits?: number[]
   }>(),
   {
     limit: 10,
@@ -78,32 +79,14 @@ const props = withDefaults(
     showLimit: true,
     showInput: false,
     showRefresh: false,
-    pages: 10,
-    limits: () => [10, 20, 30, 40, 50]
   }
 );
-const limits = ref(props.limits);
-const pages = props.pages / 2
-const inlimit = computed({ get() { return props.limit }, set(v: number) { emit('limit', v) } })
-const maxPage = ref(Math.ceil(props.total / props.limit));
-const totalPage = computed(() => {
-  let r: number[] = [], end = maxPage.value
-  if (currentPage.value <= pages) {
-    end = props.pages + 1
-  } else if (currentPage.value + pages > end) {
 
-  } else {
+const inlimit = ref(props.limit);
-    end = currentPage.value + pages
+const totalPage = ref(Math.ceil(props.total / inlimit.value));
-  }
-  for (let i = currentPage.value > pages ? currentPage.value - pages : 1; i < end; i++) {
-    r.push(i)
-  }
-  return r;
-})
 const currentPage: Ref<number> = ref(1);
 const currentPageShow: Ref<number> = ref(currentPage.value);
-
+const emit = defineEmits(["jump"]);
-const emit = defineEmits(["jump", "limit"]);
 
 const prev = function () {
   if (currentPage.value === 1) {
@@ -113,7 +96,7 @@ const prev = function () {
 };
 
 const next = function () {
-  if (currentPage.value === maxPage.value) {
+  if (currentPage.value === totalPage.value) {
     return;
   }
   currentPage.value++;
@@ -129,11 +112,11 @@ const jumpPage = function () {
 
 watch(inlimit, function () {
   currentPage.value = 1;
-  maxPage.value = Math.ceil(props.total / inlimit.value);
+  totalPage.value = Math.ceil(props.total / inlimit.value);
 });
 
 watch(currentPage, function () {
   currentPageShow.value = currentPage.value;
   emit("jump", { current: currentPage.value });
 });
-</script>
+</script>