Des interfaces tissées main pour Vue 3

De grands outils, un seul système de tokens, de thèmes et de langues, et prête pour les agents IA.

InstallationBientôt disponibleNous préparons l’accès à Trama. Vous pourrez bientôt le demander ici.

Version 9.2.4

Ce que c’est

Des outils prêts pour la production, un seul système de design et prête pour les agents.

De grands outils, de série
Une grille de cent mille lignes, kanban, Gantt, diagrammes, agenda, gestionnaire de fichiers et éditeur de PDF. Ce que d’autres bibliothèques vendent en option payante ou en paquet à part.
Un seul système
Les mêmes tokens, thèmes, langues et rythme d’espacement dans chaque pièce. Changer le thème change tout, en sombre aussi et avec un contraste AA.
Prête pour les agents
Un serveur MCP pour que les agents de code l’utilisent bien et un moteur de rendu A2UI pour que les agents d’interface dessinent avec elle.

composants: 105
langues complètes: 4
familles de thèmes: 7
fichiers de tests: 637

Chiffres comptés au build à partir du code de la bibliothèque.

Composants vedettes

Tableau, liste de lignes, kanban, Gantt, diagrammes et agenda : réels et à manipuler.

01
TrDataGrid
Cent mille commandes générées dans votre navigateur, virtualisées, regroupées par région et avec un filtre avancé. Triez, filtrez, recherchez ou regroupez par une autre colonne.
- Virtualisation
- Filtre avancé
- Groupes et totaux
- Édition en ligne
- Export Excel
- Vues enregistrées
À essayer: Ouvrez « Filtre avancé » et combinez des conditions avec ET et OU.
Chargement de la démo… TrDataGrid
02
TrRailList
Les mêmes données que le tableau, en lignes sans <table> : titre, sous-titre et un rail de colonnes alignées qui s’adapte à la largeur. Groupez, cherchez, réordonnez par glisser et créez ou modifiez dans un panneau latéral.
- Zones selon la largeur
- Groupes
- Réordonner par glisser
- Édition en panneau latéral
- Filtre avancé
- Arbre
À essayer: Faites glisser une commande par sa poignée vers un autre groupe de statut.
Chargement de la démo… TrRailList
03
TrKanban
Glissez des cartes entre les colonnes avec la souris, le doigt ou le clavier. Limite de travail en cours, couloirs, liste avec sous-tâches et annulation.
- Glisser au clavier
- Limite WIP
- Couloirs
- Sous-tâches
- Annuler
- Vues tableau et calendrier
À essayer: Déplacez une carte vers « En cours » et dépassez trois.
Chargement de la démo… TrKanban
04
TrGantt
Phases, jalons et dépendances avec le chemin critique mis en évidence. Déplacez ou étirez une barre et le plan se recalcule.
- Dépendances
- Chemin critique
- Jalons
- Ressources et charge
- Référence
- Planification automatique
À essayer: Glissez « Prototype » vers la droite.
Chargement de la démo… TrGantt
05
TrDiagram
Un tableau blanc modifiable sur son propre canevas : nœuds, connexions, styles et mini-carte. Ce flux a été écrit en Mermaid.
- Canevas propre
- Formes et liens
- Mini-carte
- Mermaid
- Export SVG et PNG
- Placement automatique
À essayer: Glissez depuis le point d’un nœud jusqu’à un autre pour les relier.
Chargement de la démo… TrDiagram
06
TrSchedule
Un agenda avec les vues jour, semaine, mois et liste ; ressources, calendriers de travail et récurrences. Créez un événement en glissant sur un créneau libre.
- Jour, semaine et mois
- Ressources
- Récurrences
- Calendriers de travail
- Glisser et étirer
- Pièces jointes
À essayer: Allongez « Réunion d’équipe » d’une demi-heure.
Chargement de la démo… TrSchedule

La bibliothèque

Au-delà des outils, une immense bibliothèque de composants avec le même design, les mêmes thèmes et les mêmes règles.

105composants prêts pour la production, des boutons aux outils complets.

