Better fixtures

README.md

@@ -139,18 +139,23 @@ To highlight the current target element, use the `data-swup-scroll-target` attri
 
 ### Offset
 
-Offset to substract from the final scroll position, to account for fixed headers. Can be either a number or a function that returns the offset.
+Offset to substract from the final scroll position, to account for fixed headers. Can be either a
+static number or a function that returns a value based on the scroll target. To apply differing
+offsets for vertical and horizontal scrolling, return an object with `top` and `left` properties.
 
 ```javascript
 {
   // Number: fixed offset in px
   offset: 30,
 
+  // Object: fixed vertical and horizontal offset in px
+  offset: { top: 30, left: 10 },
+
   // Function: calculate offset before scrolling
   offset: () => document.querySelector('#header').offsetHeight,
 
-  // The scroll target element is passed into the function
-  offset: target => target.offsetHeight * 2,
+  // The scroll target and container are passed into the function
+  offset: (scrollTarget, scrollContainer) => target.offsetHeight * 2,
 }
 ```
 

package.json

@@ -25,9 +25,9 @@
     "lint": "swup package:lint",
     "format": "swup package:format",
     "prepublishOnly": "npm run build",
-    "fixtures:dev": "astro dev --root tests/e2e/fixtures",
-    "fixtures:build": "astro build --root tests/e2e/fixtures",
-    "fixtures:serve": "astro build --root tests/e2e/fixtures && astro preview --root tests/e2e/fixtures",
+    "playground:dev": "astro dev --root playground",
+    "playground:build": "astro build --root playground",
+    "playground:serve": "astro build --root playground && astro preview --root playground",
     "test": "npm run test:unit && npm run test:e2e",
     "test:unit": "vitest run --config ./tests/unit/vitest.config.ts",
     "test:unit:watch": "vitest --config ./tests/unit/vitest.config.ts",
@@ -73,9 +73,6 @@
     "typescript": "^5.8.3",
     "vitest": "^3.2.2"
   },
-  "peerDependencies": {
-    "swup": "^4.2.0"
-  },
   "browserslist": [
     "extends @swup/browserslist-config"
   ],

playground/src/components/AnchorsPageContent.astro

