@saasicat/ui-vue 0.22.2 → 0.24.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 (119) hide show
  1. package/README.md +1 -1
  2. package/dist/{chunk-LY52T4N4.js → chunk-TQQMKWN6.js} +58 -1
  3. package/dist/{chunk-XMMFN2WJ.js → chunk-VYMTWCTT.js} +51 -1
  4. package/dist/client/index.cjs +57 -0
  5. package/dist/client/index.d.cts +58 -1
  6. package/dist/client/index.d.ts +58 -1
  7. package/dist/client/index.js +15 -1
  8. package/dist/index.cjs +321 -159
  9. package/dist/index.d.cts +67 -4
  10. package/dist/index.d.ts +67 -4
  11. package/dist/index.js +72 -2
  12. package/dist/quasar/index.cjs +116 -20
  13. package/dist/quasar/index.d.cts +48 -3
  14. package/dist/quasar/index.d.ts +48 -3
  15. package/dist/quasar/index.js +58 -3
  16. package/dist/{use-super-admin-i18n-CgTuNi8h.d.cts → use-sa-theme-B5t7oXph.d.cts} +51 -1
  17. package/dist/{use-super-admin-i18n-CHNdsSlm.d.ts → use-sa-theme-OUBlaqgl.d.ts} +51 -1
  18. package/package.json +5 -2
  19. package/src/client/identity-accents.ts +129 -0
  20. package/src/client/index.ts +1 -0
  21. package/src/components/BundleVersionPublishDialog.vue +17 -17
  22. package/src/components/KvBlock.vue +6 -6
  23. package/src/components/MarketingPromotionsTab.vue +84 -80
  24. package/src/components/MfaPromptDialog.vue +2 -2
  25. package/src/components/TenantActionConfirmDialog.vue +5 -5
  26. package/src/components/VersionDiffPreview.vue +18 -18
  27. package/src/components/bundle-editor/BundleCreatePanel.vue +52 -52
  28. package/src/components/bundle-editor/BundleFeaturesEditor.vue +20 -20
  29. package/src/components/bundle-editor/BundlePlanCompatPicker.vue +33 -33
  30. package/src/components/bundle-editor/BundleQuotasEditor.vue +26 -26
  31. package/src/components/bundle-editor/BundleStatusBanner.vue +21 -21
  32. package/src/components/bundle-editor/BundleVersionInlineEditor.vue +49 -49
  33. package/src/components/bundle-editor/BundleVersionStrip.vue +30 -30
  34. package/src/components/dialogs/PilotCreateDialog.vue +20 -20
  35. package/src/components/dialogs/PilotEditDialog.vue +6 -6
  36. package/src/components/dialogs/PromoCodeCreateDialog.vue +9 -9
  37. package/src/components/dialogs/PromoCodeDialogFields.vue +64 -63
  38. package/src/components/dialogs/PromoCodeEditDialog.vue +11 -11
  39. package/src/components/dialogs/pilot-dialog.css +48 -48
  40. package/src/components/plan/PlanCycleToggle.vue +9 -16
  41. package/src/components/plan/PlanGrid.vue +30 -34
  42. package/src/components/plan/PriceSummary.vue +35 -35
  43. package/src/components/plan/PromoCodeInput.vue +26 -26
  44. package/src/components/plan/PublicBundleGrid.vue +32 -28
  45. package/src/components/plan-create-dialog/PlanCreateDialog.vue +50 -50
  46. package/src/components/plan-detail/PlanDetail.vue +178 -157
  47. package/src/components/plan-detail/PlanTitleEdit.vue +11 -11
  48. package/src/components/plan-list/PlanList.vue +116 -100
  49. package/src/components/plan-matrix/PlanMatrix.vue +97 -114
  50. package/src/components/plan-review/PlanReview.vue +61 -57
  51. package/src/components/plan-version-editor/PlanVersionEditor.vue +246 -203
  52. package/src/components/wizard-stepper/WizardStepper.vue +17 -17
  53. package/src/index.ts +1 -0
  54. package/src/pages-standard/AdminLayout.vue +58 -37
  55. package/src/pages-standard/AdminManifestErrorPage.vue +6 -6
  56. package/src/pages-standard/AuditPage.vue +3 -3
  57. package/src/pages-standard/BundlesPage.vue +37 -37
  58. package/src/pages-standard/DashboardPage.vue +22 -19
  59. package/src/pages-standard/DiscoveryPage.vue +55 -49
  60. package/src/pages-standard/EmailHistoryPage.vue +53 -71
  61. package/src/pages-standard/MarketingCatalogPage.vue +245 -221
  62. package/src/pages-standard/PilotsPage.vue +7 -6
  63. package/src/pages-standard/PlatformEmailPage.vue +18 -18
  64. package/src/pages-standard/PromoCodeDetailPage.vue +3 -3
  65. package/src/pages-standard/PromoCodesPage.vue +10 -7
  66. package/src/pages-standard/SuperAdminLoginPage.vue +39 -25
  67. package/src/pages-standard/SuperAdminSetupWizard.vue +44 -33
  68. package/src/pages-standard/TenantDetailPage.vue +7 -7
  69. package/src/pages-standard/TenantsPage.vue +16 -50
  70. package/src/pages-standard/bundles-page/BundleAccordionList.vue +13 -13
  71. package/src/pages-standard/discovery-page/CatalogEntryTransPanel.vue +24 -24
  72. package/src/pages-standard/discovery-page/DiscoveryCapList.vue +22 -22
  73. package/src/pages-standard/discovery-page/DiscoveryFeatureCard.vue +39 -39
  74. package/src/pages-standard/discovery-page/DiscoveryQuotaCard.vue +26 -26
  75. package/src/pages-standard/discovery-page/DiscoveryStatusControl.vue +1 -1
  76. package/src/pages-standard/discovery-page/discovery-ui.ts +10 -7
  77. package/src/pages-standard/marketing-catalog/MarketingCatalogAdmin.vue +2 -5
  78. package/src/pages-standard/plan-versions/PlanDiffCard.vue +27 -20
  79. package/src/pages-standard/plan-versions/PlanVersionsDiff.vue +24 -16
  80. package/src/pages-standard/plan-versions/PlanVersionsTimeline.vue +45 -45
  81. package/src/pages-standard/plans-page/PlanBundleOverview.vue +21 -15
  82. package/src/pages-standard/plans-page/PlanPublishDialog.vue +4 -4
  83. package/src/pages-standard/plans-page/PlansPageToast.vue +6 -6
  84. package/src/pages-standard/sa-theme.css +9 -687
  85. package/src/pages-standard/tenants/StatusPill.vue +13 -13
  86. package/src/pages-standard/tenants/format.ts +11 -12
  87. package/src/pages-tenant/LimitsRow.vue +4 -4
  88. package/src/pages-tenant/MySubscriptionBundlesPage.vue +70 -61
  89. package/src/pages-tenant/OnboardingConfigurator.vue +25 -25
  90. package/src/pages-tenant/PackageSnapshotPanel.vue +10 -16
  91. package/src/pages-tenant/PendingVersionBanner.vue +12 -12
  92. package/src/pages-tenant/PlanChangeWizard.vue +22 -76
  93. package/src/pages-tenant/TenantPlanSection.vue +19 -69
  94. package/src/pages-tenant/UsageBar.vue +7 -7
  95. package/src/pages-tenant/default-i18n.ts +113 -0
  96. package/src/pages-tenant/tenant-plan-section/BundlePreviewDialog.vue +14 -14
  97. package/src/pages-tenant/tenant-plan-section/TenantBundleStore.vue +10 -10
  98. package/src/pages-tenant/tenant-plan-section/TenantFeatureMatrix.vue +2 -2
  99. package/src/quasar/create-super-admin-app.ts +96 -1
  100. package/src/quasar/dark-bridge.ts +66 -0
  101. package/src/quasar/index.ts +1 -0
  102. package/src/ui/theme/_breakpoints.scss +34 -0
  103. package/src/ui/theme/base.css +50 -0
  104. package/src/ui/theme/components/body.css +23 -0
  105. package/src/ui/theme/components/button.css +158 -0
  106. package/src/ui/theme/components/card.css +74 -0
  107. package/src/ui/theme/components/field.css +38 -0
  108. package/src/ui/theme/components/hero.css +46 -0
  109. package/src/ui/theme/components/paginator.css +63 -0
  110. package/src/ui/theme/components/section.css +67 -0
  111. package/src/ui/theme/components/statistics.css +189 -0
  112. package/src/ui/theme/components/table.css +60 -0
  113. package/src/ui/theme/index.css +42 -0
  114. package/src/ui/theme/tokens.legacy.css +147 -0
  115. package/src/ui/theme/tokens.primitive.css +112 -0
  116. package/src/ui/theme/tokens.scale.css +103 -0
  117. package/src/ui/theme/tokens.semantic.dark.css +185 -0
  118. package/src/ui/theme/tokens.semantic.light.css +242 -0
  119. package/src/vue/use-sa-theme.ts +154 -0
