TableInput

Campo de edição para células de tabela (`mk-table-input`), sem rótulo visível e com borda inferior, que participa de formulários nativos.

O mk-table-input edita um valor dentro de uma célula de tabela. O campo não tem rótulo visível, só a borda inferior, e participa de formulários nativos. O valor é confirmado com Enter ou ao sair do campo (mkChange), e Esc volta ao valor de quando o campo recebeu foco. O mk-datagrid usa o mesmo visual nas colunas editable.

Padrão

label é obrigatório e vira o aria-label do campo. Inclua no rótulo a linha e a coluna.

import { MkTableCell, MkTableInput } from '@db1/makuco-ui-react';

<MkTableCell>
  <MkTableInput
    label="Quantidade de Caneta"
    value={quantidade}
    placeholder="0"
    onMkChange={(e) => setQuantidade(e.detail)}
  />
</MkTableCell>

<mk-table-cell>
  <mk-table-input
    label="Quantidade de Caneta"
    [value]="quantidade"
    placeholder="0"
    (mkChange)="quantidade = $event.detail"
  ></mk-table-input>
</mk-table-cell>

Máscara

mask aplica a mesma máscara do mk-input. value e os eventos trazem o valor sem máscara. Com brl e number, o valor é uma string decimal em unidades, como no mk-input-number e no mk-datagrid: "19.90" aparece como R$ 19,90. O valor é sempre string, por ser um campo de formulário; nas colunas editable do mk-datagrid, o valor segue o tipo da linha (19.9 ou "19.90").

<MkTableInput label="Preço de Caneta" mask="brl" value="19.90" />

<mk-table-input label="Preço de Caneta" mask="brl" value="19.90"></mk-table-input>

Somente leitura e desabilitado

<MkTableInput label="Quantidade" value="42" readonly />
<MkTableInput label="Quantidade" value="42" disabled />

<mk-table-input label="Quantidade" value="42" [readonly]="true"></mk-table-input>
<mk-table-input label="Quantidade" value="42" [disabled]="true"></mk-table-input>

Props — mk-table-input

Prop	Tipo	Padrão	Descrição
`label`	`string`	—	Obrigatório. Nome acessível do campo (`aria-label`).
`value`	`string`	`""`	Valor sem máscara. Com `brl` e `number`, string decimal em unidades (`"19.90"`).
`name`	`string`	—	Nome do campo no formulário.
`placeholder`	`string`	—	Texto exibido com o campo vazio.
`mask`	`"cpf" \| "cnpj" \| "cep" \| "brl" \| "number" \| "date" \| "time"`	—	Máscara aplicada na digitação.
`disabled`	`boolean`	`false`	Desabilita o campo e o tira do formulário.
`readonly`	`boolean`	`false`	Mostra o valor sem permitir edição.

Eventos

Evento	Componente	Payload	Descrição
`mkInput`	`mk-table-input`	`string`	A cada tecla, com o valor sem máscara.
`mkChange`	`mk-table-input`	`string`	Ao confirmar (Enter ou saída do campo) um valor diferente do anterior.

Acessibilidade

<input type="text"> nativo com aria-label vindo de label.
O host usa delegatesFocus: focar o mk-table-input foca o campo.
Form-associated (ElementInternals): envia value com o name e volta ao valor inicial no reset do formulário.
Foco por teclado com o anel padrão (--stroke-info).

Tecla	Comportamento
Enter	Confirma o valor (`mkChange`).
Esc	Volta ao valor de quando o campo recebeu foco.
Tab	Confirma o valor e sai do campo.