@saasicat/ui-vue 0.22.2 → 0.23.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.
Files changed (108) hide show
  1. package/README.md +1 -1
  2. package/dist/{chunk-LY52T4N4.js → chunk-TQQMKWN6.js} +58 -1
  3. package/dist/index.cjs +213 -159
  4. package/dist/index.d.cts +2 -2
  5. package/dist/index.d.ts +2 -2
  6. package/dist/index.js +7 -1
  7. package/dist/quasar/index.cjs +116 -20
  8. package/dist/quasar/index.d.cts +48 -3
  9. package/dist/quasar/index.d.ts +48 -3
  10. package/dist/quasar/index.js +58 -3
  11. package/dist/{use-super-admin-i18n-CgTuNi8h.d.cts → use-sa-theme-B5t7oXph.d.cts} +51 -1
  12. package/dist/{use-super-admin-i18n-CHNdsSlm.d.ts → use-sa-theme-OUBlaqgl.d.ts} +51 -1
  13. package/package.json +5 -2
  14. package/src/components/BundleVersionPublishDialog.vue +17 -17
  15. package/src/components/KvBlock.vue +6 -6
  16. package/src/components/MarketingPromotionsTab.vue +78 -78
  17. package/src/components/MfaPromptDialog.vue +2 -2
  18. package/src/components/TenantActionConfirmDialog.vue +5 -5
  19. package/src/components/VersionDiffPreview.vue +18 -18
  20. package/src/components/bundle-editor/BundleCreatePanel.vue +52 -52
  21. package/src/components/bundle-editor/BundleFeaturesEditor.vue +20 -20
  22. package/src/components/bundle-editor/BundlePlanCompatPicker.vue +33 -33
  23. package/src/components/bundle-editor/BundleQuotasEditor.vue +26 -26
  24. package/src/components/bundle-editor/BundleStatusBanner.vue +21 -21
  25. package/src/components/bundle-editor/BundleVersionInlineEditor.vue +48 -48
  26. package/src/components/bundle-editor/BundleVersionStrip.vue +30 -30
  27. package/src/components/dialogs/PilotCreateDialog.vue +20 -20
  28. package/src/components/dialogs/PilotEditDialog.vue +6 -6
  29. package/src/components/dialogs/PromoCodeCreateDialog.vue +9 -9
  30. package/src/components/dialogs/PromoCodeDialogFields.vue +61 -61
  31. package/src/components/dialogs/PromoCodeEditDialog.vue +11 -11
  32. package/src/components/dialogs/pilot-dialog.css +48 -48
  33. package/src/components/plan/PlanCycleToggle.vue +9 -16
  34. package/src/components/plan/PlanGrid.vue +30 -34
  35. package/src/components/plan/PriceSummary.vue +35 -35
  36. package/src/components/plan/PromoCodeInput.vue +26 -26
  37. package/src/components/plan/PublicBundleGrid.vue +32 -28
  38. package/src/components/plan-create-dialog/PlanCreateDialog.vue +49 -49
  39. package/src/components/plan-detail/PlanDetail.vue +172 -156
  40. package/src/components/plan-detail/PlanTitleEdit.vue +11 -11
  41. package/src/components/plan-list/PlanList.vue +98 -77
  42. package/src/components/plan-matrix/PlanMatrix.vue +89 -89
  43. package/src/components/plan-review/PlanReview.vue +60 -56
  44. package/src/components/plan-version-editor/PlanVersionEditor.vue +224 -200
  45. package/src/components/wizard-stepper/WizardStepper.vue +17 -17
  46. package/src/index.ts +1 -0
  47. package/src/pages-standard/AdminLayout.vue +58 -37
  48. package/src/pages-standard/AdminManifestErrorPage.vue +6 -6
  49. package/src/pages-standard/AuditPage.vue +3 -3
  50. package/src/pages-standard/BundlesPage.vue +36 -36
  51. package/src/pages-standard/DashboardPage.vue +17 -17
  52. package/src/pages-standard/DiscoveryPage.vue +55 -49
  53. package/src/pages-standard/EmailHistoryPage.vue +53 -71
  54. package/src/pages-standard/MarketingCatalogPage.vue +226 -218
  55. package/src/pages-standard/PilotsPage.vue +7 -6
  56. package/src/pages-standard/PlatformEmailPage.vue +18 -18
  57. package/src/pages-standard/PromoCodeDetailPage.vue +3 -3
  58. package/src/pages-standard/PromoCodesPage.vue +7 -6
  59. package/src/pages-standard/SuperAdminLoginPage.vue +39 -25
  60. package/src/pages-standard/SuperAdminSetupWizard.vue +44 -33
  61. package/src/pages-standard/TenantDetailPage.vue +7 -7
  62. package/src/pages-standard/TenantsPage.vue +11 -46
  63. package/src/pages-standard/bundles-page/BundleAccordionList.vue +13 -13
  64. package/src/pages-standard/discovery-page/CatalogEntryTransPanel.vue +24 -24
  65. package/src/pages-standard/discovery-page/DiscoveryCapList.vue +22 -22
  66. package/src/pages-standard/discovery-page/DiscoveryFeatureCard.vue +39 -39
  67. package/src/pages-standard/discovery-page/DiscoveryQuotaCard.vue +26 -26
  68. package/src/pages-standard/discovery-page/DiscoveryStatusControl.vue +1 -1
  69. package/src/pages-standard/plan-versions/PlanDiffCard.vue +16 -16
  70. package/src/pages-standard/plan-versions/PlanVersionsDiff.vue +21 -15
  71. package/src/pages-standard/plan-versions/PlanVersionsTimeline.vue +45 -45
  72. package/src/pages-standard/plans-page/PlanBundleOverview.vue +21 -15
  73. package/src/pages-standard/plans-page/PlanPublishDialog.vue +4 -4
  74. package/src/pages-standard/plans-page/PlansPageToast.vue +6 -6
  75. package/src/pages-standard/sa-theme.css +9 -687
  76. package/src/pages-standard/tenants/StatusPill.vue +13 -13
  77. package/src/pages-tenant/LimitsRow.vue +4 -4
  78. package/src/pages-tenant/MySubscriptionBundlesPage.vue +61 -61
  79. package/src/pages-tenant/OnboardingConfigurator.vue +24 -24
  80. package/src/pages-tenant/PackageSnapshotPanel.vue +10 -16
  81. package/src/pages-tenant/PendingVersionBanner.vue +12 -12
  82. package/src/pages-tenant/PlanChangeWizard.vue +20 -27
  83. package/src/pages-tenant/TenantPlanSection.vue +13 -21
  84. package/src/pages-tenant/UsageBar.vue +7 -7
  85. package/src/pages-tenant/tenant-plan-section/BundlePreviewDialog.vue +14 -14
  86. package/src/pages-tenant/tenant-plan-section/TenantBundleStore.vue +10 -10
  87. package/src/pages-tenant/tenant-plan-section/TenantFeatureMatrix.vue +2 -2
  88. package/src/quasar/create-super-admin-app.ts +96 -1
  89. package/src/quasar/dark-bridge.ts +66 -0
  90. package/src/quasar/index.ts +1 -0
  91. package/src/ui/theme/_breakpoints.scss +28 -0
  92. package/src/ui/theme/base.css +50 -0
  93. package/src/ui/theme/components/body.css +23 -0
  94. package/src/ui/theme/components/button.css +158 -0
  95. package/src/ui/theme/components/card.css +48 -0
  96. package/src/ui/theme/components/field.css +38 -0
  97. package/src/ui/theme/components/hero.css +46 -0
  98. package/src/ui/theme/components/paginator.css +63 -0
  99. package/src/ui/theme/components/section.css +67 -0
  100. package/src/ui/theme/components/statistics.css +189 -0
  101. package/src/ui/theme/components/table.css +60 -0
  102. package/src/ui/theme/index.css +42 -0
  103. package/src/ui/theme/tokens.legacy.css +147 -0
  104. package/src/ui/theme/tokens.primitive.css +108 -0
  105. package/src/ui/theme/tokens.scale.css +103 -0
  106. package/src/ui/theme/tokens.semantic.dark.css +173 -0
  107. package/src/ui/theme/tokens.semantic.light.css +212 -0
  108. package/src/vue/use-sa-theme.ts +154 -0
