[ { "path": ".browserslistrc", "content": "> 1%\nlast 2 versions\nnot ie <= 8\n" }, { "path": ".eslintrc.js", "content": "module.exports = {\n root: true,\n env: {\n node: true\n },\n 'extends': [\n 'plugin:vue/essential',\n 'eslint:recommended'\n ],\n rules: {\n 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',\n 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'\n },\n parserOptions: {\n parser: 'babel-eslint'\n }\n}\n" }, { "path": ".github/FUNDING.yml", "content": "github: jbaysolutions\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Software version (please complete the following information):**\n - Browser [e.g. chrome, safari]\n - Vue Version [e.g. 2.5.7]\n - vue-grid-layout Version: [e.g. 2.3.3]\n\n**Describe the bug**\nA clear and concise description of what the bug is.\n\nPlease use the [CodeSandbox Template](https://codesandbox.io/s/5wy3rz5z1x?module=%2Fsrc%2FShowcaseLayout.js) to demonstrate your bug. It is much easier for us to help you if you do.\n\n\n**To Reproduce**\nSteps to reproduce the behavior:\n1. Go to '...'\n2. Click on '....'\n3. Scroll down to '....'\n4. See error\n\n**Expected behavior**\nA clear and concise description of what you expected to happen.\n\n**Screenshots**\nIf applicable, add screenshots to help explain your problem.\n\n**Additional context**\nAdd any other context about the problem here.\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.md", "content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n## If you have a feature request, please try to implement it before requesting it.
This is free software and the author is busy with other projects.\n\n**Is your feature request related to a problem? Please describe.**\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\n\n**Describe the solution you'd like**\nA clear and concise description of what you want to happen.\n\n**Describe alternatives you've considered**\nA clear and concise description of any alternative solutions or features you've considered.\n\n**Additional context**\nAdd any other context or screenshots about the feature request here.\n" }, { "path": ".github/workflows/build-test.yml", "content": "name: Build and Test\n\non:\n push:\n branches: [ master ]\n pull_request:\n branches: [ master ]\n\njobs:\n build:\n\n runs-on: ubuntu-latest\n\n strategy:\n matrix:\n node-version: [10.x, 12.x, 14.x, 15.x]\n # See supported Node.js release schedule at https://nodejs.org/en/about/releases/\n\n steps:\n - uses: actions/checkout@v2\n - name: Use Node.js ${{ matrix.node-version }}\n uses: actions/setup-node@v1\n with:\n node-version: ${{ matrix.node-version }}\n - name: Install dependency\n run: yarn\n - name: Lint check\n run: yarn lint\n - name: Build\n run: yarn build\n - name: Unit test\n run: yarn test:unit\n" }, { "path": ".github/workflows/vuepress-deploy.yml", "content": "name: Deploy vuepress website\non:\n push:\n branches:\n - master\njobs:\n build-and-deploy:\n runs-on: ubuntu-latest\n steps:\n - name: Checkout\n uses: actions/checkout@master\n\n - uses: actions/setup-node@v2\n with:\n node-version: '16'\n\n - name: vuepress-deploy\n uses: jenkey2011/vuepress-deploy@master\n env:\n ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}\n TARGET_REPO: jbaysolutions/vue-grid-layout\n TARGET_BRANCH: gh-pages\n BUILD_SCRIPT: cd website && yarn && yarn build\n BUILD_DIR: public\n" }, { "path": ".gitignore", "content": ".DS_Store\nnode_modules\n#/dist\ndist/demo.html\n\n# local env files\n.env.local\n.env.*.local\n\n# Log files\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Editor directories and files\n.idea\n.vscode\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw*\n\nyarn-error.log\n\nwebsite/docs/dist\n" }, { "path": "LICENSE", "content": "The MIT License (MIT)\n\nCopyright (c) 2015 greyby\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\n" }, { "path": "README-zh_CN.md", "content": "

vue-grid-layout

\n\n

\n \n

\n\nvue-grid-layout是一个类似于[Gridster](http://dsmorse.github.io/gridster.js/)的栅格布局系统, 适用于Vue.js。 **灵感源自于 [React-Grid-Layout](https://github.com/STRML/react-grid-layout)**\n\n### **当前版本:** 2.4.0 (支持 Vue 2.2+)\n\n### **Vue 2.1.10 及以下请使用 [2.1.3](https://github.com/jbaysolutions/vue-grid-layout/tree/2.1.3)**\n### **Vue 1 请使用 [1.0.3](https://github.com/jbaysolutions/vue-grid-layout/tree/1.0.3)**\n\n
\n\n[**[在线演示](https://jbaysolutions.github.io/vue-grid-layout/examples/01-basic.html) | [更新日志](/CHANGELOG.md)**]\n\n[English](./README.md) | 简体中文\n\n\n\n#### 成功案例\n\n- [DocsFold](https://www.docsfold.com/?utm_source=github&utm_medium=web&utm_campaign=vue-grid-layout)\n- [Draxed](https://www.draxed.com/?utm_source=github&utm_medium=web&utm_campaign=vue-grid-layout)\n- [Data Providers](https://www.dataproviders.io/?utm_source=github&utm_medium=web&utm_campaign=vue-grid-layout)\n- [Cataholic](https://cataholic.glitch.me/)\n\n*您还知悉其他项目? 请创建一个PR，谢谢!*\n\n## 特性\n\n* 可拖拽\n* 可调整大小\n* 静态部件（不可拖拽、调整大小）\n* 拖拽和调整大小时进行边界检查\n* 增减部件时避免重建栅格\n* 可序列化和还原的布局\n* 自动化 RTL 支持\n* 响应式\n\n\n## 入门指南\n\n### 安装\n\n#### npm\n\n # 使用 npm\n\tnpm install vue-grid-layout --save\n\n # 使用 yarn\n yarn add vue-grid-layout\n\n\n引入\n\n```javascript\n import VueGridLayout from 'vue-grid-layout';\n```\n\n加入到 Vue 组件\n\n ```javascript\n export default {\n components: {\n GridLayout: VueGridLayout.GridLayout,\n GridItem: VueGridLayout.GridItem\n },\n // ... data, methods, mounted (), etc.\n }\n\n```\n\n#### 浏览器\n\n在页面中使用已打包好的 [文件](https://github.com/jbaysolutions/vue-grid-layout/releases)。 此时组件已为可用状态。\n\n```html\n \n```\n\n### 使用\n\n```javascript\n\tvar testLayout = [\n\t {\"x\":0,\"y\":0,\"w\":2,\"h\":2,\"i\":\"0\"},\n\t {\"x\":2,\"y\":0,\"w\":2,\"h\":4,\"i\":\"1\"},\n\t {\"x\":4,\"y\":0,\"w\":2,\"h\":5,\"i\":\"2\"},\n\t {\"x\":6,\"y\":0,\"w\":2,\"h\":3,\"i\":\"3\"},\n\t {\"x\":8,\"y\":0,\"w\":2,\"h\":3,\"i\":\"4\"},\n\t {\"x\":10,\"y\":0,\"w\":2,\"h\":3,\"i\":\"5\"},\n\t {\"x\":0,\"y\":5,\"w\":2,\"h\":5,\"i\":\"6\"},\n\t {\"x\":2,\"y\":5,\"w\":2,\"h\":5,\"i\":\"7\"},\n\t {\"x\":4,\"y\":5,\"w\":2,\"h\":5,\"i\":\"8\"},\n\t {\"x\":6,\"y\":3,\"w\":2,\"h\":4,\"i\":\"9\"},\n\t {\"x\":8,\"y\":4,\"w\":2,\"h\":4,\"i\":\"10\"},\n\t {\"x\":10,\"y\":4,\"w\":2,\"h\":4,\"i\":\"11\"},\n\t {\"x\":0,\"y\":10,\"w\":2,\"h\":5,\"i\":\"12\"},\n\t {\"x\":2,\"y\":10,\"w\":2,\"h\":5,\"i\":\"13\"},\n\t {\"x\":4,\"y\":8,\"w\":2,\"h\":4,\"i\":\"14\"},\n\t {\"x\":6,\"y\":8,\"w\":2,\"h\":4,\"i\":\"15\"},\n\t {\"x\":8,\"y\":10,\"w\":2,\"h\":5,\"i\":\"16\"},\n\t {\"x\":10,\"y\":4,\"w\":2,\"h\":2,\"i\":\"17\"},\n\t {\"x\":0,\"y\":9,\"w\":2,\"h\":3,\"i\":\"18\"},\n\t {\"x\":2,\"y\":6,\"w\":2,\"h\":2,\"i\":\"19\"}\n\t];\n\n\tnew Vue({\n\t el: '#app',\n\t data: {\n\t layout: testLayout,\n\t },\n\t});\n```\n\n\n```html\n\n \n\n \n {{item.i}}\n \n \n```\n\n\n### 文档\n\n#### 属性\n\n##### GridLayout\n\n* **layout**\n\n * type: `Array`\n * required: `true`\n\n 数据源。值必须为 `Array`，其数据项为 `Object`。 每条数据项必须有 `i`, `x`, `y`, `w` 和 `h` 属性。 请参考下面的 `GridItem`。\n\n* **responsiveLayouts**\n\n * type: `Object`\n * required: `false`\n * default: `{}`\n\n 如果 `responsive` 设置为 `true`，该配置将作为栅格中每个断点的初始布局。键值是断点名称，每项的值都是类似 `layout` 属性定义的数据结构，值必须为 `Array`，其数据项为 `Object`。例如： `{lg: [layout items], md: [layout items]}`。需要注意的是，在创建栅格布局后设置该属性无效。\n\n* **colNum**\n\n * type: `Number`\n * required: `false`\n * default: `12`\n\n 定义栅格系统的列数，其值需为自然数。\n\n* **rowHeight**\n\n * type: `Number`\n * required: `false`\n * default: `150`\n\n 每行的高度，单位像素。\n\n* **maxRows**\n\n * type: `Number`\n * required: `false`\n * default: `Infinity`\n\n 定义最大行数。\n\n* **margin**\n\n * type: `Array`\n * required: `false`\n * default: `[10, 10]`\n\n 定义栅格中的元素边距。\n\n 值必须是包含两个 `Number`的数组，数组中第一个元素表示水平边距，第二个表示垂直边距，单位为像素。\n\n* **isDraggable**\n\n * type: `Boolean`\n * required: `false`\n * default: `true`\n\n 标识栅格中的元素是否可拖拽。\n\n* **isResizable**\n\n * type: `Boolean`\n * required: `false`\n * default: `true`\n\n 标识栅格中的元素是否可调整大小。\n\n* **isMirrored**\n\n * type: `Boolean`\n * required: `false`\n * default: `false`\n\n 标识栅格中的元素是否可镜像反转。\n\n* **autoSize**\n\n * type: `Boolean`\n * required: `false`\n * default: `true`\n\n 标识容器是否自动调整大小。\n\n* **verticalCompact**\n\n * type: `Boolean`\n * required: `false`\n * default: `true`\n\n 标识布局是否垂直压缩。\n\n* **useCssTransforms**\n\n * type: `Boolean`\n * required: `false`\n * default: `true`\n\n 标识是否使用CSS属性 `transition-property: transform;`。\n\n* **responsive**\n\n * type: `Boolean`\n * required: `false`\n * default: `false`\n\n 标识布局是否为响应式。\n\n* **breakpoints**\n\n * type: `Object`\n * required: `false`\n * default: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }\n\n 为响应式布局设置断点，其中参数代表不同设备的宽度：lg（large），md（medium），sm（small），xs（extra small）。\n\n* **cols**\n\n * type: `Object`\n * required: `false`\n * default: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }\n\n 设置每个断点对应的列数。\n\n* **useStyleCursor**\n\n * type: `Boolean`\n * required: `false`\n * default: `true`\n\n 标识是否使用动态鼠标指针样式。当拖动出现卡顿时，将此值设为 `false`也许可以缓解布局问题。\n\n * **preventCollision**\n\n * type: `Boolean`\n * default: `false`\n\n 值设置为ture时，栅格只能拖动至空白处。\n\n##### GridItem\n\n* **i**\n\n * type: `String`\n * required: `true`\n\n 栅格中元素的ID。\n\n* **x**\n\n * type: `Number`\n * required: `true`\n\n 标识栅格元素位于第几列，需为自然数。\n\n* **y**\n\n * type: `Number`\n * required: `true`\n\n 标识栅格元素位于第几行，需为自然数。\n\n* **w**\n\n * type: `Number`\n * required: `true`\n\n 标识栅格元素的初始宽度，值为`colWidth`的倍数。\n\n* **h**\n\n * type: `Number`\n * required: `true`\n\n 标识栅格元素的初始高度，值为`rowHeight`的倍数。\n\n* **minW**\n\n * type: `Number`\n * required: `false`\n * default: `1`\n\n 栅格元素的最小宽度，值为`colWidth`的倍数。\n\n 如果`w`小于`minW`，则`minW`的值会被`w`覆盖。\n\n* **minH**\n\n * type: `Number`\n * required: `false`\n * default: `1`\n\n 栅格元素的最小高度，值为`rowHeight`的倍数。\n\n 如果`h`小于`minH`，则`minH`的值会被`h`覆盖。\n\n* **maxW**\n\n * type: `Number`\n * required: `false`\n * default: `Infinity`\n\n 栅格元素的最大宽度，值为`colWidth`的倍数。\n\n 如果`w`大于`maxW`，则`maxW`的值会被`w`覆盖。\n\n* **maxH**\n\n * type: `Number`\n * required: `false`\n * default: `Infinity`\n\n 栅格元素的最大高度，值为`rowHeight`的倍数。\n\n 如果`h`大于`maxH`，则`maxH`的值会被`h`覆盖。\n\n* **isDraggable**\n\n * type: `Boolean`\n * required: `false`\n * default: `null`\n\n 标识栅格元素是否可拖拽。如果值为`null`则取决于父容器。\n\n* **isResizable**\n\n * type: `Boolean`\n * required: `false`\n * default: `null`\n\n 标识栅格元素是否可调整大小。如果值为`null`则取决于父容器。\n\n* **static**\n\n * type: `Boolean`\n * required: `false`\n * default: `false`\n\n 标识栅格元素是否为静态的（无法拖拽、调整大小或被其他元素移动）。\n\n* **dragIgnoreFrom**\n\n * type: `String`\n * required: `false`\n * default: `'a, button'`\n\n 标识栅格元素中哪些子元素无法触发拖拽事件，值为`css-like`选择器。\n\n 请参考 [interact.js docs](http://interactjs.io/docs/#ignorable-selectors)中的`ignoreFrom`。\n\n* **dragAllowFrom**\n\n * type: `String`\n * required: `false`\n * default: `null`\n\n 标识栅格元素中哪些子元素可以触发拖拽事件，值为`css-like`选择器。\n\n 如果值为`null`则表示所有子元素（`dragIgnoreFrom`的除外）。\n\n 请参考 [interact.js docs](http://interactjs.io/docs/#ignorable-selectors)中的`allowFrom`。\n\n* **resizeIgnoreFrom**\n\n * type: `String`\n * required: `false`\n * default: `'a, button'`\n\n 标识栅格元素中哪些子元素无法触发调整大小的事件，值为`css-like`选择器。\n\n 请参考 [interact.js docs](http://interactjs.io/docs/#ignorable-selectors)中的`ignoreFrom`。\n\n\n\n#### 事件\n\n每一个栅格元素`grid-item`上都可以添加监听器，用于监听移动和调整大小事件，这样父级Vue对象就可以收到通知。\n\n [示例](https://jbaysolutions.github.io/vue-grid-layout/examples/02-events.html)\n\n````html\n\n \n\n \n {{item.i}}\n \n \n````\n\n* **layoutCreatedEvent**\n\n 对应Vue生命周期的`created`\n\n```javascript\n layoutCreatedEvent: function(newLayout){\n console.log(\"Created layout: \", newLayout)\n }\n```\n\n* **layoutBeforeMountEvent**\n\n 对应Vue生命周期的`beforeMount`\n\n```javascript\n layoutBeforeMountEvent: function(newLayout){\n console.log(\"beforeMount layout: \", newLayout)\n }\n```\n\n* **layoutMountedEvent**\n\n 对应Vue生命周期的`mounted`\n\n```javascript\n layoutMountedEvent: function(newLayout){\n console.log(\"Mounted layout: \", newLayout)\n }\n```\n\n* **layoutReadyEvent**\n\n 当完成mount中的所有操作时生成的事件\n\n```javascript\n layoutReadyEvent: function(newLayout){\n console.log(\"Ready layout: \", newLayout)\n }\n```\n\n* **layoutUpdatedEvent**\n\n 更新事件（布局更新或栅格元素的位置重新计算）\n\n```javascript\n layoutUpdatedEvent: function(newLayout){\n console.log(\"Updated layout: \", newLayout)\n }\n```\n\n* **moveEvent**\n\n 移动时的事件\n\n```javascript\n moveEvent: function(i, newX, newY){\n console.log(\"MOVE i=\" + i + \", X=\" + newX + \", Y=\" + newY);\n },\n```\n\n* **resizeEvent**\n\n 调整大小时的事件\n\n```javascript\n resizeEvent: function(i, newH, newW, newHPx, newWPx){\n console.log(\"RESIZE i=\" + i + \", H=\" + newH + \", W=\" + newW + \", H(px)=\" + newHPx + \", W(px)=\" + newWPx);\n },\n```\n\n* **movedEvent**\n\n 移动后的事件\n\n```javascript\n movedEvent: function(i, newX, newY){\n console.log(\"MOVED i=\" + i + \", X=\" + newX + \", Y=\" + newY);\n },\n```\n\n* **resizedEvent**\n\n 调整大小后的事件\n\n```javascript\n /**\n *\n * @param i the item id/index\n * @param newH new height in grid rows\n * @param newW new width in grid columns\n * @param newHPx new height in pixels\n * @param newWPx new width in pixels\n *\n */\n resizedEvent: function(i, newH, newW, newHPx, newWPx){\n console.log(\"RESIZED i=\" + i + \", H=\" + newH + \", W=\" + newW + \", H(px)=\" + newHPx + \", W(px)=\" + newWPx);\n },\n```\n\n\n## 如何贡献\n\n请提交issue或PR。\n\n\n## 待办事项\n\n- [x] 基础栅格布局\n- [x] 响应式\n- [x] 可拖拽的栅格元素\n- [x] 可调整大小的栅格元素\n- [x] 静态元素\n- [x] 每个元素的Min/max w/h\n" }, { "path": "README.md", "content": "

\"Vue

\n\n

vue-grid-layout

\n\n

\n\n \n \n \n\n \n\n\n

\n

\nDocumentation Website\n

\n\n## What is Vue Grid Layout?\n\nvue-grid-layout is a grid layout system, like [Gridster](http://dsmorse.github.io/gridster.js/), for Vue.js. **Heavily inspired by [React-Grid-Layout](https://github.com/STRML/react-grid-layout)**\n\n## Features\n\n* Draggable widgets\n* Resizable widgets\n* Static widgets\n* Bounds checking for dragging and resizing\n* Widgets may be added or removed without rebuilding grid\n* Layout can be serialized and restored\n* Automatic RTL support (resizing not working with RTL on 2.2.0)\n* Responsive\n\n## **Current version:** 2.4.0 (Supports Vue 2.2+)\n\n#### **For legacy browsers**, like IE11, use version [2.3.12-legacy](https://github.com/jbaysolutions/vue-grid-layout/tree/legacy)\n#### **For Vue 2.1.10 and below use version [2.1.3](https://github.com/jbaysolutions/vue-grid-layout/tree/2.1.3)**\n#### **For Vue 1 use version [1.0.3](https://github.com/jbaysolutions/vue-grid-layout/tree/1.0.3)** \n\n## Documentation\n\nCheck out the Documentation Website\n\n\n\n#### Projects using vue-grid-layout\n\n- [DocsFold](https://www.docsfold.com/?utm_source=github&utm_medium=web&utm_campaign=vue-grid-layout)\n- [Draxed](https://www.draxed.com/?utm_source=github&utm_medium=web&utm_campaign=vue-grid-layout)\n- [Data Providers](https://www.dataproviders.io/?utm_source=github&utm_medium=web&utm_campaign=vue-grid-layout)\n- [Cataholic](https://cataholic.glitch.me/)\n\n*Know of others? Create a PR to let me know!*\n\n\n## Contribute\n\nIf you have a feature request, please add it as an issue or make a pull request.\n\n\nDeveloped by JBay Solutions \n" }, { "path": "babel.config.js", "content": "module.exports = {\n presets: [\n '@vue/app',\n '@babel/preset-env'\n ],\n \"plugins\": [\n \"transform-flow-comments\"\n ]\n}\n" }, { "path": "dist/vue-grid-layout.common.js", "content": "/*! vue-grid-layout - 2.4.0 | (c) 2015, 2022 Gustavo Santos (JBay Solutions) (http://www.jbaysolutions.com) | https://github.com/jbaysolutions/vue-grid-layout */\nmodule.exports =\n/******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId]) {\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\ti: moduleId,\n/******/ \t\t\tl: false,\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.l = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// define getter function for harmony exports\n/******/ \t__webpack_require__.d = function(exports, name, getter) {\n/******/ \t\tif(!__webpack_require__.o(exports, name)) {\n/******/ \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// define __esModule on exports\n/******/ \t__webpack_require__.r = function(exports) {\n/******/ \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n/******/ \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n/******/ \t\t}\n/******/ \t\tObject.defineProperty(exports, '__esModule', { value: true });\n/******/ \t};\n/******/\n/******/ \t// create a fake namespace object\n/******/ \t// mode & 1: value is a module id, require it\n/******/ \t// mode & 2: merge all properties of value into the ns\n/******/ \t// mode & 4: return value when already ns object\n/******/ \t// mode & 8|1: behave like require\n/******/ \t__webpack_require__.t = function(value, mode) {\n/******/ \t\tif(mode & 1) value = __webpack_require__(value);\n/******/ \t\tif(mode & 8) return value;\n/******/ \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n/******/ \t\tvar ns = Object.create(null);\n/******/ \t\t__webpack_require__.r(ns);\n/******/ \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n/******/ \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n/******/ \t\treturn ns;\n/******/ \t};\n/******/\n/******/ \t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t__webpack_require__.n = function(module) {\n/******/ \t\tvar getter = module && module.__esModule ?\n/******/ \t\t\tfunction getDefault() { return module['default']; } :\n/******/ \t\t\tfunction getModuleExports() { return module; };\n/******/ \t\t__webpack_require__.d(getter, 'a', getter);\n/******/ \t\treturn getter;\n/******/ \t};\n/******/\n/******/ \t// Object.prototype.hasOwnProperty.call\n/******/ \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n/******/\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(__webpack_require__.s = \"fb15\");\n/******/ })\n/************************************************************************/\n/******/ ({\n\n/***/ \"01f9\":\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\nvar LIBRARY = __webpack_require__(\"2d00\");\nvar $export = __webpack_require__(\"5ca1\");\nvar redefine = __webpack_require__(\"2aba\");\nvar hide = __webpack_require__(\"32e9\");\nvar Iterators = __webpack_require__(\"84f2\");\nvar $iterCreate = __webpack_require__(\"41a0\");\nvar setToStringTag = __webpack_require__(\"7f20\");\nvar getPrototypeOf = __webpack_require__(\"38fd\");\nvar ITERATOR = __webpack_require__(\"2b4c\")('iterator');\nvar BUGGY = !([].keys && 'next' in [].keys()); // Safari has buggy iterators w/o `next`\nvar FF_ITERATOR = '@@iterator';\nvar KEYS = 'keys';\nvar VALUES = 'values';\n\nvar returnThis = function () { return this; };\n\nmodule.exports = function (Base, NAME, Constructor, next, DEFAULT, IS_SET, FORCED) {\n $iterCreate(Constructor, NAME, next);\n var getMethod = function (kind) {\n if (!BUGGY && kind in proto) return proto[kind];\n switch (kind) {\n case KEYS: return function keys() { return new Constructor(this, kind); };\n case VALUES: return function values() { return new Constructor(this, kind); };\n } return function entries() { return new Constructor(this, kind); };\n };\n var TAG = NAME + ' Iterator';\n var DEF_VALUES = DEFAULT == VALUES;\n var VALUES_BUG = false;\n var proto = Base.prototype;\n var $native = proto[ITERATOR] || proto[FF_ITERATOR] || DEFAULT && proto[DEFAULT];\n var $default = $native || getMethod(DEFAULT);\n var $entries = DEFAULT ? !DEF_VALUES ? $default : getMethod('entries') : undefined;\n var $anyNative = NAME == 'Array' ? proto.entries || $native : $native;\n var methods, key, IteratorPrototype;\n // Fix native\n if ($anyNative) {\n IteratorPrototype = getPrototypeOf($anyNative.call(new Base()));\n if (IteratorPrototype !== Object.prototype && IteratorPrototype.next) {\n // Set @@toStringTag to native iterators\n setToStringTag(IteratorPrototype, TAG, true);\n // fix for some old engines\n if (!LIBRARY && typeof IteratorPrototype[ITERATOR] != 'function') hide(IteratorPrototype, ITERATOR, returnThis);\n }\n }\n // fix Array#{values, @@iterator}.name in V8 / FF\n if (DEF_VALUES && $native && $native.name !== VALUES) {\n VALUES_BUG = true;\n $default = function values() { return $native.call(this); };\n }\n // Define iterator\n if ((!LIBRARY || FORCED) && (BUGGY || VALUES_BUG || !proto[ITERATOR])) {\n hide(proto, ITERATOR, $default);\n }\n // Plug for library\n Iterators[NAME] = $default;\n Iterators[TAG] = returnThis;\n if (DEFAULT) {\n methods = {\n values: DEF_VALUES ? $default : getMethod(VALUES),\n keys: IS_SET ? $default : getMethod(KEYS),\n entries: $entries\n };\n if (FORCED) for (key in methods) {\n if (!(key in proto)) redefine(proto, key, methods[key]);\n } else $export($export.P + $export.F * (BUGGY || VALUES_BUG), NAME, methods);\n }\n return methods;\n};\n\n\n/***/ }),\n\n/***/ \"02f4\":\n/***/ (function(module, exports, __webpack_require__) {\n\nvar toInteger = __webpack_require__(\"4588\");\nvar defined = __webpack_require__(\"be13\");\n// true -> String#at\n// false -> String#codePointAt\nmodule.exports = function (TO_STRING) {\n return function (that, pos) {\n var s = String(defined(that));\n var i = toInteger(pos);\n var l = s.length;\n var a, b;\n if (i < 0 || i >= l) return TO_STRING ? '' : undefined;\n a = s.charCodeAt(i);\n return a < 0xd800 || a > 0xdbff || i + 1 === l || (b = s.charCodeAt(i + 1)) < 0xdc00 || b > 0xdfff\n ? TO_STRING ? s.charAt(i) : a\n : TO_STRING ? s.slice(i, i + 2) : (a - 0xd800 << 10) + (b - 0xdc00) + 0x10000;\n };\n};\n\n\n/***/ }),\n\n/***/ \"0390\":\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\nvar at = __webpack_require__(\"02f4\")(true);\n\n // `AdvanceStringIndex` abstract operation\n// https://tc39.github.io/ecma262/#sec-advancestringindex\nmodule.exports = function (S, index, unicode) {\n return index + (unicode ? at(S, index).length : 1);\n};\n\n\n/***/ }),\n\n/***/ \"0bfb\":\n/***/ (function(module, exports, __webpack_require__) {\n\n\"use strict\";\n\n// 21.2.5.3 get RegExp.prototype.flags\nvar anObject = __webpack_require__(\"cb7c\");\nmodule.exports = function () {\n var that = anObject(this);\n var result = '';\n if (that.global) result += 'g';\n if (that.ignoreCase) result += 'i';\n if (that.multiline) result += 'm';\n if (that.unicode) result += 'u';\n if (that.sticky) result += 'y';\n return result;\n};\n\n\n/***/ }),\n\n/***/ \"0d58\":\n/***/ (function(module, exports, __webpack_require__) {\n\n// 19.1.2.14 / 15.2.3.14 Object.keys(O)\nvar $keys = __webpack_require__(\"ce10\");\nvar enumBugKeys = __webpack_require__(\"e11e\");\n\nmodule.exports = Object.keys || function keys(O) {\n return $keys(O, enumBugKeys);\n};\n\n\n/***/ }),\n\n/***/ \"1156\":\n/***/ (function(module, exports, __webpack_require__) {\n\n// style-loader: Adds some css to the DOM by adding a \n\n\n" }, { "path": "src/components/CustomDragElement.vue", "content": "\n\n" }, { "path": "src/components/GridItem.vue", "content": "\n\n\n" }, { "path": "src/components/GridLayout.vue", "content": "\n\n\n" }, { "path": "src/components/TestElement.vue", "content": "\n\n\n" }, { "path": "src/components/index.js", "content": "import GridItem from './GridItem.vue';\nimport GridLayout from './GridLayout.vue';\n// import ResponsiveGridLayout from './ResponsiveGridLayout.vue';\n\nconst VueGridLayout = {\n // ResponsiveGridLayout,\n GridLayout,\n GridItem\n}\n\nexport function install(Vue) {\n if (install.installed) return;\n install.installed = true;\n Object.keys(VueGridLayout).forEach(name => {\n Vue.component(name, VueGridLayout[name]);\n });\n}\n\nconst plugin = {\n install,\n};\n\nlet GlobalVue = null;\nif (typeof window !== 'undefined') {\n GlobalVue = window.Vue;\n} else if (typeof global !== 'undefined') {\n GlobalVue = global.Vue;\n}\nif (GlobalVue) {\n GlobalVue.use(plugin);\n}\n\nexport default VueGridLayout;\nexport { GridLayout, GridItem };\n" }, { "path": "src/helpers/DOM.js", "content": "let currentDir: \"ltr\" | \"rtl\" | \"auto\" = \"auto\";\n// let currentDir = \"auto\";\n\nfunction hasDocument(){\n return (typeof document !== \"undefined\");\n}\n\nfunction hasWindow(){\n return (typeof window !== \"undefined\");\n}\n\nexport function getDocumentDir(){\n if(!hasDocument()){\n return currentDir;\n }\n const direction = (typeof document.dir !== \"undefined\") ?\n document.dir :\n document.getElementsByTagName(\"html\")[0].getAttribute(\"dir\");\n return direction;\n}\n\nexport function setDocumentDir(dir: \"ltr\" | \"rtl\" | \"auto\"){\n// export function setDocumentDir(dir){\n if(!hasDocument){\n currentDir = dir;\n return;\n }\n\n const html = document.getElementsByTagName(\"html\")[0];\n html.setAttribute(\"dir\", dir);\n}\n\nexport function addWindowEventListener(event:string, callback: () => mixed){\n if(!hasWindow){\n\n callback();\n return;\n }\n window.addEventListener(event, callback);\n}\n\nexport function removeWindowEventListener(event:string, callback: () => mixed){\n if(!hasWindow){\n return;\n }\n window.removeEventListener(event, callback);\n}\n\n\n\n" }, { "path": "src/helpers/draggableUtils.js", "content": "// Get {x, y} positions from event.\nexport function getControlPosition(e) {\n return offsetXYFromParentOf(e);\n}\n\n\n// Get from offsetParent\nexport function offsetXYFromParentOf(evt) {\n const offsetParent = evt.target.offsetParent || document.body;\n const offsetParentRect = evt.offsetParent === document.body ? {left: 0, top: 0} : offsetParent.getBoundingClientRect();\n\n const x = evt.clientX + offsetParent.scrollLeft - offsetParentRect.left;\n const y = evt.clientY + offsetParent.scrollTop - offsetParentRect.top;\n\n /*const x = Math.round(evt.clientX + offsetParent.scrollLeft - offsetParentRect.left);\n const y = Math.round(evt.clientY + offsetParent.scrollTop - offsetParentRect.top);*/\n\n\n return {x, y};\n}\n\n\n// Create an data object exposed by 's events\nexport function createCoreData(lastX, lastY, x, y) {\n // State changes are often (but not always!) async. We want the latest value.\n const isStart = !isNum(lastX);\n\n if (isStart) {\n // If this is our first move, use the x and y as last coords.\n return {\n deltaX: 0, deltaY: 0,\n lastX: x, lastY: y,\n x: x, y: y\n };\n } else {\n // Otherwise calculate proper values.\n return {\n deltaX: x - lastX, deltaY: y - lastY,\n lastX: lastX, lastY: lastY,\n x: x, y: y\n };\n }\n}\n\n\nfunction isNum(num) {\n return typeof num === 'number' && !isNaN(num);\n}\n\n" }, { "path": "src/helpers/responsiveUtils.js", "content": "// @flow\n\nimport {cloneLayout, compact, correctBounds} from './utils';\n\nimport type {Layout} from './utils';\nexport type ResponsiveLayout = {lg?: Layout, md?: Layout, sm?: Layout, xs?: Layout, xxs?: Layout};\ntype Breakpoint = string;\ntype Breakpoints = {lg?: number, md?: number, sm?: number, xs?: number, xxs?: number};\n\n/**\n * Given a width, find the highest breakpoint that matches is valid for it (width > breakpoint).\n *\n * @param {Object} breakpoints Breakpoints object (e.g. {lg: 1200, md: 960, ...})\n * @param {Number} width Screen width.\n * @return {String} Highest breakpoint that is less than width.\n */\nexport function getBreakpointFromWidth(breakpoints: Breakpoints, width: number): Breakpoint {\n const sorted = sortBreakpoints(breakpoints);\n let matching = sorted[0];\n for (let i = 1, len = sorted.length; i < len; i++) {\n const breakpointName = sorted[i];\n if (width > breakpoints[breakpointName]) matching = breakpointName;\n }\n return matching;\n}\n\n\n/**\n * Given a breakpoint, get the # of cols set for it.\n * @param {String} breakpoint Breakpoint name.\n * @param {Object} cols Map of breakpoints to cols.\n * @return {Number} Number of cols.\n */\nexport function getColsFromBreakpoint(breakpoint: Breakpoint, cols: Breakpoints): number {\n if (!cols[breakpoint]) {\n throw new Error(\"ResponsiveGridLayout: `cols` entry for breakpoint \" + breakpoint + \" is missing!\");\n }\n return cols[breakpoint];\n}\n\n/**\n * Given existing layouts and a new breakpoint, find or generate a new layout.\n *\n * This finds the layout above the new one and generates from it, if it exists.\n *\n * @param {Array} orgLayout Original layout.\n * @param {Object} layouts Existing layouts.\n * @param {Array} breakpoints All breakpoints.\n * @param {String} breakpoint New breakpoint.\n * @param {String} breakpoint Last breakpoint (for fallback).\n * @param {Number} cols Column count at new breakpoint.\n * @param {Boolean} verticalCompact Whether or not to compact the layout\n * vertically.\n * @return {Array} New layout.\n */\nexport function findOrGenerateResponsiveLayout(orgLayout: Layout, layouts: ResponsiveLayout, breakpoints: Breakpoints,\n breakpoint: Breakpoint, lastBreakpoint: Breakpoint,\n cols: number, verticalCompact: boolean): Layout {\n // If it already exists, just return it.\n if (layouts[breakpoint]) return cloneLayout(layouts[breakpoint]);\n // Find or generate the next layout\n let layout = orgLayout;\n\n const breakpointsSorted = sortBreakpoints(breakpoints);\n const breakpointsAbove = breakpointsSorted.slice(breakpointsSorted.indexOf(breakpoint));\n for (let i = 0, len = breakpointsAbove.length; i < len; i++) {\n const b = breakpointsAbove[i];\n if (layouts[b]) {\n layout = layouts[b];\n break;\n }\n }\n layout = cloneLayout(layout || []); // clone layout so we don't modify existing items\n return compact(correctBounds(layout, {cols: cols}), verticalCompact);\n}\n\nexport function generateResponsiveLayout(layout: Layout, breakpoints: Breakpoints,\n breakpoint: Breakpoint, lastBreakpoint: Breakpoint,\n cols: number, verticalCompact: boolean): Layout {\n // If it already exists, just return it.\n /*if (layouts[breakpoint]) return cloneLayout(layouts[breakpoint]);\n // Find or generate the next layout\n let layout = layouts[lastBreakpoint];*/\n /*const breakpointsSorted = sortBreakpoints(breakpoints);\n const breakpointsAbove = breakpointsSorted.slice(breakpointsSorted.indexOf(breakpoint));\n for (let i = 0, len = breakpointsAbove.length; i < len; i++) {\n const b = breakpointsAbove[i];\n if (layouts[b]) {\n layout = layouts[b];\n break;\n }\n }*/\n layout = cloneLayout(layout || []); // clone layout so we don't modify existing items\n return compact(correctBounds(layout, {cols: cols}), verticalCompact);\n}\n\n/**\n * Given breakpoints, return an array of breakpoints sorted by width. This is usually\n * e.g. ['xxs', 'xs', 'sm', ...]\n *\n * @param {Object} breakpoints Key/value pair of breakpoint names to widths.\n * @return {Array} Sorted breakpoints.\n */\nexport function sortBreakpoints(breakpoints: Breakpoints): Array {\n const keys: Array = Object.keys(breakpoints);\n return keys.sort(function(a, b) {\n return breakpoints[a] - breakpoints[b];\n });\n}\n" }, { "path": "src/helpers/utils.js", "content": "// @flow\nexport type LayoutItemRequired = {w: number, h: number, x: number, y: number, i: string};\nexport type LayoutItem = LayoutItemRequired &\n {minW?: number, minH?: number, maxW?: number, maxH?: number,\n moved?: boolean, static?: boolean,\n isDraggable?: ?boolean, isResizable?: ?boolean};\nexport type Layout = Array;\n// export type Position = {left: number, top: number, width: number, height: number};\n/*\nexport type DragCallbackData = {\n node: HTMLElement,\n x: number, y: number,\n deltaX: number, deltaY: number,\n lastX: number, lastY: number\n};\n*/\n// export type DragEvent = {e: Event} & DragCallbackData;\nexport type Size = {width: number, height: number};\n// export type ResizeEvent = {e: Event, node: HTMLElement, size: Size};\n\n// const isProduction = process.env.NODE_ENV === 'production';\n/**\n * Return the bottom coordinate of the layout.\n *\n * @param {Array} layout Layout array.\n * @return {Number} Bottom coordinate.\n */\nexport function bottom(layout: Layout): number {\n let max = 0, bottomY;\n for (let i = 0, len = layout.length; i < len; i++) {\n bottomY = layout[i]. y + layout[i].h;\n if (bottomY > max) max = bottomY;\n }\n return max;\n}\n\nexport function cloneLayout(layout: Layout): Layout {\n const newLayout = Array(layout.length);\n for (let i = 0, len = layout.length; i < len; i++) {\n newLayout[i] = cloneLayoutItem(layout[i]);\n }\n return newLayout;\n}\n\n// Fast path to cloning, since this is monomorphic\nexport function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem {\n /*return {\n w: layoutItem.w, h: layoutItem.h, x: layoutItem.x, y: layoutItem.y, i: layoutItem.i,\n minW: layoutItem.minW, maxW: layoutItem.maxW, minH: layoutItem.minH, maxH: layoutItem.maxH,\n moved: Boolean(layoutItem.moved), static: Boolean(layoutItem.static),\n // These can be null\n isDraggable: layoutItem.isDraggable, isResizable: layoutItem.isResizable\n };*/\n return JSON.parse(JSON.stringify(layoutItem));\n}\n\n/**\n * Given two layoutitems, check if they collide.\n *\n * @return {Boolean} True if colliding.\n */\nexport function collides(l1: LayoutItem, l2: LayoutItem): boolean {\n if (l1 === l2) return false; // same element\n if (l1.x + l1.w <= l2.x) return false; // l1 is left of l2\n if (l1.x >= l2.x + l2.w) return false; // l1 is right of l2\n if (l1.y + l1.h <= l2.y) return false; // l1 is above l2\n if (l1.y >= l2.y + l2.h) return false; // l1 is below l2\n return true; // boxes overlap\n}\n\n/**\n * Given a layout, compact it. This involves going down each y coordinate and removing gaps\n * between items.\n *\n * @param {Array} layout Layout.\n * @param {Boolean} verticalCompact Whether or not to compact the layout\n * vertically.\n * @param {Object} minPositions\n * @return {Array} Compacted Layout.\n */\nexport function compact(layout: Layout, verticalCompact: Boolean, minPositions): Layout {\n // Statics go in the compareWith array right away so items flow around them.\n const compareWith = getStatics(layout);\n // We go through the items by row and column.\n const sorted = sortLayoutItemsByRowCol(layout);\n // Holding for new items.\n const out = Array(layout.length);\n\n for (let i = 0, len = sorted.length; i < len; i++) {\n let l = sorted[i];\n\n // Don't move static elements\n if (!l.static) {\n l = compactItem(compareWith, l, verticalCompact, minPositions);\n\n // Add to comparison array. We only collide with items before this one.\n // Statics are already in this array.\n compareWith.push(l);\n }\n\n // Add to output array to make sure they still come out in the right order.\n out[layout.indexOf(l)] = l;\n\n // Clear moved flag, if it exists.\n l.moved = false;\n }\n\n return out;\n}\n\n/**\n * Compact an item in the layout.\n */\nexport function compactItem(compareWith: Layout, l: LayoutItem, verticalCompact: boolean, minPositions): LayoutItem {\n if (verticalCompact) {\n // Move the element up as far as it can go without colliding.\n while (l.y > 0 && !getFirstCollision(compareWith, l)) {\n l.y--;\n }\n } else if (minPositions) {\n const minY = minPositions[l.i].y;\n while (l.y > minY && !getFirstCollision(compareWith, l)) {\n l.y--;\n }\n }\n\n // Move it down, and keep moving it down if it's colliding.\n let collides;\n while((collides = getFirstCollision(compareWith, l))) {\n l.y = collides.y + collides.h;\n }\n return l;\n}\n\n/**\n * Given a layout, make sure all elements fit within its bounds.\n *\n * @param {Array} layout Layout array.\n * @param {Number} bounds Number of columns.\n */\nexport function correctBounds(layout: Layout, bounds: {cols: number}): Layout {\n const collidesWith = getStatics(layout);\n for (let i = 0, len = layout.length; i < len; i++) {\n const l = layout[i];\n // Overflows right\n if (l.x + l.w > bounds.cols) l.x = bounds.cols - l.w;\n // Overflows left\n if (l.x < 0) {\n l.x = 0;\n l.w = bounds.cols;\n }\n if (!l.static) collidesWith.push(l);\n else {\n // If this is static and collides with other statics, we must move it down.\n // We have to do something nicer than just letting them overlap.\n while(getFirstCollision(collidesWith, l)) {\n l.y++;\n }\n }\n }\n return layout;\n}\n\n/**\n * Get a layout item by ID. Used so we can override later on if necessary.\n *\n * @param {Array} layout Layout array.\n * @param {String} id ID\n * @return {LayoutItem} Item at ID.\n */\nexport function getLayoutItem(layout: Layout, id: string): ?LayoutItem {\n for (let i = 0, len = layout.length; i < len; i++) {\n if (layout[i].i === id) return layout[i];\n }\n}\n\n/**\n * Returns the first item this layout collides with.\n * It doesn't appear to matter which order we approach this from, although\n * perhaps that is the wrong thing to do.\n *\n * @param {Object} layoutItem Layout item.\n * @return {Object|undefined} A colliding layout item, or undefined.\n */\nexport function getFirstCollision(layout: Layout, layoutItem: LayoutItem): ?LayoutItem {\n for (let i = 0, len = layout.length; i < len; i++) {\n if (collides(layout[i], layoutItem)) return layout[i];\n }\n}\n\nexport function getAllCollisions(layout: Layout, layoutItem: LayoutItem): Array {\n return layout.filter((l) => collides(l, layoutItem));\n}\n\n/**\n * Get all static elements.\n * @param {Array} layout Array of layout objects.\n * @return {Array} Array of static layout items..\n */\nexport function getStatics(layout: Layout): Array {\n //return [];\n return layout.filter((l) => l.static);\n}\n\n/**\n * Move an element. Responsible for doing cascading movements of other elements.\n *\n * @param {Array} layout Full layout to modify.\n * @param {LayoutItem} l element to move.\n * @param {Number} [x] X position in grid units.\n * @param {Number} [y] Y position in grid units.\n * @param {Boolean} [isUserAction] If true, designates that the item we're moving is\n * being dragged/resized by th euser.\n */\nexport function moveElement(layout: Layout, l: LayoutItem, x: Number, y: Number, isUserAction: Boolean, preventCollision: Boolean): Layout {\n if (l.static) return layout;\n\n // Short-circuit if nothing to do.\n //if (l.y === y && l.x === x) return layout;\n\n const oldX = l.x;\n const oldY = l.y;\n\n const movingUp = y && l.y > y;\n // This is quite a bit faster than extending the object\n if (typeof x === 'number') l.x = x;\n if (typeof y === 'number') l.y = y;\n l.moved = true;\n\n // If this collides with anything, move it.\n // When doing this comparison, we have to sort the items we compare with\n // to ensure, in the case of multiple collisions, that we're getting the\n // nearest collision.\n let sorted = sortLayoutItemsByRowCol(layout);\n if (movingUp) sorted = sorted.reverse();\n const collisions = getAllCollisions(sorted, l);\n\n if (preventCollision && collisions.length) {\n l.x = oldX;\n l.y = oldY;\n l.moved = false;\n return layout;\n }\n\n // Move each item that collides away from this element.\n for (let i = 0, len = collisions.length; i < len; i++) {\n const collision = collisions[i];\n // console.log('resolving collision between', l.i, 'at', l.y, 'and', collision.i, 'at', collision.y);\n\n // Short circuit so we can't infinite loop\n if (collision.moved) continue;\n\n // This makes it feel a bit more precise by waiting to swap for just a bit when moving up.\n if (l.y > collision.y && l.y - collision.y > collision.h / 4) continue;\n\n // Don't move static items - we have to move *this* element away\n if (collision.static) {\n layout = moveElementAwayFromCollision(layout, collision, l, isUserAction);\n } else {\n layout = moveElementAwayFromCollision(layout, l, collision, isUserAction);\n }\n }\n\n return layout;\n}\n\n/**\n * This is where the magic needs to happen - given a collision, move an element away from the collision.\n * We attempt to move it up if there's room, otherwise it goes below.\n *\n * @param {Array} layout Full layout to modify.\n * @param {LayoutItem} collidesWith Layout item we're colliding with.\n * @param {LayoutItem} itemToMove Layout item we're moving.\n * @param {Boolean} [isUserAction] If true, designates that the item we're moving is being dragged/resized\n * by the user.\n */\nexport function moveElementAwayFromCollision(layout: Layout, collidesWith: LayoutItem,\n itemToMove: LayoutItem, isUserAction: ?boolean): Layout {\n\n const preventCollision = false // we're already colliding\n // If there is enough space above the collision to put this element, move it there.\n // We only do this on the main collision as this can get funky in cascades and cause\n // unwanted swapping behavior.\n if (isUserAction) {\n // Make a mock item so we don't modify the item here, only modify in moveElement.\n const fakeItem: LayoutItem = {\n x: itemToMove.x,\n y: itemToMove.y,\n w: itemToMove.w,\n h: itemToMove.h,\n i: '-1'\n };\n fakeItem.y = Math.max(collidesWith.y - itemToMove.h, 0);\n if (!getFirstCollision(layout, fakeItem)) {\n return moveElement(layout, itemToMove, undefined, fakeItem.y, preventCollision);\n }\n }\n\n // Previously this was optimized to move below the collision directly, but this can cause problems\n // with cascading moves, as an item may actually leapflog a collision and cause a reversal in order.\n return moveElement(layout, itemToMove, undefined, itemToMove.y + 1, preventCollision);\n}\n\n/**\n * Helper to convert a number to a percentage string.\n *\n * @param {Number} num Any number\n * @return {String} That number as a percentage.\n */\nexport function perc(num: number): string {\n return num * 100 + '%';\n}\n\nexport function setTransform(top, left, width, height): Object {\n // Replace unitless items with px\n const translate = \"translate3d(\" + left + \"px,\" + top + \"px, 0)\";\n return {\n transform: translate,\n WebkitTransform: translate,\n MozTransform: translate,\n msTransform: translate,\n OTransform: translate,\n width: width + \"px\",\n height: height + \"px\",\n position: 'absolute'\n };\n}\n/**\n * Just like the setTransform method, but instead it will return a negative value of right.\n *\n * @param top\n * @param right\n * @param width\n * @param height\n * @returns {{transform: string, WebkitTransform: string, MozTransform: string, msTransform: string, OTransform: string, width: string, height: string, position: string}}\n */\nexport function setTransformRtl(top, right, width, height): Object {\n // Replace unitless items with px\n const translate = \"translate3d(\" + right * -1 + \"px,\" + top + \"px, 0)\";\n return {\n transform: translate,\n WebkitTransform: translate,\n MozTransform: translate,\n msTransform: translate,\n OTransform: translate,\n width: width + \"px\",\n height: height + \"px\",\n position: 'absolute'\n };\n}\n\nexport function setTopLeft(top, left, width, height): Object {\n return {\n top: top + \"px\",\n left: left + \"px\",\n width: width + \"px\",\n height: height + \"px\",\n position: 'absolute'\n };\n}\n/**\n * Just like the setTopLeft method, but instead, it will return a right property instead of left.\n *\n * @param top\n * @param right\n * @param width\n * @param height\n * @returns {{top: string, right: string, width: string, height: string, position: string}}\n */\nexport function setTopRight(top, right, width, height): Object {\n return {\n top: top + \"px\",\n right: right+ \"px\",\n width: width + \"px\",\n height: height + \"px\",\n position: 'absolute'\n };\n}\n\n\n/**\n * Get layout items sorted from top left to right and down.\n *\n * @return {Array} Array of layout objects.\n * @return {Array} Layout, sorted static items first.\n */\nexport function sortLayoutItemsByRowCol(layout: Layout): Layout {\n return [].concat(layout).sort(function(a, b) {\n if (a.y === b.y && a.x === b.x) {\n return 0;\n }\n\n if (a.y > b.y || (a.y === b.y && a.x > b.x)) {\n return 1;\n }\n\n return -1;\n });\n}\n\n/**\n * Generate a layout using the initialLayout and children as a template.\n * Missing entries will be added, extraneous ones will be truncated.\n *\n * @param {Array} initialLayout Layout passed in through props.\n * @param {String} breakpoint Current responsive breakpoint.\n * @param {Boolean} verticalCompact Whether or not to compact the layout vertically.\n * @return {Array} Working layout.\n */\n/*\nexport function synchronizeLayoutWithChildren(initialLayout: Layout, children: Array|React.Element,\n cols: number, verticalCompact: boolean): Layout {\n // ensure 'children' is always an array\n if (!Array.isArray(children)) {\n children = [children];\n }\n initialLayout = initialLayout || [];\n\n // Generate one layout item per child.\n let layout: Layout = [];\n for (let i = 0, len = children.length; i < len; i++) {\n let newItem;\n const child = children[i];\n\n // Don't overwrite if it already exists.\n const exists = getLayoutItem(initialLayout, child.key || \"1\" /!* FIXME satisfies Flow *!/);\n if (exists) {\n newItem = exists;\n } else {\n const g = child.props._grid;\n\n // Hey, this item has a _grid property, use it.\n if (g) {\n if (!isProduction) {\n validateLayout([g], 'ReactGridLayout.children');\n }\n // Validated; add it to the layout. Bottom 'y' possible is the bottom of the layout.\n // This allows you to do nice stuff like specify {y: Infinity}\n if (verticalCompact) {\n newItem = cloneLayoutItem({...g, y: Math.min(bottom(layout), g.y), i: child.key});\n } else {\n newItem = cloneLayoutItem({...g, y: g.y, i: child.key});\n }\n }\n // Nothing provided: ensure this is added to the bottom\n else {\n newItem = cloneLayoutItem({w: 1, h: 1, x: 0, y: bottom(layout), i: child.key || \"1\"});\n }\n }\n layout[i] = newItem;\n }\n\n // Correct the layout.\n layout = correctBounds(layout, {cols: cols});\n layout = compact(layout, verticalCompact);\n\n return layout;\n}\n*/\n\n/**\n * Validate a layout. Throws errors.\n *\n * @param {Array} layout Array of layout items.\n * @param {String} [contextName] Context name for errors.\n * @throw {Error} Validation error.\n */\nexport function validateLayout(layout: Layout, contextName: string): void {\n contextName = contextName || \"Layout\";\n const subProps = ['x', 'y', 'w', 'h'];\n let keyArr = [];\n if (!Array.isArray(layout)) throw new Error(contextName + \" must be an array!\");\n for (let i = 0, len = layout.length; i < len; i++) {\n const item = layout[i];\n for (let j = 0; j < subProps.length; j++) {\n if (typeof item[subProps[j]] !== 'number') {\n throw new Error('VueGridLayout: ' + contextName + '[' + i + '].' + subProps[j] + ' must be a number!');\n }\n }\n\n if (item.i === undefined || item.i === null) {\n throw new Error('VueGridLayout: ' + contextName + '[' + i + '].i cannot be null!');\n }\n\n if (typeof item.i !== 'number' && typeof item.i !== 'string') {\n throw new Error('VueGridLayout: ' + contextName + '[' + i + '].i must be a string or number!');\n }\n\n if (keyArr.indexOf(item.i) >= 0) {\n throw new Error('VueGridLayout: ' + contextName + '[' + i + '].i must be unique!');\n }\n keyArr.push(item.i);\n\n if (item.static !== undefined && typeof item.static !== 'boolean') {\n throw new Error('VueGridLayout: ' + contextName + '[' + i + '].static must be a boolean!');\n }\n }\n}\n\n// Flow can't really figure this out, so we just use Object\nexport function autoBindHandlers(el: Object, fns: Array): void {\n fns.forEach((key) => el[key] = el[key].bind(el));\n}\n\n\n\n/**\n * Convert a JS object to CSS string. Similar to React's output of CSS.\n * @param obj\n * @returns {string}\n */\nexport function createMarkup(obj) {\n var keys = Object.keys(obj);\n if (!keys.length) return '';\n var i, len = keys.length;\n var result = '';\n\n for (i = 0; i < len; i++) {\n var key = keys[i];\n var val = obj[key];\n result += hyphenate(key) + ':' + addPx(key, val) + ';';\n }\n\n return result;\n}\n\n\n/* The following list is defined in React's core */\nexport var IS_UNITLESS = {\n animationIterationCount: true,\n boxFlex: true,\n boxFlexGroup: true,\n boxOrdinalGroup: true,\n columnCount: true,\n flex: true,\n flexGrow: true,\n flexPositive: true,\n flexShrink: true,\n flexNegative: true,\n flexOrder: true,\n gridRow: true,\n gridColumn: true,\n fontWeight: true,\n lineClamp: true,\n lineHeight: true,\n opacity: true,\n order: true,\n orphans: true,\n tabSize: true,\n widows: true,\n zIndex: true,\n zoom: true,\n\n // SVG-related properties\n fillOpacity: true,\n stopOpacity: true,\n strokeDashoffset: true,\n strokeOpacity: true,\n strokeWidth: true\n};\n\n\n/**\n * Will add px to the end of style values which are Numbers.\n * @param name\n * @param value\n * @returns {*}\n */\nexport function addPx(name, value) {\n if(typeof value === 'number' && !IS_UNITLESS[ name ]) {\n return value + 'px';\n } else {\n return value;\n }\n}\n\n\n/**\n * Hyphenate a camelCase string.\n *\n * @param {String} str\n * @return {String}\n */\n\nexport var hyphenateRE = /([a-z\\d])([A-Z])/g;\n\nexport function hyphenate(str) {\n return str.replace(hyphenateRE, '$1-$2').toLowerCase();\n}\n\n\nexport function findItemInArray(array, property, value) {\n for (var i=0; i < array.length; i++)\n if (array[i][property] == value)\n return true;\n\n return false;\n}\n\nexport function findAndRemove(array, property, value) {\n array.forEach(function (result, index) {\n if (result[property] === value) {\n //Remove from array\n array.splice(index, 1);\n }\n });\n}\n" }, { "path": "src/main.js", "content": "import Vue from 'vue'\nimport App from './App.vue'\n\nnew Vue({\n render: h => h(App)\n}).$mount('#app')\n" }, { "path": "test/interact-test.html", "content": "\n\n\n \n Interact TEST\n \n \n\n\n
\n
\n Resize from any edge or corner\n
\n
\n\n\n\n\n" }, { "path": "test/interact-test.js", "content": "function dragMoveListener (event) {\n var target = event.target,\n // keep the dragged position in the data-x/data-y attributes\n x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,\n y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;\n\n // translate the element\n target.style.webkitTransform =\n target.style.transform =\n 'translate(' + x + 'px, ' + y + 'px)';\n\n // update the posiion attributes\n target.setAttribute('data-x', x);\n target.setAttribute('data-y', y);\n}\n\n// this is used later in the resizing and gesture demos\nwindow.dragMoveListener = dragMoveListener;\n\n\ninteract('.resize-drag')\n .draggable({\n onmove: window.dragMoveListener,\n restrict: {\n restriction: 'parent',\n elementRect: { top: 0, left: 0, bottom: 1, right: 1 }\n },\n })\n .resizable({\n // resize from all edges and corners\n edges: { left: true, right: true, bottom: true, top: true },\n\n // keep the edges inside the parent\n restrictEdges: {\n outer: 'parent',\n endOnly: true,\n },\n\n // minimum size\n restrictSize: {\n min: { width: 100, height: 50 },\n },\n\n inertia: true,\n })\n .on('resizemove', function (event) {\n var target = event.target,\n x = (parseFloat(target.getAttribute('data-x')) || 0),\n y = (parseFloat(target.getAttribute('data-y')) || 0);\n\n // update the element's style\n target.style.width = event.rect.width + 'px';\n target.style.height = event.rect.height + 'px';\n\n // translate when resizing from top or left edges\n x += event.deltaRect.left;\n y += event.deltaRect.top;\n\n target.style.webkitTransform = target.style.transform =\n 'translate(' + x + 'px,' + y + 'px)';\n\n target.setAttribute('data-x', x);\n target.setAttribute('data-y', y);\n target.textContent = Math.round(event.rect.width) + '\\u00D7' + Math.round(event.rect.height);\n });" }, { "path": "test/unit/GridItem.spec.js", "content": "import { shallowMount } from '@vue/test-utils'\nimport GridLayout from '../../src/components/GridLayout.vue'\n\nlet layout\n\ndescribe('GridLayout test', () => {\n beforeAll(()=>{\n let testLayout = [{\"x\":0,\"y\":0,\"w\":2,\"h\":2,\"i\":\"0\", resizable: true, draggable: true, static: false, minY: 0, maxY: 2}];\n layout = JSON.parse(JSON.stringify(testLayout))\n })\n \n describe('Interface test', () => {\n it('should render correct contents', () => {\n const wrapper = shallowMount(GridLayout, {\n propsData: {\n layout: layout\n } \n })\n const grid = wrapper.findAll('.vue-grid-layout');\n expect(grid.selector).toEqual('.vue-grid-layout');\n })\n })\n})\n" }, { "path": "test/unit/utils.spec.js", "content": "// @flow\r\n/* eslint-env jest */\r\n\r\nimport {\r\n bottom,\r\n collides,\r\n compact,\r\n moveElement,\r\n sortLayoutItemsByRowCol,\r\n validateLayout\r\n } from \"../../src/helpers/utils\";\r\n \r\n describe(\"bottom\", () => {\r\n it(\"Handles an empty layout as input\", () => {\r\n expect(bottom([])).toEqual(0);\r\n });\r\n \r\n it(\"Returns the bottom coordinate of the layout\", () => {\r\n expect(\r\n bottom([\r\n { i: \"1\", x: 0, y: 1, w: 1, h: 1 },\r\n { i: \"2\", x: 1, y: 2, w: 1, h: 1 }\r\n ])\r\n ).toEqual(3);\r\n });\r\n });\r\n \r\n describe(\"sortLayoutItemsByRowCol\", () => {\r\n it(\"should sort by top to bottom right\", () => {\r\n const layout = [\r\n { x: 1, y: 1, w: 1, h: 1, i: \"2\" },\r\n { x: 1, y: 0, w: 1, h: 1, i: \"1\" },\r\n { x: 0, y: 1, w: 2, h: 2, i: \"3\" }\r\n ];\r\n expect(sortLayoutItemsByRowCol(layout)).toEqual([\r\n { x: 1, y: 0, w: 1, h: 1, i: \"1\" },\r\n { x: 0, y: 1, w: 2, h: 2, i: \"3\" },\r\n { x: 1, y: 1, w: 1, h: 1, i: \"2\" }\r\n ]);\r\n });\r\n });\r\n\r\n describe(\"collides\", () => {\r\n it(\"Returns whether the layout items collide\", () => {\r\n expect(\r\n collides(\r\n { i: \"1\", x: 0, y: 1, w: 1, h: 1 },\r\n { i: \"2\", x: 1, y: 2, w: 1, h: 1 }\r\n )\r\n ).toEqual(false);\r\n expect(\r\n collides(\r\n { i: \"1\", x: 0, y: 1, w: 1, h: 1 },\r\n { i: \"2\", x: 0, y: 1, w: 1, h: 1 }\r\n )\r\n ).toEqual(true);\r\n });\r\n });\r\n \r\n describe(\"validateLayout\", () => {\r\n it(\"Validates an empty layout\", () => {\r\n validateLayout([]);\r\n });\r\n it(\"Validates a populated layout\", () => {\r\n validateLayout([\r\n { i: \"1\", x: 0, y: 1, w: 1, h: 1 },\r\n { i: \"2\", x: 1, y: 2, w: 1, h: 1 }\r\n ]);\r\n });\r\n it(\"Throws errors on invalid input\", () => {\r\n expect(() => {\r\n validateLayout([\r\n { i: \"1\", x: 0, y: 1, w: 1, h: 1 },\r\n { i: \"2\", x: 1, y: 2, w: 1 }\r\n ]);\r\n }).toThrowError(/layout\\[1\\]\\.h must be a number!/i);\r\n });\r\n });\r\n \r\n describe(\"moveElement\", () => {\r\n function compactAndMove(\r\n layout,\r\n layoutItem,\r\n x,\r\n y,\r\n isUserAction,\r\n preventCollision\r\n ) {\r\n return compact(\r\n moveElement(\r\n layout,\r\n layoutItem,\r\n x,\r\n y,\r\n isUserAction,\r\n preventCollision\r\n )\r\n );\r\n }\r\n \r\n it(\"Does not change layout when colliding on no rearrangement mode\", () => {\r\n const layout = [\r\n { i: \"1\", x: 0, y: 1, w: 1, h: 1, moved: false },\r\n { i: \"2\", x: 1, y: 2, w: 1, h: 1, moved: false }\r\n ];\r\n const layoutItem = layout[0];\r\n expect(\r\n moveElement(\r\n layout,\r\n layoutItem,\r\n 1,\r\n 2, // x, y\r\n true,\r\n true // isUserAction, preventCollision\r\n )\r\n ).toEqual([\r\n { i: \"1\", x: 0, y: 1, w: 1, h: 1, moved: false },\r\n { i: \"2\", x: 1, y: 2, w: 1, h: 1, moved: false }\r\n ]);\r\n });\r\n \r\n it(\"Does change layout when colliding in rearrangement mode\", () => {\r\n const layout = [\r\n { i: \"1\", x: 0, y: 0, w: 1, h: 1, moved: false },\r\n { i: \"2\", x: 1, y: 0, w: 1, h: 1, moved: false }\r\n ];\r\n const layoutItem = layout[0];\r\n expect(\r\n moveElement(\r\n layout,\r\n layoutItem,\r\n 1,\r\n 0, // x, y\r\n true,\r\n false // isUserAction, preventCollision\r\n )\r\n ).toEqual([\r\n { i: \"1\", x: 1, y: 0, w: 1, h: 1, moved: true },\r\n { i: \"2\", x: 1, y: 1, w: 1, h: 1, moved: true }\r\n ]);\r\n });\r\n \r\n it(\"Moves elements out of the way without causing panel jumps when compaction is vertical\", () => {\r\n const layout = [\r\n { x: 0, y: 0, w: 1, h: 10, i: \"A\" },\r\n { x: 0, y: 10, w: 1, h: 1, i: \"B\" },\r\n { x: 0, y: 11, w: 1, h: 1, i: \"C\" }\r\n ];\r\n // move A down slightly so it collides with C; can cause C to jump above B.\r\n // We instead want B to jump above A (it has the room)\r\n const itemA = layout[0];\r\n expect(\r\n compactAndMove(\r\n layout,\r\n itemA,\r\n 0,\r\n 1, // x, y\r\n true,\r\n false // isUserAction, preventCollision\r\n )\r\n ).toEqual([\r\n expect.objectContaining({ x: 0, y: 1, w: 1, h: 10, i: \"A\" }),\r\n expect.objectContaining({ x: 0, y: 0, w: 1, h: 1, i: \"B\" }),\r\n expect.objectContaining({ x: 0, y: 11, w: 1, h: 1, i: \"C\" })\r\n ]);\r\n });\r\n \r\n it(\"Calculates the correct collision when moving large object far\", () => {\r\n const layout = [\r\n { x: 0, y: 0, w: 1, h: 10, i: \"A\" },\r\n { x: 0, y: 10, w: 1, h: 1, i: \"B\" },\r\n { x: 0, y: 11, w: 1, h: 1, i: \"C\" }\r\n ];\r\n // Move A down by 2. This should move B above, but since we don't compact in between,\r\n // C should move below.\r\n const itemA = layout[0];\r\n expect(\r\n moveElement(\r\n layout,\r\n itemA,\r\n 0,\r\n 2, // x, y\r\n true,\r\n false // isUserAction, preventCollision\r\n )\r\n ).toEqual([\r\n expect.objectContaining({ x: 0, y: 2, w: 1, h: 10, i: \"A\" }),\r\n expect.objectContaining({ x: 0, y: 1, w: 1, h: 1, i: \"B\" }),\r\n expect.objectContaining({ x: 0, y: 12, w: 1, h: 1, i: \"C\" })\r\n ]);\r\n });\r\n \r\n it(\"Moves elements out of the way without causing panel jumps when compaction is vertical\", () => {\r\n const layout = [\r\n { x: 0, y: 0, w: 1, h: 1, i: \"A\" },\r\n { x: 1, y: 0, w: 1, h: 1, i: \"B\" },\r\n { x: 0, y: 1, w: 2, h: 2, i: \"C\" }\r\n ];\r\n // move A over slightly so it collides with B; can cause C to jump above B\r\n // this test will check that that does not happen\r\n const itemA = layout[0];\r\n expect(\r\n moveElement(\r\n layout,\r\n itemA,\r\n 1,\r\n 0, // x, y\r\n true,\r\n false // isUserAction, preventCollision\r\n )\r\n ).toEqual([\r\n { x: 1, y: 0, w: 1, h: 1, i: \"A\", moved: true },\r\n { x: 1, y: 1, w: 1, h: 1, i: \"B\", moved: true },\r\n { x: 0, y: 2, w: 2, h: 2, i: \"C\", moved: true }\r\n ]);\r\n });\r\n \r\n it(\"Moves one element to another should cause moving down panels, vert compact\", () => {\r\n // | A | B |\r\n // |C| D |\r\n const layout = [\r\n { x: 0, y: 0, w: 2, h: 1, i: \"A\" },\r\n { x: 2, y: 0, w: 2, h: 1, i: \"B\" },\r\n { x: 0, y: 1, w: 1, h: 1, i: \"C\" },\r\n { x: 1, y: 1, w: 3, h: 1, i: \"D\" }\r\n ];\r\n // move B left slightly so it collides with A; can cause C to jump above A\r\n // this test will check that that does not happen\r\n const itemB = layout[1];\r\n expect(\r\n compactAndMove(\r\n layout,\r\n itemB,\r\n 1,\r\n 0, // x, y\r\n true,\r\n false // isUserAction, preventCollision\r\n )\r\n ).toEqual([\r\n expect.objectContaining({ x: 0, y: 1, w: 2, h: 1, i: \"A\" }),\r\n expect.objectContaining({ x: 1, y: 0, w: 2, h: 1, i: \"B\" }),\r\n expect.objectContaining({ x: 0, y: 2, w: 1, h: 1, i: \"C\" }),\r\n expect.objectContaining({ x: 1, y: 2, w: 3, h: 1, i: \"D\" })\r\n ]);\r\n });\r\n \r\n it(\"Moves one element to another should cause moving down panels, vert compact\", () => {\r\n // | A |\r\n // |B|C|\r\n // | |\r\n //\r\n // Moving C above A should not move B above A\r\n const layout = [\r\n { x: 0, y: 0, w: 2, h: 1, i: \"A\" },\r\n { x: 0, y: 1, w: 1, h: 1, i: \"B\" },\r\n { x: 1, y: 1, w: 1, h: 2, i: \"C\" }\r\n ];\r\n // Move C up.\r\n const itemB = layout[2];\r\n expect(\r\n compactAndMove(\r\n layout,\r\n itemB,\r\n 1,\r\n 0, // x, y\r\n true,\r\n false // isUserAction, preventCollision\r\n )\r\n ).toEqual([\r\n expect.objectContaining({ x: 0, y: 2, w: 2, h: 1, i: \"A\" }),\r\n expect.objectContaining({ x: 0, y: 3, w: 1, h: 1, i: \"B\" }),\r\n expect.objectContaining({ x: 1, y: 0, w: 1, h: 2, i: \"C\" })\r\n ]);\r\n });\r\n });\r\n \r\n describe(\"compact vertical\", () => {\r\n it(\"Removes empty vertical space above item\", () => {\r\n const layout = [{ i: \"1\", x: 0, y: 1, w: 1, h: 1 }];\r\n expect(compact(layout, true)).toEqual([\r\n { i: \"1\", x: 0, y: 0, w: 1, h: 1, moved: false }\r\n ]);\r\n });\r\n \r\n it(\"Resolve collision by moving item further down in array\", () => {\r\n const layout = [\r\n { x: 0, y: 0, w: 1, h: 5, i: \"1\" },\r\n { x: 0, y: 1, w: 1, h: 1, i: \"2\" }\r\n ];\r\n expect(compact(layout, true)).toEqual([\r\n { x: 0, y: 0, w: 1, h: 5, i: \"1\", moved: false },\r\n { x: 0, y: 5, w: 1, h: 1, i: \"2\", moved: false }\r\n ]);\r\n });\r\n \r\n it(\"Handles recursive collision by moving new collisions out of the way before moving item down\", () => {\r\n const layout = [\r\n { x: 0, y: 0, w: 2, h: 5, i: \"1\" },\r\n { x: 0, y: 0, w: 10, h: 1, i: \"2\" },\r\n { x: 5, y: 1, w: 1, h: 1, i: \"3\" },\r\n { x: 5, y: 2, w: 1, h: 1, i: \"4\" },\r\n { x: 5, y: 3, w: 1, h: 1, i: \"5\", static: true }\r\n ];\r\n \r\n expect(compact(layout, true)).toEqual([\r\n { x: 0, y: 0, w: 2, h: 5, i: \"1\", moved: false },\r\n { x: 0, y: 5, w: 10, h: 1, i: \"2\", moved: false },\r\n { x: 5, y: 0, w: 1, h: 1, i: \"3\", moved: false },\r\n { x: 5, y: 1, w: 1, h: 1, i: \"4\", moved: false },\r\n { x: 5, y: 3, w: 1, h: 1, i: \"5\", moved: false, static: true }\r\n ]);\r\n });\r\n });\r\n" }, { "path": "vue.config.js", "content": "// https://medium.com/js-dojo/how-to-reduce-your-vue-js-bundle-size-with-webpack-3145bf5019b7\n// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;\nconst webpack = require('webpack');\nconst PACKAGE = require('./package.json');\n\nconst banner = PACKAGE.name + ' - ' + PACKAGE.version + ' | ' +\n '(c) 2015, ' + new Date().getFullYear() + ' ' + PACKAGE.author + ' | ' +\n PACKAGE.homepage;\n\nmodule.exports = {\n configureWebpack: {\n output: {\n library: \"VueGridLayout\",\n libraryExport: 'default'\n },\n plugins: [\n // new BundleAnalyzerPlugin(),\n new webpack.BannerPlugin(banner)\n ],\n },\n css: {\n extract: false\n },\n}\n" }, { "path": "website/TODOS.md", "content": "# vue-grid-layout\n\n\nhttps://github.com/wearebraid/vueformulate.com/tree/master/docs\n\n\n# emit responsiveLayoutUpdatedEvent?\n\nhttps://github.com/jbaysolutions/vue-grid-layout/compare/master...wzquyin:master\n" }, { "path": "website/docs/.vuepress/Autocomplete.js", "content": "// import MyFormulateAutocomplete from './components/MyFormulateAutocomplete'\n//\n// export default function (formulateInstance) {\n// formulateInstance.extend({\n// components: {\n// MyFormulateAutocomplete\n// },\n// library: {\n// autocomplete: {\n// classification: 'text',\n// component: 'MyFormulateAutocomplete'\n// }\n// }\n// })\n// }\n" }, { "path": "website/docs/.vuepress/components/Example01Basic.vue", "content": "\n\n\n\n\n" }, { "path": "website/docs/.vuepress/components/Example02Events.vue", "content": "\n\n\n\n\n" }, { "path": "website/docs/.vuepress/components/Example03MultipleGrids.vue", "content": "\n\n\n\n\n" }, { "path": "website/docs/.vuepress/components/Example04AllowIgnore.vue", "content": "\n\n\n\n\n" }, { "path": "website/docs/.vuepress/components/Example05Mirrored.vue", "content": "\n\n\n\n\n" }, { "path": "website/docs/.vuepress/components/Example06Responsive.vue", "content": "\n\n\n\n\n" }, { "path": "website/docs/.vuepress/components/Example07PreventCollision.vue", "content": "\n\n\n\n\n" }, { "path": "website/docs/.vuepress/components/Example08ResponsivePredefinedLayouts.vue", "content": "\n\n\n\n\n" }, { "path": "website/docs/.vuepress/components/Example09DynamicAddRemove.vue", "content": "\n\n\n\n\n" }, { "path": "website/docs/.vuepress/components/Example10DragFromOutside.vue", "content": "\n\n\n\n\n" }, { "path": "website/docs/.vuepress/components/Example11Bounded.vue", "content": "\n\n\n\n\n" }, { "path": "website/docs/.vuepress/components/ExampleStylingGridLines.vue", "content": "\n\n\n\n\n" }, { "path": "website/docs/.vuepress/components/ExampleStylingPlaceholder.vue", "content": "\n\n\n\n\n" }, { "path": "website/docs/.vuepress/components/HomeFooter.vue", "content": "\n\n\n\n\n" }, { "path": "website/docs/.vuepress/components/HomepageGrid.vue", "content": "\n\n\n\n\n" }, { "path": "website/docs/.vuepress/config.js", "content": "const description = 'A draggable and resizable grid layout, as a Vue component.'\nconst title = 'Vue Grid Layout - ️A grid layout system for Vue.js'\n\nmodule.exports = {\n\tbase: \"/vue-grid-layout/\",\n\tlocales: {\n\t\t'/': {\n\t\t lang: 'en-US',\n\t\t title: 'Vue Grid Layout - ️A grid layout system for Vue.js',\n\t\t description: 'A draggable and resizable grid layout, as a Vue component.'\n\t\t},\n\t\t'/zh/': {\n\t\t lang: 'zh-CN',\n\t\t title: 'Vue Grid Layout -️ 适用Vue.js的栅格布局系统',\n\t\t description: '可拖动和可调整大小栅格布局的Vue组件。'\n\t\t}\n\t },\n\thead: [\n\t\t['link', { rel: 'icon', href: `/favicon.ico` }],\n\t\t['link', { rel: \"apple-touch-icon\", sizes: \"180x180\", href: \"https://jbaysolutions.github.io/vue-grid-layout/assets/favicon/apple-touch-icon.png\"}],\n\t\t// ['script', { src: 'https://cdn.jsdelivr.net/npm/vue-grid-layout@2.3.9/dist/vue-grid-layout.umd.min.js' }]\n\t\t[\n\t\t\t'script',\n\t\t\t{\n\t\t\t\tasync: true,\n\t\t\t\tsrc: 'https://www.googletagmanager.com/gtag/js?id=G-9JZJJHRV8R',\n\t\t\t},\n\t\t],\n\t\t[\n\t\t\t'script',\n\t\t\t{},\n\t\t\t[\n\t\t\t\t\"window.dataLayer = window.dataLayer || [];\\nfunction gtag(){dataLayer.push(arguments);}\\ngtag('js', new Date());\\ngtag('config', 'G-9JZJJHRV8R');\",\n\t\t\t],\n\t\t],\n\t],\n\tport: 8081,\n\ttheme: '@vuepress/vue',\n\tthemeConfig: {\n\t\tsmoothScroll: true,\n\t\tlogo: '/assets/img/logo.png',\n\t\trepo: 'jbaysolutions/vue-grid-layout',\n\t\tdocsDir: 'website/docs',\n\t\teditLinks: true,\n\t\talgolia: {\n\t\t apiKey: '2f143d1edd24605564065dd02bf0a22b',\n\t\t indexName: 'vue_grid_layout'\n\t\t},\n\t\tlocales: {\n\t\t\t'/': {\n\t\t\t\tselectText: 'Languages',\n\t\t\t\tlabel: 'English',\n\t\t\t\tariaLabel: 'Select language',\n\t\t\t\tsidebar: {\n\t\t\t\t\t'/guide/': [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttitle: \"Guide\",\n\t\t\t\t\t\t\tcollapsable: false,\n\t\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t\t'',\n\t\t\t\t\t\t\t\t'usage',\n\t\t\t\t\t\t\t\t'properties',\n\t\t\t\t\t\t\t\t'events',\n\t\t\t\t\t\t\t\t'styling',\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttitle: \"Examples\",\n\t\t\t\t\t\t\tcollapsable: false,\n\t\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t\t'01-basic',\n\t\t\t\t\t\t\t\t'02-events',\n\t\t\t\t\t\t\t\t'03-multiple-grids',\n\t\t\t\t\t\t\t\t'04-allow-ignore',\n\t\t\t\t\t\t\t\t'05-mirrored',\n\t\t\t\t\t\t\t\t'06-responsive',\n\t\t\t\t\t\t\t\t'07-prevent-collision',\n\t\t\t\t\t\t\t\t'08-responsive-predefined-layouts',\n\t\t\t\t\t\t\t\t'09-dynamic-add-remove',\n\t\t\t\t\t\t\t\t'10-drag-from-outside',\n\t\t\t\t\t\t\t\t'11-bounded',\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t},\n\t\t\t\tnav: [\n\t\t\t\t\t{text: 'Home', link: '/'},\n\t\t\t\t\t{text: 'Guide', link: '/guide/'},\n\t\t\t\t\t{text: 'Changelog', link: '/changelog/'}\n\t\t\t\t],\n\t\t\t\tsearchPlaceholder: 'Search...',\n\t\t\t\teditLinkText: 'Help improve this page!',\n\t\t\t\tlastUpdated: 'Last Updated'\n\t\t\t},\n\t\t\t'/zh/': {\n\t\t\t\tselectText: '选择语言',\n\t\t\t\tlabel: '简体中文',\n\t\t\t\tariaLabel: '选择语言',\n\t\t\t\tsidebar: {\n\t\t\t\t\t'/zh/guide/': [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttitle: \"首页\",\n\t\t\t\t\t\t\tcollapsable: false,\n\t\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t\t'',\n\t\t\t\t\t\t\t\t'usage',\n\t\t\t\t\t\t\t\t'properties',\n\t\t\t\t\t\t\t\t'events',\n\t\t\t\t\t\t\t\t'styling',\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttitle: \"例子\",\n\t\t\t\t\t\t\tcollapsable: false,\n\t\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t\t'01-basic',\n\t\t\t\t\t\t\t\t'02-events',\n\t\t\t\t\t\t\t\t'03-multiple-grids',\n\t\t\t\t\t\t\t\t'04-allow-ignore',\n\t\t\t\t\t\t\t\t'05-mirrored',\n\t\t\t\t\t\t\t\t'06-responsive',\n\t\t\t\t\t\t\t\t'07-prevent-collision',\n\t\t\t\t\t\t\t\t'08-responsive-predefined-layouts',\n\t\t\t\t\t\t\t\t'09-dynamic-add-remove',\n\t\t\t\t\t\t\t\t'10-drag-from-outside',\n\t\t\t\t\t\t\t\t'11-bounded',\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t},\n\t\t\t\tnav: [\n\t\t\t\t\t{text: '首页', link: '/zh/'},\n\t\t\t\t\t{text: '指南', link: '/zh/guide/'},\n\t\t\t\t\t{text: '更新日志', link: '/zh/changelog/'}\n\t\t\t\t],\n\t\t\t\tsearchPlaceholder: '搜索...',\n\t\t\t\teditLinkText: '帮助改善此页面！',\n\t\t\t\tlastUpdated: '最后更新时间'\n\t\t\t}\n\t\t}\n\t},\n\tplugins: [\n\t\t'@vuepress/back-to-top',\n\t\t/*['@vuepress/google-analytics', {\n\t\t\tga: 'UA-37288388-24' // UA-00000000-0\n\t\t}],*/\n\t\t['seo', {\n\t\t\ttitle: $page => `${$page.title} — Vue Grid Layout`,\n\t\t\t// image: () => 'https://jbaysolutions.github.io/vue-grid-layout/assets/img/og.jpg',\n\t\t\tsiteTitle: (_, $site) => $site.title,\n\t\t\tdescription: $page => $page.frontmatter.description || description,\n\t\t\tauthor: (_, $site) => $site.themeConfig.author,\n\t\t\ttags: $page => $page.frontmatter.tags,\n\t\t\ttwitterCard: _ => 'summary_large_image',\n\t\t\ttype: () => 'article',\n\t\t\turl: (_, $site, path) => ($site.themeConfig.domain || '') + path,\n\t\t\tpublishedAt: $page => $page.frontmatter.date && new Date($page.frontmatter.date),\n\t\t\tmodifiedAt: $page => $page.lastUpdated && new Date($page.lastUpdated),\n\t\t}],\n\t\t['vuepress-plugin-serve', {\n\t\t\tport: 8080,\n\t\t\tstaticOptions: {\n\t\t\t\tdotfiles: 'allow',\n\t\t\t},\n\t\t\t/*beforeServer(app, server) {\n\t\t\t\tapp.get('/path/to/my/custom', function(req, res) {\n\t\t\t\t\tres.json({ custom: 'response' })\n\t\t\t\t})\n\t\t\t},*/\n\t\t}],\n\t],\n\tdest: 'public',\n}\n" }, { "path": "website/docs/.vuepress/enhanceApp.js", "content": "/**\n * App level enhancements. Read more here:\n * https://vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements\n */\n// import pageComponents from '@internal/page-components'\nimport Autocomplete from './Autocomplete'\n// import ArticleCard from './components/ArticleCard'\n// import GithubButton from 'vue-github-button'\n// import VTooltip from 'v-tooltip'\n\n// import '../../node_modules/@braid/vue-formulate/themes/snow/snow.scss'\n\nexport default ({ Vue }) => {\n\t/*Vue.prototype.$gridlayout = {\n\t\tasync load () {\n\t\t\tawait import('vue-grid-layout');\n\t\t\tconsole.log(\"LOADED!\")\n\t\t},\n\t};*/\n /*Vue.use(VueFormulate, {\n plugins: [ Autocomplete ]\n })*/\n\n // Vue.use(VTooltip)\n\n // for (const [name, component] of Object.entries(pageComponents)) {\n // Vue.component(name, component)\n // }\n // Vue.component('github-button', GithubButton)\n // Vue.component('ArticleCard', ArticleCard)\n}\n" }, { "path": "website/docs/.vuepress/public/examples/01-basic.html", "content": "\n\n\n \n Vue Grid Layout Example 1 - Basic\n \n \n \n\n\n

Vue Grid Layout Example 1 - Basic

\n\n View project on Github\n
\n Next example: Move and resize events\n\n
\n \n
\n
\n Displayed as [x, y, w, h]:\n
\n
\n {{item.i}}: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]\n
\n
\n
\n
\n
\n \n Draggable\n Resizable\n
\n \n \n {{itemTitle(item)}}\n \n \n
\n\n
\n \n \n \n\n\n" }, { "path": "website/docs/.vuepress/public/examples/01-basic.js", "content": "var testLayout = [\n {\"x\":0,\"y\":0,\"w\":2,\"h\":2,\"i\":\"0\", static: false},\n {\"x\":2,\"y\":0,\"w\":2,\"h\":4,\"i\":\"1\", static: true},\n {\"x\":4,\"y\":0,\"w\":2,\"h\":5,\"i\":\"2\", static: false},\n {\"x\":6,\"y\":0,\"w\":2,\"h\":3,\"i\":\"3\", static: false},\n {\"x\":8,\"y\":0,\"w\":2,\"h\":3,\"i\":\"4\", static: false},\n {\"x\":10,\"y\":0,\"w\":2,\"h\":3,\"i\":\"5\", static: false},\n {\"x\":0,\"y\":5,\"w\":2,\"h\":5,\"i\":\"6\", static: false},\n {\"x\":2,\"y\":5,\"w\":2,\"h\":5,\"i\":\"7\", static: false},\n {\"x\":4,\"y\":5,\"w\":2,\"h\":5,\"i\":\"8\", static: false},\n {\"x\":6,\"y\":3,\"w\":2,\"h\":4,\"i\":\"9\", static: true},\n {\"x\":8,\"y\":4,\"w\":2,\"h\":4,\"i\":\"10\", static: false},\n {\"x\":10,\"y\":4,\"w\":2,\"h\":4,\"i\":\"11\", static: false},\n {\"x\":0,\"y\":10,\"w\":2,\"h\":5,\"i\":\"12\", static: false},\n {\"x\":2,\"y\":10,\"w\":2,\"h\":5,\"i\":\"13\", static: false},\n {\"x\":4,\"y\":8,\"w\":2,\"h\":4,\"i\":\"14\", static: false},\n {\"x\":6,\"y\":8,\"w\":2,\"h\":4,\"i\":\"15\", static: false},\n {\"x\":8,\"y\":10,\"w\":2,\"h\":5,\"i\":\"16\", static: false},\n {\"x\":10,\"y\":4,\"w\":2,\"h\":2,\"i\":\"17\", static: false},\n {\"x\":0,\"y\":9,\"w\":2,\"h\":3,\"i\":\"18\", static: false},\n {\"x\":2,\"y\":6,\"w\":2,\"h\":2,\"i\":\"19\", static: false}\n];\n\n// var GridLayout = VueGridLayout.GridLayout;\n// var GridItem = VueGridLayout.GridItem;\n\nnew Vue({\n el: '#app',\n // components: {\n // \"GridLayout\": GridLayout,\n // \"GridItem\": GridItem\n // },\n data: {\n layout: testLayout,\n draggable: true,\n resizable: true,\n index: 0\n },\n\n/*\n mounted: function () {\n this.index = this.layout.length;\n },\n */\n methods: {\n itemTitle(item) {\n var result = item.i;\n if (item.static) {\n result += \" - Static\";\n }\n return result;\n }\n/*\n increaseWidth: function(item) {\n var width = document.getElementById(\"content\").offsetWidth;\n width += 20;\n document.getElementById(\"content\").style.width = width+\"px\";\n },\n decreaseWidth: function(item) {\n\n var width = document.getElementById(\"content\").offsetWidth;\n width -= 20;\n document.getElementById(\"content\").style.width = width+\"px\";\n },\n removeItem: function(item) {\n //console.log(\"### REMOVE \" + item.i);\n this.layout.splice(this.layout.indexOf(item), 1);\n },\n addItem: function() {\n var self = this;\n //console.log(\"### LENGTH: \" + this.layout.length);\n var item = {\"x\":0,\"y\":0,\"w\":2,\"h\":2,\"i\":this.index+\"\", whatever: \"bbb\"};\n this.index++;\n this.layout.push(item);\n }\n*/\n }\n});\n\n/*\nfunction generateLayout() {\n return _.map(_.range(0, 25), function (item, i) {\n var y = Math.ceil(Math.random() * 4) + 1;\n return {\n x: _.random(0, 5) * 2 % 12,\n y: Math.floor(i / 6) * y,\n w: 2,\n h: y,\n i: i.toString(),\n static: Math.random() < 0.05\n };\n });\n}*/\n\n\n\n" }, { "path": "website/docs/.vuepress/public/examples/02-events.html", "content": "\n\n\n \n Vue Grid Layout Example 2 - Move and resize events\n \n \n \n\n\n

Vue Grid Layout Example 2 - Move and resize events

\n\n View project on Github\n
\n Previous example: Basic\n
\n Next example: Multiple grids\n\n
\n \n
\n
\n Displayed as [x, y, w, h]:\n
\n
\n {{item.i}}: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]\n
\n
\n
\n
\n Events:\n
\n {{event}}\n
\n
\n
\n
\n \n \n \n {{item.i}}\n \n \n
\n \n\n
\n \n \n \n\n\n" }, { "path": "website/docs/.vuepress/public/examples/02-events.js", "content": "var testLayout = [\n {\"x\":0,\"y\":0,\"w\":2,\"h\":2,\"i\":\"0\"},\n {\"x\":2,\"y\":0,\"w\":2,\"h\":4,\"i\":\"1\"},\n {\"x\":4,\"y\":0,\"w\":2,\"h\":5,\"i\":\"2\"},\n {\"x\":6,\"y\":0,\"w\":2,\"h\":3,\"i\":\"3\"},\n {\"x\":8,\"y\":0,\"w\":2,\"h\":3,\"i\":\"4\"},\n {\"x\":10,\"y\":0,\"w\":2,\"h\":3,\"i\":\"5\"},\n {\"x\":0,\"y\":5,\"w\":2,\"h\":5,\"i\":\"6\"},\n {\"x\":2,\"y\":5,\"w\":2,\"h\":5,\"i\":\"7\"},\n {\"x\":4,\"y\":5,\"w\":2,\"h\":5,\"i\":\"8\"},\n {\"x\":6,\"y\":4,\"w\":2,\"h\":4,\"i\":\"9\"},\n {\"x\":8,\"y\":4,\"w\":2,\"h\":4,\"i\":\"10\"},\n {\"x\":10,\"y\":4,\"w\":2,\"h\":4,\"i\":\"11\"},\n {\"x\":0,\"y\":10,\"w\":2,\"h\":5,\"i\":\"12\"},\n {\"x\":2,\"y\":10,\"w\":2,\"h\":5,\"i\":\"13\"},\n {\"x\":4,\"y\":8,\"w\":2,\"h\":4,\"i\":\"14\"},\n {\"x\":6,\"y\":8,\"w\":2,\"h\":4,\"i\":\"15\"},\n {\"x\":8,\"y\":10,\"w\":2,\"h\":5,\"i\":\"16\"},\n {\"x\":10,\"y\":4,\"w\":2,\"h\":2,\"i\":\"17\"},\n {\"x\":0,\"y\":9,\"w\":2,\"h\":3,\"i\":\"18\"},\n {\"x\":2,\"y\":6,\"w\":2,\"h\":2,\"i\":\"19\"}\n];\n\nnew Vue({\n el: '#app',\n data: {\n layout: testLayout,\n index: 0,\n eventLog: []\n },\n watch: {\n eventLog: function() {\n var eventsDiv = this.$refs.eventsDiv;\n eventsDiv.scrollTop = eventsDiv.scrollHeight;\n }\n },\n methods: {\n moveEvent: function(i, newX, newY){\n var msg = \"MOVE i=\" + i + \", X=\" + newX + \", Y=\" + newY;\n this.eventLog.push(msg);\n console.log(msg);\n\n },\n movedEvent: function(i, newX, newY){\n var msg = \"MOVED i=\" + i + \", X=\" + newX + \", Y=\" + newY;\n this.eventLog.push(msg);\n console.log(msg);\n\n },\n resizeEvent: function(i, newH, newW, newHPx, newWPx){\n var msg = \"RESIZE i=\" + i + \", H=\" + newH + \", W=\" + newW + \", H(px)=\" + newHPx + \", W(px)=\" + newWPx;\n this.eventLog.push(msg);\n console.log(msg);\n },\n resizedEvent: function(i, newX, newY, newHPx, newWPx){\n var msg = \"RESIZED i=\" + i + \", X=\" + newX + \", Y=\" + newY + \", H(px)=\" + newHPx + \", W(px)=\" + newWPx;\n this.eventLog.push(msg);\n console.log(msg);\n\n },\n containerResizedEvent: function(i, newH, newW, newHPx, newWPx){\n var msg = \"CONTAINER RESIZED i=\" + i + \", H=\" + newH + \", W=\" + newW + \", H(px)=\" + newHPx + \", W(px)=\" + newWPx;\n this.eventLog.push(msg);\n console.log(msg);\n },\n /**\n *\n * @param i the item id/index\n * @param newH new height in grid rows\n * @param newW new width in grid columns\n * @param newHPx new height in pixels\n * @param newWPx new width in pixels\n *\n */\n resizedEvent: function(i, newH, newW, newHPx, newWPx){\n var msg = \"RESIZED i=\" + i + \", H=\" + newH + \", W=\" + newW + \", H(px)=\" + newHPx + \", W(px)=\" + newWPx;\n this.eventLog.push(msg);\n console.log(msg);\n },\n\n layoutCreatedEvent: function(newLayout){\n this.eventLog.push(\"Created layout\");\n console.log(\"Created layout: \", newLayout)\n },\n layoutBeforeMountEvent: function(newLayout){\n this.eventLog.push(\"beforeMount layout\");\n console.log(\"beforeMount layout: \", newLayout)\n },\n layoutMountedEvent: function(newLayout){\n this.eventLog.push(\"Mounted layout\");\n console.log(\"Mounted layout: \", newLayout)\n },\n layoutReadyEvent: function(newLayout){\n this.eventLog.push(\"Ready layout\");\n console.log(\"Ready layout: \", newLayout)\n },\n layoutUpdatedEvent: function(newLayout){\n this.eventLog.push(\"Updated layout\");\n console.log(\"Updated layout: \", newLayout)\n },\n }\n});\n\n" }, { "path": "website/docs/.vuepress/public/examples/03-multiple-grids.html", "content": "\n\n\n \n Vue Grid Layout Example 3 - Multiple grids\n \n \n \n\n\n

Vue Grid Layout Example 3 - Multiple grids

\n\nView project on Github\n
\nPrevious example: Move and resize events\n
\nNext example: Drag allow/ignore elements\n\n\n
\n

Grid 1

\n
\n
\n Displayed as [x, y, w, h]:\n
\n
\n {{item.i}}: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]\n
\n
\n
\n
\n \n \n {{item.i}}\n \n \n
\n
\n
\n

Grid 2

\n
\n
\n Displayed as [x, y, w, h]:\n
\n
\n {{item.i}}: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]\n
\n
\n
\n
\n \n \n {{item.i}}\n \n \n
\n\n\n\n\n\n" }, { "path": "website/docs/.vuepress/public/examples/04-allow-ignore.html", "content": "\n\n\n \n Vue Grid Layout Example 4 - Drag allow/ignore elements\n \n \n \n\n\n

Vue Grid Layout Example 4 - Drag allow/ignore elements

\n\nView project on Github\n
\nPrevious example: Multiple grids\n
\nNext example: Mirrored grid layout\n\n\n
\n \n
\n
\n Ignore drag on certain elements and allow on on others.\n
\n Click and drag the dots on the corner of each item to reposition\n
\n Displayed as [x, y, w, h]:\n
\n
\n {{item.i}}: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]\n
\n
\n
\n
\n
\n \n \n \n
\n
\n
\n {{item.i}}\n
\n \n
\n
\n \n \n
\n\n
\n\n\n\n\n\n" }, { "path": "website/docs/.vuepress/public/examples/05-mirrored.html", "content": "\n\n\n \n Vue Grid Layout Example 4 - Mirrored grid layout\n \n \n \n\n\n

Vue Grid Layout Example 5 - Mirrored grid layout

\n\nView project on Github\n
\nPrevious example: Drag allow/ignore elements\n
\nNext example: Responsive\n\n\n
\n \n
\n
\n Displayed as [x, y, w, h]:\n
\n
\n {{item.i}}: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]\n
\n
\n
\n
\n
\n \n Draggable\n Resizable\n Mirrored\n
\n \n \n {{item.i}}\n \n \n
\n\n
\n\n\n\n\n\n" }, { "path": "website/docs/.vuepress/public/examples/06-responsive.html", "content": "\n\n\n \n Vue Grid Layout Example 1 - Basic Responsive\n \n \n \n\n\n
\n \n
\n
\n Displayed as [x, y, w, h]:\n
\n
\n {{item.i}}: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]\n
\n
\n
\n
\n
\n \n Draggable\n Resizable\n Responsive\n
\n \n \n {{item.i}}\n \n \n
\n\n
\n \n \n \n\n\n" }, { "path": "website/docs/.vuepress/public/examples/06-responsive.js", "content": "var testLayout = [\n {\"x\":0,\"y\":0,\"w\":2,\"h\":2,\"i\":\"0\"},\n {\"x\":2,\"y\":0,\"w\":2,\"h\":4,\"i\":\"1\"},\n {\"x\":4,\"y\":0,\"w\":2,\"h\":5,\"i\":\"2\"},\n {\"x\":6,\"y\":0,\"w\":2,\"h\":3,\"i\":\"3\"},\n {\"x\":8,\"y\":0,\"w\":2,\"h\":3,\"i\":\"4\"},\n {\"x\":10,\"y\":0,\"w\":2,\"h\":3,\"i\":\"5\"},\n {\"x\":0,\"y\":5,\"w\":2,\"h\":5,\"i\":\"6\"},\n {\"x\":2,\"y\":5,\"w\":2,\"h\":5,\"i\":\"7\"},\n {\"x\":4,\"y\":5,\"w\":2,\"h\":5,\"i\":\"8\"},\n {\"x\":6,\"y\":4,\"w\":2,\"h\":4,\"i\":\"9\"},\n {\"x\":8,\"y\":4,\"w\":2,\"h\":4,\"i\":\"10\"},\n {\"x\":10,\"y\":4,\"w\":2,\"h\":4,\"i\":\"11\"},\n {\"x\":0,\"y\":10,\"w\":2,\"h\":5,\"i\":\"12\"},\n {\"x\":2,\"y\":10,\"w\":2,\"h\":5,\"i\":\"13\"},\n {\"x\":4,\"y\":8,\"w\":2,\"h\":4,\"i\":\"14\"},\n {\"x\":6,\"y\":8,\"w\":2,\"h\":4,\"i\":\"15\"},\n {\"x\":8,\"y\":10,\"w\":2,\"h\":5,\"i\":\"16\"},\n {\"x\":10,\"y\":4,\"w\":2,\"h\":2,\"i\":\"17\"},\n {\"x\":0,\"y\":9,\"w\":2,\"h\":3,\"i\":\"18\"},\n {\"x\":2,\"y\":6,\"w\":2,\"h\":2,\"i\":\"19\"}\n];\n\n// var GridLayout = VueGridLayout.GridLayout;\n// var GridItem = VueGridLayout.GridItem;\n\nnew Vue({\n el: '#app',\n // components: {\n // \"GridLayout\": GridLayout,\n // \"GridItem\": GridItem\n // },\n data: {\n layout: testLayout,\n draggable: true,\n resizable: true,\n responsive: true,\n index: 0,\n show: false,\n },\n mounted: function () {\n this.index = this.layout.length;\n this.$nextTick(function () {\n this.show = true;\n })\n },\n/* methods: {\n increaseWidth: function(item) {\n var width = document.getElementById(\"content\").offsetWidth;\n width += 20;\n document.getElementById(\"content\").style.width = width+\"px\";\n },\n decreaseWidth: function(item) {\n\n var width = document.getElementById(\"content\").offsetWidth;\n width -= 20;\n document.getElementById(\"content\").style.width = width+\"px\";\n },\n removeItem: function(item) {\n //console.log(\"### REMOVE \" + item.i);\n this.layout.splice(this.layout.indexOf(item), 1);\n },\n addItem: function() {\n var self = this;\n //console.log(\"### LENGTH: \" + this.layout.length);\n var item = {\"x\":0,\"y\":0,\"w\":2,\"h\":2,\"i\":this.index+\"\", whatever: \"bbb\"};\n this.index++;\n this.layout.push(item);\n }\n }\n*/\n});\n\n/*\nfunction generateLayout() {\n return _.map(_.range(0, 25), function (item, i) {\n var y = Math.ceil(Math.random() * 4) + 1;\n return {\n x: _.random(0, 5) * 2 % 12,\n y: Math.floor(i / 6) * y,\n w: 2,\n h: y,\n i: i.toString(),\n static: Math.random() < 0.05\n };\n });\n}*/\n\n\n\n" }, { "path": "website/docs/.vuepress/public/examples/07-prevent-collision.html", "content": "\n\n\n\n \n Vue Grid Layout Example 7 - Prevent Collision\n \n \n \n\n\n\n
\n \n
\n
\n Displayed as [x, y, w, h]:\n
\n
\n {{item.i}}: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]\n
\n
\n
\n
\n
\n \n
\n \n \n {{item.i}}\n \n \n
\n\n
\n \n \n \n\n\n\n" }, { "path": "website/docs/.vuepress/public/examples/07-prevent-collision.js", "content": "var testLayout = [\n {\"x\":0,\"y\":0,\"w\":2,\"h\":5,\"i\":\"0\", static: false},\n {\"x\":2,\"y\":0,\"w\":2,\"h\":2,\"i\":\"1\", static: false},\n {\"x\":4,\"y\":0,\"w\":2,\"h\":5,\"i\":\"2\", static: false},\n {\"x\":6,\"y\":0,\"w\":2,\"h\":3,\"i\":\"3\", static: false},\n {\"x\":8,\"y\":0,\"w\":2,\"h\":3,\"i\":\"4\", static: false},\n {\"x\":10,\"y\":0,\"w\":2,\"h\":3,\"i\":\"5\", static: false},\n {\"x\":0,\"y\":5,\"w\":2,\"h\":5,\"i\":\"6\", static: false},\n {\"x\":2,\"y\":5,\"w\":2,\"h\":5,\"i\":\"7\", static: false},\n {\"x\":4,\"y\":5,\"w\":2,\"h\":5,\"i\":\"8\", static: false},\n {\"x\":6,\"y\":3,\"w\":2,\"h\":4,\"i\":\"9\", static: false},\n {\"x\":8,\"y\":4,\"w\":2,\"h\":4,\"i\":\"10\", static: false},\n {\"x\":10,\"y\":4,\"w\":2,\"h\":4,\"i\":\"11\", static: false},\n {\"x\":0,\"y\":10,\"w\":2,\"h\":5,\"i\":\"12\", static: false},\n {\"x\":2,\"y\":10,\"w\":2,\"h\":5,\"i\":\"13\", static: false},\n {\"x\":4,\"y\":8,\"w\":2,\"h\":4,\"i\":\"14\", static: false},\n {\"x\":6,\"y\":8,\"w\":2,\"h\":4,\"i\":\"15\", static: false},\n {\"x\":8,\"y\":10,\"w\":2,\"h\":5,\"i\":\"16\", static: false},\n {\"x\":10,\"y\":4,\"w\":2,\"h\":2,\"i\":\"17\", static: false},\n {\"x\":0,\"y\":9,\"w\":2,\"h\":3,\"i\":\"18\", static: false},\n {\"x\":2,\"y\":6,\"w\":2,\"h\":2,\"i\":\"19\", static: false}\n];\n\n// var GridLayout = VueGridLayout.GridLayout;\n// var GridItem = VueGridLayout.GridItem;\n\nnew Vue({\n el: '#app',\n // components: {\n // \"GridLayout\": GridLayout,\n // \"GridItem\": GridItem\n // },\n data: {\n layout: testLayout,\n draggable: true,\n resizable: true,\n index: 0\n },\n\n/*\n mounted: function () {\n this.index = this.layout.length;\n },\n */\n methods: {\n itemTitle(item) {\n var result = item.i;\n if (item.static) {\n result += \" - Static\";\n }\n return result;\n }\n }\n});\n\n\n" }, { "path": "website/docs/.vuepress/public/examples/08-responsive-predefined-layouts.html", "content": "\n\n\n\n \n Vue Grid Layout Example 8 - Responsive with predefined layouts\n \n \n \n\n\n\n

Vue Grid Layout Example 8 - Responsive with predefined layouts

\n\n View project on Github\n
\n Previous example: Prevent collision\n
\n Next example: Dynamic Add/Remove\n\n
\n \n
\n
\n Displayed as [x, y, w, h]:\n
\n
\n {{item.i}}: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]\n
\n
\n
\n
\n
\n \n Draggable\n Resizable\n Responsive\n
\n \n \n {{item.i}}\n \n \n
\n\n
\n \n \n \n\n\n\n" }, { "path": "website/docs/.vuepress/public/examples/08-responsive-predefined-layouts.js", "content": "var testLayouts = {\n md: [\n {\"x\":0, \"y\":0, \"w\":2, \"h\":2, \"i\":\"0\"},\n {\"x\":2, \"y\":0, \"w\":2, \"h\":4, \"i\":\"1\"},\n {\"x\":4, \"y\":0, \"w\":2, \"h\":5, \"i\":\"2\"},\n {\"x\":6, \"y\":0, \"w\":2, \"h\":3, \"i\":\"3\"},\n {\"x\":2, \"y\":4, \"w\":2, \"h\":3, \"i\":\"4\"},\n {\"x\":4, \"y\":5, \"w\":2, \"h\":3, \"i\":\"5\"},\n {\"x\":0, \"y\":2, \"w\":2, \"h\":5, \"i\":\"6\"},\n {\"x\":2, \"y\":7, \"w\":2, \"h\":5, \"i\":\"7\"},\n {\"x\":4, \"y\":8, \"w\":2, \"h\":5, \"i\":\"8\"},\n {\"x\":6, \"y\":3, \"w\":2, \"h\":4, \"i\":\"9\"},\n {\"x\":0, \"y\":7, \"w\":2, \"h\":4, \"i\":\"10\"},\n {\"x\":2, \"y\":19, \"w\":2, \"h\":4, \"i\":\"11\"},\n {\"x\":0, \"y\":14, \"w\":2, \"h\":5, \"i\":\"12\"},\n {\"x\":2, \"y\":14, \"w\":2, \"h\":5, \"i\":\"13\"},\n {\"x\":4, \"y\":13, \"w\":2, \"h\":4, \"i\":\"14\"},\n {\"x\":6, \"y\":7, \"w\":2, \"h\":4, \"i\":\"15\"},\n {\"x\":0, \"y\":19, \"w\":2, \"h\":5, \"i\":\"16\"},\n {\"x\":8, \"y\":0, \"w\":2, \"h\":2, \"i\":\"17\"},\n {\"x\":0, \"y\":11, \"w\":2, \"h\":3, \"i\":\"18\"},\n {\"x\":2, \"y\":12, \"w\":2, \"h\":2, \"i\":\"19\"}\n ],\n lg: [\n {\"x\":0,\"y\":0,\"w\":2,\"h\":2,\"i\":\"0\"},\n {\"x\":2,\"y\":0,\"w\":2,\"h\":4,\"i\":\"1\"},\n {\"x\":4,\"y\":0,\"w\":2,\"h\":5,\"i\":\"2\"},\n {\"x\":6,\"y\":0,\"w\":2,\"h\":3,\"i\":\"3\"},\n {\"x\":8,\"y\":0,\"w\":2,\"h\":3,\"i\":\"4\"},\n {\"x\":10,\"y\":0,\"w\":2,\"h\":3,\"i\":\"5\"},\n {\"x\":0,\"y\":5,\"w\":2,\"h\":5,\"i\":\"6\"},\n {\"x\":2,\"y\":5,\"w\":2,\"h\":5,\"i\":\"7\"},\n {\"x\":4,\"y\":5,\"w\":2,\"h\":5,\"i\":\"8\"},\n {\"x\":6,\"y\":4,\"w\":2,\"h\":4,\"i\":\"9\"},\n {\"x\":8,\"y\":4,\"w\":2,\"h\":4,\"i\":\"10\"},\n {\"x\":10,\"y\":4,\"w\":2,\"h\":4,\"i\":\"11\"},\n {\"x\":0,\"y\":10,\"w\":2,\"h\":5,\"i\":\"12\"},\n {\"x\":2,\"y\":10,\"w\":2,\"h\":5,\"i\":\"13\"},\n {\"x\":4,\"y\":8,\"w\":2,\"h\":4,\"i\":\"14\"},\n {\"x\":6,\"y\":8,\"w\":2,\"h\":4,\"i\":\"15\"},\n {\"x\":8,\"y\":10,\"w\":2,\"h\":5,\"i\":\"16\"},\n {\"x\":10,\"y\":4,\"w\":2,\"h\":2,\"i\":\"17\"},\n {\"x\":0,\"y\":9,\"w\":2,\"h\":3,\"i\":\"18\"},\n {\"x\":2,\"y\":6,\"w\":2,\"h\":2,\"i\":\"19\"}\n ],\n};\n\n// var GridLayout = VueGridLayout.GridLayout;\n// var GridItem = VueGridLayout.GridItem;\n\nnew Vue({\n el: '#app',\n // components: {\n // \"GridLayout\": GridLayout,\n // \"GridItem\": GridItem\n // },\n data: {\n layouts: testLayouts,\n layout: testLayouts[\"lg\"],\n draggable: true,\n resizable: true,\n responsive: true,\n index: 0\n },\n mounted: function () {\n // this.index = this.layout.length;\n },\n methods: {\n breakpointChangedEvent: function(newBreakpoint, newLayout){\n console.log(\"BREAKPOINT CHANGED breakpoint=\", newBreakpoint, \", layout: \", newLayout );\n }\n }\n});\n\n\n\n" }, { "path": "website/docs/.vuepress/public/examples/09-dynamic-add-remove.html", "content": "\n\n\n\n \n Vue Grid Layout Example 9 - Dynamic Add/Remove\n \n \n\n\n\n\n\n \n\n
\n \n
\n
\n Displayed as [x, y, w, h]:\n
\n
\n {{item.i}}: [{{item.x}}, {{item.y}}, {{item.w}},\n {{item.h}}]\n
\n
\n
\n
\n
\n \n Draggable\n Resizable\n
\n \n \n {{item.i}}\n x\n \n \n
\n
\n \n \n \n\n\n\n" }, { "path": "website/docs/.vuepress/public/examples/09-dynamic-add-remove.js", "content": "var testLayout = [\n { x: 0, y: 0, w: 2, h: 2, i: \"0\" },\n { x: 2, y: 0, w: 2, h: 2, i: \"1\" },\n { x: 4, y: 0, w: 2, h: 2, i: \"2\" },\n { x: 6, y: 0, w: 2, h: 2, i: \"3\" },\n { x: 8, y: 0, w: 2, h: 2, i: \"4\" },\n];\n\n// var GridLayout = VueGridLayout.GridLayout;\n// var GridItem = VueGridLayout.GridItem;\n\nnew Vue({\n el: \"#app\",\n // components: {\n // \"GridLayout\": GridLayout,\n // \"GridItem\": GridItem\n // },\n data: {\n layout: testLayout,\n draggable: true,\n resizable: true,\n responsive: true,\n colNum: 12,\n index: 0,\n },\n mounted: function () {\n this.index = this.layout.length;\n },\n methods: {\n addItem: function () {\n // Add a new item. It must have a unique key!\n this.layout.push({\n x: (this.layout.length * 2) % (this.colNum || 12),\n y: this.layout.length + (this.colNum || 12), // puts it at the bottom\n w: 2,\n h: 2,\n i: this.index,\n });\n // Increment the counter to ensure key is always unique.\n this.index++;\n },\n removeItem: function (val) {\n const index = this.layout.map(item => item.i).indexOf(val);\n this.layout.splice(index, 1);\n },\n },\n});\n" }, { "path": "website/docs/.vuepress/public/examples/10-drag-from-outside.html", "content": "\n\n\n \n Vue Grid Layout Example 10 - Drag From Outside\n \n \n\n\t\n\n\n\n

Vue Grid Layout Example 09 - Drag From Outside

\n\n View project on Github\n
\n Previous example: Dynamic Add/Remove\n
\n Next example: Bounded\n\n
\n This demo shows what happens when an item is added from outside of the grid.\n
\n
\n Once you drop the item within the grid you'll get its coordinates/properties and can perform actions with it accordingly.\n
\n
\n\n
\n \n
\n
\n Displayed as [x, y, w, h]:\n
\n
\n {{item.i}}: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]\n
\n
\n
\n
\n
\n
Droppable Element (Drag me!)
\n
\n \n \n {{item.i}}\n \n \n
\n
\n \n \n \n\n\n" }, { "path": "website/docs/.vuepress/public/examples/10-drag-from-outside.js", "content": "var testLayout = [\n {\"x\":0,\"y\":0,\"w\":2,\"h\":2,\"i\":\"0\"},\n {\"x\":2,\"y\":0,\"w\":2,\"h\":4,\"i\":\"1\"},\n {\"x\":4,\"y\":0,\"w\":2,\"h\":5,\"i\":\"2\"},\n {\"x\":6,\"y\":0,\"w\":2,\"h\":3,\"i\":\"3\"},\n {\"x\":8,\"y\":0,\"w\":2,\"h\":3,\"i\":\"4\"},\n {\"x\":10,\"y\":0,\"w\":2,\"h\":3,\"i\":\"5\"},\n {\"x\":0,\"y\":5,\"w\":2,\"h\":5,\"i\":\"6\"},\n {\"x\":2,\"y\":5,\"w\":2,\"h\":5,\"i\":\"7\"},\n {\"x\":4,\"y\":5,\"w\":2,\"h\":5,\"i\":\"8\"}, \n {\"x\":5,\"y\":10,\"w\":4,\"h\":3,\"i\":\"9\"},\n];\nvar mouseXY={\"x\":null,\"y\":null};\nvar DragPos = {\"x\":null,\"y\":null,\"w\":1,\"h\":1,\"i\":null};\n\ndocument.addEventListener(\"dragover\", function(e) {\n mouseXY.x=e.clientX;\n mouseXY.y=e.clientY;\n}, false);\n\nnew Vue({\n el: '#app',\n data: {\n layout: testLayout,\n },\n methods: {\n drag:function(e){\n let parentRect = document.getElementById('content').getBoundingClientRect();\n let mouseInGrid=false;\n if (((mouseXY.x>parentRect.left) && (mouseXY.xparentRect.top) && (mouseXY.y item.i === 'drop')) == -1){\n this.layout.push({\n x: (this.layout.length * 2) % (this.colNum || 12),\n y: this.layout.length + (this.colNum || 12), // puts it at the bottom\n w: 1,\n h: 1,\n i: 'drop',\n }); \n }\n let index=this.layout.findIndex(item => item.i === 'drop');\n if (index!=-1){\n try { \n this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display=\"none\";\n } catch {\n }\n let el=this.$refs.gridLayout.$children[index]; \n el.dragging={\"top\":mouseXY.y-parentRect.top,\"left\":mouseXY.x-parentRect.left};\n let new_pos=el.calcXY(mouseXY.y-parentRect.top, mouseXY.x-parentRect.left);\n \n if (mouseInGrid==true){\n this.$refs.gridLayout.dragEvent('dragstart', 'drop', new_pos.x,new_pos.y,1,1); \n DragPos.i=String(index); DragPos.x=this.layout[index].x; DragPos.y=this.layout[index].y; \n }\n if (mouseInGrid==false){\n this.$refs.gridLayout.dragEvent('dragend', 'drop', new_pos.x,new_pos.y,1,1);\n this.layout = this.layout.filter(obj => obj.i !=='drop');\n }\n } \n }, \n dragend:function(e){\n let parentRect = document.getElementById('content').getBoundingClientRect();\n let mouseInGrid=false;\n if (((mouseXY.x>parentRect.left) && (mouseXY.xparentRect.top) && (mouseXY.y obj.i !=='drop');\n \n // UNCOMMENT below if you want to add a grid-item\n /*\n this.layout.push({\n x: DragPos.x,\n y: DragPos.y,\n w: 1,\n h: 1,\n i: DragPos.i,\n }); \n this.$refs.gridLayout.dragEvent('dragend', DragPos.i, DragPos.x,DragPos.y,1,1);\n try { \n this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display=\"block\";\n } catch {\n } \n */ \n }\n }, \n }, \n});\n\n" }, { "path": "website/docs/.vuepress/public/examples/11-bounded.html", "content": "\n\n\n\n \n Vue Grid Layout Example 11 - Bounded\n \n \n \n\n\n\n

Vue Grid Layout Example 11 - Bounded

\n\n View project on Github\n
\n Previous example: Drag From Outside\n
\n \n\n
\n \n
\n
\n Displayed as [x, y, w, h]:\n
\n
\n {{item.i}}: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]\n
\n
\n
\n
\n
\n Draggable\n Resizable\n Bounded\n
\n \n \n {{item.i}}\n \n \n
\n
\n \n \n \n\n\n\n" }, { "path": "website/docs/.vuepress/public/examples/11-bounded.js", "content": "var testLayout = [\n {\"x\":0,\"y\":0,\"w\":2,\"h\":2,\"i\":\"0\"},\n {\"x\":2,\"y\":0,\"w\":2,\"h\":4,\"i\":\"1\"},\n {\"x\":4,\"y\":0,\"w\":2,\"h\":5,\"i\":\"2\"},\n {\"x\":6,\"y\":0,\"w\":2,\"h\":3,\"i\":\"3\"},\n {\"x\":8,\"y\":0,\"w\":2,\"h\":3,\"i\":\"4\"},\n {\"x\":10,\"y\":0,\"w\":2,\"h\":3,\"i\":\"5\"},\n {\"x\":0,\"y\":5,\"w\":2,\"h\":5,\"i\":\"6\"},\n {\"x\":2,\"y\":5,\"w\":2,\"h\":5,\"i\":\"7\"},\n {\"x\":4,\"y\":5,\"w\":2,\"h\":5,\"i\":\"8\"},\n {\"x\":6,\"y\":4,\"w\":2,\"h\":4,\"i\":\"9\"},\n {\"x\":8,\"y\":4,\"w\":2,\"h\":4,\"i\":\"10\"},\n {\"x\":10,\"y\":4,\"w\":2,\"h\":4,\"i\":\"11\"},\n {\"x\":0,\"y\":10,\"w\":2,\"h\":5,\"i\":\"12\"},\n {\"x\":2,\"y\":10,\"w\":2,\"h\":5,\"i\":\"13\"},\n {\"x\":4,\"y\":8,\"w\":2,\"h\":4,\"i\":\"14\"},\n {\"x\":6,\"y\":8,\"w\":2,\"h\":4,\"i\":\"15\"},\n {\"x\":8,\"y\":10,\"w\":2,\"h\":5,\"i\":\"16\"},\n {\"x\":10,\"y\":4,\"w\":2,\"h\":2,\"i\":\"17\"},\n {\"x\":0,\"y\":9,\"w\":2,\"h\":3,\"i\":\"18\"},\n {\"x\":2,\"y\":6,\"w\":2,\"h\":2,\"i\":\"19\"}\n];\n\nnew Vue({\n el: '#app',\n data: {\n layout: testLayout,\n draggable: true,\n resizable: true,\n bounded: true\n }\n});\n\n\n\n" }, { "path": "website/docs/.vuepress/public/examples/app.css", "content": "/*** EXAMPLE ***/\n#content {\n width: 100%;\n}\n\n.vue-grid-layout {\n background: #eee;\n}\n\n.layoutJSON {\n background: #ddd;\n border: 1px solid black;\n margin-top: 10px;\n padding: 10px;\n}\n\n.eventsJSON {\n background: #ddd;\n border: 1px solid black;\n margin-top: 10px;\n padding: 10px;\n height: 100px;\n overflow-y: scroll;\n}\n\n.columns {\n -moz-columns: 120px;\n -webkit-columns: 120px;\n columns: 120px;\n}\n\n\n\n/*.vue-resizable-handle {\n z-index: 5000;\n position: absolute;\n width: 20px;\n height: 20px;\n bottom: 0;\n right: 0;\n background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');\n background-position: bottom right;\n padding: 0 3px 3px 0;\n background-repeat: no-repeat;\n background-origin: content-box;\n box-sizing: border-box;\n cursor: se-resize;\n}*/\n\n.vue-grid-item:not(.vue-grid-placeholder) {\n background: #ccc;\n border: 1px solid black;\n}\n\n.vue-grid-item.resizing {\n opacity: 0.9;\n}\n\n.vue-grid-item.static {\n background: #cce;\n}\n\n.vue-grid-item .text {\n font-size: 24px;\n text-align: center;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: auto;\n height: 100%;\n width: 100%;\n}\n\n.vue-grid-item .no-drag {\n height: 100%;\n width: 100%;\n}\n\n.vue-grid-item .minMax {\n font-size: 12px;\n}\n\n.vue-grid-item .add {\n cursor: pointer;\n}\n\n.vue-draggable-handle {\n position: absolute;\n width: 20px;\n height: 20px;\n top: 0;\n left: 0;\n background: url(\"data:image/svg+xml;utf8,\") no-repeat;\n background-position: bottom right;\n padding: 0 8px 8px 0;\n background-repeat: no-repeat;\n background-origin: content-box;\n box-sizing: border-box;\n cursor: pointer;\n}\n" }, { "path": "website/docs/.vuepress/public/examples/vue.js", "content": "/*!\n * Vue.js v2.6.7\n * (c) 2014-2019 Evan You\n * Released under the MIT License.\n */\n(function (global, factory) {\n typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :\n typeof define === 'function' && define.amd ? define(factory) :\n (global = global || self, global.Vue = factory());\n}(this, function () { 'use strict';\n\n /* */\n\n var emptyObject = Object.freeze({});\n\n // These helpers produce better VM code in JS engines due to their\n // explicitness and function inlining.\n function isUndef (v) {\n return v === undefined || v === null\n }\n\n function isDef (v) {\n return v !== undefined && v !== null\n }\n\n function isTrue (v) {\n return v === true\n }\n\n function isFalse (v) {\n return v === false\n }\n\n /**\n * Check if value is primitive.\n */\n function isPrimitive (value) {\n return (\n typeof value === 'string' ||\n typeof value === 'number' ||\n // $flow-disable-line\n typeof value === 'symbol' ||\n typeof value === 'boolean'\n )\n }\n\n /**\n * Quick object check - this is primarily used to tell\n * Objects from primitive values when we know the value\n * is a JSON-compliant type.\n */\n function isObject (obj) {\n return obj !== null && typeof obj === 'object'\n }\n\n /**\n * Get the raw type string of a value, e.g., [object Object].\n */\n var _toString = Object.prototype.toString;\n\n function toRawType (value) {\n return _toString.call(value).slice(8, -1)\n }\n\n /**\n * Strict object type check. Only returns true\n * for plain JavaScript objects.\n */\n function isPlainObject (obj) {\n return _toString.call(obj) === '[object Object]'\n }\n\n function isRegExp (v) {\n return _toString.call(v) === '[object RegExp]'\n }\n\n /**\n * Check if val is a valid array index.\n */\n function isValidArrayIndex (val) {\n var n = parseFloat(String(val));\n return n >= 0 && Math.floor(n) === n && isFinite(val)\n }\n\n function isPromise (val) {\n return (\n isDef(val) &&\n typeof val.then === 'function' &&\n typeof val.catch === 'function'\n )\n }\n\n /**\n * Convert a value to a string that is actually rendered.\n */\n function toString (val) {\n return val == null\n ? ''\n : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)\n ? JSON.stringify(val, null, 2)\n : String(val)\n }\n\n /**\n * Convert an input value to a number for persistence.\n * If the conversion fails, return original string.\n */\n function toNumber (val) {\n var n = parseFloat(val);\n return isNaN(n) ? val : n\n }\n\n /**\n * Make a map and return a function for checking if a key\n * is in that map.\n */\n function makeMap (\n str,\n expectsLowerCase\n ) {\n var map = Object.create(null);\n var list = str.split(',');\n for (var i = 0; i < list.length; i++) {\n map[list[i]] = true;\n }\n return expectsLowerCase\n ? function (val) { return map[val.toLowerCase()]; }\n : function (val) { return map[val]; }\n }\n\n /**\n * Check if a tag is a built-in tag.\n */\n var isBuiltInTag = makeMap('slot,component', true);\n\n /**\n * Check if an attribute is a reserved attribute.\n */\n var isReservedAttribute = makeMap('key,ref,slot,slot-scope,is');\n\n /**\n * Remove an item from an array.\n */\n function remove (arr, item) {\n if (arr.length) {\n var index = arr.indexOf(item);\n if (index > -1) {\n return arr.splice(index, 1)\n }\n }\n }\n\n /**\n * Check whether an object has the property.\n */\n var hasOwnProperty = Object.prototype.hasOwnProperty;\n function hasOwn (obj, key) {\n return hasOwnProperty.call(obj, key)\n }\n\n /**\n * Create a cached version of a pure function.\n */\n function cached (fn) {\n var cache = Object.create(null);\n return (function cachedFn (str) {\n var hit = cache[str];\n return hit || (cache[str] = fn(str))\n })\n }\n\n /**\n * Camelize a hyphen-delimited string.\n */\n var camelizeRE = /-(\\w)/g;\n var camelize = cached(function (str) {\n return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })\n });\n\n /**\n * Capitalize a string.\n */\n var capitalize = cached(function (str) {\n return str.charAt(0).toUpperCase() + str.slice(1)\n });\n\n /**\n * Hyphenate a camelCase string.\n */\n var hyphenateRE = /\\B([A-Z])/g;\n var hyphenate = cached(function (str) {\n return str.replace(hyphenateRE, '-$1').toLowerCase()\n });\n\n /**\n * Simple bind polyfill for environments that do not support it,\n * e.g., PhantomJS 1.x. Technically, we don't need this anymore\n * since native bind is now performant enough in most browsers.\n * But removing it would mean breaking code that was able to run in\n * PhantomJS 1.x, so this must be kept for backward compatibility.\n */\n\n /* istanbul ignore next */\n function polyfillBind (fn, ctx) {\n function boundFn (a) {\n var l = arguments.length;\n return l\n ? l > 1\n ? fn.apply(ctx, arguments)\n : fn.call(ctx, a)\n : fn.call(ctx)\n }\n\n boundFn._length = fn.length;\n return boundFn\n }\n\n function nativeBind (fn, ctx) {\n return fn.bind(ctx)\n }\n\n var bind = Function.prototype.bind\n ? nativeBind\n : polyfillBind;\n\n /**\n * Convert an Array-like object to a real Array.\n */\n function toArray (list, start) {\n start = start || 0;\n var i = list.length - start;\n var ret = new Array(i);\n while (i--) {\n ret[i] = list[i + start];\n }\n return ret\n }\n\n /**\n * Mix properties into target object.\n */\n function extend (to, _from) {\n for (var key in _from) {\n to[key] = _from[key];\n }\n return to\n }\n\n /**\n * Merge an Array of Objects into a single Object.\n */\n function toObject (arr) {\n var res = {};\n for (var i = 0; i < arr.length; i++) {\n if (arr[i]) {\n extend(res, arr[i]);\n }\n }\n return res\n }\n\n /* eslint-disable no-unused-vars */\n\n /**\n * Perform no operation.\n * Stubbing args to make Flow happy without leaving useless transpiled code\n * with ...rest (https://flow.org/blog/2017/05/07/Strict-Function-Call-Arity/).\n */\n function noop (a, b, c) {}\n\n /**\n * Always return false.\n */\n var no = function (a, b, c) { return false; };\n\n /* eslint-enable no-unused-vars */\n\n /**\n * Return the same value.\n */\n var identity = function (_) { return _; };\n\n /**\n * Generate a string containing static keys from compiler modules.\n */\n function genStaticKeys (modules) {\n return modules.reduce(function (keys, m) {\n return keys.concat(m.staticKeys || [])\n }, []).join(',')\n }\n\n /**\n * Check if two values are loosely equal - that is,\n * if they are plain objects, do they have the same shape?\n */\n function looseEqual (a, b) {\n if (a === b) { return true }\n var isObjectA = isObject(a);\n var isObjectB = isObject(b);\n if (isObjectA && isObjectB) {\n try {\n var isArrayA = Array.isArray(a);\n var isArrayB = Array.isArray(b);\n if (isArrayA && isArrayB) {\n return a.length === b.length && a.every(function (e, i) {\n return looseEqual(e, b[i])\n })\n } else if (a instanceof Date && b instanceof Date) {\n return a.getTime() === b.getTime()\n } else if (!isArrayA && !isArrayB) {\n var keysA = Object.keys(a);\n var keysB = Object.keys(b);\n return keysA.length === keysB.length && keysA.every(function (key) {\n return looseEqual(a[key], b[key])\n })\n } else {\n /* istanbul ignore next */\n return false\n }\n } catch (e) {\n /* istanbul ignore next */\n return false\n }\n } else if (!isObjectA && !isObjectB) {\n return String(a) === String(b)\n } else {\n return false\n }\n }\n\n /**\n * Return the first index at which a loosely equal value can be\n * found in the array (if value is a plain object, the array must\n * contain an object of the same shape), or -1 if it is not present.\n */\n function looseIndexOf (arr, val) {\n for (var i = 0; i < arr.length; i++) {\n if (looseEqual(arr[i], val)) { return i }\n }\n return -1\n }\n\n /**\n * Ensure a function is called only once.\n */\n function once (fn) {\n var called = false;\n return function () {\n if (!called) {\n called = true;\n fn.apply(this, arguments);\n }\n }\n }\n\n var SSR_ATTR = 'data-server-rendered';\n\n var ASSET_TYPES = [\n 'component',\n 'directive',\n 'filter'\n ];\n\n var LIFECYCLE_HOOKS = [\n 'beforeCreate',\n 'created',\n 'beforeMount',\n 'mounted',\n 'beforeUpdate',\n 'updated',\n 'beforeDestroy',\n 'destroyed',\n 'activated',\n 'deactivated',\n 'errorCaptured',\n 'serverPrefetch'\n ];\n\n /* */\n\n\n\n var config = ({\n /**\n * Option merge strategies (used in core/util/options)\n */\n // $flow-disable-line\n optionMergeStrategies: Object.create(null),\n\n /**\n * Whether to suppress warnings.\n */\n silent: false,\n\n /**\n * Show production mode tip message on boot?\n */\n productionTip: \"development\" !== 'production',\n\n /**\n * Whether to enable devtools\n */\n devtools: \"development\" !== 'production',\n\n /**\n * Whether to record perf\n */\n performance: false,\n\n /**\n * Error handler for watcher errors\n */\n errorHandler: null,\n\n /**\n * Warn handler for watcher warns\n */\n warnHandler: null,\n\n /**\n * Ignore certain custom elements\n */\n ignoredElements: [],\n\n /**\n * Custom user key aliases for v-on\n */\n // $flow-disable-line\n keyCodes: Object.create(null),\n\n /**\n * Check if a tag is reserved so that it cannot be registered as a\n * component. This is platform-dependent and may be overwritten.\n */\n isReservedTag: no,\n\n /**\n * Check if an attribute is reserved so that it cannot be used as a component\n * prop. This is platform-dependent and may be overwritten.\n */\n isReservedAttr: no,\n\n /**\n * Check if a tag is an unknown element.\n * Platform-dependent.\n */\n isUnknownElement: no,\n\n /**\n * Get the namespace of an element\n */\n getTagNamespace: noop,\n\n /**\n * Parse the real tag name for the specific platform.\n */\n parsePlatformTagName: identity,\n\n /**\n * Check if an attribute must be bound using property, e.g. value\n * Platform-dependent.\n */\n mustUseProp: no,\n\n /**\n * Perform updates asynchronously. Intended to be used by Vue Test Utils\n * This will significantly reduce performance if set to false.\n */\n async: true,\n\n /**\n * Exposed for legacy reasons\n */\n _lifecycleHooks: LIFECYCLE_HOOKS\n });\n\n /* */\n\n /**\n * unicode letters used for parsing html tags, component names and property paths.\n * using https://www.w3.org/TR/html53/semantics-scripting.html#potentialcustomelementname\n * skipping \\u10000-\\uEFFFF due to it freezing up PhantomJS\n */\n var unicodeLetters = 'a-zA-Z\\u00B7\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u203F-\\u2040\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD';\n\n /**\n * Check if a string starts with $ or _\n */\n function isReserved (str) {\n var c = (str + '').charCodeAt(0);\n return c === 0x24 || c === 0x5F\n }\n\n /**\n * Define a property.\n */\n function def (obj, key, val, enumerable) {\n Object.defineProperty(obj, key, {\n value: val,\n enumerable: !!enumerable,\n writable: true,\n configurable: true\n });\n }\n\n /**\n * Parse simple path.\n */\n var bailRE = new RegExp((\"[^\" + unicodeLetters + \".$_\\\\d]\"));\n function parsePath (path) {\n if (bailRE.test(path)) {\n return\n }\n var segments = path.split('.');\n return function (obj) {\n for (var i = 0; i < segments.length; i++) {\n if (!obj) { return }\n obj = obj[segments[i]];\n }\n return obj\n }\n }\n\n /* */\n\n // can we use __proto__?\n var hasProto = '__proto__' in {};\n\n // Browser environment sniffing\n var inBrowser = typeof window !== 'undefined';\n var inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform;\n var weexPlatform = inWeex && WXEnvironment.platform.toLowerCase();\n var UA = inBrowser && window.navigator.userAgent.toLowerCase();\n var isIE = UA && /msie|trident/.test(UA);\n var isIE9 = UA && UA.indexOf('msie 9.0') > 0;\n var isEdge = UA && UA.indexOf('edge/') > 0;\n var isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android');\n var isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios');\n var isChrome = UA && /chrome\\/\\d+/.test(UA) && !isEdge;\n var isPhantomJS = UA && /phantomjs/.test(UA);\n var isFF = UA && UA.match(/firefox\\/(\\d+)/);\n\n // Firefox has a \"watch\" function on Object.prototype...\n var nativeWatch = ({}).watch;\n\n var supportsPassive = false;\n if (inBrowser) {\n try {\n var opts = {};\n Object.defineProperty(opts, 'passive', ({\n get: function get () {\n /* istanbul ignore next */\n supportsPassive = true;\n }\n })); // https://github.com/facebook/flow/issues/285\n window.addEventListener('test-passive', null, opts);\n } catch (e) {}\n }\n\n // this needs to be lazy-evaled because vue may be required before\n // vue-server-renderer can set VUE_ENV\n var _isServer;\n var isServerRendering = function () {\n if (_isServer === undefined) {\n /* istanbul ignore if */\n if (!inBrowser && !inWeex && typeof global !== 'undefined') {\n // detect presence of vue-server-renderer and avoid\n // Webpack shimming the process\n _isServer = global['process'] && global['process'].env.VUE_ENV === 'server';\n } else {\n _isServer = false;\n }\n }\n return _isServer\n };\n\n // detect devtools\n var devtools = inBrowser && window.__VUE_DEVTOOLS_GLOBAL_HOOK__;\n\n /* istanbul ignore next */\n function isNative (Ctor) {\n return typeof Ctor === 'function' && /native code/.test(Ctor.toString())\n }\n\n var hasSymbol =\n typeof Symbol !== 'undefined' && isNative(Symbol) &&\n typeof Reflect !== 'undefined' && isNative(Reflect.ownKeys);\n\n var _Set;\n /* istanbul ignore if */ // $flow-disable-line\n if (typeof Set !== 'undefined' && isNative(Set)) {\n // use native Set when available.\n _Set = Set;\n } else {\n // a non-standard Set polyfill that only works with primitive keys.\n _Set = /*@__PURE__*/(function () {\n function Set () {\n this.set = Object.create(null);\n }\n Set.prototype.has = function has (key) {\n return this.set[key] === true\n };\n Set.prototype.add = function add (key) {\n this.set[key] = true;\n };\n Set.prototype.clear = function clear () {\n this.set = Object.create(null);\n };\n\n return Set;\n }());\n }\n\n /* */\n\n var warn = noop;\n var tip = noop;\n var generateComponentTrace = (noop); // work around flow check\n var formatComponentName = (noop);\n\n {\n var hasConsole = typeof console !== 'undefined';\n var classifyRE = /(?:^|[-_])(\\w)/g;\n var classify = function (str) { return str\n .replace(classifyRE, function (c) { return c.toUpperCase(); })\n .replace(/[-_]/g, ''); };\n\n warn = function (msg, vm) {\n var trace = vm ? generateComponentTrace(vm) : '';\n\n if (config.warnHandler) {\n config.warnHandler.call(null, msg, vm, trace);\n } else if (hasConsole && (!config.silent)) {\n console.error((\"[Vue warn]: \" + msg + trace));\n }\n };\n\n tip = function (msg, vm) {\n if (hasConsole && (!config.silent)) {\n console.warn(\"[Vue tip]: \" + msg + (\n vm ? generateComponentTrace(vm) : ''\n ));\n }\n };\n\n formatComponentName = function (vm, includeFile) {\n if (vm.$root === vm) {\n return ''\n }\n var options = typeof vm === 'function' && vm.cid != null\n ? vm.options\n : vm._isVue\n ? vm.$options || vm.constructor.options\n : vm;\n var name = options.name || options._componentTag;\n var file = options.__file;\n if (!name && file) {\n var match = file.match(/([^/\\\\]+)\\.vue$/);\n name = match && match[1];\n }\n\n return (\n (name ? (\"<\" + (classify(name)) + \">\") : \"\") +\n (file && includeFile !== false ? (\" at \" + file) : '')\n )\n };\n\n var repeat = function (str, n) {\n var res = '';\n while (n) {\n if (n % 2 === 1) { res += str; }\n if (n > 1) { str += str; }\n n >>= 1;\n }\n return res\n };\n\n generateComponentTrace = function (vm) {\n if (vm._isVue && vm.$parent) {\n var tree = [];\n var currentRecursiveSequence = 0;\n while (vm) {\n if (tree.length > 0) {\n var last = tree[tree.length - 1];\n if (last.constructor === vm.constructor) {\n currentRecursiveSequence++;\n vm = vm.$parent;\n continue\n } else if (currentRecursiveSequence > 0) {\n tree[tree.length - 1] = [last, currentRecursiveSequence];\n currentRecursiveSequence = 0;\n }\n }\n tree.push(vm);\n vm = vm.$parent;\n }\n return '\\n\\nfound in\\n\\n' + tree\n .map(function (vm, i) { return (\"\" + (i === 0 ? '---> ' : repeat(' ', 5 + i * 2)) + (Array.isArray(vm)\n ? ((formatComponentName(vm[0])) + \"... (\" + (vm[1]) + \" recursive calls)\")\n : formatComponentName(vm))); })\n .join('\\n')\n } else {\n return (\"\\n\\n(found in \" + (formatComponentName(vm)) + \")\")\n }\n };\n }\n\n /* */\n\n var uid = 0;\n\n /**\n * A dep is an observable that can have multiple\n * directives subscribing to it.\n */\n var Dep = function Dep () {\n this.id = uid++;\n this.subs = [];\n };\n\n Dep.prototype.addSub = function addSub (sub) {\n this.subs.push(sub);\n };\n\n Dep.prototype.removeSub = function removeSub (sub) {\n remove(this.subs, sub);\n };\n\n Dep.prototype.depend = function depend () {\n if (Dep.target) {\n Dep.target.addDep(this);\n }\n };\n\n Dep.prototype.notify = function notify () {\n // stabilize the subscriber list first\n var subs = this.subs.slice();\n if (!config.async) {\n // subs aren't sorted in scheduler if not running async\n // we need to sort them now to make sure they fire in correct\n // order\n subs.sort(function (a, b) { return a.id - b.id; });\n }\n for (var i = 0, l = subs.length; i < l; i++) {\n subs[i].update();\n }\n };\n\n // The current target watcher being evaluated.\n // This is globally unique because only one watcher\n // can be evaluated at a time.\n Dep.target = null;\n var targetStack = [];\n\n function pushTarget (target) {\n targetStack.push(target);\n Dep.target = target;\n }\n\n function popTarget () {\n targetStack.pop();\n Dep.target = targetStack[targetStack.length - 1];\n }\n\n /* */\n\n var VNode = function VNode (\n tag,\n data,\n children,\n text,\n elm,\n context,\n componentOptions,\n asyncFactory\n ) {\n this.tag = tag;\n this.data = data;\n this.children = children;\n this.text = text;\n this.elm = elm;\n this.ns = undefined;\n this.context = context;\n this.fnContext = undefined;\n this.fnOptions = undefined;\n this.fnScopeId = undefined;\n this.key = data && data.key;\n this.componentOptions = componentOptions;\n this.componentInstance = undefined;\n this.parent = undefined;\n this.raw = false;\n this.isStatic = false;\n this.isRootInsert = true;\n this.isComment = false;\n this.isCloned = false;\n this.isOnce = false;\n this.asyncFactory = asyncFactory;\n this.asyncMeta = undefined;\n this.isAsyncPlaceholder = false;\n };\n\n var prototypeAccessors = { child: { configurable: true } };\n\n // DEPRECATED: alias for componentInstance for backwards compat.\n /* istanbul ignore next */\n prototypeAccessors.child.get = function () {\n return this.componentInstance\n };\n\n Object.defineProperties( VNode.prototype, prototypeAccessors );\n\n var createEmptyVNode = function (text) {\n if ( text === void 0 ) text = '';\n\n var node = new VNode();\n node.text = text;\n node.isComment = true;\n return node\n };\n\n function createTextVNode (val) {\n return new VNode(undefined, undefined, undefined, String(val))\n }\n\n // optimized shallow clone\n // used for static nodes and slot nodes because they may be reused across\n // multiple renders, cloning them avoids errors when DOM manipulations rely\n // on their elm reference.\n function cloneVNode (vnode) {\n var cloned = new VNode(\n vnode.tag,\n vnode.data,\n // #7975\n // clone children array to avoid mutating original in case of cloning\n // a child.\n vnode.children && vnode.children.slice(),\n vnode.text,\n vnode.elm,\n vnode.context,\n vnode.componentOptions,\n vnode.asyncFactory\n );\n cloned.ns = vnode.ns;\n cloned.isStatic = vnode.isStatic;\n cloned.key = vnode.key;\n cloned.isComment = vnode.isComment;\n cloned.fnContext = vnode.fnContext;\n cloned.fnOptions = vnode.fnOptions;\n cloned.fnScopeId = vnode.fnScopeId;\n cloned.asyncMeta = vnode.asyncMeta;\n cloned.isCloned = true;\n return cloned\n }\n\n /*\n * not type checking this file because flow doesn't play well with\n * dynamically accessing methods on Array prototype\n */\n\n var arrayProto = Array.prototype;\n var arrayMethods = Object.create(arrayProto);\n\n var methodsToPatch = [\n 'push',\n 'pop',\n 'shift',\n 'unshift',\n 'splice',\n 'sort',\n 'reverse'\n ];\n\n /**\n * Intercept mutating methods and emit events\n */\n methodsToPatch.forEach(function (method) {\n // cache original method\n var original = arrayProto[method];\n def(arrayMethods, method, function mutator () {\n var args = [], len = arguments.length;\n while ( len-- ) args[ len ] = arguments[ len ];\n\n var result = original.apply(this, args);\n var ob = this.__ob__;\n var inserted;\n switch (method) {\n case 'push':\n case 'unshift':\n inserted = args;\n break\n case 'splice':\n inserted = args.slice(2);\n break\n }\n if (inserted) { ob.observeArray(inserted); }\n // notify change\n ob.dep.notify();\n return result\n });\n });\n\n /* */\n\n var arrayKeys = Object.getOwnPropertyNames(arrayMethods);\n\n /**\n * In some cases we may want to disable observation inside a component's\n * update computation.\n */\n var shouldObserve = true;\n\n function toggleObserving (value) {\n shouldObserve = value;\n }\n\n /**\n * Observer class that is attached to each observed\n * object. Once attached, the observer converts the target\n * object's property keys into getter/setters that\n * collect dependencies and dispatch updates.\n */\n var Observer = function Observer (value) {\n this.value = value;\n this.dep = new Dep();\n this.vmCount = 0;\n def(value, '__ob__', this);\n if (Array.isArray(value)) {\n if (hasProto) {\n protoAugment(value, arrayMethods);\n } else {\n copyAugment(value, arrayMethods, arrayKeys);\n }\n this.observeArray(value);\n } else {\n this.walk(value);\n }\n };\n\n /**\n * Walk through all properties and convert them into\n * getter/setters. This method should only be called when\n * value type is Object.\n */\n Observer.prototype.walk = function walk (obj) {\n var keys = Object.keys(obj);\n for (var i = 0; i < keys.length; i++) {\n defineReactive$$1(obj, keys[i]);\n }\n };\n\n /**\n * Observe a list of Array items.\n */\n Observer.prototype.observeArray = function observeArray (items) {\n for (var i = 0, l = items.length; i < l; i++) {\n observe(items[i]);\n }\n };\n\n // helpers\n\n /**\n * Augment a target Object or Array by intercepting\n * the prototype chain using __proto__\n */\n function protoAugment (target, src) {\n /* eslint-disable no-proto */\n target.__proto__ = src;\n /* eslint-enable no-proto */\n }\n\n /**\n * Augment a target Object or Array by defining\n * hidden properties.\n */\n /* istanbul ignore next */\n function copyAugment (target, src, keys) {\n for (var i = 0, l = keys.length; i < l; i++) {\n var key = keys[i];\n def(target, key, src[key]);\n }\n }\n\n /**\n * Attempt to create an observer instance for a value,\n * returns the new observer if successfully observed,\n * or the existing observer if the value already has one.\n */\n function observe (value, asRootData) {\n if (!isObject(value) || value instanceof VNode) {\n return\n }\n var ob;\n if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {\n ob = value.__ob__;\n } else if (\n shouldObserve &&\n !isServerRendering() &&\n (Array.isArray(value) || isPlainObject(value)) &&\n Object.isExtensible(value) &&\n !value._isVue\n ) {\n ob = new Observer(value);\n }\n if (asRootData && ob) {\n ob.vmCount++;\n }\n return ob\n }\n\n /**\n * Define a reactive property on an Object.\n */\n function defineReactive$$1 (\n obj,\n key,\n val,\n customSetter,\n shallow\n ) {\n var dep = new Dep();\n\n var property = Object.getOwnPropertyDescriptor(obj, key);\n if (property && property.configurable === false) {\n return\n }\n\n // cater for pre-defined getter/setters\n var getter = property && property.get;\n var setter = property && property.set;\n if ((!getter || setter) && arguments.length === 2) {\n val = obj[key];\n }\n\n var childOb = !shallow && observe(val);\n Object.defineProperty(obj, key, {\n enumerable: true,\n configurable: true,\n get: function reactiveGetter () {\n var value = getter ? getter.call(obj) : val;\n if (Dep.target) {\n dep.depend();\n if (childOb) {\n childOb.dep.depend();\n if (Array.isArray(value)) {\n dependArray(value);\n }\n }\n }\n return value\n },\n set: function reactiveSetter (newVal) {\n var value = getter ? getter.call(obj) : val;\n /* eslint-disable no-self-compare */\n if (newVal === value || (newVal !== newVal && value !== value)) {\n return\n }\n /* eslint-enable no-self-compare */\n if (customSetter) {\n customSetter();\n }\n // #7981: for accessor properties without setter\n if (getter && !setter) { return }\n if (setter) {\n setter.call(obj, newVal);\n } else {\n val = newVal;\n }\n childOb = !shallow && observe(newVal);\n dep.notify();\n }\n });\n }\n\n /**\n * Set a property on an object. Adds the new property and\n * triggers change notification if the property doesn't\n * already exist.\n */\n function set (target, key, val) {\n if (isUndef(target) || isPrimitive(target)\n ) {\n warn((\"Cannot set reactive property on undefined, null, or primitive value: \" + ((target))));\n }\n if (Array.isArray(target) && isValidArrayIndex(key)) {\n target.length = Math.max(target.length, key);\n target.splice(key, 1, val);\n return val\n }\n if (key in target && !(key in Object.prototype)) {\n target[key] = val;\n return val\n }\n var ob = (target).__ob__;\n if (target._isVue || (ob && ob.vmCount)) {\n warn(\n 'Avoid adding reactive properties to a Vue instance or its root $data ' +\n 'at runtime - declare it upfront in the data option.'\n );\n return val\n }\n if (!ob) {\n target[key] = val;\n return val\n }\n defineReactive$$1(ob.value, key, val);\n ob.dep.notify();\n return val\n }\n\n /**\n * Delete a property and trigger change if necessary.\n */\n function del (target, key) {\n if (isUndef(target) || isPrimitive(target)\n ) {\n warn((\"Cannot delete reactive property on undefined, null, or primitive value: \" + ((target))));\n }\n if (Array.isArray(target) && isValidArrayIndex(key)) {\n target.splice(key, 1);\n return\n }\n var ob = (target).__ob__;\n if (target._isVue || (ob && ob.vmCount)) {\n warn(\n 'Avoid deleting properties on a Vue instance or its root $data ' +\n '- just set it to null.'\n );\n return\n }\n if (!hasOwn(target, key)) {\n return\n }\n delete target[key];\n if (!ob) {\n return\n }\n ob.dep.notify();\n }\n\n /**\n * Collect dependencies on array elements when the array is touched, since\n * we cannot intercept array element access like property getters.\n */\n function dependArray (value) {\n for (var e = (void 0), i = 0, l = value.length; i < l; i++) {\n e = value[i];\n e && e.__ob__ && e.__ob__.dep.depend();\n if (Array.isArray(e)) {\n dependArray(e);\n }\n }\n }\n\n /* */\n\n /**\n * Option overwriting strategies are functions that handle\n * how to merge a parent option value and a child option\n * value into the final value.\n */\n var strats = config.optionMergeStrategies;\n\n /**\n * Options with restrictions\n */\n {\n strats.el = strats.propsData = function (parent, child, vm, key) {\n if (!vm) {\n warn(\n \"option \\\"\" + key + \"\\\" can only be used during instance \" +\n 'creation with the `new` keyword.'\n );\n }\n return defaultStrat(parent, child)\n };\n }\n\n /**\n * Helper that recursively merges two data objects together.\n */\n function mergeData (to, from) {\n if (!from) { return to }\n var key, toVal, fromVal;\n\n var keys = hasSymbol\n ? Reflect.ownKeys(from)\n : Object.keys(from);\n\n for (var i = 0; i < keys.length; i++) {\n key = keys[i];\n // in case the object is already observed...\n if (key === '__ob__') { continue }\n toVal = to[key];\n fromVal = from[key];\n if (!hasOwn(to, key)) {\n set(to, key, fromVal);\n } else if (\n toVal !== fromVal &&\n isPlainObject(toVal) &&\n isPlainObject(fromVal)\n ) {\n mergeData(toVal, fromVal);\n }\n }\n return to\n }\n\n /**\n * Data\n */\n function mergeDataOrFn (\n parentVal,\n childVal,\n vm\n ) {\n if (!vm) {\n // in a Vue.extend merge, both should be functions\n if (!childVal) {\n return parentVal\n }\n if (!parentVal) {\n return childVal\n }\n // when parentVal & childVal are both present,\n // we need to return a function that returns the\n // merged result of both functions... no need to\n // check if parentVal is a function here because\n // it has to be a function to pass previous merges.\n return function mergedDataFn () {\n return mergeData(\n typeof childVal === 'function' ? childVal.call(this, this) : childVal,\n typeof parentVal === 'function' ? parentVal.call(this, this) : parentVal\n )\n }\n } else {\n return function mergedInstanceDataFn () {\n // instance merge\n var instanceData = typeof childVal === 'function'\n ? childVal.call(vm, vm)\n : childVal;\n var defaultData = typeof parentVal === 'function'\n ? parentVal.call(vm, vm)\n : parentVal;\n if (instanceData) {\n return mergeData(instanceData, defaultData)\n } else {\n return defaultData\n }\n }\n }\n }\n\n strats.data = function (\n parentVal,\n childVal,\n vm\n ) {\n if (!vm) {\n if (childVal && typeof childVal !== 'function') {\n warn(\n 'The \"data\" option should be a function ' +\n 'that returns a per-instance value in component ' +\n 'definitions.',\n vm\n );\n\n return parentVal\n }\n return mergeDataOrFn(parentVal, childVal)\n }\n\n return mergeDataOrFn(parentVal, childVal, vm)\n };\n\n /**\n * Hooks and props are merged as arrays.\n */\n function mergeHook (\n parentVal,\n childVal\n ) {\n var res = childVal\n ? parentVal\n ? parentVal.concat(childVal)\n : Array.isArray(childVal)\n ? childVal\n : [childVal]\n : parentVal;\n return res\n ? dedupeHooks(res)\n : res\n }\n\n function dedupeHooks (hooks) {\n var res = [];\n for (var i = 0; i < hooks.length; i++) {\n if (res.indexOf(hooks[i]) === -1) {\n res.push(hooks[i]);\n }\n }\n return res\n }\n\n LIFECYCLE_HOOKS.forEach(function (hook) {\n strats[hook] = mergeHook;\n });\n\n /**\n * Assets\n *\n * When a vm is present (instance creation), we need to do\n * a three-way merge between constructor options, instance\n * options and parent options.\n */\n function mergeAssets (\n parentVal,\n childVal,\n vm,\n key\n ) {\n var res = Object.create(parentVal || null);\n if (childVal) {\n assertObjectType(key, childVal, vm);\n return extend(res, childVal)\n } else {\n return res\n }\n }\n\n ASSET_TYPES.forEach(function (type) {\n strats[type + 's'] = mergeAssets;\n });\n\n /**\n * Watchers.\n *\n * Watchers hashes should not overwrite one\n * another, so we merge them as arrays.\n */\n strats.watch = function (\n parentVal,\n childVal,\n vm,\n key\n ) {\n // work around Firefox's Object.prototype.watch...\n if (parentVal === nativeWatch) { parentVal = undefined; }\n if (childVal === nativeWatch) { childVal = undefined; }\n /* istanbul ignore if */\n if (!childVal) { return Object.create(parentVal || null) }\n {\n assertObjectType(key, childVal, vm);\n }\n if (!parentVal) { return childVal }\n var ret = {};\n extend(ret, parentVal);\n for (var key$1 in childVal) {\n var parent = ret[key$1];\n var child = childVal[key$1];\n if (parent && !Array.isArray(parent)) {\n parent = [parent];\n }\n ret[key$1] = parent\n ? parent.concat(child)\n : Array.isArray(child) ? child : [child];\n }\n return ret\n };\n\n /**\n * Other object hashes.\n */\n strats.props =\n strats.methods =\n strats.inject =\n strats.computed = function (\n parentVal,\n childVal,\n vm,\n key\n ) {\n if (childVal && \"development\" !== 'production') {\n assertObjectType(key, childVal, vm);\n }\n if (!parentVal) { return childVal }\n var ret = Object.create(null);\n extend(ret, parentVal);\n if (childVal) { extend(ret, childVal); }\n return ret\n };\n strats.provide = mergeDataOrFn;\n\n /**\n * Default strategy.\n */\n var defaultStrat = function (parentVal, childVal) {\n return childVal === undefined\n ? parentVal\n : childVal\n };\n\n /**\n * Validate component names\n */\n function checkComponents (options) {\n for (var key in options.components) {\n validateComponentName(key);\n }\n }\n\n function validateComponentName (name) {\n if (!new RegExp((\"^[a-zA-Z][\\\\-\\\\.0-9_\" + unicodeLetters + \"]*$\")).test(name)) {\n warn(\n 'Invalid component name: \"' + name + '\". Component names ' +\n 'should conform to valid custom element name in html5 specification.'\n );\n }\n if (isBuiltInTag(name) || config.isReservedTag(name)) {\n warn(\n 'Do not use built-in or reserved HTML elements as component ' +\n 'id: ' + name\n );\n }\n }\n\n /**\n * Ensure all props option syntax are normalized into the\n * Object-based format.\n */\n function normalizeProps (options, vm) {\n var props = options.props;\n if (!props) { return }\n var res = {};\n var i, val, name;\n if (Array.isArray(props)) {\n i = props.length;\n while (i--) {\n val = props[i];\n if (typeof val === 'string') {\n name = camelize(val);\n res[name] = { type: null };\n } else {\n warn('props must be strings when using array syntax.');\n }\n }\n } else if (isPlainObject(props)) {\n for (var key in props) {\n val = props[key];\n name = camelize(key);\n res[name] = isPlainObject(val)\n ? val\n : { type: val };\n }\n } else {\n warn(\n \"Invalid value for option \\\"props\\\": expected an Array or an Object, \" +\n \"but got \" + (toRawType(props)) + \".\",\n vm\n );\n }\n options.props = res;\n }\n\n /**\n * Normalize all injections into Object-based format\n */\n function normalizeInject (options, vm) {\n var inject = options.inject;\n if (!inject) { return }\n var normalized = options.inject = {};\n if (Array.isArray(inject)) {\n for (var i = 0; i < inject.length; i++) {\n normalized[inject[i]] = { from: inject[i] };\n }\n } else if (isPlainObject(inject)) {\n for (var key in inject) {\n var val = inject[key];\n normalized[key] = isPlainObject(val)\n ? extend({ from: key }, val)\n : { from: val };\n }\n } else {\n warn(\n \"Invalid value for option \\\"inject\\\": expected an Array or an Object, \" +\n \"but got \" + (toRawType(inject)) + \".\",\n vm\n );\n }\n }\n\n /**\n * Normalize raw function directives into object format.\n */\n function normalizeDirectives (options) {\n var dirs = options.directives;\n if (dirs) {\n for (var key in dirs) {\n var def$$1 = dirs[key];\n if (typeof def$$1 === 'function') {\n dirs[key] = { bind: def$$1, update: def$$1 };\n }\n }\n }\n }\n\n function assertObjectType (name, value, vm) {\n if (!isPlainObject(value)) {\n warn(\n \"Invalid value for option \\\"\" + name + \"\\\": expected an Object, \" +\n \"but got \" + (toRawType(value)) + \".\",\n vm\n );\n }\n }\n\n /**\n * Merge two option objects into a new one.\n * Core utility used in both instantiation and inheritance.\n */\n function mergeOptions (\n parent,\n child,\n vm\n ) {\n {\n checkComponents(child);\n }\n\n if (typeof child === 'function') {\n child = child.options;\n }\n\n normalizeProps(child, vm);\n normalizeInject(child, vm);\n normalizeDirectives(child);\n\n // Apply extends and mixins on the child options,\n // but only if it is a raw options object that isn't\n // the result of another mergeOptions call.\n // Only merged options has the _base property.\n if (!child._base) {\n if (child.extends) {\n parent = mergeOptions(parent, child.extends, vm);\n }\n if (child.mixins) {\n for (var i = 0, l = child.mixins.length; i < l; i++) {\n parent = mergeOptions(parent, child.mixins[i], vm);\n }\n }\n }\n\n var options = {};\n var key;\n for (key in parent) {\n mergeField(key);\n }\n for (key in child) {\n if (!hasOwn(parent, key)) {\n mergeField(key);\n }\n }\n function mergeField (key) {\n var strat = strats[key] || defaultStrat;\n options[key] = strat(parent[key], child[key], vm, key);\n }\n return options\n }\n\n /**\n * Resolve an asset.\n * This function is used because child instances need access\n * to assets defined in its ancestor chain.\n */\n function resolveAsset (\n options,\n type,\n id,\n warnMissing\n ) {\n /* istanbul ignore if */\n if (typeof id !== 'string') {\n return\n }\n var assets = options[type];\n // check local registration variations first\n if (hasOwn(assets, id)) { return assets[id] }\n var camelizedId = camelize(id);\n if (hasOwn(assets, camelizedId)) { return assets[camelizedId] }\n var PascalCaseId = capitalize(camelizedId);\n if (hasOwn(assets, PascalCaseId)) { return assets[PascalCaseId] }\n // fallback to prototype chain\n var res = assets[id] || assets[camelizedId] || assets[PascalCaseId];\n if (warnMissing && !res) {\n warn(\n 'Failed to resolve ' + type.slice(0, -1) + ': ' + id,\n options\n );\n }\n return res\n }\n\n /* */\n\n\n\n function validateProp (\n key,\n propOptions,\n propsData,\n vm\n ) {\n var prop = propOptions[key];\n var absent = !hasOwn(propsData, key);\n var value = propsData[key];\n // boolean casting\n var booleanIndex = getTypeIndex(Boolean, prop.type);\n if (booleanIndex > -1) {\n if (absent && !hasOwn(prop, 'default')) {\n value = false;\n } else if (value === '' || value === hyphenate(key)) {\n // only cast empty string / same name to boolean if\n // boolean has higher priority\n var stringIndex = getTypeIndex(String, prop.type);\n if (stringIndex < 0 || booleanIndex < stringIndex) {\n value = true;\n }\n }\n }\n // check default value\n if (value === undefined) {\n value = getPropDefaultValue(vm, prop, key);\n // since the default value is a fresh copy,\n // make sure to observe it.\n var prevShouldObserve = shouldObserve;\n toggleObserving(true);\n observe(value);\n toggleObserving(prevShouldObserve);\n }\n {\n assertProp(prop, key, value, vm, absent);\n }\n return value\n }\n\n /**\n * Get the default value of a prop.\n */\n function getPropDefaultValue (vm, prop, key) {\n // no default, return undefined\n if (!hasOwn(prop, 'default')) {\n return undefined\n }\n var def = prop.default;\n // warn against non-factory defaults for Object & Array\n if (isObject(def)) {\n warn(\n 'Invalid default value for prop \"' + key + '\": ' +\n 'Props with type Object/Array must use a factory function ' +\n 'to return the default value.',\n vm\n );\n }\n // the raw prop value was also undefined from previous render,\n // return previous default value to avoid unnecessary watcher trigger\n if (vm && vm.$options.propsData &&\n vm.$options.propsData[key] === undefined &&\n vm._props[key] !== undefined\n ) {\n return vm._props[key]\n }\n // call factory function for non-Function types\n // a value is Function if its prototype is function even across different execution context\n return typeof def === 'function' && getType(prop.type) !== 'Function'\n ? def.call(vm)\n : def\n }\n\n /**\n * Assert whether a prop is valid.\n */\n function assertProp (\n prop,\n name,\n value,\n vm,\n absent\n ) {\n if (prop.required && absent) {\n warn(\n 'Missing required prop: \"' + name + '\"',\n vm\n );\n return\n }\n if (value == null && !prop.required) {\n return\n }\n var type = prop.type;\n var valid = !type || type === true;\n var expectedTypes = [];\n if (type) {\n if (!Array.isArray(type)) {\n type = [type];\n }\n for (var i = 0; i < type.length && !valid; i++) {\n var assertedType = assertType(value, type[i]);\n expectedTypes.push(assertedType.expectedType || '');\n valid = assertedType.valid;\n }\n }\n\n if (!valid) {\n warn(\n getInvalidTypeMessage(name, value, expectedTypes),\n vm\n );\n return\n }\n var validator = prop.validator;\n if (validator) {\n if (!validator(value)) {\n warn(\n 'Invalid prop: custom validator check failed for prop \"' + name + '\".',\n vm\n );\n }\n }\n }\n\n var simpleCheckRE = /^(String|Number|Boolean|Function|Symbol)$/;\n\n function assertType (value, type) {\n var valid;\n var expectedType = getType(type);\n if (simpleCheckRE.test(expectedType)) {\n var t = typeof value;\n valid = t === expectedType.toLowerCase();\n // for primitive wrapper objects\n if (!valid && t === 'object') {\n valid = value instanceof type;\n }\n } else if (expectedType === 'Object') {\n valid = isPlainObject(value);\n } else if (expectedType === 'Array') {\n valid = Array.isArray(value);\n } else {\n valid = value instanceof type;\n }\n return {\n valid: valid,\n expectedType: expectedType\n }\n }\n\n /**\n * Use function string name to check built-in types,\n * because a simple equality check will fail when running\n * across different vms / iframes.\n */\n function getType (fn) {\n var match = fn && fn.toString().match(/^\\s*function (\\w+)/);\n return match ? match[1] : ''\n }\n\n function isSameType (a, b) {\n return getType(a) === getType(b)\n }\n\n function getTypeIndex (type, expectedTypes) {\n if (!Array.isArray(expectedTypes)) {\n return isSameType(expectedTypes, type) ? 0 : -1\n }\n for (var i = 0, len = expectedTypes.length; i < len; i++) {\n if (isSameType(expectedTypes[i], type)) {\n return i\n }\n }\n return -1\n }\n\n function getInvalidTypeMessage (name, value, expectedTypes) {\n var message = \"Invalid prop: type check failed for prop \\\"\" + name + \"\\\".\" +\n \" Expected \" + (expectedTypes.map(capitalize).join(', '));\n var expectedType = expectedTypes[0];\n var receivedType = toRawType(value);\n var expectedValue = styleValue(value, expectedType);\n var receivedValue = styleValue(value, receivedType);\n // check if we need to specify expected value\n if (expectedTypes.length === 1 &&\n isExplicable(expectedType) &&\n !isBoolean(expectedType, receivedType)) {\n message += \" with value \" + expectedValue;\n }\n message += \", got \" + receivedType + \" \";\n // check if we need to specify received value\n if (isExplicable(receivedType)) {\n message += \"with value \" + receivedValue + \".\";\n }\n return message\n }\n\n function styleValue (value, type) {\n if (type === 'String') {\n return (\"\\\"\" + value + \"\\\"\")\n } else if (type === 'Number') {\n return (\"\" + (Number(value)))\n } else {\n return (\"\" + value)\n }\n }\n\n function isExplicable (value) {\n var explicitTypes = ['string', 'number', 'boolean'];\n return explicitTypes.some(function (elem) { return value.toLowerCase() === elem; })\n }\n\n function isBoolean () {\n var args = [], len = arguments.length;\n while ( len-- ) args[ len ] = arguments[ len ];\n\n return args.some(function (elem) { return elem.toLowerCase() === 'boolean'; })\n }\n\n /* */\n\n function handleError (err, vm, info) {\n // Deactivate deps tracking while processing error handler to avoid possible infinite rendering.\n // See: https://github.com/vuejs/vuex/issues/1505\n pushTarget();\n try {\n if (vm) {\n var cur = vm;\n while ((cur = cur.$parent)) {\n var hooks = cur.$options.errorCaptured;\n if (hooks) {\n for (var i = 0; i < hooks.length; i++) {\n try {\n var capture = hooks[i].call(cur, err, vm, info) === false;\n if (capture) { return }\n } catch (e) {\n globalHandleError(e, cur, 'errorCaptured hook');\n }\n }\n }\n }\n }\n globalHandleError(err, vm, info);\n } finally {\n popTarget();\n }\n }\n\n function invokeWithErrorHandling (\n handler,\n context,\n args,\n vm,\n info\n ) {\n var res;\n try {\n res = args ? handler.apply(context, args) : handler.call(context);\n if (res && !res._isVue && isPromise(res)) {\n // issue #9511\n // reassign to res to avoid catch triggering multiple times when nested calls\n res = res.catch(function (e) { return handleError(e, vm, info + \" (Promise/async)\"); });\n }\n } catch (e) {\n handleError(e, vm, info);\n }\n return res\n }\n\n function globalHandleError (err, vm, info) {\n if (config.errorHandler) {\n try {\n return config.errorHandler.call(null, err, vm, info)\n } catch (e) {\n // if the user intentionally throws the original error in the handler,\n // do not log it twice\n if (e !== err) {\n logError(e, null, 'config.errorHandler');\n }\n }\n }\n logError(err, vm, info);\n }\n\n function logError (err, vm, info) {\n {\n warn((\"Error in \" + info + \": \\\"\" + (err.toString()) + \"\\\"\"), vm);\n }\n /* istanbul ignore else */\n if ((inBrowser || inWeex) && typeof console !== 'undefined') {\n console.error(err);\n } else {\n throw err\n }\n }\n\n /* */\n\n var isUsingMicroTask = false;\n\n var callbacks = [];\n var pending = false;\n\n function flushCallbacks () {\n pending = false;\n var copies = callbacks.slice(0);\n callbacks.length = 0;\n for (var i = 0; i < copies.length; i++) {\n copies[i]();\n }\n }\n\n // Here we have async deferring wrappers using microtasks.\n // In 2.5 we used (macro) tasks (in combination with microtasks).\n // However, it has subtle problems when state is changed right before repaint\n // (e.g. #6813, out-in transitions).\n // Also, using (macro) tasks in event handler would cause some weird behaviors\n // that cannot be circumvented (e.g. #7109, #7153, #7546, #7834, #8109).\n // So we now use microtasks everywhere, again.\n // A major drawback of this tradeoff is that there are some scenarios\n // where microtasks have too high a priority and fire in between supposedly\n // sequential events (e.g. #4521, #6690, which have workarounds)\n // or even between bubbling of the same event (#6566).\n var timerFunc;\n\n // The nextTick behavior leverages the microtask queue, which can be accessed\n // via either native Promise.then or MutationObserver.\n // MutationObserver has wider support, however it is seriously bugged in\n // UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It\n // completely stops working after triggering a few times... so, if native\n // Promise is available, we will use it:\n /* istanbul ignore next, $flow-disable-line */\n if (typeof Promise !== 'undefined' && isNative(Promise)) {\n var p = Promise.resolve();\n timerFunc = function () {\n p.then(flushCallbacks);\n // In problematic UIWebViews, Promise.then doesn't completely break, but\n // it can get stuck in a weird state where callbacks are pushed into the\n // microtask queue but the queue isn't being flushed, until the browser\n // needs to do some other work, e.g. handle a timer. Therefore we can\n // \"force\" the microtask queue to be flushed by adding an empty timer.\n if (isIOS) { setTimeout(noop); }\n };\n isUsingMicroTask = true;\n } else if (!isIE && typeof MutationObserver !== 'undefined' && (\n isNative(MutationObserver) ||\n // PhantomJS and iOS 7.x\n MutationObserver.toString() === '[object MutationObserverConstructor]'\n )) {\n // Use MutationObserver where native Promise is not available,\n // e.g. PhantomJS, iOS7, Android 4.4\n // (#6466 MutationObserver is unreliable in IE11)\n var counter = 1;\n var observer = new MutationObserver(flushCallbacks);\n var textNode = document.createTextNode(String(counter));\n observer.observe(textNode, {\n characterData: true\n });\n timerFunc = function () {\n counter = (counter + 1) % 2;\n textNode.data = String(counter);\n };\n isUsingMicroTask = true;\n } else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {\n // Fallback to setImmediate.\n // Techinically it leverages the (macro) task queue,\n // but it is still a better choice than setTimeout.\n timerFunc = function () {\n setImmediate(flushCallbacks);\n };\n } else {\n // Fallback to setTimeout.\n timerFunc = function () {\n setTimeout(flushCallbacks, 0);\n };\n }\n\n function nextTick (cb, ctx) {\n var _resolve;\n callbacks.push(function () {\n if (cb) {\n try {\n cb.call(ctx);\n } catch (e) {\n handleError(e, ctx, 'nextTick');\n }\n } else if (_resolve) {\n _resolve(ctx);\n }\n });\n if (!pending) {\n pending = true;\n timerFunc();\n }\n // $flow-disable-line\n if (!cb && typeof Promise !== 'undefined') {\n return new Promise(function (resolve) {\n _resolve = resolve;\n })\n }\n }\n\n /* */\n\n var mark;\n var measure;\n\n {\n var perf = inBrowser && window.performance;\n /* istanbul ignore if */\n if (\n perf &&\n perf.mark &&\n perf.measure &&\n perf.clearMarks &&\n perf.clearMeasures\n ) {\n mark = function (tag) { return perf.mark(tag); };\n measure = function (name, startTag, endTag) {\n perf.measure(name, startTag, endTag);\n perf.clearMarks(startTag);\n perf.clearMarks(endTag);\n // perf.clearMeasures(name)\n };\n }\n }\n\n /* not type checking this file because flow doesn't play well with Proxy */\n\n var initProxy;\n\n {\n var allowedGlobals = makeMap(\n 'Infinity,undefined,NaN,isFinite,isNaN,' +\n 'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +\n 'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +\n 'require' // for Webpack/Browserify\n );\n\n var warnNonPresent = function (target, key) {\n warn(\n \"Property or method \\\"\" + key + \"\\\" is not defined on the instance but \" +\n 'referenced during render. Make sure that this property is reactive, ' +\n 'either in the data option, or for class-based components, by ' +\n 'initializing the property. ' +\n 'See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.',\n target\n );\n };\n\n var warnReservedPrefix = function (target, key) {\n warn(\n \"Property \\\"\" + key + \"\\\" must be accessed with \\\"$data.\" + key + \"\\\" because \" +\n 'properties starting with \"$\" or \"_\" are not proxied in the Vue instance to ' +\n 'prevent conflicts with Vue internals' +\n 'See: https://vuejs.org/v2/api/#data',\n target\n );\n };\n\n var hasProxy =\n typeof Proxy !== 'undefined' && isNative(Proxy);\n\n if (hasProxy) {\n var isBuiltInModifier = makeMap('stop,prevent,self,ctrl,shift,alt,meta,exact');\n config.keyCodes = new Proxy(config.keyCodes, {\n set: function set (target, key, value) {\n if (isBuiltInModifier(key)) {\n warn((\"Avoid overwriting built-in modifier in config.keyCodes: .\" + key));\n return false\n } else {\n target[key] = value;\n return true\n }\n }\n });\n }\n\n var hasHandler = {\n has: function has (target, key) {\n var has = key in target;\n var isAllowed = allowedGlobals(key) ||\n (typeof key === 'string' && key.charAt(0) === '_' && !(key in target.$data));\n if (!has && !isAllowed) {\n if (key in target.$data) { warnReservedPrefix(target, key); }\n else { warnNonPresent(target, key); }\n }\n return has || !isAllowed\n }\n };\n\n var getHandler = {\n get: function get (target, key) {\n if (typeof key === 'string' && !(key in target)) {\n if (key in target.$data) { warnReservedPrefix(target, key); }\n else { warnNonPresent(target, key); }\n }\n return target[key]\n }\n };\n\n initProxy = function initProxy (vm) {\n if (hasProxy) {\n // determine which proxy handler to use\n var options = vm.$options;\n var handlers = options.render && options.render._withStripped\n ? getHandler\n : hasHandler;\n vm._renderProxy = new Proxy(vm, handlers);\n } else {\n vm._renderProxy = vm;\n }\n };\n }\n\n /* */\n\n var seenObjects = new _Set();\n\n /**\n * Recursively traverse an object to evoke all converted\n * getters, so that every nested property inside the object\n * is collected as a \"deep\" dependency.\n */\n function traverse (val) {\n _traverse(val, seenObjects);\n seenObjects.clear();\n }\n\n function _traverse (val, seen) {\n var i, keys;\n var isA = Array.isArray(val);\n if ((!isA && !isObject(val)) || Object.isFrozen(val) || val instanceof VNode) {\n return\n }\n if (val.__ob__) {\n var depId = val.__ob__.dep.id;\n if (seen.has(depId)) {\n return\n }\n seen.add(depId);\n }\n if (isA) {\n i = val.length;\n while (i--) { _traverse(val[i], seen); }\n } else {\n keys = Object.keys(val);\n i = keys.length;\n while (i--) { _traverse(val[keys[i]], seen); }\n }\n }\n\n /* */\n\n var normalizeEvent = cached(function (name) {\n var passive = name.charAt(0) === '&';\n name = passive ? name.slice(1) : name;\n var once$$1 = name.charAt(0) === '~'; // Prefixed last, checked first\n name = once$$1 ? name.slice(1) : name;\n var capture = name.charAt(0) === '!';\n name = capture ? name.slice(1) : name;\n return {\n name: name,\n once: once$$1,\n capture: capture,\n passive: passive\n }\n });\n\n function createFnInvoker (fns, vm) {\n function invoker () {\n var arguments$1 = arguments;\n\n var fns = invoker.fns;\n if (Array.isArray(fns)) {\n var cloned = fns.slice();\n for (var i = 0; i < cloned.length; i++) {\n invokeWithErrorHandling(cloned[i], null, arguments$1, vm, \"v-on handler\");\n }\n } else {\n // return handler return value for single handlers\n return invokeWithErrorHandling(fns, null, arguments, vm, \"v-on handler\")\n }\n }\n invoker.fns = fns;\n return invoker\n }\n\n function updateListeners (\n on,\n oldOn,\n add,\n remove$$1,\n createOnceHandler,\n vm\n ) {\n var name, def$$1, cur, old, event;\n for (name in on) {\n def$$1 = cur = on[name];\n old = oldOn[name];\n event = normalizeEvent(name);\n if (isUndef(cur)) {\n warn(\n \"Invalid handler for event \\\"\" + (event.name) + \"\\\": got \" + String(cur),\n vm\n );\n } else if (isUndef(old)) {\n if (isUndef(cur.fns)) {\n cur = on[name] = createFnInvoker(cur, vm);\n }\n if (isTrue(event.once)) {\n cur = on[name] = createOnceHandler(event.name, cur, event.capture);\n }\n add(event.name, cur, event.capture, event.passive, event.params);\n } else if (cur !== old) {\n old.fns = cur;\n on[name] = old;\n }\n }\n for (name in oldOn) {\n if (isUndef(on[name])) {\n event = normalizeEvent(name);\n remove$$1(event.name, oldOn[name], event.capture);\n }\n }\n }\n\n /* */\n\n function mergeVNodeHook (def, hookKey, hook) {\n if (def instanceof VNode) {\n def = def.data.hook || (def.data.hook = {});\n }\n var invoker;\n var oldHook = def[hookKey];\n\n function wrappedHook () {\n hook.apply(this, arguments);\n // important: remove merged hook to ensure it's called only once\n // and prevent memory leak\n remove(invoker.fns, wrappedHook);\n }\n\n if (isUndef(oldHook)) {\n // no existing hook\n invoker = createFnInvoker([wrappedHook]);\n } else {\n /* istanbul ignore if */\n if (isDef(oldHook.fns) && isTrue(oldHook.merged)) {\n // already a merged invoker\n invoker = oldHook;\n invoker.fns.push(wrappedHook);\n } else {\n // existing plain hook\n invoker = createFnInvoker([oldHook, wrappedHook]);\n }\n }\n\n invoker.merged = true;\n def[hookKey] = invoker;\n }\n\n /* */\n\n function extractPropsFromVNodeData (\n data,\n Ctor,\n tag\n ) {\n // we are only extracting raw values here.\n // validation and default values are handled in the child\n // component itself.\n var propOptions = Ctor.options.props;\n if (isUndef(propOptions)) {\n return\n }\n var res = {};\n var attrs = data.attrs;\n var props = data.props;\n if (isDef(attrs) || isDef(props)) {\n for (var key in propOptions) {\n var altKey = hyphenate(key);\n {\n var keyInLowerCase = key.toLowerCase();\n if (\n key !== keyInLowerCase &&\n attrs && hasOwn(attrs, keyInLowerCase)\n ) {\n tip(\n \"Prop \\\"\" + keyInLowerCase + \"\\\" is passed to component \" +\n (formatComponentName(tag || Ctor)) + \", but the declared prop name is\" +\n \" \\\"\" + key + \"\\\". \" +\n \"Note that HTML attributes are case-insensitive and camelCased \" +\n \"props need to use their kebab-case equivalents when using in-DOM \" +\n \"templates. You should probably use \\\"\" + altKey + \"\\\" instead of \\\"\" + key + \"\\\".\"\n );\n }\n }\n checkProp(res, props, key, altKey, true) ||\n checkProp(res, attrs, key, altKey, false);\n }\n }\n return res\n }\n\n function checkProp (\n res,\n hash,\n key,\n altKey,\n preserve\n ) {\n if (isDef(hash)) {\n if (hasOwn(hash, key)) {\n res[key] = hash[key];\n if (!preserve) {\n delete hash[key];\n }\n return true\n } else if (hasOwn(hash, altKey)) {\n res[key] = hash[altKey];\n if (!preserve) {\n delete hash[altKey];\n }\n return true\n }\n }\n return false\n }\n\n /* */\n\n // The template compiler attempts to minimize the need for normalization by\n // statically analyzing the template at compile time.\n //\n // For plain HTML markup, normalization can be completely skipped because the\n // generated render function is guaranteed to return Array. There are\n // two cases where extra normalization is needed:\n\n // 1. When the children contains components - because a functional component\n // may return an Array instead of a single root. In this case, just a simple\n // normalization is needed - if any child is an Array, we flatten the whole\n // thing with Array.prototype.concat. It is guaranteed to be only 1-level deep\n // because functional components already normalize their own children.\n function simpleNormalizeChildren (children) {\n for (var i = 0; i < children.length; i++) {\n if (Array.isArray(children[i])) {\n return Array.prototype.concat.apply([], children)\n }\n }\n return children\n }\n\n // 2. When the children contains constructs that always generated nested Arrays,\n // e.g.