31 lines
3.5 KiB
JavaScript
31 lines
3.5 KiB
JavaScript
|
import{css as c,html as n,Component as p}from"wkit";import"../base/button.js";const r={home:a=>n`<wc-button
|
||
|
|
data-act="1"
|
||
|
|
disabled=${a}
|
||
|
|
class="item"
|
||
|
|
icon="dbl-left"
|
||
|
|
></wc-button>`,end:a=>n`<wc-button
|
||
|
|
data-act="end"
|
||
|
|
disabled=${a}
|
||
|
|
class="item"
|
||
|
|
icon="dbl-right"
|
||
|
|
></wc-button>`,prev:a=>n`<wc-button
|
||
|
|
data-act="prev"
|
||
|
|
disabled=${a}
|
||
|
|
class="item"
|
||
|
|
icon="left"
|
||
|
|
></wc-button>`,next:a=>n`<wc-button
|
||
|
|
data-act="next"
|
||
|
|
disabled=${a}
|
||
|
|
class="item"
|
||
|
|
icon="right"
|
||
|
|
></wc-button>`,curr:a=>n`<span class="curr item">${a}</span>`,info:(a,t)=>n`<span class="item">共 ${a}条, ${t}页</span>`,jump(a){return n`<section class="item jump">
|
||
|
|
<span>Go to</span>
|
||
|
|
<input ref="input" @keydown=${this.__gotoPage} maxlength="6" value=${a} />
|
||
|
|
</section>`}};function u(a,t){let i=[],o=0,s=a<3?6-a:2;if(t<2)return i.push({to:a,txt:a}),i;if(a-s>1&&t>5){let e=a-2*s;e=e<1?1:e,i.push({to:e,txt:"..."})}t-a<s&&(o=s-t+a);for(let e=a-s-o;e<a+s+1&&e<=t;e++)e>0&&i.push({to:e,txt:e});if(a+s<t){let e=a+2*s;e=e>t?t:e,i.push({to:e,txt:"..."})}return i}class h extends p{static props={layout:"str!home, prev, pages, next, end",total:{type:Number,default:0,attribute:!1,observer(t){this.totalpage=Math.ceil(t/this.pagesize)||1}},totalpage:{type:Number,default:1,attribute:!1,observer(t){t<1&&(t=1),this.page>t&&(this.page=t)}},page:{type:Number,default:1,attribute:!1,observer(t){t>this.totalpage?this.page=this.totalpage:t<1&&(this.page=1)}},pagesize:{type:Number,default:20,attribute:!1,observer(t){this.total>0&&(this.totalpage=Math.ceil(this.total/t))}}};static styles=[c`:host{display:block;line-height:1;font-size:14px;-webkit-user-select:none;user-select:none;color:var(--color-dark-1)}:host .layout{display:flex;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)}:host .item{min-width:32px;width:auto;margin:0 5px;border-radius:3px}:host .item.curr{display:inline-flex;align-items:center;justify-content:center;height:32px;background:var(--color-teal-1);color:#fff}:host .item.jump{display:flex;align-items:center}:host input{width:48px;height:24px;padding:0 4px;margin-left:4px;border:1px solid var(--color-grey-2);border-radius:3px;text-align:center;outline:none;transition:box-shadow .15s linear}:host input:focus{box-shadow:0 0 0 2px var(--color-plain-a)}`,c``];#t(t){let i=t.target;if(i.tagName==="WC-BUTTON"){let{page:o,totalpage:s}=this,e=i.dataset.act;if(i.disabled)return;switch(e){case"prev":e=o-1;break;case"next":console.log(e,o),e=o+1;break;case"end":e=s;break}if(+e===o)return;this.page=e,this.$refs.input&&(this.$refs.input.value=e),this.$emit("page-change",{data:e})}}__gotoPage(t){if(t.keyCode===13){let i=+t.target.value;i===i&&(this.page=i,this.$emit("page-change",{data:i})),t.target.value=this.page}}render(){let t=this.layout.split(",").map(e=>e.trim()),{page:i,total:o,totalpage:s}=this;return n`
|
||
|
|
<div class="layout" @click=${this.#t}>
|
||
|
|
${t.map(e=>{switch(e){case"pages":return u(i,s).map(l=>i===l.to?r.curr(i):n`<wc-button class="item" data-act="${l.to}"
|
||
|
|
>${l.txt}</wc-button
|
||
|
|
>`);case"home":return r.home(i===1);case"prev":return r.prev(i===1);case"next":return r.next(i>=s);case"end":return r.end(i>=s);case"curr":return r.curr(i);case"info":return r.info(o,s);case"jump":return r.jump.call(this,i);default:return""}})}
|
||
|
|
</div>
|
||
|
|
`}}h.reg("pager");
|