This repository has been archived on 2024-07-22. You can view files and clone it, but cannot push or open issues or pull requests.
Zaimki/components/OpinionListInput.vue

34 lines
1.4 KiB
Vue

<template>
<ListInput v-model="v" :prototype="{key: '', value: 0}" v-slot="s" :group="group">
<div class="input-group-prepend">
<button type="button" :class="['btn', parseInt(s.val.value) === 1 ? 'btn-primary' : 'btn-outline-secondary']"
:aria-label="$t('profile.opinion.yes')"
@click="s.update({key: s.val.key, value: 1})">
<Icon v="heart"/>
</button>
<button type="button" :class="['btn', parseInt(s.val.value) === 0 ? 'btn-primary' : 'btn-outline-secondary']"
:aria-label="$t('profile.opinion.meh')"
@click="s.update({key: s.val.key, value: 0})">
<Icon v="thumbs-up"/>
</button>
<button type="button" :class="['btn', parseInt(s.val.value) === -1 ? 'btn-primary' : 'btn-outline-secondary']"
:aria-label="$t('profile.opinion.no')"
@click="s.update({key: s.val.key, value: -1})">
<Icon v="thumbs-down"/>
</button>
</div>
<input v-model="s.val.key" class="form-control" @keyup="s.update(s.val)" required/>
</ListInput>
</template>
<script>
export default {
props: {
value: {},
group: {},
},
data() { return { v: this.value } },
watch: { v() { this.$emit('input', this.v); } }
}
</script>