@kiva/kv-components 3.11.0 → 3.11.2
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 +16 -0
- package/package.json +2 -2
- package/vue/KvContentfulImg.vue +1 -1
- package/vue/KvToast.vue +9 -1
- package/vue/stories/KvToast.stories.js +35 -4
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
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.11.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.11.1...@kiva/kv-components@3.11.2) (2023-01-25)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @kiva/kv-components
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [3.11.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.11.0...@kiva/kv-components@3.11.1) (2023-01-20)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @kiva/kv-components
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
6
22
|
# [3.11.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.10.2...@kiva/kv-components@3.11.0) (2023-01-19)
|
|
7
23
|
|
|
8
24
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kiva/kv-components",
|
|
3
|
-
"version": "3.11.
|
|
3
|
+
"version": "3.11.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"optional": true
|
|
70
70
|
}
|
|
71
71
|
},
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "a2f47274993deaa667495ee4ce9b74f4c6d0b2cc"
|
|
73
73
|
}
|
package/vue/KvContentfulImg.vue
CHANGED
package/vue/KvToast.vue
CHANGED
|
@@ -71,8 +71,13 @@
|
|
|
71
71
|
tw-flex
|
|
72
72
|
"
|
|
73
73
|
>
|
|
74
|
+
<slot
|
|
75
|
+
v-if="hasToastContentSlot"
|
|
76
|
+
name="toastContent"
|
|
77
|
+
></slot>
|
|
74
78
|
<!-- eslint-disable vue/no-v-html -->
|
|
75
79
|
<p
|
|
80
|
+
v-else
|
|
76
81
|
class="tw-inline-block tw-m-auto"
|
|
77
82
|
v-html="message"
|
|
78
83
|
>
|
|
@@ -141,7 +146,7 @@ export default {
|
|
|
141
146
|
emits: [
|
|
142
147
|
'close',
|
|
143
148
|
],
|
|
144
|
-
setup(props, { emit }) {
|
|
149
|
+
setup(props, { emit, slots }) {
|
|
145
150
|
const isVisible = ref(false);
|
|
146
151
|
const message = ref('');
|
|
147
152
|
const messageType = ref('confirmation'); // 'error', 'info', 'confirmation'
|
|
@@ -171,6 +176,8 @@ export default {
|
|
|
171
176
|
return Math.max(characterMs, MINIMUM_MS);
|
|
172
177
|
});
|
|
173
178
|
|
|
179
|
+
const hasToastContentSlot = computed(() => !!slots?.toastContent ?? false);
|
|
180
|
+
|
|
174
181
|
const close = () => {
|
|
175
182
|
isVisible.value = false;
|
|
176
183
|
clearTimeout(timeout.value);
|
|
@@ -206,6 +213,7 @@ export default {
|
|
|
206
213
|
msToDisplayToast,
|
|
207
214
|
close,
|
|
208
215
|
show,
|
|
216
|
+
hasToastContentSlot,
|
|
209
217
|
};
|
|
210
218
|
},
|
|
211
219
|
};
|
|
@@ -50,11 +50,9 @@ const Template = (args, {
|
|
|
50
50
|
</div>`,
|
|
51
51
|
methods: {
|
|
52
52
|
showToast(messageInput, type, persistInput) {
|
|
53
|
-
console.log(this.$refs.toastRef);
|
|
54
53
|
this.$refs.toastRef.show(messageInput, type, persistInput);
|
|
55
54
|
},
|
|
56
55
|
onClose() {
|
|
57
|
-
console.log('toast closed');
|
|
58
56
|
},
|
|
59
57
|
},
|
|
60
58
|
});
|
|
@@ -74,5 +72,38 @@ withLongTextAndHtml.args = { message: 'This is a nice long content that could <b
|
|
|
74
72
|
export const persist = Template.bind({});
|
|
75
73
|
persist.args = { persist: true };
|
|
76
74
|
|
|
77
|
-
|
|
78
|
-
|
|
75
|
+
const KivaLogoTemplate = (args, {
|
|
76
|
+
argTypes,
|
|
77
|
+
}) => ({
|
|
78
|
+
props: Object.keys(argTypes),
|
|
79
|
+
components: {
|
|
80
|
+
KvToast,
|
|
81
|
+
KvButton,
|
|
82
|
+
},
|
|
83
|
+
template: `
|
|
84
|
+
<div>
|
|
85
|
+
<kv-button @click="showToast(message, type, persist)">Show Toast</kv-button>
|
|
86
|
+
|
|
87
|
+
<!-- div below is a kludge for storybook docs -->
|
|
88
|
+
<div class="tw-fixed tw-z-toast tw-inset-0 tw-pointer-events-none">
|
|
89
|
+
<div class="tw-fixed tw-left-0 tw-right-0 tw-top-2 tw-pointer-events-auto">
|
|
90
|
+
<kv-toast ref="toastRef" @close="onClose">
|
|
91
|
+
<template #toastContent>
|
|
92
|
+
<div>
|
|
93
|
+
Welcome to Lending home! We’re doing something new based on your feedback this year. <button class="tw-text-action">Read more here</button>
|
|
94
|
+
</div>
|
|
95
|
+
</template>
|
|
96
|
+
</kv-toast>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
</div>`,
|
|
100
|
+
methods: {
|
|
101
|
+
showToast(messageInput, type, persistInput) {
|
|
102
|
+
this.$refs.toastRef.show(messageInput, type, persistInput);
|
|
103
|
+
},
|
|
104
|
+
onClose() {
|
|
105
|
+
},
|
|
106
|
+
},
|
|
107
|
+
});
|
|
108
|
+
export const typeKivaLogo = KivaLogoTemplate.bind({});
|
|
109
|
+
typeKivaLogo.args = { type: 'kiva-logo', message: '' };
|