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", "name": "magico-pagebuilder",
"version": "0.0.28", "version": "0.0.29",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",

84
src/components/PagebuilderSection.vue
View File

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