更新分页组件兼容新版wkit

src/pager/index.js

@@ -4,14 +4,12 @@
  * @date 2023/04/18 09:38:01
  */
 
-import { css, html, Component, bind, styleMap } from 'wkit'
+import { css, html, Component } from 'wkit'
 import '../form/button.js'
 
 const LAYOUT_DICT = {
   home: e =>
     html`<wc-button
-      solid
-      type="plain"
       data-act="1"
       disabled=${e}
       class="item"
@@ -19,8 +17,6 @@ const LAYOUT_DICT = {
     ></wc-button>`,
   end: e =>
     html`<wc-button
-      solid
-      type="plain"
       data-act="end"
       disabled=${e}
       class="item"
@@ -28,8 +24,6 @@ const LAYOUT_DICT = {
     ></wc-button>`,
   prev: e =>
     html`<wc-button
-      solid
-      type="plain"
       data-act="prev"
       disabled=${e}
       class="item"
@@ -37,8 +31,6 @@ const LAYOUT_DICT = {
     ></wc-button>`,
   next: e =>
     html`<wc-button
-      solid
-      type="plain"
       data-act="next"
       disabled=${e}
       class="item"
@@ -49,16 +41,16 @@ const LAYOUT_DICT = {
   jump(n) {
     return html`<section class="item jump">
       <span>Go to</span>
-      <input ref="input" @keydown=${this.gotoPage} maxlength="6" value=${n} />
+      <input ref="input" @keydown=${this.__gotoPage} maxlength="6" value=${n} />
     </section>`
   }
 }
 
 // 计算页码
 function calculate(curr, total) {
-  var arr = []
-  var fixed = 0
-  var half = curr < 3 ? 6 - curr : 2 // 中间页码
+  let arr = []
+  let fixed = 0
+  let half = curr < 3 ? 6 - curr : 2 // 中间页码
 
   // 总页码小于2
   if (total < 2) {
@@ -68,7 +60,7 @@ function calculate(curr, total) {
 
   // 当前页面比半数多时, 前面的用省略号代替
   if (curr - half > 1 && total > 5) {
-    var to = curr - 2 * half
+    let to = curr - 2 * half
     to = to < 1 ? 1 : to
     arr.push({ to, txt: '...' })
   }
@@ -78,7 +70,7 @@ function calculate(curr, total) {
   }
 
   // 把页码拆成2部分来
-  for (var i = curr - half - fixed; i < curr + half + 1 && i <= total; i++) {
+  for (let i = curr - half - fixed; i < curr + half + 1 && i <= total; i++) {
     if (i > 0) {
       arr.push({ to: i, txt: i })
     }
@@ -86,7 +78,7 @@ function calculate(curr, total) {
 
   // 总页码太多时, 以省略号代替
   if (curr + half < total) {
-    var to = curr + 2 * half
+    let to = curr + 2 * half
     to = to > total ? total : to
     arr.push({ to, txt: '...' })
   }
@@ -96,20 +88,14 @@ function calculate(curr, total) {
 
 class Pager extends Component {
   static props = {
-    layout: {
-      type: String,
-      default: 'home, prev, pages, next, end',
-      attribute: false
-    },
+    layout: 'str!home, prev, pages, next, end',
     total: {
       type: Number,
       default: 0,
       attribute: false,
       observer(v) {
-        if (this.#mounted) {
         this.totalpage = Math.ceil(v / this.pagesize)
       }
-      }
     },
     totalpage: {
       type: Number,
@@ -160,15 +146,17 @@ class Pager extends Component {
           justify-content: center;
           align-items: center;
           margin: 10px auto;
+          --wc-button-icon-size: 10px;
+          --wc-button-border-color: none;
+          --wc-button-background: var(--color-plain-1);
+          --wc-button-color-hover: var(--color-teal-1);
         }
 
         .item {
           min-width: 32px;
           width: auto;
-          --padding: 0;
           margin: 0 5px;
-          --icon-size: 12px;
-          border-radius: 4px;
+          border-radius: 3px;
 
           &.curr {
             display: inline-flex;
@@ -183,10 +171,6 @@ class Pager extends Component {
             display: flex;
             align-items: center;
           }
-
-          &[size='l'] {
-            --icon-size: 12px;
-          }
         }
 
         input {
@@ -210,9 +194,7 @@ class Pager extends Component {
     css``
   ]
 
-  #mounted = false
-
-  handleBtnClick(ev) {
+  #handleBtnClick(ev) {
     let elem = ev.target
     if (elem.tagName === 'WC-BUTTON') {
       let { page, totalpage } = this
@@ -242,44 +224,35 @@ class Pager extends Component {
       }
 
       this.page = num
-
-      console.log(this)
+      this.$refs.input && (this.$refs.input.value = num)
       this.$emit('page-change', { data: num })
     }
   }
 
-  gotoPage(ev) {
+  __gotoPage(ev) {
     if (ev.keyCode === 13) {
       let n = +ev.target.value
       if (n === n) {
         this.page = n
         this.$emit('page-change', { data: n })
       }
-      ev.target.value = n
+      ev.target.value = this.page
     }
   }
 
-  mounted() {
-    this.#mounted = true
-  }
-
   render() {
     let layout = this.layout.split(',').map(s => s.trim())
     let { page, total, totalpage } = this
 
     return html`
-      <div class="layout" @click=${this.handleBtnClick}>
+      <div class="layout" @click=${this.#handleBtnClick}>
         ${layout.map(n => {
           switch (n) {
             case 'pages':
               return calculate(page, totalpage).map(it =>
                 page === it.to
                   ? LAYOUT_DICT.curr(page)
-                  : html`<wc-button
-                      type="plain"
-                      solid
-                      class="item"
-                      data-act="${it.to}"
+                  : html`<wc-button class="item" data-act="${it.to}"
                       >${it.txt}</wc-button
                     >`
               )