Skip to content

Commit 34f377b

Browse files
dattndattn
committed
migrate to vue 3
1 parent 0ae3663 commit 34f377b

24 files changed

+1569
-1151
lines changed

‎.eslintignore

-3
This file was deleted.

‎.eslintrc.js

-29
This file was deleted.

‎.gitignore

+22-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,24 @@
1-
.DS_Store
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
210
node_modules
3-
/dist
4-
/demo
5-
npm-debug.log
6-
yarn-error.log
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
718
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎.npmignore

+21-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,23 @@
1-
.DS_Store
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
210
node_modules
3-
/demo
4-
npm-debug.log
5-
yarn-error.log
11+
dist-ssr
12+
*.local
13+
14+
# Editor directories and files
15+
.vscode/*
16+
!.vscode/extensions.json
617
.idea
18+
.DS_Store
19+
*.suo
20+
*.ntvs*
21+
*.njsproj
22+
*.sln
23+
*.sw?

‎.vscode/extensions.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["johnsoncodehk.volar"]
3+
}

‎LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2017 dattn
3+
Copyright (c) 2022 dattn
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md

+4-120
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,7 @@
1-
# dnd-grid
1+
# Vue 3 + Vite
22

3-
> A vuejs grid with draggable and resizable boxes
3+
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
44

5-
[Demo page](https://dnd-grid.duton.lu/)
5+
## Recommended IDE Setup
66

7-
The **demo** requires **Vue >= 2.3.0** because of the ":layout.sync" feature
8-
9-
The **components** require **Vue >= 2.0.0**
10-
11-
# Usage
12-
13-
## Example
14-
15-
```html
16-
<dnd-grid-container :layout.sync="layoutJson">
17-
<dnd-grid-box :boxId="box1Id">
18-
<h1>Box 1</h1>
19-
</dnd-grid-box>
20-
<dnd-grid-box :boxId="box2Id" resizeVisible>
21-
<h1>Box 2</h1>
22-
</dnd-grid-box>
23-
...
24-
</dnd-grid-container>
25-
```
26-
27-
## Layout JSON
28-
29-
```javascript
30-
[
31-
{
32-
id: 'box-a',
33-
hidden: false,
34-
pinned: false,
35-
position: {
36-
x: 0,
37-
y: 0,
38-
w: 4, // Multiplier for virtual grid width
39-
h: 2 // Multiplier for virtual grid height
40-
}
41-
},
42-
{
43-
id: 'box-b',
44-
hidden: false,
45-
pinned: false,
46-
position: {
47-
x: 4,
48-
y: 0,
49-
w: 2,
50-
h: 1
51-
}
52-
},
53-
...
54-
]
55-
```
56-
## Container:
57-
58-
| Property | Default | Description |
59-
|----------------------- | --------------- | ------------------------------------------------------------------------- |
60-
| layout | | Array of objects each representing a box with the below Object properties |
61-
| - id | | The id of the box linked with this box layout (must be unique) |
62-
| - hidden | | hide or show the box |
63-
| - pinned | | If pinned, the box can not be dragged/resized and always stays in place |
64-
| - position | | The position/size in the grid |
65-
| - - x | | The x position in the grid by cells |
66-
| - - y | | The y position in the grid by cells |
67-
| - - w | | The width in the grid by cells |
68-
| - - h | | The height in the grid by cells |
69-
| cellSize | | Object describing the default cell size |
70-
| - w | 100 | Width in pixels |
71-
| - h | 100 | Height in pixels |
72-
| maxColumnCount | infinity | Integer max columns |
73-
| maxRowCount | infinity | Integer max rows |
74-
| margin | 5 | Integer in pixels |
75-
| outerMargin | 0 | Integer in pixels |
76-
| bubbleUp | false | Boolean when true bubbles boxes to the top of the screen |
77-
| autoAddLayoutForNewBox | true | Boolean |
78-
| defaultSize | | Default size of a new box |
79-
| - w | 1 | Width in cells |
80-
| - h | 1 | Height in cells |
81-
| fixLayoutOnLoad | true | Boolean describing to fix layout (overlaps) on load |
82-
83-
## Box:
84-
85-
| Property | DEFAULT | Description |
86-
|----------------------- | --------------- | ------------------------------------------------------------------------- |
87-
| boxId | ! | String, Box id, this is a required field |
88-
| dragSelector | * | String, id of the element by which you can drag the box |
89-
| resizeVisible | false | Boolean, displays a circle the corner of boxes on mobile devices |
90-
91-
## Installation
92-
93-
### Using npm or yarn
94-
95-
`npm i --save @dattn/dnd-grid`
96-
97-
`yarn install @dattn/dnd-grid`
98-
99-
### How to import (using ES6 import)
100-
101-
```javascript
102-
// import Container and Box components
103-
import { Container, Box } from '@dattn/dnd-grid'
104-
// minimal css for the components to work properly
105-
import '@dattn/dnd-grid/dist/dnd-grid.css'
106-
```
107-
108-
### Setup component
109-
110-
```javascript
111-
<script>
112-
export default {
113-
components: {
114-
DndGridContainer: Container,
115-
DndGridBox: Box
116-
}
117-
}
118-
</script>
119-
```
120-
121-
## License
122-
123-
This project is licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License)
7+
- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)

‎index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<link rel="icon" href="/favicon.ico" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Vite App</title>
9+
</head>
10+
11+
<body>
12+
<div id="app"></div>
13+
<script type="module" src="/src/main.js"></script>
14+
</body>
15+
16+
</html>

‎package.json

+36-39
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,38 @@
11
{
2-
"name": "@dattn/dnd-grid",
3-
"version": "0.0.14",
4-
"description": "A vuejs grid with draggable and resizable boxes",
5-
"author": "Daniel Duton <[email protected]>",
6-
"contributors": ["Jeffrey Ernst <[email protected]>"],
7-
"license": "MIT",
8-
"repository": {
9-
"type": "git",
10-
"url": "git+https://github.com/dattn/dnd-grid.git"
11-
},
12-
"main": "dist/dnd-grid.js",
13-
"scripts": {
14-
"dist": "poi build ./src/index.js --dist ./dist/ --prod --library",
15-
"dist:demo": "poi build ./src/demo/index.js --dist ./demo/ --prod",
16-
"build": "npm run dist -- --minimize 0",
17-
"build:demo": "npm run dist:demo -- --minimize 0",
18-
"start": "npm run dev",
19-
"dev": "poi ./src/demo/index.js",
20-
"lint": "eslint --ext .js,.vue src",
21-
"prepublishOnly": "npm run build"
22-
},
23-
"files": [
24-
"dist/"
25-
],
26-
"keywords": [
27-
"vue",
28-
"component"
29-
],
30-
"devDependencies": {
31-
"babel-eslint": "^8.2.2",
32-
"eslint": "^4.19.1",
33-
"eslint-config-standard": "^11.0.0",
34-
"eslint-plugin-html": "^4.0.2",
35-
"eslint-plugin-import": "^2.7.0",
36-
"eslint-plugin-node": "^6.0.1",
37-
"eslint-plugin-promise": "^3.7.0",
38-
"eslint-plugin-standard": "^3.0.1",
39-
"poi": "^9.6.13"
40-
}
2+
"name": "@dattn/dnd-grid",
3+
"version": "0.2.0",
4+
"description": "A vuejs grid with draggable and resizable boxes",
5+
"author": "Daniel Duton <[email protected]>",
6+
"contributors": [
7+
"Jeffrey Ernst <[email protected]>"
8+
],
9+
"license": "MIT",
10+
"repository": {
11+
"type": "git",
12+
"url": "git+https://github.com/dattn/dnd-grid.git"
13+
},
14+
"scripts": {
15+
"dev": "vite",
16+
"build": "vite build",
17+
"preview": "vite preview"
18+
},
19+
"devDependencies": {
20+
"@vitejs/plugin-vue": "^2.2.0",
21+
"vite": "^2.8.0",
22+
"vue": "^3.2.25"
23+
},
24+
"peerDependencies": {
25+
"vue": "^3.2.25"
26+
},
27+
"files": [
28+
"dist"
29+
],
30+
"main": "./dist/dnd-grid.umd.js",
31+
"module": "./dist/dnd-grid.es.js",
32+
"exports": {
33+
".": {
34+
"import": "./dist/dnd-grid.es.js",
35+
"require": "./dist/dnd-grid.umd.js"
36+
}
37+
}
4138
}

0 commit comments

Comments
 (0)