Editable List

<div data-component="editable-list">
    <div style="display: flex; gap: 0.5rem;">
        <input type="text" placeholder="Add item..." data-model="newItem">
        <button data-action="addItem">Add</button>
    </div>
    <div data-list="items">
        <template>
            <div class="editable-item">
                <span data-bind="text" data-show="!editing"></span>
                <input type="text" data-model="text" data-show="editing">
                <button data-action="toggleEdit" data-bind="editing ? 'Save' : 'Edit'"></button>
                <button data-action="removeItem">Remove</button>
            </div>
        </template>
    </div>
    <p data-bind="itemCount"></p>
</div>

<script>
wildflower.component('editable-list', {
    state: {
        newItem: '',
        items: [
            { text: 'First item', editing: false },
            { text: 'Second item', editing: false },
            { text: 'Third item', editing: false }
        ]
    },
    computed: {
        itemCount() {
            return this.items.length + ' items';
        }
    },
    addItem() {
        const text = this.newItem.trim();
        if (!text) return;
        this.items.push({ text, editing: false });
        this.newItem = '';
    },
    toggleEdit(e, el, { index }) {
        this.items[index].editing = !this.items[index].editing;
    },
    removeItem(e, el, { index }) {
        this.items.splice(index, 1);
    }
});
</script>