forked from FoundKeyGang/FoundKey
wip
This commit is contained in:
こぴなたみぽ
parent
d3a4efab15
commit
fda3ba4e4d
2 changed files with 130 additions and 121 deletions
|
|
@ -1,121 +0,0 @@
|
||||||
<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 each={ choice, i in choices }>
|
|
||||||
<input value={ choice } oninput={ oninput.bind(null, i) } placeholder={ '%i18n:common.tags.mk-poll-editor.choice-n%'.replace('{}', i + 1) }>
|
|
||||||
<button @click="remove.bind(null, 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>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
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>
|
|
||||||
<script lang="typescript">
|
|
||||||
this.choices = ['', ''];
|
|
||||||
|
|
||||||
this.oninput = (i, e) => {
|
|
||||||
this.choices[i] = e.target.value;
|
|
||||||
};
|
|
||||||
|
|
||||||
this.add = () => {
|
|
||||||
this.choices.push('');
|
|
||||||
this.update();
|
|
||||||
this.$refs.choices.childNodes[this.choices.length - 1].childNodes[0].focus();
|
|
||||||
};
|
|
||||||
|
|
||||||
this.remove = (i) => {
|
|
||||||
this.choices = this.choices.filter((_, _i) => _i != i);
|
|
||||||
this.update();
|
|
||||||
};
|
|
||||||
|
|
||||||
this.destroy = () => {
|
|
||||||
this.opts.ondestroy();
|
|
||||||
};
|
|
||||||
|
|
||||||
this.get = () => {
|
|
||||||
return {
|
|
||||||
choices: this.choices.filter(choice => choice != '')
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
this.set = data => {
|
|
||||||
if (data.choices.length == 0) return;
|
|
||||||
this.choices = data.choices;
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</mk-poll-editor>
|
|
||||||
130
src/web/app/common/views/components/poll-editor.vue
Normal file
130
src/web/app/common/views/components/poll-editor.vue
Normal file
|
|
@ -0,0 +1,130 @@
|
||||||
|
<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>
|
||||||
Loading…
Reference in a new issue