package/src/components/plan-review/PlanReview.vue CHANGED
@@ -461,12 +461,12 @@ function onPublish(): void {
461
461
  }
462
462
 
463
463
  .pr-banner {
464
- background: var(--sa-warning-soft);
465
- border: 1px solid var(--sa-amber-border);
466
- color: var(--sa-warning);
464
+ background: var(--sa-color-warning-surface);
465
+ border: 1px solid var(--sa-color-warning-border);
466
+ color: var(--sa-color-warning);
467
467
  border-radius: 8px;
468
468
  padding: 10px 14px;
469
- font-size: 12.5px;
469
+ font-size: var(--sa-text-md);
470
470
  margin-bottom: 14px;
471
471
  }
472
472
 
@@ -482,31 +482,35 @@ function onPublish(): void {
482
482
  gap: 14px;
483
483
  }
484
484
  .pr-card {
485
- background: var(--sa-bg-surface);
486
- border: 1px solid var(--sa-border);
485
+ background: var(--sa-color-bg-surface);
486
+ border: 1px solid var(--sa-color-border);
487
487
  border-radius: 10px;
488
488
  padding: 16px 20px;
489
489
  }
490
490
  .pr-card--regress {
491
- background: var(--sa-warning-soft);
492
- border-color: var(--sa-amber-border);
491
+ background: var(--sa-color-warning-surface);
492
+ border-color: var(--sa-color-warning-border);
493
493
  }
