Skip to content

Commit 36abe97

Browse files
dufu1991dufu1991
committed
Update v0.1.3
1 parent 8e2d00f commit 36abe97

File tree

13 files changed

+50
-12
lines changed

13 files changed

+50
-12
lines changed

‎components/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "stdf",
3-
"version": "0.1.2",
3+
"version": "0.1.3",
44
"description": "Mobile Web component library based on Svelte and Tailwind",
55
"main": "index.js",
66
"scripts": {

‎components/src/pagination/Pagination.svelte

+12-8
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,10 @@
6464
// only one page text
6565
export let onePageText = paginationLang.defaultOnlyOnePage;
6666
67+
// 连续模式
68+
// continuous mode
69+
export let continuous = false;
70+
6771
// 总页数
6872
// totalPage
6973
$: totalPage = Math.ceil(total / pageSize);
@@ -235,19 +239,19 @@
235239
<div class="flex-1 py-2 border border-transparent">{onePageText}</div>
236240
{:else if totalPage > 1 && totalPage <= maxShowPage}
237241
{#each new Array(totalPage) as item, index}
238-
<Page active={current === index + 1} {type} {radius} on:click={() => clickItemFunc(index + 1)}>
242+
<Page active={current === index + 1} {type} {radius} on:click={() => !continuous && clickItemFunc(index + 1)}>
239243
{index + 1}
240244
</Page>
241245
{/each}
242246
{:else}
243-
<Page active={current === 1} {type} {radius} on:click={() => clickItemFunc(1)}>1</Page>
247+
<Page active={current === 1} {type} {radius} on:click={() => !continuous && clickItemFunc(1)}>1</Page>
244248
{#if showPreEllipsis}
245249
<!-- svelte-ignore a11y-click-events-have-key-events -->
246250
<div
247251
class="flex-1 py-2 border {showPreOmitPage
248252
? typeClass[type] || typeClass.border
249253
: 'border-transparent' + (type === 'bold' ? ' opacity-50' : '')} {radiusClass[radius] || radiusClass.base}"
250-
on:click={clickPreEllipsisFunc}
254+
on:click={!continuous && clickPreEllipsisFunc}
251255
>
252256
{#if type === 'bold' && showPreOmitPage}
253257
<Icon name="ri-more-fill" size={18} />
@@ -258,14 +262,14 @@
258262
{/if}
259263
{#if !showPreEllipsis && current <= maxShowPage - 1}
260264
{#each new Array(maxShowPage - 3) as item, index}
261-
<Page active={current === index + 2} {type} {radius} on:click={() => clickItemFunc(index + 2)}>
265+
<Page active={current === index + 2} {type} {radius} on:click={() => !continuous && clickItemFunc(index + 2)}>
262266
{index + 2}
263267
</Page>
264268
{/each}
265269
{/if}
266270
{#if middleShowPage.length > 0}
267271
{#each middleShowPage as item, index}
268-
<Page active={index === (middleShowPage.length - 1) / 2} {type} {radius} on:click={() => clickItemFunc(item)}>
272+
<Page active={index === (middleShowPage.length - 1) / 2} {type} {radius} on:click={() => !continuous && clickItemFunc(item)}>
269273
{item}
270274
</Page>
271275
{/each}
@@ -276,7 +280,7 @@
276280
active={current === totalPage + index + 3 - maxShowPage}
277281
{type}
278282
{radius}
279-
on:click={() => clickItemFunc(totalPage + index + 3 - maxShowPage)}
283+
on:click={() => !continuous && clickItemFunc(totalPage + index + 3 - maxShowPage)}
280284
>
281285
{totalPage + index + 3 - maxShowPage}
282286
</Page>
@@ -288,7 +292,7 @@
288292
class="flex-1 py-2 border {showNextOmitPage
289293
? typeClass[type] || typeClass.border
290294
: 'border-transparent' + (type === 'bold' ? ' opacity-50' : '')} {radiusClass[radius] || radiusClass.base}"
291-
on:click={clickNextEllipsisFunc}
295+
on:click={!continuous && clickNextEllipsisFunc}
292296
>
293297
{#if type === 'bold' && showNextOmitPage}
294298
<Icon name="ri-more-fill" size={18} />
@@ -297,7 +301,7 @@
297301
{/if}
298302
</div>
299303
{/if}
300-
<Page active={current === totalPage} {type} {radius} on:click={() => clickItemFunc(totalPage)}>{totalPage}</Page>
304+
<Page active={current === totalPage} {type} {radius} on:click={() => !continuous && clickItemFunc(totalPage)}>{totalPage}</Page>
301305
{/if}
302306
<!-- svelte-ignore a11y-click-events-have-key-events -->
303307
<div

‎demo/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"@sveltejs/vite-plugin-svelte": "^2.0.2",
1414
"autoprefixer": "^10.4.13",
1515
"postcss": "^8.4.19",
16-
"stdf": "^0.1.2",
16+
"stdf": "^0.1.3",
1717
"svelte": "^3.55.1",
1818
"svelte-spa-router": "^3.3.0",
1919
"tailwindcss": "^3.2.4",

‎demo/src/pages/pagination/PaginationDemo.svelte

+4
Original file line numberDiff line numberDiff line change
@@ -124,4 +124,8 @@
124124
</div>
125125
<Pagination {pageSize} total={totalData} on:change={changePageFunc} />
126126

127+
<div class="mx-4 mt-8 font-bold text-lg">连续模式</div>
128+
<div class="mx-4 mb-4 text-xs">只允许点击上下页</div>
129+
<Pagination {total} continuous />
130+
127131
<div class="pb-10" />

‎demo/src/pages/pagination/PaginationDemo_en.svelte

+4
Original file line numberDiff line numberDiff line change
@@ -124,4 +124,8 @@
124124
</div>
125125
<Pagination {pageSize} total={totalData} on:change={changePageFunc} />
126126

127+
<div class="mx-4 mt-8 font-bold text-lg">Continuous mode</div>
128+
<div class="mx-4 mb-4 text-xs">Only click on the previous page and next page</div>
129+
<Pagination {total} continuous />
130+
127131
<div class="pb-10" />

‎doc/components/pagination/api.md

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
| injClass | String | '' | Class | N | 注入 CSS 名称。。 |
1515
| noDataText | String | 当前语言的 common.noData | - | N | 无数据显示文本。 |
1616
| onePageText | String | 当前语言的 pagination.defaultOnlyOnePage | - | N | 仅一页显示文本。 |
17+
| continuous | Boolean | false | true/false | N | 是否是连续模式。 |
1718

1819
## Pagination Events
1920

‎doc/components/pagination/api_en.md

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
| injClass | String | '' | Class | N | Injected CSS class name. |
1515
| noDataText | String | Current language common.noData | - | N | Text to display when there is no data. |
1616
| onePageText | String | Current language pagination.defaultOnlyOnePage | - | N | Text to display when there is only one page. |
17+
| continuous | Boolean | false | true/false | N | Whether it is a continuous mode. |
1718

1819
## Pagination Events
1920

‎doc/components/pagination/guide.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
## 设计思路
22

3-
私以为，分页不应该是上滑加载下一页，这种交互会让用户无心理预期而产生不适，所以 STDF 的分页组件交互须满足以下几个条件：
3+
私以为，分页不应该是上滑加载下一页，这种交互会让用户无心理预期而产生不适，所以 STDF 的分页组件交互默认满足以下几个条件：
44

55
- 页码变化事件必须是用户主动触发。
66
- 无论何时都须同时显示上一页、下一页、首页、尾页、当前页，用户对全部数据有预期且可直接点击跳转到这些关键页码。
77
- 移动端横向显示区域有限，即便如此，也可以通过点击省略页码跳转到任意页码。
88

9+
当然，你也可以配置为**连续模式**，即只允许点击上一页、下一页，比如一些后端接口必须根据上一页数据查询下一页数据的情况。但这样无疑会降低用户体验。
10+
911
## 事件监听
1012

1113
Pagination 组件对外暴露了三个事件：change、next、pre，分别对应页码变化、下一页、上一页。next 和 pre 事件同时也会触发 change 事件，请按需监听。

‎doc/components/pagination/guide_en.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
## Design Concept
22

3-
In my opinion, pagination should not be based on scrolling up to load the next page. This interaction can cause user uncomfortable as there is no psychological expectation. Therefore, the STDF pagination component should meet the following conditions:
3+
In my opinion, pagination should not be based on scrolling up to load the next page. This interaction can cause user uncomfortable as there is no psychological expectation. Therefore, the STDF pagination component meet the following conditions by default:
44

55
- The page change event must be triggered by the user.
66
- The previous page, next page, first page, last page, and current page must always be displayed, and the user can directly click to jump to these key page numbers.
77
- On mobile devices, the horizontal display area is limited. Nevertheless, users can still click on the ellipsis to jump to any page number.
88

9+
Of course, you can also configure it to **continuous mode**, that is, you are only allowed to click on the previous page and the next page. For example, some backend APIs must query the next page of data based on the previous page. But this will undoubtedly reduce the user experience.
10+
911
## Event Listening
1012

1113
The Pagination component exposes three events to the outside: change, next, and pre, corresponding to page number changes, next page, and previous page, respectively. The next and pre events will also trigger the change event, so listen as needed.

‎doc/components/pagination/version.md

+6
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,12 @@
1414
1515
<font size=1>2022-07-18</font> -->
1616

17+
## 0.1.3
18+
19+
- [!tag|A|0|]支持是否使用连续模式，即只允许点击上一页、下一页。
20+
21+
<font size=1>2023-07-16</font>
22+
1723
## 0.1.2
1824

1925
- [!tag|O|0|]细节优化。当 type 为 bold 且展开此省略页码时，省略号 Icon 也会加粗，使其与高亮页码文字样式逻辑匹配。

‎doc/components/pagination/version_en.md

+6
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,12 @@
1414
1515
<font size=1>2022-07-18</font> -->
1616

17+
## 0.1.3
18+
19+
- [!tag|A|0|]Supports whether to use continuous mode, that is, only allows clicking the previous page and the next page.
20+
21+
<font size=1>2023-07-16</font>
22+
1723
## 0.1.2
1824

1925
- [!tag|O|0|]Fine-tune details. When type is set to bold and the ellipsis page numbers are expanded, the ellipsis icon will also be bold, matching the style logic of the highlighted page number text.

‎doc/guide/changelog.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## 0.1.3
2+
3+
- Pagination 新增 Props。详见 [Pagination](https://stdf.design/#/components?nav=pagination&tab=4)。
4+
15
## 0.1.2
26

37
- Pagination 细节优化。详见 [Pagination](https://stdf.design/#/components?nav=pagination&tab=4)。

‎doc/guide/changelog_en.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
## 0.1.3
2+
3+
- Pagination add Props. Please see [Pagination](https://stdf.design/#/components?nav=pagination&tab=4).
4+
15
## 0.1.2
26

37
- Pagination fine-tuning. Please see [Pagination](https://stdf.design/#/components?nav=pagination&tab=4).

0 commit comments

Comments
 (0)