vue app

package-lock.json

@@ -8,8 +8,11 @@
       "name": "magicopagebuilder",
       "version": "0.1.0",
       "dependencies": {
+        "boostrap": "^2.0.0",
+        "bootstrap": "^5.1.3",
         "core-js": "^3.6.5",
-        "vue": "^2.6.11"
+        "vue": "^2.6.11",
+        "vuedraggable": "^2.24.3"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~4.5.11",
@@ -1829,6 +1832,16 @@
         "node": ">= 6"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@soda/friendly-errors-webpack-plugin": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz",
@@ -2152,6 +2165,18 @@
         "svg-tags": "^1.0.0"
       }
     },
+    "node_modules/@vue/babel-plugin-jsx/node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@vue/babel-plugin-transform-vue-jsx": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.2.1.tgz",
@@ -2178,43 +2203,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/@vue/babel-preset-app": {
-      "version": "4.5.18",
-      "resolved": "https://registry.npmjs.org/@vue/babel-preset-app/-/babel-preset-app-4.5.18.tgz",
-      "integrity": "sha512-P7ASKBNuz3IZxvO5VPsPGjRey4KRNMJ9Rav0nJ/v+m0ny6uUuwE03Xoli5G3mvdijUbtVZT7+/uULMCEg4bGew==",
-      "dev": true,
-      "dependencies": {
-        "@babel/core": "^7.11.0",
-        "@babel/helper-compilation-targets": "^7.9.6",
-        "@babel/helper-module-imports": "^7.8.3",
-        "@babel/plugin-proposal-class-properties": "^7.8.3",
-        "@babel/plugin-proposal-decorators": "^7.8.3",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@babel/plugin-syntax-jsx": "^7.8.3",
-        "@babel/plugin-transform-runtime": "^7.11.0",
-        "@babel/preset-env": "^7.11.0",
-        "@babel/runtime": "^7.11.0",
-        "@vue/babel-plugin-jsx": "^1.0.3",
-        "@vue/babel-preset-jsx": "^1.2.4",
-        "babel-plugin-dynamic-import-node": "^2.3.3",
-        "core-js": "^3.6.5",
-        "core-js-compat": "^3.6.5",
-        "semver": "^6.1.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "*",
-        "core-js": "^3",
-        "vue": "^2 || ^3.0.0-0"
-      },
-      "peerDependenciesMeta": {
-        "core-js": {
-          "optional": true
-        },
-        "vue": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@vue/babel-preset-jsx": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@vue/babel-preset-jsx/-/babel-preset-jsx-1.2.4.tgz",
@@ -2299,15 +2287,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@vue/babel-sugar-v-model/node_modules/camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/@vue/babel-sugar-v-model/node_modules/html-tags": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz",
@@ -2331,15 +2310,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@vue/babel-sugar-v-on/node_modules/camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/@vue/cli-overlay": {
       "version": "4.5.18",
       "resolved": "https://registry.npmjs.org/@vue/cli-overlay/-/cli-overlay-4.5.18.tgz",
@@ -2364,6 +2334,43 @@
         "@vue/cli-service": "^3.0.0 || ^4.0.0-0"
       }
     },