package/src/components/plan-create-dialog/PlanCreateDialog.vue CHANGED
@@ -280,14 +280,14 @@ function onCancel(): void {
280
280
 
281
281
  <style scoped>
282
282
  .pcd-modal {
283
- background: var(--sa-bg-app);
283
+ background: var(--sa-color-bg-app);
284
284
  width: 640px;
285
285
  max-width: 92vw;
286
286
  border-radius: 14px;
287
- box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
287
+ box-shadow: 0 24px 60px var(--sa-shadow-tint-4);
288
288
  overflow: hidden;
289
289
  font-family: var(--sa-font-body);
290
- color: var(--sa-heading);
290
+ color: var(--sa-color-fg-heading);
291
291
  }
292
292
  .pcd-modal * {
293
293
  box-sizing: border-box;
@@ -295,7 +295,7 @@ function onCancel(): void {
295
295
 
296
296
  .pcd-head {
297
297
  padding: 18px 22px;
298
- border-bottom: 1px solid var(--sa-border);
298
+ border-bottom: 1px solid var(--sa-color-border);
299
299
  display: flex;
300
300
  align-items: flex-start;
301
301
  gap: 12px;
@@ -305,13 +305,13 @@ function onCancel(): void {
305
305
  min-width: 0;
306
306
  }
307
307
  .pcd-title {
308
- font-size: 16px;
308
+ font-size: var(--sa-text-lg);
309
309
  font-weight: 700;
310
310
  letter-spacing: -0.01em;
311
311
  }
312
312
  .pcd-sub {
313
- font-size: 12px;
314
- color: var(--sa-muted);
313
+ font-size: var(--sa-text-sm);
314
+ color: var(--sa-color-fg-muted);
315
315
  margin-top: 3px;
316
316
  }
317
317
  .pcd-close {
@@ -320,14 +320,14 @@ function onCancel(): void {
320
320
  border-radius: 6px;
321
321
  background: transparent;
322
322
  border: 0;
323
- color: var(--sa-muted-light);
323
+ color: var(--sa-color-fg-subtle);
324
324
  cursor: pointer;
325
325
  display: grid;
326
326
  place-items: center;
327
327
  }
328
328
  .pcd-close:hover {
329
- background: rgba(15, 23, 42, 0.05);
330
- color: var(--sa-heading);
329
+ background: var(--sa-color-bg-sunken);
330
+ color: var(--sa-color-fg-heading);
331
331
  }
332
332
 
333
333
  .pcd-body {
@@ -355,31 +355,31 @@ function onCancel(): void {
355
355
  margin-bottom: 0;
356
356
  }
357
357
  .pcd-field-label {
358
- font-size: 12px;
358
+ font-size: var(--sa-text-sm);
359
359
  font-weight: 600;
360
- color: #334155;
360
+ color: var(--sa-color-fg-body);
361
361
  display: flex;
362
362
  align-items: center;
363
363
  gap: 6px;
364
364
  margin-bottom: 6px;
365
365
  }
366
366
  .pcd-kbd {
367
- font: 600 10.5px var(--sa-font-mono);
368
- background: var(--sa-border-soft);
369
- color: var(--sa-muted-dark);
367
+ font: 600 var(--sa-text-xs) var(--sa-font-mono);
368
+ background: var(--sa-color-border-soft);
369
+ color: var(--sa-color-fg-secondary);
370
370
  padding: 2px 6px;
371
371
  border-radius: 4px;
372
- border: 1px solid var(--sa-border);
372
+ border: 1px solid var(--sa-color-border);
373
373
  letter-spacing: 0.04em;
374
374
  }
375
375
  .pcd-input {
376
376
  width: 100%;
377
377
  padding: 9px 12px;
378
- background: #fff;
379
- border: 1px solid var(--sa-border);
378
+ background: var(--sa-color-bg-surface);
379
+ border: 1px solid var(--sa-color-border);
380
380
  border-radius: 7px;
381
- font: 13.5px var(--sa-font-body);
382
- color: var(--sa-heading);
381
+ font: var(--sa-text-md) var(--sa-font-body);
382
+ color: var(--sa-color-fg-heading);
383
383
  outline: none;
384
384
  transition:
385
385
  border-color 0.12s,
@@ -391,22 +391,22 @@ function onCancel(): void {
391
391
  line-height: 1.5;
392
392
  }
393
393
  .pcd-input:focus {
394
- border-color: var(--sa-primary);
395
- box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
394
+ border-color: var(--sa-color-accent);
395
+ box-shadow: 0 0 0 3px var(--sa-shadow-tint-3);
396
396
  }
397
397
  .pcd-input--error {
398
- border-color: var(--sa-negative);
398
+ border-color: var(--sa-color-negative);
399
399
  }
400
400
  .pcd-input--error:focus {
401
- box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
401
+ box-shadow: 0 0 0 3px var(--sa-shadow-tint-3);
402
402
  }
403
403
  .pcd-hint {
404
- font-size: 11px;
405
- color: var(--sa-muted-light);
404
+ font-size: var(--sa-text-xs);
405
+ color: var(--sa-color-fg-subtle);
406
406
  margin-top: 4px;
407
407
  }
408
408
  .pcd-hint--error {
409
- color: var(--sa-negative);
409
+ color: var(--sa-color-negative);
410
410
  }
411
411
 
412
412
  .pcd-choice-grid {
@@ -415,11 +415,11 @@ function onCancel(): void {
415
415
  gap: 8px;
416
416
  }
417
417
  .pcd-choice {
418
- border: 1.5px solid var(--sa-border);
418
+ border: 1.5px solid var(--sa-color-border);
419
419
  border-radius: 9px;
420
420
  padding: 12px 14px;
421
421
  cursor: pointer;
422
- background: #fff;
422
+ background: var(--sa-color-bg-surface);
423
423
  text-align: left;
424
424
  transition:
425
425
  border-color 0.12s,
@@ -431,27 +431,27 @@ function onCancel(): void {
431
431
  font-family: inherit;
432
432
  }
433
433
  .pcd-choice:hover {
434
- background: var(--sa-bg-surface-2);
434
+ background: var(--sa-color-bg-sunken);
435
435
  }
436
436
  .pcd-choice--selected {
437
- border-color: var(--sa-primary);
438
- background: #f0f6ff;
439
- box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
437
+ border-color: var(--sa-color-accent);
438
+ background: var(--sa-color-accent-surface);
439
+ box-shadow: 0 0 0 3px var(--sa-shadow-tint-2);
440
440
  }
441
441
  .pcd-choice-title {
442
- font-size: 13px;
442
+ font-size: var(--sa-text-md);
443
443
  font-weight: 600;
444
- color: var(--sa-heading);
444
+ color: var(--sa-color-fg-heading);
445
445
  }
446
446
  .pcd-choice-sub {
447
- font-size: 11.5px;
448
- color: var(--sa-muted);
447
+ font-size: var(--sa-text-sm);
448
+ color: var(--sa-color-fg-muted);
449
449
  }
450
450
 
451
451
  .pcd-foot {
452
452
  padding: 14px 22px;
453
- background: #fbfbfd;
454
- border-top: 1px solid var(--sa-border);
453
+ background: var(--sa-color-bg-surface-raised);
454
+ border-top: 1px solid var(--sa-color-border);
455
455
  display: flex;
456
456
  justify-content: flex-end;
457
457
  gap: 8px;
@@ -462,17 +462,17 @@ function onCancel(): void {
462
462
  gap: 7px;
463
463
  padding: 9px 16px;
464
464
  border-radius: 7px;
465
- font: 500 13px var(--sa-font-body);
465
+ font: 500 var(--sa-text-md) var(--sa-font-body);
466
466
  cursor: pointer;
467
- border: 1px solid var(--sa-border-strong);
468
- background: #fff;
469
- color: var(--sa-heading);
467
+ border: 1px solid var(--sa-color-border-strong);
468
+ background: var(--sa-color-bg-surface);
469
+ color: var(--sa-color-fg-heading);
470
470
  transition:
471
471
  background 0.12s,
472
472
  border-color 0.12s;
473
473
  }
474
474
  .pcd-btn:hover:not(:disabled) {
475
- background: var(--sa-bg-surface-2);
475
+ background: var(--sa-color-bg-sunken);
476
476
  }
477
477
  .pcd-btn:disabled {
478
478
  cursor: not-allowed;
@@ -483,15 +483,15 @@ function onCancel(): void {
483
483
  background: transparent;
484
484
  }
485
485
  .pcd-btn--ghost:hover {
486
- background: rgba(15, 23, 42, 0.05);
486
+ background: var(--sa-color-bg-sunken);
487
487
  }
488
488
  .pcd-btn--primary {
489
- background: var(--sa-primary);
490
- border-color: var(--sa-primary);
491
- color: #fff;
489
+ background: var(--sa-color-accent);
490
+ border-color: var(--sa-color-accent);
491
+ color: var(--sa-color-fg-on-accent);
492
492
  }
493
493
  .pcd-btn--primary:hover:not(:disabled) {
494
- background: var(--sa-primary-strong);
494
+ background: var(--sa-color-accent-strong);
495
495
  }
496
496
  .pcd-ico {
497
497
  display: inline-flex;