From 885a62c1c328d3da038bc1ce3deb80728ac7c787 Mon Sep 17 00:00:00 2001 From: Tarwin Stroh-Spijer Date: Fri, 2 Aug 2024 17:06:47 -0400 Subject: [PATCH 1/7] feat: added `breakpointsToContainer` property to `Carousel` which uses the direct parent width instead of the window width for breakpoints --- docs/examples.md | 70 + docs/examples/ExampleBreakpointsContainer.vue | 56 + package-lock.json | 12760 ++++++++++++++++ src/components/Carousel.ts | 14 + src/partials/defaults.ts | 1 + src/partials/props.ts | 5 + src/types/carousel.ts | 1 + yarn.lock | 2398 ++- 8 files changed, 14058 insertions(+), 1247 deletions(-) create mode 100644 docs/examples/ExampleBreakpointsContainer.vue create mode 100644 package-lock.json diff --git a/docs/examples.md b/docs/examples.md index 2031d504..8558e6bc 100644 --- a/docs/examples.md +++ b/docs/examples.md @@ -149,6 +149,70 @@ export default defineComponent({ ``` +## [Breakpoints: Container](https://github.com/ismail9k/vue3-carousel/blob/master/docs/examples/ExampleBreakpoints.vue) + + + +```vue + + + +``` + + ## [Pagination](https://github.com/ismail9k/vue3-carousel/blob/master/docs/examples/ExampleBreakpoints.vue) @@ -410,6 +474,7 @@ export default defineComponent({ import ExampleBasic from './examples/ExampleBasic.vue'; import ExampleWrapAround from './examples/ExampleWrapAround.vue'; import ExampleBreakpoints from './examples/ExampleBreakpoints.vue'; +import ExampleBreakpointsContainer from './examples/ExampleBreakpointsContainer.vue'; import ExamplePagination from './examples/ExamplePagination.vue'; import ExampleAutoplay from './examples/ExampleAutoplay.vue'; import ExampleActiveClasses from './examples/ExampleActiveClasses.vue'; @@ -423,6 +488,7 @@ export default { ExampleBasic, ExampleWrapAround, ExampleBreakpoints, + ExampleBreakpointsContainer, ExampleAutoplay, ExamplePagination, ExampleActiveClasses, @@ -434,6 +500,10 @@ export default { diff --git a/docs/examples/ExampleAutoplay.vue b/docs/examples/ExampleAutoplay.vue index 377e7fe2..86fd2054 100644 --- a/docs/examples/ExampleAutoplay.vue +++ b/docs/examples/ExampleAutoplay.vue @@ -1,27 +1,23 @@ + + - diff --git a/docs/examples/ExampleBasic.vue b/docs/examples/ExampleBasic.vue index ef1ced6b..5fd7ebdb 100644 --- a/docs/examples/ExampleBasic.vue +++ b/docs/examples/ExampleBasic.vue @@ -1,3 +1,8 @@ + + - - diff --git a/docs/examples/ExampleBreakpoints.vue b/docs/examples/ExampleBreakpoints.vue index a88a7920..5f72cf84 100644 --- a/docs/examples/ExampleBreakpoints.vue +++ b/docs/examples/ExampleBreakpoints.vue @@ -1,48 +1,54 @@ - - - + + + + diff --git a/docs/examples/ExampleBreakpointsContainer.vue b/docs/examples/ExampleBreakpointsContainer.vue deleted file mode 100644 index 41b247e2..00000000 --- a/docs/examples/ExampleBreakpointsContainer.vue +++ /dev/null @@ -1,56 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/examples/ExampleCustomLabels.vue b/docs/examples/ExampleCustomLabels.vue deleted file mode 100644 index d6c09a44..00000000 --- a/docs/examples/ExampleCustomLabels.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - diff --git a/docs/examples/ExampleCustomNavigation.vue b/docs/examples/ExampleCustomNavigation.vue index 81150331..e16e43a8 100644 --- a/docs/examples/ExampleCustomNavigation.vue +++ b/docs/examples/ExampleCustomNavigation.vue @@ -1,5 +1,18 @@ + + + - diff --git a/docs/examples/ExampleGallery.vue b/docs/examples/ExampleGallery.vue index aa97c522..97283767 100644 --- a/docs/examples/ExampleGallery.vue +++ b/docs/examples/ExampleGallery.vue @@ -1,57 +1,42 @@ + + - - - diff --git a/docs/examples/ExamplePagination.vue b/docs/examples/ExamplePagination.vue deleted file mode 100644 index 9872701b..00000000 --- a/docs/examples/ExamplePagination.vue +++ /dev/null @@ -1,36 +0,0 @@ - - - diff --git a/docs/examples/ExampleWrapAround.vue b/docs/examples/ExampleWrapAround.vue index 0cb83228..fed111ce 100644 --- a/docs/examples/ExampleWrapAround.vue +++ b/docs/examples/ExampleWrapAround.vue @@ -1,5 +1,15 @@ + + - - diff --git a/docs/test.md b/docs/test.md new file mode 100644 index 00000000..e1cb6d5d --- /dev/null +++ b/docs/test.md @@ -0,0 +1,85 @@ +# Test + +## Basic + + + +## Wrap Around + + + +## Breakpoints + + + +## Autoplay + + + +## Active Classes + + + +## Custom Navigation + + + +## Gallery + + + + + + \ No newline at end of file From 380b63c32a259c1d0ae71273533b728478b08807 Mon Sep 17 00:00:00 2001 From: Ismail9k Date: Fri, 1 Nov 2024 16:47:47 +0300 Subject: [PATCH 5/7] feat(config): update default config --- docs/examples/ExampleBreakpoints.vue | 6 ++-- src/components/ARIA.ts | 4 +-- src/components/Carousel.ts | 8 +++--- src/components/Icon.ts | 4 +-- src/components/Navigation.ts | 4 +-- src/components/Pagination.ts | 4 +-- src/components/Slide.ts | 4 +-- src/partials/defaults.ts | 37 +++++++++++++----------- src/partials/props.ts | 42 +++++++++++++++------------- src/types/carousel.ts | 24 ++++++++-------- 10 files changed, 73 insertions(+), 64 deletions(-) diff --git a/docs/examples/ExampleBreakpoints.vue b/docs/examples/ExampleBreakpoints.vue index 5f72cf84..a4cef0d5 100644 --- a/docs/examples/ExampleBreakpoints.vue +++ b/docs/examples/ExampleBreakpoints.vue @@ -7,10 +7,10 @@ import '../../dist/carousel.css' const config = { itemsToShow: 1, snapAlign: 'center', -eg + // 'breakpointMode' determines how the carousel breakpoints are calculated - // Acceptable values: 'window' (default) | 'carousel' - // 'window' - breakpoints are based on the viewport width + // Acceptable values: 'viewport' (default) | 'carousel' + // 'viewport' - breakpoints are based on the viewport width // 'carousel' - breakpoints are based on the carousel width breakpointMode: 'carousel', diff --git a/src/components/ARIA.ts b/src/components/ARIA.ts index bdac9b53..4a7a6ec9 100644 --- a/src/components/ARIA.ts +++ b/src/components/ARIA.ts @@ -1,6 +1,6 @@ import { defineComponent, inject, ref, h, reactive } from 'vue' -import { defaultConfig } from '@/partials/defaults' +import { DEFAULT_CONFIG } from '@/partials/defaults' import { i18nFormatter } from '@/utils/i18nFormater' import { CarouselConfig } from '../types' @@ -8,7 +8,7 @@ import { CarouselConfig } from '../types' export default defineComponent({ name: 'ARIA', setup() { - const config: CarouselConfig = inject('config', reactive({ ...defaultConfig })) + const config: CarouselConfig = inject('config', reactive({ ...DEFAULT_CONFIG })) const currentSlide = inject('currentSlide', ref(0)) const slidesCount = inject('slidesCount', ref(0)) diff --git a/src/components/Carousel.ts b/src/components/Carousel.ts index 883321bb..217f3ed1 100644 --- a/src/components/Carousel.ts +++ b/src/components/Carousel.ts @@ -15,7 +15,7 @@ import { Ref, } from 'vue' -import { defaultConfig } from '@/partials/defaults' +import { DEFAULT_CONFIG } from '@/partials/defaults' import { carouselProps } from '@/partials/props' import { CarouselConfig, CarouselNav, ElementStyleObject } from '@/types' import { @@ -41,7 +41,7 @@ export default defineComponent({ const slideWidth: Ref = ref(0) const slidesCount: Ref = ref(0) // current config - const config = reactive({ ...defaultConfig }) + const config = reactive({ ...DEFAULT_CONFIG }) // slides const currentSlideIndex = ref(props.modelValue ?? 0) @@ -62,9 +62,9 @@ export default defineComponent({ provide('slideWidth', slideWidth) const __defaultConfig = computed(() => ({ - ...defaultConfig, + ...DEFAULT_CONFIG, ...props, - i18n: { ...defaultConfig.i18n, ...props.i18n }, + i18n: { ...DEFAULT_CONFIG.i18n, ...props.i18n }, breakpoints: undefined, })) diff --git a/src/components/Icon.ts b/src/components/Icon.ts index d0e41808..17cfab3e 100644 --- a/src/components/Icon.ts +++ b/src/components/Icon.ts @@ -1,6 +1,6 @@ import { h, inject, reactive } from 'vue' -import { defaultConfig } from '@/partials/defaults' +import { DEFAULT_CONFIG } from '@/partials/defaults' import icons, { IconName } from '../partials/icons' import { CarouselConfig, Data, I18nKeys } from '../types' @@ -10,7 +10,7 @@ function isIconName(candidate: string): candidate is IconName { } const Icon = (props: Data) => { - const config: CarouselConfig = inject('config', reactive({ ...defaultConfig })) + const config: CarouselConfig = inject('config', reactive({ ...DEFAULT_CONFIG })) const iconName = String(props.name) const iconI18n = `icon${ iconName.charAt(0).toUpperCase() + iconName.slice(1) diff --git a/src/components/Navigation.ts b/src/components/Navigation.ts index 2ae93bef..0707748d 100644 --- a/src/components/Navigation.ts +++ b/src/components/Navigation.ts @@ -1,6 +1,6 @@ import { inject, ref, h, reactive } from 'vue' -import { defaultConfig } from '@/partials/defaults' +import { DEFAULT_CONFIG } from '@/partials/defaults' import { CarouselNav, CarouselConfig } from '../types' @@ -8,7 +8,7 @@ import Icon from './Icon' const Navigation = (props: any, { slots, attrs }: any) => { const { next: slotNext, prev: slotPrev } = slots || {} - const config: CarouselConfig = inject('config', reactive({ ...defaultConfig })) + const config: CarouselConfig = inject('config', reactive({ ...DEFAULT_CONFIG })) const maxSlide = inject('maxSlide', ref(1)) const minSlide = inject('minSlide', ref(1)) const currentSlide = inject('currentSlide', ref(1)) diff --git a/src/components/Pagination.ts b/src/components/Pagination.ts index 203433ab..4a5480a0 100644 --- a/src/components/Pagination.ts +++ b/src/components/Pagination.ts @@ -1,13 +1,13 @@ import { inject, ref, h, VNode, reactive } from 'vue' -import { defaultConfig } from '@/partials/defaults' +import { DEFAULT_CONFIG } from '@/partials/defaults' import { mapNumberToRange } from '@/utils' import { i18nFormatter } from '@/utils/i18nFormater' import { CarouselConfig, CarouselNav } from '../types' const Pagination = () => { - const config: CarouselConfig = inject('config', reactive({ ...defaultConfig })) + const config: CarouselConfig = inject('config', reactive({ ...DEFAULT_CONFIG })) const maxSlide = inject('maxSlide', ref(1)) const minSlide = inject('minSlide', ref(1)) const currentSlide = inject('currentSlide', ref(1)) diff --git a/src/components/Slide.ts b/src/components/Slide.ts index b7b911a0..97dc59c8 100644 --- a/src/components/Slide.ts +++ b/src/components/Slide.ts @@ -9,7 +9,7 @@ import { ComputedRef, } from 'vue' -import { defaultConfig } from '@/partials/defaults' +import { DEFAULT_CONFIG } from '@/partials/defaults' import { CarouselConfig } from '@/types' export default defineComponent({ @@ -25,7 +25,7 @@ export default defineComponent({ }, }, setup(props, { slots }: SetupContext) { - const config: CarouselConfig = inject('config', reactive({ ...defaultConfig })) + const config: CarouselConfig = inject('config', reactive({ ...DEFAULT_CONFIG })) const currentSlide = inject('currentSlide', ref(0)) const slidesToScroll = inject('slidesToScroll', ref(0)) const isSliding = inject('isSliding', ref(false)) diff --git a/src/partials/defaults.ts b/src/partials/defaults.ts index 533186f6..b3895aba 100644 --- a/src/partials/defaults.ts +++ b/src/partials/defaults.ts @@ -1,29 +1,34 @@ import { CarouselConfig } from '../types' -export const defaultConfig: CarouselConfig = { +export const SNAP_ALIGN_OPTIONS = ['center', 'start', 'end', 'center-even', 'center-odd'] +export const BREAKPOINT_MODE_OPTIONS = ['viewport', 'carousel'] +export const DIR_OPTIONS = ['ltr', 'rtl'] +export const I18N_DEFAULT_CONFIG = { + ariaNextSlide: 'Navigate to next slide', + ariaPreviousSlide: 'Navigate to previous slide', + ariaNavigateToSlide: 'Navigate to slide {slideNumber}', + ariaGallery: 'Gallery', + itemXofY: 'Item {currentSlide} of {slidesCount}', + iconArrowUp: 'Arrow pointing upwards', + iconArrowDown: 'Arrow pointing downwards', + iconArrowRight: 'Arrow pointing to the right', + iconArrowLeft: 'Arrow pointing to the left', +} + +export const DEFAULT_CONFIG: CarouselConfig = { itemsToShow: 1, itemsToScroll: 1, modelValue: 0, transition: 300, autoplay: 0, - snapAlign: 'center', - wrapAround: false, throttle: 16, + wrapAround: false, pauseAutoplayOnHover: false, mouseDrag: true, touchDrag: true, - dir: 'ltr', - breakpointMode: 'window', + snapAlign: SNAP_ALIGN_OPTIONS[0], + dir: DIR_OPTIONS[0], + breakpointMode: BREAKPOINT_MODE_OPTIONS[0], breakpoints: undefined, - i18n: { - ariaNextSlide: 'Navigate to next slide', - ariaPreviousSlide: 'Navigate to previous slide', - ariaNavigateToSlide: 'Navigate to slide {slideNumber}', - ariaGallery: 'Gallery', - itemXofY: 'Item {currentSlide} of {slidesCount}', - iconArrowUp: 'Arrow pointing upwards', - iconArrowDown: 'Arrow pointing downwards', - iconArrowRight: 'Arrow pointing to the right', - iconArrowLeft: 'Arrow pointing to the left', - }, + i18n: I18N_DEFAULT_CONFIG, } diff --git a/src/partials/props.ts b/src/partials/props.ts index b5edc96d..1cd75b8d 100644 --- a/src/partials/props.ts +++ b/src/partials/props.ts @@ -1,59 +1,63 @@ -import { defaultConfig } from '@/partials/defaults' +import { + BREAKPOINT_MODE_OPTIONS, + DEFAULT_CONFIG, + DIR_OPTIONS, + SNAP_ALIGN_OPTIONS, +} from '@/partials/defaults' export const carouselProps = { // count of items to showed per view itemsToShow: { - default: defaultConfig.itemsToShow, + default: DEFAULT_CONFIG.itemsToShow, type: Number, }, // count of items to be scrolled itemsToScroll: { - default: defaultConfig.itemsToScroll, + default: DEFAULT_CONFIG.itemsToScroll, type: Number, }, // control infinite scrolling mode wrapAround: { - default: defaultConfig.wrapAround, + default: DEFAULT_CONFIG.wrapAround, type: Boolean, }, // control max drag throttle: { - default: defaultConfig.throttle, + default: DEFAULT_CONFIG.throttle, type: Number, }, // control snap position alignment snapAlign: { - default: defaultConfig.snapAlign, + default: DEFAULT_CONFIG.snapAlign, validator(value: string) { - // The value must match one of these strings - return ['start', 'end', 'center', 'center-even', 'center-odd'].includes(value) + return SNAP_ALIGN_OPTIONS.includes(value) }, }, // sliding transition time in ms transition: { - default: defaultConfig.transition, + default: DEFAULT_CONFIG.transition, type: Number, }, // controls the breakpoint mode relative to the carousel container or the viewport breakpointMode: { - default: defaultConfig.breakpointMode, + default: DEFAULT_CONFIG.breakpointMode, validator(value: string) { - return ['window', 'carousel'].includes(value) + return BREAKPOINT_MODE_OPTIONS.includes(value) }, }, // an object to store breakpoints breakpoints: { - default: defaultConfig.breakpoints, + default: DEFAULT_CONFIG.breakpoints, type: Object, }, // time to auto advance slides in ms autoplay: { - default: defaultConfig.autoplay, + default: DEFAULT_CONFIG.autoplay, type: Number, }, // pause autoplay when mouse hover over the carousel pauseAutoplayOnHover: { - default: defaultConfig.pauseAutoplayOnHover, + default: DEFAULT_CONFIG.pauseAutoplayOnHover, type: Boolean, }, // slide number number of initial slide @@ -63,25 +67,25 @@ export const carouselProps = { }, // toggle mouse dragging. mouseDrag: { - default: defaultConfig.mouseDrag, + default: DEFAULT_CONFIG.mouseDrag, type: Boolean, }, // toggle mouse dragging. touchDrag: { - default: defaultConfig.touchDrag, + default: DEFAULT_CONFIG.touchDrag, type: Boolean, }, // control snap position alignment dir: { - default: defaultConfig.dir, + default: DEFAULT_CONFIG.dir, validator(value: string) { // The value must match one of these strings - return ['rtl', 'ltr'].includes(value) + return DIR_OPTIONS.includes(value) }, }, // aria-labels and additional text labels i18n: { - default: defaultConfig.i18n, + default: DEFAULT_CONFIG.i18n, type: Object, }, } diff --git a/src/types/carousel.ts b/src/types/carousel.ts index 3dd41161..bb0162ee 100644 --- a/src/types/carousel.ts +++ b/src/types/carousel.ts @@ -1,19 +1,19 @@ +import { + BREAKPOINT_MODE_OPTIONS, + DIR_OPTIONS, + SNAP_ALIGN_OPTIONS, + I18N_DEFAULT_CONFIG, +} from '@/partials/defaults' + export type Breakpoints = { [key: number]: Partial } -export type SnapAlign = 'start' | 'end' | 'center' | 'center-even' | 'center-odd' +export type SnapAlign = (typeof SNAP_ALIGN_OPTIONS)[number] + +export type Dir = (typeof DIR_OPTIONS)[number] -export type Dir = 'rtl' | 'ltr' +export type BreakpointMode = (typeof BREAKPOINT_MODE_OPTIONS)[number] -export type I18nKeys = - | 'ariaNextSlide' - | 'ariaPreviousSlide' - | 'ariaNavigateToSlide' - | 'ariaGallery' - | 'iconArrowUp' - | 'iconArrowDown' - | 'iconArrowRight' - | 'iconArrowLeft' - | 'itemXofY' +export type I18nKeys = keyof typeof I18N_DEFAULT_CONFIG export interface CarouselConfig { itemsToShow: number itemsToScroll: number From 4551570b84fd2ac171954472475bb0b436dbd8c9 Mon Sep 17 00:00:00 2001 From: Ismail9k Date: Fri, 1 Nov 2024 16:48:26 +0300 Subject: [PATCH 6/7] docs(config): add breakpointMode to the available props table --- docs/config.md | 34 ++++++++++++++++------------------ 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/docs/config.md b/docs/config.md index f8fbd440..d558d8ec 100644 --- a/docs/config.md +++ b/docs/config.md @@ -1,25 +1,23 @@ # Config - ## Available Props -| Prop | Default | Description | -| ---------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------ | -| `itemsToShow` | 1 | count of items to showed per view (can be a fraction). | -| `itemsToScroll` | 1 | number of slides to be scrolled | -| ~~`currentSlide`~~ | ~~0~~ | ~~index number of the initial slide.~~ | -| `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. | -| ~~`settings`~~ | ~~{ }~~ | ~~an object to pass all settings.~~ | -| `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' | -| `i18n` | [`{ ariaNextSlide: ...}`](#i18n) | Used to translate and/or change aria labels and additional texts used in the carousel. | +| Prop | Default | Description | +| ---------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | +| `itemsToShow` | 1 | count of items to showed per view (can be a fraction). | +| `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' | +| `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' | +| `i18n` | [`{ ariaNextSlide: ...}`](#i18n) | Used to translate and/or change aria labels and additional texts used in the carousel. | ## Slots From 4ec5eb761ae833c0b82d6a69a5f1677ea0abd489 Mon Sep 17 00:00:00 2001 From: Ismail9k Date: Fri, 1 Nov 2024 21:48:45 +0300 Subject: [PATCH 7/7] feat: better handling for config --- src/components/Carousel.ts | 39 ++++++++++++++++---------------------- 1 file changed, 16 insertions(+), 23 deletions(-) diff --git a/src/components/Carousel.ts b/src/components/Carousel.ts index 217f3ed1..6a1e2cd5 100644 --- a/src/components/Carousel.ts +++ b/src/components/Carousel.ts @@ -40,8 +40,16 @@ export default defineComponent({ const slides: Ref = ref([]) const slideWidth: Ref = ref(0) const slidesCount: Ref = ref(0) - // current config - const config = reactive({ ...DEFAULT_CONFIG }) + + const fallbackConfig = computed(() => ({ + ...DEFAULT_CONFIG, + ...props, + i18n: { ...DEFAULT_CONFIG.i18n, ...props.i18n }, + breakpoints: undefined, + })) + + // current active config + const config = reactive({ ...fallbackConfig.value }) // slides const currentSlideIndex = ref(props.modelValue ?? 0) @@ -61,15 +69,6 @@ export default defineComponent({ provide('minSlide', minSlideIndex) provide('slideWidth', slideWidth) - const __defaultConfig = computed(() => ({ - ...DEFAULT_CONFIG, - ...props, - i18n: { ...DEFAULT_CONFIG.i18n, ...props.i18n }, - breakpoints: undefined, - })) - - bindConfig(__defaultConfig.value) - function updateBreakpointsConfig(): void { if (!props.breakpoints) return @@ -83,7 +82,7 @@ export default defineComponent({ .map((key) => Number(key)) .sort((a, b) => +b - +a) - let newConfig = { ...__defaultConfig.value } as CarouselConfig + let newConfig = { ...fallbackConfig.value } as CarouselConfig breakpointsArray.some((breakpoint) => { if (widthSource >= breakpoint) { newConfig = { ...newConfig, ...props.breakpoints?.[breakpoint] } @@ -92,16 +91,10 @@ export default defineComponent({ return false }) - bindConfig(newConfig) - } - - function bindConfig(newConfig: CarouselConfig): void { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - //@ts-ignore - Object.entries(newConfig).forEach(([key, val]) => (config[key] = val)) + Object.assign(config, newConfig) } - const handleWindowResize = debounce(() => { + const handleResize = debounce(() => { updateBreakpointsConfig() updateSlidesData() updateSlideWidth() @@ -139,9 +132,9 @@ export default defineComponent({ updateBreakpointsConfig() initAutoplay() - window.addEventListener('resize', handleWindowResize, { passive: true }) + window.addEventListener('resize', handleResize, { passive: true }) - resizeObserver = new ResizeObserver(handleWindowResize) + resizeObserver = new ResizeObserver(handleResize) if (root.value) { resizeObserver.observe(root.value) } @@ -161,7 +154,7 @@ export default defineComponent({ resizeObserver = null } - window.removeEventListener('resize', handleWindowResize, { + window.removeEventListener('resize', handleResize, { passive: true, } as EventListenerOptions) })