90 lines
2.0 KiB
Vue
90 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="value.name">
|
||
|
<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: {
|
||
|
type: Object,
|
||
|
default: {
|
||
|
color: '',
|
||
|
icon: '',
|
||
|
name: '',
|
||
|
variant: ''
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
data () {
|
||
|
return {
|
||
|
}
|
||
|
},
|
||
|
computed: {
|
||
|
keywords: {
|
||
|
get: function () {
|
||
|
return this.value.words.join('\n')
|
||
|
},
|
||
|
set: function (keywords) {
|
||
|
var kwds = keywords.split('\n')
|
||
|
this.value.words = kwds
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
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>
|