Sistema de componentes empresariais · Novo recurso
Sistema de design Vuestic UI.
Uma folha de avaliação nativa do Vuestic, com predefinições de modo claro e escuro verificadas nas fontes, rótulos de avaliação acessíveis, validação de área de texto, média calculada e um estado salvo que preserva a avaliação concluída.
Vuestic UI 1.10.3 com Vue 3; Material Icons empacotado localmente por meio de @quasar/extras 2.1.0. · Referência de implementação
02
Referência de design do sistema sistema de design Vuestic UI
Vuestic UI 1.10.3. Os valores das predefinições são lidos do serviço de cores instalado, e as variáveis dos componentes, do CSS. A planilha mantém a predefinição clara padrão, mas substitui intencionalmente --va-font-family por system-ui. As formas decorativas e a escala ao redor são originais.
Sistema de design Vuestic UI — uma biblioteca Vue configurável com predefinições de cores nomeadas
Uma biblioteca Vue configurável com predefinições de cores nomeadas
O Vuestic registra seus serviços compartilhados por meio de createVuestic. O exemplo usa componentes nativos importados de vuestic-ui e a predefinição de cor clara padrão. A avaliação, os botões, a barra de progresso e o alerta de sucesso resolvem os nomes de cores semânticas por meio desse mesmo serviço.
A planilha aplica esses componentes em um exemplo concreto: separa três perguntas de avaliação, coleta uma observação de apoio, calcula uma média e bloqueia um resultado local salvo. As marcas coloridas dos critérios e a composição em duas colunas são elementos originais do design do aplicativo, não componentes adicionais do Vuestic.
Sistema de design Vuestic UI — diferencie predefinições do serviço das variáveis de geometria do CSS
Diferencie predefinições do serviço das variáveis de geometria do CSS
A predefinição clara verificada define primary #154EC1, success #3D9209 e textPrimary #262824. A predefinição escura usa valores diferentes para primary, texto e superfícies, em vez de apenas inverter a página clara. A tabela de referência registra as duas predefinições, enquanto a prévia permanece intencionalmente no modo claro.
A geometria dos componentes é configurada por meio de variáveis CSS, como --va-button-border-radius e --va-form-element-border-radius, ambas com valor 0.25rem na folha de estilos instalada. Uma predefinição de cor e uma substituição de variável CSS resolvem problemas diferentes: use o serviço para funções semânticas e a variável documentada para a geometria compatível dos componentes.
Sistema de design Vuestic UI — carregue os ícones necessários e declare a substituição da fonte
Carregue os ícones necessários e declare a substituição da fonte
O --va-font-family padrão do Vuestic especifica Source Sans Pro. Em vez de depender silenciosamente de uma fonte que nunca foi carregada, o exemplo substitui essa variável por system-ui. Assim, os rótulos dos componentes nativos e o texto do aplicativo compartilham uma pilha de fontes disponível e declarada explicitamente.
Os ícones de classificação padrão usam nomes do Material Icons, como star e star_outline. A folha de estilos da fonte local é importada de @quasar/extras e empacotada com os arquivos da fonte. Sem esse recurso, palavras literais podem aparecer no lugar dos formatos de estrela esperados. A fonte dos ícones é mantida separada da substituição da família tipográfica do aplicativo.
Sistema de design Vuestic UI — use zero para indicar que ainda não há resposta, e não uma pontuação ruim
Use zero para indicar que ainda não há resposta, e não uma pontuação ruim
Cada VaRating é associado ao valor numérico de um critério. O limite máximo é cinco e a opção clearable está ativada, então selecionar novamente a pontuação atual pode retornar esse critério a zero. Para zero, a interface exibe Não avaliado, em vez de apresentá-lo como um julgamento concluído de zero em cinco.
A média é dividida pela quantidade de avaliações positivas. Isso evita penalizar critérios sem resposta enquanto a planilha está em andamento. Ainda é necessário responder aos três critérios para salvar, portanto a média final sempre representa a avaliação completa. Alterar uma avaliação atualiza imediatamente o indicador de conclusão, a barra de progresso e o resumo.
Salve a planilha em branco e confira os avisos de avaliação ausente e de observação.
Atribua Clareza 4, Hierarquia 3 e Feedback 2; a média será 3.0.
Escreva uma observação concreta e salve; em seguida, use Começar de novo para redefinir toda a planilha.
Sistema de design Vuestic UI — uma observação útil precisa de texto relevante e espaço suficiente
Uma observação útil precisa de texto relevante e espaço suficiente
VaTextarea tem um rótulo visível, limite de quatrocentos caracteres e contador. Após uma tentativa de salvamento, o aplicativo verifica se o valor, sem espaços no início e no fim, tem pelo menos vinte caracteres. Portanto, uma sequência de espaços não atende ao requisito, mesmo que tenha um comprimento nominal de caracteres.
O textarea ativa o ajuste automático de tamanho, com mínimo de quatro linhas e máximo de doze. Essa é uma configuração funcional, não apenas uma prop de exemplo: sem o ajuste automático, a configuração de linhas mínimas não produzia a área de observação expansível esperada. A versão corrigida mantém visível uma observação em telas estreitas e preserva a rolagem normal para observações excepcionalmente longas.
Sistema de design Vuestic UI: derive o progresso da conclusão, não da média das avaliações
Derive o progresso da conclusão, não da média das avaliações
A barra de progresso mede quantos critérios receberam uma resposta positiva, calculada como avaliações preenchidas dividido por três vezes cem. O número em destaque ao lado mede a média de qualidade. São denominadores diferentes e não devem ser confundidos: três notas baixas ainda podem resultar em cem por cento de conclusão.
A frase de conclusão informa diretamente o numerador e o denominador. A média tem o rótulo Média dos critérios avaliados, e o resumo repete a pontuação de cada critério. Esses rótulos ajudam as pessoas a entender o cálculo, em vez de interpretar uma barra de progresso sem explicação como uma avaliação geral da qualidade.
Sistema de design Vuestic UI: bloqueie uma avaliação local concluída até que haja uma redefinição explícita
Bloqueie uma avaliação local concluída até que ela seja redefinida explicitamente
Ao salvar, primeiro define-se attempted e, em seguida, verificam-se todas as avaliações e a observação antes de ativar o estado salvo. A flag saved torna as avaliações e o textarea somente leitura e desativa o botão Salvar. O alerta de sucesso informa que a avaliação foi salva localmente e que nenhum dado foi enviado.
Começar de novo limpa todas as avaliações, a observação, a exibição da validação e o estado salvo em um único manipulador. Essa ação é intencionalmente explícita, pois alterar um valor após o salvamento deixaria a confirmação desatualizada. O exemplo não pressupõe backend, conta nem destinatário da avaliação.
Sistema de design Vuestic UI: identifique cada item de avaliação pelo critério e pelo valor
Identifique cada item de avaliação pelo critério e pelo valor
Os itens nativos de VaRating expõem botões na árvore de acessibilidade. aria-item-label inclui o nome do critério e os espaços reservados de valor/máximo, gerando rótulos como Pontuação de clareza: 4 de 5. Isso evita que os quinze controles de estrelas pareçam indistinguíveis quando há três avaliações na mesma página.
O textarea tem seu próprio rótulo visível, a barra de progresso tem um rótulo de conclusão e o alerta de salvamento é uma região de status. As marcas decorativas dos critérios ficam ocultas para tecnologias assistivas. As verificações locais clicaram nos botões de avaliação realmente rotulados, testaram a validação e inspecionaram o layout final em 280px, em vez de depender apenas da presença de atributos ARIA.
Atribua a cada item de avaliação repetido um rótulo específico para o critério.
Diferencie visualmente os estados sem resposta e somente leitura.
Verifique o resumo numérico após interagir com os controles nativos reais.
Sistema de design Vuestic UI: inclua o plugin, o componente CSS e o recurso de ícone local
Inclua o plugin, o CSS do componente e o recurso local de ícones
O ponto de entrada registra createVuestic e importa vuestic-ui/css antes da folha de estilos original do layout. App.vue importa todos os componentes que utiliza, portanto o exemplo não depende de uma configuração de importação automática não documentada. A substituição compartilhada de fontes é aplicada após CSS da biblioteca.
O comando do pacote inclui @quasar/extras apenas como fonte da fonte local Material Icons; ele não registra Quasar nem combina seus componentes com a ficha de avaliação. O SFC completo e a folha de estilos acima podem ser adicionados à configuração Vite Vue a seguir. A prévia independente gerada incorpora os recursos necessários e não busca fontes remotas.
Vuestic UI Exemplos de componentes do sistema de design
Ficha de avaliação completa com componentes nativos
VaRating, VaTextarea, VaButton, VaChip, VaProgressBar e VaAlert estão conectados a um único modelo de avaliação.
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 mantém sua própria família tipográfica.
Não é usado um valor mínimo para a altura do documento.
04
Vuestic UI Configuração de agente do sistema de design
Ponto de partida para implementação
Verificado com Vuestic UI 1.10.3 e Material Icons local do @quasar/extras 2.1.0. Os dois exemplos completos de código-fonte estão incluídos; não é necessário usar um serviço externo de fontes.
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
Um prompt para seu projeto
Prompt para agente de IA
Use Vuestic UI 1.10.3 para reproduzir a ficha de avaliação de design com três critérios VaRating nativos, VaTextarea, progresso, status e controles para salvar e redefinir. Calcule a média com base nos critérios avaliados e exija as três pontuações, além de uma observação com vinte caracteres, desconsiderando espaços no início e no fim, antes de salvar. Preserve o ajuste automático de tamanho do textarea para manter toda a avaliação visível e mantenha consistentes o estado salvo somente leitura e o comportamento de redefinição. Inclua createVuestic, CSS nativo e a fonte de ícones local. Este é um registro local de avaliação, não um serviço para lotes de inspeção.
05
Vuestic UI Fontes e escopo do sistema de design
Vuestic UI 1.10.3 com a predefinição de cores claras padrão e uma substituição explícita da fonte do sistema. Perguntas e ilustrações originais da avaliação. O estado salvo é local, sem envio para uma avaliação externa nem persistência após recarregar a página.
