gistfile1.txt

<template lang="jade">
	#decid
		h1 Add your options
		input(v-model="inputQuery", @keyup.enter="addItem(inputQuery)")
		ul#item-list
			li(v-for="item in items", transition="slide")
				p {{ item.item }}
				input(v-model="updateQuery", @keyup.enter="replaceItem(item)", transition="slide", v-show="edit")
				.buttons
					span.update(@click="pickItemToUpdate(item)") EDIT
					span.delete(@click="deleteItem(item)") X
</template>

<script>

const Horizon 	= require('@horizon/client');
const horizon 	= Horizon({host: 'localhost:8181'});
const db 	= horizon('decid');

export default {
	data: () => ({
		inputQuery: '',
		updateQuery: '',
		items: [],
		edit: false
	}),
	created: function() {
		horizon.connect();
		db.watch().subscribe(this.getItems);
	},
	methods: {
		getItems(items) {
			this.items = items;
		},
		addItem() {
			const input = this.inputQuery.trim();
			if (input) {
				db.store({item: input});
			}
			this.inputQuery = '';
		},
		deleteItem(item) {
			db.remove(item);
		},
		pickItemToUpdate(item) {
			this.edit = !this.edit;
			this.updateQuery = item.item;
		},
		replaceItem(item) {
			db.replace({
				id: item.id,
				item: this.updateQuery
			})
		}
	}
}
</script>

<style lang="stylus">
#decid
	text-align: center
	margin: 10% auto
	padding: 20px
	width: 500px
	box-shadow: 0px 18px 52px -16px rgba(0,0,0,0.19)

	h1
		margin 0
		text-transform uppercase
		opacity 0.5

	input
		margin 2% 0
		border 1px solid #C9C9C9
		height 30px
		transition width 1s ease
		width 260px
		font-size 1.5em
		padding 10px

		&:focus
			outline none
			width 300px

	ul#item-list
		padding 0
		list-style none

		li
			border 1px solid #ccc
			margin 15px
			padding 10px
			text-align left
			position relative
			overflow hidden
			display flex
			align-items center
			justify-content space-between

			input
				width 50%
				height 15px

			p
				margin 0

			span
				margin-right 5px
				cursor pointer


.slide-transition
	transition all .3s ease

.slide-enter
	transform translateX(100%)
	opacity 0

.slide-leave
	transform translateX(-100%)
	opacity 0

</style>