@spinjs/components 0.0.0-stage → 0.1.0-preview.2

package/dist/pagination/examples/basic.html

@@ -0,0 +1,39 @@
+<script lang="ts">
+import { pagination } from "../pagination.presentation.js";
+
+const machine = pagination({
+  count: 100,
+  pageSize: 10,
+  siblingCount: 1,
+  page: 1,
+});
+</script>
+
+<nav class="flex w-full flex-nowrap items-center gap-1 overflow-x-auto"
+  {...machine.getRootProps()}>
+  <button
+    class="secondary icon s-sm disabled:opacity-40"
+    {...machine.getFirstTriggerProps()}
+  ><span aria-hidden="true">«</span></button>
+  <button
+    class="secondary icon s-sm disabled:opacity-40"
+    {...machine.getPrevTriggerProps()}
+  ><span aria-hidden="true">‹</span></button>
+  <template for={machine.getItems()} as={row} key={row.key}>
+    <button
+      class={["min-w-7 s-sm transition-colors duration-fast ease-decelerate", { "secondary hover:bg-surface": row.value !== machine.page, "hidden": row.type !== "page" }]}
+      {...machine.getItemProps(row)}
+    >{row.label}</button><span
+      class={["grid h-7 min-w-7 place-items-center px-1 text-xs text-text-muted", { "hidden": row.type !== "ellipsis" }]}
+      {...machine.getEllipsisProps(row)}
+    >{row.label}</span>
+  </template>
+  <button
+    class="secondary icon s-sm disabled:opacity-40"
+    {...machine.getNextTriggerProps()}
+  ><span aria-hidden="true">›</span></button>
+  <button
+    class="secondary icon s-sm disabled:opacity-40"
+    {...machine.getLastTriggerProps()}
+  ><span aria-hidden="true">»</span></button>
+</nav>

package/dist/pagination/examples/dropdown.html

@@ -0,0 +1,37 @@
+<script lang="ts">
+import { pagination } from "../pagination.presentation.js";
+
+const machine = pagination({ count: 100, pageSize: 10, siblingCount: 1 });
+</script>
+
+<nav class="flex w-full flex-wrap items-center justify-between gap-3"
+  {...machine.getRootProps()}>
+  <div class="text-sm text-text-muted">Page {machine.page} of {machine.totalPages}</div>
+  <div class="flex items-center gap-1">
+    <button
+      class="secondary icon s-sm disabled:opacity-40"
+      {...machine.getFirstTriggerProps()}
+    ><span aria-hidden="true">«</span></button>
+    <button
+      class="secondary icon s-sm disabled:opacity-40"
+      {...machine.getPrevTriggerProps()}
+    ><span aria-hidden="true">‹</span></button>
+    <select
+      class="h-7 min-w-20 rounded-md border border-solid border-border bg-surface px-2 text-sm text-text"
+      aria-label="Go to page"
+      on:change={(event) => machine.setPage(event.target.value)}
+    >
+      <template for={machine.pageOptions} as={row} key={row.key}>
+        <option value={row.value} selected={row.value === machine.page}>{row.label}</option>
+      </template>
+    </select>
+    <button
+      class="secondary icon s-sm disabled:opacity-40"
+      {...machine.getNextTriggerProps()}
+    ><span aria-hidden="true">›</span></button>
+    <button
+      class="secondary icon s-sm disabled:opacity-40"
+      {...machine.getLastTriggerProps()}
+    ><span aria-hidden="true">»</span></button>
+  </div>
+</nav>

package/dist/pagination/examples/info.html