494
494
  .pr-card--impact {
495
- background: linear-gradient(180deg, var(--sa-primary-soft) 0%, var(--sa-bg-surface) 100%);
496
- border-color: var(--sa-primary-border);
495
+ background: linear-gradient(
496
+ 180deg,
497
+ var(--sa-color-accent-surface) 0%,
498
+ var(--sa-color-bg-surface) 100%
499
+ );
500
+ border-color: var(--sa-color-accent-border);
497
501
  }
498
502
  .pr-card-title {
499
- font: 700 14px var(--sa-font-head);
503
+ font: 700 var(--sa-text-lg) var(--sa-font-head);
500
504
  letter-spacing: -0.01em;
501
- color: var(--sa-heading);
505
+ color: var(--sa-color-fg-heading);
502
506
  margin: 0 0 12px;
503
507
  }
504
508
  .pr-req {
505
- color: var(--sa-negative);
509
+ color: var(--sa-color-negative);
506
510
  }
507
511
  .pr-card-hint {
508
- font-size: 11.5px;
509
- color: var(--sa-muted);
512
+ font-size: var(--sa-text-sm);
513
+ color: var(--sa-color-fg-muted);
510
514
  margin: -6px 0 10px;
511
515
  line-height: 1.5;
512
516
  }
@@ -516,27 +520,27 @@ function onPublish(): void {
516
520
  align-items: baseline;
517
521
  gap: 12px;
518
522
  padding: 8px 0;
519
- border-bottom: 1px solid var(--sa-border-soft);
523
+ border-bottom: 1px solid var(--sa-color-border-soft);
520
524
  }
521
525
  .pr-row:last-child {
522
526
  border-bottom: 0;
523
527
  }
524
528
  .pr-label {
525
- font-size: 12px;
526
- color: var(--sa-muted);
529
+ font-size: var(--sa-text-sm);
530
+ color: var(--sa-color-fg-muted);
527
531
  min-width: 130px;
528
532
  }
529
533
  .pr-val {
530
- font-size: 13px;
531
- color: var(--sa-heading);
534
+ font-size: var(--sa-text-md);
535
+ color: var(--sa-color-fg-heading);
532
536
  font-weight: 500;
533
537
  }
534
538
  .pr-missing {
535
- color: var(--sa-muted);
539
+ color: var(--sa-color-fg-muted);
536
540
  font-weight: 400;
537
541
  }
538
542
  .pr-inf {
539
- color: var(--sa-positive);
543
+ color: var(--sa-color-positive);
540
544
  font-weight: 600;
541
545
  }
542
546
 
@@ -545,19 +549,19 @@ function onPublish(): void {
545
549
  align-items: center;
546
550
  padding: 2px 9px;
547
551
  border-radius: 999px;
548
- font-size: 11px;
552
+ font-size: var(--sa-text-xs);
549
553
  font-weight: 600;
550
554
  border: 1px solid;
551
555
  }
552
556
  .pr-chip--live {
553
- background: var(--sa-positive-soft);
554
- color: var(--sa-positive);
555
- border-color: rgba(4, 120, 87, 0.3);
557
+ background: var(--sa-color-positive-surface);
558
+ color: var(--sa-color-positive);
559
+ border-color: var(--sa-color-positive-border);
556
560
  }
557
561
  .pr-chip--muted {
558
- background: var(--sa-border-soft);
559
- color: var(--sa-muted);
560
- border-color: var(--sa-border);
562
+ background: var(--sa-color-border-soft);
563
+ color: var(--sa-color-fg-muted);
564
+ border-color: var(--sa-color-border);
561
565
  }
562
566
 
