@v-c/pagination 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 antdv-community
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/Options.cjs

@@ -0,0 +1,162 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+let _v_c_util_dist_KeyCode = require("@v-c/util/dist/KeyCode");
+_v_c_util_dist_KeyCode = require_rolldown_runtime.__toESM(_v_c_util_dist_KeyCode);
+var Options = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
+	const defaultPageSizeOptions = [
+		10,
+		20,
+		50,
+		100
+	];
+	const goInputText = (0, vue.ref)("");
+	const getValidValue = (0, vue.computed)(() => {
+		return !goInputText.value || Number.isNaN(goInputText.value) ? void 0 : Number(goInputText.value);
+	});
+	const handleChange = (e) => {
+		const value = e.target.value;
+		if (/^\d*$/.test(value)) goInputText.value = value;
+	};
+	const handleBlur = (e) => {
+		if (props.goButton || goInputText.value === "") return;
+		(0, vue.nextTick)(() => {
+			goInputText.value = "";
+		});
+		const relTarget = e.relatedTarget;
+		if (relTarget && relTarget.className.includes(`${props.rootPrefixCls}-item-link`) || relTarget?.className.includes(`${props.rootPrefixCls}-item`)) return;
+		props.quickGo?.(getValidValue.value);
+	};
+	const getterPageSizeOptions = (0, vue.computed)(() => props.pageSizeOptions || defaultPageSizeOptions);
+	const go = (e) => {
+		if (goInputText.value === "") return;
+		if (e.keyCode === _v_c_util_dist_KeyCode.default.ENTER || e.type === "click") {
+			(0, vue.nextTick)(() => {
+				goInputText.value = "";
+			});
+			props.quickGo?.(getValidValue.value);
+		}
+	};
+	const getPageSizeOptions = () => {
+		if (getterPageSizeOptions.value.some((option) => option.toString() === props.pageSize.toString())) return getterPageSizeOptions.value;
+		return getterPageSizeOptions.value.concat([props.pageSize]).sort((a, b) => {
+			return (Number.isNaN(Number(a)) ? 0 : Number(a)) - (Number.isNaN(Number(b)) ? 0 : Number(b));
+		});
+	};
+	return () => {
+		const { rootPrefixCls, locale, showSizeChanger, disabled, pageSize, quickGo, goButton, buildOptionText, sizeChangerRender, changeSize } = props;
+		const mergeBuildOptionText = typeof buildOptionText === "function" ? buildOptionText : (value) => `${value} ${locale.items_per_page}`;
+		const prefixCls = `${rootPrefixCls}-options`;
+		if (!showSizeChanger && !quickGo) return null;
+		let changeSelect = null;
+		let goInput = null;
+		let gotoButton = null;
+		if (showSizeChanger && sizeChangerRender) changeSelect = sizeChangerRender({
+			"disabled": disabled,
+			"size": pageSize,
+			"onSizeChange": (nextValue) => {
+				changeSize?.(Number(nextValue));
+			},
+			"aria-label": locale.page_size,
+			"className": `${prefixCls}-size-changer`,
+			"options": getPageSizeOptions().map((opt) => ({
+				label: mergeBuildOptionText(opt),
+				value: opt
+			}))
+		});
+		if (quickGo) {
+			if (goButton) gotoButton = typeof goButton === "boolean" ? (0, vue.createVNode)("button", {
+				"type": "button",
+				"onClick": go,
+				"onKeyup": go,
+				"disabled": disabled,
+				"class": `${prefixCls}-quick-jumper-button`
+			}, [locale.jump_to_confirm]) : (0, vue.createVNode)("span", {
+				"onClick": go,
+				"onKeyup": go
+			}, [goButton]);
+			goInput = (0, vue.createVNode)("div", { "class": `${prefixCls}-quick-jumper` }, [
+				locale.jump_to,
+				(0, vue.createVNode)("input", {
+					"disabled": disabled,
+					"type": "text",
+					"value": goInputText.value,
+					"onInput": handleChange,
+					"onKeyup": go,
+					"onBlur": handleBlur,
+					"aria-label": locale.page
+				}, null),
+				locale.page,
+				gotoButton
+			]);
+		}
+		return (0, vue.createVNode)("li", { "class": prefixCls }, [changeSelect, goInput]);
+	};
+}, { props: {
+	disabled: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	},
+	locale: {
+		type: Object,
+		required: true,
+		default: void 0
+	},
+	rootPrefixCls: {
+		type: String,
+		required: true,
+		default: void 0
+	},
+	selectPrefixCls: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	pageSize: {
+		type: Number,
+		required: true,
+		default: void 0
+	},
+	pageSizeOptions: {
+		type: Array,
+		required: false,
+		default: void 0
+	},
+	goButton: {
+		type: [Boolean, String],
+		required: false,
+		skipCheck: true,
+		default: void 0
+	},
+	changeSize: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	quickGo: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	buildOptionText: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	showSizeChanger: {
+		type: Boolean,
+		required: true,
+		default: void 0
+	},
+	sizeChangerRender: {
+		type: Function,
+		required: false,
+		default: void 0
+	}
+} });
+var Options_default = Options;
+exports.default = Options_default;