+    "node_modules/@vue/cli-plugin-babel/node_modules/@vue/babel-preset-app": {
+      "version": "4.5.18",
+      "resolved": "https://registry.npmjs.org/@vue/babel-preset-app/-/babel-preset-app-4.5.18.tgz",
+      "integrity": "sha512-P7ASKBNuz3IZxvO5VPsPGjRey4KRNMJ9Rav0nJ/v+m0ny6uUuwE03Xoli5G3mvdijUbtVZT7+/uULMCEg4bGew==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.11.0",
+        "@babel/helper-compilation-targets": "^7.9.6",
+        "@babel/helper-module-imports": "^7.8.3",
+        "@babel/plugin-proposal-class-properties": "^7.8.3",
+        "@babel/plugin-proposal-decorators": "^7.8.3",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-jsx": "^7.8.3",
+        "@babel/plugin-transform-runtime": "^7.11.0",
+        "@babel/preset-env": "^7.11.0",
+        "@babel/runtime": "^7.11.0",
+        "@vue/babel-plugin-jsx": "^1.0.3",
+        "@vue/babel-preset-jsx": "^1.2.4",
+        "babel-plugin-dynamic-import-node": "^2.3.3",
+        "core-js": "^3.6.5",
+        "core-js-compat": "^3.6.5",
+        "semver": "^6.1.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "*",
+        "core-js": "^3",
+        "vue": "^2 || ^3.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "core-js": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vue/cli-plugin-eslint": {
       "version": "4.5.18",
       "resolved": "https://registry.npmjs.org/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.5.18.tgz",
@@ -3504,6 +3511,24 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
+    "node_modules/boostrap": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/boostrap/-/boostrap-2.0.0.tgz",
+      "integrity": "sha512-JEeFMOweKeGXEM9rt95eaVISOkluG9aKcl0jQCETOVH9jynCZxuBZe2oWgcWJpj5wqYWZl625SnW7OgHT2Ineg==",
+      "deprecated": "Package no longer supported. Contact support@npmjs.com for more info."
+    },
+    "node_modules/bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.10.2"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3908,15 +3933,12 @@
       }
     },
     "node_modules/camelcase": {
-      "version": "6.3.0",
+      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
       "dev": true,
       "engines": {
-        "node": ">=10"
+        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/caniuse-api": {
@@ -5076,15 +5098,6 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
-    "node_modules/css-loader/node_modules/camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/css-loader/node_modules/json5": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
@@ -6207,16 +6220,16 @@
       }
     },
     "node_modules/eslint-scope": {
-      "version": "4.0.3",
+      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "dev": true,
       "dependencies": {
-        "esrecurse": "^4.1.0",
+        "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
       },
       "engines": {
-        "node": ">=4.0.0"
+        "node": ">=8.0.0"
       }
     },
     "node_modules/eslint-utils": {
@@ -6249,19 +6262,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/eslint/node_modules/eslint-scope": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dev": true,
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
     "node_modules/eslint/node_modules/glob-parent": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -12688,6 +12688,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -14322,19 +14327,6 @@
         "eslint": ">=5.0.0"
       }
     },
-    "node_modules/vue-eslint-parser/node_modules/eslint-scope": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dev": true,
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
     "node_modules/vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -14548,6 +14540,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vuedraggable": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
+      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+      "dependencies": {
+        "sortablejs": "1.10.2"
+      }
+    },
     "node_modules/watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
@@ -14904,15 +14904,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/webpack-dev-server/node_modules/camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/webpack-dev-server/node_modules/chokidar": {
       "version": "2.1.8",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
@@ -15278,6 +15269,19 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/webpack/node_modules/eslint-scope": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
+      "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.1.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/webpack/node_modules/json5": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
@@ -16939,6 +16943,12 @@
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
+    "@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
+      "peer": true
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz",
@@ -17237,6 +17247,14 @@
         "camelcase": "^6.0.0",
         "html-tags": "^3.1.0",
         "svg-tags": "^1.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+          "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+          "dev": true
+        }
       }
     },
     "@vue/babel-plugin-transform-vue-jsx": {
@@ -17261,30 +17279,6 @@
         }
       }
     },
-    "@vue/babel-preset-app": {
-      "version": "4.5.18",
-      "resolved": "https://registry.npmjs.org/@vue/babel-preset-app/-/babel-preset-app-4.5.18.tgz",
-      "integrity": "sha512-P7ASKBNuz3IZxvO5VPsPGjRey4KRNMJ9Rav0nJ/v+m0ny6uUuwE03Xoli5G3mvdijUbtVZT7+/uULMCEg4bGew==",
-      "dev": true,
-      "requires": {
-        "@babel/core": "^7.11.0",
-        "@babel/helper-compilation-targets": "^7.9.6",
-        "@babel/helper-module-imports": "^7.8.3",
-        "@babel/plugin-proposal-class-properties": "^7.8.3",
-        "@babel/plugin-proposal-decorators": "^7.8.3",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@babel/plugin-syntax-jsx": "^7.8.3",
-        "@babel/plugin-transform-runtime": "^7.11.0",
-        "@babel/preset-env": "^7.11.0",
-        "@babel/runtime": "^7.11.0",
-        "@vue/babel-plugin-jsx": "^1.0.3",
-        "@vue/babel-preset-jsx": "^1.2.4",
-        "babel-plugin-dynamic-import-node": "^2.3.3",
-        "core-js": "^3.6.5",
-        "core-js-compat": "^3.6.5",
-        "semver": "^6.1.0"
-      }
-    },
     "@vue/babel-preset-jsx": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@vue/babel-preset-jsx/-/babel-preset-jsx-1.2.4.tgz",
