├── .commitlintrc.cjs
├── .eslintignore
├── .eslintrc.cjs
├── .github
    ├── FUNDING.yml
    └── workflows
    │   ├── ci.yml
    │   ├── publish.yml
    │   └── release.yml
├── .gitignore
├── .husky
    ├── .gitignore
    ├── .lintstagedrc
    ├── commit-msg
    ├── common.sh
    └── pre-commit
├── .markdownlint.json
├── .prettierignore
├── .prettierrc.cjs
├── .stylelintignore
├── .stylelintrc.cjs
├── .vscode
    ├── extensions.json
    └── settings.json
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── dev-server
    ├── app.vue
    ├── global.d.ts
    ├── index.html
    ├── main.ts
    ├── package.json
    ├── router.ts
    ├── tsconfig.json
    └── vite.config.ts
├── docs
    ├── .vitepress
    │   ├── config.ts
    │   └── theme
    │   │   ├── index.ts
    │   │   └── style.css
    ├── demos
    │   ├── basic.vue
    │   ├── bounded.vue
    │   ├── drag-from-outside.vue
    │   ├── drag-resize-handler.vue
    │   ├── dynamic-add-remove.vue
    │   ├── events.vue
    │   ├── mirrored.vue
    │   ├── multiple-grids.vue
    │   ├── prevent-collision.vue
    │   ├── responsive-layouts.vue
    │   ├── responsive.vue
    │   ├── styling-grid-lines.vue
    │   └── styling-placeholder.vue
    ├── example
    │   ├── basic.md
    │   ├── bounded.md
    │   ├── drag-from-outside.md
    │   ├── drag-resize-handler.md
    │   ├── dynamic-add-remove.md
    │   ├── events.md
    │   ├── mirrored.md
    │   ├── multiple-grids.md
    │   ├── prevent-collision.md
    │   ├── responsive-layouts.md
    │   ├── responsive.md
    │   ├── styling-grid-lines.md
    │   └── styling-placeholder.md
    ├── guide
    │   ├── custom-style.md
    │   ├── events.md
    │   ├── installation.md
    │   ├── properties.md
    │   └── usage.md
    ├── index.md
    ├── package.json
    ├── public
    │   └── grid-layout-plus.svg
    ├── tsconfig.json
    └── zh
    │   ├── example
    │       ├── basic.md
    │       ├── bounded.md
    │       ├── drag-from-outside.md
    │       ├── drag-resize-handler.md
    │       ├── dynamic-add-remove.md
    │       ├── events.md
    │       ├── mirrored.md
    │       ├── multiple-grids.md
    │       ├── prevent-collision.md
    │       ├── responsive-layouts.md
    │       ├── responsive.md
    │       ├── styling-grid-lines.md
    │       └── styling-placeholder.md
    │   ├── guide
    │       ├── custom-style.md
    │       ├── events.md
    │       ├── installation.md
    │       ├── properties.md
    │       └── usage.md
    │   └── index.md
├── netlify.toml
├── package.json
├── patches
    └── conventional-changelog-angular@7.0.0.patch
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── scripts
    ├── build.ts
    ├── publish.ts
    ├── release.ts
    ├── test-setup.ts
    ├── tsconfig.json
    └── utils.ts
├── src
    ├── components
    │   ├── grid-item.vue
    │   ├── grid-layout.vue
    │   └── types.ts
    ├── global.d.ts
    ├── helpers
    │   ├── common.ts
    │   ├── dom.ts
    │   ├── draggable.ts
    │   ├── responsive.ts
    │   └── types.ts
    ├── index.ts
    └── style.scss
├── tests
    ├── grid-item.spec.tsx
    └── helpers.spec.tsx
├── tsconfig.json
├── vite.config.ts
├── vite.full.config.ts
└── vitest.config.ts


/.commitlintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   extends: ['@vexip-ui/commitlint-config']
3 | }
4 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
 1 | dist
 2 | es
 3 | lib
 4 | node_modules
 5 | public
 6 | cache
 7 | .husky
 8 | 
 9 | .*rc.js
10 | .*rc.cjs
11 | *.config.js
12 | *.css
13 | *.pcss
14 | *.scss
15 | *.svg


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('eslint-define-config')
 2 | 
 3 | module.exports = defineConfig({
 4 |   extends: ['@vexip-ui/eslint-config'],
 5 |   root: true,
 6 |   rules: {
 7 |     '@typescript-eslint/no-use-before-define': 'off',
 8 |     'vue/no-v-html': 'off',
 9 |     'vue/no-textarea-mustache': 'off',
10 |     '@typescript-eslint/comma-dangle': ['error', 'always-multiline'],
11 |   },
12 |   overrides: [
13 |     {
14 |       files: ['src/**/*.vue'],
15 |       rules: {
16 |         '@typescript-eslint/no-unused-vars': 'error',
17 |         '@typescript-eslint/consistent-type-imports': [
18 |           'error',
19 |           {
20 |             prefer: 'type-imports',
21 |             disallowTypeAnnotations: false
22 |           }
23 |         ],
24 |         'vue/no-restricted-block': [
25 |           'error',
26 |           {
27 |             element: '/[^(template|script)]/',
28 |             message: 'Do not use blocks other than <template> or <script>.'
29 |           }
30 |         ]
31 |       }
32 |     },
33 |     {
34 |       files: ['scripts/**'],
35 |       rules: {
36 |         'no-sequences': 'off',
37 |         '@typescript-eslint/no-var-requires': 'off'
38 |       }
39 |     }
40 |   ]
41 | })
42 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 | 
3 | custom: https://vexipui.com/wechat-sponsor.png
4 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 | 
 8 |   pull_request:
 9 |     branches:
10 |       - main
11 | 
12 | jobs:
13 |   lint:
14 |     runs-on: windows-latest
15 |     steps:
16 |       - uses: actions/checkout@v3
17 |         with:
18 |           fetch-depth: 0
19 | 
20 |       - name: Install pnpm
21 |         uses: pnpm/action-setup@v2
22 | 
23 |       - name: Set node
24 |         uses: actions/setup-node@v3
25 |         with:
26 |           node-version: 18.x
27 |           cache: pnpm
28 | 
29 |       - name: Install deps
30 |         run: pnpm install
31 | 
32 |       - name: Lint
33 |         run: pnpm run lint
34 | 
35 |       - name: Lint style
36 |         run: pnpm run lint:style
37 | 
38 |   test:
39 |     runs-on: ${{ matrix.os }}
40 | 
41 |     strategy:
42 |       matrix:
43 |         node: [18.x]
44 |         os: [ubuntu-latest, windows-latest, macos-latest]
45 |       fail-fast: false
46 | 
47 |     steps:
48 |       - uses: actions/checkout@v3
49 |         with:
50 |           fetch-depth: 0
51 | 
52 |       - name: Install pnpm
53 |         uses: pnpm/action-setup@v2
54 | 
55 |       - name: Set node ${{ matrix.node }}
56 |         uses: actions/setup-node@v3
57 |         with:
58 |           node-version: ${{ matrix.node }}
59 |           cache: pnpm
60 | 
61 |       - name: Install deps
62 |         run: pnpm install
63 | 
64 |       - name: Test
65 |         run: pnpm run test
66 | 


--------------------------------------------------------------------------------
/.github/workflows/publish.yml:
--------------------------------------------------------------------------------
 1 | name: Publish Package
 2 | 
 3 | on:
 4 |   push:
 5 |     tags:
 6 |       - v*
 7 | 
 8 | jobs:
 9 |   publish:
10 |     # prevents this action from running on forks
11 |     if: github.repository == 'qmhc/grid-layout-plus'
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |       - uses: actions/checkout@v3
15 |         with:
16 |           fetch-depth: 0
17 | 
18 |       - name: Install pnpm
19 |         uses: pnpm/action-setup@v2
20 | 
21 |       - name: Set node
22 |         uses: actions/setup-node@v3
23 |         with:
24 |           node-version: 18.x
25 |           registry-url: https://registry.npmjs.org/
26 |           cache: pnpm
27 | 
28 |       - name: Install deps
29 |         run: pnpm install
30 | 
31 |       - name: Build
32 |         run: pnpm run build
33 | 
34 |       - name: Publish package
35 |         run: pnpm run publish:ci ${{ github.ref_name }}
36 |         env:
37 |           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
38 |           NODE_OPTIONS: --max-old-space-size=4096
39 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Create Release
 2 | 
 3 | on:
 4 |   push:
 5 |     tags:
 6 |       - v*
 7 | 
 8 | jobs:
 9 |   release:
10 |     # prevents this action from running on forks
11 |     if: github.repository == 'qmhc/grid-layout-plus'
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |       - uses: actions/checkout@v3
15 |         with:
16 |           fetch-depth: 0
17 | 
18 |       - name: Set node
19 |         uses: actions/setup-node@v3
20 |         with:
21 |           node-version: 18.x
22 | 
23 |       - run: npx changelogithub
24 |         env:
25 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
26 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | dist
 4 | temp
 5 | .temp
 6 | .dev
 7 | .yarn
 8 | coverage
 9 | /es
10 | /lib
11 | cache
12 | 
13 | yarn.lock
14 | package-lock.json
15 | 
16 | # local env files
17 | .env.local
18 | .env.*.local
19 | 
20 | # Log files
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | pnpm-debug.log*
25 | 
26 | # Editor directories and files
27 | .idea
28 | *.suo
29 | *.ntvs*
30 | *.njsproj
31 | *.sln
32 | *.sw?
33 | 
34 | .vscode/*
35 | !.vscode/extensions.json
36 | !.vscode/settings.json
37 | 
38 | .eslintcache
39 | .stylelintcache
40 | 


--------------------------------------------------------------------------------
/.husky/.gitignore:
--------------------------------------------------------------------------------
1 | _
2 | 


--------------------------------------------------------------------------------
/.husky/.lintstagedrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "*.{js,jsx,ts,tsx}": [
 3 |     "prettier --write",
 4 |     "eslint --fix"
 5 |   ],
 6 |   "{!(package)*.json,*.code-snippets,.!(browserslist|npm)*rc}": [
 7 |     "prettier --write--parser json"
 8 |   ],
 9 |   "package.json": [
10 |     "prettier --write"
11 |   ],
12 |   "*.{css,scss,pcss,html}": [
13 |     "prettier --write",
14 |     "stylelint --fix"
15 |   ],
16 |   "*.md": [
17 |     "prettier --write"
18 |   ],
19 |   "*.vue": [
20 |     "prettier --write",
21 |     "eslint --fix",
22 |     "stylelint --fix"
23 |   ]
24 | }
25 | 


--------------------------------------------------------------------------------
/.husky/commit-msg:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/common.sh"
3 | 
4 | npx --no-install commitlint --edit "$1"
5 | 


--------------------------------------------------------------------------------
/.husky/common.sh:
--------------------------------------------------------------------------------
1 | command_exists () {
2 |   command -v "$1" >/dev/null 2>&1
3 | }
4 | 
5 | # Workaround for Windows 10, Git Bash and Yarn
6 | if command_exists winpty && test -t 1; then
7 |   exec < /dev/tty
8 | fi
9 | 


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/common.sh"
3 | 
4 | [ -n "$CI" ] && exit 0
5 | 
6 | pnpm run precommit
7 | 


--------------------------------------------------------------------------------
/.markdownlint.json:
--------------------------------------------------------------------------------
1 | {
2 |   "MD013": false,
3 |   "MD024": false,
4 |   "MD033": false,
5 |   "MD041": false
6 | }
7 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | dist
 2 | es
 3 | lib
 4 | node_modules
 5 | public
 6 | .husky
 7 | 
 8 | *.svg
 9 | *.sh
10 | 


--------------------------------------------------------------------------------
/.prettierrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = require('@vexip-ui/prettier-config')
2 | 


--------------------------------------------------------------------------------
/.stylelintignore:
--------------------------------------------------------------------------------
 1 | dist
 2 | es
 3 | lib
 4 | public
 5 | node_modules
 6 | cache
 7 | .husky
 8 | 
 9 | *.js
10 | *.cjs
11 | *.mjs
12 | *.ts
13 | *.tsx
14 | *.svg
15 | *.gif
16 | *.md
17 | 


--------------------------------------------------------------------------------
/.stylelintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   extends: ['@vexip-ui/stylelint-config'],
3 |   plugins: ['stylelint-prettier']
4 | }
5 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "recommendations": [
 3 |     "Vue.volar",
 4 |     "dbaeumer.vscode-eslint",
 5 |     "stylelint.vscode-stylelint",
 6 |     "esbenp.prettier-vscode",
 7 |     "DavidAnson.vscode-markdownlint"
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "typescript.tsdk": "./node_modules/typescript/lib",
 3 |   "npm.packageManager": "pnpm",
 4 |   "stylelint.enable": true,
 5 |   "stylelint.validate": [
 6 |     "css",
 7 |     "html",
 8 |     "javascript",
 9 |     "javascriptreact",
10 |     "less",
11 |     "markdown",
12 |     "postcss",
13 |     "sass",
14 |     "scss",
15 |     "source.css.styled",
16 |     "source.markdown.math",
17 |     "styled-css",
18 |     "sugarss",
19 |     "svelte",
20 |     "typescript",
21 |     "typescriptreact",
22 |     "vue",
23 |     "vue-html",
24 |     "vue-postcss",
25 |     "xml",
26 |     "xsl"
27 |   ],
28 |   "volar.inlayHints.eventArgumentInInlineHandlers": false,
29 |   "[vue]": {
30 |     "editor.defaultFormatter": "Vue.volar"
31 |   },
32 |   "[markdown]": {
33 |     "editor.wordWrap": "off"
34 |   },
35 |   "vue.features.codeActions.enable": false
36 | }
37 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # [1.1.0](https://github.com/qmhc/grid-layout-plus/compare/v1.0.6...v1.1.0) (2025-05-07)
 2 | 
 3 | ### 🐞 Bug Fixes
 4 | 
 5 | - correct compact layout with responsive ([8c50abc](https://github.com/qmhc/grid-layout-plus/commit/8c50abc5241df3735a5ed44dabdc2db6b2b5e670)), closes [#18](https://github.com/qmhc/grid-layout-plus/issues/18) [#39](https://github.com/qmhc/grid-layout-plus/issues/39)
 6 | - RTL resizing issue when widget reaches minimum width ([#41](https://github.com/qmhc/grid-layout-plus/issues/41)) ([1b49972](https://github.com/qmhc/grid-layout-plus/commit/1b49972abe8bf13a501185ab3c95b4a097337c51))
 7 | - when window resize trigger resizeEventHandler, placeholder shouldn't hide ([#49](https://github.com/qmhc/grid-layout-plus/issues/49)) ([8ce57d0](https://github.com/qmhc/grid-layout-plus/commit/8ce57d0c79cbf5948fd2e85cd2f215d128d2133a))
 8 | 
 9 | ### 🔨 Code Refactoring
10 | 
11 | - use typescript type props ([1e21ff4](https://github.com/qmhc/grid-layout-plus/commit/1e21ff4c280f43d93ae9d799254090a1d68b9c4e))
12 | 
13 | ## [1.0.6](https://github.com/qmhc/grid-layout-plus/compare/v1.0.5...v1.0.6) (2024-11-28)
14 | 
15 | ### 🐞 Bug Fixes
16 | 
17 | - resizing along the edge should affect only one axis ([#37](https://github.com/qmhc/grid-layout-plus/issues/37)) ([e0b91d5](https://github.com/qmhc/grid-layout-plus/commit/e0b91d545a80516c03d193b6bdbe96d76f76b55c))
18 | - safely read navigator ([#35](https://github.com/qmhc/grid-layout-plus/issues/35)) ([2f10dc8](https://github.com/qmhc/grid-layout-plus/commit/2f10dc8978725ef9fdcda9edbc2d7a63e3e5ac53))
19 | 
20 | ## [1.0.5](https://github.com/qmhc/grid-layout-plus/compare/v1.0.4...v1.0.5) (2024-04-22)
21 | 
22 | ### 🐞 Bug Fixes
23 | 
24 | - correctly emit layout-ready event ([#20](https://github.com/qmhc/grid-layout-plus/issues/20)) ([703b3be](https://github.com/qmhc/grid-layout-plus/commit/703b3beeeb50bc29e5f2ddcf805be201b66396af))
25 | 
26 | ## [1.0.4](https://github.com/qmhc/grid-layout-plus/compare/v1.0.3...v1.0.4) (2024-01-24)
27 | 
28 | ### 🐞 Bug Fixes
29 | 
30 | - correctly toggle resize when margin changed ([b690562](https://github.com/qmhc/grid-layout-plus/commit/b690562f3671364e4bb33f436f0d834416239acb)), closes [#10](https://github.com/qmhc/grid-layout-plus/issues/10)
31 | 
32 | ## [1.0.3](https://github.com/qmhc/grid-layout-plus/compare/v1.0.2...v1.0.3) (2023-08-23)
33 | 
34 | ## [1.0.2](https://github.com/qmhc/grid-layout-plus/compare/v1.0.1...v1.0.2) (2023-05-03)
35 | 
36 | ### 🐞 Bug Fixes
37 | 
38 | - current reactive dragging state for custom ([aa1c4ee](https://github.com/qmhc/grid-layout-plus/commit/aa1c4ee28fe48f95ec50af2c99f6af1397a280f4)), closes [#2](https://github.com/qmhc/grid-layout-plus/issues/2)
39 | - ensure correct event sequence ([5d779d3](https://github.com/qmhc/grid-layout-plus/commit/5d779d313033cbbfda91fce6fcd46097e09d4000)), closes [#1](https://github.com/qmhc/grid-layout-plus/issues/1)
40 | 
41 | ## [1.0.1](https://github.com/qmhc/grid-layout-plus/compare/v1.0.0-beta.3...v1.0.1) (2023-04-26)
42 | 
43 | # [1.0.0-beta.3](https://github.com/qmhc/grid-layout-plus/compare/v1.0.0-beta.2...v1.0.0-beta.3) (2023-04-23)
44 | 
45 | ### ⚡ Performance Improvements
46 | 
47 | - throttle drag and resize move events ([56915f4](https://github.com/qmhc/grid-layout-plus/commit/56915f469a671f1a5e0b9b3077601c54b87c4839))
48 | 
49 | ### 🔨 Code Refactoring
50 | 
51 | - redesign class names of element ([c0ef03c](https://github.com/qmhc/grid-layout-plus/commit/c0ef03c18f801dc4dc3632c53683258bddf09aee))
52 | 
53 | # [1.0.0-beta.2](https://github.com/qmhc/grid-layout-plus/compare/v1.0.0-beta.1...v1.0.0-beta.2) (2023-04-21)
54 | 
55 | ### ⚡ Performance Improvements
56 | 
57 | - merge repeated watch callbacks ([4b924a1](https://github.com/qmhc/grid-layout-plus/commit/4b924a13364920ff5944b584c3485aadcf99d4e9))
58 | 
59 | # [1.0.0-beta.1](https://github.com/qmhc/grid-layout-plus/compare/v1.0.0-beta.0...v1.0.0-beta.1) (2023-04-21)
60 | 
61 | ### 🐞 Bug Fixes
62 | 
63 | - on demand import interactjs packages ([e270621](https://github.com/qmhc/grid-layout-plus/commit/e270621996f806eaa023995f9328a004af2bbcb9))
64 | 
65 | ### 💔 Reverts
66 | 
67 | - fix: on demand import interactjs packages ([b87cb8b](https://github.com/qmhc/grid-layout-plus/commit/b87cb8bea7d165179123383344297536980bcc11))
68 | 
69 | # 1.0.0-beta.0 (2023-04-09)
70 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2023-present qmhc
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <a href="https://grid-layout-plus.netlify.app/" target="_blank" rel="noopener noreferrer">
 3 |     <img src="./docs/public/grid-layout-plus.svg" width="180" style="width: 120px;" />
 4 |   </a>
 5 | </p>
 6 | 
 7 | <h1 align="center">Grid Layout Plus</h1>
 8 | 
 9 | <p align="center">
10 |   <a href="https://www.npmjs.com/package/grid-layout-plus" target="_blank">
11 |     <img src="https://img.shields.io/github/package-json/v/qmhc/grid-layout-plus" alt="npm version"/>
12 |   </a>
13 | </p>
14 | 
15 | ## What is Grid Layout Plus?
16 | 
17 | Grid Layout Plus comes from [Vue Grid Layout](https://github.com/jbaysolutions/vue-grid-layout) and is migrated to Vue 3.
18 | 
19 | > It is constructed with `<script setup>` and normalized TypeScript.
20 | 
21 | <details>
22 |   <summary>About Vue Grid Layout</summary>
23 |   
24 | ## What is Vue Grid Layout?
25 | 
26 | Vue Grid Layout is a grid layout system for Vue 2, like [Gridster](http://dsmorse.github.io/gridster.js/).
27 | 
28 | **Heavily inspired by [React Grid Layout](https://github.com/STRML/react-grid-layout).**
29 | 
30 | </details>
31 | 
32 | ## Features
33 | 
34 | - Draggable widgets
35 | - Resizable widgets
36 | - Static widgets
37 | - Bounds checking for dragging and resizing
38 | - Widgets may be added or removed without rebuilding grid
39 | - Layout can be serialized and restored
40 | - Automatic RTL support
41 | - Responsive
42 | 
43 | ## Documentation
44 | 
45 | Check out the online documentation [here](https://grid-layout-plus.netlify.app/).
46 | 
47 | ## License
48 | 
49 | All in [MIT](./LICENSE.md) license.
50 | 


--------------------------------------------------------------------------------
/dev-server/app.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { ref } from 'vue'
  3 | import { useRouter } from 'vue-router'
  4 | 
  5 | import 'vexip-ui/css/preset.css'
  6 | 
  7 | const router = useRouter()
  8 | const panelShow = ref(false)
  9 | </script>
 10 | 
 11 | <template>
 12 |   <RouterView v-slot="{ Component }">
 13 |     <component :is="Component"></component>
 14 |   </RouterView>
 15 |   <button
 16 |     :class="['dev-setting', panelShow && 'dev-setting--active']"
 17 |     type="button"
 18 |     tabindex="-1"
 19 |     @click="panelShow = !panelShow"
 20 |   >
 21 |     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
 22 |       <path
 23 |         d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"
 24 |       />
 25 |     </svg>
 26 |   </button>
 27 |   <Transition name="vxp-fade">
 28 |     <div v-show="panelShow" class="dev-panel">
 29 |       <div class="dev-panel__container">
 30 |         <div class="dev-links">
 31 |           <template v-for="route in router.options.routes">
 32 |             <RouterLink
 33 |               v-if="route.name"
 34 |               :key="route.path"
 35 |               class="router-link"
 36 |               :to="route.path"
 37 |               @click="panelShow = false"
 38 |             >
 39 |               {{ route.name }}
 40 |             </RouterLink>
 41 |           </template>
 42 |         </div>
 43 |       </div>
 44 |     </div>
 45 |   </Transition>
 46 | </template>
 47 | 
 48 | <style lang="scss">
 49 | *,
 50 | *::before,
 51 | *::after {
 52 |   box-sizing: border-box;
 53 | }
 54 | 
 55 | html {
 56 |   --bg-color: #fff;
 57 | 
 58 |   height: 100%;
 59 | 
 60 |   &.dark {
 61 |     --bg-color: #131719;
 62 |   }
 63 | 
 64 |   &.rtl {
 65 |     direction: rtl;
 66 |   }
 67 | }
 68 | 
 69 | body {
 70 |   height: 100%;
 71 |   margin: 0;
 72 |   overflow: hidden;
 73 |   font-family: var(--vxp-font-family-base);
 74 |   font-size: var(--vxp-font-size-base);
 75 |   font-variant-numeric: tabular-nums;
 76 |   line-height: var(--vxp-line-height-base);
 77 |   color: var(--vxp-content-color-base);
 78 |   background-color: var(--bg-color);
 79 |   transition: var(--vxp-transition-background);
 80 | }
 81 | 
 82 | #app {
 83 |   height: 100%;
 84 |   overflow: auto;
 85 | }
 86 | 
 87 | .padding #app {
 88 |   padding: 20px;
 89 | }
 90 | 
 91 | .dev-setting {
 92 |   position: absolute;
 93 |   inset-inline-end: 20px;
 94 |   bottom: 20px;
 95 |   z-index: 9999;
 96 |   display: flex;
 97 |   align-items: center;
 98 |   justify-content: center;
 99 |   width: 40px;
100 |   height: 40px;
101 |   padding: 0;
102 |   color: var(--vxp-content-color-base);
103 |   cursor: pointer;
104 |   background-color: var(--vxp-fill-color-background);
105 |   border: 0;
106 |   border-radius: 50%;
107 |   outline: 0;
108 |   box-shadow: var(--vxp-shadow-base);
109 |   transition: var(--vxp-transition-color);
110 | 
111 |   &--active {
112 |     color: var(--vxp-color-primary-base);
113 |   }
114 | 
115 |   svg {
116 |     width: 1.3em;
117 |     height: 1.3em;
118 |     line-height: 1;
119 |     vertical-align: -0.125em;
120 |     fill: currentcolor;
121 |   }
122 | }
123 | 
124 | .dev-panel {
125 |   position: absolute;
126 |   inset-inline-end: 20px;
127 |   bottom: 70px;
128 |   z-index: 9999;
129 |   padding: 4px 0;
130 |   overflow: hidden;
131 |   background-color: var(--vxp-fill-color-background);
132 |   border-radius: var(--vxp-radius-base);
133 | 
134 |   &__container {
135 |     display: flex;
136 |     flex-direction: column;
137 |     width: 100%;
138 |     max-height: calc(100vh - 128px);
139 |     padding: 20px;
140 |     overflow: hidden auto;
141 |     scrollbar-width: thin;
142 |     scrollbar-color: var(--vxp-color-primary-opacity-8) transparent;
143 | 
144 |     &::-webkit-scrollbar {
145 |       width: 8px;
146 |     }
147 | 
148 |     &::-webkit-scrollbar-thumb {
149 |       background-color: var(--vxp-color-primary-opacity-8);
150 |       border-radius: 4px;
151 |     }
152 |   }
153 | }
154 | 
155 | .dev-links {
156 |   display: flex;
157 |   flex-direction: column;
158 |   gap: 10px;
159 |   width: 180px;
160 | 
161 |   .router-link {
162 |     padding: 7px 10px 8px;
163 |     line-height: 1;
164 |     color: var(--vxp-color-primary-base);
165 |     text-decoration: none;
166 |     background-color: var(--vxp-bg-color-base);
167 |     border: 1px solid var(--vxp-color-primary-opacity-6);
168 |     border-radius: var(--vxp-radius-base);
169 |     transition: var(--vxp-transition-background);
170 | 
171 |     &:hover {
172 |       background-color: var(--vxp-color-primary-opacity-9);
173 |     }
174 | 
175 |     &-active,
176 |     &-active:hover {
177 |       background-color: var(--vxp-color-primary-opacity-8);
178 |     }
179 |   }
180 | }
181 | </style>
182 | 


--------------------------------------------------------------------------------
/dev-server/global.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import type { DefineComponent } from 'vue'
3 |   const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, any>
4 |   export default component
5 | }
6 | 


--------------------------------------------------------------------------------
/dev-server/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <link rel="icon" type="image/svg+xml" href="/grid-layout-plus.svg" />
 8 |     <title>dev | Grid Layout Plus</title>
 9 |   </head>
10 |   <body>
11 |     <div id="app"></div>
12 |     <script type="module" src="./main.ts"></script>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/dev-server/main.ts:
--------------------------------------------------------------------------------
 1 | import '../src/style.scss'
 2 | 
 3 | import { createApp } from 'vue'
 4 | 
 5 | import { GridItem, GridLayout } from '../src'
 6 | import App from './app.vue'
 7 | import { router } from './router'
 8 | 
 9 | createApp(App)
10 |   .component('GridLayout', GridLayout)
11 |   .component('GridItem', GridItem)
12 |   .use(router)
13 |   .mount('#app')
14 | 


--------------------------------------------------------------------------------
/dev-server/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "grid-layout-plus-dev-server",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "serve": "vite"
 6 |   },
 7 |   "dependencies": {
 8 |     "vexip-ui": "^2.3.1",
 9 |     "vue-router": "^4.1.5"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/dev-server/router.ts:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHashHistory } from 'vue-router'
 2 | 
 3 | document.title = 'dev | Grid Layout Plus'
 4 | 
 5 | const demos = import.meta.glob('../docs/demos/*.vue')
 6 | 
 7 | export const router = createRouter({
 8 |   history: createWebHashHistory('/'),
 9 |   routes: [
10 |     ...Object.keys(demos).map(path => {
11 |       const name = path.split('/').at(-1)!.replace(/.vue$/, '')
12 | 
13 |       return {
14 |         path: name === 'basic' ? '/' : `/${name}`,
15 |         name,
16 |         component: demos[path],
17 |       }
18 |     }),
19 |     {
20 |       path: '/:catchAll(.*)',
21 |       redirect: '/',
22 |     },
23 |   ],
24 | })
25 | 
26 | router.afterEach(to => {
27 |   document.title = `select - ${typeof to.name === 'string' ? to.name : 'dev'} | Grid Layout Plus`
28 | })
29 | 


--------------------------------------------------------------------------------
/dev-server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../tsconfig.json",
3 |   "include": ["*.vue", "*.ts", "global.d.ts"]
4 | }
5 | 


--------------------------------------------------------------------------------
/dev-server/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | import autoprefixer from 'autoprefixer'
 4 | 
 5 | export default defineConfig(async () => {
 6 |   return {
 7 |     css: {
 8 |       postcss: {
 9 |         plugins: [autoprefixer],
10 |       },
11 |     },
12 |     server: {
13 |       port: 7888,
14 |       fs: {
15 |         allow: ['..'],
16 |       },
17 |     },
18 |     plugins: [vue()],
19 |   }
20 | })
21 | 


--------------------------------------------------------------------------------
/docs/.vitepress/config.ts:
--------------------------------------------------------------------------------
  1 | import { resolve } from 'node:path'
  2 | 
  3 | import { defineConfig } from 'vitepress'
  4 | import autoprefixer from 'autoprefixer'
  5 | 
  6 | export default defineConfig({
  7 |   vite: {
  8 |     logLevel: process.env.NODE_ENV === 'production' ? 'error' : undefined,
  9 |     resolve: {
 10 |       alias: {
 11 |         'grid-layout-plus': resolve(__dirname, '../../src'),
 12 |       },
 13 |     },
 14 |     css: {
 15 |       postcss: {
 16 |         plugins: [autoprefixer],
 17 |       },
 18 |     },
 19 |     server: {
 20 |       fs: {
 21 |         allow: ['..'],
 22 |       },
 23 |     },
 24 |   },
 25 |   head: [['link', { rel: 'icon', type: 'image/svg+xml', href: '/grid-layout-plus.svg' }]],
 26 |   title: 'Grid Layout Plus',
 27 |   lastUpdated: true,
 28 |   themeConfig: {
 29 |     logo: '/grid-layout-plus.svg',
 30 |     outline: [2, 3],
 31 |     search: {
 32 |       provider: 'local',
 33 |     },
 34 |   },
 35 |   locales: {
 36 |     root: {
 37 |       label: 'English',
 38 |       lang: 'en',
 39 |       description: 'A draggable and resizable grid layout for Vue 3.',
 40 |       themeConfig: {
 41 |         nav: [
 42 |           { text: 'Guide', link: '/guide/installation', activeMatch: '/guide/' },
 43 |           // { text: 'Playground', link: '/markdown-examples' }
 44 |         ],
 45 |         sidebar: [
 46 |           {
 47 |             text: 'Introduction',
 48 |             items: [
 49 |               { text: 'Installation', link: '/guide/installation' },
 50 |               { text: 'Usage', link: '/guide/usage' },
 51 |               { text: 'Properties', link: '/guide/properties' },
 52 |               { text: 'Events', link: '/guide/events' },
 53 |               { text: 'Custom Style', link: '/guide/custom-style' },
 54 |             ],
 55 |           },
 56 |           {
 57 |             text: 'Example',
 58 |             items: [
 59 |               { text: 'Basic Usage', link: '/example/basic' },
 60 |               { text: 'Move and Resize Events', link: '/example/events' },
 61 |               { text: 'Multiple Grid Layouts', link: '/example/multiple-grids' },
 62 |               { text: 'Drag and Resize Handler', link: '/example/drag-resize-handler' },
 63 |               { text: 'Mirrored Grid Layout', link: '/example/mirrored' },
 64 |               { text: 'Responsive', link: '/example/responsive' },
 65 |               { text: 'Prevent Collision', link: '/example/prevent-collision' },
 66 |               { text: 'Predefined Responsive Layouts', link: '/example/responsive-layouts' },
 67 |               { text: 'Dynamic Add or Remove', link: '/example/dynamic-add-remove' },
 68 |               { text: 'Drag From Outside', link: '/example/drag-from-outside' },
 69 |               { text: 'Items Bounded to Container', link: '/example/bounded' },
 70 |               { text: 'Styling Grid Lines', link: '/example/styling-grid-lines' },
 71 |               { text: 'Styling Placeholder', link: '/example/styling-placeholder' },
 72 |             ],
 73 |           },
 74 |         ],
 75 |         editLink: {
 76 |           pattern: 'https://github.com/qmhc/grid-layout-plus/edit/main/docs/en/:path',
 77 |           text: 'Edit this page on GitHub',
 78 |         },
 79 |         socialLinks: [{ icon: 'github', link: 'https://github.com/qmhc/grid-layout-plus' }],
 80 |         footer: {
 81 |           message: 'Released under the MIT License.',
 82 |           copyright: 'Copyright © 2023-present qmhc',
 83 |         },
 84 |       },
 85 |     },
 86 |     zh: {
 87 |       label: '中文',
 88 |       lang: 'zh',
 89 |       description: '一个 Vue 3 的可拖拽、可缩放的布局',
 90 |       themeConfig: {
 91 |         nav: [
 92 |           { text: '指南', link: '/zh/guide/installation', activeMatch: '/zh/guide/' },
 93 |           // { text: '游乐场', link: '/zh/markdown-examples' }
 94 |         ],
 95 |         sidebar: [
 96 |           {
 97 |             text: '介绍',
 98 |             items: [
 99 |               { text: '安装', link: '/zh/guide/installation' },
100 |               { text: '用法', link: '/zh/guide/usage' },
101 |               { text: '属性', link: '/zh/guide/properties' },
102 |               { text: '事件', link: '/zh/guide/events' },
103 |               { text: '定制样式', link: '/zh/guide/custom-style' },
104 |             ],
105 |           },
106 |           {
107 |             text: '示例',
108 |             items: [
109 |               { text: '基础用法', link: '/zh/example/basic' },
110 |               { text: '移动和缩放事件', link: '/zh/example/events' },
111 |               { text: '多个栅格布局', link: '/zh/example/multiple-grids' },
112 |               { text: '拖拽和缩放手柄', link: '/zh/example/drag-resize-handler' },
113 |               { text: '镜像栅格布局', link: '/zh/example/mirrored' },
114 |               { text: '响应式', link: '/zh/example/responsive' },
115 |               { text: '阻止碰撞', link: '/zh/example/prevent-collision' },
116 |               { text: '预设响应式布局', link: '/zh/example/responsive-layouts' },
117 |               { text: '动态增减元素', link: '/zh/example/dynamic-add-remove' },
118 |               { text: '从外部拖入', link: '/zh/example/drag-from-outside' },
119 |               { text: '元素绑定容器', link: '/zh/example/bounded' },
120 |               { text: '定制栅格线', link: '/example/styling-grid-lines' },
121 |               { text: '定制占位符', link: '/example/styling-placeholder' },
122 |             ],
123 |           },
124 |         ],
125 |         editLink: {
126 |           pattern: 'https://github.com/qmhc/grid-layout-plus/edit/main/docs/:path',
127 |           text: '在 GitHub 上编辑此页',
128 |         },
129 |         socialLinks: [{ icon: 'github', link: 'https://github.com/qmhc/grid-layout-plus' }],
130 |         docFooter: {
131 |           prev: '上一页',
132 |           next: '下一页',
133 |         },
134 |         footer: {
135 |           message: '在 MIT 协议下发布。',
136 |           copyright: 'Copyright © 2023-present qmhc',
137 |         },
138 |         outlineTitle: '在这一页',
139 |         darkModeSwitchLabel: '切换暗黑模式',
140 |         returnToTopLabel: '返回顶部',
141 |         langMenuLabel: '更换语言',
142 |         sidebarMenuLabel: '菜单',
143 |         lastUpdatedText: '最后更新日期',
144 |       },
145 |     },
146 |   },
147 | })
148 | 


--------------------------------------------------------------------------------
/docs/.vitepress/theme/index.ts:
--------------------------------------------------------------------------------
 1 | import { h } from 'vue'
 2 | 
 3 | import Theme from 'vitepress/theme'
 4 | import { install } from 'vexip-ui'
 5 | import { GridItem, GridLayout } from 'grid-layout-plus'
 6 | import { toCapitalCase } from '@vexip-ui/utils'
 7 | 
 8 | import 'vexip-ui/css/index.css'
 9 | import 'vexip-ui/css/dark/index.css'
10 | import './style.css'
11 | 
12 | import type { App } from 'vue'
13 | 
14 | const demos = import.meta.glob('../../demos/*.vue', { eager: true })
15 | 
16 | export default {
17 |   ...Theme,
18 |   Layout: () => {
19 |     return h(Theme.Layout, null, {
20 |       // https://vitepress.dev/guide/extending-default-theme#layout-slots
21 |     })
22 |   },
23 |   enhanceApp({ app }: { app: App }) {
24 |     app.use(install)
25 |     app.component('GridLayout', GridLayout)
26 |     app.component('GridItem', GridItem)
27 | 
28 |     Object.keys(demos).forEach(path => {
29 |       const name = toCapitalCase(path.split('/').at(-1)!.replace(/.vue$/, ''))
30 | 
31 |       app.component(`Demo${name}`, (demos[path] as any).default)
32 |     })
33 |   },
34 | }
35 | 


--------------------------------------------------------------------------------
/docs/.vitepress/theme/style.css:
--------------------------------------------------------------------------------
  1 | /* stylelint-disable no-duplicate-selectors */
  2 | /* stylelint-disable selector-class-pattern */
  3 | 
  4 | /**
  5 |  * Customize default theme styling by overriding CSS variables:
  6 |  * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
  7 |  */
  8 | 
  9 | /**
 10 |  * Colors
 11 |  * -------------------------------------------------------------------------- */
 12 | 
 13 |  :root {
 14 |   --vp-layout-max-width: 1600px;
 15 | 
 16 |   --vp-c-brand: #646cff;
 17 |   --vp-c-brand-light: #747bff;
 18 |   --vp-c-brand-lighter: #9499ff;
 19 |   --vp-c-brand-lightest: #bcc0ff;
 20 |   --vp-c-brand-dark: #535bf2;
 21 |   --vp-c-brand-darker: #454ce1;
 22 |   --vp-c-brand-dimm: rgba(100, 108, 255, 8%);
 23 | }
 24 | 
 25 | /**
 26 |  * Component: Button
 27 |  * -------------------------------------------------------------------------- */
 28 | 
 29 | :root {
 30 |   --vp-button-brand-border: var(--vp-c-brand-light);
 31 |   --vp-button-brand-text: var(--vp-c-white);
 32 |   --vp-button-brand-bg: var(--vp-c-brand);
 33 |   --vp-button-brand-hover-border: var(--vp-c-brand-light);
 34 |   --vp-button-brand-hover-text: var(--vp-c-white);
 35 |   --vp-button-brand-hover-bg: var(--vp-c-brand-light);
 36 |   --vp-button-brand-active-border: var(--vp-c-brand-light);
 37 |   --vp-button-brand-active-text: var(--vp-c-white);
 38 |   --vp-button-brand-active-bg: var(--vp-button-brand-bg);
 39 | }
 40 | 
 41 | /**
 42 |  * Component: Home
 43 |  * -------------------------------------------------------------------------- */
 44 | 
 45 | :root {
 46 |   --vp-home-hero-name-color: transparent;
 47 |   --vp-home-hero-name-background: linear-gradient(
 48 |     120deg,
 49 |     #bd34fe 30%,
 50 |     #41d1ff
 51 |   );
 52 | 
 53 |   --vp-home-hero-image-background-image: linear-gradient(
 54 |     -45deg,
 55 |     #bd34fe 50%,
 56 |     #47caff 50%
 57 |   );
 58 |   --vp-home-hero-image-filter: blur(40px);
 59 | }
 60 | 
 61 | @media (min-width: 640px) {
 62 |   :root {
 63 |     --vp-home-hero-image-filter: blur(56px);
 64 |   }
 65 | }
 66 | 
 67 | @media (min-width: 960px) {
 68 |   :root {
 69 |     --vp-home-hero-image-filter: blur(72px);
 70 |   }
 71 | }
 72 | 
 73 | /**
 74 |  * Component: Custom Block
 75 |  * -------------------------------------------------------------------------- */
 76 | 
 77 | :root {
 78 |   --vp-custom-block-tip-border: var(--vp-c-brand);
 79 |   --vp-custom-block-tip-text: var(--vp-c-brand-darker);
 80 |   --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
 81 | }
 82 | 
 83 | .dark {
 84 |   --vp-custom-block-tip-border: var(--vp-c-brand);
 85 |   --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
 86 |   --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
 87 | }
 88 | 
 89 | /**
 90 |  * Component: Algolia
 91 |  * -------------------------------------------------------------------------- */
 92 | 
 93 | .DocSearch {
 94 |   --docsearch-primary-color: var(--vp-c-brand) !important;
 95 | }
 96 | 
 97 | .VPDoc.has-aside .content-container {
 98 |   max-width: 828px !important;
 99 | }
