Tableaux

Tableau simple

Plus large que la pièce

Tableau avec actions

Lignes rayées, éclairées sous le pointeur

Lignes pouvant être cochées

Une case en tête de chaque ligne, une dans l'en-tête pour toutes, et les actions au-dessus : elles envoient les lignes cochées à leur propre adresse, et restent hors de portée tant que rien n'est coché.

Fichiers, un total, une action sur chaque ligne

Chemins lus par leur nom, les dossiers avant étant coupés de leur début. La barre se termine sur combien de lignes il y a, et une action marquée `all` fonctionne sans rien coché — elle prend chaque ligne, et mène la barre quand c'est celle attendue.

Filtres

Une barre de filtres en tête de la table, un menu discret chacun, indiquant ce qu'il réduit une fois activé. Sur le serveur, ils vivent dans la requête de la page — chaque option est un lien — et le contrôleur réduit les lignes à partir de cela ; en Vue, elles sont une valeur remise à la page pour son API, ou appliquées par la table aux lignes qu'elle a déjà. Chaque option est une case — ronde pour un choix unique — colorée par son ton lorsqu'elle en a un, un état ou une catégorie.

Tri

Un en-tête qui trie est un lien sur le serveur et un bouton en Vue : croissant, décroissant, puis retour à l'ordre déclaré par la page, sur lequel la liste s'ouvre et que sa flèche montre dès le départ. Les dates vides vont en dernier dans les deux sens, et les noms se comparent selon l'ordre de la langue. Ici, la table trie les lignes qui lui ont été données ; un contrôleur paginant sa liste lit la même requête à la place.

Tri dans le navigateur, depuis twig

`vue: true` transmet les mêmes colonnes et lignes au jumeau vue : il trie et recherche toute la liste dans le navigateur, sans chargement de page. Pour une liste que la page détient entière — une courte, ou une que aucune API ne sert.

Actions dans une sélection

La même barre quand il y a assez d'actions pour l'encombrer : une est choisie, puis appliquée.

Cellules avec lien et icône

État de chargement

État vide

Alignement des colonnes

Codes, chiffres et totaux

`cell: 'code'` définit un identifiant dans la police mono ; `cell: 'number'`, ou une `unit`, écrit un chiffre dans le format local de la page. `negative: true` dessine un chiffre en dessous de zéro dans le ton d'erreur, son signe moins le dit aussi. `totals` est une ligne que la page remet, dessinée sous les autres — la table n'additionne rien, tenant une page ou une liste filtrée. Dessinée par le serveur, puis par vue.

Depuis markdown

Une table écrite en markdown et passée par `markdown_ds` : les colonnes, leur alignement et le balisage de chaque cellule sont lus à partir du document, et la table est dessinée ici comme n'importe quelle autre. `markdown` conserve le simple `<table>`, pour tout ce qui n'est pas une page — un mail, un fil.

Groupes de lignes

Une ligne portant uniquement un groupe n'est pas une ligne : c'est la ligne entre deux séries, donnée par un mot. Elle s'étend sur la table et nomme ce qui suit — la même lecture qu'un séparateur de menu.

Cellules d'état

Un état est un cercle, jamais une couleur choisie par quelqu'un : la cellule prend un nom de type, ou un type avec un compte et un titre, et dessine l'icône de statut que le reste du système dessine. Rien à styliser dans la page.

En-tête fixe

Une longue table est lue colonne par colonne autant que ligne par ligne. Avec `sticky`, l'en-tête reste visible pendant que les lignes défilent en dessous ; une page avec quelque chose de fixé en haut indique combien de distance en `--table-sticky-top`.

Un tableau dans sa zone

Une zone `zone--table` est donnée au tableau tout entier : ce qui le pilote en haut, ses pages en bas, hors de ce qui défile, et entre les deux le fond du tableau jusqu'en bas de la zone, même pour trois lignes. Tout tableau y va, écrit par le serveur ou par une vue. Avec `natural`, comme celui de gauche, le tableau garde la largeur de ses colonnes, ni étiré ni serré.

Tableau d'entités Vue

Tableau Vue avec sélection

Le même contrat côté client : les clés cochées reviennent par v-model:selected, chaque action est émise comme action de masse, et une avec une adresse est postée comme la table du serveur le poste. Celles-ci n'en ont aucune, donc la ligne ci-dessous indique ce qui aurait été fait. Trois lignes par page, le total à la fin de la barre, et Archiver tout nécessitant aucune coche.

Pagination sans total

Lorsque l'API ne renvoie pas de total, le pager revient à précédent/suivant.

Pagination, générée par le serveur

`pagination(page, pages_count)` génère les pages d'une liste sous forme de liens : chacune conserve la route et la requête de la page sur laquelle elle se trouve — une recherche, un tri — et ne change que `page`, comptée à partir de 1. Les numéros affichés sont ceux du pager vue : le premier, le dernier, celui en cours et ses voisins. `compact` maintient les précédents et suivants autour du numéro de page ; `route` et `params` naviguent à une autre adresse.

Formateurs de date Vue