add class name for test

plantain-00 · Oct 18, 2017 · fd9a94c · fd9a94c
1 parent dcfe539
commit fd9a94c
Show file tree

Hide file tree

Showing 40 changed files with 226 additions and 139 deletions.
diff --git a/demo/angular/index.bundle-a1c6e281fac13d78ae428da58c1ea659.js b/demo/angular/index.bundle-a1c6e281fac13d78ae428da58c1ea659.js
diff --git a/demo/angular/index.bundle-f8ab5cf19816eaba8c750e35fb84bc95.js b/demo/angular/index.bundle-f8ab5cf19816eaba8c750e35fb84bc95.js
diff --git a/demo/angular/index.html b/demo/angular/index.html
@@ -12,5 +12,5 @@
 </style>
 </head><body>
 <app></app>
-<script src="./index.bundle-f8ab5cf19816eaba8c750e35fb84bc95.js" crossOrigin="anonymous" integrity="sha256-YjZDyYb5TSgISOxj/oSEaJB6+7qPC9+oOW4Mmj5xy9o="></script>
+<script src="./index.bundle-a1c6e281fac13d78ae428da58c1ea659.js" crossOrigin="anonymous" integrity="sha256-72JtRrxxWeM1xtQkSz0G+ouFLlTFrFF41dtEfhhzXFQ="></script>
 </body></html>
