Skip to content

Commit e07c54d

Browse files
selfagencyselfagency
committed
init
1 parent 178cd64 commit e07c54d

File tree

9 files changed

+1976
-79
lines changed

9 files changed

+1976
-79
lines changed

‎.editorconfig

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# top-most EditorConfig file
2+
root = true
3+
4+
# Unix-style newlines with a newline ending every file
5+
[*]
6+
end_of_line = lf
7+
insert_final_newline = true
8+
charset = utf-8
9+
indent_style = space
10+
indent_size = 2
11+
12+
[*.cs]
13+
indent_size = 4

‎.gitignore

+74-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,78 @@
1+
# File created using '.gitignore Generator' for Visual Studio Code: https://bit.ly/vscode-gig
2+
3+
# Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode,macos,linux,sass,vue,vuejs
4+
# Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode,macos,linux,sass,vue,vuejs
5+
6+
### Linux ###
7+
*~
8+
9+
# temporary files which can be created if a process still has a handle open of a deleted file
10+
.fuse_hidden*
11+
12+
# KDE directory preferences
13+
.directory
14+
15+
# Linux trash folder which might appear on any partition or disk
16+
.Trash-*
17+
18+
# .nfs files are created when an open file is removed but is still being accessed
19+
.nfs*
20+
21+
### macOS ###
22+
# General
123
.DS_Store
2-
node_modules
3-
/dist
24+
.AppleDouble
25+
.LSOverride
26+
27+
# Icon must end with two \r
28+
Icon
29+
30+
# Thumbnails
31+
._*
32+
33+
# Files that might appear in the root of a volume
34+
.DocumentRevisions-V100
35+
.fseventsd
36+
.Spotlight-V100
37+
.TemporaryItems
38+
.Trashes
39+
.VolumeIcon.icns
40+
.com.apple.timemachine.donotpresent
41+
42+
# Directories potentially created on remote AFP share
43+
.AppleDB
44+
.AppleDesktop
45+
Network Trash Folder
46+
Temporary Items
47+
.apdisk
48+
49+
### Sass ###
50+
.sass-cache/
51+
*.css.map
52+
*.sass.map
53+
*.scss.map
54+
55+
### VisualStudioCode ###
56+
.vscode/*
57+
!.vscode/settings.json
58+
!.vscode/tasks.json
59+
!.vscode/launch.json
60+
!.vscode/extensions.json
61+
*.code-workspace
62+
63+
### VisualStudioCode Patch ###
64+
# Ignore all local history of files
65+
.history
66+
67+
### Vuejs ###
68+
# Recommended template: Node.gitignore
69+
70+
node_modules/
71+
dist/
72+
73+
# End of https://www.toptal.com/developers/gitignore/api/visualstudiocode,macos,linux,sass,vue,vuejs
74+
75+
# Custom rules (everything added below won't be overriden by 'Generate .gitignore File' if you use 'Update' option)
476

577
# local env files
678
.env.local

‎.prettierrc

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"arrowParens": "avoid",
3+
"bracketSpacing": true,
4+
"jsxBracketSameLine": true,
5+
"printWidth": 120,
6+
"proseWrap": "preserve",
7+
"semi": false,
8+
"singleQuote": true,
9+
"tabWidth": 2,
10+
"trailingComma": "none"
11+
}

‎README.md

+102-19
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,112 @@
1-
# vue-gridjs
1+
# Welcome to vue-gridjs 👋
22

3-
## Project setup
4-
```
5-
yarn install
6-
```
3+
![Version](https://img.shields.io/badge/version-0.1.0-blue.svg?cacheSeconds=2592000)
4+
[![Documentation](https://img.shields.io/badge/documentation-yes-brightgreen.svg)](https://gitlab.com/selfagency/vue-gridjs)
5+
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](#)
6+
[![Twitter: selfagency_llc](https://img.shields.io/twitter/follow/selfagency_llc.svg?style=social)](https://twitter.com/selfagency_llc)
77

8-
### Compiles and hot-reloads for development
9-
```
10-
yarn serve
11-
```
8+
> A Vue.js wrapper component for Grid.js
129
13-
### Compiles and minifies for production
14-
```
15-
yarn build
16-
```
10+
### 🏠 [Homepage](https://gitlab.com/selfagency/vue-gridjs)
11+
12+
## Install
1713

18-
### Run your unit tests
14+
```sh
15+
yarn install vue-gridjs || npm install vue-gridjs
1916
```
20-
yarn test:unit
17+
18+
## Component Registration
19+
20+
### Global Registration
21+
22+
```js
23+
/* in `main.js` or wherever you specify your global components */
24+
import Grid from 'vue-gridjs'
25+
Vue.component('grid', Grid)
2126
```
2227

23-
### Lints and fixes files
28+
### Local Registration
29+
30+
```vue
31+
<script>
32+
import Grid from 'vue-gridjs'
33+
34+
export default {
35+
components: {
36+
Grid
37+
}
38+
}
39+
</script>
2440
```
25-
yarn lint
41+
42+
## Usage
43+
44+
Pass either `data`, `from`, or `server` as a data source. Everything else is optional.
45+
46+
Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific configuration options.
47+
48+
```vue
49+
<template>
50+
<grid
51+
:auto-width="autowidth"
52+
:data="data"
53+
:from="from"
54+
:language="language"
55+
:pagination="pagination"
56+
:search="search"
57+
:server="server"
58+
:sort="sort"
59+
:width="width"
60+
></grid>
61+
</template>
62+
63+
<script>
64+
import Grid from 'vue-gridjs'
65+
66+
export default {
67+
name: 'MyTable',
68+
components: {
69+
Grid
70+
},
71+
data() {
72+
return {
73+
auto-width: true/false, // boolean
74+
data: { // object containing arrays columns & rows
75+
cols: ['column 1', 'column 2'],
76+
rows: ['row 1: col 1', 'row 1: col 2']
77+
},
78+
from: '.my-element', // string of HTML table selector
79+
language: {} // dictionary object
80+
pagination: true/false || {} // boolean pagination settings object
81+
search: true/false || {} // boolean or search settings object
82+
server: {} // server settings object
83+
sort: true/false || {} // boolean sort settings object
84+
width: '100%' // string with css width value
85+
}
86+
}
87+
}
88+
</script>
2689
```
2790

28-
### Customize configuration
29-
See [Configuration Reference](https://cli.vuejs.org/config/).
91+
## Author
92+
93+
👤 **Daniel Sieradski <[email protected]>**
94+
95+
- Website: https://self.agency
96+
- Twitter: [@selfagency_llc](https://twitter.com/selfagency_llc)
97+
- Github: [@selfagency](https://github.com/selfagency)
98+
- LinkedIn: [@selfagency](https://linkedin.com/in/selfagency)
99+
100+
## 🤝 Contributing
101+
102+
Contributions, issues and feature requests are welcome!
103+
104+
Feel free to check [issues page](https://gitlab.com/selfagency/vue-gridjs/issues).
105+
106+
## Show your support
107+
108+
Give a ⭐️ if this project helped you!
109+
110+
---
111+
112+
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_

‎package.json

+29
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,43 @@
22
"name": "vue-gridjs",
33
"version": "0.1.0",
44
"private": true,
5+
"main": "src/components/Grid.vue",
56
"scripts": {
67
"serve": "vue-cli-service serve",
78
"build": "vue-cli-service build",
89
"test:unit": "vue-cli-service test:unit",
910
"lint": "vue-cli-service lint"
1011
},
12+
"@pika/pack": {
13+
"pipeline": [
14+
[
15+
"@pika/plugin-standard-pkg",
16+
{
17+
"exclude": [
18+
"tests/**/*"
19+
]
20+
}
21+
],
22+
[
23+
"@pika/plugin-build-web"
24+
],
25+
[
26+
"@pika/plugin-build-types"
27+
]
28+
]
29+
},
1130
"dependencies": {
1231
"core-js": "^3.6.5",
32+
"element-ready": "^4.1.1",
33+
"gridjs": "^1.5.0",
34+
"uuid": "^8.1.0",
1335
"vue": "^2.6.11"
1436
},
1537
"devDependencies": {
38+
"@pika/pack": "^0.5.0",
39+
"@pika/plugin-build-types": "^0.9.2",
40+
"@pika/plugin-build-web": "^0.9.2",
41+
"@pika/plugin-standard-pkg": "^0.9.2",
1642
"@vue/cli-plugin-babel": "~4.4.0",
1743
"@vue/cli-plugin-eslint": "~4.4.0",
1844
"@vue/cli-plugin-unit-jest": "~4.4.0",
@@ -23,7 +49,10 @@
2349
"eslint": "^6.7.2",
2450
"eslint-plugin-prettier": "^3.1.3",
2551
"eslint-plugin-vue": "^6.2.2",
52+
"node-sass": "^4.14.1",
2653
"prettier": "^1.19.1",
54+
"sass-loader": "^8.0.2",
55+
"typescript": "^3.9.5",
2756
"vue-template-compiler": "^2.6.11"
2857
}
2958
}

‎src/App.vue

+47-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,51 @@
11
<template>
22
<div id="app">
3-
<img alt="Vue logo" src="./assets/logo.png" />
4-
<h1>Welcome to Your Vue.js App</h1>
3+
<div v-for="(config, key) in configs" :key="key">
4+
<grid
5+
:auto-width="config.autowidth"
6+
:data="config.data"
7+
:from="config.from"
8+
:language="config.language"
9+
:pagination="config.pagination"
10+
:search="config.search"
11+
:server="config.server"
12+
:sort="config.sort"
13+
:width="config.width"
14+
></grid>
15+
</div>
516
</div>
617
</template>
18+
19+
<script>
20+
import Grid from './components/Grid.vue'
21+
22+
export default {
23+
name: 'App',
24+
components: {
25+
Grid
26+
},
27+
data() {
28+
return {
29+
configs: [
30+
{
31+
data: {
32+
cols: ['a'],
33+
rows: ['b']
34+
}
35+
},
36+
{
37+
autoWidth: false,
38+
data: {
39+
cols: ['a'],
40+
rows: ['b']
41+
},
42+
pagination: false,
43+
search: false,
44+
sort: false,
45+
width: '500px'
46+
}
47+
]
48+
}
49+
}
50+
}
51+
</script>

‎src/assets/logo.png

-6.69 KB
Binary file not shown.

0 commit comments

Comments
 (0)