feat: expose scrollSnaps selectedIndex scrollTo (#1052)

Co-authored-by: Davis SHYAKA <[email protected]>
huntabyte · Apr 27, 2024 · 9125246 · 9125246
1 parent a56d026
commit 9125246
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 0 deletions.
diff --git a/apps/www/src/lib/registry/default/ui/carousel/carousel.svelte b/apps/www/src/lib/registry/default/ui/carousel/carousel.svelte
@@ -20,6 +20,8 @@
 	const canScrollNext = writable(false);
 	const optionsStore = writable(opts);
 	const pluginStore = writable(plugins);
+	const scrollSnapsStore = writable<number[]>([]);
+	const selectedIndexStore = writable(0);
 
 	$: orientationStore.set(orientation);
 	$: pluginStore.set(plugins);
@@ -31,6 +33,9 @@
 	function scrollNext() {
 		api?.scrollNext();
 	}
+	function scrollTo(index: number, jump?: boolean) {
+		api?.scrollTo(index, jump);
+	}
 
 	function onSelect(api: CarouselAPI) {
 		if (!api) return;
@@ -65,6 +70,9 @@
 		options: optionsStore,
 		plugins: pluginStore,
 		onInit,
+		scrollSnaps: scrollSnapsStore,
+		selectedIndex: selectedIndexStore,
+		scrollTo,
 	});
 
 	function onInit(event: CustomEvent<CarouselAPI>) {

diff --git a/apps/www/src/lib/registry/default/ui/carousel/context.ts b/apps/www/src/lib/registry/default/ui/carousel/context.ts
@@ -38,6 +38,9 @@ type EmblaContext = {
 	options: Writable<CarouselOptions>;
 	plugins: Writable<CarouselPlugins>;
 	onInit: (e: CustomEvent<CarouselAPI>) => void;
+	scrollTo: (index: number, jump?: boolean) => void;
+	scrollSnaps: Readable<number[]>;
+	selectedIndex: Readable<number>;
 };
 
 export function setEmblaContext(config: EmblaContext): EmblaContext {

diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/carousel.svelte b/apps/www/src/lib/registry/new-york/ui/carousel/carousel.svelte
@@ -20,6 +20,8 @@
 	const canScrollNext = writable(false);
 	const optionsStore = writable(opts);
 	const pluginStore = writable(plugins);
+	const scrollSnapsStore = writable<number[]>([]);
+	const selectedIndexStore = writable(0);
 
 	$: orientationStore.set(orientation);
 	$: pluginStore.set(plugins);
@@ -31,6 +33,9 @@
 	function scrollNext() {
 		api?.scrollNext();
 	}
+	function scrollTo(index: number, jump?: boolean) {
+		api?.scrollTo(index, jump);
+	}
 
 	function onSelect(api: CarouselAPI) {
 		if (!api) return;
@@ -65,6 +70,9 @@
 		options: optionsStore,
 		plugins: pluginStore,
 		onInit,
+		scrollSnaps: scrollSnapsStore,
+		selectedIndex: selectedIndexStore,
+		scrollTo,
 	});
 
 	function onInit(event: CustomEvent<CarouselAPI>) {

diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/context.ts b/apps/www/src/lib/registry/new-york/ui/carousel/context.ts
@@ -38,6 +38,9 @@ type EmblaContext = {
 	options: Writable<CarouselOptions>;
 	plugins: Writable<CarouselPlugins>;
 	onInit: (e: CustomEvent<CarouselAPI>) => void;
+	scrollTo: (index: number, jump?: boolean) => void;
+	scrollSnaps: Readable<number[]>;
+	selectedIndex: Readable<number>;
 };
 
 export function setEmblaContext(config: EmblaContext): EmblaContext {