@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 +22 -0
- package/dist/components/KvCarousel.vue +0 -3
- package/dist/components/KvVerticalCarousel.vue +0 -3
- package/dist/components/stories/KvVerticalCarousel.stories.js +61 -0
- package/dist/utils/carousels.cjs +14 -18
- package/dist/utils/carousels.js +1 -1
- package/dist/utils/{chunk-WJV72VFJ.js → chunk-TR3NWLTZ.js} +14 -18
- package/dist/utils/index.cjs +14 -18
- package/dist/utils/index.js +1 -1
- package/package.json +2 -2
- package/utils/carousels.js +21 -19
- package/vue/KvCarousel.vue +0 -3
- package/vue/KvVerticalCarousel.vue +0 -3
- package/vue/stories/KvVerticalCarousel.stories.js +61 -0
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
|
});
|
package/dist/utils/carousels.cjs
CHANGED
|
@@ -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.
|
|
149
|
-
|
|
150
|
-
const combinedPluginOptions = [];
|
|
137
|
+
const combinedPluginOptions = (0, import_vue_demi.computed)(() => {
|
|
138
|
+
const options = [];
|
|
151
139
|
if (Object.keys(autoplayOptions.value).length !== 0) {
|
|
152
|
-
|
|
140
|
+
options.push((0, import_embla_carousel_autoplay.default)(autoplayOptions.value));
|
|
153
141
|
}
|
|
154
142
|
if (fadeEnabled.value) {
|
|
155
|
-
|
|
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,
|
package/dist/utils/carousels.js
CHANGED
|
@@ -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
|
-
|
|
113
|
-
|
|
114
|
-
const combinedPluginOptions = [];
|
|
101
|
+
const combinedPluginOptions = computed(() => {
|
|
102
|
+
const options = [];
|
|
115
103
|
if (Object.keys(autoplayOptions.value).length !== 0) {
|
|
116
|
-
|
|
104
|
+
options.push(Autoplay(autoplayOptions.value));
|
|
117
105
|
}
|
|
118
106
|
if (fadeEnabled.value) {
|
|
119
|
-
|
|
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,
|
package/dist/utils/index.cjs
CHANGED
|
@@ -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.
|
|
257
|
-
|
|
258
|
-
const combinedPluginOptions = [];
|
|
245
|
+
const combinedPluginOptions = (0, import_vue_demi.computed)(() => {
|
|
246
|
+
const options = [];
|
|
259
247
|
if (Object.keys(autoplayOptions.value).length !== 0) {
|
|
260
|
-
|
|
248
|
+
options.push((0, import_embla_carousel_autoplay.default)(autoplayOptions.value));
|
|
261
249
|
}
|
|
262
250
|
if (fadeEnabled.value) {
|
|
263
|
-
|
|
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,
|
package/dist/utils/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kiva/kv-components",
|
|
3
|
-
"version": "4.8.
|
|
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": "
|
|
101
|
+
"gitHead": "f8f5545e84e08c30285dc272388803edc521cb7c"
|
|
102
102
|
}
|
package/utils/carousels.js
CHANGED
|
@@ -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
|
-
|
|
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
|
-
|
|
157
|
-
const
|
|
144
|
+
const combinedPluginOptions = computed(() => {
|
|
145
|
+
const options = [];
|
|
158
146
|
if (Object.keys(autoplayOptions.value).length !== 0) {
|
|
159
|
-
|
|
147
|
+
options.push(Autoplay(autoplayOptions.value));
|
|
160
148
|
}
|
|
161
149
|
if (fadeEnabled.value) {
|
|
162
|
-
|
|
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,
|
package/vue/KvCarousel.vue
CHANGED
|
@@ -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
|
});
|