@nexdom/uimed-vue 2.4.2 → 2.5.0
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/main/types.d.ts +3 -3
- package/dist/index.js +6 -2
- package/package.json +1 -1
- package/skills/uimed-vue/references/api/components/main.md +9 -9
- package/skills/uimed-vue/references/guide/components/main.md +1 -1
- package/skills/uimed-vue/references/guide/migration-v1-to-v2.md +2 -0
|
@@ -45,9 +45,9 @@ export type MainProps = {
|
|
|
45
45
|
loading?: boolean;
|
|
46
46
|
/**
|
|
47
47
|
* Applies a color to the background of the whole app, e.g. on landing pages. Text placed
|
|
48
|
-
* directly on the background takes the color the theme pairs with it (white
|
|
49
|
-
* the app bar, the footer, sections and dialogs keep their own backgrounds. When
|
|
50
|
-
* app uses the theme's default background.
|
|
48
|
+
* directly on the background takes the color the theme pairs with it (white, dark green or
|
|
49
|
+
* black), while the app bar, the footer, sections and dialogs keep their own backgrounds. When
|
|
50
|
+
* omitted, the app uses the theme's default background.
|
|
51
51
|
*
|
|
52
52
|
* @example
|
|
53
53
|
* ```vue
|
package/dist/index.js
CHANGED
|
@@ -6,7 +6,7 @@ import { createVuetify } from "vuetify";
|
|
|
6
6
|
import "vue";
|
|
7
7
|
import { mdi } from "vuetify/iconsets/mdi-svg";
|
|
8
8
|
//#region src/index.ts
|
|
9
|
-
/** The library's default theme, with its colors and the opacities of
|
|
9
|
+
/** The library's default theme, with its colors and the opacities of the text and borders */
|
|
10
10
|
const light = {
|
|
11
11
|
dark: false,
|
|
12
12
|
colors: {
|
|
@@ -19,6 +19,9 @@ const light = {
|
|
|
19
19
|
warning: "#FFE596",
|
|
20
20
|
error: "#D92D20",
|
|
21
21
|
info: "#9ACBE5",
|
|
22
|
+
"on-background": "#053321",
|
|
23
|
+
"on-surface": "#053321",
|
|
24
|
+
"on-secondary": "#053321",
|
|
22
25
|
"on-primary": "#FCFCFD",
|
|
23
26
|
"on-tertiary": "#000000",
|
|
24
27
|
"primary-text": "#074D31",
|
|
@@ -31,7 +34,8 @@ const light = {
|
|
|
31
34
|
},
|
|
32
35
|
variables: {
|
|
33
36
|
"border-color": "#D0D5DD",
|
|
34
|
-
"
|
|
37
|
+
"high-emphasis-opacity": 1,
|
|
38
|
+
"medium-emphasis-opacity": .72
|
|
35
39
|
}
|
|
36
40
|
};
|
|
37
41
|
/**
|
package/package.json
CHANGED
|
@@ -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 | 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 e com a mesma elevação do menu superior. **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.** |
|
|
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 e com a mesma elevação do menu superior. **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, verde-escuro 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
|
|
|
@@ -365,7 +365,7 @@ const footer: NonNullable<MainProps["footer"]> = {
|
|
|
365
365
|
|
|
366
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
|
-
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.
|
|
368
|
+
O texto colocado diretamente sobre o fundo passa a usar a cor associada a ele (branco, verde-escuro 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
|
|
|
@@ -199,6 +199,8 @@ Na v1, a cor `primary` era o azul do tema padrão. Na v2, a `primary` é um verd
|
|
|
199
199
|
</template>
|
|
200
200
|
```
|
|
201
201
|
|
|
202
|
+
O texto sobre o fundo e as superfícies (cards, diálogos, menu superior) também mudou: é verde-escuro (`#053321`), não preto.
|
|
203
|
+
|
|
202
204
|
## Dicas de Migração
|
|
203
205
|
|
|
204
206
|
1. Procure por todas as importações antigas e substitua pelos novos nomes com o prefixo `U`
|