@@ -0,0 +1,149 @@
+---
+import Tiles from './Tiles.astro';
+import Table from './Table.astro';
+import Nav from './Nav.astro';
+---
+
+<div class="space-y-5 mb-10">
+	<section id="vertical">
+		<h2>Vertical</h2>
+		<div
+			class="border-2 rounded-sm overflow-y-auto h-50 w-full --vertical"
+			data-swup-scroll-container
+			data-testid="vertical"
+		>
+			<Tiles amount={100} direction="vertical" uniqueid="vertical" />
+		</div>
+	</section>
+
+	<Nav
+		links={[
+			{
+				href: '#top',
+				title: 'Top',
+				description: 'Scroll to the top of the page',
+				direction: 'up'
+			}
+		]}
+	/>
+
+	<section id="horizontal">
+		<h2>Horizontal</h2>
+		<div
+			class="border-2 rounded-sm w-full overflow-x-auto --horizontal"
+			data-swup-scroll-container
+			data-testid="horizontal"
+		>
+			<Tiles amount={50} direction="horizontal" uniqueid="horizontal" />
+		</div>
+	</section>
+
+	<Nav
+		links={[
+			{
+				href: '#top',
+				title: 'Top',
+				description: 'Scroll to the top of the page',
+				direction: 'up'
+			}
+		]}
+	/>
+
+	<section id="both-axis">
+		<h2>Both axis</h2>
+		<div
+			class="border-2 rounded-sm w-full h-100 overflow-auto"
+			data-swup-scroll-container
+			data-testid="both-axis"
+		>
+			<Table rows={20} columns={20} uniqueid="both-axis" />
+		</div>
+	</section>
+
+	<Nav
+		links={[
+			{
+				href: '#top',
+				title: 'Top',
+				description: 'Scroll to the top of the page',
+				direction: 'up'
+			}
+		]}
+	/>
+
+	<section>
+		<p>
+			Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod eligendi repudiandae
+			dolore deleniti fugit repellendus quibusdam, debitis earum natus? Nemo illo
+			exercitationem officiis, eligendi provident deserunt beatae saepe aliquam quod neque
+			accusantium odio fugit perspiciatis sequi earum enim itaque facilis eius maiores! Eum,
+			labore eaque necessitatibus itaque eos, facere quas, culpa in quo adipisci debitis error
+			excepturi numquam. Ad dolores adipisci nesciunt sunt delectus! Ab a facere error, ipsam
+			obcaecati soluta sapiente ullam iusto adipisci tempore laboriosam aliquam facilis
+			voluptates? Consectetur neque, obcaecati optio facere quae ab magnam alias perferendis
+			reiciendis facilis quasi sequi nesciunt possimus, dignissimos quisquam ullam totam
+			dolorem soluta asperiores error molestiae, eaque maiores laborum! Voluptas quis
+			excepturi perspiciatis rem nulla consequuntur unde iure perferendis fuga nihil nostrum
+			quae molestiae non nemo eaque commodi modi praesentium earum adipisci, sunt iste
+			distinctio. Vitae distinctio possimus aliquam dignissimos perferendis provident totam
+			repellat? Dolore a eligendi debitis numquam, consectetur ex, minima ea eum obcaecati
+			impedit, rerum saepe ipsa pariatur odit cupiditate dolores soluta repudiandae non
+			similique. Ipsam, deleniti itaque. Libero, maiores optio! Excepturi ab iste possimus,
+			ipsa odio quam dicta laboriosam ducimus laudantium ullam ipsam eaque neque ut! Veritatis
+			recusandae porro voluptatibus nulla accusamus quisquam deleniti ab sunt? Alias doloribus
+			temporibus quibusdam. Deserunt adipisci possimus veniam vel laboriosam recusandae,
+			porro, eligendi numquam quaerat accusantium aperiam eos perspiciatis ex maiores
+			provident, architecto sit laudantium at totam ipsa aliquam reprehenderit. Ipsum nam
+			laudantium ea quaerat voluptatem ullam laboriosam quis temporibus, delectus ad quibusdam
+			qui et itaque. Nostrum necessitatibus natus possimus deleniti maxime saepe ipsa voluptas
+			blanditiis minus id, temporibus ex et debitis repudiandae autem! Similique non eaque
+			necessitatibus ad a deserunt, libero optio facilis dolorem consequuntur quos aperiam
+			corporis nulla, impedit cumque mollitia nostrum voluptate corrupti reiciendis,
+			voluptatem pariatur tempore inventore. Dolorum, nulla quod. Sit officia fugiat
+			voluptatibus eos. Pariatur vitae molestias adipisci velit quasi illo ad praesentium
+			perferendis possimus, eius consequuntur minima provident enim ipsa minus expedita
+			voluptatum eveniet ratione. Corrupti perferendis amet possimus vel vitae commodi
+			aspernatur rem nisi voluptatum est asperiores illo aliquam alias quidem ut porro natus
+			assumenda, blanditiis ullam quas quia ducimus perspiciatis atque placeat. Iste quod
+			officia deserunt exercitationem vero perferendis blanditiis voluptates voluptas pariatur
+			eum, labore officiis sed corporis accusantium recusandae? Voluptatem autem natus nam
+			modi repellat vel. Ipsa voluptatibus quisquam minus non ea corporis impedit debitis
+			itaque neque assumenda omnis aliquid modi laborum, consequatur optio maiores possimus
+			illum sapiente, quod iusto eius deleniti quaerat! Commodi, eum iure rem eligendi
+			explicabo possimus. Fugiat ab at consequatur vel neque sapiente, doloribus accusamus
+			tempora dolorem impedit, praesentium labore enim corporis rerum. Soluta beatae
+			repellendus dicta labore vel accusamus similique quasi dolorem, fuga assumenda, nisi
+			iusto rerum veritatis totam illum ipsam! Accusamus ut consectetur incidunt consequatur
+			placeat neque cumque totam quaerat eaque, optio maxime esse animi earum praesentium, vel
+			cupiditate unde cum excepturi rerum sit. Magnam, eos ducimus repellendus earum assumenda
+			qui quisquam hic et inventore eum exercitationem nemo modi, ad, veniam incidunt?
+			Pariatur ipsam saepe at, sint voluptatum ab error optio. Culpa fugit ut, dolorum nam
+			nemo non iste. Rem, vero voluptas. In et corporis labore, repellat eius veritatis autem
+			unde maiores sapiente commodi, ducimus quisquam nobis ut, dolorem fuga porro sit
+			officiis voluptate. Error numquam voluptatibus, earum, quo, quas atque animi laborum
+			labore magnam voluptate voluptates facere suscipit quisquam at quam nobis porro optio
+			doloremque nesciunt veritatis vero quis cum ea. Rem minima adipisci exercitationem vitae
+			iure fugiat, beatae consequatur error numquam suscipit aliquam accusantium, ratione
+			ipsum deserunt reiciendis eligendi? Odit saepe repudiandae nam nobis porro error dolor,
+			tenetur facere autem aliquid eum sit officiis ipsum itaque expedita rem nesciunt ullam
+			odio eos, assumenda maiores. Hic doloribus dolores fugiat laborum laudantium inventore
+			minima accusantium dicta ut dolorum amet nemo aliquam provident odio adipisci sequi
+			eligendi repudiandae, vel nisi id distinctio nobis totam consequuntur voluptas. Libero
+			iusto totam, impedit facere assumenda earum asperiores tempore maiores numquam nostrum
+			quam, alias exercitationem vitae reiciendis ex consequatur eaque illo vero excepturi nam
+			natus! Corporis vitae facilis ad quos at ducimus cum, blanditiis voluptatem, qui eius
+			consequatur unde numquam quo recusandae id sunt iste vel nesciunt iusto, voluptas
+			aperiam quod. Eaque praesentium, iusto quaerat, laudantium consectetur veritatis ex
+			doloremque quos rerum autem expedita porro ipsa asperiores eius omnis pariatur id
+			accusamus qui. Ab provident soluta rem nam, dolor exercitationem eveniet aperiam quaerat
+			optio possimus ex tenetur vel assumenda reprehenderit odio eum nobis perferendis
+			deserunt. Magni id cupiditate minus debitis ducimus deleniti non dolorum possimus harum
+			ex architecto distinctio delectus cumque doloremque esse, quod optio voluptates
+			inventore quasi? Distinctio, ex natus harum in ullam ut ea, impedit ipsa magnam, porro
+			tempore. Ducimus, suscipit officiis ex numquam minus alias consectetur. Nulla quidem
+			obcaecati dicta doloremque quo excepturi hic quisquam neque nisi ratione cumque amet
+			vitae a necessitatibus perspiciatis fuga veritatis, consequuntur aliquid deleniti
+			placeat quae ab nemo. Blanditiis optio dolore impedit tenetur placeat!
+		</p>
+	</section>
+</div>

