@saasicat/ui-vue 0.21.0 → 0.22.1

package/src/components/bundle-editor/BundleVersionStrip.vue

@@ -110,7 +110,7 @@ function statusMetaOf(v: BundleVersionRow): BundleStatusMeta {
     gap: 8px;
     padding: 14px 16px;
     background: #fbfbfd;
-    border: 1px solid var(--bv-border, #e5e7eb);
+    border: 1px solid var(--bv-border, var(--sa-border));
     border-radius: 10px;
 }
 .bv-vstrip-label {
@@ -118,7 +118,7 @@ function statusMetaOf(v: BundleVersionRow): BundleStatusMeta {
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.1em;
-    color: #64748b;
+    color: var(--sa-muted);
 }
 .bv-vstrip-tabs {
     display: flex;
@@ -135,11 +135,11 @@ function statusMetaOf(v: BundleVersionRow): BundleStatusMeta {
     align-items: center;
     padding: 8px 12px;
     background: #fff;
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--sa-border);
     border-radius: 8px;
     cursor: pointer;
     font-family: inherit;
-    color: #0f172a;
+    color: var(--sa-heading);
     text-align: left;
     transition:
         border-color 0.12s,
@@ -147,10 +147,10 @@ function statusMetaOf(v: BundleVersionRow): BundleStatusMeta {
         background 0.12s;
 }
 .bv-vtab:hover {
-    background: #f8fafc;
+    background: var(--sa-bg-surface-2);
 }
 .bv-vtab-current {
-    border-color: #2563eb;
+    border-color: var(--sa-primary);
     box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
 }
 .bv-vtab-name {
@@ -178,8 +178,8 @@ function statusMetaOf(v: BundleVersionRow): BundleStatusMeta {
     color: #92400e;
 }
 .bv-vtab-status.superseded {
-    background: #e2e8f0;
-    color: #475569;
+    background: var(--sa-border);
+    color: var(--sa-muted-dark);
 }
 .bv-vtab-status.draft {
     background: #dbeafe;
@@ -188,12 +188,12 @@ function statusMetaOf(v: BundleVersionRow): BundleStatusMeta {
 .bv-vtab-dates {
     grid-column: 1 / -1;
     font-size: 11px;
-    color: #64748b;
+    color: var(--sa-muted);
 }
 .bv-vtab-price {
     grid-column: 1 / -1;
     font-size: 11.5px;
-    color: #475569;
+    color: var(--sa-muted-dark);
     font-weight: 600;
 }
 
@@ -204,12 +204,12 @@ function statusMetaOf(v: BundleVersionRow): BundleStatusMeta {
     padding: 8px 12px;
     background: #fff;
     border: 1px dashed #cbd5e1;
-    color: #2563eb;
+    color: var(--sa-primary);
     font-size: 12.5px;
     font-weight: 600;
 }
 .bv-vtab-new:hover:not(:disabled) {
-    background: #eff6ff;
+    background: var(--sa-primary-50);
     border-color: #93c5fd;
 }
 .bv-vtab-new:disabled {

package/src/components/dialogs/PilotCreateDialog.vue

@@ -1,8 +1,8 @@
 <template>
     <q-dialog
         :model-value="modelValue"
-        @update:model-value="emit('update:modelValue', $event)"
         persistent
+        @update:model-value="emit('update:modelValue', $event)"
     >
         <q-card class="pl-dlg">
             <q-card-section class="pl-dlg__head">
@@ -11,12 +11,12 @@
                     <div class="pl-dlg__sub">{{ subtitle ?? msg.createDialog.subtitle }}</div>
                 </div>
                 <q-btn
+                    v-close-popup
                     class="pl-dlg__close"
                     flat
                     dense
                     round
                     icon="close"
-                    v-close-popup
                     :disable="loading"
                 />
             </q-card-section>
@@ -237,7 +237,7 @@
                     <q-icon name="send" size="14px" />
                     {{ msg.createDialog.invitationHint }} <strong>{{ form.admin.email }}</strong>
                 </span>
-                <q-btn flat :label="common.cancel" v-close-popup :disable="loading" />
+                <q-btn v-close-popup flat :label="common.cancel" :disable="loading" />
                 <q-btn
                     unelevated
                     color="primary"
@@ -491,7 +491,7 @@ async function doSubmit(code: string): Promise<void> {
 
 .pl-dlg__sub {
     font-size: 12.5px;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
     margin-top: 3px;
     line-height: 1.4;
 }
@@ -508,8 +508,8 @@ async function doSubmit(code: string): Promise<void> {
     align-items: center;
     gap: 6px;
     font-size: 12px;
-    color: var(--sa-muted-dark, #475569);
-    background: #eff6ff;
+    color: var(--sa-muted-dark, var(--sa-muted-dark));
+    background: var(--sa-primary-50);
     border: 1px solid #bfdbfe;
     border-radius: 999px;
     padding: 4px 12px;
@@ -539,7 +539,7 @@ async function doSubmit(code: string): Promise<void> {
     font: 600 11px var(--sa-font-body, system-ui, sans-serif);
     letter-spacing: 0.04em;
     text-transform: uppercase;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
     display: flex;
     align-items: baseline;
     gap: 6px;
@@ -549,7 +549,7 @@ async function doSubmit(code: string): Promise<void> {
     font-weight: 500;
     text-transform: none;
     letter-spacing: 0;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
     font-size: 11px;
 }
 
@@ -576,17 +576,17 @@ async function doSubmit(code: string): Promise<void> {
     display: flex;
     align-items: stretch;
     background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
+    border: 1px solid var(--sa-border, var(--sa-border));
     border-radius: 8px;
     overflow: hidden;
 }
 
 .pl-slug-input__prefix {
     padding: 9px 12px;
-    background: #f8fafc;
-    color: #94a3b8;
+    background: var(--sa-bg-surface-2);
+    color: var(--sa-muted-light);
     font: 500 12px var(--sa-font-mono, ui-monospace, monospace);
-    border-right: 1px solid var(--sa-border, #e2e8f0);
+    border-right: 1px solid var(--sa-border, var(--sa-border));
     white-space: nowrap;
 }
 

package/src/components/dialogs/PilotEditDialog.vue

@@ -1,26 +1,26 @@
 <template>
     <q-dialog
         :model-value="modelValue"
-        @update:model-value="emit('update:modelValue', $event)"
         persistent
+        @update:model-value="emit('update:modelValue', $event)"
     >
         <q-card class="pl-dlg">
             <q-card-section class="pl-dlg__head">
                 <div>
                     <div class="pl-dlg__title">{{ msg.editDialog.title }}</div>
-                    <div class="pl-dlg__sub" v-if="row">
+                    <div v-if="row" class="pl-dlg__sub">
                         <strong>{{ row.tenant.name }}</strong>
                         <span class="pl-dlg__sep">·</span>
                         <code>{{ row.tenant.slug }}</code>
                     </div>
                 </div>
                 <q-btn
+                    v-close-popup
                     class="pl-dlg__close"
                     flat
                     dense
                     round
                     icon="close"
-                    v-close-popup
                     :disable="loading"
                 />
             </q-card-section>
@@ -122,7 +122,7 @@
             </q-card-section>
 
             <q-card-actions align="right" class="pl-dlg__foot">
-                <q-btn flat :label="common.cancel" v-close-popup :disable="loading" />
+                <q-btn v-close-popup flat :label="common.cancel" :disable="loading" />
                 <q-btn
                     unelevated
                     color="primary"
@@ -339,7 +339,7 @@ async function doSubmit(code: string): Promise<void> {
 
 .pl-dlg__sub {
     font-size: 12.5px;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
     margin-top: 3px;
 }
 
@@ -350,8 +350,8 @@ async function doSubmit(code: string): Promise<void> {
 
 .pl-dlg__sub code {
     font-family: var(--sa-font-mono, ui-monospace, monospace);
-    background: #f1f5f9;
-    color: var(--sa-muted-dark, #475569);
+    background: var(--sa-border-soft);
+    color: var(--sa-muted-dark, var(--sa-muted-dark));
     padding: 1px 6px;
     border-radius: 4px;
     font-size: 11.5px;

package/src/components/dialogs/PromoCodeCreateDialog.vue

@@ -1,8 +1,8 @@
 <template>
     <q-dialog
         :model-value="modelValue"
-        @update:model-value="emit('update:modelValue', $event)"
         persistent
+        @update:model-value="emit('update:modelValue', $event)"
     >
         <q-card class="pc-dlg">
             <q-card-section class="pc-dlg__head">
@@ -11,22 +11,22 @@
                     <div class="pc-dlg__sub">{{ subtitle ?? msg.createDialog.subtitle }}</div>
                 </div>
                 <q-btn
+                    v-close-popup
                     class="pc-dlg__close"
                     flat
                     dense
                     round
                     icon="close"
-                    v-close-popup
                     :disable="loading"
                 />
             </q-card-section>
 
             <q-card-section class="pc-dlg__body">
                 <PromoCodeDialogFields
-                    mode="create"
-                    :form="form"
                     v-model:code="form.code"
                     v-model:advanced-open="advancedOpen"
+                    mode="create"
+                    :form="form"
                     :show-campaign-tag="showCampaignTag"
                     :plans="plans"
                 />
@@ -35,7 +35,7 @@
             </q-card-section>
 
             <q-card-actions align="right" class="pc-dlg__foot">
-                <q-btn flat :label="common.cancel" v-close-popup :disable="loading" />
+                <q-btn v-close-popup flat :label="common.cancel" :disable="loading" />
                 <q-btn
                     unelevated
                     color="primary"
@@ -190,12 +190,12 @@ async function onSubmit() {
     font-family: var(--sa-font-head, system-ui, sans-serif);
     font-weight: 700;
     font-size: 18px;
-    color: var(--sa-heading, #0f172a);
+    color: var(--sa-heading, var(--sa-heading));
 }
 
 .pc-dlg__sub {
     font-size: 12.5px;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
     margin-top: 2px;
 }
 
@@ -207,7 +207,7 @@ async function onSubmit() {
 }
 
 .pc-dlg__foot {
-    border-top: 1px solid var(--sa-border, #e2e8f0);
+    border-top: 1px solid var(--sa-border, var(--sa-border));
 }
 
 .pc-error {

package/src/components/dialogs/PromoCodeDialogFields.vue

@@ -1,4 +1,15 @@
 <template>
+    <!-- This block writes into the `form` prop, which both dialogs create as a
+         `reactive()` object and hand down; the type is named
+         `PromoCodeSharedForm` for exactly that reason. A deliberate shared-state
+         contract, not an oversight.
+
+         It is still the wrong shape: the field block cannot be reused with a
+         one-way owner, and the two dialogs around it are 115 lines of clone.
+         Both are replaced by `AdminFormDialog` + `AdminFieldGrid`, which own the
+         submit lifecycle instead of sharing a mutable object. Until then the
+         rule stays sharp everywhere else rather than being weakened repo-wide. -->
+    <!-- eslint-disable vue/no-mutating-props -->
     <!-- Section: Code & Discount -->
     <div class="pc-section">
         <div class="pc-section__title">{{ msg.form.sectionCodeDiscount }}</div>
@@ -353,11 +364,14 @@ function isPlanSelected(key: string): boolean {
 }
 
 function togglePlan(key: string): void {
+    // Same shared-`form` contract as the template above (see the comment there).
+    /* eslint-disable vue/no-mutating-props */
     if (props.form.appliesToPlans.includes(key)) {
         props.form.appliesToPlans = props.form.appliesToPlans.filter((k) => k !== key);
     } else {
         props.form.appliesToPlans = [...props.form.appliesToPlans, key];
     }
+    /* eslint-enable vue/no-mutating-props */
 }
 
 function planChipStyle(p: PromoCodePlanOption): Record<string, string> {
@@ -394,7 +408,7 @@ const advancedOpen = defineModel<boolean>('advancedOpen', { default: false });
 
 <style scoped>
 .pc-section {
-    border: 1px solid var(--sa-border, #e2e8f0);
+    border: 1px solid var(--sa-border, var(--sa-border));
     border-radius: 10px;
     padding: 14px 16px;
     background: #fafbfc;
@@ -404,7 +418,7 @@ const advancedOpen = defineModel<boolean>('advancedOpen', { default: false });
     font-family: var(--sa-font-head, system-ui, sans-serif);
     font-weight: 700;
     font-size: 13px;
-    color: var(--sa-heading, #0f172a);
+    color: var(--sa-heading, var(--sa-heading));
     margin-bottom: 12px;
     letter-spacing: -0.005em;
 }
@@ -414,7 +428,7 @@ const advancedOpen = defineModel<boolean>('advancedOpen', { default: false });
     background: transparent;
     cursor: pointer;
     font: 600 12.5px var(--sa-font-body, system-ui, sans-serif);
-    color: var(--sa-muted-dark, #475569);
+    color: var(--sa-muted-dark, var(--sa-muted-dark));
     display: inline-flex;
     align-items: center;
     gap: 4px;
@@ -457,19 +471,19 @@ const advancedOpen = defineModel<boolean>('advancedOpen', { default: false });
 .pc-field__label {
     font-size: 11.5px;
     font-weight: 600;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
     text-transform: uppercase;
     letter-spacing: 0.04em;
 }
 
 .pc-field__hint {
     font-size: 11.5px;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
 }
 
 .pc-input {
     width: 100%;
-    border: 1px solid var(--sa-border, #e2e8f0);
+    border: 1px solid var(--sa-border, var(--sa-border));
     background: #fff;
     border-radius: 7px;
     padding: 8px 10px;
@@ -501,17 +515,17 @@ textarea.pc-input {
 }
 
 .pc-btn-mini {
-    border: 1px solid var(--sa-border, #e2e8f0);
+    border: 1px solid var(--sa-border, var(--sa-border));
     background: #fff;
     border-radius: 7px;
     padding: 6px 10px;
     font: 500 12px var(--sa-font-body, system-ui, sans-serif);
     cursor: pointer;
-    color: var(--sa-muted-dark, #475569);
+    color: var(--sa-muted-dark, var(--sa-muted-dark));
 }
 
 .pc-btn-mini:hover {
-    background: #f1f5f9;
+    background: var(--sa-border-soft);
 }
 
 .pc-type-grid {
@@ -521,7 +535,7 @@ textarea.pc-input {
 }
 
 .pc-type-opt {
-    border: 1px solid var(--sa-border, #e2e8f0);
+    border: 1px solid var(--sa-border, var(--sa-border));
     background: #fff;
     border-radius: 8px;
     padding: 8px 10px;
@@ -543,12 +557,12 @@ textarea.pc-input {
 
 .pc-type-opt__label {
     font: 600 12.5px var(--sa-font-body, system-ui, sans-serif);
-    color: var(--sa-heading, #0f172a);
+    color: var(--sa-heading, var(--sa-heading));
 }
 
 .pc-type-opt__sub {
     font: 11.5px var(--sa-font-mono, ui-monospace, monospace);
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
     margin-top: 1px;
 }
 
@@ -563,12 +577,12 @@ textarea.pc-input {
     align-items: center;
     gap: 8px;
     background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
+    border: 1px solid var(--sa-border, var(--sa-border));
     border-radius: 999px;
     padding: 5px 12px 5px 8px;
     font: 600 12px var(--sa-font-body, system-ui, sans-serif);
     cursor: pointer;
-    color: var(--sa-muted-dark, #475569);
+    color: var(--sa-muted-dark, var(--sa-muted-dark));
     transition:
         border-color 0.1s,
         background 0.1s;
@@ -597,13 +611,13 @@ textarea.pc-input {
 
 .pc-dur-opt {
     flex: 1;
-    border: 1px solid var(--sa-border, #e2e8f0);
+    border: 1px solid var(--sa-border, var(--sa-border));
     background: #fff;
     border-radius: 7px;
     padding: 6px 10px;
     font: 500 12px var(--sa-font-body, system-ui, sans-serif);
     cursor: pointer;
-    color: var(--sa-muted-dark, #475569);
+    color: var(--sa-muted-dark, var(--sa-muted-dark));
 }
 
 .pc-dur-opt--active {
@@ -646,12 +660,12 @@ textarea.pc-input {
 
 .pc-preview__code {
     background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
+    border: 1px solid var(--sa-border, var(--sa-border));
     border-radius: 6px;
     padding: 3px 8px;
     font: 600 13px var(--sa-font-mono, ui-monospace, monospace);
     letter-spacing: 0.04em;
-    color: var(--sa-heading, #0f172a);
+    color: var(--sa-heading, var(--sa-heading));
 }
 
 .pc-preview__disc {
@@ -661,6 +675,6 @@ textarea.pc-input {
 
 .pc-preview__meta {
     font-size: 12px;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
 }
 </style>

package/src/components/dialogs/PromoCodeEditDialog.vue

@@ -1,14 +1,14 @@
 <template>
     <q-dialog
         :model-value="modelValue"
-        @update:model-value="emit('update:modelValue', $event)"
         persistent
+        @update:model-value="emit('update:modelValue', $event)"
     >
         <q-card class="pc-dlg">
             <q-card-section class="pc-dlg__head">
                 <div>
                     <div class="pc-dlg__title">{{ msg.editDialog.title }}</div>
-                    <div class="pc-dlg__sub" v-if="row">
+                    <div v-if="row" class="pc-dlg__sub">
                         {{ msg.form.codeLabel }} <strong>{{ row.code }}</strong> ·
                         {{
                             formatMessage(msg.editDialog.redemptionsSoFar, {
@@ -18,22 +18,22 @@
                     </div>
                 </div>
                 <q-btn
+                    v-close-popup
                     class="pc-dlg__close"
                     flat
                     dense
                     round
                     icon="close"
-                    v-close-popup
                     :disable="loading"
                 />
             </q-card-section>
 
             <q-card-section class="pc-dlg__body">
                 <PromoCodeDialogFields
+                    v-model:advanced-open="advancedOpen"
                     mode="edit"
                     :form="form"
                     :code="row?.code ?? ''"
-                    v-model:advanced-open="advancedOpen"
                     :show-campaign-tag="showCampaignTag"
                     :plans="plans"
                 />
@@ -42,7 +42,7 @@
             </q-card-section>
 
             <q-card-actions align="right" class="pc-dlg__foot">
-                <q-btn flat :label="common.cancel" v-close-popup :disable="loading" />
+                <q-btn v-close-popup flat :label="common.cancel" :disable="loading" />
                 <q-btn
                     unelevated
                     color="primary"
@@ -304,12 +304,12 @@ async function onSubmit() {
     font-family: var(--sa-font-head, system-ui, sans-serif);
     font-weight: 700;
     font-size: 18px;
-    color: var(--sa-heading, #0f172a);
+    color: var(--sa-heading, var(--sa-heading));
 }
 
 .pc-dlg__sub {
     font-size: 12.5px;
-    color: var(--sa-muted, #64748b);
+    color: var(--sa-muted, var(--sa-muted));
     margin-top: 2px;
 }
 
@@ -321,7 +321,7 @@ async function onSubmit() {
 }
 
 .pc-dlg__foot {
-    border-top: 1px solid var(--sa-border, #e2e8f0);
+    border-top: 1px solid var(--sa-border, var(--sa-border));
 }
 
 .pc-error {
@@ -336,8 +336,8 @@ async function onSubmit() {
 
 /* The code cannot be changed after creation. */
 .pc-input:disabled {
-    background: #f8fafc;
-    color: #64748b;
+    background: var(--sa-bg-surface-2);
+    color: var(--sa-muted);
     cursor: not-allowed;
 }
 </style>

package/src/components/plan/PlanGrid.vue

@@ -113,7 +113,7 @@ function planPrice(plan: CatalogPlan): number | null {
     --sp-text-strong: rgba(255, 255, 255, 0.92);
     --sp-text-muted: rgba(255, 255, 255, 0.65);
     --sp-flag-current-bg: rgba(255, 255, 255, 0.85);
-    --sp-flag-current-fg: #0f172a;
+    --sp-flag-current-fg: var(--sa-heading);
 }
 .sp-model {
     position: relative;