Key/value editor
Key/value editor for lit-material: labels, annotations and environment variables, with duplicate and pattern checks and KEY=value paste.
- 7.8 KB gzipped
- @lit-material/key-value 0.1.5
- Renders on the server
Example
Key/value editor
Labels, annotations, environment variables. Duplicate and missing keys are flagged; paste
KEY=value lines into a key field to add several rows at once.
Labels
{
"app": "web",
"tier": "frontend"
}
Secret values
Install
npm install @lit-material/key-value @lit-material/tokensimport "@lit-material/key-value";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-key-value-editor>
Edits an ordered list of key/value pairs: labels, annotations, environment variables, headers. Each row is a key field, a value field and a remove button; "Add" appends a row and focuses its key.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
keyLabel | key-label | string | "Key" | Label of the key fields. |
valueLabel | value-label | string | "Value" | Label of the value fields. |
addLabel | add-label | string | "Add" | Label of the add button. |
keyPattern | key-pattern | string | "" | A regular expression (whole key) every key must match. |
keyPatternMessage | key-pattern-message | string | "Invalid key" | Error shown when a key doesn't match key-pattern. |
maskValues | mask-values | boolean | false | Show values as password fields, e.g. secrets. |
disabled | disabled | boolean | false | |
readonly | readonly | boolean | false | |
entries | property only | KeyValueEntry[] | none | The pairs, in order, without blank rows. Setting it replaces every row. |
valid | property only | boolean | none | true when no row has an error. |
Events
| Event | Description |
|---|---|
change | After any edit, add or remove; detail is { entries }. |
CSS parts
| Part | Description |
|---|---|
row | One key/value row. |
add | The add button. |