feat(ui/pagination): ui/pagination

affects: @varlet/ui

packages/varlet-ui/src/pagination/Pagination.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="var-pagination">
+    <div class="var-pagination--size">
+      <div class="active">
+        <!-- {{ size }} -->
+        <var-select :hint="false" :line="false" :placeholder="size" v-model="size">
+          <var-option v-for="(item, index) in sizeData" :key="index" @click="sizeSelect(item)" :label="item" />
+        </var-select>
+      </div>
+      /页
+      <!-- <var-menu alignment="bottom" v-model:show="sizeShow">
+        <template #menu>
+          <div class="cell-list">
+            <var-cell v-for="(item, index) in sizeData" :key="index" @click="sizeSelect(item)">{{ item }}</var-cell>
+          </div>
+        </template>
+      </var-menu> -->
+    </div>
+    <div class="var-pagination--total">共{{ total }}条</div>
+    <div class="var-pagination--page">
+      <div class="page_icon" @click="prev" v-ripple="{ disabled: current < 2 }">
+        <var-icon name="chevron-left" :color="current < 2 ? `#DCDCDC` : ``" />
+      </div>
+      <div class="text">
+        <var-select :hint="false" :line="false" :placeholder="size" v-model="current">
+          <var-option v-for="(item, index) in pageData" :key="index" @click="pageSelect(item)" :label="item" />
+        </var-select>
+      </div>
+      <div class="page_icon" @click="next" v-ripple="{ disabled: current >= max }">
+        <var-icon name="chevron-right" :color="current >= max ? `#DCDCDC` : ``" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watch, computed, onBeforeMount, Ref } from 'vue'
+import menu from '../menu'
+import cell from '../cell'
+import select from '../select'
+import option from '../option'
+import button from '../button'
+import ripple from '../ripple'
+
+import { props } from './porps'
+import { toNumber } from '../utils/shared'
+
+export default defineComponent({
+  name: 'VarPagination',
+  components: {
+    [menu.name]: menu,
+    [cell.name]: cell,
+    [button.name]: button,
+    [select.name]: select,
+    [option.name]: option,
+  },
+  props,
+  setup(props, context) {
+    const sizeShow = ref(true)
+    const pageShow = ref(true)
+    const pageData: Ref<number[]> = ref([])
+    // const total = ref(66)
+    const current: Ref<number> = ref(1)
+    const size = ref(5)
+    // const { sizeData } = props
+    const sizeData = computed(() => {
+      return props.sizeData
+    })
+    const total = computed(() => {
+      return toNumber(props.total as string | number)
+    })
+    const max = ref(0)
+
+    const sizeFocus = () => {
+      sizeShow.value = true
+    }
+
+    const sizeSelect = (value: number) => {
+      const oldValue = size.value
+      size.value = value
+      sizeShow.value = false
+      pageList()
+      pageShow.value = false
+      context.emit('size-click', value, oldValue)
+    }
+
+    const pageFocus = () => {
+      pageShow.value = true
+    }
+
+    const pageSelect = (value: number) => {
+      current.value = value
+      pageShow.value = false
+      sizeShow.value = false
+    }
+
+    const pageList = () => {
+      const totalPage = toNumber(total.value) / toNumber(size.value)
+      const arr = []
+      for (let i = 1; i < Math.ceil(totalPage) + 1; i++) {
+        arr.push(i)
+      }
+      console.log(total.value)
+
+      console.log(Math.ceil(totalPage))
+
+      if (current.value > arr[arr.length - 1]) {
+        current.value = arr[arr.length - 1]
+      }
+      pageData.value = arr
+      max.value = arr[arr.length - 1]
+    }
+
+    const next = () => {
+      if (current.value >= max.value) {
+        return
+      }
+      const oldValue = current.value
+      current.value += 1
+      context.emit('next-click', current.value, oldValue)
+    }
+
+    const prev = () => {
+      if (current.value < 2) {
+        return
+      }
+      const oldValue = current.value
+      current.value -= 1
+      context.emit('prev-click', current.value, oldValue)
+    }
+
+    pageList()
+
+    onBeforeMount(() => {
+      console.log(props)
+    })
+
+    watch(
+      () => current.value,
+      (newValue, oldValue) => {
+        context.emit('page-change', newValue, oldValue)
+      }
+    )
+
+    watch(
+      () => props.current,
+      (newValue) => {
+        if (newValue >= max.value) {
+          current.value = max.value
+        } else if (newValue < 1) {
+          current.value = 1
+        } else {
+          current.value = toNumber(newValue)
+        }
+      }
+    )
+
+    return {
+      sizeFocus,
+      pageFocus,
+      pageSelect,
+      sizeSelect,
+      sizeShow,
+      pageShow,
+      sizeData,
+      pageData,
+      total,
+      current,
+      size,
+      max,
+      pageList,
+      next,
+      prev,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import './pagination';
+</style>

packages/varlet-ui/src/pagination/__tests__/index.spec.js

@@ -0,0 +1,14 @@
+import example from '../example'
+import Pagination from '..'
+import { createApp } from 'vue'
+import { mount } from '@vue/test-utils'
+
+test('test pagination example', () => {
+  const wrapper = mount(example)
+  expect(wrapper.html()).toMatchSnapshot()
+})
+
+test('test pagination plugin', () => {
+  const app = createApp({}).use(Pagination)
+  expect(app.component(Pagination.name)).toBeTruthy()
+})

packages/varlet-ui/src/pagination/docs/zh-CN.md

@@ -0,0 +1 @@
+# 步骤条

packages/varlet-ui/src/pagination/example/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <app-type> 啊这 </app-type>
+  <div style="margin-top: 200px">
+    <var-pagination @pageChange="pageChange" :current="current" :size-data="[5, 10, 15, 30]" :total="80" />
+  </div>
+</template>
+
+<script>
+import Pagination from '..'
+import AppType from '@varlet/cli/site/mobile/components/AppType'
+import { watchLang } from '@varlet/cli/site/utils'
+import { use, pack } from './locale'
+import { ref } from 'vue'
+
+export default {
+  name: 'PaginationExample',
+  components: {
+    [Pagination.name]: Pagination,
+    AppType,
+  },
+  setup() {
+    watchLang(use)
+    const current = ref(1)
+    // const pageChange = (newValue, oldValue) => {
+    //   // console.log(newValue, oldValue)
+    // }
+    const time = () => {
+      setTimeout(() => {
+        current.value = 5
+      }, 2000)
+    }
+    time()
+    return {
+      pack,
+      current,
+      time,
+    }
+  },
+}
+</script>
+
+<style>
+.cell-list {
+  background: #fff;
+}
+</style>

packages/varlet-ui/src/pagination/example/locale/en-US.ts

@@ -0,0 +1 @@
+export default {}

packages/varlet-ui/src/pagination/example/locale/index.ts

@@ -0,0 +1,23 @@
+// lib
+import _zhCN from '../../../locale/zh-CN'
+import _enCN from '../../../locale/en-US'
+// mobile example doc
+import zhCN from './zh-CN'
+import enUS from './en-US'
+import { useLocale, add as _add, use as _use } from '../../../locale'
+
+const { add, use: exampleUse, pack, packs, merge } = useLocale()
+
+const use = (lang: string) => {
+  _use(lang)
+  exampleUse(lang)
+}
+
+export { add, pack, packs, merge, use }
+
+// lib
+_add('zh-CN', _zhCN)
+_add('en-US', _enCN)
+// mobile example doc
+add('zh-CN', zhCN)
+add('en-US', enUS)

packages/varlet-ui/src/pagination/example/locale/zh-CN.ts

@@ -0,0 +1 @@
+export default {}

packages/varlet-ui/src/pagination/index.ts

@@ -0,0 +1,10 @@
+import Pagination from './Pagination.vue'
+import type { App } from 'vue'
+
+Pagination.install = function (app: App) {
+  app.component(Pagination.name, Pagination)
+}
+
+export const _PaginationComponent = Pagination
+
+export default Pagination

packages/varlet-ui/src/pagination/pagination.less

@@ -0,0 +1,71 @@
+.var-pagination {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  // width: 100%;
+  // background-color: red;
+  height: 32px;
+  padding: 0 16px;
+  &--size {
+    font-size: 14px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    width: 90px;
+    margin-right: 35px;
+    .active {
+      width: 40px;
+      // font-size: 16px;
+      font-weight: 500;
+    }
+  }
+  &--total {
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    margin-right: 35px;
+    width: 50px;
+  }
+  &--page {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+    width: 100px;
+    font-size: 16px;
+    .text {
+      width: 40px;
+      height: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 14px;
+    }
+    .page_icon {
+      width: 30px;
+      height: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+    }
+  }
+}
+.page-cell {
+  max-height: 200px;
+  overflow-y: auto;
+}
+.cell-list {
+  width: 60px;
+  .var-cell {
+    // justify-content: center;
+    text-align: center;
+  }
+}
+.var-option {
+  padding: 0;
+  justify-content: center;
+}
+.var-select__scroller {
+  padding: 0;
+}

packages/varlet-ui/src/pagination/porps.ts

@@ -0,0 +1,16 @@
+// import { proptype } from 'vue'
+
+export const props = {
+  current: {
+    type: [Number, String],
+    default: 1,
+  },
+  sizeData: {
+    type: Array,
+    default: () => [5, 10, 15],
+  },
+  total: {
+    type: [Number, String],
+    default: 1,
+  },
+}