yumechi-no-kuni/src/client/app/common/views/components/poll-editor.vue

<template>
<div class="mk-poll-editor">
	<p class="caution" v-if="choices.length < 2">
		<fa icon="exclamation-triangle"/>{{ $t('no-only-one-choice') }}
	</p>
	<ul ref="choices">
		<li v-for="(choice, i) in choices">
			<input :value="choice" @input="onInput(i, $event)" :placeholder="$t('choice-n').replace('{}', i + 1)">
			<button @click="remove(i)" :title="$t('remove')">
				<fa icon="times"/>
			</button>
		</li>
	</ul>
	<button class="add" v-if="choices.length < 10" @click="add">{{ $t('add') }}</button>
	<button class="destroy" @click="destroy" :title="$t('destroy')">
		<fa icon="times"/>
	</button>
</div>
</template>

<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import { erase } from '../../../../../prelude/array';
export default Vue.extend({
	i18n: i18n('common/views/components/poll-editor.vue'),
	data() {
		return {
			choices: ['', '']
		};
	},
	watch: {
		choices() {
			this.$emit('updated');
		}
	},
	methods: {
		onInput(i, e) {
			Vue.set(this.choices, i, e.target.value);
		},

		add() {
			this.choices.push('');
			this.$nextTick(() => {
				(this.$refs.choices as any).childNodes[this.choices.length - 1].childNodes[0].focus();
			});
		},

		remove(i) {
			this.choices = this.choices.filter((_, _i) => _i != i);
		},

		destroy() {
			this.$emit('destroyed');
		},

		get() {
			return {
				choices: erase('', this.choices)
			}
		},

		set(data) {
			if (data.choices.length == 0) return;
			this.choices = data.choices;
			if (data.choices.length == 1) this.choices = this.choices.concat('');
		}
	}
});
</script>

<style lang="stylus" scoped>
.mk-poll-editor
	padding 8px

	> .caution
		margin 0 0 8px 0
		font-size 0.8em
		color #f00

		> [data-icon]
			margin-right 4px

	> ul
		display block
		margin 0
		padding 0
		list-style none

		> li
			display block
			margin 8px 0
			padding 0
			width 100%

			&:first-child
				margin-top 0

			&:last-child
				margin-bottom 0

			> input
				padding 6px 8px
				width 300px
				font-size 14px
				color var(--inputText)
				background var(--pollEditorInputBg)
				border solid 1px var(--primaryAlpha01)
				border-radius 4px

				&:hover
					border-color var(--primaryAlpha02)

				&:focus
					border-color var(--primaryAlpha05)

			> button
				padding 4px 8px
				color var(--primaryAlpha04)

				&:hover
					color var(--primaryAlpha06)

				&:active
					color var(--primaryDarken30)

	> .add
		margin 8px 0 0 0
		vertical-align top
		color var(--primary)

	> .destroy
		position absolute
		top 0
		right 0
		padding 4px 8px
		color var(--primaryAlpha04)

		&:hover
			color var(--primaryAlpha06)

		&:active
			color var(--primaryDarken30)

</style>