@@ -17351,12 +17345,6 @@
         "svg-tags": "^1.0.0"
       },
       "dependencies": {
-        "camelcase": {
-          "version": "5.3.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-          "dev": true
-        },
         "html-tags": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz",
@@ -17374,14 +17362,6 @@
         "@babel/plugin-syntax-jsx": "^7.2.0",
         "@vue/babel-plugin-transform-vue-jsx": "^1.2.1",
         "camelcase": "^5.0.0"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "5.3.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-          "dev": true
-        }
       }
     },
     "@vue/cli-overlay": {
@@ -17403,6 +17383,32 @@
         "cache-loader": "^4.1.0",
         "thread-loader": "^2.1.3",
         "webpack": "^4.0.0"
+      },
+      "dependencies": {
+        "@vue/babel-preset-app": {
+          "version": "4.5.18",
+          "resolved": "https://registry.npmjs.org/@vue/babel-preset-app/-/babel-preset-app-4.5.18.tgz",
+          "integrity": "sha512-P7ASKBNuz3IZxvO5VPsPGjRey4KRNMJ9Rav0nJ/v+m0ny6uUuwE03Xoli5G3mvdijUbtVZT7+/uULMCEg4bGew==",
+          "dev": true,
+          "requires": {
+            "@babel/core": "^7.11.0",
+            "@babel/helper-compilation-targets": "^7.9.6",
+            "@babel/helper-module-imports": "^7.8.3",
+            "@babel/plugin-proposal-class-properties": "^7.8.3",
+            "@babel/plugin-proposal-decorators": "^7.8.3",
+            "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+            "@babel/plugin-syntax-jsx": "^7.8.3",
+            "@babel/plugin-transform-runtime": "^7.11.0",
+            "@babel/preset-env": "^7.11.0",
+            "@babel/runtime": "^7.11.0",
+            "@vue/babel-plugin-jsx": "^1.0.3",
+            "@vue/babel-preset-jsx": "^1.2.4",
+            "babel-plugin-dynamic-import-node": "^2.3.3",
+            "core-js": "^3.6.5",
+            "core-js-compat": "^3.6.5",
+            "semver": "^6.1.0"
+          }
+        }
       }
     },
     "@vue/cli-plugin-eslint": {
@@ -17432,7 +17438,8 @@
       "version": "4.5.18",
       "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.18.tgz",
       "integrity": "sha512-8lnxtRJLa6Ki4FFYDtVA6Q4CRSjzWPXRkY7v8779nNq8eVLpGEyOtqDgu/VvNBs7EGKmveXZFNu8dUsfuTt7qA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "4.5.18",
@@ -17563,7 +17570,8 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
       "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
@@ -17778,7 +17786,8 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -17808,13 +17817,15 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
       "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -18326,6 +18337,17 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
+    "boostrap": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/boostrap/-/boostrap-2.0.0.tgz",
+      "integrity": "sha512-JEeFMOweKeGXEM9rt95eaVISOkluG9aKcl0jQCETOVH9jynCZxuBZe2oWgcWJpj5wqYWZl625SnW7OgHT2Ineg=="
+    },
+    "bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -18666,9 +18688,9 @@
       }
     },
     "camelcase": {
-      "version": "6.3.0",
+      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
       "dev": true
     },
     "caniuse-api": {
@@ -19586,12 +19608,6 @@
         "semver": "^6.3.0"
       },
       "dependencies": {
-        "camelcase": {
-          "version": "5.3.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-          "dev": true
-        },
         "json5": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
@@ -20438,16 +20454,6 @@
           "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
           "dev": true
         },
-        "eslint-scope": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-          "dev": true,
-          "requires": {
-            "esrecurse": "^4.3.0",
-            "estraverse": "^4.1.1"
-          }
-        },
         "glob-parent": {
           "version": "5.1.2",
           "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -20554,12 +20560,12 @@
       }
     },
     "eslint-scope": {
-      "version": "4.0.3",
+      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "dev": true,
       "requires": {
-        "esrecurse": "^4.1.0",
+        "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
       }
     },
@@ -25688,6 +25694,11 @@
         }
       }
     },
+    "sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -27013,18 +27024,6 @@
         "esquery": "^1.4.0",
         "lodash": "^4.17.21",
         "semver": "^6.3.0"