@@ -0,0 +1,41 @@
+<script lang="ts">
+import { pagination } from "../pagination.presentation.js";
+
+const machine = pagination({
+  count: 100,
+  pageSize: 10,
+  siblingCount: 1,
+  page: 3,
+});
+</script>
+
+<nav class="flex w-full flex-nowrap items-center gap-1 overflow-x-auto"
+  {...machine.getRootProps()}>
+  <button
+    class="secondary icon s-sm disabled:opacity-40"
+    {...machine.getFirstTriggerProps()}
+  ><span aria-hidden="true">«</span></button>
+  <button
+    class="secondary icon s-sm disabled:opacity-40"
+    {...machine.getPrevTriggerProps()}
+  ><span aria-hidden="true">‹</span></button>
+  <template for={machine.getItems()} as={row} key={row.key}>
+    <button
+      class={["min-w-7 s-sm transition-colors duration-fast ease-decelerate", { "secondary hover:bg-surface": row.value !== machine.page, "hidden": row.type !== "page" }]}
+      {...machine.getItemProps(row)}
+    >{row.label}</button><span
+      class={["grid h-7 min-w-7 place-items-center px-1 text-xs text-text-muted", { "hidden": row.type !== "ellipsis" }]}
+      {...machine.getEllipsisProps(row)}
+    >{row.label}</span>
+  </template>
+  <button
+    class="secondary icon s-sm disabled:opacity-40"
+    {...machine.getNextTriggerProps()}
+  ><span aria-hidden="true">›</span></button>
+  <button
+    class="secondary icon s-sm disabled:opacity-40"
+    {...machine.getLastTriggerProps()}
+  ><span aria-hidden="true">»</span></button>
+  <p
+    class="text-xs text-text-muted">Page {machine.page} of {machine.totalPages}</p>
+</nav>

package/dist/pagination/examples/jump.html

@@ -0,0 +1,38 @@
+<script lang="ts">
+import { pagination } from "../pagination.presentation.js";
+
+const machine = pagination({ count: 100, pageSize: 10, siblingCount: 1 });
+</script>
+
+<nav class="flex w-full flex-wrap items-center gap-3"
+  {...machine.getRootProps()}>
+  <button
+    class="secondary icon s-sm disabled:opacity-40"
+    {...machine.getFirstTriggerProps()}
+  ><span aria-hidden="true">«</span></button>
+  <button
+    class="secondary icon s-sm disabled:opacity-40"
+    {...machine.getPrevTriggerProps()}
+  ><span aria-hidden="true">‹</span></button>
+  <template for={machine.getItems()} as={row} key={row.key}>
+    <button
+      class={["min-w-7 s-sm transition-colors duration-fast ease-decelerate", { "secondary hover:bg-surface": row.value !== machine.page, "hidden": row.type !== "page" }]}
+      {...machine.getItemProps(row)}
+    >{row.label}</button><span
+      class={["grid h-7 min-w-7 place-items-center px-1 text-xs text-text-muted", { "hidden": row.type !== "ellipsis" }]}
+      {...machine.getEllipsisProps(row)}
+    >{row.label}</span>
+  </template>
+  <button
+    class="secondary icon s-sm disabled:opacity-40"
+    {...machine.getNextTriggerProps()}
+  ><span aria-hidden="true">›</span></button>
+  <button
+    class="secondary icon s-sm disabled:opacity-40"
+    {...machine.getLastTriggerProps()}
+  ><span aria-hidden="true">»</span></button>
+  <div class="flex items-center gap-1" data-jump="">
+    <input type="number" class="w-16 tabular-nums" min="1" value="1" aria-label="Go to page" />
+    <button type="button" class="secondary s-sm" data-go="">Go</button>
+  </div>
+</nav>

package/dist/pagination/examples/numbered.html

@@ -0,0 +1,31 @@
+<script lang="ts">
+import { pagination } from "../pagination.presentation.js";
+
+const machine = pagination({
+  count: 100,
+  pageSize: 10,
+  siblingCount: 2,
+  page: 5,
+});
+</script>
+
+<nav class="flex w-full flex-nowrap items-center gap-1 overflow-x-auto"
+  {...machine.getRootProps()}>
+  <button
+    class="secondary icon s-sm disabled:opacity-40"
+    {...machine.getPrevTriggerProps()}
+  ><span aria-hidden="true">‹</span></button>
+  <template for={machine.getItems()} as={row} key={row.key}>
+    <button
+      class={["min-w-7 s-sm transition-colors duration-fast ease-decelerate", { "secondary hover:bg-surface": row.value !== machine.page, "hidden": row.type !== "page" }]}
+      {...machine.getItemProps(row)}
+    >{row.label}</button><span
+      class={["grid h-7 min-w-7 place-items-center px-1 text-xs text-text-muted", { "hidden": row.type !== "ellipsis" }]}
+      {...machine.getEllipsisProps(row)}
+    >{row.label}</span>
+  </template>
+  <button
+    class="secondary icon s-sm disabled:opacity-40"
+    {...machine.getNextTriggerProps()}
+  ><span aria-hidden="true">›</span></button>
+</nav>

