Update readme

KeenMate · Dec 21, 2023 · f507dd5 · f507dd5
1 parent b000f3c
commit f507dd5
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 73 deletions.
diff --git a/README.md b/README.md
@@ -34,7 +34,7 @@ Font awesome is required
   you HAVE to set this to unique string
 - ***maxExpandedDepth*** (number, default: *3*)
 - ***filteredTree*** (array of nodes, default: *null*)
-   searched tree
+   Nodes that should be rendered (same as tree if null)
 - ***checkboxes*** (string "none"|"perNode"|"All", default: *false*)  
    When all checkboxes will be shown if **checkboxVisible** isnt false,whe perNode only nodes with **checkboxVisible** set to true will be shown. None will override **checkboxVisible** .When click on checkbox it will toggle selected on clicked node. You can specify this behavior with **recursive**, **onlyLeafCheckboxes** and **checkboxesDisabled**.
 - ***recursive*** (bool, default: *false*)  
@@ -63,20 +63,29 @@ Font awesome is required
   If true, will not change last part of nodePath of moved node. Use this is=f last part of your nodePath is **unique!**.  
 - ***expandedLevel*** (number,default:0)  
   will expand all nodes until this specific level(starting from 0). Set it to -1 to disable it. **expanded** has priority over this. It wont modify **expanded** on nodes so you can dynamicly change this and tree will rerender
-- ***nodePath*** (string, default: *"nodePath"*)  
-- ***hasChildren*** (string, default: *"hasChildren"*)  
-- ***expanded*** (string, default: *"__expanded"*)  
-- ***selected*** (string, default: *"__selected"*)  
-- ***useCallback*** (string, default: *"__useCallback"*)  
-- ***priority*** (string, default: *"__priority"*)  
-- ***isDraggable*** (string, default: *"isDraggable"*)  
-  when false, wont allow you to start dragging element
-- ***insertDisabled*** (string, default: *"insertDisabled"*)  
-  when true, you wont be able to drop element below are above nod. You still be able to nest it. When dragging over element it will always nest.
-- ***nestDisabled*** (string, default: *"nestDisabled"*)  
-  when true, wont be able to drop node inside (nest it)
-- ***checkboxVisible*** (string, default: *"checkboxVisible"*)  
-  modifies visibility of checkbox. When checkboxes are "none" wont show them event if this is true
+- ***props***
+  property names used to store stuff in node objects
+- ***readonly***(bool,false)
+  when true it will disable all expansion
+- ***separator***(string,default: ".")
+  separator in nodePath
+
+
+```js
+const defaultProps = {
+ nodePath: "nodePath",
+ hasChildren: "hasChildren",
+ expanded: "__expanded",
+ selected: "__selected",
+ useCallback: "__useCallback",
+ priority: "priority",
+ isDraggable: "isDraggable",
+ insertDisabled: "insertDisabled",
+ nestDisabled: "nestDisabled",
+ checkbox: "checkbox",
+};
+```
+
 - ***treeClass*** (string css class, default: *"treeview"*)  
   Setting this to anything else that default value will disable all styling so you can set everything yourself
 - ***nodeClass*** (string css class, default: *""*)  
@@ -86,6 +95,7 @@ Font awesome is required
 - ***expandClass*** (string css class, default: *"inserting-highlighted"*)  
 - ***inserLineClass*** (string css class, default: *""*)  
 - ***inserLineNestClass*** (string css class, default: *""*)  
+- ***currentlyDraggedClass*** (string css class, default: *"currently-dragged"*)  
 
 ## Events
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/lib/TreeView.svelte b/src/lib/TreeView.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-
-
 	// TODO this is just temporary untill i finish migrating
 	// @ts-nocheck
 
@@ -34,23 +32,24 @@
 	export let onlyLeafCheckboxes = false; //bool
 	//true = disabel hide = false
 	export let checkboxesDisabled = false; //bool
+
 	//will allow you to move nodes between nodes and reorder them
 	export let dragAndDrop = false; //bool
 	//will nest of at least one of them is meet
 	export let timeToNest = null;
 	export let pixelNestTreshold = defaultPixelTreshold;
-	export let separator = '.';
-	export let showContexMenu = false;
-	export let enableVerticalLines = false;
-	export let readonly = false;
-
 	//change to false when last segment of nodePath is Guaranteed to be unqiue
 	export let recalculateNodePath = true;
-	export let expandedLevel = 0;
-
 	//callback for dynamically disabling drop on specific node
 	export let dragEnterCallback = null;
 	export let beforeMovedCallback = null;
+
+	export let showContexMenu = false;
+	export let enableVerticalLines = false;
+	export let readonly = false;
+	export let separator = '.';
+
+	export let expandedLevel = 0;
 	export let expandCallback = null;
 
 	//* classes for customization of tree
