@zag-js/pagination
Advanced tools
Comparing version 0.0.0-dev-20240723090825 to 0.0.0-v1-beta-20250220125322
import * as _zag_js_anatomy from '@zag-js/anatomy'; | ||
import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizeProps } from '@zag-js/types'; | ||
import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types'; | ||
import * as _zag_js_core from '@zag-js/core'; | ||
import { Machine, StateMachine } from '@zag-js/core'; | ||
import { Service, EventObject } from '@zag-js/core'; | ||
@@ -20,5 +20,5 @@ declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "item" | "ellipsis" | "prevTrigger" | "nextTrigger">; | ||
interface IntlTranslations { | ||
rootLabel?: string; | ||
prevTriggerLabel?: string; | ||
nextTriggerLabel?: string; | ||
rootLabel?: string | undefined; | ||
prevTriggerLabel?: string | undefined; | ||
nextTriggerLabel?: string | undefined; | ||
itemLabel?(details: ItemLabelDetails): string; | ||
@@ -33,20 +33,24 @@ } | ||
}>; | ||
interface PublicContext extends DirectionProperty, CommonProperties { | ||
interface PaginationProps extends DirectionProperty, CommonProperties { | ||
/** | ||
* The ids of the elements in the accordion. Useful for composition. | ||
*/ | ||
ids?: ElementIds; | ||
ids?: ElementIds | undefined; | ||
/** | ||
* Specifies the localized strings that identifies the accessibility elements and their states | ||
*/ | ||
translations: IntlTranslations; | ||
translations?: IntlTranslations | undefined; | ||
/** | ||
* Total number of data items | ||
*/ | ||
count: number; | ||
count?: number | undefined; | ||
/** | ||
* Number of data items per page | ||
*/ | ||
pageSize?: number | undefined; | ||
/** | ||
* Default number of data items per page | ||
* @default 10 | ||
*/ | ||
pageSize: number; | ||
defaultPageSize?: number | undefined; | ||
/** | ||
@@ -56,16 +60,20 @@ * Number of pages to show beside active page | ||
*/ | ||
siblingCount: number; | ||
siblingCount?: number | undefined; | ||
/** | ||
* The active page | ||
*/ | ||
page?: number | undefined; | ||
/** | ||
* Default active page | ||
* @default 1 | ||
*/ | ||
page: number; | ||
defaultPage?: number | undefined; | ||
/** | ||
* Called when the page number is changed | ||
*/ | ||
onPageChange?: (details: PageChangeDetails) => void; | ||
onPageChange?: ((details: PageChangeDetails) => void) | undefined; | ||
/** | ||
* Called when the page size is changed | ||
*/ | ||
onPageSizeChange?: (details: PageSizeChangeDetails) => void; | ||
onPageSizeChange?: ((details: PageSizeChangeDetails) => void) | undefined; | ||
/** | ||
@@ -75,9 +83,11 @@ * The type of the trigger element | ||
*/ | ||
type: "button" | "link"; | ||
type?: "button" | "link" | undefined; | ||
} | ||
type PropsWithDefault = "defaultPageSize" | "defaultPage" | "siblingCount" | "translations" | "type" | "count"; | ||
interface PrivateContext { | ||
page: number; | ||
pageSize: number; | ||
} | ||
type ComputedContext = Readonly<{ | ||
/** | ||
* @computed | ||
* Total number of pages | ||
@@ -87,8 +97,2 @@ */ | ||
/** | ||
* @computed | ||
* Pages to render in pagination | ||
*/ | ||
items: Pages; | ||
/** | ||
* @computed | ||
* Index of first and last data items on current page | ||
@@ -101,3 +105,2 @@ */ | ||
/** | ||
* @computed | ||
* The previous page index | ||
@@ -107,3 +110,2 @@ */ | ||
/** | ||
* @computed | ||
* The next page index | ||
@@ -113,3 +115,2 @@ */ | ||
/** | ||
* @computed | ||
* Whether the current page is valid | ||
@@ -119,11 +120,13 @@ */ | ||
}>; | ||
type UserDefinedContext = RequiredBy<PublicContext, "id" | "count">; | ||
interface MachineContext extends PublicContext, PrivateContext, ComputedContext { | ||
interface PaginationSchema { | ||
state: "idle"; | ||
props: RequiredBy<PaginationProps, PropsWithDefault>; | ||
context: PrivateContext; | ||
computed: ComputedContext; | ||
event: EventObject; | ||
action: string; | ||
guard: string; | ||
effect: string; | ||
} | ||
interface MachineState { | ||
value: "idle"; | ||
} | ||
type State = StateMachine.State<MachineContext, MachineState>; | ||
type Send = StateMachine.Send<StateMachine.AnyEventObject>; | ||
type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>; | ||
type PaginationService = Service<PaginationSchema>; | ||
interface ItemProps { | ||
@@ -146,3 +149,3 @@ type: "page"; | ||
} | ||
interface MachineApi<T extends PropTypes = PropTypes> { | ||
interface PaginationApi<T extends PropTypes = PropTypes> { | ||
/** | ||
@@ -153,2 +156,6 @@ * The current page. | ||
/** | ||
* The total number of data items. | ||
*/ | ||
count: number; | ||
/** | ||
* The number of data items per page. | ||
@@ -182,6 +189,2 @@ */ | ||
/** | ||
* Function to set the total number of pages. | ||
*/ | ||
setCount(count: number): void; | ||
/** | ||
* Function to set the page size. | ||
@@ -217,8 +220,8 @@ */ | ||
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>; | ||
declare function connect<T extends PropTypes>(service: PaginationService, normalize: NormalizeProps<T>): PaginationApi<T>; | ||
declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>; | ||
declare const machine: _zag_js_core.MachineConfig<PaginationSchema>; | ||
declare const props: ("type" | "dir" | "id" | "getRootNode" | "page" | "ids" | "translations" | "count" | "pageSize" | "siblingCount" | "onPageChange" | "onPageSizeChange")[]; | ||
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "type" | "dir" | "id" | "getRootNode" | "page" | "ids" | "translations" | "count" | "pageSize" | "siblingCount" | "onPageChange" | "onPageSizeChange">]; | ||
declare const props: (keyof PaginationProps)[]; | ||
declare const splitProps: <Props extends Partial<PaginationProps>>(props: Props) => [Partial<PaginationProps>, Omit<Props, keyof PaginationProps>]; | ||
declare const itemProps: (keyof ItemProps)[]; | ||
@@ -229,2 +232,2 @@ declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>]; | ||
export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type EllipsisProps, type IntlTranslations, type ItemLabelDetails, type ItemProps, type PageChangeDetails, type PageSizeChangeDetails, type Service, anatomy, connect, ellipsisProps, itemProps, machine, props, splitEllipsisProps, splitItemProps, splitProps }; | ||
export { type PaginationApi as Api, type ElementIds, type EllipsisProps, type IntlTranslations, type ItemLabelDetails, type ItemProps, type PageChangeDetails, type PageSizeChangeDetails, type PaginationProps as Props, type PaginationService as Service, anatomy, connect, ellipsisProps, itemProps, machine, props, splitEllipsisProps, splitItemProps, splitProps }; |
@@ -1,52 +0,19 @@ | ||
"use strict"; | ||
var __defProp = Object.defineProperty; | ||
var __getOwnPropDesc = Object.getOwnPropertyDescriptor; | ||
var __getOwnPropNames = Object.getOwnPropertyNames; | ||
var __hasOwnProp = Object.prototype.hasOwnProperty; | ||
var __export = (target, all) => { | ||
for (var name in all) | ||
__defProp(target, name, { get: all[name], enumerable: true }); | ||
}; | ||
var __copyProps = (to, from, except, desc) => { | ||
if (from && typeof from === "object" || typeof from === "function") { | ||
for (let key of __getOwnPropNames(from)) | ||
if (!__hasOwnProp.call(to, key) && key !== except) | ||
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); | ||
} | ||
return to; | ||
}; | ||
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); | ||
'use strict'; | ||
// src/index.ts | ||
var src_exports = {}; | ||
__export(src_exports, { | ||
anatomy: () => anatomy, | ||
connect: () => connect, | ||
ellipsisProps: () => ellipsisProps, | ||
itemProps: () => itemProps, | ||
machine: () => machine, | ||
props: () => props, | ||
splitEllipsisProps: () => splitEllipsisProps, | ||
splitItemProps: () => splitItemProps, | ||
splitProps: () => splitProps | ||
}); | ||
module.exports = __toCommonJS(src_exports); | ||
var anatomy$1 = require('@zag-js/anatomy'); | ||
var domQuery = require('@zag-js/dom-query'); | ||
var core = require('@zag-js/core'); | ||
var types = require('@zag-js/types'); | ||
var utils = require('@zag-js/utils'); | ||
// src/pagination.anatomy.ts | ||
var import_anatomy = require("@zag-js/anatomy"); | ||
var anatomy = (0, import_anatomy.createAnatomy)("pagination").parts("root", "item", "ellipsis", "prevTrigger", "nextTrigger"); | ||
var anatomy = anatomy$1.createAnatomy("pagination").parts("root", "item", "ellipsis", "prevTrigger", "nextTrigger"); | ||
var parts = anatomy.build(); | ||
// src/pagination.connect.ts | ||
var import_dom_query2 = require("@zag-js/dom-query"); | ||
// src/pagination.dom.ts | ||
var import_dom_query = require("@zag-js/dom-query"); | ||
var dom = (0, import_dom_query.createScope)({ | ||
getRootId: (ctx) => ctx.ids?.root ?? `pagination:${ctx.id}`, | ||
getPrevTriggerId: (ctx) => ctx.ids?.prevTrigger ?? `pagination:${ctx.id}:prev`, | ||
getNextTriggerId: (ctx) => ctx.ids?.nextTrigger ?? `pagination:${ctx.id}:next`, | ||
getEllipsisId: (ctx, index) => ctx.ids?.ellipsis?.(index) ?? `pagination:${ctx.id}:ellipsis:${index}`, | ||
getItemId: (ctx, page) => ctx.ids?.item?.(page) ?? `pagination:${ctx.id}:item:${page}` | ||
}); | ||
var getRootId = (ctx) => ctx.ids?.root ?? `pagination:${ctx.id}`; | ||
var getPrevTriggerId = (ctx) => ctx.ids?.prevTrigger ?? `pagination:${ctx.id}:prev`; | ||
var getNextTriggerId = (ctx) => ctx.ids?.nextTrigger ?? `pagination:${ctx.id}:next`; | ||
var getEllipsisId = (ctx, index) => ctx.ids?.ellipsis?.(index) ?? `pagination:${ctx.id}:ellipsis:${index}`; | ||
var getItemId = (ctx, page) => ctx.ids?.item?.(page) ?? `pagination:${ctx.id}:item:${page}`; | ||
@@ -66,7 +33,8 @@ // src/pagination.utils.ts | ||
var getRange = (ctx) => { | ||
const totalPageNumbers = Math.min(2 * ctx.siblingCount + 5, ctx.totalPages); | ||
const { page, totalPages, siblingCount } = ctx; | ||
const totalPageNumbers = Math.min(2 * siblingCount + 5, totalPages); | ||
const firstPageIndex = 1; | ||
const lastPageIndex = ctx.totalPages; | ||
const leftSiblingIndex = Math.max(ctx.page - ctx.siblingCount, firstPageIndex); | ||
const rightSiblingIndex = Math.min(ctx.page + ctx.siblingCount, lastPageIndex); | ||
const lastPageIndex = totalPages; | ||
const leftSiblingIndex = Math.max(page - siblingCount, firstPageIndex); | ||
const rightSiblingIndex = Math.min(page + siblingCount, lastPageIndex); | ||
const showLeftEllipsis = leftSiblingIndex > firstPageIndex + 1; | ||
@@ -93,17 +61,24 @@ const showRightEllipsis = rightSiblingIndex < lastPageIndex - 1; | ||
// src/pagination.connect.ts | ||
function connect(state, send, normalize) { | ||
const totalPages = state.context.totalPages; | ||
const page = state.context.page; | ||
const translations = state.context.translations; | ||
const previousPage = state.context.previousPage; | ||
const nextPage = state.context.nextPage; | ||
const pageRange = state.context.pageRange; | ||
const type = state.context.type; | ||
function connect(service, normalize) { | ||
const { send, scope, prop, computed, context } = service; | ||
const totalPages = computed("totalPages"); | ||
const page = context.get("page"); | ||
const translations = prop("translations"); | ||
const count = prop("count"); | ||
const previousPage = computed("previousPage"); | ||
const nextPage = computed("nextPage"); | ||
const pageRange = computed("pageRange"); | ||
const type = prop("type"); | ||
const isButton = type === "button"; | ||
const isFirstPage = page === 1; | ||
const isLastPage = page === totalPages; | ||
const pages = getTransformedRange(state.context); | ||
const pages = getTransformedRange({ | ||
page, | ||
totalPages, | ||
siblingCount: prop("siblingCount") | ||
}); | ||
return { | ||
count, | ||
page, | ||
pageSize: state.context.pageSize, | ||
pageSize: context.get("pageSize"), | ||
totalPages, | ||
@@ -117,5 +92,2 @@ pages, | ||
}, | ||
setCount(count) { | ||
send({ type: "SET_COUNT", count }); | ||
}, | ||
setPageSize(size) { | ||
@@ -141,5 +113,5 @@ send({ type: "SET_PAGE_SIZE", size }); | ||
return normalize.element({ | ||
id: dom.getRootId(state.context), | ||
id: getRootId(scope), | ||
...parts.root.attrs, | ||
dir: state.context.dir, | ||
dir: prop("dir"), | ||
"aria-label": translations.rootLabel | ||
@@ -150,5 +122,5 @@ }); | ||
return normalize.element({ | ||
id: dom.getEllipsisId(state.context, props2.index), | ||
id: getEllipsisId(scope, props2.index), | ||
...parts.ellipsis.attrs, | ||
dir: state.context.dir | ||
dir: prop("dir") | ||
}); | ||
@@ -158,9 +130,9 @@ }, | ||
const index = props2.value; | ||
const isCurrentPage = index === state.context.page; | ||
const isCurrentPage = index === page; | ||
return normalize.element({ | ||
id: dom.getItemId(state.context, index), | ||
id: getItemId(scope, index), | ||
...parts.item.attrs, | ||
dir: state.context.dir, | ||
dir: prop("dir"), | ||
"data-index": index, | ||
"data-selected": (0, import_dom_query2.dataAttr)(isCurrentPage), | ||
"data-selected": domQuery.dataAttr(isCurrentPage), | ||
"aria-current": isCurrentPage ? "page" : void 0, | ||
@@ -176,6 +148,6 @@ "aria-label": translations.itemLabel?.({ page: index, totalPages }), | ||
return normalize.element({ | ||
id: dom.getPrevTriggerId(state.context), | ||
id: getPrevTriggerId(scope), | ||
...parts.prevTrigger.attrs, | ||
dir: state.context.dir, | ||
"data-disabled": (0, import_dom_query2.dataAttr)(isFirstPage), | ||
dir: prop("dir"), | ||
"data-disabled": domQuery.dataAttr(isFirstPage), | ||
"aria-label": translations.prevTriggerLabel, | ||
@@ -190,6 +162,6 @@ onClick() { | ||
return normalize.element({ | ||
id: dom.getNextTriggerId(state.context), | ||
id: getNextTriggerId(scope), | ||
...parts.nextTrigger.attrs, | ||
dir: state.context.dir, | ||
"data-disabled": (0, import_dom_query2.dataAttr)(isLastPage), | ||
dir: prop("dir"), | ||
"data-disabled": domQuery.dataAttr(isLastPage), | ||
"aria-label": translations.nextTriggerLabel, | ||
@@ -204,6 +176,2 @@ onClick() { | ||
} | ||
// src/pagination.machine.ts | ||
var import_core = require("@zag-js/core"); | ||
var import_utils = require("@zag-js/utils"); | ||
var defaultTranslations = { | ||
@@ -218,124 +186,118 @@ rootLabel: "pagination", | ||
}; | ||
function machine(userContext) { | ||
const ctx = (0, import_utils.compact)(userContext); | ||
return (0, import_core.createMachine)( | ||
{ | ||
id: "pagination", | ||
initial: "idle", | ||
context: { | ||
pageSize: 10, | ||
siblingCount: 1, | ||
page: 1, | ||
type: "button", | ||
translations: { | ||
...defaultTranslations, | ||
...ctx.translations | ||
}, | ||
...ctx | ||
var machine = core.createMachine({ | ||
props({ props: props2 }) { | ||
return { | ||
defaultPageSize: 10, | ||
siblingCount: 1, | ||
defaultPage: 1, | ||
type: "button", | ||
count: 1, | ||
translations: defaultTranslations, | ||
...props2 | ||
}; | ||
}, | ||
initialState() { | ||
return "idle"; | ||
}, | ||
context({ prop, bindable, getContext }) { | ||
return { | ||
page: bindable(() => ({ | ||
value: prop("page"), | ||
defaultValue: prop("defaultPage"), | ||
onChange(value) { | ||
const context = getContext(); | ||
prop("onPageChange")?.({ page: value, pageSize: context.get("pageSize") }); | ||
} | ||
})), | ||
pageSize: bindable(() => ({ | ||
value: prop("pageSize"), | ||
defaultValue: prop("defaultPageSize"), | ||
onChange(value) { | ||
prop("onPageSizeChange")?.({ pageSize: value }); | ||
} | ||
})) | ||
}; | ||
}, | ||
watch({ track, context, action }) { | ||
track([() => context.get("page")], () => { | ||
action(["setPageIfNeeded"]); | ||
}); | ||
}, | ||
computed: { | ||
totalPages: ({ context, prop }) => Math.ceil(prop("count") / context.get("pageSize")), | ||
previousPage: ({ context }) => context.get("page") === 1 ? null : context.get("page") - 1, | ||
nextPage: ({ context, computed }) => context.get("page") === computed("totalPages") ? null : context.get("page") + 1, | ||
pageRange: ({ context, prop }) => { | ||
const start = (context.get("page") - 1) * context.get("pageSize"); | ||
const end = Math.min(start + context.get("pageSize"), prop("count")); | ||
return { start, end }; | ||
}, | ||
isValidPage: ({ context, computed }) => context.get("page") >= 1 && context.get("page") <= computed("totalPages") | ||
}, | ||
on: { | ||
SET_PAGE: { | ||
guard: "isValidPage", | ||
actions: ["setPage"] | ||
}, | ||
SET_PAGE_SIZE: { | ||
actions: ["setPageSize"] | ||
}, | ||
FIRST_PAGE: { | ||
actions: ["goToFirstPage"] | ||
}, | ||
LAST_PAGE: { | ||
actions: ["goToLastPage"] | ||
}, | ||
PREVIOUS_PAGE: { | ||
guard: "canGoToPrevPage", | ||
actions: ["goToPrevPage"] | ||
}, | ||
NEXT_PAGE: { | ||
guard: "canGoToNextPage", | ||
actions: ["goToNextPage"] | ||
} | ||
}, | ||
states: { | ||
idle: {} | ||
}, | ||
implementations: { | ||
guards: { | ||
isValidPage: ({ event, computed }) => event.page >= 1 && event.page <= computed("totalPages"), | ||
isValidCount: ({ context, event }) => context.get("page") > event.count, | ||
canGoToNextPage: ({ context, computed }) => context.get("page") < computed("totalPages"), | ||
canGoToPrevPage: ({ context }) => context.get("page") > 1 | ||
}, | ||
actions: { | ||
setPage({ context, event, computed }) { | ||
const page = clampPage(event.page, computed("totalPages")); | ||
context.set("page", page); | ||
}, | ||
watch: { | ||
pageSize: ["setPageIfNeeded"] | ||
setPageSize({ context, event }) { | ||
context.set("pageSize", event.size); | ||
}, | ||
computed: { | ||
totalPages: (ctx2) => Math.ceil(ctx2.count / ctx2.pageSize), | ||
previousPage: (ctx2) => ctx2.page === 1 ? null : ctx2.page - 1, | ||
nextPage: (ctx2) => ctx2.page === ctx2.totalPages ? null : ctx2.page + 1, | ||
pageRange: (ctx2) => { | ||
const start = (ctx2.page - 1) * ctx2.pageSize; | ||
const end = start + ctx2.pageSize; | ||
return { start, end }; | ||
}, | ||
isValidPage: (ctx2) => ctx2.page >= 1 && ctx2.page <= ctx2.totalPages | ||
goToFirstPage({ context }) { | ||
context.set("page", 1); | ||
}, | ||
on: { | ||
SET_COUNT: [ | ||
{ | ||
guard: "isValidCount", | ||
actions: ["setCount", "goToFirstPage"] | ||
}, | ||
{ | ||
actions: "setCount" | ||
} | ||
], | ||
SET_PAGE: { | ||
guard: "isValidPage", | ||
actions: "setPage" | ||
}, | ||
SET_PAGE_SIZE: { | ||
actions: "setPageSize" | ||
}, | ||
FIRST_PAGE: { | ||
actions: "goToFirstPage" | ||
}, | ||
LAST_PAGE: { | ||
actions: "goToLastPage" | ||
}, | ||
PREVIOUS_PAGE: { | ||
guard: "canGoToPrevPage", | ||
actions: "goToPrevPage" | ||
}, | ||
NEXT_PAGE: { | ||
guard: "canGoToNextPage", | ||
actions: "goToNextPage" | ||
} | ||
goToLastPage({ context, computed }) { | ||
context.set("page", computed("totalPages")); | ||
}, | ||
states: { | ||
idle: {} | ||
} | ||
}, | ||
{ | ||
guards: { | ||
isValidPage: (ctx2, evt) => evt.page >= 1 && evt.page <= ctx2.totalPages, | ||
isValidCount: (ctx2, evt) => ctx2.page > evt.count, | ||
canGoToNextPage: (ctx2) => ctx2.page < ctx2.totalPages, | ||
canGoToPrevPage: (ctx2) => ctx2.page > 1 | ||
goToPrevPage({ context, computed }) { | ||
context.set("page", (prev) => { | ||
return clampPage(prev - 1, computed("totalPages")); | ||
}); | ||
}, | ||
actions: { | ||
setCount(ctx2, evt) { | ||
ctx2.count = evt.count; | ||
}, | ||
setPage(ctx2, evt) { | ||
set.page(ctx2, evt.page); | ||
}, | ||
setPageSize(ctx2, evt) { | ||
set.pageSize(ctx2, evt.size); | ||
}, | ||
goToFirstPage(ctx2) { | ||
set.page(ctx2, 1); | ||
}, | ||
goToLastPage(ctx2) { | ||
set.page(ctx2, ctx2.totalPages); | ||
}, | ||
goToPrevPage(ctx2) { | ||
set.page(ctx2, ctx2.page - 1); | ||
}, | ||
goToNextPage(ctx2) { | ||
set.page(ctx2, ctx2.page + 1); | ||
}, | ||
setPageIfNeeded(ctx2, _evt) { | ||
if (ctx2.isValidPage) return; | ||
set.page(ctx2, 1); | ||
} | ||
goToNextPage({ context, computed }) { | ||
context.set("page", (prev) => { | ||
return clampPage(prev + 1, computed("totalPages")); | ||
}); | ||
}, | ||
setPageIfNeeded({ context, computed }) { | ||
if (computed("isValidPage")) return; | ||
context.set("page", 1); | ||
} | ||
} | ||
); | ||
} | ||
} | ||
}); | ||
var clampPage = (page, totalPages) => Math.min(Math.max(page, 1), totalPages); | ||
var set = { | ||
pageSize: (ctx, value) => { | ||
if ((0, import_utils.isEqual)(ctx.pageSize, value)) return; | ||
ctx.pageSize = value; | ||
ctx.onPageSizeChange?.({ pageSize: ctx.pageSize }); | ||
}, | ||
page: (ctx, value) => { | ||
if ((0, import_utils.isEqual)(ctx.page, value)) return; | ||
ctx.page = clampPage(value, ctx.totalPages); | ||
ctx.onPageChange?.({ page: ctx.page, pageSize: ctx.pageSize }); | ||
} | ||
}; | ||
// src/pagination.props.ts | ||
var import_types = require("@zag-js/types"); | ||
var import_utils2 = require("@zag-js/utils"); | ||
var props = (0, import_types.createProps)()([ | ||
var props = types.createProps()([ | ||
"count", | ||
@@ -349,3 +311,5 @@ "dir", | ||
"page", | ||
"defaultPage", | ||
"pageSize", | ||
"defaultPageSize", | ||
"siblingCount", | ||
@@ -355,19 +319,16 @@ "translations", | ||
]); | ||
var splitProps = (0, import_utils2.createSplitProps)(props); | ||
var itemProps = (0, import_types.createProps)()(["value", "type"]); | ||
var splitItemProps = (0, import_utils2.createSplitProps)(itemProps); | ||
var ellipsisProps = (0, import_types.createProps)()(["index"]); | ||
var splitEllipsisProps = (0, import_utils2.createSplitProps)(ellipsisProps); | ||
// Annotate the CommonJS export names for ESM import in node: | ||
0 && (module.exports = { | ||
anatomy, | ||
connect, | ||
ellipsisProps, | ||
itemProps, | ||
machine, | ||
props, | ||
splitEllipsisProps, | ||
splitItemProps, | ||
splitProps | ||
}); | ||
//# sourceMappingURL=index.js.map | ||
var splitProps = utils.createSplitProps(props); | ||
var itemProps = types.createProps()(["value", "type"]); | ||
var splitItemProps = utils.createSplitProps(itemProps); | ||
var ellipsisProps = types.createProps()(["index"]); | ||
var splitEllipsisProps = utils.createSplitProps(ellipsisProps); | ||
exports.anatomy = anatomy; | ||
exports.connect = connect; | ||
exports.ellipsisProps = ellipsisProps; | ||
exports.itemProps = itemProps; | ||
exports.machine = machine; | ||
exports.props = props; | ||
exports.splitEllipsisProps = splitEllipsisProps; | ||
exports.splitItemProps = splitItemProps; | ||
exports.splitProps = splitProps; |
{ | ||
"name": "@zag-js/pagination", | ||
"version": "0.0.0-dev-20240723090825", | ||
"version": "0.0.0-v1-beta-20250220125322", | ||
"description": "Core logic for the pagination widget implemented as a state machine", | ||
@@ -20,4 +20,3 @@ "keywords": [ | ||
"files": [ | ||
"dist", | ||
"src" | ||
"dist" | ||
], | ||
@@ -31,7 +30,7 @@ "publishConfig": { | ||
"dependencies": { | ||
"@zag-js/anatomy": "0.0.0-dev-20240723090825", | ||
"@zag-js/dom-query": "0.0.0-dev-20240723090825", | ||
"@zag-js/utils": "0.0.0-dev-20240723090825", | ||
"@zag-js/core": "0.0.0-dev-20240723090825", | ||
"@zag-js/types": "0.0.0-dev-20240723090825" | ||
"@zag-js/anatomy": "0.0.0-v1-beta-20250220125322", | ||
"@zag-js/dom-query": "0.0.0-v1-beta-20250220125322", | ||
"@zag-js/core": "0.0.0-v1-beta-20250220125322", | ||
"@zag-js/utils": "0.0.0-v1-beta-20250220125322", | ||
"@zag-js/types": "0.0.0-v1-beta-20250220125322" | ||
}, | ||
@@ -55,5 +54,5 @@ "devDependencies": { | ||
"build": "tsup", | ||
"lint": "eslint src --ext .ts,.tsx", | ||
"lint": "eslint src", | ||
"typecheck": "tsc --noEmit" | ||
} | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
35451
7
837
+ Added@zag-js/anatomy@0.0.0-v1-beta-20250220125322(transitive)
+ Added@zag-js/core@0.0.0-v1-beta-20250220125322(transitive)
+ Added@zag-js/dom-query@0.0.0-v1-beta-20250220125322(transitive)
+ Added@zag-js/types@0.0.0-v1-beta-20250220125322(transitive)
+ Added@zag-js/utils@0.0.0-v1-beta-20250220125322(transitive)
- Removed@zag-js/anatomy@0.0.0-dev-20240723090825(transitive)
- Removed@zag-js/core@0.0.0-dev-20240723090825(transitive)
- Removed@zag-js/dom-query@0.0.0-dev-20240723090825(transitive)
- Removed@zag-js/store@0.0.0-dev-20240723090825(transitive)
- Removed@zag-js/types@0.0.0-dev-20240723090825(transitive)
- Removed@zag-js/utils@0.0.0-dev-20240723090825(transitive)
- Removedklona@2.0.6(transitive)
- Removedproxy-compare@3.0.0(transitive)