init

src/components/DropdownSectionSection.vue

@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <div class="row col-md-12 pagebuilder_section">
+      <div
+        v-for="(item, index) in $pagebuilder.items"
+        :key="index"
+        class="col-md-2"
+      >
+        <template v-if="!item.type || item.type != 'custom'">
+          <div class="my-check v2">
+            <label
+              @click="$emit('choose', index)"
+              :for="'pos_' + index"
+            >
+              <div
+                style="width: 100%"
+                v-if="item.svg"
+                v-html="item.svg"
+              ></div>
+              <img
+                v-else
+                style="width: 100%"
+                :src="'https://cdn.magico.pl/pagebuilder/images/' + index + '.jpg'"
+                alt="1 kolumna"
+              />
+              <span
+                style="cursor: pointer"
+                class="d-inline-block w-100 text-center mt-1 mb-1"
+                >{{ item.label }}</span
+              >
+            </label>
+          </div>
+        </template>
+      </div>
+    </div>
+    <!-- <div class="col-md-12 text-center">
+            <h3>DESIGN SYSTEM</h3>
+            <div>
+                <div class="row col-md-12 pagebuilder_section">
+                    <div v-for="(item, index) in items" class="col-md-2" v-if="item.type && item.type == 'custom'">
+                        <div class="form-check v2">
+                            <input @input="event => { $emit('update:modelValue', index) }" type="radio" :id="'pos_' + index"
+                                name="pos">
+                            <label :for="'pos_' + index">
+                                <div style="width:100%" v-if="item.svg" v-html="item.svg"></div>
+                                <img v-else style="width:100%"
+                                    :src="'`+ BASE_URL +`' + 'assets/images/pagebuilder/' + index + '.jpg'"
+                                    alt="1 kolumna">
+                                <span style="cursor: pointer" class="d-inline-block w-100 text-center mt-1 mb-1">{{
+                                        item.label
+                                }}</span>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div> -->
+  </div>
+</template>
+<script>
+
+export default {
+    methods: {},
+
+    emits:['choose'],
+    data: function () {
+        return {
+            items: {}, //{'core_pagebuilder_section_naglowek':'core_pagebuilder_section_naglowek', 'core_pagebuilder_section_tresc':'core_pagebuilder_section_tresc', 'core_pagebuilder_section_widget_jakis':'core_pagebuilder_section_widget_jakis'},
+        }
+    },
+    mounted() {
+
+    }
+}
+</script>
+<style>
+.my-check input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+}
+
+.my-check label {
+  cursor: pointer;
+}
+</style>