@nexdom/uimed-vue 2.4.1 → 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/components/navigation-menu/navigation-menu.vue_vue_type_script_setup_true_lang.js +3 -2
- package/dist/index.js +6 -2
- package/dist/styles/settings.scss +4 -0
- 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/components/navigation-menu/navigation-menu.vue_vue_type_script_setup_true_lang.js
CHANGED
|
@@ -149,11 +149,12 @@ var navigation_menu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
|
|
|
149
149
|
type: "list-item@6",
|
|
150
150
|
color: "tertiary"
|
|
151
151
|
}, {
|
|
152
|
-
default: withCtx(() => [createCommentVNode(" Vuetify's `list` role only allows list items, but the items are links "), createVNode(unref(VList), {
|
|
152
|
+
default: withCtx(() => [createCommentVNode(" Vuetify's `list` role only allows list items, but the items are links.\n `indent` aligns the items of a group with its title, which the 24px between the icons and\n the titles (`settings.scss`) move 8px to the left of Vuetify's default indentation. It\n replaces the group's prepend width too, so it's the icon (24px) plus that gap (24px) "), createVNode(unref(VList), {
|
|
153
153
|
opened: unref(opened),
|
|
154
154
|
"onUpdate:opened": _cache[1] || (_cache[1] = ($event) => isRef(opened) ? opened.value = $event : null),
|
|
155
155
|
nav: "",
|
|
156
|
-
role: "group"
|
|
156
|
+
role: "group",
|
|
157
|
+
indent: 48
|
|
157
158
|
}, {
|
|
158
159
|
default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredItems.value, (item, index) => {
|
|
159
160
|
return openBlock(), createElementBlock(Fragment, { key: index }, [unref(isParentItem)(item) ? (openBlock(), createBlock(unref(VListGroup), {
|
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
|
/**
|
|
@@ -11,6 +11,10 @@ $layout-elevation: 2;
|
|
|
11
11
|
// Vuetify's 0.38 draws the fields' underline and outline with a contrast of 2.3:1 on white and
|
|
12
12
|
// 2.12:1 on the navigation menu, below WCAG AA's 3:1 for interface components
|
|
13
13
|
$field-outline-opacity: 0.6,
|
|
14
|
+
// Vuetify's 32px between a list item's icons and its title truncated common descriptions (e.g.
|
|
15
|
+
// "Recursos humanos") in the expanded navigation menu, whose groups have an icon on each side
|
|
16
|
+
$list-item-icon-margin-start: 24px,
|
|
17
|
+
$list-item-icon-margin-end: 24px,
|
|
14
18
|
// The utility classes are a render-blocking stylesheet in the apps, so only the ones the
|
|
15
19
|
// components use are generated. The theme's colors (`primary`, ...) don't come from here, and
|
|
16
20
|
// the palettes are left out: only the shades (black, white and transparent) remain, since
|
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`
|