package/dist/pagination/examples/pagesize.html

@@ -0,0 +1,46 @@
+<script lang="ts">
+import { pagination } from "../pagination.presentation.js";
+
+const machine = pagination({ count: 100, pageSize: 10, siblingCount: 1 });
+</script>
+
+<nav class="flex w-full flex-wrap items-center gap-6"
+  {...machine.getRootProps()}>
+  <div class="flex items-center gap-2 text-sm text-text-muted">
+    <label for="pg-size">Rows per page</label>
+    <div class="flex items-center gap-1">
+      <button class={["s-sm", { "secondary": machine.pageSize !== 10 }]} on:click={() => machine.setPageSize(10)}>10</button>
+      <button class={["s-sm", { "secondary": machine.pageSize !== 20 }]} on:click={() => machine.setPageSize(20)}>20</button>
+      <button class={["s-sm", { "secondary": machine.pageSize !== 50 }]} on:click={() => machine.setPageSize(50)}>50</button>
+    </div>
+  </div>
+  <div class="text-sm text-text-muted"
+    data-range="">{machine.pageRange.start + 1}-{machine.pageRange.end} of {machine.count}</div>
+  <div class="flex items-center gap-1">
+    <button
+      class="secondary icon s-sm disabled:opacity-40"
+      {...machine.getFirstTriggerProps()}
+    ><span aria-hidden="true">«</span></button>
+    <button
+      class="secondary icon s-sm disabled:opacity-40"
+      {...machine.getPrevTriggerProps()}
+    ><span aria-hidden="true">‹</span></button>
+    <template for={machine.getItems()} as={row} key={row.key}>
+      <button
+        class={["min-w-7 s-sm transition-colors duration-fast ease-decelerate", { "secondary hover:bg-surface": row.value !== machine.page, "hidden": row.type !== "page" }]}
+        {...machine.getItemProps(row)}
+      >{row.label}</button><span
+        class={["grid h-7 min-w-7 place-items-center px-1 text-xs text-text-muted", { "hidden": row.type !== "ellipsis" }]}
+        {...machine.getEllipsisProps(row)}
+      >{row.label}</span>
+    </template>
+    <button
+      class="secondary icon s-sm disabled:opacity-40"
+      {...machine.getNextTriggerProps()}
+    ><span aria-hidden="true">›</span></button>
+    <button
+      class="secondary icon s-sm disabled:opacity-40"
+      {...machine.getLastTriggerProps()}
+    ><span aria-hidden="true">»</span></button>
+  </div>
+</nav>

package/dist/pagination/pagination.events.d.ts

@@ -0,0 +1,36 @@
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface PaginationEvents {
+  "SET_PAGE": {
+    page: number;
+  };
+  "SET_PAGE_SIZE": {
+    pageSize: number;
+  };
+  "FIRST_PAGE": {};
+  "LAST_PAGE": {};
+  "PREVIOUS_PAGE": {};
+  "NEXT_PAGE": {};
+  "SET_COUNT": {
+    count: number;
+  };
+}
+export type PaginationEvent = EventUnion<PaginationEvents>;
+export type PaginationPageChange = {
+  readonly page: number;
+  readonly pageSize: number;
+};
+export type PaginationPageSizeChange = {
+  readonly pageSize: number;
+};
+export type PaginationPageItem = {
+  readonly type: "page";
+  readonly value: number;
+  readonly key: string;
+  readonly label: string;
+} | {
+  readonly type: "ellipsis";
+  readonly index: number;
+  readonly key: string;
+  readonly label: string;
+};
+//# sourceMappingURL=pagination.events.d.ts.map

package/dist/pagination/pagination.events.js

@@ -0,0 +1 @@
+export {};

package/dist/pagination/pagination.machine.d.ts

@@ -0,0 +1,6 @@
+import { PaginationEvents, PaginationPageChange, PaginationPageItem, PaginationPageSizeChange } from "./pagination.events.js";
+import { PaginationArgs, PaginationContext, PaginationState, asCount, clampPage, nextPage, pageItems, pageRange, pageWindow, previousPage, totalPages } from "./pagination.state.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare function pagination(args?: PaginationArgs, authored?: (name: string) => boolean): Machine<PaginationContext, PaginationEvents, PaginationState>;
+export { type PaginationPageChange, type PaginationPageItem, type PaginationPageSizeChange, asCount, clampPage, nextPage, pageItems, pageRange, pageWindow, previousPage, totalPages };
+//# sourceMappingURL=pagination.machine.d.ts.map

