chore: apply review - 1

Author: jung-han

CONTRIBUTING.md

@@ -17,15 +17,15 @@ Explain the problem and include additional details to help maintainers reproduce
 * **Include screenshots and animated GIFs** which show you following the described steps and clearly demonstrate the problem.
 
 ## Suggesting Enhancements
-In case you want to suggest for TOAST UI Editor, please follow this guideline to help maintainers and the community understand your suggestion.
+In case you want to suggest for TOAST UI Grid, please follow this guideline to help maintainers and the community understand your suggestion.
 Before creating suggestions, please check [issue list](https://github.com/nhn/toast-ui.vue-grid/labels/feature%20request) if there's already a request.
 
 Create an issue and provide the following information:
 
 * **Use a clear and descriptive title** for the issue to identify the suggestion.
 * **Provide a step-by-step description of the suggested enhancement** in as many details as possible.
 * **Provide specific examples to demonstrate the steps.** Include copy/pasteable snippets which you use in those examples, as Markdown code blocks.
-* **Include screenshots and animated GIFs** which helps demonstrate the steps or point out the part of TOAST UI Editor which the suggestion is related to.
+* **Include screenshots and animated GIFs** which helps demonstrate the steps or point out the part of TOAST UI Grid which the suggestion is related to.
 * **Explain why this enhancement would be useful** to most TOAST UI users.
 * **List some other text editors or applications where this enhancement exists.**
 

README.md

@@ -86,12 +86,12 @@ You can use Toast UI Grid for Vue as moudule format or namespace. Also you can u
 First insert `<grid>` in the template or html. `rowData` and `columnData` props are required.
 
 ```html
-<grid :rowData="options.rows" :columnData="options.columns" />
+<grid :data="gridProps.data" :columns="gridProps.columns" />
 ```
 
 Load grid component and then add it to the `components` in your component or Vue instance.
 
-> Tui-grid has its own reactivity system, and does not use the reactivity system of vue. So, instead of adding props in the `data`, declare props in the `created` lifecycle method.
+> TOAST UI Grid has its own reactivity system, and does not use the reactivity system of Vue. So, instead of adding props in the `data`, declare `props` in the `created` lifecycle method.
 
 ```js
 import 'tui-grid/dist/tui-grid.css'
@@ -102,8 +102,8 @@ export default {
     'grid': Grid
   },
   created() {
-    this.options = {
-      rows: [ // for rowData prop
+    this.gridProps = {
+      data: [ // for rowData prop
         {
           name: 'Beautiful Lies',
           artist: 'Birdy'
@@ -178,7 +178,7 @@ You can use `rowData`, `columnData`, `options`, `theme` and `language` props. Ex
 * mouseout : Occurs when a mouse pointer is moved off from the Grid.
 * mousedown : Occurs when a mouse button is downed on the Grid.
 * focusChange : Occurs when focused cell is about to change.
-* expande : Occurs when the row having child rows is expanded.
+* expand : Occurs when the row having child rows is expanded.
 * collapse : Occurs when the row having child rows is collapsed.
 * beforeRequest : Occurs before the http request is sent.
 * response : Occurs when the response is received from the server.

docs/getting-started.md

@@ -61,12 +61,12 @@ You can use Toast UI Grid for Vue as module format or namespace. Also you can us
 First insert `<grid>` in the template or html. `rowData` and `columnData` props are required.
 
 ```html
-<grid :rowData="options.rows" :columnData="options.columns" />
+<grid :data="gridProps.data" :columns="gridProps.columns" />
 ```
 
 Load grid component and then add it to the `components` in your component or Vue instance.
 
-> Tui-grid has its own reactivity system, and does not use the reactivity system of vue. So, instead of adding props in the `data`, declare props in the `created` lifecycle method.
+> TOAST UI Grid has its own reactivity system, and does not use the reactivity system of Vue. So, instead of adding props in the `data`, declare `props` in the `created` lifecycle method.
 
 ```js
 import 'tui-grid/dist/tui-grid.css'
@@ -78,7 +78,7 @@ export default {
   },
   created() {
     this.options = {
-      rows: [ // for rowData prop
+      data: [ // for rowData prop
         {
           name: 'Beautiful Lies',
           artist: 'Birdy'
@@ -119,7 +119,10 @@ You can use `rowData`, `columnData`, `options`, `theme` and `language` props.
 
     ``` html
     <template>
-      <grid :rowData="rows" :columnData="columns" />
+      <grid
+        :data="gridProps.data" 
+        :columns="gridProps.columns" 
+      />
     </template>
     <script>
     import 'tui-grid/dist/tui-grid.css'
@@ -131,8 +134,8 @@ You can use `rowData`, `columnData`, `options`, `theme` and `language` props.
         'grid': Grid
       },
       created() {
-        this.options = {
-          rows: [ // for rowData prop
+        this.gridProps = {
+          data: [ // for rowData prop
             {
               name: 'Beautiful Lies',
               artist: 'Birdy'
@@ -171,9 +174,9 @@ You can use `rowData`, `columnData`, `options`, `theme` and `language` props.
     ``` html
     <template>
         <grid
-          :rowData="options.rows"
-          :columnData="options.columns"
-          :options="options.options"
+          :data="gridProps.data"
+          :columns="gridProps.columns"
+          :options="gridProps.options"
         />
     </template>
     <script>
@@ -186,8 +189,8 @@ You can use `rowData`, `columnData`, `options`, `theme` and `language` props.
           'grid': Grid
         },
         created() {
-          this.options = {
-            rows: [
+          this.gridProps = {
+            data: [
               // ... omit
             ],
             columns: [ 
@@ -220,8 +223,8 @@ You can use `rowData`, `columnData`, `options`, `theme` and `language` props.
     ``` html
     <template>
       <grid
-        :rowData="options.rows"
-        :columnData="options.columns"
+        :data="gridProps.data"
+        :columns="gridProps.columns"
         :theme="'striped'"
       />
     </template>
@@ -235,7 +238,7 @@ You can use `rowData`, `columnData`, `options`, `theme` and `language` props.
         'grid': Grid
       },
       created() {
-        this.options = {
+        this.gridProps = {
           rows: [
             // ... omit
           ],
@@ -253,9 +256,9 @@ You can use `rowData`, `columnData`, `options`, `theme` and `language` props.
     ``` html
     <template>
       <grid
-        :rowData="options.rows"
-        :columnData="options.columns"
-        :theme="options.myTheme"
+        :data="gridProps.rows"
+        :columns="gridProps.columns"
+        :theme="gridProps.myTheme"
       />
     </template>
     <script>
@@ -268,8 +271,8 @@ You can use `rowData`, `columnData`, `options`, `theme` and `language` props.
         'grid': Grid
       },
       created() {
-        this.options = {
-          rows: [
+        this.gridProps = {
+          data: [
             // ... omit
           ],
           columns: [ 
@@ -313,7 +316,11 @@ You can use `rowData`, `columnData`, `options`, `theme` and `language` props.
 
     ```html
     <template>
-        <grid :rowData="rows" :columnData="columns" :language="'ko'"/>
+        <grid 
+          :data="rows" 
+          :columns="columns" 
+          :language="'ko'"
+        />
     </template>
     <script>
     import 'tui-grid/dist/tui-grid.css'
@@ -336,9 +343,9 @@ You can use `rowData`, `columnData`, `options`, `theme` and `language` props.
     ```html
     <template>
       <grid 
-        :rowData="options.rows" 
-        :columnData="options.columns" 
-        :language="options.myLang"
+        :data="gridProps.data" 
+        :columns="gridProps.columns" 
+        :language="gridProps.myLang"
       />
     </template>
     <script>
@@ -351,8 +358,8 @@ You can use `rowData`, `columnData`, `options`, `theme` and `language` props.
         'grid': Grid
       },
       created() {
-        this.options = {
-          rows: [
+        this.gridProps = {
+          data: [
               // ... omit
           ],
           columns: [ 
@@ -412,8 +419,8 @@ Example :
 ```html
 <template>
   <grid
-    :rowData="rows"
-    :columnData="columns"
+    :data="gridProps.data"
+    :columns="gridProps.columns"
     @click="onClick"
     @check="onCheck"
   />
@@ -428,8 +435,8 @@ export default {
     'grid': Grid
   },
   created() {
-    this.options = {
-      rows: [
+    this.gridProps = {
+      data: [
         // ... omit
       ],
       columns: [ 
@@ -454,7 +461,7 @@ export default {
 For use method, first you need to assign `ref` attribute of element like this:
 
 ```html
-<grid ref="tuiGrid" :rowData="rows" :columnData="columns"/>
+<grid ref="tuiGrid" :data="rows" :columns="columns"/>
 ```
 
 After then you can use methods through `this.$refs`. We provide `getRootElement` and `invoke` methods.

example/App.vue

@@ -2,10 +2,10 @@
   <div class="container">
     <h1>🍞🔡 TOAST UI Grid + Vue</h1>
     <grid
-      :rowData="options.data"
-      :columnData="options.columns"
-      :options="options.options"
-      :theme="options.myTheme"
+      :data="gridProps.data"
+      :columns="gridProps.columns"
+      :options="gridProps.options"
+      :theme="gridProps.myTheme"
       @check="onCheck"
       @uncheck="onUnCheck"
     ></grid>
@@ -20,7 +20,7 @@ export default {
     grid: Grid
   },
   created() {
-    this.options = {
+    this.gridProps = {
       columns: [
         {
           header: 'Name',
@@ -43,6 +43,7 @@ export default {
           copyOptions: {
             useListItemText: true
           },
+          formatter: 'listItemText',
           editor: {
             type: 'radio',
             options: {

package.json

@@ -5,7 +5,6 @@
   "main": "dist/toastui-vue-grid.js",
   "files": [
     "dist",
-    "src",
     "index.d.ts"
   ],
   "scripts": {

src/Grid.vue

@@ -30,11 +30,11 @@ const presetLanguage = ['en', 'ko'];
 export default {
   name: 'TuiGrid',
   props: {
-    rowData: {
+    data: {
       type: Array,
       required: true
     },
-    columnData: {
+    columns: {
       type: Array,
       required: true
     },
@@ -79,8 +79,8 @@ export default {
   mounted() {
     const options = Object.assign({}, this.options, {
       el: this.$refs.tuiGrid,
-      data: this.rowData,
-      columns: this.columnData
+      data: this.data,
+      columns: this.columns
     });
     this.gridInstance = new Grid(options);
     this.addEventListeners();