@v-c/pagination 1.0.1 → 1.1.0

package/dist/Pager.d.ts

@@ -3,6 +3,8 @@ import { PaginationProps } from './interface';
 export interface PagerProps extends Pick<PaginationProps, 'itemRender'> {
     rootPrefixCls: string;
     page: number;
+    /** Localized word for "page", prefixed to the number in the accessible name. */
+    pageLabel?: string;
     active?: boolean;
     className?: string;
     style?: CSSProperties;

package/dist/Pager.js

@@ -9,20 +9,28 @@ var Pager = /* @__PURE__ */ defineComponent((props) => {
 		props.onKeyPress?.(e, props.onClick, props.page);
 	};
 	return () => {
-		const { rootPrefixCls, page, active, className, showTitle, itemRender, style } = props;
+		const { rootPrefixCls, page, pageLabel, active, className, showTitle, itemRender, style } = props;
 		const prefixCls = `${rootPrefixCls}-item`;
 		const cls = classNames(prefixCls, `${prefixCls}-${page}`, {
 			[`${prefixCls}-active`]: active,
 			[`${prefixCls}-disabled`]: !page
 		}, className);
-		const pager = itemRender?.(page, "page", createVNode("a", { "rel": "nofollow" }, [page]));
+		const pager = itemRender?.(page, "page", createVNode("a", {
+			"tabindex": -1,
+			"aria-hidden": "true",
+			"rel": "nofollow"
+		}, [page]));
+		const pagerLabel = `${pageLabel ?? ""} ${page}`.trim();
 		return pager ? createVNode("li", {
 			"title": showTitle ? String(page) : void 0,
 			"class": cls,
 			"style": style,
 			"onClick": handleClick,
 			"onKeydown": handleKeyPress,
-			"tabindex": 0
+			"tabindex": 0,
+			"role": "button",
+			"aria-label": pagerLabel,
+			"aria-current": active ? "page" : void 0
 		}, [pager]) : null;
 	};
 }, { props: {
@@ -34,6 +42,11 @@ var Pager = /* @__PURE__ */ defineComponent((props) => {
 		type: Number,
 		required: true
 	},
+	pageLabel: {
+		type: String,
+		required: false,
+		default: void 0
+	},
 	active: {
 		type: Boolean,
 		required: false,

package/dist/Pagination.js

@@ -1,5 +1,6 @@
 import Options from "./Options.js";
 import Pager from "./Pager.js";
+import isEnterOrSpaceKey from "./isEnterOrSpaceKey.js";
 import locale from "./locale/zh_CN.js";
 import { computed, createTextVNode, createVNode, defineComponent, h, isVNode, mergeProps, ref, toRef, watchEffect } from "vue";
 import KeyCode from "@v-c/util/dist/KeyCode";
@@ -71,11 +72,13 @@ var Pagination = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 	function isValid(page) {
 		return isInteger(page) && page !== current.value && isInteger(mergedTotal.value) && mergedTotal.value > 0;
 	}
-	function getItemIcon(icon, label) {
+	function getItemIcon(icon, _label, title) {
 		const prefixCls = mergedPrefixCls.value;
 		let iconNode = icon || createVNode("button", {
 			"type": "button",
-			"aria-label": label,
+			"tabindex": -1,
+			"aria-hidden": "true",
+			"title": title,
 			"class": `${prefixCls}-item-link`
 		}, null);
 		if (typeof icon === "function") iconNode = h(icon, { ...props });
@@ -113,29 +116,36 @@ var Pagination = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 	function jumpNextHandle() {
 		handleChange(jumpNextPage.value);
 	}
-	function runIfEnter(event, callback, ...restParams) {
-		if (event.key === "Enter" || event.charCode === KeyCode.ENTER || event.keyCode === KeyCode.ENTER) callback(...restParams);
+	function runIfEnterOrSpace(event, callback, ...restParams) {
+		if (isEnterOrSpaceKey(event)) {
+			event.preventDefault();
+			callback(...restParams);
+		}
 	}
 	function runIfEnterPrev(event) {
-		runIfEnter(event, prevHandle);
+		runIfEnterOrSpace(event, prevHandle);
 	}
 	function runIfEnterNext(event) {
-		runIfEnter(event, nextHandle);
+		runIfEnterOrSpace(event, nextHandle);
 	}
 	function runIfEnterJumpPrev(event) {
-		runIfEnter(event, jumpPrevHandle);
+		runIfEnterOrSpace(event, jumpPrevHandle);
 	}
 	function runIfEnterJumpNext(event) {
-		runIfEnter(event, jumpNextHandle);
+		runIfEnterOrSpace(event, jumpNextHandle);
 	}
 	function renderPrev(prevPage) {
-		const prevButton = (props.itemRender || defaultItemRender)?.(prevPage, "prev", getItemIcon(props.prevIcon, "prev page"));
+		const itemRender = props.itemRender || defaultItemRender;
+		const prevPageTitle = mergedLocale.value.prev_page || "prev page";
+		const prevButton = itemRender?.(prevPage, "prev", getItemIcon(props.prevIcon, prevPageTitle, mergedShowTitle.value ? prevPageTitle : void 0));
 		const nextProps = {};
 		if (!hasPrev.value) nextProps.disabled = true;
 		return isVNode(prevButton) ? cloneElement(prevButton, nextProps) : prevButton;
 	}
 	function renderNext(nextPage) {
-		const nextButton = (props.itemRender || defaultItemRender)?.(nextPage, "next", getItemIcon(props.nextIcon, "next page"));
+		const itemRender = props.itemRender || defaultItemRender;
+		const nextPageTitle = mergedLocale.value.next_page || "next page";
+		const nextButton = itemRender?.(nextPage, "next", getItemIcon(props.nextIcon, nextPageTitle, mergedShowTitle.value ? nextPageTitle : void 0));
 		const nextProps = {};
 		if (!hasNext.value) nextProps.disabled = true;
 		return isVNode(nextButton) ? cloneElement(nextButton, nextProps) : nextButton;
@@ -170,13 +180,15 @@ var Pagination = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 		handleChange(getValidValue(event));
 	}
 	function changePageSize(size) {
+		const preservedPage = Math.floor((current.value - 1) * pageSize.value / size) + 1;
 		const newCurrent = calculatePage(size, pageSize.value, mergedTotal.value);
+		const recommendPage = newCurrent === 0 ? 1 : Math.min(preservedPage, newCurrent);
 		const nextCurrent = current.value > newCurrent && newCurrent !== 0 ? newCurrent : current.value;
 		setPageSize(size);
 		internalInputVal.value = nextCurrent;
 		props.onShowSizeChange?.(current.value, size);
 		setCurrent(nextCurrent);
-		props.onChange?.(nextCurrent, size);
+		props.onChange?.(nextCurrent, size, { recommendPage });
 	}
 	const shouldDisplayQuickJumper = computed(() => mergedTotal.value > pageSize.value ? props.showQuickJumper : false);
 	return () => {
@@ -205,13 +217,14 @@ var Pagination = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 				return prev;
 			})();
 			prev = createVNode("li", {
-				"title": showTitle ? locale?.prev_page : void 0,
 				"onClick": prevHandle,
 				"tabindex": prevDisabled ? void 0 : 0,
 				"onKeydown": runIfEnterPrev,
 				"class": classNames(`${prefixCls}-prev`, itemClassName, { [`${prefixCls}-disabled`]: prevDisabled }),
 				"style": itemStyle,
-				"aria-disabled": prevDisabled
+				"aria-disabled": prevDisabled,
+				"role": "button",
+				"aria-label": locale?.prev_page
 			}, [prev]);
 		}
 		let next = renderNext(nextPage.value);
@@ -228,13 +241,14 @@ var Pagination = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 				return next;
 			})();
 			next = createVNode("li", {
-				"title": showTitle ? locale?.next_page : void 0,
 				"onClick": nextHandle,
 				"tabindex": nextTabIndex ?? void 0,
 				"onKeydown": runIfEnterNext,
 				"class": classNames(`${prefixCls}-next`, itemClassName, { [`${prefixCls}-disabled`]: nextDisabled }),
 				"style": itemStyle,
-				"aria-disabled": nextDisabled
+				"aria-disabled": nextDisabled,
+				"role": "button",
+				"aria-label": locale?.next_page
 			}, [next]);
 		}
 		const totalText = showTotal && createVNode("li", { "class": `${prefixCls}-total-text` }, [showTotal(total, [total === 0 ? 0 : (current.value - 1) * pageSize.value + 1, current.value * pageSize.value > total ? total : current.value * pageSize.value])]);
@@ -283,9 +297,10 @@ var Pagination = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 		const pagerProps = {
 			rootPrefixCls: prefixCls,
 			onClick: handleChange,
-			onKeyPress: runIfEnter,
+			onKeyPress: runIfEnterOrSpace,
 			showTitle,
 			itemRender: mergedItemRender,
+			pageLabel: locale?.page,
 			page: -1,
 			className: itemClassName,
 			style: itemStyle
@@ -306,26 +321,28 @@ var Pagination = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 		} else {
 			const prevItemTitle = showLessItems ? locale?.prev_3 : locale?.prev_5;
 			const nextItemTitle = showLessItems ? locale?.next_3 : locale?.next_5;
-			const jumpPrevContent = mergedItemRender(jumpPrevPage.value, "jump-prev", getItemIcon(jumpPrevIcon, "prev page"));
-			const jumpNextContent = mergedItemRender(jumpNextPage.value, "jump-next", getItemIcon(jumpNextIcon, "next page"));
+			const jumpPrevContent = mergedItemRender(jumpPrevPage.value, "jump-prev", getItemIcon(jumpPrevIcon, prevItemTitle, showTitle ? prevItemTitle : void 0));
+			const jumpNextContent = mergedItemRender(jumpNextPage.value, "jump-next", getItemIcon(jumpNextIcon, nextItemTitle, showTitle ? nextItemTitle : void 0));
 			let jumpPrev = null;
 			let jumpNext = null;
 			if (showPrevNextJumpers) {
 				jumpPrev = jumpPrevContent ? createVNode("li", {
-					"title": showTitle ? prevItemTitle : void 0,
 					"key": "prev",
 					"onClick": jumpPrevHandle,
 					"tabindex": 0,
 					"onKeydown": runIfEnterJumpPrev,
-					"class": classNames(`${prefixCls}-jump-prev`, { [`${prefixCls}-jump-prev-custom-icon`]: !!jumpPrevIcon })
+					"class": classNames(`${prefixCls}-jump-prev`, { [`${prefixCls}-jump-prev-custom-icon`]: !!jumpPrevIcon }),
+					"role": "button",
+					"aria-label": prevItemTitle
 				}, [jumpPrevContent]) : null;
 				jumpNext = jumpNextContent ? createVNode("li", {
-					"title": showTitle ? nextItemTitle : void 0,
 					"key": "next",
 					"onClick": jumpNextHandle,
 					"tabindex": 0,
 					"onKeydown": runIfEnterJumpNext,
-					"class": classNames(`${prefixCls}-jump-next`, { [`${prefixCls}-jump-next-custom-icon`]: !!jumpNextIcon })
+					"class": classNames(`${prefixCls}-jump-next`, { [`${prefixCls}-jump-next-custom-icon`]: !!jumpNextIcon }),
+					"role": "button",
+					"aria-label": nextItemTitle
 				}, [jumpNextContent]) : null;
 			}
 			let left = Math.max(1, current.value - pageBufferSize);

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export type { PaginationData, PaginationLocale, PaginationProps } from './interface';
+export type { PaginationData, PaginationLocale, PaginationOnChangeInfo, PaginationProps } from './interface';
 export { default } from './Pagination';

package/dist/interface.d.ts

@@ -45,8 +45,11 @@ export interface PaginationData {
     jumpPrevIcon: VueNode;
     jumpNextIcon: VueNode;
 }
+export interface PaginationOnChangeInfo {
+    recommendPage?: number;
+}
 export interface PaginationProps extends Partial<PaginationData> {
-    onChange?: (page: number, pageSize: number) => void;
+    onChange?: (page: number, pageSize: number, info?: PaginationOnChangeInfo) => void;
     onShowSizeChange?: (current: number, size: number) => void;
     itemRender?: (page: number, type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next', element: VueNode) => VueNode;
     showTotal?: (total: number, range: [number, number]) => VueNode;

package/dist/isEnterOrSpaceKey.d.ts

@@ -0,0 +1,7 @@
+interface KeyboardEventLike {
+    key?: string;
+    charCode?: number;
+    keyCode?: number;
+}
+export default function isEnterOrSpaceKey(event: KeyboardEventLike): boolean;
+export {};

package/dist/isEnterOrSpaceKey.js

@@ -0,0 +1,7 @@
+import KeyCode from "@v-c/util/dist/KeyCode";
+//#region src/isEnterOrSpaceKey.ts
+function isEnterOrSpaceKey(event) {
+	return event.key === "Enter" || event.key === " " || event.key === "Spacebar" || event.charCode === KeyCode.ENTER || event.keyCode === KeyCode.ENTER;
+}
+//#endregion
+export { isEnterOrSpaceKey as default };

package/package.json

@@ -1,7 +1,13 @@
 {
   "name": "@v-c/pagination",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.1.0",
+  "license": "MIT",
+  "homepage": "https://github.com/antdv-next/vue-components/tree/next/packages/pagination",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/antdv-next/vue-components.git"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -43,7 +49,7 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/util": "^1.0.19"
+    "@v-c/util": "^1.1.0"
   },
   "scripts": {
     "build": "vite build",