public/MagicoPagebuilder
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

vue app

Browse Source
This commit is contained in:
Szymon Haczyk
2022-06-23 13:59:22 +02:00
parent a769bd9b64
commit 40052aeb9b
13 changed files with 845 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/components/plugin/SectionText.vue Normal file
View File

@@ -0,0 +1,103 @@
<template>
<div class="row m-0 p-0 align-items-center">
<div class="col-sm-12 col-md-6 p-0">
<span class="material-icons-outlined mr-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-right">
<a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary mr-2"><i
class="material-icons-outlined">create</i></a>
<b-modal v-model="modalBox" @close="onCloseModal">
<div slot="modal-title">{{ langs.label }}</div>
<p>
<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>
<b-form-group label="Button style radios" v-slot="{ ariaDescribedby }">
<b-form-radio-group id="btn-radios-1" v-model="align" :aria-describedby="ariaDescribedby"
name="radios-btn-default" buttons>
<b-form-radio value="left"><span class="material-icons">format_align_left</span>
</b-form-radio>
<b-form-radio value="center"><span class="material-icons">format_align_center</span>
</b-form-radio>
<b-form-radio value="right"><span class="material-icons">format_align_right</span>
</b-form-radio>
</b-form-radio-group>
</b-form-group>
</div>
<div slot="modal-footer"><button class="btn btn-outline-secondary mr-1"
@click.prevent="onCloseModal">{{ langs.saveclose }}</button></div>
</b-modal>
<a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
class="material-icons-outlined">delete</i></a>
</div>
<div>
<strong class="font-weight-bold">{{ langs.type }}:</strong> {{ h_type }},
<strong class="font-weight-bold">{{ langs.content }}:</strong> {{ (text) ? text : ' ' }}
</div>
</div>
</template>
<script>
export default {
props: {
value: Object
},
data: function () {
return {
langs: {
label: "<?=lang('pagebuilder_core_section_text_title')?>",
close: "<?=lang('pagebuilder_core_section_text_close')?>",
content: "<?=lang('pagebuilder_core_section_text_content')?>",
type: "<?=lang('pagebuilder_core_section_text_type')?>",
typeplaintext: "<?=lang('pagebuilder_core_section_text_typeplaintext')?>",
typeheader: "<?=lang('pagebuilder_core_section_text_typeheader')?>",
saveclose: "<?=lang('saveclose')?>"
},
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;
},
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,
})
}
},
}
</script>