@wrrdev/fenix-ui 1.0.10 → 1.0.11
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/alert/alert.d.ts.map +1 -1
- package/dist/components/alert/alert.js +1 -0
- package/dist/components/alert/alert.js.map +1 -1
- package/dist/fenix-ui.umd.min.js +1 -0
- package/dist/fenix-ui2.esm.js +1 -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.11**, 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.11):
|
|
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
|
-->
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;GAKG;AACH,qBAAa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,
|
|
1
|
+
{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;GAKG;AACH,qBAAa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,SAiCpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;cAEkB,MAAM,IAAI,IAAI;CAuBlC;AAED,wBAAgB,aAAa,IAAI,OAAO,OAAO,CAE9C"}
|
|
@@ -37,6 +37,7 @@ _FxAlert.styles = css`
|
|
|
37
37
|
--_color: var(--fx-color-primary);
|
|
38
38
|
--_bg: color-mix(in srgb, var(--fx-color-primary) 10%, var(--fx-surface-background));
|
|
39
39
|
}
|
|
40
|
+
:host([variant='info']) { --_color: var(--fx-color-info); --_bg: color-mix(in srgb, var(--fx-color-info) 10%, var(--fx-surface-background)); }
|
|
40
41
|
:host([variant='success']) { --_color: var(--fx-color-success); --_bg: color-mix(in srgb, var(--fx-color-success) 10%, var(--fx-surface-background)); }
|
|
41
42
|
:host([variant='warning']) { --_color: var(--fx-color-warning); --_bg: color-mix(in srgb, var(--fx-color-warning) 12%, var(--fx-surface-background)); }
|
|
42
43
|
:host([variant='danger']) { --_color: var(--fx-color-danger); --_bg: color-mix(in srgb, var(--fx-color-danger) 10%, var(--fx-surface-background)); }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.js","sources":["../../../src/components/alert/alert.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-alert> — Aviso inline com variantes semânticas.\n *\n * Atributos: variant (info|success|warning|danger, padrão info), title, dismissible.\n * Slot padrão: conteúdo da mensagem. Evento `dismiss`.\n */\nexport class FxAlert extends FxElement {\n static override styles = css`\n :host {\n display: block;\n font-family: var(--fx-font-family);\n --_color: var(--fx-color-primary);\n --_bg: color-mix(in srgb, var(--fx-color-primary) 10%, var(--fx-surface-background));\n }\n :host([variant='success']) { --_color: var(--fx-color-success); --_bg: color-mix(in srgb, var(--fx-color-success) 10%, var(--fx-surface-background)); }\n :host([variant='warning']) { --_color: var(--fx-color-warning); --_bg: color-mix(in srgb, var(--fx-color-warning) 12%, var(--fx-surface-background)); }\n :host([variant='danger']) { --_color: var(--fx-color-danger); --_bg: color-mix(in srgb, var(--fx-color-danger) 10%, var(--fx-surface-background)); }\n .alert {\n display: flex;\n align-items: flex-start;\n gap: var(--fx-space-md);\n background: var(--_bg);\n border: 1px solid color-mix(in srgb, var(--_color) 30%, transparent);\n border-radius: var(--fx-radius-md);\n padding: var(--fx-space-md) var(--fx-space-lg);\n font-size: var(--fx-font-size);\n color: var(--fx-text-default);\n }\n :host([hidden]) { display: none; }\n .icon { color: var(--_color); font-weight: bold; line-height: 1.4; }\n .content { flex: 1; }\n .title { font-weight: 600; }\n .body { margin-top: 2px; }\n .close {\n border: none; background: transparent; cursor: pointer;\n color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) + 2px);\n line-height: 1; padding: 0; border-radius: var(--fx-radius-full);\n }\n .close:hover { color: var(--_color); }\n `;\n\n static override get observedAttributes(): string[] {\n return ['variant', 'title', 'dismissible'];\n }\n\n protected override render(): void {\n const variant = this.getAttr('variant', 'info');\n const title = this.getAttr('title');\n const icons: Record<string, string> = {\n info: 'ℹ', success: '✓', warning: '⚠', danger: '✕',\n };\n\n this.setTemplate(`\n <div class=\"alert\" part=\"alert\" role=\"alert\">\n <span class=\"icon\">${icons[variant] ?? 'ℹ'}</span>\n <div class=\"content\">\n ${title ? `<div class=\"title\">${title}</div>` : ''}\n <div class=\"body\"><slot></slot></div>\n </div>\n ${this.hasAttr('dismissible') ? '<button type=\"button\" class=\"close\" aria-label=\"Fechar\">×</button>' : ''}\n </div>\n `);\n\n this.root.querySelector('.close')?.addEventListener('click', () => {\n this.hidden = true;\n this.dispatchEvent(new CustomEvent('dismiss', { bubbles: true, composed: true }));\n });\n }\n}\n\nexport function defineFxAlert(): typeof FxAlert {\n return defineElement('fx-alert', FxAlert);\n}\n"],"names":[],"mappings":";;;AAUO,MAAM,WAAN,MAAM,iBAAgB,UAAU;AAAA,
|
|
1
|
+
{"version":3,"file":"alert.js","sources":["../../../src/components/alert/alert.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-alert> — Aviso inline com variantes semânticas.\n *\n * Atributos: variant (info|success|warning|danger, padrão info), title, dismissible.\n * Slot padrão: conteúdo da mensagem. Evento `dismiss`.\n */\nexport class FxAlert extends FxElement {\n static override styles = css`\n :host {\n display: block;\n font-family: var(--fx-font-family);\n --_color: var(--fx-color-primary);\n --_bg: color-mix(in srgb, var(--fx-color-primary) 10%, var(--fx-surface-background));\n }\n :host([variant='info']) { --_color: var(--fx-color-info); --_bg: color-mix(in srgb, var(--fx-color-info) 10%, var(--fx-surface-background)); }\n :host([variant='success']) { --_color: var(--fx-color-success); --_bg: color-mix(in srgb, var(--fx-color-success) 10%, var(--fx-surface-background)); }\n :host([variant='warning']) { --_color: var(--fx-color-warning); --_bg: color-mix(in srgb, var(--fx-color-warning) 12%, var(--fx-surface-background)); }\n :host([variant='danger']) { --_color: var(--fx-color-danger); --_bg: color-mix(in srgb, var(--fx-color-danger) 10%, var(--fx-surface-background)); }\n .alert {\n display: flex;\n align-items: flex-start;\n gap: var(--fx-space-md);\n background: var(--_bg);\n border: 1px solid color-mix(in srgb, var(--_color) 30%, transparent);\n border-radius: var(--fx-radius-md);\n padding: var(--fx-space-md) var(--fx-space-lg);\n font-size: var(--fx-font-size);\n color: var(--fx-text-default);\n }\n :host([hidden]) { display: none; }\n .icon { color: var(--_color); font-weight: bold; line-height: 1.4; }\n .content { flex: 1; }\n .title { font-weight: 600; }\n .body { margin-top: 2px; }\n .close {\n border: none; background: transparent; cursor: pointer;\n color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) + 2px);\n line-height: 1; padding: 0; border-radius: var(--fx-radius-full);\n }\n .close:hover { color: var(--_color); }\n `;\n\n static override get observedAttributes(): string[] {\n return ['variant', 'title', 'dismissible'];\n }\n\n protected override render(): void {\n const variant = this.getAttr('variant', 'info');\n const title = this.getAttr('title');\n const icons: Record<string, string> = {\n info: 'ℹ', success: '✓', warning: '⚠', danger: '✕',\n };\n\n this.setTemplate(`\n <div class=\"alert\" part=\"alert\" role=\"alert\">\n <span class=\"icon\">${icons[variant] ?? 'ℹ'}</span>\n <div class=\"content\">\n ${title ? `<div class=\"title\">${title}</div>` : ''}\n <div class=\"body\"><slot></slot></div>\n </div>\n ${this.hasAttr('dismissible') ? '<button type=\"button\" class=\"close\" aria-label=\"Fechar\">×</button>' : ''}\n </div>\n `);\n\n this.root.querySelector('.close')?.addEventListener('click', () => {\n this.hidden = true;\n this.dispatchEvent(new CustomEvent('dismiss', { bubbles: true, composed: true }));\n });\n }\n}\n\nexport function defineFxAlert(): typeof FxAlert {\n return defineElement('fx-alert', FxAlert);\n}\n"],"names":[],"mappings":";;;AAUO,MAAM,WAAN,MAAM,iBAAgB,UAAU;AAAA,EAoCrC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,WAAW,SAAS,aAAa;AAAA,EAC3C;AAAA,EAEmB,SAAe;AAChC,UAAM,UAAU,KAAK,QAAQ,WAAW,MAAM;AAC9C,UAAM,QAAQ,KAAK,QAAQ,OAAO;AAClC,UAAM,QAAgC;AAAA,MACpC,MAAM;AAAA,MAAK,SAAS;AAAA,MAAK,SAAS;AAAA,MAAK,QAAQ;AAAA,IAAA;AAGjD,SAAK,YAAY;AAAA;AAAA,6BAEQ,MAAM,OAAO,KAAK,GAAG;AAAA;AAAA,YAEtC,QAAQ,sBAAsB,KAAK,WAAW,EAAE;AAAA;AAAA;AAAA,UAGlD,KAAK,QAAQ,aAAa,IAAI,uEAAuE,EAAE;AAAA;AAAA,KAE5G;AAED,SAAK,KAAK,cAAc,QAAQ,GAAG,iBAAiB,SAAS,MAAM;AACjE,WAAK,SAAS;AACd,WAAK,cAAc,IAAI,YAAY,WAAW,EAAE,SAAS,MAAM,UAAU,KAAA,CAAM,CAAC;AAAA,IAClF,CAAC;AAAA,EACH;AACF;AA9DE,SAAgB,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;AADpB,IAAM,UAAN;AAiEA,SAAS,gBAAgC;AAC9C,SAAO,cAAc,YAAY,OAAO;AAC1C;"}
|
package/dist/fenix-ui.umd.min.js
CHANGED
|
@@ -1743,6 +1743,7 @@
|
|
|
1743
1743
|
--_color: var(--fx-color-primary);
|
|
1744
1744
|
--_bg: color-mix(in srgb, var(--fx-color-primary) 10%, var(--fx-surface-background));
|
|
1745
1745
|
}
|
|
1746
|
+
:host([variant='info']) { --_color: var(--fx-color-info); --_bg: color-mix(in srgb, var(--fx-color-info) 10%, var(--fx-surface-background)); }
|
|
1746
1747
|
:host([variant='success']) { --_color: var(--fx-color-success); --_bg: color-mix(in srgb, var(--fx-color-success) 10%, var(--fx-surface-background)); }
|
|
1747
1748
|
:host([variant='warning']) { --_color: var(--fx-color-warning); --_bg: color-mix(in srgb, var(--fx-color-warning) 12%, var(--fx-surface-background)); }
|
|
1748
1749
|
:host([variant='danger']) { --_color: var(--fx-color-danger); --_bg: color-mix(in srgb, var(--fx-color-danger) 10%, var(--fx-surface-background)); }
|
package/dist/fenix-ui2.esm.js
CHANGED
|
@@ -4247,6 +4247,7 @@ _FxAlert.styles = css`
|
|
|
4247
4247
|
--_color: var(--fx-color-primary);
|
|
4248
4248
|
--_bg: color-mix(in srgb, var(--fx-color-primary) 10%, var(--fx-surface-background));
|
|
4249
4249
|
}
|
|
4250
|
+
:host([variant='info']) { --_color: var(--fx-color-info); --_bg: color-mix(in srgb, var(--fx-color-info) 10%, var(--fx-surface-background)); }
|
|
4250
4251
|
:host([variant='success']) { --_color: var(--fx-color-success); --_bg: color-mix(in srgb, var(--fx-color-success) 10%, var(--fx-surface-background)); }
|
|
4251
4252
|
:host([variant='warning']) { --_color: var(--fx-color-warning); --_bg: color-mix(in srgb, var(--fx-color-warning) 12%, var(--fx-surface-background)); }
|
|
4252
4253
|
:host([variant='danger']) { --_color: var(--fx-color-danger); --_bg: color-mix(in srgb, var(--fx-color-danger) 10%, var(--fx-surface-background)); }
|