@saasicat/ui-vue 0.18.0 → 0.19.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/dist/{chunk-CC4WK3DC.js → chunk-DPTIOQXX.js} +2 -4
- package/dist/{chunk-VRCVJTY4.js → chunk-ORX3ZG47.js} +1 -1
- package/dist/{chunk-Y5MWMWMD.js → chunk-RVG6LQHL.js} +1 -1
- package/dist/client/index.cjs +2 -4
- package/dist/client/index.js +2 -2
- package/dist/index.cjs +4 -6
- package/dist/index.js +3 -3
- package/dist/quasar/index.cjs +3 -0
- package/dist/quasar/index.js +2 -2
- package/package.json +2 -2
- package/src/client/i18n/format.ts +7 -4
- package/src/components/dialogs/PilotCreateDialog.vue +15 -188
- package/src/components/dialogs/PilotEditDialog.vue +51 -233
- package/src/components/dialogs/PromoCodeCreateDialog.vue +19 -560
- package/src/components/dialogs/PromoCodeDialogFields.vue +666 -0
- package/src/components/dialogs/PromoCodeEditDialog.vue +22 -570
- package/src/components/dialogs/pilot-dialog.css +222 -0
|
@@ -4,18 +4,18 @@
|
|
|
4
4
|
@update:model-value="emit('update:modelValue', $event)"
|
|
5
5
|
persistent
|
|
6
6
|
>
|
|
7
|
-
<q-card class="
|
|
8
|
-
<q-card-section class="
|
|
7
|
+
<q-card class="pl-dlg">
|
|
8
|
+
<q-card-section class="pl-dlg__head">
|
|
9
9
|
<div>
|
|
10
|
-
<div class="
|
|
11
|
-
<div class="
|
|
10
|
+
<div class="pl-dlg__title">{{ msg.editDialog.title }}</div>
|
|
11
|
+
<div class="pl-dlg__sub" v-if="row">
|
|
12
12
|
<strong>{{ row.tenant.name }}</strong>
|
|
13
|
-
<span class="
|
|
13
|
+
<span class="pl-dlg__sep">·</span>
|
|
14
14
|
<code>{{ row.tenant.slug }}</code>
|
|
15
15
|
</div>
|
|
16
16
|
</div>
|
|
17
17
|
<q-btn
|
|
18
|
-
class="
|
|
18
|
+
class="pl-dlg__close"
|
|
19
19
|
flat
|
|
20
20
|
dense
|
|
21
21
|
round
|
|
@@ -25,62 +25,62 @@
|
|
|
25
25
|
/>
|
|
26
26
|
</q-card-section>
|
|
27
27
|
|
|
28
|
-
<q-card-section class="
|
|
28
|
+
<q-card-section class="pl-dlg__body">
|
|
29
29
|
<!-- Section 1: Plan -->
|
|
30
|
-
<section class="
|
|
31
|
-
<header class="
|
|
32
|
-
<span class="
|
|
30
|
+
<section class="pl-section">
|
|
31
|
+
<header class="pl-section__head">
|
|
32
|
+
<span class="pl-section__num">1</span>
|
|
33
33
|
<div>
|
|
34
|
-
<div class="
|
|
35
|
-
<div class="
|
|
34
|
+
<div class="pl-section__title">{{ msg.form.planLabel }}</div>
|
|
35
|
+
<div class="pl-section__sub">{{ msg.editDialog.sectionPlanSub }}</div>
|
|
36
36
|
</div>
|
|
37
37
|
</header>
|
|
38
|
-
<div class="
|
|
38
|
+
<div class="pl-plan-select">
|
|
39
39
|
<button
|
|
40
40
|
v-for="p in effectivePlanOptions"
|
|
41
41
|
:key="p.value"
|
|
42
42
|
type="button"
|
|
43
|
-
class="
|
|
44
|
-
:class="{ '
|
|
43
|
+
class="pl-plan-opt"
|
|
44
|
+
:class="{ 'pl-plan-opt--active': form.plan === p.value }"
|
|
45
45
|
@click="form.plan = p.value"
|
|
46
46
|
>
|
|
47
47
|
<span
|
|
48
|
-
class="
|
|
48
|
+
class="pl-plan-opt__dot"
|
|
49
49
|
:style="{ background: p.color ?? '#94a3b8' }"
|
|
50
50
|
/>
|
|
51
|
-
<div class="
|
|
52
|
-
<span class="
|
|
53
|
-
<span class="
|
|
51
|
+
<div class="pl-plan-opt__text">
|
|
52
|
+
<span class="pl-plan-opt__key">{{ p.value }}</span>
|
|
53
|
+
<span class="pl-plan-opt__label">{{ p.label }}</span>
|
|
54
54
|
</div>
|
|
55
55
|
<q-icon
|
|
56
56
|
v-if="form.plan === p.value"
|
|
57
57
|
name="check"
|
|
58
58
|
size="16px"
|
|
59
|
-
class="
|
|
59
|
+
class="pl-plan-opt__check"
|
|
60
60
|
/>
|
|
61
61
|
</button>
|
|
62
62
|
</div>
|
|
63
63
|
</section>
|
|
64
64
|
|
|
65
65
|
<!-- Section 2: End date -->
|
|
66
|
-
<section class="
|
|
67
|
-
<header class="
|
|
68
|
-
<span class="
|
|
66
|
+
<section class="pl-section">
|
|
67
|
+
<header class="pl-section__head">
|
|
68
|
+
<span class="pl-section__num">2</span>
|
|
69
69
|
<div>
|
|
70
|
-
<div class="
|
|
70
|
+
<div class="pl-section__title">
|
|
71
71
|
{{ msg.editDialog.sectionEndDate }}
|
|
72
72
|
</div>
|
|
73
|
-
<div class="
|
|
73
|
+
<div class="pl-section__sub">
|
|
74
74
|
{{ msg.editDialog.sectionEndDateSub }}
|
|
75
75
|
</div>
|
|
76
76
|
</div>
|
|
77
77
|
</header>
|
|
78
|
-
<div class="
|
|
79
|
-
<input v-model="form.endsAt" class="
|
|
78
|
+
<div class="pl-end-row">
|
|
79
|
+
<input v-model="form.endsAt" class="pl-input" type="date" />
|
|
80
80
|
<button
|
|
81
81
|
v-if="form.endsAt"
|
|
82
82
|
type="button"
|
|
83
|
-
class="
|
|
83
|
+
class="pl-btn-mini"
|
|
84
84
|
:title="msg.editDialog.clearDateTitle"
|
|
85
85
|
@click="form.endsAt = ''"
|
|
86
86
|
>
|
|
@@ -88,12 +88,12 @@
|
|
|
88
88
|
{{ common.unlimited }}
|
|
89
89
|
</button>
|
|
90
90
|
</div>
|
|
91
|
-
<div class="
|
|
91
|
+
<div class="pl-end-presets">
|
|
92
92
|
<button
|
|
93
93
|
v-for="p in presetEnds"
|
|
94
94
|
:key="p.days"
|
|
95
95
|
type="button"
|
|
96
|
-
class="
|
|
96
|
+
class="pl-preset-btn"
|
|
97
97
|
@click="setEndsAtDays(p.days)"
|
|
98
98
|
>
|
|
99
99
|
+{{ p.label }}
|
|
@@ -102,26 +102,26 @@
|
|
|
102
102
|
</section>
|
|
103
103
|
|
|
104
104
|
<!-- Section 3: Note -->
|
|
105
|
-
<section class="
|
|
106
|
-
<header class="
|
|
107
|
-
<span class="
|
|
105
|
+
<section class="pl-section">
|
|
106
|
+
<header class="pl-section__head">
|
|
107
|
+
<span class="pl-section__num">3</span>
|
|
108
108
|
<div>
|
|
109
|
-
<div class="
|
|
110
|
-
<div class="
|
|
109
|
+
<div class="pl-section__title">{{ msg.editDialog.sectionNote }}</div>
|
|
110
|
+
<div class="pl-section__sub">{{ msg.editDialog.sectionNoteSub }}</div>
|
|
111
111
|
</div>
|
|
112
112
|
</header>
|
|
113
113
|
<textarea
|
|
114
114
|
v-model="form.note"
|
|
115
|
-
class="
|
|
115
|
+
class="pl-input pl-textarea"
|
|
116
116
|
rows="3"
|
|
117
117
|
:placeholder="notePlaceholder"
|
|
118
118
|
/>
|
|
119
119
|
</section>
|
|
120
120
|
|
|
121
|
-
<p v-if="error" class="
|
|
121
|
+
<p v-if="error" class="pl-error">{{ error }}</p>
|
|
122
122
|
</q-card-section>
|
|
123
123
|
|
|
124
|
-
<q-card-actions align="right" class="
|
|
124
|
+
<q-card-actions align="right" class="pl-dlg__foot">
|
|
125
125
|
<q-btn flat :label="common.cancel" v-close-popup :disable="loading" />
|
|
126
126
|
<q-btn
|
|
127
127
|
unelevated
|
|
@@ -329,35 +329,26 @@ async function doSubmit(code: string): Promise<void> {
|
|
|
329
329
|
}
|
|
330
330
|
</script>
|
|
331
331
|
|
|
332
|
+
<style src="./pilot-dialog.css" scoped></style>
|
|
333
|
+
|
|
332
334
|
<style scoped>
|
|
333
|
-
.
|
|
335
|
+
.pl-dlg {
|
|
334
336
|
width: 640px;
|
|
335
337
|
max-width: 96vw;
|
|
336
338
|
}
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
align-items: flex-start;
|
|
340
|
-
gap: 16px;
|
|
341
|
-
padding: 18px 22px 14px;
|
|
342
|
-
border-bottom: 1px solid var(--sa-border, #e2e8f0);
|
|
343
|
-
}
|
|
344
|
-
.ple-dlg__title {
|
|
345
|
-
font-family: var(--sa-font-head, system-ui, sans-serif);
|
|
346
|
-
font-weight: 700;
|
|
347
|
-
font-size: 17px;
|
|
348
|
-
color: var(--sa-heading, #0f172a);
|
|
349
|
-
letter-spacing: -0.015em;
|
|
350
|
-
}
|
|
351
|
-
.ple-dlg__sub {
|
|
339
|
+
|
|
340
|
+
.pl-dlg__sub {
|
|
352
341
|
font-size: 12.5px;
|
|
353
342
|
color: var(--sa-muted, #64748b);
|
|
354
343
|
margin-top: 3px;
|
|
355
344
|
}
|
|
356
|
-
|
|
345
|
+
|
|
346
|
+
.pl-dlg__sep {
|
|
357
347
|
color: #cbd5e1;
|
|
358
348
|
margin: 0 6px;
|
|
359
349
|
}
|
|
360
|
-
|
|
350
|
+
|
|
351
|
+
.pl-dlg__sub code {
|
|
361
352
|
font-family: var(--sa-font-mono, ui-monospace, monospace);
|
|
362
353
|
background: #f1f5f9;
|
|
363
354
|
color: var(--sa-muted-dark, #475569);
|
|
@@ -365,190 +356,17 @@ async function doSubmit(code: string): Promise<void> {
|
|
|
365
356
|
border-radius: 4px;
|
|
366
357
|
font-size: 11.5px;
|
|
367
358
|
}
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
}
|
|
371
|
-
.ple-dlg__body {
|
|
359
|
+
|
|
360
|
+
.pl-dlg__body {
|
|
372
361
|
padding: 20px 22px;
|
|
373
362
|
}
|
|
374
|
-
.ple-dlg__foot {
|
|
375
|
-
border-top: 1px solid var(--sa-border, #e2e8f0);
|
|
376
|
-
background: #fbfbfd;
|
|
377
|
-
padding: 12px 18px;
|
|
378
|
-
}
|
|
379
363
|
|
|
380
|
-
.
|
|
364
|
+
.pl-section {
|
|
381
365
|
margin-bottom: 18px;
|
|
382
366
|
}
|
|
383
|
-
.ple-section:last-of-type {
|
|
384
|
-
margin-bottom: 4px;
|
|
385
|
-
}
|
|
386
|
-
.ple-section__head {
|
|
387
|
-
display: flex;
|
|
388
|
-
align-items: flex-start;
|
|
389
|
-
gap: 12px;
|
|
390
|
-
margin-bottom: 12px;
|
|
391
|
-
padding-bottom: 10px;
|
|
392
|
-
border-bottom: 1px solid #f1f5f9;
|
|
393
|
-
}
|
|
394
|
-
.ple-section__num {
|
|
395
|
-
width: 24px;
|
|
396
|
-
height: 24px;
|
|
397
|
-
background: #eff6ff;
|
|
398
|
-
color: #1d4ed8;
|
|
399
|
-
border-radius: 50%;
|
|
400
|
-
font: 700 12px var(--sa-font-body, system-ui, sans-serif);
|
|
401
|
-
display: grid;
|
|
402
|
-
place-items: center;
|
|
403
|
-
flex: 0 0 auto;
|
|
404
|
-
}
|
|
405
|
-
.ple-section__title {
|
|
406
|
-
font-size: 13.5px;
|
|
407
|
-
font-weight: 700;
|
|
408
|
-
color: var(--sa-heading, #0f172a);
|
|
409
|
-
letter-spacing: -0.005em;
|
|
410
|
-
}
|
|
411
|
-
.ple-section__sub {
|
|
412
|
-
font-size: 11.5px;
|
|
413
|
-
color: #94a3b8;
|
|
414
|
-
margin-top: 2px;
|
|
415
|
-
}
|
|
416
367
|
|
|
417
|
-
.
|
|
418
|
-
width: 100%;
|
|
419
|
-
padding: 9px 12px;
|
|
420
|
-
background: #fff;
|
|
421
|
-
border: 1px solid var(--sa-border, #e2e8f0);
|
|
422
|
-
border-radius: 8px;
|
|
423
|
-
font: 13px var(--sa-font-body, system-ui, sans-serif);
|
|
424
|
-
color: var(--sa-body, #1e293b);
|
|
425
|
-
outline: 0;
|
|
426
|
-
transition:
|
|
427
|
-
border-color 0.12s,
|
|
428
|
-
box-shadow 0.12s;
|
|
429
|
-
}
|
|
430
|
-
.ple-input:focus {
|
|
431
|
-
border-color: var(--sa-primary, #3f6bff);
|
|
432
|
-
box-shadow: 0 0 0 3px rgba(63, 107, 255, 0.12);
|
|
433
|
-
}
|
|
434
|
-
.ple-textarea {
|
|
368
|
+
.pl-textarea {
|
|
435
369
|
resize: vertical;
|
|
436
370
|
min-height: 64px;
|
|
437
371
|
}
|
|
438
|
-
|
|
439
|
-
.ple-plan-select {
|
|
440
|
-
display: flex;
|
|
441
|
-
flex-direction: column;
|
|
442
|
-
gap: 5px;
|
|
443
|
-
}
|
|
444
|
-
.ple-plan-opt {
|
|
445
|
-
display: flex;
|
|
446
|
-
align-items: center;
|
|
447
|
-
gap: 10px;
|
|
448
|
-
padding: 8px 11px;
|
|
449
|
-
background: #fff;
|
|
450
|
-
border: 1px solid var(--sa-border, #e2e8f0);
|
|
451
|
-
border-radius: 8px;
|
|
452
|
-
cursor: pointer;
|
|
453
|
-
text-align: left;
|
|
454
|
-
font-family: var(--sa-font-body, system-ui, sans-serif);
|
|
455
|
-
transition:
|
|
456
|
-
border-color 0.12s,
|
|
457
|
-
background 0.12s;
|
|
458
|
-
}
|
|
459
|
-
.ple-plan-opt:hover {
|
|
460
|
-
border-color: #93c5fd;
|
|
461
|
-
background: #fafbff;
|
|
462
|
-
}
|
|
463
|
-
.ple-plan-opt--active {
|
|
464
|
-
border-color: var(--sa-primary, #2563eb);
|
|
465
|
-
background: #eff6ff;
|
|
466
|
-
box-shadow: 0 0 0 1px var(--sa-primary, #2563eb) inset;
|
|
467
|
-
}
|
|
468
|
-
.ple-plan-opt__dot {
|
|
469
|
-
width: 10px;
|
|
470
|
-
height: 10px;
|
|
471
|
-
border-radius: 50%;
|
|
472
|
-
flex: 0 0 auto;
|
|
473
|
-
}
|
|
474
|
-
.ple-plan-opt__text {
|
|
475
|
-
display: flex;
|
|
476
|
-
flex-direction: column;
|
|
477
|
-
flex: 1;
|
|
478
|
-
min-width: 0;
|
|
479
|
-
}
|
|
480
|
-
.ple-plan-opt__key {
|
|
481
|
-
font: 700 11px var(--sa-font-mono, ui-monospace, monospace);
|
|
482
|
-
letter-spacing: 0.05em;
|
|
483
|
-
color: var(--sa-heading, #0f172a);
|
|
484
|
-
}
|
|
485
|
-
.ple-plan-opt__label {
|
|
486
|
-
font-size: 11px;
|
|
487
|
-
color: var(--sa-muted, #64748b);
|
|
488
|
-
margin-top: 1px;
|
|
489
|
-
}
|
|
490
|
-
.ple-plan-opt__check {
|
|
491
|
-
color: #1d4ed8;
|
|
492
|
-
}
|
|
493
|
-
|
|
494
|
-
.ple-end-row {
|
|
495
|
-
display: flex;
|
|
496
|
-
align-items: center;
|
|
497
|
-
gap: 6px;
|
|
498
|
-
}
|
|
499
|
-
.ple-end-row .ple-input {
|
|
500
|
-
flex: 1;
|
|
501
|
-
}
|
|
502
|
-
.ple-btn-mini {
|
|
503
|
-
display: inline-flex;
|
|
504
|
-
align-items: center;
|
|
505
|
-
gap: 4px;
|
|
506
|
-
padding: 7px 10px;
|
|
507
|
-
background: #fff;
|
|
508
|
-
border: 1px solid var(--sa-border, #e2e8f0);
|
|
509
|
-
border-radius: 7px;
|
|
510
|
-
color: var(--sa-muted-dark, #475569);
|
|
511
|
-
font: 500 11.5px var(--sa-font-body, system-ui, sans-serif);
|
|
512
|
-
cursor: pointer;
|
|
513
|
-
white-space: nowrap;
|
|
514
|
-
}
|
|
515
|
-
.ple-btn-mini:hover {
|
|
516
|
-
background: #f8fafc;
|
|
517
|
-
border-color: #cbd5e1;
|
|
518
|
-
}
|
|
519
|
-
.ple-end-presets {
|
|
520
|
-
display: flex;
|
|
521
|
-
flex-wrap: wrap;
|
|
522
|
-
gap: 5px;
|
|
523
|
-
margin-top: 5px;
|
|
524
|
-
}
|
|
525
|
-
.ple-preset-btn {
|
|
526
|
-
padding: 4px 9px;
|
|
527
|
-
background: #fff;
|
|
528
|
-
border: 1px dashed #cbd5e1;
|
|
529
|
-
border-radius: 999px;
|
|
530
|
-
font: 600 11px var(--sa-font-body, system-ui, sans-serif);
|
|
531
|
-
color: var(--sa-muted-dark, #475569);
|
|
532
|
-
cursor: pointer;
|
|
533
|
-
transition:
|
|
534
|
-
background 0.12s,
|
|
535
|
-
border-color 0.12s,
|
|
536
|
-
color 0.12s;
|
|
537
|
-
}
|
|
538
|
-
.ple-preset-btn:hover {
|
|
539
|
-
background: #eff6ff;
|
|
540
|
-
border-color: #93c5fd;
|
|
541
|
-
border-style: solid;
|
|
542
|
-
color: #1d4ed8;
|
|
543
|
-
}
|
|
544
|
-
|
|
545
|
-
.ple-error {
|
|
546
|
-
background: #fef2f2;
|
|
547
|
-
border: 1px solid #fecaca;
|
|
548
|
-
color: #b91c1c;
|
|
549
|
-
font-size: 13px;
|
|
550
|
-
margin: 12px 0 0;
|
|
551
|
-
padding: 8px 12px;
|
|
552
|
-
border-radius: 8px;
|
|
553
|
-
}
|
|
554
372
|
</style>
|