refactor)slidy-svelte): rename packed prop into proups

Author: EricRovell

assets/styles/slidy.module.css

@@ -28,18 +28,18 @@
     -webkit-user-select: none;
 }
 
-.slidy.packed .slidy-slides {
-    --_slidy-pack-size: calc(
-        (100% - var(--slidy-slide-gap, 1rem) * var(--slidy-pack-size)) / var(--slidy-pack-size)
+.slidy.groups .slidy-slides {
+    --_slidy-group-item-size: calc(
+        (100% - var(--slidy-slide-gap, 1rem) * var(--slidy-group-items)) / var(--slidy-group-items)
     );
 }
 
-.slidy:not(.vertical).packed .slidy-slides {
-    --slidy-slide-width: var(--_slidy-pack-size);
+.slidy:not(.vertical).groups .slidy-slides {
+    --slidy-slide-width: var(--_slidy-group-item-size);
 }
 
-.slidy.vertical.packed .slidy-slides {
-    --slidy-slide-height: var(--_slidy-pack-size);
+.slidy.vertical.groups .slidy-slides {
+    --slidy-slide-height: var(--_slidy-group-item-size);
 }
 
 /* overlay */

packages/svelte/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Unreleased
 
-- [feat]: implement `packed` prop to control the number of items displayed pre viewport.
+- [feat]: implement `groups` prop to control the number of items displayed per viewport;
 - [fix]: inherit `clamp` value by control buttons;
 
 ## 3.2.0

packages/svelte/README.md

@@ -110,10 +110,10 @@ The `<Slidy />` component interface extends the `<Core />`. There are a list of
 | `classNames` | `SlidyStyles` | `SlidyStylesDefault` | The class names object used over the component. |
 | `getImgSrc` | `item => item.src` | `function` | The slide's `src` attribute getter. |
 | `getThumbSrc` | `item => item.src` | `function` | The thumbnail's `src` attribute getter. |
+| `groups` | `0` | `number` | Controls the number of items displayed pew viewport. | 
 | `i18n` | `i18nDefaults` | `I18NDict` | The i18n localization dictionary. |
 | `interval` | `1500` | `number` | Defines the autoplay interval time in ms. |
 | `navigation` | `false` | `boolean` | Renders the navigation controls for pagination-like slide navigation. |
-| `packed` | `0` | `number` | Controls the number of items displayed pew viewport. | 
 | `progress` | `false` | `boolean` | Renders the progress bar. |
 | `slides` | `[]` | `Slides[]` | An array of objects with image metadata. |
 | `thumbnail` | `false` | `boolean`  | Renders the thumbnail navigation panel. |

packages/svelte/src/components/Slidy/Slidy.svelte

@@ -34,7 +34,7 @@
 	export let index = 0;
 	export let interval = 1500;
 	export let loop = false;
-	export let packed = 0;
+	export let groups = 0;
 	export let position = 0;
 	export let progress = false;
 	export let sensity = 5;
@@ -115,7 +115,7 @@
 	aria-roledescription="{i18n.carousel}"
 	class="{classNames?.root}"
 	class:vertical
-	class:packed={packed > 1}
+	class:groups={groups > 1}
 	on:click={handleClick}
 	on:play={handleAutoplay}
 	on:pause={handleAutoplayPause}
@@ -125,7 +125,7 @@
 	on:pause
 	on:stop
 	style:--slidy-autoplay-interval="{interval}ms"
-	style:--slidy-pack-size="{packed}"
+	style:--slidy-group-items="{groups}"
 >
 	{#if counter || $$slots.overlay}
 		<div class="{classNames?.overlay}">

packages/svelte/src/components/Slidy/Slidy.types.ts

@@ -39,10 +39,10 @@ export interface SlidyOptions extends SlidyCoreOptions {
 	classNames: SlidyStyles;
 	getImgSrc: (item: unknown | Slide) => string;
 	getThumbSrc: (item: unknown | Slide ) => string;
+	groups?: number;
 	i18n: I18NDict;
 	interval?: number;
 	navigation?: boolean;
-	packed?: number;
 	progress?: boolean;
 	slides: Slide[];
 	thumbnail?: boolean;

packages/svelte/src/dev/App.svelte

@@ -13,8 +13,9 @@
 	import "@slidy/assets/styles/dev/app.module.css";
 
 	let animation = translate;
-	let axis: "x" | "y" = "x";
+	let axis: "x" | "y" = "y";
 	let easing = linear;
+	let groups = 0;
 	let position = 0;
 	let limit = 10;
 	let index = 4;
@@ -82,6 +83,7 @@
 			{clamp}
 			{duration}
 			{gravity}
+			{groups}
 			{indent}
 			navigation
 			{snap}