-      },
-      "dependencies": {
-        "eslint-scope": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-          "dev": true,
-          "requires": {
-            "esrecurse": "^4.3.0",
-            "estraverse": "^4.1.1"
-          }
-        }
       }
     },
     "vue-hot-reload-api": {
@@ -27197,6 +27196,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuedraggable": {
+      "version": "2.24.3",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
+      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+      "requires": {
+        "sortablejs": "1.10.2"
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
@@ -27360,6 +27367,16 @@
           "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==",
           "dev": true
         },
+        "eslint-scope": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
+          "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.1.0",
+            "estraverse": "^4.1.1"
+          }
+        },
         "json5": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
@@ -27519,12 +27536,6 @@
           "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
           "dev": true
         },
-        "camelcase": {
-          "version": "5.3.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-          "dev": true
-        },
         "chokidar": {
           "version": "2.1.8",
           "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",

package.json

@@ -8,8 +8,11 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "boostrap": "^2.0.0",
+    "bootstrap": "^5.1.3",
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.11",
@@ -35,8 +38,8 @@
     "rules": {}
   },
   "browserslist": [
-    "> 1%",
+    ">0.2%",
-    "last 2 versions",
+    "not dead",
-    "not dead"
+    "not op_mini all"
   ]
 }

public/index.html

@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>

src/App.vue

@@ -1,17 +1,25 @@
 <template>
-  <div id="app">
+  <div id="app" class="container">
-    <img alt="Vue logo" src="./assets/logo.png">
+    <img alt="Vue logo" style="width:100px" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <h2>Pagebuilder Magico</h2>
+    <MagicoPagebuilder v-model="data" />
+
+    <div class="bg-dark text-light mt-4 p-2">{{data}}</div>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import MagicoPagebuilder from './components/MagicoPagebuilder.vue'
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    MagicoPagebuilder
+  },
+  data: function(){
+    return {
+      data:''
+    }
   }
 }
 </script>

src/components/DropdownSectionGrid.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="row p-2">
+        <div v-for="(item, index) in items" :key="index" class="col-md-3">
+
+            <div class="my-check v2">
+
+                <input class="form-control" :id="item.name" @input="event => { $emit('input', event.target.value) }"
+                    type="radio" v-model="value" :value="item.name">
+
+                <label :for="item.name"><img style="width:100%"
+                        :src="'https:/magico.pl/assets/images/pagebuilder/' + item.name + '.jpg'"
+                        :alt="item.label" /></label>
+            </div>
+
+        </div>
+
+    </div>
+</template>
+<script>
+import grid from './grid.js'
+
+export default {
+
+    methods: {},
+    data: function () {
+        return {
+            items: grid,
+            value: '',
+        }
+    },
+}
+</script>
+<style>
+.my-check input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+}
+
+.my-check label {
+    cursor: pointer;
+}
+</style>

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/MagicoModal.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="modal" :id="id">
+        <div class="modal-dialog " :class="class_other">
+            <div v-if="modal" class="modal-content">
+                <div v-if="title" class="modal-header">
+                    <h4 class="modal-title" v-html="title"></h4>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="p-3">
+
+                    <slot></slot>
+                    </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { Modal } from 'bootstrap';
+export default {
+    props: ['value', 'title', 'class_other'],
+    data: function() {
+        return {
+            id: 'modal' + Math.round(Math.random() * 100000),
+            modal: null,
+        }
+    },
+    mounted() {
+        this.modal = new Modal(document.getElementById(this.id))
+        let vm = this;
+        document.getElementById(this.id).addEventListener('hidden.bs.modal', function() {
+            vm.triggerModal(false);
+        })
+        this.triggerModal(this.value);
+    },
+    methods: {
+        triggerModal: function(value) {
+            if (value == true) {
+                this.modal.show();
+            } else {
+                this.modal.hide()
+                this.$emit('hide');
+            }
+            this.$emit('input',value);
+        }
+    },
+    watch: {
+        value: function() {
+            this.triggerModal(this.value);
+        }
+    }
+}
+</script>

src/components/MagicoPagebuilder.vue

