feature: First Page and Last Page buttons for svelte

.changeset/fast-tigers-drop.md

@@ -0,0 +1,8 @@
+---
+"@skeletonlabs/skeleton-common": minor
+"@skeletonlabs/skeleton-svelte": minor
+"@skeletonlabs/skeleton-react": minor
+---
+
+feat: `Pagination.FirstTrigger` and `Pagination.LastTrigger`
+

packages/skeleton-common/src/classes/pagination.ts

@@ -2,8 +2,10 @@ import { defineSkeletonClasses } from '../internal/define-skeleton-classes.js' w
 
 export const classesPagination = defineSkeletonClasses({
 	root: 'inline-flex gap-2 p-2 rounded-container preset-outlined-surface-200-800 w-fit',
+	firstTrigger: 'btn btn-sm preset-tonal',
 	prevTrigger: 'btn btn-sm preset-tonal',
 	item: 'btn btn-sm preset-tonal cursor-pointer select-none data-selected:preset-filled',
 	ellipsis: 'btn btn-sm preset-tonal pointer-events-none',
 	nextTrigger: 'btn btn-sm preset-tonal',
+	lastTrigger: 'btn btn-sm preset-tonal',
 });

packages/skeleton-react/src/components/pagination/anatomy/first-trigger.tsx

@@ -0,0 +1,24 @@
+import { RootContext } from '../modules/root-context.js';
+import type { HTMLAttributes } from '@/internal/html-attributes.js';
+import type { PropsWithElement } from '@/internal/props-with-element.js';
+import { classesPagination } from '@skeletonlabs/skeleton-common';
+import { mergeProps } from '@zag-js/react';
+import { use } from 'react';
+
+export interface PaginationFirstTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {}
+
+export default function FirstTrigger(props: PaginationFirstTriggerProps) {
+	const pagination = use(RootContext);
+
+	const { element, children, ...rest } = props;
+
+	const attributes = mergeProps(
+		{
+			className: classesPagination.nextTrigger,
+			onClick: pagination.goToFirstPage,
+		},
+		rest,
+	);
+
+	return element ? element(attributes) : <button {...attributes}>{children}</button>;
+}

packages/skeleton-react/src/components/pagination/anatomy/last-trigger.tsx

@@ -0,0 +1,24 @@
+import { RootContext } from '../modules/root-context.js';
+import type { HTMLAttributes } from '@/internal/html-attributes.js';
+import type { PropsWithElement } from '@/internal/props-with-element.js';
+import { classesPagination } from '@skeletonlabs/skeleton-common';
+import { mergeProps } from '@zag-js/react';
+import { use } from 'react';
+
+export interface PaginationLastTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {}
+
+export default function LastTrigger(props: PaginationLastTriggerProps) {
+	const pagination = use(RootContext);
+
+	const { element, children, ...rest } = props;
+
+	const attributes = mergeProps(
+		{
+			className: classesPagination.nextTrigger,
+			onClick: pagination.goToLastPage,
+		},
+		rest,
+	);
+
+	return element ? element(attributes) : <button {...attributes}>{children}</button>;
+}

packages/skeleton-react/src/components/pagination/index.ts

@@ -1,8 +1,10 @@
 export { Pagination } from './modules/anatomy.js';
 export { usePagination } from './modules/provider.js';
 export type { PaginationRootProviderProps } from './anatomy/root-provider.jsx';
+export type { PaginationFirstTriggerProps } from './anatomy/first-trigger.jsx';
 export type { PaginationPrevTriggerProps } from './anatomy/prev-trigger.jsx';
 export type { PaginationNextTriggerProps } from './anatomy/next-trigger.jsx';
+export type { PaginationLastTriggerProps } from './anatomy/last-trigger.jsx';
 export type { PaginationItemProps } from './anatomy/item.jsx';
 export type { PaginationRootContextProps } from './anatomy/root-context.jsx';
 export type { PaginationRootProps } from './anatomy/root.jsx';

packages/skeleton-react/src/components/pagination/modules/anatomy.ts

@@ -1,5 +1,7 @@
 import Ellipsis from '../anatomy/ellipsis.jsx';
+import FirstTrigger from '../anatomy/first-trigger.jsx';
 import Item from '../anatomy/item.jsx';