package/dist/pagination/pagination.machine.js

@@ -0,0 +1,45 @@
+import { asCount, clampPage, initial, nextPage, pageItems, pageRange, pageWindow, previousPage, totalPages } from "./pagination.state.js";
+import { canSetPage, firstPage, hasNext, hasPrev, lastPage, nextPage as nextPage$1, prevPage, resetPageIfStranded, setCount, setPage, setPageSize } from "./pagination.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/pagination/pagination.machine.ts
+/** Pagination machine: one idle state with guarded transitions. */
+function pagination(args = {}, authored = () => false) {
+	return createMachine({
+		id: "pagination",
+		initial: "idle",
+		context: initial(args, authored),
+		fields: {
+			page: { event: "SET_PAGE" },
+			pageSize: { event: "SET_PAGE_SIZE" },
+			count: { event: "SET_COUNT" },
+			siblingCount: {},
+			boundaryCount: {},
+			label: {},
+			firstLabel: {},
+			prevLabel: {},
+			nextLabel: {},
+			lastLabel: {}
+		},
+		on: { SET_COUNT: { assign: [setCount, resetPageIfStranded] } },
+		states: { idle: { on: {
+			SET_PAGE: [{
+				cond: canSetPage,
+				assign: setPage
+			}],
+			SET_PAGE_SIZE: { assign: [setPageSize, resetPageIfStranded] },
+			FIRST_PAGE: { assign: firstPage },
+			LAST_PAGE: { assign: lastPage },
+			PREVIOUS_PAGE: [{
+				cond: hasPrev,
+				assign: prevPage
+			}],
+			NEXT_PAGE: [{
+				cond: hasNext,
+				assign: nextPage$1
+			}]
+		} } }
+	});
+}
+export { asCount, clampPage, nextPage, pageItems, pageRange, pageWindow, pagination, previousPage, totalPages };
+
+//# sourceMappingURL=pagination.machine.js.map

package/dist/pagination/pagination.presentation.d.ts

