Sistema de componentes empresariales · Nuevo recurso
Sistema de diseño Vuestic UI.
Una hoja de evaluación nativa de Vuestic, con preajustes de modo claro y oscuro verificados en el código fuente, etiquetas de valoración accesibles, validación de áreas de texto, un promedio calculado y un estado guardado que conserva la evaluación completada.
Vuestic UI 1.10.3 con Vue 3; iconos de Material Icons incluidos localmente mediante @quasar/extras 2.1.0. · Referencia de implementación
02
Referencia de diseño del sistema de diseño Vuestic UI
Vuestic UI 1.10.3. Los valores de los preajustes se obtienen del servicio de color instalado, y las variables de los componentes, de su CSS. La hoja de evaluación conserva el preajuste claro predeterminado, pero sobrescribe intencionadamente --va-font-family con system-ui. Las formas decorativas y la escala circundante son originales.
Sistema de diseño Vuestic UI: una biblioteca Vue configurable con preajustes de color con nombre
Una biblioteca Vue configurable con preajustes de color con nombre
Vuestic registra sus servicios compartidos mediante createVuestic. El ejemplo usa componentes nativos importados de vuestic-ui y el preajuste de color claro predeterminado. La puntuación, los botones, el progreso y la alerta de éxito resuelven los nombres de color semánticos a través de ese mismo servicio.
La hoja de evaluación es una aplicación concreta de esos componentes: separa tres preguntas de revisión, recopila una observación de apoyo, calcula un promedio y bloquea el resultado local guardado. Las marcas de color de los criterios y la composición en dos columnas son diseños originales de la aplicación, no componentes adicionales de Vuestic.
Sistema de diseño Vuestic UI: distingue los preajustes del servicio de las variables geométricas de CSS
Distingue los preajustes del servicio de las variables geométricas de CSS
El preajuste claro verificado define primary #154EC1, success #3D9209 y textPrimary #262824. Su preajuste oscuro utiliza valores distintos para primary, texto y superficies, en lugar de limitarse a invertir la página clara. La tabla de referencia registra ambos preajustes, mientras que la vista previa permanece intencionadamente en modo claro.
La geometría de los componentes se configura mediante variables de CSS como --va-button-border-radius y --va-form-element-border-radius, ambas con valor 0.25rem en la hoja de estilos instalada. Un preajuste de color y una sobrescritura de una variable de CSS resuelven problemas distintos: usa el servicio para los roles semánticos y la variable documentada para la geometría compatible de los componentes.
Sistema de diseño Vuestic UI: carga los iconos necesarios e indica la sobrescritura de la fuente
Carga los iconos necesarios e indica la sobrescritura de la fuente
La variable predeterminada --va-font-family de Vuestic especifica Source Sans Pro. El ejemplo sobrescribe esa variable con system-ui, en lugar de depender silenciosamente de una fuente que nunca se cargó. Así, las etiquetas de los componentes nativos y el texto de la aplicación comparten una pila de fuentes disponible y definida explícitamente.
Los iconos de valoración predeterminados usan nombres de Material Icons, como star y star_outline. Su hoja de estilos de fuente local se importa desde @quasar/extras y se incluye junto con los archivos de fuente. Sin ese recurso, podrían aparecer las palabras literales de los iconos en lugar de las formas de estrella esperadas. La fuente de iconos se mantiene separada de la sobrescritura de la familia tipográfica de la aplicación.
Sistema de diseño de Vuestic UI: usa el cero como estado sin respuesta, no como una puntuación baja
Usa cero como estado sin responder, no como una puntuación baja
Cada VaRating se vincula al valor numérico de un criterio. El máximo es cinco y la opción clearable está activada, por lo que al volver a elegir la puntuación actual se puede restablecer ese criterio a cero. Para el cero, la interfaz muestra Sin calificar, en lugar de presentarlo como un juicio completado de cero sobre cinco.
El promedio se calcula dividiendo por la cantidad de valoraciones positivas. Así se evita penalizar los criterios sin respuesta mientras la hoja de evaluación está en curso. Para guardar, es necesario responder los tres criterios, de modo que el promedio final siempre represente la evaluación completa. Al cambiar una valoración, se actualizan de inmediato el indicador de finalización, la barra de progreso y el resumen.
Guarda la hoja de evaluación en blanco y revisa los avisos de valoraciones faltantes y notas.
Asigna Claridad 4, Jerarquía 3 y Comentarios 2; el promedio pasa a 3,0.
Escribe una observación concreta y guarda; luego selecciona Empezar de nuevo para restablecer toda la hoja de evaluación.
Sistema de diseño de Vuestic UI: una observación útil requiere texto significativo y espacio suficiente
Una observación útil necesita texto significativo y espacio suficiente
VaTextarea tiene una etiqueta visible, un límite de cuatrocientos caracteres y un contador. Tras intentar guardar, la aplicación comprueba que el valor, una vez eliminados los espacios iniciales y finales, tenga al menos veinte caracteres. Por tanto, una cadena de espacios no cumple el requisito, aunque su longitud nominal incluya caracteres.
El área de texto activa el autoajuste, con un mínimo de cuatro filas y un máximo de doce. Es una configuración funcional, no solo una propiedad de ejemplo: sin el autoajuste, la configuración del mínimo de filas no producía el área de notas expansible prevista. La versión corregida mantiene visible la observación en pantallas estrechas y permite el desplazamiento normal para notas excepcionalmente largas.
Sistema de diseño de Vuestic UI: calcula el progreso según la finalización, no según el promedio de las valoraciones
Deriva el progreso del grado de finalización, no del promedio de las puntuaciones
La barra de progreso mide cuántos criterios tienen una respuesta positiva y lo expresa como valorados dividido por tres, multiplicado por cien. El número grande que aparece junto a ella indica el promedio de calidad. Son denominadores distintos y no deben confundirse: incluso tres puntuaciones bajas pueden dar como resultado un cien por ciento de finalización.
La frase de finalización indica directamente el numerador y el denominador. El promedio lleva la etiqueta Promedio de los criterios valorados y el resumen repite la puntuación de cada criterio. Estas etiquetas permiten entender el cálculo, en lugar de interpretar una barra de progreso sin explicación como un juicio general de calidad.
Sistema de diseño de Vuestic UI: bloquea una evaluación local completada hasta que se restablezca explícitamente
Bloquea una evaluación local completada hasta que se restablezca explícitamente
Al guardar, primero se establece attempted y luego se comprueban todas las valoraciones y la observación antes de activar el estado guardado. El indicador de guardado vuelve de solo lectura las valoraciones y el área de texto, y desactiva el botón Guardar. La alerta de éxito indica que la evaluación se guardó localmente y que no se envió nada.
Empezar de nuevo borra todas las valoraciones, la nota, la visibilidad de los errores de validación y el estado guardado mediante un único controlador. La acción es deliberadamente explícita, porque, de lo contrario, cambiar un valor después de guardar dejaría desactualizada la confirmación. El ejemplo no implica que haya un backend, una cuenta o un destinatario de la evaluación.
Sistema de diseño de Vuestic UI: identifica cada elemento de valoración con el criterio y su valor
Identifica cada elemento de valoración con el criterio y su valor
Los elementos nativos de VaRating exponen botones en el árbol de accesibilidad. aria-item-label incluye el nombre del criterio y los marcadores de posición de valor y máximo, y genera etiquetas como Puntuación de Claridad: 4 de 5. Así se evitan quince controles de estrella indistinguibles cuando aparecen tres valoraciones en la misma página.
El área de texto tiene su propia etiqueta visible, la barra de progreso tiene una etiqueta de finalización y la alerta de guardado es una región de estado. Las marcas decorativas de los criterios se ocultan a las tecnologías de asistencia. Las comprobaciones locales hicieron clic en botones de valoración reales y etiquetados, probaron la validación e inspeccionaron el diseño final a 280 px, en lugar de limitarse a comprobar la presencia de atributos ARIA.
Asigna a cada valoración repetida una etiqueta de elemento específica para el criterio.
Distingue visualmente los estados sin respuesta y de solo lectura.
Verifica el resumen numérico después de interactuar con los controles nativos reales.
Sistema de diseño de Vuestic UI: incluye el complemento, el componente CSS y el recurso de iconos local
Incluye el complemento, el CSS del componente y el recurso de iconos local
La entrada registra createVuestic e importa vuestic-ui/css antes de la hoja de estilos original del diseño. App.vue importa todos los componentes que utiliza, de modo que el ejemplo no depende de una configuración de importación automática sin documentar. La sobrescritura de fuente compartida se aplica después de la biblioteca CSS.
El comando del paquete incluye @quasar/extras únicamente como fuente de la fuente local de Material Icons; no registra Quasar ni mezcla sus componentes con la hoja de evaluación. El SFC completo y la hoja de estilos anteriores se pueden incorporar directamente a la configuración de Vite con Vue que se muestra a continuación. La vista previa independiente generada incluye los recursos necesarios y no descarga ninguna fuente remota.
Ejemplos de componentes del sistema de diseño de Vuestic UI
Hoja de evaluación crítica nativa completa
VaRating, VaTextarea, VaButton, VaChip, VaProgressBar y VaAlert están conectados a un único modelo de evaluación.
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 conserva su propia familia tipográfica.
No se establece una altura mínima para el documento.
04
Configuración del agente de IA de sistema de diseño Vuestic UI
Punto de partida para la implementación
Verifiqué Vuestic UI 1.10.3 y Material Icons local de @quasar/extras 2.1.0. Se proporcionan ambos ejemplos completos del código fuente; no se necesita ningún servicio externo de fuentes.
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
Una instrucción para tu proyecto
Instrucción para el agente
Usa Vuestic UI 1.10.3 para reproducir la hoja de evaluación de diseño con tres criterios nativos de VaRating, VaTextarea, progreso, estado y controles para guardar y restablecer. Calcula el promedio de los criterios evaluados y exige las tres puntuaciones y una nota de veinte caracteres, una vez eliminados los espacios sobrantes, antes de guardar. Conserva el ajuste automático de tamaño del área de texto para que la evaluación completa siga visible, y mantén la coherencia entre el estado guardado de solo lectura y el comportamiento de restablecimiento. Incluye createVuestic, CSS nativo y la fuente de iconos local. Se trata de un registro local de evaluación, no de un servicio para gestionar lotes de inspección.
05
Fuentes y alcance del sistema de diseño Vuestic UI
Vuestic UI 1.10.3 con el ajuste preestablecido de color claro predeterminado y una sobreescritura explícita de la fuente del sistema. Preguntas originales de evaluación e ilustraciones. El estado guardado es local, sin envío de evaluaciones a servicios externos ni persistencia tras recargar la página.
