@nexdom/uimed-vue 2.3.1 → 2.4.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/navigation-menu/navigation-menu.vue_vue_type_script_setup_true_lang.js +1 -0
- package/dist/index.js +37 -26
- package/dist/styles/settings.scss +8 -0
- package/package.json +1 -1
- package/skills/uimed-vue/references/api/components/main.md +1 -1
- package/skills/uimed-vue/references/guide/components/main.md +3 -3
package/dist/components/navigation-menu/navigation-menu.vue_vue_type_script_setup_true_lang.js
CHANGED
|
@@ -82,6 +82,7 @@ var navigation_menu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
|
|
|
82
82
|
modelValue: unref(drawerOpen),
|
|
83
83
|
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(drawerOpen) ? drawerOpen.value = $event : null),
|
|
84
84
|
color: "tertiary",
|
|
85
|
+
theme: "navigation",
|
|
85
86
|
"data-testid": props.dataTestid,
|
|
86
87
|
"aria-busy": props.loading || void 0,
|
|
87
88
|
mobile: unref(mobile),
|
package/dist/index.js
CHANGED
|
@@ -6,6 +6,34 @@ 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 secondary text and borders */
|
|
10
|
+
const light = {
|
|
11
|
+
dark: false,
|
|
12
|
+
colors: {
|
|
13
|
+
background: "#EAEDF0",
|
|
14
|
+
surface: "#FCFCFD",
|
|
15
|
+
primary: "#074D31",
|
|
16
|
+
secondary: "#FCFCFD",
|
|
17
|
+
tertiary: "#00995D",
|
|
18
|
+
success: "#A9EFC5",
|
|
19
|
+
warning: "#FFE596",
|
|
20
|
+
error: "#D92D20",
|
|
21
|
+
info: "#9ACBE5",
|
|
22
|
+
"on-primary": "#FCFCFD",
|
|
23
|
+
"on-tertiary": "#000000",
|
|
24
|
+
"primary-text": "#074D31",
|
|
25
|
+
"tertiary-text": "#007547",
|
|
26
|
+
"success-text": "#16783E",
|
|
27
|
+
"info-text": "#277096",
|
|
28
|
+
"warning-text": "#846300",
|
|
29
|
+
"error-text": "#C92A1E",
|
|
30
|
+
link: "#0271AD"
|
|
31
|
+
},
|
|
32
|
+
variables: {
|
|
33
|
+
"border-color": "#D0D5DD",
|
|
34
|
+
"medium-emphasis-opacity": .7
|
|
35
|
+
}
|
|
36
|
+
};
|
|
9
37
|
/**
|
|
10
38
|
* Create an UIMed-Vue instance to be installed after [createApp](https://vuejs.org/guide/essentials/application.html#the-application-instance).
|
|
11
39
|
* @returns an instance to be used with [app.use](https://vuejs.org/guide/essentials/application.html#the-application-instance)
|
|
@@ -20,33 +48,16 @@ function createUimed() {
|
|
|
20
48
|
locale: localeOptions,
|
|
21
49
|
theme: {
|
|
22
50
|
defaultTheme: "light",
|
|
23
|
-
themes: {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
success: "#A9EFC5",
|
|
32
|
-
warning: "#FFE596",
|
|
33
|
-
error: "#D92D20",
|
|
34
|
-
info: "#9ACBE5",
|
|
35
|
-
"on-primary": "#FCFCFD",
|
|
36
|
-
"on-tertiary": "#000000",
|
|
37
|
-
"primary-text": "#074D31",
|
|
38
|
-
"tertiary-text": "#007547",
|
|
39
|
-
"success-text": "#16783E",
|
|
40
|
-
"info-text": "#277096",
|
|
41
|
-
"warning-text": "#846300",
|
|
42
|
-
"error-text": "#C92A1E",
|
|
43
|
-
link: "#0271AD"
|
|
44
|
-
},
|
|
45
|
-
variables: {
|
|
46
|
-
"border-color": "#D0D5DD",
|
|
47
|
-
"medium-emphasis-opacity": .7
|
|
51
|
+
themes: {
|
|
52
|
+
light,
|
|
53
|
+
navigation: {
|
|
54
|
+
...light,
|
|
55
|
+
variables: {
|
|
56
|
+
...light.variables,
|
|
57
|
+
"disabled-opacity": .8
|
|
58
|
+
}
|
|
48
59
|
}
|
|
49
|
-
}
|
|
60
|
+
}
|
|
50
61
|
}
|
|
51
62
|
});
|
|
52
63
|
}
|
|
@@ -1,8 +1,16 @@
|
|
|
1
|
+
// The app bar and the footer frame the content of UMain, so they share one elevation
|
|
2
|
+
$layout-elevation: 2;
|
|
3
|
+
|
|
1
4
|
@use "vuetify/settings" with (
|
|
5
|
+
$app-bar-elevation: $layout-elevation,
|
|
6
|
+
$footer-elevation: $layout-elevation,
|
|
2
7
|
$body-font-family: var(--v-font-body, "Unimed Slab", sans-serif),
|
|
3
8
|
// Unimed Slab's ascent and descent take 1.26em, more than the subtitles' default 1rem line
|
|
4
9
|
// height, which clipped its descenders and accented capitals
|
|
5
10
|
$list-item-subtitle-line-height: normal,
|
|
11
|
+
// Vuetify's 0.38 draws the fields' underline and outline with a contrast of 2.3:1 on white and
|
|
12
|
+
// 2.12:1 on the navigation menu, below WCAG AA's 3:1 for interface components
|
|
13
|
+
$field-outline-opacity: 0.6,
|
|
6
14
|
// The utility classes are a render-blocking stylesheet in the apps, so only the ones the
|
|
7
15
|
// components use are generated. The theme's colors (`primary`, ...) don't come from here, and
|
|
8
16
|
// the palettes are left out: only the shades (black, white and transparent) remain, since
|
package/package.json
CHANGED
|
@@ -12,7 +12,7 @@ Responsável por carregar o menu superior, o menu de navegação lateral, o roda
|
|
|
12
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
13
|
| `appBar` | [`AppBar`](#appbar) | | Conjunto de propriedades para aplicar à barra superior. |
|
|
14
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.**
|
|
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
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
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
|
|
|
@@ -196,8 +196,8 @@ type MainProps = ComponentProps<typeof UMain>;
|
|
|
196
196
|
const appBar: NonNullable<MainProps["appBar"]> = {
|
|
197
197
|
title: "Menu superior",
|
|
198
198
|
user: {
|
|
199
|
-
title: "
|
|
200
|
-
subtitle: "
|
|
199
|
+
title: "Douglas Martins",
|
|
200
|
+
subtitle: "douglas.martins@example.com",
|
|
201
201
|
options: [{ description: "Sair", action: () => window.alert("Saindo...") }],
|
|
202
202
|
},
|
|
203
203
|
};
|
|
@@ -331,7 +331,7 @@ const navigationMenu: NonNullable<MainProps["navigationMenu"]> = {
|
|
|
331
331
|
|
|
332
332
|
### Rodapé
|
|
333
333
|
|
|
334
|
-
A prop `footer` exibe um texto fixo na parte inferior da tela, como a versão da aplicação, para que o usuário consiga informá-la ao suporte ao relatar um problema. O texto fica centralizado e o conteúdo da página termina acima do rodapé, sem ficar coberto por ele.
|
|
334
|
+
A prop `footer` exibe um texto fixo na parte inferior da tela, como a versão da aplicação, para que o usuário consiga informá-la ao suporte ao relatar um problema. O texto fica centralizado, o rodapé tem a mesma elevação (sombra) do menu superior e o conteúdo da página termina acima do rodapé, sem ficar coberto por ele.
|
|
335
335
|
|
|
336
336
|
Para ocultar o rodapé, basta omitir essa prop ou deixar o seu `description` vazio, por exemplo enquanto o usuário não estiver autenticado. O carregamento (prop `loading`) não afeta o rodapé.
|
|
337
337
|
|