[stdf]Update Pagination compoent, demo and documents.

demo/src/routes/en_US/pagination/+page.svelte

@@ -3,42 +3,33 @@
 	import { Pagination, Loading } from '../../../../../packages/stdf/components';
 	import aphorisms from '../../../data/aphorisms';
 
-	// total data number, generally, the back-end interface returns
+	// total, usually from backend
 	const total = 200;
 
-	// Current page number, demo event monitoring
-	let current = 1;
-	const preFunc = e => {
-		current = e.detail;
-	};
-	const nextFunc = e => {
-		current = e.detail;
-	};
-	const changeFunc = e => {
-		current = e.detail;
-	};
+	// current page
+	let current = $state(1);
 
-	// Simulation request data
-	let data = [];
-	let currentPage = 1;
+	// simulate request data
+	let data = $state([]);
+	let currentPage = $state(1);
 	let pageSize = 4;
-	let totalData = 0;
-	let loading = false;
+	let totalData = $state(0);
+	let loading = $state(false);
 	const getData = () => {
 		loading = true;
-		// Simulate a request using setTimeout
+		// use setTimeout to simulate request
 		setTimeout(() => {
 			loading = false;
-			// Randomly extract pageSize pieces of data from aphorisms
+			// get pageSize data from aphorisms randomly
 			data = aphorisms.sort(() => Math.random() - 0.5).slice(0, pageSize);
 			totalData = 64;
 		}, 2000);
 	};