playground/src/components/BothDirections.astro

@@ -0,0 +1,7 @@
+---
+import Table from "./Table.astro";
+---
+
+<div class="border-2 rounded-sm w-full h-100 overflow-auto" data-testid="both-axis">
+  <Table rows={20} columns={20} uniqueid="both-axis" />
+</div>

playground/src/components/Header.astro

@@ -0,0 +1,57 @@
+---
+import { ArrowRightIcon, ArrowUpRightIcon } from 'astro-feather';
+
+const links = [
+	{
+		href: 'https://github.com/swup/scroll-plugin',
+		title: 'GitHub'
+	}
+];
+
+if (Astro.url.pathname !== '/') {
+	links.unshift({
+		href: '/',
+		title: 'Overview'
+	});
+}
+
+const path = Astro.url.pathname.replace(/^\/|\/$/g, '');
+
+const isExternal = (href: string) => href.startsWith('http');
+---
+
+<header
+	id="header"
+	class="text-swup-purple flex gap-2 border-b-2 p-3 sticky z-10 top-0 bg-white items-center font-bold whitespace-nowrap"
+>
+	<a id="homelink" href="/" class="flex gap-2 items-center">
+		<img
+			src="https://swup.js.org/assets/images/swup-logo-icon.svg"
+			alt="Swup Logo"
+			class="aspect-square w-8"
+		/>
+		<span class="flex gap-1 items-center">
+			<span class="block"><span class="hidden sm:inline-block">@swup/</span>scroll-plugin</span>
+			{path && <ArrowRightIcon size={18} /> <span>{path}</span>}
+		</span>
+	</a>
+
+	<ul class="ml-auto gap-4 pe-2 hidden md:flex">
+		{
+			links.map((link) => (
+				<li>
+					<a
+						href={link.href}
+						target={isExternal(link.href) ? '_blank' : '_self'}
+						class="hover:underline flex gap-0.5 items-center"
+					>
+						{link.title}
+						{isExternal(link.href) && <span class="text-gray-400">
+							<ArrowUpRightIcon size={20} />
+						</span>}
+					</a>
+				</li>
+			))
+		}
+	</ul>
+</header>