@@ -66,6 +65,7 @@
 	//* properties
 	export let props = {};
 	$: propNames = { ...defaultPropNames, ...props };
+
 	//! DONT SET ONLY USED INTERNALLY
 	//TODO use context instead
 	//path of currently dragged node

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -25,10 +25,12 @@
 			<li class="nav-item active">
 				<a class="nav-link" href="/files">Files</a>
 			</li>
-			<li class="nav-item active">
+			<!-- <li class="nav-item active">
 				<a class="nav-link" href="/dhl-demo">DHL demo</a>
-			</li>
+			</li> -->
 		</ul>
 	</div>
 </nav>
-<slot />
+<div class="container">
+	<slot />
+</div>
diff --git a/src/routes/files/+page.svelte b/src/routes/files/+page.svelte
@@ -5,6 +5,7 @@
 	type file = { path: string; hasChildren: boolean; name: string };
 
 	import Files from '../../data/files.js';
+	import { Card } from '@keenmate/svelte-adminlte';
 
 	let tree: file[] = [];
 
@@ -16,48 +17,64 @@
 	let showObject: boolean;
 </script>
 
-<label for="showObjects">Show node objects</label>
-<input id="showObjects" type="checkbox" bind:checked={showObject} />
+<div class="row mt-3">
+	<div class="col-lg-8 col-12">
+		<Card>
+			<TreeView
+				bind:tree
+				treeId="tree"
+				let:node
+				on:selection={(e) => console.log(e.detail)}
+				on:expansion={(e) => console.log(e.detail)}
+				on:moved={(e) => console.log(e.detail)}
+				recalculateNodePath={false}
+				props={{ nodePath: 'path' }}
+				separator="/"
+				showContexMenu
+				recursive
+				expandedLevel={-1}
+			>
+				{#if showObject}
+					{JSON.stringify(node)}
+				{:else}
+					{#if node.hasChildren}
+						<img
+							src="https://static.vecteezy.com/system/resources/thumbnails/000/439/792/small/Basic_Ui__28178_29.jpg"
+							alt="folder"
+							height="20"
+						/>
+					{:else}
+						<img
+							src="https://cdn-icons-png.flaticon.com/512/124/124837.png"
+							alt="folder"
+							height="20"
+						/>
+					{/if}
+					{node.name}
+				{/if}
 
-<TreeView
-	bind:tree
-	treeId="tree"
-	let:node
-	on:selection={(e) => console.log(e.detail)}
-	on:expansion={(e) => console.log(e.detail)}
-	on:moved={(e) => console.log(e.detail)}
-	recalculateNodePath={false}
-	props={{ nodePath: 'path' }}
-	separator="/"
-	showContexMenu
-	recursive
-	expandedLevel={-1}
->
-	{#if showObject}
-		{JSON.stringify(node)}
-	{:else}
-		{#if node.hasChildren}
-			<img
-				src="https://static.vecteezy.com/system/resources/thumbnails/000/439/792/small/Basic_Ui__28178_29.jpg"
-				alt="folder"
-				height="20"
-			/>
-		{:else}
-			<img src="https://cdn-icons-png.flaticon.com/512/124/124837.png" alt="folder" height="20" />
-		{/if}
-		{node.name}
-	{/if}
+				<svelte:fragment slot="context-menu" let:node>
+					<MenuOption text={node.path} isDisabled />
+					<MenuDivider />
+					<MenuOption
+						on:click={() =>
+							window.open(
+								'https://github.com/KeenMate/phoenix-svelte-adminlte/blob/sveltekit/' + node.path
+							)}
+					>
+						Open on github
+					</MenuOption>
+				</svelte:fragment>
+			</TreeView>
+		</Card>
+	</div>
+	<div class="col-lg-4 col-12">
+		<Card>
+			This demo shows how treeview can be used to browse files.
+			<br />
+			<label for="showObjects">Show node objects</label>
 
-	<svelte:fragment slot="context-menu" let:node>
-		<MenuOption text={node.path} isDisabled />
-		<MenuDivider />
-		<MenuOption
-			on:click={() =>
-				window.open(
-					'https://github.com/KeenMate/phoenix-svelte-adminlte/blob/sveltekit/' + node.path
-				)}
-		>
-			Open on github
-		</MenuOption>
-	</svelte:fragment>
-</TreeView>
+			<input id="showObjects" type="checkbox" bind:checked={showObject} />
+		</Card>
+	</div>
+</div>
diff --git a/src/routes/files/+page.ts b/src/routes/files/+page.ts
@@ -1 +1,2 @@
-export const prerender = true;
+export const prerender = false; // 
+export const ssr = false