@keenmate/svelte-treeview 0.2.0 → 0.2.1

package/dist/TreeView.svelte

@@ -449,28 +449,26 @@ let liElements = [];
 	</svelte:fragment>
 </ContextMenu>
 
-<style>:global(.treeview) {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-:global(.treeview.show-lines) :global(ul:before) {
+<style>.treeview.show-lines ul:before {
   border-left: solid black 1px;
 }
-:global(.treeview.show-lines) :global(ul) :global(li:before) {
+.treeview.show-lines ul li:before {
   border-top: solid black 1px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
-:global(.treeview) :global(ul), :global(.treeview) :global(li) {
+.treeview ul, .treeview li {
   margin: 0;
   padding: 0;
   list-style: none;
 }
-:global(.treeview) :global(ul) {
+.treeview ul {
   margin-left: 0.4em;
   position: relative;
   margin-left: 0.3em;
 }
-:global(.treeview) :global(ul:before) {
+.treeview ul:before {
   content: "";
   display: block;
   width: 0;
@@ -479,7 +477,7 @@ let liElements = [];
   bottom: 0;
   left: 0;
 }
-:global(.treeview) :global(ul) :global(li:before) {
+.treeview ul li:before {
   content: "";
   display: block;
   width: 10px;
@@ -489,51 +487,51 @@ let liElements = [];
   top: 0.8em;
   left: 0;
 }
-:global(.treeview) :global(ul) :global(li:not(.has-children):before) {
+.treeview ul li:not(.has-children):before {
   width: 26px;
 }
-:global(.treeview) :global(ul) :global(li:last-child:before) {
+.treeview ul li:last-child:before {
   background: #fff;
   height: auto;
   top: 1em;
   bottom: 0;
 }
-:global(.treeview) :global(li) {
+.treeview li {
   margin: 0;
   padding: 0 0.8em;
   color: #555;
   font-weight: 700;
   position: relative;
 }
-:global(.treeview) :global(li:not(.has-children)) :global(.tree-item) {
+.treeview li:not(.has-children) .tree-item {
   margin-left: 14px;
 }
-:global(.treeview) :global(.tree-item) {
+.treeview .tree-item {
   display: flex;
   column-gap: 0.4em;
   align-items: center;
   padding: 4px 0;
 }
-:global(.treeview) :global(.no-arrow) {
+.treeview .no-arrow {
   padding-left: 0.5rem;
 }
-:global(.treeview) :global(.arrow) {
+.treeview .arrow {
   cursor: pointer;
   display: inline-block;
 }
-:global(.treeview) :global(.arrowDown) {
+.treeview .arrowDown {
   transform: rotate(90deg);
 }
-:global(.treeview) :global(.invisible) {
+.treeview .invisible {
   visibility: hidden;
 }
-:global(.treeview) :global(.inserting-highlighted) {
+.treeview .inserting-highlighted {
   color: red;
 }
-:global(.treeview) :global(.hover) {
+.treeview .hover {
   font-weight: bold;
 }
-:global(.treeview) :global(.insert-line) {
+.treeview .insert-line {
   position: absolute;
   left: 0;
   z-index: 99;
@@ -546,17 +544,17 @@ let liElements = [];
   margin-bottom: -2px;
   margin-top: -2px;
 }
-:global(.treeview) :global(.insert-line-child) {
+.treeview .insert-line-child {
   margin-left: calc(28px + 5em);
   background-color: red;
   height: 6px;
 }
-:global(.treeview) :global(.insert-line-wrapper) {
+.treeview .insert-line-wrapper {
   position: relative;
 }
-:global(.treeview) :global(.currently-dragged) {
+.treeview .currently-dragged {
   color: LightGray;
 }
-:global(.treeview) :global(.pointer-cursor) {
+.treeview .pointer-cursor {
   cursor: grab;
 }</style>

package/dist/tree-styles.sass

@@ -0,0 +1,106 @@
+
+$treeview-lines: solid black 1px
+.treeview
+  //will show lines if you set show-lines to root element
+  &.show-lines
+    ul
+      &:before
+        border-left: $treeview-lines
+      li:before
+        border-top: $treeview-lines
+        margin: 0
+        padding: 0
+        list-style: none
+  ul, li
+    margin: 0
+    padding: 0
+    list-style: none
+  ul
+    margin-left: 0.4em
+    position: relative
+    margin-left: .3em
+    &:before
+      content: ""
+      display: block
+      width: 0
+      position: absolute
+      top: 0
+      bottom: 0
+      left: 0
+    li:before
+      content: ""
+      display: block
+      width: 10px
+      height: 0
+      margin-top: -1px
+      position: absolute
+      top: 0.8em
+      left: 0
+    li:not(.has-children):before
+      width: 26px
+
+    li:last-child:before
+      background: #fff
+      height: auto
+      top: 1em
+      bottom: 0
+
+  li
+    margin: 0
+    padding: 0 0.8em
+    color: #555
+    font-weight: 700
+    position: relative
+    &:not(.has-children)
+      .tree-item
+        margin-left: 14px
+
+  .tree-item
+    display: flex
+    column-gap: 0.4em
+    align-items: center
+    padding: 4px 0
+
+  .div-has-children
+
+  .no-arrow
+    padding-left: .5rem
+
+  .arrow
+    cursor: pointer
+    display: inline-block
+
+  .arrowDown
+    transform: rotate(90deg)
+
+  .invisible
+    visibility: hidden
+
+  .inserting-highlighted
+    color: red
+  .hover
+    font-weight: bold
+  .insert-line
+    position: absolute
+    left: 0
+    z-index: 99
+    height: 2px
+    width: 200px
+    background-color: blue
+    display: block
+    border-radius: 3px
+    margin-left: 28px
+    margin-bottom: -2px
+    margin-top: -2px
+  .insert-line-child
+    margin-left: calc( 28px + 5em )
+    background-color: red
+    height: 6px
+
+  .insert-line-wrapper
+    position: relative
+
+  .currently-dragged
+    color: LightGray
+  .pointer-cursor
+    cursor: grab

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/svelte-treeview",
-	"version": "0.2.0",
+	"version": "0.2.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",