ui-optago 1.0.2 → 1.0.3
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 +25 -1
- 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.3",
|
|
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.3 (JavaScript)
|
|
3
3
|
Sem dependências de build. Carregue no <head> SEM defer para evitar
|
|
4
4
|
flash de tema errado (FOUC):
|
|
5
5
|
|
|
@@ -284,6 +284,14 @@
|
|
|
284
284
|
setTimeout(function () { ov.classList.remove('is-open'); }, 250);
|
|
285
285
|
};
|
|
286
286
|
|
|
287
|
+
// Ao voltar pelo botão "Voltar" do navegador, a página pode ser restaurada
|
|
288
|
+
// do bfcache exatamente como estava ao sair (overlay de carregamento ainda
|
|
289
|
+
// visível, já que o clique/submit anterior nunca chegou a escondê-lo).
|
|
290
|
+
// pageshow com event.persisted=true é o sinal de que veio do bfcache.
|
|
291
|
+
window.addEventListener('pageshow', function (e) {
|
|
292
|
+
if (e.persisted) OptagoUI.hideLoading();
|
|
293
|
+
});
|
|
294
|
+
|
|
287
295
|
/* --------------------------------------------------------------------------
|
|
288
296
|
6. HELPERS DO SHOWCASE — copiar HTML / ver código
|
|
289
297
|
-------------------------------------------------------------------------- */
|
|
@@ -422,6 +430,22 @@
|
|
|
422
430
|
// Ver código
|
|
423
431
|
t = e.target.closest('[data-op-code]');
|
|
424
432
|
if (t) { OptagoUI.toggleCode(t.getAttribute('data-op-code'), t); return; }
|
|
433
|
+
|
|
434
|
+
// Mostrar/ocultar senha: [data-op-reveal] envolvendo o input,
|
|
435
|
+
// com um <button data-op-reveal-toggle> dentro.
|
|
436
|
+
t = e.target.closest('[data-op-reveal-toggle]');
|
|
437
|
+
if (t) {
|
|
438
|
+
var wrap = t.closest('[data-op-reveal]');
|
|
439
|
+
var input = wrap ? wrap.querySelector('input') : null;
|
|
440
|
+
if (input) {
|
|
441
|
+
var show = input.type === 'password';
|
|
442
|
+
input.type = show ? 'text' : 'password';
|
|
443
|
+
var icon = t.querySelector('i');
|
|
444
|
+
if (icon) icon.className = show ? 'ph ph-eye-slash' : 'ph ph-eye';
|
|
445
|
+
t.setAttribute('aria-label', show ? 'Ocultar senha' : 'Mostrar senha');
|
|
446
|
+
}
|
|
447
|
+
return;
|
|
448
|
+
}
|
|
425
449
|
});
|
|
426
450
|
|
|
427
451
|
// Tooltip da sidebar colapsada: o overflow-y da nav cortaria um tooltip
|