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
|
@@ -1,324 +1,22 @@
|
|
|
1
|
-
import
|
|
2
|
-
import BaseHeader from '../components/BaseHeader.vue';
|
|
3
|
-
import BaseTabs from '../components/BaseTabs.vue';
|
|
4
|
-
import BaseTabItem from '../components/BaseTabItem.vue';
|
|
5
|
-
import BaseDescriptionList from '../components/BaseDescriptionList.vue';
|
|
6
|
-
import BaseDescriptionListItem from '../components/BaseDescriptionListItem.vue';
|
|
7
|
-
import BaseCard from '../components/BaseCard.vue';
|
|
8
|
-
import BaseCardRow from '../components/BaseCardRow.vue';
|
|
9
|
-
import BaseBadge from '../components/BaseBadge.vue';
|
|
10
|
-
import BaseCounter from '../components/BaseCounter.vue';
|
|
11
|
-
import BaseClipboard from '../components/BaseClipboard.vue';
|
|
12
|
-
import BaseAppNotifications from '../components/BaseAppNotifications.vue';
|
|
13
|
-
import BaseAppDialogs from '../components/BaseAppDialogs.vue';
|
|
14
|
-
import BaseTimeline from '../components/BaseTimeline.vue';
|
|
15
|
-
import { DateTime } from 'luxon';
|
|
1
|
+
import PageShow from './PageShow.vue';
|
|
16
2
|
|
|
17
3
|
export default {
|
|
18
4
|
title: 'Pages/Show',
|
|
19
|
-
component:
|
|
5
|
+
component: PageShow,
|
|
20
6
|
parameters: {
|
|
21
7
|
layout: 'fullscreen',
|
|
22
8
|
},
|
|
23
9
|
};
|
|
24
10
|
|
|
25
|
-
const templateComponents = {
|
|
26
|
-
BaseContainer,
|
|
27
|
-
BaseHeader,
|
|
28
|
-
BaseTabs,
|
|
29
|
-
BaseTabItem,
|
|
30
|
-
BaseDescriptionList,
|
|
31
|
-
BaseDescriptionListItem,
|
|
32
|
-
BaseCard,
|
|
33
|
-
BaseCardRow,
|
|
34
|
-
BaseBadge,
|
|
35
|
-
BaseAppNotifications,
|
|
36
|
-
BaseAppDialogs,
|
|
37
|
-
BaseCounter,
|
|
38
|
-
BaseClipboard,
|
|
39
|
-
BaseTimeline,
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
const timelineItems = [
|
|
43
|
-
{
|
|
44
|
-
title: 'Order placed',
|
|
45
|
-
description: 'Philippe Lamarche placed this order on Online Store (checkout #36886026060090).',
|
|
46
|
-
icon: 'heroicons:inbox-solid',
|
|
47
|
-
color: null,
|
|
48
|
-
date: '1:56 PM',
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
title: 'Confirmation created',
|
|
52
|
-
description: 'Confirmation #X9WH46CK5 was generated for this order.',
|
|
53
|
-
icon: 'heroicons:check-circle-solid',
|
|
54
|
-
color: null,
|
|
55
|
-
date: '1:56 PM',
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
title: 'Payment captured',
|
|
59
|
-
description: 'Payment of $1,000.00 was captured for this order.',
|
|
60
|
-
icon: 'heroicons:credit-card-solid',
|
|
61
|
-
color: null,
|
|
62
|
-
date: '1:56 PM',
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
title: 'Order fulfilled',
|
|
66
|
-
description: 'Order #21496 was fulfilled.',
|
|
67
|
-
icon: 'heroicons:check-circle-solid',
|
|
68
|
-
color: null,
|
|
69
|
-
date: '3:43 PM',
|
|
70
|
-
},
|
|
71
|
-
];
|
|
72
|
-
|
|
73
|
-
const template = `
|
|
74
|
-
<div class="bg-slate-100 py-6">
|
|
75
|
-
<BaseContainer size="5xl">
|
|
76
|
-
|
|
77
|
-
<BaseHeader
|
|
78
|
-
title="Order #21496"
|
|
79
|
-
subtitle="August 6, 2023 at 1:56 pm from Online Store"
|
|
80
|
-
:maxActions="3"
|
|
81
|
-
:badge="{
|
|
82
|
-
icon: 'heroicons:check-circle-solid',
|
|
83
|
-
label: 'Paid',
|
|
84
|
-
color: 'blue',
|
|
85
|
-
}"
|
|
86
|
-
:actions="[
|
|
87
|
-
{label: 'Refund', icon: 'heroicons:banknotes', action: () => alert('Refund')},
|
|
88
|
-
{label: 'Edit', icon: 'heroicons:cog', action: () => alert('Edit')},
|
|
89
|
-
{label: 'PDF', icon: 'heroicons:document', action: () => alert('PDF')},
|
|
90
|
-
{label: 'Duplicate', icon: 'heroicons:document-duplicate', action: () => alert('Duplicate')},
|
|
91
|
-
{label: 'Print', icon: 'heroicons:printer', action: () => alert('Print')},
|
|
92
|
-
{label: 'Archive', icon: 'heroicons:trash', action: () => alert('Archive')},
|
|
93
|
-
]"
|
|
94
|
-
:breadcrumbs="[{label: 'Home', to: '/'}, {label: 'Orders', to: '/orders'}, {label: '#21496', to: '/'}]"
|
|
95
|
-
class="mb-1"
|
|
96
|
-
></BaseHeader>
|
|
97
|
-
|
|
98
|
-
<BaseTabs class="mb-4" size="sm">
|
|
99
|
-
<BaseTabItem to="/">General</BaseTabItem>
|
|
100
|
-
<BaseTabItem to="/settings">Transactions <BaseCounter :count="4"></BaseCounter></BaseTabItem>
|
|
101
|
-
<BaseTabItem to="/setup">Edit</BaseTabItem>
|
|
102
|
-
</BaseTabs>
|
|
103
|
-
|
|
104
|
-
<div class="lg:flex lg:space-x-6 space-y-5 lg:space-y-0 font-light">
|
|
105
|
-
<div class="lg:grow lg:w-8/12">
|
|
106
|
-
<BaseCard class="mb-6">
|
|
107
|
-
<BaseCardRow size="sm">
|
|
108
|
-
<BaseBadge color="yellow" contrast="low" bordered icon="heroicons:inbox">Unfulfilled (2)</BaseBadge>
|
|
109
|
-
</BaseCardRow>
|
|
110
|
-
|
|
111
|
-
<BaseCardRow size="sm" v-for="i in 2">
|
|
112
|
-
<div class="flex space-x-3">
|
|
113
|
-
<div class="shrink-0">
|
|
114
|
-
<div class="h-10 w-10 bg-slate-500 rounded-md overflow-hidden">
|
|
115
|
-
<img class="h-full w-full object-cover" 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">
|
|
116
|
-
</div>
|
|
117
|
-
</div>
|
|
118
|
-
<div class="grow">
|
|
119
|
-
<div class="sm:flex space-y-0.5 sm:space-y-0 sm:space-x-3 text-sm mb-2">
|
|
120
|
-
<a href="#" class="text-blue-600 grow">Contemporaine Blanche- 2 chiffres (6'' à 24'')</a>
|
|
121
|
-
<p class="min-w-[70px] sm:text-right whitespace-nowrap">$ 1,000.00 x 1</p>
|
|
122
|
-
<p class="min-w-[70px] sm:text-right whitespace-nowrap">$ 1,000.00</p>
|
|
123
|
-
</div>
|
|
124
|
-
<div class="space-y-1">
|
|
125
|
-
<p class="text-xs text-slate-600">SKU: 5f918d672028b</p>
|
|
126
|
-
<p class="text-xs text-slate-600"><span class="text-slate-500">GPO</span>: 97829</p>
|
|
127
|
-
<p class="text-xs text-slate-600"><span class="text-slate-500">Numéro de porte</span>: 66</p>
|
|
128
|
-
<p class="text-xs text-slate-600"><span class="text-slate-500">Taille</span>: 6"</p>
|
|
129
|
-
<p class="text-xs text-slate-600"><span class="text-slate-500">Couleur</span>: Blanc</p>
|
|
130
|
-
</div>
|
|
131
|
-
</div>
|
|
132
|
-
</div>
|
|
133
|
-
</BaseCardRow>
|
|
134
|
-
<BaseCardRow size="sm">
|
|
135
|
-
<div class="flex justify-end gap-2">
|
|
136
|
-
<button type="button" class="btn btn-xs">
|
|
137
|
-
Fulfill items
|
|
138
|
-
</button>
|
|
139
|
-
<button type="button" class="btn btn-xs btn-primary">
|
|
140
|
-
Create shipping label
|
|
141
|
-
</button>
|
|
142
|
-
</div>
|
|
143
|
-
</BaseCardRow>
|
|
144
|
-
</BaseCard>
|
|
145
|
-
|
|
146
|
-
<BaseCard class="mb-6">
|
|
147
|
-
<BaseCardRow size="sm">
|
|
148
|
-
<BaseBadge color="green" contrast="low" bordered icon="heroicons:banknotes">Paid</BaseBadge>
|
|
149
|
-
</BaseCardRow>
|
|
150
|
-
<BaseCardRow size="sm">
|
|
151
|
-
<table class="text-sm leading-relaxed w-full">
|
|
152
|
-
<tr>
|
|
153
|
-
<td>Subtotal</td>
|
|
154
|
-
<td class="text-slate-600">2 items</td>
|
|
155
|
-
<td class="text-right whitespace-nowrap">$ 1,000.00</td>
|
|
156
|
-
</tr>
|
|
157
|
-
<tr>
|
|
158
|
-
<td>Shipping</td>
|
|
159
|
-
<td class="text-slate-600">Standard</td>
|
|
160
|
-
<td class="text-right whitespace-nowrap">$ 0.00</td>
|
|
161
|
-
</tr>
|
|
162
|
-
<tr>
|
|
163
|
-
<td>Taxes</td>
|
|
164
|
-
<td class="text-slate-600">GST</td>
|
|
165
|
-
<td class="text-right whitespace-nowrap">$ 0.00</td>
|
|
166
|
-
</tr>
|
|
167
|
-
<tr>
|
|
168
|
-
<td class="font-semibold">Total</td>
|
|
169
|
-
<td></td>
|
|
170
|
-
<td class="text-right font-semibold whitespace-nowrap">$ 1,000.00</td>
|
|
171
|
-
</tr>
|
|
172
|
-
<tr>
|
|
173
|
-
<td colspan="3">
|
|
174
|
-
<div class="border-t border-slate-300 my-4">
|
|
175
|
-
</td>
|
|
176
|
-
</tr>
|
|
177
|
-
<tr>
|
|
178
|
-
<td>Paid by customer</td>
|
|
179
|
-
<td></td>
|
|
180
|
-
<td class="text-right">$ 1,000.00</td>
|
|
181
|
-
</tr>
|
|
182
|
-
</table>
|
|
183
|
-
|
|
184
|
-
</BaseCardRow>
|
|
185
|
-
</BaseCard>
|
|
186
|
-
|
|
187
|
-
<div>
|
|
188
|
-
<h2 class="font-semibold text-sm mb-4">Timeline</h2>
|
|
189
|
-
<BaseTimeline :items="timelineItems">
|
|
190
|
-
</BaseTimeline>
|
|
191
|
-
</div>
|
|
192
|
-
</div>
|
|
193
|
-
<div class="lg:shrink-0 lg:w-4/12 space-y-4">
|
|
194
|
-
<BaseCard>
|
|
195
|
-
<BaseCardRow size="sm">
|
|
196
|
-
<div class="flex mb-6">
|
|
197
|
-
<div class="flex-grow">
|
|
198
|
-
<h2 class="font-medium mb-2 text-sm">Notes</h2>
|
|
199
|
-
<p class="text-slate-500 text-xs">No notes from customer</p>
|
|
200
|
-
</div>
|
|
201
|
-
<div class="shrink-0">
|
|
202
|
-
<button type="button" class="btn btn-white p-2">
|
|
203
|
-
<BaseIcon icon="heroicons:pencil-solid">
|
|
204
|
-
</button>
|
|
205
|
-
</div>
|
|
206
|
-
</div>
|
|
207
|
-
|
|
208
|
-
<div class="flex">
|
|
209
|
-
<div class="flex-grow">
|
|
210
|
-
<h2 class="font-medium mb-2 text-sm">Additional details</h2>
|
|
211
|
-
<p class="text-xs">language: fr</p>
|
|
212
|
-
</div>
|
|
213
|
-
<div class="shrink-0">
|
|
214
|
-
<button type="button" class="btn btn-white p-2">
|
|
215
|
-
<BaseIcon icon="heroicons:pencil-solid">
|
|
216
|
-
</button>
|
|
217
|
-
</div>
|
|
218
|
-
</div>
|
|
219
|
-
</BaseCardRow>
|
|
220
|
-
</BaseCard>
|
|
221
|
-
|
|
222
|
-
<BaseCard>
|
|
223
|
-
<BaseCardRow size="sm">
|
|
224
|
-
<div class="space-y-4">
|
|
225
|
-
<div>
|
|
226
|
-
<h2 class="font-medium mb-2 text-sm">Customer</h2>
|
|
227
|
-
<a href="#" class="text-blue-600 text-sm">John Doe</a>
|
|
228
|
-
<br>
|
|
229
|
-
<a href="#" class="text-blue-600 text-sm">2 orders</a>
|
|
230
|
-
</div>
|
|
231
|
-
|
|
232
|
-
<div>
|
|
233
|
-
<h2 class="font-medium mb-2 text-sm">Contact information</h2>
|
|
234
|
-
<div class="flex justify-between">
|
|
235
|
-
<a href="mailto:john.doe@witify.io" class="text-blue-600 text-sm">john.doe@witify.io</a>
|
|
236
|
-
<BaseClipboard value="john.doe@witify.io" class="shrink-0">
|
|
237
|
-
<BaseIcon icon="heroicons:clipboard-solid" class="text-slate-600"></BaseIcon>
|
|
238
|
-
</BaseClipboard>
|
|
239
|
-
</div>
|
|
240
|
-
</div>
|
|
241
|
-
|
|
242
|
-
<div>
|
|
243
|
-
<h2 class="font-medium mb-2 text-sm">Shipping address</h2>
|
|
244
|
-
<div class="flex justify-between items-start">
|
|
245
|
-
<div>
|
|
246
|
-
<p class="text-sm mb-1">
|
|
247
|
-
Philippe Lamarche<br>
|
|
248
|
-
Gestion Philippe Lamarche Inc<br>
|
|
249
|
-
250 Rue Westgate<br>
|
|
250
|
-
Rosemère QC J7A 2E9<br>
|
|
251
|
-
Canada<br>
|
|
252
|
-
(514) 618-9961
|
|
253
|
-
</p>
|
|
254
|
-
<a href="#" class="text-blue-600 text-sm underline">View map</a>
|
|
255
|
-
</div>
|
|
256
|
-
<BaseClipboard value="john.doe@witify.io" class="shrink-0">
|
|
257
|
-
<BaseIcon icon="heroicons:clipboard-solid" class="text-slate-600"></BaseIcon>
|
|
258
|
-
</BaseClipboard>
|
|
259
|
-
</div>
|
|
260
|
-
</div>
|
|
261
|
-
</div>
|
|
262
|
-
</BaseCardRow>
|
|
263
|
-
</BaseCard>
|
|
264
|
-
|
|
265
|
-
<BaseCard>
|
|
266
|
-
<BaseCardRow size="sm">
|
|
267
|
-
<div>
|
|
268
|
-
<h2 class="font-medium mb-3 text-sm">Conversion Summary</h2>
|
|
269
|
-
|
|
270
|
-
<div class="space-y-1.5 mb-2">
|
|
271
|
-
|
|
272
|
-
<div class="flex space-x-2 items-center justify-between">
|
|
273
|
-
<BaseIcon icon="heroicons:inbox-arrow-down-solid" class="text-slate-600 shrink-0"></BaseIcon>
|
|
274
|
-
<div class="grow">
|
|
275
|
-
<p class="text-sm">This is their 2nd order</p>
|
|
276
|
-
</div>
|
|
277
|
-
</div>
|
|
278
|
-
|
|
279
|
-
<div class="flex space-x-2 items-center justify-between">
|
|
280
|
-
<BaseIcon icon="heroicons:eye-solid" class="text-slate-600 shrink-0"></BaseIcon>
|
|
281
|
-
<div class="grow">
|
|
282
|
-
<p class="text-sm">1st session from Google</p>
|
|
283
|
-
</div>
|
|
284
|
-
</div>
|
|
285
|
-
|
|
286
|
-
<div class="flex space-x-2 items-center justify-between">
|
|
287
|
-
<BaseIcon icon="heroicons:chart-bar-square-solid" class="text-slate-600 shrink-0"></BaseIcon>
|
|
288
|
-
<div class="grow">
|
|
289
|
-
<p class="text-sm">1 session over 1 day</p>
|
|
290
|
-
</div>
|
|
291
|
-
</div>
|
|
292
|
-
|
|
293
|
-
</div>
|
|
294
|
-
|
|
295
|
-
<a href="#" class="text-blue-600 text-sm underline">View conversion details</a>
|
|
296
|
-
|
|
297
|
-
</div>
|
|
298
|
-
</BaseCardRow>
|
|
299
|
-
</BaseCard>
|
|
300
|
-
</div>
|
|
301
|
-
</div>
|
|
302
|
-
|
|
303
|
-
<BaseAppNotifications></BaseAppNotifications>
|
|
304
|
-
<BaseAppDialogs></BaseAppDialogs>
|
|
305
|
-
|
|
306
|
-
</BaseContainer>
|
|
307
|
-
</div>
|
|
308
|
-
`;
|
|
309
11
|
|
|
310
12
|
const Template = (args) => ({
|
|
311
|
-
components:
|
|
312
|
-
|
|
13
|
+
components: {
|
|
14
|
+
PageShow
|
|
15
|
+
},
|
|
16
|
+
template: `<PageShow></PageShow>`,
|
|
313
17
|
setup() {
|
|
314
|
-
|
|
315
|
-
alert('Cell click: ' + row.id);
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
return { args, onCellClick, DateTime, timelineItems };
|
|
18
|
+
return { args };
|
|
319
19
|
},
|
|
320
20
|
});
|
|
321
21
|
|
|
322
|
-
export const Demo = Template.bind({
|
|
323
|
-
|
|
324
|
-
});
|
|
22
|
+
export const Demo = Template.bind({});
|