Skip to content

Draft: Make focus-in event optional and configurable #497

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

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Draft: Make focus-in event optional and configurable #497

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
74fc0c4
add focusInJumpToSlide config prop
nextlevelshit Mar 24, 2025
e78cde8
add default value for focusInJumpToSlide
nextlevelshit Mar 24, 2025
eefbbc8
add focusInJumpToSlide feature to carousel configuration and adapt te…
nextlevelshit Mar 25, 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
49 changes: 25 additions & 24 deletions docs/config.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,30 +8,31 @@ Vue 3 Carousel offers a comprehensive set of configuration options to customize

## All Available Props

| Prop | Type | Default | Description |
|----------------------------|---------------------------------------------|----------------------------------|--------------------------------------------------------------------------------------------------------|
| `autoplay` | `number` | 0 | Time interval (in milliseconds) between auto-advancing slides. Set to 0 to disable autoplay. |
| `breakpointMode` | 'viewport', 'carousel' | 'viewport' | Defines whether breakpoints are calculated based on viewport width or carousel container width. |
| `breakpoints` | `object` | null | Responsive breakpoint configurations. Each breakpoint can override any carousel prop. |
| `clamp` | `boolean` | false | If true will clamp itemsToShow to the number of available slides |
| `dir` | 'ltr', 'rtl', 'ttb', 'btt' | 'ltr' | Carousel sliding direction. Supports horizontal (ltr/rtl) and vertical (ttb/btt) orientations. |
| `enabled` | `boolean` | true | Controls whether the carousel is interactive. When false, all interactions are disabled. |
| `gap` | `number` | 0 | Space (in pixels) between carousel slides. |
| `height` | `number` \| `string` | 'auto' | Sets the carousel track height. Required for vertical orientation. |
| `i18n` | `object` | `{ ... }` | Internationalization options for accessibility labels and text content. See [i18n](#i18n) for configuration details. |
| `ignoreAnimations` | `boolean` \| `string` \| `array` | false | Specifies which CSS animations should be excluded from slide size calculations. <Badge text="0.10.0"/> |
| `itemsToScroll` | `number` | 1 | Number of slides to move when navigating. Useful for creating slide groups. |
| `itemsToShow` | `number` \| 'auto' | 1 | Number of slides visible simultaneously. Use 'auto' for variable width slides. |
| `modelValue` | `number` | 0 | Controls the active slide index. Can be used with v-model for two-way binding. |
| `mouseDrag` | `boolean` \| `object` | true | Enables/disables mouse drag navigation. See [Drag Options](#drag-options) for configuration details. |
| `mouseWheel` | `boolean` \| `object` | false | Enables/disables mouse wheel scrolling for carousel navigation. See [Wheel Options](#wheel-options) for configuration details. |
| `pauseAutoplayOnHover` | `boolean` | false | When true, autoplay pauses while the mouse cursor is over the carousel. |
| `preventExcessiveDragging` | `boolean` | false | Limits dragging behavior at carousel boundaries for better UX. <Badge text="0.13.0" /> |
| `slideEffect` | 'slide', 'fade' | 'slide' | Determines the transition effect between slides. |
| `snapAlign` | 'start', 'end', 'center-odd', 'center-even' | 'center' | Determines how slides are aligned within the viewport. |
| `touchDrag` | `boolean` \| `DragConfig` | true | Enables/disables touch navigation on touch-enabled devices. See [Drag Options](#drag-options) for configuration details. |
| `transition` | `number` | 300 | Duration of the slide transition animation in milliseconds. |
| `wrapAround` | `boolean` | false | When true, creates an infinite loop effect by connecting the last slide to the first. |
| Prop | Type | Default | Description |
|----------------------------|---------------------------------------------|---------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------|
| `autoplay` | `number` | 0 | Time interval (in milliseconds) between auto-advancing slides. Set to 0 to disable autoplay. |
| `breakpointMode` | 'viewport', 'carousel' | 'viewport' | Defines whether breakpoints are calculated based on viewport width or carousel container width. |
| `breakpoints` | `object` | null | Responsive breakpoint configurations. Each breakpoint can override any carousel prop. |
| `clamp` | `boolean` | false | If true will clamp itemsToShow to the number of available slides |
| `dir` | 'ltr', 'rtl', 'ttb', 'btt' | 'ltr' | Carousel sliding direction. Supports horizontal (ltr/rtl) and vertical (ttb/btt) orientations. |
| `enabled` | `boolean` | true | Controls whether the carousel is interactive. When false, all interactions are disabled. |
| `focusInJumpToSlide` | `boolean` | true | Focusing a slide will jump-navigate to it |
| `gap` | `number` | 0 | Space (in pixels) between carousel slides. |
| `height` | `number` \| `string` | 'auto' | Sets the carousel track height. Required for vertical orientation. |
| `i18n` | `object` | `{ ... }` | Internationalization options for accessibility labels and text content. See [i18n](#i18n) for configuration details. |
| `ignoreAnimations` | `boolean` \| `string` \| `array` | false | Specifies which CSS animations should be excluded from slide size calculations. <Badge text="0.10.0"/> |
| `itemsToScroll` | `number` | 1 | Number of slides to move when navigating. Useful for creating slide groups. |
| `itemsToShow` | `number` \| 'auto' | 1 | Number of slides visible simultaneously. Use 'auto' for variable width slides. |
| `modelValue` | `number` | 0 | Controls the active slide index. Can be used with v-model for two-way binding. |
| `mouseDrag` | `boolean` \| `object` | true | Enables/disables mouse drag navigation. See [Drag Options](#drag-options) for configuration details. |
| `mouseWheel` | `boolean` \| `object` | false | Enables/disables mouse wheel scrolling for carousel navigation. See [Wheel Options](#wheel-options) for configuration details. |
| `pauseAutoplayOnHover` | `boolean` | false | When true, autoplay pauses while the mouse cursor is over the carousel. |
| `preventExcessiveDragging` | `boolean` | false | Limits dragging behavior at carousel boundaries for better UX. <Badge text="0.13.0" /> |
| `slideEffect` | 'slide', 'fade' | 'slide' | Determines the transition effect between slides. |
| `snapAlign` | 'start', 'end', 'center-odd', 'center-even' | 'center' | Determines how slides are aligned within the viewport. |
| `touchDrag` | `boolean` \| `DragConfig` | true | Enables/disables touch navigation on touch-enabled devices. See [Drag Options](#drag-options) for configuration details. |
| `transition` | `number` | 300 | Duration of the slide transition animation in milliseconds. |
| `wrapAround` | `boolean` | false | When true, creates an infinite loop effect by connecting the last slide to the first. |

## Basic Configuration

Expand Down
3 changes: 1 addition & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,7 @@
"typecheck:watch": "tsc -p . --watch --preserveWatchOutput",
"test": "vitest run --coverage",
"test:update": "vitest run --u",
"test:watch": "vitest watch",
"prepare": "husky"
"test:watch": "vitest watch"
},
"repository": {
"type": "git",
Expand Down
6 changes: 6 additions & 0 deletions playground/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const defaultConfig = {
pauseAutoplayOnHover: true,
useBreakpoints: false,
threshold: 0.5,
focusInJumpToSlide: true
}

const config = reactive({ ...defaultConfig })
Expand Down Expand Up @@ -118,6 +119,11 @@ const formFields = [
label: 'Wrap Around',
path: 'wrapAround',
},
{
type: 'checkbox',
label: 'Jump to slide on focus',
path: 'focusInJumpToSlide',
}
],
},
{
Expand Down
4 changes: 4 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 @@ -70,6 +70,10 @@ export const carouselProps = {
default: DEFAULT_CONFIG.enabled,
type: Boolean,
},
focusInJumpToSlide: {
default: DEFAULT_CONFIG.focusInJumpToSlide,
type: Boolean,
},
// control the gap between slides
gap: {
default: DEFAULT_CONFIG.gap,
Expand Down
5 changes: 5 additions & 0 deletions src/components/Slide/Slide.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,11 @@ export const Slide = defineComponent({
'carousel__slide--sliding': carousel.isSliding,
},
onFocusin: () => {
// eslint-disable-next-line no-debugger
debugger;
// if (!carousel.config.focusInJumpToSlide) {
// return
// }
// Prevent the viewport being scrolled by the focus
if (carousel.viewport) {
carousel.viewport.scrollLeft = 0
Expand Down
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 @@ -54,6 +54,7 @@ export const DEFAULT_CONFIG: CarouselConfig = {
breakpoints: undefined,
dir: DIR_OPTIONS[0],
enabled: true,
focusInJumpToSlide: true,
gap: 0,
height: 'auto',
i18n: I18N_DEFAULT_CONFIG,
Expand Down
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 @@ -43,6 +43,7 @@ export type CarouselConfig = {
clamp?: boolean
dir?: Dir
enabled: boolean
focusInJumpToSlide?: boolean
gap: number
height: string | number
i18n: { [key in I18nKeys]?: string }
Expand Down