@kiva/kv-components 4.8.3 → 4.8.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [4.8.5](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.8.4...@kiva/kv-components@4.8.5) (2025-01-10)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * click events after removal of clickAllowed ([58388bb](https://github.com/kiva/kv-ui-elements/commit/58388bbfbf1b16a803a6f6e8a327babebb6393e2))
12
+
13
+
14
+
15
+
16
+
17
+ ## [4.8.4](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.8.3...@kiva/kv-components@4.8.4) (2025-01-10)
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * carousel autoplay issues ([ae1e7eb](https://github.com/kiva/kv-ui-elements/commit/ae1e7ebf82181b3c9fed505d3ad5afce41dcabba))
23
+
24
+
25
+
26
+
27
+
6
28
  ## [4.8.3](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.8.2...@kiva/kv-components@4.8.3) (2025-01-10)
7
29
 
8
30
 
@@ -12,7 +12,6 @@
12
12
  'tw-mx-auto aside-controls-content': asideControls,
13
13
  'circle-carousel': inCircle
14
14
  }"
15
- @click.capture="onCarouselContainerClick"
16
15
  >
17
16
  <div
18
17
  v-for="(slotName, index) in componentSlotKeys"
@@ -251,7 +250,6 @@ export default {
251
250
  isAriaHidden,
252
251
  isAutoplaying,
253
252
  nextIndex,
254
- onCarouselContainerClick,
255
253
  previousIndex,
256
254
  reInit,
257
255
  reInitVisible,
@@ -275,7 +273,6 @@ export default {
275
273
  mdiChevronLeft,
276
274
  mdiChevronRight,
277
275
  nextIndex,
278
- onCarouselContainerClick,
279
276
  previousIndex,
280
277
  reInit,
281
278
  reInitVisible,
@@ -9,7 +9,6 @@
9
9
  <div
10
10
  class="tw-flex tw-flex-col"
11
11
  :style="`height: ${heightStyle}`"
12
- @click.capture="onCarouselContainerClick"
13
12
  >
14
13
  <div
15
14
  v-for="(slotName, index) in componentSlotKeys"
@@ -177,7 +176,6 @@ export default {
177
176
  isAriaHidden,
178
177
  isAutoplaying,
179
178
  nextIndex,
180
- onCarouselContainerClick,
181
179
  previousIndex,
182
180
  reInit,
183
181
  reInitVisible,
@@ -205,7 +203,6 @@ export default {
205
203
  mdiChevronDown,
206
204
  mdiChevronUp,
207
205
  nextIndex,
208
- onCarouselContainerClick,
209
206
  previousIndex,
210
207
  reInit,
211
208
  reInitVisible,
@@ -189,12 +189,18 @@ export const AutoPlayButton = () => ({
189
189
  },
190
190
  data: () => ({
191
191
  isAutoplaying: false,
192
+ currentSlide: 0,
192
193
  }),
193
194
  mounted() {
194
195
  watch(() => this.$refs?.sampleCarousel?.isAutoplaying, (newValue) => {
195
196
  this.isAutoplaying = newValue;
196
197
  });
197
198
  },
199
+ methods: {
200
+ changeEvent(index) {
201
+ this.currentSlide = index;
202
+ },
203
+ },
198
204
  template: `
199
205
  <div>
200
206
  <kv-vertical-carousel
@@ -202,6 +208,7 @@ export const AutoPlayButton = () => ({
202
208
  style="max-width: 400px;"
203
209
  :embla-options="{ loop: false }"
204
210
  :autoplay-options="{ playOnInit: true, delay: 3000 }"
211
+ @change="changeEvent"
205
212
  >
206
213
  ${defaultCarouselSlides}
207
214
  </kv-vertical-carousel>
@@ -209,6 +216,60 @@ export const AutoPlayButton = () => ({
209
216
  <br/>
210
217
  <p>AutoPlay is: {{ isAutoplaying ? 'ON' : 'OFF' }}</p>
211
218
  <a href="#" @click.native.prevent="$refs.sampleCarousel.goToSlide(0)">Go To Slide 0</a>
219
+ <p>Current Slide: {{ currentSlide }}</p>
220
+ </div>
221
+ `,
222
+ });
223
+
224
+ export const AutoPlayWithDynamicSlides = () => ({
225
+ components: {
226
+ KvVerticalCarousel,
227
+ },
228
+ data: () => ({
229
+ isAutoplaying: false,
230
+ currentSlide: 0,
231
+ }),
232
+ mounted() {
233
+ watch(() => this.$refs?.sampleCarousel?.isAutoplaying, (newValue) => {
234
+ this.isAutoplaying = newValue;
235
+ });
236
+ },
237
+ methods: {
238
+ changeEvent(index) {
239
+ this.currentSlide = index;
240
+ },
241
+ },
242
+ template: `
243
+ <div>
244
+ <kv-vertical-carousel
245
+ ref="sampleCarousel"
246
+ style="max-width: 400px;"
247
+ :embla-options="{ loop: false }"
248
+ :autoplay-options="{ playOnInit: true, delay: 3000 }"
249
+ @change="changeEvent"
250
+ >
251
+ <template #slide1 >
252
+ <img src="https://placehold.co/400x150/${randomHexColor(1)}/000000">
253
+ <p style="background-color: #${randomHexColor(1)};" v-if="currentSlide === 0" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
254
+ </template>
255
+ <template #slide2>
256
+ <img src="https://placehold.co/400x150/${randomHexColor(2)}/000000">
257
+ <p style="background-color: #${randomHexColor(2)};" v-if="currentSlide === 1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
258
+ </template>
259
+ <template #slide3>
260
+ <img src="https://placehold.co/400x150/${randomHexColor(3)}/000000">
261
+ <p style="background-color: #${randomHexColor(3)};" v-if="currentSlide === 2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
262
+ </template>
263
+ <template #slide4>
264
+ <img src="https://placehold.co/400x150/${randomHexColor(4)}/000000">
265
+ <p style="background-color: #${randomHexColor(4)};" v-if="currentSlide === 3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
266
+ </template>
267
+ </kv-vertical-carousel>
268
+ <a href="#" @click.native.prevent="$refs.sampleCarousel.toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
269
+ <br/>
270
+ <p>AutoPlay is: {{ isAutoplaying ? 'ON' : 'OFF' }}</p>
271
+ <a href="#" @click.native.prevent="$refs.sampleCarousel.goToSlide(0)">Go To Slide 0</a>
272
+ <p>Current Slide: {{ currentSlide }}</p>
212
273
  </div>
213
274
  `,
214
275
  });
@@ -92,15 +92,10 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
92
92
  embla.value.scrollTo(index);
93
93
  };
94
94
  const handleUserInteraction = async (index, interactionType) => {
95
- var _a2, _b;
96
95
  if (index !== null && typeof index !== "undefined") {
97
96
  await (0, import_vue_demi.nextTick)();
98
97
  goToSlide(index);
99
98
  }
100
- const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
101
- if (autoplay) {
102
- autoplay.stop();
103
- }
104
99
  emit("interact-carousel", interactionType);
105
100
  };
106
101
  const toggleAutoPlay = () => {
@@ -133,27 +128,24 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
133
128
  slides.value = embla.value.slideNodes();
134
129
  slideIndicatorListLength();
135
130
  };
136
- const onCarouselContainerClick = (e) => {
137
- if (embla.value && !embla.value.clickAllowed()) {
138
- e.preventDefault();
139
- e.stopPropagation();
140
- }
141
- };
142
131
  const isAriaHidden = (index) => {
143
132
  if (embla.value) {
144
133
  return !embla.value.slidesInView(true).includes(index);
145
134
  }
146
135
  return false;
147
136
  };
148
- (0, import_vue_demi.onMounted)(async () => {
149
- var _a2, _b, _c;
150
- const combinedPluginOptions = [];
137
+ const combinedPluginOptions = (0, import_vue_demi.computed)(() => {
138
+ const options = [];
151
139
  if (Object.keys(autoplayOptions.value).length !== 0) {
152
- combinedPluginOptions.push((0, import_embla_carousel_autoplay.default)(autoplayOptions.value));
140
+ options.push((0, import_embla_carousel_autoplay.default)(autoplayOptions.value));
153
141
  }
154
142
  if (fadeEnabled.value) {
155
- combinedPluginOptions.push((0, import_embla_carousel_fade.default)());
143
+ options.push((0, import_embla_carousel_fade.default)());
156
144
  }
145
+ return options;
146
+ });
147
+ (0, import_vue_demi.onMounted)(async () => {
148
+ var _a2, _b, _c;
157
149
  embla.value = (0, import_embla_carousel.default)(rootEl.value, {
158
150
  loop: true,
159
151
  containScroll: "trimSnaps",
@@ -161,7 +153,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
161
153
  align: "start",
162
154
  ...extraEmblaOptions,
163
155
  ...emblaOptions.value
164
- }, combinedPluginOptions);
156
+ }, combinedPluginOptions.value);
165
157
  if (slidesToScroll.value === "visible") {
166
158
  reInitVisible();
167
159
  embla.value.on(
@@ -179,7 +171,12 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
179
171
  slides.value = embla.value.slideNodes();
180
172
  slideIndicatorListLength();
181
173
  (_a2 = embla == null ? void 0 : embla.value) == null ? void 0 : _a2.on("select", () => {
174
+ var _a3, _b2;
182
175
  currentIndex.value = embla.value.selectedScrollSnap();
176
+ const autoplay = (_b2 = (_a3 = embla.value) == null ? void 0 : _a3.plugins()) == null ? void 0 : _b2.autoplay;
177
+ if (autoplay) {
178
+ embla.value.plugins().autoplay.options.playOnInit = autoplay.isPlaying();
179
+ }
183
180
  (0, import_vue_demi.nextTick)(() => {
184
181
  emit("change", currentIndex);
185
182
  });
@@ -211,7 +208,6 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
211
208
  goToSlide,
212
209
  reInit,
213
210
  reInitVisible,
214
- onCarouselContainerClick,
215
211
  isAriaHidden,
216
212
  isAutoplaying,
217
213
  slideIndicatorListLength,
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  carouselUtil
3
- } from "./chunk-WJV72VFJ.js";
3
+ } from "./chunk-TR3NWLTZ.js";
4
4
  import "./chunk-HV3AUBFT.js";
5
5
  import "./chunk-YCNMJ4YV.js";
6
6
  export {
@@ -56,15 +56,10 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
56
56
  embla.value.scrollTo(index);
57
57
  };
58
58
  const handleUserInteraction = async (index, interactionType) => {
59
- var _a2, _b;
60
59
  if (index !== null && typeof index !== "undefined") {
61
60
  await nextTick();
62
61
  goToSlide(index);
63
62
  }
64
- const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
65
- if (autoplay) {
66
- autoplay.stop();
67
- }
68
63
  emit("interact-carousel", interactionType);
69
64
  };
70
65
  const toggleAutoPlay = () => {
@@ -97,27 +92,24 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
97
92
  slides.value = embla.value.slideNodes();
98
93
  slideIndicatorListLength();
99
94
  };
100
- const onCarouselContainerClick = (e) => {
101
- if (embla.value && !embla.value.clickAllowed()) {
102
- e.preventDefault();
103
- e.stopPropagation();
104
- }
105
- };
106
95
  const isAriaHidden = (index) => {
107
96
  if (embla.value) {
108
97
  return !embla.value.slidesInView(true).includes(index);
109
98
  }
110
99
  return false;
111
100
  };
112
- onMounted(async () => {
113
- var _a2, _b, _c;
114
- const combinedPluginOptions = [];
101
+ const combinedPluginOptions = computed(() => {
102
+ const options = [];
115
103
  if (Object.keys(autoplayOptions.value).length !== 0) {
116
- combinedPluginOptions.push(Autoplay(autoplayOptions.value));
104
+ options.push(Autoplay(autoplayOptions.value));
117
105
  }
118
106
  if (fadeEnabled.value) {
119
- combinedPluginOptions.push(Fade());
107
+ options.push(Fade());
120
108
  }
109
+ return options;
110
+ });
111
+ onMounted(async () => {
112
+ var _a2, _b, _c;
121
113
  embla.value = EmblaCarousel(rootEl.value, {
122
114
  loop: true,
123
115
  containScroll: "trimSnaps",
@@ -125,7 +117,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
125
117
  align: "start",
126
118
  ...extraEmblaOptions,
127
119
  ...emblaOptions.value
128
- }, combinedPluginOptions);
120
+ }, combinedPluginOptions.value);
129
121
  if (slidesToScroll.value === "visible") {
130
122
  reInitVisible();
131
123
  embla.value.on(
@@ -143,7 +135,12 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
143
135
  slides.value = embla.value.slideNodes();
144
136
  slideIndicatorListLength();
145
137
  (_a2 = embla == null ? void 0 : embla.value) == null ? void 0 : _a2.on("select", () => {
138
+ var _a3, _b2;
146
139
  currentIndex.value = embla.value.selectedScrollSnap();
140
+ const autoplay = (_b2 = (_a3 = embla.value) == null ? void 0 : _a3.plugins()) == null ? void 0 : _b2.autoplay;
141
+ if (autoplay) {
142
+ embla.value.plugins().autoplay.options.playOnInit = autoplay.isPlaying();
143
+ }
147
144
  nextTick(() => {
148
145
  emit("change", currentIndex);
149
146
  });
@@ -175,7 +172,6 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
175
172
  goToSlide,
176
173
  reInit,
177
174
  reInitVisible,
178
- onCarouselContainerClick,
179
175
  isAriaHidden,
180
176
  isAutoplaying,
181
177
  slideIndicatorListLength,
@@ -200,15 +200,10 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
200
200
  embla.value.scrollTo(index);
201
201
  };
202
202
  const handleUserInteraction = async (index, interactionType) => {
203
- var _a2, _b;
204
203
  if (index !== null && typeof index !== "undefined") {
205
204
  await (0, import_vue_demi.nextTick)();
206
205
  goToSlide(index);
207
206
  }
208
- const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
209
- if (autoplay) {
210
- autoplay.stop();
211
- }
212
207
  emit("interact-carousel", interactionType);
213
208
  };
214
209
  const toggleAutoPlay = () => {
@@ -241,27 +236,24 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
241
236
  slides.value = embla.value.slideNodes();
242
237
  slideIndicatorListLength();
243
238
  };
244
- const onCarouselContainerClick = (e) => {
245
- if (embla.value && !embla.value.clickAllowed()) {
246
- e.preventDefault();
247
- e.stopPropagation();
248
- }
249
- };
250
239
  const isAriaHidden = (index) => {
251
240
  if (embla.value) {
252
241
  return !embla.value.slidesInView(true).includes(index);
253
242
  }
254
243
  return false;
255
244
  };
256
- (0, import_vue_demi.onMounted)(async () => {
257
- var _a2, _b, _c;
258
- const combinedPluginOptions = [];
245
+ const combinedPluginOptions = (0, import_vue_demi.computed)(() => {
246
+ const options = [];
259
247
  if (Object.keys(autoplayOptions.value).length !== 0) {
260
- combinedPluginOptions.push((0, import_embla_carousel_autoplay.default)(autoplayOptions.value));
248
+ options.push((0, import_embla_carousel_autoplay.default)(autoplayOptions.value));
261
249
  }
262
250
  if (fadeEnabled.value) {
263
- combinedPluginOptions.push((0, import_embla_carousel_fade.default)());
251
+ options.push((0, import_embla_carousel_fade.default)());
264
252
  }
253
+ return options;
254
+ });
255
+ (0, import_vue_demi.onMounted)(async () => {
256
+ var _a2, _b, _c;
265
257
  embla.value = (0, import_embla_carousel.default)(rootEl.value, {
266
258
  loop: true,
267
259
  containScroll: "trimSnaps",
@@ -269,7 +261,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
269
261
  align: "start",
270
262
  ...extraEmblaOptions,
271
263
  ...emblaOptions.value
272
- }, combinedPluginOptions);
264
+ }, combinedPluginOptions.value);
273
265
  if (slidesToScroll.value === "visible") {
274
266
  reInitVisible();
275
267
  embla.value.on(
@@ -287,7 +279,12 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
287
279
  slides.value = embla.value.slideNodes();
288
280
  slideIndicatorListLength();
289
281
  (_a2 = embla == null ? void 0 : embla.value) == null ? void 0 : _a2.on("select", () => {
282
+ var _a3, _b2;
290
283
  currentIndex.value = embla.value.selectedScrollSnap();
284
+ const autoplay = (_b2 = (_a3 = embla.value) == null ? void 0 : _a3.plugins()) == null ? void 0 : _b2.autoplay;
285
+ if (autoplay) {
286
+ embla.value.plugins().autoplay.options.playOnInit = autoplay.isPlaying();
287
+ }
291
288
  (0, import_vue_demi.nextTick)(() => {
292
289
  emit("change", currentIndex);
293
290
  });
@@ -319,7 +316,6 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
319
316
  goToSlide,
320
317
  reInit,
321
318
  reInitVisible,
322
- onCarouselContainerClick,
323
319
  isAriaHidden,
324
320
  isAutoplaying,
325
321
  slideIndicatorListLength,
@@ -31,7 +31,7 @@ import {
31
31
  } from "./chunk-3HK4G4NT.js";
32
32
  import {
33
33
  carouselUtil
34
- } from "./chunk-WJV72VFJ.js";
34
+ } from "./chunk-TR3NWLTZ.js";
35
35
  import {
36
36
  throttle
37
37
  } from "./chunk-HV3AUBFT.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kiva/kv-components",
3
- "version": "4.8.3",
3
+ "version": "4.8.5",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -98,5 +98,5 @@
98
98
  "peerDependencies": {
99
99
  "vue": ">=3.0.0"
100
100
  },
101
- "gitHead": "cc7562704a59c7de5f93db527777d43c2c78b174"
101
+ "gitHead": "f8f5545e84e08c30285dc272388803edc521cb7c"
102
102
  }
@@ -71,12 +71,6 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
71
71
  goToSlide(index);
72
72
  }
73
73
 
74
- /** Stop autoplay on user interaction */
75
- const autoplay = embla.value?.plugins()?.autoplay;
76
- if (autoplay) {
77
- autoplay.stop();
78
- }
79
-
80
74
  /**
81
75
  * Fires when the user interacts with the carousel.
82
76
  * Contains the interaction type (swipe-left, click-left-arrow, etc.)
@@ -132,13 +126,7 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
132
126
  slides.value = embla.value.slideNodes();
133
127
  slideIndicatorListLength();
134
128
  };
135
- const onCarouselContainerClick = (e) => {
136
- // If we're dragging, block click handlers within slides
137
- if (embla.value && !embla.value.clickAllowed()) {
138
- e.preventDefault();
139
- e.stopPropagation();
140
- }
141
- };
129
+
142
130
  /**
143
131
  * If the slide is not completely in view in the carousel
144
132
  * it should be aria-hidden
@@ -153,14 +141,18 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
153
141
  return false;
154
142
  };
155
143
 
156
- onMounted(async () => {
157
- const combinedPluginOptions = [];
144
+ const combinedPluginOptions = computed(() => {
145
+ const options = [];
158
146
  if (Object.keys(autoplayOptions.value).length !== 0) {
159
- combinedPluginOptions.push(Autoplay(autoplayOptions.value));
147
+ options.push(Autoplay(autoplayOptions.value));
160
148
  }
161
149
  if (fadeEnabled.value) {
162
- combinedPluginOptions.push(Fade());
150
+ options.push(Fade());
163
151
  }
152
+ return options;
153
+ });
154
+
155
+ onMounted(async () => {
164
156
  embla.value = EmblaCarousel(rootEl.value, {
165
157
  loop: true,
166
158
  containScroll: 'trimSnaps',
@@ -168,7 +160,7 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
168
160
  align: 'start',
169
161
  ...extraEmblaOptions,
170
162
  ...emblaOptions.value,
171
- }, combinedPluginOptions);
163
+ }, combinedPluginOptions.value);
172
164
 
173
165
  if (slidesToScroll.value === 'visible') {
174
166
  reInitVisible();
@@ -192,6 +184,17 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
192
184
 
193
185
  embla?.value?.on('select', () => {
194
186
  currentIndex.value = embla.value.selectedScrollSnap();
187
+
188
+ /** After the select event, it is possible that embla will itself trigger a reinit.
189
+ * For example, if the act of selecting a slide causes it to change dimensions and the carousel
190
+ * needs to recalculate.
191
+ * When this reinit happens, autoplay settings will reset to the initial plugin options.
192
+ * Set playOnInit equal to the current state of autoplay to prevent this.
193
+ */
194
+ const autoplay = embla.value?.plugins()?.autoplay;
195
+ if (autoplay) {
196
+ embla.value.plugins().autoplay.options.playOnInit = autoplay.isPlaying();
197
+ }
195
198
  /**
196
199
  * The index of the slide that the carousel has changed to
197
200
  * @event change
@@ -241,7 +244,6 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
241
244
  goToSlide,
242
245
  reInit,
243
246
  reInitVisible,
244
- onCarouselContainerClick,
245
247
  isAriaHidden,
246
248
  isAutoplaying,
247
249
  slideIndicatorListLength,
@@ -12,7 +12,6 @@
12
12
  'tw-mx-auto aside-controls-content': asideControls,
13
13
  'circle-carousel': inCircle
14
14
  }"
15
- @click.capture="onCarouselContainerClick"
16
15
  >
17
16
  <div
18
17
  v-for="(slotName, index) in componentSlotKeys"
@@ -251,7 +250,6 @@ export default {
251
250
  isAriaHidden,
252
251
  isAutoplaying,
253
252
  nextIndex,
254
- onCarouselContainerClick,
255
253
  previousIndex,
256
254
  reInit,
257
255
  reInitVisible,
@@ -275,7 +273,6 @@ export default {
275
273
  mdiChevronLeft,
276
274
  mdiChevronRight,
277
275
  nextIndex,
278
- onCarouselContainerClick,
279
276
  previousIndex,
280
277
  reInit,
281
278
  reInitVisible,
@@ -9,7 +9,6 @@
9
9
  <div
10
10
  class="tw-flex tw-flex-col"
11
11
  :style="`height: ${heightStyle}`"
12
- @click.capture="onCarouselContainerClick"
13
12
  >
14
13
  <div
15
14
  v-for="(slotName, index) in componentSlotKeys"
@@ -177,7 +176,6 @@ export default {
177
176
  isAriaHidden,
178
177
  isAutoplaying,
179
178
  nextIndex,
180
- onCarouselContainerClick,
181
179
  previousIndex,
182
180
  reInit,
183
181
  reInitVisible,
@@ -205,7 +203,6 @@ export default {
205
203
  mdiChevronDown,
206
204
  mdiChevronUp,
207
205
  nextIndex,
208
- onCarouselContainerClick,
209
206
  previousIndex,
210
207
  reInit,
211
208
  reInitVisible,
@@ -189,12 +189,18 @@ export const AutoPlayButton = () => ({
189
189
  },
190
190
  data: () => ({
191
191
  isAutoplaying: false,
192
+ currentSlide: 0,
192
193
  }),
193
194
  mounted() {
194
195
  watch(() => this.$refs?.sampleCarousel?.isAutoplaying, (newValue) => {
195
196
  this.isAutoplaying = newValue;
196
197
  });
197
198
  },
199
+ methods: {
200
+ changeEvent(index) {
201
+ this.currentSlide = index;
202
+ },
203
+ },
198
204
  template: `
199
205
  <div>
200
206
  <kv-vertical-carousel
@@ -202,6 +208,7 @@ export const AutoPlayButton = () => ({
202
208
  style="max-width: 400px;"
203
209
  :embla-options="{ loop: false }"
204
210
  :autoplay-options="{ playOnInit: true, delay: 3000 }"
211
+ @change="changeEvent"
205
212
  >
206
213
  ${defaultCarouselSlides}
207
214
  </kv-vertical-carousel>
@@ -209,6 +216,60 @@ export const AutoPlayButton = () => ({
209
216
  <br/>
210
217
  <p>AutoPlay is: {{ isAutoplaying ? 'ON' : 'OFF' }}</p>
211
218
  <a href="#" @click.native.prevent="$refs.sampleCarousel.goToSlide(0)">Go To Slide 0</a>
219
+ <p>Current Slide: {{ currentSlide }}</p>
220
+ </div>
221
+ `,
222
+ });
223
+
224
+ export const AutoPlayWithDynamicSlides = () => ({
225
+ components: {
226
+ KvVerticalCarousel,
227
+ },
228
+ data: () => ({
229
+ isAutoplaying: false,
230
+ currentSlide: 0,
231
+ }),
232
+ mounted() {
233
+ watch(() => this.$refs?.sampleCarousel?.isAutoplaying, (newValue) => {
234
+ this.isAutoplaying = newValue;
235
+ });
236
+ },
237
+ methods: {
238
+ changeEvent(index) {
239
+ this.currentSlide = index;
240
+ },
241
+ },
242
+ template: `
243
+ <div>
244
+ <kv-vertical-carousel
245
+ ref="sampleCarousel"
246
+ style="max-width: 400px;"
247
+ :embla-options="{ loop: false }"
248
+ :autoplay-options="{ playOnInit: true, delay: 3000 }"
249
+ @change="changeEvent"
250
+ >
251
+ <template #slide1 >
252
+ <img src="https://placehold.co/400x150/${randomHexColor(1)}/000000">
253
+ <p style="background-color: #${randomHexColor(1)};" v-if="currentSlide === 0" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
254
+ </template>
255
+ <template #slide2>
256
+ <img src="https://placehold.co/400x150/${randomHexColor(2)}/000000">
257
+ <p style="background-color: #${randomHexColor(2)};" v-if="currentSlide === 1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
258
+ </template>
259
+ <template #slide3>
260
+ <img src="https://placehold.co/400x150/${randomHexColor(3)}/000000">
261
+ <p style="background-color: #${randomHexColor(3)};" v-if="currentSlide === 2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
262
+ </template>
263
+ <template #slide4>
264
+ <img src="https://placehold.co/400x150/${randomHexColor(4)}/000000">
265
+ <p style="background-color: #${randomHexColor(4)};" v-if="currentSlide === 3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
266
+ </template>
267
+ </kv-vertical-carousel>
268
+ <a href="#" @click.native.prevent="$refs.sampleCarousel.toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
269
+ <br/>
270
+ <p>AutoPlay is: {{ isAutoplaying ? 'ON' : 'OFF' }}</p>
271
+ <a href="#" @click.native.prevent="$refs.sampleCarousel.goToSlide(0)">Go To Slide 0</a>
272
+ <p>Current Slide: {{ currentSlide }}</p>
212
273
  </div>
213
274
  `,
214
275
  });