100 | 


--------------------------------------------------------------------------------
/docs/demos/basic.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { reactive } from 'vue'
 3 | 
 4 | const layout = reactive([
 5 |   { x: 0, y: 0, w: 2, h: 2, i: '0', static: false },
 6 |   { x: 2, y: 0, w: 2, h: 4, i: '1', static: true },
 7 |   { x: 4, y: 0, w: 2, h: 5, i: '2', static: false },
 8 |   { x: 6, y: 0, w: 2, h: 3, i: '3', static: false },
 9 |   { x: 8, y: 0, w: 2, h: 3, i: '4', static: false },
10 |   { x: 10, y: 0, w: 2, h: 3, i: '5', static: false },
11 |   { x: 0, y: 5, w: 2, h: 5, i: '6', static: false },
12 |   { x: 2, y: 5, w: 2, h: 5, i: '7', static: false },
13 |   { x: 4, y: 5, w: 2, h: 5, i: '8', static: false },
14 |   { x: 6, y: 3, w: 2, h: 4, i: '9', static: true },
15 |   { x: 8, y: 4, w: 2, h: 4, i: '10', static: false },
16 |   { x: 10, y: 4, w: 2, h: 4, i: '11', static: false },
17 |   { x: 0, y: 10, w: 2, h: 5, i: '12', static: false },
18 |   { x: 2, y: 10, w: 2, h: 5, i: '13', static: false },
19 |   { x: 4, y: 8, w: 2, h: 4, i: '14', static: false },
20 |   { x: 6, y: 8, w: 2, h: 4, i: '15', static: false },
21 |   { x: 8, y: 10, w: 2, h: 5, i: '16', static: false },
22 |   { x: 10, y: 4, w: 2, h: 2, i: '17', static: false },
23 |   { x: 0, y: 9, w: 2, h: 3, i: '18', static: false },
24 |   { x: 2, y: 6, w: 2, h: 2, i: '19', static: false },
25 | ])
26 | </script>
27 | 
28 | <template>
29 |   <GridLayout v-model:layout="layout" :row-height="30">
30 |     <template #item="{ item }">
31 |       <span class="text">{{ `${item.i}${item.static ? '- Static' : ''}` }}</span>
32 |     </template>
33 |   </GridLayout>
34 | </template>
35 | 
36 | <style scoped>
37 | .vgl-layout {
38 |   background-color: #eee;
39 | }
40 | 
41 | :deep(.vgl-item:not(.vgl-item--placeholder)) {
42 |   background-color: #ccc;
43 |   border: 1px solid black;
44 | }
45 | 
46 | :deep(.vgl-item--resizing) {
47 |   opacity: 90%;
48 | }
49 | 
50 | :deep(.vgl-item--static) {
51 |   background-color: #cce;
52 | }
53 | 
54 | .text {
55 |   position: absolute;
56 |   inset: 0;
57 |   width: 100%;
58 |   height: 100%;
59 |   margin: auto;
60 |   font-size: 24px;
61 |   text-align: center;
62 | }
63 | </style>
64 | 


--------------------------------------------------------------------------------
/docs/demos/bounded.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { reactive, ref } from 'vue'
  3 | 
  4 | const draggable = ref(true)
  5 | const resizable = ref(true)
  6 | const bounded = ref(true)
  7 | 
  8 | const layout = reactive([
  9 |   { x: 0, y: 0, w: 2, h: 2, i: '0' },
 10 |   { x: 2, y: 0, w: 2, h: 4, i: '1' },
 11 |   { x: 4, y: 0, w: 2, h: 5, i: '2' },
 12 |   { x: 6, y: 0, w: 2, h: 3, i: '3' },
 13 |   { x: 8, y: 0, w: 2, h: 3, i: '4' },
 14 |   { x: 10, y: 0, w: 2, h: 3, i: '5' },
 15 |   { x: 0, y: 5, w: 2, h: 5, i: '6' },
 16 |   { x: 2, y: 5, w: 2, h: 5, i: '7' },
 17 |   { x: 4, y: 5, w: 2, h: 5, i: '8' },
 18 |   { x: 6, y: 4, w: 2, h: 4, i: '9' },
 19 |   { x: 8, y: 4, w: 2, h: 4, i: '10' },
 20 |   { x: 10, y: 4, w: 2, h: 4, i: '11' },
 21 |   { x: 0, y: 10, w: 2, h: 5, i: '12' },
 22 |   { x: 2, y: 10, w: 2, h: 5, i: '13' },
 23 |   { x: 4, y: 8, w: 2, h: 4, i: '14' },
 24 |   { x: 6, y: 8, w: 2, h: 4, i: '15' },
 25 |   { x: 8, y: 10, w: 2, h: 5, i: '16' },
 26 |   { x: 10, y: 4, w: 2, h: 2, i: '17' },
 27 |   { x: 0, y: 9, w: 2, h: 3, i: '18' },
 28 |   { x: 2, y: 6, w: 2, h: 2, i: '19' },
 29 | ])
 30 | </script>
 31 | 
 32 | <template>
 33 |   <div class="layout-json">
 34 |     Displayed as <code>[x, y, w, h]</code>:
 35 |     <div class="columns">
 36 |       <div v-for="item in layout" :key="item.i">
 37 |         <b>{{ item.i }}</b>: [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}]
 38 |       </div>
 39 |     </div>
 40 |   </div>
 41 |   <hr />
 42 |   <input v-model="draggable" type="checkbox" /> Draggable
 43 |   <input v-model="resizable" type="checkbox" /> Resizable
 44 |   <input v-model="bounded" type="checkbox" /> Bounded
 45 |   <br />
 46 |   <div style="width: 100%; height: 100%; margin-top: 10px">
 47 |     <GridLayout
 48 |       v-model:layout="layout"
 49 |       :row-height="30"
 50 |       :is-draggable="draggable"
 51 |       :is-resizable="resizable"
 52 |       :is-bounded="bounded"
 53 |     >
 54 |       <template #item="{ item }">
 55 |         <span class="text">{{ item.i }}</span>
 56 |       </template>
 57 |     </GridLayout>
 58 |   </div>
 59 | </template>
 60 | 
 61 | <style scoped>
 62 | .vgl-layout {
 63 |   background-color: #eee;
 64 | }
 65 | 
 66 | :deep(.vgl-item:not(.vgl-item--placeholder)) {
 67 |   background-color: #ccc;
 68 |   border: 1px solid black;
 69 | }
 70 | 
 71 | :deep(.vgl-item--resizing) {
 72 |   opacity: 90%;
 73 | }
 74 | 
 75 | :deep(.vgl-item--static) {
 76 |   background-color: #cce;
 77 | }
 78 | 
 79 | .text {
 80 |   position: absolute;
 81 |   inset: 0;
 82 |   width: 100%;
 83 |   height: 100%;
 84 |   margin: auto;
 85 |   font-size: 24px;
 86 |   text-align: center;
 87 | }
 88 | 
 89 | .layout-json {
 90 |   padding: 10px;
 91 |   margin-top: 10px;
 92 |   background-color: #ddd;
 93 |   border: 1px solid black;
 94 | }
 95 | 
 96 | .columns {
 97 |   columns: 120px;
 98 | }
 99 | </style>
100 | 


