@kiva/kv-components 3.76.0 → 3.78.0

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
+ # [3.78.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.77.0...@kiva/kv-components@3.78.0) (2024-05-15)
7
+
8
+
9
+ ### Features
10
+
11
+ * start index added to kvcarousel component ([#398](https://github.com/kiva/kv-ui-elements/issues/398)) ([0477155](https://github.com/kiva/kv-ui-elements/commit/0477155d8bb02cce80777dbb3d2296b63d146ea8))
12
+
13
+
14
+
15
+
16
+
17
+ # [3.77.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.76.0...@kiva/kv-components@3.77.0) (2024-05-08)
18
+
19
+
20
+ ### Features
21
+
22
+ * clickable activity tag ([#397](https://github.com/kiva/kv-ui-elements/issues/397)) ([0b808a5](https://github.com/kiva/kv-ui-elements/commit/0b808a591d1b6f43c12df8f6f54920cd77f59125))
23
+
24
+
25
+
26
+
27
+
6
28
  # [3.76.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.75.2...@kiva/kv-components@3.76.0) (2024-05-02)
7
29
 
8
30
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kiva/kv-components",
3
- "version": "3.76.0",
3
+ "version": "3.78.0",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -75,5 +75,5 @@
75
75
  "optional": true
76
76
  }
77
77
  },
78
- "gitHead": "ce82b62dfa049f7d87108079164dea930b193bb7"
78
+ "gitHead": "d2a856513aff1fdd814ad021bff7a4e64c408b8e"
79
79
  }
@@ -146,7 +146,8 @@ export default {
146
146
  const rootEl = ref(null);
147
147
  const embla = ref(null);
148
148
  const slides = ref([]);
149
- const currentIndex = ref(0);
149
+ const startIndex = emblaOptions.value?.startIndex ?? 0;
150
+ const currentIndex = ref(startIndex);
150
151
  // The indicator count may differ from the slide count when multiple slides are in view
151
152
  const slideIndicatorCount = ref(0);
152
153
 
@@ -60,7 +60,7 @@ export default {
60
60
  } = toRefs(props);
61
61
 
62
62
  const isClickable = (tag) => {
63
- const clickableTypes = ['sector', 'tag', 'attribute'];
63
+ const clickableTypes = ['sector', 'tag', 'attribute', 'activity'];
64
64
  const isClickableType = clickableTypes.includes(tag.type);
65
65
 
66
66
  return enableClickable.value && isClickableType && !!tag.id;
@@ -310,3 +310,46 @@ export const ResponsiveSlides = () => ({
310
310
  </kv-carousel>
311
311
  `,
312
312
  });
313
+
314
+ export const CustomStartIndex = () => ({
315
+ components: {
316
+ KvCarousel,
317
+ KvButton,
318
+ },
319
+ template: `
320
+ <kv-carousel
321
+ :embla-options="{ loop: false, align: 'center', startIndex: 1 }"
322
+ :multiple-slides-visible="true"
323
+ slides-to-scroll="visible"
324
+ style="max-width: 1072px;"
325
+ >
326
+ <template #slide1>
327
+ ${generateLoanCardTemplate(1)}
328
+ </template>
329
+ <template #slide2>
330
+ ${generateLoanCardTemplate(2)}
331
+ </template>
332
+ <template #slide3>
333
+ ${generateLoanCardTemplate(3)}
334
+ </template>
335
+ <template #slide4>
336
+ ${generateLoanCardTemplate(4)}
337
+ </template>
338
+ <template #slide5>
339
+ ${generateLoanCardTemplate(5)}
340
+ </template>
341
+ <template #slide6>
342
+ ${generateLoanCardTemplate(6)}
343
+ </template>
344
+ <template #slide7>
345
+ ${generateLoanCardTemplate(7)}
346
+ </template>
347
+ <template #slide8>
348
+ ${generateLoanCardTemplate(8)}
349
+ </template>
350
+ <template #slide9>
351
+ ${generateLoanCardTemplate(9)}
352
+ </template>
353
+ </kv-carousel>
354
+ `,
355
+ });
@@ -24,10 +24,11 @@ export const Default = story({ callouts: [{ label: 'callout 1' }, { label: 'call
24
24
 
25
25
  export const Clickable = story({
26
26
  callouts: [
27
- { label: 'callout 2' },
28
- { id: 33, label: 'callout 3', type: 'sector' },
29
- { id: null, label: 'callout 4', type: 'tag' },
30
- { id: 12, label: 'callout 5', type: 'attribute' },
27
+ { label: 'callout 1' },
28
+ { id: 33, label: 'callout 2', type: 'sector' },
29
+ { id: null, label: 'callout 3', type: 'tag' },
30
+ { id: 12, label: 'callout 4', type: 'attribute' },
31
+ { id: 9, label: 'callout 5', type: 'activity' },
31
32
  ],
32
33
  enableClickable: true,
33
34
  });