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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexdom/uimed-vue",
-  "version": "2.0.0-beta.9",
+  "version": "2.0.0",
   "description": "A ui framework for NEXDOM applications.",
   "keywords": [
     "lib",
@@ -22,10 +22,12 @@
   },
   "files": [
     "dist",
-    "AGENTS.md",
-    "CLAUDE.md"
+    "skills"
   ],
   "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
   "exports": {
     ".": "./dist/index.js",
     "./components": "./dist/components.js",
@@ -52,11 +54,11 @@
     "postinstall": "playwright install --with-deps chromium"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.13.0",
     "@commitlint/cli": "^21.2.1",
     "@commitlint/config-conventional": "^21.2.0",
-    "@fontsource/roboto": "^5.3.0",
-    "@mdi/font": "^7.4.47",
-    "@nexdom/shared": "^2.1.1",
+    "@mdi/js": "^7.4.47",
+    "@nexdom/shared": "^2.3.0",
     "@playwright/test": "^1.62.1",
     "@sonar/scan": "^5.0.0",
     "@stryker-mutator/core": "^10.0.0",
@@ -76,7 +78,6 @@
     "sass-embedded": "^1.103.1",
     "stryker-vue-ignorer": "github:davidlandais/stryker-vue-ignorer",
     "typescript": "^6.0.3",
-    "vite-plugin-vuetify": "^2.1.3",
     "vite-plus": "^1.0.0",
     "vitepress": "2.0.0-alpha.19",
     "vitepress-plugin-group-icons": "^1.7.6",
@@ -88,11 +89,10 @@
     "vuetify": "^4.2.0"
   },
   "peerDependencies": {
-    "@fontsource/roboto": "^5.3.0",
-    "@mdi/font": "^7.4.47",
-    "@nexdom/shared": "^2.1.1",
+    "@mdi/js": "^7.4.47",
+    "@nexdom/shared": "^2.3.0",
     "resize-observer-polyfill": "^1.5.1",
-    "vite-plugin-vuetify": "^2.1.3",
+    "sass-embedded": "^1.103.1",
     "vite-plus": "^1.0.0",
     "vue": "^3.5.40",
     "vue-component-type-helpers": "^3.3.11",

package/skills/uimed-vue/SKILL.md

@@ -0,0 +1,113 @@
+---
+name: uimed-vue
+description: Use when writing or changing a Vue app that uses @nexdom/uimed-vue (NEXDOM's UI library) — setting it up, choosing and configuring its components and composables, styling, unit tests and upgrading between versions.
+---
+
+# Using @nexdom/uimed-vue in an app
+
+This skill ships with the installed version of `@nexdom/uimed-vue`, so it describes exactly the components, props and rules of that version. It only covers how to _use_ the library in an app: the app's own conventions (Git workflow, agents, code style) stay in the app's instructions.
+
+The complete guides and API pages of this version are in [`references/`](references/), in Portuguese, generated from the library's documentation:
+
+- [`references/guide/getting-started.md`](references/guide/getting-started.md): installation and setup.
+- [`references/guide/components/`](references/guide/components/) and [`references/guide/composables/`](references/guide/composables/): how to use each component and composable, with examples.
+- [`references/api/`](references/api/): props, events, slots and types of each component and composable.
+- [`references/guide/icons.md`](references/guide/icons.md): the icon names the components accept.
+- [`references/guide/unit-testing.md`](references/guide/unit-testing.md): unit tests with Vitest and Vue Test Utils.
+- [`references/guide/migration-v1-to-v2.md`](references/guide/migration-v1-to-v2.md): migrating from v1.
+
+Read the page of a component or composable before using it, instead of relying on memory: the library is recent, and its API is not in most models' training data.
+
+## Install
+
+```bash
+vp add @nexdom/uimed-vue
+# Or, without Vite+
+npm i @nexdom/uimed-vue
+```
+
+Its peer dependencies (`@mdi/js`, `@nexdom/shared`, `resize-observer-polyfill`, `sass-embedded`, `vite-plus`, `vue`, `vue-component-type-helpers`, `vue-router`, `vuetify`) must be installed in the app too, in the versions declared in the library's `package.json`.
+
+## Setup
+
+Add the Vite plugin, which compiles the components' styles with the library's font and settings. It's required: without it, the components lose the Unimed Slab font and the library's styles.
+
+```ts
+// vite.config.ts
+import { vitePluginUimed } from "@nexdom/uimed-vue/plugins";
+
+// ...
+
+plugins: [vue(), vitePluginUimed()];
+
+// ...
+```
+
+Register the library in the Vue app:
+
+```ts
+// main.ts
+import { createApp } from "vue";
+import { createUimed } from "@nexdom/uimed-vue";
+import App from "./App.vue";
+
+createApp(App).use(createUimed()).mount("#app");
+```
+
+## Rules
+
+- Place `UMain` at the top of `App.vue`, and build the screens with the library's components (prefixed with `U`), imported from `@nexdom/uimed-vue/components`:
+
+  ```vue
+  <template>
+    <u-main :app-bar="appBar">
+      <!-- the page goes here -->
+    </u-main>
+  </template>
+
+  <script setup lang="ts">
+  import { UMain } from "@nexdom/uimed-vue/components";
+  </script>
+  ```
+
+- Style only through the components' props. Never write CSS, `<style>` blocks, classes or utility classes (spacing, colors, typography) on the library's components: the library only generates the styles its components use, so other classes may not exist.
+- The library is built on Vuetify, but that is an internal detail: don't use Vuetify's components or APIs directly in the app, and don't depend on its classes or theme variables.
+- The library doesn't export prop types. Derive them with `ComponentProps` from `vue-component-type-helpers`:
+
+  ```ts
+  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 SectionAction = NonNullable<ComponentProps<typeof USection>["actions"]>[number];
+  ```
+
+- Icons are passed by name (e.g. `icon="cog"`), from the list in [`references/guide/icons.md`](references/guide/icons.md).
+- The components' internal texts, such as their messages and the names read by screen readers, are in Portuguese (pt-BR).
+
+## Entry points
+
+| Import                          | Contents                                                                               |
+| ------------------------------- | -------------------------------------------------------------------------------------- |
+| `@nexdom/uimed-vue`             | `createUimed()`, to register the library in the app                                    |
+| `@nexdom/uimed-vue/components`  | The components (`UMain`, `USection`, `UButton`, ...)                                   |
+| `@nexdom/uimed-vue/composables` | The composables (`useDialog`, `useConfirm`, `useToast`, ...)                           |
+| `@nexdom/uimed-vue/plugins`     | `vitePluginUimed()` for Vite, and `vitestServerPluginUimed()` for Vitest               |
+| `@nexdom/uimed-vue/unit-test`   | `vueTestUtilsPluginUimed()`, to mount the components in unit tests with Vue Test Utils |
+
+## Breaking changes in 2.0
+
+When upgrading an app from an earlier version, check each change below. The renames, imports, notifications and row alignment have before and after examples in [`references/guide/migration-v1-to-v2.md`](references/guide/migration-v1-to-v2.md).
+
+- The components were renamed with the `U` prefix (e.g. `Root` → `UMain`, `Btn` → `UButton`, `ContentSet` → `USection`).
+- The prop types (e.g. `AppBarConfig`, `SectionAction`) are no longer exported: derive them with `ComponentProps`.
+- The theme is light only, with the library's own palette.
+- `vitePluginUimed()` is required: it now provides the Unimed Slab font, which `createUimed()` no longer sets, and `sass-embedded` became a peer dependency (`vite-plugin-vuetify` no longer is).
+- The app bar notifications take `when` (a text shown as is, e.g. `"10:30"` or `"Ontem"`) instead of `date`: the app formats the date.
+- `URow` aligns its columns to the top by default, and its former `align` prop is now `alignY` (`align-y` in templates); `alignX` aligns them horizontally.
+- `UMaskField` with `mask="cnpj"` accepts the alphanumeric CNPJ: its `v-model` may contain uppercase letters.
+- The icons are inline SVGs from `@mdi/js`: the library no longer loads the Material Design Icons font, so `mdi-*` classes in the app stop working. Use the components' icon names.
+- The items inside a navigation menu group no longer accept `icon`: only the first level items show icons.
+- The navigation menu's first level items and groups require `icon`. From 1145px wide up, the menu is a 56px rail always visible on the left of the content, and the app bar no longer shows the button that opens it.
+- The library only generates the utility classes its components use: the app can't rely on other utility classes (e.g. `ga-*`, `d-sm-flex`, `bg-red`).

package/skills/uimed-vue/references/api/components/autocomplete-field.md

@@ -0,0 +1,45 @@
+# UAutocompleteField
+
+Componente para campos com preenchimento automático (autocomplete/combobox).
+
+## Props
+
+| Prop          | Tipo                                           | Padrão      | Descrição                                                                                                                                            |
+| ------------- | ---------------------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `modelValue`  | `T` ou `T[]`                                   |             | Valor selecionado ou digitado. Vira array automaticamente quando `multiple` é `true`.                                                                |
+| `variant`     | `"primary" \| "secondary"`                     | `"primary"` | Aplica uma variação de estilo distinta ao campo.                                                                                                     |
+| `label`       | `string`                                       |             | Título dado ao campo.                                                                                                                                |
+| `placeholder` | `string`                                       |             | Exemplo de valor para preenchimento do campo.                                                                                                        |
+| `hint`        | `string`                                       |             | Dica, instrução ou mensagem relacionada ao campo.                                                                                                    |
+| `required`    | `boolean`                                      | `false`     | Torna o campo obrigatório para a submissão do formulário.                                                                                            |
+| `disabled`    | `boolean`                                      | `false`     | Remove a possibilidade de interação com o campo.                                                                                                     |
+| `readonly`    | `boolean`                                      | `false`     | Remove a possibilidade de edição do campo.                                                                                                           |
+| `loading`     | `boolean`                                      | `false`     | Exibe um indicador de carregamento. O campo mantém o rótulo como nome acessível e fica marcado como ocupado, e leitores de tela ignoram o indicador. |
+| `clearable`   | `boolean`                                      | `false`     | Exibe recurso para limpar o campo.                                                                                                                   |
+| `strict`      | `boolean`                                      | `false`     | Quando `true`, força seleção de itens da lista. Quando `false`, permite digitação livre.                                                             |
+| `multiple`    | `boolean`                                      | `false`     | Permite a seleção de múltiplos valores.                                                                                                              |
+| `items`       | `Array<string \| { label: string; value: T }>` | `[]`        | Lista de itens disponíveis para seleção. Pode ser strings ou objetos com label/value.                                                                |
+| `dataTestid`  | `string`                                       |             | Aplica atributo `data-testid` para testes sobre o componente.                                                                                        |
+
+## Eventos
+
+| Event               | Retorno                                   | Descrição                                                 |
+| ------------------- | ----------------------------------------- | --------------------------------------------------------- |
+| `update:modelValue` | `T` (ou `T[]` quando `multiple` é `true`) | Retorna o novo valor sempre que o usuário altera o campo. |
+
+## Exemplo
+
+```vue
+<template>
+  <u-autocomplete-field v-model="selectedCountry" label="País" :items="countries" />
+  Selecionado: {{ selectedCountry }}
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { UAutocompleteField } from "@nexdom/uimed-vue/components";
+
+const selectedCountry = ref("");
+const countries = ["Brasil", "Portugal", "Moçambique"];
+</script>
+```

package/skills/uimed-vue/references/api/components/button.md

@@ -0,0 +1,48 @@
+# UButton
+
+Componente para utilização de botões.
+
+## Props
+
+| Prop         | Tipo                                                                                  | Padrão      | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| ------------ | ------------------------------------------------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `variant`    | `"primary" \| "secondary" \| "ghost"`                                                 | `"primary"` | Aplica uma variação de estilo distinta ao botão.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `color`      | `"primary" \| "secondary" \| "positive" \| "informative" \| "caution" \| "danger"`    | `"primary"` | Aplica uma cor ao botão.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `disabled`   | `boolean`                                                                             | `false`     | Remove a possibilidade de clicar ou focar no botão.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| `loading`    | `boolean`                                                                             | `false`     | Exibe um indicador de carregamento e desabilita o botão enquanto ativa, assim como `disabled`: não é possível clicar ou focar no botão, o evento `click` não é disparado e o seu formulário não é enviado, inclusive ao pressionar `Enter` em um dos campos do formulário, quando o botão é o primeiro botão de envio do formulário. Nesse estado, o botão tem a aparência de desabilitado, com o indicador de carregamento, e, se estiver focado, perde o foco ao entrar em carregamento, como qualquer botão desabilitado. O botão mantém o texto como nome acessível e fica marcado como ocupado, e leitores de tela ignoram o indicador. |
+| `fullWidth`  | `boolean`                                                                             | `false`     | Faz o botão ocupar 100% da largura do elemento em que está.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `type`       | `"button" \| "submit"`                                                                | `button`    | Aplica atributo [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#type) para modificar o comportamento do componente. Ignorado quando há `route`.                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| `form`       | `string`                                                                              |             | Aplica atributo [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form), com o `id` do formulário com que o botão está relacionado. Ignorado quando há `route`.                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `route`      | [`RouteLocationRaw`](https://router.vuejs.org/api/type-aliases/RouteLocationRaw.html) |             | Destino do botão, que passa a ser exibido como um link, com a aparência de botão. Uma rota da aplicação (exemplo: `"/pacientes"` ou `{ name: "paciente" }`) navega pelo [Vue Router](https://router.vuejs.org/) da aplicação; um endereço que começa com `http` (exemplo: `"https://google.com"`) navega pelo navegador, na mesma aba. Enquanto `disabled` ou `loading`, o botão não navega e é exibido como um botão desabilitado.                                                                                                                                                                                                          |
+| `dataTestid` | `string`                                                                              |             | Aplica atributo `data-testid` para testes sobre o componente.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+
+## Eventos
+
+| Evento  | Retorno                                                                     | Descrição                                                                                          |
+| ------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
+| `click` | [`MouseEvent`](https://developer.mozilla.org/pt-BR/docs/Web/API/MouseEvent) | Disparado quando o botão é clicado. Não é disparado enquanto o botão está `disabled` ou `loading`. |
+
+## Slots
+
+| Slot      | Descrição                         |
+| --------- | --------------------------------- |
+| `default` | Conteúdo exibido dentro do botão. |
+
+## Exemplo
+
+```vue
+<template>
+  <u-button variant="ghost" color="danger" :loading="loading" @click="onClick">Excluir</u-button>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { UButton } from "@nexdom/uimed-vue/components";
+
+const loading = ref(false);
+
+function onClick(event: MouseEvent) {
+  console.log("Botão clicado!", event);
+}
+</script>
+```

package/skills/uimed-vue/references/api/components/checkbox.md

@@ -0,0 +1,36 @@
+# UCheckbox
+
+Componente para utilização de caixas de seleção.
+
+## Props
+
+| Prop         | Tipo             | Padrão  | Descrição                                                                 |
+| ------------ | ---------------- | ------- | ------------------------------------------------------------------------- |
+| `modelValue` | `T` \| `boolean` | `false` | Valor selecionado pela caixa de seleção.                                  |
+| `label`      | `string`         |         | Título dado à caixa de seleção.                                           |
+| `disabled`   | `boolean`        | `false` | Remove a possibilidade de interação com a caixa de seleção.               |
+| `readonly`   | `boolean`        | `false` | Remove a possibilidade de alteração do valor da caixa de seleção.         |
+| `trueValue`  | `T` \| `boolean` | `true`  | Valor aplicado ao `modelValue` quando a caixa de seleção está marcada.    |
+| `falseValue` | `T` \| `boolean` | `false` | Valor aplicado ao `modelValue` quando a caixa de seleção está desmarcada. |
+| `dataTestid` | `string`         |         | Aplica atributo `data-testid` para testes sobre o componente.             |
+
+## Eventos
+
+| Evento              | Retorno | Descrição                                                               |
+| ------------------- | ------- | ----------------------------------------------------------------------- |
+| `update:modelValue` | `T`     | Retorna o novo valor da caixa de seleção sempre que o usuário o altera. |
+
+## Exemplo
+
+```vue
+<template>
+  <u-checkbox v-model="accepted" label="Aceito os termos de uso" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { UCheckbox } from "@nexdom/uimed-vue/components";
+
+const accepted = ref(false);
+</script>
+```

package/skills/uimed-vue/references/api/components/data-sets/data-set-item.md

@@ -0,0 +1,61 @@
+# UDataSetItem
+
+Componente utilizado para apresentar um registro listado pelo [`UDataSet`](./data-set.md) como um cartão, baseado no [`USection`](../sections/section.md).
+Ocupa toda a altura da sua coluna, de forma que os cartões de uma mesma linha fiquem alinhados.
+
+## Props
+
+| Prop         | Tipo                                     | Padrão      | Descrição                                                                   |
+| ------------ | ---------------------------------------- | ----------- | --------------------------------------------------------------------------- |
+| `title`      | `string`                                 |             | Título do registro, exibido no topo do cartão.                              |
+| `subtitle`   | `string`                                 |             | Breve descrição do registro, exibida abaixo do título.                      |
+| `variant`    | `"primary" \| "secondary"`               | `"primary"` | Aplica uma variação de estilo distinta ao cartão, assim como no `USection`. |
+| `actions`    | [`action[]`](../sections/section.md#action) |             | Lista de ações do registro, exibidas no rodapé do cartão.                   |
+| `dataTestid` | `string`                                 |             | Id do componente para uso em testes automatizados.                          |
+
+## Slots
+
+| Slot      | Descrição                                                                                                    |
+| --------- | ------------------------------------------------------------------------------------------------------------ |
+| `default` | Detalhes do registro, exibidos abaixo do título, como uma [`UTable`](../table.md) `vertical` com alguns campos. |
+
+## Exemplo
+
+```vue
+<template>
+  <u-data-set :items="pacientes" :columns="2">
+    <template #default="{ item }">
+      <u-data-set-item
+        :title="item.nome"
+        :subtitle="item.cidade"
+        :actions="[{ label: 'Editar', variant: 'secondary', onClick: () => editar(item) }]"
+      >
+        <u-table
+          :headers="['Plano', 'Idade', 'Carteirinha']"
+          :items="[[item.plano, item.idade, item.carteirinha]]"
+          vertical
+        />
+      </u-data-set-item>
+    </template>
+  </u-data-set>
+</template>
+
+<script lang="ts" setup>
+import { UDataSet, UDataSetItem, UTable } from "@nexdom/uimed-vue/components";
+
+const pacientes = [
+  {
+    id: 1,
+    nome: "Ana Souza",
+    cidade: "São Paulo - SP",
+    plano: "Ouro",
+    idade: "34 anos",
+    carteirinha: "0001 2345 6789",
+  },
+];
+
+function editar(paciente: (typeof pacientes)[number]) {
+  // ...
+}
+</script>
+```

package/skills/uimed-vue/references/api/components/data-sets/data-set.md

@@ -0,0 +1,67 @@
+# UDataSet
+
+Componente para listagem de registros em uma grade responsiva de cartões, com paginação, pesquisa e ações sobre a listagem.
+Cada registro da página atual ocupa a sua própria coluna da grade e é apresentado pelo slot padrão, normalmente com o componente [`UDataSetItem`](./data-set-item.md).
+
+## Props
+
+| Prop           | Tipo                                     | Padrão                          | Descrição                                                                                                                                                                                                                                                                                                                                                                  |
+| -------------- | ---------------------------------------- | ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `items`        | `T[]`                                    | `[]`                            | Registros a serem listados.                                                                                                                                                                                                                                                                                                                                                |
+| `columns`      | `1 \| 2 \| 3 \| 4 \| 6`                  | `3`                             | Quantidade máxima de registros apresentados lado a lado em cada linha da grade. É reduzida quando não há espaço para cartões de pelo menos 240px de largura. Em telas muito pequenas, cada registro ocupa a largura inteira.                                                                                                                                               |
+| `itemsPerPage` | `number`                                 | `10`                            | Quantidade máxima de registros por página. Os controles de paginação só são exibidos quando há mais de uma página.                                                                                                                                                                                                                                                         |
+| `page`         | `number`                                 | `1`                             | Página atual. Utilize com `v-model:page`.                                                                                                                                                                                                                                                                                                                                  |
+| `actions`      | [`action[]`](../sections/section.md#action) |                                 | Lista de ações sobre a listagem, como "Novo paciente", exibidas como botões à esquerda da barra acima dos registros. Com o campo de pesquisa, ocupam a metade esquerda da barra, ou uma linha própria quando a listagem não tem largura para dois cartões lado a lado. Em telas muito pequenas, cada ação ocupa uma linha inteira. Sem `variant`, cada ação é `secondary`. |
+| `searchable`   | `boolean`                                | `false`                         | Exibe um campo de pesquisa à direita da barra acima dos registros, com 240px de largura, a mesma largura mínima de um cartão. Em telas muito pequenas, ocupa a largura inteira.                                                                                                                                                                                            |
+| `search`       | `string`                                 | `""`                            | Texto pesquisado. Utilize com `v-model:search`. Filtra os registros mesmo quando o campo de pesquisa não é exibido.                                                                                                                                                                                                                                                        |
+| `searchKeys`   | `string[]`                               |                                 | Propriedades dos registros consideradas na pesquisa. Quando não informada ou vazia, todas as propriedades são consideradas.                                                                                                                                                                                                                                                |
+| `noDataText`   | `string`                                 | `"Nenhum registro encontrado."` | Mensagem exibida quando não há registros para listar.                                                                                                                                                                                                                                                                                                                      |
+| `loading`      | `boolean`                                | `false`                         | Coloca a listagem em estado de carregamento.                                                                                                                                                                                                                                                                                                                               |
+| `dataTestid`   | `string`                                 |                                 | Id do componente para uso em testes automatizados.                                                                                                                                                                                                                                                                                                                         |
+
+## Eventos
+
+| Evento          | Retorno  | Descrição                                                                                      |
+| --------------- | -------- | ---------------------------------------------------------------------------------------------- |
+| `update:page`   | `number` | Retorna a nova página sempre que ela é alterada. Volta para a primeira página a cada pesquisa. |
+| `update:search` | `string` | Retorna o novo texto sempre que o usuário altera o campo de pesquisa.                          |
+
+## Slots
+
+| Slot      | Props                        | Descrição                                                                                                                           |
+| --------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `default` | `{ item: T, index: number }` | Apresenta cada registro da página atual, em uma coluna da grade. Recebe o registro original e a sua posição dentro da página atual. |
+
+## Exemplo
+
+```vue
+<template>
+  <u-data-set
+    v-model:page="pagina"
+    :items="pacientes"
+    :columns="4"
+    :items-per-page="8"
+    :actions="[{ label: 'Novo paciente', onClick: novoPaciente }]"
+    searchable
+  >
+    <template #default="{ item }">
+      <u-data-set-item :title="item.nome" :subtitle="`Plano ${item.plano}`" />
+    </template>
+  </u-data-set>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { UDataSet, UDataSetItem } from "@nexdom/uimed-vue/components";
+
+const pagina = ref(1);
+const pacientes = [
+  { id: 1, nome: "Ana Souza", plano: "Ouro" },
+  { id: 2, nome: "Bruno Lima", plano: "Prata" },
+];
+
+function novoPaciente() {
+  // ...
+}
+</script>
+```

package/skills/uimed-vue/references/api/components/date-time-field.md

@@ -0,0 +1,44 @@
+# UDateTimeField
+
+Componente para utilização de campos de data e/ou hora.
+
+## Props
+
+| Prop          | Tipo                             | Padrão       | Descrição                                                                                                                                            |
+| ------------- | -------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `modelValue`  | `string`                         | `""`         | Valor do campo, nos formatos `YYYY-MM-DD` (`date`), `HH:mm` (`time`) ou `YYYY-MM-DDTHH:mm` (`datetime`).                                             |
+| `type`        | `"date" \| "time" \| "datetime"` | `"datetime"` | Define os seletores apresentados (data, horário ou ambos) e o formato do valor.                                                                      |
+| `variant`     | `"primary" \| "secondary"`       | `"primary"`  | Aplica uma variação de estilo distinta ao campo.                                                                                                     |
+| `min`         | `string`                         |              | Valor mínimo permitido, no mesmo formato do `modelValue`. No tipo `datetime`, o horário mínimo só se aplica à própria data do mínimo.                |
+| `max`         | `string`                         |              | Valor máximo permitido, no mesmo formato do `modelValue`. No tipo `datetime`, o horário máximo só se aplica à própria data do máximo.                |
+| `label`       | `string`                         |              | Título dado ao campo.                                                                                                                                |
+| `placeholder` | `string`                         |              | Exemplo de valor para preenchimento do campo.                                                                                                        |
+| `hint`        | `string`                         |              | Dica, instrução ou mensagem relacionada ao campo.                                                                                                    |
+| `required`    | `boolean`                        | `false`      | Torna o campo obrigatório para a submissão do formulário.                                                                                            |
+| `disabled`    | `boolean`                        | `false`      | Remove a possibilidade de interação com o campo.                                                                                                     |
+| `readonly`    | `boolean`                        | `false`      | Remove a possibilidade de edição do campo. O seletor não é aberto.                                                                                   |
+| `loading`     | `boolean`                        | `false`      | Exibe um indicador de carregamento. O campo mantém o rótulo como nome acessível e fica marcado como ocupado, e leitores de tela ignoram o indicador. |
+| `clearable`   | `boolean`                        | `false`      | Exibe recurso para limpar o campo, alterando o valor para `""`. Não é exibido enquanto o campo for `readonly`.                                       |
+| `dataTestid`  | `string`                         |              | Aplica atributo `data-testid` para testes sobre o componente.                                                                                        |
+
+## Eventos
+
+| Event               | Retorno  | Descrição                                                                                |
+| ------------------- | -------- | ---------------------------------------------------------------------------------------- |
+| `update:modelValue` | `string` | Retorna o novo valor do campo sempre que o usuário escolhe um valor completo ou o limpa. |
+
+## Exemplo
+
+```vue
+<template>
+  <u-date-time-field v-model="appointment" label="Data e hora da consulta" />
+  Consulta agendada para: {{ appointment }}
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { UDateTimeField } from "@nexdom/uimed-vue/components";
+
+const appointment = ref("");
+</script>
+```

package/skills/uimed-vue/references/api/components/details.md

@@ -0,0 +1,33 @@
+# UDetails
+
+Componente para exibir conteúdo que pode ser expandido e recolhido ao clicar no título.
+Inicia recolhido.
+
+## Props
+
+| Prop         | Tipo                       | Padrão      | Descrição                                                              |
+| ------------ | -------------------------- | ----------- | ---------------------------------------------------------------------- |
+| `variant`    | `"primary" \| "secondary"` | `"primary"` | Aplica uma variação de estilo distinta ao conteúdo expansível.         |
+| `title`      | `string`                   |             | Título exibido no cabeçalho. Ao clicar, expande ou recolhe o conteúdo. |
+| `loading`    | `boolean`                  | `false`     | Coloca o conteúdo expansível em estado de carregamento.                |
+| `dataTestid` | `string`                   |             | Id do componente para uso em testes automatizados.                     |
+
+## Slots
+
+| Slot      | Descrição                                   |
+| --------- | ------------------------------------------- |
+| `default` | Conteúdo exibido quando o item é expandido. |
+
+## Exemplo
+
+```vue
+<template>
+  <u-details title="Mais informações" variant="secondary">
+    <p>Conteúdo exibido ao expandir.</p>
+  </u-details>
+</template>
+
+<script lang="ts" setup>
+import { UDetails } from "@nexdom/uimed-vue/components";
+</script>
+```

package/skills/uimed-vue/references/api/components/dialog.md

@@ -0,0 +1,70 @@
+# UDialog
+
+Componente para exibir conteúdo em uma janela modal, sobre a página, até que ela seja fechada.
+O título e as ações ficam fixos enquanto o conteúdo rola.
+
+## Props
+
+| Prop         | Tipo                              | Padrão     | Descrição                                                                                                                                                                                                               |
+| ------------ | --------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `modelValue` | `boolean`                         | `false`    | Indica se a janela está aberta. Use com `v-model`. Quando o usuário fecha a janela, passa a ser `false` somente ao fim da animação de fechamento.                                                                       |
+| `title`      | `string`                          |            | Título da janela, em texto simples (HTML não é interpretado), em uma única linha: títulos longos são cortados com reticências. Também é o nome acessível da janela; sem título, o nome acessível é o conteúdo.          |
+| `actions`    | [`DialogButtonAction[]`](#action) |            | Botões exibidos no rodapé da janela, alinhados à direita, nesta ordem. Sem ações, o rodapé não é exibido. Enquanto alguma ação está `loading`, o usuário não consegue fechar a janela; o `v-model` ainda pode fechá-la. |
+| `size`       | `"small" \| "medium" \| "large"`  | `"medium"` | Largura máxima da janela: `small` (400px), `medium` (560px) ou `large` (800px).                                                                                                                                         |
+| `dataTestid` | `string`                          |            | Id do componente para uso em testes automatizados.                                                                                                                                                                      |
+
+### `Action`
+
+Estende [`UButtonProps`](./button.md#props) com as seguintes propriedades adicionais:
+
+| Prop      | Tipo              | Descrição                                                                                                                                               |
+| --------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `label`   | `string`          | Texto exibido no botão de ação.                                                                                                                         |
+| `onClick` | `(event) => void` | Chamado quando o botão de ação é clicado. Não é chamado enquanto a ação está `disabled` ou `loading`. A janela continua aberta: feche-a pelo `v-model`. |
+
+## Eventos
+
+| Evento              | Retorno   | Descrição                                                                                                                                                                                                                                                                           |
+| ------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `update:modelValue` | `boolean` | Retorna `false` quando o usuário fecha a janela pela tecla `Esc`, por um clique fora dela ou pelo botão "voltar", somente ao fim da animação de fechamento. `Esc`, um clique fora ou o "voltar" feitos enquanto alguma ação está `loading` não fecham a janela nem emitem o evento. |
+
+## Slots
+
+| Slot      | Descrição                                                     |
+| --------- | ------------------------------------------------------------- |
+| `default` | Conteúdo exibido dentro da janela, entre o título e as ações. |
+
+## Exemplo
+
+```vue
+<template>
+  <u-button @click="open = true">Editar paciente</u-button>
+
+  <u-dialog v-model="open" title="Editar paciente" :actions="actions">
+    <u-form id="patient-form" @submit="save">
+      <u-text-field v-model="name" label="Nome" required />
+    </u-form>
+  </u-dialog>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import type { ComponentProps } from "vue-component-type-helpers";
+import { UButton, UDialog, UForm, UTextField } from "@nexdom/uimed-vue/components";
+
+type DialogAction = NonNullable<ComponentProps<typeof UDialog>["actions"]>[number];
+
+const open = ref(false);
+const name = ref("");
+
+const actions = computed<DialogAction[]>(() => [
+  { label: "Cancelar", variant: "ghost", onClick: () => (open.value = false) },
+  { label: "Salvar", type: "submit", form: "patient-form" },
+]);
+
+function save() {
+  console.log("Paciente salvo:", name.value);
+  open.value = false;
+}
+</script>
+```