@tekkare/romulus 0.1.97 → 0.1.99
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.
- package/dist/module.json +1 -1
- package/dist/runtime/components/Callout.vue +7 -0
- package/dist/runtime/components/EmptyState.vue +10 -2
- package/dist/runtime/components/FileRow.vue +15 -5
- package/dist/runtime/components/PageHeader.vue +13 -2
- package/dist/runtime/components/SearchBar.vue +27 -0
- package/dist/runtime/components/Table.vue +17 -0
- package/dist/runtime/components/TableCard.vue +12 -2
- package/dist/runtime/components/Tag.vue +10 -2
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
RmCallout - banniere d'alerte posee dans le flux, au-dessus de ce qu'elle
|
|
3
3
|
concerne.
|
|
4
4
|
|
|
5
|
+
ORIGINE AURIGA
|
|
6
|
+
--------------
|
|
7
|
+
Remplace `<arg-tips-box>`. Le contenu passait par un slot `#Text`, il passe
|
|
8
|
+
ici par le slot par defaut ou la prop `text`. Le repli (`have-more`) n'est
|
|
9
|
+
pas repris : un encart qui se replie cache justement ce qu'il est venu dire.
|
|
10
|
+
Les appels en `:have-more="false"` se traduisent tels quels.
|
|
11
|
+
|
|
5
12
|
Icone, texte, actions. Quatre tons semantiques, plus un neutre. C'est le
|
|
6
13
|
pendant en ligne de l'etat d'erreur (`RmErrorState`) : celui-la remplace un
|
|
7
14
|
contenu qui a echoue, celui-ci commente un contenu qui est bien la, « cette
|
|
@@ -2,8 +2,16 @@
|
|
|
2
2
|
Etat vide d'une liste ou d'une vue : une icone dans un disque, un titre, une
|
|
3
3
|
phrase, et l'action a faire.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
ORIGINE AURIGA
|
|
6
|
+
--------------
|
|
7
|
+
Remplace `<arg-errors>`. Les textes viennent de la page : le hors-perimetre
|
|
8
|
+
se dit, il ne s'estime pas.
|
|
9
|
+
|
|
10
|
+
| Auriga | Romulus |
|
|
11
|
+
|---------------|---------|
|
|
12
|
+
| `error-title` | `title` |
|
|
13
|
+
| `error-icon` | `icon` |
|
|
14
|
+
| `error-text` | `text` |
|
|
7
15
|
|
|
8
16
|
Le systeme de design demande trois choses de plus qu'un simple message.
|
|
9
17
|
D'abord une action, sauf s'il n'y a vraiment rien a faire : un ecran vide
|
|
@@ -2,11 +2,21 @@
|
|
|
2
2
|
Ligne de fichier : une icone qui dit le format, le nom du document, et a
|
|
3
3
|
droite ce que le clic va en faire.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
ORIGINE AURIGA
|
|
6
|
+
--------------
|
|
7
|
+
Remplace `<arg-file-btn>`, et la ligne que le panneau « Documents » du rail
|
|
8
|
+
redessinait chez lui. Les deux faisaient le meme objet : la carte bordee
|
|
9
|
+
d'Auriga portait un nom, une taille et deux liens (« Preview », « Download »)
|
|
10
|
+
qui appelaient en pratique la meme chose. Il ne reste que ce qui sert : le
|
|
11
|
+
format, le nom, une action.
|
|
12
|
+
|
|
13
|
+
| Auriga | Romulus | Note |
|
|
14
|
+
|---------------|----------|-----------------------------------------------|
|
|
15
|
+
| `name` | `name` | |
|
|
16
|
+
| `format` | `format` | accepte un type MIME ou un mot (`pdf`, `xlsx`)|
|
|
17
|
+
| `size` | `size` | |
|
|
18
|
+
| `have-preview` + `have-download` | `action` | un seul geste par ligne, `preview` / `open` / `download` / `none` |
|
|
19
|
+
| `@preview` / `@download` | `@select` | la page decide de ce que le clic fait |
|
|
10
20
|
|
|
11
21
|
La couleur de l'icone double la forme, elle ne la remplace pas : `ph-file-pdf`
|
|
12
22
|
et `ph-file-csv` ne se confondent pas en noir et blanc. Elle vient des tokens
|
|
@@ -1,10 +1,21 @@
|
|
|
1
1
|
<!--
|
|
2
2
|
Bandeau de page : le titre, un eventuel retour, et les actions de la page.
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
ORIGINE AURIGA
|
|
5
|
+
--------------
|
|
6
|
+
Remplace `<arg-header>` dans le cadre OIP 7. Il reste dans le flux et se
|
|
7
|
+
colle en haut de la colonne de contenu quand elle defile ; la barre de
|
|
6
8
|
filtres (RmFilterBar) se cale sous lui en suivant son id `rm_page_header`.
|
|
7
9
|
|
|
10
|
+
Les onglets changent de modele : Auriga numerotait, Romulus nomme.
|
|
11
|
+
|
|
12
|
+
| Auriga | Romulus | Note |
|
|
13
|
+
|----------------------------|------------------------------|---------------|
|
|
14
|
+
| `tabs: string[]` | `tabs: RmHeaderTab[]` | `{ key, label, active }` |
|
|
15
|
+
| `index_menu` (a partir de 1) | `active` porte par l'onglet | cote fr_drugs_app, `app/utils/headerTabs.ts` fait le pont |
|
|
16
|
+
| `@updateMenu` / `@update:Menu` | `@tab` | rend la cle, pas l'indice |
|
|
17
|
+
| `sur-titre dans #Title` | `eyebrow` | ATTENTION : le slot `#title` impose sa police et sa taille, un petit libelle pose dedans ressort en serif 32 px |
|
|
18
|
+
|
|
8
19
|
Il porte aussi les onglets de la page, sous le titre : c'etait la derniere
|
|
9
20
|
raison de garder `arg-header` dans les apps. Le dessin est celui des onglets
|
|
10
21
|
du bandeau de cadre (RmAppHeader) : libelle souligne quand il est actif.
|
|
@@ -1,3 +1,30 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
RmSearchBar - le champ de recherche d'une page, avec ses suggestions.
|
|
3
|
+
|
|
4
|
+
ORIGINE AURIGA
|
|
5
|
+
--------------
|
|
6
|
+
Reprend `<arg-search-input>` (`argSearchInput.vue`). Correspondance pour les
|
|
7
|
+
applications a migrer :
|
|
8
|
+
|
|
9
|
+
| Auriga | Romulus | Note |
|
|
10
|
+
|----------------------|--------------------|---------------------------------|
|
|
11
|
+
| `place-holder-value` | `placeholder` | |
|
|
12
|
+
| `v-model:Value` | `v-model` | modele par defaut |
|
|
13
|
+
| `default-value` | valeur du `v-model`| plus de prop separee |
|
|
14
|
+
| `suggestions` | `suggestions` | `{text}` devient `{label}` |
|
|
15
|
+
| `loading-suggs` | `loading` | |
|
|
16
|
+
| `highlight-input` | `highlight-match` | |
|
|
17
|
+
| `fuzzy-threshold` | - | le tri des suggestions revient a l'appelant |
|
|
18
|
+
| `lang` | `advanced-label` et les textes passes en props | pas de table de langue interne |
|
|
19
|
+
| `search-bar-id` | - | servait au suivi Posthog, sorti du composant |
|
|
20
|
+
| `@update:Value` | `@update:modelValue` | |
|
|
21
|
+
| `@submitSearch` | `@search` | |
|
|
22
|
+
| `@selectSuggestion` | `@select` | |
|
|
23
|
+
|
|
24
|
+
Ajoute par rapport a Auriga : `have-advanced` (le lien « Advanced search »
|
|
25
|
+
se retire sur une page qui n'en a pas), `advanced-active` et
|
|
26
|
+
`advanced-count` (l'etat du panneau se lit sur le champ).
|
|
27
|
+
-->
|
|
1
28
|
<script setup lang="ts">
|
|
2
29
|
import { onMounted, onUnmounted, ref } from 'vue'
|
|
3
30
|
import { PhMagnifyingGlass, PhX } from '@phosphor-icons/vue'
|
|
@@ -1,6 +1,23 @@
|
|
|
1
1
|
<!--
|
|
2
2
|
RmTable - la table du design system.
|
|
3
3
|
|
|
4
|
+
ORIGINE AURIGA
|
|
5
|
+
--------------
|
|
6
|
+
Remplace `<arg-table>`. Le modele change : Auriga posait des libelles de
|
|
7
|
+
tete et des lignes positionnelles, RmTable des colonnes nommees et des
|
|
8
|
+
lignes indexees par ces noms. Cote fr_drugs_app, `app/utils/valueTable.ts`
|
|
9
|
+
fait la conversion, a reprendre telle quelle dans les autres portails.
|
|
10
|
+
|
|
11
|
+
| Auriga | Romulus | Note |
|
|
12
|
+
|-------------------------|------------------------|-------------------------|
|
|
13
|
+
| `heads: string[]` | `columns: RmTableColumn[]` | `{ key, label, align, width, sortable }` |
|
|
14
|
+
| `contents: [{values}]` | `rows: Record<string, any>[]` | indexees par cle de colonne |
|
|
15
|
+
| slot nomme par `column-type` | slot nomme par cle de colonne | plusieurs colonnes partageaient un type, d'ou `typeKeys` cote app |
|
|
16
|
+
| colonne de type `More` | `expandable` + `#expanded="{ row }"` | la colonne sort de la tete, la charge reste dans la ligne |
|
|
17
|
+
| `columnStyle.size: number[]` | `width` par colonne | les parts d'Auriga se rendent en pourcentage |
|
|
18
|
+
| `columnStyle.align` | `align` par colonne | |
|
|
19
|
+
| `tableMaxHeight="600"` | `max-height="600px"` | ATTENTION : Auriga ajoutait `px`, ici la valeur est du CSS et un nombre nu desactive la hauteur en silence |
|
|
20
|
+
|
|
4
21
|
Des qu'il faut comparer plusieurs entites sur plusieurs dimensions. Pour une
|
|
5
22
|
seule metrique, c'est un KPI ; pour une liste sans structure de colonnes,
|
|
6
23
|
c'est une `<ul>`.
|
|
@@ -2,8 +2,18 @@
|
|
|
2
2
|
Carte qui porte un tableau de resultats : un en-tete (titre, provenance,
|
|
3
3
|
compte) et le tableau dessous.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
ORIGINE AURIGA
|
|
6
|
+
--------------
|
|
7
|
+
Remplace `<arg-chart-table-card :have-chart="false">`. Le tableau lui-meme
|
|
8
|
+
est un RmTable projete dans le slot par defaut.
|
|
9
|
+
|
|
10
|
+
| Auriga | Romulus |
|
|
11
|
+
|-----------|----------------|
|
|
12
|
+
| `#Title` | `#header` |
|
|
13
|
+
| `#Table` | slot par defaut|
|
|
14
|
+
| `have-chart` | - |
|
|
15
|
+
|
|
16
|
+
Avec un graphe (`have-chart` a vrai), c'est RmChartCard qu'il faut.
|
|
7
17
|
|
|
8
18
|
Slots : #header (titre, source, compte), default (le tableau et sa
|
|
9
19
|
pagination).
|
|
@@ -1,8 +1,16 @@
|
|
|
1
1
|
<!--
|
|
2
2
|
Etiquette courte : statut, categorie, valeur de filtre.
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
ORIGINE AURIGA
|
|
5
|
+
--------------
|
|
6
|
+
Remplace `<arg-tags>`, palette identique (memes teintes a 10 % et memes
|
|
7
|
+
couleurs de texte) pour que les pages migrees gardent leur rendu.
|
|
8
|
+
|
|
9
|
+
| Auriga | Romulus |
|
|
10
|
+
|--------------|------------|
|
|
11
|
+
| `set-style` | `variant` |
|
|
12
|
+
| `have-close` | `closable` |
|
|
13
|
+
| `@on-close` | `@close` |
|
|
6
14
|
Sans `mask-image: paint(squircle)` : ce masque n'etait pas peint par Chrome
|
|
7
15
|
a l'interieur d'un lien, les etiquettes disparaissaient.
|
|
8
16
|
-->
|