@kiva/kv-components 3.105.0 → 3.105.1
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,17 @@
|
|
|
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
|
+
## [3.105.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.105.0...@kiva/kv-components@3.105.1) (2024-10-24)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* add more complete kv-carousel render to test, update to stable source for placeholder images ([03ee704](https://github.com/kiva/kv-ui-elements/commit/03ee704cbbb8345d4129a6b4cc63c8adfc9d83a9))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
# [3.105.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.104.0...@kiva/kv-components@3.105.0) (2024-10-15)
|
|
7
18
|
|
|
8
19
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kiva/kv-components",
|
|
3
|
-
"version": "3.105.
|
|
3
|
+
"version": "3.105.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -83,5 +83,5 @@
|
|
|
83
83
|
"optional": true
|
|
84
84
|
}
|
|
85
85
|
},
|
|
86
|
-
"gitHead": "
|
|
86
|
+
"gitHead": "ff60fa64eefe502aba92d72bc4e41a4fbe5a4502"
|
|
87
87
|
}
|
|
@@ -2,9 +2,47 @@ import { render } from '@testing-library/vue';
|
|
|
2
2
|
import { axe } from 'jest-axe';
|
|
3
3
|
import KvCarousel from '../../../../vue/KvCarousel.vue';
|
|
4
4
|
|
|
5
|
+
const randomHexColor = (index) => {
|
|
6
|
+
const defaultColor = '96d4b3';
|
|
7
|
+
const colorArray = [
|
|
8
|
+
'D5573B',
|
|
9
|
+
'885053',
|
|
10
|
+
'777DA7',
|
|
11
|
+
'94C9A9',
|
|
12
|
+
'C6ECAE',
|
|
13
|
+
'C490D1',
|
|
14
|
+
'A0D2DB',
|
|
15
|
+
'7D8CC4',
|
|
16
|
+
'726DA8',
|
|
17
|
+
];
|
|
18
|
+
return colorArray?.[index] || defaultColor;
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
const defaultCarouselSlides = `
|
|
22
|
+
<template #slide1>
|
|
23
|
+
<img src="https://placehold.co/300x220/${randomHexColor(1)}/000000" alt="img1" class="tw-w-full">
|
|
24
|
+
</template>
|
|
25
|
+
<template #slide2>
|
|
26
|
+
<img src="https://placehold.co/300x220/${randomHexColor(2)}/000000" alt="img2" class="tw-w-full">
|
|
27
|
+
</template>
|
|
28
|
+
<template #slide3>
|
|
29
|
+
<img src="https://placehold.co/300x220/${randomHexColor(3)}/000000" alt="img3" class="tw-w-full">
|
|
30
|
+
</template>
|
|
31
|
+
<template #slide4>
|
|
32
|
+
<img src="https://placehold.co/300x220/${randomHexColor(4)}/000000" alt="img4" class="tw-w-full">
|
|
33
|
+
</template>
|
|
34
|
+
`;
|
|
35
|
+
|
|
5
36
|
describe('KvCarousel', () => {
|
|
6
37
|
it('has no automated accessibility violations', async () => {
|
|
7
|
-
const
|
|
38
|
+
const TestComponent = {
|
|
39
|
+
template:
|
|
40
|
+
`<kv-carousel style="max-width: 400px;">
|
|
41
|
+
${defaultCarouselSlides}
|
|
42
|
+
</kv-carousel>`,
|
|
43
|
+
components: { KvCarousel },
|
|
44
|
+
};
|
|
45
|
+
const { container } = render(TestComponent);
|
|
8
46
|
const results = await axe(container);
|
|
9
47
|
expect(results).toHaveNoViolations();
|
|
10
48
|
});
|
package/vue/KvCarousel.vue
CHANGED
|
@@ -375,7 +375,7 @@ export default {
|
|
|
375
375
|
slides.value = embla.value.slideNodes();
|
|
376
376
|
slideIndicatorListLength();
|
|
377
377
|
|
|
378
|
-
embla
|
|
378
|
+
embla?.value?.on('select', () => {
|
|
379
379
|
currentIndex.value = embla.value.selectedScrollSnap();
|
|
380
380
|
/**
|
|
381
381
|
* The index of the slide that the carousel has changed to
|
|
@@ -389,8 +389,8 @@ export default {
|
|
|
389
389
|
});
|
|
390
390
|
|
|
391
391
|
onUnmounted(async () => {
|
|
392
|
-
embla
|
|
393
|
-
embla
|
|
392
|
+
embla?.value?.off('select');
|
|
393
|
+
embla?.value?.destroy();
|
|
394
394
|
});
|
|
395
395
|
|
|
396
396
|
return {
|
|
@@ -35,7 +35,7 @@ const generateLoanCardTemplate = (index) => {
|
|
|
35
35
|
|
|
36
36
|
return `
|
|
37
37
|
<div style="width: 336px">
|
|
38
|
-
<img src="https://
|
|
38
|
+
<img src="https://placehold.co/336x252/${randomHexColor(index)}/000000" class="tw-w-full tw-rounded tw-mb-2">
|
|
39
39
|
<h3>Card Title</h3>
|
|
40
40
|
<h4 class="tw-my-1">$${amounts?.[index] || amounts?.[1]} to go</h4>
|
|
41
41
|
<p class="tw-mt-1 tw-mb-9">${cardCopy?.[index] || cardCopy?.[1]}</p>
|
|
@@ -49,16 +49,16 @@ const generateLoanCardTemplate = (index) => {
|
|
|
49
49
|
|
|
50
50
|
const defaultCarouselSlides = `
|
|
51
51
|
<template #slide1>
|
|
52
|
-
<img src="https://
|
|
52
|
+
<img src="https://placehold.co/300x220/${randomHexColor(1)}/000000" class="tw-w-full">
|
|
53
53
|
</template>
|
|
54
54
|
<template #slide2>
|
|
55
|
-
<img src="https://
|
|
55
|
+
<img src="https://placehold.co/300x220/${randomHexColor(2)}/000000" class="tw-w-full">
|
|
56
56
|
</template>
|
|
57
57
|
<template #slide3>
|
|
58
|
-
<img src="https://
|
|
58
|
+
<img src="https://placehold.co/300x220/${randomHexColor(3)}/000000" class="tw-w-full">
|
|
59
59
|
</template>
|
|
60
60
|
<template #slide4>
|
|
61
|
-
<img src="https://
|
|
61
|
+
<img src="https://placehold.co/300x220/${randomHexColor(4)}/000000" class="tw-w-full">
|
|
62
62
|
</template>
|
|
63
63
|
`;
|
|
64
64
|
|