@saasicat/ui-vue 0.17.0 → 0.18.1

package/src/components/dialogs/pilot-dialog.css

@@ -0,0 +1,222 @@
+/*
+ * Building blocks of the pilot dialogs — chrome, sections, inputs, plan
+ * picker, end-date presets.
+ *
+ * Create and edit draw the same elements, so these rules existed twice,
+ * identically. Both dialogs pull this file in through
+ * `<style src="..." scoped>`, which keeps scoping intact: each component still
+ * gets its own id.
+ */
+
+.pl-dlg__head {
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+    padding: 18px 22px 14px;
+    border-bottom: 1px solid var(--sa-border, #e2e8f0);
+}
+
+.pl-dlg__title {
+    font-family: var(--sa-font-head, system-ui, sans-serif);
+    font-weight: 700;
+    font-size: 17px;
+    color: var(--sa-heading, #0f172a);
+    letter-spacing: -0.015em;
+}
+
+.pl-dlg__close {
+    margin-left: auto;
+}
+
+.pl-dlg__foot {
+    border-top: 1px solid var(--sa-border, #e2e8f0);
+    background: #fbfbfd;
+    padding: 12px 18px;
+}
+
+.pl-section:last-of-type {
+    margin-bottom: 4px;
+}
+
+.pl-section__head {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    margin-bottom: 12px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #f1f5f9;
+}
+
+.pl-section__num {
+    width: 24px;
+    height: 24px;
+    background: #eff6ff;
+    color: #1d4ed8;
+    border-radius: 50%;
+    font: 700 12px var(--sa-font-body, system-ui, sans-serif);
+    display: grid;
+    place-items: center;
+    flex: 0 0 auto;
+}
+
+.pl-section__title {
+    font-size: 13.5px;
+    font-weight: 700;
+    color: var(--sa-heading, #0f172a);
+    letter-spacing: -0.005em;
+}
+
+.pl-section__sub {
+    font-size: 11.5px;
+    color: #94a3b8;
+    margin-top: 2px;
+}
+
+.pl-input {
+    width: 100%;
+    padding: 9px 12px;
+    background: #fff;
+    border: 1px solid var(--sa-border, #e2e8f0);
+    border-radius: 8px;
+    font: 13px var(--sa-font-body, system-ui, sans-serif);
+    color: var(--sa-body, #1e293b);
+    outline: 0;
+    transition:
+        border-color 0.12s,
+        box-shadow 0.12s;
+}
+
+.pl-input:focus {
+    border-color: var(--sa-primary, #3f6bff);
+    box-shadow: 0 0 0 3px rgba(63, 107, 255, 0.12);
+}
+
+.pl-plan-select {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.pl-plan-opt {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 11px;
+    background: #fff;
+    border: 1px solid var(--sa-border, #e2e8f0);
+    border-radius: 8px;
+    cursor: pointer;
+    text-align: left;
+    font-family: var(--sa-font-body, system-ui, sans-serif);
+    transition:
+        border-color 0.12s,
+        background 0.12s;
+}
+
+.pl-plan-opt:hover {
+    border-color: #93c5fd;
+    background: #fafbff;
+}
+
+.pl-plan-opt--active {
+    border-color: var(--sa-primary, #2563eb);
+    background: #eff6ff;
+    box-shadow: 0 0 0 1px var(--sa-primary, #2563eb) inset;
+}
+
+.pl-plan-opt__dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    flex: 0 0 auto;
+}
+
+.pl-plan-opt__text {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+}
+
+.pl-plan-opt__key {
+    font: 700 11px var(--sa-font-mono, ui-monospace, monospace);
+    letter-spacing: 0.05em;
+    color: var(--sa-heading, #0f172a);
+}
+
+.pl-plan-opt__label {
+    font-size: 11px;
+    color: var(--sa-muted, #64748b);
+    margin-top: 1px;
+}
+
+.pl-plan-opt__check {
+    color: #1d4ed8;
+}
+
+.pl-end-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.pl-end-row .pl-input {
+    flex: 1;
+}
+
+.pl-btn-mini {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 7px 10px;
+    background: #fff;
+    border: 1px solid var(--sa-border, #e2e8f0);
+    border-radius: 7px;
+    color: var(--sa-muted-dark, #475569);
+    font: 500 11.5px var(--sa-font-body, system-ui, sans-serif);
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.pl-btn-mini:hover {
+    background: #f8fafc;
+    border-color: #cbd5e1;
+}
+
+.pl-end-presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    margin-top: 5px;
+}
+
+.pl-preset-btn {
+    padding: 4px 9px;
+    background: #fff;
+    border: 1px dashed #cbd5e1;
+    border-radius: 999px;
+    font: 600 11px var(--sa-font-body, system-ui, sans-serif);
+    color: var(--sa-muted-dark, #475569);
+    cursor: pointer;
+    transition:
+        background 0.12s,
+        border-color 0.12s,
+        color 0.12s;
+}
+
+.pl-preset-btn:hover {
+    background: #eff6ff;
+    border-color: #93c5fd;
+    border-style: solid;
+    color: #1d4ed8;
+}
+
+.pl-error {
+    background: #fef2f2;
+    border: 1px solid #fecaca;
+    color: #b91c1c;
+    font-size: 13px;
+    margin: 12px 0 0;
+    padding: 8px 12px;
+    border-radius: 8px;
+}

package/src/pages-standard/DiscoveryPage.vue

@@ -195,7 +195,7 @@ const statusFilterOptions = computed<Array<{ label: string; value: DiscoveryStat
     () => [
         { label: msg.value.statusFilterAll, value: 'all' },
         ...(['pending', 'approved', 'outdated', 'obsolete'] as const).map((status) => ({
-            label: statusLabel(status, locale.value),
+            label: statusLabel(status, msg.value),
             value: status,
         })),
     ],

package/src/pages-standard/bundles-page/BundleAccordionList.vue

@@ -50,7 +50,7 @@ import {
     type BundleAggregateStatus,
 } from '../../components/bundle-editor/bundle-version-status.js';
 import { formatMessage } from '../../client/i18n/format.js';
-import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 
 const props = defineProps<{
     filteredBundles: BundleRow[];
@@ -69,10 +69,9 @@ const emit = defineEmits<{
 }>();
 
 const msg = useSaMessages('bundles');
-const { locale } = useSuperAdminI18n();
 
 function statusMetaOf(bundle: BundleRow) {
-    return bundleStatusMeta(props.aggregateStatusOf(bundle), locale.value);
+    return bundleStatusMeta(props.aggregateStatusOf(bundle), msg.value);
 }
 
 function statusClass(bundle: BundleRow): string {

package/src/pages-standard/discovery-page/CatalogEntryTransPanel.vue

@@ -9,7 +9,7 @@
             </div>
             <div class="sa-trans-fields">
                 <div v-for="f in fields" :key="f" class="sa-trans-field">
-                    <label class="sa-trans-field__cap">{{ i18nFieldLabel(f, uiLocale) }}</label>
+                    <label class="sa-trans-field__cap">{{ i18nFieldLabel(f, msg, common) }}</label>
                     <q-input
                         v-if="f !== 'unit'"
                         dense
@@ -47,7 +47,7 @@
             </div>
             <div class="sa-trans-fields">
                 <div v-for="f in fields" :key="f" class="sa-trans-field">
-                    <label class="sa-trans-field__cap">{{ i18nFieldLabel(f, uiLocale) }}</label>
+                    <label class="sa-trans-field__cap">{{ i18nFieldLabel(f, msg, common) }}</label>
                     <q-input
                         dense
                         outlined
@@ -71,7 +71,7 @@
 import { computed, reactive } from 'vue';
 import type { CatalogEntryI18nFields } from '@saasicat/types';
 import { formatMessage } from '../../client/i18n/format.js';
-import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import {
     DISCOVERY_DEFAULT_LOCALE,
     i18nFieldLabel,
@@ -107,7 +107,7 @@ const emit = defineEmits<{
 
 const msg = useSaMessages('discovery');
 // Renamed: `locale` is the catalog-entry data locale everywhere else in this file.
-const { locale: uiLocale } = useSuperAdminI18n();
+const common = useSaMessages('common');
 
 const targetLocales = computed(() => props.activeLocales.filter((l) => l !== props.defaultLocale));
 

package/src/pages-standard/discovery-page/DiscoveryStatusControl.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="sa-stc" @click.stop>
         <span class="sa-review" :class="`sa-review--${status}`">
-            {{ statusLabel(status, locale) }}
-            <q-tooltip>{{ statusHint(status, locale) }}</q-tooltip>
+            {{ statusLabel(status, msg) }}
+            <q-tooltip>{{ statusHint(status, msg) }}</q-tooltip>
         </span>
         <q-btn
             dense
@@ -15,7 +15,7 @@
             :loading="busy"
             @click="emit('set-status', primary.to)"
         >
-            <q-tooltip>{{ statusHint(primary.to, locale) }}</q-tooltip>
+            <q-tooltip>{{ statusHint(primary.to, msg) }}</q-tooltip>
         </q-btn>
         <q-btn v-if="menu.length" dense flat round size="sm" icon="more_horiz">
             <q-menu auto-close anchor="bottom right" self="top right">
@@ -39,7 +39,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { DiscoveryStatus } from '@saasicat/types';
-import { useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import { primaryReviewAction, reviewMenuActions, statusHint, statusLabel } from './discovery-ui.js';
 
 // StatusControl (#20, design sim): status chip + contextual primary action
@@ -57,10 +57,10 @@ const emit = defineEmits<{
     'set-status': [target: DiscoveryStatus];
 }>();
 
-const { locale } = useSuperAdminI18n();
+const msg = useSaMessages('discovery');
 
-const primary = computed(() => primaryReviewAction(props.status, locale.value));
-const menu = computed(() => reviewMenuActions(props.status, locale.value));
+const primary = computed(() => primaryReviewAction(props.status, msg.value));
+const menu = computed(() => reviewMenuActions(props.status, msg.value));
 </script>
 
 <style scoped>

package/src/pages-standard/discovery-page/discovery-ui.ts

@@ -4,9 +4,14 @@
 // labels/colors/coverage calculations.
 
 import type { CatalogEntryI18n, DiscoveryStatus } from '@saasicat/types';
-import { DEFAULT_SA_LOCALE, builtinLocaleOf, type SaLocale } from '../../client/i18n/locale.js';
-import { commonMessages } from '../../client/i18n/messages/common.js';
-import { discoveryMessages } from '../../client/i18n/messages/discovery.js';
+import type { SaMessages } from '../../client/i18n/messages.js';
+
+// The resolved slices these helpers render from. Taking the catalog rather
+// than a locale code is what lets an app-supplied language and `i18n.overrides`
+// reach them — a raw `discoveryMessages[locale]` lookup only ever sees the two
+// catalogs the platform ships.
+type SaDiscoveryMessages = SaMessages['discovery'];
+type SaCommonMessages = SaMessages['common'];
 
 /** Translatable fields of a catalog entry. */
 export type I18nField = 'label' | 'description' | 'unit';
@@ -42,20 +47,24 @@ export function localeFull(locale: string): string {
     return LOCALE_NAMES[locale]?.full ?? locale;
 }
 
-export function i18nFieldLabel(f: I18nField, locale: SaLocale = DEFAULT_SA_LOCALE): string {
-    if (f === 'label') return discoveryMessages[builtinLocaleOf(locale)].trans.fieldLabel;
-    if (f === 'description') return commonMessages[builtinLocaleOf(locale)].description;
-    return discoveryMessages[builtinLocaleOf(locale)].unit;
+export function i18nFieldLabel(
+    f: I18nField,
+    discovery: SaDiscoveryMessages,
+    common: SaCommonMessages,
+): string {
+    if (f === 'label') return discovery.trans.fieldLabel;
+    if (f === 'description') return common.description;
+    return discovery.unit;
 }
 
 // ─── Approval lifecycle (#20): status display + state machine ────────────────
 
-export function statusLabel(status: DiscoveryStatus, locale: SaLocale = DEFAULT_SA_LOCALE): string {
-    return discoveryMessages[builtinLocaleOf(locale)].statusLabels[status];
+export function statusLabel(status: DiscoveryStatus, discovery: SaDiscoveryMessages): string {
+    return discovery.statusLabels[status];
 }
 
-export function statusHint(status: DiscoveryStatus, locale: SaLocale = DEFAULT_SA_LOCALE): string {
-    return discoveryMessages[builtinLocaleOf(locale)].statusHints[status];
+export function statusHint(status: DiscoveryStatus, discovery: SaDiscoveryMessages): string {
+    return discovery.statusHints[status];
 }
 
 export interface ReviewAction {
@@ -69,9 +78,9 @@ export interface ReviewAction {
 /** Primary action per status (design sim `StatusControl`, #20). */
 export function primaryReviewAction(
     status: DiscoveryStatus,
-    locale: SaLocale = DEFAULT_SA_LOCALE,
+    discovery: SaDiscoveryMessages,
 ): ReviewAction {
-    const actions = discoveryMessages[builtinLocaleOf(locale)].reviewActions;
+    const actions = discovery.reviewActions;
     switch (status) {
         case 'pending':
             return { label: actions.approve, to: 'approved', emphasized: true };
@@ -87,9 +96,9 @@ export function primaryReviewAction(
 /** Kebab menu actions per status (design sim `StatusControl`, #20). */
 export function reviewMenuActions(
     status: DiscoveryStatus,
-    locale: SaLocale = DEFAULT_SA_LOCALE,
+    discovery: SaDiscoveryMessages,
 ): ReviewAction[] {
-    const actions = discoveryMessages[builtinLocaleOf(locale)].reviewActions;
+    const actions = discovery.reviewActions;
     const markObsolete: ReviewAction = {
         label: actions.markObsolete,
         to: 'obsolete',

package/src/pages-standard/plan-versions/PlanVersionsTimeline.vue

@@ -73,7 +73,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { formatMessage } from '../../client/i18n/format.js';
-import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { CatalogSnapshot } from './catalog-history.types.js';
 import { formatRelative } from './format.js';
 
@@ -91,7 +91,6 @@ const emit = defineEmits<{
 }>();
 
 const msg = useSaMessages('planVersions');
-const { locale } = useSuperAdminI18n();
 
 const snapshotCountLabel = computed(() =>
     formatMessage(msg.value.timeline.snapshotCount, { count: props.snapshots.length }),
@@ -109,7 +108,7 @@ function metaText(s: CatalogSnapshot): string {
             ? msg.value.timeline.noOpenDrafts
             : formatMessage(msg.value.timeline.openCount, { count: s.draftCount });
     }
-    if (s.publishedAt) return formatRelative(s.publishedAt, locale.value);
+    if (s.publishedAt) return formatRelative(s.publishedAt, msg.value);
     return msg.value.timeline.unknown;
 }
 </script>

package/src/pages-standard/plan-versions/format.ts

@@ -1,22 +1,21 @@
 // Formatting helper retained for the reusable catalog-history timeline.
 
 import { formatMessage } from '../../client/i18n/format.js';
-import { DEFAULT_SA_LOCALE, builtinLocaleOf, type SaLocale } from '../../client/i18n/locale.js';
-import { planVersionsMessages } from '../../client/i18n/messages/plan-versions.js';
+import type { SaMessages } from '../../client/i18n/messages.js';
 
-const EMPTY_VALUE = '—';
+// The resolved slice, not a locale code: only this way do an app-supplied
+// language and `i18n.overrides` reach the relative-date wording.
+type SaPlanVersionsMessages = SaMessages['planVersions'];
 
-function texts(locale: SaLocale) {
-    return planVersionsMessages[builtinLocaleOf(locale)].format;
-}
+const EMPTY_VALUE = '—';
 
 export function formatRelative(
     iso: string | undefined,
-    locale: SaLocale = DEFAULT_SA_LOCALE,
+    planVersions: SaPlanVersionsMessages,
     now: Date = new Date(),
 ): string {
     if (!iso) return EMPTY_VALUE;
-    const msg = texts(locale);
+    const msg = planVersions.format;
     const d = new Date(iso);
     const diffMs = now.getTime() - d.getTime();
     const days = Math.floor(diffMs / 86_400_000);