@citizenplane/pimp 9.16.1 → 9.16.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/dist/pimp.es.js +1241 -1201
- package/dist/pimp.umd.js +1 -1
- package/package.json +1 -1
- package/src/components/CpToast.vue +23 -2
- package/src/stories/CpToast.stories.ts +2 -0
package/package.json
CHANGED
|
@@ -20,9 +20,15 @@
|
|
|
20
20
|
:color="getButtonColor(message.severity)"
|
|
21
21
|
is-square
|
|
22
22
|
size="sm"
|
|
23
|
-
@click="message.primaryAction.onClick"
|
|
23
|
+
@click="handleActionClick(message.primaryAction.onClick, closeCallback)"
|
|
24
24
|
>
|
|
25
|
+
<template v-if="message.primaryAction.leadingIcon" #leading-icon>
|
|
26
|
+
<cp-icon :type="message.primaryAction.leadingIcon" />
|
|
27
|
+
</template>
|
|
25
28
|
{{ message.primaryAction.label }}
|
|
29
|
+
<template v-if="message.primaryAction.trailingIcon" #trailing-icon>
|
|
30
|
+
<cp-icon :type="message.primaryAction.trailingIcon" />
|
|
31
|
+
</template>
|
|
26
32
|
</cp-button>
|
|
27
33
|
<cp-button
|
|
28
34
|
v-if="message.secondaryAction"
|
|
@@ -31,9 +37,15 @@
|
|
|
31
37
|
:color="getButtonColor(message.severity)"
|
|
32
38
|
is-square
|
|
33
39
|
size="sm"
|
|
34
|
-
@click="message.secondaryAction.onClick"
|
|
40
|
+
@click="handleActionClick(message.secondaryAction.onClick, closeCallback)"
|
|
35
41
|
>
|
|
42
|
+
<template v-if="message.secondaryAction.leadingIcon" #leading-icon>
|
|
43
|
+
<cp-icon :type="message.secondaryAction.leadingIcon" />
|
|
44
|
+
</template>
|
|
36
45
|
{{ message.secondaryAction.label }}
|
|
46
|
+
<template v-if="message.secondaryAction.trailingIcon" #trailing-icon>
|
|
47
|
+
<cp-icon :type="message.secondaryAction.trailingIcon" />
|
|
48
|
+
</template>
|
|
37
49
|
</cp-button>
|
|
38
50
|
</div>
|
|
39
51
|
<div
|
|
@@ -60,11 +72,15 @@ interface Message {
|
|
|
60
72
|
life?: number
|
|
61
73
|
primaryAction?: {
|
|
62
74
|
label: string
|
|
75
|
+
leadingIcon?: string
|
|
63
76
|
onClick: VoidFunction
|
|
77
|
+
trailingIcon?: string
|
|
64
78
|
}
|
|
65
79
|
secondaryAction?: {
|
|
66
80
|
label: string
|
|
81
|
+
leadingIcon?: string
|
|
67
82
|
onClick: VoidFunction
|
|
83
|
+
trailingIcon?: string
|
|
68
84
|
}
|
|
69
85
|
severity: CpToastTypes
|
|
70
86
|
showTimer?: boolean
|
|
@@ -106,6 +122,11 @@ const getButtonColor = (severity: string) => {
|
|
|
106
122
|
const hasActions = (message: Message) => !!message.primaryAction || !!message.secondaryAction
|
|
107
123
|
|
|
108
124
|
const getTimerBarStyle = (life: number) => ({ animationDuration: `${life}ms` })
|
|
125
|
+
|
|
126
|
+
const handleActionClick = (onClick: VoidFunction, closeCallback: VoidFunction) => {
|
|
127
|
+
onClick()
|
|
128
|
+
closeCallback()
|
|
129
|
+
}
|
|
109
130
|
</script>
|
|
110
131
|
|
|
111
132
|
<style lang="scss">
|
|
@@ -175,12 +175,14 @@ export const WithActions: Story = {
|
|
|
175
175
|
detail: 'This is a cpToast description.',
|
|
176
176
|
primaryAction: {
|
|
177
177
|
label: 'Primary action',
|
|
178
|
+
leadingIcon: 'user',
|
|
178
179
|
onClick: () => {
|
|
179
180
|
console.log('Primary action clicked')
|
|
180
181
|
},
|
|
181
182
|
},
|
|
182
183
|
secondaryAction: {
|
|
183
184
|
label: 'Secondary action',
|
|
185
|
+
trailingIcon: 'arrow-right',
|
|
184
186
|
onClick: () => {
|
|
185
187
|
console.log('Secondary action clicked')
|
|
186
188
|
},
|