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

refactor: update section title and add dropdown options in PagebuilderSection

Browse Source
This commit is contained in:
Szymon Haczyk
2025-11-17 09:32:40 +01:00
parent 96becf4747
commit 60add34529
2 changed files with 34 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "magico-pagebuilder",
"version": "0.0.28",
"version": "0.0.29",
"private": true,
"scripts": {
"dev": "vite",

86
src/components/PagebuilderSection.vue
View File

@@ -1,69 +1,37 @@
<template>
<div class="row pb-3 mb-3 position-relative border-bottom pb_outer_section pr-5">
<div class="col-sm-12">
<h5 class="mt-4" v-if="value.user_label">{{ value.user_label }}</h5>
<h5 class="mt-4" v-if="value.title">{{ value.title }}</h5>
<div class="row p-0 mt-3 me-2">
<PagebuilderContent
class="col-sm-12"
v-for="(column, index) in value.columns"
:value="column"
:key="keyIndex + 's' + index"
:id="keyIndex + 's' + index"
:keyIndex="keyIndex + 's' + index"
@change="onChange"
></PagebuilderContent>
<PagebuilderContent class="col-sm-12" v-for="(column, index) in value.columns" :value="column"
:key="keyIndex + 's' + index" :id="keyIndex + 's' + index" :keyIndex="keyIndex + 's' + index"
@change="onChange"></PagebuilderContent>
</div>
</div>
<div class="pb_section_options position-absolute" style="top: 12px; right: 14px; width: 20px">
<a href="#" title="Przenieś sekcje" class="box-settings-icon box-move"
><i class="material-icons-outlined">sort</i></a
>
<a
href="#"
title="Duplikuj sekcje"
@click.prevent="copySection"
class="box-settings-icon box-copy text-warning"
><i class="material-icons-outlined">file_copy</i></a
>
<a
href="#"
title="Ustawienia sekcji"
@click.prevent="toggleSettings"
class="box-settings-icon box-settings text-secondary"
><i class="material-icons-outlined">settings</i></a
>
<a
href="#"
title="Usuń sekcje"
@click.prevent="deleteSection"
class="box-settings-icon box-delete text-danger"
><i class="material-icons-outlined">delete</i></a
>
<b-modal
v-model="show_settings"
:title="t('pagebuilder.section_settings')"
@onClose="ustawieniaSave()"
>
<a href="#" title="Przenieś sekcje" class="box-settings-icon box-move"><i
class="material-icons-outlined">sort</i></a>
<a href="#" title="Duplikuj sekcje" @click.prevent="copySection"
class="box-settings-icon box-copy text-warning"><i class="material-icons-outlined">file_copy</i></a>
<a href="#" title="Ustawienia sekcji" @click.prevent="toggleSettings"
class="box-settings-icon box-settings text-secondary"><i class="material-icons-outlined">settings</i></a>
<a href="#" title="Usuń sekcje" @click.prevent="deleteSection" class="box-settings-icon box-delete text-danger"><i
class="material-icons-outlined">delete</i></a>
<b-modal v-model="show_settings" :title="t('pagebuilder.section_settings')" @onClose="ustawieniaSave()">
<div>
<div class="form-group mb-2">
<label class="w-100 col-form-label"> {{ t('pagebuilder.section_type') }} </label>
<div class="row">
<div class="col-6">
<button
class="btn w-100"
@click="setType('container')"
:class="type == 'container' ? 'btn-primary' : 'btn-outline-primary'"
>
<button class="btn w-100" @click="setType('container')"
:class="type == 'container' ? 'btn-primary' : 'btn-outline-primary'">
{{ t('pagebuilder.container') }}
</button>
</div>
<div class="col-6">
<button
class="btn w-100"
@click="setType('full')"
:class="type == 'full' ? 'btn-primary' : 'btn-outline-primary'"
>
<button class="btn w-100" @click="setType('full')"
:class="type == 'full' ? 'btn-primary' : 'btn-outline-primary'">
{{ t('pagebuilder.full_width') }}
</button>
</div>
@@ -71,10 +39,21 @@
</div>
<div>
<div class="form-group mb-2">
<label class="w-100 col-form-label"> Nazwa sekcji </label>
<input type="text" class="form-control" v-model="value.user_label" />
<div class="form-group mb-3">
<label class="w-100 col-form-label">Tytuł sekcji</label>
<input type="text" class="form-control" v-model="value.title">
</div>
<div class="form-group mb-3 ml-4">
<input type="checkbox" id="dropdown" class="form-check-input" v-model="value.dropdown">
<label for="dropdown" class="form-check-label">Sekcja rozwijana</label>
</div>
<div v-if="value.dropdown" class="form-group mb-3 ml-4">
<input type="checkbox" id="dropdown_default_open" class="form-check-input"
v-model="value.dropdown_default_open">
<label for="dropdown_default_open" class="form-check-label">Domyślnie rozwinięta</label>
</div>
<div class="form-group mb-2">
<label class="w-100 col-form-label"> Klasa sekcji </label>
<input type="text" class="form-control" v-model="value.class" />
@@ -169,7 +148,7 @@ export default {
.pb_section {
background-color: #fff;
> div {
>div {
overflow: hidden;
}
}
@@ -182,6 +161,7 @@ export default {
margin-bottom: 0px;
margin-right: 4px;
}
.material-icons-outlined {
font-size: 20px;
}