@nexdom/uimed-vue 2.0.0-beta.63 → 2.0.0-beta.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/inputs/text-field/text-field.vue.d.ts +1 -1
- package/package.json +2 -3
- package/skills/uimed-vue/SKILL.md +113 -0
- package/skills/uimed-vue/references/api/components/autocomplete-field.md +45 -0
- package/skills/uimed-vue/references/api/components/button.md +48 -0
- package/skills/uimed-vue/references/api/components/checkbox.md +36 -0
- package/skills/uimed-vue/references/api/components/data-sets/data-set-item.md +61 -0
- package/skills/uimed-vue/references/api/components/data-sets/data-set.md +67 -0
- package/skills/uimed-vue/references/api/components/date-time-field.md +44 -0
- package/skills/uimed-vue/references/api/components/details.md +33 -0
- package/skills/uimed-vue/references/api/components/dialog.md +70 -0
- package/skills/uimed-vue/references/api/components/form.md +43 -0
- package/skills/uimed-vue/references/api/components/grid/column.md +41 -0
- package/skills/uimed-vue/references/api/components/grid/container.md +32 -0
- package/skills/uimed-vue/references/api/components/grid/row.md +37 -0
- package/skills/uimed-vue/references/api/components/icon-button.md +37 -0
- package/skills/uimed-vue/references/api/components/img.md +34 -0
- package/skills/uimed-vue/references/api/components/link.md +31 -0
- package/skills/uimed-vue/references/api/components/main.md +174 -0
- package/skills/uimed-vue/references/api/components/mask-field.md +60 -0
- package/skills/uimed-vue/references/api/components/page-transition.md +37 -0
- package/skills/uimed-vue/references/api/components/sections/section-content.md +23 -0
- package/skills/uimed-vue/references/api/components/sections/section.md +61 -0
- package/skills/uimed-vue/references/api/components/table.md +35 -0
- package/skills/uimed-vue/references/api/components/text-field.md +42 -0
- package/skills/uimed-vue/references/api/composables/use-confirm.md +96 -0
- package/skills/uimed-vue/references/api/composables/use-dialog.md +95 -0
- package/skills/uimed-vue/references/api/composables/use-run-or-toast.md +58 -0
- package/skills/uimed-vue/references/api/composables/use-toast.md +48 -0
- package/skills/uimed-vue/references/api/composables/use-unsaved-changes.md +106 -0
- package/skills/uimed-vue/references/api/index.md +1 -0
- package/skills/uimed-vue/references/guide/components/autocomplete-field.md +256 -0
- package/skills/uimed-vue/references/guide/components/button.md +155 -0
- package/skills/uimed-vue/references/guide/components/checkbox.md +113 -0
- package/skills/uimed-vue/references/guide/components/data-set.md +370 -0
- package/skills/uimed-vue/references/guide/components/date-time-field.md +202 -0
- package/skills/uimed-vue/references/guide/components/details.md +76 -0
- package/skills/uimed-vue/references/guide/components/dialog.md +269 -0
- package/skills/uimed-vue/references/guide/components/form.md +96 -0
- package/skills/uimed-vue/references/guide/components/icon-button.md +76 -0
- package/skills/uimed-vue/references/guide/components/img.md +128 -0
- package/skills/uimed-vue/references/guide/components/layout.md +323 -0
- package/skills/uimed-vue/references/guide/components/link.md +47 -0
- package/skills/uimed-vue/references/guide/components/main.md +435 -0
- package/skills/uimed-vue/references/guide/components/mask-field.md +256 -0
- package/skills/uimed-vue/references/guide/components/page-transition.md +111 -0
- package/skills/uimed-vue/references/guide/components/section.md +232 -0
- package/skills/uimed-vue/references/guide/components/table.md +102 -0
- package/skills/uimed-vue/references/guide/components/text-field.md +172 -0
- package/skills/uimed-vue/references/guide/composables/use-confirm.md +123 -0
- package/skills/uimed-vue/references/guide/composables/use-dialog.md +102 -0
- package/skills/uimed-vue/references/guide/composables/use-run-or-toast.md +55 -0
- package/skills/uimed-vue/references/guide/composables/use-toast.md +57 -0
- package/skills/uimed-vue/references/guide/composables/use-unsaved-changes.md +129 -0
- package/skills/uimed-vue/references/guide/getting-started.md +135 -0
- package/skills/uimed-vue/references/guide/icons.md +71 -0
- package/skills/uimed-vue/references/guide/index.md +51 -0
- package/skills/uimed-vue/references/guide/migration-v1-to-v2.md +191 -0
- package/skills/uimed-vue/references/guide/unit-testing.md +85 -0
- package/AGENTS.md +0 -274
- package/CLAUDE.md +0 -1
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# UColumn
|
|
2
|
+
|
|
3
|
+
Componente para colunas das linhas do grid system.
|
|
4
|
+
|
|
5
|
+
Deve ser colocado exclusivamente dentro de [componentes de linha](./row.md).
|
|
6
|
+
|
|
7
|
+
## Props
|
|
8
|
+
|
|
9
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
10
|
+
| ------------ | ----------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
11
|
+
| `cols` | `"auto"` \| `"1"` \| `"2"` \| `"3"` \| `"4"` \| `"5"` \| `"6"` \| `"7"` \| `"8"` \| `"9"` \| `"10"` \| `"11"` \| `"12"` | `"12"` | Número de colunas para esticar o componente, sendo `1` o tamanho mínimo, `12` o tamanho máximo e `auto` a única opção que não tentará esticá-lo. |
|
|
12
|
+
| `listItem` | `boolean` | `false` | Apresenta a coluna como um item de lista, sem marcador. Utilize-a em cada coluna de uma [`URow`](./row.md) com a prop `list`. |
|
|
13
|
+
| `dataTestid` | `string` | | Aplica atributo `data-testid` para testes sobre o componente. |
|
|
14
|
+
|
|
15
|
+
## Slots
|
|
16
|
+
|
|
17
|
+
| Slot | Descrição |
|
|
18
|
+
| --------- | -------------------------------------------- |
|
|
19
|
+
| `default` | Conteúdo a ser exibido dentro do componente. |
|
|
20
|
+
|
|
21
|
+
## Exemplo
|
|
22
|
+
|
|
23
|
+
```vue
|
|
24
|
+
<template>
|
|
25
|
+
<u-container>
|
|
26
|
+
<u-row>
|
|
27
|
+
<u-column cols="6"><!-- ... --></u-column>
|
|
28
|
+
<u-column cols="6"><!-- ... --></u-column>
|
|
29
|
+
</u-row>
|
|
30
|
+
<u-row>
|
|
31
|
+
<u-column cols="4"><!-- ... --></u-column>
|
|
32
|
+
<u-column cols="4"><!-- ... --></u-column>
|
|
33
|
+
<u-column cols="4"><!-- ... --></u-column>
|
|
34
|
+
</u-row>
|
|
35
|
+
</u-container>
|
|
36
|
+
</template>
|
|
37
|
+
|
|
38
|
+
<script lang="ts" setup>
|
|
39
|
+
import { UContainer, URow, UColumn } from "@nexdom/uimed-vue/components";
|
|
40
|
+
</script>
|
|
41
|
+
```
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
# UContainer
|
|
2
|
+
|
|
3
|
+
Principal componente do grid system.
|
|
4
|
+
|
|
5
|
+
Responsável por agrupar diversos [componentes de linha](./row.md).
|
|
6
|
+
|
|
7
|
+
## Props
|
|
8
|
+
|
|
9
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
10
|
+
| ------------ | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
11
|
+
| `fullHeight` | `boolean` | `false` | Faz o container ocupar 100% da altura do elemento em que está, que precisa ter uma altura própria, como a área de conteúdo do [`UMain`](../main.md). Veja [Altura total](../../../guide/components/layout.md#altura-total). |
|
|
12
|
+
| `dataTestid` | `string` | | Aplica atributo `data-testid` para testes sobre o componente. |
|
|
13
|
+
|
|
14
|
+
## Slots
|
|
15
|
+
|
|
16
|
+
| Slot | Descrição |
|
|
17
|
+
| --------- | ------------------------------------------------------------------------------------------------------------ |
|
|
18
|
+
| `default` | Conteúdo a ser exibido dentro do componente. A raiz do mesmo deve conter apenas componentes [`URow`](./row.md). |
|
|
19
|
+
|
|
20
|
+
## Exemplo
|
|
21
|
+
|
|
22
|
+
```vue
|
|
23
|
+
<template>
|
|
24
|
+
<u-container>
|
|
25
|
+
<!-- ... -->
|
|
26
|
+
</u-container>
|
|
27
|
+
</template>
|
|
28
|
+
|
|
29
|
+
<script lang="ts" setup>
|
|
30
|
+
import { UContainer } from "@nexdom/uimed-vue/components";
|
|
31
|
+
</script>
|
|
32
|
+
```
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
# URow
|
|
2
|
+
|
|
3
|
+
Componente para linhas do grid system.
|
|
4
|
+
|
|
5
|
+
Deve ser colocado exclusivamente dentro de [componentes de container](./container.md).
|
|
6
|
+
|
|
7
|
+
## Props
|
|
8
|
+
|
|
9
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
10
|
+
| ------------ | ------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
11
|
+
| `alignX` | `"start"` \| `"center"` \| `"end"` | `"start"` | Alinhamento horizontal das colunas em cada linha: no início (`start`), ao centro (`center`) ou no fim (`end`), acompanhando a direção do texto. Só tem efeito visível quando as colunas não preenchem a linha, como com `cols="auto"` em [`UColumn`](./column.md) ou com tamanhos que somam menos de 12, e em telas a partir de 600px de largura, onde as colunas ficam lado a lado. Quando as colunas passam para a linha seguinte, cada linha é alinhada separadamente. |
|
|
12
|
+
| `alignY` | `"start"` \| `"center"` \| `"end"` \| `"stretch"` | `"start"` | Alinhamento vertical das colunas em relação à coluna mais alta da mesma linha: no topo (`start`), ao centro (`center`), na base (`end`) ou esticadas até a altura da coluna mais alta (`stretch`). Utilize `stretch` para manter colunas lado a lado com a mesma altura, como cartões feitos com [`USection`](../sections/section.md) com `fullHeight`. Só tem efeito visível em telas a partir de 600px de largura, onde as colunas ficam lado a lado, exceto com `fullHeight`, em que as colunas são alinhadas, em conjunto, dentro da altura da linha. |
|
|
13
|
+
| `fullHeight` | `boolean` | `false` | Faz a linha ocupar toda a altura visível da área de conteúdo do [`UMain`](../main.md), descontado o menu superior, ou de um [`UContainer`](./container.md) com `fullHeight`. Combine-a com `alignY` e `alignX` para posicionar as colunas nessa altura, como para centralizar o formulário de uma tela de login. Por ocupar sozinha toda a altura, outras linhas ao seu lado ficam abaixo da área visível. Veja [Altura total](../../../guide/components/layout.md#altura-total). |
|
|
14
|
+
| `list` | `boolean` | `false` | Apresenta a linha como uma lista, sem recuo nem marcadores, para que tecnologias assistivas anunciem as suas colunas como itens. Utilize-a quando as colunas forem itens de uma mesma lista, junto da prop `listItem` em cada [`UColumn`](./column.md). |
|
|
15
|
+
| `dataTestid` | `string` | | Aplica atributo `data-testid` para testes sobre o componente. |
|
|
16
|
+
|
|
17
|
+
## Slots
|
|
18
|
+
|
|
19
|
+
| Slot | Descrição |
|
|
20
|
+
| --------- | ------------------------------------------------------------------------------------------------------------------ |
|
|
21
|
+
| `default` | Conteúdo a ser exibido dentro do componente. A raiz do mesmo deve conter apenas componentes [`UColumn`](./column.md). |
|
|
22
|
+
|
|
23
|
+
## Exemplo
|
|
24
|
+
|
|
25
|
+
```vue
|
|
26
|
+
<template>
|
|
27
|
+
<u-container>
|
|
28
|
+
<u-row align-x="center" align-y="center">
|
|
29
|
+
<!-- ... -->
|
|
30
|
+
</u-row>
|
|
31
|
+
</u-container>
|
|
32
|
+
</template>
|
|
33
|
+
|
|
34
|
+
<script lang="ts" setup>
|
|
35
|
+
import { UContainer, URow } from "@nexdom/uimed-vue/components";
|
|
36
|
+
</script>
|
|
37
|
+
```
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
# UIconButton
|
|
2
|
+
|
|
3
|
+
Componente para botões que exibem apenas um ícone.
|
|
4
|
+
O ícone é ignorado pelos leitores de tela, que anunciam no lugar dele o texto de `label`.
|
|
5
|
+
|
|
6
|
+
## Props
|
|
7
|
+
|
|
8
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
9
|
+
| ------------ | ---------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
10
|
+
| `icon` | [`Icon`](../../guide/icons.md) | | **Obrigatória.** Ícone exibido no botão. Um dos nomes listados em [Ícones](../../guide/icons.md). |
|
|
11
|
+
| `label` | `string` | | **Obrigatória.** Nome do botão anunciado pelos leitores de tela no lugar do ícone. Deve descrever a ação do botão (exemplo: `"Editar paciente"`), e não o desenho do ícone (exemplo: `"Lápis"`). |
|
|
12
|
+
| `color` | `"primary" \| "secondary" \| "positive" \| "informative" \| "caution" \| "danger"` | `"primary"` | Aplica uma cor ao botão. |
|
|
13
|
+
| `dataTestid` | `string` | | Aplica atributo `data-testid` para testes sobre o componente. |
|
|
14
|
+
|
|
15
|
+
## Eventos
|
|
16
|
+
|
|
17
|
+
| Evento | Retorno | Descrição |
|
|
18
|
+
| ------- | --------------------------------------------------------------------------- | ----------------------------------- |
|
|
19
|
+
| `click` | [`MouseEvent`](https://developer.mozilla.org/pt-BR/docs/Web/API/MouseEvent) | Disparado quando o botão é clicado. |
|
|
20
|
+
|
|
21
|
+
Não há slots.
|
|
22
|
+
|
|
23
|
+
## Exemplo
|
|
24
|
+
|
|
25
|
+
```vue
|
|
26
|
+
<template>
|
|
27
|
+
<u-icon-button icon="fileDocument" label="Abrir guia" color="secondary" @click="onClick" />
|
|
28
|
+
</template>
|
|
29
|
+
|
|
30
|
+
<script lang="ts" setup>
|
|
31
|
+
import { UIconButton } from "@nexdom/uimed-vue/components";
|
|
32
|
+
|
|
33
|
+
function onClick(event: MouseEvent) {
|
|
34
|
+
console.log("Botão clicado!", event);
|
|
35
|
+
}
|
|
36
|
+
</script>
|
|
37
|
+
```
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
# UImg
|
|
2
|
+
|
|
3
|
+
Componente para exibir imagens decorativas, ignoradas por leitores de tela.
|
|
4
|
+
Por padrão, a imagem só é carregada quando está prestes a aparecer na tela.
|
|
5
|
+
|
|
6
|
+
## Props
|
|
7
|
+
|
|
8
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
9
|
+
| ------------- | ------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
10
|
+
| `src` | `string` | | **Obrigatória.** Caminho ou URL da imagem. |
|
|
11
|
+
| `width` | `number \| string` | | Largura da imagem. Números são medidas em pixels, e textos aceitam qualquer unidade CSS (por exemplo, `"50%"`). Encolhe até a largura disponível quando é maior que ela (por exemplo, dentro de uma `UColumn` estreita). |
|
|
12
|
+
| `height` | `number \| string` | | Altura da imagem. Números são medidas em pixels, e textos aceitam qualquer unidade CSS (por exemplo, `"10rem"`). |
|
|
13
|
+
| `aspectRatio` | `number` | | Proporção entre largura e altura (por exemplo, `16 / 9`), usada para reservar o espaço da imagem antes de ela carregar. Ignorada quando `height` é informada. |
|
|
14
|
+
| `cover` | `boolean` | `false` | Preenche todo o espaço da imagem, recortando-a quando sua proporção é diferente da do espaço. Por padrão, a imagem é exibida por inteiro dentro do espaço. |
|
|
15
|
+
| `eager` | `boolean` | `false` | Carrega a imagem assim que a página é aberta, em vez de quando ela está prestes a aparecer na tela. Use em imagens visíveis desde a abertura da página, como uma logo. |
|
|
16
|
+
| `dataTestid` | `string` | | Id do componente para uso em testes automatizados. |
|
|
17
|
+
|
|
18
|
+
Não há eventos nem slots.
|
|
19
|
+
|
|
20
|
+
## Exemplo
|
|
21
|
+
|
|
22
|
+
```vue
|
|
23
|
+
<template>
|
|
24
|
+
<u-row>
|
|
25
|
+
<u-column cols="12">
|
|
26
|
+
<u-img src="/logo.svg" :width="380" :height="88" eager />
|
|
27
|
+
</u-column>
|
|
28
|
+
</u-row>
|
|
29
|
+
</template>
|
|
30
|
+
|
|
31
|
+
<script lang="ts" setup>
|
|
32
|
+
import { UColumn, UImg, URow } from "@nexdom/uimed-vue/components";
|
|
33
|
+
</script>
|
|
34
|
+
```
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
# ULink
|
|
2
|
+
|
|
3
|
+
Componente para exibir links de texto avulsos, sem sublinhado.
|
|
4
|
+
Rotas da aplicação navegam sem recarregar a página, e endereços que começam com `http` navegam pelo navegador, na mesma aba.
|
|
5
|
+
|
|
6
|
+
## Props
|
|
7
|
+
|
|
8
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
9
|
+
| ------------ | ------------------------------------------------------------------------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
10
|
+
| `route` | [`RouteLocationRaw`](https://router.vuejs.org/api/type-aliases/RouteLocationRaw.html) | | **Obrigatória.** Destino do link. Uma rota da aplicação (exemplo: `"/login"` ou `{ name: "forgot-password" }`) 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. |
|
|
11
|
+
| `dataTestid` | `string` | | Id do componente para uso em testes automatizados. |
|
|
12
|
+
|
|
13
|
+
Não há eventos.
|
|
14
|
+
|
|
15
|
+
## Slots
|
|
16
|
+
|
|
17
|
+
| Slot | Descrição |
|
|
18
|
+
| --------- | ---------------------------------------------------------------- |
|
|
19
|
+
| `default` | Texto do link, também lido como seu nome pelos leitores de tela. |
|
|
20
|
+
|
|
21
|
+
## Exemplo
|
|
22
|
+
|
|
23
|
+
```vue
|
|
24
|
+
<template>
|
|
25
|
+
<u-link :route="{ name: 'forgot-password' }">Esqueceu sua senha?</u-link>
|
|
26
|
+
</template>
|
|
27
|
+
|
|
28
|
+
<script lang="ts" setup>
|
|
29
|
+
import { ULink } from "@nexdom/uimed-vue/components";
|
|
30
|
+
</script>
|
|
31
|
+
```
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
# UMain
|
|
2
|
+
|
|
3
|
+
Componente principal do projeto.
|
|
4
|
+
|
|
5
|
+
Responsável por carregar o menu superior, o menu de navegação lateral, o rodapé, componentes para as composables de [Toasts](../composables/use-toast.md), [Diálogos](../composables/use-dialog.md), [Confirmações](../composables/use-confirm.md) e [Alterações não salvas](../composables/use-unsaved-changes.md) e os estilos para os demais componentes.
|
|
6
|
+
|
|
7
|
+
## Props
|
|
8
|
+
|
|
9
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
10
|
+
| ---------------- | ---------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
11
|
+
| `dataTestid` | `string` | | Aplica atributo `data-testid` para testes sobre o componente. |
|
|
12
|
+
| `logo` | `string` | | URL utilizada para carregar a logo que será apresentada. A logo é decorativa (`alt=""`): o título do menu superior (`appBar.title`) identifica a aplicação. |
|
|
13
|
+
| `appBar` | [`AppBar`](#appbar) | | Conjunto de propriedades para aplicar à barra superior. |
|
|
14
|
+
| `navigationMenu` | [`NavigationMenu`](#navigationmenu) | | Conjunto de propriedades para aplicar ao menu lateral de navegação. |
|
|
15
|
+
| `footer` | [`Footer`](#footer) | | Conjunto de propriedades para aplicar ao rodapé, fixo na parte inferior da tela. **O rodapé será ocultado sempre que essa prop for omitida ou o seu `description` for vazio.** |
|
|
16
|
+
| `loading` | `boolean` | `false` | Exibe skeletons no lugar das ações do menu superior e dos itens do menu de navegação enquanto os dados são carregados. O conteúdo da página não é afetado. |
|
|
17
|
+
| `background` | `"primary" \| "secondary" \| "positive" \| "informative" \| "caution" \| "danger"` | | Aplica uma cor ao fundo de toda a aplicação, como em landing pages. O texto colocado diretamente sobre o fundo passa a usar a cor associada a ele (branco ou preto), enquanto o menu superior, o rodapé, as sections e os diálogos mantêm os próprios fundos. **Quando omitida, a aplicação usa o fundo padrão do tema.** |
|
|
18
|
+
|
|
19
|
+
### `AppBar`
|
|
20
|
+
|
|
21
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
22
|
+
| ------------------- | ------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
23
|
+
| `dataTestid` | `string` | | Aplica atributo `data-testid` para testes sobre o componente. |
|
|
24
|
+
| `title` | `string` | | Título para o cabeçalho, seja da página atual ou da aplicação como um todo. É anunciado aos leitores de tela como o título de nível 1 da página. |
|
|
25
|
+
| `help` | [`RouteLocationRaw`](https://router.vuejs.org/api/type-aliases/RouteLocationRaw.html) \| `string` | | Rota para direcionar o usuário em necessidade de "ajuda", podendo essa ser uma rota externa (exemplo: `"https://google.com"`) ou local (exemplo: `"/help"`). **A opção será ocultada sempre que essa prop for omitida.** |
|
|
26
|
+
| `user` | [`User`](#user) | | Conjunto de propriedades para configurar o menu do usuário. **A opção será ocultada sempre que essa prop for omitida.** |
|
|
27
|
+
| `notifications` | [`notification[]`](#notification) | | Lista de notificações para apresentar no menu superior. **A opção será ocultada sempre que essa prop for omitida** (uma lista vazia ainda exibe o botão, com uma mensagem indicando a ausência de notificações). |
|
|
28
|
+
| `notificationsOpen` | `boolean` | `false` | Reflete e permite controlar externamente se o menu de notificações está aberto. |
|
|
29
|
+
|
|
30
|
+
#### `User`
|
|
31
|
+
|
|
32
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
33
|
+
| ---------- | ---------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
34
|
+
| `title` | `string` | | Título para o menu do usuário. Geralmente o nome completo do mesmo. Sem `img`, o avatar mostra as suas iniciais (por exemplo, "RP" para "Rafael Perini"). |
|
|
35
|
+
| `subtitle` | `string` | | Subtítulo para o menu do usuário, como e-mail ou _username_. |
|
|
36
|
+
| `img` | `string` | | URL da imagem para identificar o usuário. Quando omitida, o avatar mostra as iniciais do `title`; sem `title`, um ícone genérico. |
|
|
37
|
+
| `options` | `(ParentOption \| Option)[]` | | Lista de ações ([`ParentOption`](#parentoption)) e/ou opções ([`Option`](#option)) para apresentar com o menu do usuário. |
|
|
38
|
+
|
|
39
|
+
##### `ParentOption`
|
|
40
|
+
|
|
41
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
42
|
+
| ------------- | --------------------- | ------ | ------------------------------------------------------------ |
|
|
43
|
+
| `description` | `string` | | Título do agrupador de opções ([opção](#option)). |
|
|
44
|
+
| `items` | [`Option[]`](#option) | | Lista de [opções](#option) que serão agrupadas neste tópico. |
|
|
45
|
+
|
|
46
|
+
##### `Option`
|
|
47
|
+
|
|
48
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
49
|
+
| ------------- | ------------------------------------------------------------------------------------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
50
|
+
| `description` | `string` | | Título/descrição da ação. |
|
|
51
|
+
| `route` | [`RouteLocationRaw`](https://router.vuejs.org/api/type-aliases/RouteLocationRaw.html) \| `string` | | Rota para direcionar o usuário ao acionar a ação, podendo essa ser uma rota externa (exemplo: `"https://google.com"`) ou local (exemplo: `"/help"`). |
|
|
52
|
+
| `action` | `() => void` | | Função que será executada quando o usuário clicar na ação. |
|
|
53
|
+
|
|
54
|
+
#### `Notification`
|
|
55
|
+
|
|
56
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
57
|
+
| ---------- | --------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
58
|
+
| `title` | `string` | | Texto principal descrevendo a notificação. |
|
|
59
|
+
| `subtitle` | `string` | | Texto complementar com detalhes adicionais. |
|
|
60
|
+
| `read` | `boolean` | | Indica se a notificação já foi lida. **Notificações não lidas são destacadas com um indicador.** |
|
|
61
|
+
| `when` | `string` | | Texto livre indicando quando a notificação foi gerada, apresentado sem formatação (exemplo: `"10:30"`, `"Ontem"`). **Será ocultado quando omitido ou vazio.** |
|
|
62
|
+
|
|
63
|
+
### `NavigationMenu`
|
|
64
|
+
|
|
65
|
+
Em telas largas (a partir de 1145px), o menu fica recolhido à esquerda do conteúdo, mostrando apenas os ícones, e se expande sobre o conteúdo enquanto o mouse ou o foco do teclado estão nele. Em telas pequenas, ele é aberto pelo botão "Menu de navegação" do menu superior.
|
|
66
|
+
|
|
67
|
+
O menu conta com um campo de busca, focado pelo atalho `Ctrl + K` (`⌘ + K` no macOS), que também expande (ou abre) o menu. A tecla `Esc` recolhe (ou fecha) o menu enquanto o foco está nele.
|
|
68
|
+
|
|
69
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
70
|
+
| ------------ | ------------------------------------------------ | ------ | ------------------------------------------------------------------------------------------------------------------------- |
|
|
71
|
+
| `dataTestid` | `string` | | Aplica atributo `data-testid` para testes sobre o componente. |
|
|
72
|
+
| `items` | `(NavigationMenuItem \| NavigationMenuParent)[]` | | Lista de [itens](#navigationmenuitem) e/ou [grupos de itens](#navigationmenuparent) para apresentar no menu de navegação. |
|
|
73
|
+
|
|
74
|
+
#### `NavigationMenuParent`
|
|
75
|
+
|
|
76
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
77
|
+
| ------------- | ------------------------------------------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
78
|
+
| `description` | `string` | | Título do agrupador de itens ([item](#navigationmenuitem)). |
|
|
79
|
+
| `icon` | [`Icon`](../../guide/icons.md) | | **Obrigatória.** Ícone exibido antes da descrição do agrupador, e sozinho com o menu recolhido. Um dos nomes listados em [Ícones](../../guide/icons.md). |
|
|
80
|
+
| `items` | [`NavigationMenuChildItem[]`](#navigationmenuchilditem) | | Lista de [itens](#navigationmenuchilditem) que serão agrupados neste tópico. |
|
|
81
|
+
|
|
82
|
+
#### `NavigationMenuItem`
|
|
83
|
+
|
|
84
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
85
|
+
| ------------- | ------------------------------------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
86
|
+
| `description` | `string` | | Título/descrição do item. |
|
|
87
|
+
| `icon` | [`Icon`](../../guide/icons.md) | | **Obrigatória.** Ícone exibido antes da descrição do item, e sozinho com o menu recolhido. Um dos nomes listados em [Ícones](../../guide/icons.md). |
|
|
88
|
+
| `route` | [`RouteLocationRaw`](https://router.vuejs.org/api/type-aliases/RouteLocationRaw.html) \| `string` | | Rota para direcionar o usuário ao clicar no item, podendo essa ser uma rota externa (exemplo: `"https://google.com"`) ou local (exemplo: `"/"`). |
|
|
89
|
+
| `action` | `() => void` | | Função que será executada quando o usuário clicar no item. |
|
|
90
|
+
|
|
91
|
+
#### `NavigationMenuChildItem`
|
|
92
|
+
|
|
93
|
+
Item dentro de um [grupo](#navigationmenuparent). Tem as mesmas propriedades do [`NavigationMenuItem`](#navigationmenuitem), exceto `icon`: apenas os itens e grupos do primeiro nível do menu exibem ícones.
|
|
94
|
+
|
|
95
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
96
|
+
| ------------- | ------------------------------------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
97
|
+
| `description` | `string` | | Título/descrição do item. |
|
|
98
|
+
| `route` | [`RouteLocationRaw`](https://router.vuejs.org/api/type-aliases/RouteLocationRaw.html) \| `string` | | Rota para direcionar o usuário ao clicar no item, podendo essa ser uma rota externa (exemplo: `"https://google.com"`) ou local (exemplo: `"/"`). |
|
|
99
|
+
| `action` | `() => void` | | Função que será executada quando o usuário clicar no item. |
|
|
100
|
+
|
|
101
|
+
### `Footer`
|
|
102
|
+
|
|
103
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
104
|
+
| ------------- | -------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------- |
|
|
105
|
+
| `dataTestid` | `string` | | Aplica atributo `data-testid` para testes sobre o rodapé. |
|
|
106
|
+
| `description` | `string` | | Texto exibido no rodapé, por exemplo a versão da aplicação (`"Versão 1.4.2"`). **O rodapé será ocultado quando omitido ou vazio.** |
|
|
107
|
+
|
|
108
|
+
## Eventos
|
|
109
|
+
|
|
110
|
+
| Event | Retorno | Descrição |
|
|
111
|
+
| -------------------------- | --------- | -------------------------------------------------------------- |
|
|
112
|
+
| `update:notificationsOpen` | `boolean` | Emitido sempre que o menu de notificações é aberto ou fechado. |
|
|
113
|
+
|
|
114
|
+
## Slots
|
|
115
|
+
|
|
116
|
+
| Slot | Descrição |
|
|
117
|
+
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
118
|
+
| `default` | Conteúdo exibido dentro do componente, que ocupa toda a altura visível abaixo do menu superior (e acima do rodapé, quando exibido). Utilize uma [`URow`](./grid/row.md) com `fullHeight` para ocupá-la. |
|
|
119
|
+
| `user-section-details` | Detalhes do usuário exibidos no menu do usuário, abaixo do nome e do subtítulo e acima das opções, com o texto centralizado (por exemplo, a empresa, o perfil de acesso e um botão para gerenciar o perfil). **Só é exibido quando `appBar.user` é informado.** |
|
|
120
|
+
|
|
121
|
+
## Exemplo
|
|
122
|
+
|
|
123
|
+
```vue
|
|
124
|
+
<template>
|
|
125
|
+
<u-main :app-bar="appBar" v-model:notifications-open="notificationsOpen">
|
|
126
|
+
<!-- ... -->
|
|
127
|
+
</u-main>
|
|
128
|
+
</template>
|
|
129
|
+
|
|
130
|
+
<script lang="ts" setup>
|
|
131
|
+
import { ref } from "vue";
|
|
132
|
+
import type { ComponentProps } from "vue-component-type-helpers";
|
|
133
|
+
import { UMain } from "@nexdom/uimed-vue/components";
|
|
134
|
+
|
|
135
|
+
type MainProps = ComponentProps<typeof UMain>;
|
|
136
|
+
|
|
137
|
+
const notificationsOpen = ref(false);
|
|
138
|
+
|
|
139
|
+
const appBar: NonNullable<MainProps["appBar"]> = {
|
|
140
|
+
title: "Menu superior",
|
|
141
|
+
help: "https://google.com",
|
|
142
|
+
dataTestid: "root-app-bar",
|
|
143
|
+
user: {
|
|
144
|
+
title: "Rafael Perini",
|
|
145
|
+
subtitle: "UIMed-Vue Co-Creator",
|
|
146
|
+
img: "/uimed-vue/avatar.jpg",
|
|
147
|
+
options: [
|
|
148
|
+
{
|
|
149
|
+
description: "Bibliotecas",
|
|
150
|
+
items: [
|
|
151
|
+
{
|
|
152
|
+
description: "Pkg-template",
|
|
153
|
+
route: "https://nexdom-healthtech.github.io/pkg-template/",
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
description: "Shared",
|
|
157
|
+
route: "https://nexdom-healthtech.github.io/shared/",
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
description: "UIMed-Vue",
|
|
161
|
+
route: "https://nexdom-healthtech.github.io/uimed-vue/",
|
|
162
|
+
},
|
|
163
|
+
],
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
description: "GitHub NEXDOM",
|
|
167
|
+
route: "https://github.com/nexdom-healthtech",
|
|
168
|
+
},
|
|
169
|
+
{ description: "Sair", action: () => window.alert("Saindo...") },
|
|
170
|
+
],
|
|
171
|
+
},
|
|
172
|
+
};
|
|
173
|
+
</script>
|
|
174
|
+
```
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# UMaskField
|
|
2
|
+
|
|
3
|
+
Componente para utilização de campos de texto com máscara, como CPF, CNPJ, CEP e telefone.
|
|
4
|
+
|
|
5
|
+
## Props
|
|
6
|
+
|
|
7
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
8
|
+
| ------------- | ---------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
9
|
+
| `modelValue` | `string` | `""` | Somente os caracteres do valor, sem os separadores da máscara e com as letras em maiúsculas (por exemplo, `12345678909` para `123.456.789-09` e `12ABC34501DE35` para `12.ABC.345/01DE-35`). |
|
|
10
|
+
| `mask` | `` "cpf" \| "cnpj" \| "cep" \| "phone" \| "date" \| `${string}#${string}` `` | | **Obrigatória.** Máscara predefinida ou a própria máscara, em que `#` representa um dígito (0–9) e qualquer outro caractere, inclusive uma letra, é um separador fixo inserido automaticamente (ex.: `####-##/####` ou `Nº ####`). Uma máscara personalizada precisa ter pelo menos um `#`. As 12 primeiras posições da máscara `cnpj` também aceitam letras. |
|
|
11
|
+
| `variant` | `"primary" \| "secondary"` | `"primary"` | Aplica uma variação de estilo distinta ao campo. |
|
|
12
|
+
| `label` | `string` | | Título dado ao campo. |
|
|
13
|
+
| `placeholder` | `string` | A máscara | Exemplo de valor para preenchimento do campo. Sem ela, é a máscara com `0` no lugar de cada `#`, como `000.000.000-00` para `cpf`, `00.000.000/0000-00` para `cnpj` e `Nº 0000` para `Nº ####`. |
|
|
14
|
+
| `hint` | `string` | | Dica, instrução ou mensagem relacionada ao campo. |
|
|
15
|
+
| `required` | `boolean` | `false` | Torna o campo obrigatório para a submissão do formulário. |
|
|
16
|
+
| `disabled` | `boolean` | `false` | Remove a possibilidade de interação com o campo. |
|
|
17
|
+
| `readonly` | `boolean` | `false` | Remove a possibilidade de edição do campo. |
|
|
18
|
+
| `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. |
|
|
19
|
+
| `clearable` | `boolean` | `false` | Exibe recurso para limpar o campo, alterando o valor para `""`. |
|
|
20
|
+
| `dataTestid` | `string` | | Aplica atributo `data-testid` para testes sobre o componente. |
|
|
21
|
+
|
|
22
|
+
As máscaras predefinidas são:
|
|
23
|
+
|
|
24
|
+
| `mask` | Máscara | Caracteres | Exemplo | `modelValue` |
|
|
25
|
+
| ------- | -------------------- | -------------------------------- | -------------------------------------------- | ------------------------------------ |
|
|
26
|
+
| `cpf` | `###.###.###-##` | 11 dígitos | `123.456.789-09` | `12345678909` |
|
|
27
|
+
| `cnpj` | `##.###.###/####-##` | 12 letras ou dígitos + 2 dígitos | `12.345.678/0001-95`<br>`12.ABC.345/01DE-35` | `12345678000195`<br>`12ABC34501DE35` |
|
|
28
|
+
| `cep` | `#####-###` | 8 dígitos | `01310-100` | `01310100` |
|
|
29
|
+
| `phone` | `(##) #####-####` | 11 dígitos | `(11) 91234-5678` | `11912345678` |
|
|
30
|
+
| `date` | `##/##/####` | 8 dígitos | `31/12/2026` | `31122026` |
|
|
31
|
+
|
|
32
|
+
A máscara `cnpj` aceita o CNPJ numérico e o alfanumérico (IN RFB nº 2.229/2024): letras de A a Z, sem acento, ou dígitos nas 12 primeiras posições, e somente dígitos nas 2 últimas. Ela só é aceita com `mask="cnpj"`: a máscara `##.###.###/####-##`, informada como máscara personalizada, aceita somente dígitos. Letras digitadas ou coladas em minúsculas são exibidas e enviadas em maiúsculas, e um `modelValue` com letras minúsculas é exibido em maiúsculas e é válido. Os demais caracteres (símbolos, letras acentuadas, `ç`, letras nos dígitos verificadores e o excesso) são descartados. Inserir ou apagar um caractere no meio do valor desloca os seguintes, e um caractere que não cabe na nova posição (como uma letra deslocada para os dígitos verificadores) é descartado.
|
|
33
|
+
|
|
34
|
+
Em dispositivos móveis, o teclado numérico é exibido nas máscaras que aceitam somente dígitos, e o teclado de texto, já em maiúsculas, na máscara `cnpj`. Evite separadores fixos que o usuário também poderia digitar, como os dígitos de `0800 ###-####`: quando o campo espera um desses separadores, o caractere igual a ele é lido como o separador, e não como valor.
|
|
35
|
+
|
|
36
|
+
Enquanto a máscara não estiver completa (por exemplo, um CNPJ com menos de 14 caracteres), o campo exibe a mensagem "Valor incompleto", e um `modelValue` que não cabe na máscara (por exemplo, após trocar a prop `mask` de `cnpj` para `cpf`) exibe a mensagem "Valor inválido". Ao trocar a prop `mask` com o campo preenchido, ajuste ou limpe o valor na aplicação.
|
|
37
|
+
|
|
38
|
+
O campo não valida os dígitos verificadores do CPF e do CNPJ nem a existência do documento: valide-os no backend da aplicação.
|
|
39
|
+
|
|
40
|
+
## Eventos
|
|
41
|
+
|
|
42
|
+
| Event | Retorno | Descrição |
|
|
43
|
+
| ------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------ |
|
|
44
|
+
| `update:modelValue` | `string` | Retorna somente os caracteres do campo, sem os separadores da máscara e com as letras em maiúsculas, sempre que o usuário os altera. |
|
|
45
|
+
|
|
46
|
+
## Exemplo
|
|
47
|
+
|
|
48
|
+
```vue
|
|
49
|
+
<template>
|
|
50
|
+
<u-mask-field v-model="cpf" label="CPF" mask="cpf" />
|
|
51
|
+
CPF sem máscara: {{ cpf }}
|
|
52
|
+
</template>
|
|
53
|
+
|
|
54
|
+
<script lang="ts" setup>
|
|
55
|
+
import { ref } from "vue";
|
|
56
|
+
import { UMaskField } from "@nexdom/uimed-vue/components";
|
|
57
|
+
|
|
58
|
+
const cpf = ref("");
|
|
59
|
+
</script>
|
|
60
|
+
```
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
# UPageTransition
|
|
2
|
+
|
|
3
|
+
Componente para animar a troca entre as páginas renderizadas pelo `<router-view>`: a página atual desaparece aos poucos e, só depois que ela sai, a nova página aparece.
|
|
4
|
+
Quando o sistema operacional pede movimento reduzido, as páginas trocam sem animação.
|
|
5
|
+
A página fica dentro de um `<div>` que ocupa toda a altura do elemento em que está (veja o [guia](../../guide/components/page-transition.md#elemento-em-volta-da-pagina)). Atributos como `class` e `style` não são repassados.
|
|
6
|
+
|
|
7
|
+
## Props
|
|
8
|
+
|
|
9
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
10
|
+
| --------------- | -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
11
|
+
| `transitionKey` | `string` | `route.fullPath` | Identifica a página exibida: a troca é animada sempre que o valor muda. O padrão, o endereço completo da rota atual, anima toda navegação, inclusive as que só mudam os parâmetros, a consulta ou o fragmento (`#`) da rota. Informe outro valor para escolher quais navegações são animadas (exemplo: `route.path`, para não animar quando só a consulta ou o fragmento mudam; veja o [guia](../../guide/components/page-transition.md#quando-a-troca-e-animada), inclusive para rotas aninhadas). |
|
|
12
|
+
|
|
13
|
+
Não há eventos.
|
|
14
|
+
|
|
15
|
+
## Slots
|
|
16
|
+
|
|
17
|
+
| Slot | Descrição |
|
|
18
|
+
| --------- | ------------------------------------------------------------------------------------------ |
|
|
19
|
+
| `default` | Página a animar, normalmente o componente da rota atual (`<component :is="Component" />`). |
|
|
20
|
+
|
|
21
|
+
## Exemplo
|
|
22
|
+
|
|
23
|
+
```vue
|
|
24
|
+
<template>
|
|
25
|
+
<u-main>
|
|
26
|
+
<router-view v-slot="{ Component }">
|
|
27
|
+
<u-page-transition>
|
|
28
|
+
<component :is="Component" />
|
|
29
|
+
</u-page-transition>
|
|
30
|
+
</router-view>
|
|
31
|
+
</u-main>
|
|
32
|
+
</template>
|
|
33
|
+
|
|
34
|
+
<script lang="ts" setup>
|
|
35
|
+
import { UMain, UPageTransition } from "@nexdom/uimed-vue/components";
|
|
36
|
+
</script>
|
|
37
|
+
```
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# USectionContent
|
|
2
|
+
|
|
3
|
+
Componente utilizado para estruturar o conteúdo exibido dentro do `USection`.
|
|
4
|
+
|
|
5
|
+
## Slots
|
|
6
|
+
|
|
7
|
+
| Slot | Descrição |
|
|
8
|
+
| --------- | -------------------------------------- |
|
|
9
|
+
| `default` | Conteúdo exibido dentro do componente. |
|
|
10
|
+
|
|
11
|
+
## Exemplo
|
|
12
|
+
|
|
13
|
+
```vue
|
|
14
|
+
<template>
|
|
15
|
+
<u-section title="Título">
|
|
16
|
+
<u-section-content> Conteúdo exibido dentro do card. </u-section-content>
|
|
17
|
+
</u-section>
|
|
18
|
+
</template>
|
|
19
|
+
|
|
20
|
+
<script lang="ts" setup>
|
|
21
|
+
import { USectionContent, USection } from "@nexdom/uimed-vue/components";
|
|
22
|
+
</script>
|
|
23
|
+
```
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
# USection
|
|
2
|
+
|
|
3
|
+
Componente para agrupar conteúdo, como campos de formulário, relatórios, dashboard e afins.
|
|
4
|
+
Inclui suporte para ações sobre esses conteúdos, como botões para salvar, etc.
|
|
5
|
+
|
|
6
|
+
## Props
|
|
7
|
+
|
|
8
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
9
|
+
| ------------ | ------------------------------ | ----------- | ------------------------------------------------------------------------------------------------------------ |
|
|
10
|
+
| `variant` | `"primary" \| "secondary"` | `"primary"` | Aplica uma variação de estilo distinta ao agrupador de conteúdo. |
|
|
11
|
+
| `title` | `string` | | Título do agrupador. |
|
|
12
|
+
| `subtitle` | `string` | | Subtítulo do agrupador. |
|
|
13
|
+
| `textAlign` | `"start" \| "center" \| "end"` | `"start"` | Alinhamento horizontal do título, do subtítulo, do conteúdo e das ações. Com `start`, as ações ficam no fim. |
|
|
14
|
+
| `actions` | [`action[]`](#action) | | Lista de ações disponíveis para o agrupador. |
|
|
15
|
+
| `fullWidth` | `boolean` | `false` | Faz o agrupador ocupar 100% da largura do seu container. |
|
|
16
|
+
| `fullHeight` | `boolean` | `false` | Faz o agrupador ocupar 100% da altura do seu container. |
|
|
17
|
+
| `loading` | `boolean` | `false` | Coloca o agrupador em estado de carregamento. |
|
|
18
|
+
| `dataTestid` | `string` | | Id do componente para uso em testes automatizados. |
|
|
19
|
+
|
|
20
|
+
### `Action`
|
|
21
|
+
|
|
22
|
+
Estende [`UButtonProps`](../button.md#props) (por exemplo, `variant`, `color`, `disabled` ou `route`) com as seguintes propriedades adicionais:
|
|
23
|
+
|
|
24
|
+
| Prop | Tipo | Descrição |
|
|
25
|
+
| --------- | ----------------- | ----------------------------------------------------------------------------------------------------- |
|
|
26
|
+
| `label` | `string` | Texto exibido no botão de ação. |
|
|
27
|
+
| `onClick` | `(event) => void` | Chamado quando o botão de ação é clicado. Não é chamado enquanto a ação está `disabled` ou `loading`. |
|
|
28
|
+
|
|
29
|
+
## Slots
|
|
30
|
+
|
|
31
|
+
| Slot | Descrição |
|
|
32
|
+
| --------- | ------------------------------------- |
|
|
33
|
+
| `default` | Conteúdo exibido dentro do agrupador. |
|
|
34
|
+
|
|
35
|
+
## Exemplo
|
|
36
|
+
|
|
37
|
+
```vue
|
|
38
|
+
<template>
|
|
39
|
+
<u-section title="Confirmação" subtitle="Deseja continuar?" :actions="actions">
|
|
40
|
+
<u-section-content>Esta ação não pode ser desfeita.</u-section-content>
|
|
41
|
+
</u-section>
|
|
42
|
+
</template>
|
|
43
|
+
|
|
44
|
+
<script lang="ts" setup>
|
|
45
|
+
import { ref } from "vue";
|
|
46
|
+
import { USection, USectionContent } from "@nexdom/uimed-vue/components";
|
|
47
|
+
|
|
48
|
+
const actions = ref([
|
|
49
|
+
{
|
|
50
|
+
label: "Cancelar",
|
|
51
|
+
variant: "ghost",
|
|
52
|
+
onClick: () => console.log("Cancelado"),
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
label: "Confirmar",
|
|
56
|
+
color: "positive",
|
|
57
|
+
onClick: () => console.log("Confirmado"),
|
|
58
|
+
},
|
|
59
|
+
]);
|
|
60
|
+
</script>
|
|
61
|
+
```
|