@tekkare/romulus 0.1.104 → 0.1.105

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "0.1.103",
+  "version": "0.1.104",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/AlertForm.vue

@@ -18,12 +18,29 @@
 -->
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import type { RmAlertDraft, RmAlertField, RmAlertTrigger } from '../utils/alerts'
+import type {
+  RmAlertCadence,
+  RmAlertDraft,
+  RmAlertField,
+  RmAlertTrigger,
+  RmAlertViewOption,
+} from '../utils/alerts'
+import { RM_ALERT_ANY_FIELD } from '../utils/alerts'
 
 const props = withDefaults(
   defineProps<{
     /** Nom de la vue surveillee, affiche et repris comme titre par defaut. */
     viewTitle: string
+    /**
+     * Vues enregistrees de la page. Avec plusieurs, le formulaire propose un
+     * selecteur : une alerte peut se poser sans avoir la vue a l'ecran.
+     */
+    views?: RmAlertViewOption[]
+    /**
+     * L'ecran porte des filtres qui pourraient devenir une vue. Ajoute
+     * l'entree « ecran actuel » au selecteur.
+     */
+    canSaveScreen?: boolean
     /** Champs surveillables de la page. Vide : seule l'apparition compte. */
     fields?: RmAlertField[]
     /** Nombre d'elements que la vue tient a l'ecran, s'il est connu. */
@@ -31,15 +48,32 @@ const props = withDefaults(
     submitting?: boolean
     lang?: 'fr' | 'en'
   }>(),
-  { fields: () => [], scopeCount: null, submitting: false, lang: 'fr' },
+  {
+    views: () => [],
+    canSaveScreen: false,
+    fields: () => [],
+    scopeCount: null,
+    submitting: false,
+    lang: 'fr',
+  },
 )
 
 const emit = defineEmits<{
   submit: [draft: RmAlertDraft]
   cancel: []
+  /**
+   * Une autre vue vient d'etre choisie. L'appelant doit l'appliquer a la
+   * page : c'est elle qui construit la requete Elasticsearch, donc l'ecran et
+   * la vue surveillee doivent dire la meme chose au moment de la capture.
+   */
+  'select-view': [id: string]
 }>()
 
 const FR = {
+  screenOption: 'Écran actuel (une vue sera créée)',
+  viewSelect: 'Vue à surveiller',
+  viewApplied: 'La vue choisie est appliquée à l’écran : c’est lui qui fournit la requête surveillée.',
+  screenNote: 'Vos filtres actuels seront enregistrés comme une vue portant le nom de l’alerte.',
   name: 'Nom de l’alerte',
   view: 'Vue surveillée',
   viewHint: 'L’alerte se déclenche sur le périmètre de cette vue, tel qu’il est à l’écran.',
@@ -55,17 +89,18 @@ const FR = {
   fieldsHint: 'Un seul message par élément, quel que soit le nombre de champs cochés.',
   fieldsRequired: 'Cochez au moins un champ pour surveiller les changements.',
   noFields: 'Cette page ne propose aucun champ surveillable pour le moment.',
+  anyField: 'N’importe quel changement',
+  anyFieldHint:
+    'Tout le document est comparé. Plus large, mais plus bavard : une correction de libellé compte autant qu’un mouvement de prix.',
   channels: 'Canaux',
   inApp: 'Dans l’app (pastille sur la tuile Alertes)',
   email: 'Email',
   cadence: 'Fréquence d’envoi du mail',
   daily: 'Quotidienne (un envoi par jour au plus)',
   weekly: 'Hebdomadaire (un envoi par semaine au plus)',
+  monthly: 'Mensuelle (un envoi par mois au plus)',
   cadenceHint:
     'Un plafond, pas un rythme : rien ne part quand rien n’a bougé, et la détection suit celle des données.',
-  visibility: 'Partage',
-  private: 'Pour moi seul',
-  workspace: 'Visible par mon espace de travail',
   submit: 'Créer l’alerte',
   cancel: 'Annuler',
   baseline:
@@ -74,6 +109,10 @@ const FR = {
 }
 
 const EN = {
+  screenOption: 'Current screen (a view will be created)',
+  viewSelect: 'View to watch',
+  viewApplied: 'The chosen view is applied to the screen: the screen is what provides the watched query.',
+  screenNote: 'Your current filters will be saved as a view named after the alert.',
   name: 'Alert name',
   view: 'Watched view',
   viewHint: 'The alert fires on this view’s scope, as it stands on screen.',
@@ -89,17 +128,18 @@ const EN = {
   fieldsHint: 'One message per item, however many fields are ticked.',
   fieldsRequired: 'Tick at least one field to watch for changes.',
   noFields: 'This page offers no watchable field yet.',
+  anyField: 'Any change',
+  anyFieldHint:
+    'The whole document is compared. Wider, but noisier: a label fix counts as much as a price move.',
   channels: 'Channels',
   inApp: 'In app (badge on the Alerts tile)',
   email: 'Email',
   cadence: 'Mail frequency',
   daily: 'Daily (at most one a day)',
   weekly: 'Weekly (at most one a week)',
+  monthly: 'Monthly (at most one a month)',
   cadenceHint:
     'A cap, not a rhythm: nothing goes out when nothing moved, and detection follows the data.',
-  visibility: 'Sharing',
-  private: 'Just me',
-  workspace: 'Visible to my workspace',
   submit: 'Create the alert',
   cancel: 'Cancel',
   baseline:
@@ -109,20 +149,47 @@ const EN = {
 
 const T = computed(() => (props.lang === 'en' ? EN : FR))
 
+/**
+ * Vue retenue. `null` designe l'ecran actuel, qui deviendra une vue au moment
+ * de la creation.
+ */
+const selectedViewId = ref<string | null>(props.views[0]?.id ?? null)
+
+/** Entrees du selecteur, l'ecran actuel en tete quand il a des filtres. */
+const viewOptions = computed(() => [
+  ...(props.canSaveScreen ? [{ id: null as string | null, title: T.value.screenOption }] : []),
+  ...props.views.map((view) => ({ id: view.id as string | null, title: view.title })),
+])
+
+const selectedView = computed(
+  () => viewOptions.value.find((option) => option.id === selectedViewId.value) ?? viewOptions.value[0],
+)
+
 const title = ref(props.viewTitle)
 const triggers = ref<RmAlertTrigger[]>(['appeared'])
 const watchedFields = ref<string[]>([])
+/** Surveiller le document entier plutot qu'une liste de champs. */
+const anyField = ref(false)
 const emailOn = ref(false)
-const cadence = ref<'daily' | 'weekly'>('weekly')
-const shared = ref(false)
+const cadence = ref<RmAlertCadence>('weekly')
+
+/** Titre libre des que l'utilisateur y touche : on ne l'ecrase plus. */
+const titleTouched = ref(false)
 
 watch(
   () => props.viewTitle,
   (value) => {
-    title.value = value
+    if (!titleTouched.value) title.value = value
   },
 )
 
+watch(selectedViewId, (id) => {
+  const view = props.views.find((entry) => entry.id === id)
+  if (view && !titleTouched.value) title.value = view.title
+  // Une vue choisie doit etre posee a l'ecran avant la capture.
+  if (id) emit('select-view', id)
+})
+
 /**
  * Deux bascules plutot qu'une generique : dans le template, un `ref` est
  * deballe, donc lui passer la reference elle-meme ne marche pas.
@@ -146,7 +213,22 @@ const watchesChanges = computed(() => triggers.value.includes('changed'))
  * moteur comparerait un hachage vide et ne trouverait jamais rien.
  */
 const missingFields = computed(
-  () => watchesChanges.value && watchedFields.value.length === 0 && props.fields.length > 0,
+  () =>
+    watchesChanges.value &&
+    !anyField.value &&
+    watchedFields.value.length === 0 &&
+    props.fields.length > 0,
+)
+
+/** Options de cadence, dans l'ordre du plus espace au plus frequent. */
+const cadenceOptions = computed(() => [
+  { value: 'monthly' as const, label: T.value.monthly },
+  { value: 'weekly' as const, label: T.value.weekly },
+  { value: 'daily' as const, label: T.value.daily },
+])
+
+const cadenceLabel = computed(
+  () => cadenceOptions.value.find((option) => option.value === cadence.value)?.label ?? '',
 )
 
 const valid = computed(
@@ -157,35 +239,65 @@ function submit() {
   if (!valid.value) return
   emit('submit', {
     title: title.value.trim(),
+    viewId: selectedViewId.value,
     triggers: triggers.value,
     // Les champs ne servent qu'au declencheur « changement » : les garder
     // sans lui ferait porter a l'alerte une promesse qu'elle ne tient pas.
-    watchedFields: watchesChanges.value ? watchedFields.value : [],
+    watchedFields: watchesChanges.value
+      ? anyField.value
+        ? [RM_ALERT_ANY_FIELD]
+        : watchedFields.value
+      : [],
     channels: emailOn.value ? ['in_app', 'email'] : ['in_app'],
     cadence: cadence.value,
-    visibility: shared.value ? 'workspace' : 'private',
+    // Le partage viendra plus tard : le schema le porte deja, l'ecran non.
+    visibility: 'private',
   })
 }
 </script>
 
 <template>
   <form class="rm-alert-form" @submit.prevent="submit">
-    <RmInput v-model="title" :label="T.name" required />
+    <RmInput
+      :model-value="title"
+      :label="T.name"
+      required
+      @update:model-value="
+        titleTouched = true;
+        title = $event;
+      "
+    />
 
     <div class="rm-alert-form__view">
       <p class="rm-alert-form__label">{{ T.view }}</p>
-      <p class="rm-alert-form__view-name">
+      <p class="rm-alert-form__hint">
+        {{ viewOptions.length > 1 ? T.viewApplied : T.viewHint }}
+      </p>
+
+      <RmDropdownSelect
+        v-if="viewOptions.length > 1"
+        label=""
+        :options="viewOptions.map((option) => option.title)"
+        :model-value="selectedView?.title ?? ''"
+        @update:model-value="
+          selectedViewId =
+            viewOptions.find((option) => option.title === $event)?.id ?? null
+        "
+      />
+      <p v-else class="rm-alert-form__view-name">
         <RmIcon name="BookmarkSimple" :size="14" />
-        {{ viewTitle }}
-        <span v-if="scopeCount" class="rm-alert-form__count">
-          {{ scopeCount }} {{ T.scope }}
-        </span>
+        {{ selectedView?.title ?? viewTitle }}
       </p>
-      <p class="rm-alert-form__hint">{{ T.viewHint }}</p>
+
+      <p v-if="scopeCount && selectedViewId" class="rm-alert-form__count">
+        {{ scopeCount }} {{ T.scope }}
+      </p>
+      <p v-if="!selectedViewId" class="rm-alert-form__hint">{{ T.screenNote }}</p>
     </div>
 
     <fieldset class="rm-alert-form__group">
       <legend class="rm-alert-form__label">{{ T.triggers }}</legend>
+      <p class="rm-alert-form__hint">{{ T.triggersHint }}</p>
       <RmCheckbox
         v-for="entry in [
           { key: 'appeared', label: T.appeared, hint: T.appearedHint },
@@ -198,20 +310,21 @@ function submit() {
         :tooltip="entry.hint"
         @update:model-value="toggleTrigger(entry.key as RmAlertTrigger)"
       />
-      <p class="rm-alert-form__hint">{{ T.triggersHint }}</p>
     </fieldset>
 
     <fieldset v-if="watchesChanges" class="rm-alert-form__group">
       <legend class="rm-alert-form__label">{{ T.fields }}</legend>
+      <p class="rm-alert-form__hint">{{ anyField ? T.anyFieldHint : T.fieldsHint }}</p>
       <template v-if="fields.length">
+        <RmCheckbox v-model="anyField" :label="T.anyField" />
         <RmCheckbox
           v-for="field in fields"
           :key="field.value"
-          :model-value="watchedFields.includes(field.value)"
+          :model-value="anyField || watchedFields.includes(field.value)"
           :label="field.label"
+          :disabled="anyField"
           @update:model-value="toggleField(field.value)"
         />
-        <p class="rm-alert-form__hint">{{ T.fieldsHint }}</p>
         <p v-if="missingFields" class="rm-alert-form__error">{{ T.fieldsRequired }}</p>
       </template>
       <p v-else class="rm-alert-form__hint">{{ T.noFields }}</p>
@@ -223,21 +336,20 @@ function submit() {
       <RmCheckbox v-model="emailOn" :label="T.email" />
 
       <div v-if="emailOn" class="rm-alert-form__nested">
+        <p class="rm-alert-form__label">{{ T.cadence }}</p>
+        <p class="rm-alert-form__hint">{{ T.cadenceHint }}</p>
         <RmDropdownSelect
-          :label="T.cadence"
-          :options="[T.weekly, T.daily]"
-          :model-value="cadence === 'weekly' ? T.weekly : T.daily"
-          @update:model-value="cadence = $event === T.daily ? 'daily' : 'weekly'"
+          label=""
+          :options="cadenceOptions.map((option) => option.label)"
+          :model-value="cadenceLabel"
+          @update:model-value="
+            cadence =
+              cadenceOptions.find((option) => option.label === $event)?.value ?? 'weekly'
+          "
         />
-        <p class="rm-alert-form__hint">{{ T.cadenceHint }}</p>
       </div>
     </fieldset>
 
-    <fieldset class="rm-alert-form__group">
-      <legend class="rm-alert-form__label">{{ T.visibility }}</legend>
-      <RmCheckbox v-model="shared" :label="T.workspace" />
-    </fieldset>
-
     <p class="rm-alert-form__baseline">
       <RmIcon name="Info" :size="14" />
       {{ T.baseline }}
@@ -258,5 +370,5 @@ function submit() {
 </template>
 
 <style scoped>
-.rm-alert-form{display:flex;flex-direction:column;gap:18px}.rm-alert-form__label{color:var(--rm-text,#111827);font-size:13px;font-weight:600;margin:0 0 6px;padding:0}.rm-alert-form__group{border:0;display:flex;flex-direction:column;gap:8px;margin:0;padding:0}.rm-alert-form__view-name{align-items:center;color:var(--rm-text,#111827);display:flex;flex-wrap:wrap;font-size:14px;gap:6px;margin:0}.rm-alert-form__count{color:var(--rm-text-soft,#9ca3af);font-size:11.5px}.rm-alert-form__hint{color:var(--rm-text-soft,#9ca3af);font-size:12px;line-height:1.45;margin:0}.rm-alert-form__error{color:var(--rm-danger,#b91c1c);font-size:12px;margin:0}.rm-alert-form__nested{display:flex;flex-direction:column;gap:6px;padding-left:26px}.rm-alert-form__baseline{align-items:flex-start;background:var(--rm-surface-muted,#f9fafb);border-radius:8px;color:var(--rm-text-soft,#4b5563);display:flex;font-size:12.5px;gap:8px;line-height:1.45;margin:0;padding:10px 12px}.rm-alert-form__actions{display:flex;gap:8px;justify-content:flex-end}
+.rm-alert-form{display:flex;flex-direction:column;gap:18px}.rm-alert-form__label{color:var(--rm-text,#111827);font-size:13px;font-weight:600;margin:0 0 2px;padding:0}.rm-alert-form__group{border:0;display:flex;flex-direction:column;gap:8px;margin:0;padding:0}.rm-alert-form__view-name{align-items:center;color:var(--rm-text,#111827);display:flex;flex-wrap:wrap;font-size:14px;gap:6px;margin:0}.rm-alert-form__count{color:var(--rm-text-soft,#9ca3af);font-size:11.5px}.rm-alert-form__hint{color:var(--rm-text-soft,#9ca3af);font-size:12px;line-height:1.45;margin:0 0 4px}.rm-alert-form__error{color:var(--rm-danger,#b91c1c);font-size:12px;margin:0}.rm-alert-form__nested{display:flex;flex-direction:column;gap:6px;padding-left:26px}.rm-alert-form__baseline{align-items:flex-start;background:var(--rm-surface-muted,#f9fafb);border-radius:8px;color:var(--rm-text-soft,#4b5563);display:flex;font-size:12.5px;gap:8px;line-height:1.45;margin:0;padding:10px 12px}.rm-alert-form__actions{display:flex;gap:8px;justify-content:flex-end}
 </style>

package/dist/runtime/components/Modal.vue

@@ -101,5 +101,5 @@ const modalStyle = computed(() => {
 </template>
 
 <style scoped>
-.rm-modal-overlay{align-items:center;backdrop-filter:blur(2px);background:rgba(0,0,0,.4);display:flex;inset:0;justify-content:center;position:fixed;z-index:100}.rm-modal{background:var(--bg-surface);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.15);display:flex;flex-direction:column;max-height:90vh;max-width:95vw}.rm-modal__header{align-items:flex-start;display:flex;gap:var(--space-16);justify-content:space-between;padding:var(--space-20) var(--space-24) 0}.rm-modal__header-content{flex:1;min-width:0}.rm-modal__close{align-items:center;background:none;border:none;border-radius:var(--r-radius-md);color:var(--text-muted);cursor:pointer;display:flex;flex-shrink:0;height:32px;justify-content:center;transition:all var(--r-transition-fast);width:32px}.rm-modal__close:hover{background:var(--bg-surface-3);color:var(--text-primary)}.rm-modal__tabs{padding:0}.rm-modal__body{flex:1;overflow-y:auto;padding:var(--space-24)}.rm-modal__footer{border-top:1px solid var(--border-soft);padding:var(--space-16) var(--space-24)}.rm-modal-enter-active,.rm-modal-leave-active{transition:opacity .2s ease}.rm-modal-enter-active .rm-modal,.rm-modal-leave-active .rm-modal{transition:transform .2s ease}.rm-modal-enter-from,.rm-modal-leave-to{opacity:0}.rm-modal-enter-from .rm-modal,.rm-modal-leave-to .rm-modal{transform:scale(.95)}.rm-modal-leave-active,.rm-modal-leave-to{pointer-events:none}
+.rm-modal-overlay{align-items:center;backdrop-filter:blur(2px);background:rgba(0,0,0,.4);display:flex;font-family:var(--r-font-family);inset:0;justify-content:center;position:fixed;z-index:100}.rm-modal{background:var(--bg-surface);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.15);display:flex;flex-direction:column;max-height:90vh;max-width:95vw}.rm-modal__header{align-items:flex-start;display:flex;gap:var(--space-16);justify-content:space-between;padding:var(--space-20) var(--space-24) 0}.rm-modal__header-content{flex:1;min-width:0}.rm-modal__close{align-items:center;background:none;border:none;border-radius:var(--r-radius-md);color:var(--text-muted);cursor:pointer;display:flex;flex-shrink:0;height:32px;justify-content:center;transition:all var(--r-transition-fast);width:32px}.rm-modal__close:hover{background:var(--bg-surface-3);color:var(--text-primary)}.rm-modal__tabs{padding:0}.rm-modal__body{flex:1;overflow-y:auto;padding:var(--space-24)}.rm-modal__footer{border-top:1px solid var(--border-soft);padding:var(--space-16) var(--space-24)}.rm-modal-enter-active,.rm-modal-leave-active{transition:opacity .2s ease}.rm-modal-enter-active .rm-modal,.rm-modal-leave-active .rm-modal{transition:transform .2s ease}.rm-modal-enter-from,.rm-modal-leave-to{opacity:0}.rm-modal-enter-from .rm-modal,.rm-modal-leave-to .rm-modal{transform:scale(.95)}.rm-modal-leave-active,.rm-modal-leave-to{pointer-events:none}
 </style>

package/dist/runtime/utils/alerts.d.ts

@@ -6,6 +6,14 @@
  * importer un `.vue`. Meme raison que pour `utils/export.ts`.
  */
 export type RmAlertStatus = 'seeding' | 'active' | 'paused' | 'stale' | 'failing';
+/** Plafond d'envoi du mail, jamais une promesse de frequence. */
+export type RmAlertCadence = 'daily' | 'weekly' | 'monthly';
+/**
+ * Surveiller le document entier plutot qu'une liste de champs. Les champs
+ * d'ingestion (horodatage, date de collecte) restent exclus cote moteur,
+ * sinon chaque reindexation ferait bouger chaque document.
+ */
+export declare const RM_ALERT_ANY_FIELD = "*";
 /** Ce qu'une alerte sait detecter. Les trois sortent du meme passage de diff. */
 export type RmAlertTrigger = 'appeared' | 'changed' | 'disappeared';
 export interface RmAlertMenuItem {
@@ -66,12 +74,22 @@ export interface RmAlertField {
     value: string;
     label: string;
 }
+/** Une vue proposee dans le selecteur du formulaire. */
+export interface RmAlertViewOption {
+    id: string;
+    title: string;
+}
 /** Ce que le formulaire de creation rend a l'appelant. */
 export interface RmAlertDraft {
     title: string;
+    /**
+     * Vue a surveiller. `null` : l'ecran actuel, que l'appelant enregistrera
+     * comme vue avant de creer l'alerte.
+     */
+    viewId: string | null;
     triggers: RmAlertTrigger[];
     watchedFields: string[];
     channels: string[];
-    cadence: 'daily' | 'weekly';
+    cadence: RmAlertCadence;
     visibility: 'private' | 'workspace';
 }

package/dist/runtime/utils/alerts.js

@@ -0,0 +1 @@
+export const RM_ALERT_ANY_FIELD = "*";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/romulus",
-  "version": "0.1.104",
+  "version": "0.1.105",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",