ui-optago 1.0.2 → 1.0.4
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/package.json +1 -1
- package/ui-optago.css +19 -1
- package/ui-optago.js +56 -3
- package/ui-optago.html +0 -1268
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ui-optago",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "Design System Óptago — componentes UI em CSS puro + JS vanilla, com tema claro/escuro, verde-lima (#C0FF6B) e app shell com sidebar colapsável.",
|
|
5
5
|
"author": "Óptago <cowork@optago.com.br> (https://optago.com.br)",
|
|
6
6
|
"license": "MIT",
|
package/ui-optago.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* ============================================================================
|
|
2
|
-
UI ÓPTAGO — Design System v1.0.
|
|
2
|
+
UI ÓPTAGO — Design System v1.0.3
|
|
3
3
|
CSS puro, sem dependências. Tema escuro por padrão.
|
|
4
4
|
Para tema claro: adicione a classe "light" ao <html> (o ui-optago.js
|
|
5
5
|
gerencia isso automaticamente via localStorage).
|
|
@@ -715,6 +715,19 @@ html.light .op-input:focus, html.light .op-select:focus, html.light .op-textarea
|
|
|
715
715
|
}
|
|
716
716
|
.op-input-icon .op-input { padding-left: 2.625rem; }
|
|
717
717
|
|
|
718
|
+
/* Botão de mostrar/ocultar senha: envolva o input com [data-op-reveal] e
|
|
719
|
+
adicione um <button data-op-reveal-toggle> dentro — o toggle de type
|
|
720
|
+
password/text é feito automaticamente pelo JS da lib. */
|
|
721
|
+
[data-op-reveal] { position: relative; }
|
|
722
|
+
[data-op-reveal] .op-input { padding-right: 2.5rem; }
|
|
723
|
+
.op-reveal-btn {
|
|
724
|
+
position: absolute; top: 50%; right: .5rem; translate: 0 -50%;
|
|
725
|
+
background: none; border: 0; cursor: pointer; padding: .25rem;
|
|
726
|
+
color: var(--op-muted); font-size: 1.125rem; line-height: 1;
|
|
727
|
+
display: flex; align-items: center;
|
|
728
|
+
}
|
|
729
|
+
.op-reveal-btn:hover { color: var(--op-text); }
|
|
730
|
+
|
|
718
731
|
/* Input group (prefixo/sufixo) */
|
|
719
732
|
.op-input-group { display: flex; }
|
|
720
733
|
.op-input-group .op-input { border-radius: 0; }
|
|
@@ -1420,6 +1433,11 @@ html.light .op-modal { background: rgba(15,23,42,.5); }
|
|
|
1420
1433
|
border-top: 1px solid var(--op-border);
|
|
1421
1434
|
background: var(--op-panel-2);
|
|
1422
1435
|
}
|
|
1436
|
+
/* Modais com formulário real (method="post") costumam envolver o body e o
|
|
1437
|
+
footer num único <form> para o submit incluir os dois. Sem isso, o <form>
|
|
1438
|
+
(um bloco comum) quebra a coluna flex do .op-modal-box e o body deixa de
|
|
1439
|
+
rolar internamente — o modal cresce para fora da tela em vez de rolar. */
|
|
1440
|
+
.op-modal form { display: contents; }
|
|
1423
1441
|
|
|
1424
1442
|
/* ----------------------------------------------------------------------------
|
|
1425
1443
|
19. TOASTS (criados via OptagoUI.toast)
|
package/ui-optago.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* ============================================================================
|
|
2
|
-
UI ÓPTAGO — Design System v1.0.
|
|
2
|
+
UI ÓPTAGO — Design System v1.0.4 (JavaScript)
|
|
3
3
|
Sem dependências de build. Carregue no <head> SEM defer para evitar
|
|
4
4
|
flash de tema errado (FOUC):
|
|
5
5
|
|
|
@@ -24,6 +24,12 @@
|
|
|
24
24
|
data-op-loading-form → no <form>: mostra a tela de carregamento
|
|
25
25
|
sozinho ao submeter (mensagem opcional em
|
|
26
26
|
data-op-loading-message="Enviando...")
|
|
27
|
+
data-op-reveal / data-op-reveal-toggle → mostrar/ocultar senha (envolva o
|
|
28
|
+
input com data-op-reveal e ponha o botão
|
|
29
|
+
com data-op-reveal-toggle dentro)
|
|
30
|
+
data-op-toast='[{"type":"success","message":"Oi"}]' → dispara toasts a
|
|
31
|
+
partir de flash messages do servidor,
|
|
32
|
+
sem precisar de <script> inline (CSP-safe)
|
|
27
33
|
|
|
28
34
|
API global: OptagoUI.toast(msg, tipo, ms) · OptagoUI.openModal(sel)
|
|
29
35
|
OptagoUI.closeModal(sel) · OptagoUI.setTheme('dark'|'light')
|
|
@@ -34,6 +40,11 @@
|
|
|
34
40
|
|
|
35
41
|
var OptagoUI = {};
|
|
36
42
|
|
|
43
|
+
// Fonte única da versão exibida no badge do header e no rodapé
|
|
44
|
+
// (elementos com o atributo data-op-version). Atualize só aqui.
|
|
45
|
+
var VERSION = '1.0.4';
|
|
46
|
+
OptagoUI.version = VERSION;
|
|
47
|
+
|
|
37
48
|
/* --------------------------------------------------------------------------
|
|
38
49
|
1. TEMA — aplicado imediatamente (antes do primeiro paint)
|
|
39
50
|
-------------------------------------------------------------------------- */
|
|
@@ -284,6 +295,14 @@
|
|
|
284
295
|
setTimeout(function () { ov.classList.remove('is-open'); }, 250);
|
|
285
296
|
};
|
|
286
297
|
|
|
298
|
+
// Ao voltar pelo botão "Voltar" do navegador, a página pode ser restaurada
|
|
299
|
+
// do bfcache exatamente como estava ao sair (overlay de carregamento ainda
|
|
300
|
+
// visível, já que o clique/submit anterior nunca chegou a escondê-lo).
|
|
301
|
+
// pageshow com event.persisted=true é o sinal de que veio do bfcache.
|
|
302
|
+
window.addEventListener('pageshow', function (e) {
|
|
303
|
+
if (e.persisted) OptagoUI.hideLoading();
|
|
304
|
+
});
|
|
305
|
+
|
|
287
306
|
/* --------------------------------------------------------------------------
|
|
288
307
|
6. HELPERS DO SHOWCASE — copiar HTML / ver código
|
|
289
308
|
-------------------------------------------------------------------------- */
|
|
@@ -422,6 +441,22 @@
|
|
|
422
441
|
// Ver código
|
|
423
442
|
t = e.target.closest('[data-op-code]');
|
|
424
443
|
if (t) { OptagoUI.toggleCode(t.getAttribute('data-op-code'), t); return; }
|
|
444
|
+
|
|
445
|
+
// Mostrar/ocultar senha: [data-op-reveal] envolvendo o input,
|
|
446
|
+
// com um <button data-op-reveal-toggle> dentro.
|
|
447
|
+
t = e.target.closest('[data-op-reveal-toggle]');
|
|
448
|
+
if (t) {
|
|
449
|
+
var wrap = t.closest('[data-op-reveal]');
|
|
450
|
+
var input = wrap ? wrap.querySelector('input') : null;
|
|
451
|
+
if (input) {
|
|
452
|
+
var show = input.type === 'password';
|
|
453
|
+
input.type = show ? 'text' : 'password';
|
|
454
|
+
var icon = t.querySelector('i');
|
|
455
|
+
if (icon) icon.className = show ? 'ph ph-eye-slash' : 'ph ph-eye';
|
|
456
|
+
t.setAttribute('aria-label', show ? 'Ocultar senha' : 'Mostrar senha');
|
|
457
|
+
}
|
|
458
|
+
return;
|
|
459
|
+
}
|
|
425
460
|
});
|
|
426
461
|
|
|
427
462
|
// Tooltip da sidebar colapsada: o overflow-y da nav cortaria um tooltip
|
|
@@ -458,9 +493,27 @@
|
|
|
458
493
|
8. INICIALIZAÇÃO no DOM pronto
|
|
459
494
|
-------------------------------------------------------------------------- */
|
|
460
495
|
function init() {
|
|
461
|
-
//
|
|
496
|
+
// Versão exibida no badge do header e no rodapé
|
|
497
|
+
document.querySelectorAll('[data-op-version]').forEach(function (el) {
|
|
498
|
+
el.textContent = 'v' + VERSION;
|
|
499
|
+
});
|
|
500
|
+
|
|
501
|
+
// Toasts vindos do servidor (flash messages), sem precisar de <script>
|
|
502
|
+
// inline — importante para funcionar com Content-Security-Policy estrito.
|
|
503
|
+
// Uso: <div hidden data-op-toast='[{"type":"success","message":"Oi!"}]'></div>
|
|
504
|
+
document.querySelectorAll('[data-op-toast]').forEach(function (el) {
|
|
505
|
+
try {
|
|
506
|
+
var items = JSON.parse(el.getAttribute('data-op-toast'));
|
|
507
|
+
(Array.isArray(items) ? items : [items]).forEach(function (t) {
|
|
508
|
+
OptagoUI.toast(t.message, t.type, t.duration);
|
|
509
|
+
});
|
|
510
|
+
} catch (e) { /* atributo malformado: ignora silenciosamente */ }
|
|
511
|
+
});
|
|
512
|
+
|
|
513
|
+
// Sidebar (desktop): fechada por padrão, mas respeita a escolha do
|
|
514
|
+
// usuário salva no localStorage assim que ele abrir/fechar uma vez.
|
|
462
515
|
var sb = getSidebar();
|
|
463
|
-
if (sb && window.innerWidth >= 1024 && localStorage.getItem(SIDEBAR_KEY)
|
|
516
|
+
if (sb && window.innerWidth >= 1024 && localStorage.getItem(SIDEBAR_KEY) !== '0') {
|
|
464
517
|
sb.classList.add('is-collapsed');
|
|
465
518
|
}
|
|
466
519
|
|