@@ -0,0 +1,200 @@
+<template>
+  <section class="content card-body table-bordered" id="pagebuilder">
+    <div class="d-flex justify-content-end">
+
+      <!-- <button @click.prevent="modalLoad = !modalLoad; pageType = { name: null }" title="Wczytaj szablon do schowka"
+        class="btn btn-outline-primary btn-icon-sm"><span class="material-icons-outlined">save</span></button>
+      <button @click.prevent="modalSave = !modalSave; pageType = { name: null }" title="Zapisz szablon do schowka"
+        class="btn btn-outline-success btn-icon-sm"><span class="material-icons-outlined">save</span></button>
+
+      <button v-if="showcopy" class="btn btn-outline-secondary mr-1" @click.prevent="modalCopy = !modalCopy;">Kopiuj
+        układ z innej strony</button> -->
+    </div>
+
+    <draggable :options="{ handle: '.box-move' }" v-model="comps" @start="drag = true" @end="drag = false; onChange()">
+      <div v-for="(item, index) in comps" :key="index">
+        <PagebuilderSection :value="item" v-on:deleteSection="deleteSection" v-on:copy="copySection"
+          @change="onChange"></PagebuilderSection>
+      </div>
+    </draggable>
+
+    <b-modal class_other="modal-xl" v-model="modalSave" v-on:onClose="modalSave = false">
+      <div slot="modal-title"><span>Zapisz szablon do schowka</span></div>
+      <div>
+        <!-- <core_tempaltes_select_pagebuilder_save v-model="pageType" :szablon="value">
+        </core_tempaltes_select_pagebuilder_save> -->
+      </div>
+      <div slot="modal-footer"><button @click.prevent="modalSaveSave" class="btn btn-success mr-1"
+          :disabled="!pageType.name">Zapisz do schowka </button></div>
+    </b-modal>
+
+    <b-modal class_other="modal-xl" v-model="modalLoad" v-on:onClose="modalLoad = false">
+      <div slot="modal-title"><span>Wczytaj szablon ze schowka</span></div>
+      <div>
+        <!-- <core_tempaltes_select_pagebuilder v-model="pageType"></core_tempaltes_select_pagebuilder> -->
+      </div>
+      <div slot="modal-footer"><button class="btn btn-primary mr-1" :disabled="!pageType.id"
+          @click.prevent="modalLoadClick">Wczytaj ze schowka</button></div>
+    </b-modal>
+
+    <b-modal class_other="modal-xl" v-model="modalCopy" v-on:onClose="modalCopy = false">
+      <div slot="modal-title"><span>Zapisz lub Kopiuj układ w schowku</span></div>
+      <div>
+        <!-- <cms_pages_select_page v-model="pageType"></cms_pages_select_page> -->
+      </div>
+      <div slot="modal-footer"><button class="btn btn-primary mr-1" :disabled="!pageType.id"
+          @click.prevent="changeBody">Skopiuj układ i treść </button></div>
+    </b-modal>
+
+    <b-modal class_other="modal-xl" v-model="modalAddSection" title=" Dodaj sekcję" v-on:onClose="modalAddSection = false" hide-footer>
+      <div slot="modal-title"><span>
+         
+        </span></div>
+      <div>
+        <DropdownSectionGrid  v-on:input="addSection" v-model="optionx">
+        </DropdownSectionGrid>
+      </div>
+      <div slot="modal-footer"></div>
+    </b-modal>
+    <!-- <textarea style="display:none" :name="namex">{{ comps }}</textarea> --><button
+      class="btn btn-block btn-primary mt-4" @click.prevent="modalAddSection = !modalAddSection; optionx = false">
+      Dodaj sekcję
+    </button>
+
+  </section>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import grid from './grid.js'
+import MagicoModal from './MagicoModal.vue'
+import PagebuilderSection from './PagebuilderSection.vue'
+import DropdownSectionGrid from './DropdownSectionGrid.vue'
+
+export default {
+  name: 'HelloWorld',
+  components: {
+    'b-modal': MagicoModal,
+    PagebuilderSection,
+    draggable,
+    DropdownSectionGrid
+  },
+  data: function () {
+    return {
+      grid: grid,
+      namex: 'body', //podmieniane przez name
+      drag: false,
+      optionx: '',
+      comps: [],
+      modalAddSection: false,
+      modalCopy: false,
+      pageType: { id: false },
+      modalSave: false,
+      modalLoad: false,
+    }
+  },
+  props: ['name', 'value', 'showcopy', 'lang'],
+  mounted: function () {
+    //var trimmed = $("#body_pagebuilder").val().replace((/  |\r\n|\n|\r/gm),"");
+    var trimmed = this.value//.replace((/{2} |\r\n|\n|\r/gm), "");
+    try {
+      this.comps = JSON.parse(trimmed);
+    } catch (e) {
+      this.comps = [{ "label": "1 kolumna  ", "name": "col_1", "columns": [{ "name": "col-md-12", "items": [{ "name": "core_section_textarea" }] }] }]
+    }
+
+  },
+  created: function () {
+    if (this.name) this.namex = this.name; else this.namxe = "body";
+  },
+  watch: {
+    // whenever question changes, this function will run
+    comps: function (newQuestion) {
+      console.log('nq', newQuestion)
+    }
+  },
+  methods: {
+    onChange: function () {
+      this.$emit('input', JSON.stringify(this.comps));
+      this.$emit('change');
+    },
+    copySection: function (item) {
+      this.comps.push(JSON.parse(JSON.stringify(item)));
+      this.onChange();
+
+    },
+    deleteSection: function (item) {
+      this.comps.splice(this.comps.indexOf(item), 1);
+      this.onChange();
+    },
+    addSection: function () {
+      this.modalAddSection = false;
+      var columna = grid;
+      this.comps.push(JSON.parse(JSON.stringify(columna[this.optionx])));
+      this.onChange();
+
+    },
+    modalSaveSave: function () {
+      console.log(this.pageType);
+      // var data = {
+      //   id: this.pageType.id,
+      //   name: this.pageType.name,
+      //   source: this.value,
+      //   description: this.pageType.description,
+      // }
+      // axios.post(BASE_URL + 'api/pagebuilder/index', data).then(response => {
+      //   this.pageType = {};
+      //   this.modalSave = false;
+      // });
+    },
+    modalLoadClick: function () {
+      this.pageType.body = this.pageType.source;
+      this.changeBody();
+    },
+    changeBody() {
+      var t = this;
+      var value = this.pageType.body;
+      var trimmed = value
+      try {
+        //this.comps.forEach((item)=>{
+        //    this.deleteSection(item);
+        //})
+        this.comps = []
+        setTimeout(function () {
+          t.comps = JSON.parse(trimmed);
+          t.onChange();
+
+        }, 300);
+        //this.comps =JSON.parse(trimmed);
+      } catch (e) {
+        this.comps = [{ "label": "1 kolumna  ", "name": "col_1", "columns": [{ "name": "col-md-12", "items": [{ "name": "core_section_textarea" }] }] }]
+      }
+
+      this.modalCopy = false;
+      this.modalSave = false;
+      this.modalLoad = false;
+    }
+  },
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+
+a {
+  color: #42b983;
+}
+</style>

src/components/PagebuilderContent.vue

@@ -0,0 +1,82 @@
+<template>
+    <div :class="value.name">
+
+        <b-modal v-model="modalAddBox" size="lg" v-on:onClose="modalAddBox = false" title="Dodaj widżet">
+
+            <div>
+                <!-- <core_pagebuilder_dropdown_section_section v-on:input="clickAdd" v-model="opcja" :value="opcja">
+                </core_pagebuilder_dropdown_section_section> -->
+            </div>
+            <div slot="modal-footer"></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 v-model="value.class" type="text" class="form-control">
+                </div>
+            </div>
+            <div slot="modal-footer"><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">
+
+            <div v-for="(item, index) in value.items" :key="rand(index)"
+                class="pb_section table-bordered p-2 pl-3 pr-3 mb-3 rounded">
+                <component @itemRemoved="removeItem" :key="rand(index)" v-bind:is="item.name" v-bind:value="item"
+                    v-model="value.items[index]" @input="onChange" @change="onChange"></component>
+            </div>
+        </draggable>
+        <div class="row">
+            <div class="col-11 mr-0 pr-0">
+                <button class="mb-3 w-100 btn btn-icon-sm btn-primary off_tooltip_off"
+                    @click.prevent="modalAddBox = !modalAddBox" title=" "> <i
+                        class="material-icons-outlined">add_circle_outline</i></button>
+            </div>
+            <div class="col-1 ml-0 pl-0">
+                <a title="Ustawienia kolumny" class="btn-icon-sm"
+                    @click.prevent="modalColumnsSettings = !modalColumnsSettings"><i
+                        style="position:absolute; top:5px; right:0; cursor:pointer"
+                        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'
+
+export default {
+    data: function () { return { opcja: '', modalAddBox: false, drag: false, modalColumnsSettings: false } },
+    props: { value: Object },
+    components: {
+        draggable,
+        'b-modal': MagicoModal,
+        'core_section_text': SectionText,
+    },
+    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 () {
+            this.modalAddBox = false;
+            var a = { name: this.opcja, open: true }
+            this.value.items.push(a);
+            this.onChange();
+        }
+    }
+}
+</script>

