Skip to content
Snippets Groups Projects
Commit a3743f17 authored by Arnaud Levy's avatar Arnaud Levy
Browse files

test with vue inputs

parent 1622bc37
No related tags found
No related merge requests found
<script>
import { Pencil } from 'lucide-vue-next';
export default {
props: [
'modelValue',
'i18n',
'id'
],
emits: [
'update:modelValue'
],
components: {
Pencil
},
computed: {
value: {
get() {
return this.modelValue;
},
set(value) {
this.$emit('update:modelValue', value);
}
}
},
data () {
return {
editing: false
}
},
methods: {
toggleEdition() {
this.editing = !this.editing;
if (this.editing) {
this.$nextTick(() => {
this.$refs.input.focus();
});
}
}
},
};
</script>
<template>
<div class="mb-3">
<label class="form-label" aria-label="{{ i18n.label }}" :for="id">
{{ i18n.label }}
</label>
<div v-show="!editing" v-on:click="toggleEdition()">
<p class="d-inline-block">{{ value }}</p>
<a class="btn btn-xs">
<Pencil stroke-width="2.5"
width="18"
class="text-muted" />
</a>
</div>
<div v-show="editing">
<input :id="id"
class="form-control"
data-translatable="true"
v-model="value"
ref="input"
type="text">
<div class="form-text">{{ i18n.hint }}</div>
</div>
</div>
</template>
...@@ -4,6 +4,7 @@ import Cloud from './components/Cloud.vue'; ...@@ -4,6 +4,7 @@ import Cloud from './components/Cloud.vue';
import Medias from './components/Medias.vue'; import Medias from './components/Medias.vue';
import ImageUploader from './components/ImageUploader.vue'; import ImageUploader from './components/ImageUploader.vue';
import Summernote from '../components/Summernote.vue'; import Summernote from '../components/Summernote.vue';
import InputString from '../components/inputs/InputString.vue';
export default { export default {
components: { components: {
...@@ -12,6 +13,7 @@ export default { ...@@ -12,6 +13,7 @@ export default {
Medias, Medias,
ImageUploader, ImageUploader,
Summernote, Summernote,
InputString
}, },
data () { data () {
return { return {
...@@ -89,17 +91,10 @@ export default { ...@@ -89,17 +91,10 @@ export default {
{{ i18n.mediaPicker.remove }} {{ i18n.mediaPicker.remove }}
</a> </a>
</div> </div>
<div class="mb-3"> <InputString v-model="current.image.alt"
<label class="form-label" aria-label="{{ i18n.mediaPicker.alt.label }}" for="alt"> :i18n="i18n.mediaPicker.alt"
{{ i18n.mediaPicker.alt.label }} :id="'mediaPicker.alt'"
</label> />
<input id="alt"
class="form-control"
data-translatable="true"
v-model="current.image.alt"
type="text">
<div class="form-text">{{ i18n.mediaPicker.alt.hint }}</div>
</div>
<div class="mb-3 summernote"> <div class="mb-3 summernote">
<label class="form-label" :aria-label="i18n.mediaPicker.credit.label" for="credit"> <label class="form-label" :aria-label="i18n.mediaPicker.credit.label" for="credit">
{{ i18n.mediaPicker.credit.label }} {{ i18n.mediaPicker.credit.label }}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment