feat: 初始化 v-region vue3 版分支内容

.circleci/config.yml

@@ -10,7 +10,7 @@ jobs:
 
     docker:
       # specify the version you desire here
-      - image: circleci/node:12.22-browsers
+      - image: cimg/node:16.17.0-browsers
 
       # Specify service dependencies here if necessary
       # CircleCI maintains a library of pre-built images
@@ -39,5 +39,5 @@ jobs:
           key: v1-dependencies-{{ checksum "package.json" }}
 
       # run tests!
-      - run: npm run cover
+      - run: npm run coverage
       - run: codecov

.eslintrc.cjs

@@ -0,0 +1,21 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+const path = require('node:path')
+const createAliasSetting = require('@vue/eslint-config-standard/createAliasSetting')
+
+module.exports = {
+  root: true,
+  extends: [
+    'plugin:vue/vue3-strongly-recommended',
+    '@vue/eslint-config-standard'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  },
+  settings: {
+    ...createAliasSetting({
+      '@': `${path.resolve(__dirname, './src')}`
+    })
+  }
+}

.gitignore

@@ -1,13 +1,27 @@
-.DS_Store
-node_modules/
-npm-debug.log
-yarn-error.log
-coverage
-.nyc_output
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+.nyc_output/
+coverage/
 
 # Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
+.DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
+*.sw?

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

CHANGELOG-CN.md

@@ -0,0 +1,12 @@
+# Changelog
+
+英文 changelog 内容请访问 [CHANGELOG](CHANGELOG.md)
+
+## [3.0.0-beta.1](https://github.com/TerryZ/v-page/compare/v2.1.0...v3.0.0-beta.1) (2022-08-26)
+
+### 新特性
+
+- 使用 vue3 **composition api** 重构 `v-page`
+- 工具链从 `webpack` 更换为 `vite`
+- 单元测试库从 `mocha` 更换为 `vitest`
+- `page-change` 事件更名为 `change`

CHANGELOG.md

@@ -0,0 +1,12 @@
+# Changelog
+
+Please refer to [CHANGELOG-CN](CHANGELOG-CN.md) for Chinese changelog
+
+## [3.0.0-beta.1](https://github.com/TerryZ/v-page/compare/v2.1.0...v3.0.0-beta.1) (2022-08-26)
+
+### Features
+
+- refactor `v-page` with vue3 **composition api**
+- change module bundler library from `webpack` to `vite`
+- change unit test library from `mocha` to `vitest`
+- `page-change` event rename to `change`

examples/App.vue

@@ -0,0 +1,7 @@
+<template>
+  <examples-index />
+</template>
+
+<script setup>
+import ExamplesIndex from './ExamplesIndex.vue'
+</script>

examples/ExamplesIndex.vue

