Documentação do template

Ações e navegação

<echo-button variant="filled" intent="primary">Save</echo-button>
<echo-chip>tag</echo-chip> · <echo-badge intent="success">ok</echo-badge> · <echo-pill>4</echo-pill>
<echo-dropdown label="Account"><template #trigger>…</template>…</echo-dropdown>
<echo-tabs v-model="tab" :tabs="TABS" />
<echo-pagination v-model="page" :pages="12" />
<echo-breadcrumb :items="TRAIL" />

Formulários

<echo-field v-slot="{ id, fieldName }" label="E-mail" name="email"><echo-input :id="id" v-model="email" :name="fieldName" /></echo-field>
<echo-input v-model="text" type="email" size="sm" />
<echo-textarea v-model="note" rows="3" />
<echo-select v-model="topic"><option value="a">A</option></echo-select>
<echo-search-select v-model="country" list-id="countries" :options="names" />
<echo-date-picker v-model="birthday" mode="date" :start-year="1990" />
<echo-phone-input v-model="phone" country="br" @validity="ok = $event" />
<echo-checkbox v-model="agreed">I agree</echo-checkbox>
<echo-radio v-model="skin" name="skin" value="bordered" />
<echo-switch v-model="on" />
<echo-slider v-model="zoom" :min="1" :max="4" :step="0.01" />
<echo-rating v-model="stars" />
<echo-tags-input v-model="tags" />
<echo-file-button accept="image/*" @files="onFiles">Choose</echo-file-button>
<echo-dropzone accept="image/*" @files="onFiles">…</echo-dropzone>

Retorno e espera

<echo-alert tone="danger" title="That failed">…</echo-alert>
<echo-modal ref="el" title-id="x-title" size="md"><template #title>…</template>…</echo-modal>
<echo-drawer ref="el" title-id="y-title">…</echo-drawer>
useToast().push({ tone: 'success', title: 'Done', message: 'Saved.' })
<echo-block :loading="pending" label="Loading…">…</echo-block>
<echo-loader :loading="loading">…</echo-loader>
<echo-skeleton :lines="3" /> · <echo-spinner size="sm" />
<echo-progress :value="64" label="Progress" /> · <echo-ring :value="76" />

Conteúdo

<echo-card title="Team" subtitle="Who works here" :loading="pending">…</echo-card>
<echo-list><echo-list-item title="Row" /></echo-list>
<echo-data-table :rows="ROWS" :columns="COLS" />
<echo-avatar :src="url" name="Ada Lovelace" size="lg" />
<echo-gallery :items="IMAGES" />
<echo-tree :nodes="NODES" /> · <echo-timeline :items="STEPS" />
<echo-collapse><template #summary>…</template>…</echo-collapse>
<echo-stat label="Visits" value="24.8k" :delta="12.4" />
<echo-player :src="video" />

Mídia e códigos

<echo-chart :option="option" summary="What the chart says" height="280px" />
<echo-map :lat="-25.5" :lng="-54.6" :zoom="12" :markers="PINS" />
<echo-carousel label="Slides" loop autoplay>…</echo-carousel>
<echo-editor v-model="html" label="Body" />
<echo-image-cropper ref="el" :usages="['avatar']" mask="square" @apply="upload" />
<echo-image-viewer ref="el" :src="url" :caption="url" />
<echo-qr-code value="https://example.com" :size="180" />
<echo-barcode value="ECHO-2026-0001" format="CODE128" />

Calendário

<echo-calendar v-model:view="view" v-model:date="day" :events="EVENTS" @create="onCreate" @open="onOpen" />
<echo-calendar-mini v-model="day" :events="EVENTS" />

Modais de conta

<auth-login-form :form-id="id" :pending="sending" :error="failure" @submit="signIn" />
<auth-register-form :form-id="id" @submit="register" @login="toLogin" />
<auth-forgot-password-form :form-id="id" :sent="sent" @submit="recover" />
<auth-update-password-form :form-id="id" require-current @submit="changePassword" />
<auth-page-shell :title="title" :image="COVER" cover-title="…">…</auth-page-shell>
<auth-login-modal ref="el" :pending="sending" :error="failure" @submit="signIn" />
<auth-register-modal ref="el" @submit="register" @login="switchToLogin" />
<auth-forgot-password-modal ref="el" :sent="sent" @submit="recover" />
<auth-update-password-modal ref="el" require-current @submit="changePassword" />
<auth-lock-modal ref="el" :name="user.name" :avatar="user.avatar" @submit="unlock" />

