@nexdom/uimed-vue 2.1.0 → 2.2.1
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/button/types.d.ts +1 -1
- package/dist/components/icon-button/types.d.ts +1 -1
- package/dist/components/inputs/text-field/text-field.vue.d.ts +1 -1
- package/dist/components/navigation-menu/navigation-menu.vue_vue_type_script_setup_true_lang.js +3 -3
- package/dist/composables/colors/constants.js +2 -0
- package/dist/composables/colors/types.d.ts +1 -1
- package/dist/composables/dialogs/types.d.ts +2 -2
- package/dist/composables/navigation/types.d.ts +1 -1
- package/dist/index.js +3 -0
- package/package.json +1 -1
- package/skills/uimed-vue/references/api/components/button.md +11 -11
- package/skills/uimed-vue/references/api/components/icon-button.md +6 -6
- package/skills/uimed-vue/references/api/components/main.md +9 -9
- package/skills/uimed-vue/references/api/composables/use-confirm.md +9 -8
- package/skills/uimed-vue/references/api/composables/use-dialog.md +8 -7
- package/skills/uimed-vue/references/api/composables/use-unsaved-changes.md +10 -9
- package/skills/uimed-vue/references/guide/components/button.md +2 -1
- package/skills/uimed-vue/references/guide/components/icon-button.md +2 -1
- package/skills/uimed-vue/references/guide/components/main.md +2 -2
- package/skills/uimed-vue/references/guide/migration-v1-to-v2.md +21 -0
|
@@ -20,7 +20,7 @@ export type ButtonProps = {
|
|
|
20
20
|
type?: "submit" | "button";
|
|
21
21
|
/**
|
|
22
22
|
* Applies a color to the button.
|
|
23
|
-
* One of `primary`, `secondary`, `positive`, `informative`, `caution`, or `danger`.
|
|
23
|
+
* One of `primary`, `secondary`, `tertiary`, `positive`, `informative`, `caution`, or `danger`.
|
|
24
24
|
* @default "primary"
|
|
25
25
|
*/
|
|
26
26
|
color?: ColorVariant;
|
|
@@ -20,7 +20,7 @@ export type IconButtonProps = {
|
|
|
20
20
|
label: string;
|
|
21
21
|
/**
|
|
22
22
|
* Applies a color to the button.
|
|
23
|
-
* One of `primary`, `secondary`, `positive`, `informative`, `caution`, or `danger`.
|
|
23
|
+
* One of `primary`, `secondary`, `tertiary`, `positive`, `informative`, `caution`, or `danger`.
|
|
24
24
|
* @default "primary"
|
|
25
25
|
*/
|
|
26
26
|
color?: ColorVariant;
|
|
@@ -23,8 +23,8 @@ declare const __VLS_export: import("vue", { with: { "resolution-mode": "import"
|
|
|
23
23
|
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
24
24
|
}>, {
|
|
25
25
|
variant: TextFieldVariant;
|
|
26
|
-
type: TextFieldType;
|
|
27
26
|
clearable: boolean;
|
|
27
|
+
type: TextFieldType;
|
|
28
28
|
}, {}, {}, {}, string, import("vue", { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {}, any>;
|
|
29
29
|
//#endregion
|
|
30
30
|
export { _default as default };
|
package/dist/components/navigation-menu/navigation-menu.vue_vue_type_script_setup_true_lang.js
CHANGED
|
@@ -74,7 +74,7 @@ var navigation_menu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
|
|
|
74
74
|
return openBlock(), createBlock(unref(VNavigationDrawer), {
|
|
75
75
|
modelValue: unref(drawerOpen),
|
|
76
76
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(drawerOpen) ? drawerOpen.value = $event : null),
|
|
77
|
-
color: "
|
|
77
|
+
color: "tertiary",
|
|
78
78
|
"data-testid": props.dataTestid,
|
|
79
79
|
"aria-busy": props.loading || void 0,
|
|
80
80
|
mobile: unref(mobile),
|
|
@@ -136,7 +136,7 @@ var navigation_menu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
|
|
|
136
136
|
default: withCtx(() => [createVNode(unref(VDivider)), createVNode(skeleton_loader_default, {
|
|
137
137
|
loading: props.loading,
|
|
138
138
|
type: "list-item@6",
|
|
139
|
-
color: "
|
|
139
|
+
color: "tertiary"
|
|
140
140
|
}, {
|
|
141
141
|
default: withCtx(() => [createCommentVNode(" Vuetify's `list` role only allows list items, but the items are links "), createVNode(unref(VList), {
|
|
142
142
|
opened: unref(opened),
|
|
@@ -158,7 +158,7 @@ var navigation_menu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
|
|
|
158
158
|
role: void 0,
|
|
159
159
|
tag: "button",
|
|
160
160
|
type: "button",
|
|
161
|
-
class: "w-100 text-start"
|
|
161
|
+
class: "w-100 text-start v-treeview-item--activatable-group-activator"
|
|
162
162
|
}), null, 16, [
|
|
163
163
|
"title",
|
|
164
164
|
"prepend-icon",
|
|
@@ -8,6 +8,7 @@ const feedbackColorToVuetifyColor = {
|
|
|
8
8
|
const colorToVuetifyColor = {
|
|
9
9
|
primary: "primary",
|
|
10
10
|
secondary: "secondary",
|
|
11
|
+
tertiary: "tertiary",
|
|
11
12
|
...feedbackColorToVuetifyColor
|
|
12
13
|
};
|
|
13
14
|
/**
|
|
@@ -18,6 +19,7 @@ const colorToVuetifyColor = {
|
|
|
18
19
|
const colorToVuetifyTextColor = {
|
|
19
20
|
primary: "primary-text",
|
|
20
21
|
secondary: "on-surface",
|
|
22
|
+
tertiary: "tertiary-text",
|
|
21
23
|
positive: "success-text",
|
|
22
24
|
informative: "info-text",
|
|
23
25
|
caution: "warning-text",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
//#region src/composables/colors/types.d.ts
|
|
2
|
-
export type ColorVariant = "primary" | "secondary" | FeedbackColorVariant;
|
|
2
|
+
export type ColorVariant = "primary" | "secondary" | "tertiary" | FeedbackColorVariant;
|
|
3
3
|
export type FeedbackColorVariant = "positive" | "informative" | "caution" | "danger";
|
|
4
4
|
//#endregion
|
|
@@ -33,7 +33,7 @@ export interface DialogAction<T extends string = string> {
|
|
|
33
33
|
variant?: ButtonVariant;
|
|
34
34
|
/**
|
|
35
35
|
* Applies a color to the button.
|
|
36
|
-
* One of `primary`, `secondary`, `positive`, `informative`, `caution`, or `danger`.
|
|
36
|
+
* One of `primary`, `secondary`, `tertiary`, `positive`, `informative`, `caution`, or `danger`.
|
|
37
37
|
* @default "primary"
|
|
38
38
|
*/
|
|
39
39
|
color?: ColorVariant;
|
|
@@ -80,7 +80,7 @@ export interface ConfirmOptions {
|
|
|
80
80
|
cancelText?: string;
|
|
81
81
|
/**
|
|
82
82
|
* Applies a color to the confirm button.
|
|
83
|
-
* One of `primary`, `secondary`, `positive`, `informative`, `caution`, or `danger`.
|
|
83
|
+
* One of `primary`, `secondary`, `tertiary`, `positive`, `informative`, `caution`, or `danger`.
|
|
84
84
|
* @default "primary"
|
|
85
85
|
*/
|
|
86
86
|
color?: ColorVariant;
|
|
@@ -40,7 +40,7 @@ export interface UnsavedChangesOptions {
|
|
|
40
40
|
cancelText?: string;
|
|
41
41
|
/**
|
|
42
42
|
* Applies a color to the button which leaves the page.
|
|
43
|
-
* One of `primary`, `secondary`, `positive`, `informative`, `caution`, or `danger`.
|
|
43
|
+
* One of `primary`, `secondary`, `tertiary`, `positive`, `informative`, `caution`, or `danger`.
|
|
44
44
|
* @default "danger"
|
|
45
45
|
*/
|
|
46
46
|
color?: ColorVariant;
|
package/dist/index.js
CHANGED
|
@@ -27,12 +27,15 @@ function createUimed() {
|
|
|
27
27
|
surface: "#FCFCFD",
|
|
28
28
|
primary: "#074D31",
|
|
29
29
|
secondary: "#FCFCFD",
|
|
30
|
+
tertiary: "#00995D",
|
|
30
31
|
success: "#A9EFC5",
|
|
31
32
|
warning: "#FFE596",
|
|
32
33
|
error: "#D92D20",
|
|
33
34
|
info: "#9ACBE5",
|
|
34
35
|
"on-primary": "#FCFCFD",
|
|
36
|
+
"on-tertiary": "#000000",
|
|
35
37
|
"primary-text": "#074D31",
|
|
38
|
+
"tertiary-text": "#007547",
|
|
36
39
|
"success-text": "#16783E",
|
|
37
40
|
"info-text": "#277096",
|
|
38
41
|
"warning-text": "#846300",
|
package/package.json
CHANGED
|
@@ -4,17 +4,17 @@ Componente para utilização de botões.
|
|
|
4
4
|
|
|
5
5
|
## Props
|
|
6
6
|
|
|
7
|
-
| Prop | Tipo
|
|
8
|
-
| ------------ |
|
|
9
|
-
| `variant` | `"primary" \| "secondary" \| "ghost"`
|
|
10
|
-
| `color` | `"primary" \| "secondary" \| "positive" \| "informative" \| "caution" \| "danger"`
|
|
11
|
-
| `disabled` | `boolean`
|
|
12
|
-
| `loading` | `boolean`
|
|
13
|
-
| `fullWidth` | `boolean`
|
|
14
|
-
| `type` | `"button" \| "submit"`
|
|
15
|
-
| `form` | `string`
|
|
16
|
-
| `route` | [`RouteLocationRaw`](https://router.vuejs.org/api/type-aliases/RouteLocationRaw.html)
|
|
17
|
-
| `dataTestid` | `string`
|
|
7
|
+
| Prop | Tipo | Padrão | Descrição |
|
|
8
|
+
| ------------ | ------------------------------------------------------------------------------------------------ | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
9
|
+
| `variant` | `"primary" \| "secondary" \| "ghost"` | `"primary"` | Aplica uma variação de estilo distinta ao botão. |
|
|
10
|
+
| `color` | `"primary" \| "secondary" \| "tertiary" \| "positive" \| "informative" \| "caution" \| "danger"` | `"primary"` | Aplica uma cor ao botão. |
|
|
11
|
+
| `disabled` | `boolean` | `false` | Remove a possibilidade de clicar ou focar no botão. |
|
|
12
|
+
| `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. |
|
|
13
|
+
| `fullWidth` | `boolean` | `false` | Faz o botão ocupar 100% da largura do elemento em que está. |
|
|
14
|
+
| `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`. |
|
|
15
|
+
| `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`. |
|
|
16
|
+
| `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. |
|
|
17
|
+
| `dataTestid` | `string` | | Aplica atributo `data-testid` para testes sobre o componente. |
|
|
18
18
|
|
|
19
19
|
## Eventos
|
|
20
20
|
|
|
@@ -5,12 +5,12 @@ O ícone é ignorado pelos leitores de tela, que anunciam no lugar dele o texto
|
|
|
5
5
|
|
|
6
6
|
## Props
|
|
7
7
|
|
|
8
|
-
| Prop | Tipo
|
|
9
|
-
| ------------ |
|
|
10
|
-
| `icon` | [`Icon`](../../guide/icons.md)
|
|
11
|
-
| `label` | `string`
|
|
12
|
-
| `color` | `"primary" \| "secondary" \| "positive" \| "informative" \| "caution" \| "danger"` | `"primary"` | Aplica uma cor ao botão. |
|
|
13
|
-
| `dataTestid` | `string`
|
|
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" \| "tertiary" \| "positive" \| "informative" \| "caution" \| "danger"` | `"primary"` | Aplica uma cor ao botão. |
|
|
13
|
+
| `dataTestid` | `string` | | Aplica atributo `data-testid` para testes sobre o componente. |
|
|
14
14
|
|
|
15
15
|
## Eventos
|
|
16
16
|
|
|
@@ -6,15 +6,15 @@ Responsável por carregar o menu superior, o menu de navegação lateral, o roda
|
|
|
6
6
|
|
|
7
7
|
## Props
|
|
8
8
|
|
|
9
|
-
| Prop | Tipo
|
|
10
|
-
| ---------------- |
|
|
11
|
-
| `dataTestid` | `string`
|
|
12
|
-
| `logo` | `string`
|
|
13
|
-
| `appBar` | [`AppBar`](#appbar)
|
|
14
|
-
| `navigationMenu` | [`NavigationMenu`](#navigationmenu)
|
|
15
|
-
| `footer` | [`Footer`](#footer)
|
|
16
|
-
| `loading` | `boolean`
|
|
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.** |
|
|
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" \| "tertiary" \| "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
18
|
|
|
19
19
|
### `AppBar`
|
|
20
20
|
|
|
@@ -5,7 +5,8 @@ Composable para execução de ações somente após a confirmação do usuário
|
|
|
5
5
|
## Tipo
|
|
6
6
|
|
|
7
7
|
```ts
|
|
8
|
-
type ColorVariant =
|
|
8
|
+
type ColorVariant =
|
|
9
|
+
"primary" | "secondary" | "tertiary" | "positive" | "informative" | "caution" | "danger";
|
|
9
10
|
|
|
10
11
|
interface ConfirmOptions {
|
|
11
12
|
title?: string;
|
|
@@ -42,13 +43,13 @@ Os diálogos de `confirm` compartilham a fila de diálogos do [`useDialog`](./us
|
|
|
42
43
|
|
|
43
44
|
### `ConfirmOptions`
|
|
44
45
|
|
|
45
|
-
| Opção | Tipo
|
|
46
|
-
| ------------- |
|
|
47
|
-
| `title` | `string`
|
|
48
|
-
| `message` | `string`
|
|
49
|
-
| `confirmText` | `string`
|
|
50
|
-
| `cancelText` | `string`
|
|
51
|
-
| `color` | `"primary"` \| `"secondary"` \| `"positive"` \| `"informative"` \| `"caution"` \| `"danger"` | `"primary"` | Cor do botão de confirmação. |
|
|
46
|
+
| Opção | Tipo | Padrão | Descrição |
|
|
47
|
+
| ------------- | ------------------------------------------------------------------------------------------------------------ | ------------- | ---------------------------------------------------------------- |
|
|
48
|
+
| `title` | `string` | | Título do diálogo, em texto simples (HTML não é interpretado). |
|
|
49
|
+
| `message` | `string` | | Mensagem do diálogo, em texto simples (HTML não é interpretado). |
|
|
50
|
+
| `confirmText` | `string` | `"Confirmar"` | Texto do botão de confirmação. |
|
|
51
|
+
| `cancelText` | `string` | `"Cancelar"` | Texto do botão de cancelamento. |
|
|
52
|
+
| `color` | `"primary"` \| `"secondary"` \| `"tertiary"` \| `"positive"` \| `"informative"` \| `"caution"` \| `"danger"` | `"primary"` | Cor do botão de confirmação. |
|
|
52
53
|
|
|
53
54
|
### Retorno
|
|
54
55
|
|
|
@@ -7,7 +7,8 @@ Composable para apresentação de diálogos.
|
|
|
7
7
|
```ts
|
|
8
8
|
type ButtonVariant = "primary" | "secondary" | "ghost";
|
|
9
9
|
|
|
10
|
-
type ColorVariant =
|
|
10
|
+
type ColorVariant =
|
|
11
|
+
"primary" | "secondary" | "tertiary" | "positive" | "informative" | "caution" | "danger";
|
|
11
12
|
|
|
12
13
|
interface DialogAction<T extends string = string> {
|
|
13
14
|
text: string;
|
|
@@ -45,12 +46,12 @@ Os diálogos são apresentados um de cada vez, na ordem em que foram solicitados
|
|
|
45
46
|
|
|
46
47
|
### `DialogAction`
|
|
47
48
|
|
|
48
|
-
| Opção | Tipo
|
|
49
|
-
| --------- |
|
|
50
|
-
| `text` | `string`
|
|
51
|
-
| `value` | `string`
|
|
52
|
-
| `variant` | `"primary"` \| `"secondary"` \| `"ghost"`
|
|
53
|
-
| `color` | `"primary"` \| `"secondary"` \| `"positive"` \| `"informative"` \| `"caution"` \| `"danger"` | `"primary"` | Cor do botão. |
|
|
49
|
+
| Opção | Tipo | Padrão | Descrição |
|
|
50
|
+
| --------- | ------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ------------------------------------------------------ |
|
|
51
|
+
| `text` | `string` | | Texto do botão. |
|
|
52
|
+
| `value` | `string` | | Valor devolvido por `dialog` quando o botão é clicado. |
|
|
53
|
+
| `variant` | `"primary"` \| `"secondary"` \| `"ghost"` | `"ghost"`, ou `"primary"` para a última ação | Variante do botão. |
|
|
54
|
+
| `color` | `"primary"` \| `"secondary"` \| `"tertiary"` \| `"positive"` \| `"informative"` \| `"caution"` \| `"danger"` | `"primary"` | Cor do botão. |
|
|
54
55
|
|
|
55
56
|
### Retorno
|
|
56
57
|
|
|
@@ -5,7 +5,8 @@ Composable para evitar a perda de alterações não salvas de um formulário ao
|
|
|
5
5
|
## Tipo
|
|
6
6
|
|
|
7
7
|
```ts
|
|
8
|
-
type ColorVariant =
|
|
8
|
+
type ColorVariant =
|
|
9
|
+
"primary" | "secondary" | "tertiary" | "positive" | "informative" | "caution" | "danger";
|
|
9
10
|
|
|
10
11
|
interface UnsavedChangesValues<T> {
|
|
11
12
|
previous: import("vue").MaybeRefOrGetter<T>;
|
|
@@ -67,14 +68,14 @@ Com `beforeUnload` ligado (padrão), recarregar a página, fechar a aba ou sair
|
|
|
67
68
|
|
|
68
69
|
### `UnsavedChangesOptions`
|
|
69
70
|
|
|
70
|
-
| Opção | Tipo
|
|
71
|
-
| -------------- |
|
|
72
|
-
| `title` | `string`
|
|
73
|
-
| `message` | `string`
|
|
74
|
-
| `confirmText` | `string`
|
|
75
|
-
| `cancelText` | `string`
|
|
76
|
-
| `color` | `"primary"` \| `"secondary"` \| `"positive"` \| `"informative"` \| `"caution"` \| `"danger"` | `"danger"` | Cor do botão que continua a navegação. |
|
|
77
|
-
| `beforeUnload` | `boolean`
|
|
71
|
+
| Opção | Tipo | Padrão | Descrição |
|
|
72
|
+
| -------------- | ------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
|
|
73
|
+
| `title` | `string` | `"Alterações não salvas"` | Título do diálogo, em texto simples (HTML não é interpretado). |
|
|
74
|
+
| `message` | `string` | `"Existem alterações que ainda não foram salvas. Deseja sair sem salvar?"` | Mensagem do diálogo, em texto simples (HTML não é interpretado). |
|
|
75
|
+
| `confirmText` | `string` | `"Sair sem salvar"` | Texto do botão que continua a navegação. |
|
|
76
|
+
| `cancelText` | `string` | `"Continuar editando"` | Texto do botão que cancela a navegação. |
|
|
77
|
+
| `color` | `"primary"` \| `"secondary"` \| `"tertiary"` \| `"positive"` \| `"informative"` \| `"caution"` \| `"danger"` | `"danger"` | Cor do botão que continua a navegação. |
|
|
78
|
+
| `beforeUnload` | `boolean` | `true` | Apresenta o aviso do navegador ao recarregar, fechar a aba ou sair por um link externo. |
|
|
78
79
|
|
|
79
80
|
### Acessibilidade
|
|
80
81
|
|
|
@@ -25,12 +25,13 @@ import { UButton } from "@nexdom/uimed-vue/components";
|
|
|
25
25
|
|
|
26
26
|
### Cores
|
|
27
27
|
|
|
28
|
-
A prop `color` aceita um dos valores da paleta do componente: `primary`, `secondary`, `positive`, `informative`, `caution` ou `danger`.
|
|
28
|
+
A prop `color` aceita um dos valores da paleta do componente: `primary`, `secondary`, `tertiary`, `positive`, `informative`, `caution` ou `danger`.
|
|
29
29
|
|
|
30
30
|
```vue
|
|
31
31
|
<template>
|
|
32
32
|
<u-button color="primary">Primary</u-button>
|
|
33
33
|
<u-button color="secondary">Secondary</u-button>
|
|
34
|
+
<u-button color="tertiary">Tertiary</u-button>
|
|
34
35
|
<u-button color="positive">Positive</u-button>
|
|
35
36
|
<u-button color="informative">Informative</u-button>
|
|
36
37
|
<u-button color="caution">Caution</u-button>
|
|
@@ -26,12 +26,13 @@ import { UIconButton } from "@nexdom/uimed-vue/components";
|
|
|
26
26
|
|
|
27
27
|
### Cores
|
|
28
28
|
|
|
29
|
-
A prop `color` aceita um dos valores da paleta do componente: `primary`, `secondary`, `positive`, `informative`, `caution` ou `danger`. O padrão é `primary`.
|
|
29
|
+
A prop `color` aceita um dos valores da paleta do componente: `primary`, `secondary`, `tertiary`, `positive`, `informative`, `caution` ou `danger`. O padrão é `primary`.
|
|
30
30
|
|
|
31
31
|
```vue
|
|
32
32
|
<template>
|
|
33
33
|
<u-icon-button icon="account" label="Perfil" color="primary" />
|
|
34
34
|
<u-icon-button icon="cog" label="Configurações" color="secondary" />
|
|
35
|
+
<u-icon-button icon="stethoscope" label="Atendimentos" color="tertiary" />
|
|
35
36
|
<u-icon-button icon="calendar" label="Agenda" color="positive" />
|
|
36
37
|
<u-icon-button icon="fileDocument" label="Documentos" color="informative" />
|
|
37
38
|
<u-icon-button icon="folder" label="Cadastros" color="caution" />
|
|
@@ -363,14 +363,14 @@ const footer: NonNullable<MainProps["footer"]> = {
|
|
|
363
363
|
|
|
364
364
|
### Cor de fundo
|
|
365
365
|
|
|
366
|
-
A prop `background` aplica uma cor ao fundo de toda a aplicação, como em landing pages, com as mesmas opções de cor do [Botão](./button.md): `primary`, `secondary`, `positive`, `informative`, `caution` e `danger`. Quando omitida, a aplicação usa o fundo padrão do tema.
|
|
366
|
+
A prop `background` aplica uma cor ao fundo de toda a aplicação, como em landing pages, com as mesmas opções de cor do [Botão](./button.md): `primary`, `secondary`, `tertiary`, `positive`, `informative`, `caution` e `danger`. Quando omitida, a aplicação usa o fundo padrão do tema.
|
|
367
367
|
|
|
368
368
|
O texto colocado diretamente sobre o fundo passa a usar a cor associada a ele (branco ou preto). O menu superior, o rodapé, as [Sections](./section.md) e os diálogos mantêm os próprios fundos.
|
|
369
369
|
|
|
370
370
|
Cuide do contraste ao escolher a cor:
|
|
371
371
|
|
|
372
372
|
- `secondary` é a mesma cor do fundo das [Sections](./section.md) e do menu superior, que perdem a separação do restante da página.
|
|
373
|
-
- Evite combinações em que o componente some no fundo, como um botão `primary` ou links sobre o fundo `primary`, ou links e campos de formulário sobre o fundo `danger`.
|
|
373
|
+
- Evite combinações em que o componente some no fundo, como um botão `primary` ou links sobre o fundo `primary`, um botão `primary` sobre o fundo `tertiary`, ou links e campos de formulário sobre o fundo `danger`.
|
|
374
374
|
|
|
375
375
|
```vue
|
|
376
376
|
<template>
|
|
@@ -179,6 +179,26 @@ const navigationMenu = {
|
|
|
179
179
|
};
|
|
180
180
|
```
|
|
181
181
|
|
|
182
|
+
### Cor `primary`
|
|
183
|
+
|
|
184
|
+
Na v1, a cor `primary` era o azul do tema padrão. Na v2, a `primary` é um verde-escuro (`#074D31`), com texto claro, e o verde da marca (`#00995D`) está disponível como `tertiary`, com texto preto, que também é a cor do menu de navegação. Nas versões beta da v2 até a `2.0.0-beta.57`, esse verde era a `primary`. Para usar o verde da marca, utilize `color="tertiary"`.
|
|
185
|
+
|
|
186
|
+
**Antes (v1):**
|
|
187
|
+
|
|
188
|
+
```vue
|
|
189
|
+
<template>
|
|
190
|
+
<btn color="primary">Agendar</btn>
|
|
191
|
+
</template>
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
**Depois (v2):**
|
|
195
|
+
|
|
196
|
+
```vue
|
|
197
|
+
<template>
|
|
198
|
+
<u-button color="tertiary">Agendar</u-button>
|
|
199
|
+
</template>
|
|
200
|
+
```
|
|
201
|
+
|
|
182
202
|
## Dicas de Migração
|
|
183
203
|
|
|
184
204
|
1. Procure por todas as importações antigas e substitua pelos novos nomes com o prefixo `U`
|
|
@@ -187,5 +207,6 @@ const navigationMenu = {
|
|
|
187
207
|
4. Substitua a propriedade `date` das notificações do menu superior por `when`, informando o texto já formatado (veja [Notificações do menu superior](#notificacoes-do-menu-superior))
|
|
188
208
|
5. Adicione `align-y="stretch"` às `URow` cujas colunas precisam ter a mesma altura (veja [Alinhamento vertical das colunas](#alinhamento-vertical-das-colunas))
|
|
189
209
|
6. Informe um `icon` em todos os itens e grupos do primeiro nível do menu de navegação, e revise as telas e os testes que contavam com o botão do menu em telas largas (veja [Menu de navegação](#menu-de-navegacao))
|
|
210
|
+
7. Utilize `color="tertiary"` onde a aplicação deve usar o verde da marca, já que a `primary` da v2 é um verde-escuro (veja [Cor `primary`](#cor-primary))
|
|
190
211
|
|
|
191
212
|
Para mais informações sobre cada componente, consulte a [Documentação da API](../api/index.md).
|