88 lines
2.0 KiB
Vue
88 lines
2.0 KiB
Vue
<template>
|
|
<div class="tag">
|
|
<div class="icon">
|
|
<font-awesome-icon :style="{ color: value.color}" :icon="value.icon" class="fa-2x"/>
|
|
</div>
|
|
<div class="description">
|
|
<div v-if="existing_tag">
|
|
<h4>{{ value.name }}</h4>
|
|
</div>
|
|
<div v-else>
|
|
<b-form-input type="text" v-model="value.name"></b-form-input>
|
|
</div>
|
|
<b-form-group horizontal
|
|
label="Icône:"
|
|
label-class="text-sm"
|
|
label-for="icon">
|
|
<b-form-input type="text" v-model="value.icon" id="icon"></b-form-input>
|
|
</b-form-group>
|
|
<b-form-group horizontal
|
|
label="Couleur:"
|
|
label-class="text-sm"
|
|
label-for="color">
|
|
<b-form-input type="color" v-model="value.color" id="color"></b-form-input>
|
|
</b-form-group>
|
|
<b-form-group horizontal
|
|
label="Mots clés:"
|
|
label-class="text-sm"
|
|
label-for="keywords"
|
|
description="Une expression clé par ligne">
|
|
<b-form-textarea v-model="keywords" id="keywords"></b-form-textarea>
|
|
</b-form-group>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters, mapActions } from 'vuex'
|
|
export default {
|
|
name: 'editTag',
|
|
props: [
|
|
'value'
|
|
],
|
|
data () {
|
|
return {
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
'tag': 'config/tag',
|
|
}),
|
|
keywords: {
|
|
get: function () {
|
|
return this.value.words.join('\n')
|
|
},
|
|
set: function (keywords) {
|
|
var kwds = keywords.split('\n')
|
|
this.value.words = kwds
|
|
}
|
|
},
|
|
existing_tag () {
|
|
return this.tag(this.value.name) ? true : false
|
|
}
|
|
},
|
|
methods: {
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tag {
|
|
text-align: left;
|
|
align-self: center;
|
|
display: flex;
|
|
}
|
|
.icon {
|
|
flex: 10%;
|
|
align-self: center;
|
|
}
|
|
.description {
|
|
flex: 90%;
|
|
text-align: left;
|
|
align-self: center;
|
|
}
|
|
</style>
|