misskey-awawa/src/web/app/common/views/components/poll-editor.vue

131 lines
2.4 KiB
Vue

<template>
<div class="mk-poll-editor">
<p class="caution" v-if="choices.length < 2">
%fa:exclamation-triangle%%i18n:common.tags.mk-poll-editor.no-only-one-choice%
</p>
<ul ref="choices">
<li v-for="(choice, i) in choices" :key="choice">
<input :value="choice" @input="onInput(i, $event)" :placeholder="'%i18n:common.tags.mk-poll-editor.choice-n%'.replace('{}', i + 1)">
<button @click="remove(i)" title="%i18n:common.tags.mk-poll-editor.remove%">
%fa:times%
</button>
</li>
</ul>
<button class="add" v-if="choices.length < 10" @click="add">%i18n:common.tags.mk-poll-editor.add%</button>
<button class="destroy" @click="destroy" title="%i18n:common.tags.mk-poll-editor.destroy%">
%fa:times%
</button>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
data() {
return {
choices: ['', '']
};
},
methods: {
onInput(i, e) {
this.choices[i] = e.target.value; // TODO
},
add() {
this.choices.push('');
(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: this.choices.filter(choice => choice != '')
}
},
set(data) {
if (data.choices.length == 0) return;
this.choices = data.choices;
}
}
});
</script>
<style lang="stylus" scoped>
.mk-poll-editor
padding 8px
> .caution
margin 0 0 8px 0
font-size 0.8em
color #f00
> [data-fa]
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
border solid 1px rgba($theme-color, 0.1)
border-radius 4px
&:hover
border-color rgba($theme-color, 0.2)
&:focus
border-color rgba($theme-color, 0.5)
> button
padding 4px 8px
color rgba($theme-color, 0.4)
&:hover
color rgba($theme-color, 0.6)
&:active
color darken($theme-color, 30%)
> .add
margin 8px 0 0 0
vertical-align top
color $theme-color
> .destroy
position absolute
top 0
right 0
padding 4px 8px
color rgba($theme-color, 0.4)
&:hover
color rgba($theme-color, 0.6)
&:active
color darken($theme-color, 30%)
</style>