feat: a tasting version

paginationbar · Jul 14, 2023 · 786eb5b · 786eb5b
1 parent 4ec233a
commit 786eb5b
Show file tree

Hide file tree

Showing 15 changed files with 1,542 additions and 10 deletions.
diff --git a/.czrc b/.czrc
@@ -0,0 +1,3 @@
+{
+  "path": "cz-conventional-changelog"
+}
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,42 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - main
+      - release/*
+permissions:
+  contents: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Set a Node.js version
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      # pull code
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      # using pnpm to install deps
+      - run: npm i -g pnpm
+
+      # build to static
+      - name: Build Example
+        run: pnpm install && pnpm build:app
+        # working-directory: example
+
+      # deploy to `docs` branch
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4.4.1
+        with:
+          folder: dist
+          silent: true
+          clean: true
+          branch: gh-pages
+          single-commit: true
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
+    <!-- <link rel="icon" href="/favicon.ico"> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>paginationbar</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/lib/index.d.ts b/lib/index.d.ts
@@ -0,0 +1,97 @@
+type PagerRecordType =
+  | 'main'
+  | 'first-page'
+  | 'prev-ellipsis'
+  | 'next-ellipsis'
+  | 'last-page'
+
+interface PagerRecord {
+  pageNumber: number | null
+  type: PagerRecordType
+}
+
+interface PaginationBarOptions {
+  container: string | HTMLElement
+
+  /**
+   * 页码按钮的数量，当总页数超过该值时会折叠
+   * 大于等于 5 且小于等于 21 的奇数
+   */
+  pagerCount?: number
+
+  /**
+   * 当前页码
+   */
+  currentPage?: number
+
+  /**
+   * 每页显示条目个数
+   */
+  pageSize?: number
+
+  /**
+   * 总条目数
+   */
+  total?: number
+
+  onCurrentPageChange?: (index: number) => void
+
+  onPageSizeChange?: (size: number) => void
+}
+
+interface PaginationBarInstance {
+  options: PaginationBarOptions
+
+  /**
+   * 总页数
+   */
+  get pageCount(): number
+  /**
+   * 最后一页页码
+   */
+  get lastPageNumber(): number
+  /**
+   * 主页码显示个数
+   */
+  get mainPagerCount(): number
+
+  get mainPagerGap(): number
+
+  /**
+   * 主页码起始页码
+   */
+  get mainPagerStart(): number
+
+  /**
+   * 主页码结束页码
+   */
+  get mainPagerEnd(): number
+
+  get mainPager(): PagerRecord[]
+
+  get leftPager(): PagerRecord[]
+
+  get rightPager(): PagerRecord[]
+
+  get finalPager(): PagerRecord[]
+
+  getContainerEl(): HTMLElement
+
+  render(): void
+
+  setCurrentPage(index: number, reRender?: boolean): void
+
+  setPageSize(size: number, reRender?: boolean): void
+
+  setTotal(value: number, reRender?: boolean): void
+
+  setOptions(opts: PaginationBarOptions, reRender?: boolean): void
+}
+
+type CreatePaginationBar = (
+  opts?: PaginationBarOptions
+) => PaginationBarInstance
+
+declare const createPaginationBar: CreatePaginationBar
+
+export { PagerRecord, PagerRecordType, PaginationBarInstance, PaginationBarOptions, createPaginationBar };
diff --git a/lib/paginationbar.js b/lib/paginationbar.js
diff --git a/lib/paginationbar.mjs b/lib/paginationbar.mjs
@@ -0,0 +1,144 @@
+var u = Object.defineProperty;
+var h = (r, e, t) => e in r ? u(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var o = (r, e, t) => (h(r, typeof e != "symbol" ? e + "" : e, t), t);
+var g = /* @__PURE__ */ ((r) => (r.getContainerElError = "Can not find container elemet.", r))(g || {}), n = /* @__PURE__ */ ((r) => (r.containerClassName = "pagination-bar-container", r.pagerWrapperClassName = "pagination-bar__pager", r.pagerItemClassName = "pagination-bar__pager__number", r))(n || {});
+function l(r, e) {
+  const t = typeof e == "string" ? [e] : e;
+  r.classList.add(...t);
+}
+class c {
+  constructor(e) {
+    o(this, "options", {
+      pagerCount: 7,
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      container: "#pagination-bar-container",
+      onCurrentPageChange: () => {
+      },
+      onPageSizeChange: () => {
+      }
+    });
+    this.options = Object.assign(this.options, e), this.render();
+  }
+  setCurrentPage(e, t = !0) {
+    var a;
+    this.options.currentPage = e, (a = this.options) == null || a.onCurrentPageChange(this.options.currentPage), t && this.render();
+  }
+  setPageSize(e, t = !0) {
+    var a;
+    this.options.pageSize = e, (a = this.options) == null || a.onPageSizeChange(this.options.pageSize), t && this.render();
+  }
+  setTotal(e, t = !0) {
+    this.options.total = e || 0, t && this.render();
+  }
+  setOptions(e, t = !1) {
+    this.options = Object.assign(this.options, e), t && this.render();
+  }
+  get pageCount() {
+    return Math.ceil(this.options.total / this.options.pageSize);
+  }
+  get lastPageNumber() {
+    return this.pageCount;
+  }
+  get mainPagerCount() {
+    const e = this.options.pagerCount - 2;
+    return e <= 0 ? 0 : e;
+  }
+  get mainPagerGap() {
+    return Math.floor(this.mainPagerCount / 2);
+  }
+  get mainPagerStart() {
+    let e = this.mainPagerGap;
+    const t = this.lastPageNumber - this.options.currentPage;
+    t <= this.mainPagerGap && (e += this.mainPagerGap - t + 1);
+    const a = this.options.currentPage - e;
+    return a < 1 ? 1 : a;
+  }
+  get mainPagerEnd() {
+    let e = this.mainPagerCount % 2 === 0 ? this.mainPagerGap - 1 : this.mainPagerGap;
+    const t = this.options.currentPage - 1;
+    t <= this.mainPagerGap && (e += this.mainPagerGap - t + 1);
+    const a = this.options.currentPage + e;
+    return a > this.pageCount ? this.pageCount : a;
+  }
+  get mainPager() {
+    const e = [];
+    for (let t = this.mainPagerStart; t <= this.mainPagerEnd; t++)
+      e.push({
+        pageNumber: t,
+        type: "main"
+      });
+    return e;
+  }
+  get leftPager() {
+    const e = [], t = this.mainPager[0];
+    return t && t.pageNumber !== 1 && (e.push({
+      pageNumber: 1,
+      type: "first-page"
+    }), this.pageCount > this.options.pagerCount && typeof t.pageNumber == "number" && t.pageNumber > 2 && e.push({
+      pageNumber: null,
+      type: "prev-ellipsis"
+    })), e;
+  }
+  get rightPager() {
+    const e = [], t = this.mainPager[this.mainPager.length - 1];
+    return t && t.pageNumber !== this.pageCount && (e.unshift({
+      pageNumber: this.pageCount,
+      type: "last-page"
+    }), this.pageCount > this.options.pagerCount && typeof t.pageNumber == "number" && t.pageNumber < this.pageCount - 1 && e.unshift({
+      pageNumber: null,
+      type: "next-ellipsis"
+    })), e;
+  }
+  get finalPager() {
+    return this.leftPager.concat(this.mainPager, this.rightPager);
+  }
+  getContainerEl() {
+    if (typeof this.options.container == "string") {
+      const e = document.querySelector(this.options.container);
+      if (!e)
+        throw new Error(g.getContainerElError);
+      return e;
+    }
+    return this.options.container;
+  }
+  isPagerNumberType(e) {
+    return !["prev-ellipsis", "next-ellipsis"].includes(e);
+  }
+  generatePager() {
+    const e = this.finalPager.reduce((t, a) => {
+      const s = this.isPagerNumberType(a.type) ? a.pageNumber : "...", i = this.options.currentPage === a.pageNumber ? "active" : "";
+      return t += `<li class="${n.pagerItemClassName} ${i}" data-number="${a.pageNumber}" data-type="${a.type}">${s}</li>`, t;
+    }, "");
+    return `<ul class="${n.pagerWrapperClassName}">${e}</ul>`;
+  }
+  getPagerItemDataset(e) {
+    return e.dataset;
+  }
+  registerPagerListener() {
+    var e;
+    (e = this.getContainerEl().querySelectorAll(
+      `.${n.pagerWrapperClassName} .${n.pagerItemClassName}`
+    )) == null || e.forEach((t) => {
+      t.addEventListener("click", (a) => {
+        const s = a.target, i = this.getPagerItemDataset(s);
+        if (this.isPagerNumberType(i.type)) {
+          const p = Number(i.number);
+          this.setCurrentPage(p);
+        }
+      });
+    });
+  }
+  render() {
+    const e = this.getContainerEl();
+    l(e, n.containerClassName);
+    const a = `${this.generatePager()}`;
+    e.innerHTML = a, this.registerPagerListener();
+  }
+}
+const P = (r) => new c(r);
+export {
+  c as PaginationBar,
+  P as createPaginationBar
+};
diff --git a/lib/paginationbar.umd.js b/lib/paginationbar.umd.js
diff --git a/lib/style.css b/lib/style.css
diff --git a/package.json b/package.json
@@ -1,11 +1,23 @@
 {
   "name": "paginationbar",
   "version": "0.0.1",
-  "description": "A pagination bar for web app.",
+  "description": "A pagination bar libary for web app.",
   "author": {
     "name": "elenh",
     "email": "yisiwings@163.com"
   },
+  "type": "module",
+  "main": "./lib/paginationbar.js",
+  "module": "./lib/paginationbar.mjs",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./lib/paginationbar.js",
+      "import": "./lib/paginationbar.mjs",
+      "types": "./lib/index.d.ts"
+    },
+    "./lib/style.css": "./lib/style.css"
+  },
   "keywords": [
     "pagination",
     "pagination-bar"
@@ -19,7 +31,11 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "format": "prettier --write src/"
+    "format": "prettier --write src/",
+    "release": "npm run build:lib && npm run build:type && changelogen --release && npm publish --access=public && git push --follow-tags",
+    "build:app": "cross-env BUILD_TYPE=app vite build",
+    "build:lib": "cross-env BUILD_TYPE=lib vite build",
+    "build:type": "rollup -c"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",
@@ -30,12 +46,17 @@
     "@vue/eslint-config-typescript": "^11.0.2",
     "@vue/test-utils": "^2.3.0",
     "@vue/tsconfig": "^0.1.3",
+    "changelogen": "^0.5.4",
+    "cross-env": "^7.0.3",
+    "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.34.0",
     "eslint-plugin-vue": "^9.9.0",
     "jsdom": "^21.1.0",
     "npm-run-all": "^4.1.5",
     "pinia": "^2.0.32",
     "prettier": "^2.8.4",
+    "rollup": "^3.26.2",
+    "rollup-plugin-dts": "^5.3.0",
     "sass": "^1.63.6",
     "typescript": "~4.8.4",
     "vite": "^4.1.4",