v2

README.md

@@ -14,7 +14,7 @@ A reactjs, angular2 and vuejs tree component.
 #### link css from jstree
 
 ```html
-<link rel="stylesheet" href="./node_modules/tree-component/dist/tree.css" />
+<link rel="stylesheet" href="./node_modules/tree-component/dist/tree.min.css" />
 ```
 
 #### vuejs component demo
@@ -139,3 +139,15 @@ type DropData = {
 + checkbox
 + custom icon or no icon
 + drag and drop
+
+#### changelogs
+
+##### v2
+
+```
+// v1:
+<link rel="stylesheet" href="./node_modules/jstree/dist/themes/default/style.min.css" />
+
+// v2:
+<link rel="stylesheet" href="./node_modules/tree-component/dist/tree.min.css" />
+```

demo/common.ts

@@ -60,7 +60,7 @@ const rawData: Data[] = [
                 icon: false,
             },
             {
-                text: "custom icon node 23",
+                text: "custom icon node 24",
                 value: { id: 24 },
                 icon: "my-custom-icon",
             },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tree-component",
-  "version": "1.5.0",
+  "version": "2.0.0",
   "description": "A reactjs, angular2 and vuejs tree component.",
   "main": "index.js",
   "scripts": {

src/tree.scss

@@ -8,10 +8,10 @@ $disabled-bg-color: #efefef;
 $clicked-bg-color: #beebff;
 $clicked-shadow-color: #999;
 $search-result-color: #8b0000;
-$responsive: true;
 $base-height: 40px;
+$image-height: 32px;
 
-@mixin tree-theme ($base-height, $image, $image-height) {
+@mixin tree-theme ($base-height) {
   $correction: ($image-height - $base-height) / 2;
 
   .tree-node {
@@ -40,11 +40,8 @@ $base-height: 40px;
 
   .tree-node,
   .tree-icon {
-    background-image: url("#{$image}");
-  }
-
-  .tree-node {
-    background-position: -($image-height * 9 + $correction) #{-$correction};
+    background-image: url("#{$node-png}");
+    background-position: #{-$correction} #{-$correction};
     background-repeat: repeat-y;
   }
 
@@ -53,19 +50,24 @@ $base-height: 40px;
   }
 
   .tree-open > .tree-ocl {
-    background-position: -($image-height * 4 + $correction) #{-$correction};
+    background-image: url("#{$open-png}");
+    background-position: #{-$correction} #{-$correction};
   }
 
   .tree-closed > .tree-ocl {
-    background-position: -($image-height * 3 + $correction) #{-$correction};
+    background-image: url("#{$closed-png}");
+    background-position: #{-$correction} #{-$correction};
   }
 
   .tree-leaf > .tree-ocl {
-    background-position: -($image-height * 2 + $correction) #{-$correction};
+    background-image: url("#{$leaf-png}");
+    background-position: #{-$correction} #{-$correction};
   }
 
-  .tree-themeicon {
-    background-position: -($image-height * 8 + $correction) #{-$correction};
+  .tree-themeicon,
+  .tree-folder {
+    background-image: url("#{$folder-png}");
+    background-position: #{-$correction} #{-$correction};
   }
 
   > .tree-no-dots {
@@ -75,10 +77,12 @@ $base-height: 40px;
     }
 
     .tree-open > .tree-ocl {
-      background-position: -($image-height * 1 + $correction) #{-$correction};
+      background-image: url("#{$open-no-dot-png}");
+      background-position: #{-$correction} #{-$correction};
     }
 
     .tree-closed > .tree-ocl {
+      background-image: url("#{$closed-no-dot-png}");
       background-position: #{-$correction} #{-$correction};
     }
   }
@@ -96,46 +100,49 @@ $base-height: 40px;
   }
 
   .tree-checkbox {
-    background-position: -($image-height * 5 + $correction) #{-$correction};
+    background-image: url("#{$unchecked-png}");
+    background-position: #{-$correction} #{-$correction};
 
     &:hover {
-      background-position: -($image-height * 5 + $correction) #{-($image-height * 1 + $correction)};
+      background-image: url("#{$unchecked-hover-png}");
+      background-position: #{-$correction} #{-$correction};
     }
   }
 
   &.tree-checkbox-selection .tree-clicked,
   .tree-checked {
     > .tree-checkbox {
-      background-position: -($image-height * 7 + $correction) #{-$correction};
+      background-image: url("#{$checked-png}");
+      background-position: #{-$correction} #{-$correction};
 
       &:hover {
-        background-position: -($image-height * 7 + $correction) #{-($image-height * 1 + $correction)};
+        background-image: url("#{$checked-hover-png}");
+        background-position: #{-$correction} #{-$correction};
       }
     }
   }
 
   .tree-anchor {
     > .tree-undetermined {
-      background-position: -($image-height * 6 + $correction) #{-$correction};
+      background-image: url("#{$undetermined-png}");
+      background-position: #{-$correction} #{-$correction};
 
       &:hover {
-        background-position: -($image-height * 6 + $correction) #{-($image-height * 1 + $correction)};
+        background-image: url("#{$undetermined-hover-png}");
+        background-position: #{-$correction} #{-$correction};
       }
     }
   }
 
   .tree-themeicon-custom {
     background-color: transparent;
     background-image: none;
-    background-position: 0 0;
+    background-repeat: no-repeat;
   }
 
   .tree-file {
-    background: url("#{$image}") -($image-height * 3 + $correction) -($image-height * 2 + $correction) no-repeat;
-  }
-
-  .tree-folder {
-    background: url("#{$image}") -($image-height * 8 + $correction) -($correction) no-repeat;
+    background-image: url("#{$file-png}");
+    background-position: #{-$correction} #{-$correction};
   }
 
   > .tree-container-ul > .tree-node {
@@ -336,16 +343,16 @@ $base-height: 40px;
 }
 
 .tree-#{$theme-name} {
-  @include tree-theme(24px, "32px.png", 32px);
+  @include tree-theme(24px);
 }
 
-.tree-#{$theme-name}-small {
-  @include tree-theme(18px, "32px.png", 32px);
-}
+// .tree-#{$theme-name}-small {
+//   @include tree-theme(18px);
+// }
 
-.tree-#{$theme-name}-large {
-  @include tree-theme(32px, "32px.png", 32px);
-}
+// .tree-#{$theme-name}-large {
+//   @include tree-theme(32px);
+// }
 
 .tree-#{$theme-name},
 .tree-#{$theme-name}-small,