package/dist/Options.d.ts

@@ -0,0 +1,17 @@
+import { PaginationLocale, SizeChangerRender } from './interface';
+interface OptionsProps {
+    disabled?: boolean;
+    locale: PaginationLocale;
+    rootPrefixCls: string;
+    selectPrefixCls?: string;
+    pageSize: number;
+    pageSizeOptions?: number[];
+    goButton?: boolean | string | any;
+    changeSize?: (size: number) => void;
+    quickGo?: (value: number | undefined) => void;
+    buildOptionText?: (value: number | string) => string;
+    showSizeChanger: boolean;
+    sizeChangerRender?: SizeChangerRender;
+}
+declare const Options: import('vue').DefineSetupFnComponent<OptionsProps, {}, {}, OptionsProps & {}, import('vue').PublicProps>;
+export default Options;

package/dist/Options.js

@@ -0,0 +1,155 @@
+import { computed, createVNode, defineComponent, nextTick, ref } from "vue";
+import KeyCode from "@v-c/util/dist/KeyCode";
+var Options_default = /* @__PURE__ */ defineComponent((props) => {
+	const defaultPageSizeOptions = [
+		10,
+		20,
+		50,
+		100
+	];
+	const goInputText = ref("");
+	const getValidValue = computed(() => {
+		return !goInputText.value || Number.isNaN(goInputText.value) ? void 0 : Number(goInputText.value);
+	});
+	const handleChange = (e) => {
+		const value = e.target.value;
+		if (/^\d*$/.test(value)) goInputText.value = value;
+	};
+	const handleBlur = (e) => {
+		if (props.goButton || goInputText.value === "") return;
+		nextTick(() => {
+			goInputText.value = "";
+		});
+		const relTarget = e.relatedTarget;
+		if (relTarget && relTarget.className.includes(`${props.rootPrefixCls}-item-link`) || relTarget?.className.includes(`${props.rootPrefixCls}-item`)) return;
+		props.quickGo?.(getValidValue.value);
+	};
+	const getterPageSizeOptions = computed(() => props.pageSizeOptions || defaultPageSizeOptions);
+	const go = (e) => {
+		if (goInputText.value === "") return;
+		if (e.keyCode === KeyCode.ENTER || e.type === "click") {
+			nextTick(() => {
+				goInputText.value = "";
+			});
+			props.quickGo?.(getValidValue.value);
+		}
+	};
+	const getPageSizeOptions = () => {
+		if (getterPageSizeOptions.value.some((option) => option.toString() === props.pageSize.toString())) return getterPageSizeOptions.value;
+		return getterPageSizeOptions.value.concat([props.pageSize]).sort((a, b) => {
+			return (Number.isNaN(Number(a)) ? 0 : Number(a)) - (Number.isNaN(Number(b)) ? 0 : Number(b));
+		});
+	};
+	return () => {
+		const { rootPrefixCls, locale, showSizeChanger, disabled, pageSize, quickGo, goButton, buildOptionText, sizeChangerRender, changeSize } = props;
+		const mergeBuildOptionText = typeof buildOptionText === "function" ? buildOptionText : (value) => `${value} ${locale.items_per_page}`;
+		const prefixCls = `${rootPrefixCls}-options`;
+		if (!showSizeChanger && !quickGo) return null;
+		let changeSelect = null;
+		let goInput = null;
+		let gotoButton = null;
+		if (showSizeChanger && sizeChangerRender) changeSelect = sizeChangerRender({
+			"disabled": disabled,
+			"size": pageSize,
+			"onSizeChange": (nextValue) => {
+				changeSize?.(Number(nextValue));
+			},
+			"aria-label": locale.page_size,
+			"className": `${prefixCls}-size-changer`,
+			"options": getPageSizeOptions().map((opt) => ({
+				label: mergeBuildOptionText(opt),
+				value: opt
+			}))
+		});
+		if (quickGo) {
+			if (goButton) gotoButton = typeof goButton === "boolean" ? createVNode("button", {
+				"type": "button",
+				"onClick": go,
+				"onKeyup": go,
+				"disabled": disabled,
+				"class": `${prefixCls}-quick-jumper-button`
+			}, [locale.jump_to_confirm]) : createVNode("span", {
+				"onClick": go,
+				"onKeyup": go
+			}, [goButton]);
+			goInput = createVNode("div", { "class": `${prefixCls}-quick-jumper` }, [
+				locale.jump_to,
+				createVNode("input", {
+					"disabled": disabled,
+					"type": "text",
+					"value": goInputText.value,
+					"onInput": handleChange,
+					"onKeyup": go,
+					"onBlur": handleBlur,
+					"aria-label": locale.page
+				}, null),
+				locale.page,
+				gotoButton
+			]);
+		}
+		return createVNode("li", { "class": prefixCls }, [changeSelect, goInput]);
+	};
+}, { props: {
+	disabled: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	},
+	locale: {
+		type: Object,
+		required: true,
+		default: void 0
+	},
+	rootPrefixCls: {
+		type: String,
+		required: true,
+		default: void 0
+	},
+	selectPrefixCls: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	pageSize: {
+		type: Number,
+		required: true,
+		default: void 0
+	},
+	pageSizeOptions: {
+		type: Array,
+		required: false,
+		default: void 0
+	},
+	goButton: {
+		type: [Boolean, String],
+		required: false,
+		skipCheck: true,
+		default: void 0
+	},
+	changeSize: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	quickGo: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	buildOptionText: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	showSizeChanger: {
+		type: Boolean,
+		required: true,
+		default: void 0
+	},
+	sizeChangerRender: {
+		type: Function,
+		required: false,
+		default: void 0
+	}
+} });
+export { Options_default as default };

