Inline Edit

<div data-component="inline-edit">
    <div data-list="fields">
        <template>
            <div class="inline-edit-row">
                <span class="label" data-bind="label"></span>
                <span data-show="!editing" data-action="startEdit"
                      data-bind="value"></span>
                <input data-show="editing" data-model="value"
                       data-action="keyup:handleKey blur:saveEdit">
                <button data-show="editing" data-action="saveEdit">Save</button>
            </div>
        </template>
    </div>
</div>

<script>
wildflower.component('inline-edit', {
    state: {
        fields: [
            { label: 'Name', value: 'Alice Chen', editing: false, prev: '' },
            { label: 'Title', value: 'Staff Engineer', editing: false, prev: '' },
            { label: 'Team', value: 'Platform', editing: false, prev: '' }
        ]
    },
    startEdit(e, el, { index }) {
        this.fields[index].prev = this.fields[index].value;
        this.fields[index].editing = true;
    },
    saveEdit(e, el, { index }) {
        this.fields[index].editing = false;
    },
    handleKey(e, el, { index }) {
        if (e.key === 'Enter') this.fields[index].editing = false;
        if (e.key === 'Escape') {
            this.fields[index].value = this.fields[index].prev;
            this.fields[index].editing = false;
        }
    }
});
</script>