+import LastTrigger from '../anatomy/last-trigger.jsx';
 import NextTrigger from '../anatomy/next-trigger.jsx';
 import PrevTrigger from '../anatomy/prev-trigger.jsx';
 import RootContext from '../anatomy/root-context.jsx';
@@ -9,8 +11,10 @@ import Root from '../anatomy/root.jsx';
 export const Pagination = Object.assign(Root, {
 	Provider: RootProvider,
 	Context: RootContext,
+	FirstTrigger: FirstTrigger,
 	PrevTrigger: PrevTrigger,
 	Item: Item,
 	Ellipsis: Ellipsis,
 	NextTrigger: NextTrigger,
+	LastTrigger: LastTrigger,
 });

packages/skeleton-react/test/components/pagination/index.test.tsx

@@ -10,6 +10,13 @@ describe('Pagination', () => {
 		});
 	});
 
+	describe('FirstTrigger', () => {
+		it('renders', () => {
+			render(<Test />);
+			expect(screen.getByTestId('first-trigger')).toBeInTheDocument();
+		});
+	});
+
 	describe('PrevTrigger', () => {
 		it('renders', () => {
 			render(<Test />);
@@ -37,4 +44,11 @@ describe('Pagination', () => {
 			expect(screen.getByTestId('next-trigger')).toBeInTheDocument();
 		});
 	});
+
+	describe('LastTrigger', () => {
+		it('renders', () => {
+			render(<Test />);
+			expect(screen.getByTestId('first-trigger')).toBeInTheDocument();
+		});
+	});
 });

packages/skeleton-react/test/components/pagination/test.tsx

@@ -3,10 +3,12 @@ import { Pagination } from '@/index.js';
 export default function Test() {
 	return (
 		<Pagination data-testid="root">
+			<Pagination.FirstTrigger data-testid="first-trigger" />
 			<Pagination.PrevTrigger data-testid="prev-trigger" />
 			<Pagination.Item type="page" value={0} data-testid="item" />
 			<Pagination.Ellipsis index={0} data-testid="ellipsis" />
 			<Pagination.NextTrigger data-testid="next-trigger" />
+			<Pagination.LastTrigger data-testid="last-trigger" />
 		</Pagination>
 	);
 }

