@wrrdev/fenix-ui 1.2.0 → 1.3.0

package/dist/fenix-ui4.esm.js

@@ -1048,7 +1048,7 @@ const _FxSelect = class _FxSelect extends FxFormElement {
         </span>
       </span>
       <div class="panel" part="panel" role="listbox">
-        ${this.hasAttr("searchable") ? `<input class="search" part="search" type="text" placeholder="${esc(this.getAttr("search-placeholder", "Pesquisar…"))}">` : ""}
+        ${this.hasAttr("searchable") ? `<input class="search" part="search" type="text" autocomplete="off" placeholder="${esc(this.getAttr("search-placeholder", "Pesquisar…"))}">` : ""}
         ${filtered.map((o) => `
           <button type="button" class="opt" role="option" data-value="${esc(o.value)}"
             aria-selected="${o.value === current}">${esc(o.label)}</button>`).join("")}
@@ -1356,6 +1356,12 @@ const _FxInput = class _FxInput extends FxFormElement {
       "step",
       "clearable",
       "full",
+      // `autocomplete` é observado porque ele vive no campo INTERNO (autofill
+      // do navegador): mudar o atributo no host precisa refletir no <input>.
+      // `name`/`id` idem — os dois descem para o campo interno.
+      "autocomplete",
+      "name",
+      "id",
       "icon",
       "icon-pos",
       "error",
@@ -1419,6 +1425,9 @@ const _FxInput = class _FxInput extends FxFormElement {
     const min = this.getAttr("min");
     const max = this.getAttr("max");
     const step = this.getAttr("step");
+    const autocomplete = this.getAttr("autocomplete", "off");
+    const name = this.getAttr("name");
+    const id = this.getAttr("id");
     const icon = this.getAttr("icon");
     const iconPos = this.getAttr("icon-pos", "left") === "right" ? "right" : "left";
     const slottedIcon = this.querySelector('[slot="icon"]');
@@ -1429,6 +1438,8 @@ const _FxInput = class _FxInput extends FxFormElement {
       ${useIconBox ? `<div class="field-icon icon-${iconPos}">` : ""}
       ${useIconBox && iconPos === "left" ? iconContent : ""}
       <input class="field" part="input" type="${esc(type)}"
+        ${name ? `name="${esc(name)}"` : ""} ${id ? `id="${esc(id)}"` : ""}
+        autocomplete="${esc(autocomplete)}"
         ${placeholder ? `placeholder="${esc(placeholder)}"` : ""}
         ${min ? `min="${esc(min)}"` : ""} ${max ? `max="${esc(max)}"` : ""} ${step ? `step="${esc(step)}"` : ""}
       />
@@ -1974,7 +1985,7 @@ const _FxMultiselect = class _FxMultiselect extends FxFormElement {
           <span class="count">${chips.length} selecionado${chips.length === 1 ? "" : "s"}</span>
           ${this.hasAttr("clearable") && chips.length ? '<button type="button" class="clear-all">Limpar tudo</button>' : ""}
         </div>
-        ${this.hasAttr("searchable") ? `<input class="search" part="search" type="text" placeholder="${esc(this.getAttr("search-placeholder", "Pesquisar…"))}">` : ""}
+        ${this.hasAttr("searchable") ? `<input class="search" part="search" type="text" autocomplete="off" placeholder="${esc(this.getAttr("search-placeholder", "Pesquisar…"))}">` : ""}
         <ul class="list">
           ${filtered.map((o) => `
             <li><button type="button" class="opt" role="option" data-value="${esc(o.value)}"
@@ -2931,7 +2942,7 @@ const _FxDatepicker = class _FxDatepicker extends FxFormElement {
     }
     this.setTemplate(`
       <div class="field" part="field">
-        <input class="display" part="display" type="text" ${this.hasAttr("free-text") && !disabled ? "" : "readonly"}
+        <input class="display" part="display" type="text" autocomplete="off" ${this.hasAttr("free-text") && !disabled ? "" : "readonly"}
           placeholder="${esc(this.getAttr("placeholder", "dd/mm/aaaa"))}"
           value="${esc(text)}" ${disabled ? "disabled" : ""}>
         <button type="button" class="clear" part="clear" aria-label="Limpar"
@@ -2949,9 +2960,9 @@ const _FxDatepicker = class _FxDatepicker extends FxFormElement {
       <div class="pop" part="popover">
         <fx-calendar ${calAttrs}></fx-calendar>
         ${showTime ? `<div class="time-row" part="time">
-                <input class="t-h" type="number" min="0" max="23" value="${this.time.h}" aria-label="Hora"><span class="sep">:</span>
-                <input class="t-m" type="number" min="0" max="59" value="${this.time.m}" aria-label="Minuto"><span class="sep">:</span>
-                <input class="t-s" type="number" min="0" max="59" value="${this.time.s}" aria-label="Segundo">
+                <input class="t-h" type="number" autocomplete="off" min="0" max="23" value="${this.time.h}" aria-label="Hora"><span class="sep">:</span>
+                <input class="t-m" type="number" autocomplete="off" min="0" max="59" value="${this.time.m}" aria-label="Minuto"><span class="sep">:</span>
+                <input class="t-s" type="number" autocomplete="off" min="0" max="59" value="${this.time.s}" aria-label="Segundo">
               </div>` : ""}
       </div>
     `);
@@ -4387,7 +4398,7 @@ const _FxTable = class _FxTable extends FxElement {
       const activeClass = isSorted ? "active" : "";
       return `<th part="header" class="${c.sortable ? "sortable" : ""}" style="text-align:${c.align}" data-field="${esc(c.field)}">${esc(c.header)}${ind ? `<span class="sort-ind ${activeClass}">${ind}</span>` : ""}</th>`;
     }).join("");
-    const filterRow = cols.some((c) => c.filterable) ? `<tr class="filter-row">${cols.map((c) => `<th style="text-align:${c.align}">${c.filterable ? `<input class="filter" data-field="${esc(c.field)}" placeholder="${esc("Filtrar…")}" value="${esc(this.filters[c.field] ?? "")}">` : ""}</th>`).join("")}</tr>` : "";
+    const filterRow = cols.some((c) => c.filterable) ? `<tr class="filter-row">${cols.map((c) => `<th style="text-align:${c.align}">${c.filterable ? `<input class="filter" autocomplete="off" data-field="${esc(c.field)}" placeholder="${esc("Filtrar…")}" value="${esc(this.filters[c.field] ?? "")}">` : ""}</th>`).join("")}</tr>` : "";
     const bodyHtml = rows.length ? rows.map(
       (row, i) => `<tr part="row" data-index="${i}">${cols.map((c) => `<td part="cell" style="text-align:${c.align}">${this.cellHtml(c, row)}</td>`).join("")}</tr>`
     ).join("") : `<tr><td class="empty" colspan="${cols.length || 1}">${esc(this.getAttr("empty-message", "Nenhum registro encontrado"))}</td></tr>`;
@@ -5319,7 +5330,23 @@ function defineFxFloatlabel() {
 defineFxFloatlabel();
 const _FxTextarea = class _FxTextarea extends FxFormElement {
   static get observedAttributes() {
-    return ["size", "placeholder", "disabled", "readonly", "full", "rows", "maxlength", "error", "invalid", "success", "valid"];
+    return [
+      "size",
+      "placeholder",
+      "disabled",
+      "readonly",
+      "full",
+      "rows",
+      "maxlength",
+      "error",
+      "invalid",
+      "success",
+      "valid",
+      // Autofill: vivem no campo interno (ver o JSDoc da classe).
+      "autocomplete",
+      "name",
+      "id"
+    ];
   }
   get size() {
     const s = this.getAttr("size", "md");
@@ -5354,7 +5381,12 @@ const _FxTextarea = class _FxTextarea extends FxFormElement {
     const disabled = this.hasAttr("disabled");
     const rows = this.getAttr("rows");
     const maxlength = this.getAttr("maxlength");
+    const autocomplete = this.getAttr("autocomplete", "off");
+    const name = this.getAttr("name");
+    const id = this.getAttr("id");
     this.setTemplate(`<textarea class="field" part="textarea"
+      ${name ? `name="${esc(name)}"` : ""} ${id ? `id="${esc(id)}"` : ""}
+      autocomplete="${esc(autocomplete)}"
       ${placeholder ? `placeholder="${esc(placeholder)}"` : ""}
       ${rows ? `rows="${esc(rows)}"` : ""}
       ${maxlength ? `maxlength="${esc(maxlength)}"` : ""}
@@ -7875,8 +7907,8 @@ renderToolbar_fn = function() {
     button("removeFormat", "format_clear", "Limpar formatação")
   ].join("");
   const color = [
-    `<label class="tb-color" title="Cor do texto"><input type="color" data-color="foreColor" value="#111827" aria-label="Cor do texto"></label>`,
-    `<label class="tb-color" title="Realçar texto"><input type="color" data-color="hiliteColor" value="#fef08a" aria-label="Realçar texto"></label>`
+    `<label class="tb-color" title="Cor do texto"><input type="color" autocomplete="off" data-color="foreColor" value="#111827" aria-label="Cor do texto"></label>`,
+    `<label class="tb-color" title="Realçar texto"><input type="color" autocomplete="off" data-color="hiliteColor" value="#fef08a" aria-label="Realçar texto"></label>`
   ].join("");
   const alignGroup = [
     button("justifyLeft", "format_align_left", "Alinhar à esquerda"),
@@ -8344,7 +8376,7 @@ fieldHtml_fn = function(field) {
     return `<label class="field"><span>${label}</span><select data-field="${esc(field.name)}">${options}</select></label>`;
   }
   const type = field.type === "url" ? "url" : field.type === "number" ? "number" : "text";
-  return `<label class="field"><span>${label}</span><input data-field="${esc(field.name)}" type="${type}" value="${esc(field.value ?? "")}" placeholder="${esc(field.placeholder ?? "")}"></label>`;
+  return `<label class="field"><span>${label}</span><input data-field="${esc(field.name)}" type="${type}" autocomplete="off" value="${esc(field.value ?? "")}" placeholder="${esc(field.placeholder ?? "")}"></label>`;
 };
 submitDialog_fn = function() {
   const body = this.root.querySelector(".dialog-body");
@@ -14761,7 +14793,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
       <div class="container" part="container">
         ${this.filter ? `
           <div class="filter-wrapper" part="filter-wrapper">
-            <input type="text" class="filter-input" part="filter-input"
+            <input type="text" class="filter-input" part="filter-input" autocomplete="off"
               placeholder="${this.filterPlaceholder}"
               value="${esc(this._filterValue)}"
               aria-label="Filtrar lista" />
@@ -15453,7 +15485,7 @@ const _FxPickList = class _FxPickList extends FxElement {
     const tgtItems = dTgt.length === 0 ? `<li class="empty-message">${this.filter ? "Nenhum resultado" : "Nenhum selecionado"}</li>` : dTgt.map((item, i) => `<li class="list-item${this._isTargetSelected(item, i) ? " selected" : ""}" data-index="${i}" data-list="target" tabindex="0">${hasSel ? '<input type="checkbox" class="checkbox"' + (this._isTargetSelected(item, i) ? " checked" : "") + " />" : ""}<span class="item-content">${this._optionTemplate ? this._optionTemplate(item) : esc(this._getItemLabel(item))}</span></li>`).join("");
     const srcAllBar = showAll ? `<div class="select-all-bar" part="select-all-bar"><label><input type="checkbox" class="select-all-checkbox" data-list="source" ${this._sourceSelection.length > 0 && this._sourceSelection.length === this._source.length ? "checked" : ""} aria-label="Selecionar todos da origem" /> Selecionar Todos</label><span class="selection-count">${this._sourceSelection.length} selecionado(s)</span></div>` : "";
     const tgtAllBar = showAll ? `<div class="select-all-bar" part="select-all-bar"><label><input type="checkbox" class="select-all-checkbox" data-list="target" ${this._targetSelection.length > 0 && this._targetSelection.length === this._target.length ? "checked" : ""} aria-label="Selecionar todos do destino" /> Selecionar Todos</label><span class="selection-count">${this._targetSelection.length} selecionado(s)</span></div>` : "";
-    this.setTemplate(`<div class="container"><div class="list-container"><div class="list-label">${esc(this.sourceLabel)} (${this._source.length})</div>${this.filter ? '<div class="filter-wrapper"><input type="text" class="filter-input source-filter" placeholder="' + this.filterPlaceholder + '" value="' + esc(this._sourceFilterValue) + '" /></div>' : ""}${srcAllBar}<div class="list-wrapper"><ul class="list source-list" role="listbox" tabindex="0">${srcItems}</ul></div></div><div class="controls"><div class="control-group"><button class="control-btn" data-action="move-all-target" part="control-btn" aria-label="Mover todos para destino"><span class="control-btn-icon">»</span></button><button class="control-btn" data-action="move-target" part="control-btn" aria-label="Mover para destino"><span class="control-btn-icon">→</span></button></div><div class="control-group"><button class="control-btn" data-action="move-source" part="control-btn" aria-label="Mover para origem"><span class="control-btn-icon">←</span></button><button class="control-btn" data-action="move-all-source" part="control-btn" aria-label="Mover todos para origem"><span class="control-btn-icon">«</span></button></div></div><div class="list-container"><div class="list-label">${esc(this.targetLabel)} (${this._target.length})</div>${this.filter ? '<div class="filter-wrapper"><input type="text" class="filter-input target-filter" placeholder="' + this.filterPlaceholder + '" value="' + esc(this._targetFilterValue) + '" /></div>' : ""}${tgtAllBar}<div class="list-wrapper"><ul class="list target-list" role="listbox" tabindex="0">${tgtItems}</ul></div></div></div>`);
+    this.setTemplate(`<div class="container"><div class="list-container"><div class="list-label">${esc(this.sourceLabel)} (${this._source.length})</div>${this.filter ? '<div class="filter-wrapper"><input type="text" autocomplete="off" class="filter-input source-filter" placeholder="' + this.filterPlaceholder + '" value="' + esc(this._sourceFilterValue) + '" /></div>' : ""}${srcAllBar}<div class="list-wrapper"><ul class="list source-list" role="listbox" tabindex="0">${srcItems}</ul></div></div><div class="controls"><div class="control-group"><button class="control-btn" data-action="move-all-target" part="control-btn" aria-label="Mover todos para destino"><span class="control-btn-icon">»</span></button><button class="control-btn" data-action="move-target" part="control-btn" aria-label="Mover para destino"><span class="control-btn-icon">→</span></button></div><div class="control-group"><button class="control-btn" data-action="move-source" part="control-btn" aria-label="Mover para origem"><span class="control-btn-icon">←</span></button><button class="control-btn" data-action="move-all-source" part="control-btn" aria-label="Mover todos para origem"><span class="control-btn-icon">«</span></button></div></div><div class="list-container"><div class="list-label">${esc(this.targetLabel)} (${this._target.length})</div>${this.filter ? '<div class="filter-wrapper"><input type="text" autocomplete="off" class="filter-input target-filter" placeholder="' + this.filterPlaceholder + '" value="' + esc(this._targetFilterValue) + '" /></div>' : ""}${tgtAllBar}<div class="list-wrapper"><ul class="list target-list" role="listbox" tabindex="0">${tgtItems}</ul></div></div></div>`);
     this._attachListeners();
   }
   _attachListeners() {