package/dist/Pager.cjs

@@ -0,0 +1,80 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+let _v_c_util = require("@v-c/util");
+var Pager = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
+	const handleClick = () => {
+		props.onClick?.(props.page);
+	};
+	const handleKeyPress = (e) => {
+		props.onKeyPress?.(e, props.onClick, props.page);
+	};
+	return () => {
+		const { rootPrefixCls, page, active, className, showTitle, itemRender, style } = props;
+		const prefixCls = `${rootPrefixCls}-item`;
+		const cls = (0, _v_c_util.classNames)(prefixCls, `${prefixCls}-${page}`, {
+			[`${prefixCls}-active`]: active,
+			[`${prefixCls}-disabled`]: !page
+		}, className);
+		const pager = itemRender?.(page, "page", (0, vue.createVNode)("a", { "rel": "nofollow" }, [page]));
+		return pager ? (0, vue.createVNode)("li", {
+			"title": showTitle ? String(page) : void 0,
+			"class": cls,
+			"style": style,
+			"onClick": handleClick,
+			"onKeydown": handleKeyPress,
+			"tabindex": 0
+		}, [pager]) : null;
+	};
+}, { props: {
+	rootPrefixCls: {
+		type: String,
+		required: true,
+		default: void 0
+	},
+	page: {
+		type: Number,
+		required: true,
+		default: void 0
+	},
+	active: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	},
+	className: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	style: {
+		type: Object,
+		required: false,
+		default: void 0
+	},
+	showTitle: {
+		type: Boolean,
+		required: true,
+		default: void 0
+	},
+	onClick: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	onKeyPress: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	itemRender: {
+		type: Function,
+		required: false,
+		default: void 0
+	}
+} });
+var Pager_default = Pager;
+exports.default = Pager_default;

package/dist/Pager.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from 'vue';
+import { PaginationProps } from './interface';
+export interface PagerProps extends Pick<PaginationProps, 'itemRender'> {
+    rootPrefixCls: string;
+    page: number;
+    active?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    showTitle: boolean;
+    onClick?: (page: number) => void;
+    onKeyPress?: (e: KeyboardEvent, onClick: PagerProps['onClick'], page: PagerProps['page']) => void;
+}
+declare const Pager: import('vue').DefineSetupFnComponent<PagerProps, {}, {}, PagerProps & {}, import('vue').PublicProps>;
+export default Pager;

package/dist/Pager.js

@@ -0,0 +1,74 @@
+import { createVNode, defineComponent } from "vue";
+import { classNames } from "@v-c/util";
+var Pager_default = /* @__PURE__ */ defineComponent((props) => {
+	const handleClick = () => {
+		props.onClick?.(props.page);
+	};
+	const handleKeyPress = (e) => {
+		props.onKeyPress?.(e, props.onClick, props.page);
+	};
+	return () => {
+		const { rootPrefixCls, page, 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]));
+		return pager ? createVNode("li", {
+			"title": showTitle ? String(page) : void 0,
+			"class": cls,
+			"style": style,
+			"onClick": handleClick,
+			"onKeydown": handleKeyPress,
+			"tabindex": 0
+		}, [pager]) : null;
+	};
+}, { props: {
+	rootPrefixCls: {
+		type: String,
+		required: true,
+		default: void 0
+	},
+	page: {
+		type: Number,
+		required: true,
+		default: void 0
+	},
+	active: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	},
+	className: {
+		type: String,
+		required: false,
+		default: void 0
+	},
+	style: {
+		type: Object,
+		required: false,
+		default: void 0
+	},
+	showTitle: {
+		type: Boolean,
+		required: true,
+		default: void 0
+	},
+	onClick: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	onKeyPress: {
+		type: Function,
+		required: false,
+		default: void 0
+	},
+	itemRender: {
+		type: Function,
+		required: false,
+		default: void 0
+	}
+} });
+export { Pager_default as default };