MagicoPagebuilder/src/components/PagebuilderSection.vue

<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>
      <div class="row p-0 mt-3 me-2">
        <PagebuilderContent
          class="col-sm-12"
          v-for="(column, index) in value.columns"
          :value="column"
          :key="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="Ustawienia sekcji" @onClose="ustawieniaSave()">
        <div>
          <div>
            <div class="form-group mb-2">
              <label class="w-100 col-form-label"> Typ sekcji </label>
              <div class="row">
                <div class="col-6">
                  <button
                    class="btn w-100"
                    @click="setType('container')"
                    :class="type == 'container' ? 'btn-primary' : 'btn-outline-primary'"
                  >
                    Kontener
                  </button>
                </div>
                <div class="col-6">
                  <button
                    class="btn w-100"
                    @click="setType('full')"
                    :class="type == 'full' ? 'btn-primary' : 'btn-outline-primary'"
                  >
                    Cała szerokość
                  </button>
                </div>
              </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>
            <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" />
            </div>
            <div class="form-group mb-2">
              <label>Margines górny</label>
              <div class="input-group mb-3">
                <input type="number" class="form-control" v-model="value.margin_top" />
                <div class="input-group-append">
                  <span class="input-group-text" id="basic-addon1">px</span>
                </div>
              </div>
            </div>
          </div>
          <div class="form-group mb-2">
            <label>Margines dolny</label>
            <div class="input-group mb-3">
              <input type="number" class="form-control" v-model="value.margin_bottom" />
              <div class="input-group-append">
                <span class="input-group-text" id="basic-addon1">px</span>
              </div>
            </div>
          </div>
        </div>
        <div>
          <button class="btn btn-outline-secondary" @click.prevent="ustawieniaSave">Zapisz</button>
        </div>
      </b-modal>
    </div>
  </div>
</template>
<script>
import grid from './grid.js'
import MagicoModal from './MagicoModal.vue'
import PagebuilderContent from './PagebuilderContent.vue'
export default {
  props: { value: Object },
  emits: ['update:modelValue', 'copy', 'deleteSection'],
  components: {
    'b-modal': MagicoModal,
    PagebuilderContent
  },
  data: function () {
    return { items: grid, value2: '', show_settings: false, type: '' }
  },
  methods: {
    changeSelect: function () {
      this.onChange()
    },
    onChange: function () {
      this.$emit('change')
    },
    deleteSection: function () {
      this.$emit('deleteSection', this.value)
    },
    copySection: function () {
      this.$emit('copy', this.value)
    },
    toggleSettings: function () {
      this.show_settings = !this.show_settings
    },
    ustawieniaSave: function () {
      this.show_settings = false
      this.onChange()
    },
    rand: function (index) {
      return 'column' + index + Math.random() * 100
    },
    setType: function (type) {
      this.type = type
      this.value.type = type
      this.onChange()
    }
  },
  mounted: function () {
    this.type = this.value.type
  }
}
</script>
<style>
#pagebuilder {
  background-color: #f5f5f5;
}

.pb_section {
  background-color: #fff;

  > div {
    overflow: hidden;
  }
}

.btn.btn-icon-sm,
.btn.drp-icon-sm {
  width: 34px;
  height: 34px;
  padding: 6px 6px;
  margin-bottom: 0px;
  margin-right: 4px;
}
.material-icons-outlined {
  font-size: 20px;
}
</style>