@sveltia/ui 0.47.0 → 0.49.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/util/app-shell.svelte +9 -9
- package/dist/components/util/font-links.svelte +1 -0
- package/dist/components/util/visibility-observer.svelte +52 -0
- package/dist/components/util/visibility-observer.svelte.d.ts +18 -0
- package/dist/locales/pt-BR.yaml +113 -0
- package/dist/styles/core.scss +1 -0
- package/dist/styles/variables.scss +8 -8
- package/package.json +7 -7
|
@@ -189,17 +189,17 @@
|
|
|
189
189
|
--sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 40%);
|
|
190
190
|
--sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 40%);
|
|
191
191
|
--sui-font-family-default: "Source Sans 3", system-ui, sans-serif;
|
|
192
|
-
--sui-font-size-xxx-large:
|
|
193
|
-
--sui-font-size-xx-large:
|
|
194
|
-
--sui-font-size-x-large:
|
|
195
|
-
--sui-font-size-large:
|
|
196
|
-
--sui-font-size-default:
|
|
197
|
-
--sui-font-size-small:
|
|
198
|
-
--sui-font-size-x-small:
|
|
192
|
+
--sui-font-size-xxx-large: 25px;
|
|
193
|
+
--sui-font-size-xx-large: 21px;
|
|
194
|
+
--sui-font-size-x-large: 19px;
|
|
195
|
+
--sui-font-size-large: 17px;
|
|
196
|
+
--sui-font-size-default: 15px;
|
|
197
|
+
--sui-font-size-small: 13px;
|
|
198
|
+
--sui-font-size-x-small: 11px;
|
|
199
199
|
--sui-font-weight-normal: 400;
|
|
200
200
|
--sui-font-weight-bold: 700;
|
|
201
201
|
--sui-font-family-monospace: "Noto Sans Mono", ui-monospace, monospace;
|
|
202
|
-
--sui-font-size-monospace: 0.
|
|
202
|
+
--sui-font-size-monospace: 0.9em;
|
|
203
203
|
--sui-line-height-default: 1.2;
|
|
204
204
|
--sui-line-height-compact: 1.4;
|
|
205
205
|
--sui-line-height-comfortable: 1.6;
|
|
@@ -452,6 +452,7 @@
|
|
|
452
452
|
border-width: 0;
|
|
453
453
|
border-style: solid;
|
|
454
454
|
vertical-align: top;
|
|
455
|
+
font-size-adjust: inherit;
|
|
455
456
|
}
|
|
456
457
|
@media (prefers-reduced-motion) {
|
|
457
458
|
:global(*),
|
|
@@ -601,7 +602,6 @@
|
|
|
601
602
|
font-size: var(--sui-font-size-default);
|
|
602
603
|
font-weight: var(--sui-font-weight-normal, normal);
|
|
603
604
|
word-spacing: var(--sui-word-spacing-normal);
|
|
604
|
-
font-size-adjust: 0.5;
|
|
605
605
|
-webkit-font-smoothing: antialiased;
|
|
606
606
|
-moz-osx-font-smoothing: grayscale;
|
|
607
607
|
-webkit-user-select: none;
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
unicode-range:
|
|
13
13
|
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
|
|
14
14
|
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
15
|
+
size-adjust: 110%;
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
/* https://fontsource.org/fonts/noto-mono/cdn */
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { removeVisibilityResolver, waitForVisibility } from '@sveltia/utils/element';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* @import { Snippet } from 'svelte';
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* @typedef {object} Props
|
|
10
|
+
* @property {Snippet} children Slot content.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
/** @type {Props} */
|
|
14
|
+
let {
|
|
15
|
+
/* eslint-disable prefer-const */
|
|
16
|
+
children,
|
|
17
|
+
/* eslint-enable prefer-const */
|
|
18
|
+
} = $props();
|
|
19
|
+
|
|
20
|
+
/** @type {HTMLElement | null} */
|
|
21
|
+
let placeholder = $state(null);
|
|
22
|
+
/** @type {boolean} */
|
|
23
|
+
let visible = $state(false);
|
|
24
|
+
|
|
25
|
+
$effect(() => {
|
|
26
|
+
if (placeholder) {
|
|
27
|
+
(async () => {
|
|
28
|
+
await waitForVisibility(placeholder);
|
|
29
|
+
visible = true;
|
|
30
|
+
})();
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
// Clean up
|
|
34
|
+
return () => {
|
|
35
|
+
if (placeholder) {
|
|
36
|
+
removeVisibilityResolver(placeholder);
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
});
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
{#if visible}
|
|
43
|
+
{@render children()}
|
|
44
|
+
{:else}
|
|
45
|
+
<div class="placeholder" bind:this={placeholder}></div>
|
|
46
|
+
{/if}
|
|
47
|
+
|
|
48
|
+
<style>
|
|
49
|
+
.placeholder {
|
|
50
|
+
height: 64px;
|
|
51
|
+
}
|
|
52
|
+
</style>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export default VisibilityObserver;
|
|
2
|
+
type VisibilityObserver = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Props>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const VisibilityObserver: import("svelte").Component<{
|
|
7
|
+
/**
|
|
8
|
+
* Slot content.
|
|
9
|
+
*/
|
|
10
|
+
children: Snippet;
|
|
11
|
+
}, {}, "">;
|
|
12
|
+
type Props = {
|
|
13
|
+
/**
|
|
14
|
+
* Slot content.
|
|
15
|
+
*/
|
|
16
|
+
children: Snippet;
|
|
17
|
+
};
|
|
18
|
+
import type { Snippet } from 'svelte';
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
# Dialog action button labels
|
|
2
|
+
ok: OK
|
|
3
|
+
cancel: Cancelar
|
|
4
|
+
close: Fechar
|
|
5
|
+
|
|
6
|
+
# Button to clear content, e.g. search input or calendar date
|
|
7
|
+
clear: Limpar
|
|
8
|
+
|
|
9
|
+
# Text editor dialog buttons for link/image insertion
|
|
10
|
+
insert: Inserir
|
|
11
|
+
update: Atualizar
|
|
12
|
+
remove: Remover
|
|
13
|
+
|
|
14
|
+
# Combobox dropdown toggle button aria-labels
|
|
15
|
+
collapse: Recolher
|
|
16
|
+
expand: Expandir
|
|
17
|
+
|
|
18
|
+
# Infobar/toast dismiss button label
|
|
19
|
+
dismiss: Dispensar
|
|
20
|
+
|
|
21
|
+
# Calendar component
|
|
22
|
+
calendar:
|
|
23
|
+
# View switcher group aria-labels and navigation button aria-labels
|
|
24
|
+
year: Ano
|
|
25
|
+
previous_decade: Década anterior
|
|
26
|
+
next_decade: Próxima década
|
|
27
|
+
month: Mês
|
|
28
|
+
previous_month: Mês anterior
|
|
29
|
+
next_month: Próximo mês
|
|
30
|
+
# “Today” button label in footer
|
|
31
|
+
today: Hoje
|
|
32
|
+
|
|
33
|
+
# Split button component
|
|
34
|
+
split_button:
|
|
35
|
+
# Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
|
|
36
|
+
x_options: 'Opções de {$name}'
|
|
37
|
+
# Dropdown toggle aria-label
|
|
38
|
+
more_options: Mais opções
|
|
39
|
+
|
|
40
|
+
# Combobox component
|
|
41
|
+
combobox:
|
|
42
|
+
# Placeholder when no option is selected
|
|
43
|
+
select_an_option: Selecione uma opção…
|
|
44
|
+
# Filter input aria-label
|
|
45
|
+
filter_options: Filtrar opções
|
|
46
|
+
# Empty state message when filter has no matches
|
|
47
|
+
no_matching_options: Nenhuma opção correspondente encontrada
|
|
48
|
+
|
|
49
|
+
# Number input component
|
|
50
|
+
number_input:
|
|
51
|
+
# Spin button aria-labels for incrementing/decrementing the number value
|
|
52
|
+
increase: Aumentar
|
|
53
|
+
decrease: Diminuir
|
|
54
|
+
|
|
55
|
+
# Password input component
|
|
56
|
+
password_input:
|
|
57
|
+
# Visibility toggle button aria-labels
|
|
58
|
+
show_password: Mostrar senha
|
|
59
|
+
hide_password: Ocultar senha
|
|
60
|
+
|
|
61
|
+
# Secret input component (API keys, tokens, etc.)
|
|
62
|
+
secret_input:
|
|
63
|
+
# Visibility toggle button aria-labels
|
|
64
|
+
show_secret: Mostrar segredo
|
|
65
|
+
hide_secret: Ocultar segredo
|
|
66
|
+
|
|
67
|
+
# Select tags component (multi-select)
|
|
68
|
+
select_tags:
|
|
69
|
+
# Listbox aria-label
|
|
70
|
+
selected_options: Opções selecionadas
|
|
71
|
+
# Remove button aria-label, e.g. “Remove Option 1”
|
|
72
|
+
remove_x: 'Remover {$name}'
|
|
73
|
+
|
|
74
|
+
# Text editor component
|
|
75
|
+
text_editor:
|
|
76
|
+
# Toolbar aria-labels
|
|
77
|
+
text_editor: Editor de texto
|
|
78
|
+
code_editor: Editor de código
|
|
79
|
+
# Block style menu button and menu aria-labels
|
|
80
|
+
text_style_options: Opções de estilo de texto
|
|
81
|
+
show_text_style_options: Mostrar opções de estilo de texto
|
|
82
|
+
# Block style menu items
|
|
83
|
+
paragraph: Parágrafo
|
|
84
|
+
heading_1: Título 1
|
|
85
|
+
heading_2: Título 2
|
|
86
|
+
heading_3: Título 3
|
|
87
|
+
heading_4: Título 4
|
|
88
|
+
heading_5: Título 5
|
|
89
|
+
heading_6: Título 6
|
|
90
|
+
bulleted_list: Lista com marcadores
|
|
91
|
+
numbered_list: Lista numerada
|
|
92
|
+
blockquote: Citação
|
|
93
|
+
code_block: Bloco de código
|
|
94
|
+
# Inline style button aria-labels
|
|
95
|
+
bold: Negrito
|
|
96
|
+
italic: Itálico
|
|
97
|
+
strikethrough: Tachado
|
|
98
|
+
code: Código
|
|
99
|
+
link: Link
|
|
100
|
+
# Link dialog title
|
|
101
|
+
insert_link: Inserir link
|
|
102
|
+
update_link: Atualizar link
|
|
103
|
+
# Link dialog input field labels
|
|
104
|
+
text: Texto
|
|
105
|
+
url: URL
|
|
106
|
+
# Markdown mode toggle button aria-label
|
|
107
|
+
edit_in_markdown: Editar em Markdown
|
|
108
|
+
# Error message when rich text conversion fails
|
|
109
|
+
converter_error: Não foi possível ativar o modo de texto formatado. Use o editor de texto simples.
|
|
110
|
+
# Language selector aria-label
|
|
111
|
+
language: Idioma
|
|
112
|
+
# Plain text mode option in language selector
|
|
113
|
+
plain_text: Texto simples
|
package/dist/styles/core.scss
CHANGED
|
@@ -155,17 +155,17 @@
|
|
|
155
155
|
--sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 40%);
|
|
156
156
|
// Text
|
|
157
157
|
--sui-font-family-default: "Source Sans 3", system-ui, sans-serif;
|
|
158
|
-
--sui-font-size-xxx-large:
|
|
159
|
-
--sui-font-size-xx-large:
|
|
160
|
-
--sui-font-size-x-large:
|
|
161
|
-
--sui-font-size-large:
|
|
162
|
-
--sui-font-size-default:
|
|
163
|
-
--sui-font-size-small:
|
|
164
|
-
--sui-font-size-x-small:
|
|
158
|
+
--sui-font-size-xxx-large: 25px;
|
|
159
|
+
--sui-font-size-xx-large: 21px;
|
|
160
|
+
--sui-font-size-x-large: 19px;
|
|
161
|
+
--sui-font-size-large: 17px;
|
|
162
|
+
--sui-font-size-default: 15px;
|
|
163
|
+
--sui-font-size-small: 13px;
|
|
164
|
+
--sui-font-size-x-small: 11px;
|
|
165
165
|
--sui-font-weight-normal: 400;
|
|
166
166
|
--sui-font-weight-bold: 700;
|
|
167
167
|
--sui-font-family-monospace: "Noto Sans Mono", ui-monospace, monospace;
|
|
168
|
-
--sui-font-size-monospace: 0.
|
|
168
|
+
--sui-font-size-monospace: 0.9em;
|
|
169
169
|
--sui-line-height-default: 1.2;
|
|
170
170
|
--sui-line-height-compact: 1.4;
|
|
171
171
|
--sui-line-height-comfortable: 1.6;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sveltia/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.49.0",
|
|
4
4
|
"description": "A collection of Svelte components and utilities for building user interfaces.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"@lexical/table": "^0.48.0",
|
|
47
47
|
"@lexical/utils": "^0.48.0",
|
|
48
48
|
"@sveltia/i18n": "^1.1.3",
|
|
49
|
-
"@sveltia/utils": "^0.
|
|
49
|
+
"@sveltia/utils": "^0.12.0",
|
|
50
50
|
"lexical": "^0.48.0",
|
|
51
51
|
"prismjs": "^1.30.0"
|
|
52
52
|
},
|
|
@@ -62,13 +62,13 @@
|
|
|
62
62
|
"eslint-config-airbnb-extended": "^3.1.1",
|
|
63
63
|
"eslint-config-prettier": "^10.1.8",
|
|
64
64
|
"eslint-plugin-import": "^2.32.0",
|
|
65
|
-
"eslint-plugin-jsdoc": "^63.3.
|
|
65
|
+
"eslint-plugin-jsdoc": "^63.3.2",
|
|
66
66
|
"eslint-plugin-package-json": "^1.6.2",
|
|
67
67
|
"eslint-plugin-svelte": "^3.22.0",
|
|
68
|
-
"globals": "^17.
|
|
68
|
+
"globals": "^17.8.0",
|
|
69
69
|
"happy-dom": "^20.11.1",
|
|
70
|
-
"oxlint": "^1.
|
|
71
|
-
"postcss": "^8.5.
|
|
70
|
+
"oxlint": "^1.76.0",
|
|
71
|
+
"postcss": "^8.5.24",
|
|
72
72
|
"postcss-html": "^1.8.1",
|
|
73
73
|
"prettier": "^3.9.6",
|
|
74
74
|
"prettier-plugin-svelte": "^4.1.1",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"stylelint-config-recommended-scss": "^17.0.1",
|
|
78
78
|
"stylelint-scss": "^7.2.0",
|
|
79
79
|
"svelte": "^5.56.8",
|
|
80
|
-
"svelte-check": "^4.7.
|
|
80
|
+
"svelte-check": "^4.7.4",
|
|
81
81
|
"svelte-preprocess": "^6.0.5",
|
|
82
82
|
"tslib": "^2.8.1",
|
|
83
83
|
"vite": "^8.1.5",
|