@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.
@@ -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 or black), while
49
- * the app bar, the footer, sections and dialogs keep their own backgrounds. When omitted, the
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
@@ -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 secondary text and borders */
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
- "medium-emphasis-opacity": .7
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nexdom/uimed-vue",
3
- "version": "2.4.1",
3
+ "version": "2.5.0",
4
4
  "description": "A ui framework for NEXDOM applications.",
5
5
  "keywords": [
6
6
  "lib",
@@ -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`