Formulaires 34
Champs, sélecteurs, éditeurs et envoi de fichiers, avec validation.
- TrButton
- TrSplitButton
- TrChoiceButton
- TrToggleButton
- TrInput
- TrInputNumber
- TrInputPassword
- TrInputOtp
- TrInputTag
- TrInputGroup
- TrCheckbox
- TrRadioButton
- TrRadioGroup
- TrToggleSwitch
- TrSlider
- TrRating
- TrSelect
- TrMultiSelect
- TrCascadeSelect
- TrTreeSelect
- TrCardSelect
- TrPickList
- TrAutoComplete
- TrColorPicker
- TrIconPicker
- TrDatePicker
- TrTypedValue
- TrSortableChipGrid
- TrSignature
- TrMarkdownEditor
- TrFileUpload
- TrFileManager
- TrPdfEditor
- TrVoiceInput
Données 22
Tableaux, listes, tableaux kanban, planification, diagrammes et requêtes.
- TrDataGrid
- TrDataGridToolbar
- TrRailList
- TrRailRow
- TrListRow
- TrKanban
- TrGantt
- TrSchedule
- TrDiagram
- TrQueryBuilder
- TrLocaleCatalog
- TrTree
- TrTimeline
- TrPaginator
- TrColumnHead
- TrPickItem
- TrCard
- TrAvatar
- TrBadge
- TrChip
- TrTag
- TrInplace
Mise en page 16
Formulaires, colonnes, panneaux et barres qui s’adaptent à la largeur.
- TrForm
- TrField
- TrFieldset
- TrColumns
- TrFlexColumns
- TrFluid
- TrHeader
- TrFooter
- TrToolbar
- TrPanel
- TrAccordion
- TrSplitPanel
- TrSortableList
- TrDataList
- TrDivider
- TrFocusTrap
Calques 10
Fenêtres, panneaux latéraux, menus et bulles avec une animation commune.
- TrModal
- TrDrawer
- TrPopover
- TrTooltip
- TrContextMenu
- TrConfirmPopup
- TrConfirmHost
- TrDialogHost
- TrFilePreview
- TrHelpGuide
Navigation 9
Menus, onglets, étapes, index de défilement et palette de commandes.
- TrSidebar
- TrTabs
- TrSegmented
- TrSteps
- TrBreadcrumb
- TrCommandMenu
- TrScrollIndex
- TrScrollProgress
- TrScrollTop
Retours 6
Messages, progression, squelettes et apparitions au défilement.
- TrToast
- TrMessage
- TrProgressBar
- TrSkeleton
- TrLoadingOverlay
- TrScrollReveal

Ce que les autres bibliothèques n’ont pas

Un seul circuit de modifications
Tableau, liste, kanban, Gantt et diagramme se modifient de la même façon : gardes, annuler et rétablir, et enregistrement optimiste annulé si le serveur échoue.
Vraiment adaptative
Chaque composant mesure son conteneur : sur mobile, cibles tactiles, feuilles depuis le bas, appui long et gestes.
Prête pour l’IA
Un serveur MCP pour les agents de code et un moteur de rendu A2UI pour qu’un agent dessine l’interface avec de vrais composants.
Concepteur de thèmes
Jetons sémantiques, modes clair et sombre, et réglages par composant sans toucher au code.
Accessible par défaut
Clavier complet, focus itinérant, annonces pour lecteur d’écran et mouvement réduit respecté.
Quatre langues incluses
Tous les textes en espagnol, anglais, français et portugais, chargés seulement quand il le faut.
Performance surveillée
Virtualisation, chargement à la demande et budgets de poids et de montage vérifiés par des tests.
Outils maison, sans dépendances lourdes
Visionneuse et éditeur PDF, envoi par morceaux, voix en local et diagrammes, faits maison avec la même API.

Catalogue

Les grands outils et les briques de base, avec les mêmes jetons, thèmes et langues.

Outils

TrDataGridTableau de données virtualisé avec filtres, groupes, édition et export.
TrRailListListe de lignes avec zones, groupes, réordonnancement et édition, sans <table>.
TrKanbanTableau à colonnes, couloirs, limites WIP et plusieurs vues.
TrGanttPlanification avec dépendances, chemin critique et ressources.
TrDiagramTableau blanc modifiable et diagrammes depuis des données ou Mermaid.
TrScheduleAgenda jour, semaine et mois avec ressources et récurrences.
TrQueryBuilderConstructeur visuel de requêtes avec SQL paramétré.
TrFileManagerGestionnaire de dossiers avec arbre, mosaïque et ZIP.
TrFileUploadEnvoi de fichiers avec progression, nouvel essai et morceaux.
TrFilePreviewVisionneuse d’images, PDF, vidéo, audio et texte.
TrPdfEditorÉditeur PDF : pages, texte, images et formulaires.
TrMarkdownEditorÉditeur Markdown visuel avec aperçu.
TrVoiceInputDictée et commandes vocales en local, sans cloud.
TrLocaleCatalogÉditeur de catalogues de textes pour vue-i18n.

Briques de base