Chrome (barras, rodapés, trilhos)

<masthead-ecommerce :links="LINKS" :departments="DEPARTMENTS" :cart-count="3" @search="onSearch" />
<masthead-learn :links="LINKS" :course="course" :done="17" :total="24" />
<masthead-help-desk :links="LINKS" :status="status" status-tone="success" :ticket-label="label" />
<masthead-landing :links="SECTIONS" :cta-label="cta" floating />
<footer-ecommerce :columns="COLUMNS" :legal="LEGAL" phone="…" email="…" />
<footer-learn :columns="COLUMNS" :cta-title="…" :cta-label="…" /> · <footer-landing :links="LINKS" :tagline="…" />
<sidebar-panel v-model:collapsed="collapsed" :groups="GROUPS" />
<sidebar-docs :groups="NAV" content-selector="#guide" /> · <sidebar-filters v-model="picked" :groups="FILTERS" />
<element-theme-switch /> · <element-language-switch compact /> · <element-currency-switch />

2026-08-11

• Largura do tema: A régua do conteúdo passou de dois para três valores (compact, extended, full), com o padrão do deploy vindo de NUXT_THEME_WIDTH / NUXT__THEME_WIDTH e assado no script de pré-pintura.
• Barras, rodapés e trilhos: Cinco mastheads e cinco rodapés (loja, portal imobiliário, curso, central de ajuda, landing), três barras laterais e a página de seletores, com prévia de celular em viewport real.
• Conta em duas formas: Os campos saíram dos modais para componentes próprios, e as quatro rotinas ganharam rotas de verdade, sem masthead, no cartão centrado ou na divisão com imagem em 60% da tela.
• Calendário: Agenda em quatro visões, mês pequeno para o trilho e a aritmética de datas em utilitários - sem dependência nova, sobre os tokens do tema.
• Vitrine redistribuída: Botões e rótulos em páginas separadas, grupo de autenticação, grupo de navegação com o chrome e uma página de formulários completos.
• Uma origem de API: A Referência publica a origem do deploy e nada mais, e o painel de teste dispara contra ela: o seletor de servidor era uma segunda fonte de verdade.
• Guia para agentes: Documentos baixáveis em /agentes: o sistema inteiro num arquivo e uma versão por página da vitrine.

2026-08-05

• Vitrine dividida: A página única de oitocentas linhas virou seis rotas com menu lateral, uma por assunto.
• Navegação: Paginação, trilha, abas com tablist da ARIA, linha do tempo e gaveta lateral.
• Primitivos de painel: Barra de progresso, anel e linha de estatística; os cartões de painel viraram composição deles.
• Cartão e lista: Card com cabeçalho, mídia e as quatro ações (recolher, atualizar, expandir, remover), mais List em três densidades.
• Media player: Plyr como primeira dependência de runtime, por causa de Vimeo e YouTube atrás de uma interface só.
• Toasts: Fila global com posição no estado, e a mesma cunha de acento dos alerts e modais.
• Avaliação: Leitura com fração e interativa sobre rádios nativos, com as setas do teclado de graça.
• Controles e escala: Toggler, caixa de marcar, rádio, seletores nativos de data e cor, e a escala sm/md/lg dos botões.
• Sistema de intenções: Dez intenções com variantes para botões, chips, badges e pills, em dois eixos de classes.
• Alerts em oito tons: Os quatro tonais nomeados entram na paleta, com a cunha arredondada de acento.
• Modais nativos: Dialog opaco com cunha de intenção, fundo embaçado, escala de largura e rolagem travada.
• Vitrine e tipografia: Páginas /componentes e /tipografia com todos os elementos do sistema.
• Três famílias: Manrope, Montserrat e JetBrains Mono, cada uma com o seu papel fixo no sistema.