Système de composants d’entreprise · Nouvelle ressource
Système de design Vuestic UI.
Fiche d’évaluation Vuestic native, avec thèmes clair et sombre vérifiés dans les sources, libellés de notation accessibles, validation de la zone de texte, moyenne calculée et état enregistré qui conserve l’évaluation terminée.
Vuestic UI 1.10.3 avec Vue 3 ; Material Icons inclus localement via @quasar/extras 2.1.0. · Référence de mise en œuvre
02
Référence de design du système de design Vuestic UI
Vuestic UI 1.10.3. Les valeurs des préréglages proviennent du service de couleurs installé et les variables des composants, de son CSS. La fiche conserve le préréglage clair par défaut, mais remplace volontairement --va-font-family par system-ui. Les formes décoratives et l’échelle environnante sont originales.
Système de design Vuestic UI — bibliothèque Vue configurable avec des préréglages de couleurs nommés
Une bibliothèque Vue configurable avec des préréglages de couleurs nommés
Vuestic enregistre ses services partagés via createVuestic. L’exemple utilise des composants natifs importés depuis vuestic-ui et le préréglage de couleurs clair par défaut. La notation, les boutons, la barre de progression et l’alerte de réussite résolvent leurs noms de couleurs sémantiques via ce même service.
La fiche de travail met concrètement ces composants en application : elle distingue trois questions d’évaluation, recueille une observation à l’appui, calcule une moyenne et verrouille un résultat enregistré localement. Les repères colorés des critères et la composition sur deux colonnes relèvent de la conception propre à l’application, et non de composants Vuestic supplémentaires.
Système de design Vuestic UI : distinguer les préréglages du service des variables de géométrie CSS
Distinguer les préréglages du service des variables de géométrie CSS
Le préréglage clair vérifié définit primary #154EC1, success #3D9209 et textPrimary #262824. Son préréglage sombre utilise des valeurs différentes pour primary, le texte et les surfaces ; il ne se contente pas d’inverser la page claire. Le tableau de référence présente les deux préréglages, tandis que l’aperçu reste volontairement en mode clair.
La géométrie des composants se configure à l’aide de variables CSS telles que --va-button-border-radius et --va-form-element-border-radius, toutes deux définies à 0.25rem dans la feuille de style installée. Un préréglage de couleurs et la surcharge d’une variable CSS répondent à des besoins différents : utilisez le service pour les rôles sémantiques et la variable documentée pour la géométrie prise en charge des composants.
Système de design Vuestic UI : charger les icônes requises et définir la surcharge de police
Charger les icônes requises et définir la surcharge de police
La valeur par défaut de --va-font-family dans Vuestic désigne Source Sans Pro. L’exemple remplace cette variable par system-ui, plutôt que de dépendre implicitement d’une police qui n’a jamais été chargée. Les libellés des composants natifs et le texte de l’application utilisent ainsi la même pile de polices, explicitement disponible.
Les icônes de notation par défaut utilisent des noms de Material Icons, comme star et star_outline. Leur feuille de style de police locale est importée depuis @quasar/extras et intégrée avec les fichiers de police correspondants. Sans cette ressource, les mots littéraux des icônes peuvent remplacer les étoiles attendues. La police des icônes reste distincte de la substitution de la famille de polices du texte de l’application.
Système de design Vuestic UI : utiliser zéro comme état sans réponse, plutôt que comme mauvaise note
Utiliser zéro comme état sans réponse plutôt que comme mauvaise note
Chaque VaRating est lié à la valeur numérique d’un critère. Sa valeur max est cinq et l’option clearable est activée : sélectionner à nouveau la note actuelle permet donc de ramener ce critère à zéro. Pour une valeur nulle, l’interface affiche « Non évalué » au lieu de la présenter comme une note définitive de zéro sur cinq.
La moyenne est calculée en divisant la somme des notes par le nombre de notes positives. Les critères sans réponse ne pénalisent ainsi pas la fiche en cours de remplissage. L’enregistrement exige toutefois une réponse pour les trois critères, afin que la moyenne finale reflète toujours l’évaluation complète. Toute modification d’une note met immédiatement à jour l’indicateur de complétion, la barre de progression et le récapitulatif.
Enregistrez la fiche vierge et examinez les messages relatifs aux notes manquantes et à l’observation.
Attribuez 4 à la clarté, 3 à la hiérarchie et 2 aux commentaires : la moyenne passe à 3.0.
Rédigez une observation concrète et enregistrez-la, puis utilisez « Recommencer » pour réinitialiser toute la fiche.
Système de design Vuestic UI : une observation utile exige un texte pertinent et suffisamment d’espace
Une observation utile nécessite un texte pertinent et suffisamment d’espace
VaTextarea affiche un libellé visible, limite le texte à quatre cents caractères et présente un compteur. Après une tentative d’enregistrement, l’application vérifie que la valeur, une fois les espaces superflus supprimés, comporte au moins vingt caractères. Une chaîne composée d’espaces ne peut donc pas satisfaire cette exigence, même si sa longueur nominale suffit.
La zone de texte active l’ajustement automatique de la hauteur, avec un minimum de quatre lignes et un maximum de douze. Il s’agit d’un paramètre fonctionnel, et non d’une simple propriété illustrative : sans cet ajustement, le réglage du nombre minimal de lignes ne produisait pas la zone de saisie extensible souhaitée. La version corrigée laisse visible l’observation sur les écrans étroits, tout en conservant le défilement normal pour les notes exceptionnellement longues.
Système de design Vuestic UI : calculer la progression selon les critères remplis, et non selon la moyenne des notes
Calculer la progression à partir des tâches terminées, et non de la moyenne des notes
La barre de progression indique le nombre de critères ayant reçu une réponse positive, exprimé ainsi : nombre de critères notés divisé par trois, puis multiplié par cent. Le grand nombre affiché à côté correspond à la moyenne des notes. Ces deux mesures reposent sur des dénominateurs différents et ne doivent pas être confondues : trois notes faibles peuvent tout de même représenter un taux de complétion de cent pour cent.
La phrase de complétion indique directement le numérateur et le dénominateur. La moyenne porte le libellé « Moyenne des critères notés », et le récapitulatif reprend la note de chaque critère. Ces libellés aident à comprendre le calcul, plutôt qu’à interpréter une barre de progression sans explication comme une évaluation globale de la qualité.
Système de design Vuestic UI : verrouiller une évaluation locale terminée jusqu’à sa réinitialisation explicite
Verrouiller une évaluation locale terminée jusqu’à une réinitialisation explicite
Lors de l’enregistrement, l’application active d’abord l’indicateur de tentative, puis vérifie que toutes les notes et l’observation sont renseignées avant d’activer l’état enregistré. Cet état rend les notes et la zone de texte en lecture seule et désactive le bouton d’enregistrement. L’alerte de réussite précise que l’évaluation a été enregistrée localement et qu’aucune donnée n’a été envoyée.
L’action « Recommencer » efface en une seule opération toutes les notes, l’observation, les messages de validation et l’état d’enregistrement. Ce comportement est volontairement explicite : sinon, la modification d’une valeur après l’enregistrement rendrait la confirmation obsolète. L’exemple ne suppose l’existence d’aucun serveur, compte ni destinataire de l’évaluation.
Système de design Vuestic UI : nommer chaque élément de notation avec son critère et sa valeur
Nommer chaque élément de notation avec son critère et sa valeur
Les éléments natifs de VaRating exposent des boutons dans l’arborescence d’accessibilité. aria-item-label comprend le nom du critère ainsi que les espaces réservés pour la valeur et le maximum, ce qui produit des libellés tels que « Note de clarté : 4 sur 5 ». Cela évite de présenter quinze commandes en forme d’étoile impossibles à distinguer lorsque trois notations figurent sur la même page.
La zone de texte possède son propre libellé visible, la barre de progression indique la complétion et l’alerte d’enregistrement constitue une région d’état. Les repères décoratifs des critères sont masqués aux technologies d’assistance. Les vérifications locales ont activé les vrais boutons de notation dotés de libellés, testé la validation et examiné la mise en page finale à 280px, plutôt que de se fier uniquement à la présence d’attributs ARIA.
Attribuez à chaque note répétée un libellé d’élément propre à son critère.
Distinguez visiblement les états sans réponse et en lecture seule.
Vérifiez le récapitulatif numérique après avoir utilisé les contrôles natifs réels.
Système de design Vuestic UI Inclure le plugin, le composant CSS et la ressource d’icône locale
Inclure le plugin, le composant CSS et la ressource d’icône locale
Le point d’entrée enregistre createVuestic et importe vuestic-ui/css avant la feuille de style de mise en page d’origine. App.vue importe chaque composant utilisé ; l’exemple ne dépend donc pas d’une configuration d’import automatique non documentée. La surcharge de police partagée est appliquée après la bibliothèque CSS.
La commande du package inclut @quasar/extras uniquement comme source de la police locale Material Icons ; elle n’enregistre pas Quasar et ne mélange pas ses composants à la feuille d’exercice. Le SFC complet et la feuille de style ci-dessus peuvent être intégrés à la configuration Vite Vue ci-dessous. L’aperçu autonome généré intègre les ressources requises et ne récupère aucune police distante.
Exemples de composants du système de design Vuestic UI
Feuille d’évaluation complète avec contrôles natifs
VaRating, VaTextarea, VaButton, VaChip, VaProgressBar et VaAlert sont reliés à un même modèle d’évaluation.
vue
<script setup>
import {ref,computed} from 'vue';
import {VaRating,VaTextarea,VaButton,VaAlert,VaChip,VaProgressBar} from 'vuestic-ui';
const criteria=ref([{name:'Clarity',hint:'Can you tell what the next action will do?',value:0},{name:'Hierarchy',hint:'Does the most important information stand out?',value:0},{name:'Feedback',hint:'Does the page explain what changed?',value:0}]);
const note=ref(''),attempted=ref(false),saved=ref(false);
const rated=computed(()=>criteria.value.filter(x=>x.value>0).length),average=computed(()=>rated.value?(criteria.value.reduce((a,x)=>a+x.value,0)/rated.value).toFixed(1):'—');
const noteError=computed(()=>attempted.value&¬e.value.trim().length<20);
function save(){attempted.value=true;if(rated.value===3&¬e.value.trim().length>=20)saved.value=true}
function reset(){criteria.value.forEach(x=>x.value=0);note.value='';saved.value=false;attempted.value=false}
</script>
<template><main class="review-shell"><header><p class="eyebrow">DESIGN CRITIQUE · PERSONAL WORKSHEET</p><h1>Turn an impression into useful feedback.</h1><p>Review an interface using three specific questions. Keep one concrete observation alongside the scores.</p></header><div class="review-layout"><section class="review-form"><div class="form-head"><h2>Your assessment</h2><VaChip outline size="small">{{rated}} of 3 rated</VaChip></div><div v-for="(criterion,index) in criteria" :key="criterion.name" class="criterion"><div class="criterion-mark" :class="'mark-'+index" aria-hidden="true"><i></i><b></b></div><div class="criterion-body"><h3>{{criterion.name}}</h3><p>{{criterion.hint}}</p><VaRating v-model="criterion.value" :max="5" clearable color="primary" :readonly="saved" :aria-label="criterion.name+' rating: '+criterion.value+' of 5'" :aria-item-label="criterion.name+' score {value} of {max}'"/><span class="score">{{criterion.value?criterion.value+' / 5':'Not rated'}}</span></div></div><p v-if="attempted&&rated<3" class="error" role="alert">Rate all three criteria before saving.</p><VaTextarea v-model="note" label="One concrete observation" placeholder="For example: the Save button gives no confirmation after the form closes." autosize :min-rows="4" :max-rows="12" :max-length="400" counter :error="noteError" :error-messages="noteError?['Write at least 20 meaningful characters.']:[]" :readonly="saved"/><div class="actions"><VaButton @click="save" :disabled="saved">Save assessment</VaButton><VaButton preset="secondary" @click="reset">Start again</VaButton></div></section><aside><div class="summary"><p class="eyebrow">ASSESSMENT SNAPSHOT</p><div class="average">{{average}}<span>/ 5</span></div><p class="average-label">Average of rated criteria</p><VaProgressBar :model-value="rated/3*100" color="primary" aria-label="Criteria completion"/><p class="completion">{{rated}} of 3 criteria completed</p><p class="guidance">A score starts a conversation. Your example explains what should change and why.</p><dl><div v-for="criterion in criteria" :key="criterion.name"><dt>{{criterion.name}}</dt><dd>{{criterion.value||'—'}}</dd></div></dl></div><VaAlert v-if="saved" color="success" outline class="saved" role="status"><strong>Assessment saved locally.</strong><p>All three criteria and your observation are captured in this preview. Nothing was sent.</p></VaAlert><p v-else class="local-note">This worksheet stores only local page state. It does not submit a review to another person.</p></aside></div></main></template>
Material Icons conserve sa propre famille de polices.
Aucune hauteur minimale du document n’est utilisée.
04
Configuration de l’agent IA du système de design Vuestic UI
Point de départ de l’implémentation
Versions vérifiées : Vuestic UI 1.10.3 et Material Icons local depuis @quasar/extras 2.1.0. Les deux exemples de code complets sont fournis ; aucun service de polices externe n’est nécessaire.
javascript
// npm create vite@latest vuestic-review -- --template vue
// cd vuestic-review && npm install
// npm install [email protected] @quasar/[email protected]
// Save the complete examples as src/App.vue and src/style.css.
// src/main.js:
import {createApp} from 'vue';
import {createVuestic} from 'vuestic-ui';
import 'vuestic-ui/css';
import '@quasar/extras/material-icons/material-icons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(createVuestic()).mount('#app');
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
Un prompt pour votre projet
Prompt pour l’agent IA
Utilisez Vuestic UI 1.10.3 pour reproduire la feuille d’évaluation de conception avec trois critères VaRating natifs, VaTextarea, une barre de progression, un état et des commandes d’enregistrement/réinitialisation. Calculez la moyenne à partir des critères notés et exigez les trois notes ainsi qu’une note de vingt caractères après suppression des espaces superflus avant l’enregistrement. Conservez la zone de texte à ajustement automatique afin que toute l’évaluation reste visible, et veillez à la cohérence de l’état en lecture seule après l’enregistrement et du comportement de réinitialisation. Incluez createVuestic, CSS natif et la police d’icônes locale. Il s’agit d’un compte rendu d’évaluation local, pas d’un service de traitement de lots d’inspection.
05
Sources et périmètre du système de design Vuestic UI
Vuestic UI 1.10.3 avec le préréglage de couleurs claires par défaut et une surcharge explicite de la police système. Questions d’évaluation et illustrations d’origine. L’état enregistré est local : aucune soumission d’évaluation externe ni persistance après rechargement.