@@ -0,0 +1,161 @@
+import { PaginationEvents, PaginationPageItem } from "./pagination.events.js";
+import { PaginationArgs, PaginationContext, PaginationState, pageItems } from "./pagination.state.js";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+type ScopeLike = ViewFor<PaginationContext, PaginationEvents, PaginationState>;
+type SlotLike<R> = SlotViewFor<R, PaginationContext, PaginationEvents, PaginationState>;
+export declare const def: {
+  name: string;
+  machine: (args: PaginationArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<PaginationContext, PaginationEvents, "idle">;
+  start: "idle";
+  parts: {
+    root: {
+      attrs: (scope: ScopeLike) => {
+        role: string;
+        "aria-label": string | undefined;
+      };
+    };
+    firstTrigger: {
+      id: string;
+      attrs: (scope: ScopeLike) => Record<string, unknown>;
+    };
+    prevTrigger: {
+      id: string;
+      attrs: (scope: ScopeLike) => Record<string, unknown>;
+    };
+    nextTrigger: {
+      id: string;
+      attrs: (scope: ScopeLike) => Record<string, unknown>;
+    };
+    lastTrigger: {
+      id: string;
+      attrs: (scope: ScopeLike) => Record<string, unknown>;
+    };
+  };
+  slots: {
+    item: {
+      indexes: (context: PaginationContext) => PaginationPageItem[];
+      attrs: (scope: SlotLike<ReturnType<typeof pageItems>[number]>) => {
+        tabindex: string;
+        hidden: boolean;
+      } | {
+        "aria-label": string;
+        onClick: (e: MouseEvent) => void;
+        id: string;
+        type: string;
+      };
+    };
+    ellipsis: {
+      indexes: (context: PaginationContext) => PaginationPageItem[];
+      attrs: (scope: SlotLike<ReturnType<typeof pageItems>[number]>) => {
+        hidden: boolean;
+      } | {
+        id: string;
+      };
+    };
+  };
+  commands: {
+    setPage: {
+      event: ([page]: [page: number]) => {
+        type: "SET_PAGE";
+        page: number;
+      };
+    };
+    setPageSize: {
+      event: ([size]: [size: number]) => {
+        type: "SET_PAGE_SIZE";
+        pageSize: number;
+      };
+    };
+    goToFirstPage: {
+      event: () => {
+        type: "FIRST_PAGE";
+      };
+    };
+    goToLastPage: {
+      event: () => {
+        type: "LAST_PAGE";
+      };
+    };
+    goToNextPage: {
+      event: () => {
+        type: "NEXT_PAGE";
+      };
+    };
+    goToPrevPage: {
+      event: () => {
+        type: "PREVIOUS_PAGE";
+      };
+    };
+  };
+  readers: {
+    page: {
+      read: (context: PaginationContext) => number;
+    };
+    pageSize: {
+      read: (context: PaginationContext) => number;
+    };
+    count: {
+      read: (context: PaginationContext) => number;
+    };
+    totalPages: {
+      read: (context: PaginationContext) => number;
+    };
+    pageRange: {
+      read: (context: PaginationContext) => {
+        start: number;
+        end: number;
+      };
+    };
+    previousPage: {
+      read: (context: PaginationContext) => number | null;
+    };
+    nextPage: {
+      read: (context: PaginationContext) => number | null;
+    };
+    firstPage: {
+      read: (context: PaginationContext) => boolean;
+    };
+    lastPage: {
+      read: (context: PaginationContext) => boolean;
+    };
+    pageOptions: {
+      read: (context: PaginationContext) => PaginationPageItem[];
+    };
+  };
+  methods: {
+    getItems: {
+      call: (context: PaginationContext) => PaginationPageItem[];
+    };
+    getItemLabel: {
+      call: (context: PaginationContext, _state: "idle", [value]: [value: number]) => string;
+    };
+  };
+  events: {
+    "page-change": {
+      prop: string;
+      watch: (context: PaginationContext) => number[];
+      detail: (_watched: readonly unknown[], _event: {
+        readonly type: string;
+      } | undefined, _props: Record<string, unknown> | undefined, context: PaginationContext) => {
+        page: number;
+        pageSize: number;
+      };
+    };
+    "page-size-change": {
+      prop: string;
+      watch: (context: PaginationContext) => number[];
+      detail: (watched: readonly unknown[]) => {
+        pageSize: number;
+      };
+      select: (event: {
+        readonly type: string;
+      } & Record<string, unknown>, before: PaginationContext, after: PaginationContext) => {
+        pageSize: number;
+      } | null;
+    };
+  };
+};
+export type PaginationApi = ApiOf<typeof def>;
+export declare const pagination: import("@spinjs/runtime").DefinedComponent<PaginationApi, PaginationArgs>;
+export type { PaginationArgs, PaginationState };
+//# sourceMappingURL=pagination.presentation.d.ts.map

package/dist/pagination/pagination.presentation.js

@@ -0,0 +1,162 @@
+import { nextPage, pageItems, pageOptions, pageRange, previousPage, totalPages } from "./pagination.state.js";
+import { pagination as pagination$1 } from "./pagination.machine.js";
+import { ariaCurrent, ariaHidden, defineComponent } from "@spinjs/runtime";
+// src/pagination/pagination.presentation.ts
+/** Stable item-array identity per window. */
+const itemsCache = /* @__PURE__ */ new Map();
+const windowItems = (context) => {
+	const key = [
+		context.page,
+		context.pageSize,
+		context.count,
+		context.siblingCount,
+		context.boundaryCount
+	].join("|");
+	const hit = itemsCache.get(key);
+	if (hit !== void 0) return hit;
+	const made = pageItems(context);
+	itemsCache.set(key, made);
+	return made;
+};
+const triggerBag = (scope, key, part, label, enabled, type) => ({
+	type: "button",
+	"aria-label": label,
+	disabled: enabled ? void 0 : true,
+	onClick: (e) => {
+		if (e.defaultPrevented) return;
+		scope.send({ type });
+	}
+});
+const def = {
+	name: "pagination",
+	machine: (args, authored) => pagination$1(args, authored),
+	start: "idle",
+	parts: {
+		root: { attrs: (scope) => ({
+			role: "navigation",
+			"aria-label": scope.context.label
+		}) },
+		firstTrigger: {
+			id: "first",
+			attrs: (scope) => triggerBag(scope, "firstTrigger", "first-trigger", scope.context.firstLabel, scope.context.page !== 1, "FIRST_PAGE")
+		},
+		prevTrigger: {
+			id: "prev",
+			attrs: (scope) => triggerBag(scope, "prevTrigger", "prev-trigger", scope.context.prevLabel, previousPage(scope.context) !== null, "PREVIOUS_PAGE")
+		},
+		nextTrigger: {
+			id: "next",
+			attrs: (scope) => triggerBag(scope, "nextTrigger", "next-trigger", scope.context.nextLabel, nextPage(scope.context) !== null, "NEXT_PAGE")
+		},
+		lastTrigger: {
+			id: "last",
+			attrs: (scope) => {
+				const ctx = scope.context;
+				return triggerBag(scope, "lastTrigger", "last-trigger", ctx.lastLabel, ctx.page < totalPages(ctx), "LAST_PAGE");
+			}
+		}
+	},
+	slots: {
+		item: {
+			indexes: (context) => windowItems(context),
+			attrs: (scope) => {
+				const item = scope.slot;
+				if (item.type !== "page") return {
+					hidden: true,
+					...ariaHidden("true"),
+					tabindex: "-1"
+				};
+				const current = item.value === scope.context.page;
+				return {
+					id: scope.id("item", item.value),
+					type: "button",
+					...ariaCurrent(current ? "page" : void 0),
+					"aria-label": `page ${item.value}`,
+					onClick: (e) => {
+						if (e.defaultPrevented) return;
+						scope.send({
+							type: "SET_PAGE",
+							page: item.value
+						});
+					}
+				};
+			}
+		},
+		ellipsis: {
+			indexes: (context) => windowItems(context),
+			attrs: (scope) => {
+				const item = scope.slot;
+				if (item.type !== "ellipsis") return {
+					hidden: true,
+					...ariaHidden("true")
+				};
+				return {
+					id: scope.id("ellipsis", item.index),
+					...ariaHidden("true")
+				};
+			}
+		}
+	},
+	commands: {
+		setPage: { event: ([page]) => ({
+			type: "SET_PAGE",
+			page
+		}) },
+		setPageSize: { event: ([size]) => ({
+			type: "SET_PAGE_SIZE",
+			pageSize: size
+		}) },
+		goToFirstPage: { event: () => ({ type: "FIRST_PAGE" }) },
+		goToLastPage: { event: () => ({ type: "LAST_PAGE" }) },
+		goToNextPage: { event: () => ({ type: "NEXT_PAGE" }) },
+		goToPrevPage: { event: () => ({ type: "PREVIOUS_PAGE" }) }
+	},
+	readers: {
+		page: { read: (context) => context.page },
+		pageSize: { read: (context) => context.pageSize },
+		count: { read: (context) => context.count },
+		totalPages: { read: (context) => totalPages(context) },
+		pageRange: { read: (context) => ({ ...pageRange(context) }) },
+		previousPage: { read: (context) => previousPage(context) },
+		nextPage: { read: (context) => nextPage(context) },
+		firstPage: { read: (context) => context.page === 1 },
+		lastPage: { read: (context) => context.page >= totalPages(context) },
+		pageOptions: { read: (context) => pageOptions(context) }
+	},
+	methods: {
+		getItems: { call: (context) => windowItems(context) },
+		getItemLabel: { call: (context, _state, [value]) => {
+			const total = totalPages(context);
+			return `${total > 1 && value === total ? "last page, " : ""}page ${value}`;
+		} }
+	},
+	events: {
+		"page-change": {
+			prop: "onPageChange",
+			watch: (context) => [context.page, context.pageSize],
+			detail: (_watched, _event, _props, context) => ({
+				page: context.page,
+				pageSize: context.pageSize
+			})
+		},
+		"page-size-change": {
+			prop: "onPageSizeChange",
+			watch: (context) => [context.pageSize],
+			detail: (watched) => {
+				const size = watched[0];
+				return { pageSize: typeof size === "number" ? size : 0 };
+			},
+			select: (event, before, after) => {
+				if (event.type !== "SET_PAGE_SIZE") return null;
+				const beforeSize = before.pageSize;
+				const afterSize = after.pageSize;
+				if (beforeSize === afterSize) return null;
+				return { pageSize: afterSize };
+			}
+		}
+	}
+};
+const pagination = defineComponent(def);
+export { def, pagination };
+
+//# sourceMappingURL=pagination.presentation.js.map