@@ -362,138 +369,3 @@ $base-height: 40px;
     -webkit-filter: grayscale(100%);
   }
 }
-
-@if $responsive == true {
-  .tree-#{$theme-name}-responsive {
-    @media (max-width: 768px) {
-      .tree-icon {
-        background-image: url("#{$base-height}.png");
-      }
-
-      .tree-node,
-      .tree-leaf > .tree-ocl {
-        background: transparent;
-      }
-
-      .tree-node {
-        min-height: $base-height;
-        line-height: $base-height;
-        margin-left: $base-height;
-        min-width: $base-height;
-        white-space: nowrap;
-      }
-
-      .tree-anchor {
-        line-height: $base-height;
-        height: $base-height;
-      }
-
-      .tree-icon,
-      .tree-icon:empty {
-        width: $base-height;
-        height: $base-height;
-        line-height: $base-height;
-      }
-
-      > .tree-container-ul > .tree-node {
-        margin-left: 0;
-      }
-
-      .tree-ocl,
-      .tree-themeicon,
-      .tree-checkbox {
-        background-size: ($base-height * 3) ($base-height * 6);
-      }
-
-      .tree-leaf > .tree-ocl {
-        background: transparent;
-      }
-
-      .tree-open > .tree-ocl {
-        background-position: 0 0 !important;
-      }
-
-      .tree-closed > .tree-ocl {
-        background-position: 0 #{-($base-height * 1)} !important;
-      }
-
-      .tree-themeicon {
-        background-position: -($base-height * 1) #{-($base-height * 1)};
-      }
-
-      .tree-checkbox,
-      .tree-checkbox:hover {
-        background-position: -($base-height * 1) #{-($base-height * 2)};
-      }
-
-      &.tree-checkbox-selection .tree-clicked > .tree-checkbox,
-      &.tree-checkbox-selection .tree-clicked > .tree-checkbox:hover,
-      .tree-checked > .tree-checkbox,
-      .tree-checked > .tree-checkbox:hover {
-        background-position: 0 #{-($base-height * 2)};
-      }
-
-      .tree-anchor > .tree-undetermined,
-      .tree-anchor > .tree-undetermined:hover {
-        background-position: 0 #{-($base-height * 3)};
-      }
-
-      .tree-anchor {
-        font-weight: bold;
-        font-size: 1.1em;
-        text-shadow: 1px 1px white;
-      }
-
-      .tree-children .tree-open + .tree-open {
-        box-shadow: none;
-      }
-
-      .tree-node,
-      .tree-icon,
-      .tree-node > .tree-ocl,
-      .tree-themeicon,
-      .tree-checkbox {
-        background-image: url("#{$base-height}.png");
-        background-size: ($base-height * 3) ($base-height * 6);
-      }
-
-      .tree-node {
-        background-position: -($base-height * 2) 0;
-        background-repeat: repeat-y;
-      }
-
-      .tree-last {
-        background: transparent;
-      }
-
-      .tree-leaf > .tree-ocl {
-        background-position: -($base-height * 1) #{-($base-height * 3)};
-      }
-
-      .tree-last > .tree-ocl {
-        background-position: -($base-height * 1) #{-($base-height * 3)};
-      }
-
-      .tree-themeicon-custom {
-        background-color: transparent;
-        background-image: none;
-        background-position: 0 0;
-      }
-
-      .tree-file {
-        background: url("#{$base-height}.png") 0 #{-($base-height * 4)} no-repeat;
-        background-size: ($base-height * 3) ($base-height * 6);
-      }
-
-      .tree-folder {
-        background: url("#{$base-height}.png") -($base-height * 1) #{-($base-height * 1)} no-repeat;
-        background-size: ($base-height * 3) ($base-height * 6);
-      }
-
-      > .tree-container-ul > .tree-node {
-        margin-left: 0;
-        margin-right: 0;
-      }
-    }
-  }
-}