egirlskey/src/client/app/common/views/components/poll-editor.vue

151 lines
2.6 KiB
Vue
Raw Normal View History

2018-02-14 12:36:30 +00:00
<template>
<div class="mk-poll-editor">
<p class="caution" v-if="choices.length < 2">
2018-04-14 16:04:40 +00:00
%fa:exclamation-triangle%%i18n:@no-only-one-choice%
2018-02-14 12:36:30 +00:00
</p>
<ul ref="choices">
2018-02-21 20:57:24 +00:00
<li v-for="(choice, i) in choices">
2018-05-20 11:26:38 +00:00
<input :value="choice" @input="onInput(i, $event)" :placeholder="'%i18n:@choice-n%'.replace('{}', i + 1)">
2018-04-14 16:04:40 +00:00
<button @click="remove(i)" title="%i18n:@remove%">
2018-02-14 12:36:30 +00:00
%fa:times%
</button>
</li>
</ul>
2018-04-14 16:04:40 +00:00
<button class="add" v-if="choices.length < 10" @click="add">%i18n:@add%</button>
<button class="destroy" @click="destroy" title="%i18n:@destroy%">
2018-02-14 12:36:30 +00:00
%fa:times%
</button>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
data() {
return {
choices: ['', '']
};
},
2018-02-21 20:57:24 +00:00
watch: {
choices() {
this.$emit('updated');
}
},
2018-02-14 12:36:30 +00:00
methods: {
onInput(i, e) {
2018-02-20 16:23:25 +00:00
Vue.set(this.choices, i, e.target.value);
2018-02-14 12:36:30 +00:00
},
add() {
this.choices.push('');
2018-02-21 20:57:24 +00:00
this.$nextTick(() => {
(this.$refs.choices as any).childNodes[this.choices.length - 1].childNodes[0].focus();
});
2018-02-14 12:36:30 +00:00
},
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;
2018-02-21 20:57:24 +00:00
if (data.choices.length == 1) this.choices = this.choices.concat('');
2018-02-14 12:36:30 +00:00
}
}
});
</script>
<style lang="stylus" scoped>
2018-03-03 04:47:55 +00:00
@import '~const.styl'
2018-04-21 01:10:04 +00:00
root(isDark)
2018-02-14 12:36:30 +00:00
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
2018-02-24 18:05:29 +00:00
padding 6px 8px
width 300px
font-size 14px
2018-04-21 01:10:04 +00:00
color isDark ? #fff : #000
background isDark ? #191b22 : #fff
2018-02-14 12:36:30 +00:00
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%)
2018-04-21 01:10:04 +00:00
.mk-poll-editor[data-darkmode]
root(true)
.mk-poll-editor:not([data-darkmode])
root(false)
2018-02-14 12:36:30 +00:00
</style>