sprintify-ui 0.2.27 → 0.2.29
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/sprintify-ui.es.js +511 -493
- package/dist/types/src/stories/PageShow.vue.d.ts +2 -0
- package/dist/types/src/types/TimelineItem.d.ts +2 -0
- package/package.json +1 -1
- package/src/components/BaseTimeline.stories.js +2 -0
- package/src/components/BaseTimeline.vue +4 -1
- package/src/components/BaseTimelineItem.vue +23 -2
- package/src/stories/PageShow.vue +424 -0
- package/src/stories/Show.stories.js +8 -310
- package/src/types/TimelineItem.ts +2 -0
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
|
|
2
|
+
export default _default;
|
package/package.json
CHANGED
|
@@ -29,6 +29,8 @@ const items = [
|
|
|
29
29
|
'Lorem nostrud quis aute elit ea Lorem magna eiusmod ipsum. Eu ipsum eiusmod ad minim adipisicing irure. Fugiat ut adipisicing consequat dolor.',
|
|
30
30
|
color: 'danger',
|
|
31
31
|
date: null,
|
|
32
|
+
onEdit: () => alert('edit'),
|
|
33
|
+
onDelete: () => alert('delete'),
|
|
32
34
|
},
|
|
33
35
|
{
|
|
34
36
|
title: 'Advanced to phone screening by Bethany Blake',
|
|
@@ -8,7 +8,10 @@
|
|
|
8
8
|
v-for="(item, index) in items"
|
|
9
9
|
:key="index"
|
|
10
10
|
>
|
|
11
|
-
<div
|
|
11
|
+
<div
|
|
12
|
+
class="relative"
|
|
13
|
+
:class="[!item.onEdit && !item.onDelete ? 'pb-8' : 'pb-3']"
|
|
14
|
+
>
|
|
12
15
|
<span
|
|
13
16
|
v-if="index != items.length - 1"
|
|
14
17
|
class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-slate-300"
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="relative flex space-x-3">
|
|
2
|
+
<div class="relative group flex space-x-3">
|
|
3
3
|
<div>
|
|
4
4
|
<span
|
|
5
5
|
:class="[
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
:style="colorStyle"
|
|
9
9
|
>
|
|
10
10
|
<BaseIcon
|
|
11
|
-
class="h-
|
|
11
|
+
class="h-[18px] w-[18px]"
|
|
12
12
|
aria-hidden="true"
|
|
13
13
|
:icon="item.icon"
|
|
14
14
|
/>
|
|
@@ -28,6 +28,26 @@
|
|
|
28
28
|
>
|
|
29
29
|
{{ item.description }}
|
|
30
30
|
</p>
|
|
31
|
+
<p
|
|
32
|
+
class="empty:hidden"
|
|
33
|
+
>
|
|
34
|
+
<button
|
|
35
|
+
v-if="item.onEdit"
|
|
36
|
+
type="button"
|
|
37
|
+
class="text-slate-900 opacity-0 group-hover:opacity-100 transition-opacity duration-50 inline underline text-xs mr-3"
|
|
38
|
+
@click="item.onEdit"
|
|
39
|
+
>
|
|
40
|
+
{{ t('sui.edit') }}
|
|
41
|
+
</button>
|
|
42
|
+
<button
|
|
43
|
+
v-if="item.onDelete"
|
|
44
|
+
type="button"
|
|
45
|
+
class="text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity duration-50 inline underline text-xs"
|
|
46
|
+
@click="item.onDelete"
|
|
47
|
+
>
|
|
48
|
+
{{ t('sui.delete') }}
|
|
49
|
+
</button>
|
|
50
|
+
</p>
|
|
31
51
|
</div>
|
|
32
52
|
<div
|
|
33
53
|
v-if="item.date"
|
|
@@ -44,6 +64,7 @@ import { TimelineItem } from '../types/TimelineItem';
|
|
|
44
64
|
import { PropType } from 'vue';
|
|
45
65
|
import { Icon as BaseIcon } from '@iconify/vue';
|
|
46
66
|
import { getColorConfig } from '@/utils/colors';
|
|
67
|
+
import { t } from '@/i18n';
|
|
47
68
|
|
|
48
69
|
const props = defineProps({
|
|
49
70
|
item: {
|
|
@@ -0,0 +1,424 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="bg-slate-100 py-6">
|
|
3
|
+
<BaseContainer size="5xl">
|
|
4
|
+
<BaseHeader
|
|
5
|
+
title="Order #21496"
|
|
6
|
+
subtitle="August 6, 2023 at 1:56 pm from Online Store"
|
|
7
|
+
:max-actions="3"
|
|
8
|
+
:badge="{
|
|
9
|
+
icon: 'heroicons:check-circle-solid',
|
|
10
|
+
label: 'Paid',
|
|
11
|
+
color: 'blue',
|
|
12
|
+
}"
|
|
13
|
+
:actions="[
|
|
14
|
+
{ label: 'Refund', icon: 'heroicons:banknotes', action: () => showAlert('Refund') },
|
|
15
|
+
{ label: 'Edit', icon: 'heroicons:cog', action: () => showAlert('Edit') },
|
|
16
|
+
{ label: 'PDF', icon: 'heroicons:document', action: () => showAlert('PDF') },
|
|
17
|
+
{ label: 'Duplicate', icon: 'heroicons:document-duplicate', action: () => showAlert('Duplicate') },
|
|
18
|
+
{ label: 'Print', icon: 'heroicons:printer', action: () => showAlert('Print') },
|
|
19
|
+
{ label: 'Archive', icon: 'heroicons:trash', action: () => showAlert('Archive') },
|
|
20
|
+
]"
|
|
21
|
+
:breadcrumbs="[{ label: 'Home', to: '/' }, { label: 'Orders', to: '/orders' }, { label: '#21496', to: '/' }]"
|
|
22
|
+
class="mb-1"
|
|
23
|
+
/>
|
|
24
|
+
|
|
25
|
+
<BaseTabs
|
|
26
|
+
class="mb-4"
|
|
27
|
+
size="sm"
|
|
28
|
+
>
|
|
29
|
+
<BaseTabItem to="/">
|
|
30
|
+
General
|
|
31
|
+
</BaseTabItem>
|
|
32
|
+
<BaseTabItem to="/settings">
|
|
33
|
+
Transactions <BaseCounter :count="4" />
|
|
34
|
+
</BaseTabItem>
|
|
35
|
+
<BaseTabItem to="/setup">
|
|
36
|
+
Edit
|
|
37
|
+
</BaseTabItem>
|
|
38
|
+
</BaseTabs>
|
|
39
|
+
|
|
40
|
+
<div class="lg:flex lg:space-x-6 space-y-5 lg:space-y-0 font-light">
|
|
41
|
+
<div class="lg:grow lg:w-8/12">
|
|
42
|
+
<BaseCard class="mb-6">
|
|
43
|
+
<BaseCardRow size="sm">
|
|
44
|
+
<BaseBadge
|
|
45
|
+
color="yellow"
|
|
46
|
+
contrast="low"
|
|
47
|
+
bordered
|
|
48
|
+
icon="heroicons:inbox"
|
|
49
|
+
>
|
|
50
|
+
Unfulfilled (2)
|
|
51
|
+
</BaseBadge>
|
|
52
|
+
</BaseCardRow>
|
|
53
|
+
|
|
54
|
+
<BaseCardRow
|
|
55
|
+
v-for="i in 2"
|
|
56
|
+
:key="i"
|
|
57
|
+
size="sm"
|
|
58
|
+
>
|
|
59
|
+
<div class="flex space-x-3">
|
|
60
|
+
<div class="shrink-0">
|
|
61
|
+
<div class="h-10 w-10 bg-slate-500 rounded-md overflow-hidden">
|
|
62
|
+
<img
|
|
63
|
+
class="h-full w-full object-cover"
|
|
64
|
+
src="https://images.unsplash.com/photo-1568605114967-8130f3a36994?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&h=200&q=80"
|
|
65
|
+
>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
<div class="grow">
|
|
69
|
+
<div class="sm:flex space-y-0.5 sm:space-y-0 sm:space-x-3 text-sm mb-2">
|
|
70
|
+
<a
|
|
71
|
+
href="#"
|
|
72
|
+
class="text-blue-600 grow"
|
|
73
|
+
>Contemporaine Blanche- 2 chiffres (6'' à 24'')</a>
|
|
74
|
+
<p class="min-w-[70px] sm:text-right whitespace-nowrap">
|
|
75
|
+
$ 1,000.00 x 1
|
|
76
|
+
</p>
|
|
77
|
+
<p class="min-w-[70px] sm:text-right whitespace-nowrap">
|
|
78
|
+
$ 1,000.00
|
|
79
|
+
</p>
|
|
80
|
+
</div>
|
|
81
|
+
<div class="space-y-1">
|
|
82
|
+
<p class="text-xs text-slate-600">
|
|
83
|
+
SKU: 5f918d672028b
|
|
84
|
+
</p>
|
|
85
|
+
<p class="text-xs text-slate-600">
|
|
86
|
+
<span class="text-slate-500">GPO</span>: 97829
|
|
87
|
+
</p>
|
|
88
|
+
<p class="text-xs text-slate-600">
|
|
89
|
+
<span class="text-slate-500">Numéro de porte</span>: 66
|
|
90
|
+
</p>
|
|
91
|
+
<p class="text-xs text-slate-600">
|
|
92
|
+
<span class="text-slate-500">Taille</span>: 6"
|
|
93
|
+
</p>
|
|
94
|
+
<p class="text-xs text-slate-600">
|
|
95
|
+
<span class="text-slate-500">Couleur</span>: Blanc
|
|
96
|
+
</p>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
</BaseCardRow>
|
|
101
|
+
<BaseCardRow size="sm">
|
|
102
|
+
<div class="flex justify-end gap-2">
|
|
103
|
+
<button
|
|
104
|
+
type="button"
|
|
105
|
+
class="btn btn-xs"
|
|
106
|
+
>
|
|
107
|
+
Fulfill items
|
|
108
|
+
</button>
|
|
109
|
+
<button
|
|
110
|
+
type="button"
|
|
111
|
+
class="btn btn-xs btn-primary"
|
|
112
|
+
>
|
|
113
|
+
Create shipping label
|
|
114
|
+
</button>
|
|
115
|
+
</div>
|
|
116
|
+
</BaseCardRow>
|
|
117
|
+
</BaseCard>
|
|
118
|
+
|
|
119
|
+
<BaseCard class="mb-6">
|
|
120
|
+
<BaseCardRow size="sm">
|
|
121
|
+
<BaseBadge
|
|
122
|
+
color="green"
|
|
123
|
+
contrast="low"
|
|
124
|
+
bordered
|
|
125
|
+
icon="heroicons:banknotes"
|
|
126
|
+
>
|
|
127
|
+
Paid
|
|
128
|
+
</BaseBadge>
|
|
129
|
+
</BaseCardRow>
|
|
130
|
+
<BaseCardRow size="sm">
|
|
131
|
+
<table class="text-sm leading-relaxed w-full">
|
|
132
|
+
<tr>
|
|
133
|
+
<td>Subtotal</td>
|
|
134
|
+
<td class="text-slate-600">
|
|
135
|
+
2 items
|
|
136
|
+
</td>
|
|
137
|
+
<td class="text-right whitespace-nowrap">
|
|
138
|
+
$ 1,000.00
|
|
139
|
+
</td>
|
|
140
|
+
</tr>
|
|
141
|
+
<tr>
|
|
142
|
+
<td>Shipping</td>
|
|
143
|
+
<td class="text-slate-600">
|
|
144
|
+
Standard
|
|
145
|
+
</td>
|
|
146
|
+
<td class="text-right whitespace-nowrap">
|
|
147
|
+
$ 0.00
|
|
148
|
+
</td>
|
|
149
|
+
</tr>
|
|
150
|
+
<tr>
|
|
151
|
+
<td>Taxes</td>
|
|
152
|
+
<td class="text-slate-600">
|
|
153
|
+
GST
|
|
154
|
+
</td>
|
|
155
|
+
<td class="text-right whitespace-nowrap">
|
|
156
|
+
$ 0.00
|
|
157
|
+
</td>
|
|
158
|
+
</tr>
|
|
159
|
+
<tr>
|
|
160
|
+
<td class="font-semibold">
|
|
161
|
+
Total
|
|
162
|
+
</td>
|
|
163
|
+
<td />
|
|
164
|
+
<td class="text-right font-semibold whitespace-nowrap">
|
|
165
|
+
$ 1,000.00
|
|
166
|
+
</td>
|
|
167
|
+
</tr>
|
|
168
|
+
<tr>
|
|
169
|
+
<td colspan="3">
|
|
170
|
+
<div class="border-t border-slate-300 my-4" />
|
|
171
|
+
</td>
|
|
172
|
+
</tr>
|
|
173
|
+
<tr>
|
|
174
|
+
<td>Paid by customer</td>
|
|
175
|
+
<td />
|
|
176
|
+
<td class="text-right">
|
|
177
|
+
$ 1,000.00
|
|
178
|
+
</td>
|
|
179
|
+
</tr>
|
|
180
|
+
</table>
|
|
181
|
+
</BaseCardRow>
|
|
182
|
+
</BaseCard>
|
|
183
|
+
|
|
184
|
+
<div>
|
|
185
|
+
<h2 class="font-semibold text-sm mb-4">
|
|
186
|
+
Timeline
|
|
187
|
+
</h2>
|
|
188
|
+
<BaseTimeline :items="timelineItems" />
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
|
|
192
|
+
<div class="lg:shrink-0 lg:w-4/12 space-y-4">
|
|
193
|
+
<BaseCard>
|
|
194
|
+
<BaseCardRow size="sm">
|
|
195
|
+
<div class="flex mb-6">
|
|
196
|
+
<div class="flex-grow">
|
|
197
|
+
<h2 class="font-medium mb-2 text-sm">
|
|
198
|
+
Notes
|
|
199
|
+
</h2>
|
|
200
|
+
<p class="text-slate-500 text-xs">
|
|
201
|
+
No notes from customer
|
|
202
|
+
</p>
|
|
203
|
+
</div>
|
|
204
|
+
<div class="shrink-0">
|
|
205
|
+
<button
|
|
206
|
+
type="button"
|
|
207
|
+
class="btn btn-white p-2"
|
|
208
|
+
>
|
|
209
|
+
<BaseIcon icon="heroicons:pencil-solid" />
|
|
210
|
+
</button>
|
|
211
|
+
</div>
|
|
212
|
+
</div>
|
|
213
|
+
|
|
214
|
+
<div class="flex">
|
|
215
|
+
<div class="flex-grow">
|
|
216
|
+
<h2 class="font-medium mb-2 text-sm">
|
|
217
|
+
Additional details
|
|
218
|
+
</h2>
|
|
219
|
+
<p class="text-xs">
|
|
220
|
+
language: fr
|
|
221
|
+
</p>
|
|
222
|
+
</div>
|
|
223
|
+
<div class="shrink-0">
|
|
224
|
+
<button
|
|
225
|
+
type="button"
|
|
226
|
+
class="btn btn-white p-2"
|
|
227
|
+
>
|
|
228
|
+
<BaseIcon icon="heroicons:pencil-solid" />
|
|
229
|
+
</button>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
</BaseCardRow>
|
|
233
|
+
</BaseCard>
|
|
234
|
+
|
|
235
|
+
<BaseCard>
|
|
236
|
+
<BaseCardRow size="sm">
|
|
237
|
+
<div class="space-y-4">
|
|
238
|
+
<div>
|
|
239
|
+
<h2 class="font-medium mb-2 text-sm">
|
|
240
|
+
Customer
|
|
241
|
+
</h2>
|
|
242
|
+
<a
|
|
243
|
+
href="#"
|
|
244
|
+
class="text-blue-600 text-sm"
|
|
245
|
+
>John Doe</a>
|
|
246
|
+
<br>
|
|
247
|
+
<a
|
|
248
|
+
href="#"
|
|
249
|
+
class="text-blue-600 text-sm"
|
|
250
|
+
>2 orders</a>
|
|
251
|
+
</div>
|
|
252
|
+
|
|
253
|
+
<div>
|
|
254
|
+
<h2 class="font-medium mb-2 text-sm">
|
|
255
|
+
Contact information
|
|
256
|
+
</h2>
|
|
257
|
+
<div class="flex justify-between">
|
|
258
|
+
<a
|
|
259
|
+
href="mailto:john.doe@witify.io"
|
|
260
|
+
class="text-blue-600 text-sm"
|
|
261
|
+
>john.doe@witify.io</a>
|
|
262
|
+
<BaseClipboard
|
|
263
|
+
value="john.doe@witify.io"
|
|
264
|
+
class="shrink-0"
|
|
265
|
+
>
|
|
266
|
+
<BaseIcon
|
|
267
|
+
icon="heroicons:clipboard-solid"
|
|
268
|
+
class="text-slate-600"
|
|
269
|
+
/>
|
|
270
|
+
</BaseClipboard>
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
|
|
274
|
+
<div>
|
|
275
|
+
<h2 class="font-medium mb-2 text-sm">
|
|
276
|
+
Shipping address
|
|
277
|
+
</h2>
|
|
278
|
+
<div class="flex justify-between items-start">
|
|
279
|
+
<div>
|
|
280
|
+
<p class="text-sm mb-1">
|
|
281
|
+
Philippe Lamarche<br>
|
|
282
|
+
Gestion Philippe Lamarche Inc<br>
|
|
283
|
+
250 Rue Westgate<br>
|
|
284
|
+
Rosemère QC J7A 2E9<br>
|
|
285
|
+
Canada<br>
|
|
286
|
+
(514) 618-9961
|
|
287
|
+
</p>
|
|
288
|
+
<a
|
|
289
|
+
href="#"
|
|
290
|
+
class="text-blue-600 text-sm underline"
|
|
291
|
+
>View map</a>
|
|
292
|
+
</div>
|
|
293
|
+
<BaseClipboard
|
|
294
|
+
value="john.doe@witify.io"
|
|
295
|
+
class="shrink-0"
|
|
296
|
+
>
|
|
297
|
+
<BaseIcon
|
|
298
|
+
icon="heroicons:clipboard-solid"
|
|
299
|
+
class="text-slate-600"
|
|
300
|
+
/>
|
|
301
|
+
</BaseClipboard>
|
|
302
|
+
</div>
|
|
303
|
+
</div>
|
|
304
|
+
</div>
|
|
305
|
+
</BaseCardRow>
|
|
306
|
+
</BaseCard>
|
|
307
|
+
|
|
308
|
+
<BaseCard>
|
|
309
|
+
<BaseCardRow size="sm">
|
|
310
|
+
<div>
|
|
311
|
+
<h2 class="font-medium mb-3 text-sm">
|
|
312
|
+
Conversion Summary
|
|
313
|
+
</h2>
|
|
314
|
+
|
|
315
|
+
<div class="space-y-1.5 mb-2">
|
|
316
|
+
<div class="flex space-x-2 items-center justify-between">
|
|
317
|
+
<BaseIcon
|
|
318
|
+
icon="heroicons:inbox-arrow-down-solid"
|
|
319
|
+
class="text-slate-600 shrink-0"
|
|
320
|
+
/>
|
|
321
|
+
<div class="grow">
|
|
322
|
+
<p class="text-sm">
|
|
323
|
+
This is their 2nd order
|
|
324
|
+
</p>
|
|
325
|
+
</div>
|
|
326
|
+
</div>
|
|
327
|
+
|
|
328
|
+
<div class="flex space-x-2 items-center justify-between">
|
|
329
|
+
<BaseIcon
|
|
330
|
+
icon="heroicons:eye-solid"
|
|
331
|
+
class="text-slate-600 shrink-0"
|
|
332
|
+
/>
|
|
333
|
+
<div class="grow">
|
|
334
|
+
<p class="text-sm">
|
|
335
|
+
1st session from Google
|
|
336
|
+
</p>
|
|
337
|
+
</div>
|
|
338
|
+
</div>
|
|
339
|
+
|
|
340
|
+
<div class="flex space-x-2 items-center justify-between">
|
|
341
|
+
<BaseIcon
|
|
342
|
+
icon="heroicons:chart-bar-square-solid"
|
|
343
|
+
class="text-slate-600 shrink-0"
|
|
344
|
+
/>
|
|
345
|
+
<div class="grow">
|
|
346
|
+
<p class="text-sm">
|
|
347
|
+
1 session over 1 day
|
|
348
|
+
</p>
|
|
349
|
+
</div>
|
|
350
|
+
</div>
|
|
351
|
+
</div>
|
|
352
|
+
|
|
353
|
+
<a
|
|
354
|
+
href="#"
|
|
355
|
+
class="text-blue-600 text-sm underline"
|
|
356
|
+
>View conversion details</a>
|
|
357
|
+
</div>
|
|
358
|
+
</BaseCardRow>
|
|
359
|
+
</BaseCard>
|
|
360
|
+
</div>
|
|
361
|
+
</div>
|
|
362
|
+
</BaseContainer>
|
|
363
|
+
|
|
364
|
+
<BaseAppNotifications />
|
|
365
|
+
<BaseAppDialogs />
|
|
366
|
+
</div>
|
|
367
|
+
</template>
|
|
368
|
+
|
|
369
|
+
<script lang="ts" setup>
|
|
370
|
+
import { useNotificationsStore } from '..';
|
|
371
|
+
|
|
372
|
+
import BaseCard from '@/components/BaseCard.vue';
|
|
373
|
+
import BaseCardRow from '@/components/BaseCardRow.vue';
|
|
374
|
+
import BaseHeader from '@/components/BaseHeader.vue';
|
|
375
|
+
import BaseTabs from '@/components/BaseTabs.vue';
|
|
376
|
+
import BaseBadge from '@/components/BaseBadge.vue';
|
|
377
|
+
import BaseCounter from '@/components/BaseCounter.vue';
|
|
378
|
+
import BaseTabItem from '@/components/BaseTabItem.vue';
|
|
379
|
+
import BaseTimeline from '@/components/BaseTimeline.vue';
|
|
380
|
+
import { BaseIcon } from '../components/index';
|
|
381
|
+
import BaseContainer from '@/components/BaseContainer.vue';
|
|
382
|
+
import BaseClipboard from '@/components/BaseClipboard.vue';
|
|
383
|
+
import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
|
|
384
|
+
import BaseAppDialogs from '@/components/BaseAppDialogs.vue';
|
|
385
|
+
|
|
386
|
+
const timelineItems = [
|
|
387
|
+
{
|
|
388
|
+
title: 'Order placed',
|
|
389
|
+
description: 'Philippe Lamarche placed this order on Online Store (checkout #36886026060090).',
|
|
390
|
+
icon: 'heroicons:inbox-solid',
|
|
391
|
+
color: 'success',
|
|
392
|
+
date: '1:56 PM',
|
|
393
|
+
},
|
|
394
|
+
{
|
|
395
|
+
title: 'Confirmation created',
|
|
396
|
+
description: 'Confirmation #X9WH46CK5 was generated for this order.',
|
|
397
|
+
icon: 'heroicons:check-circle-solid',
|
|
398
|
+
color: null,
|
|
399
|
+
date: '1:56 PM',
|
|
400
|
+
},
|
|
401
|
+
{
|
|
402
|
+
title: 'Payment captured',
|
|
403
|
+
description: 'Payment of $1,000.00 was captured for this order.',
|
|
404
|
+
icon: 'heroicons:credit-card-solid',
|
|
405
|
+
color: null,
|
|
406
|
+
date: '1:56 PM',
|
|
407
|
+
},
|
|
408
|
+
{
|
|
409
|
+
title: 'Order fulfilled',
|
|
410
|
+
description: 'Order #21496 was fulfilled.',
|
|
411
|
+
icon: 'heroicons:check-circle-solid',
|
|
412
|
+
color: null,
|
|
413
|
+
date: '3:43 PM',
|
|
414
|
+
},
|
|
415
|
+
];
|
|
416
|
+
|
|
417
|
+
function showAlert(text: string) {
|
|
418
|
+
useNotificationsStore().push({
|
|
419
|
+
title: text,
|
|
420
|
+
text: text,
|
|
421
|
+
color: 'success'
|
|
422
|
+
});
|
|
423
|
+
}
|
|
424
|
+
</script>
|