play with this sphathegi code

package.json

@@ -1,6 +1,6 @@
 {
   "name": "magico-section",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -11,19 +11,19 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.1",
+    "axios": "^1.4.0",
+    "bootstrap-icons": "^1.10.5",
+    "vuedraggable": "^4.1.0",
     "vue": "^3.3.4"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.2",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vue/eslint-config-prettier": "^8.0.0",
-    "axios": "^1.4.0",
-    "bootstrap": "^5.3.1",
-    "bootstrap-icons": "^1.10.5",
     "eslint": "^8.45.0",
     "eslint-plugin-vue": "^9.15.1",
     "prettier": "^3.0.0",
-    "vite": "^4.4.6",
+    "vite": "^4.4.6"
-    "vuedraggable": "^4.1.0"
   }
 }

src/App.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref } from 'vue'
 import MagicoSection from './components/MagicoSection.vue'
+
 const json = ref({})
 </script>
 
@@ -13,7 +14,7 @@ const json = ref({})
 
   <main>
     <MagicoSection v-model="json"></MagicoSection>
-
+    <pagebuilder-section-plugin></pagebuilder-section-plugin>
     <div class="my-5 bg-dark text-white p-3">
       {{ json }}
     </div>

src/components/MagicoSection.vue

@@ -180,7 +180,7 @@
 </template>
 <script>
 import SectionGridChoose from './SectionGridChoose.vue'
-import MagicoModal from './MagicoModal.vue'
+import MagicoModal from './MagicoModal2.vue'
 import { ELEMENTS } from './data'
 import { randId } from './helper'
 import draggable from 'vuedraggable'

src/components/PagebuilderSectionPlugin.vue

@@ -9,17 +9,16 @@
       <a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"
         ><i class="material-icons-outlined">create</i></a
       >
-      <b-modal
+      <magico-modal
-        no-enforce-focus
         class_other="modal-xl"
         v-model="modalBox"
         :title="langs.label"
         v-on:hide="onCloseModal"
       >
         <div class="mb-4">
-          <div class="form-group">
+          <!-- <div class="form-group">
             <textarea rows="40" class="form-control" v-model="text"></textarea>
-          </div>
+          </div> -->
         </div>
         <div class="d-flex">
           <button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">
@@ -27,9 +26,9 @@
           </button>
         </div>
         <div class="p-2">
-          <!-- <MagicoSection v-model="data.data"></MagicoSection> -->
+          <MagicoSection v-model="data.data"></MagicoSection>
         </div>
-      </b-modal>
+      </magico-modal>
       <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"
         ><i class="material-icons-outlined">delete</i></a
       >
@@ -38,23 +37,27 @@
   </div>
 </template>
 <script>
-import MagicoModal from './MagicoModal.vue'
+import MagicoModal from './MagicoModal2.vue'
-// import MagicoSection from './MagicoSection.vue'
+import MagicoSection from './MagicoSection.vue'
 export default {
   components: {
-    'b-modal': MagicoModal,
+    MagicoModal,
-    // MagicoSection
+    MagicoSection
   },
   props: {
-    modelValue: Object
+    modelValue: {
+      type: Object,
+      default: () => {}
+    }
   },
   mounted: function () {
+    console.log('TUTUAUTUAUTAUTAUTUAUTUAUTUAUT',this);
     this.name = this.modelValue && this.modelValue.name ? this.modelValue.name : this.$options.name
     this.title = this.modelValue && this.modelValue.title ? this.modelValue.title : this.title
     this.id = this.modelValue && this.modelValue.id ? this.modelValue.id : this.id
     this.data = this.modelValue && this.modelValue.data ? this.modelValue.data : this.data
-    this.type = this.type && this.modelValue.data ? this.modelValue.type : this.type
+    this.type = this.modelValue && this.modelValue.data ? this.modelValue.type : this.type
-    if (this.modelValue.open) this.modalBox = true
+    if (this.modelValue && this.modelValue.open) this.modalBox = true
     console.log('mounted html')
     this.$emit('update:modelValue', this.modelValue)
   },
@@ -78,7 +81,7 @@ export default {
   },
   computed: {
     ctext: function () {
-      return this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : ''
+      return this.modelValue && this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : ''
     }
   },
   methods: {
@@ -89,7 +92,10 @@ export default {
       this.modalBox = false
       this.$emit('update:modelValue', {
         name: this.name,
-        text: this.text
+        title: this.title,
+        id: this.id,
+        data: this.data,
+        type: this.type
       })
     }
   }

src/components/SectionRow.vue

@@ -247,7 +247,7 @@
   </div>
 </template>
 <script>
-import MagicoModal from './MagicoModal.vue'
+import MagicoModal from './MagicoModal2.vue'
 import draggable from 'vuedraggable'
 import SectionElement from './SectionElement.vue'
 export default {