Skip to content

Commit 2795a86

Browse files
dattndattn
committed
rewrite WIP
1 parent c032b18 commit 2795a86

File tree

17 files changed

+1966
-1384
lines changed

17 files changed

+1966
-1384
lines changed

‎.editorconfig

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
root = true
2-
3-
[*]
1+
[*.{js,jsx,cjs,ts,tsx,vue,json,css,scss,html}]
42
charset = utf-8
53
indent_style = space
64
indent_size = 4
75
end_of_line = lf
8-
insert_final_newline = true
96
trim_trailing_whitespace = true
7+
insert_final_newline = true
8+
9+
[*.{json,html}]
10+
insert_final_newline = false

‎.eslintrc.cjs

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/* eslint-env node */
2+
module.exports = {
3+
root: true,
4+
plugins: ['import'],
5+
extends: [
6+
'plugin:vue/vue3-recommended',
7+
'eslint:recommended'
8+
],
9+
parserOptions: {
10+
ecmaVersion: 'latest'
11+
},
12+
ignorePatterns: ['**/node_modules/**'],
13+
rules: {
14+
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
15+
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
16+
indent: ['error', 4, { SwitchCase: 1 }], // 4 spaces
17+
'vue/html-indent': ['error', 4 ],
18+
'semi': ['error', 'never'],
19+
'import/extensions': ['error', 'always'],
20+
'vue/component-tags-order': 'off',
21+
'vue/custom-event-name-casing': 'off',
22+
'vue/no-template-shadow': 'off',
23+
'vue/multi-word-component-names': 'off',
24+
'vue/no-setup-props-destructure': 'off', // not needed because of "reactivity transform"
25+
'func-call-spacing': ['error', 'never'],
26+
'space-before-function-paren': ['error', 'always']
27+
},
28+
// temporary fix for "reactivity transform" makros
29+
globals: {
30+
$: 'readonly',
31+
$$: 'readonly',
32+
$ref: 'readonly',
33+
$computed: 'readonly',
34+
$shallowRef: 'readonly',
35+
$customRef: 'readonly',
36+
$toRef: 'readonly'
37+
}
38+
}

‎.npmignore

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎.vscode/extensions.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"recommendations": ["johnsoncodehk.volar"]
2+
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
33
}

‎LICENSE

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎README.md

Lines changed: 4 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +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-
# Usage
5+
## Recommended IDE Setup
66

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

‎index.html

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
<!DOCTYPE html>
22
<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-
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<link
7+
rel="stylesheet"
8+
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
9+
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
10+
crossorigin="anonymous"
11+
>
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
13+
<title>Vite + Vue</title>
14+
</head>
15+
<body>
16+
<div id="app"></div>
17+
<script type="module" src="/src/main.js"></script>
18+
</body>
1619
</html>

‎package.json

Lines changed: 17 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,27 @@
11
{
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-
},
2+
"name": "dnd-grid",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
146
"scripts": {
157
"dev": "vite",
168
"build": "vite build",
17-
"preview": "vite preview"
9+
"preview": "vite preview",
10+
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
11+
"preinstall": "npx only-allow pnpm"
1812
},
1913
"devDependencies": {
20-
"@vitejs/plugin-vue": "^2.2.0",
21-
"vite": "^2.8.0",
22-
"vue": "^3.2.25"
14+
"eslint": "^8.27.0",
15+
"eslint-plugin-import": "^2.26.0",
16+
"eslint-plugin-vue": "^9.7.0",
17+
"@vitejs/plugin-vue": "^4.0.0",
18+
"vite": "^4.0.0",
19+
"vue": "^3.2.45"
2320
},
2421
"peerDependencies": {
25-
"vue": "^3.2.25"
22+
"vue": "^3.2.45"
2623
},
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-
}
24+
"volta": {
25+
"node": "18.12.0"
3726
}
38-
}
27+
}

0 commit comments

Comments
 (0)