563
567
  .pr-components {
@@ -566,51 +570,51 @@ function onPublish(): void {
566
570
  gap: 14px;
567
571
  }
568
572
  .pr-comp-head {
569
- font-size: 11px;
573
+ font-size: var(--sa-text-xs);
570
574
  text-transform: uppercase;
571
575
  letter-spacing: 0.08em;
572
576
  font-weight: 700;
573
577
  margin-bottom: 6px;
574
578
  }
575
579
  .pr-comp-head--quota {
576
- color: #0ea5e9;
580
+ color: var(--sa-color-quota);
577
581
  }
578
582
  .pr-comp-head--feature {
579
- color: #8b5cf6;
583
+ color: var(--sa-color-feature);
580
584
  }
581
585
  .pr-comp-head--bundle {
582
- color: var(--sa-amber);
586
+ color: var(--sa-color-warning-strong);
583
587
  }
584
588
  .pr-comp-item {
585
589
  display: flex;
586
590
  justify-content: space-between;
587
591
  gap: 6px;
588
- font-size: 12px;
592
+ font-size: var(--sa-text-sm);
589
593
  padding: 3px 0;
590
- border-bottom: 1px solid var(--sa-border-soft);
591
- color: var(--sa-body);
594
+ border-bottom: 1px solid var(--sa-color-border-soft);
595
+ color: var(--sa-color-fg-body);
592
596
  }
593
597
  .pr-comp-item b {
594
- color: var(--sa-heading);
598
+ color: var(--sa-color-fg-heading);
595
599
  }
596
600
  .pr-comp-empty {
597
- font-size: 12px;
598
- color: var(--sa-muted);
601
+ font-size: var(--sa-text-sm);
602
+ color: var(--sa-color-fg-muted);
599
603
  font-style: italic;
600
604
  padding: 3px 0;
601
605
  }
602
606
 
603
607
  .pr-note {
604
- font-size: 13px;
608
+ font-size: var(--sa-text-md);
605
609
  line-height: 1.55;
606
- color: var(--sa-body);
607
- background: var(--sa-border-soft);
610
+ color: var(--sa-color-fg-body);
611
+ background: var(--sa-color-border-soft);
608
612
  border-radius: 7px;
609
613
  padding: 10px 12px;
610
614
  }
611
615
  .pr-note--missing {
612
- background: var(--sa-warning-soft);
613
- color: var(--sa-warning);
616
+ background: var(--sa-color-warning-surface);
617
+ color: var(--sa-color-warning);
614
618
  }
615
619
 
616
620
  .pr-checks {
@@ -622,13 +626,13 @@ function onPublish(): void {
622
626
  display: flex;
623
627
  align-items: center;
624
628
  gap: 9px;
625
- font-size: 12.5px;
629
+ font-size: var(--sa-text-md);
626
630
  }
627
631
  .pr-check--ok {
628
- color: var(--sa-heading);
632
+ color: var(--sa-color-fg-heading);
629
633
  }
630
634
  .pr-check--warn {
631
- color: var(--sa-warning);
635
+ color: var(--sa-color-warning);
632
636
  }
633
637
  .pr-check-mark {
634
638
  width: 18px;
@@ -639,20 +643,20 @@ function onPublish(): void {
639
643
  flex: 0 0 auto;
640
644
  }
641
645
  .pr-check--ok .pr-check-mark {
642
- background: var(--sa-positive-soft);
643
- color: var(--sa-positive);
646
+ background: var(--sa-color-positive-surface);
647
+ color: var(--sa-color-positive);
644
648
  }
645
649
  .pr-check--warn .pr-check-mark {
646
- background: var(--sa-warning-soft);
647
- color: var(--sa-warning);
650
+ background: var(--sa-color-warning-surface);
651
+ color: var(--sa-color-warning);
648
652
  }
649
653
 
650
654
  .pr-toggle {
651
655
  display: flex;
652
656
  align-items: center;
653
657
  gap: 8px;
654
- font-size: 12.5px;
655
- color: var(--sa-heading);
658
+ font-size: var(--sa-text-md);
659
+ color: var(--sa-color-fg-heading);
656
660
  cursor: pointer;
657
661
  }
658
662
 
@@ -664,15 +668,15 @@ function onPublish(): void {
664
668
  .pr-impact-num {
665
669
  font: 700 40px/1 var(--sa-font-head);
666
670
  letter-spacing: -0.03em;
667
- color: var(--sa-heading);
671
+ color: var(--sa-color-fg-heading);
668
672
  }
669
673
  .pr-impact-text {
670
- font-size: 12.5px;
671
- color: var(--sa-body);
674
+ font-size: var(--sa-text-md);
675
+ color: var(--sa-color-fg-body);
672
676
  line-height: 1.5;
673
677
  }
674
678
 
675
- @media (max-width: 1100px) {
679
+ @media (max-width: 1023.98px) {
676
680
  .pr-grid {
677
681
  grid-template-columns: 1fr;
678
682
  }