103 lines
3.8 KiB
Vue
103 lines
3.8 KiB
Vue
<template>
|
|
<div class="row m-0 p-0 align-items-center">
|
|
<div class="col-sm-12 col-md-6 p-0 mb-0">
|
|
<span class="material-icons-outlined me-1 box-move" style="cursor:move;">open_with</span><span
|
|
class="font-weight-bold text-primary">{{ langs.label }}</span>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-6 p-0 text-end">
|
|
<a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"><i
|
|
class="material-icons-outlined">create</i></a>
|
|
<a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
|
|
class="material-icons-outlined">delete</i></a>
|
|
</div>
|
|
<div class="ms-2">
|
|
<strong class="font-weight-bold">{{ langs.type }}:</strong> {{ h_type }},
|
|
<strong class="font-weight-bold">{{ langs.content }}:</strong> {{ (text) ? text : ' ' }}
|
|
</div>
|
|
<b-modal v-model="modalBox" :title="langs.label" @close="onCloseModal">
|
|
|
|
<div class="form-group">
|
|
<label class="w-100 col-form-label">{{ langs.content }}</label>
|
|
<input class="form-control" type="text" v-model="text" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="w-100 col-form-label">{{ langs.type }}</label>
|
|
<select class="form-control" v-model="h_type">
|
|
<option value="">{{ langs.typeplaintext }}</option>
|
|
<option value="h1">{{ langs.typeheader }} 1</option>
|
|
<option value="h2">{{ langs.typeheader }} 2</option>
|
|
<option value="h3">{{ langs.typeheader }} 3</option>
|
|
<option value="h4">{{ langs.typeheader }} 4</option>
|
|
<option value="h5">{{ langs.typeheader }} 5</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<!-- <label class="w-100 col-form-label">Wyrównanie</label> -->
|
|
|
|
</div>
|
|
|
|
<div class="text-center"><button class="btn btn-outline-secondary me-1" @click.prevent="onCloseModal">{{
|
|
langs.saveclose
|
|
}}</button></div>
|
|
</b-modal>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import MagicoModal from './../MagicoModal.vue'
|
|
|
|
export default {
|
|
components: {
|
|
'b-modal': MagicoModal,
|
|
},
|
|
props: {
|
|
value: Object
|
|
},
|
|
data: function () {
|
|
return {
|
|
langs: {
|
|
label: "Tekst",
|
|
close: "Zaknij",
|
|
content: "Treść",
|
|
type: "Typ",
|
|
typeplaintext: "Tekst",
|
|
typeheader: "Nagłowek",
|
|
saveclose: "Zapisz"
|
|
},
|
|
modalBox: false,
|
|
text: '',
|
|
name: '',
|
|
h_type: '',
|
|
align: 'left',
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.name = (this.value && this.value.name) ? this.value.name : this.name;
|
|
this.text = (this.value && this.value.text) ? this.value.text : this.text;
|
|
this.h_type = (this.value && this.value.h_type) ? this.value.h_type : this.h_type;
|
|
this.align = (this.value && this.value.align) ? this.value.align : this.align;
|
|
if (this.value.open) this.modalBox = true;
|
|
console.log('mounted text');
|
|
this.$emit('input',this.value);
|
|
|
|
},
|
|
methods: {
|
|
removeItem: function () {
|
|
this.$emit('itemRemoved', this.value);
|
|
},
|
|
onCloseModal: function () {
|
|
this.modalBox = false;
|
|
this.$emit('input', {
|
|
name: this.name,
|
|
text: this.text,
|
|
h_type: this.h_type,
|
|
align: this.align,
|
|
})
|
|
}
|
|
},
|
|
destroy(){
|
|
this.modalBox=false;
|
|
}
|
|
|
|
}
|
|
</script> |