init

src/components/PagebuilderContent.vue

@@ -0,0 +1,162 @@
+<template>
+  <div
+    style="min-height: 100px"
+    class="pagebuilder-column"
+    :class="value.name"
+  >
+    <b-modal
+      v-model.value="modalAddBox"
+      class_other="modal-xl"
+      v-on:onClose="modalAddBox = false"
+      title="Dodaj widżet"
+    >
+      <div>
+        <DropdownSectionSection @choose="clickAdd"> </DropdownSectionSection>
+      </div>
+    </b-modal>
+
+    <b-modal
+      v-model="modalColumnsSettings"
+      title="Ustawienia kolumny"
+      size="sm"
+      v-on:onClose="modalColumnsSettings = false"
+    >
+      <div>
+        <div class="from-group">
+          <label>Klasa kolumny</label>
+          <input
+            @input="onChange"
+            v-model="value.class"
+            type="text"
+            class="form-control"
+          />
+        </div>
+      </div>
+      <div>
+        <button
+          @click="modalColumnsSettings = false"
+          class="btn btn-outline-secondary"
+        >
+          Zapisz i zamknij
+        </button>
+      </div>
+    </b-modal>
+    <draggable
+      :options="{ handle: '.box-move' }"
+      v-model="value.items"
+      @start="drag = true"
+      @end="
+        drag = false;
+        onChange();
+      "
+      group="people"
+    >
+      <template #item="{ element, index }">
+        <div class="pb_section table-bordered p-2 pl-3 pr-3 mb-3 rounded">
+          <component
+            @itemRemoved="removeItem"
+            :key="index"
+            v-bind:is="element.name"
+            v-bind:value="element"
+            v-model="value.items[index]"
+            @update:model-value="onChange"
+            @change="onChange"
+          ></component>
+        </div>
+      </template>
+    </draggable>
+    <div :class="value.items.length > 0 ? 'pagebuilder-column-hover-padding' : ''"></div>
+    <div
+      class="posistion-relative"
+      :class="value.items.length > 0 ? 'pagebuilder-column-hover' : 'd-flex'"
+    >
+      <div class="flex-fill mr-0 pr-0">
+        <button
+          class="w-100 btn btn-icon-sm btn-outline-primary off_tooltip_off"
+          @click.prevent="modalAddBox = !modalAddBox"
+          title="Dodaj widget"
+        >
+          <i class="material-icons-outlined">add_circle_outline</i>
+        </button>
+      </div>
+      <div class="ml-0 pl-0">
+        <a
+          title="Ustawienia kolumny"
+          class="btn-icon-sm"
+          @click.prevent="modalColumnsSettings = !modalColumnsSettings"
+          ><i
+            style="cursor: pointer; position: relative; top: 5px; margin-left: 5px"
+            class="material-icons-outlined"
+            >create</i
+          ></a
+        >
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import draggable from "vuedraggable";
+import MagicoModal from "./MagicoModal.vue";
+import SectionText from "./plugin/SectionText.vue";
+import SectionTextarea from "./plugin/SectionTextarea.vue";
+import SectionHtml from "./plugin/SectionHtml.vue";
+import SectionImage from "./plugin/SectionImage.vue";
+
+import DropdownSectionSection from "./DropdownSectionSection.vue";
+
+export default {
+  data: function () {
+    return { opcja: "", modalAddBox: false, drag: false, modalColumnsSettings: false };
+  },
+  props: { value: Object },
+  emits: ["update:modelValue"],
+  components: {
+    draggable,
+    "b-modal": MagicoModal,
+    core_section_textarea: SectionTextarea,
+    core_section_text: SectionText,
+    core_section_html: SectionHtml,
+    core_section_image: SectionImage,
+
+    DropdownSectionSection,
+  },
+  methods: {
+    onChange: function () {
+      this.$emit("change");
+    },
+    rand: function () {
+      return "component" + Math.random() * 100;
+    },
+    removeItem(item) {
+      this.value.items.indexOf(item);
+      this.value.items.splice(this.value.items.indexOf(item), 1);
+
+      this.onChange();
+    },
+    clickAdd: function (item) {
+      console.log(item);
+      this.modalAddBox = false;
+      var a = { name: item, open: true };
+      this.value.items.push(a);
+      this.onChange();
+    },
+  },
+};
+</script>
+<style>
+.pagebuilder-column-hover {
+  display: none;
+}
+
+.pagebuilder-column-hover-padding {
+  padding: 17px;
+}
+
+.pagebuilder-column:hover .pagebuilder-column-hover {
+  display: flex;
+}
+
+.pagebuilder-column:hover .pagebuilder-column-hover-padding {
+  padding: 0px;
+}
+</style>