packages/skeleton-svelte/src/components/pagination/anatomy/first-trigger.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '@/internal/html-attributes.js';
+	import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+	export interface PaginationFirstTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { classesPagination } from '@skeletonlabs/skeleton-common';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: PaginationFirstTriggerProps = $props();
+
+	const pagination = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			{
+				class: classesPagination.firstTrigger,
+				onclick: () => pagination().goToFirstPage(),
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<button {...attributes}>
+		{@render children?.()}
+	</button>
+{/if}

packages/skeleton-svelte/src/components/pagination/anatomy/last-trigger.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from '@/internal/html-attributes.js';
+	import type { PropsWithElement } from '@/internal/props-with-element.js';
+
+	export interface PaginationLastTriggerProps extends PropsWithElement<'button'>, HTMLAttributes<'button'> {}
+</script>
+
+<script lang="ts">
+	import { RootContext } from '../modules/root-context.js';
+	import { classesPagination } from '@skeletonlabs/skeleton-common';
+	import { mergeProps } from '@zag-js/svelte';
+
+	const props: PaginationLastTriggerProps = $props();
+
+	const pagination = RootContext.consume();
+
+	const { element, children, ...rest } = $derived(props);
+
+	const attributes = $derived(
+		mergeProps(
+			{
+				class: classesPagination.lastTrigger,
+				onclick: () => pagination().goToLastPage(),
+			},
+			rest,
+		),
+	);
+</script>
+
+{#if element}
+	{@render element(attributes)}
+{:else}
+	<button {...attributes}>
+		{@render children?.()}
+	</button>
+{/if}

packages/skeleton-svelte/src/components/pagination/anatomy/next-trigger.svelte

@@ -18,9 +18,9 @@
 
 	const attributes = $derived(
 		mergeProps(
-			pagination().getNextTriggerProps(),
 			{
 				class: classesPagination.nextTrigger,
+				onclick: pagination().getNextTriggerProps(),
 			},
 			rest,
 		),

packages/skeleton-svelte/src/components/pagination/index.ts

@@ -7,3 +7,5 @@ export type { PaginationItemProps } from './anatomy/item.svelte';
 export type { PaginationRootContextProps } from './anatomy/root-context.svelte';
 export type { PaginationRootProps } from './anatomy/root.svelte';
 export type { PaginationEllipsisProps } from './anatomy/ellipsis.svelte';
+export type { PaginationFirstTriggerProps } from './anatomy/first-trigger.svelte';
+export type { PaginationLastTriggerProps } from './anatomy/last-trigger.svelte';

packages/skeleton-svelte/src/components/pagination/modules/anatomy.ts

@@ -1,5 +1,7 @@
 import Ellipsis from '../anatomy/ellipsis.svelte';
+import FirstTrigger from '../anatomy/first-trigger.svelte';
 import Item from '../anatomy/item.svelte';
+import LastTrigger from '../anatomy/last-trigger.svelte';
 import NextTrigger from '../anatomy/next-trigger.svelte';
 import PrevTrigger from '../anatomy/prev-trigger.svelte';
 import RootContext from '../anatomy/root-context.svelte';
@@ -9,8 +11,10 @@ import Root from '../anatomy/root.svelte';
 export const Pagination = Object.assign(Root, {
 	Provider: RootProvider,
 	Context: RootContext,
+	FirstTrigger: FirstTrigger,
 	PrevTrigger: PrevTrigger,
 	Item: Item,
 	Ellipsis: Ellipsis,
 	NextTrigger: NextTrigger,
+	LastTrigger: LastTrigger,
 });

packages/skeleton-svelte/test/components/pagination/index.test.ts

@@ -10,6 +10,13 @@ describe('Pagination', () => {
 		});
 	});
 
+	describe('FirstTrigger', () => {
+		it('renders', () => {
+			render(Test);
+			expect(screen.getByTestId('first-trigger')).toBeInTheDocument();
+		});
+	});
+
 	describe('PrevTrigger', () => {
 		it('renders', () => {
 			render(Test);
@@ -37,4 +44,11 @@ describe('Pagination', () => {
 			expect(screen.getByTestId('next-trigger')).toBeInTheDocument();
 		});
 	});
+
+	describe('LastTrigger', () => {
+		it('renders', () => {
+			render(Test);
+			expect(screen.getByTestId('last-trigger')).toBeInTheDocument();
+		});
+	});
 });

packages/skeleton-svelte/test/components/pagination/test.svelte

@@ -3,8 +3,10 @@
 </script>
 
 <Pagination data-testid="root">
+	<Pagination.FirstTrigger data-testid="first-trigger" />
 	<Pagination.PrevTrigger data-testid="prev-trigger" />
 	<Pagination.Item type="page" value={0} data-testid="item" />
 	<Pagination.Ellipsis index={0} data-testid="ellipsis" />
 	<Pagination.NextTrigger data-testid="next-trigger" />
+	<Pagination.LastTrigger data-testid="last-trigger" />
 </Pagination>

playgrounds/skeleton-react/app/components/pagination/page.tsx

@@ -5,6 +5,7 @@ import { Pagination } from '@skeletonlabs/skeleton-react';
 export default function Page() {
 	return (
 		<Pagination count={5000} pageSize={10}>
+			<Pagination.FirstTrigger>First</Pagination.FirstTrigger>
 			<Pagination.PrevTrigger>Prev</Pagination.PrevTrigger>
 			<Pagination.Context>
 				{(pagination) =>
@@ -22,6 +23,7 @@ export default function Page() {
 				}
 			</Pagination.Context>
 			<Pagination.NextTrigger>Next</Pagination.NextTrigger>
+			<Pagination.LastTrigger>Last</Pagination.LastTrigger>
 		</Pagination>
 	);
 }

playgrounds/skeleton-svelte/src/routes/components/pagination/+page.svelte

@@ -3,6 +3,7 @@
 </script>
 
 <Pagination count={5000} pageSize={10}>
+	<Pagination.FirstTrigger>First</Pagination.FirstTrigger>
 	<Pagination.PrevTrigger>Prev</Pagination.PrevTrigger>
 	<Pagination.Context>
 		{#snippet children(pagination)}
@@ -16,4 +17,5 @@
 		{/snippet}
 	</Pagination.Context>
 	<Pagination.NextTrigger>Next</Pagination.NextTrigger>
+	<Pagination.LastTrigger>Last</Pagination.LastTrigger>
 </Pagination>