Un foglio di valutazione nativo Vuestic con preset chiari e scuri verificati sulle fonti, etichette di valutazione accessibili, convalida delle aree di testo, media calcolata e uno stato salvato che conserva la valutazione completata.
Riferimento di progettazione del sistema di progettazione sistema di design Vuestic UI
Vuestic UI 1.10.3. I valori dei preset vengono letti dal servizio dei colori installato e le variabili dei componenti dal suo CSS. La scheda mantiene il preset chiaro predefinito, ma sovrascrive intenzionalmente --va-font-family con system-ui. Le forme decorative e la scala circostante sono originali.
Sistema di progettazione sistema di design Vuestic UI: una libreria Vue configurabile con preset di colore denominati
Una libreria Vue configurabile con preset di colore denominati
Vuestic registra i propri servizi condivisi tramite createVuestic. L’esempio usa componenti nativi importati da vuestic-ui e il preset di colore chiaro predefinito. Valutazione, pulsanti, barra di avanzamento e avviso di successo risolvono i nomi dei colori semantici tramite lo stesso servizio.
La scheda è un’applicazione concreta di questi componenti: separa tre domande di valutazione, raccoglie un’osservazione di supporto, calcola una media e blocca un risultato locale salvato. I contrassegni colorati dei criteri e la composizione a due colonne sono scelte originali di progettazione dell’applicazione, non componenti aggiuntivi di Vuestic.
Sistema di progettazione sistema di design Vuestic UI: distinguere i preset del servizio dalle variabili geometriche di CSS
Distinguere i preset del servizio dalle variabili geometriche di CSS
Il preset chiaro verificato definisce primary #154EC1, success #3D9209 e textPrimary #262824. Il preset scuro usa valori diversi per primary, text e surface, invece di limitarsi a invertire i colori della pagina chiara. La tabella di riferimento riporta entrambi i preset, mentre l’anteprima rimane intenzionalmente in modalità chiara.
La geometria dei componenti si configura tramite variabili CSS come --va-button-border-radius e --va-form-element-border-radius, entrambe pari a 0.25rem nel foglio di stile installato. Un preset di colori e un override di variabili CSS risolvono problemi diversi: usa il servizio per i ruoli semantici e la variabile documentata per la geometria dei componenti supportata.
Sistema di design Vuestic UI sistema di progettazione: carica le icone necessarie e dichiara l’override del font
Carica le icone necessarie e dichiara l’override del font
Il valore predefinito di --va-font-family di Vuestic indica Source Sans Pro. L’esempio sovrascrive questa variabile con system-ui, senza dipendere implicitamente da un font mai caricato. Le etichette dei componenti nativi e il testo dell’applicazione condividono quindi uno stack di font esplicito e disponibile.
Le icone di valutazione predefinite usano nomi di Material Icons come star e star_outline. Il foglio di stile del font locale viene importato da @quasar/extras e incluso nel bundle insieme ai relativi file. Senza questa risorsa, al posto delle stelle previste potrebbero comparire le parole letterali delle icone. Il font delle icone è mantenuto separato dall’override della famiglia di caratteri del testo dell’applicazione.
Sistema di design Vuestic UI sistema di progettazione: usa zero come stato senza valutazione, non come punteggio basso
Usare zero come stato senza risposta anziché come punteggio basso
Ogni VaRating è associato al valore numerico di un criterio. Il valore max è cinque e clearable è abilitato, quindi selezionare di nuovo il punteggio corrente può riportare quel criterio a zero. Nell’interfaccia, zero è indicato come «Non valutato», anziché essere presentato come un giudizio completo pari a zero su cinque.
La media è calcolata dividendo per il numero di valutazioni positive. In questo modo i criteri senza risposta non incidono sul risultato mentre la scheda è in compilazione. Per salvare è comunque necessario rispondere a tutti e tre i criteri, quindi la media finale rappresenta sempre la valutazione completa. Ogni modifica a un punteggio aggiorna subito l’indicatore di completamento, la barra di avanzamento e il riepilogo.
Salva la scheda vuota e controlla gli avvisi relativi alle valutazioni mancanti e alle note.
Assegna 4 a Chiarezza, 3 a Gerarchia e 2 a Feedback: la media diventa 3,0.
Scrivi un’osservazione concreta e salva; poi usa «Ricomincia» per reimpostare l’intera scheda.
Sistema di design Vuestic UI sistema di progettazione: un’osservazione utile deve contenere testo significativo e avere spazio sufficiente
Un’osservazione utile richiede un testo significativo e spazio sufficiente
VaTextarea mostra un’etichetta visibile, un limite di quattrocento caratteri e un contatore. Dopo un tentativo di salvataggio, l’applicazione verifica che il valore, eliminati gli spazi iniziali e finali, contenga almeno venti caratteri. Una stringa di soli spazi non può quindi soddisfare il requisito, anche se la sua lunghezza nominale rientra nel limite.
L’area di testo attiva l’adattamento automatico delle dimensioni, con un minimo di quattro righe e un massimo di dodici. È un’impostazione funzionale, non una semplice prop di esempio: senza autosize, l’impostazione del numero minimo di righe non produceva l’area per le note espandibile prevista. La versione corretta mantiene visibile l’osservazione anche sugli schermi stretti, conservando lo scorrimento normale per le note eccezionalmente lunghe.
Sistema di design Vuestic UI sistema di progettazione: ricava l’avanzamento dal completamento, non dalla media dei punteggi
Calcolare i progressi dal completamento, non dalla media dei punteggi
La barra di avanzamento misura quanti criteri hanno ricevuto una risposta positiva, in percentuale: numero di criteri valutati diviso tre, moltiplicato per cento. Il numero grande accanto alla barra indica la media dei punteggi. I denominatori sono diversi e non vanno confusi: anche tre punteggi bassi possono corrispondere al completamento del cento per cento.
La frase sul completamento indica direttamente il numeratore e il denominatore. La media è etichettata «Media dei criteri valutati» e il riepilogo riporta il punteggio di ciascun criterio. Queste etichette aiutano a capire il calcolo, invece di interpretare una barra di avanzamento priva di spiegazioni come un giudizio complessivo sulla qualità.
Sistema di design Vuestic UI sistema di progettazione: blocca una valutazione locale completata finché non viene reimpostata esplicitamente
Bloccare una valutazione locale completata finché non viene ripristinata esplicitamente
Il salvataggio imposta prima attempted e poi controlla tutte le valutazioni e l’osservazione, prima di abilitare lo stato di salvataggio. L’indicatore saved rende di sola lettura le valutazioni e l’area di testo e disabilita il pulsante Salva. L’avviso di conferma specifica che la valutazione è stata salvata localmente e che non è stato inviato nulla.
«Ricomincia» cancella tutte le valutazioni, la nota, la visibilità degli errori di convalida e lo stato di salvataggio con un unico gestore. Questa scelta è intenzionale: modificare un valore dopo il salvataggio renderebbe altrimenti non aggiornata la conferma. L’esempio non implica la presenza di un backend, di un account o di un destinatario della valutazione.
Sistema di design Vuestic UI sistema di progettazione: assegna a ogni elemento di valutazione un nome che includa il criterio e il valore
Assegna a ogni elemento di valutazione un nome che includa il criterio e il valore
Gli elementi nativi VaRating espongono pulsanti nell’albero di accessibilità. aria-item-label include il nome del criterio e i segnaposto value/max, generando etichette come «Punteggio di Chiarezza: 4 su 5». Si evitano così quindici controlli a forma di stella indistinguibili quando nella stessa pagina compaiono tre valutazioni.
L’area di testo ha una propria etichetta visibile, la barra di avanzamento un’etichetta di completamento e l’avviso di salvataggio è una regione di stato. I contrassegni decorativi dei criteri sono nascosti alle tecnologie assistive. I controlli locali hanno attivato pulsanti di valutazione con etichette effettive, verificato la convalida e controllato il layout finale a 280px, invece di limitarsi a verificare la presenza di attributi ARIA.
Assegna a ogni valutazione ripetuta un’etichetta specifica per il criterio.
Distingui visivamente gli stati senza valutazione e di sola lettura.
Verifica il riepilogo numerico dopo aver interagito con i controlli nativi effettivi.
Sistema di design Vuestic UI sistema di progettazione: includi il plugin, il componente CSS e la risorsa locale delle icone
Includere il plugin, il componente CSS e l’asset locale dell’icona
Il file di ingresso registra createVuestic e importa vuestic-ui/css prima del foglio di stile originale del layout. App.vue importa tutti i componenti utilizzati, quindi l’esempio non dipende da una configurazione di importazione automatica non documentata. L’override condiviso del font viene applicato dopo CSS della libreria.
Il comando del pacchetto include @quasar/extras solo come sorgente del font locale Material Icons; non registra Quasar né integra i suoi componenti nella scheda di valutazione. L’intero SFC e il foglio di stile qui sopra possono essere inseriti nella configurazione Vite Vue seguente. L’anteprima autonoma generata incorpora le risorse necessarie e non scarica font remoti.
Sistema di design Vuestic UI esempi di componenti del sistema di progettazione
Scheda di valutazione completa con componenti nativi
VaRating, VaTextarea, VaButton, VaChip, VaProgressBar e VaAlert sono collegati a un unico modello di valutazione.
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 mantiene una famiglia di font distinta.
Non viene impostata un’altezza minima del documento.
04
Configurazione dell’agent sistema di design Vuestic UI
Punto di partenza per l’implementazione
Verificati Vuestic UI 1.10.3 e Material Icons locali da @quasar/extras 2.1.0. Sono forniti entrambi gli esempi sorgente completi; non è necessario alcun servizio di font esterno.
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 per il tuo progetto
Prompt per l’agente
Usa Vuestic UI 1.10.3 per riprodurre la scheda di valutazione del design con tre criteri VaRating nativi, VaTextarea e controlli per avanzamento, stato, salvataggio e reimpostazione. Calcola la media in base ai criteri valutati e, per salvare, richiedi tutti e tre i punteggi e una nota di venti caratteri, esclusi gli spazi iniziali e finali. Mantieni l’area di testo con ridimensionamento automatico, così che la valutazione completa resti visibile, e assicurati che lo stato salvato di sola lettura e il comportamento di reimpostazione siano coerenti. Includi createVuestic, il componente nativo CSS e il font locale delle icone. Si tratta di una registrazione locale della valutazione, non di un servizio per l’invio di gruppi di ispezioni.
05
Sistema di design Vuestic UI fonti e ambito del sistema di progettazione
Vuestic UI 1.10.3 con il preset di colori chiaro predefinito e un override esplicito del font di sistema. Domande e illustrazioni originali della valutazione. Lo stato salvato è locale, senza invio a servizi di valutazione esterni né persistenza dopo un ricaricamento.
