@keenmate/svelte-treeview 1.1.0-beta.3 → 1.1.1

package/README.md

@@ -4,9 +4,9 @@ The most elaborate treeview for svelte on earth (or even in our galaxy).
 
 ## Features
 
-- load new nodes whne expanding
-- customization of all object properties
-- checkboxes enabled on whole tree or based on property
+- load new nodes when expanding
+- choose what object properties to use to get necessary information (id, path, ...)
+- enable checkboxes on whole tree or just per node
 - recursive seletion mode, where leafes can be selected
 - build-in support for search
 - drag and drop functionality controlable per node
@@ -17,7 +17,9 @@ The most elaborate treeview for svelte on earth (or even in our galaxy).
 
 install the package `@keenmate/svelte-treeview` using your favourite package manager.
 
-**Font awesome is required for expand/collapse icons.**
+> [!warning]
+> **Font awesome is required for expand/collapse icons.**
+> If you wish to not use FA, you need to change all icons in classes properties
 
 ## Minimal usage
 
@@ -44,10 +46,11 @@ You can specify which keys to use for what properties by setting **props**.
 
 For more examples see `src/routes/`
 
-## NodeId and NodePath
-
-By default, nodeId uses same property is nodePath.
-You can change this by setting nodoId in prosp.
+> [!note]
+> Both **id** and **path** is required for tree to work.
+> By default tree uses nodePath property for both.
+> So if you change propery fro path, you need to also change id property.
+> You can change both using props attribute.
 
 ## Properties
 
@@ -82,10 +85,14 @@ You can change this by setting nodoId in prosp.
 ## Custom classes
 
 ## Drag and drop
+> [!NOTE]  
+> In memory drag and drop is not yet supported. Tree just dispatches `moved` event with dragged node(`node`), target node (`target`) and insertion type (`insertType`).
+> In future, this package will export function, that will allow you to easily compute new tree on frontend.
+
 
 ## Keyboard navigation
 
 Enable keyboard navigation by setting `useKeyboardNavigation` to true.
 
 Use arrows to navigata tree. First you need to focus some node,
-you can use `focusNode` to do that. Use Enter or Space to select checkbox.
+you can use `focusNode` to do that. Use Enter or Space to select checkbox.

package/dist/Branch.svelte

@@ -127,10 +127,10 @@ function getHighlighMode(node, highlightedNode, insertionType) {
 						type="button"
 						tabindex="-1"
 					>
-						<i class="fa-fw arrow {expanded ? classes.collapseIcon : classes.expandIcon}" />
+						<i class="fixed-icon arrow {expanded ? classes.collapseIcon : classes.expandIcon}" />
 					</button>
 				{:else}
-					<span class="fa-fw" />
+					<span class="fixed-icon" />
 				{/if}
 
 				<Checkbox
@@ -151,7 +151,7 @@ function getHighlighMode(node, highlightedNode, insertionType) {
 						on:dragover|stopPropagation={(e) =>
 							handleDragOver(e, node, liElements[getNodeId(node)], true)}
 					>
-						<i class="fa-fw {classes.nestIcon}" />
+						<i class="fixed-icon {classes.nestIcon}" />
 
 						{#if effectiveHighlight === InsertionType.nest}
 							<slot name="nest-highlight" />

package/dist/TreeView.svelte

@@ -509,4 +509,9 @@ function debugLog(...data) {
 }
 :global(.treeview) :global(.expansion-button) {
   all: unset;
+}
+:global(.treeview) :global(.fixed-icon) {
+  text-align: center;
+  width: 1.25em;
+  min-width: 1.25em;
 }</style>

package/dist/tree-styles.sass

@@ -103,3 +103,8 @@ $treeview-lines: solid black 1px
     cursor: grab
   .expansion-button
     all: unset
+  .fixed-icon
+    text-align: center
+    width: 1.25em
+    // fix deformation on small screens
+    min-width: 1.25em

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/svelte-treeview",
-	"version": "1.1.0-beta.3",
+	"version": "1.1.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -70,4 +70,4 @@
 		"lodash.uniqby": "^4.7.0",
 		"svelte-highlight": "^7.6.1"
 	}
-}
+}