diff --git a/package.json b/package.json
index 44f6d9b..6f897d7 100644
--- a/package.json
+++ b/package.json
@@ -4,11 +4,12 @@
"description": "A reactjs, angular2 and vuejs tree component.",
"main": "index.js",
"scripts": {
- "build": "tsc -p src && tsc -p demo && sass src/tree.scss > dist/tree.css && cleancss -o dist/tree.min.css dist/tree.css && webpack && npm run rev",
+ "build": "tsc -p src && tsc -p demo && sass src/tree.scss > dist/tree.css && cleancss -o dist/tree.min.css dist/tree.css && npm run minifier-template && webpack && npm run rev",
"lint": "tslint \"src/*.ts\" && stylelint \"src/*.scss\" --syntax scss",
"rev": "npm run clean-rev && rev-static",
"clean-rev": "rm -f demo/react.bundle-*.js demo/vue.bundle-*.js demo/angular.bundle-*.js",
- "image": "image2base64-cli images/*.png images/*.gif --scss src/variables.scss"
+ "image": "image2base64-cli images/*.png images/*.gif --scss src/variables.scss",
+ "minifier-template": "html-minifier --collapse-whitespace --case-sensitive --collapse-inline-tag-whitespace src/vue-node.template.html -o dist/vue-node.html && html-minifier --collapse-whitespace --case-sensitive --collapse-inline-tag-whitespace src/vue-tree.template.html -o dist/vue-tree.html && html-minifier --collapse-whitespace --case-sensitive --collapse-inline-tag-whitespace src/angular-node.template.html -o dist/angular-node.html && html-minifier --collapse-whitespace --case-sensitive --collapse-inline-tag-whitespace src/angular-tree.template.html -o dist/angular-tree.html"
},
"repository": {
"type": "git",
@@ -27,11 +28,13 @@
"@angular/forms": "2.4.6",
"@angular/platform-browser": "2.4.6",
"@angular/platform-browser-dynamic": "2.4.6",
+ "@types/node": "7.0.5",
"@types/react": "15.0.6",
"@types/react-dom": "0.14.22",
"clean-css-cli": "4.0.7",
"core-js": "2.4.1",
"image2base64-cli": "1.0.3",
+ "raw-loader": "0.5.1",
"react": "15.4.2",
"react-dom": "15.4.2",
"rev-static": "1.3.1",
diff --git a/src/angular-node.template.html b/src/angular-node.template.html
new file mode 100644
index 0000000..289be82
--- /dev/null
+++ b/src/angular-node.template.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+ {{data.text}}
+
+
+
+
\ No newline at end of file
diff --git a/src/angular-tree.template.html b/src/angular-tree.template.html
new file mode 100644
index 0000000..1b79c3a
--- /dev/null
+++ b/src/angular-tree.template.html
@@ -0,0 +1,20 @@
+
\ No newline at end of file
diff --git a/src/angular.ts b/src/angular.ts
index 31be6c5..9ad2227 100644
--- a/src/angular.ts
+++ b/src/angular.ts
@@ -3,22 +3,7 @@ import * as common from "./common";
@Component({
selector: "node",
- template: `
-
- {{data.text}}
-
-
- `,
+ template: require("raw-loader!./angular-node.html"),
})
export class NodeComponent {
@Input()
@@ -101,20 +86,7 @@ export class NodeComponent {
@Component({
selector: "tree",
- template: `
-
- `,
+ template: require("raw-loader!./angular-tree.html"),
})
export class TreeComponent {
@Input()
diff --git a/src/common.ts b/src/common.ts
index 411a4f6..d399862 100644
--- a/src/common.ts
+++ b/src/common.ts
@@ -24,7 +24,7 @@ import "tslib";
export class DoubleClick {
clicked = false;
- timer: null | number = null;
+ timer: null | NodeJS.Timer = null;
constructor(private timeout = 300) { }
diff --git a/src/react.tsx b/src/react.tsx
index 70f7100..e493a5f 100644
--- a/src/react.tsx
+++ b/src/react.tsx
@@ -39,7 +39,20 @@ class Node extends React.PureComponent<{
const markerElement = this.hasMarker ?
: null;
return (
- this.ontoggle()}> this.onchange()} onDoubleClick={() => this.ontoggle()} onMouseEnter={() => this.hover(true)} onMouseLeave={() => this.hover(false)} data-path={this.pathString}>{checkboxElement}{iconElement}{this.props.data.text}{markerElement}
+ this.ontoggle()}>
+ this.onchange()}
+ onDoubleClick={() => this.ontoggle()}
+ onMouseEnter={() => this.hover(true)}
+ onMouseLeave={() => this.hover(false)}
+ data-path={this.pathString}>
+ {checkboxElement}
+ {iconElement}
+ {this.props.data.text}
+ {markerElement}
+
{childrenElement}
);
@@ -128,7 +141,15 @@ export class Tree extends React.PureComponent<{
));
return (
-
this.ondrag(eventData)} onDragStart={eventData => this.ondragstart(eventData)} onDragEnd={eventData => this.ondragend(eventData)} onDragOver={eventData => this.ondragover(eventData)} onDragEnter={(eventData) => this.ondragenter(eventData)} onDragLeave={eventData => this.ondragleave(eventData)} onDrop={eventData => this.ondrop(eventData)}>
+ this.ondrag(eventData)}
+ onDragStart={eventData => this.ondragstart(eventData)}
+ onDragEnd={eventData => this.ondragend(eventData)}
+ onDragOver={eventData => this.ondragover(eventData)}
+ onDragEnter={(eventData) => this.ondragenter(eventData)}
+ onDragLeave={eventData => this.ondragleave(eventData)}
+ onDrop={eventData => this.ondrop(eventData)}>
{childrenElement}
diff --git a/src/vue-node.template.html b/src/vue-node.template.html
new file mode 100644
index 0000000..4000f78
--- /dev/null
+++ b/src/vue-node.template.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+ {{data.text}}
+
+
+
+
\ No newline at end of file
diff --git a/src/vue-tree.template.html b/src/vue-tree.template.html
new file mode 100644
index 0000000..1b83800
--- /dev/null
+++ b/src/vue-tree.template.html
@@ -0,0 +1,20 @@
+
\ No newline at end of file
diff --git a/src/vue.ts b/src/vue.ts
index 16d329f..dd478d8 100644
--- a/src/vue.ts
+++ b/src/vue.ts
@@ -3,22 +3,7 @@ import Component from "vue-class-component";
import * as common from "./common";
@Component({
- template: `
-
- {{data.text}}
-
-
- `,
+ template: require("raw-loader!./vue-node.html"),
props: ["data", "last", "checkbox", "path", "draggable"],
})
class Node extends Vue {
@@ -93,20 +78,7 @@ class Node extends Vue {
Vue.component("node", Node);
@Component({
- template: `
-
- `,
+ template: require("raw-loader!./vue-tree.html"),
props: ["data", "checkbox", "draggable"],
})
export class Tree extends Vue {