[
{
"path": ".babelrc",
"content": "{\r\n \"presets\": [\r\n [\"@babel/preset-env\", { \"modules\": false }]\r\n ],\r\n \"env\": {\r\n \"test\": {\r\n \"presets\": [\r\n [\"@babel/preset-env\", { \"targets\": { \"node\": \"current\" }}]\r\n ]\r\n }\r\n }\r\n}"
},
{
"path": ".eslintrc.json",
"content": "{\n \"extends\": [\n \"standard\",\n \"plugin:vue/recommended\"\n ],\n\n \"rules\": {\n \"semi\": \"off\",\n \"no-new\": \"off\",\n \"vue/valid-template-root\": \"off\"\n }\n}"
},
{
"path": ".gitignore",
"content": "# Logs\r\nlogs\r\n*.log\r\nnpm-debug.log*\r\nyarn-debug.log*\r\nyarn-error.log*\r\n\r\n# Dependency directories\r\nnode_modules/\r\njspm_packages/\r\n\r\n# Optional npm cache directory\r\n.npm\r\n\r\n# Optional eslint cache\r\n.eslintcache\r\n\r\n# Yarn Integrity file\r\n.yarn-integrity\r\n\r\n# dotenv environment variables file\r\n.env\r\n\r\n# visual studio code\r\n.vscode\r\n\r\n# macOS custom Icon\r\nIcon/\r\n\r\n# vuepress output\r\ndocs/.vuepress/dist\r\n\r\n# dist folders\r\ndist"
},
{
"path": ".npmignore",
"content": "/docs\r\n/dev\r\n/src\r\n/static\r\n/scripts\r\n.*\r\nyarn.lock"
},
{
"path": "LICENSE",
"content": "MIT License\n\nCopyright (c) 2017 Baianat\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "# Vuse\n\n
\r\n\r\n\r\n```"
},
{
"path": "docs/getting-started.md",
"content": "# getting-started\r\n\r\n## What is this\r\n\r\nThis builder (sections builder) reuses your Vue components as **editable sections** to produce an interactive page builder to the end user, you can use it as a prototyping tool as well as it is sort-of a block builder.\r\n\r\nThe user/developer can then export the builder for usability in multiple formats, the following are the officially supported ones:\r\n\r\n- `json` A json object which can be later used to re-render a page, particularly useful if you plan to have dynamic pages or want to store them in a Database.\r\n- `preview` opens a new page without the editable logic in new tab to see the end result.\r\n- `pwa` produces a zip file which contains all the page files and images neatly packed, this is probably the format you will use for page/prototype landing page builder, The project is augmented by default with service workers to support offline viewing.\r\n\r\nThe builder is just a Vue plugin, so you can integrate this into your own projects without needing to create separate bundles for it.\r\n\r\n## Installation\r\n\r\n### Package managers\r\n\r\nFirst step is to install it using `yarn` or `npm`:\r\n\r\n```bash\r\nnpm install vuse\r\n\r\n# or use yarn\r\nyarn add vuse\r\n```\r\n\r\n### CDNs\r\n\r\nOr add it as a script tag in your projects.\r\n\r\n- [unpkg](https://unpkg.com/vuse)\r\n\r\n```html\r\n\r\n\r\n```\r\n\r\n### Usage\r\n\r\n::: tip\r\n If you added it using a script tag, you can skip this section. as it will be auto-installed for you\r\n:::\r\n\r\n```js\r\nimport Builder from 'vuse';\r\n\r\nVue.use(Builder);\r\n```\r\n\r\nYou can start using the `b-builder` component to build things now.\r\n\r\nThis package does not include any sections. The builder is just a system of helpers for managing customizable sections, seeding fake data, exporting views and re-rendering them. The logic for your components/sections is written by you eventually. **we will be adding a huge number of sections soon to be used with this one**. You can use the included examples after reading the API to build your own for now."
},
{
"path": "docs/section.md",
"content": "# Section\r\n\r\nA section is the building block of the page, below is an example of a header section.\r\n::: tip\r\n Examples use [pug](https://pugjs.org) template language to make it easier to work with templates.\r\n:::\r\n\r\n```pug\r\n\r\n section.header(\r\n v-styler=\"$sectionData.classes\"\r\n :class=\"[{'is-editable': $builder.isEditing}, $sectionData.classes]\"\r\n )\r\n .container\r\n .grid\r\n .column.is-desktop-6.add-center-vertical\r\n h3.header-title(\r\n :class=\"{'is-editable': $builder.isEditing}\"\r\n v-html=\"$sectionData.title\"\r\n v-styler=\"$sectionData.title\"\r\n )\r\n p.header-content(\r\n :class=\"{'is-editable': $builder.isEditing}\"\r\n v-html=\"$sectionData.content\"\r\n v-styler=\"$sectionData.content\"\r\n )\r\n a.button(\r\n :class=\"[{'is-editable': $builder.isEditing}, $sectionData.button.classes]\"\r\n :href=\"$sectionData.button.href\"\r\n v-html=\"$sectionData.button.text\"\r\n v-styler=\"$sectionData.button\"\r\n )\r\n .column.is-desktop-6\r\n uploader(\r\n class=\"header-image\"\r\n path=\"$sectionData.images[0]\"\r\n )\r\n\r\n\r\n\r\n```\r\n\r\nEach section has several elements that can be edited. Section data are stored in `$sectionData` object which is reactive.\r\n\r\n## Adding the ability to edit elements in a section\r\n\r\n1. Add `is-editable` class to it. Since editable state can be toggled off/on, it's always good to bind `is-editable` class to change when editing mode changes. e.g. `:class=\"{'is-editable': $builder.isEditing}\"`\r\n1. Add [`v-styler`](https://github.com/baianat/builder#v-styler) directive to the element\r\n1. Bind the element’s innerHTML with its equivalent data e.g. `v-html=\"$sectionData.button.text\"`\r\n1. If you have any other data that `v-styler` changes, you have to bind it too. e.g. `:href=\"$sectionData.button.href\"`\r\n\r\nPutting it all together\r\n\r\n```html\r\n \r\n```\r\n\r\nAfter creating the HTML structure, you should configure the section schema to use the built-in seeder to provide you with initial/fake values when the component is instantiated in build/edit mode. Or you can set the initial values yourself instead of seeding them.\r\n\r\n```html\r\n\r\n```\r\n\r\n## Using the section\r\n\r\nUntil now, we have only been creating our section component, we now need to introduce it to our builder so it can use it:\r\n\r\n```js\r\nimport Builder from 'vuse';\r\nimport section from './components/sections/section';\r\n\r\n// Builder has Vue-like API when registering components.\r\nBuilder.component(section);\r\nVue.use(Builder);\r\n\r\nnew Vue({\r\n el: '#app'\r\n});\r\n```\r\n\r\n```html\r\n
\r\n \r\n
\r\n```\r\n\r\nYou only have to register the component on the Builder plugin, which has a Vue-like API. This ensures your Vue global scope isn't polluted by the builder and keeps everything contained within the `b-builder` component."
},
{
"path": "docs/styler.md",
"content": "# Styler\r\n\r\nThis directive is automatically injected in your section components, and can be used to facilitate editing elements greatly, since it has support for multiple element types like `div`, `a`, `button` and `p` tags as well.\r\n\r\nTo tell styler which variable to update, you pass it as directive expression e.g. `v-styler=\"$sectionData.button\"`\r\n\r\nThe styler directive has four types `text`, `button`, `section` or `grid`. By default, the directive can know the type implicitly, from the element tag or from the provided schema. \r\n\r\nIf you want to explicitly specify the type, you can pass it as a directive modifier e.g. `v-styler.button=\"$sectionData.button\"`.\r\n\r\n## How to use\r\n\r\ncoming soon...\r\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"vuse\",\n \"version\": \"0.1.1\",\n \"description\": \"Vue.js Page Builder\",\n \"author\": \"Abdelrahman Ismail \",\n \"module\": \"dist/vuse.esm.js\",\n \"unpkg\": \"dist/vuse.min.js\",\n \"main\": \"dist/vuse.js\",\n \"scripts\": {\n \"dev\": \"webpack-dev-server --hot --inline --config ./demo/webpack.config.js\",\n \"build\": \"cross-env NODE_ENV=production node scripts/build.js\",\n \"build:demo\": \"cross-env NODE_ENV=production webpack --config ./demo/webpack.config.js\",\n \"docs:dev\": \"vuepress dev docs\",\n \"docs:build\": \"vuepress build docs\",\n \"docs:deploy\": \"scripts/deploy.sh\",\n \"lint\": \"eslint ./src --fix\"\n },\n \"devDependencies\": {\n \"@babel/core\": \"^7.0.0-rc.1\",\n \"@babel/plugin-proposal-class-properties\": \"^7.0.0-rc.1\",\n \"@babel/plugin-proposal-object-rest-spread\": \"^7.0.0-rc.1\",\n \"@babel/preset-env\": \"^7.0.0-rc.1\",\n \"babel-loader\": \"^8.0.0-beta\",\n \"chalk\": \"^2.4.1\",\n \"clean-webpack-plugin\": \"^0.1.19\",\n \"copy-webpack-plugin\": \"^4.5.1\",\n \"cross-env\": \"^5.0.5\",\n \"css-loader\": \"^1.0.0\",\n \"eslint\": \"^5.3.0\",\n \"eslint-config-standard\": \"^11.0.0\",\n \"eslint-loader\": \"^2.1.0\",\n \"eslint-plugin-import\": \"^2.7.0\",\n \"eslint-plugin-node\": \"^7.0.1\",\n \"eslint-plugin-promise\": \"^3.5.0\",\n \"eslint-plugin-standard\": \"^3.0.1\",\n \"eslint-plugin-vue\": \"^4.7.1\",\n \"file-loader\": \"^1.1.11\",\n \"filesize\": \"^3.6.1\",\n \"friendly-errors-webpack-plugin\": \"^1.6.1\",\n \"gzip-size\": \"^5.0.0\",\n \"html-webpack-plugin\": \"^4.0.0-alpha\",\n \"mini-css-extract-plugin\": \"^0.4.4\",\n \"mkdirp\": \"^0.5.1\",\n \"progress-bar-webpack-plugin\": \"^1.10.0\",\n \"pug\": \"^2.0.0-rc.3\",\n \"pug-plain-loader\": \"^1.0.0\",\n \"rollup\": \"^0.64.1\",\n \"rollup-plugin-buble\": \"^0.19.2\",\n \"rollup-plugin-commonjs\": \"^9.1.5\",\n \"rollup-plugin-css-only\": \"^0.4.0\",\n \"rollup-plugin-node-resolve\": \"^3.0.0\",\n \"rollup-plugin-replace\": \"^2.0.0\",\n \"rollup-plugin-uglify\": \"^4.0.0\",\n \"rollup-plugin-vue\": \"^4.3.2\",\n \"style-loader\": \"^0.22.1\",\n \"stylus\": \"^0.54.5\",\n \"stylus-loader\": \"^3.0.1\",\n \"stylus-relative-loader\": \"^3.4.0\",\n \"util\": \"^0.11.0\",\n \"vue\": \"^2.5.17\",\n \"vue-loader\": \"^15.3.0\",\n \"vue-template-compiler\": \"^2.5.17\",\n \"vuepress\": \"^0.14.8\",\n \"webpack\": \"^4.16.5\",\n \"webpack-cli\": \"^3.1.0\",\n \"webpack-dev-server\": \"^3.1.5\"\n },\n \"dependencies\": {\n \"@baianat/base.framework\": \"^2.0.0-beta.0\",\n \"intersection-observer\": \"^0.5.0\",\n \"jszip\": \"^3.1.4\",\n \"lodash-es\": \"^4.17.4\",\n \"popper.js\": \"^1.14.4\",\n \"save-as\": \"^0.1.8\",\n \"sortablejs\": \"^1.6.1\",\n \"vue-server-renderer\": \"2.5.17\"\n },\n \"license\": \"MIT\",\n \"files\": [\n \"dist/*.js\",\n \"dist/*.css\"\n ],\n \"keywords\": [\n \"page-builder\",\n \"vuejs\",\n \"ES6\"\n ],\n \"maintainers\": [\n {\n \"name\": \"Abdelrahman Awad\",\n \"email\": \"logaretm1@gmail.com\"\n },\n {\n \"name\": \"Abdelrahman Ismail\",\n \"email\": \"abdelrahman3d@gmail.com\"\n }\n ]\n}\n"
},
{
"path": "scripts/build.js",
"content": "const chalk = require('chalk');\nconst mkdirpNode = require('mkdirp');\nconst { promisify } = require('util');\nconst { rollup } = require('rollup');\nconst { paths, configs, utils } = require('./config');\nconst mkdirp = promisify(mkdirpNode);\n\nasync function buildConfig (build) {\n await mkdirp(paths.dist);\n const bundleName = build.output.file.replace(paths.dist, '');\n console.log(chalk.cyan(`📦 Generating ${bundleName}...`));\n\n const bundle = await rollup(build.input);\n await bundle.write(build.output);\n\n console.log(chalk.green(`👍 ${bundleName} ${utils.stats({ path: build.output.file })}`));\n}\n\nasync function build () {\n await Promise.all(Object.keys(configs).map(key => {\n return buildConfig(configs[key]).catch(err => {\n console.log(err);\n });\n }));\n process.exit(0);\n}\n\nbuild();\n"
},
{
"path": "scripts/config.js",
"content": "const path = require('path');\nconst fs = require('fs');\nconst replace = require('rollup-plugin-replace');\nconst vue = require('rollup-plugin-vue').default;\nconst resolve = require('rollup-plugin-node-resolve');\nconst css = require('rollup-plugin-css-only');\nconst buble = require('rollup-plugin-buble');\nconst commonjs = require('rollup-plugin-commonjs');\nconst filesize = require('filesize');\nconst gzipSize = require('gzip-size');\nconst { uglify } = require('rollup-plugin-uglify');\n\nconst version = process.env.VERSION || require('../package.json').version;\n\nconst common = {\n banner:\n `/**\n * Vuse v${version}\n * (c) ${new Date().getFullYear()} Baianat\n * @license MIT\n */`,\n paths: {\n input: path.join(__dirname, '../src/index.js'),\n src: path.join(__dirname, '../src/'),\n dist: path.join(__dirname, '../dist/')\n },\n builds: {\n umd: {\n file: 'vuse.js',\n format: 'umd',\n name: 'vuse',\n env: 'development'\n },\n umdMin: {\n file: 'vuse.min.js',\n format: 'umd',\n name: 'vuse',\n env: 'production'\n },\n esm: {\n input: path.join(__dirname, '../src/index.esm.js'),\n file: 'vuse.esm.js',\n format: 'es'\n }\n }\n};\n\nfunction genConfig (options) {\n const config = {\n description: '',\n input: {\n input: options.input || common.paths.input,\n plugins: [\n commonjs(),\n replace({ __VERSION__: version }),\n css(),\n vue({ css: false }),\n resolve(),\n buble()\n ]\n },\n output: {\n banner: common.banner,\n name: options.name,\n format: options.format,\n file: path.join(common.paths.dist, options.file)\n }\n };\n\n if (options.env) {\n config.input.plugins.unshift(replace({\n 'process.env.NODE_ENV': JSON.stringify(options.env)\n }));\n }\n\n if (options.env === 'production') {\n config.input.plugins.push(uglify());\n }\n\n return config;\n};\n\nconst configs = Object.keys(common.builds).reduce((prev, key) => {\n prev[key] = genConfig(common.builds[key]);\n\n return prev;\n}, {});\n\nmodule.exports = {\n configs,\n uglifyOptions: common.uglifyOptions,\n paths: common.paths,\n utils: {\n stats ({ path }) {\n const code = fs.readFileSync(path);\n const { size } = fs.statSync(path);\n const gzipped = gzipSize.sync(code);\n\n return `| Size: ${filesize(size)} | Gzip: ${filesize(gzipped)}`;\n }\n }\n};\n"
},
{
"path": "scripts/deploy.sh",
"content": "#!/usr/bin/env sh\n\nset -e\n\nnpm run docs:build\n\ncd docs/.vuepress/dist\n\ngit init\ngit add -A\ngit commit -m 'deploy'\n\ngit push -f git@github.com:baianat/vuse.git master:gh-pages\n\ncd -"
},
{
"path": "src/components/VuseBuilder.vue",
"content": "\r\n div\r\n div#artboard.artboard(\r\n ref=\"artboard\"\r\n :class=\"{ 'is-sorting': $builder.isSorting, 'is-editable': $builder.isEditing }\"\r\n )\r\n component(v-for='section in $builder.sections'\r\n :is='section.name'\r\n :key='section.id'\r\n :id='section.id'\r\n )\r\n\r\n .controller\r\n .controller-intro(v-if=\"showIntro && !this.$builder.sections.length\")\r\n label(for=\"projectName\") Hello, start your project\r\n input.controller-input(\r\n id=\"projectName\"\r\n placeholder=\"project name\"\r\n v-model=\"title\"\r\n )\r\n template(v-if=\"themes\")\r\n .controller-themes\r\n button.controller-theme(\r\n v-for=\"theme in themes\"\r\n @click=\"addTheme(theme)\"\r\n )\r\n | {{ theme.name }}\r\n\r\n .controller-panel\r\n button.controller-button.is-green(\r\n tooltip-position=\"top\"\r\n tooltip=\"export\"\r\n @click=\"submit\"\r\n )\r\n VuseIcon(name='download')\r\n button.controller-button.is-red(\r\n v-if=\"!tempSections\"\r\n tooltip-position=\"top\"\r\n tooltip=\"clear sections\"\r\n @click=\"clearSections\"\r\n )\r\n VuseIcon(name='trash')\r\n button.controller-button.is-gray(\r\n v-if=\"tempSections\"\r\n tooltip-position=\"top\"\r\n tooltip=\"undo\"\r\n @click=\"undo\"\r\n )\r\n VuseIcon(name='undo')\r\n button.controller-button.is-blue(\r\n tooltip-position=\"top\"\r\n tooltip=\"sorting\"\r\n :class=\"{ 'is-red': $builder.isSorting }\"\r\n @click=\"toggleSort\"\r\n )\r\n VuseIcon(name='sort')\r\n button.controller-button.is-blue(\r\n tooltip-position=\"top\"\r\n tooltip=\"add section\"\r\n :class=\"{ 'is-red': listShown, 'is-rotated': listShown }\"\r\n :disabled=\"!$builder.isEditing\"\r\n @click=\"newSection\"\r\n )\r\n VuseIcon(name='plus')\r\n\r\n ul.menu(:class=\"{ 'is-visiable': listShown }\" ref=\"menu\")\r\n li.menu-group(v-for=\"(group, name) in groups\" v-if=\"group.length\")\r\n .menu-header(@click=\"toggleGroupVisibility\")\r\n span.menu-title {{ name }}\r\n span.menu-icon\r\n VuseIcon(name='arrowDown')\r\n .menu-body\r\n template(v-for=\"section in group\")\r\n a.menu-element(\r\n @click=\"addSection(section)\"\r\n @drag=\"currentSection = section\"\r\n )\r\n img.menu-elementImage(v-if=\"section.cover\" :src=\"section.cover\")\r\n span.menu-elementTitle {{ section.name }}\r\n\r\n\r\n\r\n\r\n\r\n\r\n"
},
{
"path": "src/components/VuseIcon.js",
"content": "const icons = {\n plus: 'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z',\n tic: 'M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z',\n sort: 'M14 5h8v2h-8zm0 5.5h8v2h-8zm0 5.5h8v2h-8zM2 11.5C2 15.08 4.92 18 8.5 18H9v2l3-3-3-3v2h-.5C6.02 16 4 13.98 4 11.5S6.02 7 8.5 7H12V5H8.5C4.92 5 2 7.92 2 11.5z',\n link: 'M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z',\n palettes: 'M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z',\n close: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',\n bold: 'M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z',\n italic: 'M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z',\n underline: 'M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z',\n center: 'M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z',\n left: 'M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z',\n right: 'M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z',\n trash: 'M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z',\n align: 'M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z',\n textStyle: 'M23 7V1h-6v2H7V1H1v6h2v10H1v6h6v-2h10v2h6v-6h-2V7h2zM3 3h2v2H3V3zm2 18H3v-2h2v2zm12-2H7v-2H5V7h2V5h10v2h2v10h-2v2zm4 2h-2v-2h2v2zM19 5V3h2v2h-2zm-5.27 9h-3.49l-.73 2H7.89l3.4-9h1.4l3.41 9h-1.63l-.74-2zm-3.04-1.26h2.61L12 8.91l-1.31 3.83z',\n section: 'M10 18h5v-6h-5v6zm-6 0h5V5H4v13zm12 0h5v-6h-5v6zM10 5v6h11V5H10z',\n arrowDown: 'M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z',\n arrowRight: 'M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z',\n arrowLeft: 'M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z',\n mobile: 'M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z',\n tablet: 'M21 4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 1.99-.9 1.99-2L23 6c0-1.1-.9-2-2-2zm-2 14H5V6h14v12z',\n laptop: 'M20 18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z',\n monitor: 'M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H3V4h18v12z',\n download: 'M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z',\n eye: 'M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z',\n undo: 'M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z'\n};\n\nexport default {\n functional: true,\n props: {\n name: {\n type: String,\n required: true,\n validator: (val) => {\n if (!(val in icons) && process.env.NODE_ENV !== 'production') {\n console.warn(`Invalid icon name \"${val}\"`);\n return false;\n }\n\n return true;\n }\n }\n },\n render (h, { props }) {\n const path = h('path', {\n attrs: {\n d: icons[props.name]\n }\n });\n\n return h(\n 'svg',\n {\n attrs: {\n version: '1.1',\n xmlns: 'http://www.w3.org/2000/svg',\n class: 'vuse-icon',\n viewBox: '0 0 24 24'\n }\n },\n [path]\n );\n }\n};\n"
},
{
"path": "src/components/VuseRenderer.vue",
"content": "\r\n #artboard.artboard\r\n component(v-for='section in $builder.sections'\r\n :is='section.name'\r\n :key='section.id'\r\n :id='section.id'\r\n )\r\n\r\n\r\n\r\n"
},
{
"path": "src/components/VuseStyler.vue",
"content": "\r\n .styler(\r\n ref=\"styler\"\r\n id=\"styler\"\r\n v-if=\"$builder.isEditing\"\r\n :class=\"{ 'is-visible': isVisible }\"\r\n @click.stop=\"\"\r\n )\r\n ul.styler-list\r\n li(v-if=\"type === 'button' || type === 'section'\")\r\n button.styler-button(@click=\"updateOption('colorer')\")\r\n VuseIcon(name='palettes')\r\n li(v-if=\"type === 'button'\")\r\n button.styler-button(@click=\"updateOption('link')\")\r\n VuseIcon(name='link')\r\n li(v-if=\"type === 'header' || type === 'section'\")\r\n button.styler-button(@click=\"removeSection\")\r\n VuseIcon(name='trash')\r\n template(v-if=\"type === 'text'\")\r\n li: button.styler-button(@click=\"updateOption('textColor')\")\r\n VuseIcon(name='palettes')\r\n li: button.styler-button(@click=\"updateOption('align')\")\r\n VuseIcon(name='align')\r\n li: button.styler-button(@click=\"updateOption('textStyle')\")\r\n VuseIcon(name='textStyle')\r\n template(v-if=\"type === 'grid'\")\r\n li: button.styler-button(@click=\"selectDevice('mobile')\")\r\n VuseIcon(name='mobile')\r\n //- li: button.styler-button(@click=\"selectDevice('tablet')\")\r\n //- VuseIcon(name='tablet')\r\n li: button.styler-button(@click=\"selectDevice('desktop')\")\r\n VuseIcon(name='laptop')\r\n //- li: button.styler-button(@click=\"selectDevice('widescreen')\")\r\n //- VuseIcon(name='monitor')\r\n\r\n ul.styler-list\r\n li(v-if=\"currentOption === 'colorer'\")\r\n ul.colorer\r\n li(v-for=\"color in colors\")\r\n input(\r\n type=\"radio\"\r\n :id=\"`color${color.charAt(0).toUpperCase() + color.slice(1)}`\"\r\n name=\"colorer\"\r\n :value=\"color\"\r\n v-model=\"colorerColor\"\r\n )\r\n li(v-if=\"currentOption === 'textColor'\")\r\n ul.colorer\r\n li(v-for=\"(color, index) in colors\")\r\n input(\r\n type=\"radio\"\r\n :id=\"`color${color.charAt(0).toUpperCase() + color.slice(1)}`\"\r\n name=\"colorer\"\r\n :value=\"textColors[index]\"\r\n v-model=\"textColor\"\r\n )\r\n li(v-if=\"currentOption === 'link'\")\r\n .input-group.is-rounded.has-itemAfter.is-primary\r\n input.input(type=\"text\" placeholder=\"type your link\" v-model=\"url\")\r\n button.button(@click=\"addLink\")\r\n VuseIcon(name='link')\r\n\r\n li(v-if=\"currentOption === 'align'\")\r\n ul.align\r\n li: button.styler-button(@click=\"execute('justifyleft')\")\r\n VuseIcon(name='left')\r\n li: button.styler-button(@click=\"execute('justifycenter')\")\r\n VuseIcon(name='center')\r\n li: button.styler-button(@click=\"execute('justifyright')\")\r\n VuseIcon(name='right')\r\n\r\n li(v-if=\"currentOption === 'textStyle'\")\r\n ul.align\r\n li: button.styler-button(@click=\"execute('bold')\")\r\n VuseIcon(name='bold')\r\n li: button.styler-button(@click=\"execute('italic')\")\r\n VuseIcon(name='italic')\r\n li: button.styler-button(@click=\"execute('underline')\")\r\n VuseIcon(name='underline')\r\n\r\n li(v-if=\"currentOption === 'columnWidth'\")\r\n ul.align\r\n li: button.styler-button(@click=\"gridValue--\")\r\n VuseIcon(name='arrowLeft')\r\n li: input(type=\"number\" min=\"0\" max=\"12\" v-model=\"gridValue\").styler-input\r\n li: button.styler-button(@click=\"gridValue++\")\r\n VuseIcon(name='arrowRight')\r\n\r\n\r\n\r\n\r\n\r\n\r\n"
},
{
"path": "src/index.esm.js",
"content": "import Vuse from './vuse';\nimport * as types from './types';\n\nconst version = '__VERSION__';\n\n// Auto install if Vue is defined globally.\nif (typeof Vue !== 'undefined') {\n // eslint-disable-next-line\n Vue.use(Builder);\n}\n\nexport {\n Vuse,\n types,\n version\n};\n\nexport default Vuse;\n"
},
{
"path": "src/index.js",
"content": "import Vuse from './vuse';\r\nimport * as types from './types';\r\n\r\n// Auto install if Vue is defined globally.\r\nif (typeof Vue !== 'undefined') {\r\n // eslint-disable-next-line\r\n Vue.use(Builder);\r\n}\r\n\r\nVuse.version = '__VERSION__';\r\nVuse.types = types;\r\n\r\nexport default Vuse;\r\n"
},
{
"path": "src/mixin.js",
"content": "function installMixin ({ builder }) {\r\n builder.mixin = {\r\n provide: function providesBuilder () {\r\n const provides = {};\r\n if (this.$builder) {\r\n provides.$builder = this.$builder;\r\n }\r\n\r\n if (this.$section) {\r\n provides.$section = this.$section;\r\n }\r\n\r\n return provides;\r\n },\r\n beforeCreate () {\r\n this.$builder = builder;\r\n if (!this.$options.propsData || this.$options.propsData.id === undefined) {\r\n return;\r\n }\r\n this.$section = this.$builder.find(this.$options.propsData.id);\r\n this.$options.computed = {\r\n $sectionData: function getSectionData () {\r\n return this.$section.data;\r\n },\r\n gridClasses: function getGridClasses () {\r\n return this.$sectionData.columns.map(column => {\r\n return Object.keys(column.grid).map(device => {\r\n if (!column.grid[device]) {\r\n return '';\r\n }\r\n const prefix = this.$builder.columnsPrefix[device]\r\n return `${prefix}${column.grid[device]}`;\r\n });\r\n })\r\n }\r\n }\r\n },\r\n updated () {\r\n Array.from(this.$el.querySelectorAll('[contentEditable]')).forEach((el) => {\r\n el.contentEditable = this.$builder.isEditing;\r\n });\r\n }\r\n };\r\n};\r\n\r\nexport default installMixin;\r\n"
},
{
"path": "src/plugins/pwa.js",
"content": "import JSZip from 'jszip';\nimport saveAs from 'save-as';\nimport { getImageBlob, cleanDOM } from '../../src/util';\n\n/**\n * Adds a service worker that caches the static assets.\n */\nfunction createSW (output, { images = [] } = {}) {\n output.file('sw.js', `\n const staticCacheName = 'bbuilder-static-v1';\n\n self.addEventListener('install', function(event) {\n event.waitUntil(\n caches.open(staticCacheName).then(function(cache) {\n return cache.addAll([\n '/',\n '/assets/js/main.js',\n ${images.map(i => \"'/assets/img/\" + i.name + \"'\").join(',').trim(',')}\n ]);\n })\n );\n });\n\n function serveAsset(request) {\n return caches.open(staticCacheName).then(function(cache) {\n return cache.match(request).then(function(response) {\n if (response) return response;\n\n return fetch(request).then(function(networkResponse) {\n cache.put(request, networkResponse.clone());\n return networkResponse;\n });\n });\n });\n }\n\n self.addEventListener('fetch', function(event) {\n const requestUrl = new URL(event.request.url);\n\n if (requestUrl.origin === location.origin) {\n if (requestUrl.pathname === '/') {\n event.respondWith(caches.match('/'));\n return;\n }\n if (requestUrl.pathname.startsWith('/assets/')) {\n event.respondWith(serveAsset(event.request));\n return;\n }\n }\n\n event.respondWith(\n caches.match(event.request).then(function(response) {\n return response || fetch(event.request);\n })\n );\n });\n `);\n\n const scripts = output.folder('assets/js');\n scripts.file('main.js', `\n function registerSW () {\n if (!navigator.serviceWorker) return;\n navigator.serviceWorker.register('/sw.js').then(function (reg) {\n console.log('SW registered!');\n });\n }\n\n registerSW();\n `);\n}\n\n/**\n * Adds some PWA features.\n */\nfunction createPWA (output, payload) {\n createSW(output, payload);\n}\n\nfunction download (assets) {\n const frag = this.outputFragment();\n const images = Array.from(frag.querySelectorAll('img'));\n const artboard = frag.querySelector('#artboard');\n const title = document.title;\n const zip = new JSZip();\n const output = zip.folder('project');\n const imgFolder = output.folder('assets/img');\n const cssFolder = output.folder('assets/css');\n\n Promise.all(images.map((image) => {\n const imageLoader = getImageBlob(image.src);\n return imageLoader.then((img) => {\n imgFolder.file(img.name, img.blob, { base64: true });\n image.setAttribute('src', `assets/img/${img.name}`);\n\n return img;\n });\n })).then(images => {\n createPWA(output, { images });\n }).then(() => {\n return new Promise((resolve, reject) => {\n const assetsClient = new XMLHttpRequest();\n assetsClient.open('GET', assets.css);\n assetsClient.onload = function () {\n resolve(this.response);\n }\n assetsClient.send(null);\n }).then((content) => {\n cssFolder.file('app.css', content);\n return content;\n });\n }).then(() => {\n cleanDOM(frag);\n output.file('index.html',\n `\n \n ${title}\n \n \n \n ${artboard.innerHTML}\n \n \n `);\n\n zip.generateAsync({ type: 'blob' }).then((blob) => {\n saveAs(blob, 'project.zip');\n });\n });\n}\n\nexport default function install ({ builder }) {\n builder.download = download;\n};\n"
},
{
"path": "src/plugins/scrolling.js",
"content": "import 'intersection-observer';\n\nconst callback = (entries, observer) => {\n entries.forEach(entry => {\n if (entry.intersectionRatio > 0.5) {\n entry.target.classList.add('is-active');\n entry.target.classList.remove('is-inactive');\n return;\n }\n entry.target.classList.add('is-inactive');\n entry.target.classList.remove('is-active');\n });\n}\n\nconst observer = new IntersectionObserver(callback, {\n root: null,\n rootMargin: '0px',\n threshold: [0.1, 0.5, 0.9, 1]\n});\n\nconst scrolling = (rootEl) => {\n if (!rootEl) return;\n let sections = Array.from(rootEl.querySelectorAll('section'));\n sections.forEach(section => {\n section.classList.add('is-inactive');\n observer.observe(section);\n });\n}\n\nexport default function install ({ builder }) {\n builder.scrolling = scrolling;\n};\n"
},
{
"path": "src/section.js",
"content": "import getPath from 'lodash-es/get';\r\nimport toPath from 'lodash-es/toPath';\r\nimport Seeder from './seeder';\r\n\r\nconst SECTION_OPTIONS = {\r\n name: null,\r\n schema: {}\r\n};\r\n\r\nlet counter = 0;\r\n\r\nexport default class Section {\r\n constructor (options) {\r\n this.id = counter++;\r\n options = Object.assign({}, SECTION_OPTIONS, options);\r\n this.name = options.name;\r\n this.schema = options.schema;\r\n this.data = options.data || Seeder.seed(options.schema);\r\n this.stylers = [];\r\n }\r\n\r\n set (name, value) {\r\n const path = toPath(name);\r\n const prop = path.pop();\r\n\r\n path.shift();\r\n const obj = path.length === 0 ? this.data : getPath(this.data, path);\r\n if (typeof value === 'function') {\r\n value(obj[prop]);\r\n return;\r\n }\r\n\r\n obj[prop] = value;\r\n }\r\n\r\n get (name) {\r\n const path = toPath(name);\r\n const prop = path.pop();\r\n path.shift();\r\n const obj = path.length === 0 ? this.data : getPath(this.data, path);\r\n\r\n return obj[prop];\r\n }\r\n\r\n destroy () {\r\n this.stylers.forEach(styler => styler.$destroy())\r\n }\r\n};\r\n"
},
{
"path": "src/seeder.js",
"content": "import * as types from './types';\r\nimport { isObject } from './util';\r\n\r\nconst ASSETS_DIR = '.';\r\nconst data = new Map([\r\n [types.Title, 'Awesome title'],\r\n [types.Text, 'We\\'re creating the best place to go when starting a new business or company.With Baianat you can instantly search domain names, social media handles, and see your logo in beautiful logotypes.'],\r\n [types.Avatar, `${ASSETS_DIR}/img/avatar.png`],\r\n [types.Logo, `${ASSETS_DIR}/img/google.svg`],\r\n [types.Link, 'http://example.com'],\r\n [types.Image, `${ASSETS_DIR}/img/baianat.png`],\r\n [types.ClassList, () => []],\r\n [types.Button, () => ({ text: 'Click Me!', classes: [], href: 'http://example.com' })],\r\n [types.Quote, 'When you were made a leader, you weren\\'t given a crown; you were given the responsibility to bring out the best in others.'],\r\n [types.Grid, () => ({mobile: '', tablet: '', desktop: '', widescreen: ''})],\r\n [Number, 100],\r\n [String, 'This is pretty neat']\r\n]);\r\n\r\nexport default class Seeder {\r\n // Seeds values using a schema.\r\n static seed (schema) {\r\n if (isObject(schema)) {\r\n return Object.keys(schema).reduce((values, key) => {\r\n values[key] = Seeder.seed(schema[key]);\r\n return values;\r\n }, {});\r\n } else if (Array.isArray(schema)) {\r\n return schema.map(s => {\r\n return Seeder.seed(s)\r\n });\r\n }\r\n\r\n let value = data.get(schema);\r\n if (value === undefined) {\r\n value = schema;\r\n }\r\n return typeof value === 'function' ? value() : value;\r\n }\r\n};\r\n"
},
{
"path": "src/styler.js",
"content": "import Styler from './components/VuseStyler.vue';\r\nimport { getTypeFromTagName, getTypeFromSchema } from './util';\r\n\r\nfunction installStyler ({ builder, Vue }) {\r\n const StylerInstance = Vue.extend(Styler).extend({\r\n beforeCreate () {\r\n this.$builder = builder;\r\n }\r\n });\r\n\r\n builder.styler = {\r\n inserted (el, binding, vnode) {\r\n const newNode = document.createElement('div');\r\n const section = vnode.context.$section;\r\n const rootApp = vnode.context.$root.$el;\r\n rootApp.appendChild(newNode);\r\n el.classList.add('is-editable');\r\n section.stylers.push(new StylerInstance({\r\n propsData: {\r\n el,\r\n section: section,\r\n type: binding.arg || getTypeFromSchema(binding.expression, section.schema) || getTypeFromTagName(el.tagName),\r\n name: binding.expression\r\n }\r\n }).$mount(newNode));\r\n }\r\n };\r\n};\r\n\r\nexport default installStyler;\r\n"
},
{
"path": "src/stylus/_app.styl",
"content": "@import variables\n@import colors\n\n.vuse-icon\n display: block\n width: 20px\n height: 20px\n$floatHover\n cursor: pointer\n box-shadow: 0 14px 28px alpha($black, 0.125), 0 10px 10px alpha($black, 0.1)"
},
{
"path": "src/stylus/colors.styl",
"content": "/*\n * Color theme\n */\n$magenta ?= #eb008b\n$blue ?= #0072FF\n$cyan ?= #00d4f0\n$green ?= #18d88b\n$yellow ?= #ffdd57\n$orange ?= #ffa557\n$red ?= #ff3d3d\n$purple ?= #a324ea\n\n/*\n * Graysacle\n */\n$black ?= #000\n$dark ?= #323c47\n$gray ?= #c1c1c1\n$gray-dark ?= darken($gray, 10%)\n$gray-light ?= lighten($gray, 10%)\n$light ?= #f5f5f5\n$white ?= #fff\n"
},
{
"path": "src/stylus/variables.styl",
"content": "\n$flexCenter\n display: flex\n justify-content: center\n align-items: center"
},
{
"path": "src/types.js",
"content": "export class Avatar {};\r\n\r\nexport class Title {};\r\n\r\nexport class Text {};\r\n\r\nexport class Logo {};\r\n\r\nexport class Image {};\r\n\r\nexport class Quote {};\r\n\r\nexport class Link {};\r\n\r\nexport class ClassList {};\r\n\r\nexport class Button {};\r\n\r\nexport class Grid { };\r\n"
},
{
"path": "src/util.js",
"content": "import getPath from 'lodash/get';\nimport * as types from './types';\n\nexport function isObject (obj) {\n return obj && typeof obj === 'object' && obj !== null && !Array.isArray(obj);\n};\n\nexport function isParentTo (target, parent) {\n let currentNode = target;\n while (currentNode !== null) {\n if (currentNode === parent) return true;\n currentNode = currentNode.parentNode;\n }\n return false;\n}\n\n/**\n *\n * @param {String} target\n * @param {Object} schema\n */\nexport function getTypeFromSchema (target, schema) {\n const tempTarget = target.split('.');\n tempTarget.shift();\n const value = getPath(schema, tempTarget.join('.'));\n if (value === types.Grid) return 'grid';\n if (value === types.Text) return 'text';\n if (value === types.Title) return 'text';\n if (value === types.Button) return 'button';\n if (value === types.ClassList) return 'section';\n if (value === String) return 'text';\n if (value === Number) return 'text';\n\n return null;\n}\n\nexport function getImageBlob (URL) {\n return new Promise((resolve, reject) => {\n const xhr = new XMLHttpRequest();\n xhr.open('GET', URL);\n xhr.responseType = 'blob';\n\n xhr.onload = function () {\n const imageBlob = this.response;\n const fileType = this.response.type.split('/')[1].split('+')[0];\n const randomNumber = new Date().getUTCMilliseconds();\n const filename = `image-${randomNumber}.${fileType}`;\n resolve({ blob: imageBlob, name: filename });\n }\n xhr.send(null);\n });\n}\n\nexport function getTypeFromTagName (tagName) {\n tagName = tagName.toUpperCase();\n switch (tagName) {\n case 'H1':\n return 'text';\n case 'H2':\n return 'text';\n case 'H3':\n return 'text';\n case 'H4':\n return 'text';\n case 'H5':\n return 'text';\n case 'H6':\n return 'text';\n case 'P':\n return 'text';\n case 'B':\n return 'text';\n case 'SPAN':\n return 'text';\n case 'BUTTON':\n return 'button';\n case 'A':\n return 'button';\n case 'SECTION':\n return 'section';\n case 'HEADER':\n return 'section';\n default:\n break;\n }\n}\n\nexport function cleanDOM (artboard) {\n const editables = Array.from(artboard.querySelectorAll('.is-editable'));\n const uploaders = Array.from(artboard.querySelectorAll('.uploader'));\n const stylers = Array.from(artboard.querySelectorAll('.styler'));\n\n editables.forEach((el) => {\n el.contentEditable = 'inherit';\n el.classList.remove('is-editable');\n });\n uploaders.forEach((el) => {\n const input = el.querySelector(':scope > input');\n const image = el.querySelector(':scope > img');\n\n image.classList.add('add-full-width');\n el.classList.remove('uploader');\n input.remove();\n });\n stylers.forEach((styler) => {\n styler.remove();\n });\n}\n"
},
{
"path": "src/vuse.js",
"content": "import merge from 'lodash-es/merge';\nimport Section from './section';\nimport VuseBuilder from './components/VuseBuilder.vue';\nimport VuseRenderer from './components/VuseRenderer.vue';\nimport styler from './styler';\nimport mixin from './mixin';\nimport { cleanDOM } from './util';\n\nlet PLUGINS = [];\nlet mixier = {};\nconst BUILDER_OPTIONS = {\n title: '',\n intro: true,\n sections: [],\n plugins: [],\n themes: [],\n columnsPrefix: {\n mobile: 'is-mobile-',\n tablet: 'is-tablet-',\n desktop: 'is-desktop-',\n widescreen: 'is-widescreen-',\n ultrawide: 'is-ultrawide-'\n }\n};\n\n// To tell if it is installed or not\nlet _Vue = null;\n\nclass Vuse {\n constructor (options) {\n this.isEditing = true;\n this.isSorting = false;\n this.isRendered = false;\n this.title = options.title;\n this.intro = options.intro;\n this.sections = options.sections;\n this.columnsPrefix = options.columnsPrefix;\n this.themes = options.themes;\n this.components = {};\n this.assets = {\n css: options.assets.css || 'dist/css/app.css'\n }\n this.installPlugins();\n }\n\n /**\n * Creates and adds a new section to the list of sections.\n * @param {*} options\n */\n add (options, position) {\n if (position !== undefined) {\n this.sections.splice(position, 0, new Section(options));\n return;\n }\n this.sections.push(new Section(options));\n }\n\n /**\n * Finds a section with the specified id.\n *\n * @param {String|Number} id\n */\n find (id) {\n return this.sections.find(s => s.id === id);\n }\n\n /**\n * Removes a section with the specified id.\n * @param {String|Number} id\n */\n remove (section) {\n const id = this.sections.findIndex(s => s.id === section.id);\n this.sections.splice(id, 1);\n section.destroy();\n }\n\n /**\n * Removes a section with the specified id.\n * @param {String|Number} oldIndex\n * @param {String|Number} newIndex\n */\n sort (oldIndex, newIndex) {\n const section = this.sections[oldIndex];\n this.sections.splice(oldIndex, 1);\n this.sections.splice(newIndex, 0, section);\n }\n\n /**\n * Constructs a document fragment.\n */\n outputFragment () {\n const frag = document.createDocumentFragment();\n frag.appendChild(document.head.cloneNode(true));\n frag.appendChild(this.rootEl.cloneNode(true));\n\n return frag;\n }\n\n /**\n * clears the builder sections.\n */\n clear () {\n const tempSections = this.sections;\n this.sections.forEach(section => section.destroy());\n this.sections = [];\n return tempSections;\n }\n\n /**\n * Static helper for components registration pre-installation.\n *\n * @param {String} name\n * @param {Object} definition\n */\n static component (name, definition) {\n // Just make a plugin that installs a component.\n Vuse.use((ctx) => {\n ctx.builder.component(name, definition);\n });\n }\n\n /**\n * Acts as a mixin for subcomponents.\n * @param {Object} mixinObj\n */\n static mix (mixinObj) {\n mixier = merge(mixier, mixinObj);\n }\n\n /**\n * Adds a component section to the builder and augments it with the styler.\n * @param {*} name\n * @param {*} definition\n */\n component (name, definition) {\n // reoslve the component name automatically.\n if (typeof name === 'object') {\n definition = name;\n name = definition.name;\n }\n\n // if passed a plain object\n if (!definition.extend) {\n definition = _Vue.extend(definition);\n }\n\n this.components[name] = definition.extend({\n directives: { styler: this.styler },\n mixins: [this.mixin],\n components: mixier.components\n });\n }\n\n /**\n * Installs added plugins.\n */\n installPlugins () {\n PLUGINS.forEach((ctx) => {\n ctx.plugin({ builder: this, Vue: _Vue }, ctx.options);\n });\n // reset to prevent duplications.\n PLUGINS = [];\n }\n\n static install (Vue, options = {}) {\n // already installed\n if (_Vue) return;\n\n _Vue = Vue;\n const builder = new Vuse(Object.assign({}, BUILDER_OPTIONS, options));\n // configer assets output location\n Vue.util.defineReactive(builder, 'sections', builder.sections);\n Vue.util.defineReactive(builder, 'isEditing', builder.isEditing);\n Vue.util.defineReactive(builder, 'isSorting', builder.isSorting);\n const extension = {\n components: builder.components,\n beforeCreate () {\n this.$builder = builder;\n }\n };\n\n // register the main components.\n Vue.component('VuseBuilder', Vue.extend(VuseBuilder).extend(extension));\n Vue.component('VuseRenderer', Vue.extend(VuseRenderer).extend(extension));\n }\n\n /**\n * The plugin to be installed with the builder. The function receives the installation context which\n * contains the builder instance and the Vue prototype.\n *\n * @param {Function} plugin\n * @param {Object} options\n */\n static use (plugin, options = {}) {\n if (typeof plugin !== 'function') {\n return console.warn('Plugins must be a function');\n }\n\n // append to the list of to-be installed plugins.\n PLUGINS.push({ plugin, options });\n }\n\n set (data) {\n this.title = data.title !== undefined ? data.title : this.title;\n if (data.sections && Array.isArray(data.sections)) {\n this.sections = data.sections.map(section => {\n const sectionData = {\n name: section.name,\n schema: section.schema,\n data: section.data\n };\n if (!sectionData.schema) {\n sectionData.schema = this.components[sectionData.name].options.$schema\n }\n\n return new Section(sectionData);\n });\n }\n }\n\n /**\n * Outputs a JSON representation of the builder that can be used for rendering with the renderer component.\n */\n toJSON () {\n return {\n title: this.title,\n sections: this.sections.map(s => ({\n name: s.name,\n data: s.data\n }))\n };\n }\n\n /**\n * Previews the created page in a seperate tap/window.\n */\n preview () {\n const frag = this.outputFragment();\n const artboard = frag.querySelector('#artboard');\n const printPreview = window.open('about:blank', 'print_preview');\n const printDocument = printPreview.document;\n cleanDOM(frag);\n printDocument.open();\n printDocument.write(\n `\n \n \n ${this.title}\n \n \n \n ${artboard.innerHTML}\n \n `\n );\n }\n\n /**\n * Exports the builder instance to a specified output. default is json.\n *\n * @param {String} method\n */\n export (method = 'json') {\n if (method === 'pwa' || method === 'zip') {\n if (typeof this.download === 'function') {\n return this.download(this.assets);\n }\n\n return console.warn('You do not have the zip plugin installed.');\n }\n\n if (method === 'preview') {\n return this.preview();\n }\n\n return this.toJSON();\n }\n};\n\n// use the plugin API to add the styler and mixin functionalities.\nVuse.use(styler);\nVuse.use(mixin);\n\nexport default Vuse;\n"
}
]
![](\"https://github.com/baianat/vuse/blob/master/Logo/Vuse_Logo_Horizontal_Gradient.png\"){kind=logo}
\n \n