@nexdom/uimed-vue 2.0.0-beta.8 → 2.0.0

package/skills/uimed-vue/references/guide/composables/use-confirm.md

@@ -0,0 +1,123 @@
+# Confirmações
+
+Uma vez que carregamos o [Componente base](../components/main.md), podemos estar tirando proveito da nossa composable para pedir a confirmação do usuário antes de executar uma ação.
+
+A ação só é executada depois que o usuário clica no botão de confirmação. Enquanto ela executa, o botão de confirmação apresenta um indicador de carregamento, o botão de cancelamento fica desabilitado e o diálogo não pode ser fechado. Ao terminar, o diálogo fecha e `confirm` devolve o retorno da ação.
+
+Se o usuário cancelar, ou se a ação falhar, `confirm` devolve `false`. Em caso de falha, a mensagem do erro é apresentada em um [toast](./use-toast.md), assim como no [Run or toast](./use-run-or-toast.md).
+
+## Uso
+
+### Confirmação
+
+O diálogo apresenta os botões "Cancelar" e "Confirmar", com o foco inicial em "Cancelar".
+
+A partir do terceiro parâmetro, `confirm` repassa os parâmetros para a ação, assim como o `run` do [Run or toast](./use-run-or-toast.md). O `isRunning` indica se a ação está em execução.
+
+```vue
+<template>
+  <u-main>
+    <u-button :loading="isRunning" @click="save">Salvar alterações</u-button>
+    <p>Resultado: {{ result }}</p>
+  </u-main>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { UMain, UButton } from "@nexdom/uimed-vue/components";
+import { useConfirm } from "@nexdom/uimed-vue/composables";
+
+const { confirm, isRunning } = useConfirm();
+const result = ref<string | false>();
+
+function saveChanges(changes: string): Promise<string> {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(`${changes} salvas`), 1500);
+  });
+}
+
+async function save() {
+  result.value = await confirm(
+    { title: "Salvar alterações", message: "Deseja salvar as alterações feitas no cadastro?" },
+    saveChanges,
+    "Alterações",
+  );
+}
+</script>
+```
+
+### Ação destrutiva
+
+Personalize os textos dos botões com `confirmText` e `cancelText`, e a cor do botão de confirmação com `color`.
+
+```vue
+<template>
+  <u-main>
+    <u-button :loading="isRunning" color="danger" @click="remove">Excluir paciente</u-button>
+  </u-main>
+</template>
+
+<script lang="ts" setup>
+import { UMain, UButton } from "@nexdom/uimed-vue/components";
+import { useConfirm } from "@nexdom/uimed-vue/composables";
+
+const { confirm, isRunning } = useConfirm();
+
+async function remove() {
+  await confirm(
+    {
+      title: "Excluir paciente",
+      message: "Esta ação não pode ser desfeita.",
+      confirmText: "Excluir",
+      cancelText: "Manter",
+      color: "danger",
+    },
+    () => new Promise((resolve) => setTimeout(() => resolve("Paciente excluído"), 1500)),
+  );
+}
+</script>
+```
+
+### Falha na ação
+
+```vue
+<template>
+  <u-main>
+    <u-button :loading="isRunning" color="danger" variant="secondary" @click="fail">
+      Excluir com falha
+    </u-button>
+  </u-main>
+</template>
+
+<script lang="ts" setup>
+import { UMain, UButton } from "@nexdom/uimed-vue/components";
+import { useConfirm } from "@nexdom/uimed-vue/composables";
+
+const { confirm, isRunning } = useConfirm();
+
+async function fail() {
+  await confirm(
+    { title: "Excluir paciente", message: "Esta ação não pode ser desfeita.", color: "danger" },
+    () =>
+      new Promise((_, reject) => {
+        const error = new Error("Não foi possível excluir o paciente.");
+        setTimeout(() => reject(error), 1500);
+      }),
+  );
+}
+</script>
+```
+
+### Fechando o diálogo
+
+Além do botão de cancelamento, o usuário pode fechar o diálogo pela tecla `Esc` ou clicando fora dele. Nesses casos, `confirm` devolve `false` ao fim da animação de fechamento.
+
+O botão "voltar" do navegador também fecha o diálogo, sem sair da página, em aplicações que usam o [Vue Router](https://router.vuejs.org/). A exceção é quando o "voltar" leva a uma página aberta com `router.replace`, como a página pela qual o usuário entrou na aplicação: nesse caso, a navegação acontece e o diálogo continua aberto.
+
+Enquanto a ação estiver em execução, o diálogo não fecha por nenhum desses meios e, exceto no caso do `router.replace` acima, o "voltar" também não sai da página.
+
+## Ver também
+
+- Consulte a referência de [API do useConfirm](../../api/composables/use-confirm.md) para mais informações.
+- Para apresentar mensagens ou perguntas sem executar uma ação, use a composable [useDialog](./use-dialog.md).
+- Para apresentar conteúdo próprio, como um formulário, em uma janela modal, use o componente [Dialog](../components/dialog.md).

package/skills/uimed-vue/references/guide/composables/use-dialog.md

@@ -0,0 +1,102 @@
+# Diálogos
+
+Uma vez que carregamos o [Componente base](../components/main.md), podemos estar tirando proveito da nossa composable para apresentação de diálogos, que interrompem o usuário com uma mensagem e aguardam sua resposta.
+
+Os diálogos são apresentados um de cada vez, na ordem em que foram solicitados. Se um diálogo for solicitado enquanto outro estiver aberto, ele será apresentado assim que o atual for fechado.
+
+## Uso
+
+### Diálogo simples
+
+Sem a opção `actions`, o diálogo apresenta apenas o botão "Fechar" e resolve `undefined`.
+
+```vue
+<template>
+  <u-main>
+    <u-button @click="openSimple">Diálogo simples</u-button>
+  </u-main>
+</template>
+
+<script lang="ts" setup>
+import { UMain, UButton } from "@nexdom/uimed-vue/components";
+import { useDialog } from "@nexdom/uimed-vue/composables";
+
+const { dialog } = useDialog();
+
+async function openSimple() {
+  await dialog({
+    title: "Cadastro enviado",
+    message: "Seu cadastro foi enviado para análise.",
+  });
+}
+</script>
+```
+
+### Ações personalizadas
+
+Cada ação da opção `actions` vira um botão, na ordem informada e alinhado à direita. O diálogo resolve o `value` da ação clicada.
+
+Por padrão, a última ação usa a variante `primary` e as demais, a variante `ghost`.
+
+```vue
+<template>
+  <u-main>
+    <u-button @click="openWithActions">Ações personalizadas</u-button>
+    <p>Resposta: {{ answer ?? "nenhuma" }}</p>
+  </u-main>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { UMain, UButton } from "@nexdom/uimed-vue/components";
+import { useDialog } from "@nexdom/uimed-vue/composables";
+
+const { dialog } = useDialog();
+const answer = ref<string>();
+
+async function openWithActions() {
+  answer.value = await dialog({
+    title: "Sessão expirando",
+    message: "Sua sessão irá expirar em breve. Deseja continuar conectado?",
+    actions: [
+      { text: "Sair", value: "sair" },
+      { text: "Continuar conectado", value: "continuar" },
+    ],
+  });
+}
+</script>
+```
+
+### Fechando o diálogo
+
+Além dos botões, o usuário pode fechar o diálogo pela tecla `Esc` ou clicando fora dele. Nesses casos, o diálogo resolve `undefined` ao fim da animação de fechamento.
+
+O botão "voltar" do navegador também fecha o diálogo, sem sair da página, em aplicações que usam o [Vue Router](https://router.vuejs.org/). A exceção é quando o "voltar" leva a uma página aberta com `router.replace`, como a página pela qual o usuário entrou na aplicação: nesse caso, a navegação acontece e o diálogo continua aberto.
+
+### Fila de diálogos
+
+```vue
+<template>
+  <u-main>
+    <u-button variant="secondary" @click="openQueue">Dois diálogos seguidos</u-button>
+  </u-main>
+</template>
+
+<script lang="ts" setup>
+import { UMain, UButton } from "@nexdom/uimed-vue/components";
+import { useDialog } from "@nexdom/uimed-vue/composables";
+
+const { dialog } = useDialog();
+
+function openQueue() {
+  dialog({ title: "Primeiro diálogo", message: "Este diálogo é apresentado primeiro." });
+  dialog({ title: "Segundo diálogo", message: "Este diálogo aguardou o primeiro ser fechado." });
+}
+</script>
+```
+
+## Ver também
+
+- Consulte a referência de [API do useDialog](../../api/composables/use-dialog.md) para mais informações.
+- Para confirmar uma ação antes de executá-la, use a composable [useConfirm](./use-confirm.md).
+- Para apresentar conteúdo próprio, como um formulário, em uma janela modal, use o componente [Dialog](../components/dialog.md).

package/skills/uimed-vue/references/guide/composables/use-run-or-toast.md

@@ -0,0 +1,55 @@
+# Run or toast
+
+Uma vez que carregamos o [Componente base](../components/main.md), podemos estar tirando proveito da nossa composable para execução de métodos assíncronos e apresentação de mensagens _toast_ em caso de exceções.
+
+## Uso
+
+```vue
+<template>
+  <u-main>
+    <u-row>
+      <u-column cols="auto">
+        <u-button :loading="isRunningSuccessfully" color="positive" @click="runSuccessfully">
+          Executar com sucesso
+        </u-button>
+      </u-column>
+      <u-column cols="auto">
+        <u-button :loading="isRunningUnsuccessfully" color="danger" @click="runUnsuccessfully">
+          Executar com falha
+        </u-button>
+      </u-column>
+    </u-row>
+  </u-main>
+</template>
+
+<script lang="ts" setup>
+import { UMain, URow, UColumn, UButton } from "@nexdom/uimed-vue/components";
+import { useRunOrToast } from "@nexdom/uimed-vue/composables";
+
+const { run: runSucceeding, isRunning: isRunningSuccessfully } = useRunOrToast();
+const { run: runFailing, isRunning: isRunningUnsuccessfully } = useRunOrToast();
+
+function runSuccessfully() {
+  runSucceeding(
+    () =>
+      new Promise((resolve) => {
+        setTimeout(resolve, 1500);
+      }),
+  );
+}
+
+function runUnsuccessfully() {
+  runFailing(
+    () =>
+      new Promise((_, reject) => {
+        const error = new Error("Ops! Algo deu errado.");
+        setTimeout(() => reject(error), 1500);
+      }),
+  );
+}
+</script>
+```
+
+## Ver também
+
+Consulte a referência de [API do useRunOrToast](../../api/composables/use-run-or-toast.md) para mais informações.

package/skills/uimed-vue/references/guide/composables/use-toast.md

@@ -0,0 +1,57 @@
+# Toasts
+
+Uma vez que carregamos o [Componente base](../components/main.md), podemos estar tirando proveito da nossa composable para apresentação de mensagens _toast_.
+
+## Uso
+
+```vue
+<template>
+  <u-main>
+    <u-row>
+      <u-column cols="auto">
+        <u-button
+          color="positive"
+          @click="toast({ message: 'Mensagem positiva.', color: 'positive' })"
+        >
+          Positive
+        </u-button>
+      </u-column>
+      <u-column cols="auto">
+        <u-button
+          color="informative"
+          @click="toast({ message: 'Mensagem informativa.', color: 'informative' })"
+        >
+          Informative
+        </u-button>
+      </u-column>
+      <u-column cols="auto">
+        <u-button
+          color="caution"
+          @click="toast({ message: 'Mensagem de atenção.', color: 'caution' })"
+        >
+          Caution
+        </u-button>
+      </u-column>
+      <u-column cols="auto">
+        <u-button
+          color="danger"
+          @click="toast({ message: 'Mensagem de perigo.', color: 'danger' })"
+        >
+          Danger
+        </u-button>
+      </u-column>
+    </u-row>
+  </u-main>
+</template>
+
+<script lang="ts" setup>
+import { UMain, URow, UColumn, UButton } from "@nexdom/uimed-vue/components";
+import { useToast } from "@nexdom/uimed-vue/composables";
+
+const { toast } = useToast();
+</script>
+```
+
+## Ver também
+
+Consulte a referência de [API do useToast](../../api/composables/use-toast.md) para mais informações.

package/skills/uimed-vue/references/guide/composables/use-unsaved-changes.md

@@ -0,0 +1,129 @@
+# Alterações não salvas
+
+Uma vez que carregamos o [Componente base](../components/main.md), podemos estar tirando proveito da nossa composable para evitar que o usuário perca as alterações de um formulário ao sair da página sem salvar.
+
+A composable compara o valor original do formulário (`previous`) com o valor atual (`current`) e informa, por meio de `hasChanges`, se existem alterações. Enquanto existirem alterações:
+
+- sair da página pelo [Vue Router](https://router.vuejs.org/) apresenta um diálogo de [confirmação](./use-confirm.md);
+- recarregar a página, fechar a aba ou sair da aplicação por um link externo apresenta o aviso do próprio navegador.
+
+## Uso
+
+Edite o nome do paciente e tente ir para a lista.
+
+A demonstração tem duas páginas, "Cadastro do paciente" e "Pacientes", com um roteador próprio. Por isso, a navegação entre elas não altera o endereço do navegador.
+
+```vue
+<!-- PatientForm.vue, página renderizada pelo <RouterView> -->
+<template>
+  <u-section title="Cadastro do paciente" :actions="actions">
+    <u-section-content>
+      <u-text-field v-model="form.name" label="Nome" />
+      <p>Alterações não salvas: {{ hasChanges ? "sim" : "não" }}</p>
+    </u-section-content>
+  </u-section>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, toRaw } from "vue";
+import { useRouter } from "vue-router";
+import type { ComponentProps } from "vue-component-type-helpers";
+import { USection, USectionContent, UTextField } from "@nexdom/uimed-vue/components";
+import { useUnsavedChanges } from "@nexdom/uimed-vue/composables";
+
+const router = useRouter();
+const saved = ref({ name: "Maria Silva" });
+const form = ref(structuredClone(toRaw(saved.value)));
+const { hasChanges } = useUnsavedChanges({ previous: saved, current: form });
+
+function save() {
+  // Marca o formulário como salvo
+  saved.value = structuredClone(toRaw(form.value));
+}
+
+async function saveAndLeave() {
+  save();
+  await router.push("/pacientes");
+}
+
+const actions = computed<ComponentProps<typeof USection>["actions"]>(() => [
+  { label: "Ir para a lista", variant: "ghost", onClick: () => router.push("/pacientes") },
+  { label: "Salvar", variant: "secondary", disabled: !hasChanges.value, onClick: save },
+  { label: "Salvar e ir para a lista", onClick: saveAndLeave },
+]);
+</script>
+```
+
+### Comparação dos valores
+
+`previous` e `current` aceitam uma `ref`, um getter (`() => valor`) ou um objeto `reactive`. A comparação é feita em profundidade:
+
+- a ordem das propriedades não importa;
+- uma propriedade com `undefined` é igual a uma propriedade ausente;
+- datas (`Date`) são comparadas pelo horário;
+- listas são comparadas item a item, na mesma ordem;
+- `null`, `""` e `undefined` são diferentes entre si, então limpar um campo que era `null` conta como alteração;
+- objetos simples (como `{ nome: "Maria" }`) são comparados propriedade a propriedade;
+- os demais objetos, como `File`, `Blob`, `Map`, `Set` e instâncias de classes, são comparados por referência: trocar um anexo por outro `File` conta como alteração, mesmo que o conteúdo seja igual;
+- os demais valores são comparados com [`Object.is`](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/is), então `NaN` é igual a `NaN`.
+
+### Saindo da página
+
+Com alterações, sair da página pelo Vue Router apresenta o diálogo "Alterações não salvas", com o foco inicial em "Continuar editando":
+
+- "Sair sem salvar" continua a navegação;
+- "Continuar editando", a tecla `Esc` ou um clique fora do diálogo cancelam a navegação, e o usuário continua na página com as suas alterações.
+
+Sem alterações, a navegação acontece sem diálogo. Em aplicações com Vue Router e histórico do navegador (`createWebHistory` ou `createWebHashHistory`), o botão "voltar" do navegador também passa pela mesma verificação: ao cancelar, o endereço volta a ser o da página atual.
+
+Enquanto o diálogo estiver aberto, novas navegações não abrem outro diálogo: a resposta vale para a navegação mais recente. Por exemplo, em aplicações com Vue Router e histórico do navegador (`createWebHistory` ou `createWebHashHistory`), se o usuário usar o botão "voltar" do navegador com o diálogo aberto, o diálogo continua aberto; "Sair sem salvar" leva à página anterior e "Continuar editando" mantém o usuário na página. Esse comportamento difere do [`confirm`](./use-confirm.md), cujo diálogo fecha com o "voltar".
+
+Se a página tiver mais de um componente usando `useUnsavedChanges` com alterações, cada um apresenta o seu diálogo, um depois do outro.
+
+### Depois de salvar
+
+Para marcar o formulário como salvo, atribua a `previous` uma cópia do valor atual, como no `save` do exemplo. A partir daí, `hasChanges` volta a ser `false` e a navegação seguinte acontece sem diálogo, mesmo que ela seja feita logo em seguida, como no "Salvar e ir para a lista".
+
+Use uma cópia (por exemplo, com `structuredClone(toRaw(valor))`). Se `previous` e `current` apontarem para o mesmo objeto, as alterações de um também aparecem no outro e `hasChanges` fica sempre `false`.
+
+### Recarregando ou fechando a aba
+
+Com alterações, recarregar a página (F5), fechar a aba ou sair da aplicação por um link externo apresenta o aviso do próprio navegador. O texto desse aviso é definido pelo navegador e não pode ser personalizado, e ele só aparece se o usuário já interagiu com a página (por exemplo, digitando em um campo).
+
+O aviso só é registrado enquanto houver alterações. Para desligá-lo, use a opção `beforeUnload: false`.
+
+```ts
+const { hasChanges } = useUnsavedChanges(
+  { previous: saved, current: form },
+  { beforeUnload: false },
+);
+```
+
+### Personalizando o diálogo
+
+Os textos e a cor do botão de confirmação aceitam as mesmas opções do [`confirm`](./use-confirm.md).
+
+```ts
+const { hasChanges } = useUnsavedChanges(
+  { previous: saved, current: form },
+  {
+    title: "Descartar cadastro",
+    message: "O cadastro do paciente ainda não foi salvo. Deseja descartá-lo?",
+    confirmText: "Descartar",
+    cancelText: "Voltar ao cadastro",
+    color: "caution",
+  },
+);
+```
+
+### Limitações
+
+- O diálogo depende do [Componente base](../components/main.md): sem ele, o diálogo não aparece e a navegação fica pendente.
+- A navegação só é verificada quando `useUnsavedChanges` é chamada em uma página renderizada pelo `<RouterView>` (ou em um componente dentro dela). Em outros lugares, ou em aplicações sem Vue Router, apenas `hasChanges` e o aviso do navegador funcionam.
+- Mudanças apenas nos parâmetros (`params`) ou na consulta (`query`) da mesma rota não são verificadas.
+- Uma [janela modal](../components/dialog.md) com uma ação em carregamento (`loading`) não fecha pelo botão "voltar" do navegador, mas a verificação desta composable acontece antes: com alterações, o "voltar" apresenta o diálogo "Alterações não salvas" sobre a janela, e "Sair sem salvar" sai da página mesmo com a ação ainda em carregamento.
+
+## Ver também
+
+- Consulte a referência de [API do useUnsavedChanges](../../api/composables/use-unsaved-changes.md) para mais informações.
+- Para pedir a confirmação do usuário antes de executar uma ação, use a composable [useConfirm](./use-confirm.md).

package/skills/uimed-vue/references/guide/getting-started.md

@@ -0,0 +1,135 @@
+# Iniciando
+
+## Instação
+
+### Pré-requisitos
+
+- [Node.js](https://nodejs.org/) na versão 22 ou superior.
+- [Vue.js](https://vuejs.org/) na versão 3 ou superior.
+- [@nexdom/shared](https://nexdom-healthtech.github.io/shared/) na versão 2.1.1 ou superior.
+- [vue-component-type-helpers](https://www.npmjs.com/package/vue-component-type-helpers) para tipagem de props.
+- Editor de texto com suporte a sintaxe [Markdown](https://en.wikipedia.org/wiki/Markdown).
+  - [VSCode](https://code.visualstudio.com/) é recomendado, junto com a [extensão oficial Vue](https://marketplace.visualstudio.com/items?itemName=Vue.volar).
+
+Para instalar no seu projeto, execute:
+
+```sh [Vite+]
+$ vp add @nexdom/uimed-vue
+```
+
+```sh [npm]
+$ npm install @nexdom/uimed-vue
+```
+
+```sh [pnpm]
+$ pnpm add @nexdom/uimed-vue
+```
+
+```sh [yarn]
+$ yarn add @nexdom/uimed-vue
+```
+
+## Configuração
+
+Adicione o plugin ao arquivo de configurações do Vite. Ele compila os estilos dos componentes com a fonte e os ajustes visuais da biblioteca. Sem ele, os componentes perdem a fonte Unimed Slab:
+
+```js [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from "@vitejs/plugin-vue";
+import { vitePluginUimed } from "@nexdom/uimed-vue/plugins"; // [!code ++]
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    vitePluginUimed() // [!code ++]
+  ];
+  // ...
+});
+```
+
+Após atualizar as configurações do Vite, instale o plugin no seu app:
+
+```ts [main.ts]
+import { createApp } from "vue";
+import { createUimed } from "@nexdom/uimed-vue"; // [!code ++]
+
+import App from "./App.vue";
+
+const uimed = createUimed(); // [!code ++]
+
+createApp(App)
+  .use(uimed) // [!code ++]
+  .mount("#app");
+```
+
+Os textos que os componentes geram por conta própria, como os anúncios para leitores de tela (por exemplo, `Carregando...`) e os rótulos da paginação, ficam em português.
+
+## Tipagem de props
+
+A biblioteca não exporta tipos de props diretamente. A forma recomendada é utilizar `ComponentProps` do pacote `vue-component-type-helpers`, instalado como dependência de pares (_peer dependency_) da biblioteca.
+
+```vue [App.vue]
+<template>
+  <u-main :app-bar="appBar" :navigation-menu="navigationMenu">
+    <u-section :actions="sectionActions">
+      <!-- ... -->
+    </u-section>
+  </u-main>
+</template>
+
+<script lang="ts" setup>
+import type { ComponentProps } from "vue-component-type-helpers";
+import { UMain, USection } from "@nexdom/uimed-vue/components";
+
+type MainProps = ComponentProps<typeof UMain>;
+type AppBar = NonNullable<MainProps["appBar"]>;
+type NavigationMenu = NonNullable<MainProps["navigationMenu"]>;
+type SectionAction = NonNullable<ComponentProps<typeof USection>["actions"]>[number];
+
+const appBar: AppBar = {
+  title: "Meu App",
+};
+
+const navigationMenu: NavigationMenu = {
+  items: [{ description: "Home", route: "/", icon: "home" }],
+};
+
+const sectionActions: SectionAction[] = [{ type: "submit", label: "Salvar" }];
+</script>
+```
+
+`NonNullable` é necessário porque as props são opcionais: sem ele, o tipo também aceitaria `undefined`, impedindo o acesso a propriedades aninhadas (como `AppBar["user"]`) e o uso com `reactive<...>()` ou `computed<...>()`.
+
+## Agentes de IA
+
+O pacote traz um guia de uso para agentes de IA (como Claude Code, Codex, Cursor ou Copilot), no formato aberto de Agent Skills, em `node_modules/@nexdom/uimed-vue/skills/uimed-vue/SKILL.md`. Ele reúne a instalação, a configuração, as regras de uso, os pontos de entrada, as mudanças incompatíveis e esta documentação, todos na versão instalada no projeto: a cada atualização da biblioteca, o guia é atualizado junto.
+
+Para que o agente do seu projeto use o guia, referencie-o uma vez nas instruções dele:
+
+```md [CLAUDE.md]
+@node_modules/@nexdom/uimed-vue/skills/uimed-vue/SKILL.md
+```
+
+```md [AGENTS.md]
+Para usar a biblioteca `@nexdom/uimed-vue`, siga `node_modules/@nexdom/uimed-vue/skills/uimed-vue/SKILL.md`.
+```
+
+O guia trata só do uso da biblioteca: as regras do seu projeto, como o fluxo de Git e os agentes, continuam nas instruções dele.
+
+## E agora?
+
+Importe o componente [`Main`](../api/components/main.md) para dentro do seu `App.vue`, conforme o exemplo a seguir e então você poderá utilizar todos os recursos do `@nexdom/uimed-vue` a vontade.
+
+```vue [App.vue]
+<template>
+  <u-main>
+    <!-- ... -->
+  </u-main>
+</template>
+
+<script lang="ts" setup>
+import { UMain } from "@nexdom/uimed-vue/components";
+</script>
+```
+
+Acesse as [APIs](../api/index.md) e saiba mais dos recursos que este framework dispõe.

package/skills/uimed-vue/references/guide/icons.md

@@ -0,0 +1,71 @@
+# Ícones
+
+Os componentes que aceitam um ícone, como o [botão de ícone](./components/icon-button.md) e os itens e grupos do primeiro nível do [menu de navegação](./components/main.md#menu-de-navegacao), recebem o nome de um dos ícones listados nesta página na propriedade `icon`.
+
+Os ícones são desenhados como imagens vetoriais (SVG) na própria página, sem carregar uma fonte de ícones. Por isso, classes de fontes de ícones (como `mdi-home`) não exibem ícones: use os nomes desta página.
+
+## Uso
+
+Informe o nome do ícone em `icon`. No [botão de ícone](./components/icon-button.md), o ícone é todo o conteúdo do botão, e a propriedade `label` define o nome que os leitores de tela anunciam no lugar dele:
+
+```vue
+<template>
+  <u-icon-button icon="cog" label="Configurações" />
+</template>
+
+<script lang="ts" setup>
+import { UIconButton } from "@nexdom/uimed-vue/components";
+</script>
+```
+
+Nos itens e grupos do menu de navegação, o ícone aparece antes da descrição:
+
+```vue
+<template>
+  <u-main :appBar :navigationMenu>
+    <h2>O conteúdo da página vai aqui...</h2>
+  </u-main>
+</template>
+
+<script lang="ts" setup>
+import type { ComponentProps } from "vue-component-type-helpers";
+import { UMain } from "@nexdom/uimed-vue/components";
+
+type MainProps = ComponentProps<typeof UMain>;
+
+const appBar: NonNullable<MainProps["appBar"]> = {
+  title: "Menu superior",
+};
+
+const navigationMenu: NonNullable<MainProps["navigationMenu"]> = {
+  items: [
+    { description: "Início", route: "/", icon: "home" },
+    { description: "Agenda", route: "/agenda", icon: "calendar" },
+    { description: "Configurações", route: "/configuracoes", icon: "cog" },
+  ],
+};
+</script>
+```
+
+No menu, o ícone usa a cor do texto do menu. Ele é decorativo: leitores de tela anunciam apenas a descrição.
+
+O ícone é obrigatório nos itens e grupos do primeiro nível do menu, porque, em telas largas, o menu fica recolhido e mostra apenas os ícones. Os itens dentro de um grupo não exibem ícones.
+
+## Ícones disponíveis
+
+A lista começa pelos ícones de conteúdo, como `home` e `calendar`, cujos nomes descrevem o desenho do ícone, e não onde ele deve ser usado. Quase todos eles têm uma versão alternativa do mesmo desenho (atualmente, contornada), com o sufixo `Alternative` no nome. Prefira usar a mesma versão (a original ou a alternativa) em todos os itens do menu.
+
+Em seguida vêm os ícones que os próprios componentes exibem, cujos nomes descrevem a função com que os componentes os usam:
+
+- Ações, como `help`, `search`, `showPassword` e `close`.
+- Expansão de menus e grupos, como `dropdown`, `expand` e `collapse`, e navegação entre páginas, com `prev` e `next`.
+- Marcações da caixa de seleção: `checkboxOn` e `checkboxOff`.
+- Retorno ao usuário, nas cores das mensagens: `success`, `info`, `warning` e `error`.
+
+Use-os com a mesma função, para que o significado de cada ícone seja o mesmo em toda a aplicação.
+
+Busque um ícone pelo nome, sem diferenciar maiúsculas, minúsculas ou acentos, e clique no ícone para copiar o seu nome.
+
+## Ver também
+
+Consulte o [botão de ícone](./components/icon-button.md) e o [Componente base](./components/main.md#menu-de-navegacao) para mais detalhes sobre os componentes que exibem ícones.