diff --git a/demo/angular/index.ts b/demo/angular/index.ts
@@ -16,52 +16,68 @@ import { data, clearSelectionOfTree, toggle, setSelectionOfTree, setParentsSelec
         <a href="https://github.com/plantain-00/tree-component/tree/master/demo/angular/index.ts" target="_blank">the source code of the demo</a>
         <br/>
         default:
-        <tree [data]="data"
-            (toggle)="ontoggle($event)"
-            (change)="onchange($event)"></tree>
+        <div class="default">
+            <tree [data]="data"
+                (toggle)="ontoggle($event)"
+                (change)="onchange($event)"></tree>
+        </div>
         selected id: {{selectedId}}
         <hr/>
         checkbox:
-        <tree [data]="data2"
-            [checkbox]="true"
-            (toggle)="ontoggle2($event)"
-            (change)="onchange2($event)"></tree>
+        <div class="checkbox">
+            <tree [data]="data2"
+                [checkbox]="true"
+                (toggle)="ontoggle2($event)"
+                (change)="onchange2($event)"></tree>
+        </div>
         <hr/>
         draggable:
-        <tree [data]="data3"
-            [draggable]="true"
-            [dropAllowed]="dropAllowed"
-            (toggle)="ontoggle3($event)"
-            (drop)="drop3($event)"></tree>
+        <div class="draggable">
+            <tree [data]="data3"
+                [draggable]="true"
+                [dropAllowed]="dropAllowed"
+                (toggle)="ontoggle3($event)"
+                (drop)="drop3($event)"></tree>
+        </div>
         <hr/>
         no dots:
-        <tree [data]="data4"
-            [nodots]="true"
-            (toggle)="ontoggle4($event)"></tree>
+        <div class="no-dots">
+            <tree [data]="data4"
+                [nodots]="true"
+                (toggle)="ontoggle4($event)"></tree>
+        </div>
         <hr/>
         large:
-        <tree [data]="data5"
-            size="large"
-            (toggle)="ontoggle5($event)"></tree>
+        <div class="large">
+            <tree [data]="data5"
+                size="large"
+                (toggle)="ontoggle5($event)"></tree>
+        </div>
         <hr/>
         small:
-        <tree [data]="data6"
-            size="small"
-            (toggle)="ontoggle6($event)"></tree>
+        <div class="small">
+            <tree [data]="data6"
+                size="small"
+                (toggle)="ontoggle6($event)"></tree>
+        </div>
         <hr/>
         dark theme:
-        <tree [data]="data7"
-            theme="dark"
-            [checkbox]="true"
-            [draggable]="true"
-            (toggle)="ontoggle7($event)"
-            (change)="onchange7($event)"
-            (drop)="drop7($event)"></tree>
+        <div class="dark-theme">
+            <tree [data]="data7"
+                theme="dark"
+                [checkbox]="true"
+                [draggable]="true"
+                (toggle)="ontoggle7($event)"
+                (change)="onchange7($event)"
+                (drop)="drop7($event)"></tree>
+        </div>
         <hr/>
         node id:
-        <tree [data]="data9"
-            preid="test_"
-            (toggle)="ontoggle9($event)"></tree>
+        <div class="node-id">
+            <tree [data]="data9"
+                preid="test_"
+                (toggle)="ontoggle9($event)"></tree>
+        </div>
     </div>
     `,
 })

diff --git a/demo/file-size.json b/demo/file-size.json
@@ -1,10 +1,10 @@
 {
-  "angularIndexBundleJs": "775 kB 194 kB",
+  "angularIndexBundleJs": "776 kB 194 kB",
   "indexBundleCss": "39 kB 9.18 kB",
-  "reactIndexBundleJs": "134 kB 40.6 kB",
+  "reactIndexBundleJs": "135 kB 40.7 kB",
   "treeIconPng": "636 B 647 B",
-  "vueIndexBundleJs": "102 kB 34.7 kB",
+  "vueIndexBundleJs": "103 kB 34.9 kB",
   "demoAngularIndexHtml": "798 B 545 B",
-  "demoReactIndexHtml": "813 B 552 B",
-  "demoVueIndexHtml": "813 B 553 B"
+  "demoReactIndexHtml": "813 B 551 B",
+  "demoVueIndexHtml": "813 B 551 B"
 }
diff --git a/demo/react/index.bundle-0275d273614e1a8847966a49f7a18ce8.js b/demo/react/index.bundle-0275d273614e1a8847966a49f7a18ce8.js
diff --git a/demo/react/index.bundle-e85874b5bebd424ad45941117b93607f.js b/demo/react/index.bundle-e85874b5bebd424ad45941117b93607f.js
diff --git a/demo/react/index.html b/demo/react/index.html
@@ -12,5 +12,5 @@
 </style>
 </head><body>
 <div id="container"></div>
-<script src="./index.bundle-0275d273614e1a8847966a49f7a18ce8.js" crossOrigin="anonymous" integrity="sha256-PYA20RzSgfU9dlM6zA9d0ilRRw3M9fW90vH3EQ74EaM="></script>
+<script src="./index.bundle-e85874b5bebd424ad45941117b93607f.js" crossOrigin="anonymous" integrity="sha256-SQQhuib2d8k9Zw93w6pTgp0noIdCvj9CY5YtAbjI0Hs="></script>
 </body></html>
diff --git a/demo/react/index.tsx b/demo/react/index.tsx
@@ -37,65 +37,83 @@ class Main extends React.Component<{}, { data: TreeData<Value>[], selectedId: nu
                 <a href="https://github.com/plantain-00/tree-component/tree/master/demo/react/index.tsx" target="_blank">the source code of the demo</a>
                 <br />
                 default:
-                <Tree data={this.data}
-                    toggle={(eventData: EventData<Value>) => this.toggle(eventData)}
-                    change={(eventData: EventData<Value>) => this.change(eventData)}>
-                </Tree>
+                <div className="default">
+                    <Tree data={this.data}
+                        toggle={(eventData: EventData<Value>) => this.toggle(eventData)}
+                        change={(eventData: EventData<Value>) => this.change(eventData)}>
+                    </Tree>
+                </div>
                 selected id: {this.selectedId}
                 <hr />
                 checkbox:
-                <Tree data={this.data2}
-                    checkbox={true}
-                    toggle={(eventData: EventData<Value>) => this.toggle2(eventData)}
-                    change={(eventData: EventData<Value>) => this.change2(eventData)}>
-                </Tree>
+                <div className="checkbox">
+                    <Tree data={this.data2}
+                        checkbox={true}
+                        toggle={(eventData: EventData<Value>) => this.toggle2(eventData)}
+                        change={(eventData: EventData<Value>) => this.change2(eventData)}>
+                    </Tree>
+                </div>
                 <hr />
                 draggable:
-                <Tree data={this.data3}
-                    draggable={true}
-                    dropAllowed={this.dropAllowed}
-                    toggle={(eventData: EventData<Value>) => this.toggle3(eventData)}
-                    drop={(dropData: DropData<Value>) => this.drop3(dropData)}>
-                </Tree>
+                <div className="draggable">
+                    <Tree data={this.data3}
+                        draggable={true}
+                        dropAllowed={this.dropAllowed}
+                        toggle={(eventData: EventData<Value>) => this.toggle3(eventData)}
+                        drop={(dropData: DropData<Value>) => this.drop3(dropData)}>
+                    </Tree>
+                </div>
                 <hr />
                 no dots:
-                <Tree data={this.data4}
-                    nodots={true}
-                    toggle={(eventData: EventData<Value>) => this.toggle4(eventData)}>
-                </Tree>
+                <div className="no-dots">
+                    <Tree data={this.data4}
+                        nodots={true}
+                        toggle={(eventData: EventData<Value>) => this.toggle4(eventData)}>
+                    </Tree>
+                </div>
                 <hr />
                 large:
-                <Tree data={this.data5}
-                    size="large"
-                    toggle={(eventData: EventData<Value>) => this.toggle5(eventData)}>
-                </Tree>
+                <div className="large">
+                    <Tree data={this.data5}
+                        size="large"
+                        toggle={(eventData: EventData<Value>) => this.toggle5(eventData)}>
+                    </Tree>
+                </div>
                 <hr />
                 small:
-                <Tree data={this.data6}
-                    size="small"
-                    toggle={(eventData: EventData<Value>) => this.toggle6(eventData)}>
-                </Tree>
+                <div className="small">
+                    <Tree data={this.data6}
+                        size="small"
+                        toggle={(eventData: EventData<Value>) => this.toggle6(eventData)}>
+                    </Tree>
+                </div>
                 <hr />
                 dark theme:
-                <Tree data={this.data7}
-                    theme="dark"
-                    checkbox={true}
-                    draggable={true}
-                    toggle={(eventData: EventData<Value>) => this.toggle7(eventData)}
-                    change={(eventData: EventData<Value>) => this.change7(eventData)}
-                    drop={(dropData: DropData<Value>) => this.drop7(dropData)}>
-                </Tree>
+                <div className="dark-theme">
+                    <Tree data={this.data7}
+                        theme="dark"
+                        checkbox={true}
+                        draggable={true}
+                        toggle={(eventData: EventData<Value>) => this.toggle7(eventData)}
+                        change={(eventData: EventData<Value>) => this.change7(eventData)}
+                        drop={(dropData: DropData<Value>) => this.drop7(dropData)}>
+                    </Tree>
+                </div>
                 <hr />
                 contextmenu:
-                <Tree data={this.data8}
-                    toggle={(eventData: EventData<Value>) => this.toggle8(eventData)}>
-                </Tree>
+                <div className="contextmenu">
+                    <Tree data={this.data8}
+                        toggle={(eventData: EventData<Value>) => this.toggle8(eventData)}>
+                    </Tree>
+                </div>
                 <hr />
                 node id:
-                <Tree data={this.data9}
-                    preid="test_"
-                    toggle={(eventData: EventData<Value>) => this.toggle9(eventData)}>
-                </Tree>
+                <div className="node-id">
+                    <Tree data={this.data9}
+                        preid="test_"
+                        toggle={(eventData: EventData<Value>) => this.toggle9(eventData)}>
+                    </Tree>
+                </div>
             </div>
         );
     }

diff --git a/...undle-0925719f03099112221426a6241cb9f2.js → ...undle-7ad272b61b89fa2d8aafdc3bf1df254f.js b/...undle-0925719f03099112221426a6241cb9f2.js → ...undle-7ad272b61b89fa2d8aafdc3bf1df254f.js
diff --git a/demo/vue/index.html b/demo/vue/index.html
@@ -12,5 +12,5 @@
 </style>
 </head><body>
 <div id="container"></div>
-<script src="./index.bundle-0925719f03099112221426a6241cb9f2.js" crossOrigin="anonymous" integrity="sha256-JvPYNZkKjbyhJACfHiAIOtIbE2pGkJeY1vf9PSg4PFU="></script>
+<script src="./index.bundle-7ad272b61b89fa2d8aafdc3bf1df254f.js" crossOrigin="anonymous" integrity="sha256-mcj44Vi+J6SYr6cltW+Xi/CyISZbkfFJrq1vezwlwos="></script>
 </body></html>
diff --git a/demo/vue/index.ts b/demo/vue/index.ts
@@ -40,56 +40,74 @@ Vue.component("custom-node", CustomNode);
         <a href="https://github.com/plantain-00/tree-component/tree/master/demo/vue/index.ts" target="_blank">the source code of the demo</a>
         <br/>
         default:
-        <tree :data="data"
-            @toggle="toggle($event)"
-            @change="change($event)"></tree>
-        selected id: {{selectedId}}
+        <div class="default">
+            <tree :data="data"
+                @toggle="toggle($event)"
+                @change="change($event)"></tree>
+            selected id: {{selectedId}}
+        </div>
         <hr/>
         checkbox:
-        <tree :data="data2"
-            :checkbox="true"
-            @toggle="toggle2($event)"
-            @change="change2($event)"></tree>
+        <div class="checkbox">
+            <tree :data="data2"
+                :checkbox="true"
+                @toggle="toggle2($event)"
+                @change="change2($event)"></tree>
+        </div>
         <hr/>
         draggable:
-        <tree :data="data3"
-            :draggable="true"
-            :drop-allowed="dropAllowed"
-            @toggle="toggle3($event)"
-            @drop="drop3($event)"></tree>
+        <div class="draggable">
+            <tree :data="data3"
+                :draggable="true"
+                :drop-allowed="dropAllowed"
+                @toggle="toggle3($event)"
+                @drop="drop3($event)"></tree>
+        </div>
         <hr/>
         no dots:
-        <tree :data="data4"
-            :nodots="true"
-            @toggle="toggle4($event)"></tree>
+        <div class="no-dots">
+            <tree :data="data4"
+                :nodots="true"
+                @toggle="toggle4($event)"></tree>
+        </div>
         <hr/>
         large:
-        <tree :data="data5"
-            size="large"
-            @toggle="toggle5($event)"></tree>
+        <div class="large">
+            <tree :data="data5"
+                size="large"
+                @toggle="toggle5($event)"></tree>
+        </div>
         <hr/>
         small:
-        <tree :data="data6"
-            size="small"
-            @toggle="toggle6($event)"></tree>
+        <div class="small">
+            <tree :data="data6"
+                size="small"
+                @toggle="toggle6($event)"></tree>
+        </div>
         <hr/>
         dark theme:
-        <tree :data="data7"
-            theme="dark"
-            :checkbox="true"
-            :draggable="true"
-            @toggle="toggle7($event)"
-            @change="change7($event)"
-            @drop="drop7($event)"></tree>
+        <div class="dark-theme">
+            <tree :data="data7"
+                theme="dark"
+                :checkbox="true"
+                :draggable="true"
+                @toggle="toggle7($event)"
+                @change="change7($event)"
+                @drop="drop7($event)"></tree>
+        </div>
         <hr/>
         contextmenu:
-        <tree :data="data8"
-            @toggle="toggle8($event)"></tree>
+        <div class="contextmenu">
+            <tree :data="data8"
+                @toggle="toggle8($event)"></tree>
+        </div>
         <br/>
         node id:
+        <div class="node-id">
         <tree :data="data9"
             preid="test_"
             @toggle="toggle9($event)"></tree>
+        </div>
     </div>
     `,
 })

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tree-component",
-  "version": "3.3.2",
+  "version": "3.3.3",
   "description": "A reactjs, angular and vuejs tree component.",
   "main": "index.js",
   "scripts": {
@@ -31,7 +31,7 @@
     "@angular/platform-browser": "4.4.4",
     "@angular/platform-browser-dynamic": "4.4.4",
     "@types/jasmine": "2.6.0",
-    "@types/puppeteer": "0.10.2",
+    "@types/puppeteer": "0.12.0",
     "@types/react": "16.0.10",
     "@types/react-dom": "16.0.1",
     "autoprefixer": "7.1.5",
@@ -53,7 +53,7 @@
     "mkdirp": "0.5.1",
     "no-unused-export": "1.2.7",
     "postcss-cli": "4.1.1",
-    "puppeteer": "0.11.0",
+    "puppeteer": "0.12.0",
     "react": "16.0.0",
     "react-dom": "16.0.0",
     "rev-static": "3.4.1",

diff --git a/screenshots/angular-close.png b/screenshots/angular-close.png
diff --git a/screenshots/angular-deselect.png b/screenshots/angular-deselect.png
diff --git a/screenshots/angular-initial.png b/screenshots/angular-initial.png
diff --git a/screenshots/angular-open.png b/screenshots/angular-open.png
diff --git a/screenshots/angular-select.png b/screenshots/angular-select.png