Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add preventExcessiveDragging option to limit boundary slide gestures #468

Merged
merged 9 commits into from
Jan 5, 2025
Merged

feat: add preventExcessiveDragging option to limit boundary slide gestures #468

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
83b3462
feat: add preventExcessiveDragging option to limit boundary slide ges…
aovcina Jan 3, 2025
f6ca695
fix: typo
aovcina Jan 3, 2025
b9ae2e5
feat: enhance dragging behavior in Carousel component to prevent exce…
ismail9k Jan 4, 2025
a33bc86
feat: adjust min and max sliding values in Carousel to improve bounda…
ismail9k Jan 4, 2025
c4b4546
docs: lint config file
ismail9k Jan 4, 2025
9e52864
feat: validate `preventExcessiveDragging` carousel prop and log warning
aovcina Jan 4, 2025
42d58e8
docs: add upcoming version badge for `preventExcessiveDragging`
aovcina Jan 4, 2025
c1c5cec
style: fix implict any of props in validator
aovcina Jan 4, 2025
b49e08f
build: fix failing checks
aovcina Jan 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 22 additions & 20 deletions docs/config.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,28 @@

## Available Props

| Prop | Default | Description |
| ---------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `enabled` | true | Controlled weather the carousel is enabled or disabled. <Badge text="0.8.0"/> |
| `itemsToShow` | 1 | Count of items to showed per view (can be a fraction). Must be between 1 and the total number of slides. If set to a value less than 1, it defaults to 1. If set to a value greater than the total number of slides, it defaults to the total number of slides. |
| `itemsToScroll` | 1 | Number of slides to be scrolled |
| `wrapAround` | false | Enable infinite scrolling mode. |
| `snapAlign` | 'center' | Controls the carousel position alignment, can be 'start', 'end', 'center-[odd\|even]' |
| `transition` | 300 | Sliding transition time in ms. |
| `autoplay` | 0 | Auto play time in ms. |
| `breakpointMode` | 'viewport' | Determines how the carousel breakpoints are calculated. acceptable values: 'viewport', 'carousel' <Badge text="0.5.0"/> |
| `breakpoints` | null | An object to pass all the breakpoints settings. |
| `modelValue` | 0 | Index number of the initial slide. |
| `mouseDrag` | true | Toggle mouse dragging |
| `touchDrag` | true | Toggle pointer touch dragging |
| `pauseAutoplayOnHover` | false | Toggle if auto play should pause on mouse hover |
| `dir` | 'ltr' | Controls the carousel direction. Available values: 'ltr', 'rtl', 'ttb', 'btt' or use verbose 'left-to-right', 'right-to-left', 'top-to-bottom', 'bottom-to-top' <Badge text="0.7.0"/> |
| `i18n` | [`{ ariaNextSlide: ...}`](#i18n) | Used to translate and/or change aria labels and additional texts used in the carousel. <Badge text="0.3.1"/> |
| `gap` | 0 | Used to add gap between the slides. <Badge text="0.6.0"/> |
| `height` | 'auto' | Carousel track height. <Badge text="0.7.0"/> |
| `ignoreAnimations` | false | List of animation names to ignore for size calculations. Can be a boolean, string, or array of strings. <Badge text="0.10.0"/> |
| Prop | Default | Description |
| -------------------------- | -------------------------------- |-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `enabled` | true | Controlled weather the carousel is enabled or disabled. <Badge text="0.8.0"/> |
| `itemsToShow` | 1 | Count of items to showed per view (can be a fraction). Must be between 1 and the total number of slides. If set to a value less than 1, it defaults to 1. If set to a value greater than the total number of slides, it defaults to the total number of slides. |
| `itemsToScroll` | 1 | Number of slides to be scrolled |
| `wrapAround` | false | Enable infinite scrolling mode. |
| `snapAlign` | 'center' | Controls the carousel position alignment, can be 'start', 'end', 'center-[odd\|even]' |
| `transition` | 300 | Sliding transition time in ms. |
| `autoplay` | 0 | Auto play time in ms. |
| `breakpointMode` | 'viewport' | Determines how the carousel breakpoints are calculated. acceptable values: 'viewport', 'carousel' <Badge text="0.5.0"/> |
| `breakpoints` | null | An object to pass all the breakpoints settings. |
| `modelValue` | 0 | Index number of the initial slide. |
| `mouseDrag` | true | Toggle mouse dragging |
| `touchDrag` | true | Toggle pointer touch dragging |
| `pauseAutoplayOnHover` | false | Toggle if auto play should pause on mouse hover |
| `dir` | 'ltr' | Controls the carousel direction. Available values: 'ltr', 'rtl', 'ttb', 'btt' or use verbose 'left-to-right', 'right-to-left', 'top-to-bottom', 'bottom-to-top' <Badge text="0.7.0"/> |
| `i18n` | [`{ ariaNextSlide: ...}`](#i18n) | Used to translate and/or change aria labels and additional texts used in the carousel. <Badge text="0.3.1"/> |
| `gap` | 0 | Used to add gap between the slides. <Badge text="0.6.0"/> |
| `height` | 'auto' | Carousel track height. <Badge text="0.7.0"/> |
| `ignoreAnimations` | false | List of animation names to ignore for size calculations. Can be a boolean, string, or array of strings. <Badge text="0.10.0"/> |
| `preventExcessiveDragging` | false | Prevents unwanted dragging behavior when the carousel reaches its first or last slide. <Badge text="0.13.0" /> |



## Slots
Expand Down
14 changes: 13 additions & 1 deletion src/components/Carousel/Carousel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -689,7 +689,19 @@
// Include user drag interaction offset
const dragOffset = isVertical.value ? dragged.y : dragged.x

const totalOffset = scrolledOffset + dragOffset
let totalOffset = scrolledOffset + dragOffset

if (!config.wrapAround && config.preventExcessiveDragging) {
const maxSlidingValue =
(slidesCount.value - config.itemsToShow) * effectiveSlideSize.value
const min = isReversed.value ? 0 : -1 * maxSlidingValue
const max = isReversed.value ? maxSlidingValue : 0
totalOffset = getNumberInRange({
val: totalOffset,
min,
max,
})
}

Check warning on line 704 in src/components/Carousel/Carousel.ts

View workflow job for this annotation

GitHub Actions / coverage-report 

These lines are not covered by a test

return `translate${translateAxis}(${totalOffset}px)`
})
Expand Down
13 changes: 13 additions & 0 deletions src/components/Carousel/carouselProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,4 +121,17 @@
return SLIDE_EFFECTS.includes(value)
},
},
preventExcessiveDragging: {
default: false,
type: Boolean,
validator(value: boolean, props: { wrapAround?: boolean }) {
if (value && props.wrapAround)
console.warn( /* eslint-disable-line no-console */
'[vue3-carousel warn]: preventExcessiveDragging cannot be used with wrapAround. ' +

Check warning on line 130 in src/components/Carousel/carouselProps.ts

View workflow job for this annotation

GitHub Actions / coverage-report 

This line is not covered by a test
'The preventExcessiveDragging setting will be ignored.'
);

Check warning on line 132 in src/components/Carousel/carouselProps.ts

View workflow job for this annotation

GitHub Actions / coverage-report 

This line is not covered by a test

return true;
}
}
}
1 change: 1 addition & 0 deletions src/shared/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,4 +61,5 @@ export const DEFAULT_CONFIG: CarouselConfig = {
i18n: I18N_DEFAULT_CONFIG,
ignoreAnimations: false,
slideEffect: SLIDE_EFFECTS[0],
preventExcessiveDragging: false
}
1 change: 1 addition & 0 deletions src/shared/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export interface CarouselConfig {
i18n: { [key in I18nKeys]?: string }
ignoreAnimations: boolean | string[] | string
slideEffect: SlideEffect
preventExcessiveDragging: boolean
}

export type VueClass = string | Record<string, boolean> | VueClass[]
Loading