From e2603c3b7eac3dd6b68f565ad2ef58544ff49314 Mon Sep 17 00:00:00 2001 From: Vadim Date: Wed, 27 Jan 2021 23:34:24 +0300 Subject: [PATCH] Rename speed => duration --- src/components/Carousel/Carousel.svelte | 20 +++++++++---------- src/components/Carousel/CarouselView.svelte | 14 ++++++------- .../Carousel/CarouselViewCustomArrows.svelte | 10 +++++----- .../Carousel/CarouselViewCustomDots.svelte | 10 +++++----- src/docs/Carousel.svx | 16 +++++++-------- 5 files changed, 35 insertions(+), 35 deletions(-) diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte index a0cd5fe..6de24d9 100644 --- a/src/components/Carousel/Carousel.svelte +++ b/src/components/Carousel/Carousel.svelte @@ -32,10 +32,10 @@ export let initialPageIndex = 0 /** - * Transition speed (ms) + * Transition duration (ms) */ - export let speed = 500 - let _speed = speed + export let duration = 500 + let _duration = duration /** * Enables auto play of pages @@ -45,7 +45,7 @@ /** * Auto play change interval */ - export let autoplaySpeed = 3000 + export let autoplayDuration = 3000 /** * Auto play change direction ('next', 'prev') @@ -90,7 +90,7 @@ if (autoplay) { interval = setInterval(() => { directionFnDescription[autoplayDirection]() - }, autoplaySpeed) + }, autoplayDuration) } return { teardownAutoplay: () => { @@ -134,13 +134,13 @@ } function offsetPage(animated) { - _speed = animated ? speed : 0 + _duration = animated ? duration : 0 offset = -currentPageIndex * pageWidth if (infinite) { if (currentPageIndex === 0) { - showPage(pagesCount - 2, { offsetDelay: speed, animated: false }) + showPage(pagesCount - 2, { offsetDelay: duration, animated: false }) } else if (currentPageIndex === pagesCount - 1) { - showPage(1, { offsetDelay: speed, animated: false }) + showPage(1, { offsetDelay: duration, animated: false }) } } } @@ -162,7 +162,7 @@ // gestures function handleSwipeStart() { - _speed = 0 + _duration = 0 } function handleThreshold(event) { directionFnDescription[event.detail.direction]() @@ -201,7 +201,7 @@ on:threshold={handleThreshold} style=" transform: translateX({offset}px); - transition-duration: {_speed}ms; + transition-duration: {_duration}ms; " bind:this={pagesElement} > diff --git a/src/components/Carousel/CarouselView.svelte b/src/components/Carousel/CarouselView.svelte index aef4239..2c9c2a4 100644 --- a/src/components/Carousel/CarouselView.svelte +++ b/src/components/Carousel/CarouselView.svelte @@ -18,9 +18,9 @@ export let initialPageIndex = 1 /** - * Transition speed (ms) + * Transition duration (ms) */ - export let speed = 500 + export let duration = 500 /** * Enables auto play of pages @@ -30,7 +30,7 @@ /** * Auto play change interval */ - export let autoplaySpeed = 3000 + export let autoplayDuration = 3000 /** * Auto play change direction ('next', 'prev') @@ -67,9 +67,9 @@ {arrows} {infinite} {initialPageIndex} - {speed} + {duration} {autoplay} - {autoplaySpeed} + {autoplayDuration} {autoplayDirection} {dots} > @@ -87,9 +87,9 @@ {arrows} {infinite} {initialPageIndex} - {speed} + {duration} {autoplay} - {autoplaySpeed} + {autoplayDuration} {autoplayDirection} {dots} > diff --git a/src/components/Carousel/CarouselViewCustomArrows.svelte b/src/components/Carousel/CarouselViewCustomArrows.svelte index b8dd7ec..1ca3947 100644 --- a/src/components/Carousel/CarouselViewCustomArrows.svelte +++ b/src/components/Carousel/CarouselViewCustomArrows.svelte @@ -18,9 +18,9 @@ export let initialPageIndex = 1 /** - * Transition speed (ms) + * Transition duration (ms) */ - export let speed = 500 + export let duration = 500 /** * Enables auto play of pages @@ -30,7 +30,7 @@ /** * Auto play change interval */ - export let autoplaySpeed = 3000 + export let autoplayDuration = 3000 /** * Auto play change direction ('next', 'prev') @@ -61,9 +61,9 @@ {arrows} {infinite} {initialPageIndex} - {speed} + {duration} {autoplay} - {autoplaySpeed} + {autoplayDuration} {autoplayDirection} {dots} let:showPrevPage diff --git a/src/components/Carousel/CarouselViewCustomDots.svelte b/src/components/Carousel/CarouselViewCustomDots.svelte index 8de292a..15c32ff 100644 --- a/src/components/Carousel/CarouselViewCustomDots.svelte +++ b/src/components/Carousel/CarouselViewCustomDots.svelte @@ -18,9 +18,9 @@ export let initialPageIndex = 1 /** - * Transition speed (ms) + * Transition duration (ms) */ - export let speed = 500 + export let duration = 500 /** * Enables auto play of pages @@ -30,7 +30,7 @@ /** * Auto play change interval */ - export let autoplaySpeed = 3000 + export let autoplayDuration = 3000 /** * Auto play change direction ('next', 'prev') @@ -65,9 +65,9 @@ {arrows} {infinite} {initialPageIndex} - {speed} + {duration} {autoplay} - {autoplaySpeed} + {autoplayDuration} {autoplayDirection} {dots} let:currentPageIndex diff --git a/src/docs/Carousel.svx b/src/docs/Carousel.svx index 1396711..36ce232 100644 --- a/src/docs/Carousel.svx +++ b/src/docs/Carousel.svx @@ -56,7 +56,7 @@ ## Autoplay {#each colors as { color, text } (color)} @@ -66,7 +66,7 @@ ```jsx {#each colors as { color, text } (color)} @@ -207,9 +207,9 @@ Import component and styles in App component | arrows | boolean | true | Enable Next/Prev arrows | | infinite | boolean | true | Infinite looping | | initialPageIndex | number | 0 | Page to start on | -| speed | number | 500 | Transition speed (ms) | +| duration | number | 500 | Transition duration (ms) | | autoplay | boolean | false | Enables auto play of pages | -| autoplaySpeed | number | 3000 | Auto play change interval | +| autoplayDuration | number | 3000 | Auto play change interval | | autoplayDirection | string | 3000 | Auto play change direction (`next` or `prev`) | | dots | boolean | true | Current page indicator dots | @@ -246,11 +246,11 @@ This slot is used for customizing dots appearance. Slot props: -| Prop | Type | Description | -|---------------------|---------- --|---------------------------------------------| +| Prop | Type | Description | +|---------------------|---------- --|----------------------------------------------| | `currentPageIndex` | `number` | Represents current page index (start from 0) | -| `pagesCount` | `number` | Total pages amount | -| `showPage` | `function` | Takes index as page to be shown | +| `pagesCount` | `number` | Total pages amount | +| `showPage` | `function` | Takes index as page to be shown | ```jsx