src/components/PagebuilderSection.vue

@@ -0,0 +1,121 @@
+<template>
+    <div class="row pb-3 mb-3 position-relative border-bottom pb_outer_section pr-5">
+
+        <div class="col-sm-12">
+            <div class="row p-0 mt-3">
+                <PagebuilderContent class="col-sm-12" v-for="(column, index) in value.columns" :value="column"
+                    :key="rand(index)" @change="onChange"></PagebuilderContent>
+            </div>
+        </div>
+
+
+        <div class="pb_section_options position-absolute" style="top: 12px; right: 14px; width: 20px;">
+            <a href="#" title="pilder_addsection_moveicon');?>" class="box-settings-icon box-move"><i
+                    class="material-icons-outlined">sort</i></a>
+            <a href="#" title="pagebuilder_addsection_duplicateicon" @click.prevent="copySection"
+                class="box-settings-icon box-copy text-warning"><i class="material-icons-outlined">file_copy</i></a>
+            <a href="#" title="pagebuilder_addsection_settingsicon" @click.prevent="toggleSettings"
+                class="box-settings-icon box-settings text-secondary"><i
+                    class="material-icons-outlined">settings</i></a>
+            <a href="#" title="pagebuilder_addsection_deleteicon" @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="pagebuilder_addsection_settings_settings"
+                @onClose="ustawieniaSave()">
+
+                <div>
+                    <div>
+                        <div class="form-group mb-2">
+                            <label class="w-100 col-form-label">
+                                pagebuilder_addsection_settings_cssclass
+                            </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">
+                        pagebuilder_addsection_settings_saveclose
+                    </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 },
+    components: {
+        'b-modal': MagicoModal,
+        PagebuilderContent
+    },
+    data: function () { return { items: grid, value2: '', show_settings: false } },
+    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 },
+
+    },
+    mounted: function () {
+    },
+
+}
+
+</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>

