├── .eslintrc.json ├── .gitignore ├── .grenrc.js ├── .prettierrc ├── LICENSE ├── README.md ├── babel.config.js ├── config └── layout.json ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ ├── demo.gif │ └── logo.png ├── components │ ├── Item.vue │ └── LayoutComposer │ │ ├── Index.vue │ │ ├── components │ │ └── Layout │ │ │ ├── Index.vue │ │ │ └── components │ │ │ └── Cell │ │ │ └── Index.vue │ │ ├── eventBus.js │ │ └── utils │ │ ├── layout.js │ │ └── ui.js ├── index.js ├── main.js └── plugins │ └── ComponentRegister.js ├── vue.config.js └── yarn.lock /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "node": true 6 | }, 7 | "parserOptions": { 8 | "parser": "babel-eslint" 9 | }, 10 | "extends": [ 11 | "airbnb-base", 12 | "plugin:vue/recommended", 13 | "prettier/vue", 14 | "plugin:prettier/recommended" 15 | ], 16 | "rules": { 17 | "semi": [ 18 | "error", 19 | "never" 20 | ], 21 | "consistent-return": "off", 22 | "no-underscore-dangle": "off", 23 | "no-unused-expressions": 1, 24 | "import/no-unresolved": "off", // Suppress errors caused by import "@/..." 25 | "max-len": "off", // Allow lines longer than 100 characters 26 | "no-param-reassign": [ 27 | "error", // Allow param reassigns required by Vuex 28 | { 29 | "props": true, 30 | "ignorePropertyModificationsFor": [ 31 | "state", 32 | "acc", 33 | "e", 34 | "ctx", 35 | "req", 36 | "request", 37 | "res", 38 | "response", 39 | "$scope" 40 | ] 41 | } 42 | ], 43 | "vue/attributes-order": "error", 44 | "vue/html-self-closing": ["error", { 45 | "html": { 46 | "void": "always", 47 | "normal": "always", 48 | "component": "always" 49 | }, 50 | "svg": "always", 51 | "math": "always" 52 | }] 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /.grenrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "dataSource": "commits", 3 | "includeMessages": "prs", 4 | "ignoreCommitsWith": ["WIP", "release", "changelog"], 5 | "changelogFilename": "CHANGELOG.md" 6 | } 7 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "tabWidth": 2, 4 | "semi": false, 5 | "singleQuote": true 6 | } 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Ivan Jolic 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-layout-composer 2 | 3 | ![DEMO](src/assets/demo.gif) 4 | 5 | Dynamic, drag & drop, JSON-based grid layout for Vue. 6 | 7 | Create your components, specify your JSON layout configuration and let the vue-layout-composer handle the rest. 8 | 9 | ## Installation 10 | 11 | `yarn add vue-layout-composer` 12 | 13 | OR 14 | 15 | `npm install vue-layout-composer --save` 16 | 17 | ## Usage 18 | 19 | *Demo coming soon* 20 | 21 | 1. Add the `VueLayoutComposer` plugin in your `main.js` 22 | 23 | ```vue 24 | Vue.use(VueLayoutComposer) 25 | ``` 26 | 27 | 2. Use the `LayoutComposer` component 28 | 29 | ```vue 30 | 39 | 40 | 62 | ``` 63 | 64 | ## Example layout config (JSON) 65 | 66 | ```json 67 | { 68 | "component": "Layout", 69 | "props": { 70 | "orientation": "vertical" 71 | }, 72 | "children": [ 73 | { 74 | "component": "Layout", 75 | "props": { 76 | "orientation": "horizontal" 77 | }, 78 | "children": [ 79 | { 80 | "component": "Item", 81 | "display": { 82 | "weight": 1 83 | }, 84 | "props": { 85 | "background": "#E6E7E8", 86 | "content": "This" 87 | }, 88 | "hello": "world" 89 | }, 90 | { 91 | "component": "Item", 92 | "display": { 93 | "weight": 2 94 | }, 95 | "props": { 96 | "background": "#E6E7E8", 97 | "content": "is" 98 | }, 99 | "hello": "world" 100 | }, 101 | { 102 | "component": "Layout", 103 | "props": { 104 | "orientation": "vertical" 105 | }, 106 | "children": [ 107 | { 108 | "component": "Item", 109 | "display": { 110 | "weight": 1 111 | }, 112 | "props": { 113 | "background": "#E6E7E8", 114 | "content": "and" 115 | }, 116 | "hello": "world" 117 | }, 118 | { 119 | "component": "Item", 120 | "display": { 121 | "weight": 1 122 | }, 123 | "props": { 124 | "background": "#E6E7E8", 125 | "content": "vertical." 126 | }, 127 | "hello": "world" 128 | } 129 | ] 130 | }, 131 | { 132 | "component": "Item", 133 | "display": { 134 | "weight": 1 135 | }, 136 | "props": { 137 | "background": "#E6E7E8", 138 | "content": "horizontal." 139 | }, 140 | "hello": "world" 141 | } 142 | ] 143 | }, 144 | { 145 | "component": "Item", 146 | "props": { 147 | "background": "#E6E7E8", 148 | "content": "This" 149 | }, 150 | "hello": "world" 151 | }, 152 | { 153 | "component": "Item", 154 | "display": { 155 | "weight": 1 156 | }, 157 | "props": { 158 | "background": "#E6E7E8", 159 | "content": "horizontal." 160 | }, 161 | "hello": "world" 162 | }, 163 | { 164 | "component": "Layout", 165 | "props": { 166 | "orientation": "horizontal" 167 | }, 168 | "children": [ 169 | { 170 | "component": "Item", 171 | "display": { 172 | "weight": 1 173 | }, 174 | "props": { 175 | "background": "#E6E7E8", 176 | "content": "This" 177 | }, 178 | "hello": "world" 179 | }, 180 | { 181 | "component": "Item", 182 | "display": { 183 | "weight": 1 184 | }, 185 | "props": { 186 | "background": "#E6E7E8", 187 | "content": "is" 188 | }, 189 | "hello": "world" 190 | } 191 | ] 192 | }, 193 | { 194 | "component": "Item", 195 | "props": { 196 | "background": "#E6E7E8", 197 | "content": "is" 198 | }, 199 | "hello": "world" 200 | }, 201 | { 202 | "component": "Item", 203 | "props": { 204 | "background": "#E6E7E8", 205 | "content": "vertical." 206 | }, 207 | "hello": "world" 208 | } 209 | ] 210 | } 211 | ``` 212 | 213 | ## Props 214 | 215 | ### `displayComponents` (required) 216 | 217 | Used to register your local components in the grid system context. Just specify the object with following structure: 218 | 219 | ```javascript 220 | { 221 | 'Item': Item, 222 | 'OtherComponent': OtherComponent, 223 | } 224 | ``` 225 | 226 | And you'll be able to write `"component": "Item"` and `"component": "OtherComponent"` in your layout config JSON and vue-layout-composer will understand which components you want to use. 227 | 228 | ### `config` (required) 229 | 230 | Your layout config JSON, used to structure the grid. 231 | 232 | ### `editable` 233 | 234 | Add if you want to be able to edit the grid (drag & drop). 235 | 236 | ## Events 237 | 238 | ### `change:config` 239 | 240 | Triggered when the layout is locked ('Save' button is clicked). 241 | 242 | Returns the updated layout config JSON. 243 | 244 | You could send an API request to save the layout config data and load it whenever you want. Or save the config in local storage. 245 | 246 | ## Layout config 247 | 248 | Layout config is a tree-based JSON structure with 2 main parts: 249 | 250 | 1. Layout nodes 251 | 2. Component nodes 252 | 253 | There **always needs to be** one root layout node. 254 | 255 | ### Layout nodes 256 | 257 | ```json 258 | { 259 | "component": "Layout", 260 | "props": { 261 | "orientation": "horizontal" 262 | }, 263 | "children": [ 264 | ... 265 | ] 266 | } 267 | ``` 268 | 269 | Layout nodes are the ones that contain `"component": "Layout"`. Layout is a built-in layout component in vue-layout-composer. 270 | 271 | Layout nodes can be `horizontal` or `vertical`, which is specified in `props.orientation` attribute. The orientation specifies the direction the layout will put the components in. 272 | 273 | On mobile phones, layouts automatically change orientation to `vertical`. 274 | 275 | They also contain children nodes in `children` attribute. The children nodes can be either `layout nodes` or `component nodes`. 276 | 277 | ### Component nodes 278 | 279 | ```json 280 | { 281 | "component": "YOUR_COMPONENT_NAME", 282 | "display": { 283 | "weight": 1 284 | }, 285 | "props": { 286 | "background": "#E6E7E8", 287 | "content": "This" 288 | } 289 | } 290 | ``` 291 | 292 | Component nodes are the ones you put your own Vue components in. 293 | 294 | Specify the component with `"component": "YOUR_COMPONENT_NAME"` and pass any props via the `props` attribute. Props are your Vue component props. 295 | 296 | ### `display` attribute 297 | 298 | Every node supports a `display` attribute. 299 | 300 | At the moment only `weight` is supported. It can be thought of as the `flex-grow` CSS attribute. 301 | 302 | ## Creating custom components 303 | 304 | You can add your custom components to the layout by following a few simple API rules. 305 | 306 | ### Rules 307 | 308 | 1. Your component needs to have `lc-cell` component as the root element in template 309 | 2. Your component **needs to receive** following props: 310 | - `initialConfig` - json config specific for the component from the provided json config in `LayoutComposer` 311 | - `editable` - boolean that makes the component editable/non-editable - handle however you want 312 | - `cellProps` - internal cell-specific props provided by `Layout` component 313 | 3. Your component **can receive** any additional props specified in json config under `props` attribute 314 | 4. You need to pass `cellProps` to the `lc-cell` component 315 | 5. Your component needs to specify `getConfig` method that is used to build the json config after the layout is locked 316 | - you can inject/update any properties there, the change will be reflected in the json config 317 | - beware that it's one-way relationship, if you add props you need to handle them as well if you want to see the changes in DOM 318 | 319 | ### Example custom component 320 | 321 | Here's an example of `TextBlock` component that is capable of rendering text from config, editing the text in UI & putting the changes back in config via `getConfig` method. 322 | 323 | ```vue 324 | 348 | 349 | 394 | 395 | 398 | ``` 399 | 400 | ## Goals 401 | 402 | - [ ] Layout properties view 403 | - [ ] Resize in editor 404 | - [ ] Registered components picker 405 | - [ ] Server-side rendering support 406 | 407 | ## Long-term Goals 408 | 409 | - [ ] Data down, actions up 410 | - [ ] Power layout - support for GraphQL 411 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /config/layout.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": "Layout", 3 | "props": { 4 | "orientation": "vertical" 5 | }, 6 | "children": [ 7 | { 8 | "component": "Layout", 9 | "props": { 10 | "orientation": "horizontal" 11 | }, 12 | "children": [ 13 | { 14 | "component": "Item", 15 | "display": { 16 | "weight": 1 17 | }, 18 | "props": { 19 | "background": "#E6E7E8", 20 | "content": "This" 21 | }, 22 | "hello": "world" 23 | }, 24 | { 25 | "component": "Item", 26 | "display": { 27 | "weight": 2 28 | }, 29 | "props": { 30 | "background": "#E6E7E8", 31 | "content": "is" 32 | }, 33 | "hello": "world" 34 | }, 35 | { 36 | "component": "Layout", 37 | "props": { 38 | "orientation": "vertical" 39 | }, 40 | "children": [ 41 | { 42 | "component": "Item", 43 | "display": { 44 | "weight": 1 45 | }, 46 | "props": { 47 | "background": "#E6E7E8", 48 | "content": "and" 49 | }, 50 | "hello": "world" 51 | }, 52 | { 53 | "component": "Item", 54 | "display": { 55 | "weight": 1 56 | }, 57 | "props": { 58 | "background": "#E6E7E8", 59 | "content": "vertical." 60 | }, 61 | "hello": "world" 62 | } 63 | ] 64 | }, 65 | { 66 | "component": "Item", 67 | "display": { 68 | "weight": 1 69 | }, 70 | "props": { 71 | "background": "#E6E7E8", 72 | "content": "horizontal." 73 | }, 74 | "hello": "world" 75 | } 76 | ] 77 | }, 78 | { 79 | "component": "Item", 80 | "props": { 81 | "background": "#E6E7E8", 82 | "content": "This" 83 | }, 84 | "hello": "world" 85 | }, 86 | { 87 | "component": "Item", 88 | "display": { 89 | "weight": 1 90 | }, 91 | "props": { 92 | "background": "#E6E7E8", 93 | "content": "horizontal." 94 | }, 95 | "hello": "world" 96 | }, 97 | { 98 | "component": "Layout", 99 | "props": { 100 | "orientation": "horizontal" 101 | }, 102 | "children": [ 103 | { 104 | "component": "Item", 105 | "display": { 106 | "weight": 1 107 | }, 108 | "props": { 109 | "background": "#E6E7E8", 110 | "content": "This" 111 | }, 112 | "hello": "world" 113 | }, 114 | { 115 | "component": "Item", 116 | "display": { 117 | "weight": 1 118 | }, 119 | "props": { 120 | "background": "#E6E7E8", 121 | "content": "is" 122 | }, 123 | "hello": "world" 124 | } 125 | ] 126 | }, 127 | { 128 | "component": "Item", 129 | "props": { 130 | "background": "#E6E7E8", 131 | "content": "is" 132 | }, 133 | "hello": "world" 134 | }, 135 | { 136 | "component": "Item", 137 | "props": { 138 | "background": "#E6E7E8", 139 | "content": "vertical." 140 | }, 141 | "hello": "world" 142 | } 143 | ] 144 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-layout-composer", 3 | "version": "0.1.5", 4 | "description": "Dynamic, drag & drop, JSON-based grid layout for Vue", 5 | "author": "Ivan Jolic ", 6 | "main": "dist/vue-layout-composer.common.js", 7 | "module": "dist/vue-layout-composer.esm.js", 8 | "browser": "dist/vue-layout-composer.js", 9 | "unpkg": "dist/vue-layout-composer.js", 10 | "files": [ 11 | "dist/*", 12 | "src/*" 13 | ], 14 | "scripts": { 15 | "serve": "vue-cli-service serve", 16 | "build": "vue-cli-service build --target lib --name vue-layout-composer src/index.js", 17 | "lint": "eslint --ext .js,.vue" 18 | }, 19 | "dependencies": { 20 | "@fortawesome/fontawesome-svg-core": "^1.2.25", 21 | "@fortawesome/free-solid-svg-icons": "^5.11.2", 22 | "@fortawesome/vue-fontawesome": "^0.1.7", 23 | "core-js": "^2.6.5", 24 | "lodash": "^4.17.15", 25 | "vue": "^2.6.10" 26 | }, 27 | "devDependencies": { 28 | "@vue/cli-plugin-babel": "^3.11.0", 29 | "@vue/cli-plugin-eslint": "^3.11.0", 30 | "@vue/cli-service": "^3.11.0", 31 | "babel-eslint": "^10.0.3", 32 | "eslint": "^6.6.0", 33 | "eslint-config-airbnb-base": "^14.0.0", 34 | "eslint-config-prettier": "^6.6.0", 35 | "eslint-plugin-import": "^2.18.2", 36 | "eslint-plugin-prettier": "^3.1.1", 37 | "eslint-plugin-vue": "^6.0.1", 38 | "husky": "^3.1.0", 39 | "lint-staged": "^9.5.0", 40 | "vue-template-compiler": "^2.6.10" 41 | }, 42 | "husky": { 43 | "hooks": { 44 | "pre-commit": "lint-staged" 45 | } 46 | }, 47 | "lint-staged": { 48 | "*.{js,vue}": "yarn run lint" 49 | }, 50 | "postcss": { 51 | "plugins": { 52 | "autoprefixer": {} 53 | } 54 | }, 55 | "browserslist": [ 56 | "> 1%", 57 | "last 2 versions" 58 | ] 59 | } 60 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanjolic95/vue-layout-composer/94588b915886fec1ffd597b2d62f1560fc2e79c9/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | vue-layout-composer 10 | 11 | 12 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 37 | 38 | 47 | -------------------------------------------------------------------------------- /src/assets/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanjolic95/vue-layout-composer/94588b915886fec1ffd597b2d62f1560fc2e79c9/src/assets/demo.gif -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanjolic95/vue-layout-composer/94588b915886fec1ffd597b2d62f1560fc2e79c9/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/Item.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 57 | 58 | 65 | -------------------------------------------------------------------------------- /src/components/LayoutComposer/Index.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 135 | 136 | 166 | -------------------------------------------------------------------------------- /src/components/LayoutComposer/components/Layout/Index.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 141 | 142 | 183 | -------------------------------------------------------------------------------- /src/components/LayoutComposer/components/Layout/components/Cell/Index.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 426 | 427 | 561 | -------------------------------------------------------------------------------- /src/components/LayoutComposer/eventBus.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | export default new Vue() 4 | -------------------------------------------------------------------------------- /src/components/LayoutComposer/utils/layout.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-param-reassign */ 2 | import _ from 'lodash' 3 | 4 | const addIds = (jsonConfig, startAt = 0) => { 5 | function _addIds(config) { 6 | if (!config) return 7 | 8 | config.id = startAt 9 | startAt += 1 10 | 11 | if (!config.children) return 12 | config.children.forEach(el => { 13 | _addIds(el) 14 | }) 15 | } 16 | 17 | return _addIds(jsonConfig) 18 | } 19 | 20 | const removeIds = jsonConfig => { 21 | function _removeIds(config) { 22 | if (!config) return 23 | 24 | delete config.id 25 | 26 | if (!config.children) return 27 | config.children.forEach(el => { 28 | _removeIds(el) 29 | }) 30 | } 31 | 32 | return _removeIds(jsonConfig) 33 | } 34 | 35 | const removeCell = (config, cellId) => { 36 | if (cellId === 0) { 37 | return 38 | } 39 | 40 | if (config && config.children) { 41 | config.children = config.children.filter(child => child.id !== cellId) 42 | } 43 | } 44 | 45 | const addCell = (config, cell, parentId, prevSiblingId) => { 46 | if (config && config.id === parentId) { 47 | if (prevSiblingId) { 48 | const prevSiblingIndex = config.children.findIndex( 49 | child => child && child.id === prevSiblingId 50 | ) 51 | config.children = [ 52 | ...config.children.slice(0, prevSiblingIndex + 1), 53 | cell, 54 | ...config.children.slice(prevSiblingIndex + 1), 55 | ].filter(child => child) 56 | } else { 57 | config.children = [cell, ...config.children].filter(child => child) 58 | } 59 | 60 | return 61 | } 62 | 63 | if (config && config.children) { 64 | config.children.forEach(child => { 65 | addCell(child, cell, parentId, prevSiblingId) 66 | }) 67 | } 68 | } 69 | 70 | const moveElementToNewLayout = ( 71 | cellConfig, 72 | prevParentLayoutJson, 73 | nextParentLayoutJson, 74 | cellId, 75 | parentId, 76 | prevSiblingId 77 | ) => { 78 | const newPrevParentLayoutJson = _.cloneDeep(prevParentLayoutJson) 79 | const newNextParentLayoutJson = _.cloneDeep(nextParentLayoutJson) 80 | removeCell(newPrevParentLayoutJson, cellId) 81 | addCell(newNextParentLayoutJson, cellConfig, parentId, prevSiblingId) 82 | return { newPrevParentLayoutJson, newNextParentLayoutJson } 83 | } 84 | 85 | const moveElementToNewPositionInLayout = ( 86 | cellConfig, 87 | prevParentLayoutJson, 88 | cellId, 89 | parentId, 90 | prevSiblingId 91 | ) => { 92 | const newPrevParentLayoutJson = _.cloneDeep(prevParentLayoutJson) 93 | removeCell(newPrevParentLayoutJson, cellId) 94 | addCell(newPrevParentLayoutJson, cellConfig, parentId, prevSiblingId) 95 | return { newPrevParentLayoutJson, newNextParentLayoutJson: null } 96 | } 97 | 98 | const moveElementToNewPosition = ( 99 | cellConfig, 100 | prevParentLayoutJson, 101 | nextParentLayoutJson, 102 | cellId, 103 | parentId, 104 | prevParentId, 105 | prevSiblingId 106 | ) => { 107 | let newPrevParentLayoutJson 108 | let newNextParentLayoutJson 109 | 110 | if (parentId !== prevParentId) { 111 | ;({ 112 | newPrevParentLayoutJson, 113 | newNextParentLayoutJson, 114 | } = moveElementToNewLayout( 115 | cellConfig, 116 | prevParentLayoutJson, 117 | nextParentLayoutJson, 118 | cellId, 119 | parentId, 120 | prevSiblingId 121 | )) 122 | } else { 123 | ;({ 124 | newPrevParentLayoutJson, 125 | newNextParentLayoutJson, 126 | } = moveElementToNewPositionInLayout( 127 | cellConfig, 128 | prevParentLayoutJson, 129 | cellId, 130 | parentId, 131 | prevSiblingId 132 | )) 133 | } 134 | 135 | return { newPrevParentLayoutJson, newNextParentLayoutJson } 136 | } 137 | 138 | export default { 139 | moveElementToNewPosition, 140 | addIds, 141 | removeIds, 142 | removeCell, 143 | } 144 | -------------------------------------------------------------------------------- /src/components/LayoutComposer/utils/ui.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-param-reassign */ 2 | const PLACEHOLDER_CLASS = '.Layout_Cell--placeholder' 3 | 4 | const extractCellId = htmlId => htmlId && parseInt(htmlId.slice(5), 10) 5 | 6 | const showElement = $el => { 7 | $el.style.display = 'block' 8 | } 9 | 10 | const resetLayoutsStyle = () => { 11 | document.querySelectorAll('.Layout').forEach(layoutEl => { 12 | layoutEl.style.paddingTop = '0px' 13 | layoutEl.style.paddingBottom = '0px' 14 | layoutEl.style.paddingLeft = '0px' 15 | layoutEl.style.paddingRight = '0px' 16 | layoutEl.style.backgroundColor = null 17 | }) 18 | } 19 | 20 | const moveCellToPlaceholderPosition = ( 21 | cellId, 22 | newRoot = document, 23 | prevRoot = document 24 | ) => { 25 | const $placeholders = [...newRoot.querySelectorAll(PLACEHOLDER_CLASS)] 26 | const $otherPlaceholders = $placeholders.slice(1) 27 | 28 | if (!$placeholders.length) return 29 | 30 | const $placeholder = $placeholders[0] 31 | 32 | $otherPlaceholders.forEach($otherPlaceholder => $otherPlaceholder.remove()) 33 | 34 | const $cell = prevRoot.querySelector(`[id='${cellId}']`) 35 | 36 | if (!$cell) return 37 | 38 | $cell.style.marginTop = $placeholder.style.marginTop 39 | $cell.style.marginLeft = $placeholder.style.marginLeft 40 | 41 | resetLayoutsStyle() 42 | 43 | $placeholder.parentNode.insertBefore($cell, $placeholder.nextSibling) 44 | } 45 | 46 | const getParentId = $cell => { 47 | return extractCellId($cell.parentElement.parentElement.id) 48 | } 49 | 50 | const getPrevSiblingId = $cell => { 51 | return ( 52 | $cell.previousSibling.previousSibling && 53 | extractCellId($cell.previousSibling.previousSibling.id) 54 | ) 55 | } 56 | 57 | export default { 58 | extractCellId, 59 | moveCellToPlaceholderPosition, 60 | showElement, 61 | getParentId, 62 | getPrevSiblingId, 63 | resetLayoutsStyle, 64 | } 65 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' 2 | 3 | import { library } from '@fortawesome/fontawesome-svg-core' 4 | import { faArrowsAlt, faEdit, faTrash } from '@fortawesome/free-solid-svg-icons' 5 | import LayoutComposer from './components/LayoutComposer' 6 | import Layout from './components/LayoutComposer/components/Layout' 7 | import Cell from './components/LayoutComposer/components/Layout/components/Cell' 8 | 9 | import ComponentRegister from './plugins/ComponentRegister' 10 | 11 | library.add(faArrowsAlt) 12 | library.add(faEdit) 13 | library.add(faTrash) 14 | 15 | const components = { 16 | FontAwesomeIcon, 17 | LayoutComposer, 18 | Layout, 19 | Cell, 20 | } 21 | 22 | const plugin = (Vue, opts = { prefix: 'Lc' }) => { 23 | const { prefix } = opts 24 | const compNames = Object.keys(components) 25 | for (let i = 0; i < compNames.length; i += 1) { 26 | const name = compNames[i] 27 | if (name !== 'LayoutComposer' && name !== 'FontAwesomeIcon') 28 | Vue.component(`${prefix}${name}`, components[name]) 29 | else Vue.component(name, components[name]) 30 | } 31 | 32 | Vue.use(ComponentRegister) 33 | } 34 | 35 | export default plugin 36 | 37 | const version = '__VERSION__' 38 | 39 | export { version, LayoutComposer, Layout, Cell } 40 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | import { library } from '@fortawesome/fontawesome-svg-core' 4 | import { faArrowsAlt, faEdit, faTrash } from '@fortawesome/free-solid-svg-icons' 5 | import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' 6 | import ComponentRegister from './plugins/ComponentRegister' 7 | import App from './App.vue' 8 | 9 | Vue.config.productionTip = false 10 | 11 | Vue.use(ComponentRegister) 12 | 13 | library.add(faArrowsAlt) 14 | library.add(faEdit) 15 | library.add(faTrash) 16 | 17 | Vue.component('font-awesome-icon', FontAwesomeIcon) 18 | 19 | new Vue({ 20 | render: h => h(App), 21 | }).$mount('#app') 22 | -------------------------------------------------------------------------------- /src/plugins/ComponentRegister.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-param-reassign */ 2 | export default { 3 | install(Vue) { 4 | this.Vue = Vue 5 | 6 | const { registerComponent, getComponentName } = this 7 | 8 | Vue.prototype.$layoutComposer = { 9 | registerComponent: registerComponent(Vue), 10 | getComponentName, 11 | } 12 | }, 13 | registerComponent(Vue) { 14 | return (name, Component) => 15 | Vue.component(`layout-composer-presenter-${name}`, Component) 16 | }, 17 | getComponentName(name) { 18 | return `layout-composer-presenter-${name}` 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | configureWebpack: { 3 | resolve: { 4 | mainFiles: ['index', 'Index'], 5 | }, 6 | }, 7 | } 8 | --------------------------------------------------------------------------------