ember-inline-edit provides inline editing for your ember apps. Has basic keyboard support, too.
ember install ember-inline-edit
Use the ember-inline-edit
component and provide it a default value.
This will give you a component that can be edited inline. By default, it is a textfield. You can, however, change the field type. Here's how:
This will make it a textarea. The current supported types are: text, email, phone, textarea (if you need more, feel free to create an issue).
It also exposes an action onSave
that is called (with the value as an argument) when the user hits save. Here's how that works:
There's an onClose
action that is called when the editor is closed (either by clicking outside or pressing the esc
key). You can use this to handle cases where, for example, you want to rollback unsaved changes.
Here's how you can use that:
By default, name the value
is empty, it says 'Not provided'. You have the option to customize that. Here's how you can do that:
With this, if the value
is empty, it will show It is empty
instead.
By default, the save button is labeled 'Save'. You can change that easily:
Editing can be conditionally prevented with the enabled
property. When the component becomes disabled, the onClose
event will be fired.
There's no styling provided by default. Feel free to add your own.
In case you need to go beyond the default textfields and control what shows as the editable (say an header tag) and what shows as the editor (say a custom select component), you can do that too.
Here’s an example:
{{#ember-inline-edit value=value as |inline-edit|}}
{{#inline-edit.editable}}
<h3>Edit this</h3>
{{/inline-edit.editable}}
{{#inline-edit.editor field="textarea"}}
<select id="some-select" name="some-name">
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
</select>
{{/inline-edit.editor}}
{{/ember-inline-edit}}
Everything else (the actions, keyboard support, etc.) works just the same.
Inside the inputs (the textarea, input fields, etc.), if the user hits enter
, it does exactly what a click on the save button would do (i.e. sends an onSave
action and closes the editor).
If the user hits esc
, the editor closes and sends the onClose
action.
Please report any issues or bugs you find.