src/components/grid.js

@@ -0,0 +1,14 @@
+export default {
+    'col_1': { label: '1 kolumna  ', name: 'col_1', columns: [{ name: 'col-md-12', items: [] }] },
+    'col_2': { label: '2 kolumny po 6 ', name: 'col_2', columns: [{ name: 'col-md-6', items: [] }, { name: 'col-md-6', items: [] }] },
+    'col_4_8': { label: '2 kolumny 2 i 8 ', name: 'col_4_8', columns: [{ name: 'col-md-4', items: [] }, { name: 'col-md-8', items: [] }] },
+    'col_8_4': { label: '2 kolkumny 8 i 2 ', name: 'col_8_4', columns: [{ name: 'col-md-8', items: [] }, { name: 'col-md-4', items: [] }] },
+    'col_2_10': { label: '2 kolumny 2 i 10 ', name: 'col_2_10', columns: [{ name: 'col-md-2', items: [] }, { name: 'col-md-10', items: [] }] },
+    'col_10_2': { label: '2 kolkumny 10 i 2 ', name: 'col_10_2', columns: [{ name: 'col-md-10', items: [] }, { name: 'col-md-2', items: [] }] },
+    'col_3': { label: '3 kolumny po 4 ', name: 'col_3', columns: [{ name: 'col-md-4', items: [] }, { name: 'col-md-4', items: [] }, { name: 'col-md-4', items: [] }] },
+    'col_3_6_3': { label: '3 kolumny: 3 ,6, 3 ', name: 'col_3_6_3', columns: [{ name: 'col-md-3', items: [] }, { name: 'col-md-6', items: [] }, { name: 'col-md-3', items: [] }] },
+    'col_6_3_3': { label: '3 kolumny: 6,3,3 ', name: 'col_6_3_3', columns: [{ name: 'col-md-6', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }] },
+    'col_3_3_6': { label: '3 kolumny: 3,3,6 ', name: 'col_3_3_6', columns: [{ name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-6', items: [] }] },
+    'col_4': { label: '4 kolumny po 3 ', name: 'col_4', columns: [{ name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }] },
+    'col_6': { label: '6 kolumn po 2 ', name: 'col_6', columns: [{ name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }] },
+}

src/components/plugin/SectionText.vue

@@ -0,0 +1,103 @@
+<template>
+    <div class="row m-0 p-0 align-items-center">
+        <div class="col-sm-12 col-md-6 p-0">
+            <span class="material-icons-outlined mr-1 box-move" style="cursor:move;">open_with</span><span
+                class="font-weight-bold text-primary">{{ langs.label }}</span>
+        </div>
+
+        <div class="col-sm-12 col-md-6 p-0 text-right">
+            <a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary mr-2"><i
+                    class="material-icons-outlined">create</i></a>
+            <b-modal v-model="modalBox" @close="onCloseModal">
+                <div slot="modal-title">{{ langs.label }}</div>
+                <p>
+                <div class="form-group">
+                    <label class="w-100 col-form-label">{{ langs.content }}</label>
+                    <input class="form-control" type="text" v-model="text" />
+                </div>
+                <div class="form-group">
+                    <label class="w-100 col-form-label">{{ langs.type }}</label>
+                    <select class="form-control" v-model="h_type">
+                        <option value="">{{ langs.typeplaintext }}</option>
+                        <option value="h1">{{ langs.typeheader }} 1</option>
+                        <option value="h2">{{ langs.typeheader }} 2</option>
+                        <option value="h3">{{ langs.typeheader }} 3</option>
+                        <option value="h4">{{ langs.typeheader }} 4</option>
+                        <option value="h5">{{ langs.typeheader }} 5</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label class="w-100 col-form-label">Wyrównanie</label>
+                    <b-form-group label="Button style radios" v-slot="{ ariaDescribedby }">
+                        <b-form-radio-group id="btn-radios-1" v-model="align" :aria-describedby="ariaDescribedby"
+                            name="radios-btn-default" buttons>
+                            <b-form-radio value="left"><span class="material-icons">format_align_left</span>
+                            </b-form-radio>
+                            <b-form-radio value="center"><span class="material-icons">format_align_center</span>
+                            </b-form-radio>
+                            <b-form-radio value="right"><span class="material-icons">format_align_right</span>
+                            </b-form-radio>
+
+                        </b-form-radio-group>
+                    </b-form-group>
+                </div>
+                
+                <div slot="modal-footer"><button class="btn btn-outline-secondary mr-1"
+                        @click.prevent="onCloseModal">{{ langs.saveclose }}</button></div>
+            </b-modal>
+            <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
+                    class="material-icons-outlined">delete</i></a>
+        </div>
+        <div>
+            <strong class="font-weight-bold">{{ langs.type }}:</strong> {{ h_type }},
+            <strong class="font-weight-bold">{{ langs.content }}:</strong> {{ (text) ? text : ' ' }}
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        value: Object
+    },
+    data: function () {
+        return {
+            langs: {
+                label: "<?=lang('pagebuilder_core_section_text_title')?>",
+                close: "<?=lang('pagebuilder_core_section_text_close')?>",
+                content: "<?=lang('pagebuilder_core_section_text_content')?>",
+                type: "<?=lang('pagebuilder_core_section_text_type')?>",
+                typeplaintext: "<?=lang('pagebuilder_core_section_text_typeplaintext')?>",
+                typeheader: "<?=lang('pagebuilder_core_section_text_typeheader')?>",
+                saveclose: "<?=lang('saveclose')?>"
+            },
+            modalBox: false,
+            text: '',
+            name: '',
+            h_type: '',
+            align: 'left',
+        }
+    },
+    mounted: function () {
+        this.name = (this.value && this.value.name) ? this.value.name : this.name;
+        this.text = (this.value && this.value.text) ? this.value.text : this.text;
+        this.h_type = (this.value && this.value.h_type) ? this.value.h_type : this.h_type;
+        this.align = (this.value && this.value.align) ? this.value.align : this.align;
+        if (this.value.open) this.modalBox = true;
+    },
+    methods: {
+        removeItem: function () {
+            this.$emit('itemRemoved', this.value);
+        },
+        onCloseModal: function () {
+            this.modalBox = false;
+            this.$emit('input', {
+                name: this.name,
+                text: this.text,
+                h_type: this.h_type,
+                align: this.align,
+            })
+        }
+    },
+
+}
+</script>

src/main.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
-
+import 'bootstrap/dist/css/bootstrap.min.css';
 Vue.config.productionTip = false
 
 new Vue({