@wrrdev/fenix-ui 1.0.12 → 1.0.13
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/README.md +2 -2
- package/dist/components/autocomplete/autocomplete.d.ts +4 -1
- package/dist/components/autocomplete/autocomplete.d.ts.map +1 -1
- package/dist/components/autocomplete/autocomplete.js +5 -0
- package/dist/components/autocomplete/autocomplete.js.map +1 -1
- package/dist/components/tabs/tabs.d.ts +4 -0
- package/dist/components/tabs/tabs.d.ts.map +1 -1
- package/dist/components/tabs/tabs.js +6 -0
- package/dist/components/tabs/tabs.js.map +1 -1
- package/dist/fenix-ui.umd.min.js +8 -8
- package/dist/fenix-ui2.esm.js +11 -0
- package/dist/fenix-ui2.esm.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -18,7 +18,7 @@ import { FenixUI } from '@wrrdev/fenix-ui'; // API de tema/tokens (índice)
|
|
|
18
18
|
FenixUI.theme('dark');
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
> 📦 npm: [`@wrrdev/fenix-ui`](https://www.npmjs.com/package/@wrrdev/fenix-ui) — **v1.0.
|
|
21
|
+
> 📦 npm: [`@wrrdev/fenix-ui`](https://www.npmjs.com/package/@wrrdev/fenix-ui) — **v1.0.13**, acesso público.
|
|
22
22
|
> Subpaths disponíveis: `./theme`, `./tokens`, `./jsx`, `./vue`, `./button`, `./badge`, `./spinner`, `./select`, `./input`, `./switch`, `./textarea`, `./checkbox`, `./radio`, `./calendar`, `./datepicker`, `./multiselect`, `./table`, `./floatlabel`, `./dialog`, `./toast`, `./tooltip`, `./tabs`, `./progress`, `./skeleton`, `./alert`, `./drawer`, `./dropdown`, `./sidebar`, `./pagination`, `./autocomplete`, `./auto-import` e o curinga `./components/*`.
|
|
23
23
|
|
|
24
24
|
|
|
@@ -65,7 +65,7 @@ Carregue o bundle **UMD** único: ele registra todos os componentes e expõe os
|
|
|
65
65
|
<fx-toast></fx-toast>
|
|
66
66
|
|
|
67
67
|
<!--
|
|
68
|
-
🔗 Links diretos para CDN (versão 1.0.
|
|
68
|
+
🔗 Links diretos para CDN (versão 1.0.13):
|
|
69
69
|
• https://cdn.jsdelivr.net/npm/@wrrdev/fenix-ui@latest/dist/fenix-ui.umd.min.js
|
|
70
70
|
• https://unpkg.com/@wrrdev/fenix-ui@latest/dist/fenix-ui.umd.min.js
|
|
71
71
|
-->
|
|
@@ -13,7 +13,10 @@ export declare class FxAutocomplete extends FxElement {
|
|
|
13
13
|
set size(v: string);
|
|
14
14
|
get value(): string;
|
|
15
15
|
set value(v: string);
|
|
16
|
-
|
|
16
|
+
get source(): string[];
|
|
17
|
+
/** Setter necessário para o Vue (patchDOMProp seta `source` como
|
|
18
|
+
* propriedade, pois o getter existe no prototype). */
|
|
19
|
+
set source(value: string | string[]);
|
|
17
20
|
protected render(): void;
|
|
18
21
|
}
|
|
19
22
|
export declare function defineFxAutocomplete(): typeof FxAutocomplete;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;GAMG;AACH,qBAAa,cAAe,SAAQ,SAAS;IAC3C,OAAgB,MAAM,SA8DpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAAmC;IACrD,IAAI,KAAK,IAAI,MAAM,CAAkC;IACrD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAAoC;IAEvD,
|
|
1
|
+
{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;GAMG;AACH,qBAAa,cAAe,SAAQ,SAAS;IAC3C,OAAgB,MAAM,SA8DpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAAmC;IACrD,IAAI,KAAK,IAAI,MAAM,CAAkC;IACrD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAAoC;IAEvD,IAAI,MAAM,IAAI,MAAM,EAAE,CAOrB;IACD;2DACuD;IACvD,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,EAElC;cAEkB,MAAM,IAAI,IAAI;CAgDlC;AAED,wBAAgB,oBAAoB,IAAI,OAAO,cAAc,CAE5D"}
|
|
@@ -26,6 +26,11 @@ const _FxAutocomplete = class _FxAutocomplete extends FxElement {
|
|
|
26
26
|
return [];
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
|
+
/** Setter necessário para o Vue (patchDOMProp seta `source` como
|
|
30
|
+
* propriedade, pois o getter existe no prototype). */
|
|
31
|
+
set source(value) {
|
|
32
|
+
this.setAttribute("source", typeof value === "string" ? value : JSON.stringify(value));
|
|
33
|
+
}
|
|
29
34
|
render() {
|
|
30
35
|
const placeholder = this.getAttr("placeholder");
|
|
31
36
|
this.setTemplate(`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocomplete.js","sources":["../../../src/components/autocomplete/autocomplete.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-autocomplete> — Campo de texto com sugestões filtradas.\n *\n * Atributos: value, size, placeholder, source (JSON array de strings),\n * disabled, min-chars (padrão 1).\n * Evento: `select` (composed, detail: { value }).\n */\nexport class FxAutocomplete extends FxElement {\n static override styles = css`\n :host {\n position: relative;\n display: inline-block;\n font-family: var(--fx-font-family);\n font-size: var(--fx-font-size);\n }\n input {\n font-family: inherit;\n font-size: inherit;\n font-weight: var(--fx-font-weight);\n color: var(--fx-text-default);\n background-color: var(--fx-surface-background);\n border: 1px solid var(--fx-border-default);\n border-radius: var(--fx-radius-md);\n padding: var(--fx-space-md) var(--fx-space-lg);\n width: 260px;\n min-height: var(--fx-size-md);\n box-sizing: border-box;\n transition:\n border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),\n box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);\n }\n input::placeholder { color: var(--fx-text-muted); opacity: 1; }\n input:hover { border-color: var(--fx-border-hover); }\n input:focus-visible {\n outline: none;\n border-color: var(--fx-color-primary);\n box-shadow: var(--fx-effect-focus-ring, none);\n }\n :host([size='sm']) input { width: 220px; min-height: var(--fx-size-sm); padding: var(--fx-space-sm) var(--fx-space-md); }\n :host([size='lg']) input { width: 300px; min-height: var(--fx-size-lg); }\n .list {\n position: absolute;\n top: calc(100% + 4px);\n left: 0;\n right: 0;\n background: var(--fx-surface-background);\n border: 1px solid var(--fx-border-default);\n border-radius: var(--fx-radius-md);\n box-shadow: var(--fx-shadow-lg);\n z-index: var(--fx-z-dropdown, 1000);\n max-height: 220px;\n overflow-y: auto;\n display: none;\n }\n :host([open]) .list { display: block; }\n .opt {\n display: block;\n width: 100%;\n text-align: left;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: inherit;\n color: var(--fx-text-default);\n padding: var(--fx-space-sm) var(--fx-space-md);\n cursor: pointer;\n transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing);\n }\n .opt:hover { background: color-mix(in srgb, var(--fx-color-primary) 12%, var(--fx-surface-background)); color: var(--fx-color-primary); }\n .empty { color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) - 2px); padding: var(--fx-space-sm) var(--fx-space-md); }\n `;\n\n static override get observedAttributes(): string[] {\n return ['size', 'placeholder', 'source', 'disabled', 'min-chars'];\n }\n\n get size(): string {\n const s = this.getAttr('size', 'md');\n return s === 'sm' || s === 'lg' ? s : 'md';\n }\n set size(v: string) { this.setAttribute('size', v); }\n get value(): string { return this.getAttr('value'); }\n set value(v: string) { this.setAttribute('value', v); }\n\n
|
|
1
|
+
{"version":3,"file":"autocomplete.js","sources":["../../../src/components/autocomplete/autocomplete.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-autocomplete> — Campo de texto com sugestões filtradas.\n *\n * Atributos: value, size, placeholder, source (JSON array de strings),\n * disabled, min-chars (padrão 1).\n * Evento: `select` (composed, detail: { value }).\n */\nexport class FxAutocomplete extends FxElement {\n static override styles = css`\n :host {\n position: relative;\n display: inline-block;\n font-family: var(--fx-font-family);\n font-size: var(--fx-font-size);\n }\n input {\n font-family: inherit;\n font-size: inherit;\n font-weight: var(--fx-font-weight);\n color: var(--fx-text-default);\n background-color: var(--fx-surface-background);\n border: 1px solid var(--fx-border-default);\n border-radius: var(--fx-radius-md);\n padding: var(--fx-space-md) var(--fx-space-lg);\n width: 260px;\n min-height: var(--fx-size-md);\n box-sizing: border-box;\n transition:\n border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),\n box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);\n }\n input::placeholder { color: var(--fx-text-muted); opacity: 1; }\n input:hover { border-color: var(--fx-border-hover); }\n input:focus-visible {\n outline: none;\n border-color: var(--fx-color-primary);\n box-shadow: var(--fx-effect-focus-ring, none);\n }\n :host([size='sm']) input { width: 220px; min-height: var(--fx-size-sm); padding: var(--fx-space-sm) var(--fx-space-md); }\n :host([size='lg']) input { width: 300px; min-height: var(--fx-size-lg); }\n .list {\n position: absolute;\n top: calc(100% + 4px);\n left: 0;\n right: 0;\n background: var(--fx-surface-background);\n border: 1px solid var(--fx-border-default);\n border-radius: var(--fx-radius-md);\n box-shadow: var(--fx-shadow-lg);\n z-index: var(--fx-z-dropdown, 1000);\n max-height: 220px;\n overflow-y: auto;\n display: none;\n }\n :host([open]) .list { display: block; }\n .opt {\n display: block;\n width: 100%;\n text-align: left;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: inherit;\n color: var(--fx-text-default);\n padding: var(--fx-space-sm) var(--fx-space-md);\n cursor: pointer;\n transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing);\n }\n .opt:hover { background: color-mix(in srgb, var(--fx-color-primary) 12%, var(--fx-surface-background)); color: var(--fx-color-primary); }\n .empty { color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) - 2px); padding: var(--fx-space-sm) var(--fx-space-md); }\n `;\n\n static override get observedAttributes(): string[] {\n return ['size', 'placeholder', 'source', 'disabled', 'min-chars'];\n }\n\n get size(): string {\n const s = this.getAttr('size', 'md');\n return s === 'sm' || s === 'lg' ? s : 'md';\n }\n set size(v: string) { this.setAttribute('size', v); }\n get value(): string { return this.getAttr('value'); }\n set value(v: string) { this.setAttribute('value', v); }\n\n get source(): string[] {\n try {\n const raw = JSON.parse(this.getAttr('source', '[]'));\n return Array.isArray(raw) ? raw.map(String) : [];\n } catch {\n return [];\n }\n }\n /** Setter necessário para o Vue (patchDOMProp seta `source` como\n * propriedade, pois o getter existe no prototype). */\n set source(value: string | string[]) {\n this.setAttribute('source', typeof value === 'string' ? value : JSON.stringify(value));\n }\n\n protected override render(): void {\n const placeholder = this.getAttr('placeholder');\n\n this.setTemplate(`\n <input class=\"field\" part=\"input\" type=\"text\"\n ${placeholder ? `placeholder=\"${placeholder}\"` : ''} autocomplete=\"off\"/>\n <div class=\"list\" part=\"list\" role=\"listbox\"></div>\n `);\n\n const field = this.root.querySelector<HTMLInputElement>('.field');\n if (!field) return;\n field.value = this.value;\n if (this.hasAttr('disabled')) field.setAttribute('disabled', '');\n\n const list = this.root.querySelector<HTMLElement>('.list');\n const minChars = Number(this.getAttr('min-chars', '1')) || 1;\n\n const openList = (): void => {\n if (!list) return;\n const q = field.value.toLowerCase();\n const matches = this.source.filter((s) => s.toLowerCase().includes(q)).slice(0, 8);\n list.innerHTML = matches.length\n ? matches.map((m) => `<button type=\"button\" class=\"opt\" role=\"option\" data-v=\"${m}\">${m}</button>`).join('')\n : '<div class=\"empty\">Nenhum resultado</div>';\n list.querySelectorAll<HTMLButtonElement>('.opt').forEach((btn) => {\n btn.addEventListener('click', () => {\n field.value = btn.dataset.v ?? '';\n this.value = field.value;\n this.toggleAttr('open', false);\n this.dispatchEvent(new CustomEvent('select', {\n bubbles: true, composed: true, detail: { value: this.value },\n }));\n });\n });\n this.toggleAttr('open', true);\n };\n\n // Reabrir com foco sem re-render (evita perder digitação)\n field.addEventListener('input', () => {\n this.value = field.value;\n openList();\n });\n field.addEventListener('focus', () => { if (field.value.length >= minChars) openList(); });\n\n document.addEventListener('click', (e) => {\n if (!this.contains(e.target as Node)) this.toggleAttr('open', false);\n });\n }\n}\n\nexport function defineFxAutocomplete(): typeof FxAutocomplete {\n return defineElement('fx-autocomplete', FxAutocomplete);\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -28,6 +28,10 @@ export declare class FxTabPanel extends FxElement {
|
|
|
28
28
|
static styles: string;
|
|
29
29
|
static get observedAttributes(): string[];
|
|
30
30
|
get tab(): string;
|
|
31
|
+
/** Setter necessário: o Vue (patchDOMProp) seta `tab` como PROPRIEDADE
|
|
32
|
+
* (pois o getter existe no prototype) — sem ele o atributo nunca é
|
|
33
|
+
* aplicado e o painel nunca é exibido. */
|
|
34
|
+
set tab(value: string);
|
|
31
35
|
get visible(): boolean;
|
|
32
36
|
set visible(value: boolean);
|
|
33
37
|
protected render(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;;;;;;;GAYG;AACH,qBAAa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,SAmDpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,KAAK,IAAI,MAAM,CAAkC;IACrD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAAwC;cAE5C,MAAM,IAAI,IAAI;IAwCjC,2EAA2E;IAC3E,OAAO,KAAK,MAAM,GAWjB;CACF;AAED;;GAEG;AACH,qBAAa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,SAGpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,GAAG,IAAI,MAAM,CAAgC;
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;;;;;;;GAYG;AACH,qBAAa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,SAmDpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,KAAK,IAAI,MAAM,CAAkC;IACrD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAAwC;cAE5C,MAAM,IAAI,IAAI;IAwCjC,2EAA2E;IAC3E,OAAO,KAAK,MAAM,GAWjB;CACF;AAED;;GAEG;AACH,qBAAa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,SAGpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,GAAG,IAAI,MAAM,CAAgC;IACjD;;+CAE2C;IAC3C,IAAI,GAAG,CAAC,KAAK,EAAE,MAAM,EAAsC;IAE3D,IAAI,OAAO,IAAI,OAAO,CAAoC;IAC1D,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAAwC;cAE/C,MAAM,IAAI,IAAI;IAqBjC,OAAO,CAAC,YAAY,CAAS;CAC9B;AAED,wBAAgB,YAAY,IAAI,OAAO,MAAM,CAE5C;AACD,wBAAgB,gBAAgB,IAAI,OAAO,UAAU,CAEpD"}
|
|
@@ -119,6 +119,12 @@ const _FxTabPanel = class _FxTabPanel extends FxElement {
|
|
|
119
119
|
get tab() {
|
|
120
120
|
return this.getAttr("tab");
|
|
121
121
|
}
|
|
122
|
+
/** Setter necessário: o Vue (patchDOMProp) seta `tab` como PROPRIEDADE
|
|
123
|
+
* (pois o getter existe no prototype) — sem ele o atributo nunca é
|
|
124
|
+
* aplicado e o painel nunca é exibido. */
|
|
125
|
+
set tab(value) {
|
|
126
|
+
this.setAttribute("tab", value);
|
|
127
|
+
}
|
|
122
128
|
get visible() {
|
|
123
129
|
return !this.hasAttr("hidden");
|
|
124
130
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs/tabs.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-tabs> — Navegação por abas.\n *\n * Atributos: value (aba ativa, corresponde ao attr `tab` de cada fx-tab-panel).\n * Uso:\n * <fx-tabs value=\"a\">\n * <fx-tab tab=\"a\">Aba A</fx-tab>\n * <fx-tab tab=\"b\">Aba B</fx-tab>\n * </fx-tabs>\n * <fx-tab-panel tab=\"a\">…</fx-tab-panel>\n * <fx-tab-panel tab=\"b\">…</fx-tab-panel>\n * Evento: `change` (composed, detail: { value }).\n */\nexport class FxTabs extends FxElement {\n static override styles = css`\n :host {\n display: block;\n font-family: var(--fx-font-family);\n }\n .list {\n display: flex;\n gap: var(--fx-space-xs);\n border-bottom: 2px solid var(--fx-border-default);\n }\n .tab {\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--fx-font-size);\n color: var(--fx-text-muted);\n padding: var(--fx-space-md) var(--fx-space-lg);\n cursor: pointer;\n position: relative;\n transition: color var(--fx-motion-duration-fast) var(--fx-motion-easing);\n }\n .tab::after {\n content: '';\n position: absolute;\n left: 0; right: 0; bottom: -2px;\n height: 2px;\n background: transparent;\n transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing);\n }\n .tab:hover { color: var(--fx-text-default); }\n .tab[data-disabled] {\n color: var(--fx-border-default);\n cursor: not-allowed;\n opacity: 0.6;\n }\n .tab[data-disabled]:hover { color: var(--fx-border-default); }\n .tab[aria-selected='true'] {\n color: var(--fx-color-primary);\n font-weight: 600;\n }\n .tab[aria-selected='true']::after { background: var(--fx-color-primary); }\n .tab:focus-visible {\n outline: none;\n box-shadow: var(--fx-effect-focus-ring, none);\n border-radius: var(--fx-radius-sm);\n }\n /* Os <fx-tab> originais são renderizados como botões no shadow DOM.\n Sem isto, o <slot> os projetaria de novo como texto cru abaixo das abas. */\n ::slotted(fx-tab) {\n display: none !important;\n }\n `;\n\n static override get observedAttributes(): string[] {\n return ['value'];\n }\n\n get value(): string { return this.getAttr('value'); }\n set value(value: string) { this.setAttribute('value', value); }\n\n protected override render(): void {\n const tabs = Array.from(this.querySelectorAll<HTMLElement>('fx-tab'));\n const active = this.value || tabs[0]?.getAttribute('tab') || '';\n\n this.setTemplate(`\n <div class=\"list\" role=\"tablist\">\n ${tabs.map((t) => {\n const tabId = t.getAttribute('tab') ?? '';\n const disabled = t.hasAttribute('disabled');\n return `<button type=\"button\" class=\"tab\" role=\"tab\" part=\"tab\"\n data-tab=\"${tabId}\" aria-selected=\"${tabId === active}\"\n ${disabled ? 'aria-disabled=\"true\" data-disabled=\"true\"' : ''}>${t.textContent?.trim()}</button>`;\n }).join('')}\n </div>\n <slot></slot>\n `);\n\n // Sincroniza apenas os painéis DESTE conjunto de abas\n // (dentro do host ou irmãos seguintes — nunca global).\n // IMPORTANTE: manipula o atributo `hidden` DIRETAMENTE (nunca a\n // propriedade `.visible`), porque escrever a propriedade em um\n // elemento ainda não upgradeado cria uma own property que faz\n // shadowing dos accessors do prototype para sempre.\n this.panels.forEach((p) => {\n const show = p.getAttribute('tab') === active;\n if (show) p.removeAttribute('hidden');\n else p.setAttribute('hidden', '');\n });\n\n this.root.querySelectorAll<HTMLButtonElement>('.tab').forEach((btn) => {\n btn.addEventListener('click', () => {\n if (btn.hasAttribute('data-disabled')) return;\n this.value = btn.dataset.tab ?? '';\n this.dispatchEvent(\n new CustomEvent('change', { bubbles: true, composed: true, detail: { value: this.value } }),\n );\n });\n });\n }\n\n /** Painéis associados: descendentes do host ou irmãos seguintes no DOM. */\n private get panels(): FxTabPanel[] {\n const inside = Array.from(this.querySelectorAll<FxTabPanel>('fx-tab-panel'));\n if (inside.length) return inside;\n const out: FxTabPanel[] = [];\n let el = this.nextElementSibling;\n while (el && !el.matches('fx-tabs')) {\n if (el.matches('fx-tab-panel')) out.push(el as FxTabPanel);\n else out.push(...Array.from(el.querySelectorAll<FxTabPanel>(':scope > fx-tab-panel')));\n el = el.nextElementSibling;\n }\n return out;\n }\n}\n\n/**\n * <fx-tab-panel> — Painel de conteúdo associado a uma aba.\n */\nexport class FxTabPanel extends FxElement {\n static override styles = css`\n :host { display: block; padding: var(--fx-space-lg) 0; font-family: var(--fx-font-family); color: var(--fx-text-default); }\n :host([hidden]) { display: none; }\n `;\n\n static override get observedAttributes(): string[] {\n return ['tab'];\n }\n\n get tab(): string { return this.getAttr('tab'); }\n\n get visible(): boolean { return !this.hasAttr('hidden'); }\n set visible(value: boolean) { this.toggleAttr('hidden', !value); }\n\n protected override render(): void {\n this.setTemplate('<slot></slot>');\n if (!this._initialized) {\n // Estado inicial: visível apenas se for a aba ativa do owner.\n // (usa atributo direto — ver comentário em FxTabs.render)\n const owner =\n (this.closest<FxTabs>('fx-tabs')) ??\n (() => {\n let el = this.previousElementSibling;\n while (el) {\n if (el.matches('fx-tabs')) return el as FxTabs;\n el = el.previousElementSibling;\n }\n return null;\n })();\n const active = owner ? (owner.getAttribute('value') || '') : '';\n if (this.getAttribute('tab') !== active) this.setAttribute('hidden', '');\n this._initialized = true;\n }\n }\n\n private _initialized = false;\n}\n\nexport function defineFxTabs(): typeof FxTabs {\n return defineElement('fx-tabs', FxTabs);\n}\nexport function defineFxTabPanel(): typeof FxTabPanel {\n return defineElement('fx-tab-panel', FxTabPanel);\n}\n"],"names":[],"mappings":";;;AAiBO,MAAM,UAAN,MAAM,gBAAe,UAAU;AAAA,EAsDpC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,OAAO;AAAA,EACjB;AAAA,EAEA,IAAI,QAAgB;AAAE,WAAO,KAAK,QAAQ,OAAO;AAAA,EAAG;AAAA,EACpD,IAAI,MAAM,OAAe;AAAE,SAAK,aAAa,SAAS,KAAK;AAAA,EAAG;AAAA,EAE3C,SAAe;AAChC,UAAM,OAAO,MAAM,KAAK,KAAK,iBAA8B,QAAQ,CAAC;AACpE,UAAM,SAAS,KAAK,SAAS,KAAK,CAAC,GAAG,aAAa,KAAK,KAAK;AAE7D,SAAK,YAAY;AAAA;AAAA,UAEX,KAAK,IAAI,CAAC,MAAM;AAChB,YAAM,QAAQ,EAAE,aAAa,KAAK,KAAK;AACvC,YAAM,WAAW,EAAE,aAAa,UAAU;AAC1C,aAAO;AAAA,wBACO,KAAK,oBAAoB,UAAU,MAAM;AAAA,cACnD,WAAW,8CAA8C,EAAE,IAAI,EAAE,aAAa,MAAM;AAAA,IAC1F,CAAC,EAAE,KAAK,EAAE,CAAC;AAAA;AAAA;AAAA,KAGd;AAQD,SAAK,OAAO,QAAQ,CAAC,MAAM;AACzB,YAAM,OAAO,EAAE,aAAa,KAAK,MAAM;AACvC,UAAI,KAAM,GAAE,gBAAgB,QAAQ;AAAA,UAC/B,GAAE,aAAa,UAAU,EAAE;AAAA,IAClC,CAAC;AAED,SAAK,KAAK,iBAAoC,MAAM,EAAE,QAAQ,CAAC,QAAQ;AACrE,UAAI,iBAAiB,SAAS,MAAM;AAClC,YAAI,IAAI,aAAa,eAAe,EAAG;AACvC,aAAK,QAAQ,IAAI,QAAQ,OAAO;AAChC,aAAK;AAAA,UACH,IAAI,YAAY,UAAU,EAAE,SAAS,MAAM,UAAU,MAAM,QAAQ,EAAE,OAAO,KAAK,MAAA,GAAS;AAAA,QAAA;AAAA,MAE9F,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA;AAAA,EAGA,IAAY,SAAuB;AACjC,UAAM,SAAS,MAAM,KAAK,KAAK,iBAA6B,cAAc,CAAC;AAC3E,QAAI,OAAO,OAAQ,QAAO;AAC1B,UAAM,MAAoB,CAAA;AAC1B,QAAI,KAAK,KAAK;AACd,WAAO,MAAM,CAAC,GAAG,QAAQ,SAAS,GAAG;AACnC,UAAI,GAAG,QAAQ,cAAc,EAAG,KAAI,KAAK,EAAgB;AAAA,UACpD,KAAI,KAAK,GAAG,MAAM,KAAK,GAAG,iBAA6B,uBAAuB,CAAC,CAAC;AACrF,WAAK,GAAG;AAAA,IACV;AACA,WAAO;AAAA,EACT;AACF;AAjHE,QAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADpB,IAAM,SAAN;AAuHA,MAAM,cAAN,MAAM,oBAAmB,UAAU;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA;
|
|
1
|
+
{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs/tabs.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-tabs> — Navegação por abas.\n *\n * Atributos: value (aba ativa, corresponde ao attr `tab` de cada fx-tab-panel).\n * Uso:\n * <fx-tabs value=\"a\">\n * <fx-tab tab=\"a\">Aba A</fx-tab>\n * <fx-tab tab=\"b\">Aba B</fx-tab>\n * </fx-tabs>\n * <fx-tab-panel tab=\"a\">…</fx-tab-panel>\n * <fx-tab-panel tab=\"b\">…</fx-tab-panel>\n * Evento: `change` (composed, detail: { value }).\n */\nexport class FxTabs extends FxElement {\n static override styles = css`\n :host {\n display: block;\n font-family: var(--fx-font-family);\n }\n .list {\n display: flex;\n gap: var(--fx-space-xs);\n border-bottom: 2px solid var(--fx-border-default);\n }\n .tab {\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--fx-font-size);\n color: var(--fx-text-muted);\n padding: var(--fx-space-md) var(--fx-space-lg);\n cursor: pointer;\n position: relative;\n transition: color var(--fx-motion-duration-fast) var(--fx-motion-easing);\n }\n .tab::after {\n content: '';\n position: absolute;\n left: 0; right: 0; bottom: -2px;\n height: 2px;\n background: transparent;\n transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing);\n }\n .tab:hover { color: var(--fx-text-default); }\n .tab[data-disabled] {\n color: var(--fx-border-default);\n cursor: not-allowed;\n opacity: 0.6;\n }\n .tab[data-disabled]:hover { color: var(--fx-border-default); }\n .tab[aria-selected='true'] {\n color: var(--fx-color-primary);\n font-weight: 600;\n }\n .tab[aria-selected='true']::after { background: var(--fx-color-primary); }\n .tab:focus-visible {\n outline: none;\n box-shadow: var(--fx-effect-focus-ring, none);\n border-radius: var(--fx-radius-sm);\n }\n /* Os <fx-tab> originais são renderizados como botões no shadow DOM.\n Sem isto, o <slot> os projetaria de novo como texto cru abaixo das abas. */\n ::slotted(fx-tab) {\n display: none !important;\n }\n `;\n\n static override get observedAttributes(): string[] {\n return ['value'];\n }\n\n get value(): string { return this.getAttr('value'); }\n set value(value: string) { this.setAttribute('value', value); }\n\n protected override render(): void {\n const tabs = Array.from(this.querySelectorAll<HTMLElement>('fx-tab'));\n const active = this.value || tabs[0]?.getAttribute('tab') || '';\n\n this.setTemplate(`\n <div class=\"list\" role=\"tablist\">\n ${tabs.map((t) => {\n const tabId = t.getAttribute('tab') ?? '';\n const disabled = t.hasAttribute('disabled');\n return `<button type=\"button\" class=\"tab\" role=\"tab\" part=\"tab\"\n data-tab=\"${tabId}\" aria-selected=\"${tabId === active}\"\n ${disabled ? 'aria-disabled=\"true\" data-disabled=\"true\"' : ''}>${t.textContent?.trim()}</button>`;\n }).join('')}\n </div>\n <slot></slot>\n `);\n\n // Sincroniza apenas os painéis DESTE conjunto de abas\n // (dentro do host ou irmãos seguintes — nunca global).\n // IMPORTANTE: manipula o atributo `hidden` DIRETAMENTE (nunca a\n // propriedade `.visible`), porque escrever a propriedade em um\n // elemento ainda não upgradeado cria uma own property que faz\n // shadowing dos accessors do prototype para sempre.\n this.panels.forEach((p) => {\n const show = p.getAttribute('tab') === active;\n if (show) p.removeAttribute('hidden');\n else p.setAttribute('hidden', '');\n });\n\n this.root.querySelectorAll<HTMLButtonElement>('.tab').forEach((btn) => {\n btn.addEventListener('click', () => {\n if (btn.hasAttribute('data-disabled')) return;\n this.value = btn.dataset.tab ?? '';\n this.dispatchEvent(\n new CustomEvent('change', { bubbles: true, composed: true, detail: { value: this.value } }),\n );\n });\n });\n }\n\n /** Painéis associados: descendentes do host ou irmãos seguintes no DOM. */\n private get panels(): FxTabPanel[] {\n const inside = Array.from(this.querySelectorAll<FxTabPanel>('fx-tab-panel'));\n if (inside.length) return inside;\n const out: FxTabPanel[] = [];\n let el = this.nextElementSibling;\n while (el && !el.matches('fx-tabs')) {\n if (el.matches('fx-tab-panel')) out.push(el as FxTabPanel);\n else out.push(...Array.from(el.querySelectorAll<FxTabPanel>(':scope > fx-tab-panel')));\n el = el.nextElementSibling;\n }\n return out;\n }\n}\n\n/**\n * <fx-tab-panel> — Painel de conteúdo associado a uma aba.\n */\nexport class FxTabPanel extends FxElement {\n static override styles = css`\n :host { display: block; padding: var(--fx-space-lg) 0; font-family: var(--fx-font-family); color: var(--fx-text-default); }\n :host([hidden]) { display: none; }\n `;\n\n static override get observedAttributes(): string[] {\n return ['tab'];\n }\n\n get tab(): string { return this.getAttr('tab'); }\n /** Setter necessário: o Vue (patchDOMProp) seta `tab` como PROPRIEDADE\n * (pois o getter existe no prototype) — sem ele o atributo nunca é\n * aplicado e o painel nunca é exibido. */\n set tab(value: string) { this.setAttribute('tab', value); }\n\n get visible(): boolean { return !this.hasAttr('hidden'); }\n set visible(value: boolean) { this.toggleAttr('hidden', !value); }\n\n protected override render(): void {\n this.setTemplate('<slot></slot>');\n if (!this._initialized) {\n // Estado inicial: visível apenas se for a aba ativa do owner.\n // (usa atributo direto — ver comentário em FxTabs.render)\n const owner =\n (this.closest<FxTabs>('fx-tabs')) ??\n (() => {\n let el = this.previousElementSibling;\n while (el) {\n if (el.matches('fx-tabs')) return el as FxTabs;\n el = el.previousElementSibling;\n }\n return null;\n })();\n const active = owner ? (owner.getAttribute('value') || '') : '';\n if (this.getAttribute('tab') !== active) this.setAttribute('hidden', '');\n this._initialized = true;\n }\n }\n\n private _initialized = false;\n}\n\nexport function defineFxTabs(): typeof FxTabs {\n return defineElement('fx-tabs', FxTabs);\n}\nexport function defineFxTabPanel(): typeof FxTabPanel {\n return defineElement('fx-tab-panel', FxTabPanel);\n}\n"],"names":[],"mappings":"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"}
|
package/dist/fenix-ui.umd.min.js
CHANGED
|
@@ -130,7 +130,7 @@
|
|
|
130
130
|
:host([variant='danger']) .badge { background: var(--fx-color-danger); color: #fff; border-color: transparent; }
|
|
131
131
|
:host([variant='info']) .badge { background: var(--fx-color-info); color: #fff; border-color: transparent; }
|
|
132
132
|
:host(:not([round])) .badge { border-radius: var(--fx-radius-sm); }
|
|
133
|
-
`;let D=dt;function
|
|
133
|
+
`;let D=dt;function Jt(){return b("fx-badge",D)}Jt();const ht=class ht extends f{static get observedAttributes(){return["size"]}get size(){const t=this.getAttr("size","md");return t==="sm"||t==="lg"?t:"md"}set size(t){this.setAttribute("size",t)}render(){this.setTemplate('<span class="spinner" part="spinner" role="status" aria-label="Carregando"></span>')}};ht.styles=p`
|
|
134
134
|
:host {
|
|
135
135
|
display: inline-block;
|
|
136
136
|
vertical-align: middle;
|
|
@@ -151,7 +151,7 @@
|
|
|
151
151
|
@media (prefers-reduced-motion: reduce) {
|
|
152
152
|
.spinner { animation-duration: 2.5s; }
|
|
153
153
|
}
|
|
154
|
-
`;let M=ht;function
|
|
154
|
+
`;let M=ht;function Ut(){return b("fx-spinner",M)}Ut();const ut=class ut extends f{static get observedAttributes(){return["size","disabled","placeholder","searchable","clearable","error","success"]}get size(){const t=this.getAttr("size","md");return t==="sm"||t==="lg"?t:"md"}set size(t){this.setAttribute("size",t)}get value(){return this.getAttr("value")}set value(t){this.setAttribute("value",t)}get disabled(){return this.hasAttr("disabled")}set disabled(t){this.toggleAttr("disabled",!!t)}get options(){return[...this.querySelectorAll("option")].map(t=>{var e,r,s,i,a;return{value:(s=(r=t.getAttribute("value"))!=null?r:(e=t.textContent)==null?void 0:e.trim())!=null?s:"",label:(a=(i=t.textContent)==null?void 0:i.trim())!=null?a:""}})}connectedCallback(){super.connectedCallback(),this.observer=new MutationObserver(()=>this.render()),this.observer.observe(this,{childList:!0,subtree:!0,characterData:!0}),this.docListener=t=>{this.hasAttr("open")&&(t.composedPath().includes(this)||(this.removeAttribute("open"),this.render()))},document.addEventListener("click",this.docListener)}disconnectedCallback(){var t;super.disconnectedCallback(),(t=this.observer)==null||t.disconnect(),this.docListener&&document.removeEventListener("click",this.docListener)}select(t){this.value=t,this.removeAttribute("open"),this.render(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:t}}))}render(){var d,g,y,S,k,z,_;const t=this.hasAttr("open"),e=this.root.querySelector(".search"),r=(d=e==null?void 0:e.value)!=null?d:"",s=e!=null&&this.root.activeElement===e,i=s?e.selectionStart:null,a=this.options;let o=this.getAttr("value");if(!o){const x=this.querySelector("option[selected]");o=(S=(y=x==null?void 0:x.getAttribute("value"))!=null?y:(g=x==null?void 0:x.textContent)==null?void 0:g.trim())!=null?S:""}const n=(z=(k=a.find(x=>x.value===o))==null?void 0:k.label)!=null?z:"",c=this.getAttr("placeholder","Selecione…"),u=r?a.filter(x=>x.label.toLowerCase().includes(r.toLowerCase())):a;this.setTemplate(`
|
|
155
155
|
<span class="trigger" part="trigger" role="button" tabindex="${this.disabled?-1:0}" aria-haspopup="listbox" aria-expanded="${t}">
|
|
156
156
|
<span class="${n?"label":"placeholder"}">${n||c}</span>
|
|
157
157
|
<span class="actions">
|
|
@@ -308,7 +308,7 @@
|
|
|
308
308
|
}
|
|
309
309
|
.clear:hover { color: var(--fx-color-danger); }
|
|
310
310
|
.clear[hidden] { display: none; }
|
|
311
|
-
`;let q=ut;function
|
|
311
|
+
`;let q=ut;function Wt(){return b("fx-select",q)}Wt();const pt=class pt extends f{static get observedAttributes(){return["type","size","placeholder","disabled","readonly","min","max","step"]}get size(){const t=this.getAttr("size","md");return t==="sm"||t==="lg"?t:"md"}set size(t){this.setAttribute("size",t)}get value(){return this.getAttr("value")}set value(t){this.setAttribute("value",t)}get disabled(){return this.hasAttr("disabled")}set disabled(t){this.toggleAttr("disabled",!!t)}render(){const t=this.getAttr("type","text"),e=this.getAttr("placeholder"),r=this.hasAttr("readonly"),s=this.hasAttr("disabled"),i=this.getAttr("min"),a=this.getAttr("max"),o=this.getAttr("step");this.setTemplate(`
|
|
312
312
|
${this.hasAttr("clearable")?'<div class="wrap">':""}
|
|
313
313
|
<input class="field" part="input" type="${t}"
|
|
314
314
|
${e?`placeholder="${e}"`:""}
|
|
@@ -1645,10 +1645,10 @@
|
|
|
1645
1645
|
::slotted(fx-tab) {
|
|
1646
1646
|
display: none !important;
|
|
1647
1647
|
}
|
|
1648
|
-
`;let X=St;const zt=class zt extends f{constructor(){super(...arguments),this._initialized=!1}static get observedAttributes(){return["tab"]}get tab(){return this.getAttr("tab")}get visible(){return!this.hasAttr("hidden")}set visible(t){this.toggleAttr("hidden",!t)}render(){var t;if(this.setTemplate("<slot></slot>"),!this._initialized){const e=(t=this.closest("fx-tabs"))!=null?t:(()=>{let s=this.previousElementSibling;for(;s;){if(s.matches("fx-tabs"))return s;s=s.previousElementSibling}return null})(),r=e&&e.getAttribute("value")||"";this.getAttribute("tab")!==r&&this.setAttribute("hidden",""),this._initialized=!0}}};zt.styles=p`
|
|
1648
|
+
`;let X=St;const zt=class zt extends f{constructor(){super(...arguments),this._initialized=!1}static get observedAttributes(){return["tab"]}get tab(){return this.getAttr("tab")}set tab(t){this.setAttribute("tab",t)}get visible(){return!this.hasAttr("hidden")}set visible(t){this.toggleAttr("hidden",!t)}render(){var t;if(this.setTemplate("<slot></slot>"),!this._initialized){const e=(t=this.closest("fx-tabs"))!=null?t:(()=>{let s=this.previousElementSibling;for(;s;){if(s.matches("fx-tabs"))return s;s=s.previousElementSibling}return null})(),r=e&&e.getAttribute("value")||"";this.getAttribute("tab")!==r&&this.setAttribute("hidden",""),this._initialized=!0}}};zt.styles=p`
|
|
1649
1649
|
:host { display: block; padding: var(--fx-space-lg) 0; font-family: var(--fx-font-family); color: var(--fx-text-default); }
|
|
1650
1650
|
:host([hidden]) { display: none; }
|
|
1651
|
-
`;let
|
|
1651
|
+
`;let J=zt;function ge(){return b("fx-tabs",X)}function be(){return b("fx-tab-panel",J)}ge(),be();const $t=class $t extends f{constructor(){super(...arguments),this._done=!1}static get observedAttributes(){return["value","indeterminate","variant","label","hide-label","size"]}get value(){return Number(this.getAttr("value","0"))||0}set value(t){this.setAttribute("value",String(Math.min(100,Math.max(0,t))))}render(){const t=Math.min(100,Math.max(0,this.value)),e=this.hasAttr("indeterminate"),r=this.getAttr("label"),s=!e&&!this.hasAttr("hide-label");this.setTemplate(`
|
|
1652
1652
|
${r?`<div class="caption" part="caption">${r}</div>`:""}
|
|
1653
1653
|
<div class="row">
|
|
1654
1654
|
<div class="track" part="track" role="progressbar"
|
|
@@ -1707,7 +1707,7 @@
|
|
|
1707
1707
|
color: var(--fx-text-muted);
|
|
1708
1708
|
margin-bottom: var(--fx-space-xs);
|
|
1709
1709
|
}
|
|
1710
|
-
`;let
|
|
1710
|
+
`;let U=$t;function xe(){return b("fx-progress",U)}xe();const Et=class Et extends f{static get observedAttributes(){return["variant","width","height","lines"]}render(){const t=this.getAttr("variant","text"),e=this.getAttr("width"),r=this.getAttr("height"),s=`${e?`width:${e};`:""}${r?`height:${r};`:""}`;if(t==="circle"){const a=r||e||"40px",o=s.includes("height")?s:`width:${a};height:${a};`;this.setTemplate(`<div class="bone circle" part="bone" style="${o}"></div>`);return}if(t==="rect"){const a=s||"width:100%;height:80px;";this.setTemplate(`<div class="bone" part="bone" style="${a}"></div>`);return}const i=Number(this.getAttr("lines","3"))||3;this.setTemplate(`
|
|
1711
1711
|
${Array.from({length:i},()=>'<div class="bone text"></div>').join("")}
|
|
1712
1712
|
`)}};Et.styles=p`
|
|
1713
1713
|
:host { display: block; width: 100%; min-width: 80px; font-family: var(--fx-font-family); }
|
|
@@ -1727,7 +1727,7 @@
|
|
|
1727
1727
|
.text { height: 12px; width: 100%; margin-bottom: var(--fx-space-sm); }
|
|
1728
1728
|
.text:last-of-type { width: 60%; margin-bottom: 0; }
|
|
1729
1729
|
.circle { border-radius: var(--fx-radius-full); }
|
|
1730
|
-
`;let
|
|
1730
|
+
`;let W=Et;function ve(){return b("fx-skeleton",W)}ve();const Ct=class Ct extends f{static get observedAttributes(){return["variant","title","dismissible"]}render(){var s,i;const t=this.getAttr("variant","info"),e=this.getAttr("title"),r={info:"ℹ",success:"✓",warning:"⚠",danger:"✕"};this.setTemplate(`
|
|
1731
1731
|
<div class="alert" part="alert" role="alert">
|
|
1732
1732
|
<span class="icon">${(s=r[t])!=null?s:"ℹ"}</span>
|
|
1733
1733
|
<div class="content">
|
|
@@ -2003,7 +2003,7 @@
|
|
|
2003
2003
|
}
|
|
2004
2004
|
.info { color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) - 2px); }
|
|
2005
2005
|
select.nav { cursor: pointer; }
|
|
2006
|
-
`;let et=Mt;function Ae(){return b("fx-pagination",et)}Ae();const qt=class qt extends f{static get observedAttributes(){return["size","placeholder","source","disabled","min-chars"]}get size(){const t=this.getAttr("size","md");return t==="sm"||t==="lg"?t:"md"}set size(t){this.setAttribute("size",t)}get value(){return this.getAttr("value")}set value(t){this.setAttribute("value",t)}get source(){try{const t=JSON.parse(this.getAttr("source","[]"));return Array.isArray(t)?t.map(String):[]}catch(t){return[]}}render(){const t=this.getAttr("placeholder");this.setTemplate(`
|
|
2006
|
+
`;let et=Mt;function Ae(){return b("fx-pagination",et)}Ae();const qt=class qt extends f{static get observedAttributes(){return["size","placeholder","source","disabled","min-chars"]}get size(){const t=this.getAttr("size","md");return t==="sm"||t==="lg"?t:"md"}set size(t){this.setAttribute("size",t)}get value(){return this.getAttr("value")}set value(t){this.setAttribute("value",t)}get source(){try{const t=JSON.parse(this.getAttr("source","[]"));return Array.isArray(t)?t.map(String):[]}catch(t){return[]}}set source(t){this.setAttribute("source",typeof t=="string"?t:JSON.stringify(t))}render(){const t=this.getAttr("placeholder");this.setTemplate(`
|
|
2007
2007
|
<input class="field" part="input" type="text"
|
|
2008
2008
|
${t?`placeholder="${t}"`:""} autocomplete="off"/>
|
|
2009
2009
|
<div class="list" part="list" role="listbox"></div>
|
package/dist/fenix-ui2.esm.js
CHANGED
|
@@ -4033,6 +4033,12 @@ const _FxTabPanel = class _FxTabPanel extends FxElement {
|
|
|
4033
4033
|
get tab() {
|
|
4034
4034
|
return this.getAttr("tab");
|
|
4035
4035
|
}
|
|
4036
|
+
/** Setter necessário: o Vue (patchDOMProp) seta `tab` como PROPRIEDADE
|
|
4037
|
+
* (pois o getter existe no prototype) — sem ele o atributo nunca é
|
|
4038
|
+
* aplicado e o painel nunca é exibido. */
|
|
4039
|
+
set tab(value) {
|
|
4040
|
+
this.setAttribute("tab", value);
|
|
4041
|
+
}
|
|
4036
4042
|
get visible() {
|
|
4037
4043
|
return !this.hasAttr("hidden");
|
|
4038
4044
|
}
|
|
@@ -4735,6 +4741,11 @@ const _FxAutocomplete = class _FxAutocomplete extends FxElement {
|
|
|
4735
4741
|
return [];
|
|
4736
4742
|
}
|
|
4737
4743
|
}
|
|
4744
|
+
/** Setter necessário para o Vue (patchDOMProp seta `source` como
|
|
4745
|
+
* propriedade, pois o getter existe no prototype). */
|
|
4746
|
+
set source(value) {
|
|
4747
|
+
this.setAttribute("source", typeof value === "string" ? value : JSON.stringify(value));
|
|
4748
|
+
}
|
|
4738
4749
|
render() {
|
|
4739
4750
|
const placeholder = this.getAttr("placeholder");
|
|
4740
4751
|
this.setTemplate(`
|