42 lines
1.1 KiB
Vue
42 lines
1.1 KiB
Vue
<template>
|
|
<div class="field has-addons">
|
|
<div v-show="is_opened" class="control has-icons-left">
|
|
<input class="input" :value="value" @input="input" type="number" size="3" min="-50" max=50 step=5>
|
|
<span class="icon is-left">
|
|
<i class="fas fa-percent"></i>
|
|
</span>
|
|
</div>
|
|
<div class="control">
|
|
<button class="button" @click="switchOpenedState">
|
|
<small v-if="!is_opened">Mod.</small>
|
|
<span v-else class="icon"><i class="fas fa-times-circle"></i></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ["value"],
|
|
data () {
|
|
return {
|
|
is_opened: false,
|
|
};
|
|
},
|
|
methods: {
|
|
input (event) { this.$emit("input", event.target.value); },
|
|
switchOpenedState () {
|
|
this.is_opened = !this.is_opened;
|
|
// Reset the modifier in closed state
|
|
if (!this.is_opened) {
|
|
this.$emit("input", 0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.input { width: 6em; }
|
|
</style>
|