Skip to content
This repository was archived by the owner on Oct 24, 2019. It is now read-only.

Commit 43a0a8d

Browse files
author
Sohee Lee
committed
fix: change bundle file name and set tui.grid to external
1 parent 40eafb5 commit 43a0a8d

File tree

7 files changed

+109
-94
lines changed

7 files changed

+109
-94
lines changed

.eslintrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"extends": [
3-
"tui",
3+
"tui/es6",
44
"plugin:vue/base"
55
],
66
"parserOptions": {

CONTRIBUTING.md

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Explain the problem and include additional details to help maintainers reproduce
1818

1919
## Suggesting Enhancements
2020
In case you want to suggest for TOAST UI Editor, please follow this guideline to help maintainers and the community understand your suggestion.
21-
Before creating suggestions, please check [issue list](https://github.nhnent.com/fe/tui.editor/labels/feature%20request) if there's already a request.
21+
Before creating suggestions, please check [issue list](https://github.com/nhnent/toast-ui.vue-grid/labels/feature%20request) if there's already a request.
2222

2323
Create an issue and provide the following information:
2424

@@ -42,14 +42,13 @@ Unsure where to begin contributing to TOAST UI? You can start by looking through
4242
### Development WorkFlow
4343
- Set up your development environment
4444
- Make change from a right branch
45-
- Be sure the code passes `npm run lint`, `npm run test`
45+
- Be sure the code passes `npm run lint`
4646
- Make a pull request
4747

4848
### Development environment
4949
- Prepare your machine node and it's packages installed.
5050
- Checkout our repository
51-
- Install dependencies by `npm install && bower install`
52-
- Start webpack-dev-server by `npm run serve`
51+
- Install dependencies by `npm install`
5352

5453
### Make changes
5554
#### Checkout a branch
@@ -58,12 +57,7 @@ Unsure where to begin contributing to TOAST UI? You can start by looking through
5857
- **gh-pages**: API docs, examples and demo
5958

6059
#### Check Code Style
61-
Run `npm run eslint` and make sure all the tests pass.
62-
63-
#### Test
64-
Run `npm run test` and verify all the tests pass.
65-
If you are adding new commands or features, they must include tests.
66-
If you are changing functionality, update the tests if you need to.
60+
Run `npm run lint` and make sure all the tests pass.
6761

6862
#### Commit
6963
Follow our [commit message conventions](./docs/COMMIT_MESSAGE_CONVENTION.md).

README.md

Lines changed: 42 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Vue wrapper for TOAST UI Grid
1+
# TOAST UI Grid for Vue
22

33
> This is Vue component wrapping [TOAST UI Grid](https://github.com/nhnent/tui.grid).
44
@@ -7,7 +7,7 @@
77
[![npm version](https://img.shields.io/npm/v/@toast-ui/vue-grid.svg)](https://www.npmjs.com/package/@toast-ui/vue-grid)
88
[![license](https://img.shields.io/github/license/nhnent/toast-ui.vue-grid.svg)](https://github.com/nhnent/toast-ui.vue-grid/blob/master/LICENSE)
99
[![PRs welcome](https://img.shields.io/badge/PRs-welcome-ff69b4.svg)](https://github.com/nhnent/toast-ui.vue-grid/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22)
10-
[![code with hearth by NHN ent.](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-NHN%20Ent.-brightgreen.svg)](https://github.com/nhnent)
10+
[![code with hearth by NHN Entertainment](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-NHN%20Entertainment-ff1414.svg)](https://github.com/nhnent)
1111

1212
## 🚩 Table of Contents
1313
* [Collect statistics on the use of open source](#collect-statistics-on-the-use-of-open-source)
@@ -30,7 +30,16 @@
3030

3131
## Collect statistics on the use of open source
3232

33-
Vue Wrapper of TOAST UI Grid applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Grid is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, include tui-code-snippet.js and then immediately write the options as follows:
33+
Vue Wrapper of TOAST UI Grid applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Grid is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the following `usageStatistics` option when declare Vue Wrapper compoent.
34+
35+
```js
36+
var options = {
37+
...
38+
usageStatistics: false
39+
}
40+
```
41+
42+
Or, include include `tui-code-snippet.js` (**v1.4.0** or **later**) and then immediately write the options as follows:
3443
```js
3544
tui.usageStatistics = false;
3645
```
@@ -45,48 +54,52 @@ npm install --save @toast-ui/vue-grid
4554

4655
### Via Contents Delivery Network (CDN)
4756

48-
TOAST UI products are available over the CDN powered by [TOAST Cloud](https://www.toast.com).
49-
50-
You can use the CDN as below.
57+
TOAST UI products are available over the CDN powered by [TOAST Cloud](https://www.toast.com). When you load `toastui-vue-grid.js` using CDN, you should insert dependency modules `vue`, `tui-grid.js` and `tui-grid.css` in the html. Also you should insert `jquery`, `underscore`, `backbone`, `tui-code-snippet`, `tui-pagination`, `tui-date-picker` that dependency modules of `tui-grid`. For more information about dependency of `tui-grid`, see [Download Files of Toast UI Grid](https://github.com/nhnent/tui.grid/blob/master/docs/getting-started.md#downloading-files)
5158

5259
```html
53-
<script src="https://uicdn.toast.com/toast-ui.vue-grid/latest/vue-grid.js"></script>
60+
<script src="path/to/jquery">
61+
<script src="path/to/underscore">
62+
<script src="path/to/tui-code-snippet">
63+
<script src="path/to/tui-pagination">
64+
<script src="path/to/ui-date-picker">
65+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
66+
<script src="https://uicdn.toast.com/tui-grid/latest/tui-grid.js"></script>
67+
<script src="https://uicdn.toast.com/toast-ui.vue-grid/latest/toastui-vue-grid.js"></script>
68+
<link rel="stylesheet" href="https://uicdn.toast.com/tui-grid/latest/tui-grid.css" />
5469
```
5570

5671
## 🔡 Usage
5772

5873
### Load
5974

60-
* Using namespace
75+
You can use Toast UI Grid for Vue as moudule format or namespace. Also you can use Single File Component (SFC of Vue). When using module format and SFC, you should load `tui-grid.css` in the script.
76+
77+
* Using Ecmascript module
6178

6279
```js
63-
var Grid = toastui.Grid;
80+
import 'tui-grid/dist/tui-grid.css'
81+
import { Grid } from '@toast-ui/vue-grid'
6482
```
6583

66-
* Using module
84+
* Using Commonjs module
6785

6886
```js
69-
// es modules
70-
import Grid from '@toast-ui/vue-grid'
71-
// commonjs require
72-
var Grid = require('@toast-ui/vue-grid');
87+
require('tui-grid/dist/tui-grid.css');
88+
var toastui = require('@toast-ui/vue-grid');
89+
var Grid = toastui.Calendar;
7390
```
7491

75-
* Using `<script>`
76-
77-
If you just add javascript file to your html, you use CDN or `vue-grid.js` downloaded. Insert `vue-grid.js` with `vue` in your html like this:
78-
79-
```html
80-
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
81-
<script src="path/to/vue-grid.js"></script>
82-
```
92+
* Using Single File Component
8393

84-
* Using only Vue wrapper component (Single File Component)
94+
```js
95+
import 'tui-grid/dist/tui-grid.css'
96+
import Grid from '@toast-ui/vue-grid/src/Grid.vue'
97+
```
8598

86-
`vue-grid.js` has all of the tui.grid. If you only need vue wrapper component, you can use `@toast-ui/vue-grid/src/Grid.vue` like this:
99+
* Using namespace
87100

88101
```js
89-
import Grid from '@toast-ui/vue-chart/src/Grid.vue'
102+
var Grid = toastui.Grid;
90103
```
91104

92105
### Implement
@@ -100,7 +113,8 @@ First insert `<grid>` in the template or html. `rowData` and `columnData` props
100113
Load grid component and then add it to the `components` in your component or Vue instance.
101114

102115
```js
103-
import Grid from '@toast-ui/vue-grid'
116+
import 'tui-grid/dist/tui-grid.css'
117+
import { Grid } from '@toast-ui/vue-grid'
104118
105119
export default {
106120
components: {
@@ -159,7 +173,7 @@ You can use `rowData`, `columnData`, `options`, `theme` and `language` props. Ex
159173
| --- | --- |
160174
| Strinf or Object | X |
161175

162-
This prop can change theme of the chart. We support `default`, `striped` and `clean` themes. So in case you just set `String` of these themes.
176+
This prop can change theme of the grid. We support `default`, `striped` and `clean` themes. So in case you just set `String` of these themes.
163177

164178
If you want to use other theme, you set `Object` that is required `name` and `value`. For more information which properties of `value` are available, see `extOptions` of [applyTheme of tui.grid](https://nhnent.github.io/tui.grid/api/Grid.html#.applyTheme).
165179

@@ -169,7 +183,7 @@ You can use `rowData`, `columnData`, `options`, `theme` and `language` props. Ex
169183
| --- | --- |
170184
| String or Object | X |
171185

172-
This prop can change language of the chart. We support `en` and `ko`. So in case you just set `String` of these languages.
186+
This prop can change language of the grid. We support `en` and `ko`. So in case you just set `String` of these languages.
173187

174188
If you want to use other languages, you set `Object` that is required `name` and `value`. For more infomation which properties of `value` are available, see `data` of [setLanguage of tui.grid](https://nhnent.github.io/tui.grid/api/Grid.html#.setLanguage).
175189

docs/getting-started.md

Lines changed: 47 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -26,48 +26,53 @@ npm install --save @toast-ui/vue-grid
2626

2727
### Via Contents Delivery Network (CDN)
2828

29-
TOAST UI products are available over the CDN powered by [TOAST Cloud](https://www.toast.com).
30-
31-
You can use the CDN as below.
29+
TOAST UI products are available over the CDN powered by [TOAST Cloud](https://www.toast.com). When you load `toastui-vue-grid.js` using CDN, you should insert dependency modules `vue`, `tui-grid.js` and `tui-grid.css` in the html. Also you should insert `jquery`, `underscore`, `backbone`, `tui-code-snippet`, `tui-pagination`, `tui-date-picker` that dependency modules of `tui-grid`. For more information about dependency of `tui-grid`, see [Download Files of Toast UI Grid](https://github.com/nhnent/tui.grid/blob/master/docs/getting-started.md#downloading-files)
3230

3331
```html
34-
<script src="https://uicdn.toast.com/toast-ui.vue-grid/latest/vue-grid.js"></script>
32+
<script src="path/to/jquery">
33+
<script src="path/to/underscore">
34+
<script src="path/to/backbone">
35+
<script src="path/to/tui-code-snippet">
36+
<script src="path/to/tui-pagination">
37+
<script src="path/to/tui-date-picker">
38+
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
39+
<script src="https://uicdn.toast.com/tui-grid/latest/tui-grid.js"></script>
40+
<script src="https://uicdn.toast.com/toast-ui.vue-grid/latest/toastui-vue-grid.js"></script>
41+
<link rel="stylesheet" href="https://uicdn.toast.com/tui-grid/latest/tui-grid.css" />
3542
```
3643

3744
## 🔡 Usage
3845

3946
### Load
4047

41-
* Using namespace
48+
You can use Toast UI Grid for Vue as moudule format or namespace. Also you can use Single File Component (SFC of Vue). When using module format and SFC, you should load `tui-grid.css` in the script.
49+
50+
* Using Ecmascript module
4251

4352
```js
44-
var Grid = toastui.Grid;
53+
import 'tui-grid/dist/tui-grid.css'
54+
import { Grid } from '@toast-ui/vue-grid'
4555
```
4656

47-
* Using module
57+
* Using Commonjs module
4858

4959
```js
50-
// es modules
51-
import Grid from '@toast-ui/vue-grid'
52-
// commonjs require
53-
var Grid = require('@toast-ui/vue-grid');
60+
require('tui-grid/dist/tui-grid.css');
61+
var toastui = require('@toast-ui/vue-grid');
62+
var Grid = toastui.Calendar;
5463
```
5564

56-
* Using `<script>`
57-
58-
If you just add javascript file to your html, you use CDN or `vue-grid.js` downloaded. Insert `vue-grid.js` with `vue` in your html like this:
59-
60-
```html
61-
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
62-
<script src="path/to/vue-grid.js"></script>
63-
```
65+
* Using Single File Component
6466

65-
* Using only Vue wrapper component (Single File Component)
67+
```js
68+
import 'tui-grid/dist/tui-grid.css'
69+
import Grid from '@toast-ui/vue-grid/src/Grid.vue'
70+
```
6671

67-
`vue-grid.js` has all of the tui.grid. If you only need vue wrapper component, you can use `@toast-ui/vue-grid/src/Grid.vue` like this:
72+
* Using namespace
6873

6974
```js
70-
import Grid from '@toast-ui/vue-chart/src/Grid.vue'
75+
var Grid = toastui.Grid;
7176
```
7277

7378
### Implement
@@ -81,7 +86,8 @@ First insert `<grid>` in the template or html. `rowData` and `columnData` props
8186
Load grid component and then add it to the `components` in your component or Vue instance.
8287

8388
```js
84-
import Grid from '@toast-ui/vue-grid'
89+
import 'tui-grid/dist/tui-grid.css'
90+
import { Grid } from '@toast-ui/vue-grid'
8591
8692
export default {
8793
components: {
@@ -115,7 +121,8 @@ export default {
115121
```
116122
or
117123
```js
118-
import Grid from '@toast-ui/vue-grid'
124+
import 'tui-grid/dist/tui-grid.css'
125+
import { Grid } from '@toast-ui/vue-grid'
119126
120127
new Vue({
121128
el: '#app',
@@ -168,7 +175,8 @@ You can use `rowData`, `columnData`, `options`, `theme` and `language` props.
168175
<grid :rowData="rows" :columnData="columns" />
169176
</template>
170177
<script>
171-
import Grid from '@toast-ui/vue-grid';
178+
import 'tui-grid/dist/tui-grid.css'
179+
import { Grid } from '@toast-ui/vue-grid';
172180
173181
export default {
174182
name: 'myGrid',
@@ -218,7 +226,8 @@ You can use `rowData`, `columnData`, `options`, `theme` and `language` props.
218226
<grid :rowData="rows" :columnData="columns" :options="options"/>
219227
</template>
220228
<script>
221-
import Grid from '@toast-ui/vue-grid';
229+
import 'tui-grid/dist/tui-grid.css'
230+
import { Grid } from '@toast-ui/vue-grid';
222231
223232
export default {
224233
name: 'myGrid',
@@ -251,7 +260,7 @@ You can use `rowData`, `columnData`, `options`, `theme` and `language` props.
251260
| --- | --- |
252261
| Strinf or Object | X |
253262

254-
This prop can change theme of the chart. We support `default`, `striped` and `clean` themes. So in case you just set `String` of these themes.
263+
This prop can change theme of the grid. We support `default`, `striped` and `clean` themes. So in case you just set `String` of these themes.
255264

256265
If you want to use other theme, you set `Object` that is required `name` and `value`. For more information which properties of `value` are available, see `extOptions` of [applyTheme of tui.grid](https://nhnent.github.io/tui.grid/api/Grid.html#.applyTheme).
257266

@@ -262,7 +271,8 @@ You can use `rowData`, `columnData`, `options`, `theme` and `language` props.
262271
<grid :rowData="rows" :columnData="columns" :theme="striped"/>
263272
</template>
264273
<script>
265-
import Grid from '@toast-ui/vue-grid';
274+
import 'tui-grid/dist/tui-grid.css'
275+
import { Grid } from '@toast-ui/vue-grid';
266276
267277
export default {
268278
name: 'myGrid',
@@ -290,7 +300,8 @@ You can use `rowData`, `columnData`, `options`, `theme` and `language` props.
290300
<grid :rowData="rows" :columnData="columns" :theme="myTheme"/>
291301
</template>
292302
<script>
293-
import Grid from '@toast-ui/vue-grid';
303+
import 'tui-grid/dist/tui-grid.css'
304+
import { Grid } from '@toast-ui/vue-grid';
294305
295306
export default {
296307
name: 'myGrid',
@@ -335,7 +346,7 @@ You can use `rowData`, `columnData`, `options`, `theme` and `language` props.
335346
| --- | --- |
336347
| String or Object | X |
337348

338-
This prop can change language of the chart. We support `en` and `ko`. So in case you just set `String` of these languages.
349+
This prop can change language of the grid. We support `en` and `ko`. So in case you just set `String` of these languages.
339350

340351
If you want to use other languages, you set `Object` that is required `name` and `value`. For more infomation which properties of `value` are available, see `data` of [setLanguage of tui.grid](https://nhnent.github.io/tui.grid/api/Grid.html#.setLanguage).
341352

@@ -346,7 +357,8 @@ You can use `rowData`, `columnData`, `options`, `theme` and `language` props.
346357
<grid :rowData="rows" :columnData="columns" :theme="ko"/>
347358
</template>
348359
<script>
349-
import Grid from '@toast-ui/vue-grid';
360+
import 'tui-grid/dist/tui-grid.css'
361+
import { Grid } from '@toast-ui/vue-grid';
350362
351363
export default {
352364
name: 'myGrid',
@@ -374,7 +386,8 @@ You can use `rowData`, `columnData`, `options`, `theme` and `language` props.
374386
<grid :rowData="rows" :columnData="columns" :language="myLang"/>
375387
</template>
376388
<script>
377-
import Grid from '@toast-ui/vue-grid';
389+
import 'tui-grid/dist/tui-grid.css'
390+
import { Grid } from '@toast-ui/vue-grid';
378391
379392
export default {
380393
name: 'myGrid',
@@ -453,7 +466,8 @@ Example :
453466
/>
454467
</template>
455468
<script>
456-
import Grid from '@toast-ui/vue-grid';
469+
import 'tui-grid/dist/tui-grid.css'
470+
import { Grid } from '@toast-ui/vue-grid';
457471
458472
export default {
459473
name: 'myGrid',

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"name": "@toast-ui/vue-grid",
3-
"version": "1.0.0",
3+
"version": "1.0.1",
44
"description": "Vue wrapper component for tui.grid",
5-
"main": "dist/vue-grid.js",
5+
"main": "dist/toastui-vue-grid.js",
66
"files": [
77
"dist",
88
"src"

0 commit comments

Comments
 (0)