@vizejs/ui 0.387.0 → 0.388.0

package/dist/pagination-Bs4SBSE4.mjs

@@ -0,0 +1,791 @@
+import { a as useDeterministicId, n as deriveDeterministicId } from "./deterministic-id-yMq4HfmS.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { createContext } from "./context.mjs";
+import { useControllableState } from "./controllable-state.mjs";
+import { computed, createBlock, createElementBlock, createTextVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, unref, useTemplateRef, withCtx } from "vue";
+//#region src/families/navigation/pagination/pagination-context.ts
+const paginationContext = createContext("Pagination");
+//#endregion
+//#region src/families/navigation/pagination/pagination-range.ts
+/** Normalize an arbitrary page count into a finite positive integer. */
+function normalizePaginationPageCount(value) {
+	if (!Number.isFinite(value)) return 1;
+	const integer = Math.trunc(value);
+	return integer < 1 ? 1 : integer;
+}
+/** Clamp a page value into the current page-count range. */
+function normalizePaginationPage(value, pageCount) {
+	const normalizedCount = normalizePaginationPageCount(pageCount);
+	if (value == null || !Number.isFinite(value)) return 1;
+	const integer = Math.trunc(value);
+	if (integer < 1) return 1;
+	return integer > normalizedCount ? normalizedCount : integer;
+}
+/** Return an in-range page number, or `null` when a control points outside the range. */
+function toPaginationPageInRange(value, pageCount) {
+	if (!Number.isFinite(value)) return null;
+	const integer = Math.trunc(value);
+	if (integer < 1 || integer > normalizePaginationPageCount(pageCount)) return null;
+	return integer;
+}
+/** Return a deterministic page id segment that never collides with valid page ids. */
+function getPaginationPageIdSegment(value, pageCount) {
+	if (!Number.isFinite(value)) return `page-invalid-${String(value).toLowerCase()}`;
+	const integer = Math.trunc(value);
+	if (integer < 1) return `page-before-${Math.abs(integer)}`;
+	if (integer > normalizePaginationPageCount(pageCount)) return `page-after-${integer}`;
+	return `page-${integer}`;
+}
+/** Create a deterministic compact page range with one-page gaps expanded. */
+function createPaginationRange(options) {
+	const pageCount = normalizePaginationPageCount(options.pageCount);
+	const page = normalizePaginationPage(options.page, pageCount);
+	const siblingCount = normalizeMargin(options.siblingCount ?? 1);
+	const boundaryCount = normalizeMargin(options.boundaryCount ?? 1);
+	const visible = /* @__PURE__ */ new Set();
+	addPages(visible, 1, boundaryCount, pageCount);
+	addPages(visible, pageCount - boundaryCount + 1, pageCount, pageCount);
+	addPages(visible, page - siblingCount, page + siblingCount, pageCount);
+	const pages = [...visible].sort((left, right) => left - right);
+	const range = [];
+	let previous = null;
+	for (const next of pages) {
+		if (previous !== null) {
+			const gap = next - previous;
+			if (gap === 2) range.push(createPage(previous + 1));
+			else if (gap > 2) range.push(createEllipsis(previous >= page ? "end" : "start"));
+		}
+		range.push(createPage(next));
+		previous = next;
+	}
+	return range;
+}
+function normalizeMargin(value) {
+	if (!Number.isFinite(value)) return 0;
+	const integer = Math.trunc(value);
+	return integer < 0 ? 0 : integer;
+}
+function addPages(target, start, end, pageCount) {
+	const first = Math.max(1, start);
+	const last = Math.min(pageCount, end);
+	for (let page = first; page <= last; page++) target.add(page);
+}
+function createPage(page) {
+	return {
+		key: `page-${page}`,
+		page,
+		type: "page"
+	};
+}
+function createEllipsis(position) {
+	return {
+		key: `ellipsis-${position}`,
+		position,
+		type: "ellipsis"
+	};
+}
+//#endregion
+//#region src/families/navigation/pagination/pagination.vue
+var pagination_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "pagination",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		pageCount: {
+			type: Number,
+			required: true
+		},
+		modelValue: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		defaultValue: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		label: {
+			type: String,
+			required: false,
+			default: "Pagination"
+		},
+		siblingCount: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		boundaryCount: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "nav"
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const element = useTemplateRef("element");
+		const baseId = useDeterministicId({
+			id: () => __props.id,
+			hint: "pagination"
+		});
+		const listId = computed(() => deriveDeterministicId(baseId.value, "list"));
+		const previousId = computed(() => deriveDeterministicId(baseId.value, "previous"));
+		const nextId = computed(() => deriveDeterministicId(baseId.value, "next"));
+		const pageCountState = computed(() => normalizePaginationPageCount(__props.pageCount));
+		const disabledState = computed(() => __props.disabled);
+		const valueState = useControllableState({
+			value: () => __props.modelValue === void 0 ? void 0 : normalizePaginationPage(__props.modelValue, pageCountState.value),
+			defaultValue: () => normalizePaginationPage(__props.defaultValue, pageCountState.value),
+			equals: Object.is
+		});
+		const pageState = computed(() => normalizePaginationPage(valueState.value.value, pageCountState.value));
+		const previousPage = computed(() => pageState.value > 1 ? pageState.value - 1 : null);
+		const nextPage = computed(() => pageState.value < pageCountState.value ? pageState.value + 1 : null);
+		const canPrevious = computed(() => !disabledState.value && previousPage.value !== null);
+		const canNext = computed(() => !disabledState.value && nextPage.value !== null);
+		const state = computed(() => disabledState.value ? "disabled" : "active");
+		const range = computed(() => createPaginationRange({
+			boundaryCount: __props.boundaryCount,
+			page: pageState.value,
+			pageCount: pageCountState.value,
+			siblingCount: __props.siblingCount
+		}));
+		const slotState = computed(() => ({
+			canNext: canNext.value,
+			canPrevious: canPrevious.value,
+			disabled: disabledState.value,
+			nextPage: nextPage.value,
+			page: pageState.value,
+			pageCount: pageCountState.value,
+			previousPage: previousPage.value,
+			range: range.value,
+			state: state.value
+		}));
+		function getPageId(page) {
+			return deriveDeterministicId(baseId.value, getPaginationPageIdSegment(page, pageCountState.value));
+		}
+		function getPageLabel(page, current) {
+			return current ? `Page ${page}, current page` : `Go to page ${page}`;
+		}
+		function getPageState(page, pageDisabled) {
+			if (disabledState.value || pageDisabled) return "disabled";
+			return pageState.value === page ? "current" : "idle";
+		}
+		function getPreviousState(previousDisabled) {
+			return previousDisabled || !canPrevious.value ? "disabled" : "idle";
+		}
+		function getNextState(nextDisabled) {
+			return nextDisabled || !canNext.value ? "disabled" : "idle";
+		}
+		function getCurrentPage() {
+			return pageState.value;
+		}
+		function setPage(page, nativeEvent = null) {
+			if (disabledState.value) return false;
+			const next = normalizePaginationPage(page, pageCountState.value);
+			const previous = getCurrentPage();
+			if (Object.is(previous, next)) return false;
+			if (!valueState.set(next)) return false;
+			emit("update:modelValue", next);
+			emit("change", next, previous, nativeEvent);
+			return true;
+		}
+		function goPrevious(nativeEvent = null) {
+			return previousPage.value === null ? false : setPage(previousPage.value, nativeEvent);
+		}
+		function goNext(nativeEvent = null) {
+			return nextPage.value === null ? false : setPage(nextPage.value, nativeEvent);
+		}
+		function reset() {
+			return setPage(__props.defaultValue ?? 1, null);
+		}
+		function focus(options) {
+			focusCurrent(options);
+		}
+		function focusCurrent(options) {
+			const root = element.value instanceof Element ? element.value : null;
+			const target = root?.ownerDocument.getElementById(getPageId(pageState.value));
+			if (target instanceof HTMLElement && root?.contains(target)) target.focus(options);
+		}
+		const context = paginationContext.provide({
+			canNext,
+			canPrevious,
+			disabled: disabledState,
+			focusCurrent,
+			getNextState,
+			getPageId,
+			getPageLabel,
+			getPageState,
+			getPreviousState,
+			goNext,
+			goPrevious,
+			id: baseId,
+			listId,
+			nextId,
+			nextPage,
+			page: pageState,
+			pageCount: pageCountState,
+			previousId,
+			previousPage,
+			range,
+			setPage,
+			state
+		});
+		__expose({
+			canNext,
+			canPrevious,
+			disabled: disabledState,
+			element,
+			focus,
+			goNext,
+			goPrevious,
+			id: baseId,
+			listId,
+			nextPage,
+			page: pageState,
+			pageCount: pageCountState,
+			previousPage,
+			range,
+			reset,
+			setPage,
+			state
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+				id: unref(context).id.value,
+				ref_key: "element",
+				ref: element,
+				"aria-label": __props.label,
+				"data-vize-ui": "pagination",
+				part: "root",
+				"data-state": state.value,
+				"data-disabled": disabledState.value ? "true" : void 0,
+				"data-page": pageState.value,
+				"data-page-count": pageCountState.value
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)]),
+				_: 3
+			}, 8, [
+				"id",
+				"aria-label",
+				"data-state",
+				"data-disabled",
+				"data-page",
+				"data-page-count"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-e0b00ef7"]]);
+//#endregion
+//#region src/families/navigation/pagination/pagination-ellipsis.vue?vue&type=script&setup=true&lang.ts
+const disabled = true;
+//#endregion
+//#region src/families/navigation/pagination/pagination-ellipsis.vue
+var pagination_ellipsis_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "pagination-ellipsis",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		},
+		position: {
+			type: String,
+			required: false,
+			default: "end"
+		},
+		label: {
+			type: String,
+			required: false,
+			default: "More pages"
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		paginationContext.use();
+		const element = useTemplateRef("element");
+		const slotState = computed(() => ({
+			disabled,
+			position: __props.position
+		}));
+		__expose({
+			disabled,
+			element,
+			position: computed(() => __props.position)
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+				ref_key: "element",
+				ref: element,
+				"aria-label": __props.label,
+				"data-vize-ui": "pagination-ellipsis",
+				part: "ellipsis",
+				"data-position": __props.position,
+				"data-disabled": "true"
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), () => [_cache[0] || (_cache[0] = createTextVNode("...", -1))], true)]),
+				_: 3
+			}, 8, ["aria-label", "data-position"]);
+		};
+	}
+}), [["__scopeId", "data-v-b3407727"]]);
+//#endregion
+//#region src/families/navigation/pagination/pagination-item.vue
+var pagination_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "pagination-item",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "li"
+		},
+		page: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const context = paginationContext.use();
+		const element = useTemplateRef("element");
+		const itemPage = computed(() => __props.page === void 0 ? void 0 : toPaginationPageInRange(__props.page, context.pageCount.value) ?? __props.page);
+		const current = computed(() => __props.page !== void 0 && toPaginationPageInRange(__props.page, context.pageCount.value) === context.page.value);
+		const itemDisabled = computed(() => context.disabled.value || __props.disabled || __props.page !== void 0 && toPaginationPageInRange(__props.page, context.pageCount.value) === null);
+		const itemState = computed(() => {
+			if (itemDisabled.value) return "disabled";
+			return current.value ? "current" : "idle";
+		});
+		const slotState = computed(() => ({
+			current: current.value,
+			disabled: itemDisabled.value,
+			page: itemPage.value,
+			state: itemState.value
+		}));
+		__expose({
+			current,
+			disabled: itemDisabled,
+			element,
+			page: itemPage,
+			state: itemState
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+				ref_key: "element",
+				ref: element,
+				"data-vize-ui": "pagination-item",
+				part: "item",
+				"data-state": itemState.value,
+				"data-page": itemPage.value,
+				"data-current": current.value ? "true" : void 0,
+				"data-disabled": itemDisabled.value ? "true" : void 0
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)]),
+				_: 3
+			}, 8, [
+				"data-state",
+				"data-page",
+				"data-current",
+				"data-disabled"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-635e7169"]]);
+//#endregion
+//#region src/families/navigation/pagination/pagination-list.vue
+var pagination_list_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "pagination-list",
+	props: { as: {
+		type: null,
+		required: false,
+		default: "ol"
+	} },
+	setup(__props, { expose: __expose }) {
+		const context = paginationContext.use();
+		const element = useTemplateRef("element");
+		const slotState = computed(() => ({
+			canNext: context.canNext.value,
+			canPrevious: context.canPrevious.value,
+			disabled: context.disabled.value,
+			listId: context.listId.value,
+			nextPage: context.nextPage.value,
+			page: context.page.value,
+			pageCount: context.pageCount.value,
+			previousPage: context.previousPage.value,
+			range: context.range.value,
+			state: context.state.value
+		}));
+		__expose({
+			canNext: context.canNext,
+			canPrevious: context.canPrevious,
+			disabled: context.disabled,
+			element,
+			focus: context.focusCurrent,
+			listId: context.listId,
+			nextPage: context.nextPage,
+			page: context.page,
+			pageCount: context.pageCount,
+			previousPage: context.previousPage,
+			range: context.range,
+			state: context.state
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+				id: unref(context).listId.value,
+				ref_key: "element",
+				ref: element,
+				"data-vize-ui": "pagination-list",
+				part: "list",
+				"data-state": unref(context).state.value,
+				"data-disabled": unref(context).disabled.value ? "true" : void 0,
+				"data-page": unref(context).page.value,
+				"data-page-count": unref(context).pageCount.value
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)]),
+				_: 3
+			}, 8, [
+				"id",
+				"data-state",
+				"data-disabled",
+				"data-page",
+				"data-page-count"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-5d5ca16d"]]);
+//#endregion
+//#region src/families/navigation/pagination/pagination-next.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$2 = [
+	"id",
+	"type",
+	"disabled",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"data-state",
+	"data-target-page",
+	"data-disabled"
+];
+//#endregion
+//#region src/families/navigation/pagination/pagination-next.vue
+var pagination_next_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "pagination-next",
+	props: {
+		type: {
+			type: String,
+			required: false,
+			default: "button"
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: "Go to next page"
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: ["click"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const context = paginationContext.use();
+		const element = useTemplateRef("element");
+		const controlDisabled = computed(() => __props.disabled || context.getNextState(false) === "disabled");
+		const controlState = computed(() => context.getNextState(__props.disabled));
+		const slotState = computed(() => ({
+			disabled: controlDisabled.value,
+			state: controlState.value,
+			targetPage: context.nextPage.value
+		}));
+		function onClick(event) {
+			if (controlDisabled.value) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				return;
+			}
+			emit("click", event);
+			if (!event.defaultPrevented) context.goNext(event);
+		}
+		function focus(options) {
+			element.value?.focus(options);
+		}
+		function select() {
+			if (controlDisabled.value) return false;
+			return context.goNext(null);
+		}
+		__expose({
+			disabled: controlDisabled,
+			element,
+			focus,
+			id: context.nextId,
+			select,
+			state: controlState,
+			targetPage: context.nextPage
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				id: unref(context).nextId.value,
+				ref_key: "element",
+				ref: element,
+				type: __props.type,
+				disabled: controlDisabled.value,
+				"aria-label": __props.ariaLabelledby === void 0 ? __props.ariaLabel : void 0,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"data-vize-ui": "pagination-next",
+				part: "next",
+				"data-state": controlState.value,
+				"data-target-page": unref(context).nextPage.value ?? void 0,
+				"data-disabled": controlDisabled.value ? "true" : void 0,
+				onClick
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 8, _hoisted_1$2);
+		};
+	}
+}), [["__scopeId", "data-v-9e9669a4"]]);
+//#endregion
+//#region src/families/navigation/pagination/pagination-page.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = [
+	"id",
+	"type",
+	"disabled",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-current",
+	"data-state",
+	"data-page",
+	"data-current",
+	"data-disabled"
+];
+//#endregion
+//#region src/families/navigation/pagination/pagination-page.vue
+var pagination_page_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "pagination-page",
+	props: {
+		page: {
+			type: Number,
+			required: true
+		},
+		type: {
+			type: String,
+			required: false,
+			default: "button"
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: ["click"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const context = paginationContext.use();
+		const element = useTemplateRef("element");
+		const targetPage = computed(() => toPaginationPageInRange(__props.page, context.pageCount.value));
+		const current = computed(() => targetPage.value !== null && context.page.value === targetPage.value);
+		const pageDisabled = computed(() => context.disabled.value || __props.disabled || targetPage.value === null);
+		const pageState = computed(() => targetPage.value === null ? "disabled" : context.getPageState(targetPage.value, __props.disabled));
+		const pageId = computed(() => context.getPageId(__props.page));
+		const accessibleLabel = computed(() => __props.ariaLabel ?? context.getPageLabel(targetPage.value ?? __props.page, current.value));
+		const slotState = computed(() => ({
+			current: current.value,
+			disabled: pageDisabled.value,
+			page: targetPage.value ?? __props.page,
+			state: pageState.value
+		}));
+		function onClick(event) {
+			if (pageDisabled.value) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				return;
+			}
+			emit("click", event);
+			if (!event.defaultPrevented && targetPage.value !== null) context.setPage(targetPage.value, event);
+		}
+		function focus(options) {
+			element.value?.focus(options);
+		}
+		function select() {
+			if (pageDisabled.value || targetPage.value === null) return false;
+			return context.setPage(targetPage.value, null);
+		}
+		__expose({
+			current,
+			disabled: pageDisabled,
+			element,
+			focus,
+			id: pageId,
+			page: computed(() => targetPage.value ?? __props.page),
+			select,
+			state: pageState
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				id: pageId.value,
+				ref_key: "element",
+				ref: element,
+				type: __props.type,
+				disabled: pageDisabled.value,
+				"aria-label": __props.ariaLabelledby === void 0 ? accessibleLabel.value : void 0,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"aria-current": current.value ? "page" : void 0,
+				"data-vize-ui": "pagination-page",
+				part: "page",
+				"data-state": pageState.value,
+				"data-page": targetPage.value ?? __props.page,
+				"data-current": current.value ? "true" : void 0,
+				"data-disabled": pageDisabled.value ? "true" : void 0,
+				onClick
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 8, _hoisted_1$1);
+		};
+	}
+}), [["__scopeId", "data-v-1e466ba6"]]);
+//#endregion
+//#region src/families/navigation/pagination/pagination-previous.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"id",
+	"type",
+	"disabled",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"data-state",
+	"data-target-page",
+	"data-disabled"
+];
+//#endregion
+//#region src/families/navigation/pagination/pagination-previous.vue
+var pagination_previous_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "pagination-previous",
+	props: {
+		type: {
+			type: String,
+			required: false,
+			default: "button"
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: "Go to previous page"
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: ["click"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const context = paginationContext.use();
+		const element = useTemplateRef("element");
+		const controlDisabled = computed(() => __props.disabled || context.getPreviousState(false) === "disabled");
+		const controlState = computed(() => context.getPreviousState(__props.disabled));
+		const slotState = computed(() => ({
+			disabled: controlDisabled.value,
+			state: controlState.value,
+			targetPage: context.previousPage.value
+		}));
+		function onClick(event) {
+			if (controlDisabled.value) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				return;
+			}
+			emit("click", event);
+			if (!event.defaultPrevented) context.goPrevious(event);
+		}
+		function focus(options) {
+			element.value?.focus(options);
+		}
+		function select() {
+			if (controlDisabled.value) return false;
+			return context.goPrevious(null);
+		}
+		__expose({
+			disabled: controlDisabled,
+			element,
+			focus,
+			id: context.previousId,
+			select,
+			state: controlState,
+			targetPage: context.previousPage
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				id: unref(context).previousId.value,
+				ref_key: "element",
+				ref: element,
+				type: __props.type,
+				disabled: controlDisabled.value,
+				"aria-label": __props.ariaLabelledby === void 0 ? __props.ariaLabel : void 0,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"data-vize-ui": "pagination-previous",
+				part: "previous",
+				"data-state": controlState.value,
+				"data-target-page": unref(context).previousPage.value ?? void 0,
+				"data-disabled": controlDisabled.value ? "true" : void 0,
+				onClick
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 8, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-13a4faee"]]);
+//#endregion
+export { pagination_item_default as a, createPaginationRange as c, normalizePaginationPageCount as d, toPaginationPageInRange as f, pagination_list_default as i, getPaginationPageIdSegment as l, pagination_page_default as n, pagination_ellipsis_default as o, pagination_next_default as r, pagination_default as s, pagination_previous_default as t, normalizePaginationPage as u };