--------------------------------------------------------------------------------
/docs/demos/drag-from-outside.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { onBeforeUnmount, onMounted, ref } from 'vue'
  3 | 
  4 | // you can import from 'lodash-es' or implement it by yourself
  5 | import { throttle } from '@vexip-ui/utils'
  6 | 
  7 | import type { GridLayout } from 'grid-layout-plus'
  8 | 
  9 | const layout = ref([
 10 |   { x: 0, y: 0, w: 2, h: 2, i: '0' },
 11 |   { x: 2, y: 0, w: 2, h: 4, i: '1' },
 12 |   { x: 4, y: 0, w: 2, h: 5, i: '2' },
 13 |   { x: 6, y: 0, w: 2, h: 3, i: '3' },
 14 |   { x: 8, y: 0, w: 2, h: 3, i: '4' },
 15 |   { x: 10, y: 0, w: 2, h: 3, i: '5' },
 16 |   { x: 0, y: 5, w: 2, h: 5, i: '6' },
 17 |   { x: 2, y: 5, w: 2, h: 5, i: '7' },
 18 |   { x: 4, y: 5, w: 2, h: 5, i: '8' },
 19 |   { x: 5, y: 10, w: 4, h: 3, i: '9' },
 20 | ])
 21 | 
 22 | const wrapper = ref<HTMLElement>()
 23 | const gridLayout = ref<InstanceType<typeof GridLayout>>()
 24 | 
 25 | onMounted(() => {
 26 |   document.addEventListener('dragover', syncMousePosition)
 27 | })
 28 | 
 29 | onBeforeUnmount(() => {
 30 |   document.removeEventListener('dragover', syncMousePosition)
 31 | })
 32 | 
 33 | const mouseAt = { x: -1, y: -1 }
 34 | 
 35 | function syncMousePosition(event: MouseEvent) {
 36 |   mouseAt.x = event.clientX
 37 |   mouseAt.y = event.clientY
 38 | }
 39 | 
 40 | const dropId = 'drop'
 41 | const dragItem = { x: -1, y: -1, w: 2, h: 2, i: '' }
 42 | 
 43 | const drag = throttle(() => {
 44 |   const parentRect = wrapper.value?.getBoundingClientRect()
 45 | 
 46 |   if (!parentRect || !gridLayout.value) return
 47 | 
 48 |   const mouseInGrid =
 49 |     mouseAt.x > parentRect.left &&
 50 |     mouseAt.x < parentRect.right &&
 51 |     mouseAt.y > parentRect.top &&
 52 |     mouseAt.y < parentRect.bottom
 53 | 
 54 |   if (mouseInGrid && !layout.value.find(item => item.i === dropId)) {
 55 |     layout.value.push({
 56 |       x: (layout.value.length * 2) % 12,
 57 |       y: layout.value.length + 12, // puts it at the bottom
 58 |       w: 2,
 59 |       h: 2,
 60 |       i: dropId,
 61 |     })
 62 |   }
 63 | 
 64 |   const index = layout.value.findIndex(item => item.i === dropId)
 65 | 
 66 |   if (index !== -1) {
 67 |     const item = gridLayout.value.getItem(dropId)
 68 | 
 69 |     if (!item) return
 70 | 
 71 |     try {
 72 |       item.wrapper.style.display = 'none'
 73 |     } catch (e) {}
 74 | 
 75 |     Object.assign(item.state, {
 76 |       top: mouseAt.y - parentRect.top,
 77 |       left: mouseAt.x - parentRect.left,
 78 |     })
 79 |     const newPos = item.calcXY(mouseAt.y - parentRect.top, mouseAt.x - parentRect.left)
 80 | 
 81 |     if (mouseInGrid) {
 82 |       gridLayout.value.dragEvent('dragstart', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
 83 |       dragItem.i = String(index)
 84 |       dragItem.x = layout.value[index].x
 85 |       dragItem.y = layout.value[index].y
 86 |     } else {
 87 |       gridLayout.value.dragEvent('dragend', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
 88 |       layout.value = layout.value.filter(item => item.i !== dropId)
 89 |     }
 90 |   }
 91 | })
 92 | 
 93 | function dragEnd() {
 94 |   const parentRect = wrapper.value?.getBoundingClientRect()
 95 | 
 96 |   if (!parentRect || !gridLayout.value) return
 97 | 
 98 |   const mouseInGrid =
 99 |     mouseAt.x > parentRect.left &&
100 |     mouseAt.x < parentRect.right &&
101 |     mouseAt.y > parentRect.top &&
102 |     mouseAt.y < parentRect.bottom
103 | 
104 |   if (mouseInGrid) {
105 |     alert(`Dropped element props:\n${JSON.stringify(dragItem, ['x', 'y', 'w', 'h'], 2)}`)
106 |     gridLayout.value.dragEvent('dragend', dropId, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
107 |     layout.value = layout.value.filter(item => item.i !== dropId)
108 |   } else {
109 |     return
110 |   }
111 | 
112 |   layout.value.push({
113 |     x: dragItem.x,
114 |     y: dragItem.y,
115 |     w: dragItem.w,
116 |     h: dragItem.h,
117 |     i: dragItem.i,
118 |   })
119 |   gridLayout.value.dragEvent('dragend', dragItem.i, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
120 | 
121 |   const item = gridLayout.value.getItem(dropId)
122 | 
123 |   if (!item) return
124 | 
125 |   try {
126 |     item.wrapper.style.display = ''
127 |   } catch (e) {}
128 | }
129 | </script>
130 | 
131 | <template>
132 |   <div class="layout-json">
133 |     Displayed as <code>[x, y, w, h]</code>:
134 |     <div class="columns">
135 |       <div v-for="item in layout" :key="item.i" class="layout-item">
136 |         <b>{{ item.i }}</b>: [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}]
137 |       </div>
138 |     </div>
139 |   </div>
140 |   <br />
141 |   <div
142 |     class="droppable-element"
143 |     draggable="true"
144 |     unselectable="on"
145 |     @drag="drag"
146 |     @dragend="dragEnd"
147 |   >
148 |     Droppable Element (Drag me!)
149 |   </div>
150 |   <div ref="wrapper">
151 |     <GridLayout ref="gridLayout" v-model:layout="layout" :row-height="30">
152 |       <template #item="{ item }">
153 |         <span class="text">{{ item.i }}</span>
154 |       </template>
155 |     </GridLayout>
156 |   </div>
157 | </template>
158 | 
159 | <style scoped>
160 | .vgl-layout {
161 |   background-color: #eee;
162 | }
163 | 
164 | :deep(.vgl-item:not(.vgl-item--placeholder)) {
165 |   background-color: #ccc;
166 |   border: 1px solid black;
167 | }
168 | 
169 | :deep(.vgl-item--resizing) {
170 |   opacity: 90%;
171 | }
172 | 
173 | :deep(.vgl-item--static) {
174 |   background-color: #cce;
175 | }
176 | 
177 | .text {
178 |   position: absolute;
179 |   inset: 0;
180 |   width: 100%;
181 |   height: 100%;
182 |   margin: auto;
183 |   font-size: 24px;
184 |   text-align: center;
185 | }
186 | 
187 | .layout-json {
188 |   padding: 10px;
189 |   margin-top: 10px;
190 |   background-color: #ddd;
191 |   border: 1px solid black;
192 | }
193 | 
194 | .columns {
195 |   columns: 120px;
196 | }
197 | 
198 | .droppable-element {
199 |   width: 150px;
200 |   padding: 10px;
201 |   margin: 10px 0;
202 |   text-align: center;
203 |   background-color: #fdd;
204 |   border: 1px solid black;
205 | }
206 | </style>
207 | 


--------------------------------------------------------------------------------
/docs/demos/drag-resize-handler.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { reactive } from 'vue'
  3 | 
  4 | const layout = reactive([
  5 |   { x: 0, y: 0, w: 2, h: 2, i: '0' },
  6 |   { x: 2, y: 0, w: 2, h: 4, i: '1' },
  7 |   { x: 4, y: 0, w: 2, h: 5, i: '2' },
  8 |   { x: 6, y: 0, w: 2, h: 3, i: '3' },
  9 |   { x: 8, y: 0, w: 2, h: 3, i: '4' },
 10 |   { x: 10, y: 0, w: 2, h: 3, i: '5' },
 11 |   { x: 0, y: 5, w: 2, h: 5, i: '6' },
 12 |   { x: 2, y: 5, w: 2, h: 5, i: '7' },
 13 |   { x: 4, y: 5, w: 2, h: 5, i: '8' },
 14 |   { x: 6, y: 4, w: 2, h: 4, i: '9' },
 15 |   { x: 8, y: 4, w: 2, h: 4, i: '10' },
 16 |   { x: 10, y: 4, w: 2, h: 4, i: '11' },
 17 |   { x: 0, y: 10, w: 2, h: 5, i: '12' },
 18 |   { x: 2, y: 10, w: 2, h: 5, i: '13' },
 19 |   { x: 4, y: 8, w: 2, h: 4, i: '14' },
 20 |   { x: 6, y: 8, w: 2, h: 4, i: '15' },
 21 |   { x: 8, y: 10, w: 2, h: 5, i: '16' },
 22 |   { x: 10, y: 4, w: 2, h: 2, i: '17' },
 23 |   { x: 0, y: 9, w: 2, h: 3, i: '18' },
 24 |   { x: 2, y: 6, w: 2, h: 2, i: '19' },
 25 | ])
 26 | </script>
 27 | 
 28 | <template>
 29 |   <GridLayout v-model:layout="layout" :row-height="30">
 30 |     <GridItem
 31 |       v-for="item in layout"
 32 |       :key="item.i"
 33 |       :x="item.x"
 34 |       :y="item.y"
 35 |       :w="item.w"
 36 |       :h="item.h"
 37 |       :i="item.i"
 38 |       drag-allow-from=".vue-draggable-handle"
 39 |       drag-ignore-from=".no-drag"
 40 |     >
 41 |       <div class="text">
 42 |         <div class="vue-draggable-handle"></div>
 43 |         <div class="no-drag">
 44 |           <span>{{ item.i }}</span>
 45 |           <br />
 46 |           <button type="button">
 47 |             Click
 48 |           </button>
 49 |         </div>
 50 |       </div>
 51 |     </GridItem>
 52 |   </GridLayout>
 53 | </template>
 54 | 
 55 | <style scoped>
 56 | .vgl-layout {
 57 |   background-color: #eee;
 58 | }
 59 | 
 60 | :deep(.vgl-item:not(.vgl-item--placeholder)) {
 61 |   background-color: #ccc;
 62 |   border: 1px solid black;
 63 | }
 64 | 
 65 | :deep(.vgl-item--resizing) {
 66 |   opacity: 90%;
 67 | }
 68 | 
 69 | :deep(.vgl-item--static) {
 70 |   background-color: #cce;
 71 | }
 72 | 
 73 | .text {
 74 |   position: absolute;
 75 |   inset: 0;
 76 |   width: 100%;
 77 |   height: 100%;
 78 |   margin: auto;
 79 |   font-size: 24px;
 80 |   text-align: center;
 81 | }
 82 | 
 83 | .vgl-item .no-drag {
 84 |   width: 100%;
 85 |   height: 100%;
 86 | }
 87 | 
 88 | .vue-draggable-handle {
 89 |   position: absolute;
 90 |   top: 0;
 91 |   right: 0;
 92 |   box-sizing: border-box;
 93 |   width: 20px;
 94 |   height: 20px;
 95 |   padding: 0 8px 8px 0;
 96 |   cursor: pointer;
 97 |   background-color: black;
 98 |   background-origin: content-box;
 99 |   border-radius: 10px;
100 | }
101 | </style>
102 | 


--------------------------------------------------------------------------------
/docs/demos/dynamic-add-remove.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { reactive, ref } from 'vue'
  3 | 
  4 | let index = 5
  5 | 
  6 | const draggable = ref(true)
  7 | const resizable = ref(true)
  8 | const colNum = ref(12)
  9 | 
 10 | const layout = reactive([
 11 |   { x: 0, y: 0, w: 2, h: 2, i: '0' },
 12 |   { x: 2, y: 0, w: 2, h: 2, i: '1' },
 13 |   { x: 4, y: 0, w: 2, h: 2, i: '2' },
 14 |   { x: 6, y: 0, w: 2, h: 2, i: '3' },
 15 |   { x: 8, y: 0, w: 2, h: 2, i: '4' },
 16 | ])
 17 | 
 18 | function addItem() {
 19 |   layout.push({
 20 |     x: (layout.length * 2) % (colNum.value || 12),
 21 |     y: layout.length + (colNum.value || 12), // puts it at the bottom
 22 |     w: 2,
 23 |     h: 2,
 24 |     i: `${index++}`,
 25 |   })
 26 | }
 27 | 
 28 | function removeItem(id: string) {
 29 |   const index = layout.findIndex(item => item.i === id)
 30 | 
 31 |   if (index > -1) {
 32 |     layout.splice(index, 1)
 33 |   }
 34 | }
 35 | </script>
 36 | 
 37 | <template>
 38 |   <div class="layout-json">
 39 |     Displayed as <code>[x, y, w, h]</code>:
 40 |     <div class="columns">
 41 |       <div v-for="item in layout" :key="item.i" class="layout-item">
 42 |         <b>{{ item.i }}</b>: [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}]
 43 |       </div>
 44 |     </div>
 45 |   </div>
 46 |   <button type="button" @click="addItem">
 47 |     Add an item dynamically
 48 |   </button>
 49 |   <input v-model="draggable" type="checkbox" /> Draggable
 50 |   <input v-model="resizable" type="checkbox" /> Resizable
 51 |   <GridLayout
 52 |     v-model:layout="layout"
 53 |     :col-num="colNum"
 54 |     :row-height="30"
 55 |     :is-draggable="draggable"
 56 |     :is-resizable="resizable"
 57 |   >
 58 |     <template #item="{ item }">
 59 |       <span class="text">{{ item.i }}</span>
 60 |       <span class="remove" @click="removeItem(item.i)">x</span>
 61 |     </template>
 62 |   </GridLayout>
 63 | </template>
 64 | 
 65 | <style scoped>
 66 | .vgl-layout {
 67 |   background-color: #eee;
 68 | }
 69 | 
 70 | :deep(.vgl-item:not(.vgl-item--placeholder)) {
 71 |   background-color: #ccc;
 72 |   border: 1px solid black;
 73 | }
 74 | 
 75 | :deep(.vgl-item--resizing) {
 76 |   opacity: 90%;
 77 | }
 78 | 
 79 | :deep(.vgl-item--static) {
 80 |   background-color: #cce;
 81 | }
 82 | 
 83 | .text {
 84 |   position: absolute;
 85 |   inset: 0;
 86 |   width: 100%;
 87 |   height: 100%;
 88 |   margin: auto;
 89 |   font-size: 24px;
 90 |   text-align: center;
 91 | }
 92 | 
 93 | .layout-json {
 94 |   padding: 10px;
 95 |   margin-top: 10px;
 96 |   background-color: #ddd;
 97 |   border: 1px solid black;
 98 | }
 99 | 
100 | .columns {
101 |   columns: 120px;
102 | }
103 | 
104 | .remove {
105 |   position: absolute;
106 |   top: 0;
107 |   right: 2px;
108 |   cursor: pointer;
109 | }
110 | </style>
111 | 


--------------------------------------------------------------------------------
/docs/demos/events.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { reactive, ref, watch } from 'vue'
  3 | 
  4 | import type { Layout } from 'grid-layout-plus'
  5 | 
  6 | const layout = reactive([
  7 |   { x: 0, y: 0, w: 2, h: 2, i: '0', static: false },
  8 |   { x: 2, y: 0, w: 2, h: 4, i: '1', static: true },
  9 |   { x: 4, y: 0, w: 2, h: 5, i: '2', static: false },
 10 |   { x: 6, y: 0, w: 2, h: 3, i: '3', static: false },
 11 |   { x: 8, y: 0, w: 2, h: 3, i: '4', static: false },
 12 |   { x: 10, y: 0, w: 2, h: 3, i: '5', static: false },
 13 |   { x: 0, y: 5, w: 2, h: 5, i: '6', static: false },
 14 |   { x: 2, y: 5, w: 2, h: 5, i: '7', static: false },
 15 |   { x: 4, y: 5, w: 2, h: 5, i: '8', static: false },
 16 |   { x: 6, y: 3, w: 2, h: 4, i: '9', static: true },
 17 |   { x: 8, y: 4, w: 2, h: 4, i: '10', static: false },
 18 |   { x: 10, y: 4, w: 2, h: 4, i: '11', static: false },
 19 |   { x: 0, y: 10, w: 2, h: 5, i: '12', static: false },
 20 |   { x: 2, y: 10, w: 2, h: 5, i: '13', static: false },
 21 |   { x: 4, y: 8, w: 2, h: 4, i: '14', static: false },
 22 |   { x: 6, y: 8, w: 2, h: 4, i: '15', static: false },
 23 |   { x: 8, y: 10, w: 2, h: 5, i: '16', static: false },
 24 |   { x: 10, y: 4, w: 2, h: 2, i: '17', static: false },
 25 |   { x: 0, y: 9, w: 2, h: 3, i: '18', static: false },
 26 |   { x: 2, y: 6, w: 2, h: 2, i: '19', static: false },
 27 | ])
 28 | 
 29 | const eventLogs = reactive<string[]>([])
 30 | 
 31 | const eventsDiv = ref<HTMLElement>()
 32 | 
 33 | watch(
 34 |   () => eventLogs.length,
 35 |   () => {
 36 |     requestAnimationFrame(() => {
 37 |       if (eventsDiv.value) {
 38 |         eventsDiv.value.scrollTop = eventsDiv.value.scrollHeight
 39 |       }
 40 |     })
 41 |   },
 42 | )
 43 | 
 44 | function moveEvent(i: string, newX: number, newY: number) {
 45 |   const msg = 'MOVE i=' + i + ', X=' + newX + ', Y=' + newY
 46 |   eventLogs.push(msg)
 47 |   console.info(msg)
 48 | }
 49 | 
 50 | function movedEvent(i: string, newX: number, newY: number) {
 51 |   const msg = 'MOVED i=' + i + ', X=' + newX + ', Y=' + newY
 52 |   eventLogs.push(msg)
 53 |   console.info(msg)
 54 | }
 55 | 
 56 | function resizeEvent(i: string, newH: number, newW: number, newHPx: number, newWPx: number) {
 57 |   const msg =
 58 |     'RESIZE i=' + i + ', H=' + newH + ', W=' + newW + ', H(px)=' + newHPx + ', W(px)=' + newWPx
 59 |   eventLogs.push(msg)
 60 |   console.info(msg)
 61 | }
 62 | 
 63 | function resizedEvent(i: string, newX: number, newY: number, newHPx: number, newWPx: number) {
 64 |   const msg =
 65 |     'RESIZED i=' + i + ', X=' + newX + ', Y=' + newY + ', H(px)=' + newHPx + ', W(px)=' + newWPx
 66 |   eventLogs.push(msg)
 67 |   console.info(msg)
 68 | }
 69 | 
 70 | function containerResizedEvent(
 71 |   i: string,
 72 |   newH: number,
 73 |   newW: number,
 74 |   newHPx: number,
 75 |   newWPx: number,
 76 | ) {
 77 |   const msg =
 78 |     'CONTAINER RESIZED i=' +
 79 |     i +
 80 |     ', H=' +
 81 |     newH +
 82 |     ', W=' +
 83 |     newW +
 84 |     ', H(px)=' +
 85 |     newHPx +
 86 |     ', W(px)=' +
 87 |     newWPx
 88 |   eventLogs.push(msg)
 89 |   console.info(msg)
 90 | }
 91 | 
 92 | function layoutBeforeMountEvent(newLayout: Layout) {
 93 |   eventLogs.push('beforeMount layout')
 94 |   console.info('beforeMount layout: ', newLayout)
 95 | }
 96 | 
 97 | function layoutMountedEvent(newLayout: Layout) {
 98 |   eventLogs.push('Mounted layout')
 99 |   console.info('Mounted layout: ', newLayout)
100 | }
101 | 
102 | function layoutReadyEvent(newLayout: Layout) {
103 |   eventLogs.push('Ready layout')
104 |   console.info('Ready layout: ', newLayout)
105 | }
106 | 
107 | function layoutUpdatedEvent(newLayout: Layout) {
108 |   eventLogs.push('Updated layout')
109 |   console.info('Updated layout: ', newLayout)
110 | }
111 | </script>
112 | 
113 | <template>
114 |   <div ref="eventsDiv" class="event-logs">
115 |     <div v-for="(event, index) in eventLogs" :key="index">
116 |       {{ event }}
117 |     </div>
118 |   </div>
119 |   <div style="margin-top: 10px">
120 |     <GridLayout
121 |       v-model:layout="layout"
122 |       :row-height="30"
123 |       @layout-before-mount="layoutBeforeMountEvent"
124 |       @layout-mounted="layoutMountedEvent"
125 |       @layout-ready="layoutReadyEvent"
126 |       @layout-updated="layoutUpdatedEvent"
127 |     >
128 |       <GridItem
129 |         v-for="item in layout"
130 |         :key="item.i"
131 |         :x="item.x"
132 |         :y="item.y"
133 |         :w="item.w"
134 |         :h="item.h"
135 |         :i="item.i"
136 |         @resize="resizeEvent"
137 |         @move="moveEvent"
138 |         @resized="resizedEvent"
139 |         @container-resized="containerResizedEvent"
140 |         @moved="movedEvent"
141 |       >
142 |         <span class="text">{{ item.i }}</span>
143 |       </GridItem>
144 |     </GridLayout>
145 |   </div>
146 | </template>
147 | 
148 | <style scoped>
149 | .vgl-layout {
150 |   background-color: #eee;
151 | }
152 | 
153 | :deep(.vgl-item:not(.vgl-item--placeholder)) {
154 |   background-color: #ccc;
155 |   border: 1px solid black;
156 | }
157 | 
158 | :deep(.vgl-item--resizing) {
159 |   opacity: 90%;
160 | }
161 | 
162 | :deep(.vgl-item--static) {
163 |   background-color: #cce;
164 | }
165 | 
166 | .text {
167 |   position: absolute;
168 |   inset: 0;
169 |   width: 100%;
170 |   height: 100%;
171 |   margin: auto;
172 |   font-size: 24px;
173 |   text-align: center;
174 | }
175 | 
176 | .event-logs {
177 |   height: 100px;
178 |   padding: 10px;
179 |   margin-top: 10px;
180 |   overflow-y: scroll;
181 |   background-color: #ddd;
182 |   border: 1px solid black;
183 | }
184 | </style>
185 | 


--------------------------------------------------------------------------------
/docs/demos/mirrored.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { reactive, ref } from 'vue'
 3 | 
 4 | const draggable = ref(true)
 5 | const resizable = ref(true)
 6 | const mirrored = ref(true)
 7 | 
 8 | const layout = reactive([
 9 |   { x: 0, y: 0, w: 2, h: 2, i: '0', static: false },
10 |   { x: 2, y: 0, w: 2, h: 4, i: '1', static: true },
11 |   { x: 4, y: 0, w: 2, h: 5, i: '2', static: false },
12 |   { x: 6, y: 0, w: 2, h: 3, i: '3', static: false },
13 |   { x: 8, y: 0, w: 2, h: 3, i: '4', static: false },
14 |   { x: 10, y: 0, w: 2, h: 3, i: '5', static: false },
15 |   { x: 0, y: 5, w: 2, h: 5, i: '6', static: false },
16 |   { x: 2, y: 5, w: 2, h: 5, i: '7', static: false },
17 |   { x: 4, y: 5, w: 2, h: 5, i: '8', static: false },
18 |   { x: 6, y: 3, w: 2, h: 4, i: '9', static: true },
19 |   { x: 8, y: 4, w: 2, h: 4, i: '10', static: false },
20 |   { x: 10, y: 4, w: 2, h: 4, i: '11', static: false },
21 |   { x: 0, y: 10, w: 2, h: 5, i: '12', static: false },
22 |   { x: 2, y: 10, w: 2, h: 5, i: '13', static: false },
23 |   { x: 4, y: 8, w: 2, h: 4, i: '14', static: false },
24 |   { x: 6, y: 8, w: 2, h: 4, i: '15', static: false },
25 |   { x: 8, y: 10, w: 2, h: 5, i: '16', static: false },
26 |   { x: 10, y: 4, w: 2, h: 2, i: '17', static: false },
27 |   { x: 0, y: 9, w: 2, h: 3, i: '18', static: false },
28 |   { x: 2, y: 6, w: 2, h: 2, i: '19', static: false },
29 | ])
30 | </script>
31 | 
32 | <template>
33 |   <input v-model="draggable" type="checkbox" /> Draggable
34 |   <input v-model="resizable" type="checkbox" /> Resizable
35 |   <input v-model="mirrored" type="checkbox" /> Mirrored
36 |   <br />
37 |   <GridLayout
38 |     v-model:layout="layout"
39 |     :row-height="30"
40 |     :is-draggable="draggable"
41 |     :is-resizable="resizable"
42 |     :is-mirrored="mirrored"
43 |   >
44 |     <template #item="{ item }">
45 |       <span class="text">{{ item.i }}</span>
46 |     </template>
47 |   </GridLayout>
48 | </template>
49 | 
50 | <style scoped>
51 | .vgl-layout {
52 |   background-color: #eee;
53 | }
54 | 
55 | :deep(.vgl-item:not(.vgl-item--placeholder)) {
56 |   background-color: #ccc;
57 |   border: 1px solid black;
58 | }
59 | 
60 | :deep(.vgl-item--resizing) {
61 |   opacity: 90%;
62 | }
63 | 
64 | :deep(.vgl-item--static) {
65 |   background-color: #cce;
66 | }
67 | 
68 | .text {
69 |   position: absolute;
70 |   inset: 0;
71 |   width: 100%;
72 |   height: 100%;
73 |   margin: auto;
74 |   font-size: 24px;
75 |   text-align: center;
76 | }
77 | </style>
78 | 


--------------------------------------------------------------------------------
/docs/demos/multiple-grids.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { reactive } from 'vue'
 3 | 
 4 | const layout = reactive([
 5 |   { x: 0, y: 0, w: 2, h: 2, i: '0' },
 6 |   { x: 2, y: 0, w: 2, h: 4, i: '1' },
 7 | ])
 8 | const layout2 = reactive([
 9 |   { x: 0, y: 0, w: 2, h: 2, i: '0' },
10 |   { x: 2, y: 0, w: 2, h: 4, i: '1' },
11 |   { x: 4, y: 0, w: 2, h: 2, i: '2' },
12 | ])
13 | </script>
14 | 
15 | <template>
16 |   <div style="margin-top: 10px">
17 |     <h4>Grid #1</h4>
18 |     <GridLayout v-model:layout="layout" :row-height="30">
19 |       <template #item="{ item }">
20 |         <span class="text">{{ item.i }}</span>
21 |       </template>
22 |     </GridLayout>
23 |   </div>
24 |   <div style="margin-top: 10px">
25 |     <h4>Grid #2</h4>
26 |     <GridLayout :layout="layout2" :row-height="30">
27 |       <template #item="{ item }">
28 |         <span class="text">{{ item.i }}</span>
29 |       </template>
30 |     </GridLayout>
31 |   </div>
32 | </template>
33 | 
34 | <style scoped>
35 | .vgl-layout {
36 |   background-color: #eee;
37 | }
38 | 
39 | :deep(.vgl-item:not(.vgl-item--placeholder)) {
40 |   background-color: #ccc;
41 |   border: 1px solid black;
42 | }
43 | 
44 | :deep(.vgl-item--resizing) {
45 |   opacity: 90%;
46 | }
47 | 
48 | :deep(.vgl-item--static) {
49 |   background-color: #cce;
50 | }
51 | 
52 | .text {
53 |   position: absolute;
54 |   inset: 0;
55 |   width: 100%;
56 |   height: 100%;
57 |   margin: auto;
58 |   font-size: 24px;
59 |   text-align: center;
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/docs/demos/prevent-collision.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { reactive } from 'vue'
 3 | 
 4 | const layout = reactive([
 5 |   { x: 0, y: 0, w: 2, h: 2, i: '0', static: false },
 6 |   { x: 2, y: 0, w: 2, h: 4, i: '1', static: true },
 7 |   { x: 4, y: 0, w: 2, h: 5, i: '2', static: false },
 8 |   { x: 6, y: 0, w: 2, h: 3, i: '3', static: false },
 9 |   { x: 8, y: 0, w: 2, h: 3, i: '4', static: false },
10 |   { x: 10, y: 0, w: 2, h: 3, i: '5', static: false },
11 |   { x: 0, y: 5, w: 2, h: 5, i: '6', static: false },
12 |   { x: 2, y: 5, w: 2, h: 5, i: '7', static: false },
13 |   { x: 4, y: 5, w: 2, h: 5, i: '8', static: false },
14 |   { x: 6, y: 3, w: 2, h: 4, i: '9', static: true },
15 |   { x: 8, y: 4, w: 2, h: 4, i: '10', static: false },
16 |   { x: 10, y: 4, w: 2, h: 4, i: '11', static: false },
17 |   { x: 0, y: 10, w: 2, h: 5, i: '12', static: false },
18 |   { x: 2, y: 10, w: 2, h: 5, i: '13', static: false },
19 |   { x: 4, y: 8, w: 2, h: 4, i: '14', static: false },
20 |   { x: 6, y: 8, w: 2, h: 4, i: '15', static: false },
21 |   { x: 8, y: 10, w: 2, h: 5, i: '16', static: false },
22 |   { x: 10, y: 4, w: 2, h: 2, i: '17', static: false },
23 |   { x: 0, y: 9, w: 2, h: 3, i: '18', static: false },
24 |   { x: 2, y: 6, w: 2, h: 2, i: '19', static: false },
25 | ])
26 | </script>
27 | 
28 | <template>
29 |   <GridLayout
30 |     v-model:layout="layout"
31 |     :row-height="30"
32 |     :responsive="false"
33 |     :vertical-compact="false"
34 |     prevent-collision
35 |   >
36 |     <template #item="{ item }">
37 |       <span class="text">{{ item.i }}</span>
38 |     </template>
39 |   </GridLayout>
40 | </template>
41 | 
42 | <style scoped>
43 | .vgl-layout {
44 |   background-color: #eee;
45 | }
46 | 
47 | :deep(.vgl-item:not(.vgl-item--placeholder)) {
48 |   background-color: #ccc;
49 |   border: 1px solid black;
50 | }
51 | 
52 | :deep(.vgl-item--resizing) {
53 |   opacity: 90%;
54 | }
55 | 
56 | :deep(.vgl-item--static) {
57 |   background-color: #cce;
58 | }
59 | 
60 | .text {
61 |   position: absolute;
62 |   inset: 0;
63 |   width: 100%;
64 |   height: 100%;
65 |   margin: auto;
66 |   font-size: 24px;
67 |   text-align: center;
68 | }
69 | </style>
70 | 


--------------------------------------------------------------------------------
/docs/demos/responsive-layouts.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { reactive, ref } from 'vue'
  3 | 
  4 | import type { Breakpoint, Layout } from 'grid-layout-plus'
  5 | 
  6 | const presetLayouts = reactive({
  7 |   md: [
  8 |     { x: 0, y: 0, w: 2, h: 2, i: '0' },
  9 |     { x: 2, y: 0, w: 2, h: 4, i: '1' },
 10 |     { x: 4, y: 0, w: 2, h: 5, i: '2' },
 11 |     { x: 6, y: 0, w: 2, h: 3, i: '3' },
 12 |     { x: 2, y: 4, w: 2, h: 3, i: '4' },
 13 |     { x: 4, y: 5, w: 2, h: 3, i: '5' },
 14 |     { x: 0, y: 2, w: 2, h: 5, i: '6' },
 15 |     { x: 2, y: 7, w: 2, h: 5, i: '7' },
 16 |     { x: 4, y: 8, w: 2, h: 5, i: '8' },
 17 |     { x: 6, y: 3, w: 2, h: 4, i: '9' },
 18 |     { x: 0, y: 7, w: 2, h: 4, i: '10' },
 19 |     { x: 2, y: 19, w: 2, h: 4, i: '11' },
 20 |     { x: 0, y: 14, w: 2, h: 5, i: '12' },
 21 |     { x: 2, y: 14, w: 2, h: 5, i: '13' },
 22 |     { x: 4, y: 13, w: 2, h: 4, i: '14' },
 23 |     { x: 6, y: 7, w: 2, h: 4, i: '15' },
 24 |     { x: 0, y: 19, w: 2, h: 5, i: '16' },
 25 |     { x: 8, y: 0, w: 2, h: 2, i: '17' },
 26 |     { x: 0, y: 11, w: 2, h: 3, i: '18' },
 27 |     { x: 2, y: 12, w: 2, h: 2, i: '19' },
 28 |   ],
 29 |   lg: [
 30 |     { x: 0, y: 0, w: 2, h: 2, i: '0' },
 31 |     { x: 2, y: 0, w: 2, h: 4, i: '1' },
 32 |     { x: 4, y: 0, w: 2, h: 5, i: '2' },
 33 |     { x: 6, y: 0, w: 2, h: 3, i: '3' },
 34 |     { x: 8, y: 0, w: 2, h: 3, i: '4' },
 35 |     { x: 10, y: 0, w: 2, h: 3, i: '5' },
 36 |     { x: 0, y: 5, w: 2, h: 5, i: '6' },
 37 |     { x: 2, y: 5, w: 2, h: 5, i: '7' },
 38 |     { x: 4, y: 5, w: 2, h: 5, i: '8' },
 39 |     { x: 6, y: 4, w: 2, h: 4, i: '9' },
 40 |     { x: 8, y: 4, w: 2, h: 4, i: '10' },
 41 |     { x: 10, y: 4, w: 2, h: 4, i: '11' },
 42 |     { x: 0, y: 10, w: 2, h: 5, i: '12' },
 43 |     { x: 2, y: 10, w: 2, h: 5, i: '13' },
 44 |     { x: 4, y: 8, w: 2, h: 4, i: '14' },
 45 |     { x: 6, y: 8, w: 2, h: 4, i: '15' },
 46 |     { x: 8, y: 10, w: 2, h: 5, i: '16' },
 47 |     { x: 10, y: 4, w: 2, h: 2, i: '17' },
 48 |     { x: 0, y: 9, w: 2, h: 3, i: '18' },
 49 |     { x: 2, y: 6, w: 2, h: 2, i: '19' },
 50 |   ],
 51 | })
 52 | 
 53 | const layout = ref(presetLayouts.lg)
 54 | 
 55 | function breakpointChangedEvent(newBreakpoint: Breakpoint, newLayout: Layout) {
 56 |   console.info('BREAKPOINT CHANGED breakpoint=', newBreakpoint, ', layout: ', newLayout)
 57 | }
 58 | </script>
 59 | 
 60 | <template>
 61 |   <GridLayout
 62 |     v-model:layout="layout"
 63 |     :responsive-layouts="presetLayouts"
 64 |     :row-height="30"
 65 |     responsive
 66 |     @breakpoint-changed="breakpointChangedEvent"
 67 |   >
 68 |     <template #item="{ item }">
 69 |       <span class="text">{{ item.i }}</span>
 70 |     </template>
 71 |   </GridLayout>
 72 | </template>
 73 | 
 74 | <style scoped>
 75 | .vgl-layout {
 76 |   background-color: #eee;
 77 | }
 78 | 
 79 | :deep(.vgl-item:not(.vgl-item--placeholder)) {
 80 |   background-color: #ccc;
 81 |   border: 1px solid black;
 82 | }
 83 | 
 84 | :deep(.vgl-item--resizing) {
 85 |   opacity: 90%;
 86 | }
 87 | 
 88 | :deep(.vgl-item--static) {
 89 |   background-color: #cce;
 90 | }
 91 | 
 92 | .text {
 93 |   position: absolute;
 94 |   inset: 0;
 95 |   width: 100%;
 96 |   height: 100%;
 97 |   margin: auto;
 98 |   font-size: 24px;
 99 |   text-align: center;
100 | }
101 | </style>
102 | 


--------------------------------------------------------------------------------
/docs/demos/responsive.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { ref } from 'vue'
  3 | 
  4 | const draggable = ref(true)
  5 | const resizable = ref(true)
  6 | const responsive = ref(true)
  7 | 
  8 | const layout = ref([
  9 |   { x: 0, y: 0, w: 2, h: 2, i: '0' },
 10 |   { x: 2, y: 0, w: 2, h: 4, i: '1' },
 11 |   { x: 4, y: 0, w: 2, h: 5, i: '2' },
 12 |   { x: 6, y: 0, w: 2, h: 3, i: '3' },
 13 |   { x: 8, y: 0, w: 2, h: 3, i: '4' },
 14 |   { x: 10, y: 0, w: 2, h: 3, i: '5' },
 15 |   { x: 0, y: 5, w: 2, h: 5, i: '6' },
 16 |   { x: 2, y: 5, w: 2, h: 5, i: '7' },
 17 |   { x: 4, y: 5, w: 2, h: 5, i: '8' },
 18 |   { x: 6, y: 4, w: 2, h: 4, i: '9' },
 19 |   { x: 8, y: 4, w: 2, h: 4, i: '10' },
 20 |   { x: 10, y: 4, w: 2, h: 4, i: '11' },
 21 |   { x: 0, y: 10, w: 2, h: 5, i: '12' },
 22 |   { x: 2, y: 10, w: 2, h: 5, i: '13' },
 23 |   { x: 4, y: 8, w: 2, h: 4, i: '14' },
 24 |   { x: 6, y: 8, w: 2, h: 4, i: '15' },
 25 |   { x: 8, y: 10, w: 2, h: 5, i: '16' },
 26 |   { x: 10, y: 4, w: 2, h: 2, i: '17' },
 27 |   { x: 0, y: 9, w: 2, h: 3, i: '18' },
 28 |   { x: 2, y: 6, w: 2, h: 2, i: '19' },
 29 | ])
 30 | </script>
 31 | 
 32 | <template>
 33 |   <div class="layout-json">
 34 |     Displayed as <code>[x, y, w, h]</code>:
 35 |     <div class="columns">
 36 |       <div v-for="item in layout" :key="item.i">
 37 |         <strong>{{ item.i }}</strong>: [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}]
 38 |       </div>
 39 |     </div>
 40 |   </div>
 41 |   <hr />
 42 |   <input v-model="draggable" type="checkbox" /> Draggable
 43 |   <input v-model="resizable" type="checkbox" /> Resizable
 44 |   <input v-model="responsive" type="checkbox" /> Responsive
 45 |   <br />
 46 |   <div style="margin-top: 10px">
 47 |     <GridLayout
 48 |       v-model:layout="layout"
 49 |       :row-height="30"
 50 |       :is-draggable="draggable"
 51 |       :is-resizable="resizable"
 52 |       :responsive="responsive"
 53 |     >
 54 |       <template #item="{ item }">
 55 |         <span class="text">{{ item.i }}</span>
 56 |       </template>
 57 |     </GridLayout>
 58 |   </div>
 59 | </template>
 60 | 
 61 | <style scoped>
 62 | .vgl-layout {
 63 |   background-color: #eee;
 64 | }
 65 | 
 66 | :deep(.vgl-item:not(.vgl-item--placeholder)) {
 67 |   background-color: #ccc;
 68 |   border: 1px solid black;
 69 | }
 70 | 
 71 | :deep(.vgl-item--resizing) {
 72 |   opacity: 90%;
 73 | }
 74 | 
 75 | :deep(.vgl-item--static) {
 76 |   background-color: #cce;
 77 | }
 78 | 
 79 | .text {
 80 |   position: absolute;
 81 |   inset: 0;
 82 |   width: 100%;
 83 |   height: 100%;
 84 |   margin: auto;
 85 |   font-size: 24px;
 86 |   text-align: center;
 87 | }
 88 | 
 89 | .layout-json {
 90 |   padding: 10px;
 91 |   margin-top: 10px;
 92 |   background-color: #ddd;
 93 |   border: 1px solid black;
 94 | }
 95 | 
 96 | .columns {
 97 |   columns: 120px;
 98 | }
 99 | </style>
100 | 


--------------------------------------------------------------------------------
/docs/demos/styling-grid-lines.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { reactive } from 'vue'
 3 | 
 4 | const layout = reactive([
 5 |   { x: 0, y: 0, w: 2, h: 2, i: '0', static: false },
 6 |   { x: 2, y: 0, w: 2, h: 4, i: '1', static: true },
 7 |   { x: 4, y: 0, w: 2, h: 5, i: '2', static: false },
 8 |   { x: 6, y: 0, w: 2, h: 3, i: '3', static: false },
 9 |   { x: 8, y: 0, w: 2, h: 3, i: '4', static: false },
10 |   { x: 10, y: 0, w: 2, h: 3, i: '5', static: false },
11 |   { x: 0, y: 5, w: 2, h: 5, i: '6', static: false },
12 |   { x: 2, y: 5, w: 2, h: 5, i: '7', static: false },
13 |   { x: 4, y: 5, w: 2, h: 5, i: '8', static: false },
14 |   { x: 6, y: 3, w: 2, h: 4, i: '9', static: true },
15 |   { x: 8, y: 4, w: 2, h: 4, i: '10', static: false },
16 |   { x: 10, y: 4, w: 2, h: 4, i: '11', static: false },
17 |   { x: 0, y: 10, w: 2, h: 5, i: '12', static: false },
18 |   { x: 2, y: 10, w: 2, h: 5, i: '13', static: false },
19 |   { x: 4, y: 8, w: 2, h: 4, i: '14', static: false },
20 |   { x: 6, y: 8, w: 2, h: 4, i: '15', static: false },
21 |   { x: 8, y: 10, w: 2, h: 5, i: '16', static: false },
22 |   { x: 10, y: 4, w: 2, h: 2, i: '17', static: false },
23 |   { x: 0, y: 9, w: 2, h: 3, i: '18', static: false },
24 |   { x: 2, y: 6, w: 2, h: 2, i: '19', static: false },
25 | ])
26 | </script>
27 | 
28 | <template>
29 |   <GridLayout v-model:layout="layout" :row-height="30">
30 |     <template #item="{ item }">
31 |       <span class="text">{{ `${item.i}${item.static ? '- Static' : ''}` }}</span>
32 |     </template>
33 |   </GridLayout>
34 | </template>
35 | 
36 | <style scoped>
37 | .vgl-layout {
38 |   background-color: #eee;
39 | }
40 | 
41 | .vgl-layout::before {
42 |   position: absolute;
43 |   width: calc(100% - 5px);
44 |   height: calc(100% - 5px);
45 |   margin: 5px;
46 |   content: '';
47 |   background-image: linear-gradient(to right, lightgrey 1px, transparent 1px),
48 |     linear-gradient(to bottom, lightgrey 1px, transparent 1px);
49 |   background-repeat: repeat;
50 |   background-size: calc(calc(100% - 5px) / 12) 40px;
51 | }
52 | 
53 | :deep(.vgl-item:not(.vgl-item--placeholder)) {
54 |   background-color: #ccc;
55 |   border: 1px solid black;
56 | }
57 | 
58 | :deep(.vgl-item--resizing) {
59 |   opacity: 90%;
60 | }
61 | 
62 | :deep(.vgl-item--static) {
63 |   background-color: #cce;
64 | }
65 | 
66 | .text {
67 |   position: absolute;
68 |   inset: 0;
69 |   width: 100%;
70 |   height: 100%;
71 |   margin: auto;
72 |   font-size: 24px;
73 |   text-align: center;
74 | }
75 | </style>
76 | 


--------------------------------------------------------------------------------
/docs/demos/styling-placeholder.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { reactive } from 'vue'
 3 | 
 4 | const layout = reactive([
 5 |   { x: 0, y: 0, w: 2, h: 2, i: '0', static: false },
 6 |   { x: 2, y: 0, w: 2, h: 4, i: '1', static: true },
 7 |   { x: 4, y: 0, w: 2, h: 5, i: '2', static: false },
 8 |   { x: 6, y: 0, w: 2, h: 3, i: '3', static: false },
 9 |   { x: 8, y: 0, w: 2, h: 3, i: '4', static: false },
10 |   { x: 10, y: 0, w: 2, h: 3, i: '5', static: false },
11 |   { x: 0, y: 5, w: 2, h: 5, i: '6', static: false },
12 |   { x: 2, y: 5, w: 2, h: 5, i: '7', static: false },
13 |   { x: 4, y: 5, w: 2, h: 5, i: '8', static: false },
14 |   { x: 6, y: 3, w: 2, h: 4, i: '9', static: true },
15 |   { x: 8, y: 4, w: 2, h: 4, i: '10', static: false },
16 |   { x: 10, y: 4, w: 2, h: 4, i: '11', static: false },
17 |   { x: 0, y: 10, w: 2, h: 5, i: '12', static: false },
18 |   { x: 2, y: 10, w: 2, h: 5, i: '13', static: false },
19 |   { x: 4, y: 8, w: 2, h: 4, i: '14', static: false },
20 |   { x: 6, y: 8, w: 2, h: 4, i: '15', static: false },
21 |   { x: 8, y: 10, w: 2, h: 5, i: '16', static: false },
22 |   { x: 10, y: 4, w: 2, h: 2, i: '17', static: false },
23 |   { x: 0, y: 9, w: 2, h: 3, i: '18', static: false },
24 |   { x: 2, y: 6, w: 2, h: 2, i: '19', static: false },
25 | ])
26 | </script>
27 | 
28 | <template>
29 |   <GridLayout v-model:layout="layout" :row-height="30">
30 |     <template #item="{ item }">
31 |       <span class="text">{{ `${item.i}${item.static ? '- Static' : ''}` }}</span>
32 |     </template>
33 |   </GridLayout>
34 | </template>
35 | 
36 | <style scoped>
37 | .vgl-layout {
38 |   --vgl-placeholder-bg: green;
39 | 
40 |   background-color: #eee;
41 | }
42 | 
43 | :deep(.vgl-item:not(.vgl-item--placeholder)) {
44 |   background-color: #ccc;
45 |   border: 1px solid black;
46 | }
47 | 
48 | :deep(.vgl-item--resizing) {
49 |   opacity: 90%;
50 | }
51 | 
52 | :deep(.vgl-item--static) {
53 |   background-color: #cce;
54 | }
55 | 
56 | .text {
57 |   position: absolute;
58 |   inset: 0;
59 |   width: 100%;
60 |   height: 100%;
61 |   margin: auto;
62 |   font-size: 24px;
63 |   text-align: center;
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/docs/example/basic.md:
--------------------------------------------------------------------------------
 1 | # Basic Usage
 2 | 
 3 | ## Effect
 4 | 
 5 | <ClientOnly>
 6 |   <DemoBasic></DemoBasic>
 7 | </ClientOnly>
 8 | 
 9 | ## Source
10 | 
11 | <<< @/demos/basic.vue
12 | 


--------------------------------------------------------------------------------
/docs/example/bounded.md:
--------------------------------------------------------------------------------
 1 | # Items Bounded to Container
 2 | 
 3 | ## Effect
 4 | 
 5 | <ClientOnly>
 6 |   <DemoBounded></DemoBounded>
 7 | </ClientOnly>
 8 | 
 9 | ## Source
10 | 
11 | <<< @/demos/bounded.vue
12 | 


--------------------------------------------------------------------------------
/docs/example/drag-from-outside.md:
--------------------------------------------------------------------------------
 1 | # Drag From Outside
 2 | 
 3 | ## Effect
 4 | 
 5 | <ClientOnly>
 6 |   <DemoDragFromOutside></DemoDragFromOutside>
 7 | </ClientOnly>
 8 | 
 9 | ## Source
10 | 
11 | <<< @/demos/drag-from-outside.vue
12 | 


--------------------------------------------------------------------------------
/docs/example/drag-resize-handler.md:
--------------------------------------------------------------------------------
 1 | # Drag and Resize Handler
 2 | 
 3 | ## Effect
 4 | 
 5 | <ClientOnly>
 6 |   <DemoDragResizeHandler></DemoDragResizeHandler>
 7 | </ClientOnly>
 8 | 
 9 | ## Source
10 | 
11 | <<< @/demos/drag-resize-handler.vue
12 | 


--------------------------------------------------------------------------------
/docs/example/dynamic-add-remove.md:
--------------------------------------------------------------------------------
 1 | # Dynamic Add or Remove
 2 | 
 3 | ## Effect
 4 | 
 5 | <ClientOnly>
 6 |   <DemoDynamicAddRemove></DemoDynamicAddRemove>
 7 | </ClientOnly>
 8 | 
 9 | ## Source
10 | 
11 | <<< @/demos/dynamic-add-remove.vue
12 | 


--------------------------------------------------------------------------------
/docs/example/events.md:
--------------------------------------------------------------------------------
 1 | # Move and Resize Events
 2 | 
 3 | ## Effect
 4 | 
 5 | <ClientOnly>
 6 |   <DemoEvents></DemoEvents>
 7 | </ClientOnly>
 8 | 
 9 | ## Source
10 | 
11 | <<< @/demos/events.vue
12 | 


--------------------------------------------------------------------------------
/docs/example/mirrored.md:
--------------------------------------------------------------------------------
 1 | # Mirrored Grid Layout
 2 | 
 3 | ## Effect
 4 | 
 5 | <ClientOnly>
 6 |   <DemoMirrored></DemoMirrored>
 7 | </ClientOnly>
 8 | 
 9 | ## Source
10 | 
11 | <<< @/demos/mirrored.vue
12 | 


--------------------------------------------------------------------------------
/docs/example/multiple-grids.md:
--------------------------------------------------------------------------------
 1 | # Multiple Grid Layouts
 2 | 
 3 | ## Effect
 4 | 
 5 | <ClientOnly>
 6 |   <DemoMultipleGrids></DemoMultipleGrids>
 7 | </ClientOnly>
 8 | 
 9 | ## Source
10 | 
11 | <<< @/demos/multiple-grids.vue
12 | 


--------------------------------------------------------------------------------
/docs/example/prevent-collision.md:
--------------------------------------------------------------------------------
 1 | # Prevent Collision
 2 | 
 3 | ## Effect
 4 | 
 5 | <ClientOnly>
 6 |   <DemoPreventCollision></DemoPreventCollision>
 7 | </ClientOnly>
 8 | 
 9 | ## Source
10 | 
11 | <<< @/demos/prevent-collision.vue
12 | 


--------------------------------------------------------------------------------
/docs/example/responsive-layouts.md:
--------------------------------------------------------------------------------
 1 | # Predefined Responsive Layouts
 2 | 
 3 | ## Effect
 4 | 
 5 | <ClientOnly>
 6 |   <DemoResponsiveLayouts></DemoResponsiveLayouts>
 7 | </ClientOnly>
 8 | 
 9 | ## Source
10 | 
11 | <<< @/demos/responsive-layouts.vue
12 | 


--------------------------------------------------------------------------------
/docs/example/responsive.md:
--------------------------------------------------------------------------------
 1 | # Responsive
 2 | 
 3 | Since enabling responsive will create new layout object inside the component, the layout data passed via `v-model` must be defined using `ref` (not `reactive`), otherwise synchronization will not work.
 4 | 
 5 | ## Effect
 6 | 
 7 | <ClientOnly>
 8 |   <DemoResponsive></DemoResponsive>
 9 | </ClientOnly>
10 | 
11 | ## Source
12 | 
13 | <<< @/demos/responsive.vue
14 | 


--------------------------------------------------------------------------------
/docs/example/styling-grid-lines.md:
--------------------------------------------------------------------------------
 1 | # Styling Grid Lines
 2 | 
 3 | ## Effect
 4 | 
 5 | <ClientOnly>
 6 |   <DemoStylingGridLines></DemoStylingGridLines>
 7 | </ClientOnly>
 8 | 
 9 | ## Source
10 | 
11 | <<< @/demos/styling-grid-lines.vue
12 | 


--------------------------------------------------------------------------------
/docs/example/styling-placeholder.md:
--------------------------------------------------------------------------------
 1 | # Styling Placeholder
 2 | 
 3 | ## Effect
 4 | 
 5 | <ClientOnly>
 6 |   <DemoStylingPlaceholder></DemoStylingPlaceholder>
 7 | </ClientOnly>
 8 | 
 9 | ## Source
10 | 
11 | <<< @/demos/styling-placeholder.vue
12 | 


--------------------------------------------------------------------------------
/docs/guide/custom-style.md:
--------------------------------------------------------------------------------
 1 | # Custom Style
 2 | 
 3 | Grid style can be customized to fit your needs.
 4 | 
 5 | ::: tip
 6 | The class names of components have changed a lot. `grid-layout-plus` adopts the BEM naming convention, which is shorter and flatter than the original class name.
 7 | :::
 8 | 
 9 | ## Variables
10 | 
11 | ```css
12 | .vgl-layout {
13 |   --vgl-placeholder-bg: red;
14 |   --vgl-placeholder-opacity: 20%;
15 |   --vgl-placeholder-z-index: 2;
16 | 
17 |   --vgl-item-resizing-z-index: 3;
18 |   --vgl-item-resizing-opacity: 60%;
19 |   --vgl-item-dragging-z-index: 3;
20 |   --vgl-item-dragging-opacity: 100%;
21 | 
22 |   --vgl-resizer-size: 10px;
23 |   --vgl-resizer-border-color: #444;
24 |   --vgl-resizer-border-width: 2px;
25 | }
26 | ```
27 | 
28 | ## Placeholder
29 | 
30 | The default css for the placeholder is:
31 | 
32 | ```css
33 | .vgl-item--placeholder {
34 |   z-index: var(--vgl-placeholder-z-index, 2);
35 |   user-select: none;
36 |   background-color: var(--vgl-placeholder-bg, red);
37 |   opacity: var(--vgl-placeholder-opacity, 20%);
38 |   transition-duration: 100ms;
39 | }
40 | ```
41 | 
42 | You can override the background color via `--vgl-placeholder-bg` variable:
43 | 
44 | ```css
45 | .vgl-layout {
46 |   --vgl-placeholder-bg: green;
47 | }
48 | ```
49 | 
50 | In [this example](../example/styling-placeholder) we change the placeholder background color to green.
51 | 
52 | ## Grid Lines
53 | 
54 | To create grid lines to the layout, add the below css for GridLayout:
55 | 
56 | ```css
57 | .vgl-layout::before {
58 |   position: absolute;
59 |   width: calc(100% - 5px);
60 |   height: calc(100% - 5px);
61 |   margin: 5px;
62 |   content: '';
63 |   background-image:
64 |     linear-gradient(to right,lightgrey 1px,transparent 1px),
65 |     linear-gradient(to bottom, lightgrey 1px, transparent 1px);
66 |   background-repeat: repeat;
67 |   background-size: calc(calc(100% - 5px) / 12) 40px;
68 | }
69 | ```
70 | 
71 | CSS calculations for grid lines (names in `[]` are props of GridLayout):
72 | 
73 | - background size: `calc(calc(100% - [margin / 2]) / [col-num]) [row-height + margin]`
74 | - height: `calc(100% - [margin / 2])`
75 | - width: `calc(100% - [margin / 2])`
76 | - margin: `[margin / 2]`
77 | 
78 | In [this example](../example/styling-grid-lines) we add grid lines to the layout.
79 | 


--------------------------------------------------------------------------------
/docs/guide/events.md:
--------------------------------------------------------------------------------
  1 | # Events
  2 | 
  3 | Many events can be listened to each GridItem, so that you can be notified when a item changed.
  4 | 
  5 | Working example [here](../example/events).
  6 | 
  7 | ```vue
  8 | <template>
  9 |   <GridLayout
 10 |     v-model:layout="layout"
 11 |     :row-height="30"
 12 |     @layout-before-mount="layoutBeforeMount"
 13 |     @layout-mounted="layoutMounted"
 14 |     @layout-ready="layoutReady"
 15 |     @layout-updated="layoutUpdated"
 16 |     @breakpoint-changed="breakpointChanged"
 17 |   >
 18 |     <GridItem
 19 |       v-for="item in layout"
 20 |       :key="item.i"
 21 |       :x="item.x"
 22 |       :y="item.y"
 23 |       :w="item.w"
 24 |       :h="item.h"
 25 |       :i="item.i"
 26 |       @resize="resize"
 27 |       @move="move"
 28 |       @resized="resized"
 29 |       @container-resized="containerResized"
 30 |       @moved="moved"
 31 |     >
 32 |       {{ item.i }}
 33 |     </GridItem>
 34 |   </GridLayout>
 35 | </template>
 36 | ```
 37 | 
 38 | ## GridLayout
 39 | 
 40 | ### layout-before-mount
 41 | 
 42 | Layout beforeMount event.
 43 | 
 44 | Emited on the component beforeMount lifecycle hook.
 45 | 
 46 | ```ts
 47 | function layoutBeforeMount(newLayout: Layout): void
 48 | ```
 49 | 
 50 | ### layout-mounted
 51 | 
 52 | Layout mounted event.
 53 | 
 54 | Emited on the component mounted lifecycle hook.
 55 | 
 56 | ```ts
 57 | function layoutMounted(newLayout: Layout): void
 58 | ```
 59 | 
 60 | ### layout-ready
 61 | 
 62 | Layout ready event.
 63 | 
 64 | Emited when finish all the operations on the mount lifecycle hook.
 65 | 
 66 | ```ts
 67 | function layoutReady(newLayout: Layout): void
 68 | ```
 69 | 
 70 | ### layout-updated
 71 | 
 72 | Layout updated event.
 73 | 
 74 | Emitted every time the layout has finished updating and positions of all items are recalculated.
 75 | 
 76 | ```ts
 77 | function layoutUpdated(newLayout: Layout): void
 78 | ```
 79 | 
 80 | ### breakpoint-changed
 81 | 
 82 | Breakpoint Changed event.
 83 | 
 84 | Emitted every time the breakpoint value changes due to window resize.
 85 | 
 86 | ```ts
 87 | function breakpointChanged(newBreakpoint: Breakpoint, newLayout: Layout): void
 88 | ```
 89 | 
 90 | ## GridItem
 91 | 
 92 | ### move
 93 | 
 94 | Move event.
 95 | 
 96 | Emitted every time an item is being moved and changes position.
 97 | 
 98 | ```ts
 99 | function move(i: number | string, newX: number, newY: number): void
100 | ```
101 | 
102 | ### resize
103 | 
104 | Resize event.
105 | 
106 | Emitted every time an item is being resized and changes size.
107 | 
108 | ```ts
109 | function resize(i: number | string, newH: number, newW: number, newHPx: number, newWPx: number): void
110 | ```
111 | 
112 | ### moved
113 | 
114 | Moved event.
115 | 
116 | Emitted every time an item is finished moving and changes position.
117 | 
118 | ```ts
119 | function moved(i: number | string, newX: number, newY: number): void
120 | ```
121 | 
122 | ### resized
123 | 
124 | Resized event.
125 | 
126 | Emitted every time an item is finished resizing and changes size.
127 | 
128 | ```ts
129 | function resized(i: number | string, newH: number, newW: number, newHPx: number, newWPx: number): void
130 | ```
131 | 
132 | ### container-resized
133 | 
134 | Container Resized event.
135 | 
136 | Emitted every time the item or layout container resized.
137 | 
138 | ```ts
139 | function containerResized(i: number | string, newH: number, newW: number, newHPx: number, newWPx: number): void
140 | ```
141 | 


--------------------------------------------------------------------------------
/docs/guide/installation.md:
--------------------------------------------------------------------------------
 1 | # Installation
 2 | 
 3 | Using `pnpm` (Recommended):
 4 | 
 5 | ```sh
 6 | pnpm i grid-layout-plus
 7 | ```
 8 | 
 9 | Using `yarn`:
10 | 
11 | ```sh
12 | yarn add grid-layout-plus
13 | ```
14 | 
15 | ## Import
16 | 
17 | Globally import:
18 | 
19 | ```ts
20 | import { GridLayout, GridItem } from 'grid-layout-plus'
21 | 
22 | app
23 |   .component('GridLayout', GridLayout)
24 |   .component('GridItem', GridItem)
25 | ```
26 | 
27 | Import in a component:
28 | 
29 | ```vue
30 | <script setup lang="ts">
31 | import { GridLayout, GridItem } from 'grid-layout-plus'
32 | </script>
33 | ```
34 | 
35 | ```vue
36 | <script lang="ts">
37 | import { defineComponent } from 'vue'
38 | import { GridLayout, GridItem } from 'grid-layout-plus'
39 | 
40 | export default defineComponent({
41 |   components: {
42 |     GridLayout,
43 |     GridItem
44 |   }
45 | })
46 | </script>
47 | ```
48 | 
49 | ## Browser
50 | 
51 | Include the browser-ready bundle (download from [releases](https://github.com/qmhc/grid-layout-plus/releases)) in your page.
52 | 
53 | ```html
54 | <script src="dist/grid-layout-plus.js"></script>
55 | ```
56 | 


--------------------------------------------------------------------------------
/docs/guide/properties.md:
--------------------------------------------------------------------------------
  1 | # Properties
  2 | 
  3 | ## Types
  4 | 
  5 | ### LayoutItemRequired
  6 | 
  7 | ```ts
  8 | interface LayoutItemRequired {
  9 |   w: number,
 10 |   h: number,
 11 |   x: number,
 12 |   y: number,
 13 |   i: number | string
 14 | }
 15 | ```
 16 | 
 17 | ### LayoutItem
 18 | 
 19 | ```ts
 20 | interface LayoutItem extends LayoutItemRequired {
 21 |   minW?: number,
 22 |   minH?: number,
 23 |   maxW?: number,
 24 |   maxH?: number,
 25 |   moved?: boolean,
 26 |   static?: boolean,
 27 |   isDraggable?: boolean,
 28 |   isResizable?: boolean
 29 | }
 30 | ```
 31 | 
 32 | ### Layout
 33 | 
 34 | ```ts
 35 | type Layout = Array<LayoutItem>
 36 | ```
 37 | 
 38 | ### Breakpoint
 39 | 
 40 | ```ts
 41 | type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
 42 | ```
 43 | 
 44 | ### Breakpoints
 45 | 
 46 | ```ts
 47 | type Breakpoints = Record<Breakpoint, number>
 48 | ```
 49 | 
 50 | ### ResponsiveLayout
 51 | 
 52 | ```ts
 53 | type ResponsiveLayout = Record<Breakpoint, Layout>
 54 | ```
 55 | 
 56 | ## GridLayout
 57 | 
 58 | ### layout
 59 | 
 60 | - type: `Layout`
 61 | - required
 62 | 
 63 | This is the initial layout of the grid.
 64 | 
 65 | The value must be an array. Each item must have `i`, `x`, `y`, `w` and `h` properties. Please refer to the documentation for `GridItem` below for more information.
 66 | 
 67 | ### responsive-layouts
 68 | 
 69 | - type: `Partial<ResponsiveLayout>`
 70 | - default: `{}`
 71 | 
 72 | This is the initial layouts of the grid per breakpoint if `responsive` is set to `true`.
 73 | 
 74 | The keys of the object are breakpoint names and each value is an array as defined by `layout` prop, e.g. `{ lg: [layout items], md: [layout items] }`.
 75 | 
 76 | Setting the prop after the creation of the GridLayout has no effect.
 77 | 
 78 | See also [responsive](#responsive), [breakpoints](#breakpoints) and [cols](#cols).
 79 | 
 80 | ### col-num
 81 | 
 82 | - type: `number`
 83 | - default: `12`
 84 | 
 85 | Says how many columns the grid has. The value should be a *natural number*.
 86 | 
 87 | ### row-height
 88 | 
 89 | - type: `number`
 90 | - default: `150`
 91 | 
 92 | Says what is a height of a single row in pixels.
 93 | 
 94 | ### max-rows
 95 | 
 96 | - type: `number`
 97 | - default: `Infinity`
 98 | 
 99 | Says what is a maximal number of rows in the grid.
100 | 
101 | ### margin
102 | 
103 | - type: `number[]`
104 | - default: `[10, 10]`
105 | 
106 | Says what are the margins of elements inside the grid.
107 | 
108 | The value must be a number array with size two. Each value is expressed in pixels. The first value is horizontal margin, the second value is vertical margin.
109 | 
110 | ### is-draggable
111 | 
112 | - type: `boolean`
113 | - default: `true`
114 | 
115 | Says if the grids items are draggable.
116 | 
117 | ### is-resizable
118 | 
119 | - type: `boolean`
120 | - default: `true`
121 | 
122 | Says if the grids items are resizable.
123 | 
124 | ### is-mirrored
125 | 
126 | - type: `boolean`
127 | - default: `false`
128 | 
129 | Says if the RTL/LTR should be reversed.
130 | 
131 | ### is-bounded
132 | 
133 | - type: `boolean`
134 | - default: `false`
135 | 
136 | Says if the grid items are bounded to the container when dragging.
137 | 
138 | ### auto-size
139 | 
140 | - type: `boolean`
141 | - default: `true`
142 | 
143 | Says if the container height should swells and contracts to fit contents.
144 | 
145 | ### vertical-compact
146 | 
147 | - type: `boolean`
148 | - default: `true`
149 | 
150 | Says if the layout should be compact vertically.
151 | 
152 | ### restore-on-drag
153 | 
154 | - type: `boolean`
155 | - default: `false`
156 | 
157 | Says if the moved grid items should be restored after an item has been dragged over.
158 | 
159 | ### prevent-collision
160 | 
161 | - type: `boolean`
162 | - default: `false`
163 | 
164 | Says whether to prevent items collision. When `true`, the items can only be dropped to the blank space.
165 | 
166 | ### use-css-transforms
167 | 
168 | - type: `boolean`
169 | - default: `true`
170 | 
171 | Says if the CSS `transition-property: transform;` should be used.
172 | 
173 | ### responsive
174 | 
175 | - type: `boolean`
176 | - default: `false`
177 | 
178 | Says if the layout should be responsive to window width.
179 | 
180 | See also [responsiveLayouts](#responsive-layouts), [breakpoints](#breakpoints) and [cols](#cols).
181 | 
182 | ### breakpoints
183 | 
184 | - type: `Breakpoints`
185 | - default: `{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }`
186 | 
187 | Breakpoints defined for responsive layout.
188 | 
189 | See also [responsiveLayouts](#responsive-layouts) and [cols](#cols)
190 | 
191 | ### cols
192 | 
193 | - type: `Breakpoints`
194 | - default: `{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }`
195 | 
196 | Defines number of columns for each breakpoint.
197 | 
198 | ### use-style-cursor
199 | 
200 | - type: `boolean`
201 | - default: `true`
202 | 
203 | Says if set the cursor style dynamically. When dragging freezes, setting this value to `false` may alleviate problems.
204 | 
205 | **This property is not reactive.**
206 | 
207 | ### transform-scale
208 | 
209 | - type: `number`
210 | - default: `1`
211 | 
212 | Sets a scaling factor to the size of the grid items, `1` means 100%.
213 | 
214 | ## GridItem
215 | 
216 | ### i
217 | 
218 | - type: `number | string`
219 | - required
220 | 
221 | This is the unique identifier of the item.
222 | 
223 | ### x
224 | 
225 | - type: `number`
226 | - required
227 | 
228 | Says what is a initial horizontal position of the item (in which column it should be placed). The value must be a *whole number*.
229 | 
230 | ### y
231 | 
232 | - type: `number`
233 | - required
234 | 
235 | Says what is a initial vertical position of the item (in which row it should be placed). The value must be a *whole number*.
236 | 
237 | ### w
238 | 
239 | - type: `number`
240 | - required
241 | 
242 | Says what is a initial width of the item (how many columns should span). The value must be a *whole number*.
243 | 
244 | ### h
245 | 
246 | - type: `number`
247 | - required
248 | 
249 | Says what is a initial height of the item (how many rows should span). The value must be a *whole number*.
250 | 
251 | ### min-w
252 | 
253 | - type: `number`
254 | - default: `1`
255 | 
256 | Says what is a minimal width of the item. If `w` is smaller then `min-w`, then `w` will be set to `min-w`.
257 | 
258 | ### min-h
259 | 
260 | - type: `number`
261 | - default: `1`
262 | 
263 | Says what is a minimal hieght of the item. If `h` is smaller then `min-h`, then `h` will be set to `min-h`.
264 | 
265 | ### max-w
266 | 
267 | - type: `number`
268 | - default: `Infinity`
269 | 
270 | Says what is a maximal width of the item. If `w` is bigger then `max-w`, then `w` will be set to `max-w`.
271 | 
272 | ### max-h
273 | 
274 | - type: `number`
275 | - default: `Infinity`
276 | 
277 | Says what is a maximal height of the item. If `h` is bigger then `max-h`, then `h` will be set to `max-h`.
278 | 
279 | ### is-draggable
280 | 
281 | - type: `boolean`
282 | - default: `null`
283 | 
284 | Says if item is draggable. If `null` then it's inherited from parent.
285 | 
286 | ### is-resizable
287 | 
288 | - type: `boolean`
289 | - default: `null`
290 | 
291 | Says if item is resizable. If `null` then it's inherited from parent.
292 | 
293 | ### is-bounded
294 | 
295 | - type: `boolean`
296 | - default: `null`
297 | 
298 | Says if the item is bounded to the container when dragging. If  `null` then it's inherited from parent.
299 | 
300 | ### static
301 | 
302 | - type: `boolean`
303 | - default: `false`
304 | 
305 | Says if item is static (won't be draggable, resizable or moved by other items).
306 | 
307 | ### drag-ignore-from
308 | 
309 | - type: `string`
310 | - default: `'a, button'`
311 | 
312 | Says which elements of the item shouldn't trigger drag event of the item. The value is `css-like` selector string.
313 | 
314 | For more info please refer to `ignoreFrom` in [interact.js docs](http://interactjs.io/docs/#ignorable-selectors).
315 | 
316 | ### drag-allow-from
317 | 
318 | - type: `string`
319 | - default: `null`
320 | 
321 | Says which elements of the item should trigger drag event of the item. The value is `css-like` selector string.
322 | 
323 | If `null`, can trigger drag by any element of the item (excluding `drag-ignore-from`).
324 | 
325 | For more info please refer to `allowFrom` in [interact.js docs](http://interactjs.io/docs/#ignorable-selectors).
326 | 
327 | ### resize-ignore-from
328 | 
329 | - type: `string`
330 | - default: `'a, button'`
331 | 
332 | Says which elements of the item shouldn't trigger resize event of the item. The value is `css-like` selector string.
333 | 
334 | For more info please refer to `ignoreFrom` in [interact.js docs](http://interactjs.io/docs/#ignorable-selectors).
335 | 
336 | ### preserve-aspect-ratio
337 | 
338 | - type: `boolean`
339 | - default: `false`
340 | 
341 | If `true`, forces the GridItem to preserve its aspect ratio when resizing.
342 | 
343 | ### drag-option
344 | 
345 | - type: `Record<string, any>`
346 | - default: `{}`
347 | 
348 | Passthrough object for the grid item [interact.js draggable configuration](https://interactjs.io/docs/draggable/).
349 | 
350 | ### resize-option
351 | 
352 | - type: `Record<string, any>`
353 | - default: `{}`
354 | 
355 | Passthrough object for the grid item [interact.js resizable configuration](https://interactjs.io/docs/resizable/).
356 | 


--------------------------------------------------------------------------------
/docs/guide/usage.md:
--------------------------------------------------------------------------------
 1 | # Usage
 2 | 
 3 | ## Data
 4 | 
 5 | First, we define a layout data. It's an array, each item should include `i` (id), `x`, `y`, `w` and `h` properties.
 6 | 
 7 | ```vue
 8 | <script setup lang="ts">
 9 | import { reactive } from 'vue'
10 | 
11 | const layout = reactive([
12 |   { x: 0, y: 0, w: 2, h: 2, i: '0' },
13 |   { x: 2, y: 0, w: 2, h: 4, i: '1' }
14 | ])
15 | </script>
16 | ```
17 | 
18 | ## Component
19 | 
20 | And there are two ways to define items, using `item` slot or `default` slot.
21 | 
22 | Using `item` slot is an easier way to define elements of each item, the properties of layout items definition will auto be passed for GridItem component inernally.
23 | 
24 | ```vue
25 | <template>
26 |   <!-- Item slot usage -->
27 |   <GridLayout
28 |     v-model:layout="layout"
29 |     :col-num="12"
30 |     :row-height="30"
31 |     is-draggable
32 |     is-resizable
33 |     vertical-compact
34 |     use-css-transforms
35 |   >
36 |     <template #item="{ item }">
37 |       {{ item.i }}
38 |     </template>
39 |   </GridLayout>
40 | </template>
41 | ```
42 | 
43 | If you want a more flexible way to listen events of GridItem component, you also can chose the `default` slot.
44 | 
45 | ```vue
46 | <template>
47 |   <!-- Default slot usage -->
48 |   <GridLayout
49 |     v-model:layout="layout"
50 |     :col-num="12"
51 |     :row-height="30"
52 |     is-draggable
53 |     is-resizable
54 |     vertical-compact
55 |     use-css-transforms
56 |   >
57 |     <GridItem
58 |       v-for="item in layout"
59 |       :key="item.i"
60 |       :x="item.x"
61 |       :y="item.y"
62 |       :w="item.w"
63 |       :h="item.h"
64 |       :i="item.i"
65 |       @resize="handleResize"
66 |     >
67 |       {{ item.i }}
68 |     </GridItem>
69 |   </GridLayout>
70 | </template>
71 | ```
72 | 


--------------------------------------------------------------------------------
/docs/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: home
 3 | 
 4 | hero:
 5 |   name: Grid Layout Plus
 6 |   text: A draggable and resizable grid layout for Vue 3
 7 |   tagline: A grid layout system for Vue 3. Heavily inspired by React Grid Layout.
 8 |   image: /grid-layout-plus.svg
 9 |   actions:
10 |     - theme: brand
11 |       text: Get Started
12 |       link: /guide/installation
13 |     - theme: alt
14 |       text: View on GitHub
15 |       link: https://github.com/qmhc/grid-layout-plus
16 | 
17 | features:
18 |   - title: ✥ Draggable widgets
19 |     details:
20 |   - title: ⇲ Resizable widgets
21 |     details:
22 |   - title: Static widgets
23 |     details: 
24 |   - title: Bounds checking for dragging and resizing
25 |     details: 
26 |   - title: Widgets can be added or removed without rebuilding grid
27 |     details: 
28 |   - title: Layout can be serialized and restored
29 |     details: 
30 |   - title: Automatic RTL support
31 |     details: 
32 |   - title: Responsive
33 |     details: 
34 |   - title: Min/max w/h per item
35 |     details: 
36 | ---
37 | 


--------------------------------------------------------------------------------
/docs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "grid-layout-plus-docs",
 3 |   "type": "module",
 4 |   "scripts": {
 5 |     "build": "vitepress build",
 6 |     "preview": "vitepress preview",
 7 |     "serve": "vitepress dev"
 8 |   },
 9 |   "dependencies": {
10 |     "@vexip-ui/utils": "^2.13.0",
11 |     "grid-layout-plus": "workspace:*",
12 |     "vexip-ui": "^2.3.1",
13 |     "vue": "^3.3.10"
14 |   },
15 |   "devDependencies": {
16 |     "vitepress": "1.0.0-alpha.73"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/docs/public/grid-layout-plus.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34">
 2 |   <g fill="#476a8a">
 3 |     <rect width="10" height="10" rx="1" ry="1" />
 4 |     <rect width="10" height="10" rx="1" ry="1" x="24" />
 5 |     <rect width="10" height="10" rx="1" ry="1" x="12" y="12" />
 6 |     <rect width="10" height="10" rx="1" ry="1" y="24" />
 7 |     <rect width="10" height="10" rx="1" ry="1" x="24" y="24" />
 8 |   </g>
 9 |   <g fill="#20c997">
10 |     <rect width="10" height="10" rx="1" ry="1" x="12" />
11 |     <rect width="10" height="10" rx="1" ry="1" y="12" />
12 |     <rect width="10" height="10" rx="1" ry="1" x="24" y="12" />
13 |     <rect width="10" height="10" rx="1" ry="1" x="12" y="24" />
14 |   </g>
15 | </svg>
16 | 


--------------------------------------------------------------------------------
/docs/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "allowJs": false,
 6 |     "strict": true,
 7 |     "jsx": "preserve",
 8 |     "importHelpers": true,
 9 |     "moduleResolution": "node",
10 |     "skipLibCheck": true,
11 |     "noUnusedLocals": false,
12 |     "experimentalDecorators": true,
13 |     "resolveJsonModule": true,
14 |     "esModuleInterop": true,
15 |     "allowSyntheticDefaultImports": true,
16 |     "sourceMap": false,
17 |     "baseUrl": ".",
18 |     "paths": {
19 |       "grid-layout-plus": ["../src"]
20 |     },
21 |     "types": [
22 |       "node",
23 |       "vite/client"
24 |     ],
25 |     "lib": [
26 |       "esnext",
27 |       "dom"
28 |     ]
29 |   },
30 |   "include": [
31 |     "**/*",
32 |     ".vitepress/**/*"
33 |   ],
34 |   "exclude": [
35 |     "node_modules"
36 |   ]
37 | }
38 | 


--------------------------------------------------------------------------------
/docs/zh/example/basic.md:
--------------------------------------------------------------------------------
 1 | # 基础用法
 2 | 
 3 | ## 效果
 4 | 
 5 | <ClientOnly>
 6 |   <DemoBasic></DemoBasic>
 7 | </ClientOnly>
 8 | 
 9 | ## 源码
10 | 
11 | <<< @/demos/basic.vue
12 | 


--------------------------------------------------------------------------------
/docs/zh/example/bounded.md:
--------------------------------------------------------------------------------
 1 | # 元素绑定容器
 2 | 
 3 | ## 效果
 4 | 
 5 | <ClientOnly>
 6 |   <DemoBounded></DemoBounded>
 7 | </ClientOnly>
 8 | 
 9 | ## 源码
10 | 
11 | <<< @/demos/bounded.vue
12 | 


--------------------------------------------------------------------------------
/docs/zh/example/drag-from-outside.md:
--------------------------------------------------------------------------------
 1 | # 从外部拖入
 2 | 
 3 | ## 效果
 4 | 
 5 | <ClientOnly>
 6 |   <DemoDragFromOutside></DemoDragFromOutside>
 7 | </ClientOnly>
 8 | 
 9 | ## 源码
10 | 
11 | <<< @/demos/drag-from-outside.vue
12 | 


--------------------------------------------------------------------------------
/docs/zh/example/drag-resize-handler.md:
--------------------------------------------------------------------------------
 1 | # 拖拽和缩放手柄
 2 | 
 3 | ## 效果
 4 | 
 5 | <ClientOnly>
 6 |   <DemoDragResizeHandler></DemoDragResizeHandler>
 7 | </ClientOnly>
 8 | 
 9 | ## 源码
10 | 
11 | <<< @/demos/drag-resize-handler.vue
12 | 


--------------------------------------------------------------------------------
/docs/zh/example/dynamic-add-remove.md:
--------------------------------------------------------------------------------
 1 | # 动态增减元素
 2 | 
 3 | ## 效果
 4 | 
 5 | <ClientOnly>
 6 |   <DemoDynamicAddRemove></DemoDynamicAddRemove>
 7 | </ClientOnly>
 8 | 
 9 | ## 源码
10 | 
11 | <<< @/demos/dynamic-add-remove.vue
12 | 


--------------------------------------------------------------------------------
/docs/zh/example/events.md:
--------------------------------------------------------------------------------
 1 | # 移动和缩放事件
 2 | 
 3 | ## 效果
 4 | 
 5 | <ClientOnly>
 6 |   <DemoEvents></DemoEvents>
 7 | </ClientOnly>
 8 | 
 9 | ## 源码
10 | 
11 | <<< @/demos/events.vue
12 | 


--------------------------------------------------------------------------------
/docs/zh/example/mirrored.md:
--------------------------------------------------------------------------------
 1 | # 镜像栅格布局
 2 | 
 3 | ## 效果
 4 | 
 5 | <ClientOnly>
 6 |   <DemoMirrored></DemoMirrored>
 7 | </ClientOnly>
 8 | 
 9 | ## 源码
10 | 
11 | <<< @/demos/mirrored.vue
12 | 


--------------------------------------------------------------------------------
/docs/zh/example/multiple-grids.md:
--------------------------------------------------------------------------------
 1 | # 多个栅格布局
 2 | 
 3 | ## 效果
 4 | 
 5 | <ClientOnly>
 6 |   <DemoMultipleGrids></DemoMultipleGrids>
 7 | </ClientOnly>
 8 | 
 9 | ## 源码
10 | 
11 | <<< @/demos/multiple-grids.vue
12 | 


--------------------------------------------------------------------------------
/docs/zh/example/prevent-collision.md:
--------------------------------------------------------------------------------
 1 | # 阻止碰撞
 2 | 
 3 | ## 效果
 4 | 
 5 | <ClientOnly>
 6 |   <DemoPreventCollision></DemoPreventCollision>
 7 | </ClientOnly>
 8 | 
 9 | ## 源码
10 | 
11 | <<< @/demos/prevent-collision.vue
12 | 


--------------------------------------------------------------------------------
/docs/zh/example/responsive-layouts.md:
--------------------------------------------------------------------------------
 1 | # 预设响应式布局
 2 | 
 3 | ## 效果
 4 | 
 5 | <ClientOnly>
 6 |   <DemoResponsiveLayouts></DemoResponsiveLayouts>
 7 | </ClientOnly>
 8 | 
 9 | ## 源码
10 | 
11 | <<< @/demos/responsive-layouts.vue
12 | 


--------------------------------------------------------------------------------
/docs/zh/example/responsive.md:
--------------------------------------------------------------------------------
 1 | # 响应式
 2 | 
 3 | 因为开启 responsive 后组件会创建全新的 layout 对象，所以传入 `v-model` 中的数据需要使用 `ref` 定义（不是 `reactive`），否则将无法同步。
 4 | 
 5 | ## 效果
 6 | 
 7 | <ClientOnly>
 8 |   <DemoResponsive></DemoResponsive>
 9 | </ClientOnly>
10 | 
11 | ## 源码
12 | 
13 | <<< @/demos/responsive.vue
14 | 


--------------------------------------------------------------------------------
/docs/zh/example/styling-grid-lines.md:
--------------------------------------------------------------------------------
 1 | # 定制栅格线
 2 | 
 3 | ## 效果
 4 | 
 5 | <ClientOnly>
 6 |   <DemoStylingGridLines></DemoStylingGridLines>
 7 | </ClientOnly>
 8 | 
 9 | ## 源码
10 | 
11 | <<< @/demos/styling-grid-lines.vue
12 | 


--------------------------------------------------------------------------------
/docs/zh/example/styling-placeholder.md:
--------------------------------------------------------------------------------
 1 | # 定制占位符
 2 | 
 3 | ## 效果
 4 | 
 5 | <ClientOnly>
 6 |   <DemoStylingPlaceholder></DemoStylingPlaceholder>
 7 | </ClientOnly>
 8 | 
 9 | ## 源码
10 | 
11 | <<< @/demos/styling-placeholder.vue
12 | 


--------------------------------------------------------------------------------
/docs/zh/guide/custom-style.md:
--------------------------------------------------------------------------------
 1 | # 定制样式
 2 | 
 3 | 栅格的样式可以根据你的需要进行定制。
 4 | 
 5 | ::: tip 提示
 6 | 栅格的类名是变化比较大的部分，`grid-layout-plus` 采用了 BEM 命名规范，相较原来类名变得更简短与扁平。
 7 | :::
 8 | 
 9 | ## Variables
10 | 
11 | ```css
12 | .vgl-layout {
13 |   --vgl-placeholder-bg: red;
14 |   --vgl-placeholder-opacity: 20%;
15 |   --vgl-placeholder-z-index: 2;
16 | 
17 |   --vgl-item-resizing-z-index: 3;
18 |   --vgl-item-resizing-opacity: 60%;
19 |   --vgl-item-dragging-z-index: 3;
20 |   --vgl-item-dragging-opacity: 100%;
21 | 
22 |   --vgl-resizer-size: 10px;
23 |   --vgl-resizer-border-color: #444;
24 |   --vgl-resizer-border-width: 2px;
25 | }
26 | ```
27 | 
28 | ## 占位符
29 | 
30 | 占位符的默认样式：
31 | 
32 | ```css
33 | .vgl-item--placeholder {
34 |   z-index: var(--vgl-placeholder-z-index, 2);
35 |   user-select: none;
36 |   background-color: var(--vgl-placeholder-bg, red);
37 |   opacity: var(--vgl-placeholder-opacity, 20%);
38 |   transition-duration: 100ms;
39 | }
40 | ```
41 | 
42 | 你可以通过 `--vgl-placeholder-bg` 变量修改底色：
43 | 
44 | ```css
45 | .vgl-layout {
46 |   --vgl-placeholder-bg: green;
47 | }
48 | ```
49 | 
50 | 在 [这个示例](../example/styling-placeholder) 我们修改占位符的底色为绿色。
51 | 
52 | ## 栅格线
53 | 
54 | 为 GridLayout 添加下面的样式以创建栅格线。
55 | 
56 | ```css
57 | .vgl-layout::before {
58 |   position: absolute;
59 |   width: calc(100% - 5px);
60 |   height: calc(100% - 5px);
61 |   margin: 5px;
62 |   content: '';
63 |   background-image:
64 |     linear-gradient(to right,lightgrey 1px,transparent 1px),
65 |     linear-gradient(to bottom, lightgrey 1px, transparent 1px);
66 |   background-repeat: repeat;
67 |   background-size: calc(calc(100% - 5px) / 12) 40px;
68 | }
69 | ```
70 | 
71 | 栅格线的 CSS 的计算（在 `[]` 里的名字为 GridLayout 的属性）：
72 | 
73 | - background size: `calc(calc(100% - [margin / 2]) / [col-num]) [row-height + margin]`
74 | - height: `calc(100% - [margin / 2])`
75 | - width: `calc(100% - [margin / 2])`
76 | - margin: `[margin / 2]`
77 | 
78 | 在 [这个示例](../example/styling-grid-lines) 我们为布局添加了栅格线。
79 | 


--------------------------------------------------------------------------------
/docs/zh/guide/events.md:
--------------------------------------------------------------------------------
  1 | # 事件
  2 | 
  3 | 可以单独监听每个 GridItem 的各种事件，使的你可以第一时间知道栅格元素发生了变化。
  4 | 
  5 | [这里](../example/events) 可以查看一个真实的示例。
  6 | 
  7 | ```vue
  8 | <template>
  9 |   <GridLayout
 10 |     v-model:layout="layout"
 11 |     :row-height="30"
 12 |     @layout-before-mount="layoutBeforeMount"
 13 |     @layout-mounted="layoutMounted"
 14 |     @layout-ready="layoutReady"
 15 |     @layout-updated="layoutUpdated"
 16 |     @breakpoint-changed="breakpointChanged"
 17 |   >
 18 |     <GridItem
 19 |       v-for="item in layout"
 20 |       :key="item.i"
 21 |       :x="item.x"
 22 |       :y="item.y"
 23 |       :w="item.w"
 24 |       :h="item.h"
 25 |       :i="item.i"
 26 |       @resize="resize"
 27 |       @move="move"
 28 |       @resized="resized"
 29 |       @container-resized="containerResized"
 30 |       @moved="moved"
 31 |     >
 32 |       {{ item.i }}
 33 |     </GridItem>
 34 |   </GridLayout>
 35 | </template>
 36 | ```
 37 | 
 38 | ## GridLayout
 39 | 
 40 | ### layout-before-mount
 41 | 
 42 | 布局即将挂载事件。
 43 | 
 44 | 在组件的挂载前生命周期派发。
 45 | 
 46 | ```ts
 47 | function layoutBeforeMount(newLayout: Layout): void
 48 | ```
 49 | 
 50 | ### layout-mounted
 51 | 
 52 | 布局挂载事件。
 53 | 
 54 | 在组件的挂载生命周期派发。
 55 | 
 56 | ```ts
 57 | function layoutMounted(newLayout: Layout): void
 58 | ```
 59 | 
 60 | ### layout-ready
 61 | 
 62 | 布局准备就绪事件。
 63 | 
 64 | 在挂载生命周期中的所有操作完成后派发。
 65 | 
 66 | ```ts
 67 | function layoutReady(newLayout: Layout): void
 68 | ```
 69 | 
 70 | ### layout-updated
 71 | 
 72 | 布局更新事件。
 73 | 
 74 | 每次布局更新完成并且所有栅格元素的位置都已计算后派发。
 75 | 
 76 | ```ts
 77 | function layoutUpdated(newLayout: Layout): void
 78 | ```
 79 | 
 80 | ### breakpoint-changed
 81 | 
 82 | 断点变化事件。
 83 | 
 84 | 每次断点值由于窗口的缩放发生变化时派发。
 85 | 
 86 | ```ts
 87 | function breakpointChanged(newBreakpoint: Breakpoint, newLayout: Layout): void
 88 | ```
 89 | 
 90 | ## GridItem
 91 | 
 92 | ### move
 93 | 
 94 | 移动事件。
 95 | 
 96 | 每次栅格元素进入移动并改变位置时派发。
 97 | 
 98 | ```ts
 99 | function move(i: number | string, newX: number, newY: number): void
100 | ```
101 | 
102 | ### resize
103 | 
104 | 缩放事件。
105 | 
106 | 每次栅格元素进入缩放并改变大小时派发。
107 | 
108 | ```ts
109 | function resize(i: number | string, newH: number, newW: number, newHPx: number, newWPx: number): void
110 | ```
111 | 
112 | ### moved
113 | 
114 | 移动后事件。
115 | 
116 | 每次元素结束移动并改变位置时派发。
117 | 
118 | ```ts
119 | function moved(i: number | string, newX: number, newY: number): void
120 | ```
121 | 
122 | ### resized
123 | 
124 | 缩放后事件。
125 | 
126 | 每次元素结束缩放并改变大小时派发。
127 | 
128 | ```ts
129 | function resized(i: number | string, newH: number, newW: number, newHPx: number, newWPx: number): void
130 | ```
131 | 
132 | ### container-resized
133 | 
134 | 容器缩放事件。
135 | 
136 | 每次栅格元素或布局容器大小变化时派发。
137 | 
138 | ```ts
139 | function containerResized(i: number | string, newH: number, newW: number, newHPx: number, newWPx: number): void
140 | ```
141 | 


--------------------------------------------------------------------------------
/docs/zh/guide/installation.md:
--------------------------------------------------------------------------------
 1 | # 安装
 2 | 
 3 | 使用 `pnpm`（推荐）：
 4 | 
 5 | ```sh
 6 | pnpm i grid-layout-plus
 7 | ```
 8 | 
 9 | 使用 `yarn`：
10 | 
11 | ```sh
12 | yarn add grid-layout-plus
13 | ```
14 | 
15 | ## 引入
16 | 
17 | 全局引入：
18 | 
19 | ```ts
20 | import { GridLayout, GridItem } from 'grid-layout-plus'
21 | 
22 | app
23 |   .component('GridLayout', GridLayout)
24 |   .component('GridItem', GridItem)
25 | ```
26 | 
27 | 在组件内引入：
28 | 
29 | ```vue
30 | <script setup lang="ts">
31 | import { GridLayout, GridItem } from 'grid-layout-plus'
32 | </script>
33 | ```
34 | 
35 | ```vue
36 | <script lang="ts">
37 | import { defineComponent } from 'vue'
38 | import { GridLayout, GridItem } from 'grid-layout-plus'
39 | 
40 | export default defineComponent({
41 |   components: {
42 |     GridLayout,
43 |     GridItem
44 |   }
45 | })
46 | </script>
47 | ```
48 | 
49 | ## 浏览器
50 | 
51 | 在你的页面添加可用于浏览器的软件包 (从 [发布](https://github.com/qmhc/grid-layout-plus/releases) 中下载)。
52 | 
53 | ```html
54 | <script src="dist/grid-layout-plus.js"></script>
55 | ```
56 | 


--------------------------------------------------------------------------------
/docs/zh/guide/properties.md:
--------------------------------------------------------------------------------
  1 | # 属性
  2 | 
  3 | ## 类型
  4 | 
  5 | ### LayoutItemRequired
  6 | 
  7 | ```ts
  8 | interface LayoutItemRequired {
  9 |   w: number,
 10 |   h: number,
 11 |   x: number,
 12 |   y: number,
 13 |   i: number | string
 14 | }
 15 | ```
 16 | 
 17 | ### LayoutItem
 18 | 
 19 | ```ts
 20 | interface LayoutItem extends LayoutItemRequired {
 21 |   minW?: number,
 22 |   minH?: number,
 23 |   maxW?: number,
 24 |   maxH?: number,
 25 |   moved?: boolean,
 26 |   static?: boolean,
 27 |   isDraggable?: boolean,
 28 |   isResizable?: boolean
 29 | }
 30 | ```
 31 | 
 32 | ### Layout
 33 | 
 34 | ```ts
 35 | type Layout = Array<LayoutItem>
 36 | ```
 37 | 
 38 | ### Breakpoint
 39 | 
 40 | ```ts
 41 | type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
 42 | ```
 43 | 
 44 | ### Breakpoints
 45 | 
 46 | ```ts
 47 | type Breakpoints = Record<Breakpoint, number>
 48 | ```
 49 | 
 50 | ### ResponsiveLayout
 51 | 
 52 | ```ts
 53 | type ResponsiveLayout = Record<Breakpoint, Layout>
 54 | ```
 55 | 
 56 | ## GridLayout
 57 | 
 58 | ### layout
 59 | 
 60 | - 类型：`Layout`
 61 | - 必须的
 62 | 
 63 | 这是栅格的初始布局。
 64 | 
 65 | 值必须是一个数组。每个元素都须包含 `i`、`x`、`y`、`w` 和 `h` 属性。更多信息请参考下面的 `GridItem` 文档。
 66 | 
 67 | ### responsive-layouts
 68 | 
 69 | - 类型：`Partial<ResponsiveLayout>`
 70 | - 默认值：`{}`
 71 | 
 72 | 如果 `responsive` 设置为 `true`，该配置将作为栅格中每个断点的初始布局。
 73 | 
 74 | 对象的键值是断点的名称，每个值则对应 `layout` 属性所定义的数组，例如：`{ lg: [layout items], md: [layout items] }`.
 75 | 
 76 | 注意，在创建栅格布局后再设置该属性是无效的。
 77 | 
 78 | 见 [responsive](#responsive)、[breakpoints](#breakpoints) 和 [cols](#cols)。
 79 | 
 80 | ### col-num
 81 | 
 82 | - 类型：`number`
 83 | - 默认值：`12`
 84 | 
 85 | 定义栅格系统的列数，其值须为*自然数*。
 86 | 
 87 | ### row-height
 88 | 
 89 | - 类型：`number`
 90 | - 默认值：`150`
 91 | 
 92 | 每行的高度的像素值。
 93 | 
 94 | ### max-rows
 95 | 
 96 | - 类型：`number`
 97 | - 默认值：`Infinity`
 98 | 
 99 | 定义栅格的最大行数。
100 | 
101 | ### margin
102 | 
103 | - 类型：`number[]`
104 | - 默认值：`[10, 10]`
105 | 
106 | 定义栅格中的元素外边距。
107 | 
108 | 其值须为包含两个像素的数组。第一个值代表横向外边距，第二个值代表纵向外边距。
109 | 
110 | ### is-draggable
111 | 
112 | - 类型：`boolean`
113 | - 默认值：`true`
114 | 
115 | 表示栅格中的元素是否可拖拽。
116 | 
117 | ### is-resizable
118 | 
119 | - 类型：`boolean`
120 | - 默认值：`true`
121 | 
122 | 表示栅格中的元素是否可缩放。
123 | 
124 | ### is-mirrored
125 | 
126 | - 类型：`boolean`
127 | - 默认值：`false`
128 | 
129 | 表示栅格中的元素是否可镜像反转。
130 | 
131 | ### is-bounded
132 | 
133 | - 类型：`boolean`
134 | - 默认值：`false`
135 | 
136 | 表示栅格中的元素在拖拽时是否绑定在容器中。
137 | 
138 | ### auto-size
139 | 
140 | - 类型：`boolean`
141 | - 默认值：`true`
142 | 
143 | 表示容器的高度是否自适应。
144 | 
145 | ### vertical-compact
146 | 
147 | - 类型：`boolean`
148 | - 默认值：`true`
149 | 
150 | 表示布局是否应该纵向压缩。
151 | 
152 | ### restore-on-drag
153 | 
154 | - 类型：`boolean`
155 | - 默认值：`false`
156 | 
157 | 表示在某个元素被拖动后，是否应恢复被移动过的其他元素。
158 | 
159 | ### prevent-collision
160 | 
161 | - 类型：`boolean`
162 | - 默认值：`false`
163 | 
164 | 表示是否防止元素碰撞，值为 `ture` 时，元素只能拖放至空白处。
165 | 
166 | ### use-css-transforms
167 | 
168 | - 类型：`boolean`
169 | - 默认值：`true`
170 | 
171 | 表示是否使用 `transition-property: transform;` 的 CSS 属性。
172 | 
173 | ### responsive
174 | 
175 | - 类型：`boolean`
176 | - 默认值：`false`
177 | 
178 | 表示布局是否根据窗口宽度进行响应式变化。
179 | 
180 | 见 [responsiveLayouts](#responsive-layouts)、[breakpoints](#breakpoints) 和 [cols](#cols)。
181 | 
182 | ### breakpoints
183 | 
184 | - 类型：`Breakpoints`
185 | - 默认值：`{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }`
186 | 
187 | 为响应式布局设置断点。
188 | 
189 | 见 [responsiveLayouts](#responsive-layouts) 和 [cols](#cols)。
190 | 
191 | ### cols
192 | 
193 | - 类型：`Breakpoints`
194 | - 默认值：`{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }`
195 | 
196 | 设置每个断点对应的列数。
197 | 
198 | ### use-style-cursor
199 | 
200 | - 类型：`boolean`
201 | - 默认值：`true`
202 | 
203 | 表示是否动态设置指针样式。当拖动出现卡顿时，将此值设为 `false` 也许可以缓解布局问题。
204 | 
205 | **该属性不是响应式的。**
206 | 
207 | ### transform-scale
208 | 
209 | - 类型：`number`
210 | - 默认值：`1`
211 | 
212 | 为栅格元素的大小设置缩放比例，`1` 表示 100%。
213 | 
214 | ## GridItem
215 | 
216 | ### i
217 | 
218 | - 类型：`number | string`
219 | - 必须的
220 | 
221 | 栅格元素的唯一标识。
222 | 
223 | ### x
224 | 
225 | - 类型：`number`
226 | - 必须的
227 | 
228 | 表示栅格元素的初始横向位置（应位于哪一列），其值须为*自然数*。
229 | 
230 | ### y
231 | 
232 | - 类型：`number`
233 | - 必须的
234 | 
235 | 表示栅格元素的初始纵向位置（应位于哪一行），其值须为*自然数*。
236 | 
237 | ### w
238 | 
239 | - 类型：`number`
240 | - 必须的
241 | 
242 | 表示栅格元素的初始宽度（应占多少列），其值须为*自然数*。
243 | 
244 | ### h
245 | 
246 | - 类型：`number`
247 | - 必须的
248 | 
249 | 表示栅格元素的初始高度（应占多少行），其值须为*自然数*。
250 | 
251 | ### min-w
252 | 
253 | - 类型：`number`
254 | - 默认值：`1`
255 | 
256 | 表示栅格元素的最小宽度。如果 `w` 小于 `min-w`，那 `w` 会被设置成 `min-w`。
257 | 
258 | ### min-h
259 | 
260 | - 类型：`number`
261 | - 默认值：`1`
262 | 
263 | 表示栅格元素的最小高度。如果 `h` 小于 `min-h`，那 `h` 会被设置成 `min-h`。
264 | 
265 | ### max-w
266 | 
267 | - 类型：`number`
268 | - 默认值：`Infinity`
269 | 
270 | 表示栅格元素的最大宽度。如果 `w` 大于 `min-w`，那 `w` 会被设置成 `min-w`。
271 | 
272 | ### max-h
273 | 
274 | - 类型：`number`
275 | - 默认值：`Infinity`
276 | 
277 | 表示栅格元素的最大高度。如果 `h` 大于 `min-h`，那 `h` 会被设置成 `min-h`。
278 | 
279 | ### is-draggable
280 | 
281 | - 类型：`boolean`
282 | - 默认值：`null`
283 | 
284 | 表示栅格元素是否可拖拽。如果为 `null` 则取决于父容器。
285 | 
286 | ### is-resizable
287 | 
288 | - 类型：`boolean`
289 | - 默认值：`null`
290 | 
291 | 表示栅格元素是否可缩放。如果为 `null` 则取决于父容器。
292 | 
293 | ### is-bounded
294 | 
295 | - 类型：`boolean`
296 | - 默认值：`null`
297 | 
298 | 表示栅格元素是否在拖拽时绑定容器。如果为 `null` 则取决于父容器。
299 | 
300 | ### static
301 | 
302 | - 类型：`boolean`
303 | - 默认值：`false`
304 | 
305 | 表示栅格元素是否为静态的（无法拖拽、调整大小或被其他元素移动）。
306 | 
307 | ### drag-ignore-from
308 | 
309 | - 类型：`string`
310 | - 默认值：`'a, button'`
311 | 
312 | 表示栅格元素中哪些子元素无法触发拖拽事件，值为 `css-like` 选择器。
313 | 
314 | 更多信息请参考 [interact.js 文档](http://interactjs.io/docs/#ignorable-selectors) 的 `ignoreFrom`。
315 | 
316 | ### drag-allow-from
317 | 
318 | - 类型：`string`
319 | - 默认值：`null`
320 | 
321 | 表示栅格元素中哪些子元素可以触发拖拽事件，值为 `css-like` 选择器。
322 | 
323 | 如果为 `null`，则可以通过任意元素触发拖拽（除了 `drag-ignore-from`）。
324 | 
325 | 更多信息请参考 [interact.js 文档](http://interactjs.io/docs/#ignorable-selectors) 的 `allowFrom`。
326 | 
327 | ### resize-ignore-from
328 | 
329 | - 类型：`string`
330 | - 默认值：`'a, button'`
331 | 
332 | 表示栅格元素中哪些子元素无法触发缩放事件，值为 `css-like` 选择器。
333 | 
334 | 更多信息请参考 [interact.js 文档](http://interactjs.io/docs/#ignorable-selectors) 的 `ignoreFrom`。
335 | 
336 | ### preserve-aspect-ratio
337 | 
338 | - 类型：`boolean`
339 | - 默认值：`false`
340 | 
341 | 如果为 `true`，则强制栅格元素在缩放时保持其纵横比。
342 | 
343 | ### drag-option
344 | 
345 | - 类型：`Record<string, any>`
346 | - 默认值：`{}`
347 | 
348 | 传递给 [interact.js 拖拽配置](https://interactjs.io/docs/draggable/) 的对象。
349 | 
350 | ### resize-option
351 | 
352 | - 类型：`Record<string, any>`
353 | - 默认值：`{}`
354 | 
355 | 传递给 [interact.js 缩放配置](https://interactjs.io/docs/draggable/) 的对象。
356 | 


--------------------------------------------------------------------------------
/docs/zh/guide/usage.md:
--------------------------------------------------------------------------------
 1 | # 用法
 2 | 
 3 | ## 数据
 4 | 
 5 | 首先，我们定义一个布局数据。它是一个数组，每个元素都应该要包含这些属性：`i`（id）、`x`、`y`、`w` 和 `h`。
 6 | 
 7 | ```vue
 8 | <script setup lang="ts">
 9 | import { reactive } from 'vue'
10 | 
11 | const layout = reactive([
12 |   { x: 0, y: 0, w: 2, h: 2, i: '0' },
13 |   { x: 2, y: 0, w: 2, h: 4, i: '1' }
14 | ])
15 | </script>
16 | ```
17 | 
18 | ## 组件
19 | 
20 | 接着，有两种方式可用于定义子元素：使用 `item` 插槽或使用 `default` 插槽。
21 | 
22 | 使用 `item` 插槽是一种更容易定义子元素的方式，所有定义在布局元素的属性都将在内部自动传给 GridItem 组件。
23 | 
24 | ```vue
25 | <template>
26 |   <!-- Item slot usage -->
27 |   <GridLayout
28 |     v-model:layout="layout"
29 |     :col-num="12"
30 |     :row-height="30"
31 |     is-draggable
32 |     is-resizable
33 |     vertical-compact
34 |     use-css-transforms
35 |   >
36 |     <template #item="{ item }">
37 |       {{ item.i }}
38 |     </template>
39 |   </GridLayout>
40 | </template>
41 | ```
42 | 
43 | 如果你想要更灵活地监听 GridItem 组件的事件，你也可以选择使用 `default` 插槽。
44 | 
45 | ```vue
46 | <template>
47 |   <!-- Default slot usage -->
48 |   <GridLayout
49 |     v-model:layout="layout"
50 |     :col-num="12"
51 |     :row-height="30"
52 |     is-draggable
53 |     is-resizable
54 |     vertical-compact
55 |     use-css-transforms
56 |   >
57 |     <GridItem
58 |       v-for="item in layout"
59 |       :key="item.i"
60 |       :x="item.x"
61 |       :y="item.y"
62 |       :w="item.w"
63 |       :h="item.h"
64 |       :i="item.i"
65 |       @resize="handleResize"
66 |     >
67 |       {{ item.i }}
68 |     </GridItem>
69 |   </GridLayout>
70 | </template>
71 | ```
72 | 


--------------------------------------------------------------------------------
/docs/zh/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: home
 3 | 
 4 | hero:
 5 |   name: Grid Layout Plus
 6 |   text: 一个 Vue 3 的可拖拽、可缩放的布局
 7 |   tagline: 一个适用于 Vue 3 栅格布局系统，灵感源自于 React Grid Layout
 8 |   image: /grid-layout-plus.svg
 9 |   actions:
10 |     - theme: brand
11 |       text: 马上开始
12 |       link: /zh/guide/installation
13 |     - theme: alt
14 |       text: 在 GitHub 查看
15 |       link: https://github.com/qmhc/grid-layout-plus
16 | 
17 | features:
18 |   - title: ✥ 可拖拽部件
19 |     details:
20 |   - title: ⇲ 可缩放部件
21 |     details:
22 |   - title: 静态部件
23 |     details: 
24 |   - title: 拖拽和调整大小时进行边界检查
25 |     details: 
26 |   - title: 增减部件时避免重建栅格
27 |     details: 
28 |   - title: 可序列化和还原的布局
29 |     details: 
30 |   - title: 自动化 RTL 支持
31 |     details: 
32 |   - title: 响应式
33 |     details: 
34 |   - title: 每个元素具有单独（最大/小）高/宽
35 |     details: 
36 | ---
37 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build.environment]
2 |   NODE_VERSION = "18"
3 | [build]
4 |   publish = "docs/.vitepress/dist"
5 |   command = "pnpm run build && pnpm run build:docs"
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "grid-layout-plus",
  3 |   "version": "1.1.0",
  4 |   "type": "module",
  5 |   "packageManager": "pnpm@9.14.2",
  6 |   "license": "MIT",
  7 |   "author": "qmhc",
  8 |   "scripts": {
  9 |     "build": "tsx scripts/build.ts",
 10 |     "build:docs": "pnpm -C docs build",
 11 |     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --commit-path .",
 12 |     "dev": "pnpm -C dev-server serve",
 13 |     "dev:docs": "pnpm -C docs serve",
 14 |     "lint": "eslint --cache \"**/*.{js,cjs,mjs,ts,tsx,vue}\"",
 15 |     "lint:style": "stylelint --cache \"**/*.{vue,scss}\"",
 16 |     "precommit": "lint-staged -c ./.husky/.lintstagedrc -q",
 17 |     "prepare": "is-ci || husky init",
 18 |     "prepublishOnly": "pinst --disable",
 19 |     "prettier": "prettier --write \"{src,dev-server,docs}/**/*.{ts,js,json,css,pcss,scss,vue,html,md}\"",
 20 |     "prettier:scripts": "prettier --write \"scripts/**/*.{ts,js,json}\"",
 21 |     "postpublish": "pinst --enable",
 22 |     "publish:ci": "tsx scripts/publish.ts",
 23 |     "release": "tsx scripts/release.ts",
 24 |     "test": "vitest run",
 25 |     "test:cover": "vitest run --coverage",
 26 |     "test:dev": "vitest dev"
 27 |   },
 28 |   "main": "lib/index.cjs",
 29 |   "module": "es/index.mjs",
 30 |   "types": "dist/index.d.ts",
 31 |   "exports": {
 32 |     ".": {
 33 |       "types": "./dist/index.d.ts",
 34 |       "import": "./es/index.mjs",
 35 |       "require": "./lib/index.cjs"
 36 |     },
 37 |     "./es": {
 38 |       "types": "./dist/index.d.ts",
 39 |       "import": "./es/index.mjs"
 40 |     },
 41 |     "./lib": {
 42 |       "types": "./dist/index.d.ts",
 43 |       "require": "./lib/index.cjs"
 44 |     },
 45 |     "./es/*.mjs": {
 46 |       "types": "./dist/*.d.ts",
 47 |       "import": "./es/*.mjs"
 48 |     },
 49 |     "./es/*": {
 50 |       "types": [
 51 |         "./dist/*.d.ts",
 52 |         "./dist/*/index.d.ts"
 53 |       ],
 54 |       "import": "./es/*.mjs"
 55 |     },
 56 |     "./lib/*.cjs": {
 57 |       "types": "./dist/*.d.ts",
 58 |       "require": "./lib/*.cjs"
 59 |     },
 60 |     "./lib/*": {
 61 |       "types": [
 62 |         "./dist/*.d.ts",
 63 |         "./dist/*/index.d.ts"
 64 |       ],
 65 |       "require": "./lib/*.cjs"
 66 |     },
 67 |     "./package.json": "./package.json"
 68 |   },
 69 |   "files": [
 70 |     "dist",
 71 |     "es",
 72 |     "lib",
 73 |     "src",
 74 |     "CHANGELOG.md",
 75 |     "types.d.ts"
 76 |   ],
 77 |   "keywords": [
 78 |     "flex",
 79 |     "components",
 80 |     "vue",
 81 |     "vexip",
 82 |     "plugin",
 83 |     "toolkit",
 84 |     "vite",
 85 |     "layout",
 86 |     "grid-layout",
 87 |     "vue-grid-layout"
 88 |   ],
 89 |   "dependencies": {
 90 |     "@vexip-ui/hooks": "^2.8.0",
 91 |     "@vexip-ui/utils": "^2.16.1",
 92 |     "interactjs": "^1.10.27"
 93 |   },
 94 |   "devDependencies": {
 95 |     "@commitlint/cli": "^19.8.0",
 96 |     "@interactjs/types": "^1.10.27",
 97 |     "@types/minimist": "^1.2.5",
 98 |     "@types/node": "^22.15.12",
 99 |     "@types/prompts": "^2.4.9",
100 |     "@types/semver": "^7.7.0",
101 |     "@vexip-ui/commitlint-config": "^0.5.0",
102 |     "@vexip-ui/eslint-config": "^0.12.1",
103 |     "@vexip-ui/prettier-config": "^1.0.0",
104 |     "@vexip-ui/stylelint-config": "^1.1.0",
105 |     "@vitejs/plugin-vue": "^5.2.3",
106 |     "@vitejs/plugin-vue-jsx": "^4.1.2",
107 |     "@vue/test-utils": "^2.4.6",
108 |     "autoprefixer": "^10.4.21",
109 |     "conventional-changelog-angular": "7.0.0",
110 |     "conventional-changelog-cli": "^5.0.0",
111 |     "eslint": "^8.57.1",
112 |     "eslint-define-config": "^2.1.0",
113 |     "execa": "^9.5.2",
114 |     "happy-dom": "^17.4.6",
115 |     "husky": "^9.1.7",
116 |     "is-ci": "^4.1.0",
117 |     "kolorist": "^1.8.0",
118 |     "lint-staged": "^15.5.2",
119 |     "minimist": "^1.2.8",
120 |     "pinst": "^3.0.0",
121 |     "postcss": "^8.5.3",
122 |     "prettier": "^3.5.3",
123 |     "prompts": "^2.4.2",
124 |     "sass": "^1.87.0",
125 |     "semver": "^7.7.1",
126 |     "stylelint": "^16.19.1",
127 |     "stylelint-prettier": "^5.0.3",
128 |     "tsx": "^4.19.4",
129 |     "typescript": "5.8.3",
130 |     "vite": "^6.3.5",
131 |     "vite-plugin-css-injected-by-js": "^3.5.2",
132 |     "vite-plugin-dts": "^4.5.3",
133 |     "vitest": "^3.1.3",
134 |     "vue": "^3.5.13"
135 |   },
136 |   "peerDependencies": {
137 |     "vue": "^3.0.0"
138 |   },
139 |   "pnpm": {
140 |     "peerDependencyRules": {
141 |       "allowAny": [
142 |         "@csstools/*"
143 |       ],
144 |       "ignoreMissing": [
145 |         "@algolia/client-search",
146 |         "vue"
147 |       ]
148 |     },
149 |     "patchedDependencies": {
150 |       "conventional-changelog-angular@7.0.0": "patches/conventional-changelog-angular@7.0.0.patch"
151 |     }
152 |   }
153 | }
154 | 


--------------------------------------------------------------------------------
/patches/conventional-changelog-angular@7.0.0.patch:
--------------------------------------------------------------------------------
 1 | diff --git a/writerOpts.js b/writerOpts.js
 2 | index 991947b85e2eac0e0ae246037624276882abb741..990ef6a37434a6539f27615d5aa7dae1f7621183 100644
 3 | --- a/writerOpts.js
 4 | +++ b/writerOpts.js
 5 | @@ -30,32 +30,38 @@ function getWriterOpts () {
 6 |        const issues = []
 7 |  
 8 |        commit.notes.forEach(note => {
 9 | -        note.title = 'BREAKING CHANGES'
10 | +        note.title = '❌ Breaking Changes'
11 |          discard = false
12 |        })
13 |  
14 |        if (commit.type === 'feat') {
15 | -        commit.type = 'Features'
16 | +        commit.type = '✨ Features'
17 |        } else if (commit.type === 'fix') {
18 | -        commit.type = 'Bug Fixes'
19 | +        commit.type = '🐞 Bug Fixes'
20 |        } else if (commit.type === 'perf') {
21 | -        commit.type = 'Performance Improvements'
22 | +        commit.type = '⚡ Performance Improvements'
23 | +      } else if (commit.type === 'refactor') {
24 | +        commit.type = '🔨 Code Refactoring'
25 | +      } else if (commit.type === 'type' || commit.type === 'types') {
26 | +        commit.type = '👓 Types'
27 |        } else if (commit.type === 'revert' || commit.revert) {
28 | -        commit.type = 'Reverts'
29 | +        commit.type = '💔 Reverts'
30 |        } else if (discard) {
31 |          return
32 |        } else if (commit.type === 'docs') {
33 | -        commit.type = 'Documentation'
34 | +        commit.type = '📜 Documentation'
35 |        } else if (commit.type === 'style') {
36 | -        commit.type = 'Styles'
37 | -      } else if (commit.type === 'refactor') {
38 | -        commit.type = 'Code Refactoring'
39 | -      } else if (commit.type === 'test') {
40 | -        commit.type = 'Tests'
41 | +        commit.type = '🎨 Styles'
42 | +      } else if (commit.type === 'test' || commit.type === 'tests') {
43 | +        commit.type = '🩺 Tests'
44 |        } else if (commit.type === 'build') {
45 | -        commit.type = 'Build System'
46 | -      } else if (commit.type === 'ci') {
47 | -        commit.type = 'Continuous Integration'
48 | +        commit.type = '🚩 Build System'
49 | +      } else if (commit.type === 'ci' || commit.type === 'workflow') {
50 | +        commit.type = '🛫 Continuous Integration'
51 | +      } else if (commit.type === 'chore') {
52 | +        commit.type = '🍬 Chore'
53 | +      } else {
54 | +        return
55 |        }
56 |  
57 |        if (commit.scope === '*') {


--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 |   - dev-server
3 |   - docs
4 | 


--------------------------------------------------------------------------------
/scripts/build.ts:
--------------------------------------------------------------------------------
 1 | import { execa } from 'execa'
 2 | import { logger } from './utils'
 3 | 
 4 | import type { Options } from 'execa'
 5 | 
 6 | async function run(bin: string, args: string[], opts: Options = {}) {
 7 |   return execa(bin, args, { stdio: 'inherit', ...opts })
 8 | }
 9 | 
10 | async function main() {
11 |   logger.withBothLn(() => logger.successText('start building lib...'))
12 | 
13 |   await run('vite', ['build', '--config', 'vite.config.ts'])
14 | 
15 |   logger.ln()
16 | 
17 |   await run('vite', ['build', '--config', 'vite.full.config.ts'])
18 | 
19 |   logger.ln()
20 | 
21 |   if (!process.exitCode) {
22 |     logger.withEndLn(() => logger.success('all builds completed successfully'))
23 |   }
24 | }
25 | 
26 | main().catch(error => {
27 |   logger.error(error)
28 |   process.exit(1)
29 | })
30 | 


--------------------------------------------------------------------------------
/scripts/publish.ts:
--------------------------------------------------------------------------------
 1 | import { resolve } from 'node:path'
 2 | import { readFile } from 'node:fs/promises'
 3 | 
 4 | import minimist from 'minimist'
 5 | import { logger, rootDir, run } from './utils'
 6 | 
 7 | const args = minimist<{
 8 |   d?: boolean,
 9 |   dry?: boolean,
10 |   t?: string,
11 |   tag?: string
12 | }>(process.argv.slice(2))
13 | 
14 | const isDryRun = args.dry || args.d
15 | const releaseTag = args.tag || args.t
16 | 
17 | async function main() {
18 |   const pkg = JSON.parse(await readFile(resolve(rootDir, 'package.json'), 'utf-8'))
19 |   const currentVersion: string = pkg.version
20 | 
21 |   logger.withStartLn(() => logger.infoText('Publishing package...'))
22 | 
23 |   const publishArgs = [
24 |     'publish',
25 |     '--access',
26 |     'public',
27 |     '--registry',
28 |     'https://registry.npmjs.org/',
29 |     '--no-git-checks',
30 |   ]
31 | 
32 |   if (isDryRun) {
33 |     publishArgs.push('--dry-run')
34 |   }
35 | 
36 |   if (releaseTag) {
37 |     publishArgs.push('--tag', releaseTag)
38 |   } else if (currentVersion.includes('-')) {
39 |     const [, preversion] = currentVersion.split('-')
40 |     const tag = preversion && preversion.split('.')[0]
41 | 
42 |     tag && publishArgs.push('--tag', tag)
43 |   }
44 | 
45 |   try {
46 |     await run('pnpm', publishArgs, { stdio: 'pipe', cwd: rootDir })
47 |     logger.successText(`Successfully published v${currentVersion}'`)
48 |   } catch (error) {
49 |     if (error.stderr?.match(/previously published/)) {
50 |       logger.errorText(`Skipping already published v'${currentVersion}'`)
51 |     } else {
52 |       throw error
53 |     }
54 |   }
55 | }
56 | 
57 | main().catch(error => {
58 |   logger.error(error)
59 |   process.exit(1)
60 | })
61 | 


--------------------------------------------------------------------------------
/scripts/release.ts:
--------------------------------------------------------------------------------
  1 | import path from 'node:path'
  2 | import { readFile, writeFile } from 'node:fs/promises'
  3 | import { fileURLToPath } from 'node:url'
  4 | 
  5 | import minimist from 'minimist'
  6 | import semver from 'semver'
  7 | import prompts from 'prompts'
  8 | import { dryRun, logger, run } from './utils'
  9 | 
 10 | const args = minimist<{
 11 |   d?: boolean,
 12 |   dry?: boolean,
 13 |   p: string,
 14 |   preid?: string
 15 | }>(process.argv.slice(2))
 16 | 
 17 | const isDryRun = args.dry || args.d
 18 | 
 19 | const rootDir = path.resolve(fileURLToPath(import.meta.url), '../..')
 20 | 
 21 | const runIfNotDry = isDryRun ? dryRun : run
 22 | const logStep = (msg: string) => {
 23 |   logger.ln()
 24 |   logger.infoText(msg)
 25 | }
 26 | const logSkipped = (msg = 'Skipped') => {
 27 |   logger.warningText(`(${msg})`)
 28 | }
 29 | 
 30 | main()
 31 | 
 32 | async function main() {
 33 |   const pkg = JSON.parse(await readFile(path.join(rootDir, 'package.json'), 'utf-8'))
 34 |   const currentVersion = pkg.version
 35 | 
 36 |   const preId = args.preid || args.p || semver.prerelease(currentVersion)?.[0]
 37 | 
 38 |   const versionIncrements = [
 39 |     'patch',
 40 |     'minor',
 41 |     'major',
 42 |     ...(preId ? ['prepatch', 'preminor', 'premajor', 'prerelease'] : []),
 43 |   ]
 44 | 
 45 |   const inc = (i: any) => semver.inc(currentVersion, i, preId as string)
 46 | 
 47 |   const { release } = await prompts({
 48 |     type: 'select',
 49 |     name: 'release',
 50 |     message: 'Select release type:',
 51 |     choices: versionIncrements
 52 |       .map(i => `${i} (${inc(i)})`)
 53 |       .concat(['custom'])
 54 |       .map(i => ({ title: i, value: i })),
 55 |   })
 56 | 
 57 |   const version =
 58 |     release === 'custom'
 59 |       ? (
 60 |           await prompts({
 61 |             type: 'text',
 62 |             name: 'version',
 63 |             message: 'Input custom version:',
 64 |           })
 65 |         ).version
 66 |       : release.match(/\((.*)\)/)?.[1]
 67 | 
 68 |   if (!semver.valid(version)) {
 69 |     throw new Error(`Invalid target version: ${version}`)
 70 |   }
 71 | 
 72 |   const { confirm } = await prompts({
 73 |     type: 'confirm',
 74 |     name: 'confirm',
 75 |     message: `Confirm release ${version}?`,
 76 |   })
 77 | 
 78 |   if (!confirm) return
 79 | 
 80 |   // 执行单元测试
 81 |   logStep('Running test...')
 82 | 
 83 |   if (!isDryRun) {
 84 |     await run('pnpm', ['test'])
 85 |   } else {
 86 |     logSkipped()
 87 |   }
 88 | 
 89 |   logStep('Updating version...')
 90 | 
 91 |   pkg.version = version
 92 |   await writeFile(path.resolve(rootDir, 'package.json'), JSON.stringify(pkg, null, 2) + '\n')
 93 | 
 94 |   // 构建库
 95 |   logStep('Building package...')
 96 | 
 97 |   if (!isDryRun) {
 98 |     await run('pnpm', ['build'])
 99 |   } else {
100 |     logSkipped()
101 |   }
102 | 
103 |   // 更新 Change Log
104 |   logStep('Updating changelog...')
105 | 
106 |   await run('pnpm', ['changelog'])
107 | 
108 |   // 提交改动
109 |   logStep('Comitting changes...')
110 | 
111 |   const { stdout } = await run('git', ['diff'], { stdio: 'pipe' })
112 | 
113 |   if (stdout) {
114 |     await runIfNotDry('git', ['add', '-A'])
115 |     await runIfNotDry('git', ['commit', '-m', `release: v${version}`])
116 |   } else {
117 |     logSkipped('No changes to commit')
118 |   }
119 | 
120 |   // 推送到远程仓库
121 |   logStep('Pushing to Remote Repository...')
122 | 
123 |   await runIfNotDry('git', ['tag', `v${version}`])
124 |   await runIfNotDry('git', ['push', 'origin', `refs/tags/v${version}`])
125 |   await runIfNotDry('git', ['push'])
126 | 
127 |   logger.ln()
128 | 
129 |   if (isDryRun) {
130 |     logger.success('Dry run finished - run git diff to see package changes')
131 |   } else {
132 |     logger.success('Release successfully')
133 |   }
134 | 
135 |   logger.ln()
136 | }
137 | 


--------------------------------------------------------------------------------
/scripts/test-setup.ts:
--------------------------------------------------------------------------------
 1 | import { beforeEach } from 'vitest'
 2 | import { config } from '@vue/test-utils'
 3 | 
 4 | config.global.stubs = {
 5 |   Transition: {
 6 |     inheritAttrs: false,
 7 |     setup(_, { slots }) {
 8 |       return () => slots.default?.()
 9 |     },
10 |   },
11 |   TransitionGroup: {
12 |     inheritAttrs: false,
13 |     setup(_, { slots }) {
14 |       return () => slots.default?.()
15 |     },
16 |   },
17 | }
18 | 
19 | beforeEach(() => {
20 |   if (typeof document !== 'undefined') {
21 |     document.body.innerHTML = ''
22 |     document.head.innerHTML = ''
23 |   }
24 | })
25 | 


--------------------------------------------------------------------------------
/scripts/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "target": "esnext",
 5 |     "module": "esnext",
 6 |     "allowJs": false,
 7 |     "strict": true,
 8 |     "moduleResolution": "bundler",
 9 |     "noUnusedLocals": true,
10 |     "resolveJsonModule": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "useUnknownInCatchVariables": false,
14 |     "types": ["node"]
15 |   },
16 |   "include": ["*.ts"]
17 | }
18 | 


--------------------------------------------------------------------------------
/scripts/utils.ts:
--------------------------------------------------------------------------------
 1 | import { resolve } from 'node:path'
 2 | import { fileURLToPath } from 'node:url'
 3 | 
 4 | import { execa } from 'execa'
 5 | import { bgCyan, bgGreen, bgRed, bgYellow, cyan, green, lightBlue, red, yellow } from 'kolorist'
 6 | 
 7 | import type { Config } from 'prettier'
 8 | import type { Options } from 'execa'
 9 | 
10 | export const rootDir = resolve(fileURLToPath(import.meta.url), '../..')
11 | 
12 | export const prettierConfig: Config = {
13 |   printWidth: 100,
14 |   arrowParens: 'avoid',
15 |   bracketSpacing: true,
16 |   endOfLine: 'lf',
17 |   bracketSameLine: false,
18 |   quoteProps: 'as-needed',
19 |   semi: false,
20 |   singleQuote: true,
21 |   tabWidth: 2,
22 |   trailingComma: 'none',
23 |   useTabs: false,
24 |   vueIndentScriptAndStyle: false,
25 |   overrides: [
26 |     {
27 |       files: '*.md',
28 |       options: {
29 |         embeddedLanguageFormatting: 'off',
30 |       },
31 |     },
32 |   ],
33 | }
34 | 
35 | type LogFn = () => void
36 | 
37 | export const logger = {
38 |   ln: () => console.log(),
39 |   withStartLn: (log: LogFn) => {
40 |     logger.ln()
41 |     log()
42 |   },
43 |   withEndLn: (log: LogFn) => {
44 |     log()
45 |     logger.ln()
46 |   },
47 |   withBothLn: (log: LogFn) => {
48 |     logger.ln()
49 |     log()
50 |     logger.ln()
51 |   },
52 |   warning: (msg: string) => {
53 |     console.warn(`${bgYellow(' WARNING ')} ${yellow(msg)}`)
54 |   },
55 |   info: (msg: string) => {
56 |     console.log(`${bgCyan(' INFO ')} ${cyan(msg)}`)
57 |   },
58 |   success: (msg: string) => {
59 |     console.log(`${bgGreen(' SUCCESS ')} ${green(msg)}`)
60 |   },
61 |   error: (msg: string) => {
62 |     console.error(`${bgRed(' ERROR ')} ${red(msg)}`)
63 |   },
64 |   warningText: (msg: string) => {
65 |     console.warn(`${yellow(msg)}`)
66 |   },
67 |   infoText: (msg: string) => {
68 |     console.log(`${cyan(msg)}`)
69 |   },
70 |   successText: (msg: string) => {
71 |     console.log(`${green(msg)}`)
72 |   },
73 |   errorText: (msg: string) => {
74 |     console.error(`${red(msg)}`)
75 |   },
76 | }
77 | 
78 | export function bin(name: string) {
79 |   return resolve(rootDir, 'node_modules/.bin/' + name)
80 | }
81 | 
82 | export async function run(bin: string, args: string[], opts: Options = {}) {
83 |   return execa(bin, args, { stdio: 'inherit', ...opts })
84 | }
85 | 
86 | export async function dryRun(bin: string, args: string[], opts: Options = {}) {
87 |   console.log(lightBlue(`[dryrun] ${bin} ${args.join(' ')}`), opts)
88 | }
89 | 


--------------------------------------------------------------------------------
/src/components/grid-item.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import {
  3 |   computed,
  4 |   inject,
  5 |   onBeforeMount,
  6 |   onBeforeUnmount,
  7 |   onMounted,
  8 |   reactive,
  9 |   ref,
 10 |   toRef,
 11 |   watch,
 12 |   watchEffect,
 13 | } from 'vue'
 14 | 
 15 | import { isNull, nextTickOnce, throttle } from '@vexip-ui/utils'
 16 | import {
 17 |   EMITTER_KEY,
 18 |   LAYOUT_KEY,
 19 |   setTopLeft,
 20 |   setTopRight,
 21 |   setTransform,
 22 |   setTransformRtl,
 23 |   useNameHelper,
 24 | } from '../helpers/common'
 25 | import { createCoreData, getControlPosition } from '../helpers/draggable'
 26 | import { getColsFromBreakpoint } from '../helpers/responsive'
 27 | import { getDocumentDir } from '../helpers/dom'
 28 | 
 29 | import interact from 'interactjs'
 30 | 
 31 | import type { GridItemProps } from './types'
 32 | 
 33 | const props = withDefaults(defineProps<GridItemProps>(), {
 34 |   isDraggable: undefined,
 35 |   isResizable: undefined,
 36 |   isBounded: undefined,
 37 |   static: false,
 38 |   minH: 1,
 39 |   minW: 1,
 40 |   maxH: Infinity,
 41 |   maxW: Infinity,
 42 |   dragIgnoreFrom: 'a, button',
 43 |   dragAllowFrom: undefined,
 44 |   resizeIgnoreFrom: 'a, button',
 45 |   preserveAspectRatio: false,
 46 |   dragOption: () => ({}),
 47 |   resizeOption: () => ({}),
 48 | })
 49 | 
 50 | const emit = defineEmits(['container-resized', 'resize', 'resized', 'move', 'moved'])
 51 | 
 52 | const layout = inject(LAYOUT_KEY)
 53 | const emitter = inject(EMITTER_KEY)!
 54 | 
 55 | if (!layout) {
 56 |   throw new Error('[grid-layout-plus]: missing layout store, GridItem must under a GridLayout.')
 57 | }
 58 | 
 59 | const interactObj = ref<InstanceType<typeof import('@interactjs/types').Interactable> | null>(null)
 60 | 
 61 | const state = reactive({
 62 |   cols: 1,
 63 |   containerWidth: 100,
 64 |   rowHeight: 30,
 65 |   margin: [10, 10],
 66 |   maxRows: Infinity,
 67 |   draggable: undefined as boolean | undefined,
 68 |   resizable: undefined as boolean | undefined,
 69 |   bounded: undefined as boolean | undefined,
 70 |   transformScale: 1,
 71 |   useCssTransforms: true,
 72 |   useStyleCursor: true,
 73 | 
 74 |   isDragging: false,
 75 |   dragging: {
 76 |     top: -1,
 77 |     left: -1,
 78 |   },
 79 |   isResizing: false,
 80 |   resizing: {
 81 |     width: -1,
 82 |     height: -1,
 83 |   },
 84 |   style: {} as Record<string, string>,
 85 |   rtl: false,
 86 | })
 87 | 
 88 | let dragEventSet = false
 89 | let resizeEventSet = false
 90 | 
 91 | let lastX = NaN
 92 | let lastY = NaN
 93 | let lastW = NaN
 94 | let lastH = NaN
 95 | 
 96 | let previousW = -1
 97 | let previousH = -1
 98 | let previousX = -1
 99 | let previousY = -1
100 | 
101 | let innerX = props.x
102 | let innerY = props.y
103 | let innerW = props.w
104 | let innerH = props.h
105 | 
106 | const wrapper = ref<HTMLElement>()
107 | 
108 | const instance = reactive({
109 |   i: toRef(props, 'i'),
110 |   state,
111 |   wrapper,
112 |   calcXY,
113 | })
114 | 
115 | function updateWidthHandler(width: number) {
116 |   updateWidth(width)
117 | }
118 | 
119 | function compactHandler() {
120 |   compact()
121 | }
122 | 
123 | function setDraggableHandler(isDraggable: boolean) {
124 |   if (isNull(props.isDraggable)) {
125 |     state.draggable = isDraggable
126 |   }
127 | }
128 | 
129 | function setResizableHandler(isResizable: boolean) {
130 |   if (isNull(props.isResizable)) {
131 |     state.resizable = isResizable
132 |   }
133 | }
134 | 
135 | function setBoundedHandler(isBounded: boolean) {
136 |   if (isNull(props.isBounded)) {
137 |     state.bounded = isBounded
138 |   }
139 | }
140 | 
141 | function setTransformScaleHandler(transformScale: number) {
142 |   state.transformScale = transformScale
143 | }
144 | 
145 | function setRowHeightHandler(rowHeight: number) {
146 |   state.rowHeight = rowHeight
147 | }
148 | 
149 | function setMaxRowsHandler(maxRows: number) {
150 |   state.maxRows = maxRows
151 | }
152 | 
153 | function directionchangeHandler() {
154 |   state.rtl = getDocumentDir() === 'rtl'
155 |   compact()
156 | }
157 | 
158 | function setColNum(colNum: number) {
159 |   state.cols = Math.floor(colNum)
160 | }
161 | 
162 | layout.increaseItem(instance)
163 | 
164 | onBeforeMount(() => {
165 |   state.rtl = getDocumentDir() === 'rtl'
166 | })
167 | 
168 | onMounted(() => {
169 |   if (layout.responsive && layout.lastBreakpoint) {
170 |     state.cols = getColsFromBreakpoint(layout.lastBreakpoint, layout.cols)
171 |   } else {
172 |     state.cols = layout.colNum
173 |   }
174 |   state.rowHeight = layout.rowHeight
175 |   state.containerWidth = layout.width !== null ? layout.width : 100
176 |   state.margin = layout.margin !== undefined ? layout.margin.map(Number) : [10, 10]
177 |   state.maxRows = layout.maxRows
178 | 
179 |   if (isNull(props.isDraggable)) {
180 |     state.draggable = layout.isDraggable
181 |   } else {
182 |     state.draggable = props.isDraggable
183 |   }
184 |   if (isNull(props.isResizable)) {
185 |     state.resizable = layout.isResizable
186 |   } else {
187 |     state.resizable = props.isResizable
188 |   }
189 |   if (isNull(props.isBounded)) {
190 |     state.bounded = layout.isBounded
191 |   } else {
192 |     state.bounded = props.isBounded
193 |   }
194 |   state.transformScale = layout.transformScale
195 |   state.useCssTransforms = layout.useCssTransforms
196 |   state.useStyleCursor = layout.useStyleCursor
197 | 
198 |   watchEffect(() => {
199 |     innerX = props.x
200 |     innerY = props.y
201 |     innerH = props.h
202 |     innerW = props.w
203 |     nextTickOnce(createStyle)
204 |   })
205 | 
206 |   emitter.on('updateWidth', updateWidthHandler)
207 |   emitter.on('compact', compactHandler)
208 |   emitter.on('setDraggable', setDraggableHandler)
209 |   emitter.on('setResizable', setResizableHandler)
210 |   emitter.on('setBounded', setBoundedHandler)
211 |   emitter.on('setTransformScale', setTransformScaleHandler)
212 |   emitter.on('setRowHeight', setRowHeightHandler)
213 |   emitter.on('setMaxRows', setMaxRowsHandler)
214 |   emitter.on('directionchange', directionchangeHandler)
215 |   emitter.on('setColNum', setColNum)
216 | })
217 | 
218 | onBeforeUnmount(() => {
219 |   emitter.off('updateWidth', updateWidthHandler)
220 |   emitter.off('compact', compactHandler)
221 |   emitter.off('setDraggable', setDraggableHandler)
222 |   emitter.off('setResizable', setResizableHandler)
223 |   emitter.off('setBounded', setBoundedHandler)
224 |   emitter.off('setTransformScale', setTransformScaleHandler)
225 |   emitter.off('setRowHeight', setRowHeightHandler)
226 |   emitter.off('setMaxRows', setMaxRowsHandler)
227 |   emitter.off('directionchange', directionchangeHandler)
228 |   emitter.off('setColNum', setColNum)
229 | 
230 |   if (interactObj.value) {
231 |     interactObj.value.unset()
232 |     interactObj.value = null
233 |   }
234 | 
235 |   layout.decreaseItem(instance)
236 | })
237 | 
238 | defineExpose({ state, wrapper })
239 | 
240 | const isAndroid =
241 |   typeof navigator !== 'undefined' ? navigator.userAgent.toLowerCase().includes('android') : false
242 | 
243 | const resizableAndNotStatic = computed(() => state.resizable && !props.static)
244 | const renderRtl = computed(() => (layout.isMirrored ? !state.rtl : state.rtl))
245 | const draggableOrResizableAndNotStatic = computed(() => {
246 |   return (state.draggable || state.resizable) && !props.static
247 | })
248 | 
249 | const nh = useNameHelper('item')
250 | 
251 | const className = computed(() => {
252 |   return {
253 |     [nh.b()]: true,
254 |     [nh.bm('resizable')]: resizableAndNotStatic.value,
255 |     [nh.bm('static')]: props.static,
256 |     [nh.bm('resizing')]: state.isResizing,
257 |     [nh.bm('dragging')]: state.isDragging,
258 |     [nh.bm('transform')]: state.useCssTransforms,
259 |     [nh.bm('rtl')]: renderRtl.value,
260 |     [nh.bm('no-touch')]: isAndroid && draggableOrResizableAndNotStatic.value,
261 |   }
262 | })
263 | const resizerClass = computed(() => {
264 |   // return renderRtl.value ? 'vue-resizable-handle vue-rtl-resizable-handle' : 'vue-resizable-handle'
265 |   return [nh.be('resizer'), renderRtl.value && nh.bem('resizer', 'rtl')].filter(Boolean)
266 | })
267 | 
268 | watch(
269 |   () => props.isDraggable,
270 |   value => {
271 |     state.draggable = value
272 |   },
273 | )
274 | watch(
275 |   () => props.static,
276 |   () => {
277 |     nextTickOnce(tryMakeDraggable)
278 |     nextTickOnce(tryMakeResizable)
279 |   },
280 | )
281 | watch(
282 |   () => state.draggable,
283 |   () => {
284 |     nextTickOnce(tryMakeDraggable)
285 |   },
286 | )
287 | watch(
288 |   () => props.isResizable,
289 |   value => {
290 |     state.resizable = value
291 |   },
292 | )
293 | watch(
294 |   () => props.isBounded,
295 |   value => {
296 |     state.bounded = value
297 |   },
298 | )
299 | watch(
300 |   () => state.resizable,
301 |   () => {
302 |     nextTickOnce(tryMakeResizable)
303 |   },
304 | )
305 | watch(
306 |   () => state.rowHeight,
307 |   () => {
308 |     nextTickOnce(createStyle)
309 |     nextTickOnce(emitContainerResized)
310 |   },
311 | )
312 | watch([() => state.cols, () => state.containerWidth], () => {
313 |   nextTickOnce(tryMakeResizable)
314 |   nextTickOnce(createStyle)
315 |   nextTickOnce(emitContainerResized)
316 | })
317 | watch([() => props.minH, () => props.maxH, () => props.minW, () => props.maxW], () => {
318 |   nextTickOnce(tryMakeResizable)
319 | })
320 | watch(renderRtl, () => {
321 |   nextTickOnce(tryMakeResizable)
322 |   nextTickOnce(createStyle)
323 | })
324 | watch([() => layout.margin, () => layout.margin[0], () => layout.margin[1]], () => {
325 |   const margin = layout.margin
326 | 
327 |   if (!margin || (margin[0] === state.margin[0] && margin[1] === state.margin[1])) {
328 |     return
329 |   }
330 | 
331 |   state.margin = margin.map(Number)
332 |   nextTickOnce(createStyle)
333 |   nextTickOnce(emitContainerResized)
334 | })
335 | 
336 | function createStyle() {
337 |   if (props.x + props.w > state.cols) {
338 |     innerX = 0
339 |     innerW = props.w > state.cols ? state.cols : props.w
340 |   } else {
341 |     innerX = props.x
342 |     innerW = props.w
343 |   }
344 | 
345 |   const pos = calcPosition(innerX, innerY, innerW, innerH)
346 | 
347 |   if (state.isDragging) {
348 |     pos.top = state.dragging.top
349 |     // Add rtl support
350 |     if (renderRtl.value) {
351 |       pos.right = state.dragging.left
352 |     } else {
353 |       pos.left = state.dragging.left
354 |     }
355 |   }
356 |   if (state.isResizing) {
357 |     pos.width = state.resizing.width
358 |     pos.height = state.resizing.height
359 |   }
360 | 
361 |   let style
362 |   // CSS Transforms support (default)
363 |   if (state.useCssTransforms) {
364 |     // Add rtl support
365 |     if (renderRtl.value) {
366 |       style = setTransformRtl(pos.top, pos.right!, pos.width, pos.height)
367 |     } else {
368 |       style = setTransform(pos.top, pos.left!, pos.width, pos.height)
369 |     }
370 |   } else {
371 |     // top,left (slow)
372 |     // Add rtl support
373 |     if (renderRtl.value) {
374 |       style = setTopRight(pos.top, pos.right!, pos.width, pos.height)
375 |     } else {
376 |       style = setTopLeft(pos.top, pos.left!, pos.width, pos.height)
377 |     }
378 |   }
379 | 
380 |   state.style = style
381 | }
382 | 
383 | function emitContainerResized() {
384 |   // this.style has width and height with trailing 'px'. The
385 |   // resized event is without them
386 |   const styleProps: Record<string, string> = {}
387 |   for (const prop of ['width', 'height']) {
388 |     const val = state.style[prop]
389 |     const matches = val.match(/^(\d+)px$/)
390 |     if (!matches) {
391 |       return
392 |     }
393 |     styleProps[prop] = matches[1]
394 |   }
395 |   emit('container-resized', props.i, props.h, props.w, styleProps.height, styleProps.width)
396 | }
397 | 
398 | function handleResize(event: MouseEvent & { edges: any }) {
399 |   if (props.static) return
400 | 
401 |   const type = event.type
402 |   if (
403 |     (type === 'resizestart' && state.isResizing) ||
404 |     (type !== 'resizestart' && !state.isResizing)
405 |   ) {
406 |     return
407 |   }
408 | 
409 |   const position = getControlPosition(event)
410 |   // Get the current drag point from the event. This is used as the offset.
411 |   if (isNull(position)) return // not possible but satisfies flow
412 | 
413 |   const { x, y } = position
414 |   const newSize = { width: 0, height: 0 }
415 |   let pos
416 |   switch (type) {
417 |     case 'resizestart': {
418 |       tryMakeResizable()
419 |       previousW = innerW
420 |       previousH = innerH
421 |       pos = calcPosition(innerX, innerY, innerW, innerH)
422 |       newSize.width = pos.width
423 |       newSize.height = pos.height
424 |       state.resizing = newSize
425 |       state.isResizing = true
426 |       break
427 |     }
428 |     case 'resizemove': {
429 |       // A vertical resize ignores the horizontal delta
430 |       if (!event.edges.right && !event.edges.left) {
431 |         lastW = x
432 |       }
433 | 
434 |       // An horizontal resize ignores the vertical delta
435 |       if (!event.edges.top && !event.edges.bottom) {
436 |         lastH = y
437 |       }
438 | 
439 |       const coreEvent = createCoreData(lastW, lastH, x, y)
440 |       if (renderRtl.value) {
441 |         newSize.width = state.resizing.width - coreEvent.deltaX / state.transformScale
442 |       } else {
443 |         newSize.width = state.resizing.width + coreEvent.deltaX / state.transformScale
444 |       }
445 |       newSize.height = state.resizing.height + coreEvent.deltaY / state.transformScale
446 |       state.resizing = newSize
447 |       break
448 |     }
449 |     case 'resizeend': {
450 |       pos = calcPosition(innerX, innerY, innerW, innerH)
451 |       newSize.width = pos.width
452 |       newSize.height = pos.height
453 | 
454 |       state.resizing = { width: -1, height: -1 }
455 |       state.isResizing = false
456 |       break
457 |     }
458 |   }
459 | 
460 |   // Get new WH
461 |   pos = calcWH(newSize.height, newSize.width)
462 |   if (pos.w < props.minW) {
463 |     pos.w = props.minW
464 |   }
465 |   if (pos.w > props.maxW) {
466 |     pos.w = props.maxW
467 |   }
468 |   if (pos.h < props.minH) {
469 |     pos.h = props.minH
470 |   }
471 |   if (pos.h > props.maxH) {
472 |     pos.h = props.maxH
473 |   }
474 | 
475 |   if (pos.h < 1) {
476 |     pos.h = 1
477 |   }
478 |   if (pos.w < 1) {
479 |     pos.w = 1
480 |   }
481 | 
482 |   lastW = x
483 |   lastH = y
484 | 
485 |   if (innerW !== pos.w || innerH !== pos.h) {
486 |     emit('resize', props.i, pos.h, pos.w, newSize.height, newSize.width)
487 |   }
488 |   if (event.type === 'resizeend' && (previousW !== innerW || previousH !== innerH)) {
489 |     emit('resized', props.i, pos.h, pos.w, newSize.height, newSize.width)
490 |   }
491 |   emitter.emit('resizeEvent', event.type, props.i, innerX, innerY, pos.h, pos.w)
492 | }
493 | 
494 | function handleDrag(event: MouseEvent) {
495 |   if (props.static || state.isResizing) return
496 | 
497 |   const type = event.type
498 |   if ((type === 'dragstart' && state.isDragging) || (type !== 'dragstart' && !state.isDragging)) {
499 |     return
500 |   }
501 | 
502 |   const position = getControlPosition(event)
503 | 
504 |   // Get the current drag point from the event. This is used as the offset.
505 |   if (isNull(position)) return // not possible but satisfies flow
506 |   const { x, y } = position
507 |   const target = event.target as HTMLElement
508 | 
509 |   if (!target.offsetParent) return
510 | 
511 |   // let shouldUpdate = false;
512 |   const newPosition = { top: 0, left: 0 }
513 |   switch (type) {
514 |     case 'dragstart': {
515 |       previousX = innerX
516 |       previousY = innerY
517 | 
518 |       const parentRect = target.offsetParent.getBoundingClientRect()
519 |       const clientRect = target.getBoundingClientRect()
520 | 
521 |       const cLeft = clientRect.left / state.transformScale
522 |       const pLeft = parentRect.left / state.transformScale
523 |       const cRight = clientRect.right / state.transformScale
524 |       const pRight = parentRect.right / state.transformScale
525 |       const cTop = clientRect.top / state.transformScale
526 |       const pTop = parentRect.top / state.transformScale
527 | 
528 |       if (renderRtl.value) {
529 |         newPosition.left = (cRight - pRight) * -1
530 |       } else {
531 |         newPosition.left = cLeft - pLeft
532 |       }
533 |       newPosition.top = cTop - pTop
534 |       state.dragging = newPosition
535 |       state.isDragging = true
536 |       break
537 |     }
538 |     case 'dragmove': {
539 |       const coreEvent = createCoreData(lastX, lastY, x, y)
540 |       // Add rtl support
541 |       if (renderRtl.value) {
542 |         newPosition.left = state.dragging.left - coreEvent.deltaX / state.transformScale
543 |       } else {
544 |         newPosition.left = state.dragging.left + coreEvent.deltaX / state.transformScale
545 |       }
546 |       newPosition.top = state.dragging.top + coreEvent.deltaY / state.transformScale
547 |       if (state.bounded) {
548 |         const bottomBoundary =
549 |           target.offsetParent.clientHeight -
550 |           calcGridItemWHPx(props.h, state.rowHeight, state.margin[1])
551 |         newPosition.top = clamp(newPosition.top, 0, bottomBoundary)
552 |         const colWidth = calcColWidth()
553 |         const rightBoundary =
554 |           state.containerWidth - calcGridItemWHPx(props.w, colWidth, state.margin[0])
555 |         newPosition.left = clamp(newPosition.left, 0, rightBoundary)
556 |       }
557 | 
558 |       state.dragging = newPosition
559 |       break
560 |     }
561 |     case 'dragend': {
562 |       const parentRect = target.offsetParent.getBoundingClientRect()
563 |       const clientRect = target.getBoundingClientRect()
564 | 
565 |       const cLeft = clientRect.left / state.transformScale
566 |       const pLeft = parentRect.left / state.transformScale
567 |       const cRight = clientRect.right / state.transformScale
568 |       const pRight = parentRect.right / state.transformScale
569 |       const cTop = clientRect.top / state.transformScale
570 |       const pTop = parentRect.top / state.transformScale
571 | 
572 |       // Add rtl support
573 |       if (renderRtl.value) {
574 |         newPosition.left = (cRight - pRight) * -1
575 |       } else {
576 |         newPosition.left = cLeft - pLeft
577 |       }
578 |       newPosition.top = cTop - pTop
579 |       state.dragging = { top: -1, left: -1 }
580 |       state.isDragging = false
581 |       break
582 |     }
583 |   }
584 | 
585 |   // Get new XY
586 |   let pos
587 |   if (renderRtl.value) {
588 |     pos = calcXY(newPosition.top, newPosition.left)
589 |   } else {
590 |     pos = calcXY(newPosition.top, newPosition.left)
591 |   }
592 | 
593 |   lastX = x
594 |   lastY = y
595 | 
596 |   if (innerX !== pos.x || innerY !== pos.y) {
597 |     emit('move', props.i, pos.x, pos.y)
598 |   }
599 |   if (event.type === 'dragend' && (previousX !== innerX || previousY !== innerY)) {
600 |     emit('moved', props.i, pos.x, pos.y)
601 |   }
602 |   emitter.emit('dragEvent', event.type, props.i, pos.x, pos.y, innerH, innerW)
603 | }
604 | 
605 | function calcPosition(x: number, y: number, w: number, h: number) {
606 |   const colWidth = calcColWidth()
607 |   // add rtl support
608 |   let out
609 |   if (renderRtl.value) {
610 |     out = {
611 |       right: Math.round(colWidth * x + (x + 1) * state.margin[0]),
612 |       top: Math.round(state.rowHeight * y + (y + 1) * state.margin[1]),
613 |       // 0 * Infinity === NaN, which causes problems with resize constraints;
614 |       // Fix this if it occurs.
615 |       // Note we do it here rather than later because Math.round(Infinity) causes depot
616 |       width: w === Infinity ? w : Math.round(colWidth * w + Math.max(0, w - 1) * state.margin[0]),
617 |       height:
618 |         h === Infinity ? h : Math.round(state.rowHeight * h + Math.max(0, h - 1) * state.margin[1]),
619 |     }
620 |   } else {
621 |     out = {
622 |       left: Math.round(colWidth * x + (x + 1) * state.margin[0]),
623 |       top: Math.round(state.rowHeight * y + (y + 1) * state.margin[1]),
624 |       // 0 * Infinity === NaN, which causes problems with resize constraints;
625 |       // Fix this if it occurs.
626 |       // Note we do it here rather than later because Math.round(Infinity) causes depot
627 |       width: w === Infinity ? w : Math.round(colWidth * w + Math.max(0, w - 1) * state.margin[0]),
628 |       height:
629 |         h === Infinity ? h : Math.round(state.rowHeight * h + Math.max(0, h - 1) * state.margin[1]),
630 |     }
631 |   }
632 | 
633 |   return out
634 | }
635 | 
636 | /**
637 |  * Translate x and y coordinates from pixels to grid units.
638 |  * @param top  Top position (relative to parent) in pixels.
639 |  * @param left Left position (relative to parent) in pixels.
640 |  * @return x and y in grid units.
641 |  */
642 | // TODO check if this function needs change in order to support rtl.
643 | function calcXY(top: number, left: number) {
644 |   const colWidth = calcColWidth()
645 | 
646 |   // left = colWidth * x + margin * (x + 1)
647 |   // l = cx + m(x+1)
648 |   // l = cx + mx + m
649 |   // l - m = cx + mx
650 |   // l - m = x(c + m)
651 |   // (l - m) / (c + m) = x
652 |   // x = (left - margin) / (coldWidth + margin)
653 |   let x = Math.round((left - state.margin[0]) / (colWidth + state.margin[0]))
654 |   let y = Math.round((top - state.margin[1]) / (state.rowHeight + state.margin[1]))
655 | 
656 |   // Capping
657 |   x = Math.max(Math.min(x, state.cols - innerW), 0)
658 |   y = Math.max(Math.min(y, state.maxRows - innerH), 0)
659 | 
660 |   return { x, y }
661 | }
662 | 
663 | function calcColWidth() {
664 |   return (state.containerWidth - state.margin[0] * (state.cols + 1)) / state.cols
665 | }
666 | 
667 | function calcGridItemWHPx(gridUnits: number, colOrRowSize: number, marginPx: number) {
668 |   // 0 * Infinity === NaN, which causes problems with resize constraints
669 |   if (!Number.isFinite(gridUnits)) return gridUnits
670 |   return Math.round(colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx)
671 | }
672 | 
673 | function clamp(num: number, lowerBound: number, upperBound: number) {
674 |   return Math.max(Math.min(num, upperBound), lowerBound)
675 | }
676 | 
677 | /**
678 |  * Given a height and width in pixel values, calculate grid units.
679 |  * @param height Height in pixels.
680 |  * @param width  Width in pixels.
681 |  * @param autoSizeFlag  function autoSize identifier.
682 |  * @return w, h as grid units.
683 |  */
684 | function calcWH(height: number, width: number, autoSizeFlag = false) {
685 |   const colWidth = calcColWidth()
686 | 
687 |   // width = colWidth * w - (margin * (w - 1))
688 |   // ...
689 |   // w = (width + margin) / (colWidth + margin)
690 |   let w = Math.round((width + state.margin[0]) / (colWidth + state.margin[0]))
691 |   let h = 0
692 |   if (!autoSizeFlag) {
693 |     h = Math.round((height + state.margin[1]) / (state.rowHeight + state.margin[1]))
694 |   } else {
695 |     h = Math.ceil((height + state.margin[1]) / (state.rowHeight + state.margin[1]))
696 |   }
697 | 
698 |   // Capping
699 |   w = Math.max(Math.min(w, state.cols - innerX), 0)
700 |   h = Math.max(Math.min(h, state.maxRows - innerY), 0)
701 |   return { w, h }
702 | }
703 | 
704 | function updateWidth(width: number, colNum?: number) {
705 |   state.containerWidth = width
706 |   if (colNum !== undefined && colNum !== null) {
707 |     state.cols = colNum
708 |   }
709 | }
710 | 
711 | function compact() {
712 |   createStyle()
713 | }
714 | 
715 | function tryInteract() {
716 |   if (!interactObj.value && wrapper.value) {
717 |     interactObj.value = interact(wrapper.value)
718 |     if (!state.useStyleCursor) {
719 |       interactObj.value.styleCursor(false)
720 |     }
721 |   }
722 | }
723 | 
724 | const throttleDrag = throttle(handleDrag)
725 | 
726 | function tryMakeDraggable() {
727 |   tryInteract()
728 | 
729 |   if (!interactObj.value) return
730 | 
731 |   if (state.draggable && !props.static) {
732 |     const opts = {
733 |       ignoreFrom: props.dragIgnoreFrom,
734 |       allowFrom: props.dragAllowFrom,
735 |       ...props.dragOption,
736 |     }
737 |     interactObj.value.draggable(opts)
738 | 
739 |     if (!dragEventSet) {
740 |       dragEventSet = true
741 |       interactObj.value.on('dragstart dragmove dragend', event => {
742 |         event.type === 'dragmove' ? throttleDrag(event) : handleDrag(event)
743 |       })
744 |     }
745 |   } else {
746 |     interactObj.value.draggable({ enabled: false })
747 |   }
748 | }
749 | 
750 | const throttleResize = throttle(handleResize)
751 | 
752 | function tryMakeResizable() {
753 |   tryInteract()
754 | 
755 |   if (!interactObj.value) return
756 | 
757 |   if (state.resizable && !props.static) {
758 |     const maximum = calcPosition(0, 0, props.maxW, props.maxH)
759 |     const minimum = calcPosition(0, 0, props.minW, props.minH)
760 | 
761 |     const opts: Record<string, any> = {
762 |       edges: {
763 |         left: renderRtl.value ? `.${resizerClass.value[0]}` : false,
764 |         right: !renderRtl.value ? `.${resizerClass.value[0]}` : false,
765 |         bottom: `.${resizerClass.value[0]}`,
766 |         top: false,
767 |       },
768 |       ignoreFrom: props.resizeIgnoreFrom,
769 |       restrictSize: {
770 |         min: {
771 |           height: minimum.height * state.transformScale,
772 |           width: minimum.width * state.transformScale,
773 |         },
774 |         max: {
775 |           height: maximum.height * state.transformScale,
776 |           width: maximum.width * state.transformScale,
777 |         },
778 |       },
779 |       ...props.resizeOption,
780 |     }
781 | 
782 |     if (props.preserveAspectRatio) {
783 |       opts.modifiers = [interact.modifiers.aspectRatio({ ratio: 'preserve' })]
784 |     }
785 | 
786 |     interactObj.value.resizable(opts)
787 |     if (!resizeEventSet) {
788 |       resizeEventSet = true
789 |       interactObj.value.on('resizestart resizemove resizeend', event => {
790 |         event.type === 'resizemove' ? throttleResize(event) : handleResize(event)
791 |       })
792 |     }
793 |   } else {
794 |     interactObj.value.resizable({ enabled: false })
795 |   }
796 | }
797 | </script>
798 | 
799 | <template>
800 |   <section ref="wrapper" :class="className" :style="state.style">
801 |     <slot></slot>
802 |     <span v-if="resizableAndNotStatic" :class="resizerClass"></span>
803 |   </section>
804 | </template>
805 | 


--------------------------------------------------------------------------------
/src/components/grid-layout.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import {
  3 |   nextTick,
  4 |   onBeforeMount,
  5 |   onBeforeUnmount,
  6 |   onMounted,
  7 |   provide,
  8 |   reactive,
  9 |   ref,
 10 |   toRefs,
 11 |   watch,
 12 | } from 'vue'
 13 | 
 14 | import GridItem from './grid-item.vue'
 15 | import { useResize } from '@vexip-ui/hooks'
 16 | import { createEventEmitter, debounce, isNull } from '@vexip-ui/utils'
 17 | import {
 18 |   EMITTER_KEY,
 19 |   LAYOUT_KEY,
 20 |   bottom,
 21 |   cloneLayout,
 22 |   compact,
 23 |   getAllCollisions,
 24 |   getLayoutItem,
 25 |   moveElement,
 26 |   validateLayout,
 27 | } from '../helpers/common'
 28 | import {
 29 |   findOrGenerateResponsiveLayout,
 30 |   getBreakpointFromWidth,
 31 |   getColsFromBreakpoint,
 32 | } from '../helpers/responsive'
 33 | 
 34 | import type { Breakpoint, Layout, LayoutInstance } from '../helpers/types'
 35 | import type { GridLayoutProps } from './types'
 36 | 
 37 | const props = withDefaults(defineProps<GridLayoutProps>(), {
 38 |   autoSize: true,
 39 |   colNum: 12,
 40 |   rowHeight: 150,
 41 |   maxRows: Infinity,
 42 |   margin: () => [10, 10],
 43 |   isDraggable: true,
 44 |   isResizable: true,
 45 |   isMirrored: false,
 46 |   isBounded: false,
 47 |   useCssTransforms: true,
 48 |   verticalCompact: true,
 49 |   restoreOnDrag: false,
 50 |   responsive: false,
 51 |   responsiveLayouts: () => ({}),
 52 |   transformScale: 1,
 53 |   breakpoints: () => ({ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }),
 54 |   cols: () => ({ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }),
 55 |   preventCollision: false,
 56 |   useStyleCursor: true,
 57 | })
 58 | 
 59 | const emit = defineEmits([
 60 |   'layout-before-mount',
 61 |   'layout-mounted',
 62 |   'layout-updated',
 63 |   'breakpoint-changed',
 64 |   'update:layout',
 65 |   'layout-ready',
 66 | ])
 67 | 
 68 | const state = reactive({
 69 |   width: -1,
 70 |   mergedStyle: {},
 71 |   lastLayoutLength: 0,
 72 |   isDragging: false,
 73 |   placeholder: {
 74 |     x: 0,
 75 |     y: 0,
 76 |     w: 0,
 77 |     h: 0,
 78 |     i: '' as number | string,
 79 |   },
 80 |   layouts: {} as Record<Breakpoint, Layout>, // array to store all layouts from different breakpoints
 81 |   lastBreakpoint: null as Breakpoint | null, // store last active breakpoint
 82 |   originalLayout: null! as Layout, // store original Layout
 83 | })
 84 | 
 85 | const itemInstances = new Map<number | string, any>()
 86 | 
 87 | const currentLayout = ref(props.layout)
 88 | const wrapper = ref<HTMLElement>()
 89 | 
 90 | const { observeResize, unobserveResize } = useResize()
 91 | const emitter = createEventEmitter()
 92 | 
 93 | emitter.on('resizeEvent', resizeEventHandler)
 94 | emitter.on('dragEvent', dragEventHandler)
 95 | 
 96 | onBeforeMount(() => {
 97 |   emit('layout-before-mount', currentLayout.value)
 98 | })
 99 | 
100 | onMounted(() => {
101 |   emit('layout-mounted', currentLayout.value)
102 | 
103 |   nextTick(() => {
104 |     validateLayout(currentLayout.value)
105 | 
106 |     state.originalLayout = currentLayout.value
107 | 
108 |     nextTick(() => {
109 |       initResponsiveFeatures()
110 |       wrapper.value && observeResize(wrapper.value, debounce(onWindowResize, 16))
111 |       compact(currentLayout.value, props.verticalCompact)
112 |       emit('layout-updated', currentLayout.value)
113 |       updateHeight()
114 |       onWindowResize()
115 |     })
116 |   })
117 | })
118 | 
119 | onBeforeUnmount(() => {
120 |   emitter.clearAll()
121 |   wrapper.value && unobserveResize(wrapper.value)
122 | })
123 | 
124 | function resizeEventHandler(
125 |   eventType: string,
126 |   i: number | string,
127 |   x: number,
128 |   y: number,
129 |   h: number,
130 |   w: number,
131 | ) {
132 |   resizeEvent(eventType, i, x, y, h, w)
133 | }
134 | 
135 | function dragEventHandler(
136 |   eventType: string,
137 |   i: number | string,
138 |   x: number,
139 |   y: number,
140 |   h: number,
141 |   w: number,
142 | ) {
143 |   dragEvent(eventType, i, x, y, h, w)
144 | }
145 | 
146 | watch(
147 |   () => state.width,
148 |   (newVal, oldVal) => {
149 |     nextTick(() => {
150 |       emitter.emit('updateWidth', newVal)
151 |       if (oldVal === -1) {
152 |         /*
153 |         If oldVal === -1 is when the width has never been
154 |         set before. That only occurs when mounting is
155 |         finished, and onWindowResize has been called and
156 |         this.width has been changed the first time after it
157 |         got set to null in the constructor. It is now time
158 |         to issue layout-ready events as the GridItems have
159 |         their sizes configured properly.
160 | 
161 |         The reason for emitting the layout-ready events on
162 |         the next tick is to allow for the newly-emitted
163 |         updateWidth event (above) to have reached the
164 |         children GridItem-s and had their effect, so we're
165 |         sure that they have the final size before we emit
166 |         layout-ready (for this GridLayout) and
167 |         item-layout-ready (for the GridItem-s).
168 | 
169 |         This way any client event handlers can reliably
170 |         investigate stable sizes of GridItem-s.
171 |       */
172 |         nextTick(() => {
173 |           emit('layout-ready', currentLayout.value)
174 |         })
175 |       }
176 |       updateHeight()
177 |     })
178 |   },
179 | )
180 | watch(
181 |   () => [props.layout, props.layout.length],
182 |   () => {
183 |     currentLayout.value = props.layout
184 |     layoutUpdate()
185 |   },
186 | )
187 | watch(
188 |   () => props.colNum,
189 |   val => {
190 |     emitter.emit('setColNum', val)
191 |   },
192 | )
193 | watch(
194 |   () => props.rowHeight,
195 |   value => {
196 |     emitter.emit('setRowHeight', value)
197 |   },
198 | )
199 | watch(
200 |   () => props.isDraggable,
201 |   value => {
202 |     emitter.emit('setDraggable', value)
203 |   },
204 | )
205 | watch(
206 |   () => props.isResizable,
207 |   value => {
208 |     emitter.emit('setResizable', value)
209 |   },
210 | )
211 | watch(
212 |   () => props.isBounded,
213 |   value => {
214 |     emitter.emit('setBounded', value)
215 |   },
216 | )
217 | watch(
218 |   () => props.transformScale,
219 |   value => {
220 |     emitter.emit('setTransformScale', value)
221 |   },
222 | )
223 | watch(
224 |   () => props.responsive,
225 |   value => {
226 |     if (!value) {
227 |       emit('update:layout', state.originalLayout)
228 |       emitter.emit('setColNum', props.colNum)
229 |     }
230 |     onWindowResize()
231 |   },
232 | )
233 | watch(
234 |   () => props.maxRows,
235 |   value => {
236 |     emitter.emit('setMaxRows', value)
237 |   },
238 | )
239 | watch([() => props.margin, () => props.margin[1]], updateHeight)
240 | 
241 | provide(
242 |   LAYOUT_KEY,
243 |   reactive({
244 |     ...toRefs(props),
245 |     ...toRefs(state),
246 |     increaseItem,
247 |     decreaseItem,
248 |   }) as LayoutInstance,
249 | )
250 | provide(EMITTER_KEY, emitter)
251 | 
252 | defineExpose({ state, getItem, resizeEvent, dragEvent, layoutUpdate })
253 | 
254 | function increaseItem(item: any) {
255 |   itemInstances.set(item.i, item)
256 | }
257 | 
258 | function decreaseItem(item: any) {
259 |   itemInstances.delete(item.i)
260 | }
261 | 
262 | function getItem(id: number | string) {
263 |   return itemInstances.get(id)
264 | }
265 | 
266 | function layoutUpdate() {
267 |   if (!isNull(currentLayout.value) && !isNull(state.originalLayout)) {
268 |     if (currentLayout.value.length !== state.originalLayout.length) {
269 |       const diff = findDifference(currentLayout.value, state.originalLayout)
270 | 
271 |       if (diff.length > 0) {
272 |         if (currentLayout.value.length > state.originalLayout.length) {
273 |           state.originalLayout = state.originalLayout.concat(diff)
274 |         } else {
275 |           const ids = new Set(diff.map(item => item.i))
276 |           state.originalLayout = state.originalLayout.filter(item => !ids.has(item.i))
277 |         }
278 |       }
279 | 
280 |       state.lastLayoutLength = currentLayout.value.length
281 |       initResponsiveFeatures()
282 |     }
283 | 
284 |     compact(currentLayout.value, props.verticalCompact)
285 |     emitter.emit('updateWidth', state.width)
286 |     updateHeight()
287 | 
288 |     emit('layout-updated', currentLayout.value)
289 |   }
290 | }
291 | 
292 | function updateHeight() {
293 |   state.mergedStyle = {
294 |     height: containerHeight(),
295 |   }
296 | }
297 | 
298 | function onWindowResize() {
299 |   if (wrapper.value) {
300 |     state.width = wrapper.value.offsetWidth
301 |   }
302 | 
303 |   emitter.emit('resizeEvent')
304 | }
305 | 
306 | function containerHeight() {
307 |   if (!props.autoSize) return
308 | 
309 |   const marginY = parseFloat(props.margin[1] as any)
310 |   const containerHeight = bottom(currentLayout.value) * (props.rowHeight + marginY) + marginY + 'px'
311 |   return containerHeight
312 | }
313 | 
314 | let positionsBeforeDrag: Record<string, { x: number, y: number }> | undefined
315 | 
316 | function dragEvent(
317 |   eventName: string,
318 |   id: number | string,
319 |   x: number,
320 |   y: number,
321 |   h: number,
322 |   w: number,
323 | ) {
324 |   let l = getLayoutItem(currentLayout.value, id)!
325 | 
326 |   // GetLayoutItem sometimes returns null object
327 |   if (isNull(l)) {
328 |     l = { h: 0, w: 0, x: 0, y: 0, i: '' }
329 |   }
330 | 
331 |   if (eventName === 'dragstart' && !props.verticalCompact) {
332 |     positionsBeforeDrag = currentLayout.value.reduce(
333 |       (result, { i, x, y }) => ({
334 |         ...result,
335 |         [i]: { x, y },
336 |       }),
337 |       {},
338 |     )
339 |   }
340 | 
341 |   if (eventName === 'dragmove' || eventName === 'dragstart') {
342 |     state.placeholder.i = id
343 |     state.placeholder.x = l.x
344 |     state.placeholder.y = l.y
345 |     state.placeholder.w = w
346 |     state.placeholder.h = h
347 | 
348 |     nextTick(() => {
349 |       state.isDragging = true
350 |     })
351 | 
352 |     emitter.emit('updateWidth', state.width)
353 |   } else {
354 |     nextTick(() => {
355 |       state.isDragging = false
356 |     })
357 |   }
358 | 
359 |   // Move the element to the dragged location.
360 |   currentLayout.value = moveElement(currentLayout.value, l, x, y, true, props.preventCollision)
361 | 
362 |   if (props.restoreOnDrag) {
363 |     // Do not compact items more than in layout before drag
364 |     // Set moved item as static to avoid to compact it
365 |     l.static = true
366 |     compact(currentLayout.value, props.verticalCompact, positionsBeforeDrag)
367 |     l.static = false
368 |   } else {
369 |     compact(currentLayout.value, props.verticalCompact)
370 |   }
371 | 
372 |   // needed because vue can't detect changes on array element properties
373 |   emitter.emit('compact')
374 |   updateHeight()
375 |   if (eventName === 'dragend') {
376 |     positionsBeforeDrag = undefined
377 |     emit('layout-updated', currentLayout.value)
378 |   }
379 | }
380 | 
381 | function resizeEvent(
382 |   eventName: string | undefined,
383 |   id: number | string,
384 |   x: number,
385 |   y: number,
386 |   h: number,
387 |   w: number,
388 | ) {
389 |   let l = getLayoutItem(currentLayout.value, id)!
390 |   // GetLayoutItem sometimes return null object
391 |   if (isNull(l)) {
392 |     l = { h: 0, w: 0, x: 0, y: 0, i: '' }
393 |   }
394 | 
395 |   let hasCollisions
396 |   if (props.preventCollision) {
397 |     const collisions = getAllCollisions(currentLayout.value, { ...l, w, h }).filter(
398 |       layoutItem => layoutItem.i !== l.i,
399 |     )
400 |     hasCollisions = collisions.length > 0
401 | 
402 |     // If we're colliding, we need adjust the placeholder.
403 |     if (hasCollisions) {
404 |       // adjust w && h to maximum allowed space
405 |       let leastX = Infinity
406 |       let leastY = Infinity
407 |       collisions.forEach(layoutItem => {
408 |         if (layoutItem.x > l.x) leastX = Math.min(leastX, layoutItem.x)
409 |         if (layoutItem.y > l.y) leastY = Math.min(leastY, layoutItem.y)
410 |       })
411 | 
412 |       if (Number.isFinite(leastX)) l.w = leastX - l.x
413 |       if (Number.isFinite(leastY)) l.h = leastY - l.y
414 |     }
415 |   }
416 | 
417 |   if (!hasCollisions) {
418 |     // Set new width and height.
419 |     l.w = w
420 |     l.h = h
421 |   }
422 | 
423 |   if (eventName === 'resizestart' || eventName === 'resizemove') {
424 |     state.placeholder.i = id
425 |     state.placeholder.x = x
426 |     state.placeholder.y = y
427 |     state.placeholder.w = l.w
428 |     state.placeholder.h = l.h
429 |     nextTick(() => {
430 |       state.isDragging = true
431 |     })
432 |     // this.$broadcast("updateWidth", this.width);
433 |     emitter.emit('updateWidth', state.width)
434 |   } else if (eventName) {
435 |     nextTick(() => {
436 |       state.isDragging = false
437 |     })
438 |   }
439 | 
440 |   if (props.responsive) responsiveGridLayout()
441 | 
442 |   compact(currentLayout.value, props.verticalCompact)
443 |   emitter.emit('compact')
444 |   updateHeight()
445 | 
446 |   if (eventName === 'resizeend') emit('layout-updated', currentLayout.value)
447 | }
448 | 
449 | function responsiveGridLayout() {
450 |   const newBreakpoint = getBreakpointFromWidth(props.breakpoints, state.width)
451 | 
452 |   if (newBreakpoint === state.lastBreakpoint) {
453 |     return
454 |   }
455 | 
456 |   const newCols = getColsFromBreakpoint(newBreakpoint, props.cols)
457 | 
458 |   // save actual layout in layouts
459 |   if (!isNull(state.lastBreakpoint) && !state.layouts[state.lastBreakpoint]) {
460 |     state.layouts[state.lastBreakpoint] = cloneLayout(currentLayout.value)
461 |   }
462 | 
463 |   // Find or generate a new layout.
464 |   const layout = findOrGenerateResponsiveLayout(
465 |     state.originalLayout,
466 |     state.layouts,
467 |     props.breakpoints,
468 |     newBreakpoint,
469 |     state.lastBreakpoint!,
470 |     newCols,
471 |     props.verticalCompact,
472 |   )
473 | 
474 |   // Store the new layout.
475 |   state.layouts[newBreakpoint] = layout
476 | 
477 |   if (state.lastBreakpoint !== newBreakpoint) {
478 |     emit('breakpoint-changed', newBreakpoint, layout)
479 |   }
480 | 
481 |   currentLayout.value = layout
482 | 
483 |   // new prop sync
484 |   emit('update:layout', layout)
485 | 
486 |   state.lastBreakpoint = newBreakpoint
487 |   emitter.emit('setColNum', newCols)
488 | }
489 | 
490 | function initResponsiveFeatures() {
491 |   // clear layouts
492 |   state.layouts = Object.assign({} as Record<Breakpoint, Layout>, props.responsiveLayouts)
493 | }
494 | 
495 | function findDifference(layout: Layout, originalLayout: Layout) {
496 |   const originalIds = new Set(originalLayout.map(item => item.i))
497 |   const ids = new Set(layout.map(item => item.i))
498 | 
499 |   // Find values that are in result1 but not in result2
500 |   const uniqueResultOne = layout.filter(item => !originalIds.has(item.i))
501 | 
502 |   // Find values that are in result2 but not in result1
503 |   const uniqueResultTwo = originalLayout.filter(item => !ids.has(item.i))
504 | 
505 |   // Combine the two arrays of unique entries#
506 |   return uniqueResultOne.concat(uniqueResultTwo)
507 | }
508 | </script>
509 | 
510 | <template>
511 |   <div ref="wrapper" class="vgl-layout" :style="state.mergedStyle">
512 |     <slot v-if="$slots.default"></slot>
513 |     <template v-else>
514 |       <GridItem v-for="item in currentLayout" :key="item.i" v-bind="item">
515 |         <slot name="item" :item="item"></slot>
516 |       </GridItem>
517 |     </template>
518 |     <GridItem
519 |       v-show="state.isDragging"
520 |       class="vgl-item--placeholder"
521 |       :x="state.placeholder.x"
522 |       :y="state.placeholder.y"
523 |       :w="state.placeholder.w"
524 |       :h="state.placeholder.h"
525 |       :i="state.placeholder.i"
526 |     ></GridItem>
527 |   </div>
528 | </template>
529 | 


--------------------------------------------------------------------------------
/src/components/types.ts:
--------------------------------------------------------------------------------
 1 | import type { Breakpoints, Layout, ResponsiveLayout } from '../helpers/types'
 2 | 
 3 | export interface GridLayoutProps {
 4 |   autoSize?: boolean,
 5 |   colNum?: number,
 6 |   rowHeight?: number,
 7 |   maxRows?: number,
 8 |   margin?: number[],
 9 |   isDraggable?: boolean,
10 |   isResizable?: boolean,
11 |   isMirrored?: boolean,
12 |   isBounded?: boolean,
13 |   useCssTransforms?: boolean,
14 |   verticalCompact?: boolean,
15 |   restoreOnDrag?: boolean,
16 |   layout: Layout,
17 |   responsive?: boolean,
18 |   responsiveLayouts?: Partial<ResponsiveLayout>,
19 |   transformScale?: number,
20 |   breakpoints?: Breakpoints,
21 |   cols?: Breakpoints,
22 |   preventCollision?: boolean,
23 |   useStyleCursor?: boolean
24 | }
25 | 
26 | export interface GridItemProps {
27 |   isDraggable?: boolean,
28 |   isResizable?: boolean,
29 |   isBounded?: boolean,
30 |   static?: boolean,
31 |   minH?: number,
32 |   minW?: number,
33 |   maxH?: number,
34 |   maxW?: number,
35 |   x: number,
36 |   y: number,
37 |   w: number,
38 |   h: number,
39 |   i: number | string,
40 |   dragIgnoreFrom?: string,
41 |   dragAllowFrom?: string,
42 |   resizeIgnoreFrom?: string,
43 |   preserveAspectRatio?: boolean,
44 |   dragOption?: Record<string, any>,
45 |   resizeOption?: Record<string, any>
46 | }
47 | 


--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import type { DefineComponent } from 'vue'
3 |   const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, any>
4 |   export default component
5 | }
6 | 


--------------------------------------------------------------------------------
/src/helpers/common.ts:
--------------------------------------------------------------------------------
  1 | import type { InjectionKey } from 'vue'
  2 | import type { EventEmitter } from '@vexip-ui/utils'
  3 | import type { Layout, LayoutInstance, LayoutItem } from './types'
  4 | 
  5 | export const LAYOUT_KEY = Symbol('LAYOUT_KEY') as InjectionKey<LayoutInstance>
  6 | export const EMITTER_KEY = Symbol('EMITTER_KEY') as InjectionKey<EventEmitter>
  7 | 
  8 | /**
  9 |  * Return the bottom coordinate of the layout.
 10 |  *
 11 |  * @param layout Layout array.
 12 |  * @return Bottom coordinate.
 13 |  */
 14 | export function bottom(layout: Layout): number {
 15 |   let max = 0
 16 |   let bottomY
 17 |   for (let i = 0, len = layout.length; i < len; i++) {
 18 |     bottomY = layout[i].y + layout[i].h
 19 |     if (bottomY > max) max = bottomY
 20 |   }
 21 |   return max
 22 | }
 23 | 
 24 | export function cloneLayout(layout: Layout): Layout {
 25 |   const newLayout = Array(layout.length)
 26 |   for (let i = 0, len = layout.length; i < len; i++) {
 27 |     newLayout[i] = cloneLayoutItem(layout[i])
 28 |   }
 29 |   return newLayout
 30 | }
 31 | 
 32 | // Fast path to cloning, since this is monomorphic
 33 | export function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem {
 34 |   // return JSON.parse(JSON.stringify(layoutItem))
 35 |   return { ...layoutItem }
 36 | }
 37 | 
 38 | /**
 39 |  * Given two layoutitems, check if they collide.
 40 |  *
 41 |  * @return True if colliding.
 42 |  */
 43 | export function collides(l1: LayoutItem, l2: LayoutItem): boolean {
 44 |   if (l1 === l2) return false // same element
 45 |   if (l1.x + l1.w <= l2.x) return false // l1 is left of l2
 46 |   if (l1.x >= l2.x + l2.w) return false // l1 is right of l2
 47 |   if (l1.y + l1.h <= l2.y) return false // l1 is above l2
 48 |   if (l1.y >= l2.y + l2.h) return false // l1 is below l2
 49 |   return true // boxes overlap
 50 | }
 51 | 
 52 | /**
 53 |  * Given a layout, compact it. This involves going down each y coordinate and removing gaps
 54 |  * between items.
 55 |  *
 56 |  * @param  layout Layout.
 57 |  * @param  verticalCompact Whether or not to compact the layout vertically.
 58 |  * @param minPositions
 59 |  * @return Compacted Layout.
 60 |  */
 61 | export function compact(layout: Layout, verticalCompact?: boolean, minPositions?: any): Layout {
 62 |   // Statics go in the compareWith array right away so items flow around them.
 63 |   const compareWith = getStatics(layout)
 64 |   // We go through the items by row and column.
 65 |   const sorted = sortLayoutItemsByRowCol(layout)
 66 |   // Holding for new items.
 67 |   const out: Layout = Array(layout.length)
 68 | 
 69 |   for (let i = 0, len = sorted.length; i < len; i++) {
 70 |     let l = sorted[i]
 71 | 
 72 |     // Don't move static elements
 73 |     if (!l.static) {
 74 |       l = compactItem(compareWith, l, verticalCompact, minPositions)
 75 | 
 76 |       // Add to comparison array. We only collide with items before this one.
 77 |       // Statics are already in this array.
 78 |       compareWith.push(l)
 79 |     }
 80 | 
 81 |     // Add to output array to make sure they still come out in the right order.
 82 |     out[layout.findIndex(i => i.i === l.i)] = l
 83 | 
 84 |     // Clear moved flag, if it exists.
 85 |     l.moved = false
 86 |   }
 87 | 
 88 |   return out
 89 | }
 90 | 
 91 | /**
 92 |  * Compact an item in the layout.
 93 |  */
 94 | export function compactItem(
 95 |   compareWith: Layout,
 96 |   l: LayoutItem,
 97 |   verticalCompact?: boolean,
 98 |   minPositions?: any,
 99 | ): LayoutItem {
100 |   if (verticalCompact) {
101 |     // Move the element up as far as it can go without colliding.
102 |     while (l.y > 0 && !getFirstCollision(compareWith, l)) {
103 |       l.y--
104 |     }
105 |   } else if (minPositions) {
106 |     const minY = minPositions[l.i].y
107 |     while (l.y > minY && !getFirstCollision(compareWith, l)) {
108 |       l.y--
109 |     }
110 |   }
111 | 
112 |   // Move it down, and keep moving it down if it's colliding.
113 |   let collides
114 |   while ((collides = getFirstCollision(compareWith, l))) {
115 |     l.y = collides.y + collides.h
116 |   }
117 |   return l
118 | }
119 | 
120 | /**
121 |  * Given a layout, make sure all elements fit within its bounds.
122 |  *
123 |  * @param  layout Layout array.
124 |  * @param  bounds Number of columns.
125 |  */
126 | export function correctBounds(layout: Layout, bounds: { cols: number }): Layout {
127 |   const collidesWith = getStatics(layout)
128 |   for (let i = 0, len = layout.length; i < len; i++) {
129 |     const l = layout[i]
130 |     // Overflows right
131 |     if (l.x + l.w > bounds.cols) l.x = bounds.cols - l.w
132 |     // Overflows left
133 |     if (l.x < 0) {
134 |       l.x = 0
135 |       l.w = bounds.cols
136 |     }
137 |     if (!l.static) collidesWith.push(l)
138 |     else {
139 |       // If this is static and collides with other statics, we must move it down.
140 |       // We have to do something nicer than just letting them overlap.
141 |       while (getFirstCollision(collidesWith, l)) {
142 |         l.y++
143 |       }
144 |     }
145 |   }
146 |   return layout
147 | }
148 | 
149 | /**
150 |  * Get a layout item by ID. Used so we can override later on if necessary.
151 |  *
152 |  * @param    layout Layout array.
153 |  * @param   id     ID
154 |  * @return     Item at ID.
155 |  */
156 | export function getLayoutItem(layout: Layout, id: number | string): LayoutItem | undefined {
157 |   for (let i = 0, len = layout.length; i < len; i++) {
158 |     if (layout[i].i === id) return layout[i]
159 |   }
160 | }
161 | 
162 | /**
163 |  * Returns the first item this layout collides with.
164 |  * It doesn't appear to matter which order we approach this from, although
165 |  * perhaps that is the wrong thing to do.
166 |  *
167 |  * @param  {Object} layoutItem Layout item.
168 |  * @return {Object|undefined}  A colliding layout item, or undefined.
169 |  */
170 | export function getFirstCollision(layout: Layout, layoutItem: LayoutItem): LayoutItem | undefined {
171 |   for (let i = 0, len = layout.length; i < len; i++) {
172 |     if (collides(layout[i], layoutItem)) return layout[i]
173 |   }
174 | }
175 | 
176 | export function getAllCollisions(layout: Layout, layoutItem: LayoutItem): Array<LayoutItem> {
177 |   return layout.filter(l => collides(l, layoutItem))
178 | }
179 | 
180 | /**
181 |  * Get all static elements.
182 |  * @param layout Array of layout objects.
183 |  * @return  Array of static layout items..
184 |  */
185 | export function getStatics(layout: Layout): Array<LayoutItem> {
186 |   return layout.filter(l => l.static)
187 | }
188 | 
189 | /**
190 |  * Move an element. Responsible for doing cascading movements of other elements.
191 |  *
192 |  * @param        layout Full layout to modify.
193 |  * @param   layoutItem      element to move.
194 |  * @param       x    X position in grid units.
195 |  * @param       y    Y position in grid units.
196 |  * @param      isUserAction If true, designates that the item we're moving is
197 |  *                                     being dragged/resized by th euser.
198 |  */
199 | export function moveElement(
200 |   layout: Layout,
201 |   layoutItem: LayoutItem,
202 |   x?: number,
203 |   y?: number,
204 |   isUserAction = false,
205 |   preventCollision = false,
206 | ): Layout {
207 |   if (layoutItem.static) return layout
208 | 
209 |   const oldX = layoutItem.x
210 |   const oldY = layoutItem.y
211 | 
212 |   const movingUp = y && layoutItem.y > y
213 |   // This is quite a bit faster than extending the object
214 |   if (typeof x === 'number') layoutItem.x = x
215 |   if (typeof y === 'number') layoutItem.y = y
216 |   layoutItem.moved = true
217 | 
218 |   // If this collides with anything, move it.
219 |   // When doing this comparison, we have to sort the items we compare with
220 |   // to ensure, in the case of multiple collisions, that we're getting the
221 |   // nearest collision.
222 |   let sorted = sortLayoutItemsByRowCol(layout)
223 |   if (movingUp) sorted = sorted.reverse()
224 |   const collisions = getAllCollisions(sorted, layoutItem)
225 | 
226 |   if (preventCollision && collisions.length) {
227 |     layoutItem.x = oldX
228 |     layoutItem.y = oldY
229 |     layoutItem.moved = false
230 |     return layout
231 |   }
232 | 
233 |   // Move each item that collides away from this element.
234 |   for (let i = 0, len = collisions.length; i < len; i++) {
235 |     const collision = collisions[i]
236 | 
237 |     // Short circuit so we can't infinite loop
238 |     if (collision.moved) continue
239 | 
240 |     // This makes it feel a bit more precise by waiting to swap for just a bit when moving up.
241 |     if (layoutItem.y > collision.y && layoutItem.y - collision.y > collision.h / 4) continue
242 | 
243 |     // Don't move static items - we have to move *this* element away
244 |     if (collision.static) {
245 |       layout = moveElementAwayFromCollision(layout, collision, layoutItem, isUserAction)
246 |     } else {
247 |       layout = moveElementAwayFromCollision(layout, layoutItem, collision, isUserAction)
248 |     }
249 |   }
250 | 
251 |   return layout
252 | }
253 | 
254 | /**
255 |  * This is where the magic needs to happen - given a collision, move an element away from the collision.
256 |  * We attempt to move it up if there's room, otherwise it goes below.
257 |  *
258 |  * @param   layout            Full layout to modify.
259 |  * @param   collidesWith Layout item we're colliding with.
260 |  * @param   itemToMove   Layout item we're moving.
261 |  * @param  isUserAction  If true, designates that the item we're moving is being dragged/resized
262 |  *                                   by the user.
263 |  */
264 | export function moveElementAwayFromCollision(
265 |   layout: Layout,
266 |   collidesWith: LayoutItem,
267 |   itemToMove: LayoutItem,
268 |   isUserAction?: boolean,
269 | ): Layout {
270 |   const preventCollision = false // we're already colliding
271 |   // If there is enough space above the collision to put this element, move it there.
272 |   // We only do this on the main collision as this can get funky in cascades and cause
273 |   // unwanted swapping behavior.
274 |   if (isUserAction) {
275 |     // Make a mock item so we don't modify the item here, only modify in moveElement.
276 |     const fakeItem: LayoutItem = {
277 |       x: itemToMove.x,
278 |       y: itemToMove.y,
279 |       w: itemToMove.w,
280 |       h: itemToMove.h,
281 |       i: '-1',
282 |     }
283 |     fakeItem.y = Math.max(collidesWith.y - itemToMove.h, 0)
284 |     if (!getFirstCollision(layout, fakeItem)) {
285 |       return moveElement(layout, itemToMove, undefined, fakeItem.y, preventCollision)
286 |     }
287 |   }
288 | 
289 |   // Previously this was optimized to move below the collision directly, but this can cause problems
290 |   // with cascading moves, as an item may actually leapflog a collision and cause a reversal in order.
291 |   return moveElement(layout, itemToMove, undefined, itemToMove.y + 1, preventCollision)
292 | }
293 | 
294 | /**
295 |  * Helper to convert a number to a percentage string.
296 |  *
297 |  * @param   num Any number
298 |  * @return      That number as a percentage.
299 |  */
300 | export function perc(num: number): string {
301 |   return num * 100 + '%'
302 | }
303 | 
304 | export function setTransform(top: number, left: number, width: number, height: number) {
305 |   // Replace unitless items with px
306 |   const translate = 'translate3d(' + left + 'px,' + top + 'px, 0)'
307 |   return {
308 |     transform: translate,
309 |     WebkitTransform: translate,
310 |     MozTransform: translate,
311 |     msTransform: translate,
312 |     OTransform: translate,
313 |     width: width + 'px',
314 |     height: height + 'px',
315 |     position: 'absolute',
316 |   }
317 | }
318 | /**
319 |  * Just like the setTransform method, but instead it will return a negative value of right.
320 |  *
321 |  * @param top
322 |  * @param right
323 |  * @param width
324 |  * @param height
325 |  * @returns {{transform: string, WebkitTransform: string, MozTransform: string, msTransform: string, OTransform: string, width: string, height: string, position: string}}
326 |  */
327 | export function setTransformRtl(top: number, right: number, width: number, height: number) {
328 |   // Replace unitless items with px
329 |   const translate = 'translate3d(' + right * -1 + 'px,' + top + 'px, 0)'
330 |   return {
331 |     transform: translate,
332 |     WebkitTransform: translate,
333 |     MozTransform: translate,
334 |     msTransform: translate,
335 |     OTransform: translate,
336 |     width: width + 'px',
337 |     height: height + 'px',
338 |     position: 'absolute',
339 |   }
340 | }
341 | 
342 | export function setTopLeft(top: number, left: number, width: number, height: number) {
343 |   return {
344 |     top: top + 'px',
345 |     left: left + 'px',
346 |     width: width + 'px',
347 |     height: height + 'px',
348 |     position: 'absolute',
349 |   }
350 | }
351 | /**
352 |  * Just like the setTopLeft method, but instead, it will return a right property instead of left.
353 |  *
354 |  * @param top
355 |  * @param right
356 |  * @param width
357 |  * @param height
358 |  * @returns position style
359 |  */
360 | export function setTopRight(top: number, right: number, width: number, height: number) {
361 |   return {
362 |     top: top + 'px',
363 |     right: right + 'px',
364 |     width: width + 'px',
365 |     height: height + 'px',
366 |     position: 'absolute',
367 |   }
368 | }
369 | 
370 | /**
371 |  * Get layout items sorted from top left to right and down.
372 |  *
373 |  * @return Layout, sorted static items first.
374 |  */
375 | export function sortLayoutItemsByRowCol(layout: Layout): Layout {
376 |   return Array.from(layout).sort(function (a, b) {
377 |     if (a.y === b.y && a.x === b.x) {
378 |       return 0
379 |     }
380 | 
381 |     if (a.y > b.y || (a.y === b.y && a.x > b.x)) {
382 |       return 1
383 |     }
384 | 
385 |     return -1
386 |   })
387 | }
388 | 
389 | /**
390 |  * Validate a layout. Throws errors.
391 |  *
392 |  * @param layout Array of layout items.
393 |  * @param contextName Context name for errors.
394 |  * @throw Validation error.
395 |  */
396 | export function validateLayout(layout: Layout, contextName?: string): void {
397 |   contextName = contextName || 'Layout'
398 |   const subProps = ['x', 'y', 'w', 'h']
399 |   const keyArr = []
400 |   if (!Array.isArray(layout)) throw new Error(contextName + ' must be an array!')
401 |   for (let i = 0, len = layout.length; i < len; i++) {
402 |     const item = layout[i]
403 |     for (let j = 0; j < subProps.length; j++) {
404 |       if (typeof (item as any)[subProps[j]] !== 'number') {
405 |         throw new Error(
406 |           'VueGridLayout: ' + contextName + '[' + i + '].' + subProps[j] + ' must be a number!',
407 |         )
408 |       }
409 |     }
410 | 
411 |     if (item.i === undefined || item.i === null) {
412 |       throw new Error('VueGridLayout: ' + contextName + '[' + i + '].i cannot be null!')
413 |     }
414 | 
415 |     if (typeof item.i !== 'number' && typeof item.i !== 'string') {
416 |       throw new Error('VueGridLayout: ' + contextName + '[' + i + '].i must be a string or number!')
417 |     }
418 | 
419 |     if (keyArr.indexOf(item.i) >= 0) {
420 |       throw new Error('VueGridLayout: ' + contextName + '[' + i + '].i must be unique!')
421 |     }
422 |     keyArr.push(item.i)
423 | 
424 |     if (item.static !== undefined && typeof item.static !== 'boolean') {
425 |       throw new Error('VueGridLayout: ' + contextName + '[' + i + '].static must be a boolean!')
426 |     }
427 |   }
428 | }
429 | 
430 | // Flow can't really figure this out, so we just use Object
431 | export function autoBindHandlers(
432 |   el: Record<string, (...args: any[]) => any>,
433 |   fns: Array<string>,
434 | ): void {
435 |   fns.forEach(key => (el[key] = el[key].bind(el)))
436 | }
437 | 
438 | /**
439 |  * Convert a JS object to CSS string. Similar to React's output of CSS.
440 |  * @param obj
441 |  * @returns
442 |  */
443 | export function createMarkup(obj: Record<string, any>) {
444 |   const keys = Object.keys(obj)
445 |   if (!keys.length) return ''
446 |   let i
447 |   const len = keys.length
448 |   let result = ''
449 | 
450 |   for (i = 0; i < len; i++) {
451 |     const key = keys[i]
452 |     const val = obj[key]
453 |     result += hyphenate(key) + ':' + addPx(key, val) + ';'
454 |   }
455 | 
456 |   return result
457 | }
458 | 
459 | /* The following list is defined in React's core */
460 | export const IS_UNITLESS: Record<string, boolean> = {
461 |   animationIterationCount: true,
462 |   boxFlex: true,
463 |   boxFlexGroup: true,
464 |   boxOrdinalGroup: true,
465 |   columnCount: true,
466 |   flex: true,
467 |   flexGrow: true,
468 |   flexPositive: true,
469 |   flexShrink: true,
470 |   flexNegative: true,
471 |   flexOrder: true,
472 |   gridRow: true,
473 |   gridColumn: true,
474 |   fontWeight: true,
475 |   lineClamp: true,
476 |   lineHeight: true,
477 |   opacity: true,
478 |   order: true,
479 |   orphans: true,
480 |   tabSize: true,
481 |   widows: true,
482 |   zIndex: true,
483 |   zoom: true,
484 | 
485 |   // SVG-related properties
486 |   fillOpacity: true,
487 |   stopOpacity: true,
488 |   strokeDashoffset: true,
489 |   strokeOpacity: true,
490 |   strokeWidth: true,
491 | }
492 | 
493 | /**
494 |  * Will add px to the end of style values which are Numbers.
495 |  * @param name
496 |  * @param value
497 |  * @returns {*}
498 |  */
499 | export function addPx(name: string, value: number | string) {
500 |   if (typeof value === 'number' && !IS_UNITLESS[name]) {
501 |     return value + 'px'
502 |   } else {
503 |     return value
504 |   }
505 | }
506 | 
507 | export const hyphenateRE = /([a-z\d])([A-Z])/g
508 | 
509 | /**
510 |  * Hyphenate a camelCase string.
511 |  *
512 |  * @param  str
513 |  * @return
514 |  */
515 | export function hyphenate(str: string) {
516 |   return str.replace(hyphenateRE, '$1-$2').toLowerCase()
517 | }
518 | 
519 | export function findItemInArray(array: any[], property: string, value: any) {
520 |   for (let i = 0; i < array.length; i++) {
521 |     if (array[i][property] === value) {
522 |       return true
523 |     }
524 |   }
525 | 
526 |   return false
527 | }
528 | 
529 | export function findAndRemove(array: any[], property: string, value: any) {
530 |   array.forEach(function (result, index) {
531 |     if (result[property] === value) {
532 |       // Remove from array
533 |       array.splice(index, 1)
534 |     }
535 |   })
536 | }
537 | 
538 | export function useNameHelper(block: string, namespace = 'vgl') {
539 |   /**
540 |    * @returns `${namespace}-${block}`
541 |    */
542 |   const b = () => `${namespace}-${block}`
543 |   /**
544 |    * @returns `${namespace}-${block}__${element}`
545 |    */
546 |   const be = (element: string) => `${b()}__${element}`
547 |   /**
548 |    * @returns `${namespace}-${block}--${modifier}`
549 |    */
550 |   const bm = (modifier: string | number) => `${b()}--${modifier}`
551 |   /**
552 |    * @returns `${namespace}-${block}__${element}--${modifier}`
553 |    */
554 |   const bem = (element: string, modifier: string | number) => `${b()}__${element}--${modifier}`
555 | 
556 |   return {
557 |     b,
558 |     be,
559 |     bm,
560 |     bem,
561 |   }
562 | }
563 | 


--------------------------------------------------------------------------------
/src/helpers/dom.ts:
--------------------------------------------------------------------------------
 1 | let currentDir: 'ltr' | 'rtl' | 'auto' = 'auto'
 2 | 
 3 | function hasDocument() {
 4 |   return typeof document !== 'undefined'
 5 | }
 6 | 
 7 | export function getDocumentDir() {
 8 |   if (!hasDocument()) {
 9 |     return currentDir
10 |   }
11 |   const direction =
12 |     typeof document.dir !== 'undefined'
13 |       ? document.dir
14 |       : document.getElementsByTagName('html')[0].getAttribute('dir')
15 |   return direction
16 | }
17 | 
18 | export function setDocumentDir(dir: 'ltr' | 'rtl' | 'auto') {
19 |   if (!hasDocument()) {
20 |     currentDir = dir
21 |     return
22 |   }
23 | 
24 |   const html = document.getElementsByTagName('html')[0]
25 |   html.setAttribute('dir', dir)
26 | }
27 | 


--------------------------------------------------------------------------------
/src/helpers/draggable.ts:
--------------------------------------------------------------------------------
 1 | // Get {x, y} positions from event.
 2 | export function getControlPosition(e: MouseEvent) {
 3 |   return offsetXYFromParentOf(e)
 4 | }
 5 | 
 6 | // Get from offsetParent
 7 | export function offsetXYFromParentOf(evt: MouseEvent) {
 8 |   const offsetParent = (evt.target as HTMLElement)?.offsetParent || document.body
 9 |   const offsetParentRect =
10 |     (evt as any).offsetParent === document.body
11 |       ? { left: 0, top: 0 }
12 |       : offsetParent.getBoundingClientRect()
13 | 
14 |   const x = evt.clientX + offsetParent.scrollLeft - offsetParentRect.left
15 |   const y = evt.clientY + offsetParent.scrollTop - offsetParentRect.top
16 | 
17 |   /* const x = Math.round(evt.clientX + offsetParent.scrollLeft - offsetParentRect.left);
18 |   const y = Math.round(evt.clientY + offsetParent.scrollTop - offsetParentRect.top); */
19 | 
20 |   return { x, y }
21 | }
22 | 
23 | // Create an data object exposed by <DraggableCore>'s events
24 | export function createCoreData(lastX: number, lastY: number, x: number, y: number) {
25 |   // State changes are often (but not always!) async. We want the latest value.
26 |   const isStart = !isNum(lastX)
27 | 
28 |   if (isStart) {
29 |     // If this is our first move, use the x and y as last coords.
30 |     return {
31 |       deltaX: 0,
32 |       deltaY: 0,
33 |       lastX: x,
34 |       lastY: y,
35 |       x,
36 |       y,
37 |     }
38 |   } else {
39 |     // Otherwise calculate proper values.
40 |     return {
41 |       deltaX: x - lastX,
42 |       deltaY: y - lastY,
43 |       lastX,
44 |       lastY,
45 |       x,
46 |       y,
47 |     }
48 |   }
49 | }
50 | 
51 | function isNum(num: unknown): num is number {
52 |   return typeof num === 'number' && !Number.isNaN(num)
53 | }
54 | 


--------------------------------------------------------------------------------
/src/helpers/responsive.ts:
--------------------------------------------------------------------------------
  1 | import { cloneLayout, compact, correctBounds } from './common'
  2 | 
  3 | import type { Breakpoint, Breakpoints, Layout, ResponsiveLayout } from './types'
  4 | 
  5 | /**
  6 |  * Given a width, find the highest breakpoint that matches is valid for it (width > breakpoint).
  7 |  *
  8 |  * @param   breakpoints Breakpoints object (e.g. {lg: 1200, md: 960, ...})
  9 |  * @param   width Screen width.
 10 |  * @return        Highest breakpoint that is less than width.
 11 |  */
 12 | export function getBreakpointFromWidth(breakpoints: Breakpoints, width: number): Breakpoint {
 13 |   const sorted = sortBreakpoints(breakpoints)
 14 |   let matching = sorted[0]
 15 |   for (let i = 1, len = sorted.length; i < len; i++) {
 16 |     const breakpointName = sorted[i]
 17 |     if (width > breakpoints[breakpointName]) matching = breakpointName
 18 |   }
 19 |   return matching
 20 | }
 21 | 
 22 | /**
 23 |  * Given a breakpoint, get the # of cols set for it.
 24 |  * @param   breakpoint Breakpoint name.
 25 |  * @param   cols       Map of breakpoints to cols.
 26 |  * @return             Number of cols.
 27 |  */
 28 | export function getColsFromBreakpoint(breakpoint: Breakpoint, cols: Breakpoints): number {
 29 |   if (!cols[breakpoint]) {
 30 |     throw new Error(
 31 |       'ResponsiveGridLayout: `cols` entry for breakpoint ' + breakpoint + ' is missing!',
 32 |     )
 33 |   }
 34 |   return cols[breakpoint]
 35 | }
 36 | 
 37 | /**
 38 |  * Given existing layouts and a new breakpoint, find or generate a new layout.
 39 |  *
 40 |  * This finds the layout above the new one and generates from it, if it exists.
 41 |  *
 42 |  * @param  orgLayout     Original layout.
 43 |  * @param  layouts     Existing layouts.
 44 |  * @param  breakpoints All breakpoints.
 45 |  * @param  breakpoint New breakpoint.
 46 |  * @param  breakpoint Last breakpoint (for fallback).
 47 |  * @param  cols       Column count at new breakpoint.
 48 |  * @param  verticalCompact Whether or not to compact the layout
 49 |  *   vertically.
 50 |  * @return              New layout.
 51 |  */
 52 | export function findOrGenerateResponsiveLayout(
 53 |   orgLayout: Layout,
 54 |   layouts: ResponsiveLayout,
 55 |   breakpoints: Breakpoints,
 56 |   breakpoint: Breakpoint,
 57 |   lastBreakpoint: Breakpoint,
 58 |   cols: number,
 59 |   verticalCompact: boolean,
 60 | ): Layout {
 61 |   debugger
 62 |   // If it already exists, just return it.
 63 |   if (layouts[breakpoint]) return cloneLayout(layouts[breakpoint])
 64 |   // Find or generate the next layout
 65 |   let layout = orgLayout
 66 | 
 67 |   const breakpointsSorted = sortBreakpoints(breakpoints)
 68 |   const breakpointsAbove = breakpointsSorted.slice(breakpointsSorted.indexOf(breakpoint))
 69 |   for (let i = 0, len = breakpointsAbove.length; i < len; i++) {
 70 |     const b = breakpointsAbove[i]
 71 |     if (layouts[b]) {
 72 |       layout = layouts[b]
 73 |       break
 74 |     }
 75 |   }
 76 |   layout = cloneLayout(layout || []) // clone layout so we don't modify existing items
 77 |   return compact(correctBounds(layout, { cols }), verticalCompact)
 78 | }
 79 | 
 80 | export function generateResponsiveLayout(
 81 |   layout: Layout,
 82 |   breakpoints: Breakpoints,
 83 |   breakpoint: Breakpoint,
 84 |   lastBreakpoint: Breakpoint,
 85 |   cols: number,
 86 |   verticalCompact: boolean,
 87 | ): Layout {
 88 |   // If it already exists, just return it.
 89 |   /* if (layouts[breakpoint]) return cloneLayout(layouts[breakpoint]);
 90 |   // Find or generate the next layout
 91 |   let layout = layouts[lastBreakpoint]; */
 92 |   /* const breakpointsSorted = sortBreakpoints(breakpoints);
 93 | const breakpointsAbove = breakpointsSorted.slice(breakpointsSorted.indexOf(breakpoint));
 94 | for (let i = 0, len = breakpointsAbove.length; i < len; i++) {
 95 |   const b = breakpointsAbove[i];
 96 |   if (layouts[b]) {
 97 |     layout = layouts[b];
 98 |     break;
 99 |   }
100 | } */
101 |   layout = cloneLayout(layout || []) // clone layout so we don't modify existing items
102 |   return compact(correctBounds(layout, { cols }), verticalCompact)
103 | }
104 | 
105 | /**
106 |  * Given breakpoints, return an array of breakpoints sorted by width. This is usually
107 |  * e.g. ['xxs', 'xs', 'sm', ...]
108 |  *
109 |  * @param  breakpoints Key/value pair of breakpoint names to widths.
110 |  * @return              Sorted breakpoints.
111 |  */
112 | export function sortBreakpoints(breakpoints: Breakpoints): Array<Breakpoint> {
113 |   const keys = Object.keys(breakpoints) as Array<Breakpoint>
114 |   return keys.sort((a, b) => breakpoints[a] - breakpoints[b])
115 | }
116 | 


--------------------------------------------------------------------------------
/src/helpers/types.ts:
--------------------------------------------------------------------------------
 1 | export interface LayoutItemRequired {
 2 |   w: number,
 3 |   h: number,
 4 |   x: number,
 5 |   y: number,
 6 |   i: number | string
 7 | }
 8 | 
 9 | export interface LayoutItem extends LayoutItemRequired {
10 |   minW?: number,
11 |   minH?: number,
12 |   maxW?: number,
13 |   maxH?: number,
14 |   moved?: boolean,
15 |   static?: boolean,
16 |   isDraggable?: boolean,
17 |   isResizable?: boolean
18 | }
19 | 
20 | export type Layout = Array<LayoutItem>
21 | 
22 | export type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
23 | export type Breakpoints = Record<Breakpoint, number>
24 | export type ResponsiveLayout = Record<Breakpoint, Layout>
25 | 
26 | /** @internal */
27 | export interface LayoutInstance {
28 |   responsive: boolean,
29 |   lastBreakpoint: Breakpoint,
30 |   cols: Breakpoints,
31 |   colNum: number,
32 |   rowHeight: number,
33 |   width: number,
34 |   margin: number[],
35 |   isDraggable: boolean,
36 |   isResizable: boolean,
37 |   isBounded: boolean,
38 |   transformScale: number,
39 |   useCssTransforms: boolean,
40 |   useStyleCursor: boolean,
41 |   maxRows: number,
42 |   isMirrored: boolean,
43 |   increaseItem: (item: any) => void,
44 |   decreaseItem: (item: any) => void
45 | }
46 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import './style.scss'
2 | 
3 | export { default as GridLayout } from './components/grid-layout.vue'
4 | export { default as GridItem } from './components/grid-item.vue'
5 | 
6 | export type * from './components/types'
7 | export type * from './helpers/types'
8 | 


--------------------------------------------------------------------------------
/src/style.scss:
--------------------------------------------------------------------------------
 1 | .vgl-layout {
 2 |   --vgl-placeholder-bg: red;
 3 |   --vgl-placeholder-opacity: 20%;
 4 |   --vgl-placeholder-z-index: 2;
 5 | 
 6 |   --vgl-item-resizing-z-index: 3;
 7 |   --vgl-item-resizing-opacity: 60%;
 8 |   --vgl-item-dragging-z-index: 3;
 9 |   --vgl-item-dragging-opacity: 100%;
10 | 
11 |   --vgl-resizer-size: 10px;
12 |   --vgl-resizer-border-color: #444;
13 |   --vgl-resizer-border-width: 2px;
14 | 
15 |   position: relative;
16 |   box-sizing: border-box;
17 |   transition: height 200ms ease;
18 | }
19 | 
20 | .vgl-item {
21 |   position: absolute;
22 |   box-sizing: border-box;
23 |   transition: 200ms ease;
24 |   transition-property: left, top, right;
25 | 
26 |   &--placeholder {
27 |     z-index: var(--vgl-placeholder-z-index, 2);
28 |     user-select: none;
29 |     background-color: var(--vgl-placeholder-bg, red);
30 |     opacity: var(--vgl-placeholder-opacity, 20%);
31 |     transition-duration: 100ms;
32 |   }
33 | 
34 |   &--no-touch {
35 |     touch-action: none;
36 |   }
37 | 
38 |   &--transform {
39 |     right: auto;
40 |     left: 0;
41 |     transition-property: transform;
42 |   }
43 | 
44 |   &--transform#{&}--rtl {
45 |     right: 0;
46 |     left: auto;
47 |   }
48 | 
49 |   &--resizing {
50 |     z-index: var(--vgl-item-resizing-z-index, 3);
51 |     user-select: none;
52 |     opacity: var(--vgl-item-resizing-opacity, 60%);
53 |   }
54 | 
55 |   &--dragging {
56 |     z-index: var(--vgl-item-dragging-z-index, 3);
57 |     user-select: none;
58 |     opacity: var(--vgl-item-dragging-opacity, 100%);
59 |     transition: none;
60 |   }
61 | 
62 |   &__resizer {
63 |     position: absolute;
64 |     right: 0;
65 |     bottom: 0;
66 |     box-sizing: border-box;
67 |     width: var(--vgl-resizer-size);
68 |     height: var(--vgl-resizer-size);
69 |     cursor: se-resize;
70 | 
71 |     $border-width: var(--vgl-resizer-border-width);
72 | 
73 |     &::before {
74 |       position: absolute;
75 |       inset: 0 3px 3px 0;
76 |       content: '';
77 |       border: 0 solid var(--vgl-resizer-border-color);
78 |       border-right-width: $border-width;
79 |       border-bottom-width: $border-width;
80 |     }
81 | 
82 |     &--rtl {
83 |       right: auto;
84 |       left: 0;
85 |       cursor: sw-resize;
86 | 
87 |       &::before {
88 |         inset: 0 0 3px 3px;
89 |         border-right-width: 0;
90 |         border-bottom-width: $border-width;
91 |         border-left-width: $border-width;
92 |       }
93 |     }
94 |   }
95 | }
96 | 


--------------------------------------------------------------------------------
/tests/grid-item.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { beforeAll, describe, expect, it } from 'vitest'
 2 | import { shallowMount } from '@vue/test-utils'
 3 | 
 4 | import { GridLayout } from '../src'
 5 | 
 6 | import type { Layout } from '../src/helpers/types'
 7 | 
 8 | describe('GridLayout test', () => {
 9 |   let layout: Layout
10 | 
11 |   beforeAll(() => {
12 |     const testLayout = [
13 |       {
14 |         x: 0,
15 |         y: 0,
16 |         w: 2,
17 |         h: 2,
18 |         i: '0',
19 |         resizable: true,
20 |         draggable: true,
21 |         static: false,
22 |         minY: 0,
23 |         maxY: 2,
24 |       },
25 |     ]
26 |     layout = JSON.parse(JSON.stringify(testLayout))
27 |   })
28 | 
29 |   describe('Interface test', () => {
30 |     it('should render correct contents', () => {
31 |       const wrapper = shallowMount(GridLayout, {
32 |         propsData: {
33 |           layout,
34 |         },
35 |       })
36 |       const grid = wrapper.find('.vgl-layout')
37 | 
38 |       expect(grid.exists()).toBe(true)
39 |     })
40 |   })
41 | })
42 | 


--------------------------------------------------------------------------------
/tests/helpers.spec.tsx:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @vitest-environment node
  3 |  */
  4 | 
  5 | import { describe, expect, it } from 'vitest'
  6 | 
  7 | import {
  8 |   bottom,
  9 |   collides,
 10 |   compact,
 11 |   moveElement,
 12 |   sortLayoutItemsByRowCol,
 13 |   validateLayout,
 14 | } from '../src/helpers/common'
 15 | 
 16 | import type { Layout, LayoutItem } from '../src/helpers/types'
 17 | 
 18 | describe('bottom', () => {
 19 |   it('Handles an empty layout as input', () => {
 20 |     expect(bottom([])).toEqual(0)
 21 |   })
 22 | 
 23 |   it('Returns the bottom coordinate of the layout', () => {
 24 |     expect(
 25 |       bottom([
 26 |         { i: '1', x: 0, y: 1, w: 1, h: 1 },
 27 |         { i: '2', x: 1, y: 2, w: 1, h: 1 },
 28 |       ]),
 29 |     ).toEqual(3)
 30 |   })
 31 | })
 32 | 
 33 | describe('sortLayoutItemsByRowCol', () => {
 34 |   it('should sort by top to bottom right', () => {
 35 |     const layout = [
 36 |       { x: 1, y: 1, w: 1, h: 1, i: '2' },
 37 |       { x: 1, y: 0, w: 1, h: 1, i: '1' },
 38 |       { x: 0, y: 1, w: 2, h: 2, i: '3' },
 39 |     ]
 40 |     expect(sortLayoutItemsByRowCol(layout)).toEqual([
 41 |       { x: 1, y: 0, w: 1, h: 1, i: '1' },
 42 |       { x: 0, y: 1, w: 2, h: 2, i: '3' },
 43 |       { x: 1, y: 1, w: 1, h: 1, i: '2' },
 44 |     ])
 45 |   })
 46 | })
 47 | 
 48 | describe('collides', () => {
 49 |   it('Returns whether the layout items collide', () => {
 50 |     expect(
 51 |       collides({ i: '1', x: 0, y: 1, w: 1, h: 1 }, { i: '2', x: 1, y: 2, w: 1, h: 1 }),
 52 |     ).toEqual(false)
 53 |     expect(
 54 |       collides({ i: '1', x: 0, y: 1, w: 1, h: 1 }, { i: '2', x: 0, y: 1, w: 1, h: 1 }),
 55 |     ).toEqual(true)
 56 |   })
 57 | })
 58 | 
 59 | describe('validateLayout', () => {
 60 |   it('Validates an empty layout', () => {
 61 |     validateLayout([])
 62 |   })
 63 |   it('Validates a populated layout', () => {
 64 |     validateLayout([
 65 |       { i: '1', x: 0, y: 1, w: 1, h: 1 },
 66 |       { i: '2', x: 1, y: 2, w: 1, h: 1 },
 67 |     ])
 68 |   })
 69 |   it('Throws errors on invalid input', () => {
 70 |     expect(() => {
 71 |       validateLayout([{ i: '1', x: 0, y: 1, w: 1, h: 1 }, { i: '2', x: 1, y: 2, w: 1 } as any])
 72 |     }).toThrowError(/layout\[1\]\.h must be a number!/i)
 73 |   })
 74 | })
 75 | 
 76 | describe('moveElement', () => {
 77 |   function compactAndMove(
 78 |     layout: Layout,
 79 |     layoutItem: LayoutItem,
 80 |     x?: number,
 81 |     y?: number,
 82 |     isUserAction = false,
 83 |     preventCollision = false,
 84 |   ) {
 85 |     return compact(moveElement(layout, layoutItem, x, y, isUserAction, preventCollision))
 86 |   }
 87 | 
 88 |   it('Does not change layout when colliding on no rearrangement mode', () => {
 89 |     const layout = [
 90 |       { i: '1', x: 0, y: 1, w: 1, h: 1, moved: false },
 91 |       { i: '2', x: 1, y: 2, w: 1, h: 1, moved: false },
 92 |     ]
 93 |     const layoutItem = layout[0]
 94 |     expect(
 95 |       moveElement(
 96 |         layout,
 97 |         layoutItem,
 98 |         1,
 99 |         2, // x, y
100 |         true,
101 |         true, // isUserAction, preventCollision
102 |       ),
103 |     ).toEqual([
104 |       { i: '1', x: 0, y: 1, w: 1, h: 1, moved: false },
105 |       { i: '2', x: 1, y: 2, w: 1, h: 1, moved: false },
106 |     ])
107 |   })
108 | 
109 |   it('Does change layout when colliding in rearrangement mode', () => {
110 |     const layout = [
111 |       { i: '1', x: 0, y: 0, w: 1, h: 1, moved: false },
112 |       { i: '2', x: 1, y: 0, w: 1, h: 1, moved: false },
113 |     ]
114 |     const layoutItem = layout[0]
115 |     expect(
116 |       moveElement(
117 |         layout,
118 |         layoutItem,
119 |         1,
120 |         0, // x, y
121 |         true,
122 |         false, // isUserAction, preventCollision
123 |       ),
124 |     ).toEqual([
125 |       { i: '1', x: 1, y: 0, w: 1, h: 1, moved: true },
126 |       { i: '2', x: 1, y: 1, w: 1, h: 1, moved: true },
127 |     ])
128 |   })
129 | 
130 |   it('Moves elements out of the way without causing panel jumps when compaction is vertical', () => {
131 |     const layout = [
132 |       { x: 0, y: 0, w: 1, h: 10, i: 'A' },
133 |       { x: 0, y: 10, w: 1, h: 1, i: 'B' },
134 |       { x: 0, y: 11, w: 1, h: 1, i: 'C' },
135 |     ]
136 |     // move A down slightly so it collides with C; can cause C to jump above B.
137 |     // We instead want B to jump above A (it has the room)
138 |     const itemA = layout[0]
139 |     expect(
140 |       compactAndMove(
141 |         layout,
142 |         itemA,
143 |         0,
144 |         1, // x, y
145 |         true,
146 |         false, // isUserAction, preventCollision
147 |       ),
148 |     ).toEqual([
149 |       expect.objectContaining({ x: 0, y: 1, w: 1, h: 10, i: 'A' }),
150 |       expect.objectContaining({ x: 0, y: 0, w: 1, h: 1, i: 'B' }),
151 |       expect.objectContaining({ x: 0, y: 11, w: 1, h: 1, i: 'C' }),
152 |     ])
153 |   })
154 | 
155 |   it('Calculates the correct collision when moving large object far', () => {
156 |     const layout = [
157 |       { x: 0, y: 0, w: 1, h: 10, i: 'A' },
158 |       { x: 0, y: 10, w: 1, h: 1, i: 'B' },
159 |       { x: 0, y: 11, w: 1, h: 1, i: 'C' },
160 |     ]
161 |     // Move A down by 2. This should move B above, but since we don't compact in between,
162 |     // C should move below.
163 |     const itemA = layout[0]
164 |     expect(
165 |       moveElement(
166 |         layout,
167 |         itemA,
168 |         0,
169 |         2, // x, y
170 |         true,
171 |         false, // isUserAction, preventCollision
172 |       ),
173 |     ).toEqual([
174 |       expect.objectContaining({ x: 0, y: 2, w: 1, h: 10, i: 'A' }),
175 |       expect.objectContaining({ x: 0, y: 1, w: 1, h: 1, i: 'B' }),
176 |       expect.objectContaining({ x: 0, y: 12, w: 1, h: 1, i: 'C' }),
177 |     ])
178 |   })
179 | 
180 |   it('Moves elements out of the way without causing panel jumps when compaction is vertical', () => {
181 |     const layout = [
182 |       { x: 0, y: 0, w: 1, h: 1, i: 'A' },
183 |       { x: 1, y: 0, w: 1, h: 1, i: 'B' },
184 |       { x: 0, y: 1, w: 2, h: 2, i: 'C' },
185 |     ]
186 |     // move A over slightly so it collides with B; can cause C to jump above B
187 |     // this test will check that that does not happen
188 |     const itemA = layout[0]
189 |     expect(
190 |       moveElement(
191 |         layout,
192 |         itemA,
193 |         1,
194 |         0, // x, y
195 |         true,
196 |         false, // isUserAction, preventCollision
197 |       ),
198 |     ).toEqual([
199 |       { x: 1, y: 0, w: 1, h: 1, i: 'A', moved: true },
200 |       { x: 1, y: 1, w: 1, h: 1, i: 'B', moved: true },
201 |       { x: 0, y: 2, w: 2, h: 2, i: 'C', moved: true },
202 |     ])
203 |   })
204 | 
205 |   it('Moves one element to another should cause moving down panels, vert compact', () => {
206 |     // | A | B |
207 |     // |C|  D  |
208 |     const layout = [
209 |       { x: 0, y: 0, w: 2, h: 1, i: 'A' },
210 |       { x: 2, y: 0, w: 2, h: 1, i: 'B' },
211 |       { x: 0, y: 1, w: 1, h: 1, i: 'C' },
212 |       { x: 1, y: 1, w: 3, h: 1, i: 'D' },
213 |     ]
214 |     // move B left slightly so it collides with A; can cause C to jump above A
215 |     // this test will check that that does not happen
216 |     const itemB = layout[1]
217 |     expect(
218 |       compactAndMove(
219 |         layout,
220 |         itemB,
221 |         1,
222 |         0, // x, y
223 |         true,
224 |         false, // isUserAction, preventCollision
225 |       ),
226 |     ).toEqual([
227 |       expect.objectContaining({ x: 0, y: 1, w: 2, h: 1, i: 'A' }),
228 |       expect.objectContaining({ x: 1, y: 0, w: 2, h: 1, i: 'B' }),
229 |       expect.objectContaining({ x: 0, y: 2, w: 1, h: 1, i: 'C' }),
230 |       expect.objectContaining({ x: 1, y: 2, w: 3, h: 1, i: 'D' }),
231 |     ])
232 |   })
233 | 
234 |   it('Moves one element to another should cause moving down panels, vert compact', () => {
235 |     // | A |
236 |     // |B|C|
237 |     //   | |
238 |     //
239 |     // Moving C above A should not move B above A
240 |     const layout = [
241 |       { x: 0, y: 0, w: 2, h: 1, i: 'A' },
242 |       { x: 0, y: 1, w: 1, h: 1, i: 'B' },
243 |       { x: 1, y: 1, w: 1, h: 2, i: 'C' },
244 |     ]
245 |     // Move C up.
246 |     const itemB = layout[2]
247 |     expect(
248 |       compactAndMove(
249 |         layout,
250 |         itemB,
251 |         1,
252 |         0, // x, y
253 |         true,
254 |         false, // isUserAction, preventCollision
255 |       ),
256 |     ).toEqual([
257 |       expect.objectContaining({ x: 0, y: 2, w: 2, h: 1, i: 'A' }),
258 |       expect.objectContaining({ x: 0, y: 3, w: 1, h: 1, i: 'B' }),
259 |       expect.objectContaining({ x: 1, y: 0, w: 1, h: 2, i: 'C' }),
260 |     ])
261 |   })
262 | })
263 | 
264 | describe('compact vertical', () => {
265 |   it('Removes empty vertical space above item', () => {
266 |     const layout = [{ i: '1', x: 0, y: 1, w: 1, h: 1 }]
267 |     expect(compact(layout, true)).toEqual([{ i: '1', x: 0, y: 0, w: 1, h: 1, moved: false }])
268 |   })
269 | 
270 |   it('Resolve collision by moving item further down in array', () => {
271 |     const layout = [
272 |       { x: 0, y: 0, w: 1, h: 5, i: '1' },
273 |       { x: 0, y: 1, w: 1, h: 1, i: '2' },
274 |     ]
275 |     expect(compact(layout, true)).toEqual([
276 |       { x: 0, y: 0, w: 1, h: 5, i: '1', moved: false },
277 |       { x: 0, y: 5, w: 1, h: 1, i: '2', moved: false },
278 |     ])
279 |   })
280 | 
281 |   it('Handles recursive collision by moving new collisions out of the way before moving item down', () => {
282 |     const layout = [
283 |       { x: 0, y: 0, w: 2, h: 5, i: '1' },
284 |       { x: 0, y: 0, w: 10, h: 1, i: '2' },
285 |       { x: 5, y: 1, w: 1, h: 1, i: '3' },
286 |       { x: 5, y: 2, w: 1, h: 1, i: '4' },
287 |       { x: 5, y: 3, w: 1, h: 1, i: '5', static: true },
288 |     ]
289 | 
290 |     expect(compact(layout, true)).toEqual([
291 |       { x: 0, y: 0, w: 2, h: 5, i: '1', moved: false },
292 |       { x: 0, y: 5, w: 10, h: 1, i: '2', moved: false },
293 |       { x: 5, y: 0, w: 1, h: 1, i: '3', moved: false },
294 |       { x: 5, y: 1, w: 1, h: 1, i: '4', moved: false },
295 |       { x: 5, y: 3, w: 1, h: 1, i: '5', moved: false, static: true },
296 |     ])
297 |   })
298 | })
299 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "allowJs": false,
 6 |     "strict": true,
 7 |     "jsx": "preserve",
 8 |     "importHelpers": true,
 9 |     "moduleResolution": "bundler",
10 |     "skipLibCheck": true,
11 |     "noUnusedLocals": false,
12 |     "experimentalDecorators": true,
13 |     "resolveJsonModule": true,
14 |     "esModuleInterop": true,
15 |     "allowSyntheticDefaultImports": true,
16 |     "sourceMap": false,
17 |     "baseUrl": ".",
18 |     "types": [
19 |       "node",
20 |       "vite/client"
21 |     ],
22 |     "lib": [
23 |       "esnext",
24 |       "dom"
25 |     ]
26 |   },
27 |   "include": [
28 |     "dev-server",
29 |     "src"
30 |   ],
31 |   "exclude": [
32 |     "node_modules"
33 |   ]
34 | }
35 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { resolve } from 'node:path'
 2 | import { readFileSync } from 'node:fs'
 3 | 
 4 | import { defineConfig } from 'vite'
 5 | import vue from '@vitejs/plugin-vue'
 6 | import cssInject from 'vite-plugin-css-injected-by-js'
 7 | import autoprefixer from 'autoprefixer'
 8 | 
 9 | interface Manifest {
10 |   dependencies?: Record<string, string>,
11 |   peerDependencies?: Record<string, string>,
12 |   version?: string
13 | }
14 | 
15 | const pkg = JSON.parse(readFileSync(resolve(__dirname, 'package.json'), 'utf-8')) as Manifest
16 | 
17 | const externalPkgs = ['@vue'].concat(
18 |   Object.keys(pkg.dependencies || {}),
19 |   Object.keys(pkg.peerDependencies || {}),
20 | )
21 | const external = (id: string) => externalPkgs.some(p => p === id || id.startsWith(`${p}/`))
22 | 
23 | export default defineConfig({
24 |   esbuild: {
25 |     drop: ['debugger'],
26 |     pure: ['console.log'],
27 |   },
28 |   css: {
29 |     postcss: {
30 |       plugins: [autoprefixer],
31 |     },
32 |   },
33 |   build: {
34 |     outDir: 'es',
35 |     sourcemap: true,
36 |     lib: {
37 |       entry: resolve(__dirname, 'src/index.ts'),
38 |       formats: ['es'],
39 |     },
40 |     rollupOptions: {
41 |       input: [resolve(__dirname, 'src/index.ts')],
42 |       external,
43 |       output: [
44 |         {
45 |           format: 'cjs',
46 |           preserveModules: true,
47 |           preserveModulesRoot: resolve(__dirname, 'src'),
48 |           dir: 'lib',
49 |           entryFileNames: '[name].js',
50 |         },
51 |         {
52 |           format: 'es',
53 |           preserveModules: true,
54 |           preserveModulesRoot: resolve(__dirname, 'src'),
55 |           dir: 'es',
56 |           entryFileNames: '[name].mjs',
57 |         },
58 |       ],
59 |     },
60 |     commonjsOptions: {
61 |       sourceMap: false,
62 |     },
63 |   },
64 |   plugins: [vue(), cssInject()],
65 | })
66 | 


--------------------------------------------------------------------------------
/vite.full.config.ts:
--------------------------------------------------------------------------------
 1 | import { resolve } from 'node:path'
 2 | 
 3 | import { defineConfig } from 'vite'
 4 | import vue from '@vitejs/plugin-vue'
 5 | import dts from 'vite-plugin-dts'
 6 | import cssInject from 'vite-plugin-css-injected-by-js'
 7 | import autoprefixer from 'autoprefixer'
 8 | 
 9 | export default defineConfig({
10 |   publicDir: false,
11 |   esbuild: {
12 |     drop: ['debugger'],
13 |     pure: ['console.log'],
14 |   },
15 |   css: {
16 |     postcss: {
17 |       plugins: [autoprefixer],
18 |     },
19 |   },
20 |   build: {
21 |     outDir: 'dist',
22 |     sourcemap: true,
23 |     lib: {
24 |       entry: resolve(__dirname, 'src/index.ts'),
25 |       formats: ['es', 'cjs', 'iife'],
26 |       name: 'GridLayoutPlus',
27 |       fileName: format =>
28 |         `grid-layout-plus.${format === 'es' ? 'mjs' : format === 'cjs' ? 'cjs' : 'js'}`,
29 |     },
30 |     rollupOptions: {
31 |       external: ['vue'],
32 |       output: {
33 |         globals: {
34 |           vue: 'Vue',
35 |         },
36 |       },
37 |     },
38 |     commonjsOptions: {
39 |       sourceMap: false,
40 |     },
41 |     chunkSizeWarningLimit: 10000,
42 |   },
43 |   plugins: [
44 |     vue(),
45 |     cssInject(),
46 |     dts({
47 |       exclude: ['node_modules', 'dev-server', 'scripts'],
48 |     }),
49 |   ],
50 | })
51 | 


--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
 1 | import { resolve } from 'node:path'
 2 | import { readdirSync, statSync } from 'node:fs'
 3 | 
 4 | import { defineConfig } from 'vitest/config'
 5 | import vue from '@vitejs/plugin-vue'
 6 | import vueJsx from '@vitejs/plugin-vue-jsx'
 7 | 
 8 | const dirs = readdirSync(__dirname).filter(f => statSync(resolve(f)).isDirectory())
 9 | 
10 | export default defineConfig({
11 |   test: {
12 |     include: ['tests/*.spec.{ts,tsx}'],
13 |     environment: 'happy-dom',
14 |     clearMocks: true,
15 |     setupFiles: [resolve(__dirname, 'scripts/test-setup.ts')],
16 |     coverage: {
17 |       exclude: dirs.filter(f => f !== 'src').map(f => `${f}/**`),
18 |       reporter: ['text'],
19 |       extension: ['ts', 'tsx', 'vue'],
20 |     },
21 |     testTimeout: 10000,
22 |     server: {
23 |       deps: {
24 |         inline: [/@interactjs\//],
25 |       },
26 |     },
27 |   },
28 |   plugins: [vue(), vueJsx()],
29 | })
30 | 


--------------------------------------------------------------------------------