Um editor de catálogo nativo do Oruga, com tags de tópicos pesquisáveis e removíveis, limites de vocabulário aplicados, tokens reais de um tema opcional e um cartão dinâmico que reflete os rótulos selecionados.
Referência de design do sistema de design Oruga UI
Pacote Oruga para Vue 3 0.14.4 com @oruga-ui/theme-oruga 0.10.0. Os valores abaixo pertencem a esse tema padrão opcional, não a um núcleo headless imutável. Os ícones MDI 7.4.47 são fornecidos localmente. A composição do catálogo e a ilustração da pasta são originais.
Sistema de design Oruga UI: separe o comportamento dos componentes do Oruga do tema opcional
Separe o comportamento dos componentes do Oruga do tema opcional
O Oruga fornece componentes Vue sem exigir uma estrutura CSS específica. Este exemplo combina o pacote para Vue 3 com o tema padrão separado do Oruga. As etiquetas verdes selecionadas e os campos contornados vêm desse tema, enquanto a pesquisa, a seleção e a remoção são comportamentos nativos dos componentes.
Essa distinção é útil ao avaliar a biblioteca. Uma equipe pode manter os componentes API e substituir a configuração de classes ou escolher outro tema compatível. Por isso, a tabela de referência identifica o pacote e a versão do tema, em vez de apresentar sua cor primária verde como requisito universal de todas as aplicações Oruga.
Sistema de design Oruga UI: use as variáveis reais do tema padrão
Use as variáveis reais do tema padrão
O tema opcional instalado define --oruga-primary como #445e00 e --oruga-primary-invert como branco. A cor de perigo é #b60000, e as bordas dos controles usam #dbdbdb. A propriedade variant do componente seleciona a família semântica apropriada, sem exigir uma regra CSS separada para cada campo ou etiqueta.
O mesmo tema define um raio padrão de quatro pixels, uma altura de controle de 2.25em e fórmulas de preenchimento que subtraem a borda de um pixel. Como esses valores são relativos ao texto do controle, alterar a escala da fonte afeta a geometria. O espaçador de meio em do tema representa uma relação entre componentes, não uma escala completa de espaçamento para o layout da página.
Sistema de design Oruga UI: defina o layout que o Oruga intencionalmente não impõe
Defina o layout que o Oruga intencionalmente não impõe
O catálogo usa uma coluna flexível para o editor e uma coluna de cartão de 330px, que se empilham abaixo de 760px. O título da página usa uma fonte sem serifa do sistema, enquanto o título do cartão usa Georgia para sugerir um registro editorial. Ambas as escolhas são originais e não exigem arquivos de fontes externos.
O Oruga não prescreve uma grade nem uma estrutura de utilitários. Por isso, a folha de estilos completa deixa visíveis o preenchimento dos painéis, os recuos em telas estreitas e as regras de quebra de linha. O contador de etiquetas mantém juntos o numerador e o denominador, e o título do cartão permite que nomes longos de notas quebrem em várias linhas, sem ampliar lateralmente a página incorporada.
Sistema de design Oruga UI: mantenha os valores selecionados separados da consulta de pesquisa
Mantenha os valores selecionados separados da consulta de pesquisa
OTaginput vincula o array de tópicos selecionados usando v-model. O texto interno da conclusão automática filtra os rótulos candidatos sem substituir esse array. O vocabulário tem seis tópicos originais com definições concretas, e o cartão dinâmico repete apenas as definições dos tópicos selecionados.
A comparação padrão da pesquisa não diferencia maiúsculas de minúsculas. No teste local, Color foi digitado e aguardou-se a conclusão da filtragem antes de selecionar a opção resultante. Uma asserção imediata, durante o período de espera da entrada, sugeriria incorretamente que a filtragem falhou. Em seguida, a seleção limpa a consulta e preserva as etiquetas escolhidas anteriormente.
Pesquise Color e selecione a opção correspondente.
Adicione Forms para chegar a três tópicos, além de Navigation.
Remova uma etiqueta, confirme que o cartão foi atualizado e escolha uma substituta antes de salvar.
Sistema de design Oruga UI: controle o vocabulário, as duplicatas e a contagem de forma independente
Controle o vocabulário, as duplicatas e a contagem de forma independente
allow-new=false impede que uma expressão digitada arbitrariamente se torne um rótulo. allow-duplicates=false impede que o mesmo rótulo existente seja adicionado duas vezes. maxitems=3 limita o total de seleções e exibe o contador. Cada configuração protege um aspecto diferente de um vocabulário controlado.
Ainda assim, a aplicação verifica se pelo menos um tópico está selecionado quando o usuário tenta salvar. O limite máximo de seleções não implica um requisito mínimo. A aplicação também verifica se o título, após a remoção dos espaços nas extremidades, tem cinco caracteres significativos, enquanto o atributo maxlength da entrada nativa limita o comprimento máximo a oitenta caracteres.
Sistema de design Oruga UI: use OField para rótulos e mensagens de validação específicas
Use OField para rótulos e mensagens de validação específicas
OField fornece os rótulos visíveis Nota e Tópicos, além das respectivas mensagens. Depois de uma tentativa de salvar inválida, o campo correspondente recebe a variante de perigo e uma mensagem concreta indicando como corrigir o problema. A orientação sobre tópicos explica a faixa disponível e a restrição do vocabulário antes que ocorra um erro.
O menu suspenso de entrada de etiquetas nativo segue o padrão combobox/listbox. Nesta versão, a função combobox pertence a um elemento contêiner, e o campo de texto editável fica aninhado nele. Por isso, o teste de QA preenche a entrada Pesquisar tópicos em si, em vez de presumir que o elemento com a função combobox seja a própria entrada.
Sistema de design Oruga UI: um pacote de ícones padrão ainda precisa do arquivo de fonte
Um pacote de ícones padrão ainda precisa do arquivo de fonte
O controle de remoção de etiquetas usa o pacote de ícones MDI padrão do Oruga. Carregar o tema dos componentes não carrega essa fonte automaticamente; por isso, a configuração completa inclui @mdi/font. A prévia independente mantém um arquivo WOFF2 local e as regras de ícones necessárias, sem depender de fontes remotas.
A remoção continua sendo um botão real com o rótulo acessível Remover tópico. A ilustração decorativa da pasta não tem relação com esses ícones de controle e fica oculta para tecnologias assistivas. Essa distinção evita que um elemento ornamental seja confundido com um controle acionável.
Sistema de design Oruga UI: invalide um registro salvo quando as entradas forem alteradas
Invalide um registro salvo quando as entradas forem alteradas
A ação Salvar registra uma frase com o título sem espaços nas extremidades e a quantidade de tópicos selecionados. Um observador acompanha tanto o título quanto o array de tópicos em profundidade; por isso, remover um item limpa a confirmação, assim como alterar o título. Salvar só fica desativado enquanto o registro atual continua salvo.
Limpar nota redefine o título, todos os tópicos selecionados, a tentativa de validação e o estado salvo. O cartão passa a exibir Nota de pesquisa sem título e Nenhum tópico selecionado. O usuário pode percorrer todo o ciclo, de vazio a editado e salvo, sem backend, carregamento de arquivos ou operação de publicação por trás do botão.
Preserve o modelo de array selecionado enquanto a consulta muda.
Limpe a confirmação de salvamento quando houver alterações em elementos aninhados do array.
Descreva o resultado como estado local, não como publicação.
Sistema de design Oruga UI: importe componentes usando o registro atual do Oruga
Importe componentes usando o registro atual do Oruga
A configuração verificada da versão 0.14.4 cria uma instância do Oruga e a instala no aplicativo Vue. App.vue importa explicitamente OField, OInput, OTaginput, OTag e OButton. Isso segue o modelo atual de registro; confiar em exemplos antigos que pressupunham o registro global de todos os componentes pode deixar o aplicativo incompleto.
O README do tema informa que esse tema padrão usa os nomes de classe existentes do Oruga e precisa da folha de estilos, sem um objeto adicional de configuração do tema. O arquivo de entrada importa essa folha de estilos, o recurso MDI e o layout original, nessa ordem. Os exemplos completos de código-fonte acima e a raiz do Vite abaixo contêm todos os elementos necessários.
Exemplos de componentes do sistema de design Oruga UI
SFC completo do catálogo de tópicos
OTaginput, OField, OInput, OTag e OButton conectam um vocabulário restrito a um cartão de catálogo atualizado em tempo real.
vue
<script setup>
import {ref,computed,watch} from 'vue';
import {OField,OInput,OTaginput,OButton,OTag} from '@oruga-ui/oruga-next';
const title=ref('Finding a calmer navigation'),topics=ref(['Navigation']),attempted=ref(false),saved=ref('');
const definitions={'Navigation':'Menus, wayfinding and the path through a product.','Typography':'Type hierarchy, reading rhythm and legibility.','Color':'Semantic roles, contrast and theme behavior.','Forms':'Input labels, validation and correction.','Motion':'Transitions, reduced motion and continuity.','Accessibility':'Keyboard flow, semantics and assistive technology.'};
const options=Object.keys(definitions),valid=computed(()=>title.value.trim().length>=5&&topics.value.length>=1&&topics.value.length<=3);
watch([title,topics],()=>saved.value='',{deep:true});
function save(){attempted.value=true;if(valid.value)saved.value=`Saved locally: “${title.value.trim()}” with ${topics.value.length} ${topics.value.length===1?'topic':'topics'}.`}
function reset(){title.value='';topics.value=[];attempted.value=false;saved.value=''}
</script>
<template><main class="catalog-shell"><header><p class="eyebrow">RESEARCH CATALOG · LABEL A NOTE</p><h1>Give the next reader a useful starting point.</h1><p>Name a research note and choose up to three topics from a controlled vocabulary.</p></header><div class="catalog-layout"><section class="editor"><h2>Note details</h2><OField label="Note title" :variant="attempted&&title.trim().length<5?'danger':undefined" :message="attempted&&title.trim().length<5?'Use at least five meaningful characters.':undefined"><OInput v-model="title" maxlength="80" expanded placeholder="What did you learn?"/></OField><OField label="Topics" :variant="attempted&&!topics.length?'danger':undefined" :message="attempted&&!topics.length?'Choose at least one topic.':'Choose 1–3 existing topics; duplicate and new labels are not added.'"><OTaginput v-model="topics" :options="options" :allow-new="false" :allow-duplicates="false" :maxitems="3" open-on-focus :keep-open="false" expanded variant="primary" placeholder="Search topics" aria-close-label="Remove topic"><template #empty>No matching topic. Try Color, Forms or Motion.</template></OTaginput></OField><div class="actions"><OButton variant="primary" @click="save" :disabled="!!saved">Save local note</OButton><OButton @click="reset">Clear note</OButton></div><p role="status" class="result">{{saved||'The preview keeps only local page state.'}}</p><h3>Vocabulary guide</h3><dl class="vocabulary"><div v-for="(meaning,name) in definitions" :key="name"><dt>{{name}}</dt><dd>{{meaning}}</dd></div></dl></section><aside class="note-card"><div class="folder-art" aria-hidden="true"><i></i><b></b><span></span></div><p class="eyebrow">CATALOG CARD PREVIEW</p><h2>{{title.trim()||'Untitled research note'}}</h2><div class="topic-tags"><OTag v-for="topic in topics" :key="topic" variant="primary">{{topic}}</OTag><span v-if="!topics.length" class="empty-topics">No topics selected</span></div><p class="card-label">This note will appear under</p><ul><li v-for="topic in topics" :key="topic"><strong>{{topic}}</strong><span>{{definitions[topic]}}</span></li></ul><p class="card-foot">Original sample note · no upload or publishing</p></aside></div></main></template>
O Oruga não fornece um sistema de grade obrigatório; este layout é definido explicitamente pelo aplicativo CSS.
O texto do contador permanece em uma única linha em larguras reduzidas.
04
Configuração do agente de sistema de design Oruga UI
Ponto de partida para implementação
Oruga 0.14.4, tema padrão opcional 0.10.0 e MDI 7.4.47 verificados. Os componentes são importados explicitamente; o tema padrão não exige configuração adicional de tema JavaScript.
javascript
// npm create vite@latest oruga-catalog -- --template vue
// cd oruga-catalog && npm install
// npm install @oruga-ui/[email protected] @oruga-ui/[email protected] @mdi/[email protected]
// Save the complete examples as src/App.vue and src/style.css.
// src/main.js:
import {createApp} from 'vue';
import {createOruga} from '@oruga-ui/oruga-next';
import '@oruga-ui/theme-oruga/style.css';
import '@mdi/font/css/materialdesignicons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(createOruga()).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
Comece com o catálogo de notas de pesquisa do Oruga 0.14.4 e seu tema 0.10.0. Mantenha a seleção controlada de OTaginput com o vocabulário de seis tópicos, a busca sem diferenciar maiúsculas de minúsculas, as novas tags e duplicatas desabilitadas e o limite de três tags. Mantenha as definições dos tópicos e a validação do título conectadas ao instantâneo salvo, limpando a confirmação salva após alterações. Inclua a configuração de createOruga, do tema CSS e do recurso MDI local. Redefina para um rascunho vazio; não invente dados de comparação de produtos nem uma atualização remota do catálogo.
05
Fontes e escopo do sistema de design Oruga UI
Oruga 0.14.4 com tema padrão opcional 0.10.0. Vocabulário e ilustração do catálogo originais. As alterações salvas afetam apenas o estado local da página, sem envio, publicação ou persistência após recarregar.
