@kiva/kv-components 3.40.1 → 3.41.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 +12 -0
- package/package.json +2 -2
- package/vue/KvToast.vue +4 -17
- package/vue/stories/KvToast.stories.js +3 -25
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,18 @@
|
|
|
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.41.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.40.1...@kiva/kv-components@3.41.0) (2023-09-07)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* add box shadow to all toasts ([57ccaf2](https://github.com/kiva/kv-ui-elements/commit/57ccaf2f2da006a6990f5d5b0d6adeca8d3081b0))
|
|
12
|
+
* rolled back some new tooltip props ([4ce96d6](https://github.com/kiva/kv-ui-elements/commit/4ce96d6eae3457a6a92bde9e407f226d5e53d332))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
6
18
|
## [3.40.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.40.0...@kiva/kv-components@3.40.1) (2023-09-07)
|
|
7
19
|
|
|
8
20
|
**Note:** Version bump only for package @kiva/kv-components
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kiva/kv-components",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.41.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": "
|
|
78
|
+
"gitHead": "e8c825179c7a3044372369640113d65d7c30b3f5"
|
|
79
79
|
}
|
package/vue/KvToast.vue
CHANGED
|
@@ -21,10 +21,11 @@
|
|
|
21
21
|
class="
|
|
22
22
|
tw-rounded tw-overflow-hidden
|
|
23
23
|
tw-flex
|
|
24
|
+
tw-bg-secondary
|
|
24
25
|
tw-mx-auto
|
|
25
26
|
tw-w-full md:tw-w-max md:tw-max-w-full md:tw-min-w-1/2
|
|
27
|
+
tw-shadow
|
|
26
28
|
"
|
|
27
|
-
:class="[backgroundClass, { 'tw-shadow': applyDropShadow }]"
|
|
28
29
|
>
|
|
29
30
|
<div
|
|
30
31
|
class="
|
|
@@ -91,9 +92,9 @@
|
|
|
91
92
|
tw-flex-shrink-0
|
|
92
93
|
tw-flex
|
|
93
94
|
tw-items-center tw-justify-center
|
|
95
|
+
tw-bg-secondary
|
|
94
96
|
hover:tw-text-action-highlight
|
|
95
97
|
"
|
|
96
|
-
:class="[backgroundClass]"
|
|
97
98
|
@click="close"
|
|
98
99
|
>
|
|
99
100
|
<kv-material-icon
|
|
@@ -150,19 +151,9 @@ export default {
|
|
|
150
151
|
const isVisible = ref(false);
|
|
151
152
|
const message = ref('');
|
|
152
153
|
const messageType = ref('confirmation'); // 'error', 'info', 'confirmation'
|
|
153
|
-
const backgroundType = ref('secondary'); // 'primary', 'secondary', 'tertiary'
|
|
154
|
-
const applyDropShadow = ref(false);
|
|
155
154
|
const persist = ref(false);
|
|
156
155
|
const timeout = ref(null);
|
|
157
156
|
|
|
158
|
-
const backgroundClass = computed(() => {
|
|
159
|
-
switch (backgroundType.value) {
|
|
160
|
-
case 'primary': return 'tw-bg-primary';
|
|
161
|
-
case 'tertiary': return 'tw-bg-tertiary';
|
|
162
|
-
default: return 'tw-bg-secondary';
|
|
163
|
-
}
|
|
164
|
-
});
|
|
165
|
-
|
|
166
157
|
const icon = computed(() => {
|
|
167
158
|
if (messageType.value === 'warning') {
|
|
168
159
|
return mdiAlert;
|
|
@@ -199,12 +190,10 @@ export default {
|
|
|
199
190
|
emit('close');
|
|
200
191
|
};
|
|
201
192
|
|
|
202
|
-
const show = (messageInput, type, persistInput, hideDelay
|
|
193
|
+
const show = (messageInput, type, persistInput, hideDelay) => {
|
|
203
194
|
isVisible.value = true;
|
|
204
195
|
message.value = typeof messageInput === 'string' ? messageInput : '';
|
|
205
196
|
messageType.value = typeof type === 'string' ? type : '';
|
|
206
|
-
backgroundType.value = typeof background === 'string' ? background : '';
|
|
207
|
-
applyDropShadow.value = Boolean(dropShadow);
|
|
208
197
|
persist.value = Boolean(persistInput);
|
|
209
198
|
|
|
210
199
|
if (!persist.value) {
|
|
@@ -226,8 +215,6 @@ export default {
|
|
|
226
215
|
close,
|
|
227
216
|
show,
|
|
228
217
|
hasToastContentSlot,
|
|
229
|
-
backgroundClass,
|
|
230
|
-
applyDropShadow,
|
|
231
218
|
};
|
|
232
219
|
},
|
|
233
220
|
};
|
|
@@ -31,16 +31,6 @@ export default {
|
|
|
31
31
|
type: 'number',
|
|
32
32
|
},
|
|
33
33
|
},
|
|
34
|
-
background: {
|
|
35
|
-
control: {
|
|
36
|
-
type: 'text',
|
|
37
|
-
},
|
|
38
|
-
},
|
|
39
|
-
dropShadow: {
|
|
40
|
-
control: {
|
|
41
|
-
type: 'boolean',
|
|
42
|
-
},
|
|
43
|
-
},
|
|
44
34
|
},
|
|
45
35
|
};
|
|
46
36
|
|
|
@@ -54,7 +44,7 @@ const Template = (args, {
|
|
|
54
44
|
},
|
|
55
45
|
template: `
|
|
56
46
|
<div>
|
|
57
|
-
<kv-button @click="showToast(message, type, persist, hideDelay
|
|
47
|
+
<kv-button @click="showToast(message, type, persist, hideDelay)">Show Toast</kv-button>
|
|
58
48
|
|
|
59
49
|
<!-- div below is a kludge for storybook docs -->
|
|
60
50
|
<div class="tw-fixed tw-z-toast tw-inset-0 tw-pointer-events-none">
|
|
@@ -64,8 +54,8 @@ const Template = (args, {
|
|
|
64
54
|
</div>
|
|
65
55
|
</div>`,
|
|
66
56
|
methods: {
|
|
67
|
-
showToast(messageInput, type, persistInput, hideDelay
|
|
68
|
-
this.$refs.toastRef.show(messageInput, type, persistInput, hideDelay
|
|
57
|
+
showToast(messageInput, type, persistInput, hideDelay) {
|
|
58
|
+
this.$refs.toastRef.show(messageInput, type, persistInput, hideDelay);
|
|
69
59
|
},
|
|
70
60
|
onClose() {
|
|
71
61
|
},
|
|
@@ -90,18 +80,6 @@ persist.args = { persist: true };
|
|
|
90
80
|
export const hideDelay = Template.bind({});
|
|
91
81
|
hideDelay.args = { hideDelay: 10000 };
|
|
92
82
|
|
|
93
|
-
export const backgroundPrimary = Template.bind({});
|
|
94
|
-
backgroundPrimary.args = { background: 'primary' };
|
|
95
|
-
|
|
96
|
-
export const backgroundSecondary = Template.bind({});
|
|
97
|
-
backgroundSecondary.args = { background: 'secondary' };
|
|
98
|
-
|
|
99
|
-
export const backgroundTertiary = Template.bind({});
|
|
100
|
-
backgroundTertiary.args = { background: 'tertiary' };
|
|
101
|
-
|
|
102
|
-
export const dropShadow = Template.bind({});
|
|
103
|
-
dropShadow.args = { dropShadow: true };
|
|
104
|
-
|
|
105
83
|
const KivaLogoTemplate = (args, {
|
|
106
84
|
argTypes,
|
|
107
85
|
}) => ({
|