Skip to content

Commit

Permalink
feat(comp:pagination): add large size and update style (#1249)
Browse files Browse the repository at this point in the history
  • Loading branch information
danranVm committed Nov 2, 2022
1 parent 9dd0189 commit a05d7b7
Show file tree
Hide file tree
Showing 31 changed files with 281 additions and 264 deletions.
13 changes: 7 additions & 6 deletions packages/components/alert/__tests__/alert.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -93,19 +93,20 @@ describe('Alert', () => {
await wrapper.setProps({ pagination: true })

expect(wrapper.find('.ix-alert-content').text()).toBe('message1')
expect(wrapper.findAll('button')[0].classes()).toContain('ix-button-disabled')
expect(wrapper.findAll('button')[1].classes()).not.toContain('ix-button-disabled')
expect(wrapper.findAll('.ix-pagination-item')[0].classes()).toContain('ix-pagination-item-disabled')
expect(wrapper.findAll('.ix-pagination-item')[1].classes()).not.toContain('ix-pagination-item-disabled')
expect(wrapper.findAll('.ix-pagination-item')[2].classes()).not.toContain('ix-pagination-item-disabled')

await wrapper.trigger('click')
expect(wrapper.find('.ix-alert-content').text()).toBe('message1')

await wrapper.findAll('button')[1].trigger('click')
await wrapper.findAll('.ix-pagination-item')[2].trigger('click')
expect(wrapper.find('.ix-alert-content').text()).toBe('message2')

await wrapper.findAll('button')[1].trigger('click')
await wrapper.findAll('.ix-pagination-item')[2].trigger('click')
expect(wrapper.find('.ix-alert-content').text()).toBe('message2')

await wrapper.findAll('button')[0].trigger('click')
await wrapper.findAll('.ix-pagination-item')[0].trigger('click')
expect(wrapper.find('.ix-alert-content').text()).toBe('message1')

const onChange = vi.fn()
Expand All @@ -118,7 +119,7 @@ describe('Alert', () => {
})
expect(wrapper.find('.ix-alert-content').text()).toBe('message2')

await wrapper.findAll('button')[0].trigger('click')
await wrapper.findAll('.ix-pagination-item')[0].trigger('click')
expect(onChange).toBeCalledWith(1)
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -3,52 +3,51 @@
exports[`Pagination > render work 1`] = `
"<ul class=\\"ix-pagination ix-pagination-md\\">
<li class=\\"ix-pagination-total\\">共 50 项</li>
<li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"上一页\\"><button class=\\"ix-button ix-button-disabled ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" disabled=\\"\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></button></li>
<li class=\\"ix-pagination-item ix-pagination-item-active\\" title=\\"1\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>1</span></button></li>
<li class=\\"ix-pagination-item\\" title=\\"2\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>2</span></button></li>
<li class=\\"ix-pagination-item\\" title=\\"3\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>3</span></button></li>
<li class=\\"ix-pagination-item\\" title=\\"4\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>4</span></button></li>
<li class=\\"ix-pagination-item\\" title=\\"5\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>5</span></button></li>
<li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"下一页\\"><button class=\\"ix-button ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></button></li>
<li class=\\"ix-pagination-item ix-pagination-item-prev ix-pagination-item-disabled\\" tabindex=\\"-1\\" title=\\"上一页\\"><span class=\\"ix-pagination-item-content\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></span></li>
<li class=\\"ix-pagination-item ix-pagination-item-page ix-pagination-item-active\\" tabindex=\\"0\\" title=\\"1\\"><span class=\\"ix-pagination-item-content\\">1</span></li>
<li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"2\\"><span class=\\"ix-pagination-item-content\\">2</span></li>
<li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"3\\"><span class=\\"ix-pagination-item-content\\">3</span></li>
<li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"4\\"><span class=\\"ix-pagination-item-content\\">4</span></li>
<li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"5\\"><span class=\\"ix-pagination-item-content\\">5</span></li>
<li class=\\"ix-pagination-item ix-pagination-item-next\\" tabindex=\\"0\\" title=\\"下一页\\"><span class=\\"ix-pagination-item-content\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></span></li>
</ul>"
`;
exports[`Pagination > render work 2`] = `
"<ul class=\\"ix-pagination ix-pagination-simple ix-pagination-md\\">
<li class=\\"ix-pagination-total\\">共 50 项</li>
<li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"上一页\\"><button class=\\"ix-button ix-button-disabled ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" disabled=\\"\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></button></li>
<li class=\\"ix-pagination-item ix-pagination-item-prev ix-pagination-item-disabled\\" tabindex=\\"-1\\" title=\\"上一页\\"><span class=\\"ix-pagination-item-content\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></span></li>
<li class=\\"ix-pagination-item\\">1<span class=\\"ix-pagination-item-slash\\">/</span><span>5</span></li>
<li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"下一页\\"><button class=\\"ix-button ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></button></li>
<li class=\\"ix-pagination-item ix-pagination-item-next\\" tabindex=\\"0\\" title=\\"下一页\\"><span class=\\"ix-pagination-item-content\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></span></li>
</ul>"
`;
exports[`Pagination > render work 3`] = `
"<ul class=\\"ix-pagination ix-pagination-md\\">
<li class=\\"ix-pagination-total\\">共 500 项</li>
<li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"上一页\\"><button class=\\"ix-button ix-button-disabled ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" disabled=\\"\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></button></li>
<li class=\\"ix-pagination-item ix-pagination-item-active\\" title=\\"1\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>1</span></button></li>
<li class=\\"ix-pagination-item\\" title=\\"2\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>2</span></button></li>
<li class=\\"ix-pagination-item\\" title=\\"3\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>3</span></button></li>
<li class=\\"ix-pagination-item\\" title=\\"4\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>4</span></button></li>
<li class=\\"ix-pagination-item\\" title=\\"5\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>5</span></button></li>
<li class=\\"ix-pagination-item\\" title=\\"向后 5 页\\"><span class=\\"ix-pagination-item-jumper\\"><button class=\\"ix-button ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-double-right\\" role=\\"img\\" aria-label=\\"double-right\\"></i></button><button class=\\"ix-button ix-button-icon-only ix-button-text ix-button-circle ix-button-sm ix-pagination-item-ellipsis\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-ellipsis\\" role=\\"img\\" aria-label=\\"ellipsis\\"></i></button></span></li>
<li class=\\"ix-pagination-item\\" title=\\"50\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>50</span></button></li>
<li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"下一页\\"><button class=\\"ix-button ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></button></li>
<li class=\\"ix-pagination-sizes\\">每页<div class=\\"ix-pagination-sizes-select-wrapper\\">
<div class=\\"ix-select ix-selector ix-selector-sm ix-selector-single\\">
<!---->
<div class=\\"ix-selector-content\\">
<div class=\\"ix-selector-item\\"><span class=\\"ix-selector-item-label\\">10</span>
<!---->
</div>
<div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\" readonly=\\"\\">
<!---->
</div>
<div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
<li class=\\"ix-pagination-item ix-pagination-item-prev ix-pagination-item-disabled\\" tabindex=\\"-1\\" title=\\"上一页\\"><span class=\\"ix-pagination-item-content\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></span></li>
<li class=\\"ix-pagination-item ix-pagination-item-page ix-pagination-item-active\\" tabindex=\\"0\\" title=\\"1\\"><span class=\\"ix-pagination-item-content\\">1</span></li>
<li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"2\\"><span class=\\"ix-pagination-item-content\\">2</span></li>
<li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"3\\"><span class=\\"ix-pagination-item-content\\">3</span></li>
<li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"4\\"><span class=\\"ix-pagination-item-content\\">4</span></li>
<li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"5\\"><span class=\\"ix-pagination-item-content\\">5</span></li>
<li class=\\"ix-pagination-item ix-pagination-item-next5\\" tabindex=\\"0\\" title=\\"向后 5 页\\"><span class=\\"ix-pagination-item-content\\"><span class=\\" ix-pagination-item-jumper\\"><i class=\\"ix-icon ix-icon-double-right\\" role=\\"img\\" aria-label=\\"double-right\\"></i><i class=\\"ix-icon ix-icon-ellipsis ix-pagination-item-ellipsis\\" role=\\"img\\" aria-label=\\"ellipsis\\"></i></span></span></li>
<li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"50\\"><span class=\\"ix-pagination-item-content\\">50</span></li>
<li class=\\"ix-pagination-item ix-pagination-item-next\\" tabindex=\\"0\\" title=\\"下一页\\"><span class=\\"ix-pagination-item-content\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></span></li>
<li class=\\"ix-pagination-sizes\\">每页<div class=\\"ix-select ix-selector ix-selector-sm ix-selector-single\\">
<!---->
<div class=\\"ix-selector-content\\">
<div class=\\"ix-selector-item\\"><span class=\\"ix-selector-item-label\\">10</span>
<!---->
</div>
<div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\" readonly=\\"\\">
<!---->
</div>
<div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
</div>
<!---->
</div>项</li>
</div>
<!---->项
</li>
<li class=\\"ix-pagination-jumper\\">前往<input class=\\"ix-input ix-input-sm\\">页</li>
</ul>"
`;
10 changes: 5 additions & 5 deletions packages/components/pagination/demo/Basic.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<template>
<IxPagination :total="50" />
<br />
<IxPagination :pageIndex="pageIndex" disabled :total="500" />
<br />
<IxPagination v-model:pageIndex="pageIndex" :total="500" />
<IxSpace vertical block>
<IxPagination :total="500" />
<IxPagination :pageIndex="pageIndex" disabled :total="500" />
<IxPagination v-model:pageIndex="pageIndex" :total="500" />
</IxSpace>
</template>

<script setup lang="ts">
Expand Down
8 changes: 4 additions & 4 deletions packages/components/pagination/demo/Size.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
title:
zh: 迷你版本
en: Small size
zh: 尺寸
en: Size
order: 3
---

## zh

通过设置 `size="sm"` 可以使用迷你版本
分页器共有 3 种尺寸:小、中、大,默认为中

## en

The mini version can be used by setting `size="sm"`.
There are three sizes of pagination: small, medium, and large. The default is medium.
8 changes: 5 additions & 3 deletions packages/components/pagination/demo/Size.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<template>
<IxPagination :total="500" size="sm" />
<br />
<IxPagination :total="500" size="sm" showQuickJumper showSizeChanger />
<IxSpace vertical block>
<IxPagination :total="500" size="sm" showQuickJumper showSizeChanger />
<IxPagination :total="500" size="md" showQuickJumper showSizeChanger />
<IxPagination :total="500" size="lg" showQuickJumper showSizeChanger />
</IxSpace>
</template>
8 changes: 5 additions & 3 deletions packages/components/pagination/demo/SizeChanger.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<template>
<IxPagination showSizeChanger :total="500" />
<br />
<IxPagination v-model:pageSize="pageSize" :pageSizes="[10, 20, 30, 40]" showSizeChanger :total="500" />
<IxSpace vertical block>
<IxPagination showSizeChanger :total="500" />

<IxPagination v-model:pageSize="pageSize" :pageSizes="[10, 20, 30, 40]" showSizeChanger :total="500" />
</IxSpace>
</template>

<script setup lang="ts">
Expand Down
15 changes: 8 additions & 7 deletions packages/components/pagination/demo/Total.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<template>
<IxPagination :total="500" :showTotal="false" />
<br />
<IxPagination :total="500">
<template #total="{ total, range, prefix, suffix }">
<span> {{ range[0] }}-{{ range[1] }} {{ prefix }} {{ total }} {{ suffix }}</span>
</template>
</IxPagination>
<IxSpace vertical block>
<IxPagination :total="500" :showTotal="false" />
<IxPagination :total="500">
<template #total="{ total, range, prefix, suffix }">
<span> {{ range[0] }}-{{ range[1] }} {{ prefix }} {{ total }} {{ suffix }}</span>
</template>
</IxPagination>
</IxSpace>
</template>
1 change: 1 addition & 0 deletions packages/components/pagination/docs/Index.zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,6 @@ type: 导航
order: 0
title: Pagination
subtitle: 分页
theme: true
---

38 changes: 17 additions & 21 deletions packages/components/pagination/docs/Theme.zh.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,20 @@
| 名称 | default | seer | 备注 |
| --- | --- | --- | --- |
| `@pagination-font-size-md` | `@font-size-md` | `@font-size-sm` | - |
| `@pagination-font-size-sm` | `@font-size-sm` | - | - |
| `@pagination-item-icon-font-size` | `@font-size-sm` | - | - |
| `@pagination-item-size-md` | `32px` | - | - |
| `@pagination-item-size-sm` | `24px` | - | - |
| `@pagination-item-padding-md` | `4px` | - | - |
| `@pagination-font-size-sm` | `var(--ix-font-size-sm)` | `var(--ix-font-size-sm)` | - |
| `@pagination-font-size-md` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - |
| `@pagination-font-size-lg` | `var(--ix-font-size-lg)` | `var(--ix-font-size-md)` | - |
| `@pagination-item-padding-sm` | `0` | - | - |
| `@pagination-item-input-width-md` | `48px` | - | - |
| `@pagination-item-input-width-sm` | `40px` | - | - |
| `@pagination-item-active-color` | `@color-white` | `@color-primary` | - |
| `@pagination-item-active-background-color` | `@color-primary` | `@color-primary-l50` | - |
| `@pagination-item-color` | `@color-graphite-d40` | - | - |
| `@pagination-item-background-color` | `tint(@color-primary, 90%)` | - | - |
| `@pagination-item-hover-color` | `@color-graphite-d40` | - | - |
| `@pagination-item-hover-background-color` | `tint(@color-primary, 90%)` | `@color-graphite-l50` | - |
| `@pagination-item-disabled-color` | `@text-color-disabled` | - | - |
| `@pagination-item-disabled-background-color` | `@background-color-disabled` | - | - |
| `@pagination-item-button-hover-color` | `@color-graphite-d20` | - | - |
| `@pagination-item-button-active-color` | `@color-graphite-d20` | - | - |
| `@pagination-item-button-hover-background-color` | `@color-graphite-l50` | - | - |
| `@pagination-total-color` | `@color-graphite-d10` | - | - |
| `@pagination-sizes-color` | `@color-graphite-d10` | - | - |
| `@pagination-item-padding-md` | `var(--ix-spacing-xs)` | - | - |
| `@pagination-item-padding-lg` | `var(--ix-spacing-xs)` | - | - |
| `@pagination-item-content-size-sm` | `24px` | - | - |
| `@pagination-item-content-size-md` | `24px` | - | - |
| `@pagination-item-content-size-lg` | `32px` | - | - |
| `@pagination-item-content-border-radius` | `50%` | - | - |
| `@pagination-item-content-icon-font-size` | `inherit` | `var(--ix-font-size-lg)` | - |
| `@pagination-color-hover` | `var(--ix-text-color)` | `var(--ix-color-primary)` | - |
| `@pagination-color-active` | `var(--ix-text-color-inverse)` | `var(--ix-color-primary)` | - |
| `@pagination-color-disabled` | `var(--ix-text-color-disabled)` | `var(--ix-text-color-disabled)` | - |
| `@pagination-background-color-hover` | `var(--ix-background-color-deep)` | `var(--ix-background-color-light)` | - |
| `@pagination-background-color-active` | `var(--ix-color-primary)` | `var(--ix-color-primary-l50)` | - |
| `@pagination-background-color-disabled` | `var(--ix-background-color-deep)` | `var(--ix-background-color-deep)` | - |
| `@pagination-outline-color` | `var(--ix-color-primary-l10)` | - | - |
12 changes: 9 additions & 3 deletions packages/components/pagination/src/Pagination.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default defineComponent({

const showTotal = computed(() => props.showTotal ?? config.showTotal)
const simple = computed(() => props.simple ?? config.simple)
const size = computed(() => props.size ?? config.size)
const mergedSize = computed(() => props.size ?? config.size)
const showQuickJumper = computed(() => props.showQuickJumper ?? config.showQuickJumper)
const showSizeChanger = computed(() => props.showSizeChanger ?? config.showSizeChanger)

Expand All @@ -45,6 +45,7 @@ export default defineComponent({
config,
locale,
mergedPrefixCls,
mergedSize,
activeIndex,
activeSize,
lastIndex,
Expand All @@ -59,7 +60,7 @@ export default defineComponent({
[prefixCls]: true,
[`${prefixCls}-disabled`]: props.disabled,
[`${prefixCls}-simple`]: simple.value,
[`${prefixCls}-${size.value}`]: true,
[`${prefixCls}-${mergedSize.value}`]: true,
})
})

Expand All @@ -75,7 +76,12 @@ export default defineComponent({
children.push(
<li class={`${prefixCls}-item`}>
{showQuickJumper.value ? (
<ɵInput disabled={props.disabled} size="sm" value={_activeIndex.toString()} onKeydown={jumpToIndex} />
<ɵInput
disabled={props.disabled}
size={mergedSize.value === 'lg' ? 'md' : 'sm'}
value={_activeIndex.toString()}
onKeydown={jumpToIndex}
/>
) : (
_activeIndex
)}
Expand Down

0 comments on commit a05d7b7

Please sign in to comment.