@dev-tcloud/tcloud-ui 6.29.0 → 6.29.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.
|
@@ -2,6 +2,37 @@
|
|
|
2
2
|
|
|
3
3
|
O componente `tcloud-ui-popover` exibe um painel flutuante simples, ancorado ao elemento de origem. Ele aceita HTML livre e componentes Angular dentro do conteúdo projetado.
|
|
4
4
|
|
|
5
|
+
## Instalação
|
|
6
|
+
|
|
7
|
+
Instale a biblioteca no projeto consumidor:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @dev-tcloud/tcloud-ui
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Para usar o componente em um componente standalone, importe `TCloudUiPopoverComponent`:
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
import { TCloudUiPopoverComponent } from '@dev-tcloud/tcloud-ui';
|
|
17
|
+
|
|
18
|
+
@Component({
|
|
19
|
+
standalone: true,
|
|
20
|
+
imports: [TCloudUiPopoverComponent]
|
|
21
|
+
})
|
|
22
|
+
export class ExampleComponent {}
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Em módulos Angular, importe o `TCloudUiModule` uma vez no módulo onde o popover será usado:
|
|
26
|
+
|
|
27
|
+
```ts
|
|
28
|
+
import { TCloudUiModule } from '@dev-tcloud/tcloud-ui';
|
|
29
|
+
|
|
30
|
+
@NgModule({
|
|
31
|
+
imports: [TCloudUiModule]
|
|
32
|
+
})
|
|
33
|
+
export class ExampleModule {}
|
|
34
|
+
```
|
|
35
|
+
|
|
5
36
|
## Uso básico
|
|
6
37
|
|
|
7
38
|
```html
|
|
@@ -20,7 +51,7 @@ O componente `tcloud-ui-popover` exibe um painel flutuante simples, ancorado ao
|
|
|
20
51
|
|------|------|-----------|---------|
|
|
21
52
|
| `position` | `'top' \| 'right' \| 'bottom' \| 'left'` | Define o lado em que o popover será aberto. | `'bottom'` |
|
|
22
53
|
| `align` | `'start' \| 'center' \| 'end'` | Define o alinhamento do painel em relação ao trigger. | `'start'` |
|
|
23
|
-
| `maxWidth` | `number \| string` | Define a largura
|
|
54
|
+
| `maxWidth` | `number \| string` | Define a largura do painel aberto. Números são tratados como pixels. | `320` |
|
|
24
55
|
| `disabled` | `boolean` | Desabilita a abertura do popover. | `false` |
|
|
25
56
|
| `showCloseIcon` | `boolean` | Exibe um botão `X` para fechar o popover. | `false` |
|
|
26
57
|
| `open` | `boolean` | Permite controlar a abertura via binding externo. | `false` |
|
|
@@ -39,6 +70,8 @@ O popover fecha ao clicar fora do componente ou ao pressionar `ESC`. Quando `sho
|
|
|
39
70
|
|
|
40
71
|
Use `position` para definir o lado de abertura e `align` para definir a borda de ancoragem. Por exemplo, com `position="bottom"` e `align="end"`, o painel abre abaixo do trigger e cresce para a esquerda, mantendo a borda direita alinhada ao botão.
|
|
41
72
|
|
|
73
|
+
Use `maxWidth` para definir o tamanho do painel aberto. O popover ocupa 100% do valor informado em `maxWidth` e respeita o limite da viewport para evitar estouro horizontal.
|
|
74
|
+
|
|
42
75
|
```html
|
|
43
76
|
<tcloud-ui-popover position="bottom" align="end" maxWidth="420px">
|
|
44
77
|
<button type="button" popover-trigger>Open</button>
|
|
@@ -49,6 +82,36 @@ Use `position` para definir o lado de abertura e `align` para definir a borda de
|
|
|
49
82
|
</tcloud-ui-popover>
|
|
50
83
|
```
|
|
51
84
|
|
|
85
|
+
## Largura customizada
|
|
86
|
+
|
|
87
|
+
Informe `maxWidth` como numero ou string para definir a largura do popover aberto. Quando o valor for numerico, ele sera convertido para pixels; quando for string, o valor sera aplicado diretamente como CSS.
|
|
88
|
+
|
|
89
|
+
```html
|
|
90
|
+
<tcloud-ui-popover position="right" align="start" [maxWidth]="560">
|
|
91
|
+
<button type="button" popover-trigger>Detalhes</button>
|
|
92
|
+
|
|
93
|
+
<div popover-content>
|
|
94
|
+
Este popover abre com 560px de largura, ocupando 100% do valor informado em maxWidth.
|
|
95
|
+
</div>
|
|
96
|
+
</tcloud-ui-popover>
|
|
97
|
+
|
|
98
|
+
<tcloud-ui-popover position="bottom" align="center" maxWidth="min(640px, 90vw)">
|
|
99
|
+
<button type="button" popover-trigger>Resumo</button>
|
|
100
|
+
|
|
101
|
+
<div popover-content>
|
|
102
|
+
Este popover usa uma largura CSS customizada e continua respeitando o limite da viewport.
|
|
103
|
+
</div>
|
|
104
|
+
</tcloud-ui-popover>
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
## Posicionamento e camada
|
|
108
|
+
|
|
109
|
+
O painel do popover e renderizado dentro do proprio componente. O container usa `position: relative` e o painel usa `position: absolute`, permitindo que as posicoes `top`, `right`, `bottom` e `left` sejam calculadas a partir do trigger.
|
|
110
|
+
|
|
111
|
+
O `z-index` padrao do painel e `4006`. Esse valor posiciona o popover acima de dropdowns comuns da biblioteca e abaixo de camadas globais como tooltips e menus de sistema.
|
|
112
|
+
|
|
52
113
|
## Dark mode
|
|
53
114
|
|
|
54
115
|
O componente usa tokens CSS `--c-*`, então acompanha o dark mode aplicado pela classe `.tc-dark` do projeto.
|
|
116
|
+
|
|
117
|
+
O background default do painel e `var(--c-neutral-50)`. No tema claro, esse token resolve para `#FFFFFF`; em `body.tc-dark`, resolve para `#0F1117`.
|
|
@@ -4057,11 +4057,11 @@ class TCloudUiPopoverComponent {
|
|
|
4057
4057
|
}
|
|
4058
4058
|
}
|
|
4059
4059
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiPopoverComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4060
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiPopoverComponent, isStandalone: true, selector: "tcloud-ui-popover", inputs: { position: "position", align: "align", maxWidth: "maxWidth", disabled: "disabled", showCloseIcon: "showCloseIcon", open: "open" }, outputs: { openChange: "openChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<div\n class=\"tcloud-ui-popover\"\n [class.is-open]=\"open\"\n [class.is-disabled]=\"disabled\"\n [ngClass]=\"['position-' + position, 'align-' + align]\">\n <div\n class=\"tcloud-ui-popover-trigger\"\n [attr.aria-expanded]=\"open\"\n [attr.aria-disabled]=\"disabled\"\n (click)=\"toToggle($event)\">\n <ng-content select=\"[popover-trigger]\"></ng-content>\n </div>\n\n <div\n *ngIf=\"open\"\n class=\"tcloud-ui-popover-panel\"\n role=\"dialog\"\n [style
|
|
4060
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TCloudUiPopoverComponent, isStandalone: true, selector: "tcloud-ui-popover", inputs: { position: "position", align: "align", maxWidth: "maxWidth", disabled: "disabled", showCloseIcon: "showCloseIcon", open: "open" }, outputs: { openChange: "openChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<div\n class=\"tcloud-ui-popover\"\n [class.is-open]=\"open\"\n [class.is-disabled]=\"disabled\"\n [ngClass]=\"['position-' + position, 'align-' + align]\">\n <div\n class=\"tcloud-ui-popover-trigger\"\n [attr.aria-expanded]=\"open\"\n [attr.aria-disabled]=\"disabled\"\n (click)=\"toToggle($event)\">\n <ng-content select=\"[popover-trigger]\"></ng-content>\n </div>\n\n <div\n *ngIf=\"open\"\n class=\"tcloud-ui-popover-panel\"\n role=\"dialog\"\n [style.--tcloud-ui-popover-width]=\"maxWidthValue\"\n (click)=\"$event.stopPropagation()\">\n <button\n *ngIf=\"showCloseIcon\"\n type=\"button\"\n class=\"tcloud-ui-popover-close\"\n aria-label=\"Fechar popover\"\n (click)=\"toClose($event)\">\n <i class=\"fas fa-times\"></i>\n </button>\n\n <div class=\"tcloud-ui-popover-content\">\n <ng-content select=\"[popover-content]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:inline-block}.tcloud-ui-popover{display:inline-block;position:relative;text-align:left}.tcloud-ui-popover-trigger{display:inline-flex}.tcloud-ui-popover.is-disabled .tcloud-ui-popover-trigger{cursor:not-allowed;opacity:.65}.tcloud-ui-popover-panel{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-200);border-radius:8px;box-shadow:2px 2px 10px #0003;color:var(--c-neutral-900);min-width:180px;max-width:calc(100vw - 24px);padding:12px;position:absolute;width:var(--tcloud-ui-popover-width, 320px);z-index:4006}.tcloud-ui-popover-content{max-width:100%}.tcloud-ui-popover-close{align-items:center;background-color:transparent;border:0;color:var(--c-neutral-600);cursor:pointer;display:inline-flex;font-size:14px;height:24px;justify-content:center;padding:0;position:absolute;right:6px;top:6px;transition:color .2s ease,background-color .2s ease;width:24px}.tcloud-ui-popover-close:hover,.tcloud-ui-popover-close:focus-visible{background-color:var(--c-neutral-100);border-radius:4px;color:var(--c-neutral-900);outline:none}.tcloud-ui-popover-close+.tcloud-ui-popover-content{padding-right:24px}.position-bottom .tcloud-ui-popover-panel{top:calc(100% + 8px)}.position-top .tcloud-ui-popover-panel{bottom:calc(100% + 8px)}.position-bottom.align-start .tcloud-ui-popover-panel,.position-top.align-start .tcloud-ui-popover-panel{left:0}.position-bottom.align-center .tcloud-ui-popover-panel,.position-top.align-center .tcloud-ui-popover-panel{left:50%;transform:translate(-50%)}.position-bottom.align-end .tcloud-ui-popover-panel,.position-top.align-end .tcloud-ui-popover-panel{right:0}.position-right .tcloud-ui-popover-panel{left:calc(100% + 8px)}.position-left .tcloud-ui-popover-panel{right:calc(100% + 8px)}.position-right.align-start .tcloud-ui-popover-panel,.position-left.align-start .tcloud-ui-popover-panel{top:0}.position-right.align-center .tcloud-ui-popover-panel,.position-left.align-center .tcloud-ui-popover-panel{top:50%;transform:translateY(-50%)}.position-right.align-end .tcloud-ui-popover-panel,.position-left.align-end .tcloud-ui-popover-panel{bottom:0}:host-context(.tc-dark) .tcloud-ui-popover-panel,:host-context(body.tc-dark) .tcloud-ui-popover-panel{box-shadow:2px 2px 10px #00000073}@media (prefers-reduced-motion: reduce){.tcloud-ui-popover-close{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
4061
4061
|
}
|
|
4062
4062
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TCloudUiPopoverComponent, decorators: [{
|
|
4063
4063
|
type: Component,
|
|
4064
|
-
args: [{ selector: 'tcloud-ui-popover', standalone: true, imports: [CommonModule], template: "<div\n class=\"tcloud-ui-popover\"\n [class.is-open]=\"open\"\n [class.is-disabled]=\"disabled\"\n [ngClass]=\"['position-' + position, 'align-' + align]\">\n <div\n class=\"tcloud-ui-popover-trigger\"\n [attr.aria-expanded]=\"open\"\n [attr.aria-disabled]=\"disabled\"\n (click)=\"toToggle($event)\">\n <ng-content select=\"[popover-trigger]\"></ng-content>\n </div>\n\n <div\n *ngIf=\"open\"\n class=\"tcloud-ui-popover-panel\"\n role=\"dialog\"\n [style
|
|
4064
|
+
args: [{ selector: 'tcloud-ui-popover', standalone: true, imports: [CommonModule], template: "<div\n class=\"tcloud-ui-popover\"\n [class.is-open]=\"open\"\n [class.is-disabled]=\"disabled\"\n [ngClass]=\"['position-' + position, 'align-' + align]\">\n <div\n class=\"tcloud-ui-popover-trigger\"\n [attr.aria-expanded]=\"open\"\n [attr.aria-disabled]=\"disabled\"\n (click)=\"toToggle($event)\">\n <ng-content select=\"[popover-trigger]\"></ng-content>\n </div>\n\n <div\n *ngIf=\"open\"\n class=\"tcloud-ui-popover-panel\"\n role=\"dialog\"\n [style.--tcloud-ui-popover-width]=\"maxWidthValue\"\n (click)=\"$event.stopPropagation()\">\n <button\n *ngIf=\"showCloseIcon\"\n type=\"button\"\n class=\"tcloud-ui-popover-close\"\n aria-label=\"Fechar popover\"\n (click)=\"toClose($event)\">\n <i class=\"fas fa-times\"></i>\n </button>\n\n <div class=\"tcloud-ui-popover-content\">\n <ng-content select=\"[popover-content]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [":host{display:inline-block}.tcloud-ui-popover{display:inline-block;position:relative;text-align:left}.tcloud-ui-popover-trigger{display:inline-flex}.tcloud-ui-popover.is-disabled .tcloud-ui-popover-trigger{cursor:not-allowed;opacity:.65}.tcloud-ui-popover-panel{background-color:var(--c-neutral-50);border:1px solid var(--c-neutral-200);border-radius:8px;box-shadow:2px 2px 10px #0003;color:var(--c-neutral-900);min-width:180px;max-width:calc(100vw - 24px);padding:12px;position:absolute;width:var(--tcloud-ui-popover-width, 320px);z-index:4006}.tcloud-ui-popover-content{max-width:100%}.tcloud-ui-popover-close{align-items:center;background-color:transparent;border:0;color:var(--c-neutral-600);cursor:pointer;display:inline-flex;font-size:14px;height:24px;justify-content:center;padding:0;position:absolute;right:6px;top:6px;transition:color .2s ease,background-color .2s ease;width:24px}.tcloud-ui-popover-close:hover,.tcloud-ui-popover-close:focus-visible{background-color:var(--c-neutral-100);border-radius:4px;color:var(--c-neutral-900);outline:none}.tcloud-ui-popover-close+.tcloud-ui-popover-content{padding-right:24px}.position-bottom .tcloud-ui-popover-panel{top:calc(100% + 8px)}.position-top .tcloud-ui-popover-panel{bottom:calc(100% + 8px)}.position-bottom.align-start .tcloud-ui-popover-panel,.position-top.align-start .tcloud-ui-popover-panel{left:0}.position-bottom.align-center .tcloud-ui-popover-panel,.position-top.align-center .tcloud-ui-popover-panel{left:50%;transform:translate(-50%)}.position-bottom.align-end .tcloud-ui-popover-panel,.position-top.align-end .tcloud-ui-popover-panel{right:0}.position-right .tcloud-ui-popover-panel{left:calc(100% + 8px)}.position-left .tcloud-ui-popover-panel{right:calc(100% + 8px)}.position-right.align-start .tcloud-ui-popover-panel,.position-left.align-start .tcloud-ui-popover-panel{top:0}.position-right.align-center .tcloud-ui-popover-panel,.position-left.align-center .tcloud-ui-popover-panel{top:50%;transform:translateY(-50%)}.position-right.align-end .tcloud-ui-popover-panel,.position-left.align-end .tcloud-ui-popover-panel{bottom:0}:host-context(.tc-dark) .tcloud-ui-popover-panel,:host-context(body.tc-dark) .tcloud-ui-popover-panel{box-shadow:2px 2px 10px #00000073}@media (prefers-reduced-motion: reduce){.tcloud-ui-popover-close{transition:none}}\n"] }]
|
|
4065
4065
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { position: [{
|
|
4066
4066
|
type: Input
|
|
4067
4067
|
}], align: [{
|