Inline edit

Inline edit for lit-material: click a value to edit it in place, Enter saves, Escape cancels, async save with errors.

6.6 KB gzipped
@lit-material/inline-edit 0.1.2
Renders on the server

Example

Install

npm install @lit-material/inline-edit @lit-material/tokens

import "@lit-material/inline-edit";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

API

`<lit-material-inline-edit>`

A value you can edit where it stands: a resource's name, a label, a description. It reads as text with an edit button; the button (or a double-click on the text) swaps in a field with save and cancel. Enter saves, Escape cancels, and focus returns to the edit button.

Properties

Property	Attribute	Type	Default	Description
`value`	`value`	`string`	`""`	The current value.
`label`	`label`	`string`	`""`	What the value is, e.g. "Project name": labels the field and the buttons.
`placeholder`	`placeholder`	`string`	`""`	Shown when the value is empty.
`save`	property only	`InlineEditSave \| undefined`	none	Stores the new value; see the class docs.
`validator`	property only	`(value: string) => string \| undefined`	none	Checks the text before saving; returns a message to refuse it.
`disabled`	`disabled`	`boolean`	`false`
`editing`	`editing`	`boolean`	`false`	Whether the field is open; reflected.
`busy`	`busy`	`boolean`	`false`	Set while `save` runs; reflected.

Events

Event	Description
`cancel`	When an edit is abandoned.
`change`	After a save; `detail: { value, previous }`.

CSS parts

Part	Description
`value`	The text shown when not editing.

Source on GitHub npm