TrFormFormulaires avec validation, champs et envoi.
TrCommandMenuPalette de commandes avec recherche et clavier.
TrModal · TrDrawerFenêtres et panneaux latéraux avec focus et animation commune.
TrA2uiSurfaceInterfaces dessinées par un agent d’IA avec le protocole A2UI.

Thèmes et concepteur

Sept familles de thèmes en clair et en sombre, avec un contraste AA.

Classique

Doux

Sarcelle

Aigue-marine

Cuivre

Blueharbor

Blueharbor large

Chargement de la démo… Composants réels avec le thème actif

IA : MCP et A2UI

Un serveur MCP pour les agents de code et un moteur de rendu A2UI pour les agents d’interface.

Agents de code : MCP

Le serveur MCP trama donne à votre agent le manifeste de chaque composant, valide les vues qu’il écrit et lui rappelle les règles. Il écrit du Trama correct du premier coup.

Terminal simulé : un agent utilise le MCP trama

> Haz una tabla de pedidos con filtro avanzadotrama.get_component({ name: "TrDataGrid" })  ← props: rows, columns, advancedFilter, toolbar… (128)<TrDataGrid :rows="pedidos" :columns="columnas"  advanced-filter :toolbar="{ actions: ['search'] }" />trama.validate_view({ source: "PedidosView.vue" })  ✓ 0 errores · 0 avisos · ritmo y v-model correctos

Agents d’interface : A2UI

Un agent décrit l’interface avec des messages A2UI et TrA2uiSurface la dessine avec des composants réels, derrière une garde de sécurité. Ici, un agent simulé, sans réseau ni clé.

Chargement de la démo… Surface A2UI dessinée par un agent simulé

Adaptatif

Mobile, tablette et web : les composants mesurent leur conteneur.

La même grille, dans un cadre qui se rétrécit en défilant : à chaque palier elle change de mode (colonnes par priorité, cartes) parce qu’elle mesure sa propre largeur, pas la fenêtre. Ensuite, étirez-la vous-même avec la poignée.

Chargement de la démo… Adaptatif

Performances

Des chiffres mesurés sur le banc, pas promis.

Poids de TrDataGrid
Avant897 KoMaintenant513 Ko
Trier 1 000 × 20 lignes regroupées
Avant2 724 msMaintenant124 ms
Nœuds du DOM en triant 1 000 × 20 lignes regroupées
Avant22 206Maintenant1 153
watch au montage d’une grille
Avant64Maintenant27
onMounted au montage d’une grille
Avant14Maintenant5

Banc perf:grid de la bibliothèque (happy-dom), phases 1 à 5 de performances de TrDataGrid. Les millisecondes sont relatives ; les compteurs, exacts.

Installation

Depuis GitHub Packages, avec pnpm, npm ou yarn.

Pointez le scope @javeintimilla vers GitHub Packages dans le .npmrc de votre projet (avec un jeton de lecture des paquets).
.npmrc
```
@javeintimilla:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=TU_TOKEN
```
Installez la bibliothèque.
terminal
pnpm add @javeintimilla/trama
Chargement de la démo… Gestionnaire de paquets

Importez les styles et utilisez votre premier composant.

main.ts

import { createApp } from 'vue'
import '@javeintimilla/trama/styles.css'
import App from './App.vue'

createApp(App).mount('#app')

App.vue

<script setup lang="ts">
import { TrButton } from '@javeintimilla/trama'
</script>

<template>
  <TrButton variant="primary" icon="add" label="Hola, Trama" />
</template>

Le paquet et la vitrine sont privés pour l’instant ; l’accès ouvrira bientôt. Bientôt disponibleNous préparons l’accès à Trama. Vous pourrez bientôt le demander ici.

Des interfaces tissées main pour Vue 3

De grands outils, de série

Un seul système

Prête pour les agents

TrDataGrid

TrRailList

TrKanban

TrGantt

TrDiagram

TrSchedule

Formulaires 34

Données 22

Mise en page 16

Calques 10

Navigation 9

Retours 6

Ce que les autres bibliothèques n’ont pas

Un seul circuit de modifications

Vraiment adaptative

Prête pour l’IA

Concepteur de thèmes

Accessible par défaut

Quatre langues incluses

Performance surveillée

Outils maison, sans dépendances lourdes

Outils

Briques de base

Agents de code : MCP

Agents d’interface : A2UI

Poids de TrDataGrid

Trier 1 000 × 20 lignes regroupées

Nœuds du DOM en triant 1 000 × 20 lignes regroupées

watch au montage d’une grille

onMounted au montage d’une grille