-	const changePageFunc = e => {
-		currentPage = e.detail;
+	const changePageFunc = c => {
+		currentPage = c;
 		getData();
 	};
-	// First page of the initial request
+	// initial request first page
 	onMount(() => {
 		getData();
 	});
@@ -47,67 +38,67 @@
 <div class="m-4 mt-24 font-bold text-lg">Basic usage</div>
 <Pagination {total} />
 
-<div class="mx-4 mt-8 font-bold text-lg">Event monitoring</div>
-<div class="mx-4 mb-2 text-sm">Current page number: {current}</div>
-<Pagination {total} on:pre={preFunc} on:next={nextFunc} on:change={changeFunc} />
+<div class="mx-4 mt-8 font-bold text-lg">Event listening</div>
+<div class="mx-4 mb-2 text-sm">Current page: {current}</div>
+<Pagination {total} onpre={c => (current = c)} onnext={c => (current = c)} onchange={c => (current = c)} />
 
-<div class="mx-4 mt-24 font-bold text-lg">Initially omitting page number</div>
+<div class="mx-4 mt-24 font-bold text-lg">Initial display omitted page</div>
 <div class="mx-4 mb-4 text-xs">Can be used to guide users</div>
 <Pagination {total} showNextOmitPage />
 
-<div class="m-4 mt-8 font-bold text-lg">Set the initial page</div>
+<div class="m-4 mt-8 font-bold text-lg">Set initial page</div>
 <Pagination {total} current={10} />
 
-<div class="mx-4 mt-8 font-bold text-lg">Maximum display 11 pages</div>
-<div class="mx-4 mb-4 text-xs">At the same time display more pages but the page number is small</div>
+<div class="mx-4 mt-8 font-bold text-lg">Max display 11 pages</div>
+<div class="mx-4 mb-4 text-xs">Display more pages but the page number is small</div>
 <Pagination maxShowPage={11} {total} />
 
-<div class="mx-4 mt-8 font-bold text-lg">Maximum display 5 pages</div>
-<div class="mx-4 mb-4 text-xs">Suitable for scenes with smaller paging area</div>
+<div class="mx-4 mt-8 font-bold text-lg">Max display 5 pages</div>
+<div class="mx-4 mb-4 text-xs">Suitable for scenes with a small paging area</div>
 <div class="flex items-center">
-	<div class="px-4">This is my site</div>
+	<div class="px-4">This is my territory</div>
 	<div class="flex-1">
 		<Pagination maxShowPage={5} {total} />
 	</div>
 </div>
 
-<div class="m-4 mt-8 font-bold text-lg">no data</div>
+<div class="m-4 mt-8 font-bold text-lg">No data</div>
 <Pagination total={0} />
 
 <div class="m-4 mt-8 font-bold text-lg">Only one page</div>
 <Pagination total={8} />
 
-<div class="mx-4 mt-8 font-bold text-lg">The total number of pages does not exceed the maximum display page</div>
-<div class="mx-4 mb-4 text-xs">There will be no omit -to -page number</div>
+<div class="mx-4 mt-8 font-bold text-lg">Total pages are less than the maximum display pages</div>
+<div class="mx-4 mb-4 text-xs">No omitted page</div>
 <Pagination total={70} />
 
-<div class="mx-4 mt-8 font-bold text-lg">The total page number exceeds the maximum number of display pages, but not much</div>
-<div class="mx-4 mb-4 text-xs">There will not be two provinces to elaborate before and after the same existence</div>
+<div class="mx-4 mt-8 font-bold text-lg">Total pages are less than the maximum display pages</div>
+<div class="mx-4 mb-4 text-xs">No omitted page</div>
 <Pagination total={90} maxShowPage={7} />
 
-<div class="mx-4 mt-8 font-bold text-lg">A lot of total pages</div>
-<div class="mx-4 mb-4 text-xs">There will be two provinces to omit the page number before and after at the same time</div>
+<div class="mx-4 mt-8 font-bold text-lg">Total pages are many</div>
+<div class="mx-4 mb-4 text-xs">Will exist two omitted pages</div>
 <Pagination {total} />
 
-<div class="m-4 mt-8 font-bold text-lg">Only 3 items per page</div>
+<div class="m-4 mt-8 font-bold text-lg">Each page is only 3 items</div>
 <Pagination total={50} pageSize={3} />
 
-<div class="m-4 mt-8 font-bold text-lg">Gao Liang Page Code is a border</div>
+<div class="m-4 mt-8 font-bold text-lg">Highlighted page is border</div>
 <Pagination {total} type="border" />
 
-<div class="m-4 mt-8 font-bold text-lg">The highlight page number is block shape</div>
+<div class="m-4 mt-8 font-bold text-lg">Highlighted page is block</div>
 <Pagination {total} type="block" />
 
-<div class="m-4 mt-8 font-bold text-lg">Increase high -bright pages round corners</div>
+<div class="m-4 mt-8 font-bold text-lg">Increase the radius of the highlighted page</div>
 <Pagination {total} type="block" radius="xl" />
 
-<div class="m-4 mt-8 font-bold text-lg">Number of omittings is 2</div>
+<div class="m-4 mt-8 font-bold text-lg">Omitted page column is 2</div>
 <Pagination {total} pageCol={2} />
 
-<div class="m-4 mt-8 font-bold text-lg">injection injClass</div>
+<div class="m-4 mt-8 font-bold text-lg">Inject injClass</div>
 <Pagination {total} injClass="mx-2 rounded-full shadow-md dark:shadow-white/10" />
 
-<div class="m-4 mt-8 font-bold text-lg">Simulation request</div>
+<div class="m-4 mt-8 font-bold text-lg">Simulate request</div>
 <div class="px-4 py-8 divide-y divide-black/5 dark:divide-white/5 min-h-[20rem] relative">
 	{#each data as item}
 		<div class:py-6={pageSize > 1}>
@@ -117,15 +108,15 @@
 	{/each}
 	{#if loading}
 		<div class="absolute inset-0 w-full h-full backdrop-blur flex flex-col justify-center gap-8 text-center">
-			<div>Query {currentPage} Page data...</div>
+			<div>Querying the {currentPage} page data...</div>
 			<Loading />
 		</div>
 	{/if}
 </div>
-<Pagination {pageSize} total={totalData} on:change={changePageFunc} />
+<Pagination {pageSize} total={totalData} onchange={changePageFunc} />
 
 <div class="mx-4 mt-8 font-bold text-lg">Continuous mode</div>
-<div class="mx-4 mb-4 text-xs">Only click on the previous page and next page</div>
+<div class="mx-4 mb-4 text-xs">Only allow clicking on the previous and next pages</div>
 <Pagination {total} continuous />
 
-<div class="pb-10" />
+<div class="pb-10"></div>

demo/src/routes/zh_CN/pagination/+page.svelte

@@ -7,23 +7,14 @@
 	const total = 200;
 
 	// 当前页码，演示事件监听
-	let current = 1;
-	const preFunc = e => {
-		current = e.detail;
-	};
-	const nextFunc = e => {
-		current = e.detail;
-	};
-	const changeFunc = e => {
-		current = e.detail;
-	};
+	let current = $state(1);
 
 	// 模拟请求数据
-	let data = [];
-	let currentPage = 1;
+	let data = $state([]);
+	let currentPage = $state(1);
 	let pageSize = 4;
-	let totalData = 0;
-	let loading = false;
+	let totalData = $state(0);
+	let loading = $state(false);
 	const getData = () => {
 		loading = true;
 		// 使用 setTimeout 模拟请求
@@ -34,8 +25,8 @@
 			totalData = 64;
 		}, 2000);
 	};
-	const changePageFunc = e => {
-		currentPage = e.detail;
+	const changePageFunc = c => {
+		currentPage = c;
 		getData();
 	};
 	// 初始请求第一页
@@ -49,7 +40,7 @@
 
 <div class="mx-4 mt-8 font-bold text-lg">事件监听</div>
 <div class="mx-4 mb-2 text-sm">当前页码：{current}</div>
-<Pagination {total} on:pre={preFunc} on:next={nextFunc} on:change={changeFunc} />
+<Pagination {total} onpre={c => (current = c)} onnext={c => (current = c)} onchange={c => (current = c)} />
 
 <div class="mx-4 mt-24 font-bold text-lg">初始展示省略页码</div>
 <div class="mx-4 mb-4 text-xs">可用于引导用户</div>
@@ -122,10 +113,10 @@
 		</div>
 	{/if}
 </div>
-<Pagination {pageSize} total={totalData} on:change={changePageFunc} />
+<Pagination {pageSize} total={totalData} onchange={changePageFunc} />
 
 <div class="mx-4 mt-8 font-bold text-lg">连续模式</div>
 <div class="mx-4 mb-4 text-xs">只允许点击上下页</div>
 <Pagination {total} continuous />
 
-<div class="pb-10" />
+<div class="pb-10"></div>

doc/components/pagination/api.md

@@ -1,25 +1,25 @@
 ## Pagination Props
 
-| 属性             | 类型    | 默认值                                   | 可选值                              | 必传 | 说明                 |
-| ---------------- | ------- | ---------------------------------------- | ----------------------------------- | ---- | -------------------- |
-| total            | Number  | 0                                        | -                                   | Y    | 总条数。             |
-| pageSize         | Number  | 10                                       | -                                   | N    | 每页条数。           |
-| current          | Number  | 1                                        | -                                   | N    | 当前页。             |
-| maxShowPage      | Number  | 7                                        | 5/7/9/11                            | N    | 最大显示页码数。     |
-| radius           | String  | 'md'                                     | 'base'/'md'/'lg'/'xl'/'full'/'none' | N    | 圆角风格。           |
-| type             | String  | 'bold'                                   | 'border'/'block'/'bold'             | N    | 高亮页码类型。       |
-| pageCol          | Number  | 3                                        | -                                   | N    | 省略页码列数。       |
-| showNextOmitPage | Boolean | false                                    | true/false                          | N    | 是否显示后省略页码。 |
-| showPreOmitPage  | Boolean | false                                    | true/false                          | N    | 是否显示前省略页码。 |
-| injClass         | String  | ''                                       | Class                               | N    | 注入 CSS 名称。。    |
-| noDataText       | String  | 当前语言的 common.noData                 | -                                   | N    | 无数据显示文本。     |
-| onePageText      | String  | 当前语言的 pagination.defaultOnlyOnePage | -                                   | N    | 仅一页显示文本。     |
-| continuous       | Boolean | false                                    | true/false                          | N    | 是否是连续模式。     |
+| 名称             | 类型                                                 | 默认值                                   | 必传 | 说明                 |
+| ---------------- | ---------------------------------------------------- | ---------------------------------------- | ---- | -------------------- |
+| total            | `number`                                             | `0`                                      | Y    | 总条数。             |
+| pageSize         | `number`                                             | `10`                                     | N    | 每页条数。           |
+| current          | `number`                                             | `1`                                      | N    | 当前页。             |
+| maxShowPage      | `5` \| `7` \| `9` \| `11`                            | `7`                                      | N    | 最大显示页码数。     |
+| radius           | `'none'`\|`'base'`\|`'md'`\|`'lg'`\|`'xl'`\|`'full'` | `'md'`                                   | N    | 圆角风格。           |
+| type             | `'border'`\|`'block'`\|`'bold'`                      | `'bold'`                                 | N    | 高亮页码类型。       |
+| pageCol          | `number`                                             | `3`                                      | N    | 省略页码列数。       |
+| showNextOmitPage | `boolean`                                            | `false`                                  | N    | 是否显示后省略页码。 |
+| showPreOmitPage  | `boolean`                                            | `false`                                  | N    | 是否显示前省略页码。 |
+| injClass         | `string`                                             | `''`                                     | N    | 注入 CSS 名称。。    |
+| noDataText       | `string`                                             | 当前语言的 common.noData                 | N    | 无数据显示文本。     |
+| onePageText      | `string`                                             | 当前语言的 pagination.defaultOnlyOnePage | N    | 仅一页显示文本。     |
+| continuous       | `boolean`                                            | `false`                                  | N    | 是否是连续模式。     |
 
 ## Pagination Events
 
-| 名称   | 参数                                      | 描述               |
-| ------ | ----------------------------------------- | ------------------ |
-| change | event：事件对象，其中 detail 为当前页码。 | 页码变化时触发。   |
-| next   | event：事件对象，其中 detail 为当前页码。 | 点击下一页时触发。 |
-| pre    | event：事件对象，其中 detail 为当前页码。 | 点击上一页时触发。 |
+| 名称     | 类型                        | 参数               | 描述               |
+| -------- | --------------------------- | ------------------ | ------------------ |
+| onchange | `(current: number) => void` | current - 当前页码 | 页码变化时触发。   |
+| onnext   | `(current: number) => void` | current - 当前页码 | 点击下一页时触发。 |
+| onpre    | `(current: number) => void` | current - 当前页码 | 点击上一页时触发。 |

doc/components/pagination/api_en.md

@@ -1,25 +1,25 @@
 ## Pagination Props
 
-| Property         | Type    | Default Value                                  | Options                             | Required | Description                                                      |
-| ---------------- | ------- | ---------------------------------------------- | ----------------------------------- | -------- | ---------------------------------------------------------------- |
-| total            | Number  | 0                                              | -                                   | Y        | Total number of items.                                           |
-| pageSize         | Number  | 10                                             | -                                   | N        | Number of items per page.                                        |
-| current          | Number  | 1                                              | -                                   | N        | Current page number.                                             |
-| maxShowPage      | Number  | 7                                              | 5/7/9/11                            | N        | Maximum number of page numbers to display.                       |
-| radius           | String  | 'md'                                           | 'base'/'md'/'lg'/'xl'/'full'/'none' | N        | Style of pagination button corners.                              |
-| type             | String  | 'bold'                                         | 'border'/'block'/'bold'             | N        | Style of highlighted page number.                                |
-| pageCol          | Number  | 3                                              | -                                   | N        | Number of columns to display omitted page numbers.               |
-| showNextOmitPage | Boolean | false                                          | true/false                          | N        | Whether to display omitted page numbers after the current page.  |
-| showPreOmitPage  | Boolean | false                                          | true/false                          | N        | Whether to display omitted page numbers before the current page. |
-| injClass         | String  | ''                                             | Class                               | N        | Injected CSS class name.                                         |
-| noDataText       | String  | Current language common.noData                 | -                                   | N        | Text to display when there is no data.                           |
-| onePageText      | String  | Current language pagination.defaultOnlyOnePage | -                                   | N        | Text to display when there is only one page.                     |
-| continuous       | Boolean | false                                          | true/false                          | N        | Whether it is a continuous mode.                                 |
+| Name             | Type                                                 | Default                                          | Required | Description                                  |
+| ---------------- | ---------------------------------------------------- | ------------------------------------------------ | -------- | -------------------------------------------- |
+| total            | `number`                                             | `0`                                              | Y        | Total number of items.                       |
+| pageSize         | `number`                                             | `10`                                             | N        | Number of items per page.                    |
+| current          | `number`                                             | `1`                                              | N        | Current page number.                         |
+| maxShowPage      | `5` \| `7` \| `9` \| `11`                            | `7`                                              | N        | Maximum number of page numbers to display.   |
+| radius           | `'none'`\|`'base'`\|`'md'`\|`'lg'`\|`'xl'`\|`'full'` | `'md'`                                           | N        | Border radius style.                         |
+| type             | `'border'`\|`'block'`\|`'bold'`                      | `'bold'`                                         | N        | Highlighted page number style.               |
+| pageCol          | `number`                                             | `3`                                              | N        | Number of columns for omitted page numbers.  |
+| showNextOmitPage | `boolean`                                            | `false`                                          | N        | Whether to show omitted page numbers after.  |
+| showPreOmitPage  | `boolean`                                            | `false`                                          | N        | Whether to show omitted page numbers before. |
+| injClass         | `string`                                             | `''`                                             | N        | Inject CSS class name.                       |
+| noDataText       | `string`                                             | Current language's common.noData                 | N        | Text to display when no data.                |
+| onePageText      | `string`                                             | Current language's pagination.defaultOnlyOnePage | N        | Text to display when only one page.          |
+| continuous       | `boolean`                                            | `false`                                          | N        | Whether to use continuous mode.              |
 
 ## Pagination Events
 
-| Name   | Parameter(s)                                     | Description                                      |
-| ------ | ------------------------------------------------ | ------------------------------------------------ |
-| change | event: Event object, detail: current page number | Triggered when the page number is changed.       |
-| next   | event: Event object, detail: current page number | Triggered when the "next" button is clicked.     |
-| pre    | event: Event object, detail: current page number | Triggered when the "previous" button is clicked. |
+| Name     | Type                        | Parameters                    | Description                            |
+| -------- | --------------------------- | ----------------------------- | -------------------------------------- |
+| onchange | `(current: number) => void` | current - Current page number | Triggered when page number changes.    |
+| onnext   | `(current: number) => void` | current - Current page number | Triggered when clicking next page.     |
+| onpre    | `(current: number) => void` | current - Current page number | Triggered when clicking previous page. |

doc/components/pagination/guide.md

@@ -10,9 +10,11 @@
 
 当然，你也可以配置为**连续模式**，即只允许点击上一页、下一页，比如一些后端接口必须根据上一页数据查询下一页数据的情况。但这样无疑会降低用户体验。
 
+> To be in charge, the user must be informed. When, for example, the user initiates an operation, immediate feedback confirms that the operation is being carried out, and (eventually) then it’s finished… This communication should be brief, direct, and expressed in the user’s vocabulary rather than the programmer’s. (Apple Human Interface Guidelines)
+
 ## 事件监听
 
-Pagination 组件对外暴露了三个事件：change、next、pre，分别对应页码变化、下一页、上一页。next 和 pre 事件同时也会触发 change 事件，请按需监听。
+Pagination 组件对外暴露了三个事件：onchange、onnext、onpre，分别对应页码变化、下一页、上一页。onnext 和 onpre 事件都会触发 onchange 事件，请按需监听。
 
 ## total
 

doc/components/pagination/guide_en.md

@@ -10,9 +10,11 @@ In my opinion, pagination should not be based on scrolling up to load the next p
 
 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.
 
+> To be in charge, the user must be informed. When, for example, the user initiates an operation, immediate feedback confirms that the operation is being carried out, and (eventually) then it’s finished… This communication should be brief, direct, and expressed in the user’s vocabulary rather than the programmer’s. (Apple Human Interface Guidelines)
+
 ## Event Listening
 
-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.
+The Pagination component exposes three events to the outside: onchange, onnext, and onpre, corresponding to page number changes, next page, and previous page, respectively. The onnext and onpre events will also trigger the onchange event, so listen as needed.
 
 ## total
 

packages/stdf/components/pagination/Page.svelte

@@ -7,7 +7,6 @@
 	 * @property {import('svelte').Snippet} [children]
 	 * @property {() => void} [onclick]
 	 */
-
 	/** @type {Props} */
 	let { active = false, radius = 'md', type = 'border', children, onclick } = $props();
 
@@ -20,13 +19,11 @@
 	const radiusClass = { base: 'rounded', md: 'rounded-md', lg: 'rounded-lg', xl: 'rounded-xl', full: 'rounded-full', none: 'rounded-none' };
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
+<button
 	{onclick}
-	class="flex-1 py-2 border cursor-pointer {active
+	class="flex-1 py-2 border {active
 		? typeClass[type] || typeClass.border
 		: 'border-transparent' + (type === 'bold' ? ' opacity-50' : '')} {radiusClass[radius] || radiusClass.base}"
 >
 	{@render children?.()}
-</div>
+</button>

packages/stdf/components/pagination/Pagination.svelte

@@ -57,9 +57,9 @@
 	// next ellipsis page array
 	let nextEllipsisPages = $state([]);
 
-	// 当页码变化时对一系列数据动态计算
-	// Dynamic calculation of a series of data when the page number changes
 	$effect(() => {
+		// 当页码变化时对一系列数据动态计算
+		// Dynamic calculation of a series of data when the page number changes
 		if (showPreEllipsis && showNextEllipsis) {
 			if (maxShowPage === 5) {
 				middleShowPage = [current];
@@ -73,6 +73,9 @@
 		} else {
 			middleShowPage = [];
 		}
+	});
+
+	$effect(() => {
 		// 当仅显示后省略号时
 		// when only show next ellipsis
 		if (!showPreEllipsis && showNextEllipsis) {
@@ -80,6 +83,8 @@
 			// nextEllipsisPages is maxShowPage - 2 to total page - 1
 			nextEllipsisPages = Array.from({ length: totalPage }, (v, k) => k + 1).slice(maxShowPage - 2, totalPage - 1);
 		}
+	});
+	$effect(() => {
 		// 当仅显示前省略号时
 		// when only show pre ellipsis
 		if (showPreEllipsis && !showNextEllipsis) {
@@ -87,6 +92,8 @@
 			// preEllipsisPages is 2 to total page - (maxShowPage-2)
 			preEllipsisPages = Array.from({ length: totalPage }, (v, k) => k + 1).slice(1, totalPage - (maxShowPage - 2));
 		}
+	});
+	$effect(() => {
 		// 当显示前后省略号时
 		// when show pre and next ellipsis
 		if (showPreEllipsis && showNextEllipsis) {
@@ -102,9 +109,9 @@
 		}
 	});
 
-	// 特殊情况处理
-	// Special case handling
 	$effect(() => {
+		// 特殊情况处理
+		// Special case handling
 		if (totalPage <= maxShowPage) {
 			showNextOmitPage = false;
 		}
@@ -128,7 +135,7 @@
 
 	// 页码改变的回调，参数是改变后的页码及每页条数
 	// onChange
-	const onChange = () => {
+	const onChangeFn = () => {
 		showNextOmitPage = false;
 		showPreOmitPage = false;
 		onchange && onchange(current);
@@ -140,7 +147,7 @@
 		if (current < totalPage) {
 			current++;
 			onnext && onnext(current);
-			onChange();
+			onChangeFn();
 		}
 	};
 
@@ -150,7 +157,7 @@
 		if (current > 1) {
 			current--;
 			onpre && onpre(current);
-			onChange();
+			onChangeFn();
 		}
 	};
 
@@ -158,16 +165,16 @@
 	// click page
 	const clickItemFunc = index => {
 		current = index;
-		onChange();
+		onChangeFn();
 	};
 
 	// 点击省略页码事件
 	// click second page item event
-	const clickSecondPageItemFunc = e => {
-		current = e.detail;
+	const clickSecondPageItemFunc = index => {
+		current = index;
 		showNextOmitPage = false;
 		showPreOmitPage = false;
-		onChange();
+		onChangeFn();
 	};
 
 	// 类型样式
@@ -184,22 +191,19 @@
 </script>
 
 <div class="py-1 bg-white dark:bg-black flex justify-between text-center text-sm relative {injClass}">
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div
+	<button
 		class="flex-1 py-2 border border-transparent transition-all {current > 1
 			? 'text-primary dark:text-dark'
 			: 'text-primary/30 dark:text-dark/30'} {radiusClass[radius] || radiusClass.base} active:scale-75"
 		onclick={preFunc}
 	>
 		<Icon name="ri-arrow-left-s-line" size={18} />
-	</div>
+	</button>
 	{#if totalPage === 0}
 		<div class="flex-1 py-2 border border-transparent">{noDataText}</div>
 	{:else if totalPage === 1}
 		<div class="flex-1 py-2 border border-transparent">{onePageText}</div>
 	{:else if totalPage > 1 && totalPage <= maxShowPage}
-		<!-- eslint-disable-next-line no-unused-vars -->
 		{#each new Array(totalPage) as item, index}
 			<Page active={current === index + 1} {type} {radius} onclick={() => !continuous && clickItemFunc(index + 1)}>
 				{index + 1}
@@ -208,9 +212,7 @@
 	{:else}
 		<Page active={current === 1} {type} {radius} onclick={() => !continuous && clickItemFunc(1)}>1</Page>
 		{#if showPreEllipsis}
-			<!-- svelte-ignore a11y_click_events_have_key_events -->
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div
+			<button
 				class="flex-1 py-2 border {showPreOmitPage
 					? typeClass[type] || typeClass.border
 					: 'border-transparent' + (type === 'bold' ? ' opacity-50' : '')} {radiusClass[radius] || radiusClass.base}"
@@ -221,10 +223,9 @@
 				{:else}
 					<Icon name="ri-more-line" size={18} />
 				{/if}
-			</div>
+			</button>
 		{/if}
 		{#if !showPreEllipsis && current <= maxShowPage - 1}
-			<!-- eslint-disable-next-line no-unused-vars -->
 			{#each new Array(maxShowPage - 3) as item, index}
 				<Page active={current === index + 2} {type} {radius} onclick={() => !continuous && clickItemFunc(index + 2)}>
 					{index + 2}
@@ -239,7 +240,6 @@
 			{/each}
 		{/if}
 		{#if !showNextEllipsis && current > totalPage - (maxShowPage - 3)}
-			<!-- eslint-disable-next-line no-unused-vars -->
 			{#each new Array(maxShowPage - 3) as item, index}
 				<Page
 					active={current === totalPage + index + 3 - maxShowPage}
@@ -252,9 +252,7 @@
 			{/each}
 		{/if}
 		{#if showNextEllipsis}
-			<!-- svelte-ignore a11y_click_events_have_key_events -->
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div
+			<button
 				class="flex-1 py-2 border {showNextOmitPage
 					? typeClass[type] || typeClass.border
 					: 'border-transparent' + (type === 'bold' ? ' opacity-50' : '')} {radiusClass[radius] || radiusClass.base}"
@@ -265,20 +263,18 @@
 				{:else}
 					<Icon name="ri-more-line" size={18} />
 				{/if}
-			</div>
+			</button>
 		{/if}
 		<Page active={current === totalPage} {type} {radius} onclick={() => !continuous && clickItemFunc(totalPage)}>{totalPage}</Page>
 	{/if}
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div
+	<button
 		class="flex-1 py-2 border border-transparent transition-all {current < totalPage
 			? 'text-primary dark:text-dark'
 			: 'text-primary/30 dark:text-dark/30'} {radiusClass[radius] || radiusClass.base} active:scale-75"
 		onclick={nextFunc}
 	>
 		<Icon name="ri-arrow-right-s-line" size={20} />
-	</div>
+	</button>
 	{#if showNextOmitPage}
 		<SecondPageNext {pageCol} Pages={nextEllipsisPages} {type} {radius} onclickItem={clickSecondPageItemFunc} {maxShowPage} />
 	{/if}

packages/stdf/components/pagination/SecondPageNext.svelte

@@ -10,15 +10,8 @@
 	 * @property {string} [type]
 	 * @property {(index: number) => void} [onclickItem]
 	 */
-
 	/** @type {Props} */
 	let { pageCol = 3, Pages = [], maxShowPage = 9, radius = 'md', type = 'bold', onclickItem } = $props();
-
-	// 点击页码
-	// click page
-	const clickItemFunc = index => {
-		onclickItem && onclickItem(index);
-	};
 </script>
 
 {#if Pages.length > 0}
@@ -28,7 +21,7 @@
 			100}%;grid-template-columns: repeat({pageCol}, minmax(0, 1fr));"
 	>
 		{#each Pages as item}
-			<Page onclick={() => clickItemFunc(item)} {type} {radius}>{item}</Page>
+			<Page onclick={() => onclickItem && onclickItem(item)} {type} {radius}>{item}</Page>
 		{/each}
 	</div>
 	<div

packages/stdf/components/pagination/SecondPagePre.svelte

@@ -10,15 +10,8 @@
 	 * @property {string} [type]
 	 * @property {(index: number) => void} [onclickItem]
 	 */
-
 	/** @type {Props} */
 	let { pageCol = 3, Pages = [], maxShowPage = 7, radius = 'md', type = 'bold', onclickItem } = $props();
-
-	// 点击页码
-	// click page
-	const clickItemFunc = index => {
-		onclickItem && onclickItem(index);
-	};
 </script>
 
 {#if Pages.length > 0}
@@ -28,7 +21,7 @@
 			100}%;grid-template-columns: repeat({pageCol}, minmax(0, 1fr));"
 	>
 		{#each Pages as item}
-			<Page onclick={() => clickItemFunc(item)} {type} {radius}>{item}</Page>
+			<Page onclick={() => onclickItem && onclickItem(item)} {type} {radius}>{item}</Page>
 		{/each}
 	</div>
 	<div