@@ -0,0 +1,257 @@
+<script setup>
+import { ref } from 'vue'
+import { Page as VPage } from '../src'
+
+const arr = Array(108)
+  .fill(0)
+  .map((val, index) => index + 1)
+const pageArr = ref([])
+const disabled = ref(false)
+const target = ref(4)
+const current = ref(3)
+const align = ref('left')
+const page = ref(null)
+
+function pagePhotoChange (pInfo) {
+  // console.log(pInfo);
+  pageArr.value = []
+  let start = 0
+  let end = 0
+  start = pInfo.pageSize * (pInfo.pageNumber - 1)
+  end = start + pInfo.pageSize - 1
+  pageArr.value = arr.filter((val, idx) => idx >= start && idx <= end)
+}
+function go () {
+  page.value.goPage(Number(target.value))
+}
+function displayAllPageChange (data) {
+  console.log(data)
+}
+</script>
+
+<template>
+  <div class="p-5">
+    <section>
+      <h1>v-page examples</h1>
+    </section>
+
+    <hr>
+
+    <h5>照片墙实例</h5>
+    <div class="d-flex flex-wrap border px-3 pt-3 mb-3 rounded-3 shadow-sm">
+      <div
+        v-for="(num, index) in pageArr"
+        :key="index"
+        class="rounded-3 bg-light me-3 mb-3 text-black-50 h1 d-flex justify-content-center align-items-center"
+        style="width: 11.2rem; height: 8rem"
+      >
+        {{ num }}
+      </div>
+    </div>
+    <div>
+      <v-page
+        :total-row="arr.length"
+        @change="pagePhotoChange"
+      />
+    </div>
+
+    <h5 class="mt-5 mb-3">
+      完整分页栏
+    </h5>
+    <div class="bg-light p-3 rounded-3">
+      <v-page
+        align="left"
+        :total-row="101"
+        v-model="current"
+        ref="page"
+      />
+
+      <div class="d-flex mt-2">
+        <div class="col-md-1 me-3">
+          <input
+            type="text"
+            class="form-control"
+            v-model="target"
+          >
+        </div>
+        <button
+          class="btn btn-primary me-3"
+          type="button"
+          @click="go"
+        >
+          跳转
+        </button>
+        <button
+          class="btn btn-primary"
+          type="button"
+          @click="current = current + 1"
+        >
+          page number + 1
+        </button>
+      </div>
+    </div>
+
+    <h5 class="mt-5 mb-3">
+      对齐方向
+    </h5>
+    <div class="bg-light p-3 rounded-3">
+      <div class="mb-3 d-flex align-items-center">
+        <div>方向：</div>
+        <div>
+          <select
+            v-model="align"
+            class="form-select"
+          >
+            <option value="left">
+              左对齐
+            </option>
+            <option value="center">
+              居中对齐
+            </option>
+            <option value="right">
+              右对齐
+            </option>
+          </select>
+        </div>
+      </div>
+      <div>
+        <v-page
+          :align="align"
+          :total-row="101"
+        />
+      </div>
+    </div>
+
+    <h5 class="mt-5 mb-3">
+      无页数选择列表
+    </h5>
+    <div class="bg-light p-3 rounded-3">
+      <v-page
+        :total-row="100"
+        :page-size-menu="false"
+        align="left"
+      />
+    </div>
+
+    <h5 class="mt-5 mb-3">
+      无分页信息栏
+    </h5>
+    <div class="bg-light p-3 rounded-3">
+      <v-page
+        :page-size-menu="false"
+        :info="false"
+        align="left"
+        :total-row="100"
+      />
+    </div>
+
+    <h5 class="mt-5 mb-3">
+      无首页、尾页
+    </h5>
+    <div class="bg-light p-3 rounded-3">
+      <v-page
+        :page-size-menu="false"
+        :info="false"
+        :total-row="100"
+        :first="false"
+        :last="false"
+        align="left"
+      />
+    </div>
+
+    <h5 class="mt-5 mb-3">
+      无分页码
+    </h5>
+    <div class="bg-light p-3 rounded-3">
+      <v-page
+        :page-size-menu="false"
+        :info="false"
+        :total-row="100"
+        :first="false"
+        :last="false"
+        :page-number="false"
+        align="left"
+      />
+    </div>
+
+    <h5 class="mt-5 mb-3">
+      禁用
+    </h5>
+    <div class="bg-light p-3 rounded-3">
+      <v-page
+        align="left"
+        :total-row="100"
+        :disabled="disabled"
+      />
+
+      <hr>
+
+      <div>
+        <div
+          class="btn-group mt-2"
+          role="group"
+          aria-label="..."
+        >
+          <button
+            type="button"
+            class="btn btn-outline-dark"
+            :disabled="!disabled"
+            @click="disabled = false"
+          >
+            Enabled
+          </button>
+          <button
+            type="button"
+            class="btn btn-danger"
+            :disabled="disabled"
+            @click="disabled = true"
+          >
+            Disabled
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <h5 class="mt-5 mb-3">
+      边框
+    </h5>
+    <div class="bg-white border p-3 rounded-3">
+      <v-page
+        :total-row="100"
+        align="left"
+        border
+      />
+    </div>
+
+    <h5 class="mt-5 mb-3">
+      插槽
+    </h5>
+    <div class="bg-light p-3 rounded-3">
+      <v-page
+        align="left"
+        :total-row="101"
+        v-slot="{ pageNumber, pageSize, totalPage, totalRow, isFirst, isLast }"
+      >
+        <div>
+          <div>page: <span v-text="pageNumber" /></div>
+          <div>pageSize: <span v-text="pageSize" /></div>
+          <div>totalPage: <span v-text="totalPage" /></div>
+          <div>totalRow: <span v-text="totalRow" /></div>
+          <div>isFirst: <span v-text="isFirst" /></div>
+          <div>isLast: <span v-text="isLast" /></div>
+        </div>
+      </v-page>
+    </div>
+
+    <h5 class="mt-5 mb-3">
+      显示全部数据
+    </h5>
+    <div class="p-3 rounded-3 border">
+      <v-page
+        :total-row="101"
+        :display-all="true"
+        @change="displayAllPageChange"
+      />
+    </div>
+  </div>
+</template>

examples/main.js

@@ -0,0 +1,16 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import 'bootstrap/dist/css/bootstrap.min.css'
+
+// import Page from '@'
+
+// const app = createApp(App)
+
+// app.use(Page, {
+//   align: 'left',
+//   language: 'en'
+// })
+
+// app.mount('#app')
+
+createApp(App).mount('#app')