playground/src/components/Nav.astro

@@ -0,0 +1,28 @@
+---
+import NavLink from './NavLink.astro';
+import type { Props as NavLinkProps } from './NavLink.astro';
+
+export type Props = {
+	links: NavLinkProps[];
+};
+
+const { links } = Astro.props;
+---
+
+<nav class="pointer-events-none">
+	<ul class="grid md:grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4 mb-10">
+		{
+			links.map((link) => (
+				<li>
+					<NavLink
+						href={link.href}
+						title={link.title}
+						description={link.description}
+						direction={link.direction}
+						attributes={link.attributes}
+					/>
+				</li>
+			))
+		}
+	</ul>
+</nav>

playground/src/components/NavLink.astro

@@ -0,0 +1,46 @@
+---
+import { ArrowRightIcon, ArrowUpIcon, ArrowLeftIcon, ArrowDownIcon } from 'astro-feather';
+
+type Direction = 'right' | 'down' | 'left' | 'up';
+
+export type Props = {
+	href: string;
+	title: string;
+	description: string;
+	direction?: Direction;
+	attributes?: Record<string, string | boolean>;
+};
+
+const { href, title, description, direction = 'right', attributes = {} } = Astro.props;
+
+const Icon = {
+	right: ArrowRightIcon,
+	down: ArrowDownIcon,
+	left: ArrowLeftIcon,
+	up: ArrowUpIcon
+}[direction];
+---
+
+<a
+	href={href}
+	class="group block border-2 rounded-sm p-2 transition-all text-black/50 bg-white hover:text-swup-purple hover:bg-gray-100 pointer-events-auto"
+	{...attributes}
+>
+	<strong class="flex gap-1 items-center text-black group-hover:text-swup-purple">
+		{title}
+		<span
+			class="transition-transform ms-auto"
+			class:list={[
+				{
+					'group-hover:translate-x-0.5': direction === 'right',
+					'group-hover:-translate-x-0.5': direction === 'left',
+					'group-hover:translate-y-0.5': direction === 'down',
+					'group-hover:-translate-y-0.5': direction === 'up'
+				}
+			]}
+		>
+			<Icon size={22} />
+		</span>
+	</strong>
+	<span class="text-sm leading-0">{description}</span>
+</a>